/* * RideXpress -- Legacy/SEO global shell (header + footer), Design 2.0 * Wave 42 Track F * * WHAT THIS FILE IS: the complete visual system for templates/website/ * header.html and templates/website/footer.html -- the one piece of chrome * rendered on every page in the legacy family (~9,950 pages, reached via * index.html's two {% include %}s), plus footer.html's four additional * consumers (meta.html, google_airport.html, google_outstation.html, which * include the footer but carry their own inline header markup). * * WHY A SEPARATE FILE, AND WHY IT HARDCODES VALUES INSTEAD OF USING * var(--rx-*): tokens.css is a Design-2.0-only stylesheet and is NOT loaded * by index.html, so the tokens simply do not exist on these pages. Loading * tokens.css here was considered and rejected for a concrete reason, not * dogma: tokens.css carries `@media (prefers-color-scheme: dark)` blocks * that invert its surface/text tokens. The legacy family has no theme * system at all (index.html's never gets a data-theme attribute) and * a hardcoded `body{background-color:#000}` in style.css, so importing * those tokens would give a visitor with a dark OS preference a * dark-mode-inverted header sitting on top of a page that stayed exactly * as it was -- a worse split than the one this track exists to close. * Duplicating the literal token values is therefore deliberate and is the * same call, for the same reason, that static/css/legacy-design2-bridge.css * already made and documented in Wave 41 Track C. * * Every value below is copied verbatim from static/design-system/tokens.css * (light theme). Source of truth for the numbers is that file; this is a * transcription, not a second palette: * --rx-color-brand #C9A227 --rx-color-ink #132435 * --rx-color-brand-strong #7A5F09 --rx-color-ink-soft #3A4C5E * --rx-color-brand-soft #F4E9C8 --rx-color-text-muted #5F6E7A * --rx-color-border #E2E0EB --rx-color-surface-alt #F7F6F3 * --rx-color-dark-surface #1C2B39 --rx-color-dark-surface-2 #14212C * --rx-color-text-on-dark #F5FAFF --*-on-dark-muted #B7C2CC * --rx-color-success #0A7A47 --rx-color-focus-ring #7A5F09 * fonts: 'Space Grotesk' (display) / 'Inter' (body) -- already loaded by * index.html's own Google Fonts CSS2 request (Wave 41 Track C), so this * file adds no font request of its own. * * NAMESPACE: every selector is `.rxs-*` ("RideXpress shell"). Verified to * collide with nothing: neither style.css, bootstrap.min.css, * legacy-design2-bridge.css, nor the design-system files define any `rxs-` * class. The old shell classes (.header/.navbar/.footer-area/.logoheader * and friends) are no longer emitted by header.html/footer.html; their * rules in style.css are left in place untouched because 404.html and the * three Google-Ads landing pages still render some of them. */ /* ============================================================ 0. Shell-level custom properties ============================================================ --rx-header-height is a deliberate cross-track contract, not an implementation detail: Tracks B/C/D are redesigning templates that render *underneath* this header and may need to offset against it. Read it, never assume a pixel value. It is redeclared (not recalculated) at the nav-collapse breakpoint below, and both the fixed header bar and its in-flow spacer are sized from this one property, so the two can never drift apart. */ :root { --rx-header-height: 76px; /* Sits above page content and above the three floating action buttons (z-index 100 in index.html), but deliberately BELOW the floating enquiry modal (z-index 200 in index.html) so that modal still covers the header when open, as it does today. */ --rx-header-z: 150; } /* Anchor targets must not land underneath the fixed header. index.html's own booking widget anchor (#bookingpart) and every in-page jump link on the ~9,950-page family are covered by this one rule. Scroll offsetting only -- it changes no layout, no box, and nothing about a page that is never scrolled to an anchor. */ [id] { scroll-margin-top: calc(var(--rx-header-height) + 8px); } /* ============================================================ 1. Header shell ============================================================ position:fixed, NOT position:sticky. This is not a style preference: style.css sets `body,html{overflow-x:hidden}`, which makes a scroll container, which makes `position:sticky` on a child of a no-op. Verified empirically in a real browser on /airport-taxi before choosing this approach (a sticky header scrolled straight off screen at scrollY 600). Fixing the overflow rule instead would mean editing a global layout declaration that all ~9,950 pages depend on -- far outside what a chrome redesign should risk. The `.rxs-header__spacer` immediately after the bar reserves exactly the height the bar no longer occupies in flow, so page layout below the header is byte-for-byte where it was before this change. Both read --rx-header-height, so they cannot desynchronise. This also replaces the previous behaviour, which was NOT a sticky header: static/js/main.js adds Bootstrap's `.fixed-top` to `.navbar` once the page is scrolled past 50px, so the header used to sit in flow, then abruptly leave flow mid-scroll and yank the page content up by its own height. That JS now matches nothing (this markup no longer carries a `.navbar` class) and is inert; the header is simply always fixed, with no jump at any scroll position. */ .rxs-header { position: fixed; top: 0; left: 0; right: 0; height: var(--rx-header-height); z-index: var(--rx-header-z); background: #FFFFFF; border-bottom: 1px solid #E2E0EB; font-family: 'Inter', sans-serif; } .rxs-header__spacer { height: var(--rx-header-height); flex: none; } .rxs-header__inner { max-width: 1200px; height: 100%; margin: 0 auto; padding: 0 24px; display: flex; align-items: center; justify-content: space-between; gap: 16px; } /* ---------- Brand ---------- */ .rxs-brand { display: inline-flex; align-items: center; gap: 10px; flex: none; font-family: 'Space Grotesk', sans-serif; font-size: 22px; font-weight: 600; line-height: 1.2; letter-spacing: -0.01em; color: #132435; text-decoration: none; /* style.css's global `a{color:#dab024e7}` and the .logoheader text-transform:uppercase both had to be neutralised explicitly -- this element is an and the wordmark is a inside it. */ text-transform: none; } .rxs-brand:hover, .rxs-brand:focus { color: #132435; } .rxs-brand__mark { display: block; flex: none; color: #132435; } .rxs-brand__mark circle { transition: transform 250ms cubic-bezier(0.2, 0, 0, 1); transform-origin: 36px 50px; } .rxs-brand__word { display: inline-block; white-space: nowrap; } @media (prefers-reduced-motion: no-preference) { .rxs-brand:hover .rxs-brand__mark circle { transform: scale(1.14); } } /* ---------- Primary navigation (desktop) ---------- */ .rxs-nav { display: flex; align-items: center; gap: 4px; margin: 0 auto 0 32px; } .rxs-nav__list { display: flex; align-items: center; gap: 2px; margin: 0; padding: 0; list-style: none; } .rxs-nav__item { position: relative; } .rxs-nav__link { position: relative; display: inline-flex; align-items: center; gap: 5px; padding: 8px 12px; border: none; background: none; font-family: 'Inter', sans-serif; font-size: 14px; font-weight: 500; line-height: 1.4; letter-spacing: 0.005em; white-space: nowrap; color: #3A4C5E; text-decoration: none; border-radius: 8px; cursor: pointer; transition: color 150ms cubic-bezier(0.2, 0, 0, 1), background-color 150ms cubic-bezier(0.2, 0, 0, 1); } /* The underline indicator is a pseudo-element that scales from the centre rather than a border that appears/disappears -- no layout shift on hover, and the same "grow from the middle" motion the Design 2.0 nav uses. */ .rxs-nav__link::after { content: ""; position: absolute; left: 12px; right: 12px; bottom: 2px; height: 2px; border-radius: 2px; background: #C9A227; transform: scaleX(0); transform-origin: center; transition: transform 150ms cubic-bezier(0.05, 0.7, 0.1, 1); } .rxs-nav__link:hover, .rxs-nav__link:focus-visible { color: #132435; background: #F7F6F3; } .rxs-nav__link:hover::after { transform: scaleX(1); } .rxs-nav__link.is-current { color: #132435; font-weight: 600; } .rxs-nav__link.is-current::after { transform: scaleX(1); } @media (prefers-reduced-motion: reduce) { .rxs-nav__link::after { transition: none; } } /* ---------- Services menu (disclosure) ---------- */ .rxs-menu__chevron { display: block; flex: none; transition: transform 150ms cubic-bezier(0.2, 0, 0, 1); } .rxs-nav__link[aria-expanded="true"] { color: #132435; background: #F7F6F3; } .rxs-nav__link[aria-expanded="true"] .rxs-menu__chevron { transform: rotate(180deg); } .rxs-menu__panel { position: absolute; top: calc(100% + 6px); left: 0; min-width: 248px; margin: 0; padding: 8px; list-style: none; background: #FFFFFF; border: 1px solid #E2E0EB; border-radius: 12px; box-shadow: 0 0 15px rgba(0, 0, 0, 0.17); z-index: 1; /* Closed state. Kept out of the tab order while invisible (visibility + pointer-events), the same contract display:none gave, but with a real transition -- the legacy menu popped in and out with no state continuity and, worse, opened on :hover only, which is unusable on touch. */ opacity: 0; transform: translateY(-6px); visibility: hidden; pointer-events: none; transition: opacity 150ms cubic-bezier(0.2, 0, 0, 1), transform 150ms cubic-bezier(0.2, 0, 0, 1), visibility 0s linear 150ms; } .rxs-menu.is-open .rxs-menu__panel { opacity: 1; transform: none; visibility: visible; pointer-events: auto; transition: opacity 150ms cubic-bezier(0.05, 0.7, 0.1, 1), transform 150ms cubic-bezier(0.05, 0.7, 0.1, 1), visibility 0s linear 0s; } @media (prefers-reduced-motion: reduce) { .rxs-menu__panel, .rxs-menu.is-open .rxs-menu__panel { transition: none; } } .rxs-menu__link { display: block; padding: 10px 12px; border-radius: 8px; font-family: 'Inter', sans-serif; font-size: 14px; font-weight: 500; line-height: 1.4; color: #3A4C5E; text-decoration: none; transition: color 150ms cubic-bezier(0.2, 0, 0, 1), background-color 150ms cubic-bezier(0.2, 0, 0, 1); } .rxs-menu__link:hover, .rxs-menu__link:focus-visible { color: #132435; background: #F7F6F3; } .rxs-menu__link.is-current { color: #132435; font-weight: 600; background: #F4E9C8; } /* ---------- Header actions ---------- */ .rxs-actions { display: flex; align-items: center; gap: 10px; flex: none; } /* A real hierarchy fix, not a restyle: the legacy header rendered "Login" and the phone number as two identical gold pill buttons competing for the same attention. For a taxi business the phone call is the conversion; an account login is a utility. Login is now a quiet secondary control and the phone number is the single filled CTA -- the "exactly one brand-gold use per screen" rule tokens.css already states. Neither link, nor either URL, changed. */ .rxs-login { display: inline-flex; align-items: center; gap: 6px; padding: 9px 14px; font-family: 'Inter', sans-serif; font-size: 14px; font-weight: 500; line-height: 1; color: #3A4C5E; text-decoration: none; background: none; border: 1px solid #E2E0EB; border-radius: 999px; white-space: nowrap; transition: color 150ms cubic-bezier(0.2, 0, 0, 1), border-color 150ms cubic-bezier(0.2, 0, 0, 1), background-color 150ms cubic-bezier(0.2, 0, 0, 1); } .rxs-login:hover, .rxs-login:focus-visible { color: #132435; background: #F7F6F3; border-color: #132435; } .rxs-call { display: inline-flex; align-items: center; gap: 8px; padding: 11px 18px; font-family: 'Inter', sans-serif; font-size: 14px; font-weight: 600; line-height: 1; letter-spacing: 0.01em; font-variant-numeric: tabular-nums; /* --rx-color-cta-text: the required label colour on a gold fill. White-on-gold measures 2.98:1 and fails AA outright -- tokens.css documents this explicitly and Wave 41 Track F fixed the same defect on the booking widget's active tab. */ color: #132435; background: #C9A227; border: none; border-radius: 999px; text-decoration: none; white-space: nowrap; box-shadow: 0 1px 2px rgba(0, 0, 0, 0.06); transition: background-color 250ms cubic-bezier(0.2, 0, 0, 1), box-shadow 250ms cubic-bezier(0.2, 0, 0, 1), transform 150ms cubic-bezier(0.2, 0, 0, 1); } .rxs-call:hover, .rxs-call:focus-visible { background: #D9B43A; color: #132435; } .rxs-call__icon { display: block; flex: none; } @media (prefers-reduced-motion: no-preference) { .rxs-call:hover { transform: translateY(-1px); box-shadow: 0 6px 16px rgba(19, 36, 53, 0.18); } .rxs-call:active { transform: translateY(0) scale(0.98); box-shadow: 0 1px 2px rgba(0, 0, 0, 0.06); } } /* ---------- Burger ---------- */ .rxs-burger { display: none; align-items: center; justify-content: center; width: 44px; height: 44px; padding: 0; border: 1px solid #E2E0EB; border-radius: 10px; background: #FFFFFF; color: #132435; cursor: pointer; flex: none; transition: background-color 150ms cubic-bezier(0.2, 0, 0, 1), border-color 150ms cubic-bezier(0.2, 0, 0, 1); } .rxs-burger:hover { background: #F7F6F3; border-color: #132435; } .rxs-burger__icon { display: block; } .rxs-burger__icon .rxs-burger__close { display: none; } .rxs-burger[aria-expanded="true"] .rxs-burger__open { display: none; } .rxs-burger[aria-expanded="true"] .rxs-burger__close { display: block; } /* ---------- Focus rings ---------- Legacy style.css carries a blanket `a,a:active,a:focus,a:hover{outline:0}` reset. legacy-design2-bridge.css already had to use !important to beat it for accessibility-critical rings (see that file's own note on the preload-then-swap load-order race); the same applies here, for the same reason, scoped to this shell's own controls only. */ .rxs-brand:focus-visible, .rxs-nav__link:focus-visible, .rxs-menu__link:focus-visible, .rxs-login:focus-visible, .rxs-call:focus-visible, .rxs-burger:focus-visible, .rxs-drawer__link:focus-visible, .rxs-skip:focus-visible { outline: 2px solid #7A5F09 !important; outline-offset: 2px !important; } /* ---------- Skip link ---------- Zero skip-link existed anywhere on the legacy family (grepped before adding). With a 13-item nav on every one of ~9,950 pages, a keyboard or screen-reader visitor had to tab through the entire nav on every single page load to reach the content. Visually hidden until focused. */ .rxs-skip { position: absolute; left: 16px; top: -100px; z-index: calc(var(--rx-header-z) + 1); padding: 12px 18px; background: #132435; color: #FFFFFF; font-family: 'Inter', sans-serif; font-size: 14px; font-weight: 600; border-radius: 0 0 10px 10px; text-decoration: none; transition: top 150ms cubic-bezier(0.05, 0.7, 0.1, 1); } .rxs-skip:focus { top: 0; color: #FFFFFF; } /* ============================================================ 2. Mobile drawer ============================================================ The legacy mobile menu was a Bootstrap collapse capped at `max-height:220px` with `overflow-y:auto` -- 13 links and 2 buttons crammed into a 220px scroll box, which is the single worst usability defect in the old shell and the reason this nav needed rethinking rather than re-skinning. Replaced with a full-height sheet: grouped sections, 44px+ targets, its own scroll, a dismiss scrim, and the CTAs pinned where a thumb reaches them. */ .rxs-drawer { position: fixed; top: var(--rx-header-height); right: 0; bottom: 0; width: min(380px, 100%); z-index: var(--rx-header-z); display: flex; flex-direction: column; background: #FFFFFF; border-left: 1px solid #E2E0EB; box-shadow: 0 0 15px rgba(0, 0, 0, 0.17); overflow-y: auto; overscroll-behavior: contain; -webkit-overflow-scrolling: touch; transform: translateX(100%); visibility: hidden; pointer-events: none; transition: transform 250ms cubic-bezier(0.3, 0, 0.8, 0.15), visibility 0s linear 250ms; } .rxs-shell.is-nav-open .rxs-drawer { transform: none; visibility: visible; pointer-events: auto; transition: transform 250ms cubic-bezier(0.05, 0.7, 0.1, 1), visibility 0s linear 0s; } .rxs-scrim { position: fixed; inset: 0; z-index: calc(var(--rx-header-z) - 1); background: rgba(19, 36, 53, 0.5); opacity: 0; visibility: hidden; pointer-events: none; transition: opacity 250ms cubic-bezier(0.2, 0, 0, 1), visibility 0s linear 250ms; } .rxs-shell.is-nav-open .rxs-scrim { opacity: 1; visibility: visible; pointer-events: auto; transition: opacity 250ms cubic-bezier(0.2, 0, 0, 1), visibility 0s linear 0s; } @media (prefers-reduced-motion: reduce) { .rxs-drawer, .rxs-shell.is-nav-open .rxs-drawer, .rxs-scrim, .rxs-shell.is-nav-open .rxs-scrim { transition: none; } } .rxs-drawer__body { padding: 8px 20px 24px; } .rxs-drawer__group { padding: 12px 0; border-bottom: 1px solid #E2E0EB; } .rxs-drawer__group:last-of-type { border-bottom: none; } .rxs-drawer__label { margin: 12px 0 4px; font-family: 'Inter', sans-serif; font-size: 11px; font-weight: 700; letter-spacing: 0.09em; text-transform: uppercase; color: #5F6E7A; } .rxs-drawer__list { margin: 0; padding: 0; list-style: none; } .rxs-drawer__link { display: flex; align-items: center; min-height: 48px; padding: 8px 10px; border-radius: 10px; font-family: 'Inter', sans-serif; font-size: 16px; font-weight: 500; line-height: 1.4; color: #132435; text-decoration: none; transition: background-color 150ms cubic-bezier(0.2, 0, 0, 1), color 150ms cubic-bezier(0.2, 0, 0, 1); } .rxs-drawer__link:hover, .rxs-drawer__link:focus-visible { background: #F7F6F3; color: #132435; } .rxs-drawer__link.is-current { background: #F4E9C8; color: #132435; font-weight: 600; } .rxs-drawer__actions { display: grid; gap: 10px; padding: 20px 0 8px; border-top: 1px solid #E2E0EB; } .rxs-drawer__actions .rxs-call, .rxs-drawer__actions .rxs-login { justify-content: center; padding: 14px 18px; font-size: 15px; } /* ============================================================ 3. Responsive: nav collapse ============================================================ 1024px, not Bootstrap's old 992px `navbar-expand-lg` point. This nav carries 7 top-level items plus 2 action controls -- measured, it needs ~950px before items start crowding, so it collapses one design-system breakpoint (--rx-bp-lg) up rather than being squeezed at 992-1024px. */ @media (max-width: 1023.98px) { :root { --rx-header-height: 64px; } .rxs-nav { display: none; } .rxs-actions .rxs-login { display: none; } .rxs-burger { display: inline-flex; } .rxs-header__inner { padding: 0 16px; gap: 10px; } .rxs-brand { font-size: 19px; gap: 8px; } .rxs-brand__mark { width: 30px; height: 30px; } /* Wave 42 Track G: the padding below yields a 35px-tall control, and below 480px (where the label goes visually-hidden) a 35x35 one. This block is exactly the touch layout -- it is what hides the desktop nav and shows the burger -- and the burger it sits beside is 44x44, while the drawer's own links are 48px. So the header's single highest-intent action was the smallest tap target in the touch header. Measured live at 390/479/481/768/1023px: 35px tall at every one of them. min-height/min-width raise it to the 44px floor without touching the horizontal padding, so the pill keeps its proportions and simply lines up with the burger; justify-content only has an effect in the icon-only state below 480px, where the box is now wider than its content. This also lifts the drawer's own .rxs-call (43px) to 44px, since the drawer exists only inside this breakpoint. */ .rxs-call { padding: 10px 14px; font-size: 13px; min-height: 44px; min-width: 44px; justify-content: center; } } /* Below 480px the phone number's digits crowd the burger; the call CTA becomes an icon-only control with a real accessible name rather than being dropped (it is the highest-intent action in the header). */ @media (max-width: 479.98px) { .rxs-call { padding: 10px; gap: 0; } .rxs-call__label { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; } .rxs-brand { font-size: 17px; } } @media (min-width: 1024px) { .rxs-drawer, .rxs-scrim { display: none; } } /* ============================================================ 2.5 Dark mode -- header, nav, drawer only ============================================================ Wave 42 final-pass fix (Track J's acceptance audit found this live, unforced -- the host OS switched to dark mid-session and the split appeared on its own): this file's own header comment explains why it was BUILT light-only -- at the time Track F wrote it, no page loading this shell also loaded tokens.css, so a permanently-light header sat on a permanently-black legacy body (style.css's own body{background-color:#000}) and nothing ever asked for a theme change. That was correct when it was written. It stopped being correct once Tracks B and C (this same wave) put tokens.css on these same pages for the new hero/booking-widget/trust/ destination components -- those DO carry tokens.css's own `@media (prefers-color-scheme: dark)` block, so on a visitor whose OS prefers dark, the new components now flip to dark surfaces while this header stayed pinned light: a white header over a dark-inverted page, on ~8,795 pages. Fix: give the header/nav/drawer the same dark counterpart, so it flips in sync with the components already flipping beneath it, rather than fighting them. The footer is NOT touched here -- it was already built as a fixed-dark surface (#1C2B39, matching Design 2.0's marketing footer convention) regardless of OS theme, so it already reads correctly in both states and needs no variant. Every value below is transcribed verbatim from tokens.css's own `@media (prefers-color-scheme: dark)` block (static/design-system/ tokens.css) -- the same "transcription, not a second palette" discipline this file's own header comment already commits to for the light values above: --rx-color-surface #14212C --rx-color-border #2C3E4E --rx-color-surface-alt #1C2B39 --rx-color-text #F5FAFF --rx-color-text-muted #B7C2CC --rx-color-brand #C9A227 (unchanged across themes -- tokens.css's own "one brand token that never changes" -- so .rxs-call and the nav-link underline are NOT repeated below; they are already theme-correct as written). Focus-ring outline uses --rx-color-brand (#C9A227), not --rx-color-focus-ring (#7A5F09) -- the exact same substitution this file's own footer focus-ring rule already makes and documents (7A5F09 is tuned for text-on-light and fails WCAG 1.4.11 on a dark surface; C9A227 is verified 5.97:1 against #1C2B39 and does not change across themes). */ @media (prefers-color-scheme: dark) { .rxs-header { background: #14212C; border-bottom-color: #2C3E4E; } .rxs-brand, .rxs-brand:hover, .rxs-brand:focus, .rxs-brand__mark { color: #F5FAFF; } .rxs-nav__link { color: #B7C2CC; } .rxs-nav__link:hover, .rxs-nav__link:focus-visible, .rxs-nav__link.is-current, .rxs-nav__link[aria-expanded="true"] { color: #F5FAFF; } .rxs-nav__link:hover, .rxs-nav__link:focus-visible, .rxs-nav__link[aria-expanded="true"] { background: #1C2B39; } .rxs-menu__panel { background: #14212C; border-color: #2C3E4E; } .rxs-menu__link { color: #B7C2CC; } .rxs-menu__link:hover, .rxs-menu__link:focus-visible, .rxs-menu__link.is-current { color: #F5FAFF; } .rxs-menu__link:hover, .rxs-menu__link:focus-visible { background: #1C2B39; } .rxs-menu__link.is-current { background: rgba(201, 162, 39, 0.16); } .rxs-login { color: #B7C2CC; border-color: #2C3E4E; } .rxs-login:hover, .rxs-login:focus-visible { color: #F5FAFF; background: #1C2B39; border-color: #F5FAFF; } /* .rxs-call intentionally not repeated: --rx-color-cta-text (#132435) and the gold fill (#C9A227) are both theme-invariant per tokens.css, so the button is already correct as written above. */ .rxs-burger { border-color: #2C3E4E; background: #14212C; color: #F5FAFF; } .rxs-burger:hover { background: #1C2B39; border-color: #F5FAFF; } .rxs-brand:focus-visible, .rxs-nav__link:focus-visible, .rxs-menu__link:focus-visible, .rxs-login:focus-visible, .rxs-call:focus-visible, .rxs-burger:focus-visible, .rxs-drawer__link:focus-visible, .rxs-skip:focus-visible { outline-color: #C9A227 !important; } .rxs-drawer { background: #14212C; border-left-color: #2C3E4E; } .rxs-drawer__group { border-bottom-color: #2C3E4E; } .rxs-drawer__label { color: #B7C2CC; } .rxs-drawer__link { color: #F5FAFF; } .rxs-drawer__link:hover, .rxs-drawer__link:focus-visible { background: #1C2B39; color: #F5FAFF; } .rxs-drawer__link.is-current { background: rgba(201, 162, 39, 0.16); color: #F5FAFF; } .rxs-drawer__actions { border-top-color: #2C3E4E; } /* .rxs-skip intentionally not repeated: already dark-ink-on-white-text (#132435 background, #FFFFFF text), which reads correctly regardless of the surrounding page's theme -- it is a small, high-contrast, focus-only control, not part of the page's own surface. */ } /* ============================================================ 4. Footer ============================================================ */ .rxs-footer { background: #1C2B39; color: #F5FAFF; font-family: 'Inter', sans-serif; font-size: 15px; line-height: 1.65; } .rxs-footer__inner { max-width: 1200px; margin: 0 auto; padding: 0 24px; } .rxs-footer__top { display: grid; grid-template-columns: 1.6fr 1fr 1fr 1.2fr; gap: 40px; padding: 64px 0 48px; } .rxs-footer__brand { display: inline-flex; align-items: center; gap: 10px; font-family: 'Space Grotesk', sans-serif; font-size: 22px; font-weight: 600; letter-spacing: -0.01em; color: #FFFFFF; text-decoration: none; text-transform: none; } .rxs-footer__brand:hover { color: #FFFFFF; } .rxs-footer__brand .rxs-brand__mark { color: #FFFFFF; } .rxs-footer__blurb { margin: 16px 0 0; max-width: 42ch; color: #B7C2CC; font-size: 14px; line-height: 1.7; } /* ---------- Footer column headings ---------- style.css's global `h1..h6` rule sets 28px/700/white with a decorative double-underline pseudo-element on .footer-widget-title; all of that is restated explicitly here rather than inherited. */ .rxs-footer__heading { margin: 0 0 16px; font-family: 'Space Grotesk', sans-serif; font-size: 13px; font-weight: 700; line-height: 1.3; letter-spacing: 0.1em; text-transform: uppercase; color: #FFFFFF; } .rxs-footer__links { margin: 0; padding: 0; list-style: none; } .rxs-footer__links li + li { margin-top: 2px; } .rxs-footer__links a, .rxs-footer__contact a { display: inline-block; padding: 5px 0; font-size: 14.5px; line-height: 1.5; color: #B7C2CC; text-decoration: none; transition: color 150ms cubic-bezier(0.2, 0, 0, 1), transform 150ms cubic-bezier(0.2, 0, 0, 1); } .rxs-footer__links a:hover, .rxs-footer__contact a:hover { color: #FFFFFF; } @media (prefers-reduced-motion: no-preference) { .rxs-footer__links a:hover { transform: translateX(3px); } } .rxs-footer__contact { margin: 0; padding: 0; list-style: none; } .rxs-footer__contact li { display: flex; align-items: flex-start; gap: 12px; margin-bottom: 10px; color: #B7C2CC; font-size: 14.5px; } .rxs-footer__contact-icon { flex: none; width: 32px; height: 32px; border-radius: 999px; background: rgba(201, 162, 39, 0.16); color: #C9A227; display: flex; align-items: center; justify-content: center; margin-top: 1px; } .rxs-footer__phones { display: flex; flex-wrap: wrap; align-items: center; gap: 2px 10px; } .rxs-footer__phones a { padding: 3px 0; font-variant-numeric: tabular-nums; } /* ---------- Social ---------- */ .rxs-footer__social { display: flex; flex-wrap: wrap; gap: 10px; margin: 24px 0 0; padding: 0; list-style: none; } .rxs-footer__social a { display: flex; align-items: center; justify-content: center; width: 40px; height: 40px; border-radius: 999px; border: 1px solid rgba(245, 250, 255, 0.18); color: #B7C2CC; text-decoration: none; transition: background-color 150ms cubic-bezier(0.2, 0, 0, 1), border-color 150ms cubic-bezier(0.2, 0, 0, 1), color 150ms cubic-bezier(0.2, 0, 0, 1); } .rxs-footer__social a:hover { background: #C9A227; border-color: #C9A227; color: #132435; } /* ---------- Newsletter strip ---------- Was a cramped fourth column; now a full-width band so the input has room to be a real 48px-tall control. Same field id (#subemail), same submit id (#save_subscribe), same aria-label, same AJAX handler -- only the layout changed. */ .rxs-footer__news { display: grid; grid-template-columns: 1fr minmax(300px, 460px); align-items: center; gap: 24px 40px; padding: 28px 0; border-top: 1px solid rgba(245, 250, 255, 0.12); } .rxs-footer__news-title { margin: 0; font-family: 'Space Grotesk', sans-serif; font-size: 18px; font-weight: 600; line-height: 1.3; color: #FFFFFF; } .rxs-footer__news-sub { margin: 4px 0 0; font-size: 14px; color: #B7C2CC; } .rxs-footer__news-form { display: flex; gap: 10px; } .rxs-footer__news-input { flex: 1 1 auto; min-width: 0; height: 48px; padding: 0 16px; font-family: 'Inter', sans-serif; font-size: 15px; color: #132435; background: #FFFFFF; border: 1px solid transparent; border-radius: 10px; box-shadow: none; transition: border-color 150ms cubic-bezier(0.2, 0, 0, 1), box-shadow 150ms cubic-bezier(0.2, 0, 0, 1); } .rxs-footer__news-input::placeholder { color: #5F6E7A; } .rxs-footer__news-input:focus { outline: none; border-color: #C9A227; box-shadow: 0 0 0 3px rgba(201, 162, 39, 0.35); } .rxs-footer__news-btn { flex: none; display: inline-flex; align-items: center; gap: 8px; height: 48px; padding: 0 22px; font-family: 'Inter', sans-serif; font-size: 14px; font-weight: 600; letter-spacing: 0.01em; color: #132435; background: #C9A227; border: none; border-radius: 10px; cursor: pointer; transition: background-color 250ms cubic-bezier(0.2, 0, 0, 1), transform 150ms cubic-bezier(0.2, 0, 0, 1); } .rxs-footer__news-btn:hover { background: #D9B43A; } @media (prefers-reduced-motion: no-preference) { .rxs-footer__news-btn:active { transform: scale(0.98); } } /* ---------- Legal strip ---------- Replaces the legacy `.copyright` bar, which carried a decorative gold clip-path wedge (a polygon slicing across half the bar) and a 5px gold bottom border -- the most dated device in the old shell and the one thing that made a legacy page unmistakably not the same product as /about. */ .rxs-footer__legal { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px 24px; padding: 20px 0 28px; border-top: 1px solid rgba(245, 250, 255, 0.12); } .rxs-footer__copyright { margin: 0; font-size: 13.5px; color: #B7C2CC; } .rxs-footer__copyright a { color: #B7C2CC; text-decoration: none; } .rxs-footer__copyright a:hover { color: #FFFFFF; } .rxs-footer__legal-links { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 20px; margin: 0; padding: 0; list-style: none; } .rxs-footer__legal-links a { font-size: 13.5px; color: #B7C2CC; text-decoration: none; transition: color 150ms cubic-bezier(0.2, 0, 0, 1); } .rxs-footer__legal-links a:hover { color: #FFFFFF; } /* Focus rings on the fixed-dark footer surface. --rx-color-focus-ring (#7A5F09) is a dark gold tuned for text-on-light and measures under the 3:1 WCAG 1.4.11 floor against #1C2B39; --rx-color-brand (#C9A227) is the one brand token that never changes across themes and tokens.css records it at 5.97:1 against this exact surface. Same reasoning, same value, as marketing-patterns.css's own footer focus rule. */ .rxs-footer a:focus-visible, .rxs-footer button:focus-visible, .rxs-footer input:focus-visible { outline: 2px solid #C9A227 !important; outline-offset: 2px !important; color: #FFFFFF; } /* ---------- Footer responsive ---------- */ @media (max-width: 1023.98px) { .rxs-footer__top { grid-template-columns: 1fr 1fr; gap: 32px; padding: 48px 0 32px; } .rxs-footer__brand-col { grid-column: 1 / -1; } .rxs-footer__news { grid-template-columns: 1fr; gap: 16px; } } @media (max-width: 639.98px) { .rxs-footer__inner { padding: 0 20px; } .rxs-footer__top { grid-template-columns: 1fr; gap: 28px; padding: 40px 0 24px; } .rxs-footer__news-form { flex-direction: column; } .rxs-footer__news-btn { justify-content: center; } .rxs-footer__legal { justify-content: flex-start; } }