/* Home tab — guided-tour landing page (home rebuild PR B). Ported from the committed design bundle at notes/design/home-page-handoff-2026-06/ (RHomePage in h2-refined.jsx with the resolved defaults: navy hero, display-lg 42/56 scale, Beyond-the-grades + bottom search band shown). Selector recipes come from the bundle's landing.css / h2-variants.css / h2-refined.css / forks.css (.fk-band) / paths.css (.pq-row, .pb-flow), adapted to the token scale — no hex, no :root here; the two display-scale tokens live at the end of styles/tokens.css. Dynamic per-instance values arrive as custom properties from js/tabs/home.js (`--w` widths, `--h` heights, `--seg-bg` fills, `--dot-bg` dots, `--x`/`--y` positions) — the sanctioned pass-through pattern; the rules below consume them. */ /* ── Full-bleed chrome (body class set by switchTab / renderHomeTab) ── Home is unfiltered: hide the filter toggle + active-filter strip and zero the .main-inner gutters so the .fk-band bands run edge to edge. Every rule is scoped under body.home-fullbleed — other tabs are pixel-identical. */ body.home-fullbleed .filter-toggle { display: none; } body.home-fullbleed .active-filters-strip { display: none; } body.home-fullbleed .main-inner { padding: 0; /* Un-cap the shell's var(--page-max) centered column too — the nav bar is full-bleed, so a centered content box left the hero/search bands floating ~100px in from the header at wide viewports (live review, 2026-06-10). Bands now share the nav's edges; their 56px inner padding carries the content inset, as in the mock. */ max-width: none; } #tab-home.tab-content { padding: 0; } /* Wordmark carries the active state while Home is the live tab (Home has no .tab button — the site title is its affordance). Scoped here, not in base.css (PR C restyles the site-wide chrome). */ .site-title.on { color: var(--accent); } /* ── Shared width/height animation hooks ────────────────────────── Every data-driven segment is a .lp-w (width: var(--w)) or .lp-h (height: var(--h)). A view render starts with .lp-anim-pre on the step container; a rAF in home.js removes it so widths/heights animate in (the bundle's `width 0.45s cubic-bezier(0.25,1,0.4,1)`). */ #tab-home .lp-w { width: var(--w, 0%); transition: width var(--t-slow) cubic-bezier(0.25, 1, 0.4, 1); } #tab-home .lp-h { height: var(--h, 0%); transition: height var(--t-slow) cubic-bezier(0.25, 1, 0.4, 1); } #tab-home .lp-anim-pre .lp-w { width: 0; } #tab-home .lp-anim-pre .lp-h { height: 0; } /* ── Hero band (navy, display-lg paddings) ───────────────────────── SHARED WITH THE BOOT STATE: site/index.html paints a static hero (the cold-load LCP) reusing .lp-hero / .lp-kicker / .lp-home-h1 at scope, before any JS runs. These rules must therefore keep working unscoped — do NOT nest them under #tab-home or body.home-fullbleed, and don't move them to a stylesheet that the boot path doesn't load, or the boot hero renders unstyled. The hero COPY is also duplicated into index.html; tests/test_boot_hero_parity.py fails if the two drift. */ .lp-hero { background: var(--surface-strong); padding: 40px 56px 36px; } /* Band content shares the shell's var(--page-max) column (the .main-inner cap on every other tab) so full-bleed band BACKGROUNDS keep running edge to edge while the content inside gains a centred buffer at wide viewports (live review round 2: "full bleed graphics, but a little bit of buffer"). The H1's own 26ch cap carries the hero measure. */ .lp-hero-inner, .lp-band-grid, .fk-band > .lp-step { max-width: var(--page-max); margin-inline: auto; } .lp-kicker { font-size: var(--text-xs); font-weight: 600; text-transform: uppercase; letter-spacing: 0.14em; color: color-mix(in srgb, var(--surface-strong-ink) 62%, transparent); } .lp-home-h1 { font-family: "Charter", "Iowan Old Style", "Cambria", Georgia, serif; font-weight: 600; font-size: var(--text-display); line-height: 1.12; letter-spacing: -0.015em; margin: 10px 0 0; max-width: 26ch; text-wrap: balance; color: var(--surface-strong-ink); } /* ── Banded rhythm + step scaffold ───────────────────────────────── */ .fk-band { padding: 30px 56px 34px; } .fk-band--alt { background: var(--paper-2); } .lp-step { display: grid; grid-template-columns: 340px minmax(0, 1fr); gap: 36px; } .lp-step-rail { display: flex; flex-direction: column; gap: var(--space-2); align-items: flex-start; } /* Step numerals + kicker take --step-num (the site-wide navy chrome token; --step-num: lands in tokens.css with PR C). Until that token ships the var() fallback paints them --accent-2 rust — the bundle's pre-navy default — so this file works either side of the merge. */ .lp-step-n { font-family: "Charter", "Iowan Old Style", "Cambria", Georgia, serif; font-weight: 700; font-size: var(--text-step-num); line-height: 1; color: var(--step-num, var(--accent-2)); } .lp-step-title { font-size: var(--text-xl); line-height: 1.15; letter-spacing: -0.01em; color: var(--ink); margin: 0; text-wrap: balance; } .lp-step-copy { font-family: "Charter", "Iowan Old Style", "Cambria", Georgia, serif; font-size: var(--text-md); line-height: 1.55; color: var(--ink-2); margin: 0; text-wrap: pretty; } .lp-step-content { min-width: 0; } /* Header row above each step's chart: optional eyebrow left, segmented toggle right. .toggle-group / .toggle-btn come from components.css — not redeclared here. */ .lp-row { display: flex; align-items: center; gap: var(--space-3); } .lp-row .sp { flex: 1; } .lp-row--head { margin-bottom: 14px; } .lp-row--lede { margin-bottom: 6px; align-items: flex-start; } .lp-eyebrow { margin: 0; } .lp-note-sub { font-size: var(--text-sm); color: var(--ink-3); margin: 3px 0 0; } /* Chip-link — uppercase micro-CTA (the bundle's .chip-link; the site has no equivalent, so it lives here as .home-chip-link). */ .home-chip-link { font-size: var(--text-xs); font-weight: 600; color: var(--accent); text-transform: uppercase; letter-spacing: 0.08em; text-decoration: none; border-bottom: 1px solid var(--accent); padding-bottom: 1px; } .home-chip-link:hover { color: var(--ink); border-bottom-color: var(--ink); } /* ── Step 01 · grade-mix rows + shared readout line ────────────────── (The 58px Overall strip retired in live review — its panel height jumped against the row views; the readout line below survives it as the shared hover/focus surface for every mix-row view.) */ .lp-strip-readout { margin-top: 10px; min-height: 20px; font-size: var(--text-sm); color: var(--ink-2); } .lp-strip-readout .g { font-weight: 600; color: var(--ink); } .lp-strip-readout .idle { color: var(--ink-3); } /* Grade-mix rows (phase / region / size / FSM / SEN). */ .lp-mix-head { display: grid; /* Roomy label column (up to 300px) so the longer toolkit-area names — "Personal development & wellbeing" — and their appended grade count aren't clipped; the bar keeps a 72px floor so it survives on mobile, where the label track shrinks (min 0) and ellipsises instead. */ grid-template-columns: minmax(0, 300px) minmax(72px, 1fr) 56px; gap: var(--space-3); padding: 0 4px 6px; border-bottom: 1px solid var(--rule); margin-bottom: var(--space-1); } .lp-mix-head span { font-size: var(--text-xs); text-transform: uppercase; letter-spacing: var(--track-eyebrow); color: var(--ink-3); font-weight: 600; } .lp-mix-head span:last-child { text-align: right; } /* Metric toggle reused from the step-03 sort button (.lp-tx-sort), sitting in the mix-head's right-aligned third column. justify-content already flush-ends its contents; width:100% lets it own the whole grid cell so the hit target spans the column. */ .lp-mix-metric { width: 100%; } .lp-mix-row { display: grid; grid-template-columns: minmax(0, 300px) minmax(72px, 1fr) 56px; gap: var(--space-3); align-items: center; padding: var(--space-1); border-radius: var(--r-sm); cursor: default; } .lp-mix-row:hover { background: var(--surface-hover); } .lp-mix-row .lbl { font-size: var(--text-base); color: var(--ink-2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .lp-mix-row .pct { font-size: var(--text-sm); font-variant-numeric: tabular-nums; color: var(--ink-2); text-align: right; } /* Step-01 label + grade count. The cell is a flex row so the count (flex:none) is never clipped — only the name (.lbl-t) ellipsises when the column is tight. */ .lp-mix-row .lbl--count { display: flex; align-items: baseline; gap: 5px; overflow: visible; } .lp-mix-row .lbl--count .lbl-t { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .lp-mix-row .lbl-n { flex: none; color: var(--ink-3); font-size: var(--text-sm); font-variant-numeric: tabular-nums; } /* The bundle specs a 110px compact label column; at the site's system stack "Highest-FSM fifth" ellipsises there, so +22px keeps the primary label whole (noted as a deviation in the PR). */ .lp-mix-head--compact, .lp-mix-row--compact { grid-template-columns: 132px minmax(0, 1fr) 56px; } /* 100%-stacked mini bar (the bundle's StackedBar). Segments are .lp-w spans with --seg-bg fills. The .mix wrapper blockifies the grid cell when the bar isn't itself the grid child (step-03 table, latest rows) so percentage segment widths resolve against the column. */ .lp-tx-row .mix, .lp-latest-row .mix { display: block; min-width: 0; } .lp-bar { display: flex; border-radius: 3px; overflow: hidden; background: var(--rule-2); min-width: 0; } .lp-bar > .lp-w { background: var(--seg-bg, var(--rule)); } .lp-bar--16 { height: 16px; } .lp-bar--12 { height: 12px; } .lp-step-footer { margin: 14px 0 0; } /* Quiet capability-guard note (step 02 before PR A's quintiles ship). */ .lp-await-note { font-size: var(--text-base); color: var(--ink-3); font-style: italic; margin: 0; } /* ── Step-01 filter cog — inline with the view toggle (docs/HOME-CUSTOMISE.md) The cohort summary + Clear ride the lede (left) of step 01's toggle row; the cog itself (chart-customise recipe, from components.css) rides the toggle row's trailing slot, just after the toolkit/phase/region toggle, so it reads as a configuration option for this chart (operator 2026-06-25). No separate strip — the toggle row's flex layout positions everything. */ .lp-cohort { font-size: var(--text-sm); color: var(--ink-2); } .lp-cohort strong { color: var(--ink); font-weight: 600; } .lp-cog-clear { border: 0; background: transparent; color: var(--accent); font: inherit; font-size: var(--text-sm); font-weight: 500; cursor: pointer; padding: 2px 4px; } .lp-cog-clear:hover { text-decoration: underline; } .lp-cog-clear:focus-visible { outline: var(--focus-ring); outline-offset: var(--focus-ring-offset); border-radius: 3px; } /* ── Safeguarding (Met / Not met) — toolkit-view row only ───────────── Binary judgement, so it rides its own 2-segment Met(green)/Not-met(red) bar (the .lp-bar / .lp-w pass-through), not the 5-grade mix bar. */ /* Toolkit-view 9th row — divided off the eight evaluation-area rows. */ .lp-mix-row--sg { border-top: 1px dashed var(--rule); margin-top: 4px; padding-top: 8px; } .lp-mix-row--sg .lbl-t { color: var(--ink); font-weight: 600; } /* ── Step 02 · 2-up characteristic panels ────────────────────────── */ .lp-duo { display: grid; grid-template-columns: 1fr 1fr; gap: 28px; } .lp-duo .eyebrow { margin-bottom: var(--space-2); } /* ── Step 03 · trusts / LAs table ─────────────────────────────────── */ /* The table lists every trust / LA clearing the ≥3-inspected floor (no top-N cap), so it can run to hundreds of rows — cap the scroll height and pin the header so column meanings stay visible while scrolling. */ .lp-tx-scroll { max-height: 520px; overflow-y: auto; } .lp-tx-head { position: sticky; top: 0; z-index: 1; /* Opaque fill so scrolling rows don't bleed through the pinned header. Must match the background of the band this step sits in: the trusts / LA table renders in an alt band (.fk-band--alt = --paper-2), so track that, not --paper — otherwise the header reads as a paler band against the cream. Keep in step with the band if the table ever moves. */ background: var(--paper-2); } .lp-tx-head, .lp-tx-row { display: grid; grid-template-columns: 26px minmax(0, 1fr) 130px 90px minmax(180px, 300px) 56px; gap: var(--space-3); align-items: center; } .lp-tx-head { /* Pinned (position:sticky above) — top padding + no bottom margin keeps it a solid opaque block so scrolling rows don't show through a gap. */ padding: 6px 10px; border-bottom: 1px solid var(--rule); } .lp-tx-head span { font-size: var(--text-xs); text-transform: uppercase; letter-spacing: var(--track-eyebrow); color: var(--ink-3); font-weight: 600; } /* Sort toggle in the last header cell — styled to read as a header label but signals (caret + hover) that the column is clickable. font-family: inherit so the