@layer reset, base, layout, components, patterns, utilities, page; /* ============================================================================ NIGHT CHART — landing-only token layer Direction locked 2026-08-23, seed 58fc6dad. Additive ONLY. Never redefine a name that exists in fullhunt-tokens.css; that shared file is the contract for console + asm and is loaded UNLAYERED on purpose so its :focus-visible ring and prefers-reduced-motion guard outrank everything here, page CSS included. Palette lineage: IHO S-52 / ECDIS night display. Dark ground, amber land, pale soundings, violet-magenta reserved for caution — which is why the two locked brand colours have real functional homes here rather than being decoration: --fh-yellow is the land, --fh-purple is the caution family. Measured contrast on --l-ground (#061019): --l-ink 17.8:1 any size --l-sounding 14.2:1 body copy --l-label 10.7:1 labels and marginalia --l-faint 8.6:1 decorative fields and washes gold ~12:1 any size violet ~5.7:1 any size (never on --l-shoal: 4.3:1) ========================================================================= */ :root { /* ---- Chart substrate: water depth, shoaling toward land ---- */ --l-ground: #061019; --l-deep: #0a1a26; --l-shoal: #0f2836; --l-shoal-hi: #14384a; /* The field a dialog is printed over. #03090e is --l-ground's own channels (6 16 25) scaled to 0.55 -- one step deeper on the same blue-black ray, so the scrim is the chart's water at night and not a neutral overlay. Black here would desaturate the whole sheet behind the dialog. 68% is chosen by measurement, not taste: the page's ink drops to 2.6:1 and its gold to 2.0:1 against the scrimmed ground, so the chart behind still reads AS the chart while losing every claim on attention. Sole call site: [data-fh-dialog-backdrop] in fh-components.css. */ --l-scrim: rgb(3 9 14 / 68%); /* ---- Land: the amber body of the chart ---- */ --l-land: #1a1204; --l-land-edge: #8a5f16; /* ---- Engraved lines ---- */ --l-contour: #1d4256; --l-contour-hi: #2b5f7a; --l-neatline: #23495e; --l-neatline-rgb: 35 73 94; --l-faint-rgb: 143 179 196; --l-sounding-rgb: 207 224 234; --l-hairline: 1px; /* ---- Ink ---- */ --l-ink: #f2f7fa; --l-sounding: #cfe0ea; --l-label: #a9c6d6; --l-faint: #8fb3c4; /* ---- Chart accents, aliased to the locked brand tokens ---- */ --l-gold: var(--fh-yellow); --l-gold-rgb: 255 188 51; --l-on-gold: #12100a; --l-caution: var(--fh-purple); --l-caution-rgb: 127 122 237; /* Channel form of the shared --fh-sev-critical (#f93154), for the invalid field ring. Additive: the shared token file carries no -rgb channels. */ --l-critical-rgb: 249 49 84; /* ---- SECONDARY ACCENT, restored by owner decision 2026-08-28. ---- The incumbent's `--color-secondary` (#39c0ed) carried every badge on the search and host surfaces, and the owner's instruction is explicit and repeated: "the previous design looks more colorful... it is extremely important to have the same". This OVERRIDES The Two Jobs Rule, which says gold is land and primary action, violet is caution, and no third accent may enter. Recorded as an override rather than smuggled in, the same way `--l-radius-card` was added when rounded cards were restored. Two boundaries hold: * it is scoped to the search and host READOUTS -- it never appears on a marketing plate, and it never carries a call to action; * it is NOT `--fh-sev-info`. Reusing a severity value for a non-severity meaning is its own rule ("Don't spend a severity value on a non-severity meaning"), and a cyan tag next to a severity ramp would teach the reader that the ramp means nothing. MEASURED, not estimated (I wrote 8.9:1 here from memory first, which was wrong): 7.22:1 on --l-shoal, 8.36:1 on --l-deep, 9.07:1 on --l-ground. So it clears WCAG AA's 4.5:1 everywhere it is used, and axe passes -- but on the chip fill it sits just under this house's own stricter readability floor, which reserves anything below ~8:1 for decorative non-text. That is a knowing trade made to restore the incumbent's colour, not an oversight. If it ever needs to clear the house floor too, darken the chip fill to --l-deep rather than lightening the accent, which would drift it off the incumbent's value. */ --l-accent-2: #39c0ed; /* ---- Display type: Urbanist, the face the enterprise platform and console already use, so landing stops being the odd app out ---- */ --l-face-display: "Urbanist", "Arial Narrow", Arial, sans-serif; --l-face-data: "JetBrains Mono", "SF Mono", Monaco, Menlo, "Courier New", monospace; --l-fs-cartouche: clamp(2.375rem, 4.6vw, 4rem); --l-fs-d1: clamp(2rem, 4.2vw, 3.25rem); /* ---- The plate heading step (h2). Owner call 2026-08-28. ---- h2 used to borrow --l-fs-d1, which capped it at 52px against a 64px h1. Two consequences, both measured on /integrations/ at 1440: every section heading was nearly as loud as the page title, and a 52px/800 line wrapped to two rows inside .fh-head's 736px cap, opening a void under it. The heading-to- body ratio was 3.7:1; the design this replaced ran section heads at 1.6rem (25.6px) over 0.85rem body -- about 1.9:1 -- which is why it read as calmer and more even. 40px puts the step back without walking the display scale down: the ramp becomes 64 / 40 / 34 / 22 and the ratio 2.7:1. WHY THIS IS A NEW TOKEN AND NOT AN EDIT TO --l-fs-d1. That token has exactly two consumers: this h2, and `.sr-hero h1` at search/index.html:284, which the owner ENLARGED onto it by explicit decision ("so it is a display line again rather than a caption"). Shrinking --l-fs-d1 would have silently reversed that decision on the search entry page. Leave it alone. Reaches its 40px cap at ~1250px, so the h1/h2 step is present at every width in the 320-1600 sweep rather than only at the top end. */ --l-fs-plate: clamp(1.75rem, 3.2vw, 2.5rem); --l-fs-d2: clamp(1.5rem, 2.6vw, 2.125rem); /* Content steps raised one notch each, owner call 2026-08-28: the complaint was that the content used to occupy more of the page. Headings were already the loudest thing here, so the fix is to bring the read-matter up rather than to push the display scale further. 68 call sites across the CSS layers and 6 in templates move with these four values -- see the patch brief for the gates that must be re-run, and note that .fh-cols--2/--3 track minimums are in rem and do NOT scale with font-size, so the 320-1600 overflow sweep is the real risk here, not contrast. */ --l-fs-d3: 1.375rem; /* One step below d3, for a title that is an IDENTIFIER rather than a phrase. A repository slug (`struts-pwn_CVE-2018-11776`) cannot be re-broken across lines without becoming harder to read, so it is sized to FIT on one line rather than to a display step. Measured: 25 characters plus the inline mark needs 275px of a 303px card box, which d3 (22px) does not clear. */ --l-fs-d4: 1.125rem; --l-fs-figure: clamp(1.75rem, 3.4vw, 2.5rem); --l-fs-lead: clamp(1.0625rem, 1.4vw, 1.25rem); --l-fs-body: 1rem; --l-fs-small: 0.9375rem; --l-fs-data: 0.875rem; /* ---- CHROME DOES NOT RIDE THE CONTENT SCALE. ---- Buttons, and anything else that is interface furniture rather than read-matter, stay at the pre-2026-08-28 data size. The content bump above was asked for so the page's TEXT would occupy more room; a button label is not text in that sense, and letting it grow cost 18px in the nav's actions group -- which turned a documented 3px overflow at exactly 1200px into 5px and failed the 320-1600 sweep on ALL 25 swept pages at once. Measured at 1200px on /integrations/: actions group 373px with --l-fs-data, 355px with this. --l-fs-label was tested in isolation and is NOT implicated, so it keeps its bump. */ --l-fs-chrome: 0.8125rem; /* ---- THE LABEL REGISTER WAS UNREADABLE. Owner call 2026-08-30: "A and Product and all of these headings are so tiny, the width is so bad. Like they are not readable." 12px, uppercase, letterspaced 0.11em, at weight 500 is the worst legibility combination this system can produce, and it was the DEFAULT for every label on the site. Caps remove the word-shape a reader recognises, tracking pulls the remaining letters apart, and a medium weight at 12px leaves almost no stem to see -- each choice is defensible alone and together they produce text that has to be decoded rather than read. Nineteen rules were in this state, several inheriting weight 400 because they never set one at all. 0.8125rem is the TOP of the band this token's own comment cites and stays inside The Tracked Caps Rule as written, so the ramp is unchanged; the weight is where the real fix is, and that lives on the rules themselves. SAFE FOR THE DRAWINGS: the chart's SVG labels (`.p-label`, `.sc-tally`, `.sc-hazard-label`) set `fill` and a hardcoded `11px` in viewBox units -- the SVG Coordinate Exception -- so they do not consume this token and do not move. Checked before changing it, because resizing type inside an authored SVG would have overflowed the boxes it is drawn to fit. ---- */ --l-fs-label: 0.8125rem; --l-lh-tight: 1.02; --l-lh-snug: 1.18; --l-lh-normal: 1.5; --l-lh-relaxed: 1.65; --l-ls-cartouche: -0.03em; --l-ls-label: 0.11em; --l-ls-data: 0.01em; --l-fw-regular: 400; --l-fw-medium: 500; --l-fw-semibold: 600; --l-fw-bold: 700; --l-fw-black: 800; /* ---- Space: extends the shared --space-* scale, which stops at 2.5rem ---- */ --l-space-8: 2rem; --l-space-12: 3rem; --l-space-14: 3.5rem; --l-space-16: 4rem; --l-space-20: 5rem; --l-space-24: 6rem; --l-plate-y: clamp(2.75rem, 5.5vw, 5rem); /* ---- The sticky nav's own height, MEASURED (65px, and identical at 390, 768, 1200, 1440 and 1600 -- the bar never changes height, only its contents swap at 75rem). Its one job is to keep a fragment jump from landing underneath the bar; see `:target` in fh-base.css. If the nav's padding or the brand mark's height ever changes, re-measure this. ---- */ --l-nav-h: 4.0625rem; /* ---- Measure and containers ---- */ --l-container: 1220px; --l-container-narrow: 760px; --l-measure: 66ch; --l-gutter: clamp(1.25rem, 4vw, 2.5rem); /* The sticky nav's own height: .fh-nav__inner is min-height 4rem over a 1px border-block-end. Anything that pins under the bar -- currently the matrix table's header row -- offsets by this rather than by a repeated literal. */ --l-nav-h: calc(4rem + var(--l-hairline)); /* ---- Radius: charts are ruled, not rounded. Deliberately near-square. ---- */ --l-radius-sm: 2px; --l-radius-md: 3px; /* Card step. The 3px ceiling was an authored choice; owner review restored the incumbent's rounded cards on Our Story and the integration wall (0.75rem there, 0.5rem on the story cards). Bordered cards may use this; controls, chips and inputs stay on sm/md. */ --l-radius-card: 0.625rem; --l-radius-pill: 999px; /* ---- Nav mark footprint ---- A trailing mark on a nav link (the dropdown caret, the search glass) sits inside its own box, so it pushes the NEXT label away by gap + width while a plain link pushes it by nothing. That is what made the bar's label rhythm read as uneven. Both marks are held to one footprint, so the row has two rhythms -- marked and plain -- instead of one per mark. The caret is a 5px rotated border corner and takes the remainder as its gap; the glass is an icon and takes the remainder as its size. Footprint, not size, is the contract, because footprint is what the rhythm depends on. 13px, not 11px: at 11 the caret was comfortable but the 9px glass sat 2px off the "h" of Search and read as a ligature rather than a mark. A larger glyph needs MORE separation from a letter, not less, so the footprint is set by the glass -- the mark that needs the most air -- and the caret takes the surplus as gap. Verified at 5x. */ --l-nav-mark: 0.8125rem; --l-nav-mark-caret: 0.3125rem; --l-nav-mark-glass: 0.5625rem; /* ---- Elevation: a chart is flat. Depth comes from line weight, not shadow. ---- */ --l-shadow-plate: 0 1px 0 0 rgb(255 255 255 / 0.04) inset; --l-shadow-lift: 0 8px 24px -12px rgb(0 0 0 / 0.7); /* ---- Motion ---- */ --l-dur-fast: 120ms; --l-dur-base: 220ms; --l-dur-sweep: 1400ms; --l-dur-scan: 460ms; --l-dur-pulse: 900ms; --l-dur-draw: 620ms; --l-ease: cubic-bezier(0.2, 0.6, 0.25, 1); /* ---- Stacking: one named scale, replacing the 15 ad-hoc values ---- `traverse` is the one step BELOW the flow, added for the site-wide survey traverse (.fh-traverse): a fixed, non-interactive field that has to sit under static in-flow content, and static content paints BELOW a positioned z-index:0 box -- so `substrate` cannot hold it. Named here rather than spelled -1 at the call site, because the scale is the contract. Nothing else may use it. */ --l-z-traverse: -1; --l-z-substrate: 0; --l-z-content: 1; --l-z-nav: 100; --l-z-dropdown: 200; --l-z-modal: 300; }