/* ============================================================================ THE BRIDGE — legacy console token names, re-pointed at the Night Chart. WHAT THIS REPLACES. A second `:root` block used to sit here restating 52 tokens that fullhunt-tokens.css already defines. Because it loaded after the canonical file it WON every one of them, which made this file a shadow source of truth: `--color-primary-hover` had already drifted to #ffbc33a1 against the canonical #e5a82e, and `--fh-yellow-hover` was hardcoded rather than aliased, so it could no longer follow a change to the canonical value. Both are gone. Anything not re-mapped below now resolves to fullhunt-tokens.css, as it always should have. WHAT IT DOES. This file is 3,600 lines of incumbent CSS written against `--natural-*` and `--fh-*`. Rather than rewrite all of it -- which cannot be done safely in one pass and cannot be reviewed -- every semantic name is re-pointed at its Night Chart equivalent. The whole app moves onto the new ground, ink, borders and accents in one reviewable block, and each surface then gets rebuilt properly on the `fh-*` components in fh-console.css. This is a MIGRATION SCAFFOLD, not the destination. Every alias below is debt: the endpoint is that `--natural-*` and the legacy `--fh-bg-*` names have no call sites left and this block is deleted. Do not author new rules against these names. ========================================================================= */ :root { /* ---- Substrate. The visible half of the migration: console leaves the GitHub-dark neutral ramp for the chart's blue-black depth scale. ---- */ --natural-100: var(--l-ground); /* page */ --natural-150: var(--l-ground); /* sidebar — the chart nav sits ON the ground and is closed by a hairline, rather than being a darker slab */ --natural-200: var(--l-deep); /* cards / panels */ --natural-300: var(--l-shoal); /* raised / hover */ --natural-350: var(--l-shoal-hi); --natural-400: var(--l-contour-hi); /* ---- Ink. The No Dead Ink Rule, applied at the root. The incumbent ran #c9d1d9 for primary text and a grey ramp beneath it; on the new ground that is exactly the "one colour, a bit dim" surface the rule names. Values go to ink, marginalia to label. --fh-text-muted RISES from #8b97a8 to --l-label (10.7:1): the house floor reserves anything under ~8:1 for decorative non-text, and muted body copy was under it. Nothing is dimmed to make it recede — if an element competes, its size, weight or position changes instead. ---- */ --fh-text-primary: var(--l-ink); --fh-text-secondary: var(--l-label); --fh-text-muted: var(--l-label); /* ---- Engraved lines. Every border in the incumbent was a white alpha wash (rgba(255,255,255,0.16)), which greys out on a blue ground. The chart rules in neatline. ---- */ --fh-border: var(--l-neatline); --fh-border-accent: var(--l-neatline); --fh-border-hover: var(--l-contour-hi); /* ---- Accents. Gold and the severity ramp come from fullhunt-tokens.css unchanged — they are the shared spine and the reason the two apps read as one brand. Only the surface tints are restated here, on the chart's channel forms. ---- */ --fh-yellow-muted: rgb(var(--l-gold-rgb) / 0.18); --fh-purple-muted: rgb(var(--l-caution-rgb) / 0.18); --fh-cyan-muted: rgb(var(--l-accent-2-rgb) / 0.18); /* ---- Type. Urbanist was already the face here; the mono channel is new. --fs-* keeps the incumbent's fixed steps so no unmigrated template changes size under this migration. ---- */ --fh-face-display: var(--l-face-display); --fh-face-data: var(--l-face-data); /* ---- Layout ---- */ --fh-sidebar-width: 270px; --l-topbar-h: 4rem; /* consumed by :target in fh-console.css */ /* ---- Channel form of --l-accent-2 (#39c0ed), for the alpha fills the tag chip needs. Every other accent in this system carries one (--l-gold-rgb, --l-caution-rgb, --l-critical-rgb, --l-neatline-rgb); this one does not, because landing has no app-wide tag chip and never needed it. IT IS DECLARED HERE, NOT IN fh-tokens-chart.css, on purpose. That file is a VERBATIM COPY of landing's token layer and is re-copied whenever landing changes -- anything added to it is destroyed on the next copy and, worse, looks like it came from landing. Console-side additions belong in console's own adaptation file, which is this one. Without it the tag chip's three fills were literal `rgb(57 192 237 / 0.1)` values, which is drift even when the hue is approved: nothing connects the literal back to the token it came from, so a change to --l-accent-2 would silently leave them behind. ---- */ --l-accent-2-rgb: 57 192 237; /* ---- Console's content-heading step. Landing's token layer is copied in verbatim, and its display steps are built for a page whose h1 IS the page: --l-fs-cartouche clamps to 4rem and --l-fs-d1 to 3.25rem. Neither suits a page heading inside an app's content column, which is why a literal `2rem` had crept onto `.console-search-hero-title`. A literal is drift even when the value is right, so the step gets a name -- here rather than in the copied file, which is destroyed on the next re-copy from landing. ---- */ --l-fs-page-head: 2rem; /* ---- Radius. Unchanged, and deliberately so: 0.375 / 0.5 / 0.75rem are the same measurements the owner instructed landing's readouts to restore, and they are already registered in .impeccable/config.json as approved design-system-radius exceptions. ---- */ --radius-sm: 0.375rem; --radius-md: 0.5rem; --radius-lg: 0.75rem; } /* ============================================================================ FULL-BLEED CORRECTION — the one thing a literal port of landing cannot get right on its own. Landing's readouts break out of the 1220px shell to use the whole display, with the standard idiom: width: 100vw; margin-inline: calc(50% - 50vw); That is correct on landing, where the shell is centred in the viewport, so `50%` of the shell and `50vw` describe the same centre line. It is WRONG in console, where a 270px fixed sidebar offsets the content column: the two centre lines are 135px apart, so the element bleeds 135px too far left -- under the sidebar -- and pushes the same 135px of horizontal scroll onto the document. Measured at 1440x900: `.fh-cols.hd-cols` rendered 1440px wide at left:135 inside a 1170px column, and `document.scrollWidth - clientWidth` was exactly 135. WHY THIS IS UNLAYERED. The rule it corrects lives in the page's own `{% block page_css %}`, inside `@layer page` -- the LAST layer in the order, so nothing layered can outrank it. Unlayered CSS beats every layer, which makes this file the only place the correction can live. That is the same reason the token bridge above is unlayered. WHY NOT EDIT THE PORTED TEMPLATES. Because they are copies. The whole point of porting landing's markup and page CSS byte-for-byte is that landing stays the single reference and a re-copy is safe; a local edit inside the ported block is exactly the drift the port exists to avoid. The adaptation belongs in console's own adaptation layer, named and argued, where a re-copy cannot silently undo it. The replacement bleeds to the CONTENT COLUMN instead of the viewport by cancelling the shell's own gutter, which is what "full bleed" means on a surface that is not the whole window. Gutters are preserved, exactly as the original rules intend. ========================================================================= */ .hd-cols, .sr-panel { width: auto; margin-inline: calc(-1 * var(--l-gutter)); } /* ============================================================================ BOOTSTRAP'S OWN THEME VARIABLES, re-pointed at the FullHunt palette. WHY THIS IS THE ONLY PLACE THIS CAN BE DONE. Bootstrap's utilities are `!important` (`.text-primary { color: ... !important }`), and for IMPORTANT declarations the cascade inverts: the EARLIEST layer wins. `vendor` is the earliest layer, so no rule in `components`, `utilities` or `page` can beat a Bootstrap utility -- not with higher specificity, not with `!important` of its own. I tried the `!important` override first and it changed nothing; the blue credit-card glyph on the billing page stayed blue. Custom properties are the way through. The `!important` declaration still wins, but it RESOLVES against these values, so retheming the variable retargets every rule that reads it in one place: text/bg/border utilities, `.btn-primary`, links, form focus rings, the spinner, the progress fill. #0d6efd is Bootstrap's blue and this product's palette contains no blue at all. "Primary" here can only mean the brand gold. ========================================================================= */ :root { --bs-primary: var(--l-gold); --bs-primary-rgb: var(--l-gold-rgb); --bs-link-color: var(--l-gold); --bs-link-color-rgb: var(--l-gold-rgb); --bs-link-hover-color: var(--fh-yellow-hover); --bs-focus-ring-color: rgb(var(--l-gold-rgb) / 0.25); /* Bootstrap paints form controls, cards, dropdowns and modals off these. Left unset they resolve to its own dark-theme greys, which are a different neutral family from the chart's blue-black and read as a seam inside an otherwise migrated page. */ --bs-body-bg: var(--l-ground); --bs-body-color: var(--l-sounding); --bs-emphasis-color: var(--l-ink); --bs-secondary-color: var(--l-label); --bs-border-color: var(--l-neatline); --bs-secondary-bg: var(--l-deep); --bs-tertiary-bg: var(--l-shoal); }