/* * comparison-matrix.css — component family "ad/comparison-matrix" v1.0.1 (Wave 0.3, 2026-08-23, * Lane 4 / CC-AD-PLATFORM). * * Built for DESIGN-01-B (job 1, article-01-optimization-as-a-decision-system): the 3-column * categorical distinction table -- Redesign / Growth-marketing spend / This decision system -- * that teaches the reader these are three genuinely different activities, not degrees of the same * thing. Source brief: docs/content/DESIGN-DISPATCH-PACK-2026-08-22.md, `DESIGN_ID: DESIGN-01-B`. * Reference frame (structure only, NOT authoritative on copy/labels -- see below): * docs/design-intake/article-01-2026-08-22/IMAGE-B-COMPARISON.dc.html. * * Row-label correction vs. the .dc.html reference: that file's row headers ("Question it answers" / * "Basis for change" / "What changes at once" / "Attributability", 4 rows) are from an EARLIER * draft numbering. The CURRENT DESIGN-01-B brief names exactly 3 rows -- "What changes" / "Shape" / * "What goes wrong when it's confused with optimization" -- taken verbatim from the article's own * two boundary sections. This file implements the brief's 3-row shape, not the reference file's * 4-row shape; the reference is used only for grid/hierarchy/mobile-recomposition structure. * * REUSE_DECISION per the brief: NEW_VARIANT of the comparison-matrix family already established * elsewhere in the design pack (DESIGN-02's fitness-pairing shape, DESIGN-11/16/18/25's 2-column * spectrum shapes) -- this is a 3-column categorical distinction shape, genuinely different from * both, so it gets its own component family rather than reusing either shell. Not related to * ad/triage-disclosure (wordpress/themes/alexdesigns/assets/css/components/triage-disclosure.css, * a flat fan-out disclosure) or ad/decision-flow (a sequential Q&A tree) -- this is a static, * always-fully-visible comparison table with no disclosure/branching interaction at all. * * Canvas: intentionally LIGHT editorial reference material (per the Global Contract's * canvas-per-grammar rule) -- this is scanned, not walked through -- unlike DESIGN-01-A/01-C's dark * mechanism visuals. Sits inside .ad-fnd-shell[data-ad-fnd-width="breakout"] (1160px ceiling); this * file never redeclares that width. * * Token reconciliation (docs/design-intake/article-01-2026-08-22/TOKEN-RECONCILIATION-2026-08-23.md): * the reference file used the `muted` token (a mid-gray hex, six-six-seven-zero-eight-zero) for * column-header/label text on white/tint backgrounds -- exactly the contrast trap the Global * Contract flags (`muted` fails 4.5:1 on a tint background). Corrected here to `slate` (#404A56) * everywhere. The reference file's mobile micro-labels went down * to 0.66rem, below the theme's `small` floor (0.9375rem); corrected up to 0.9375rem throughout. * `#EDF0F3` (reference file's inner-divider value) reconciled to the real inner-line token #EDF1F5. * * Structure (static by default -- AEO/GEO crawlability requirement; the below IS the * visual AND its own STATIC_FALLBACK/NO_JS_FALLBACK -- one markup source, always rendered, never a * separate hidden fallback block, per Global Contract §5/§8): * .ad-comparison-matrix -- root, sits inside .ad-fnd-shell[data-ad-fnd-width="breakout"] * .ad-comparison-matrix__intro -- accessible intro sentence naming what's compared * table.ad-comparison-matrix__table -- real semantic table, desktop/tablet view * caption.ad-comparison-matrix__caption -- visually-hidden accessible name (intro covers * the visible sentence; caption keeps the table * self-describing even if reflowed elsewhere) * th[scope="col"] x3 -- Redesign / Growth-marketing spend / This * decision system (fixed order, never reordered) * th[scope="row"] x3 -- What changes / Shape / What goes wrong... * .ad-comparison-matrix__mobile -- stacked-card recomposition, same copy * duplicated; `display:none` swap at the * 480px breakpoint (see comment below on why * duplication was chosen over one grid DOM) * * Namespacing rule: every selector starts with `.ad-comparison-matrix` or targets its own * `[data-ad-comparison-matrix-*]` attributes. Zero bare element selectors, zero global overrides. */ .ad-comparison-matrix { --ad-comparison-matrix-accent: var(--wp--preset--color--accent, #2353d4); --ad-comparison-matrix-accent-tint: rgba(35, 83, 212, 0.06); --ad-comparison-matrix-line: 1px solid #dfe5eb; --ad-comparison-matrix-line-inner: 1px solid #edf1f5; display: flex; flex-direction: column; gap: 1.5rem; background: #f8fafb; padding: 2rem 1.75rem; border-radius: 20px; } .ad-comparison-matrix__intro { font-size: 1rem; line-height: 1.6; color: #2b323c; max-width: 42rem; margin: 0; } /* ------------------------------------------------------------------------- * Desktop / tablet: real semantic table. Column 4 ("This decision system") * carries the visual emphasis (accent border + tint) but stays a genuine *
/ -- emphasis is styling only, never a semantic change. * ---------------------------------------------------------------------- */ .ad-comparison-matrix__table { width: 100%; border-collapse: collapse; background: #ffffff; border: var(--ad-comparison-matrix-line); border-radius: 16px; overflow: hidden; } .ad-comparison-matrix__caption { /* Visually hidden -- .ad-comparison-matrix__intro above already gives the table a visible, sighted-reader introduction; the caption keeps the table independently self-describing for assistive tech / AEO extraction even if it's ever quoted out of the surrounding article. */ position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; } .ad-comparison-matrix__table th, .ad-comparison-matrix__table td { text-align: left; vertical-align: top; padding: 1.15rem 1.25rem; font-size: 0.9375rem; line-height: 1.55; } .ad-comparison-matrix__table thead th { font-family: var(--wp--preset--font-family--mono, 'IBM Plex Mono', monospace); font-size: 0.9375rem; font-weight: 500; letter-spacing: 0.06em; text-transform: uppercase; color: #404a56; border-bottom: var(--ad-comparison-matrix-line); transition: background var(--ad-ease, 180ms ease); } /* Row-label column: mono eyebrow style, matches column-header treatment for the corner axis. */ .ad-comparison-matrix__table tbody th[scope='row'] { font-family: var(--wp--preset--font-family--mono, 'IBM Plex Mono', monospace); font-size: 0.9375rem; font-weight: 500; letter-spacing: 0.04em; text-transform: uppercase; color: #404a56; border-bottom: var(--ad-comparison-matrix-line-inner); background: #ffffff; } .ad-comparison-matrix__table tbody td { font-family: var(--wp--preset--font-family--body, 'Hanken Grotesk', sans-serif); color: #2b323c; border-bottom: var(--ad-comparison-matrix-line-inner); } .ad-comparison-matrix__table tbody tr:last-child th, .ad-comparison-matrix__table tbody tr:last-child td { border-bottom: none; } /* Emphasized column ("This decision system") -- accent border + tint background. Still a real /; emphasis is presentation, not a change in semantics or DOM role. */ .ad-comparison-matrix__table [data-ad-comparison-matrix-emphasis] { background: var(--ad-comparison-matrix-accent-tint); color: #11151b; font-weight: 500; } .ad-comparison-matrix__table thead th[data-ad-comparison-matrix-emphasis] { color: var(--ad-comparison-matrix-accent); border-bottom: 2px solid var(--ad-comparison-matrix-accent); } /* Intentional em-dash cell ("This decision system" / "What goes wrong...") -- styled as a quiet, deliberate non-answer, never as a missing/broken value. */ .ad-comparison-matrix__table [data-ad-comparison-matrix-intentional-dash] { color: #404a56; font-weight: 400; } /* ------------------------------------------------------------------------- * Column-header hover/focus highlight (nice-to-have; the static table alone is fully meaningful * without it). CSS-only via :has() targeting the matching column's s. Browser-support * tradeoff: :has() reached Baseline-wide support in 2023 (Safari 15.4+, Chrome/Edge 105+, * Firefox 121+) -- well inside this theme's existing support floor (:has() is already used * elsewhere in the theme's component CSS) -- so this degrades gracefully to "no highlight, table * still fully readable" in the rare unsupported browser rather than breaking anything. * ---------------------------------------------------------------------- */ .ad-comparison-matrix__table:has(thead th:nth-child(2):hover) tbody td:nth-child(2), .ad-comparison-matrix__table:has(thead th:nth-child(2):focus-visible) tbody td:nth-child(2) { background: var(--ad-comparison-matrix-accent-tint); } .ad-comparison-matrix__table:has(thead th:nth-child(3):hover) tbody td:nth-child(3), .ad-comparison-matrix__table:has(thead th:nth-child(3):focus-visible) tbody td:nth-child(3) { background: var(--ad-comparison-matrix-accent-tint); } .ad-comparison-matrix__table:has(thead th:nth-child(4):hover) tbody td:nth-child(4), .ad-comparison-matrix__table:has(thead th:nth-child(4):focus-visible) tbody td:nth-child(4) { background: var(--ad-comparison-matrix-accent-tint); } /* ------------------------------------------------------------------------- * Tablet (<=781px, per Global Contract §2.3): columns hold as columns, narrower, with row-label * text wrapping to two lines before anything drops -- not yet the mobile stack. * ---------------------------------------------------------------------- */ @media (max-width: 781px) { .ad-comparison-matrix { padding: 1.5rem 1.25rem; } .ad-comparison-matrix__table th, .ad-comparison-matrix__table td { padding: 1rem 0.85rem; } .ad-comparison-matrix__table tbody th[scope='row'] { white-space: normal; } } /* ------------------------------------------------------------------------- * Mobile stack (<=480px, this theme's established true-mobile breakpoint): "Comparison columns -> * stacked labeled sections" per Global Contract §2.4. Approach taken: TWO markup representations * (the above, and a card-list structure below) rather than one CSS-grid DOM that * recomposes via display swaps -- a 3-col x 3-row table's header/row-label relationship (th * scope="col" x3, th scope="row" x3) does not cleanly re-express as three independently labeled * card sections using pure grid-template-areas without either breaking the table's own semantics * at the wide breakpoint or duplicating scope attributes in ways that confuse assistive tech. The * two representations carry identical copy (COPY_LOCK: STRICT -- both are generated from the same * Python renderer input, so they cannot drift). Only one is ever exposed to assistive tech / * search crawlers at a time: `display: none` (below, at the 480px breakpoint) removes the hidden * representation from the accessibility tree natively -- no separate aria-hidden bookkeeping is * needed, and nothing is ever announced twice. * ---------------------------------------------------------------------- */ .ad-comparison-matrix__mobile { display: none; } .ad-comparison-matrix__mobile-card { background: #ffffff; border: var(--ad-comparison-matrix-line); border-radius: 16px; padding: 1.375rem; } .ad-comparison-matrix__mobile-card + .ad-comparison-matrix__mobile-card { margin-top: 1rem; } .ad-comparison-matrix__mobile-card[data-ad-comparison-matrix-emphasis] { border: 2px solid var(--ad-comparison-matrix-accent); } .ad-comparison-matrix__mobile-card-title { font-family: var(--wp--preset--font-family--mono, 'IBM Plex Mono', monospace); font-size: 0.9375rem; font-weight: 500; letter-spacing: 0.06em; text-transform: uppercase; color: #404a56; margin: 0 0 0.875rem; } .ad-comparison-matrix__mobile-card[data-ad-comparison-matrix-emphasis] .ad-comparison-matrix__mobile-card-title { color: var(--ad-comparison-matrix-accent); } .ad-comparison-matrix__mobile-row { display: flex; flex-direction: column; gap: 0.2rem; } .ad-comparison-matrix__mobile-row + .ad-comparison-matrix__mobile-row { margin-top: 0.75rem; } .ad-comparison-matrix__mobile-row-label { font-family: var(--wp--preset--font-family--mono, 'IBM Plex Mono', monospace); font-size: 0.9375rem; font-weight: 500; letter-spacing: 0.04em; text-transform: uppercase; color: #404a56; } .ad-comparison-matrix__mobile-row-value { font-family: var(--wp--preset--font-family--body, 'Hanken Grotesk', sans-serif); font-size: 0.9375rem; line-height: 1.55; color: #2b323c; } .ad-comparison-matrix__mobile-card[data-ad-comparison-matrix-emphasis] .ad-comparison-matrix__mobile-row-value { color: #11151b; font-weight: 500; } .ad-comparison-matrix__mobile-row-value[data-ad-comparison-matrix-intentional-dash] { color: #404a56; font-weight: 400; } @media (max-width: 480px) { .ad-comparison-matrix__table { display: none; } .ad-comparison-matrix__mobile { display: block; } } @media (prefers-reduced-motion: reduce) { .ad-comparison-matrix__table thead th { transition: none; } }