/* ========================================================================== Gulf Coast National Lab Alliance: design tokens Source: "10.26.2026 GCNLA homepage.xd" (artboard "Home - 1", 1400 x 5245) Every design value lives here. Section CSS uses these, never raw values. Root font size is 100% (1rem = 16px at browser default). ========================================================================== AA CONTRAST CHECK (WCAG 2.2: 4.5:1 body text, 3:1 large text and UI) Large text = 24px+ regular or 18.66px+ bold. Eyebrows (13px bold), buttons (11px bold), nav (13px bold) and meta (12px) are NOT large text. Fixes approved by Felicia, Nov 5, 2026 ("implement what passes AA"). Pair Ratio Used for Result ------------------------------------ ------ ---------------------------- --------------- --ink on white 17.89 body text Pass --navy on white 11.42 H2, H3, outline-button text Pass --ink on --lightgray 15.56 focus-areas intro text Pass --navy on --lightgray 9.93 focus-areas H2 Pass --teal-text on white 5.68 eyebrows on light (FIX) Pass --teal-text on --lightgray 4.94 eyebrows on light (FIX) Pass (XD --teal on --lightgray was 4.08: fail. --teal kept for the panel.) white on --navy 11.42 vision statement, banners Pass --lime on --navy 8.37 eyebrows on navy Pass white on --teal 4.69 stats panel text Pass white on --ink 17.89 newsroom, footer Pass --lime on --ink 13.12 eyebrows, button borders Pass --navy on --lime 8.37 solid button Pass white on --badge-red 4.83 focus badge 1 (FIX, XD 3.87) Pass white on --badge-gray 5.02 focus badge 2 (FIX, XD 3.45) Pass white on --teal 4.69 focus badge 3 Pass white on --purple 5.34 focus badge 4 Pass --navy border on white / --lightgray 11.42 outline buttons on light (FIX: XD lime border was 1.36) Pass --lime border on --navy/--ink/photo 8.37+ outline buttons on dark Pass white on hero overlay, worst case 4.85 hero text (FIX: 70% navy; XD 50% was 2.85) Pass (70% navy over a pure white frame) white on CTA gradient, worst case 7.45 Get Involved text (FIX: navy held 85%+ behind text; XD 3.57) Pass Focus ring --teal-text on white 5.68 :focus-visible on light Pass (3:1 UI) Focus ring --lime on navy / ink 8.37+ :focus-visible on dark Pass (3:1 UI) DECORATION ONLY (never text): --cyan (pattern, 2.03 on white), --red, --gray (card rules, 3.87 / 3.45 on white), --lime on white (1.36), --lime on --teal (stat dividers, 3.44), footer rule. ========================================================================== */ :root { /* ---------------------------------------------------------------------- Colors (named for the color; values from the XD document swatches) ---------------------------------------------------------------------- */ --white: #ffffff; --ink: #101820; /* body text, newsroom + footer backgrounds */ --navy: #003a70; /* headings, vision band, solid-button text */ --teal: #007da5; /* stats panel, focus badge 3 */ --teal-text: #006f93; /* small teal text on light backgrounds (AA fix) */ --lime: #cbe880; /* buttons, eyebrows on dark, divider lines */ --lightgray: #efefef; /* focus-areas band */ --cyan: #3fc4ef; /* decoration only: logomark pattern on navy */ --red: #f5333f; /* decoration only: focus area 1 rule */ --gray: #898a8d; /* decoration only: focus area 2 rule */ --purple: #655dc6; /* focus area 4 badge + rule */ --badge-red: #d92b36; /* AA fix: white "1" on red badge */ --badge-gray: #6e6f72; /* AA fix: white "2" on gray badge */ /* Focus-area accents, card 1-4: badge (behind white text) and rule */ --badge-1: var(--badge-red); --badge-2: var(--badge-gray); --badge-3: var(--teal); --badge-4: var(--purple); --rule-1: var(--red); --rule-2: var(--gray); --rule-3: var(--teal); --rule-4: var(--purple); /* ---------------------------------------------------------------------- Gradients and overlays ---------------------------------------------------------------------- */ /* Hero: navy over the background video. XD 50% raised to 70% for AA. */ --overlay-hero: rgb(0 58 112 / 0.7); /* Get Involved band: navy -> transparent, left to right. XD was #003a70 0% -> rgb(0 29 56 / 0) 100%; navy now held behind the text. */ --gradient-cta: linear-gradient(90deg, #003a70 0%, rgb(0 58 112 / 0.85) 45%, rgb(0 29 56 / 0) 100%); /* Phones: the text covers the whole photo, so the overlay does too */ --gradient-cta-mobile: linear-gradient(0deg, rgb(0 58 112 / 0.9), rgb(0 58 112 / 0.9)); /* Navy band pattern: logomark tiles in --cyan at 4% (baked into the SVG). One tile = the full XD vision band (472px): the logomark rows mirror at the band middle, so the tile repeats seamlessly on taller bands. */ --pattern-logomark: url("../images/brand/pattern-logomark.svg"); --pattern-size: 248.6px 472px; --pattern-offset: 12px 0; /* Subtle rule on light backgrounds (decoration only) */ --rule-subtle: rgb(16 24 32 / 0.12); /* Footer rule: --lime at 24% opacity */ --rule-footer: rgb(203 232 128 / 0.24); /* ---------------------------------------------------------------------- Type (Inter, self-hosted variable font, weights 100-900) ---------------------------------------------------------------------- */ --font-sans: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif; --fw-thin: 100; /* stat numbers */ --fw-light: 300; /* body, hero H1 first words, news meta, footer */ --fw-regular: 400; /* H2 */ --fw-semibold: 600; /* article body H3/H4 (proposed) */ --fw-bold: 700; /* H3, eyebrows, nav, buttons */ --fw-black: 900; /* hero H1 emphasis */ /* Phone sizes first; larger sizes are set at the breakpoints below. Desktop values are from the 1400px artboard; phone values are PROPOSED. */ --fs-hero: 2.25rem; /* 36px phone -> 44px tablet/desktop -> 52px at 1400, uppercase */ --lh-hero: 1.25; --fs-h1: 2rem; /* 32px phone -> 44px desktop: article title (proposed) */ --lh-h1: 1.25; --fs-stat: 3.5rem; /* 56px phone -> 60px desktop -> 72px at 1400 */ --lh-stat: 1.2; --fs-stat-unit: 0.5833em; /* "%" at 42px on 72px */ --stat-unit-shift: 0.3333em; /* raised 24px */ --fs-h2: 1.625rem; /* 26px phone -> 32px desktop */ --lh-h2: 1.3438; /* 43px at desktop */ --fs-h3: 1.1875rem; /* 19px card titles */ --lh-h3: 1.3684; /* 26px */ --fs-h4: 1rem; /* 16px article body H4 (proposed) */ --fs-lead: 1.125rem; /* 18px phone -> 20px desktop: article intro (proposed) */ --lh-lead: 1.6; --fs-body: 1rem; /* 16px */ --lh-body: 1.6875; /* 27px */ --fs-eyebrow: 0.8125rem; /* 13px uppercase, bold */ --fs-nav: 0.8125rem; /* 13px uppercase, bold */ --fs-nav-mobile: 1.5rem; /* 24px mobile menu links (proposed) */ --lh-label: 1.4615; /* 19px eyebrows, nav, buttons, meta */ --fs-button: 0.6875rem; /* 11px uppercase, bold */ --fs-meta: 0.75rem; /* 12px news category / date, uppercase, light */ --fs-small: 0.75rem; /* 12px footer, captions */ --lh-small: 1.5; /* 18px */ --ls-label: 0.2em; /* eyebrows, nav, buttons, meta */ --ls-small: 0.075em; /* footer line */ /* ---------------------------------------------------------------------- Layout (phone first; see breakpoints below) ---------------------------------------------------------------------- */ --content-width: 74.5rem; /* 1192px: 104px margins on the 1400px artboard */ --reading-width: 47rem; /* 752px article body column (proposed) */ --page-margin: 1.5rem; /* 24px phone -> 40px tablet -> 104px desktop */ --gutter: 1.5rem; /* 24px phone -> 45px desktop */ --header-height: 5.5rem; /* 88px phone -> 180px desktop (logo 66px from top) */ --logo-width: 8.75rem; /* 140px phone -> 183px desktop */ --sticky-height: 4.5rem; /* 72px phone -> 79px desktop: sticky header bar (XD) */ --sticky-logo-width: 7.5rem; /* 120px phone -> 146px desktop */ --shadow-sticky: 0 3px 26px rgb(0 0 0 / 0.161); /* XD drop shadow on the sticky bar */ /* ---------------------------------------------------------------------- Spacing (desktop values measured from the XD) ---------------------------------------------------------------------- */ --space-xs: 0.5rem; /* 8px */ --space-s: 1rem; /* 16px */ --space-m: 1.25rem; /* 20px heading -> body */ --space-eyebrow: 1.25rem; /* 20px phone -> 30px desktop: eyebrow -> heading (XD: 68px baseline to baseline) */ --space-l: 1.5rem; /* 24px */ --space-xl: 2rem; /* 32px card image -> text */ --space-2xl: 2.5rem; /* 40px text -> button */ --space-3xl: 4rem; /* 64px band intro -> cards, card rows */ --space-paragraph: 1.6875rem;/* 27px one body line between paragraphs */ --space-section: 4rem; /* 64px phone -> 100px desktop band padding */ --space-section-tall: 5rem; /* 80px phone -> 128px desktop (.tall-padding) */ /* ---------------------------------------------------------------------- Components and shapes ---------------------------------------------------------------------- */ --button-height: 2.5rem; /* 40px (24px+ target size met) */ --button-padding-inline: 1.375rem; /* 22px */ --border-width: 1px; --rule-accent-width: 2px; /* focus-card colored rules */ --focus-split: 8rem; /* focus-areas: gray ends 128px into the card images */ /* Angled corners: one brand angle (~30 deg from vertical) at two sizes */ --corner-s-w: 2.6875rem; /* 43px card image corner */ --corner-s-h: 4.5625rem; /* 73px */ --corner-l-w: 3.65625rem; /* 58.5px stats panel + article image corners */ --corner-l-h: 6.3125rem; /* 101px */ /* Focus indicator */ --focus-ring-width: 2px; --focus-ring-offset: 3px; --focus-ring-color: var(--teal-text); --focus-ring-color-on-dark: var(--lime); /* ---------------------------------------------------------------------- Motion (not in XD; PROPOSED). Skipped under prefers-reduced-motion. ---------------------------------------------------------------------- */ --motion-fast: 150ms; --motion-base: 300ms; --motion-slow: 600ms; --motion-ease: cubic-bezier(0.2, 0, 0, 1); --motion-stagger: 50ms; /* mobile menu links, one after another */ --motion-sticky-in: 500ms; /* sticky header slides and fades in */ --motion-sticky-out: 250ms; /* ...and slides back out */ --motion-sticky-delay: 120ms; } /* Breakpoints: 768 (tablet), 992 (small desktop), 1200 (desktop), 1400 (artboard) */ @media (min-width: 768px) { :root { --page-margin: 2.5rem; --fs-hero: 2.75rem; --fs-h1: 2.5rem; --header-height: 7rem; } } @media (min-width: 992px) { :root { --gutter: 2.8125rem; --fs-h2: 2rem; --fs-h1: 2.75rem; --fs-stat: 3.75rem; --lh-stat: 1.625; --fs-lead: 1.25rem; --space-section: 6.25rem; --space-section-tall: 8rem; --space-eyebrow: 1.875rem; --logo-width: 11.4375rem; --sticky-height: 4.9375rem; --sticky-logo-width: 9.125rem; --header-height: 11.25rem; } } @media (min-width: 1200px) { :root { --page-margin: 6.5rem; --lh-hero: 1.4231; } } /* 1400 (artboard width): full hero and stat sizes */ @media (min-width: 1400px) { :root { --fs-hero: 3.25rem; --fs-stat: 4.5rem; } }