/* cs-why.css -- the "Why does this matter?" section + audience-specific onboarding visibility. Landing-page strategy arc (owner doc docs/marketing/2026-08-13-landing-page-strategy.md, engine repo f5a40b4; owner rulings 2026-08-13 12:2x: query-param delivery, "hero + a HueForge why-block" variant scope, owner-authored bullet copy). The section itself bridges the strategy doc's step 2 -> step 4: it sits between the interactive proof and the Examples story, turning "that is impressive" into "ah, that is useful". Compact by design -- the doc is explicit that the deeper where-can-I-use-this material belongs on a future /why-colorsmith page, NOT here. */ /* --------------------------------------------------------------------------------------------- AUDIENCE VISIBILITY ONE ColorSmith product, audience-specific ENTRY (strategy doc's closing principle). Both copy variants ship in index.html; the inline bootstrap sets `data-audience="hueforge"` on when the visitor arrived with `?from=hueforge`, and these three rules decide which one renders. WHY CSS RATHER THAN THE `hidden` ATTRIBUTE -- deliberate, and the opposite of what this repo does elsewhere. cs-demo.css's CRITICAL comment documents a trap this page has already been bitten by twice (.cc-hint, and the round-11 separator): an author `display` rule always beats the UA stylesheet's `[hidden] { display: none }`, because origin outranks specificity, so an element can carry `hidden` and still render. Every element in THIS file needs an author `display` rule anyway (grids, flow blocks), so using `hidden` here would walk straight into that trap. Keying purely off the root attribute means the conflict cannot arise at all: there is exactly one mechanism deciding variant visibility, and it is this block. DEFAULT = THE ABSENCE OF A MARKER. Default copy is visible in the raw markup with no attribute and no JS; only the HueForge variant is hidden by default and revealed by the attribute. That ordering is what makes the no-JS path correct for free (product spec ยง22 layering, the same rule the gallery follows): if the bootstrap never runs -- scripting off, script blocked, param mangled -- a HueForge visitor sees the ordinary page, never an empty section. */ .aud-hueforge { display: none; } [data-audience="hueforge"] .aud-default { display: none; } /* Explicit `block`, not `revert`: `revert` would drop to the UA default and silently discard any author display rule these wrappers later need (a grid, a flex row). Both variant wrappers are plain flow containers -- the grid lives on .cs-why-points inside them. */ [data-audience="hueforge"] .aud-hueforge { display: block; } /* --------------------------------------------------------------------------------------------- THE SECTION */ .cs-why-section { max-width: 980px; margin: 64px auto 0; text-align: center; } .cs-why-heading { margin: 0 0 14px; font-size: clamp(28px, 4.4vw, 46px); line-height: 1.1; letter-spacing: -0.02em; } .cs-why-lead { margin: 0 auto; max-width: 680px; color: var(--site-muted); font-size: clamp(15px, 1.8vw, 18px); line-height: 1.6; } /* auto-fit/minmax rather than a fixed 3-column track: three across on a wide viewport, two, then one as it narrows, with no breakpoint bookkeeping. Nothing here sets a height -- the cards grow to fit their text at any font size or scaling (AGENTS.md's never-clip-text rule, which binds the web surface too: these strings are translation-bound and will get longer). */ .cs-why-points { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 16px; margin: 28px 0 0; padding: 0; list-style: none; text-align: left; } .cs-why-point { padding: 20px; border: 1px solid var(--site-border); border-radius: 14px; background: var(--site-panel); color: var(--site-muted); font-size: clamp(14px, 1.6vw, 16px); line-height: 1.6; } /* The lead clause of each point, in full-strength text against the card's muted body -- carries the scan-read on its own, so a visitor skimming only the bold halves still gets the argument. */ .cs-why-point strong { color: var(--site-text); font-weight: 600; } /* --------------------------------------------------------------------------------------------- THE SHARED CLOSE "Control the color budget" is the arc's positioning line and the one block BOTH audiences see (owner ruling 2026-08-13 12:28 -- he kept it for the HueForge variant too), so it lives outside either .aud-* wrapper. Accent-bordered rather than another panel card: it is the section's conclusion, not a fourth point. */ .cs-why-budget { margin: 28px auto 0; max-width: 760px; padding: 18px 22px; border: 1px solid var(--site-accent); border-radius: 14px; background: rgba(244, 255, 158, 0.06); color: var(--site-muted); font-size: clamp(14px, 1.7vw, 17px); line-height: 1.6; text-align: left; } .cs-why-budget strong { color: var(--site-accent); font-weight: 700; } /* --------------------------------------------------------------------------------------------- THE HUEFORGE COST ANSWER (owner ruling 2026-08-13 12:50; restyled same day after his visual pass -- "I think that text gets lost there... right under the highlighted control the color budget box, it disappears") The first pass made this the QUIETEST block on the page and placed it directly beneath the LOUDEST one, which is a hierarchy error however good the copy is. It now reads as a framed Q&A with an accent badge. The accent split is the point: .cs-why-budget above keeps the accent BORDER (it is the section's positioning conclusion), and this block takes a neutral border with an ACCENT ICON. Two accent-bordered boxes stacked would read as two competing conclusions; a neutral frame plus a colored badge marks this block clearly without out-shouting the one above it. */ .cs-why-cost { display: flex; align-items: center; gap: 14px; margin: 34px auto 0; /* wider gap than the 28px rhythm above -- deliberate separation from the budget box, which is half of why the first pass vanished */ max-width: 760px; padding: 16px 20px; border: 1px solid var(--site-border); border-radius: 14px; background: var(--site-panel); text-align: left; } /* flex-shrink: 0 keeps the badge circular when the text wraps to several lines at narrow widths or large system font sizes -- a flex item with an SVG child will otherwise compress. */ .cs-why-cost-icon { display: flex; flex: 0 0 auto; color: var(--site-accent); } .cs-why-cost-text { margin: 0; color: var(--site-muted); font-size: clamp(15px, 1.7vw, 17px); line-height: 1.6; } /* The question in full-strength text, its answer muted -- the same bold-lead treatment as .cs-why-budget above and as each .cs-why-point card ("bold the first sentence, mute the rest", owner ruling 12:5x). Plain white rather than accent: the badge already carries the color here, and doing both would make this block louder than the conclusion it follows. */ .cs-why-cost-text strong { color: var(--site-text); font-weight: 600; } @media (max-width: 700px) { .cs-why-section { margin-top: 44px; } .cs-why-budget { padding: 16px 18px; } /* Badge above the text rather than beside it on a phone: side-by-side leaves the text roughly one word wide once the badge and padding are taken out of a ~320px viewport. */ .cs-why-cost { flex-direction: column; align-items: flex-start; gap: 10px; padding: 16px 18px; } }