/* ============================================================ Base — reset, typography, primitives, utilities ============================================================ */ *, *::before, *::after { box-sizing: border-box; } * { margin: 0; } html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; } body { font-family: var(--font-sans); font-size: var(--fs-body); font-weight: 400; line-height: var(--lh); color: var(--ink); background: var(--white); -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; } img, svg, video, iframe { display: block; max-width: 100%; } img, video { height: auto; } h1, h2, h3, h4 { line-height: var(--lh-tight); font-weight: 700; letter-spacing: var(--tracking-tight); } .lead { font-size: var(--fs-lead); font-weight: 300; line-height: 1.35; } a { color: var(--green-rich); } a:hover { color: var(--green-deep); } p { text-wrap: pretty; } :where(h1, h2, h3) { text-wrap: balance; } /* ---- Visible focus for keyboard users (WCAG 2.2 — 2.4.11/2.4.13) ---- */ :focus-visible { outline: 3px solid var(--green); outline-offset: 3px; border-radius: 3px; /* light companion ring so the indicator stays visible on green / olive / dark surfaces, where the green outline alone is ~1:1 / ~1.7:1 against the background (WCAG 2.4.11 / 1.4.11) */ box-shadow: 0 0 0 3px var(--cream); } /* ---- Layout primitives ---- */ .container { width: 100%; max-width: var(--content-max); margin-inline: auto; padding-inline: var(--gutter); } .section { padding-block: clamp(48px, 7vw, 104px); } .section-title { font-size: var(--fs-h2); color: var(--ink); letter-spacing: -.04em; } .section-title--lg { font-size: var(--fs-h2-lg); } .section-title--invert { color: var(--cream); } /* ---- Skip link ---- */ .skip-link { position: absolute; left: 40px; /* line up with the header gutter / brand logo below it */ top: -64px; z-index: 200; background: var(--green); color: #fff; padding: 10px 18px; border-radius: 0 0 var(--r-sm) var(--r-sm); font-weight: 700; text-decoration: none; transition: top .2s var(--ease); } .skip-link:focus { top: 0; color: #fff; } /* below 1200px the header gutter tightens to 22px — keep the skip link aligned to it */ @media (max-width: 1199px) { .skip-link { left: 22px; } } /* ---- Screen-reader-only ---- */ .visually-hidden { position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; } /* ---- Sub-reflow-floor viewport guard ---- WCAG 2.2 §1.4.10 (Reflow) only requires support down to 320 CSS px wide / 256 tall. Below either, the layout is unsupported — so hide it and show a branded "enlarge your screen" message instead. CSS-only: at the breakpoint every other direct child is removed (display:none drops them from the a11y tree too), leaving only the guard. */ .viewport-guard { display: none; } @media (max-width: 319px), (max-height: 255px) { body > :not(.viewport-guard) { display: none !important; } .viewport-guard { display: flex; position: fixed; inset: 0; z-index: 1000; overflow: auto; align-items: center; justify-content: center; padding: 16px; background: var(--green); font-family: var(--font-sans); } /* brand halftone dots fading in from the top-left and bottom-right corners (matches the hero bands) */ .viewport-guard::before, .viewport-guard::after { content: ""; position: absolute; inset: 0; z-index: 0; pointer-events: none; background-image: radial-gradient(rgba(0, 0, 0, .13) 2.3px, transparent 2.9px); background-size: 20px 20px; } .viewport-guard::before { -webkit-mask-image: radial-gradient(115% 125% at 0% 0%, #000 0%, #000 16%, transparent 54%); mask-image: radial-gradient(115% 125% at 0% 0%, #000 0%, #000 16%, transparent 54%); } .viewport-guard::after { -webkit-mask-image: radial-gradient(115% 125% at 100% 100%, #000 0%, #000 16%, transparent 54%); mask-image: radial-gradient(115% 125% at 100% 100%, #000 0%, #000 16%, transparent 54%); } .viewport-guard__box { position: relative; z-index: 1; width: 100%; max-width: 360px; margin: auto; background: #fff; border-radius: 16px; box-shadow: -10px -10px 0 0 var(--olive), var(--shadow-soft); /* brand offset accent + soft drop */ padding: clamp(24px, 8vw, 40px); text-align: center; } /* fluid width, natural height locked to the wordmark ratio (the SVG is preserveAspectRatio="none") */ .viewport-guard__logo { display: block; width: 100%; height: auto; aspect-ratio: 273 / 63; margin: 0 auto 22px; } body.lang-es .viewport-guard__logo { aspect-ratio: 695.29 / 119.23; } .viewport-guard__title { font-size: clamp(20px, 7vw, 26px); font-weight: 700; line-height: 1.1; letter-spacing: -.02em; color: var(--green-deep); } .viewport-guard__body { margin-top: 14px; font-size: clamp(14px, 4.6vw, 16px); line-height: 1.5; color: var(--ink); } /* language toggle — plain text link + globe, like the header/footer */ .viewport-guard__lang { display: inline-flex; align-items: center; gap: .4em; margin-top: 22px; padding: 6px 4px; color: var(--green-rich); font-size: clamp(14px, 4.4vw, 16px); font-weight: 600; text-decoration: none; } .viewport-guard__lang:hover { text-decoration: underline; } .viewport-guard__lang:focus-visible { outline: 3px solid var(--green); outline-offset: 2px; border-radius: 4px; } .viewport-guard__lang .globe { width: 18px; height: 18px; flex: none; } } /* ---- Buttons (min target 48px — WCAG 2.5.8) ---- */ .btn { --btn-bg: var(--green-deep); /* white-on-#276b32 ≈ 6:1, clears WCAG AA for normal text (plain --green was 4.49:1) */ --btn-fg: #fff; --btn-bd: #fff; display: inline-flex; align-items: center; justify-content: center; gap: .5em; min-height: 48px; padding: .6em 1.4em; font: inherit; font-weight: 700; line-height: 1.1; color: var(--btn-fg); background: var(--btn-bg); border: 4px solid var(--btn-bd); /* signature white keyline (Figma) */ border-radius: var(--r); box-shadow: var(--shadow-btn); text-decoration: none; cursor: pointer; transition: background-color var(--dur) var(--ease), transform var(--dur) var(--ease), box-shadow var(--dur) var(--ease); } .btn:hover { background: var(--green-rich); color: #fff; transform: translateY(-2px); box-shadow: 0 8px 14px -2px rgba(0,0,0,.3); } .btn:active { transform: translateY(0); box-shadow: var(--shadow-btn); } .btn:focus-visible { outline: 3px solid var(--green); outline-offset: 3px; } /* On dark backgrounds the white keyline reads as an outline pill */ .btn--ghost { --btn-bg: transparent; --btn-fg: var(--green-rich); --btn-bd: var(--green); } .btn--ghost:hover { --btn-bg: var(--green); --btn-fg: #fff; --btn-bd: var(--green); } .btn--light { --btn-bg: #fff; --btn-fg: var(--ink); --btn-bd: #fff; } .btn--light:hover { --btn-bg: var(--green-rich); --btn-fg: #fff; --btn-bd: #fff; } /* ---- Recolourable icon: white-fill SVG painted with currentColor via mask ---- */ .mask-icon { display: inline-block; width: 1em; height: 1em; background: currentColor; -webkit-mask: var(--icon) no-repeat center / contain; mask: var(--icon) no-repeat center / contain; } /* Windows High Contrast / forced-colors: mask-icons paint via background:currentColor, which the UA forces to a system colour that can match the page background — so the brand wordmark, globe, TxDOT seal and spinner/hero icons silently vanish. Pin them to CanvasText so they stay visible. */ @media (forced-colors: active) { /* !important beats element-specific backgrounds (e.g. .brand__mark, .site-footer__txdot-mark set their own white/brand background, which would otherwise stay forced to the page bg) */ .mask-icon { background-color: CanvasText !important; } } /* ---- Flat hard brand shadow ---- */ .shadow-hard { box-shadow: 14px 14px 0 0 var(--shadow-hard); } /* ---- Dot texture (decorative) ---- */ .dots { position: relative; } .dots::before { content: ""; position: absolute; inset: 0; background-image: radial-gradient(var(--dot) 1.5px, transparent 2px); background-size: 14px 14px; pointer-events: none; border-radius: inherit; } /* ---- Check / cross list (hero substances) ---- */ .check-list { list-style: none; padding: 0; display: grid; gap: .55em; } .check-list li { display: flex; align-items: flex-start; gap: .6em; } .check-list li::before { content: ""; flex: none; width: 14px; height: 14px; margin-top: .22em; background: url("../img/list-x.svg") center / contain no-repeat; } /* ---- Responsive 16:9 video ---- */ .video { position: relative; aspect-ratio: 16 / 9; border-radius: var(--r-lg); overflow: hidden; background: var(--dark); } .video iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; } /* ---- YouTube facade (click-to-load embeds) — see yt_embed() / main.js ---- Fills its video wrapper; on click main.js replaces it with the real iframe. */ .yt-facade { position: relative; display: block; width: 100%; height: 100%; margin: 0; padding: 0; border: 0; background: var(--dark); cursor: pointer; overflow: hidden; text-decoration: none; color: inherit; /* now an */ } .yt-facade__thumb { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; /* maxres is native 16:9; cover crops the hqdefault (4:3) fallback's letterbox */ transition: transform .4s var(--ease), filter .3s var(--ease); } .yt-facade__play { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); width: clamp(54px, 11%, 84px); height: auto; filter: drop-shadow(0 2px 10px rgba(0, 0, 0, .45)); transition: transform .25s var(--ease); } .yt-facade__play-shell { fill: var(--green); opacity: .92; } .yt-facade__play-tri { fill: #fff; } .yt-facade:hover .yt-facade__thumb, .yt-facade:focus-visible .yt-facade__thumb { transform: scale(1.03); filter: brightness(.9); } .yt-facade:hover .yt-facade__play, .yt-facade:focus-visible .yt-facade__play { transform: translate(-50%, -50%) scale(1.08); } .yt-facade:hover .yt-facade__play-shell, .yt-facade:focus-visible .yt-facade__play-shell { fill: var(--green-rich); opacity: 1; } .yt-facade:focus-visible { outline: 3px solid var(--green); outline-offset: 3px; } @media (prefers-reduced-motion: reduce) { .yt-facade__thumb, .yt-facade__play { transition: none; } } /* kill transitions mid-resize (set by main.js) so nothing animates while the window is dragged across the mobile breakpoint */ .is-resizing *, .is-resizing *::before, .is-resizing *::after { transition: none !important; } /* first-paint guard: ships with transitions off so nothing (esp. the off-canvas mobile menu, which rests at translateX(100%)) animates from its initial state on load. main.js removes .preload after the first paint. Same mechanism as .is-resizing above. */ .preload *, .preload *::before, .preload *::after { transition: none !important; } /* ---- Respect reduced-motion ---- */ @media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } *, *::before, *::after { animation-duration: .001ms !important; animation-iteration-count: 1 !important; transition-duration: .001ms !important; } } /* ============================================================ Fixed-desktop stage — the design is authored at exactly 1440px. Content placement is FIXED (pixel-matched to Figma); colour bands stretch full-bleed. The whole stage scales proportionally between the mobile breakpoint and 1440 (tablet = scaled desktop), then reflows to a fluid layout below 760px. --vw-scale is set by JS. ============================================================ */ :root { --design-w: 1440px; } /* flex centring works even when the 1440 stage is wider than the viewport (margin:auto would pin it left); transform-origin top-center then scales it symmetrically so it always fills the viewport edge-to-edge. */ /* position:relative so page-level overlays (e.g. the hero wave) anchor to this full-viewport-width wrapper — i.e. to the screen, not the centred 1440 stage */ #stage-wrap { position: relative; overflow: hidden; display: flex; justify-content: center; align-items: flex-start; } #stage { width: var(--design-w); flex: none; transform-origin: top center; } /* A full-width section whose inner .frame is the fixed 1440 canvas */ .band { position: relative; } .band::before { content: ""; position: absolute; inset: 0; left: 50%; transform: translateX(-50%); width: max(100%, 100vw); background: var(--band, transparent); z-index: 0; } .frame { position: relative; z-index: 1; width: 100%; /* = 1440 inside #stage */ margin-inline: auto; } /* ---- Mobile (< 760px): drop the fixed canvas, reflow fluidly ---- */ @media (max-width: 759px) { #stage { width: 100% !important; transform: none !important; } #stage-wrap { height: auto !important; overflow: visible; } .band::before { width: 100%; left: 0; transform: none; } /* content gutter ~30px (Figma mobile places content at x30) */ .frame { height: auto !important; padding-inline: clamp(20px, 7.5vw, 30px); } .frame > *:not(.primary-nav) { position: static !important; inset: auto !important; transform: none !important; max-width: 100%; } }