/* ============================================================ Layout — global header & footer, placed at exact Figma coordinates inside the fixed 1440 canvas. Colour bands bleed full-width via .band::before; content is pixel-fixed. ============================================================ */ /* ---------------- HEADER (height 144 = 56 utility + 88 navbar) ---------------- The header lives OUTSIDE the scaled 1440 #stage (it's a direct child of ), so it spans the real screen at full size and never scales with the canvas. Logo hard-left of the screen, nav/CTA hard-right, plain flexbox — no absolute positioning, no 100vw breakout tricks. --header-gutter is the side padding from the screen edges. */ .site-header { background: #e6f1e8; --header-gutter: 40px; border-bottom: 1px solid #505444; } .utility, .navbar { display: flex; align-items: center; padding-inline: var(--header-gutter); } .utility { height: 56px; justify-content: flex-end; gap: 22px; background: rgba(50, 135, 63, .19); /* green tint over the #e6f1e8 bar */ } .utility__link { display: inline-flex; align-items: center; gap: .4em; color: var(--ink); text-decoration: none; font-size: 18px; font-weight: 400; white-space: nowrap; } .utility__link:hover { color: var(--green-rich); text-decoration: underline; } .navbar { height: 88px; gap: 34px; } .brand { flex: none; width: 273px; margin-right: auto; } /* logo left; auto margin pushes the rest right */ /* wordmark is a single-colour (#231F20) SVG painted via mask so it can recolour; greens to match the Take a Spin button on hover/focus */ .brand__mark { display: block; width: 100%; height: auto; /* override .mask-icon's 1em so aspect-ratio governs */ aspect-ratio: 273 / 63; background: var(--ink); transition: background-color var(--dur) var(--ease); } .brand:hover .brand__mark, .brand:focus-visible .brand__mark { background: var(--green); } /* Spanish wordmark is a wider, shorter lockup (686×119 vs the English 273×63). Keep the same brand WIDTH (273 desktop / 232 collapsed) and just swap the aspect-ratio so the height auto-derives — it fills the logo slot identically, just shorter, no distortion. */ .lang-es .brand__mark { aspect-ratio: 686.24 / 119.23; } .primary-nav { display: flex; align-items: center; } .primary-nav__list { display: flex; align-items: center; gap: 34px; list-style: none; margin: 0; padding: 0; } .primary-nav__list a { position: relative; color: #000; text-decoration: none; text-transform: uppercase; font-size: 18px; font-weight: 400; letter-spacing: .01em; white-space: nowrap; padding-block: 8px; } .primary-nav__list a::after { content: ""; position: absolute; left: 0; right: 100%; bottom: 0; height: 3px; background: var(--green); border-radius: 2px; transition: right var(--dur) var(--ease); } .primary-nav__list a:hover::after, .primary-nav__list a:focus-visible::after, .primary-nav__list a[aria-current="page"]::after { right: 0; } .nav-cta { flex: none; width: 179px; height: 64px; min-height: 0; padding: 0; /* 19px (≥14pt) + the .btn 700 weight makes this WCAG "large text", so the white-on-green 4.49:1 clears the 3:1 large-text AA bar (it just missed the 4.5:1 normal-text bar at 18px). */ font-size: 19px; border: 0; /* header CTA has no white keyline (Figma) */ box-shadow: none; text-transform: uppercase; letter-spacing: .02em; } /* underline the header CTA when Take a Spin is the active page — a bold white bar (Figma 318:1626: a 6px underline the width of the label) */ .nav-cta[aria-current="page"] { text-decoration: underline; text-underline-offset: 6px; text-decoration-thickness: 6px; } /* these nav items only appear inside the mobile menu (on desktop they live in the utility strip / as the standalone CTA) */ .primary-nav__cta, .primary-nav__more { display: none; } /* Hamburger (mobile only) */ .nav-toggle { display: none; align-items: center; gap: .5em; background: none; border: 0; cursor: pointer; color: var(--ink); font: inherit; font-weight: 700; padding: 8px; } .nav-toggle__box { position: relative; width: 26px; height: 20px; flex: none; } .nav-toggle__bar, .nav-toggle__bar::before, .nav-toggle__bar::after { content: ""; position: absolute; left: 0; width: 100%; height: 3px; background: var(--ink); border-radius: 2px; } .nav-toggle__bar { top: 50%; transform: translateY(-50%); transition: background-color .15s var(--ease); } .nav-toggle__bar::before { top: -8px; transition: top .25s var(--ease), transform .25s var(--ease); } .nav-toggle__bar::after { top: 8px; transition: top .25s var(--ease), transform .25s var(--ease); } .nav-toggle[aria-expanded="true"] .nav-toggle__bar { background: transparent; } .nav-toggle[aria-expanded="true"] .nav-toggle__bar::before { top: 0; transform: rotate(45deg); } .nav-toggle[aria-expanded="true"] .nav-toggle__bar::after { top: 0; transform: rotate(-45deg); } /* ---------------- FOOTER (band height 105) ---------------- */ /* position:relative + z-index keeps the footer painting ABOVE any page band that bleeds into it (Tips' full-bleed body band overlapped the footer's top edge, eating its top padding so the content looked too high). */ .site-footer { --band: var(--olive); color: var(--cream); position: relative; z-index: 1; } /* Lifted OUT of the scaled #stage (like the header): a native flex row at every width, so its controls keep full size and never drop below the 24px target-size minimum (WCAG 2.5.8). max-width caps it to the 1440 design width and centres it on very wide screens. */ .site-footer .frame { min-height: 105px; max-width: var(--design-w); margin-inline: auto; display: flex; flex-wrap: wrap; align-items: center; justify-content: center; /* centred footer row on desktop (reset on mobile) */ gap: 14px clamp(20px, 3vw, 44px); padding-block: 16px; padding-inline: var(--header-gutter, 40px); } /* the footer now spans the screen itself (outside #stage's overflow:hidden), so its full-bleed band must fill 100% — the 100vw breakout the in-stage bands use includes the scrollbar width and would overflow past it here, adding a stray horizontal scrollbar */ .site-footer.band::before { left: 0; width: 100%; transform: none; } .site-footer__txdot { position: static; flex: none; width: 78px; height: 58px; display: block; } /* TxDOT seal is a single-colour (white) SVG painted via mask; the source has preserveAspectRatio="none", so stretch the mask to fill (matches the old ) */ .site-footer__txdot-mark { display: block; width: 100%; height: 100%; background: var(--white); -webkit-mask-size: 100% 100%; mask-size: 100% 100%; transition: background-color var(--dur) var(--ease); } /* a lightened brand green (not the base green, which barely contrasts on the olive footer, and not white): --green-light clears ~3.8:1 against the #505444 footer. */ .site-footer__txdot:hover .site-footer__txdot-mark, .site-footer__txdot:focus-visible .site-footer__txdot-mark { background: var(--green-light); } .social { position: static; } .social__list { display: flex; align-items: center; gap: 14px; list-style: none; margin: 0; padding: 0; } /* Figma: light #e6f1e8 rounded-square badge with the glyph knocked out in the footer olive */ .social__link { display: grid; place-items: center; width: 38px; height: 40px; border-radius: 9px; background: #e6f1e8; color: var(--olive); transition: background-color var(--dur) var(--ease), transform var(--dur) var(--ease); } .social__link svg { width: 24px; height: 24px; fill: currentColor; } /* glyphs flagged fill use the full badge-space viewBox, so they keep the design's exact placement */ .social__link .social__glyph--fill { width: 100%; height: 100%; } .social__link:hover { background: #fff; transform: translateY(-2px); } .social__link:focus-visible { outline: 3px solid var(--cream); outline-offset: 2px; } /* language globe (recolorable mask-icon; follows the adjacent text colour) */ .globe { width: 18px; height: 18px; flex: none; } /* padding gives a >=24px tall hit target (WCAG 2.5.8) now that the footer is un-scaled */ .lang-toggle--footer { position: static; display: inline-flex; align-items: center; gap: .4em; padding: 6px 2px; color: var(--cream); text-decoration: none; font-size: 18px; } .lang-toggle--footer:hover { color: #fff; text-decoration: underline; } .copyright { position: static; margin: 0; font-size: 16px; color: rgba(244, 247, 238, .9); white-space: nowrap; } /* ---------------- ERROR PAGES (404 / 403 / 500) ---------------- They skip the scaled #stage ($noStage), so they're a plain flex-column document at every width — mobile, tablet and desktop alike. The growing .site-main centres the short message and pins the footer to the bottom of the viewport on tall screens. */ body.page-404, body.page-403, body.page-500 { min-height: 100dvh; display: flex; flex-direction: column; } body.page-404 .site-main, body.page-403 .site-main, body.page-500 .site-main { flex: 1 0 auto; display: flex; flex-direction: column; justify-content: center; } body.page-404 .site-footer, body.page-403 .site-footer, body.page-500 .site-footer { flex: none; } /* ---------------- HEADER COLLAPSE (< 1200px) ---------------- The full desktop nav stops fitting the lifted, full-size header below ~1200px, so it collapses to the hamburger + off-canvas menu here — while the body stays the scaled desktop canvas down to 760px (the menu is a viewport overlay, not inside the stage). */ @media (max-width: 1199px) { /* header: just logo + hamburger; the utility links move into the menu */ .site-header { --header-gutter: 22px; --header-h: 92px; } .utility { display: none; } .navbar { height: var(--header-h); } .brand { width: 232px; } .nav-cta { display: none; } /* the standalone desktop CTA */ /* chunky 3-bar hamburger (label hidden), morphs to the X */ .nav-toggle { display: inline-flex; padding: 6px; } .nav-toggle__label { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; } .nav-toggle__box { width: 44px; height: 24px; } .nav-toggle__bar, .nav-toggle__bar::before, .nav-toggle__bar::after { height: 6px; border-radius: 3px; } .nav-toggle__bar::before { top: -10px; } .nav-toggle__bar::after { top: 10px; } /* full-screen menu overlay below the (fixed-while-open) header */ .primary-nav { position: fixed; inset: var(--header-h) 0 0 0; background: var(--white); transform: translateX(100%); transition: transform .3s var(--ease); z-index: 80; display: block; overflow-y: auto; overscroll-behavior: contain; } .primary-nav.is-open { transform: none; } .primary-nav__list { flex-direction: column; align-items: stretch; gap: 0; } .primary-nav__list > li { border-bottom: 1px solid var(--line); } .primary-nav__list a { display: flex; align-items: center; gap: .5em; padding: 20px var(--gutter); font-size: 18px; color: var(--ink); text-transform: uppercase; white-space: normal; } .primary-nav__list a::after { display: none; } .primary-nav__list a[aria-current="page"] { background: var(--green-deep); color: #fff; } /* TAKE A SPIN renders as the green button, inset in its own row */ .primary-nav__cta { display: list-item; padding: 14px var(--header-gutter); } .primary-nav__cta .nav-cta { display: inline-flex; width: auto; height: 48px; color: #fff; box-shadow: var(--shadow-btn); } .primary-nav__more { display: list-item; } .primary-nav__more a { text-transform: none; } body.nav-open { overflow: hidden; padding-right: var(--sbw, 0px); } /* pad by the removed scrollbar width (main.js sets --sbw) so the bg doesn't shift */ body.nav-open .site-header { position: fixed; inset: 0 0 auto 0; z-index: 90; } /* the header goes position:fixed on open (leaves the flow) — pad the stage by the header height (= --header-h, 92) so the page doesn't jump UP behind the sliding menu */ body.nav-open #stage-wrap { margin-top: 92px; } /* the fixed header spans the now-scrollbar-less viewport, so keep the hamburger/X from sliding right by adding the removed scrollbar width to the navbar's right padding */ body.nav-open .navbar { padding-right: calc(var(--header-gutter) + var(--sbw, 0px)); } } /* ---------------- HEADER COLLAPSE — SPANISH (< 1440px) ---------------- Spanish nav labels ("Consejos para encontrar transporte sobrio" …) are much longer than English and overflow the desktop header below ~1440px (pushing the "Gira la ruleta" CTA off-screen). So Spanish collapses to the hamburger earlier. This MIRRORS the block above, scoped to .lang-es for the 1200–1439 band only (< 1200 is already covered there). Keep in sync with the main collapse block if it changes. */ @media (min-width: 1200px) and (max-width: 1439px) { body.lang-es .site-header { --header-gutter: 22px; --header-h: 92px; } body.lang-es .utility { display: none; } body.lang-es .navbar { height: var(--header-h); } body.lang-es .brand { width: 232px; } body.lang-es .nav-cta { display: none; } body.lang-es .nav-toggle { display: inline-flex; padding: 6px; } body.lang-es .nav-toggle__label { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; } body.lang-es .nav-toggle__box { width: 44px; height: 24px; } body.lang-es .nav-toggle__bar, body.lang-es .nav-toggle__bar::before, body.lang-es .nav-toggle__bar::after { height: 6px; border-radius: 3px; } body.lang-es .nav-toggle__bar::before { top: -10px; } body.lang-es .nav-toggle__bar::after { top: 10px; } body.lang-es .primary-nav { position: fixed; inset: var(--header-h) 0 0 0; background: var(--white); transform: translateX(100%); transition: transform .3s var(--ease); z-index: 80; display: block; overflow-y: auto; overscroll-behavior: contain; } body.lang-es .primary-nav.is-open { transform: none; } body.lang-es .primary-nav__list { flex-direction: column; align-items: stretch; gap: 0; } body.lang-es .primary-nav__list > li { border-bottom: 1px solid var(--line); } body.lang-es .primary-nav__list a { display: flex; align-items: center; gap: .5em; padding: 20px var(--gutter); font-size: 18px; color: var(--ink); text-transform: uppercase; white-space: normal; } body.lang-es .primary-nav__list a::after { display: none; } body.lang-es .primary-nav__list a[aria-current="page"] { background: var(--green-deep); color: #fff; } body.lang-es .primary-nav__cta { display: list-item; padding: 14px var(--header-gutter); } body.lang-es .primary-nav__cta .nav-cta { display: inline-flex; width: auto; height: 48px; color: #fff; box-shadow: var(--shadow-btn); } body.lang-es .primary-nav__more { display: list-item; } body.lang-es .primary-nav__more a { text-transform: none; } body.lang-es.nav-open { overflow: hidden; padding-right: var(--sbw, 0px); } body.lang-es.nav-open .site-header { position: fixed; inset: 0 0 auto 0; z-index: 90; } body.lang-es.nav-open #stage-wrap { margin-top: 92px; } body.lang-es.nav-open .navbar { padding-right: calc(var(--header-gutter) + var(--sbw, 0px)); } } /* ---------------- TRUE MOBILE (< 760px): body & footer reflow ---------------- */ @media (max-width: 759px) { /* footer is already a flex row (base); mobile just tightens the gutter and drops the lang toggle + copyright onto their own full-width rows */ .site-footer .frame { gap: 14px 22px; padding-block: 24px; padding-inline: var(--gutter); justify-content: flex-start; } .lang-toggle--footer { flex: 1 0 100%; } .copyright { flex: 1 0 100%; white-space: normal; } } /* Header logo scales with the viewport at 400px and below so it never crowds the hamburger; pinned at the 232px mobile size from 400px up. Mask aspect-ratio keeps the height in step. */ @media (max-width: 400px) { .brand { width: min(232px, 58vw); } }