/* ============================================================
BRIGHTIDEA CAMPAIGN CSS STARTER
Copy this file, rename it for the campaign (e.g. campaign-name.css),
fill in all [FILL ...] values, select the correct template variant,
then paste the full content into the campaign admin CSS textarea
and save via site_design_save_button_bottom.
INTEGRATION WORKFLOW:
The campaign CSS field may be empty, have platform admin CSS, have
legacy custom CSS, or already have this starter installed.
ALWAYS READ BEFORE WRITING.
STEP 1 -- Classify what's already there:
-----------------------------------------
const ws = document.getElementById('ws-design-custom-css').value;
({
length: ws.length,
hasAdminScope: ws.includes('#bi-page-ct-admin-options-new'),
hasLibrary: ws.includes('.c--btn'),
hasPalette: ws.includes('--palette--'),
hasRootAny: ws.includes(':root'),
hasReset: ws.includes('font-size: 62.5%'),
})
STEP 2 -- Choose integration path:
-----------------------------------------
Case A -- Fresh / empty (length < 500)
-> Fill in [FILL ...] values. Paste full file. Save.
Case B -- Platform admin CSS only (hasAdminScope: true, hasPalette: false)
-> Append our starter AFTER the existing block. The admin CSS is
scoped to #bi-page-ct-admin-options-new -- it only affects the
admin UI, never the live page. Never delete it.
Case C -- Legacy custom CSS, no tokens (hasRootAny: false, length > 500)
-> Snapshot existing CSS locally.
Place Universal Reset :root nav/hero blocks at top.
Move legacy rules to a LEGACY block at the bottom.
Flag legacy rules for removal once verified as superseded.
Case D -- Legacy CSS with different token names (hasRootAny: true, hasPalette: false)
-> Read their token names. Merge into single :root block.
Do NOT create two :root blocks -- second one wins in cascade
but creates a maintenance trap.
Case E -- Starter already applied (hasPalette: true, hasLibrary: true)
-> Read existing structure. Update specific blocks in place.
Never overwrite the whole field -- you'll lose block history.
(!) Universal Reset check: always verify hasReset: true after
integration. Without it, rem values on /boards and /submit render
at 1.6x the intended size. If missing, prepend as very first rule.
STEP 3 -- For fresh installs (Case A/B): fill in every [FILL ...] marker.
STEP 4 -- In BLOCK G: keep only the variant matching your template type,
delete the other.
STEP 5 -- Run the template audit probe (references/template-audit.md)
to verify page types and rem base before writing any page CSS.
STEP 6 -- Paste via form_input, save via site_design_save_button_bottom.
STEP 7 -- Verify: navigate away from admin and back, check char count.
ACTIVITY PAGE ARCHITECTURE -- this CSS applies to all pages below.
Run Probe 1 (template-audit.md) to identify which page you're on.
Page pageType navRoot DOM root In scope? rem base
----------------- --------------- -------------------- ---------------------------- ----------- ---------
Home (s.php) home #navbar #bi-page-s YES (Block G) 10px
Submit (/submit) submit #navbar #bi-page-ct-a-enter-idea YES (Block K) 10px
Browse (/boards) browse #dynamic-nav #bi-page-ct-list YES (Block J) 16px(!)
View idea (/D101) view-idea .nav-campaign-image .view-idea-3.content OUT OF SCOPE 16px
Custom (a.bix) custom-page #navbar #bi-page-s YES (Block G) 10px
Enterprise home (not campaign) #navbar.nav-visible #main_content (1512px full) AFFILIATE CSS 10px
User profile (not campaign) n/a /userhome/highlights SPA OUT OF SCOPE n/a
ESF (/submit ESF) esf HIDDEN (display:none) .fractal-page-enhancedSub CSS loads(!) n/a
(!) ESF (Enhanced Submission Form): nav is unconditionally hidden at the component level.
Requires OPT 1271 (site-wide) OPT 1272 (per-campaign) both ON to activate.
Campaign nav CSS has zero effect. ESF uses z-index tiers 60000/60002/60010 --
completely isolated from campaign z-index conventions. Do NOT override field opacity.
(!) Browse rem=16px on fresh activities -- the Universal Reset in this file corrects it to 10px.
Always include the Universal Reset (first rule) in any campaign CSS.
AFFILIATE-LEVEL PAGES (enterprise home, profile, login) are styled by ent-design-custom-css ONLY.
Campaign CSS changes have ZERO effect on affiliate pages.
CDN LAYOUT DEFAULTS (read via computed style -- not structural differences):
All campaign home pages share the same HTML (#bi-page-s, container_1-6).
The activity-type CDN stylesheet sets different defaults on those containers:
* discuss.css: container_2 full-width, float:none -> use Block G Variant 1
* challenge-topic.css: container_2 700px float:left, container_3 230px float:right -> Variant 2
Block G overrides whichever CDN defaults are in play.
============================================================ */
/* ============================================================
UNIVERSAL RESET
Must be the first rule. Never remove.
[PLATFORM] CDN provides 62.5% on home, submit and custom pages
but NOT on browse (/boards, Fractal route). Target :root as well
as html -- Fractal strips top-level html/body selectors from
injected CSS, but :root survives.
============================================================ */
html,
:root {
font-size: 62.5% !important; /* 1rem = 10px */
}
:root {
/* -------------------------------------------------------------
PALETTE -- CALTRANS / DRISI
The three starter [FILL] slots, mapped to CalTrans roles.
------------------------------------------------------------- */
--palette--brand--primary: #083e5b; /* [FIGMA STYLE] Primary/Dark */
--palette--brand--secondary: #3eb1c8; /* [FIGMA STYLE] Accent/Default */
--palette--tint--warm: #f5f5f4; /* [FIGMA STYLE] Neutral/Background */
/* CalTrans additions -- no equivalent slot in the starter.
The Assets frame (166:436) defines eight brand swatches; the
three above plus these five. */
--palette--brand--darkest: #162933; /* [FIGMA STYLE] Primary/Darkest -- headings, dark bands */
--palette--accent--light: #67d2df; /* [FIGMA RAW] status pills, hover washes */
--palette--accent--inverse: #a8c4cc; /* [FIGMA STYLE] Neutral/Inverse -- body text ON dark */
--palette--gold: #ffb81c; /* [FIGMA RAW] highlight / emphasis */
--palette--gold--light: #fbd872; /* [FIGMA RAW] highlight wash */
/* CalTrans neutrals. These are warm-gray and do NOT match the
platform's cool gray ramp -- both are kept, and the semantic
layer points at the CalTrans values. */
--palette--neutral--light: #d9d9d6; /* [FIGMA STYLE] Neutral/Light -- borders, image placeholders, disabled */
--palette--neutral--body: #637480; /* [FIGMA STYLE] Neutral/Body -- secondary body copy */
--palette--neutral--dark: #4b4f54; /* [FIGMA RAW] primary body copy in cards */
/* [PLATFORM] Fixed grays. Retained so inherited starter rules and
platform widget overrides keep resolving. Prefer the CalTrans
neutrals above in new rules. */
--palette--gray--0: #ffffff;
--palette--gray--5: #f5f5f6;
--palette--gray--10: #e7e9eb;
--palette--gray--20: #d5d9db;
--palette--gray--30: #bdc3c7;
--palette--gray--40: #999ea1;
--palette--gray--50: #797d7f;
--palette--gray--60: #444647;
--palette--gray--70: #1e1f20;
--palette--gray--100: #000000;
/* System states. --palette--error matches Figma's "Alizarin"
(#E74C3C) exactly, so form error styling needs no override. */
--palette--success: #27ae60; /* [PLATFORM] */
--palette--warning: #f39c12; /* [PLATFORM] */
--palette--error: #e74c3c; /* [FIGMA STYLE] Alizarin */
/* -------------------------------------------------------------
FONTS
[FIGMA STYLE] Serif display humanist sans pairing.
Load via Masthead Custom HTML BEFORE this CSS takes effect.
------------------------------------------------------------- */
--font--heading: "Source Serif 4", Georgia, "Times New Roman", serif;
--font--body: "Source Sans 3", "Helvetica Neue", Helvetica, Arial, sans-serif;
--font--alt: var(--font--body);
--font--icons: 'FontAwesome5_Regular', 'Font Awesome 5 Pro', FontAwesome; /* [PLATFORM] */
/* (!) SOLID IS A SEPARATE FAMILY, NOT A WEIGHT -- verified live 2026-08-06 by
rendering \f3c5 four ways on this tenant:
FontAwesome5_Regular w400 -> hollow outline pin
FontAwesome5_Regular w900 -> hollow outline pin, IDENTICAL to w400
FontAwesome5_Solid w400 -> FILLED pin
Font Awesome 5 Pro w900 -> FILLED pin
So `font-weight: 900` on --font--icons is a NO-OP here: the Regular family
ships only a normal-weight face and a browser cannot synthesise a different
glyph set from it. The received wisdom "if a glyph looks wrong, set
font-weight: 900" does not apply on this platform -- change the FAMILY.
document.fonts confirms both families are loaded (FontAwesome5_Regular,
FontAwesome5_Solid, plus FA5/FA6 Pro). */
--font--icons--solid: 'FontAwesome5_Solid', 'Font Awesome 5 Pro', FontAwesome;
/* Note: the Figma file also reports two Lato styles ("12" and
"14px SUPERHEADER"). Those are Brightidea platform defaults
leaking into the mockup, not CalTrans intent -- the CalTrans
eyebrow is Source Sans 3. Do not load Lato. */
/* -------------------------------------------------------------
NAVIGATION HEIGHTS
------------------------------------------------------------- */
--nav--global--height: 5rem; /* [PLATFORM] real global nav is 50px */
/* (!) 6.4rem is a CLIENT DECISION 2026-08-05, not the Figma value -- Figma
draws the Navbar instance at 48px. Raised for presence now that this bar is
the one that stays pinned (see BLOCK G2-CT).
G1-CT's content offset reads this token, so the offset follows on its own.
What does NOT follow: --nav--item--height below, which is pinned to 48 by a
platform constraint. Read that note before changing this again. */
--nav--campaign--height: 6.4rem; /* 64px -- client, was 48px (Figma) */
--nav--total--height: 11.4rem; /* sum of the two above */
/* (!) THE NAV ITEMS STAY 48px TALL INSIDE THE 64px BAR, and this is load-
bearing, not cosmetic. The hover dropdown panel is positioned `top: 55px`
relative to its li by a CORS-blocked platform stylesheet that pins top,
margin-top, transform AND translate with !important -- all four verified
immovable on the live page (see the DROPDOWN HOVER BRIDGE note in BLOCK C).
So the panel's position is fixed relative to the LI, and the only way to
keep it under the bar is to keep the li the height the 55px was written for.
Measured with the li left to fill the 64px bar: the panel landed at y=105
against a bar bottom of y=114 -- 9px INSIDE the bar, overlapping it.
With the li held at 48 and centred: panel y=113, bar bottom y=114. Flush.
It also keeps the li-to-panel gap at 7px, so the 0.8rem hover bridge in
BLOCK C stays correct with no change.
Raising the bar further is fine; raising THIS is not. */
--nav--item--height: 4.8rem; /* 48px -- pinned by the dropdown, above */
--nav--gap: 1.2rem; /* link spacing AND the logo's cancel */
/* -------------------------------------------------------------
PINNED-STATE LOGO [live: caltrans 2026-08-05]
Slides in from the left when the nav pins, and pushes the links right.
Appears ONLY while pinned; at rest the nav is unchanged.
Same asset as the footer: both sit on #ffffff -- --footer--bg and --nav--bg
are both white -- so the artwork needs no variant.
(!) THE RATIO IS NOT MAINTAINED BY HAND. background-size is
`var(--nav--logo--width) auto`, so the height is derived from the image's
own 346x48 and the artwork CANNOT distort no matter what width is set.
An earlier version wrote both axes explicitly, which meant every width
change needed a matching height computed off 7.208:1 -- one arithmetic slip
and the logo stretches. Do not reintroduce a second explicit value here.
--nav--logo--height below is only the BOX height, a vertical band the
artwork centres inside; it does not scale the image.
(!) THE LINKS SHIFT BY WIDTH PLUS PUSH, so 11rem of logo moves them 15.8rem.
That is inherent -- the logo is a flex item, so the room it takes is room the
links move by -- and --nav--logo--push exists to add MORE than that on top.
------------------------------------------------------------- */
--nav--logo--image: url("https://d1dxeoyimx6ufk.cloudfront.net/uploads/NA5/OD7374/A6034DFC.png");
--nav--logo--width: 11rem; /* 110px -- client 2026-08-05, was 17.3rem */
--nav--logo--height: 2.4rem; /* BOX height only -- the artwork renders
15.3px tall here and centres in the band */
/* Space between the logo and the first nav link once revealed. The flex `gap`
already contributes --nav--gap, so the stuck margin-right is
push MINUS gap -- see the reveal rule. Raise this to push the links further
right without touching the logo's size. */
--nav--logo--push: 4.8rem; /* 48px */
/* (!) RENAMED from --nav--logo--motion: it drives the pinned SHADOW's fade as
well as the logo's (G2-3's transition list reads it), and the old name made
the shadow look like it had no timing of its own. They share one value on
purpose -- both are the same "the bar has pinned" moment, and letting them
drift would read as two separate events.
0.36s was 0.28s -- client asked for slightly slower, 2026-08-05. */
--nav--pin--motion: 0.36s cubic-bezier(0.2, 0, 0.2, 1);
/* Shadow while pinned only -- lifts the bar off content scrolling under it.
Points at --shadow--resting, the subtlest rung in the scale (two soft
layers at 6% and 4%); the card shadows are far too heavy for a full-width
bar, where the same opacity reads as a grey stripe across the viewport. */
--nav--shadow: var(--shadow--resting);
/* (!) [AUDIT] Figma draws the global nav at 72px (instance
"Global Navigation", 1440x72) but the live platform renders it
at 50px. The platform value wins -- Figma's 72px includes
mockup padding. Confirm both heights with template-audit.md
Probe 1 on the real campaign and correct these three tokens
before relying on any sticky/offset math. */
/* -------------------------------------------------------------
SEMANTIC COLORS
Map palette -> role. All rules reference these, never raw palette.
------------------------------------------------------------- */
/* Brand shortcuts */
--color--brand: var(--palette--brand--primary);
--color--accent: var(--palette--brand--secondary);
/* Text -- re-pointed to the CalTrans neutrals */
--color--text--base: var(--palette--neutral--dark); /* #4b4f54 */
--color--text--strong: var(--palette--brand--darkest); /* #162933 -- headings */
--color--text--muted: var(--palette--neutral--body); /* #637480 */
--color--text--inverse: #ffffff;
--color--text--on-dark: var(--palette--accent--inverse); /* #a8c4cc -- body copy on dark bands */
--color--text--link: var(--palette--brand--primary); /* [FIGMA RAW] "Learn more" = #083e5b */
--color--text--link--hover: var(--palette--brand--secondary);
/* Background */
--color--bg--page: var(--palette--tint--warm); /* #f5f5f4 */
--color--bg--surface: #ffffff;
--color--bg--muted: var(--palette--tint--warm);
--color--bg--dark: var(--palette--brand--darkest); /* #162933 -- hero/callout bands */
--color--bg--deep: var(--palette--brand--primary); /* #083e5b */
--color--bg--accent: var(--palette--brand--secondary);
--color--bg--placeholder: var(--palette--neutral--light); /* [FIGMA RAW] card image blocks */
/* Border */
--color--border--light: var(--palette--neutral--light); /* [FIGMA RAW] 1px #d9d9d6 */
--color--border--medium: rgba(0,0,0,0.12);
--color--border--strong: rgba(0,0,0,0.25);
/* -------------------------------------------------------------
TYPE SCALE (1rem = 10px, AT EVERY WIDTH)
(!) CORRECTED 2026-08-07 -- THE OLD NOTE HERE WAS WRONG, and it was wrong
in a way that quietly shaped the whole build. It claimed the platform steps
html font-size to 50% at <=768px, so that 1rem = 8px on mobile and every
rem below rendered at 80% with no rule needed. Measured on caltrans at a
real 375px viewport: the platform ships
html, :root { font-size: 62.5% !important; }
with NO breakpoint step. 1rem is 10px on a phone exactly as on a desktop,
so nothing scaled down and hero titles rendered at a full 48px on a 375px
screen. Four other comments in this file repeated the claim and have been
corrected too; if you find a fifth, it is wrong.
THE MOBILE SCALE IS NOW EXPLICIT -- see the BLOCK MOBILE-TYPE token
overrides at the end of this file. Do not assume any rem shrinks by itself.
------------------------------------------------------------- */
--text--xs: 1.2rem; /* 12px */
--text--sm: 1.4rem; /* 14px */
--text--base: 1.6rem; /* 16px */
--text--lg: 1.8rem; /* 18px */
--text--xl: 2.2rem; /* 22px -- RE-POINTED from 24px */
--text--2xl: 2.8rem; /* 28px -- RE-POINTED from 32px */
--text--3xl: 3.6rem; /* 36px -- RE-POINTED from 48px */
--text--4xl: 4.8rem; /* 48px -- RE-POINTED from 64px */
/* Line heights. CalTrans specifies absolute leading per style, so
these are the computed unitless ratios (leading / size). */
--leading--display: 1.21; /* [FIGMA STYLE] Display 48/58 */
--leading--h1: 1.22; /* [FIGMA STYLE] Heading/H1 36/44 */
--leading--h2: 1.29; /* [FIGMA STYLE] Heading/H2 28/36 */
--leading--h3: 1.36; /* [FIGMA RAW] card title 22/30 */
--leading--tight: 1.1;
--leading--snug: 1.25;
--leading--base: 1.5; /* [FIGMA STYLE] Body/Default 16/24, Caption 12/18 */
--leading--relaxed: 1.56; /* [FIGMA STYLE] Body/Large 18/28, Body/Small 14/22 */
--leading--loose: 2;
/* Font weights. Source Serif 4 ships SemiBold (600) for Display
and H1; H2 is Regular. Bold (700) is unused in this design. */
--weight--regular: 400;
--weight--medium: 500;
--weight--semibold: 600;
--weight--bold: 700;
/* Letter spacing. Every CalTrans style is 0 tracking except the
eyebrow (2.5px on 12px = 0.208em). */
--tracking--tight: -0.02em;
--tracking--normal: 0em;
--tracking--wide: 0.05em;
--tracking--wider: 0.10em;
--tracking--widest: 0.208em; /* [FIGMA STYLE] Eyebrow -- RE-POINTED from 0.16em */
/* -------------------------------------------------------------
TYPOGRAPHY SEMANTICS
One entry per named Figma text style.
------------------------------------------------------------- */
--heading--font: var(--font--heading);
--heading--size--1: var(--text--3xl); /* [FIGMA STYLE] Heading/H1 36px */
--heading--size--2: var(--text--2xl); /* [FIGMA STYLE] Heading/H2 28px */
--heading--size--3: var(--text--xl); /* [FIGMA RAW] card title 22px */
--heading--size--4: var(--text--lg); /* 18px */
--heading--weight: var(--weight--semibold);
--heading--leading: var(--leading--h1);
--heading--tracking: var(--tracking--normal);
/* Display -- hero only. Deliberately NOT a clamp(): the design
fixes it at 48px, and the platform's own rem step already
scales it to 38.4px on mobile. */
--display--font: var(--font--heading);
--display--size: var(--text--4xl); /* [FIGMA STYLE] Display 48px */
--display--weight: var(--weight--semibold);
--display--leading: var(--leading--display);
--body--font: var(--font--body);
--body--size: var(--text--base); /* [FIGMA STYLE] Body/Default 16/24 */
--body--leading: var(--leading--base);
--body--weight: var(--weight--regular);
--body--lg--size: var(--text--lg); /* [FIGMA STYLE] Body/Large 18/28 */
--body--lg--leading: var(--leading--relaxed);
--body--sm--size: var(--text--sm); /* [FIGMA STYLE] Body/Small 14/22 */
--body--sm--leading: var(--leading--relaxed);
--caption--size: var(--text--xs); /* [FIGMA STYLE] Caption 12/18 */
--caption--leading: var(--leading--base);
--eyebrow--font: var(--font--body); /* [FIGMA STYLE] Eyebrow 12 SemiBold, ls 2.5 */
--eyebrow--size: var(--text--xs);
--eyebrow--weight: var(--weight--semibold);
--eyebrow--leading: 1;
/* (!) CORRECTED 2026-08-05. Figma's `letterSpacing: 2.5` on the Eyebrow style
is 2.5 PERCENT, not 2.5px. Confirmed against a real instance: the Problem
Statement hero eyebrow (166:731) computes to `letter-spacing: 0.3px` at
12px, and 0.3 / 12 = 0.025. This token was previously 0.25rem (2.5px) --
8x too wide -- from reading that 2.5 as pixels. An em unit is also the
right shape here: the tracking scales with the type instead of drifting
when the size changes. */
--eyebrow--tracking: 0.025em; /* 2.5% -- 0.3px at 12px */
--eyebrow--transform: uppercase;
/* -------------------------------------------------------------
SPACING (fixed -- 1rem = 10px)
------------------------------------------------------------- */
--space--1: 0.4rem; /* 4px */
--space--2: 0.8rem; /* 8px */
--space--3: 1.2rem; /* 12px */
--space--4: 1.6rem; /* 16px */
--space--5: 2.4rem; /* 24px */
--space--6: 3.2rem; /* 32px */
--space--7: 4rem; /* 40px */
--space--8: 4.8rem; /* 48px */
--space--9: 6.4rem; /* 64px */
--space--10: 8rem; /* 80px */
--space--11: 9.6rem; /* 96px */
--space--12: 12rem; /* 120px */
/* -------------------------------------------------------------
VERTICAL RHYTHM -- the re-apply layer for Block G's zero baseline.
[MEASURED] CalTrans sections sit on a strict 96px gap. Verified
on 166:564 (Home) across four consecutive boundaries:
Hero 750 -> What is Vendor Day 846 = 96
What is 1306 -> Problem Statements 1402 = 96
Problem 2376 -> Questions 2472 = 96
Questions 2888 -> Callout 2984 = 96
That is --space--11, NOT the starter's 80px default.
------------------------------------------------------------- */
--rhythm--section: var(--space--11); /* 9.6rem / 96px -- between containers */
/* Per-section vertical padding for the single-container model (G-CT-SINGLE).
HALF of --rhythm--section: two adjacent sections each contribute this, so
48 48 = the 96px gap. Change --rhythm--section and change this with it. */
--section--pad-y: var(--space--8); /* 4.8rem / 48px -- half the rhythm */
/* -------------------------------------------------------------
SECTION 02 -- WHAT IS VENDOR DAY (Block I-CT-ABOUT)
[MEASURED] Figma 166:576. Tracks total 456 120 553 = 1129,
i.e. the 1128px rail.
------------------------------------------------------------- */
--about--media--width: 45.6rem; /* 456px image column */
--about--media--height: 46rem; /* 460px -- image plus ribbon overhang */
--about--img--height: 41.6rem; /* 416px photo */
--about--copy--width: 55.3rem; /* 553px copy column */
--about--col-gap: 12rem; /* 120px between columns */
--about--gap--title: var(--space--4); /* 16px heading -> body */
--about--para--gap: 2.4rem; /* 24px -- one empty body line */
/* Ribbon banner. Box is 584x139; the band is 456x117 and the two tails are
64x117 sitting --ribbon--step above it. */
--ribbon--width: 58.4rem; /* 584px overall */
--ribbon--height: 13.9rem; /* 139px overall */
--ribbon--bleed: 6.4rem; /* 64px past the image, each side */
--ribbon--step: 2.2rem; /* 22px the tails sit above the band */
--ribbon--top: 32.1rem; /* 321px from the section top */
--ribbon--text--max: 33.7rem; /* 337px -- forces the 2-line wrap */
--ribbon--bg: var(--palette--brand--primary); /* Primary/Dark #083e5b */
/* -------------------------------------------------------------
SECTION 04 -- QUESTIONS ABOUT VENDOR DAY (Block I-CT-QUESTIONS)
[MEASURED] Figma 166:622, 1128x416 at y=2472. Same two-column shape as
section 02: 456 image plus 120 gap plus 552 copy = the 1128 rail. Columns
vertically centred again -- both the 416px image and the 250px copy column
centre on y=2680.
------------------------------------------------------------- */
--q--media--width: 45.6rem; /* 456px */
--q--media--height: 41.6rem; /* 416px */
--q--copy--width: 55.2rem; /* 552px heading measure */
--q--body--width: 45.7rem; /* 457px -- body wraps narrower than the heading */
--q--col-gap: 12rem; /* 120px */
--q--gap--title: var(--space--4); /* 16px heading -> body */
--q--gap--rule: var(--space--5); /* 24px above and below the rule.
Figma measures 22 one side and 24 the other, depending on whether the
2px line is read as sitting above or below its zero-height box. 24/24 is
the clean reading of that pair and closes the column height to 250px. */
--q--gap--cta: var(--space--5); /* 24px team line -> button */
/* The short rule under the intro. [FIGMA RAW] Verified from the exported SVG:
over 64px -- Accent/Default, not
the Neutral/Light that also appears in this node's style list. */
--q--rule--width: 6.4rem; /* 64px */
--q--rule--height: 0.2rem; /* 2px */
--q--rule--color: var(--color--accent);
/* -------------------------------------------------------------
SECTION 05 -- CALLOUT BAND (Block I-CT-CALLOUT)
[MEASURED] Figma 166:1865, 1440x172 at y=2984. Full-bleed dark band.
heading box 48 -> 92 (44 = one line at 36/44)
body box 100 -> 124 (24 = one line at 16/24)
button box 64 -> 108 (44 = 12 plus 20 plus 12)
Text block is 48..124 = 76 tall, and 172 minus 2x48 padding = 76 exactly,
so pad-block is 48 and everything centres on y=86.
------------------------------------------------------------- */
/* 64px, still NOT the 96px that .c--full-bleed bands get by default.
Raised from 48px on 2026-08-07: the band now carries a footnote row as well
as the copy/CTA pair, and at 48px the three tiers were packed against the
band edges. Band height 259px -> 292px on the home page.
(!) STILL AN OVERRIDE, and the !important at #container_1 depth on
.c--callout is what makes it stick -- see the note there. Do not conclude
from this raise that the band should simply take the 96px default; at 96 the
band clears 350px and stops reading as a closing note. */
--callout--pad-block: var(--space--9); /* 64px, NOT the 96px band default */
--callout--gap--title: var(--space--2); /* 8px heading -> body */
/* Reading measure for the callout body, in CHARACTERS not pixels -- see the
note on .c--callout__body for why ch and what it really counts. */
--callout--body--measure: 60ch;
/* Footnote row -- the participation disclaimer, relocated out of the footer
2026-08-07. Deliberately NOT --callout--body--measure: this is a footnote
spanning the block it annotates, so it takes the full rail and reads as a
rule-and-caption. The 45-75ch measure argument applies to prose you read
through; a footnote is scanned once, and capping it here would leave 680px
of empty band beside it. */
--callout--note--gap: var(--space--5); /* 24px inner -> hairline */
--callout--note--pad-top: 2rem; /* 20px hairline -> text */
--callout--note--rule: rgba(255,255,255,0.16);
--callout--note--color: rgba(168,196,204,0.75); /* on-dark, held back */
/* (!) 16px NOW -- THIRD SIZE THIS LINE HAS HAD. Caption 12 -> Body/Small 14 on
2026-08-07 -> Body/Default 16 on 2026-08-11 at the client's request.
Body/Default is the next rung up, so this is still a scale move and not an
arbitrary number. But it costs something specific, and it should be a known
cost rather than a surprise: THE NOTE NOW MATCHES THE LEDE ABOVE IT EXACTLY
(.c--callout__body is also --body--size), so SIZE no longer separates the
invitation from the legal qualifier. What still does: the hairline rule above
it, the 20px gap, and --callout--note--color, which is the on-dark body
colour at 0.75 alpha. That colour is now the ONLY typographic thing marking
this as subordinate.
So: DO NOT ALSO "clean up" the note colour to full-strength on-dark. Doing
both would leave the footnote indistinguishable from body copy, and a legal
disclaimer reading as an equal voice to the invitation is the one outcome the
footnote treatment exists to prevent. If it has to go up again, take the
hairline weight or the gap up with it rather than the size.
CONTRAST, since the size changed: rgba(168,196,204,0.75) over the callout's
darkened photograph is the same ratio it was at 14px -- alpha and colour did
not move, and it was already clearing AA for normal text at the smaller size,
so the larger size cannot fail it. */
--callout--note--size: var(--body--size); /* 16px -- was 14px, was 12px */
/* Reuses the hero photograph -- same Figma node ("7 (1)(1) 1"), different
crop. Deliberately points at --hero--bg-image rather than repeating the
URL, so re-uploading the photo is a one-line change in one place. */
--callout--bg-image: var(--hero--bg-image);
/* [MEASURED] The band shows a slice 34% down the photo, not the centre.
Figma places the 1626px-square image at y offset -496.66 inside a 172px
window, and 496.66 / (1626 - 172) = 34.16%. Expressed as a percentage so it
holds at any scale -- with background-size: cover the image is as tall as
the band is wide, and the percentage still resolves to the same slice. */
--callout--bg-position-y: 34%;
/* -------------------------------------------------------------
SECTION 06 -- FOOTER (Block I-CT-FOOTER)
[MEASURED] Figma 166:634, 1440x130 at y=3156. Band is WHITE, not dark.
logo box 40 -> 64 (173x24)
copyright box 72 -> 90
nav links box 25 -> 49
disclaimer box 61 -> 105
Left column 40..90 (50 tall) and right column 25..105 (80 tall) BOTH centre
on y=65, the band's mid-line -- same vertical-centring pattern as the rest
of the page.
------------------------------------------------------------- */
--footer--bg: #ffffff;
/* (!) 9.6rem was 13rem -- reduced 2026-08-06, after the copyright moved out to
the legal strip. Figma draws this band at 130px, but that height was sized
for a two-line brand block (logo above copyright); with the logo alone the
band was mostly empty. 96px is --rhythm--section, so the footer's depth now
matches the spacing unit the rest of the page uses.
It is a FLOOR, not a height: .c--footer is flex with align-items:center, so
the content stays vertically centred and the band grows if the nav links
ever wrap. */
--footer--min-height: 9.6rem; /* 96px -- was 130px (Figma) */
/* (!) 4rem was 2.5rem -- raised 2026-08-11, when the nav links came out and the
brand block was centred. 25px was the RIGHT COLUMN'S inset: it was derived
from a two-column band where the nav plus disclaimer stack (80px tall) set
the height and the padding only had to clear it. With one short centred
column left (logo 19px 8px gap copyright 17px = ~44px), 25px read as a
thin strip rather than a closing band.
40px is --space--7. The band now computes to ~124px, which is ABOVE
--footer--min-height (96px), so the min-height has stopped being the thing
that sets the depth -- the padding is. Do not "fix" that by cutting the
padding back; if the band ever needs to be shallower, lower this token and
let the min-height take over again. */
--footer--pad-block: 4rem; /* 40px -- was 25px */
/* Logo is sized by WIDTH ONLY; height follows the asset's aspect ratio.
The wordmark is 346x48 -- exactly 2x the 173x24 box in the Figma frame
(7.208:1), so at 17.3rem it renders at precisely 24px tall and the band
lands on Figma's 130px.
(!) DO NOT set a fixed height here as well. An earlier asset was 3:1
rather than 7.2:1, and pinning both dimensions with object-fit: contain
rendered it 72px wide inside a 173px box -- tiny and off-centre. Width-only
sizing is what makes this survive a re-export at a different aspect ratio.
17.3rem keeps it under the 180px cap; --footer--logo--max is the ceiling. */
/* (!) 16rem was 14rem -- raised 2026-08-11, and the history matters because this
token has now moved in both directions: 17.3rem (Figma-exact) -> 14rem at the
client's request 2026-08-06 -> 16rem now that the logo is CENTRED AND ALONE.
That is not a reversal of the client's note. At 140px the wordmark was one of
two things in a two-column band and read as a mark; centred with only the
copyright under it, it is the sole object in the footer and 140px read as
under-scaled for the job.
Height follows the 7.208:1 aspect: 160px wide renders 22.2px tall, up from
19.4px. That grows the brand column ~3px and the band with it, which the
40px padding absorbs -- nothing else needs adjusting.
Still under the 18rem (--footer--logo--max) ceiling, with 20px to spare. */
--footer--logo--width: 16rem; /* 160px -- was 14rem, was 17.3rem (Figma) */
--footer--logo--max: 18rem; /* 180px hard ceiling */
--footer--gap--logo: var(--space--2); /* 8px logo -> copyright */
/* nav -> disclaimer. Reduced from 1.2rem (12px) on request, alongside the
disclaimer's size and leading, so the fine print sits tighter under the
links and reads as secondary rather than as a second content block. */
--footer--gap--nav: var(--space--2); /* 8px nav -> disclaimer */
--footer--nav--gap: 4rem; /* 40px between nav links */
/* 75ch, not 645px. At 645 the disclaimer still ran ~150 characters before
wrapping, which is well past the comfortable 45-75 for a measure and is
what made the fine print scan as a ticker. 75ch lands it at 447px / two
balanced lines. A ch unit rather than a rem because this is a MEASURE --
it should track the font, not the layout. */
--footer--disclaimer--max: 75ch;
/* Figma sets the copyright and the nav links to pure BLACK, not the page's
--color--text--base. Only the disclaimer uses Neutral/Body. */
--footer--text: #000000;
--footer--disclaimer: var(--color--text--muted);
/* The copyright line under the logo. Lighter than the black --footer--text,
at the client's request 2026-08-06 -- it now matches the disclaimer on the
other side of the footer, which reads as one tier of secondary text rather
than two weights of it.
Contrast checked, not assumed: #637480 on the white footer is 4.9:1, which
clears AA for normal text (4.5:1) even at this 12px size. Do not lighten it
further without re-checking -- the next step down fails. */
--footer--copyright: var(--color--text--muted);
/* Its own token rather than --caption--size directly, because this line has now
been resized twice and the next request should not have to touch the rule.
(!) BACK TO 12px (Caption) ON 2026-08-11, after a brief 11px. The 11px was
written to answer "make it smaller" -- but the line was NOT rendering at the
12px the file claimed. It was rendering at 16px, because CR-2 was out-
specifying the rule (see the note on the rule itself). So "smaller" was
really "the size it was always supposed to be", and dropping below the scale
was solving the wrong problem. Jonathan named 12px explicitly.
This is the BOTTOM RUNG of the type scale. There is no next step down, so a
future "smaller" request means leaving the scale -- do that in this token,
not by hard-coding a size on the rule, and re-check contrast: #637480 on
white is 4.9:1, which clears AA for normal text with about 0.4 to spare. */
--footer--copyright--size: var(--caption--size); /* 12px -- Caption 12/18 */
/* -------------------------------------------------------------
LEGAL STRIP -- a navy band BELOW the footer, added 2026-08-06.
(!) NOT IN FIGMA. A deliberate addition, not a translation. The disclaimer
used to share the footer's right-hand column with the nav links, so a
150-character legal sentence was competing for space with a three-item link
row and neither could be itself. Splitting the legal text out is the
conventional fix and gives the sentence a full-width measure.
It also gives the page a definite ending: before this, the last thing on
screen was a white band directly under the dark callout, which read as
unfinished rather than closed.
(!) KEEP IT SLIM. On the home page the sequence is callout (dark photo) ->
footer (white) -> this strip (navy). That only reads as a distinct object
rather than a stripe pattern while the strip stays shallow -- roughly 50px.
Do not give it section-scale padding.
CONTRAST CHECKED, NOT ASSUMED: --color--text--on-dark (#a8c4cc) on
Primary/Dark (#083e5b) computes to 6.18:1, which clears AA for normal text
(4.5:1) at this 12px size. Do not darken the band or lighten the type
without recomputing -- this is the smallest text on the site.
------------------------------------------------------------- */
/* (!) THE SEPARATE NAVY LEGAL STRIP IS GONE (2026-08-07). Its tokens
(--footer--legal--bg / --color / --pad-block / --gap) went with it. It was
added on 2026-08-06 to get the disclaimer out of the footer's right column,
and it solved that -- but page, white footer and navy strip stacked into
three bands directly under the dark Questions callout, and the run of
horizontal stripes was worse than the problem it fixed. Jonathan's call.
The legal text is back inside the white footer, which is where the
.c--footer__brand / .c--footer__right column rules below always expected
it. Do not re-introduce a filled band here; if the two tiers ever need
separating, a 1px hairline is the move, not a fill. */
/* -------------------------------------------------------------
PROBLEM STATEMENT PAGES (Block I-CT-PSPAGE) -- a.bix ... f.bix
[MEASURED] Figma 166:672. ONE template, six pages.
(!) THESE PAGES USE A NARROWER MEASURE THAN THE HOME PAGE: 934px, not the
1128px rail. The TOC rule sits at x=252 and the content ends at x=1186, and
(1440 - 934) / 2 = 253. Deliberate -- long-form reading measure.
Inside it: 288px TOC column, then 646px content column.
------------------------------------------------------------- */
--psp--measure: 93.4rem; /* 934px, centred -- NOT --layout--content--max */
--psp--toc--col: 28.8rem; /* 288px TOC column */
/* (!) 60rem was 64.6rem -- tightened 2026-08-06, and the honest version of why.
The first review of these pages claimed the measure was "85-90 characters,
too long". That was wrong: it assumed 16px body text. MEASURED, the body is
18px with 1ch = 8.95px, so 646px held 72.2ch of capacity and rendered
71 ACTUAL characters per line -- inside the comfortable 45-75 band, at the
top of it. Nothing was broken.
600px brings it to about 66 characters, which is the middle of that band,
and that is the whole justification. It is a refinement, not a fix.
(!) rem, NOT ch, even though this is a measure. `ch` resolves against the
font of the element it is written on -- here that would be the grid
container at 16px, not the 18px paragraphs inside it -- so a ch value here
would silently mean something other than characters of body text. The same
trap cost time on --ps--inset used as a flex-basis. Convert by hand and
record the arithmetic, as above.
The 934px body measure is unchanged: the track simply no longer fills it, so
the TOC stays exactly where it is and only the text column narrows. */
--psp--content--col: 60rem; /* 600px -- about 66 characters at 18px */
/* Hero. Same photograph as the home hero and the callout -- points at
--hero--bg-image so the asset lives in exactly one place. Third distinct
crop of it: home is centre, the callout 34%, this 42%.
[MEASURED] image 1500sq masked to 1440x435 at a 448px vertical offset;
448 / (1500 - 435) = 42.06%. */
/* (!) NO min-height ON THIS HERO -- removed 2026-08-05, deliberately.
Figma draws the band at 435px, but the title length varies a lot across the
six pages (one line for "Asset Protection", three for "Modernizing State
Highway System Monitoring..."). A 435px floor made the short-title pages
carry dead space below the champion line to reach it. Padding alone lets
each band size to its own content, so the space above and below the text is
identical on all six even though the bands differ in height -- which reads
as more consistent than equal heights do.
Do not reintroduce --psp--hero--min-height to "match Figma": the 435px is
one page's measurement, not a constraint. */
--psp--hero--pad-block: var(--space--11); /* 96px top and bottom */
--psp--hero--bg-position-y: 42%;
--psp--hero--title--max: 64.8rem; /* 648px */
--psp--hero--champion--max: 45.6rem; /* 456px */
--psp--gap--eyebrow: var(--space--2); /* 8px eyebrow -> title */
/* Was --space--5 (24px). Tightened 2026-08-05 at the client's request, in the
same pass that took the champion line from 14px to 16px -- the line got
heavier, so it needed to sit closer to the title to stay grouped with it.
Kept on the 8px scale rather than a literal 20px. */
--psp--gap--champion: var(--space--4); /* 16px title -> champion */
--psp--champion--color: #d9d9d9; /* the name; the label is accent */
/* Body rhythm */
--psp--section--gap: var(--space--11); /* 96px between numbered sections */
--psp--gap--heading: var(--space--5); /* 24px heading -> first paragraph */
--psp--gap--para: 2.8rem; /* 28px -- one empty Body/Large line */
--psp--gap--lead: var(--space--4); /* 16px lead-in -> objectives list */
--psp--num--gap: 1.3rem; /* 13px between "01" and the title */
/* Objectives list. Check is a Font Awesome glyph, not an asset. */
--psp--check--col: 2.2rem; /* 22px icon column */
--psp--check--gap: 1.6rem; /* 16px icon -> text (22 plus 16 = the 38px offset) */
--psp--obj--gap: var(--space--4); /* 16px between objectives */
/* Sticky TOC and its sliding indicator.
(!) CORRECTED 2026-08-05 -- 4rem was wrong and the TOC slid under the nav.
I had recorded that nothing on the page is fixed. It is: DIV.nav-desktop,
the campaign nav row, computes `position: fixed` and occupies y=50..98
(measured live on a.bix). The global nav above it is static and does scroll
away, but .nav-desktop persists, so anything sticky must clear 98px.
12.2rem = the 9.8rem nav stack plus 2.4rem of breathing room, written as a
literal because campaign CSS strips ' ' from calc() on save.
This token also feeds scroll-margin-top on the sections, so a jumped-to
heading clears the fixed nav for the same reason. */
--psp--toc--top: 12.2rem; /* 122px = 98 fixed nav plus 24 clearance */
--psp--toc--indent: 3.1rem; /* 31px links inset from the rule */
--psp--toc--gap: 1.2rem; /* 12px between links */
--psp--toc--item: 2.4rem; /* 24px one link line box */
--psp--toc--rule: 2px;
--psp--toc--track: var(--color--border--light); /* Neutral/Light */
--psp--toc--thumb: var(--color--accent);
/* -------------------------------------------------------------
SECTION 03 -- PROBLEM STATEMENTS (Block I-CT-PROBLEMS)
[MEASURED] Figma 166:593. Cards at x=156/540/924/1308, so 360 wide with a
24px gap; the 4th ends at 1668, past the 1440 frame -- the overflow IS the
design, signalling more to scroll.
------------------------------------------------------------- */
--ps--card--width: 36rem; /* 360px */
--ps--card--min-height: 53rem; /* 530px -- Figma pins all cards to this */
--ps--card--gap: var(--space--5); /* 24px between cards */
--ps--intro--max: 74.4rem; /* 744px intro measure */
--ps--gap--title: var(--space--4); /* 16px heading -> intro */
--ps--gap--cards: var(--space--7); /* 40px intro -> cards */
/* 40px, up from 24px on 2026-08-07 -- the controls were sitting close enough
to the cards to read as attached to them. Note this is NOT the rendered
margin: .c--ps__controls subtracts the 32px shadow gutter from it, so the
margin computes to 8px and the visible card-box-to-controls gap is this
value. Measured 40px after the change. */
--ps--gap--controls: var(--space--7); /* 40px cards -> controls */
/* Space after the LAST card at the end of the scroll. Rendered as a flex
spacer, not padding -- see .c--ps__track::after. The visible result is this
plus the track's 24px gap, so 4.8rem reads as 72px of clear space.
(!) Do NOT point this at --ps--inset to mirror the left gutter. That token
is max(24px, calc(50% - rail/2)), and as a flex-basis the 50% resolves
against the TRACK, not the viewport -- it measured 150px instead of the
expected 276px. A percentage means something different here. */
--ps--trail: var(--space--8); /* 48px */
/* Shadow gutters inside the scroller.
(!) A scroll container CANNOT have overflow-y: visible -- setting
overflow-x: auto forces the other axis to auto/hidden, so the cards' drop
shadow is clipped at the padding box no matter what. The only fix is to pad
the scroller by at least the shadow's reach.
Sized off --card--shadow--hover (0 8px 24px), which is the LARGER of the two
card shadows and the one that was visibly cut:
downward offset 8 plus blur 24 = 32
upward blur 24 minus offset 8 = 16, rounded up to 24
sideways blur 24 = 24
The resting shadow (0 4px 12px) fits well inside these. */
--ps--shadow--gutter-top: var(--space--5); /* 24px */
--ps--shadow--gutter-bottom: var(--space--6); /* 32px */
--ps--shadow--gutter-x: var(--space--5); /* 24px */
/* The rail inset, redeclared for this section's DIRECT CHILDREN.
(!) It cannot reuse --layout--section--pad-x. That token contains
calc(50% - content-max / 2), and percentages resolve against the
CONTAINING BLOCK -- so inside an already-inset section content box (1128px)
it computes 0, not 192px. Applying it to direct children of the FULL-WIDTH
section resolves 50% against 1512px and gives the correct 192px. */
--ps--inset: max(var(--space--5), calc(50% - var(--layout--content--max) / 2));
/* Indicator: a progress bar, not dots. Track 192x9, thumb 56x9, both
radius 40. The thumb WIDTH is set by the footer JS from the visible
fraction of the scroller, so 56px is only the Figma illustration. */
--ps--indicator--width: 19.2rem;
--ps--indicator--height: 0.9rem;
--ps--indicator--track: #d9d9d9;
--ps--indicator--thumb: var(--color--accent);
/* Arrow buttons: 56x56, 8px apart. Next is accent, prev renders in the
neutral disabled fill until there is something to go back to.
(!) FULLY ROUND, NOT FIGMA'S 16px -- changed 2026-08-07 as part of the
radius audit. 16px was the only value in the build on no scale at all,
card or control. The two card radii (8 / 24) were both wrong to borrow
here: this is a CONTROL, and every other control on the site is
--radius--full -- buttons, the nav search field, avatars, the indicator
track and thumb, the agenda dots, the info pin. A circular carousel arrow
is also the conventional form. This is a deliberate departure from the
Figma frame; if it goes back, put it on a scale rung rather than 16px. */
--ps--arrow--size: 5.6rem;
--ps--arrow--radius: var(--radius--full);
--ps--arrow--gap: var(--space--2);
--ps--arrow--bg: var(--color--accent);
--ps--arrow--bg--disabled: #d9d9d9;
--ps--arrow--icon: var(--color--text--inverse);
--rhythm--widget: var(--space--6); /* 3.2rem / 32px -- between widgets */
/* -------------------------------------------------------------
BORDER RADIUS
------------------------------------------------------------- */
/* (!) TWO CARD RADII, NOT MORE -- audited and enforced 2026-08-07.
Every card and image surface on this site is either --radius--md (standard)
or --radius--xl (the CTA/feature tier). Both come from Figma. --radius--lg
is a SPARE RUNG with nothing pointing at it: the Getting to the Event cards
and map used to, which made 12px a third card radius that appeared on one
section of one page. Do not reach for --radius--lg for a new card or image;
decide which of the two tiers the surface belongs to.
Controls are a separate scale and are deliberately not on these values:
buttons, avatars, the carousel arrows, the scroll indicator, the agenda dots
and the map pin all take --radius--full; status pills --radius--tag; form
inputs and small chrome --radius--sm. There is no half-round control tier --
the carousel arrows were the only thing in it (16px) and were moved to
--radius--full on 2026-08-07. */
--radius--sm: 4px; /* form controls, small chrome */
--radius--md: 8px; /* [FIGMA RAW] standard card -- and images inside one */
--radius--lg: 12px; /* SPARE -- unreferenced, see the note above */
--radius--tag: 20px; /* [FIGMA RAW] status pill */
--radius--xl: 24px; /* [FIGMA RAW] CTA card, glass card, feature image */
--radius--full: 9999px; /* [FIGMA RAW] buttons, avatars */
/* -------------------------------------------------------------
ELEVATION
[FIGMA STYLE] Elevation/1 and Glass Card / Illuminated are named
effect styles. The two card shadows are raw values on the card
components -- they are the pair that actually carries the card
hover, so they get first-class tokens.
------------------------------------------------------------- */
--shadow--resting: 0 1px 4px rgba(0,0,0,0.06), 0 2px 12px rgba(0,0,0,0.04);
--shadow--card: 0 4px 12px rgba(0,0,0,0.10);
--shadow--card--hover: 0 8px 24px rgba(0,0,0,0.18);
/* Glass Card / Illuminated. The Figma effect also carries
GLASS radius 4 -- that is a backdrop blur, applied on the
component (see .c--card--glass) since it cannot live in a
box-shadow token. */
--shadow--glass: 0 4px 16px rgba(0,0,0,0.25),
0 0 20px rgba(62,177,200,0.22),
inset 0 1px 1px rgba(255,255,255,0.35);
--blur--glass: 4px;
/* Aliases so inherited starter rules resolve to CalTrans values */
--shadow--sm: var(--shadow--card);
--shadow--md: var(--shadow--card--hover);
/* -------------------------------------------------------------
MOTION
------------------------------------------------------------- */
--transition--base: 0.2s ease;
--transition--fast: 0.1s ease;
/* -------------------------------------------------------------
Z-INDEX LADDER
[PLATFORM] Mapped to the real platform stack: nav 9998,
jQuery UI overlay 9997, bimodal/colorbox 9999, @mention
typeahead 20004, binotify toast 99999. Any token at 1000 or
below is safe only for in-page elements below the nav.
------------------------------------------------------------- */
--z--dropdown: 100;
--z--sticky: 9995;
--z--above-nav: 9999;
--z--overlay: 10000;
--z--modal: 12000;
--z--notification: 99998;
/* -------------------------------------------------------------
LAYOUT
[MEASURED] CalTrans uses a 1128px content rail inside 156px
gutters on a 1440px frame (156 1128 156 = 1440). Confirmed
on Home/Questions (166:622), Event Info/Getting to the Event
(166:876) and Getting There (166:1257) -- all x=156 w=1128.
The starter's 1280px default is wider than this design.
------------------------------------------------------------- */
--layout--content--max: 112.8rem; /* 1128px */
/* (!) MEASURING NAV ALIGNMENT AS AN ADMIN GIVES A WRONG ANSWER, and it is worth
knowing before anyone re-measures this page. [live: caltrans 2026-08-06]
Logged in as an admin the nav carries a 200px trailing li holding the Site /
Site Setup / Pipeline / Steps dropdown, which pushes the Submit Solution
button about 250px off the right edge. Read as a signed-out visitor the nav
is symmetric at its 4rem inset. Any right-edge measurement taken from an
admin session is inflated by roughly that 250px. */
/* --layout--gutter REMOVED 2026-08-04 -- read by nothing. The gutter is not
a token: Block G computes it as max(0px, calc(50% - content-max / 2)), so
it follows --layout--content--max automatically. A separate token could
silently disagree with the real tracks. */
/* [MEASURED] Submission form column: 744px at x=348 on a 1440 frame
(348 plus 744 plus 348 = 1440). Figma 166:901.
(!) PENDING, NOT DEAD: no rule reads this yet because the Submission Form
page has not been built. Block K must consume it when that work happens --
if it does not, this becomes a KFM #48 dead token. Tracked deliberately. */
--layout--form--max: 74.4rem; /* 744px */
--layout--section--pad-y: var(--rhythm--section);
--layout--section--pad-x: max(var(--space--5), calc(50% - var(--layout--content--max) / 2));
/* --layout--hero--margin-bottom REMOVED 2026-08-04.
It was defined and read by nothing -- a token that named the hero-to-content
gap while not controlling it. That gap is now owned by --rhythm--section
(Block G-RHYTHM's row-gap on #main_content, 96px). Editing a dead token and
seeing no change is the exact trap KFM #48 describes, so it is deleted
rather than left advertised. Change the gap via --rhythm--section. */
--layout--component--gap: var(--space--8);
/* Two-column grid tokens (--layout--grid--main / --sidebar / --col-gap)
REMOVED 2026-08-04 along with Block G VARIANT 2. They named tracks that no
longer exist on this campaign; leaving them would advertise control over a
two-column layout that is gone. Restore both together from
campaign-css-starter.css if a two-column page is ever needed. */
/* -------------------------------------------------------------
NAVIGATION COMPONENT
------------------------------------------------------------- */
--nav--bg: var(--color--bg--surface);
--nav--link--color: var(--color--brand); /* Primary/Dark #083e5b */
/* (!) --nav--link--hover resolves to the SAME #083e5b as the default above,
so hover currently produces no visible change. Point it at
var(--color--accent) (#3eb1c8, which is what --nav--link--active already
uses) to give hover a state again. Left as-is rather than changed silently,
since it was not part of the request. */
--nav--link--hover: var(--color--brand);
--nav--link--active: var(--color--accent);
--nav--link--weight: var(--weight--regular);
--nav--link--size: var(--text--sm);
/* Nav CTA -- the "Submit Solution" link rendered as a pill button.
pad-y is 0.8rem, NOT the 1.2rem of a body button: a 44px pill inside the
48px nav bar leaves only 2px top and bottom and reads cramped. 0.8rem gives
a 36px pill with 6px of breathing room. */
--nav--cta--pad-y: var(--space--2); /* 8px */
--nav--cta--pad-x: var(--space--5); /* 24px */
--nav--cta--bg: var(--btn--primary--bg);
--nav--cta--bg--hover: var(--btn--primary--bg--hover);
--nav--cta--color: var(--color--text--inverse);
/* Global nav search. [FIGMA RAW] Both are Neutral/Light in the comp.
See the contrast note in Block D before changing --search--placeholder. */
--search--placeholder: var(--palette--neutral--light);
--search--icon: var(--palette--neutral--light);
/* -------------------------------------------------------------
HERO COMPONENT
(!) [PLATFORM] Never set a height on the hero band -- its text
region is absolutely positioned against a JS-computed height,
so any stylesheet height (even auto) collapses the band and
orphans content onto the widgets below. No --hero--height token
exists on purpose.
------------------------------------------------------------- */
--hero--overlay--color: rgba(22,41,51,0.75); /* Primary/Darkest at 75% */
--hero--content--align: left;
/* [MEASURED] Figma 166:567. Two DIFFERENT widths -- confusing them wraps the
headline, which is how the first build of this went wrong:
copy column 627px headline measure; = logo x 783 minus rail left 156
body 553px narrower ON PURPOSE, for line length
Consumed by Block B's B5 (headline max-width) and B6 (description
max-width). The headline needs about 600px on one line at 48px, so it must
get the 627px value, not the 553px one. */
/* (!) THESE FOUR WERE MISSING UNTIL 2026-08-04 and the failure was silent.
They were referenced by BLOCK I-CT-HERO but never declared, so
`background-image`, `padding-top/bottom` and both internal gaps were
INVALID DECLARATIONS and were dropped -- no hero image, no padding, no
rhythm inside the band. --hero--min-height masked the missing padding by
holding the band at 630px anyway, which is why it looked like a width
problem rather than a missing-token problem.
An undefined var() with no fallback kills its whole declaration. The
dead-token audit does NOT catch this (that finds the opposite case), so
_gates.py now checks for undefined vars too.
[ASSET] Hero background, uploaded to the file library. The CloudFront host
is CSP-allowed. Do NOT switch this to a data: URI -- campaign CSS is
urldecode()d on save and base64 contains ' '. */
--hero--bg-image: url("https://d1dxeoyimx6ufk.cloudfront.net/uploads/NA5/OD7374/8CD7F56E.jpg");
/* [MEASURED] Figma 166:567, all relative to the band top.
band 0 -> 630
title box 120 -> 178 (58 = one line at 48/58)
body box 202 -> 426 (224 = 8 lines at 28: 5 blank 2)
button box 466 -> 510 (44 = 12 20 12)
Gaps: 120 top pad, 24 title->body, 40 body->button, 120 bottom pad.
Check: 58 24 224 40 44 = 390, plus 240 padding = the 630 band.
(!) CORRECTED 2026-08-04 -- these were 5.2rem / 6.8rem, which read as
excessive space under the headline. The error was assuming the body was 6
lines (168px) instead of 8 (224px). Figma CENTRES the body block on y=434,
so a taller block starts HIGHER and the gap above it is SMALLER: 202 - 178
= 24, not 230 - 178 = 52.
Why it survived review: the text column sums to 390px EITHER WAY
(58 52 168 68 44 and 58 24 224 40 44 both equal 390), so the 630px band
total still closed perfectly and looked like confirmation. A correct total
does not validate the parts.
The tell that was ignored: 52 and 68 are off the 8px spacing scale in an
otherwise clean system. The corrected 24 and 40 are --space--5 and
--space--7. Off-scale values here mean a bad derivation, not a bold design
choice -- do not "restore" them. */
/* (!) BOTH RESET TO THE FIGMA VALUES 2026-08-05. They were briefly 550 / 96
to shorten the band; the client reset the padding, so the floor goes back
with it -- the two are coupled. Content is 390px, so at 120px padding the
band is 630px and a 550px floor would never be reached, leaving a token
that reads as meaningful but is inert. If the band needs shortening again,
change BOTH, and change --hero--pad-block first: min-height alone does
nothing while it sits below content-plus-padding. */
--hero--min-height: 63rem; /* 630px band -- a FLOOR, not a fixed
height; the band grows with copy */
--hero--pad-block: 12rem; /* 120px top and bottom */
--hero--gap--title: var(--space--5); /* 24px title box -> body box */
--hero--gap--cta: var(--space--7); /* 40px body box -> button box */
--hero--copy--max: 62.7rem; /* 627px headline measure */
--hero--body--max: 55.3rem; /* 553px description measure */
/* [FIGMA RAW] One empty body line between paragraphs (28px). Must be a
LENGTH -- the --leading--* tokens are unitless ratios, so margin-top:1.56
is invalid and the declaration is silently dropped. */
--hero--para--gap: 2.8rem;
/* [FIGMA RAW] The DRISI logo, placed as a right-anchored background image on
the hero band -- the platform hero widget has no second image slot.
[ASSET] Upload via the file library and paste the CloudFront URL; that host
is CSP-allowed. Do NOT inline a data: URI -- campaign CSS urldecodes on
save, and both base64 and "image/svg xml" contain a ' ' (Core Principle 3). */
--hero--logo--image: none; /* [ASSET: set to url("...") to enable] */
/* (!) 48rem was 54.5rem -- reduced 2026-08-06 at the client's request.
There is a second, useful effect worth knowing: at 545px the row did not fit
(copy 627 plus logo 545 = 1172 against a 1128 rail), so flex was SHRINKING
the logo 44px to 501px every render -- the size on screen was a shortfall,
not a chosen value. At 480px the row totals 1107 and fits with 21px to spare,
so the logo now renders at exactly its token. Net change on screen is only
about 21px, which is why it reads as slight.
--hero--logo--height is scaled to match (545:460 becomes 480:405). It is
read only by the inert background-image variant of this block -- the live
markup uses an at width:100% -- but a stale pair here would distort
that variant the moment anyone enabled it. */
--hero--logo--width: 48rem; /* 480px -- client, was 545px */
--hero--logo--height: 40.5rem; /* 405px -- keeps the logo's 545:460 ratio */
/* -------------------------------------------------------------
BUTTON COMPONENT
[FIGMA RAW] Assets frame 166:455. Pill, 12px/24px padding,
Source Sans 3 SemiBold 14/20. Icon variant shifts to 20px left
padding with an 8px gap.
------------------------------------------------------------- */
--btn--font: var(--font--body);
--btn--size: var(--text--sm); /* 14px */
--btn--weight: var(--weight--semibold);
--btn--line-height: 1.43; /* 20px on 14px */
--btn--pad-y: var(--space--3); /* 12px */
--btn--pad-x: var(--space--5); /* 24px */
--btn--pad-x--icon: 2rem; /* 20px -- off the 8px scale; the real Figma value */
--btn--gap: var(--space--2); /* 8px */
--btn--radius: var(--radius--full);
--btn--border-width: 1.5px;
/* Primary */
--btn--primary--bg: var(--color--accent); /* #3eb1c8 */
--btn--primary--bg--hover: var(--palette--brand--primary); /* #083e5b */
--btn--primary--color: var(--color--text--inverse);
--btn--primary--border: transparent;
--btn--primary--bg--disabled: var(--palette--neutral--light); /* #d9d9d6 */
--btn--primary--color--disabled: var(--palette--neutral--dark); /* #4b4f54 */
/* Secondary (outlined) */
--btn--secondary--border: var(--color--accent);
--btn--secondary--color: var(--color--accent);
--btn--secondary--bg--hover: rgba(103,210,223,0.2); /* accent--light at 20% */
--btn--secondary--border--hover: var(--palette--brand--primary);
--btn--secondary--color--hover: var(--palette--brand--primary);
--btn--secondary--disabled: var(--palette--neutral--light);
/* Ghost */
--btn--ghost--color: var(--palette--brand--darkest); /* #162933 */
--btn--ghost--bg--hover: rgba(217,217,214,0.3); /* neutral--light at 30% */
--btn--ghost--color--disabled: var(--palette--neutral--light);
/* Legacy starter aliases */
--btn--light--bg: var(--color--bg--surface);
--btn--light--color: var(--color--accent);
/* -------------------------------------------------------------
CARD COMPONENT
[FIGMA RAW] Card/Standard 166:508, Card/Idea 166:483.
------------------------------------------------------------- */
--card--bg: var(--color--bg--surface);
--card--radius: var(--radius--md); /* 8px */
--card--radius--cta: var(--radius--xl); /* 24px on the has-CTA variant */
--card--shadow: var(--shadow--card);
--card--shadow--hover: var(--shadow--card--hover);
--card--pad-x: 2.8rem; /* 28px -- off the 8px spacing scale, per design */
--card--pad-top: var(--space--5); /* 24px */
--card--pad-bottom: 2.8rem; /* 28px */
--card--media--height: 20rem; /* 200px */
--card--title--size: var(--heading--size--3); /* 22px serif */
--card--gap: var(--space--3); /* 12px title -> body */
--card--gap--cta: var(--space--5); /* 24px text block -> CTA */
/* -------------------------------------------------------------
SECTION VARIANTS
------------------------------------------------------------- */
--section--muted--bg: var(--color--bg--muted);
--section--dark--bg: var(--color--bg--dark);
--section--dark--text: var(--color--text--on-dark);
/* -------------------------------------------------------------
LEGACY ALIASES
Keep so existing c-- components and platform rules resolve.
Do not use in new CSS -- use the canonical names above.
------------------------------------------------------------- */
--color--white: #ffffff;
--color--black: var(--palette--gray--100);
--color--primary: var(--color--brand);
--color--secondary: var(--color--accent);
--color--titles: var(--color--text--strong);
--color--text: var(--color--text--base);
--color--accent-link: var(--color--text--link);
--color--neutral-gray: var(--palette--neutral--light);
--font-stack--header: var(--font--heading);
--font-stack--body: var(--font--body);
--font-icons: var(--font--icons);
--text-sm: var(--text--sm); --text-md: var(--text--base);
--text-lg: var(--text--lg); --text-xl: var(--text--xl);
--text-2xl: var(--text--2xl); --text-3xl: var(--text--3xl);
--space-3: var(--space--5); --space-4: var(--space--6);
--space-5: var(--space--7); --space-6: var(--space--8);
--border-radius--standard: var(--radius--md);
--border-radius--sm: var(--radius--sm);
--box-shadow-standard: var(--shadow--card);
--box-shadow-hover: var(--shadow--card--hover);
--transition-standard: var(--transition--base);
--container--max-width: var(--layout--content--max);
--section--padding--standard: var(--layout--section--pad-y) var(--layout--section--pad-x);
--padding--hero-container: var(--layout--section--pad-y) var(--layout--section--pad-x);
}
/* ============================================================
BLOCK B -- HERO (Welcome Header 2.0 / Fractal)
(!) INERT ON THIS CAMPAIGN [live: caltrans 2026-08-04]
The Welcome Header 2.0 widget is deactivated, so NONE of the elements this
block targets exist -- probed live: no #container_homepage_header, no
.f-homepage-hero, .f-homepage-hero-name, .f-homepage-hero-description or
.f-homepage-hero-overlay. Every rule below, including B7-CT's logo layer,
matches nothing and costs nothing.
The hero is built as a custom HTML widget instead -- see BLOCK I-CT-HERO at
the end of this file, paired with home-01-hero.html.
KEPT, not deleted, so the platform hero still renders correctly if it is ever
re-enabled. Do not write hero CSS here; write it in BLOCK I-CT-HERO.
============================================================ */
/* B1 -- Push hero below campaign nav */
#container_homepage_header {
margin-top: var(--nav--campaign--height) !important;
}
/* B2 -- Hero height -- remove CDN height/min-height, allow natural sizing */
:is(#bi-page-s,#bi-page-a,#bi-page-b,#bi-page-c,#bi-page-d,#bi-page-e,#bi-page-f,#bi-page-g,#bi-page-h) #container_homepage_header,
:is(#bi-page-s,#bi-page-a,#bi-page-b,#bi-page-c,#bi-page-d,#bi-page-e,#bi-page-f,#bi-page-g,#bi-page-h) #container_homepage_header #display-section,
:is(#bi-page-s,#bi-page-a,#bi-page-b,#bi-page-c,#bi-page-d,#bi-page-e,#bi-page-f,#bi-page-g,#bi-page-h) #container_homepage_header #hh-display {
overflow: hidden !important;
}
/* B2a -- Allow color picker to overflow hero bounds in widget edit mode */
:is(#bi-page-s,#bi-page-a,#bi-page-b,#bi-page-c,#bi-page-d,#bi-page-e,#bi-page-f,#bi-page-g,#bi-page-h) #container_homepage_header:has(.f-colorpicker-enabled),
:is(#bi-page-s,#bi-page-a,#bi-page-b,#bi-page-c,#bi-page-d,#bi-page-e,#bi-page-f,#bi-page-g,#bi-page-h) #container_homepage_header:has(.f-colorpicker-enabled) #display-section,
:is(#bi-page-s,#bi-page-a,#bi-page-b,#bi-page-c,#bi-page-d,#bi-page-e,#bi-page-f,#bi-page-g,#bi-page-h) #container_homepage_header:has(.f-colorpicker-enabled) #hh-display {
overflow: visible !important;
}
/* B2b -- Widget editor toolbar buttons: prevent wrapping, allow natural height */
#container_homepage_header .fractal-button.f-btn-xs {
white-space: nowrap !important;
height: auto !important;
padding-top: 0.6rem !important;
padding-bottom: 0.6rem !important;
}
/* B3 -- Left-align content, pin to grid edge */
.f-homepage-hero-clickarea {
left: max(2.4rem, calc(50% - var(--layout--content--max) / 2)) !important;
right: auto !important;
top: 50% !important;
transform: translateY(-50%) !important;
max-width: 90rem !important;
text-align: var(--hero--content--align) !important;
}
/* B4 -- Zero CDN-injected margins on hero text elements */
.f-homepage-hero-name,
.f-homepage-hero-description,
.f-homepage-hero-name .fractal-htmlpreview div,
.f-homepage-hero-description .fractal-htmlpreview div {
text-align: var(--hero--content--align) !important;
}
.f-homepage-hero-name { margin-left: 0 !important; margin-right: 0 !important; }
.f-homepage-hero-name .fractal-htmlpreview div { padding: 0 !important; }
/* B5 -- Heading typography
Note: at <=768px, html font-size drops to 50% (1rem = 8px).
clamp() min/max are 80% of their desktop values at mobile viewport. */
/* CALTRANS: re-pointed from --heading--size--1 to the --display--* tokens.
Figma 166:573 sets the hero headline to the Display style (48/58 Source
Serif 4 SemiBold), NOT H1 (36/44). Leaving this on --heading--size--1
rendered the hero at 36px. --heading--size--1 stays 36px for section
headings, which is what it is for.
max-width raised 50rem -> 62.7rem: "Caltrans Vendor Day 2026" needs about
600px on one line at 48px, and Figma keeps it on one line (whitespace-nowrap).
At 50rem it wrapped to two. 62.7rem is the copy-column width measured off
Figma (logo x=783 minus rail left 156). */
.f-homepage-hero-name .fractal-htmlpreview div {
font-family: var(--display--font) !important;
font-size: var(--display--size) !important;
font-weight: var(--display--weight) !important;
line-height: var(--display--leading) !important;
color: #fff !important;
max-width: var(--hero--copy--max) !important;
}
/* B6 -- Description typography */
.f-homepage-hero-description {
margin-left: 0 !important; margin-right: 0 !important;
margin-top: var(--space--2) !important;
max-width: 80ch !important;
}
/* CALTRANS: two changes.
1. color is pure #fff, not 90% white. The hero is the one place this design
runs body copy at full white; --color--text--on-dark (#a8c4cc) is for the
other dark bands.
2. max-width 80ch -> 55.3rem. Figma 166:574 fixes the hero body measure at
553px, deliberately narrower than the 627px copy column. 80ch at 18px is
roughly 900px, which ran the copy well past the logo. */
.f-homepage-hero-description .fractal-htmlpreview div {
font-family: var(--font--body) !important;
font-size: var(--body--lg--size) !important;
line-height: var(--body--lg--leading) !important;
color: #fff !important;
}
:is(#bi-page-s,#bi-page-a,#bi-page-b,#bi-page-c,#bi-page-d,#bi-page-e,#bi-page-f,#bi-page-g,#bi-page-h) .f-homepage-hero-description {
max-width: var(--hero--body--max) !important;
}
/* B7 -- Gradient overlay for text legibility
Adjust rgba opacity and % spread per hero image brightness. */
.f-homepage-hero-overlay {
background: linear-gradient(to right, var(--hero--overlay--color) 0%, transparent 78%) !important;
opacity: 1 !important;
}
@media (max-width: 768px) {
.f-homepage-hero-overlay { background: rgba(0,0,0,0.60) !important; }
}
/* B7-CT -- CALTRANS: the DRISI logo, right-anchored on the hero band.
The platform hero widget has one image slot (the background), so the logo
rides on the overlay element as a second, non-repeating background layer.
This is why the hero did NOT need to become a custom HTML widget.
Sits on .f-homepage-hero-overlay, not .f-homepage-hero, so it layers ABOVE
the photo and below the absolutely-positioned text (B3). The gradient from B7
is kept as the first background layer, so declaration order here is
logo-then-gradient.
(!) Figma places the logo 44px past the right edge of the content rail
(x=783..1328 against a rail ending at 1284). That is almost certainly
transparent padding in the PNG, so this anchors it to the rail edge instead.
If the final asset is tight-cropped and the logo reads as inset, change the
horizontal position from the calc() to a plain right value.
(!) No-op until --hero--logo--image is set to a url(). Left as none so the
band renders correctly before the asset exists. */
:is(#bi-page-s,#bi-page-a,#bi-page-b,#bi-page-c,#bi-page-d,#bi-page-e,#bi-page-f,#bi-page-g,#bi-page-h) .f-homepage-hero-overlay {
background-image:
var(--hero--logo--image),
linear-gradient(to right, var(--hero--overlay--color) 0%, transparent 78%) !important;
background-repeat: no-repeat, no-repeat !important;
background-size: var(--hero--logo--width) var(--hero--logo--height), auto !important;
background-position:
right max(2.4rem, calc(50% - var(--layout--content--max) / 2)) center,
center !important;
}
/* Below the two-column width the logo would sit under the headline. Drop it and
let the copy have the full band. */
@media (max-width: 1024px) {
:is(#bi-page-s,#bi-page-a,#bi-page-b,#bi-page-c,#bi-page-d,#bi-page-e,#bi-page-f,#bi-page-g,#bi-page-h) .f-homepage-hero-overlay {
background-image:
linear-gradient(to right, var(--hero--overlay--color) 0%, transparent 78%) !important;
}
}
/* B8 -- Button wrapper -- left-align CTA buttons */
.f-homepage-header-buttons .action-buttons,
.f-homepage-header-buttons .navigate-container {
text-align: left !important;
padding-left: 0 !important;
}
/* B9 -- Hero buttons only -- match site button system */
.f-homepage-hero .fractal-button {
font-family: var(--btn--font) !important;
font-size: var(--btn--size) !important;
font-weight: var(--btn--weight) !important;
padding: var(--btn--pad-y) var(--btn--pad-x) !important;
border-radius: var(--btn--radius) !important;
line-height: var(--btn--line-height) !important;
}
/* ============================================================
BLOCK C -- CAMPAIGN NAV
Dual root required: PHP pages use #navbar, Fractal routes use #dynamic-nav.
Both must be targeted or Fractal pages (/boards, /submit) will be unstyled.
============================================================ */
/* Nav height -- three roots required:
#navbar = home submit pages
#dynamic-nav = browse/boards page
.nav-campaign-image = view idea page */
#navbar.OPT_FEATURE_NEW_NAV_AND_ADMIN_BAR,
#dynamic-nav .fractal-dynamic-nav-v1 .nav-desktop,
.nav-campaign-image .fractal-dynamic-nav-v1 .nav-desktop,
.fractal-dynamic-nav-v1 .nav-desktop {
height: var(--nav--campaign--height) !important;
}
/* Nav background -- [FILL PER CLIENT] color or keep white
(!) .nav-desktop IS IN THIS LIST BECAUSE IT IS THE ONLY ELEMENT GUARANTEED TO
SPAN THE VIEWPORT. Added 2026-08-06 after white strips appeared at both edges
of the bar on the submission form.
The other selectors here paint containers whose width depends on the PAGE
TYPE, and that width is not always the viewport. Measured at 1512px:
home page #navbar spans 0..1512 -- #main_content is full width
submit page #navbar spans 36..1476 -- #main_content is capped at 1440 and
centred, so the nav inherited that cap and left 36px of bare
page showing at each end
.nav-desktop is position:fixed and always 0..viewport, so painting it makes
the bar's background independent of whatever container the page happens to put
the nav inside. The other selectors stay: they cover the unpinned state and
any page where .nav-desktop is not the rendered bar.
Dual-root per Core Principle 5. */
#navbar.OPT_FEATURE_NEW_NAV_AND_ADMIN_BAR,
#navbar .nav-desktop,
#dynamic-nav .nav-desktop,
#dynamic-nav .fractal-dynamic-nav-v1,
.nav-campaign-image .fractal-dynamic-nav-v1 {
background: var(--nav--bg) !important;
box-shadow: none !important;
border-bottom: none !important;
}
/* Nav ITEM height -- held at 48px and centred inside the 64px bar.
(!) NOT A TIDY-UP. See --nav--item--height for why the item height cannot
follow the bar height: the dropdown panel's `top: 55px` is immovable, so an
li taller than 48px pushes the panel up INTO the bar. Measured 9px of overlap
before this rule existed.
align-self is explicit rather than relying on the ul's `align-items: center`:
the platform sets a height on the li, and a stretch from any other rule would
silently undo the centring and leave the items hanging from the bar's top.
Triple-rooted per Core Principle 5, matching the height rule above. */
#navbar .desktop-nav-core-items li.nav-parent,
#dynamic-nav .desktop-nav-core-items li.nav-parent,
.nav-campaign-image .desktop-nav-core-items li.nav-parent {
height: var(--nav--item--height) !important;
align-self: center !important;
}
/* Zero the platform margin on nav items.
(!) `.nav-parent` carries a platform margin that widens the space between
links. Leaving it in place means you end up tuning the flex `gap` below
AGAINST a hidden margin (the whack-a-mole Core Principle 2 warns about).
Zero it first so `gap` is the SINGLE lever for nav spacing.
Dual-root per Core Principle 5. */
.fractal-dynamic-nav-v1 .nav-parent,
#navbar .desktop-nav-core-items .nav-parent,
#dynamic-nav .desktop-nav-core-items .nav-parent,
.nav-campaign-image .desktop-nav-core-items .nav-parent {
margin: 0 !important;
}
/* Nav content area */
#navbar .desktop-nav-core-items,
#dynamic-nav .desktop-nav-core-items,
.nav-campaign-image .desktop-nav-core-items {
padding: 0 4rem !important;
max-width: 100% !important;
width: 100% !important;
box-sizing: border-box !important;
/* With .nav-parent margin zeroed above, this gap alone controls link
spacing. 1.2rem reads comfortably; raise for airier navs.
(!) TOKENISED because the pinned-logo rule below has to CANCEL exactly this
value with a negative margin. A literal here and a literal there would drift
apart and leave the nav links permanently shifted by the difference. */
gap: var(--nav--gap) !important;
}
/* ------------------------------------------------------------------
PINNED-STATE LOGO [live: caltrans 2026-08-05]
A ::before on the nav ul, revealed when BLOCK G2-CT's script marks the bar
as pinned. Tokens and the ratio constraint: see --nav--logo--image.
(!) A PSEUDO-ELEMENT, NOT AN INJECTED , ON PURPOSE. Two reasons:
1. The Fractal routes (/boards, /submit) REBUILD the nav markup, which
would drop a JS-inserted node. A stylesheet rule survives that.
2. It is decorative, duplicate branding. As a background it is invisible to
assistive tech, which is correct here -- an would need alt="" to
reach the same place, and alt="Caltrans" would announce the site name
twice on every page.
Verified before building: ::before and ::after on this ul are both unused by
the platform (content computed `none`), so neither is being stolen.
HOW THE MOTION WORKS -- IT FADES, IT DOES NOT SLIDE OR WIPE.
The box is at FULL WIDTH AT ALL TIMES and only two properties move:
opacity 0 -> 1 the logo itself, fading up where it will sit
margin-right negative -> push opens the space, which is what moves the
links; the logo does not travel at all
At rest the margin is `-width - gap`, so the item's total contribution to the
flex line is exactly ZERO (width plus gap plus a negative of both) and the
links sit where they always did. Revealed, it becomes `push - gap`.
(!) THE MARGIN CARRIES THE GAP TOO, and that is not incidental. The ul is a
flex container with `gap: var(--nav--gap)`, and gap applies between flex items
REGARDLESS OF THEIR WIDTH -- so the gap after this pseudo exists even when the
logo is meant to take no space. Both the rest and revealed values are written
in terms of --nav--gap so they cannot drift apart from the ul's actual gap.
(!) EARLIER VERSION ANIMATED width AND background-position-x, and it was
wrong for a reason worth recording. Because the box's right edge and the
artwork's right edge moved together, the reveal showed the RIGHT half of the
wordmark first -- it unspooled from "...ans" leftward to "Cal", backwards for
reading. It also had the logo sliding rightward while the links slid rightward
in the same 280ms, two same-direction motions at different rates, which reads
as smear rather than one gesture. Do not reintroduce either animation.
(!) pointer-events: none IS REQUIRED, not tidiness. At rest the negative
margin pulls the following links back OVER this box, so the invisible logo
overlaps the first nav link. Pseudo-elements take part in hit testing, so
without this, clicks on the first link can land on the logo instead.
(!) HIDDEN BELOW 1200px, DELIBERATELY AND NOT SILENTLY. Measured at 1680:
the links plus CTA occupy 803px of item width plus 60px of gaps plus 80px of
ul padding = 943px, leaving 737px free. The logo plus its push takes 158px of
that. Free space therefore reaches zero at roughly 1101px viewport, and below
that the links would collide with the Submit CTA. 1200px leaves a margin over
that collision point -- and note it does NOT track --nav--logo--width or
--nav--logo--push automatically, so re-check it if either grows a lot.
Mobile is a separate bar (.nav-mobile) and is untouched -- still to be
looked at.
------------------------------------------------------------------ */
#navbar .desktop-nav-core-items::before,
#dynamic-nav .desktop-nav-core-items::before,
.nav-campaign-image .desktop-nav-core-items::before {
content: "";
flex: 0 0 auto;
align-self: center;
/* Full width in BOTH states -- the fade needs an unclipped box. */
width: var(--nav--logo--width);
height: var(--nav--logo--height);
/* -width - gap: contributes zero net space, so the links do not move.
Written with two subtractions because campaign CSS is urldecoded on save and
' ' is stripped (Core Principle 3) -- a calc() here must never contain one. */
margin-right: calc(-1 * var(--nav--logo--width) - var(--nav--gap));
pointer-events: none; /* see the hit-testing note above */
background-image: var(--nav--logo--image);
background-repeat: no-repeat;
background-position-x: 0;
background-position-y: center;
/* `auto` height, NOT an explicit pair -- the ratio then comes from the image
itself and no width change can distort it. See the token note. */
background-size: var(--nav--logo--width) auto;
opacity: 0;
transition:
margin-right var(--nav--pin--motion),
opacity var(--nav--pin--motion);
}
/* Revealed state. .ct-nav-stuck is set by caltrans-footer.html PART 5 at the
moment the bar reaches the top -- the same function that positions it, so
there is no second opinion about when "pinned" begins. */
html.ct-nav-stuck #navbar .desktop-nav-core-items::before,
html.ct-nav-stuck #dynamic-nav .desktop-nav-core-items::before,
html.ct-nav-stuck .nav-campaign-image .desktop-nav-core-items::before {
/* PUSH MINUS GAP, not the push itself. The flex gap already opens --nav--gap
after this item, so the margin supplies only the remainder. Width is
unchanged from the resting rule -- only this margin and the opacity move. */
margin-right: calc(var(--nav--logo--push) - var(--nav--gap));
opacity: 1;
}
/* PINNED-STATE SHADOW -- lifts the bar off the content passing under it.
Same .ct-nav-stuck gate as the logo, so the shadow and the logo arrive
together and neither can appear while the bar is still in its resting spot.
(!) ON .nav-desktop, NOT ON #navbar. Measured while pinned: #navbar is the
in-page wrapper and has SCROLLED AWAY (y=-1468 at the time of measuring),
while .nav-desktop is the fixed element actually painting the white bar at
y=0..64. A shadow on #navbar would be drawn far up the document, off screen.
BLOCK C's `box-shadow: none !important` rules target #navbar and
.fractal-dynamic-nav-v1 -- neither is this element, so there is no conflict
to out-specify; the !important here is only platform insurance.
The fade comes from G2-3's transition list, which names box-shadow. */
html.ct-nav-stuck #navbar .nav-desktop,
html.ct-nav-stuck #dynamic-nav .nav-desktop,
html.ct-nav-stuck .nav-campaign-image .nav-desktop {
box-shadow: var(--nav--shadow) !important;
}
/* No room for it below this width -- see the collision measurement above. */
@media (max-width: 1199px) {
#navbar .desktop-nav-core-items::before,
#dynamic-nav .desktop-nav-core-items::before,
.nav-campaign-image .desktop-nav-core-items::before {
display: none;
}
}
/* Motion is the enhancement, the logo is not. Reduced motion still gets the
logo, it just arrives without the slide. */
@media (prefers-reduced-motion: reduce) {
#navbar .desktop-nav-core-items::before,
#dynamic-nav .desktop-nav-core-items::before,
.nav-campaign-image .desktop-nav-core-items::before {
transition: none;
}
}
/* Nav links */
#navbar .desktop-nav-core-items .nav-parent > a,
#dynamic-nav .desktop-nav-core-items .nav-parent > a,
.nav-campaign-image .desktop-nav-core-items .nav-parent > a {
font-family: var(--font--body) !important;
font-size: var(--nav--link--size) !important;
font-weight: var(--nav--link--weight) !important;
color: var(--nav--link--color) !important;
text-transform: none !important;
letter-spacing: 0 !important;
padding: 0.8rem 1.2rem !important;
line-height: 1 !important;
}
/* NAV CTA -- "Submit Solution" as a right-aligned pill button.
[live: caltrans 2026-08-05]
TARGETED BY HREF, not position. The nav has SIX children: five .nav-parent
items then an empty li.desktop-nav-last-item spacer. So :last-child selects
the SPACER, and :nth-last-child(2) would silently move if another item were
ever appended. :has(> a[href*="/submit"]) follows the link itself.
RIGHT ALIGNMENT: ul.desktop-nav-core-items is display: flex with
justify-content: flex-start, so margin-left: auto on this one item absorbs
all free space and pushes it (and the trailing spacer) to the right edge.
No change to the ul is needed, which keeps the other items where they are.
The indicator bar is suppressed here -- Block C draws an ::after underline on
every nav link, and a filled button with an underline sliding out beneath it
reads as two competing affordances.
Specificity: Block C styles nav links at
`#navbar .desktop-nav-core-items .nav-parent > a` = (1,2,1). :has() adds the
specificity of its argument, so the selectors below land at (1,3,2) and win.
!important as well, matching Block C's convention.
(!) :has() is unsupported on Firefox < 121. There the link renders as an
ordinary nav item -- unstyled, still in the middle of the nav, still working.
Degradation, not breakage. Swap to :nth-last-child(2) if that matters more
than resilience to nav-item changes. */
#navbar .desktop-nav-core-items .nav-parent:has(> a[href*="/submit"]),
#dynamic-nav .desktop-nav-core-items .nav-parent:has(> a[href*="/submit"]),
.nav-campaign-image .desktop-nav-core-items .nav-parent:has(> a[href*="/submit"]) {
margin-left: auto !important;
}
/* (!) THE AUTO MARGIN ABOVE IS NOT ENOUGH ON ITS OWN.
The last child of the nav is NOT an empty spacer -- it is
li.desktop-nav-last-item, a 313px platform SUBSCRIBE BUTTON, and the platform
already gives it `margin-left: auto` to hold it at the right edge.
Flexbox splits free space EVENLY between auto margins, so with two of them the
CTA landed mid-nav with a 237px hole before the subscribe button (measured:
CTA right 916, subscribe left 1153). Zeroing the subscribe button's auto
margin sends all the free space to the CTA instead, and the two then sit
together at the right with the nav's own 12px gap between them.
Gated on :has() so it only applies WHERE THE CTA EXISTS. Zeroing that margin
unconditionally would drag the subscribe button leftward, next to the nav
links, on every page that has no submit link. */
#navbar .desktop-nav-core-items:has(.nav-parent > a[href*="/submit"]) .desktop-nav-last-item,
#dynamic-nav .desktop-nav-core-items:has(.nav-parent > a[href*="/submit"]) .desktop-nav-last-item,
.nav-campaign-image .desktop-nav-core-items:has(.nav-parent > a[href*="/submit"]) .desktop-nav-last-item {
margin-left: 0 !important;
}
#navbar .desktop-nav-core-items .nav-parent:has(> a[href*="/submit"]) > a,
#dynamic-nav .desktop-nav-core-items .nav-parent:has(> a[href*="/submit"]) > a,
.nav-campaign-image .desktop-nav-core-items .nav-parent:has(> a[href*="/submit"]) > a {
padding: var(--nav--cta--pad-y) var(--nav--cta--pad-x) !important;
background: var(--nav--cta--bg) !important;
color: var(--nav--cta--color) !important;
border-radius: var(--radius--full) !important;
font-weight: var(--btn--weight) !important;
line-height: var(--btn--line-height) !important;
text-decoration: none !important;
transition: background-color var(--transition--base) !important;
}
#navbar .desktop-nav-core-items .nav-parent:has(> a[href*="/submit"]) > a:hover,
#navbar .desktop-nav-core-items .nav-parent:has(> a[href*="/submit"]) > a:focus-visible,
#dynamic-nav .desktop-nav-core-items .nav-parent:has(> a[href*="/submit"]) > a:hover,
#dynamic-nav .desktop-nav-core-items .nav-parent:has(> a[href*="/submit"]) > a:focus-visible,
.nav-campaign-image .desktop-nav-core-items .nav-parent:has(> a[href*="/submit"]) > a:hover,
.nav-campaign-image .desktop-nav-core-items .nav-parent:has(> a[href*="/submit"]) > a:focus-visible {
background: var(--nav--cta--bg--hover) !important;
color: var(--nav--cta--color) !important;
}
/* No underline indicator on a filled button. */
#navbar .desktop-nav-core-items .nav-parent:has(> a[href*="/submit"]) > a::after,
#dynamic-nav .desktop-nav-core-items .nav-parent:has(> a[href*="/submit"]) > a::after,
.nav-campaign-image .desktop-nav-core-items .nav-parent:has(> a[href*="/submit"]) > a::after {
display: none !important;
}
/* DROPDOWN HOVER BRIDGE -- closes the 7px dead zone under the nav.
[live: caltrans 2026-08-05]
.nav-parent (li) ends at y 98
.nav-children (ul) starts at y 105 (platform: top: 55px on a 48px li)
The 7px band between them belongs to NEITHER element, so dragging the cursor
down from a nav link crosses dead space and the menu closes before it can be
reached.
(!) THE PANEL CANNOT BE MOVED. Verified exhaustively on the live page: `top`,
`margin-top` and `transform` are all locked by !important declarations in a
CORS-BLOCKED stylesheet -- unreadable and un-out-specifiable. Even an INLINE
`top: 48px` loses to it, which is the proof it is a stylesheet !important and
not merely a specificity contest. Escalating to
`html body #navbar .fractal-dynamic-nav-v1 ... > ul.nav-children` with
!important still did nothing. `position` DOES respond, so the selector is
fine -- it is those specific properties that are pinned. Do not spend time
re-attempting this; the panel stays at top: 55px.
So the gap is BRIDGED rather than removed. An ::after on the li spans the
band, keeping the pointer inside .nav-parent the whole way down, which
preserves both CSS :hover and the platform's JS mouseleave.
Anchored to the LI, not the panel: the ul computes `overflow: hidden`, so a
pseudo-element placed above its own box is clipped away (tested -- a bridge
on .nav-children never hit-tests). The li is position: relative and
overflow: visible, so it works there.
Scoped to :hover so the strip exists ONLY while the menu is open. An
unconditional 8px band under every nav item would sit invisibly over the page
and swallow clicks on whatever is beneath it.
Height is gap plus 1px to absorb sub-pixel rounding at fractional zoom.
Verified: elementFromPoint at the centre of the old gap returns LI.nav-parent. */
#navbar .desktop-nav-core-items li.nav-parent:hover::after,
#dynamic-nav .desktop-nav-core-items li.nav-parent:hover::after,
.nav-campaign-image .desktop-nav-core-items li.nav-parent:hover::after {
content: "";
position: absolute;
left: 0;
right: 0;
top: 100%;
height: 0.8rem;
background: transparent;
}
/* DROPDOWN (submenu) links -- case and tracking.
[live: caltrans 2026-08-05] The platform sets these to uppercase via two
class-only rules with NO !important:
.fractal-dynamic-nav-v1 .nav-desktop .nav-children li a (0,3,1)
.fractal-dynamic-nav-v1 .nav-parent a (0,2,1)
(!) BLOCK C'S OWN NAV-LINK RULE ABOVE DOES NOT REACH THESE. It targets
`.nav-parent > a` with the CHILD combinator, which matches only the top-level
link -- the submenu items are `.nav-parent > ul.nav-children > li > a`, one
level deeper. That is why the top-level nav was already mixed case while the
dropdown kept shouting.
Dual-root per Core Principle 5, plus .nav-campaign-image: the same 19 child
links are reachable under #navbar and #dynamic-nav, and a single-root rule
would miss one page type.
letter-spacing is zeroed alongside the case change. The 0.7px the platform
applies is tracking meant to open up ALL-CAPS labels; on mixed case it reads
loose, and the top-level links are already at 0 from the rule above, so
leaving it would make children inconsistent with their parents. Drop this one
declaration if you want the wider tracking back.
Note `capitalize` only ever uppercases the FIRST letter of each word -- it
cannot lowercase anything. It works here because the labels are authored in
title case ("Work Zone Safety"). If a label is ever entered in ALL CAPS in
the nav admin, this rule will have no visible effect on it; fix the label
text, not the CSS. */
#navbar .nav-desktop .nav-children li a,
#dynamic-nav .nav-desktop .nav-children li a,
.nav-campaign-image .nav-desktop .nav-children li a {
text-transform: capitalize !important;
letter-spacing: 0 !important;
}
/* Active hover state -- BRAND INDICATOR BAR (replaces the old grey box).
The bar is drawn by the link's own ::after and scaled from the CENTRE, so it
expands outward on hover / focus / current-route. Colour comes from
var(--color--accent) so it follows the client's Block A brand tokens
automatically -- point it at var(--color--brand) instead if the accent is
not the right indicator colour for a given client.
WHY ::after transform, not the obvious alternatives:
- `border-bottom` adds 2px to the box and nudges the label on hover
- `box-shadow: inset 0 -2px 0` cannot animate an expand (paints instantly)
- animating `width` reflows the nav on every hover
transform-only = GPU-composited, no reflow. */
#navbar .desktop-nav-core-items .nav-parent.is-current-route > a,
#dynamic-nav .desktop-nav-core-items .nav-parent.is-current-route > a,
.nav-campaign-image .desktop-nav-core-items .nav-parent.is-current-route > a {
background: transparent !important;
border-radius: 0 !important;
color: var(--nav--link--active) !important;
font-weight: var(--weight--medium) !important;
}
#navbar .desktop-nav-core-items .nav-parent > a:hover,
#dynamic-nav .desktop-nav-core-items .nav-parent > a:hover,
.nav-campaign-image .desktop-nav-core-items .nav-parent > a:hover {
background: transparent !important;
border-radius: 0 !important;
color: var(--nav--link--hover) !important;
}
/* the bar itself -- collapsed by default */
#navbar .desktop-nav-core-items .nav-parent > a,
#dynamic-nav .desktop-nav-core-items .nav-parent > a,
.nav-campaign-image .desktop-nav-core-items .nav-parent > a {
position: relative !important;
}
#navbar .desktop-nav-core-items .nav-parent > a::after,
#dynamic-nav .desktop-nav-core-items .nav-parent > a::after,
.nav-campaign-image .desktop-nav-core-items .nav-parent > a::after {
content: "" !important;
position: absolute !important;
/* insets match the link padding above, so the bar spans the LABEL not the padding */
left: 1.2rem !important;
right: 1.2rem !important;
bottom: 0.2rem !important;
height: 2px !important;
background: var(--color--accent) !important;
transform: scaleX(0);
transform-origin: center center;
transition: transform var(--transition--base);
pointer-events: none !important;
}
/* CALTRANS: the three .is-current-route selectors were REMOVED from this group
so the active link carries no underline. Hover and focus-visible are kept --
they are the affordance; the persistent bar on the current page is what was
unwanted. The bar is an ::after element, not a text-decoration, so it cannot
be removed with `text-decoration: none`.
To restore it, add back:
#navbar .desktop-nav-core-items .nav-parent.is-current-route > a::after
plus the #dynamic-nav and .nav-campaign-image equivalents. */
#navbar .desktop-nav-core-items .nav-parent > a:hover::after,
#navbar .desktop-nav-core-items .nav-parent > a:focus-visible::after,
#dynamic-nav .desktop-nav-core-items .nav-parent > a:hover::after,
#dynamic-nav .desktop-nav-core-items .nav-parent > a:focus-visible::after,
.nav-campaign-image .desktop-nav-core-items .nav-parent > a:hover::after,
.nav-campaign-image .desktop-nav-core-items .nav-parent > a:focus-visible::after {
transform: scaleX(1);
}
@media (prefers-reduced-motion: reduce) {
#navbar .desktop-nav-core-items .nav-parent > a::after,
#dynamic-nav .desktop-nav-core-items .nav-parent > a::after,
.nav-campaign-image .desktop-nav-core-items .nav-parent > a::after {
transition: none;
}
}
/* Hide hover indicator overlay */
#navbar .desktop-nav-core-items .nav-item-hover,
#dynamic-nav .desktop-nav-core-items .nav-item-hover,
.nav-campaign-image .desktop-nav-core-items .nav-item-hover {
display: none !important;
}
/* ============================================================
BLOCK D -- GLOBAL NAV
============================================================ */
/* (!) THIS TENANT USES THE LEGACY SUITE GLOBAL NAV, not the Fractal one.
The element on the page is #global-nav-bar (suite_global_nav.css), so the
starter's .fractal-global-nav selector matched nothing and the drop shadow
stayed. Both name sets are covered below -- keep both, so the rule survives
whichever nav a given page renders. */
#body_div .fractal-global-nav,
#global-nav-bar,
#header,
#f-global-nav,
#global-nav-bar .f-nav-wrapper {
box-shadow: none !important;
}
/* -- GLOBAL NAV SEARCH ---------------------------------------
Figma: Assets 166:436 "Global Navigation" (node 1:114 "Search").
wrapper 1px solid #d9d9d6, radius 40 (pill), transparent fill
icon 16px, #d9d9d6
placeholder 12px, #d9d9d6
All three map onto existing tokens -- no new values introduced.
The platform authors this search for a DARK nav bar: the wrapper ships
rgba(0,0,0,0.1) with a 4px radius, and both the input text and the magnifier
are white. On CalTrans's white nav that is invisible, so every piece is set
explicitly here rather than relying on any of it.
Both selector families are covered (.f-nav-search / #global-search-input for
the Fractal nav, and the #global-nav-bar descendants for the legacy suite
nav) because this tenant renders the legacy one.
(!) placeholder needs opacity: 1 -- browsers dim ::placeholder by default,
which would push it below the colour set here.
(!) CONTRAST: #d9d9d6 placeholder on white is about 1.4:1, well under the
WCAG 4.5:1 minimum for text. This matches the Figma comp exactly as asked.
If it should pass AA instead, change --search--placeholder to
var(--color--text--muted) (#637480, 4.9:1) -- one token, nothing else moves. */
#global-nav-bar .f-nav-search,
#f-global-nav .f-nav-search,
.f-nav-search {
background: transparent !important;
border: 1px solid var(--color--border--light) !important;
border-radius: var(--radius--full) !important;
}
/* :focus-within on the WRAPPER -- the wrapper itself is not focusable, so a
plain :focus would never fire on it. */
#global-nav-bar .f-nav-search:focus-within,
#f-global-nav .f-nav-search:focus-within,
.f-nav-search:focus-within {
border-color: var(--color--accent) !important;
}
#global-nav-bar #global-search-input,
#f-global-nav #global-search-input,
#global-search-input {
background: transparent !important;
border: none !important;
font-family: var(--font--body) !important;
font-size: var(--text--xs) !important;
color: var(--color--text--base) !important;
}
#global-nav-bar #global-search-input::placeholder,
#f-global-nav #global-search-input::placeholder,
#global-search-input::placeholder {
color: var(--search--placeholder) !important;
opacity: 1 !important;
}
#global-nav-bar .f-nav-search .fa-search,
#global-nav-bar .f-nav-search i.fa,
#f-global-nav .f-nav-search .fa-search,
.f-nav-search .fa-search {
font-size: var(--text--base) !important; /* 16px */
color: var(--search--icon) !important;
}
#f-global-nav .f-nav-wrapper {
padding: 0 4rem !important;
max-width: 100% !important;
min-height: var(--nav--global--height) !important;
}
#f-global-nav .f-nav-left { margin-left: 0 !important; }
/* -- GLOBAL BAR LOGO: BROKEN FOR SIGNED-OUT VISITORS --------- */
/* The logo in the global bar is a platform BrightIdea mark served from
/ct/getfile.php?f=F5A7D0F4-0883-11ED-BD69-0E383FE63DDF
and that endpoint is AUTH-GATED. Measured on caltrans 2026-08-07:
signed in -> an image, naturalWidth 1800
anonymous -> HTTP 200, content-type text/html, ZERO bytes
It answers 200 with an empty body rather than 403, so the fails
silently -- a 63x16 broken-image glyph at the top-left of EVERY page, on the
one surface every visitor sees first. Answering 200 is why nothing logged an
error; being auth-gated is why it never appeared in admin testing.
(!) THIS IS A SECOND, SEPARATE INSTANCE of the same broken URL. The campaign
MOBILE bar has its own copy at .nav-mobile-bar .nav-logo img (alt "BrightIdea
Logo"); this one is in the GLOBAL bar at #nav-bar-logo (alt "BrightIdea").
Fixing one does not fix the other -- they are different elements in different
bars, and the mobile one is handled in Block E plus footer PART 9.
(!) A PSEUDO-ELEMENT, NOT A src SWAP, and here that is the better trade -- the
opposite of the call made for the mobile logo. This mark sits in the masthead
of every page, so a JS swap from the footer would show the broken glyph for a
moment on every single page load. CSS paints on first style resolution with no
flash at all. Jonathan's call, and correct.
(!) THE IMG IS CLIPPED, NOT display:none. Its alt is the anchor's only
accessible name -- the link goes to the affiliate home -- so removing it from
the accessibility tree would leave an unlabelled link. The clip technique keeps
it announced while the pseudo-element does the visual work. Footer PART 9
corrects the alt text itself from "BrightIdea" to "Caltrans"; if that script
never runs the name is merely wrong rather than absent.
Reuses --nav--logo--width / --nav--logo--height / --nav--logo--image, the same
three tokens as the pinned campaign logo, so all the Caltrans marks on the page
move together from one place.
(!) THE ANCHOR IS display: table-cell -- #nav-bar-logo is display: table. That
is legacy platform layout, not something to normalise here; vertical-align
middle is what centres the mark in the 50px bar. Verified: anchor 110x40 at
left 32, optically centred in the bar, no collision with #search. */
#nav-bar #nav-bar-logo a {
position: relative !important;
display: table-cell !important;
vertical-align: middle !important;
}
#nav-bar #nav-bar-logo a::before {
content: "" !important;
display: inline-block !important;
width: var(--nav--logo--width) !important;
height: var(--nav--logo--height) !important;
background-image: var(--nav--logo--image) !important;
background-size: contain !important;
background-repeat: no-repeat !important;
background-position: left center !important;
}
#nav-bar #nav-bar-logo a img {
position: absolute !important;
width: 1px !important;
height: 1px !important;
margin: -1px !important;
overflow: hidden !important;
clip: rect(0, 0, 0, 0) !important;
border: 0 !important;
}
/* ============================================================
BLOCK E -- MOBILE NAV [ported 2026-08-07]
Ported from the Northwestern Mutual / CSA Block E via the BHP Xplor port, per
P-D5 in the design skill's protocols.md. KFM #51 lists the failure modes.
MAPPED, NOT PASTED: this reads Caltrans' own --nav--* tokens so the mobile bar
and the desktop bar cannot disagree, and it is FLAT -- the Xplor port is
nested CSS and this file is not, so every rule is written out longhand.
THE MOBILE NAV IS A SEPARATE STRUCTURE. Nothing in Block C or D reaches it.
The white bar, the navy links, the teal CTA pill and the focus rings all exist
on the desktop nav and all have to be restated here.
IT APPEARS AT <=1000px, which is wider than every breakpoint in this file, so
these rules are NOT inside a media query -- the platform only renders
.nav-mobile below that width, and .nav-desktop is visibility:hidden there.
(!) NO ROOT LIST. The nav lives in .fractal-dynamic-nav-v1, outside
#main_content and outside the page root, so :is(#bi-page-...) does not reach
it. The CDN uses !important at (0,5,1), so an id root plus !important is
required. Both #dynamic_navigation_bar and #navbar exist here; the former is
what the starter proved, so it is what this uses.
PRE-FLIGHT MEASURED ON caltrans AT 375px (P-D5):
.fractal-dynamic-nav-v1 .nav-mobile exists -- restyle, not a build
.nav-parent.has-children 1 item, "Problem Statements", 6 children
.nav-mobile-bar 76px
.nav-parent-list a 25px tall, display:inline-block
li.nav-parent 50px, border-top rgba(255,255,255,0.5)
SIX DEPARTURES FROM THE NM ORIGINAL, all deliberate:
1. WHITE BAR AND PANEL, not NM's brand fill (Jonathan, 2026-08-07). The
desktop nav on this site is white; the platform picker was serving navy, so
the site disagreed with itself between widths. Both now read --nav--bg.
2. NAVY HAMBURGER, following from 1. All THREE elements are coloured --
.nav-icon::before, ::after and > div each draw one bar. Navy on white is
12.6:1; the inherited rgba(255,255,255,0.85) would have been invisible.
3. has-children IS STYLED, NOT HIDDEN. NM ends its block with
`.nav-parent.has-children { display: none !important }`, which kills the
~30 lines above it AND removes every item with a submenu. That one item
here is Problem Statements plus all six PS pages -- the most important
thing in the nav. It is laid out as a flex row instead.
4. NO STAGGERED ENTRANCE. The Xplor port has one; it is left out here. The
pattern needs opacity 0 plus an animation to bring it back, and whether the
0 lives in the base rule (NM) or in the keyframes with fill-mode: both
(which back-fills it during the stagger delay), a dropped or unadvanced
animation leaves the nav INVISIBLE. Tested live before deciding: keyframes
registered, fill-mode both, and all five items still read opacity 0 after
900ms. Unverifiable decoration with a blank-navigation failure mode is not
worth shipping on a nav. If it is ever wanted, verify on a real device
first, not in a probe.
5. NO CURRENT-PAGE STATE. P-D5 step 5 asks for `.nav-parent.is-cur > a`. On
this instance NO mobile item carries a current-route class at all --
measured on the home page, every li is plain `nav-parent` while the desktop
nav uses `.is-current-route`. There is nothing to hook, so no rule is
written. Do not add a speculative one; check the DOM first if the platform
starts emitting it.
6. 100dvh AND ONE HEIGHT TOKEN. The starter's version had
`height: calc(100vh - 76px)` one line under `min-height: 7.6rem` -- two
sources for one number (KFM #51), and 100vh clips the last item behind
mobile browser chrome. Both now derive from --nav--mobile--bar-height.
WHAT THE PLATFORM ALREADY DOES, so this neither redoes nor undoes it: rows are
50px, the flyout already gets overflow-y:auto and a working children toggle,
and links already carry a :focus-visible ring. This makes the rows tappable
and the ring stronger rather than supplying either.
VERIFIED LIVE AT 375px AFTER THE PORT:
bar 76px, #ffffff, navy icon bars
panel 736px = 812 viewport - 76 bar, white, bottom reachable
links display:block, min-height 48px, 53px rendered, navy on white
separators #d9d9d6 hairlines, first-child suppressed
submenu 6 children expand, 48px each, indented 64px, #4b4f54
CTA teal pill 327px wide, left 24 / right 351 -- inside the viewport
items 5 rendered against 5 configured -- nothing eaten
============================================================ */
/* -- TOKENS -------------------------------------------------- */
:root {
/* (!) px, NOT rem. P-D5/C1: the mobile nav spans <=1000px, which straddles
breakpoints, and this value is subtracted in a calc() that must not drift.
It is ALSO the single source for the bar height and the panel height -- the
starter stated 76 twice, once as 7.6rem and once as a literal 76 inside a
calc, which is the KFM #51 desync. One token, read by both. */
--nav--mobile--bar-height: 76px;
/* The flyout's own values. Link size is the nav's own --text--lg rather than
--nav--link--size (14px): that is right for a dense desktop row and too
small for a 48px touch row. */
--nav--mobile--link--size: var(--text--lg); /* 18px */
/* 18px / 56px, raised from 14px / 48px on 2026-08-07. 48px is the ACCESSIBLE
minimum, not a comfortable one; these render 61px rows, which is what a
thumb actually wants. Both in px -- a rem floor is not a floor if the root
is ever rescaled. */
--nav--mobile--link--pad-y: 18px;
--nav--mobile--tap--min: 56px;
--nav--mobile--rule: var(--color--border--light);
/* The bar logo. 14rem matches --footer--logo--width, because it IS the footer
logo -- see PART 9 of caltrans-footer.html. At its native 346x48 the asset
rendered 346px wide in a 375px bar, with its right edge at 362 exactly
touching the hamburger at 362. Constrained to 140px it renders 140x19 with
164px of clear space. */
--nav--mobile--logo--width: 14rem; /* 140px */
}
/* -- BAR ----------------------------------------------------- */
.fractal-dynamic-nav-v1 .nav-mobile {
z-index: 9000 !important;
}
/* The shadow is what separates a white bar from a white section underneath it.
The desktop bar only gets one when pinned; the mobile bar is always fixed, so
it always needs one. */
.fractal-dynamic-nav-v1 .nav-mobile-bar {
background: var(--nav--bg) !important;
height: var(--nav--mobile--bar-height) !important;
min-height: var(--nav--mobile--bar-height) !important;
box-shadow: var(--nav--shadow) !important;
}
/* -- BAR LOGO ------------------------------------------------ */
/* (!) SIZING ONLY -- THE SRC IS SWAPPED IN PART 9 OF THE FOOTER, because the
one the platform serves is broken for signed-out visitors. The endpoint
/ct/getfile.php?f= is AUTH-GATED and returns HTTP 200 with an empty
text/html body to anonymous requests rather than a 403, so the simply
fails: naturalWidth 0 on a 375px bar, rendering a broken-image glyph next to
the words "BrightIdea Logo" on every page. Signed in the same URL serves a
1800px image, which is why this was invisible during admin testing.
CSS cannot change an img's src, so the swap is JS and this only sizes it.
(!) height: auto IS REQUIRED. The platform sets height: 50px, which on the
346x48 replacement would stretch it. width auto plus a max-width lets the
intrinsic ratio govern -- verified 140x19, ratio preserved. */
#dynamic_navigation_bar .nav-mobile-bar .nav-logo img,
.fractal-dynamic-nav-v1 .nav-mobile-bar .nav-logo img {
width: auto !important;
max-width: var(--nav--mobile--logo--width) !important;
height: auto !important;
}
/* (!) THREE ELEMENTS, NOT ONE. Each draws a single hamburger bar via
background. Miss one and the icon renders with two bars. */
.fractal-dynamic-nav-v1 .nav-mobile-bar .nav-icon::before,
.fractal-dynamic-nav-v1 .nav-mobile-bar .nav-icon::after,
.fractal-dynamic-nav-v1 .nav-mobile-bar .nav-icon > div {
background: var(--nav--link--color) !important;
}
/* -- FLYOUT PANEL -------------------------------------------- */
.fractal-dynamic-nav-v1 .nav-mobile-menu {
background: var(--nav--bg) !important;
}
.fractal-dynamic-nav-v1 .nav-mobile-menu.nav-mobile-deployed {
height: calc(100dvh - var(--nav--mobile--bar-height)) !important;
max-height: none !important;
overflow-y: auto !important;
-webkit-overflow-scrolling: touch !important;
}
/* -- ADMIN ITEM: REMOVED ------------------------------------- */
/* (!) ADMIN-ONLY, AND VENDORS NEVER SAW IT. The platform injects an
`li.nav-parent.has-children#menu_item_fake_id_admin_parent` holding the whole
admin submenu -- Admin / List / Steps / Action Items Manager / Dashboard /
Knowledge Base / Pipeline. It renders ONLY for signed-in admins; an anonymous
flyout has five items and never had a sixth.
Removed at Jonathan's request 2026-08-07. The trade, stated plainly: an admin
loses the admin menu from the MOBILE flyout and needs a desktop width to reach
those tools. The desktop "Site" dropdown is untouched.
Selected by id, which is stable and is the only mobile item WITHOUT a GUID --
the five real items carry campaign GUIDs, so this cannot collide with content. */
#dynamic_navigation_bar .nav-mobile-menu #menu_item_fake_id_admin_parent {
display: none !important;
}
/* -- ROWS ---------------------------------------------------- */
/* (!) THE PLATFORM'S SEPARATOR IS rgba(255,255,255,0.5), which was correct on
NM's brand-filled panel and is INVISIBLE on this white one. Restated as the
light border token. border-bottom is zeroed because the platform declares
both and two hairlines between rows reads as a double rule. */
#dynamic_navigation_bar .nav-mobile-menu .nav-parent-list > li.nav-parent {
border-top: 1px solid var(--nav--mobile--rule) !important;
border-bottom: 0 !important;
}
#dynamic_navigation_bar .nav-mobile-menu .nav-parent-list > li.nav-parent:first-child {
border-top: 0 !important;
}
/* -- LINKS: THE TOUCH-TARGET FIX ----------------------------- */
/* (!) THIS IS THE MAIN USABILITY LEVER ON THIS INSTANCE, and it differs from
what KFM #51 records. The note says the platform already gives 50px rows so
touch targets are not a missing baseline. Half true here: the