/* * 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. */ /* -------------------------------------------------------------------- */ /* Metric-matched fallback faces (WO-MAX-180, font-display: swap) */ /* -------------------------------------------------------------------- */ /* All three families use font-display: swap (Rob, 2026-09-28), so text first paints in a local fallback and reflows when the woff2 arrives. MEASURED on the replica, desktop Lighthouse n=3: the front page went to CLS 0.085-0.097 with plain fallbacks. Each " Fallback" below is a local system face scaled so the page's own text takes the same width as in the web font (size-adjust), with the web font's ascent/descent (overrides are divided by size-adjust, as the spec applies them after scaling). Ratios come from _work/wo180/a1/fallback_metrics.py over the text the five ruling pages render in each family and weight; a request of 600+ matches the 700 face. If a device has none of these local fonts the face fails to load and the next family in the stack is used, exactly as before. theme.json lists each fallback straight after its web font. */ @font-face { font-family: "Playfair Display Fallback"; src: local("Georgia"); font-weight: 400; font-style: normal; size-adjust: 101.14%; ascent-override: 106.98%; descent-override: 24.82%; line-gap-override: 0%; } @font-face { font-family: "Playfair Display Fallback"; src: local("Georgia Bold"), local("Georgia-Bold"); font-weight: 700; font-style: normal; size-adjust: 89.91%; ascent-override: 120.35%; descent-override: 27.92%; line-gap-override: 0%; } @font-face { font-family: "Playfair Display Fallback"; src: local("Georgia Italic"), local("Georgia-Italic"); font-weight: 400; font-style: italic; size-adjust: 95.14%; ascent-override: 113.72%; descent-override: 26.38%; line-gap-override: 0%; } @font-face { font-family: "Playfair Display Fallback"; src: local("Georgia Bold Italic"), local("Georgia-BoldItalic"); font-weight: 700; font-style: italic; size-adjust: 87.95%; ascent-override: 123.02%; descent-override: 28.54%; line-gap-override: 0%; } @font-face { font-family: "DM Sans Fallback"; src: local("Arial"), local("ArialMT"), local("Liberation Sans"), local("LiberationSans"); font-weight: 400; font-style: normal; size-adjust: 104.23%; ascent-override: 95.18%; descent-override: 29.74%; line-gap-override: 0%; } @font-face { font-family: "DM Sans Fallback"; src: local("Arial Bold"), local("Arial-BoldMT"), local("Liberation Sans Bold"), local("LiberationSans-Bold"); font-weight: 700; font-style: normal; size-adjust: 99.91%; ascent-override: 99.29%; descent-override: 31.03%; line-gap-override: 0%; } @font-face { font-family: "Archivo Narrow Fallback"; src: local("Arial"), local("ArialMT"), local("Liberation Sans"), local("LiberationSans"); font-weight: 400; font-style: normal; size-adjust: 82.12%; ascent-override: 126.03%; descent-override: 37.99%; line-gap-override: 0%; } @font-face { font-family: "Archivo Narrow Fallback"; src: local("Arial Bold"), local("Arial-BoldMT"), local("Liberation Sans Bold"), local("LiberationSans-Bold"); font-weight: 700; font-style: normal; size-adjust: 81.72%; ascent-override: 126.65%; descent-override: 38.18%; line-gap-override: 0%; } /* [0.1.5, WO-MAX-183 A5b] LINUX AND ANDROID-STYLE PLATFORMS HAVE NO ARIAL OR GEORGIA, so every face above fails there and the stack fell to the generic fonts at their own metrics: on 2026-09-30 Cowork measured CLS 0.084 on /category/care/ and 0.079 on /proof/ at 390px with a Linux browser. On the replica, simulating exactly that platform (sans -> DejaVu Sans, serif -> Liberation Serif, both unadjusted) reproduces 0.0842 and 0.079. Three fixes: - Liberation Sans is metric-compatible with Arial, so it joins the Arial faces above with the SAME numbers; - Liberation Serif (metric-compatible with Times New Roman) and DejaVu Sans/Serif get their own families below, with ratios computed by the same method over the ten WO-183 gate pages (_work/wo183/a5/fallback_metrics_linux.py); - theme.json lists them after the Windows/Apple faces: the first face a device actually has wins. Android's Roboto / Noto Serif were not covered in 0.1.5 (no file to compute from on the build box): see 0.1.6 below. */ @font-face { font-family: "Playfair Display Fallback Liberation"; src: local("Liberation Serif"), local("LiberationSerif"); font-weight: 400; font-style: normal; size-adjust: 109.57%; ascent-override: 98.75%; descent-override: 22.91%; line-gap-override: 0%; } @font-face { font-family: "Playfair Display Fallback Liberation"; src: local("Liberation Serif Bold"), local("LiberationSerif-Bold"); font-weight: 700; font-style: normal; size-adjust: 105.98%; ascent-override: 102.09%; descent-override: 23.68%; line-gap-override: 0%; } @font-face { font-family: "Playfair Display Fallback Liberation"; src: local("Liberation Serif Italic"), local("LiberationSerif-Italic"); font-weight: 400; font-style: italic; size-adjust: 104.79%; ascent-override: 103.25%; descent-override: 23.95%; line-gap-override: 0%; } @font-face { font-family: "Playfair Display Fallback Liberation"; src: local("Liberation Serif Bold Italic"), local("LiberationSerif-BoldItalic"); font-weight: 700; font-style: italic; size-adjust: 107.12%; ascent-override: 101.01%; descent-override: 23.43%; line-gap-override: 0%; } @font-face { font-family: "Playfair Display Fallback DejaVu"; src: local("DejaVu Serif"), local("DejaVuSerif"); font-weight: 400; font-style: normal; size-adjust: 87.57%; ascent-override: 123.56%; descent-override: 28.66%; line-gap-override: 0%; } @font-face { font-family: "Playfair Display Fallback DejaVu"; src: local("DejaVu Serif Bold"), local("DejaVuSerif-Bold"); font-weight: 700; font-style: normal; size-adjust: 81.87%; ascent-override: 132.16%; descent-override: 30.66%; line-gap-override: 0%; } @font-face { font-family: "Playfair Display Fallback DejaVu"; src: local("DejaVu Serif Italic"), local("DejaVuSerif-Italic"); font-weight: 400; font-style: italic; size-adjust: 82.61%; ascent-override: 130.98%; descent-override: 30.38%; line-gap-override: 0%; } @font-face { font-family: "Playfair Display Fallback DejaVu"; src: local("DejaVu Serif Bold Italic"), local("DejaVuSerif-BoldItalic"); font-weight: 700; font-style: italic; size-adjust: 81.6%; ascent-override: 132.61%; descent-override: 30.76%; line-gap-override: 0%; } @font-face { font-family: "DM Sans Fallback DejaVu"; src: local("DejaVu Sans"), local("DejaVuSans"); font-weight: 400; font-style: normal; size-adjust: 91.53%; ascent-override: 108.39%; descent-override: 33.87%; line-gap-override: 0%; } @font-face { font-family: "DM Sans Fallback DejaVu"; src: local("DejaVu Sans Bold"), local("DejaVuSans-Bold"); font-weight: 700; font-style: normal; size-adjust: 83.83%; ascent-override: 118.34%; descent-override: 36.98%; line-gap-override: 0%; } @font-face { font-family: "Archivo Narrow Fallback DejaVu"; src: local("DejaVu Sans"), local("DejaVuSans"); font-weight: 400; font-style: normal; size-adjust: 80.52%; ascent-override: 128.55%; descent-override: 38.75%; line-gap-override: 0%; } @font-face { font-family: "Archivo Narrow Fallback DejaVu"; src: local("DejaVu Sans Bold"), local("DejaVuSans-Bold"); font-weight: 700; font-style: normal; size-adjust: 73.42%; ascent-override: 140.97%; descent-override: 42.5%; line-gap-override: 0%; } /* [0.1.6, WO-MAX-184 A5] ANDROID: Roboto (sans) and Noto Serif (serif) are its system fonts, and it has none of Arial, Georgia, Liberation or DejaVu - so on Android every face above fails and 0.1.5 still fell to the generic fonts at their own metrics. Same method, same ten-page text (_work/wo184/a5/fallback_metrics_android.py): Roboto measured from the Windows-installed Roboto files, Noto Serif from the official Google Fonts variable files instanced at 400/700. Listed LAST in theme.json, after the Linux faces, so no platform that resolved an earlier face changes. The local() names are Roboto's and Noto Serif's full and PostScript names; that Android Chrome matches them is NOT VERIFIED on a device (the CLS figures for this block are a simulation, see REPORT-MAX-184 A5). */ @font-face { font-family: "Playfair Display Fallback Noto"; src: local("Noto Serif"), local("NotoSerif-Regular"), local("Noto Serif Regular"); font-weight: 400; font-style: normal; size-adjust: 94.94%; ascent-override: 113.97%; descent-override: 26.44%; line-gap-override: 0%; } @font-face { font-family: "Playfair Display Fallback Noto"; src: local("Noto Serif Bold"), local("NotoSerif-Bold"); font-weight: 700; font-style: normal; size-adjust: 92.08%; ascent-override: 117.5%; descent-override: 27.26%; line-gap-override: 0%; } @font-face { font-family: "Playfair Display Fallback Noto"; src: local("Noto Serif Italic"), local("NotoSerif-Italic"); font-weight: 400; font-style: italic; size-adjust: 91.34%; ascent-override: 118.46%; descent-override: 27.48%; line-gap-override: 0%; } @font-face { font-family: "Playfair Display Fallback Noto"; src: local("Noto Serif Bold Italic"), local("NotoSerif-BoldItalic"); font-weight: 700; font-style: italic; size-adjust: 88.86%; ascent-override: 121.77%; descent-override: 28.25%; line-gap-override: 0%; } @font-face { font-family: "DM Sans Fallback Roboto"; src: local("Roboto"), local("Roboto-Regular"), local("Roboto Regular"); font-weight: 400; font-style: normal; size-adjust: 105.03%; ascent-override: 94.45%; descent-override: 29.52%; line-gap-override: 0%; } @font-face { font-family: "DM Sans Fallback Roboto"; src: local("Roboto Bold"), local("Roboto-Bold"); font-weight: 700; font-style: normal; size-adjust: 107.43%; ascent-override: 92.34%; descent-override: 28.86%; line-gap-override: 0%; } @font-face { font-family: "Archivo Narrow Fallback Roboto"; src: local("Roboto"), local("Roboto-Regular"), local("Roboto Regular"); font-weight: 400; font-style: normal; size-adjust: 89.64%; ascent-override: 115.46%; descent-override: 34.81%; line-gap-override: 0%; } @font-face { font-family: "Archivo Narrow Fallback Roboto"; src: local("Roboto Bold"), local("Roboto-Bold"); font-weight: 700; font-style: normal; size-adjust: 89.32%; ascent-override: 115.88%; descent-override: 34.93%; line-gap-override: 0%; } /* -------------------------------------------------------------------- */ /* 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); } /* WO-MAX-180 A1a (live gate h: CLS 0.0862, 0.0857 of it this figure on /tools/). The figure is a flex item of a column flex container (.dds-hero / .dds-hub-header) with auto inline margins from the constrained layout, so it sizes to its content; its image is width:100%, a percentage of that shrink-to-fit width, so until the image arrives the figure has NO width and the aspect-ratio reserves no height. When the image lands after first paint the figure grows to 720px and pushes the title, lead and first tool card down. An explicit width reserves the box from the first paint at every breakpoint (the constrained layout's max-width still caps it at the content size). Same for the band figures. */ .dds-hub-header__cover, .dds-band-figure { width: 100%; } .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; }