/* THE PARTS BOTH LANDING PAGES DRAW (2026-09-12): the illustrative sample reader `landing.js` opens in place, the phone's sticky ask, the tables the reader sets, and the screen-reader-only helper. Moved here verbatim from `landing-hero.css` so `landing_v2.html.j2` — the Claude Design rebuild, which loads its own page sheet and not `landing-hero.css` — can open the same reader. Scoped to `#asw-focused-hero-landing`, the root id both pages share because `landing.js` looks for it. THE `.asw-data` TABLE RULES ARE RESTORED HERE. They were dropped from `landing-hero.css` on 2026-09-11 with the tabbed report card that also used them, and the reader's four tables had been unstyled since. */ #asw-focused-hero-landing { --asw-selected: #edf3ff; } @media (prefers-color-scheme: dark) { #asw-focused-hero-landing { --asw-selected: #243958; } } #asw-focused-hero-landing .asw-data { width: 100%; border-collapse: collapse; table-layout: fixed; } #asw-focused-hero-landing .asw-data th, #asw-focused-hero-landing .asw-data td { padding: 12px 8px; border-bottom: 1px solid var(--bv-line); text-align: right; vertical-align: top; overflow-wrap: anywhere; } #asw-focused-hero-landing .asw-data th { color: var(--bv-muted); } #asw-focused-hero-landing .asw-data th:first-child, #asw-focused-hero-landing .asw-data td:first-child { text-align: left; width: 49%; } #asw-focused-hero-landing .asw-data tbody tr:last-child td { border-bottom: 0; } #asw-focused-hero-landing .asw-data .asw-you { background: var(--asw-selected); } #asw-focused-hero-landing .asw-data .asw-you td { font-weight: 500; } /* THE PAUSE CONTROL IS OFF THE PAGE BUT NOT OUT OF IT (2026-09-11, on request: take the pause option off the hero). IT CANNOT SIMPLY GO, and that is worth stating where the rule is rather than in a commit nobody reads twice. The drawing auto-starts, loops for 14 seconds forever, and sits beside the headline and the form — all three conditions of WCAG 2.2.2 (Pause, Stop, Hide, level A) — so this button is the mechanism that makes the page conformant. Honouring `prefers-reduced-motion` is a second courtesy and NOT a substitute: it reaches only a reader who has already set that preference at the OS, and 2.2.2 asks for a mechanism in the content for everyone else. So it is clipped rather than removed: invisible to a sighted reader, which is what was asked for, and still in the tab order and still in the accessibility tree, which is what conformance needs. The same trick `.bv-sr` uses further down, and the same one a skip link uses. `display: none` AND `visibility: hidden` ARE THE TWO WAYS TO GET THIS WRONG: either would take it out of the tab order as well as off the page, which is the removal this is deliberately not. Clip only. AND IT COMES BACK ON FOCUS, which is not decoration — a control that takes focus with no visible indicator fails 2.4.7 (Focus Visible), so a keyboard reader tabbing into it has to be able to SEE what they have landed on. It is drawn as a real button at that moment rather than the bare underlined text it used to be, because it now appears out of nowhere over the drawing and needs its own edges to read as a control. `:focus`, not `:focus-visible`: while clipped it cannot be reached by pointer at all, so there is no mouse-click case to exclude. */ #asw-focused-hero-landing .bv-sr { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; border: 0; } #asw-focused-hero-landing .asw-sample-actions button, #asw-focused-hero-landing .asw-case-foot button, #asw-focused-hero-landing .asw-reader-toolbar button { display: inline-flex; align-items: center; gap: 8px; } #asw-focused-hero-landing .asw-sample-reader { background: var(--bv-paper); color: var(--bv-ink); padding: 0 5% 40px; } #asw-focused-hero-landing .asw-reader-toolbar { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 12px 24px; padding: 22px 0; border-bottom: 1px solid var(--bv-line); } #asw-focused-hero-landing .asw-reader-actions { display: flex; align-items: center; flex-wrap: wrap; gap: 10px; } #asw-focused-hero-landing .asw-reader-actions .asw-secondary { gap: 8px; } #asw-focused-hero-landing .asw-reader-intro { padding: 35px 0 26px; } #asw-focused-hero-landing .asw-reader-intro h1 { margin: 10px 0 16px; } #asw-focused-hero-landing .asw-reader-intro p { max-width: 78ch; color: var(--bv-muted); } #asw-focused-hero-landing .asw-reader-meta { display: flex; gap: 12px 25px; flex-wrap: wrap; margin: 20px 0; } #asw-focused-hero-landing .asw-reader-nav { display: flex; gap: 12px 24px; flex-wrap: wrap; padding: 0 0 26px; border-bottom: 1px solid var(--bv-line); } #asw-focused-hero-landing .asw-sample-reader a { color: var(--bv-ink); text-underline-offset: 4px; } #asw-focused-hero-landing .asw-reader-section { padding: 32px 0; border-bottom: 1px solid var(--bv-line); scroll-margin-top: 20px; } #asw-focused-hero-landing .asw-reader-section > h2 { margin: 0 0 16px; } #asw-focused-hero-landing .asw-reader-section > p { max-width: 80ch; color: var(--bv-muted); } #asw-focused-hero-landing .asw-reader-grid { display: grid; grid-template-columns: minmax(0,1.25fr) minmax(0,.75fr); gap: 30px; align-items: start; } #asw-focused-hero-landing .asw-reader-grid > div { min-width: 0; } #asw-focused-hero-landing .asw-reader-grid h3 { margin: 0 0 16px; } #asw-focused-hero-landing .asw-method { margin-top: 24px; } #asw-focused-hero-landing .asw-method summary, #asw-focused-hero-landing .asw-source-record summary, #asw-focused-hero-landing .asw-question-record summary { cursor: pointer; padding: 14px 0; } #asw-focused-hero-landing .asw-method p { color: var(--bv-muted); max-width: 85ch; } #asw-focused-hero-landing .asw-theme-list { padding-left: 20px; margin: 0; } #asw-focused-hero-landing .asw-theme-list li { padding-left: 5px; margin-bottom: 20px; } #asw-focused-hero-landing .asw-theme-list li p { margin: 8px 0 0; color: var(--bv-muted); } #asw-focused-hero-landing .asw-source-record, #asw-focused-hero-landing .asw-question-record { border-top: 1px solid var(--bv-line); scroll-margin-top: 20px; } #asw-focused-hero-landing .asw-source-record summary span, #asw-focused-hero-landing .asw-question-record summary span { margin-left: 8px; color: var(--bv-muted); } #asw-focused-hero-landing .asw-source-address { overflow-wrap: anywhere; color: var(--bv-muted); } #asw-focused-hero-landing .asw-source-excerpt { margin: 14px 0 20px; padding-left: 16px; border-left: 2px solid var(--bv-line); color: var(--bv-muted); } #asw-focused-hero-landing .asw-source-record > p { margin: 0 0 14px; } #asw-focused-hero-landing .asw-question-meta { color: var(--bv-muted); margin: 0 0 16px; } #asw-focused-hero-landing .asw-answer-grid { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 24px 32px; padding: 4px 0 28px; } #asw-focused-hero-landing .asw-answer-record { min-width: 0; } #asw-focused-hero-landing .asw-answer-record h3 { margin: 0 0 10px; } #asw-focused-hero-landing .asw-answer-record ol { padding-left: 20px; margin: 0; } #asw-focused-hero-landing .asw-answer-record li { margin: 0 0 12px; padding-left: 3px; } #asw-focused-hero-landing .asw-answer-record p { margin: 0 0 12px; } #asw-focused-hero-landing .asw-answer-tail { color: var(--bv-muted); } #asw-focused-hero-landing .asw-answer-citations { display: flex; flex-wrap: wrap; gap: 6px 13px; margin-top: 12px; } #asw-focused-hero-landing .asw-answer-note { color: var(--bv-muted); padding-top: 12px; } #asw-focused-hero-landing .asw-reader-cta { padding: 36px 0 0; text-align: center; } #asw-focused-hero-landing .asw-reader-cta h2 { margin: 0 0 20px; } #asw-focused-hero-landing .asw-reader-cta-actions { display: flex; align-items: center; justify-content: center; flex-wrap: wrap; gap: 12px 24px; } @media (max-width: 760px) { #asw-focused-hero-landing .asw-reader-grid, #asw-focused-hero-landing .asw-answer-grid { grid-template-columns: minmax(0,1fr); } } @media (max-width: 680px) { #asw-focused-hero-landing .asw-sample-reader { padding: 0 6% 30px; } } @media (pointer: coarse) { #asw-focused-hero-landing .asw-sample-reader a { display: inline-flex; align-items: center; min-height: 44px; } #asw-focused-hero-landing .asw-sample-reader summary { min-height: 44px; } } /* THE STICKY ASK, PHONE ONLY (2026-09-10). See the template for why it exists. Three things it has to get right and one it must not do: IT IS NEVER SHOWN ON A LAPTOP. The hero there is two columns and the form is beside the drawing, in view, at the top — there is nothing to rescue. `display: none` outside the phone query, so the markup costs a desktop reader nothing. `[hidden]` ABOVE STILL WINS, and that is deliberate: it carries `!important`, so the `display: flex` below cannot show a bar the script has hidden. The attribute is the switch; this block only says what the bar looks like when the switch is on. THE HOME INDICATOR. `env(safe-area-inset-bottom)` keeps the button clear of the bar at the bottom of a modern iPhone; without it the tap target is partly under the system gesture area, which reads as an unresponsive button rather than a mispositioned one. AND IT IS A REAL TARGET: 44px, which is what Apple asks and WCAG 2.5.5 echoes, and the figure `qa_landing` measures the rest of this page against. */ #asw-focused-hero-landing .asw-stickycta { display: none; } @media (max-width: 680px) { #asw-focused-hero-landing .asw-stickycta { display: flex; position: fixed; left: 0; right: 0; bottom: 0; z-index: 20; padding: 10px 6%; padding-bottom: calc(10px + env(safe-area-inset-bottom)); background: var(--bv-paper); border-top: 1px solid var(--bv-line); } #asw-focused-hero-landing .asw-stickycta-btn { display: flex; align-items: center; justify-content: center; flex: 1; min-height: 44px; text-decoration: none; color: var(--bv-on-button); background: var(--bv-button); border: 1px solid var(--bv-button); border-radius: 999px; } /* THE ANALYTICS BANNER SITS ABOVE THIS BAR, NOT ON IT (2026-09-30). Both are pinned to the foot of the window, and the banner (z 90) was drawn over the top 53px of this 65px bar on a 390px phone, so the page's one call to action was hidden until the visitor answered a question about cookies. Lifted by the bar's own height while the bar is showing; with it hidden the banner keeps its usual 16px. */ body:has(#asw-focused-hero-landing .asw-stickycta:not([hidden])) .consent { bottom: calc(76px + env(safe-area-inset-bottom)); } }