/* ============================================================ Design tokens — the single source of truth for color/type/space. ------------------------------------------------------------ VSMA (Virginia Smart Manufacturing Accelerator). Extracted from _design/VSMA - Industrial Prototype Light copy.dc.html and _design/434 Block Library - VSMA Style.dc.html. Full derivation + line citations: docs/specs/design-system.md §1–3. The token NAMES are contractual — global.css, blocks.css, components.css and m434_section_classes() (inc/helpers.php) all reference these exact names. Swap values, never names. Additional VSMA-only props live under the --m434-* house namespace. Never let a template define its own color; everything flows from here. ============================================================ */ :root { /* ---- Accent, as an RGB TRIPLET, not a hex -------------------- The design consumes the accent as `rgb(var(--vaccent,229,118,30))` so that `rgba(var(--vaccent),.5)` composes from ONE source of truth. Keep the triplet form — collapsing it to a hex breaks every translucent accent in the build. */ --vaccent: 229,118,30; /* Signal Orange */ --vaccent-lt: 255,150,60; /* light variant, for dark surfaces */ /* Alternate palette — the design ships a "Forge Red" variant. Flip these two lines to switch the whole site: --vaccent: 139,36,51; --vaccent-lt: 250,110,122; */ /* ---- Contractual kit tokens ---- */ --red: rgb(var(--vaccent,229,118,30)); /* THE accent */ --red-dark: #c95f0f; /* accent hover, light surfaces */ --navy: #262626; /* dark section surface */ --navy-deep: #111111; /* deepest dark */ --ink: #303030; /* primary body text */ --slate: #6b7280; /* secondary / meta text */ --line: rgba(107,114,128,.35); /* unified hairline — see note 2 */ --bg-soft: #f4f5f7; /* page bg + light fill A */ --bg-cool: #eef1f4; /* light fill B */ --white: #ffffff; /* ---- Type lanes ---- Century Gothic is a SYSTEM font (not web-licensable) — it is a progressive enhancement for users who have it; Jost is the self-hosted fallback that everyone else gets. Both families are self-hosted per CONTRACT; no CDN link is ported from the design. */ --display: "Century Gothic", "CenturyGothic", "Jost", sans-serif; --body: "Montserrat", sans-serif; /* Kit-contractual. VSMA has NO gradient text; this exists only so .grad-text (global.css) never renders transparent-on-transparent. Do not use .grad-text in VSMA markup. */ --grad: linear-gradient(100deg, var(--ink) 0%, var(--ink) 42%, var(--red) 100%); /* ---- Layout ---- */ --maxw: 1200px; /* ---- Elevation ---- */ --shadow-sm: 0 4px 14px rgba(0,0,0,.18); /* map pin label */ --shadow-md: 0 10px 30px rgba(0,0,0,.50); /* toast */ --shadow-lg: 0 30px 80px rgba(0,0,0,.60); /* modal */ /* ============================================================ ACCESSIBILITY: accent text is a DIFFERENT token to accent fill ------------------------------------------------------------ #E5761E on #ffffff is 3.03:1 — it FAILS WCAG 2.1 AA (4.5:1) for normal text. In the design that color is used for the most repeated text element on the page: every 12px/0.2em eyebrow, every card CTA, the FAQ toggle icon. VSMA is DOE-funded, so Section 508 / WCAG 2.1 AA is a contractual obligation, not a preference. So the accent is SPLIT BY ROLE: --red fills, rules, icons, borders, large display type (>=24px bold clears AA at 3:1) --m434-accent-text accent-COLORED TEXT on light grounds #a34f0e = 5.70:1 on white — passes AA --m434-accent-lt accent text on DARK grounds rgb(255,150,60) on #1c1c1e = 7.6:1 This is a deliberate, visible deviation from the design and is flagged for sign-off as build defect F-16. It reads as the same orange; it is roughly one step deeper. Do NOT "fix" small accent text back to --red. ============================================================ */ --m434-accent-text: #a34f0e; /* ---- Additional VSMA props (no kit equivalent) ---- */ --m434-slate-rgb: 107,114,128; /* so every hairline alpha composes from one source */ --m434-slate-strong: #4b5563; /* 2nd body gray — kit has only --slate */ --m434-slate-mute: #6b7280; /* inactive numerals — see note 3 */ --m434-crimson: #8b2433; /* Forge Red band, "coming soon" pill, form errors */ --m434-crimson-glow: 190,60,80; /* bloom triplet — box-shadow only, never text */ --m434-dark-2: #1c1c1e; /* proof-bar surface */ --m434-dark-3: #1f1f21; /* testimonial surface */ --m434-accent-lt: rgb(var(--vaccent-lt,255,150,60)); /* accent text on dark */ --m434-accent-hover-dark: #ffab5e; /* link hover on dark surfaces */ --m434-input-border: #cbd0d6; /* form field idle border */ --m434-hover-light: #f4f5f7; /* card hover fill on white */ --m434-hover-row: #f9fafb; /* table-row hover */ --m434-hover-tile: #eceef1; /* stat-tile hover */ /* Hairline variants, all composed from --m434-slate-rgb */ --m434-line-2: rgba(var(--m434-slate-rgb),.35); --m434-line-3: rgba(var(--m434-slate-rgb),.40); --m434-line-4: rgba(var(--m434-slate-rgb),.45); /* Measures + containers */ --m434-maxw-narrow: 900px; /* FAQ */ --m434-maxw-quote: 960px; /* home testimonial */ --m434-measure: 760px; /* rich-text measure */ --m434-measure-wide: 820px; /* checklist / resources */ /* Rhythm — MOBILE-FIRST base values, stepped up in global.css. Values are from the mobile design spec, not invented: _design/VSMA - Mobile + Tablet.dc.html -> "Values for CSS". gutter 20px -> 32px (md) -> 44px (lg) header 64px -> 80px (md) -> 104px (lg) section-y 44px -> 56px (md) -> 76px (lg) */ --m434-gutter: 20px; --m434-header-h: 64px; --m434-section-y: 44px; /* Breakpoints, documented for reference. CSS custom properties cannot be used in @media queries — these values are duplicated literally in global.css. Change both together. sm hero CTAs side by side; modal becomes a centered card md tablet: 2-col grids, interactive map pins return, stat row lg desktop nav bar, 104px header, 3-4 col grids xl container max-width caps, 76px 44px padding */ --m434-bp-sm: 480px; --m434-bp-md: 768px; --m434-bp-lg: 1024px; --m434-bp-xl: 1200px; /* Reusable primitives */ --m434-rule-inset: inset 0 0 0 1px var(--line); --m434-rule-accent: inset 0 0 0 1px rgba(var(--vaccent,229,118,30),.5); --m434-ease: cubic-bezier(.2,.7,.2,1); /* the scroll-reveal easing */ /* Sticky-header offset for anchor targets (#about, #programs, …). Without this the sticky header covers any heading you jump to. */ --m434-anchor-offset: calc(var(--m434-header-h) + 16px); } /* ------------------------------------------------------------------ Notes on deliberate divergences from the raw design values: 1. --vaccent stays a triplet (see above). 2. --line unifies the design's alternating rgba(107,114,128,.3) and .4 section hairlines to a single .35. The design alternates them on adjacent sections with no discernible rule; .3/.4 remain available as --m434-line-2/-3 where a specific weight is wanted. (Build defect F-17, cosmetic.) 3. --m434-slate-mute is #6b7280, NOT the design's #9aa0a8. #9aa0a8 on white is 2.60:1 and fails AA; it is used for inactive list numerals, which must stay readable. Same rationale as F-16. 4. The design has no dark-mode / prefers-color-scheme handling and none is planned. This theme is light-only, so no @media (prefers-color-scheme) block belongs in this file. ------------------------------------------------------------------ */