/* * DDS Journal — base stylesheet. * Mobile-first: unqualified rules are the 390px design. Two breakpoints * widen the layout — 768px (tablet) and 1200px (desktop, ~1440 canvas). * Never add a third breakpoint without updating this comment and the * contrast/CLS harnesses that assume these two. * * Colour tokens come from theme.json (--wp--preset--color--*). Spacing * tokens come from theme.json (--wp--preset--spacing--*, 4pt scale). * Radius tokens: --wp--custom--radius--{sm,md,full} (2px/4px/999px). * * GOLD TEXT RULE (B1): #c9a84c / #e8c84a are used as TEXT only inside a * dark-background context (.dds-section--dark/--darkest, .dds-hero, * .dds-header, .dds-footer, .dds-drawer, .dds-fairwear, .dds-hub-header). * On cream/paper it is used only as a button fill with dark text on top, * never as the text colour itself. _work/wo175/harness/contrast.mjs * asserts this on the rendered page. */ /* -------------------------------------------------------------------- */ /* Top-level block gaps (WO-MAX-176 A3a) */ /* -------------------------------------------------------------------- */ /* Moved here from Global Styles custom CSS (post 69595, the 2026-09-27 audit fix); Cowork deletes that copy once 0.1.2 is verified live. Core prints `:root :where(.wp-site-blocks) > *` (specificity 0,1,0) with a 24px block-gap margin, and this file may load before or after it, so each rule is written at 0,2,0 to win in either order instead of relying on load order. */ :root .wp-site-blocks > * { margin-block-start: 0; } .dds-header > .dds-headerbar { margin-block-start: 0; } .dds-hub-strip.dds-hub-strip { padding-block: 16px; } /* WO-MAX-176 A3 gate (no horizontal scroll at 390px): post bodies carry bare URLs as link text (21989 has five, 274px too wide at 390, locally on 0.1.1 and 0.1.2 alike). Break them rather than the page. */ .wp-block-post-content { overflow-wrap: anywhere; } /* -------------------------------------------------------------------- */ /* Reset + base */ /* -------------------------------------------------------------------- */ *, *::before, *::after { box-sizing: border-box; } html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; } @media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } } body { margin: 0; background: var(--wp--preset--color--paper); color: var(--wp--preset--color--deep); font-family: var(--wp--preset--font-family--body); -webkit-font-smoothing: antialiased; } img, svg { max-width: 100%; height: auto; display: block; } a { color: var(--wp--preset--color--teal); } a:hover { color: var(--wp--preset--color--forest); } a:focus-visible, button:focus-visible, input:focus-visible { outline: 2px solid var(--wp--preset--color--gold-bright); outline-offset: 2px; } .screen-reader-text { border: 0; clip: rect(1px, 1px, 1px, 1px); clip-path: inset(50%); height: 1px; margin: -1px; overflow: hidden; padding: 0; position: absolute; width: 1px; word-wrap: normal !important; } .screen-reader-text:focus { background: var(--wp--preset--color--cream); clip: auto !important; clip-path: none; color: var(--wp--preset--color--deep); display: block; height: auto; width: auto; padding: var(--wp--preset--spacing--15); z-index: 100000; left: var(--wp--preset--spacing--10); top: var(--wp--preset--spacing--10); } .dds-eyebrow { display: inline-flex; align-items: center; gap: 8px; font-family: var(--wp--preset--font-family--eyebrow); font-size: var(--wp--preset--font-size--x-small); letter-spacing: 0.18em; text-transform: uppercase; font-weight: 600; color: var(--wp--preset--color--teal); } .dds-eyebrow--gold { color: var(--wp--preset--color--gold-bright); } /* WO-175 fix-round (B10 touch targets, MEASURED 21px). .dds-eyebrow is mostly a plain label (not a target at all); core's wp:post-terms block puts the class on a wrapping
(class="taxonomy-category dds-eyebrow wp-block-post-terms"), not the itself, so an a.dds-eyebrow selector never matches -- target the descendant link instead. */ .dds-eyebrow a { display: inline-flex; align-items: center; min-height: 44px; } .dds-btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 44px; padding: 0 20px; border-radius: var(--wp--custom--radius--sm); font-weight: 700; font-size: 0.9375rem; text-decoration: none; border: 1px solid transparent; transition: transform 0.15s ease, background-color 0.15s ease; } .dds-btn--gold { background: var(--wp--preset--color--gold-bright); color: var(--wp--preset--color--deep); } .dds-btn--gold:hover { background: var(--wp--preset--color--gold); color: var(--wp--preset--color--deep); } .dds-btn--outline { border-color: var(--wp--preset--color--gold); color: var(--wp--preset--color--on-dark); } .dds-btn--outline-on-dark { border-color: var(--wp--preset--color--cream); color: var(--wp--preset--color--cream); } .dds-btn--dark { background: var(--wp--preset--color--forest); color: var(--wp--preset--color--cream); } @media (hover: hover) { .dds-btn:hover { transform: translateY(-1px); } } .dds-pill { /* WO-175 fix-round (B10 touch targets, MEASURED 40px): 44px is the floor. */ display: inline-flex; align-items: center; gap: 6px; height: 44px; padding: 0 14px; border-radius: var(--wp--custom--radius--full); font-weight: 600; font-size: 0.875rem; border: 1px solid var(--wp--preset--color--deep); color: var(--wp--preset--color--deep); text-decoration: none; white-space: nowrap; } .dds-pill--active, .dds-hubpills .dds-pill--active { background: var(--wp--preset--color--gold-bright); border-color: var(--wp--preset--color--gold-bright); color: var(--wp--preset--color--deep); } .dds-pill__count { font-size: 0.75rem; opacity: 0.75; } .dds-pill-row, .dds-hub-strip, .dds-hubpills { display: flex; flex-wrap: wrap; gap: 8px; } .dds-hubpills { overflow-x: auto; padding-bottom: 2px; } .dds-hubpills .dds-pill { border-color: var(--wp--preset--color--emerald); color: var(--wp--preset--color--on-dark); flex-shrink: 0; } /* WO-MAX-176 A3f (audit: 1.44:1). The rule above has the same specificity as `.dds-hubpills .dds-pill--active` and comes later, so the ACTIVE hub pill got on-dark text on a gold-bright fill. Deep on gold-bright is ~11:1. */ .dds-hubpills .dds-pill.dds-pill--active { background: var(--wp--preset--color--gold-bright); border-color: var(--wp--preset--color--gold-bright); color: var(--wp--preset--color--deep); } /* WO-175 fix-round (B10 touch targets, MEASURED 44px min): a standalone link styled only by font-weight has a tap target equal to its text line-box, well under 44px. inline-flex + min-height keeps the link inline where it's used (proof-grid.php, category.html -- both are standalone links, never mid-sentence text) while giving it a real tap area. */ .dds-link-strong { font-weight: 600; display: inline-flex; align-items: center; min-height: 44px; } .dds-lead-strong { font-family: var(--wp--preset--font-family--display); font-weight: 700; font-size: var(--wp--preset--font-size--large); margin: 0; } .dds-fineprint { font-size: var(--wp--preset--font-size--x-small); color: var(--wp--preset--color--muted); } /* WO-175 fix-round (B10 axe color-contrast, MEASURED 2.18:1 on #0d2818, needs 4.5:1): .dds-fineprint is used on BOTH light backgrounds (page-newsletter.html, page-tools.html -- .dds-section with no --dark modifier, i.e. cream; --muted is fine there, not touched) AND dark ones (illustration credit captions in boston-band.php / gazette-band.php / inc/blocks.php's figcaptions, always inside a .dds-section--dark or .dds-hub-header__cover card). --muted is calibrated for cream and fails on the dark card specifically -- scope the override to the dark context only, matching the existing .dds-section--dark p / .dds-hub-header__cover figcaption pattern already in this file (see the rule immediately above), rather than changing the class's colour everywhere. */ .dds-section--dark .dds-fineprint, .dds-section--darkest .dds-fineprint, .dds-hero .dds-fineprint, .dds-hub-header .dds-fineprint, .dds-hub-header__cover .dds-fineprint { color: var(--wp--preset--color--on-dark-faint); } .dds-empty { color: var(--wp--preset--color--muted); font-style: italic; } /* -------------------------------------------------------------------- */ /* Sections */ /* -------------------------------------------------------------------- */ .dds-section, .dds-hero, .dds-hub-header { padding: var(--wp--preset--spacing--40) 16px; display: flex; flex-direction: column; gap: var(--wp--preset--spacing--30); } .dds-section--tight { padding-top: var(--wp--preset--spacing--30); padding-bottom: var(--wp--preset--spacing--30); } .dds-section--dark, .dds-hero, .dds-hub-header { background: var(--wp--preset--color--forest); color: var(--wp--preset--color--cream); } .dds-section--darkest { background: var(--wp--preset--color--deep); color: var(--wp--preset--color--cream); } .dds-section--dark p, .dds-hero p, .dds-hub-header p, .dds-section--darkest p { color: var(--wp--preset--color--on-dark); } .dds-section--dark a:not(.dds-btn), .dds-hero a:not(.dds-btn) { color: var(--wp--preset--color--cream); } .dds-hero__eyebrow { display: flex; align-items: center; gap: 8px; font-family: var(--wp--preset--font-family--eyebrow); font-size: var(--wp--preset--font-size--x-small); letter-spacing: 0.18em; text-transform: uppercase; color: var(--wp--preset--color--gold-bright); } .dds-hero__dot { width: 7px; height: 7px; border-radius: 999px; background: var(--wp--preset--color--emerald); display: inline-block; } .dds-hero__title, .wp-block-post-title.dds-hero__title { margin: 0; font-family: var(--wp--preset--font-family--display); font-size: var(--wp--preset--font-size--display); line-height: 1.05; font-weight: 700; } .dds-hero__title em { font-style: italic; color: var(--wp--preset--color--gold-bright); } .dds-hero__lead { margin: 0; font-size: var(--wp--preset--font-size--medium); line-height: 1.55; max-width: 62ch; } .dds-hero__ctas { display: flex; flex-direction: column; gap: 12px; } .dds-archive__intro p { max-width: 68ch; } .dds-archive__intro { font-size: var(--wp--preset--font-size--medium); } .dds-hub-header__cover { margin: 0; } .dds-hub-header__cover-img { width: 100%; height: auto; border-radius: var(--wp--custom--radius--md); aspect-ratio: 1200 / 800; object-fit: cover; } .dds-hub-header__cover figcaption, .dds-hub-header__cover .dds-fineprint { margin-top: 6px; color: var(--wp--preset--color--on-dark-faint); } .dds-band-figure { margin: 0; } .dds-band-image { width: 100%; height: auto; border-radius: var(--wp--custom--radius--md); aspect-ratio: 1200 / 800; object-fit: cover; } /* -------------------------------------------------------------------- */ /* Cards */ /* -------------------------------------------------------------------- */ .dds-card-grid { display: grid; grid-template-columns: 1fr; gap: var(--wp--preset--spacing--30); } .dds-card { display: flex; flex-direction: column; gap: 10px; color: var(--wp--preset--color--deep); text-decoration: none; } .dds-card__media { height: 200px; border-radius: var(--wp--custom--radius--md); background: var(--wp--preset--color--placeholder); overflow: hidden; } .dds-card__media img { width: 100%; height: 100%; object-fit: cover; } /* WO-MAX-176 A3b: a post with no featured image renders NO media slot (inc/blocks.php); the card keeps its rhythm in the grid with a rule on top instead of an empty beige box. */ .dds-card--no-media { border-top: 3px solid var(--wp--preset--color--gold); padding-top: 14px; } .dds-card__body { display: flex; flex-direction: column; gap: 8px; } .dds-card__title { font-family: var(--wp--preset--font-family--display); font-size: var(--wp--preset--font-size--x-large); line-height: 1.2; font-weight: 700; color: var(--wp--preset--color--deep); } .dds-card__meta { font-size: var(--wp--preset--font-size--x-small); color: var(--wp--preset--color--muted); } @media (hover: hover) { .dds-card:hover .dds-card__title { color: var(--wp--preset--color--teal); } .dds-card:hover { transform: translateY(-2px); } } .dds-card { transition: transform 0.18s ease; } .dds-latest-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; } .dds-latest-list__item { border-top: 1px solid var(--wp--preset--color--line); } .dds-latest-list__item a { display: flex; flex-direction: column; gap: 4px; padding: 14px 0; text-decoration: none; color: var(--wp--preset--color--deep); } .dds-latest-list__title { font-family: var(--wp--preset--font-family--display); font-weight: 700; font-size: var(--wp--preset--font-size--large); } .dds-latest-list__meta { font-size: var(--wp--preset--font-size--x-small); color: var(--wp--preset--color--muted); } .dds-archive-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: var(--wp--preset--spacing--20); } .dds-archive-list > li { border-top: 1px solid var(--wp--preset--color--line); padding-top: var(--wp--preset--spacing--20); } .dds-archive-list__title a { text-decoration: none; color: var(--wp--preset--color--deep); } /* -------------------------------------------------------------------- */ /* Proof grid + Fair Wear */ /* -------------------------------------------------------------------- */ .dds-proof-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; } .dds-proof-grid__item { padding: 14px; background: var(--wp--preset--color--paper); border: 1px solid var(--wp--preset--color--line); border-radius: var(--wp--custom--radius--md); font-family: var(--wp--preset--font-family--display); font-weight: 700; font-size: var(--wp--preset--font-size--medium); } .dds-proof-grid__note { font-size: var(--wp--preset--font-size--small); color: var(--wp--preset--color--muted); margin: 0; } .dds-fairwear { padding: 14px; background: var(--wp--preset--color--forest); border-radius: var(--wp--custom--radius--md); color: var(--wp--preset--color--cream); display: flex; flex-direction: column; gap: 6px; } .dds-fairwear p { margin: 0; color: var(--wp--preset--color--on-dark); font-size: var(--wp--preset--font-size--medium); line-height: 1.5; } /* -------------------------------------------------------------------- */ /* Games + Gazette */ /* -------------------------------------------------------------------- */ .dds-games__claim { font-size: var(--wp--preset--font-size--medium); color: var(--wp--preset--color--on-dark); margin: 0; } .dds-games-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; } .dds-games-grid__item { padding: 0 0 14px; background: var(--wp--preset--color--forest); border: 1px solid var(--wp--preset--color--teal); border-radius: var(--wp--custom--radius--md); color: var(--wp--preset--color--cream); text-decoration: none; display: flex; flex-direction: column; gap: 4px; overflow: hidden; } .dds-games-grid__art { width: 100%; aspect-ratio: 1200 / 630; object-fit: cover; } .dds-games-grid__item .dds-games-grid__name, .dds-games-grid__item .dds-games-grid__note { padding-left: 14px; padding-right: 14px; } .dds-games-grid__item .dds-games-grid__name { margin-top: 10px; } .dds-games-grid__name { font-family: var(--wp--preset--font-family--display); font-weight: 700; font-size: var(--wp--preset--font-size--medium); } .dds-games-grid__note { font-size: var(--wp--preset--font-size--x-small); color: var(--wp--preset--color--on-dark-faint); } .dds-pill--link { border-color: var(--wp--preset--color--deep); } /* -------------------------------------------------------------------- */ /* Tools band + tool cards */ /* -------------------------------------------------------------------- */ .dds-tools-band { display: flex; flex-direction: column; gap: 12px; } .dds-tools-band__item { min-height: 56px; padding: 0 16px; display: flex; align-items: center; justify-content: space-between; background: var(--wp--preset--color--forest); border: 1px solid var(--wp--preset--color--teal); border-radius: var(--wp--custom--radius--md); color: var(--wp--preset--color--cream); font-weight: 600; text-decoration: none; } .dds-tools-band__arrow { color: var(--wp--preset--color--gold-bright); } .dds-tool-card { border-top: 1px solid var(--wp--preset--color--line); } .dds-toolteaser { display: flex; flex-direction: column; gap: 4px; padding: 18px; background: var(--wp--preset--color--forest); border-radius: var(--wp--custom--radius--md); color: var(--wp--preset--color--cream); text-decoration: none; } .dds-toolteaser__title { font-family: var(--wp--preset--font-family--display); font-size: var(--wp--preset--font-size--large); font-weight: 700; } .dds-toolteaser__sub { font-size: var(--wp--preset--font-size--small); color: var(--wp--preset--color--on-dark); } /* -------------------------------------------------------------------- */ /* Header */ /* -------------------------------------------------------------------- */ .dds-header { position: sticky; top: 0; z-index: 40; } .dds-utilitybar { display: none; } .dds-headerbar { height: 60px; padding: 0 16px; display: flex; align-items: center; gap: 8px; background: var(--wp--preset--color--forest); transition: height 0.2s ease, padding 0.2s ease; } .dds-header.is-condensed .dds-headerbar { height: 52px; } /* WO-175 fix-round (B10 touch targets, MEASURED 22px): the header row is 60px tall but align-items:center on .dds-headerbar only centers the logo's own intrinsic-height box inside it -- it doesn't stretch the clickable link. min-height + justify-content:center keeps the text vertically centred inside a taller, real 44px tap target. */ .dds-logo { flex-grow: 1; display: flex; flex-direction: column; justify-content: center; gap: 2px; min-height: 44px; text-decoration: none; color: var(--wp--preset--color--cream); min-width: 0; } .dds-logo__kicker { display: none; font-family: var(--wp--preset--font-family--eyebrow); font-size: var(--wp--preset--font-size--x-small); letter-spacing: 0.22em; text-transform: uppercase; color: var(--wp--preset--color--gold); } .dds-logo__mark { font-family: var(--wp--preset--font-family--display); font-size: 22px; font-weight: 700; line-height: 1; color: var(--wp--preset--color--cream); } .dds-logo__mark--footer { font-size: var(--wp--preset--font-size--x-large); } .dds-hubnav { display: none; } /* revealed at desktop breakpoint */ .dds-hubnav__list { list-style: none; display: flex; gap: 28px; margin: 0; padding: 0; } .dds-hubnav__item { position: relative; } /* WO-175 fix-round (B10 touch targets, MEASURED 26px at the desktop breakpoint). */ .dds-hubnav__link { color: var(--wp--preset--color--cream); text-decoration: none; font-weight: 500; display: inline-flex; align-items: center; min-height: 44px; } .dds-hubnav__link--muted { color: var(--wp--preset--color--on-dark-faint); } .dds-hubnav__panel { display: none; position: absolute; top: 100%; left: 0; min-width: 240px; margin-top: 12px; padding: 16px; background: var(--wp--preset--color--paper); border: 1px solid var(--wp--preset--color--line); border-radius: var(--wp--custom--radius--md); box-shadow: 0 12px 24px rgba(10, 26, 15, 0.18); flex-direction: column; gap: 10px; } .dds-hubnav__item:hover .dds-hubnav__panel, .dds-hubnav__item:focus-within .dds-hubnav__panel { display: flex; } .dds-hubnav__panel-title { font-family: var(--wp--preset--font-family--eyebrow); font-size: var(--wp--preset--font-size--x-small); letter-spacing: 0.14em; text-transform: uppercase; color: var(--wp--preset--color--teal); } .dds-hubnav__panel-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 8px; } .dds-hubnav__panel-list a, .dds-hubnav__panel-all { color: var(--wp--preset--color--deep); text-decoration: none; font-size: var(--wp--preset--font-size--small); } .dds-hubnav__panel-empty { margin: 0; font-size: var(--wp--preset--font-size--small); color: var(--wp--preset--color--muted); font-style: italic; } .dds-hubnav__panel-all { font-weight: 700; color: var(--wp--preset--color--teal) !important; } .dds-headerbar__actions { display: flex; align-items: center; gap: 6px; } .dds-headerbar__shop, .dds-headerbar__newsletter { display: none; } .dds-iconbtn { width: 44px; height: 44px; display: flex; align-items: center; justify-content: center; background: transparent; border: none; color: var(--wp--preset--color--cream); cursor: pointer; padding: 0; } .dds-drawer-toggle { border: 1px solid var(--wp--preset--color--teal); border-radius: var(--wp--custom--radius--sm); } .dds-searchpanel { display: flex; gap: 8px; padding: 12px 16px; background: var(--wp--preset--color--forest); } .dds-searchpanel[hidden] { display: none; } .dds-searchpanel input[type="search"], .wp-block-search__input { flex-grow: 1; height: 48px; padding: 0 12px; border: 1px solid var(--wp--preset--color--line); border-radius: var(--wp--custom--radius--sm); font-size: 16px; font-family: var(--wp--preset--font-family--body); } .dds-searchpanel--inline { background: transparent; padding: 0; } .wp-block-search { display: flex; gap: 8px; } .wp-block-search__button { border-radius: var(--wp--custom--radius--sm) !important; background: var(--wp--preset--color--gold-bright) !important; color: var(--wp--preset--color--deep) !important; border: none; font-weight: 700; padding: 0 20px; } /* [lead, WO-175 C2 2026-09-27] The search block widened the page by 20 px at 390 px on search + 404 (harness scrollWidth): a non-wrapping flex row (label + inside-wrapper) whose input kept flex's default min-width:auto. Wrap the label onto its own line and let the input shrink. */ .wp-block-search { flex-wrap: wrap; max-width: 100%; } .wp-block-search__label { flex-basis: 100%; } .wp-block-search__inside-wrapper { display: flex; gap: 8px; flex: 1 1 100%; min-width: 0; max-width: 100%; } .wp-block-search__input, .dds-searchpanel input[type="search"] { min-width: 0; } /* Full-screen mobile drawer */ .dds-drawer { position: fixed; inset: 0; z-index: 100; background: var(--wp--preset--color--deep); } .dds-drawer[hidden] { display: none; } .dds-drawer__panel { height: 100%; display: flex; flex-direction: column; padding: 16px; } .dds-drawer__top { display: flex; align-items: center; justify-content: space-between; } .dds-drawer__nav { display: flex; flex-direction: column; gap: 4px; margin-top: 24px; } .dds-drawer__nav a { padding: 14px 4px; font-family: var(--wp--preset--font-family--display); font-size: var(--wp--preset--font-size--x-large); font-weight: 700; color: var(--wp--preset--color--cream); text-decoration: none; border-bottom: 1px solid var(--wp--preset--color--teal); } .dds-drawer__utility { margin-top: auto; display: flex; flex-direction: column; gap: 10px; padding-top: 24px; } .dds-drawer__utility a { color: var(--wp--preset--color--on-dark); text-decoration: none; } .dds-drawer__shop { color: var(--wp--preset--color--gold-bright) !important; font-weight: 700; } /* -------------------------------------------------------------------- */ /* Footer */ /* -------------------------------------------------------------------- */ .dds-footer { background: var(--wp--preset--color--deep); color: var(--wp--preset--color--on-dark); padding: var(--wp--preset--spacing--40) 16px var(--wp--preset--spacing--30); } .dds-footer__grid { display: flex; flex-direction: column; gap: var(--wp--preset--spacing--30); } .dds-footer__brand p { margin: 4px 0 0; } .dds-footer__col { display: flex; flex-direction: column; gap: 10px; } /* WO-175 fix-round (B10 touch targets, MEASURED 32px): a plain unclassed in a gap:10px flex column has a tap target equal to its text line-box. */ .dds-footer__col a { color: var(--wp--preset--color--on-dark); text-decoration: none; display: flex; align-items: center; min-height: 44px; } .dds-footer__legal { margin-top: var(--wp--preset--spacing--30); padding-top: var(--wp--preset--spacing--20); border-top: 1px solid var(--wp--preset--color--teal); display: flex; flex-direction: column; gap: 8px; font-size: var(--wp--preset--font-size--x-small); } /* WO-175 fix-round (B10 touch targets, MEASURED 21px). */ .dds-footer__legal a { color: var(--wp--preset--color--gold-bright); font-weight: 600; display: flex; align-items: center; min-height: 44px; } /* WO-175 fix-round (B10 touch targets, MEASURED 26px on .dds-author-box__link). NOTE left for whoever styles the B4 article blocks next: none of dds-journal-core's article blocks (quick-answer, editorial-standards, key-takeaways, faq, bottom-line, sources, author-box, product-context) have ANY rules in this file yet -- they render as unstyled plain HTML today. This is the one touch-target fix this fix-round asked for, not a style pass. */ .dds-author-box__link { display: inline-flex; align-items: center; min-height: 44px; } /* WO-175 fix-round (B10 touch targets, MEASURED 32px on the FAQ block's , dds-faq__item). */ .dds-faq__item > summary { display: flex; align-items: center; min-height: 44px; cursor: pointer; } /* -------------------------------------------------------------------- */ /* Article (single) + TOC */ /* -------------------------------------------------------------------- */ .dds-progress { height: 3px; background: var(--wp--preset--color--deep); } .dds-progress__bar { height: 3px; width: 0%; background: var(--wp--preset--color--gold-bright); transform-origin: left; } .dds-article { padding: 0 16px; } .dds-article__intro { display: flex; flex-direction: column; gap: 14px; padding-top: 20px; } .dds-breadcrumb { font-size: var(--wp--preset--font-size--small); color: var(--wp--preset--color--muted); display: flex; align-items: center; flex-wrap: wrap; } /* WO-175 fix-round (B10 touch targets, MEASURED 17px). */ .dds-breadcrumb a { color: var(--wp--preset--color--muted); display: inline-flex; align-items: center; min-height: 44px; } .dds-article__title { font-family: var(--wp--preset--font-family--display); font-size: var(--wp--preset--font-size--display); line-height: 1.12; font-weight: 700; margin: 0; } .dds-article__lead { font-size: var(--wp--preset--font-size--medium); line-height: 1.5; color: var(--wp--preset--color--ink-soft); margin: 0; } .dds-article__byline { display: flex; align-items: center; gap: 12px; padding: 12px 0; border-top: 1px solid var(--wp--preset--color--line); border-bottom: 1px solid var(--wp--preset--color--line); } .dds-byline .wp-block-post-author__avatar img { border-radius: 999px; } .dds-article__media { margin: 20px 0 0; border-radius: var(--wp--custom--radius--md); overflow: hidden; } .dds-article__media img { width: 100%; height: auto; } .dds-article__body { padding: 24px 16px; font-size: var(--wp--preset--font-size--medium); line-height: 1.7; color: var(--wp--preset--color--ink); } .dds-article__body :is(h2, h3) { font-family: var(--wp--preset--font-family--display); scroll-margin-top: 76px; } .dds-article__body table { width: 100%; border-collapse: collapse; font-size: var(--wp--preset--font-size--small); } .dds-article__body table th, .dds-article__body table td { padding: 10px 12px; border: 1px solid var(--wp--preset--color--line); text-align: left; } .dds-article__body details { padding: 14px 16px; background: var(--wp--preset--color--paper); border: 1px solid var(--wp--preset--color--line); border-radius: var(--wp--custom--radius--md); } .dds-article__body details + details { margin-top: 8px; } /* WO-175 fix-round (B10 axe color-contrast). The 152 real imported posts carry inline `style="color:#fbbf24"` / `#fcd34d` (Tailwind amber-400/300, NOT a DDS brand token -- the theme never emits either hex anywhere) baked into their stored post_content from the original site (MEASURED: e.g. the GOTS-guide links and "24.99 USD" price on /2026/09/25/verify-dds-boston-certifications.../, and an inline-styled "Frequently Asked Questions"

). Both fail contrast against this theme's cream article background -- 1.59:1 and 1.37:1 measured, need 3:1/4.5:1. This is CONTENT, not theme or plugin markup, so it is out of this fix-round's edit scope (dds-journal/dds-journal-core only) to change at the source; flagged for the content/import side separately. An inline `style` attribute otherwise always wins over an external stylesheet regardless of selector specificity, so a defensive `!important` override here is the only lever the THEME has to guarantee body-text contrast for content it does not control. Scoped to exactly the two measured hex values -- never a blanket color override -- so a future legitimate inline colour is not silently defeated too. NOT scoped to .dds-article__body: MEASURED the "Frequently Asked Questions"

carrying this exact defect renders OUTSIDE .dds-article__body (inside the product-context card's own embedded content), so a container-scoped version of this rule missed it -- this pattern can appear anywhere post/product content is rendered, not only the main article body. */ [style*="color:#fbbf24" i], [style*="color: #fbbf24" i], [style*="color:#fcd34d" i], [style*="color: #fcd34d" i] { color: var(--wp--preset--color--ink) !important; } .dds-article__body summary { font-weight: 700; cursor: pointer; } .dds-toc { padding: 14px 16px; background: var(--wp--preset--color--deep); border-radius: var(--wp--custom--radius--md); color: var(--wp--preset--color--cream); } /* WO-175 fix-round (B10 touch targets, MEASURED 32px on the summary, 21px per link). */ .dds-toc__summary { font-weight: 700; cursor: pointer; display: flex; align-items: center; min-height: 44px; } .dds-toc__nav { display: flex; flex-direction: column; gap: 10px; margin-top: 10px; } .dds-toc__link { color: var(--wp--preset--color--cream); text-decoration: none; font-size: var(--wp--preset--font-size--small); display: flex; align-items: center; min-height: 44px; } .dds-toc__link--h3 { padding-left: 14px; color: var(--wp--preset--color--on-dark); } .dds-toc__link.is-active { color: var(--wp--preset--color--gold-bright); font-weight: 700; } /* -------------------------------------------------------------------- */ /* Motion (B9): transform-only, content never opacity:0, fail-open */ /* -------------------------------------------------------------------- */ .dds-reveal { transform: translateY(12px); } @supports (animation-timeline: view()) { .dds-reveal { animation: dds-reveal-in linear both; animation-timeline: view(); animation-range: entry 0% cover 30%; } } @keyframes dds-reveal-in { from { transform: translateY(12px); } to { transform: translateY(0); } } @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: 0.001ms !important; animation-iteration-count: 1 !important; transition-duration: 0.001ms !important; } .dds-reveal { transform: none; animation: none; } } /* -------------------------------------------------------------------- */ /* Breakpoint: tablet (>=768px) */ /* -------------------------------------------------------------------- */ @media (min-width: 768px) { .dds-utilitybar { display: flex; align-items: center; justify-content: space-between; height: 36px; padding: 0 32px; background: var(--wp--preset--color--deep); color: var(--wp--preset--color--on-dark-faint); font-size: var(--wp--preset--font-size--x-small); } .dds-utilitybar__links { display: flex; gap: 20px; } .dds-utilitybar a { color: var(--wp--preset--color--on-dark); } .dds-utilitybar__shop { color: var(--wp--preset--color--gold-bright) !important; font-weight: 600; } /* WO-175 fix-round (B10 touch targets, MEASURED 21px). First attempt used an invisible ::after to enlarge only the hit-test area without growing the visible 36px bar -- reads right for a human but a pseudo-element doesn't change the 's own getBoundingClientRect, so it still measures as a violation. The requirement is the element's real box, so the element has to actually be that tall; the bar grows to fit rather than clipping it. */ .dds-utilitybar { height: auto; min-height: 44px; } .dds-utilitybar a { display: inline-flex; align-items: center; min-height: 44px; } .dds-headerbar { height: 76px; padding: 0 32px; gap: 32px; } .dds-header.is-condensed .dds-headerbar { height: 60px; } .dds-logo__kicker { display: block; } .dds-hubnav { display: block; } .dds-drawer-toggle { display: none; } .dds-headerbar__shop { display: inline-flex; } .dds-section, .dds-hero, .dds-hub-header { padding: var(--wp--preset--spacing--70) 32px; } .dds-card-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } .dds-proof-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); } .dds-games-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); } .dds-hero__ctas { flex-direction: row; } .dds-article { padding: 0 32px; } .dds-footer__grid { flex-direction: row; justify-content: space-between; align-items: flex-start; } .dds-footer__legal { flex-direction: row; justify-content: space-between; } } /* -------------------------------------------------------------------- */ /* Breakpoint: desktop (>=1200px, ~1440 canvas) */ /* -------------------------------------------------------------------- */ @media (min-width: 1200px) { .dds-utilitybar, .dds-headerbar { padding-left: 64px; padding-right: 64px; } .dds-headerbar__newsletter { display: inline-flex; } .dds-section, .dds-hero, .dds-hub-header { padding: var(--wp--preset--spacing--80) 64px; } .dds-card-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } /* WO-MAX-176 A3h: the hub header centres its eyebrow, title and lead; the pill row sat flush left inside its 720px column (measured locally: pill union 360-940px on a 1440 canvas, centre 70px left of the title's). */ .dds-hubpills { max-width: var(--wp--style--global--content-size, 720px); margin-inline: auto; justify-content: center; } /* Sticky TOC on desktop — see the four V6 traps note in inc/blocks.php * and assets/js/toc.js. overflow lives on the article body wrapper's * ancestor set to visible; no ancestor of .dds-toc carries transform, * filter or contain; top offset is set explicitly. */ .dds-article__intro { display: grid; grid-template-columns: 1fr 280px; gap: 40px; align-items: start; } .dds-toc { position: sticky; top: 88px; align-self: start; grid-column: 2; grid-row: 1 / -1; } .dds-article__body { padding: 40px 0; max-width: 720px; margin: 0 auto; } } /* -------------------------------------------------------------------- */ /* WO-MAX-179 (0.1.3) */ /* -------------------------------------------------------------------- */ /* A1d: every template wraps its content in
(core's skip link targets it). Its children are the old top-level sections, so the top-level zero-gap rule above must follow them in: core's flow layout would otherwise put a 24px block-gap margin between every section. 0,2,0 for the same load-order reason as above. main takes focus from the skip link (tabindex=-1, functions.php) without drawing a box round the page. */ .dds-main.dds-main > * { margin-block-start: 0; } .dds-main:focus { outline: none; } /* A1a (K1): the hub pills sat flush left (x=0) on the front page and 404 at every width. Centre the row, with the same 16px gutter as every section. */ .dds-hub-strip { justify-content: center; padding-inline: 16px; } /* A1b (K2): the post lists (archive, index, search, category "All guides") carry the linked featured image, a fixed 4:3 thumbnail beside the text. A list item without an image falls back to the old single column. */ .dds-archive-list > li { display: grid; grid-template-columns: 96px minmax(0, 1fr); column-gap: 16px; align-items: start; } .dds-archive-list > li > * { grid-column: 2; margin-block: 0; } /* The text column is narrower than the old full-width row: grid items may shrink (min-width 0), and a post in several categories wraps its eyebrow instead of running one inline-flex line off the page (MEASURED: 1px overflow at 390). */ .dds-archive-list > li > * { min-width: 0; } .dds-archive-list .dds-eyebrow { flex-wrap: wrap; column-gap: 6px; row-gap: 0; } .dds-archive-list > li > .dds-archive-list__media { grid-column: 1; grid-row: 1 / span 4; margin: 0; } .dds-archive-list > li:not(:has(> .dds-archive-list__media)) { display: block; } .dds-archive-list__media a { display: block; } .dds-archive-list__media img { display: block; width: 100%; height: auto; aspect-ratio: 4 / 3; object-fit: cover; border-radius: var(--wp--custom--radius--md); background: var(--wp--preset--color--placeholder); } /* A1g: list titles became h2 (they follow the page's h1); keep the h3 size they had. */ .dds-archive-list .dds-archive-list__title { font-size: var(--wp--preset--font-size--large); line-height: 1.25; } /* A1c: homepage certification cards (2 columns from 768px: the section is the 720px content column, and four columns there squeezed "PETA-Approved Vegan" to the card edge). Original DDS line icons in theme gold on the dark card (gold is used on dark only — see the GOLD TEXT RULE at the top of this file). No certifier logo, no . */ .dds-cert-cards { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: 1fr; gap: 12px; } .dds-cert-card { display: flex; flex-direction: column; gap: 8px; padding: 18px; background: var(--wp--preset--color--forest); border-radius: var(--wp--custom--radius--md); color: var(--wp--preset--color--cream); } .dds-cert-card__icon { color: var(--wp--preset--color--gold); line-height: 0; } .dds-cert-card__svg { width: 40px; height: 40px; } .dds-cert-card__name { margin: 0; overflow-wrap: anywhere; font-family: var(--wp--preset--font-family--display); font-size: var(--wp--preset--font-size--large); line-height: 1.2; color: var(--wp--preset--color--cream); } .dds-cert-card__scope { margin: 0; color: var(--wp--preset--color--on-dark); font-size: var(--wp--preset--font-size--small); line-height: 1.5; } .dds-cert-card__holder { margin: 0; font-family: var(--wp--preset--font-family--eyebrow); font-size: var(--wp--preset--font-size--x-small); letter-spacing: 0.14em; text-transform: uppercase; color: var(--wp--preset--color--gold-bright); } .dds-cert-card__link { margin-top: auto; display: inline-flex; align-items: center; gap: 6px; min-height: 44px; font-weight: 600; color: var(--wp--preset--color--cream); } .dds-cert-card__link:hover { color: var(--wp--preset--color--gold-bright); } @media (min-width: 768px) { .dds-hub-strip { padding-inline: 32px; } .dds-archive-list > li { grid-template-columns: 200px minmax(0, 1fr); column-gap: 24px; } .dds-cert-cards { grid-template-columns: repeat(2, minmax(0, 1fr)); } } @media (min-width: 1200px) { .dds-hub-strip { padding-inline: 64px; } } /* A1e: inline link colours in stored post content (the Journal never emits these hexes). The amber rule further up turns #fbbf24/#fcd34d to ink on the cream article. MEASURED 2026-09-28 with axe over all 136 posts on 0.1.2: 52 contrast failures in 14 posts, from three more inline colours on cream (#007bff 3.8:1 in 6 posts, DDS gold #c9a84c 2.18:1 in 6, #dfe9e2 in 2) and ONE the amber rule itself caused: ink forced onto a #1a1a1a box (1.17:1, 68980). 1) Inside post content, those three colours get the same ink treatment as amber. */ :where(.wp-block-post-content) :is([style*="color:#007bff" i], [style*="color: #007bff" i], [style*="color:#c9a84c" i], [style*="color: #c9a84c" i], [style*="color:#dfe9e2" i], [style*="color: #dfe9e2" i]) { color: var(--wp--preset--color--ink) !important; } /* 2) ...but inside a box that declares its own DARK background, ink is the wrong answer: give the text a light gold instead (gold-bright on #1a1a1a is ~10:1, on #1a5c45 ~4.9:1). The dark set is every dark inline background in the 136-post corpus (luminance < 0.18, MEASURED 2026-09-28). An element that declares its OWN background (the amber- filled CTA buttons: background-color:#fbbf24 also contains the substring "color:#fbbf24") keeps its ink. */ :is([style*="background:#1a1a1a" i], [style*="background-color:#1a1a1a" i], [style*="background: #1a1a1a" i], [style*="background:#12331f" i], [style*="background:#0d2818" i], [style*="background:#1a5c45" i], [style*="background:#1c1917" i], [style*="background:rgba(28,25,23" i]) :is([style*="color:#fbbf24" i], [style*="color: #fbbf24" i], [style*="color:#fcd34d" i], [style*="color: #fcd34d" i], [style*="color:#c9a84c" i], [style*="color: #c9a84c" i], [style*="color:#007bff" i], [style*="color: #007bff" i]):not([style*="background" i]) { color: var(--wp--preset--color--gold-bright) !important; } /* A1f: tap targets on /tools/ (MEASURED on 0.1.2 at 390: the four number inputs 177x21, the plugin's two link-outs 26px, the template's fine-print links 38px). The plugin ships no tool CSS; these rules live here. */ .dds-tool label { display: flex; flex-direction: column; gap: 6px; font-weight: 600; font-size: var(--wp--preset--font-size--small); } .dds-tool input:not([type="checkbox"]):not([type="radio"]):not([type="hidden"]), .dds-tool select, .dds-tool textarea { min-height: 44px; width: 100%; max-width: 16rem; padding: 0 12px; border: 1px solid var(--wp--preset--color--muted); border-radius: var(--wp--custom--radius--sm); background: var(--wp--preset--color--paper); color: var(--wp--preset--color--ink); font-size: 16px; font-family: var(--wp--preset--font-family--body); } .dds-tool__linkout { display: flex; flex-direction: column; gap: 4px; } .dds-tool__linkout a, .dds-tool-card .dds-fineprint a { display: inline-flex; align-items: center; min-height: 44px; } /* A1h: reserve the space the Interactivity runtime writes into. The verdict is the one result whose text length changes (one sentence vs. the longer "Enter a price..." prompt); two lines are held for it, so a hydrated or recomputed verdict never moves the content below it. */ .dds-tool__verdict { min-height: 3.2em; }