/* ============================================================ GuyWay — Site v2 Tier-1 design system. Import AFTER tokens.css. ============================================================ */ /* @font-face declarations live in tokens.css, which is inlined into and runs first. They were previously duplicated here (pointing at the full OTFs) and would have overridden the inlined subset declarations because site2.css loads after tokens.css — which means the browser would re-fetch the unsubsetted OTFs and undo the font-subset perf win. Removed. */ /* ---------- Reset ---------- */ *, *::before, *::after { box-sizing: border-box; } html, body { margin: 0; padding: 0; } html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; text-size-adjust: 100%; } body { font-family: "GT Walsheim", "GT Walsheim Fallback", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif; color: #011E13; background: #F7F7F2; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; text-rendering: optimizeLegibility; line-height: 1.5; font-feature-settings: "ss01" on, "kern" on; } img, svg, video { display: block; max-width: 100%; } a { color: inherit; text-decoration: none; } button { font: inherit; cursor: pointer; border: 0; background: transparent; color: inherit; padding: 0; } h1, h2, h3, h4, h5, h6, p { margin: 0; } ul, ol { margin: 0; padding: 0; list-style: none; } input, textarea, select { font: inherit; color: inherit; } :focus-visible { outline: 3px solid #EAFF68; outline-offset: 3px; border-radius: 6px; } section[id] { scroll-margin-top: 96px; } /* ---------- Tokens shim (so pages that only load this CSS still work) ---------- */ :root { --gw-yellow: #EAFF68; --gw-yellow-soft: #F6FFB3; --gw-yellow-dark: #C7DC56; --gw-charcoal: #011E13; --gw-charcoal-800: #0A2C1F; --gw-charcoal-700: #16402F; --gw-charcoal-600: #27594A; --gw-charcoal-500: #45796A; --gw-charcoal-400: #739A8D; --gw-charcoal-300: #A9C1B8; --gw-charcoal-200: #D2DFDA; --gw-charcoal-100: #E8EFEC; --gw-charcoal-050: #F3F7F5; --gw-lavender: #DADDEF; --gw-lavender-50: #F6F7FB; --gw-mint: #61DDAA; --gw-lime: #D5EE37; --gw-sun: #FFE700; --gw-coral: #FF6742; --gw-paper: #F7F7F2; --gw-paper-2: #EFEFE8; --ink: var(--gw-charcoal); --ink-2: var(--gw-charcoal-600); --ink-3: var(--gw-charcoal-500); --rule: rgba(1, 30, 19, 0.10); --rule-strong: rgba(1, 30, 19, 0.18); --radius-sm: 10px; --radius-md: 16px; --radius-lg: 24px; --radius-xl: 32px; --radius-pill: 999px; --ease-out: cubic-bezier(0.2, 0.7, 0.1, 1); --ease-std: cubic-bezier(0.4, 0, 0.2, 1); --dur-fast: 160ms; --dur-base: 260ms; --dur-slow: 420ms; --container: 1400px; --gutter: clamp(20px, 5vw, 80px); --nav-h: 72px; } /* ---------- Utilities ---------- */ .container { max-width: var(--container); margin: 0 auto; padding-left: var(--gutter); padding-right: var(--gutter); } .container--narrow { max-width: 960px; } .container--mid { max-width: 1180px; } .eyebrow { display: inline-flex; align-items: center; gap: 10px; font-size: 12px; font-weight: 600; letter-spacing: 0.14em; text-transform: uppercase; color: var(--ink-2); } .eyebrow::before { content: ""; width: 10px; height: 10px; background: var(--gw-yellow); border-radius: 2px; display: inline-block; } .eyebrow--light { color: rgba(255, 255, 255, 0.7); } .eyebrow--light::before { background: var(--gw-yellow); } .eyebrow--bare::before { display: none; } .hl { background: var(--gw-yellow); color: var(--gw-charcoal); padding: 0.02em 0.28em; border-radius: 0.18em; box-decoration-break: clone; -webkit-box-decoration-break: clone; } .dark-section .hl, .hl--text { background: transparent; color: var(--gw-yellow); padding: 0; } .strong { font-weight: 600; color: var(--ink); } .mono { font-family: ui-monospace, "SF Mono", Menlo, Consolas, monospace; letter-spacing: 0.02em; } .sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; } /* Animated counters (`` / any `[data-count]`) — site2.js eases the rendered text from 0 up to the target value over ~1.4 s on viewport entry. Without these rules the digit count varies as the value grows (e.g. 99 → 100), each digit width change reflows the surrounding line, and Lighthouse charges the difference to CLS. Tabular-nums forces every digit to the same advance width, and a generous min-width reserves the slot so the final value can't push siblings around either. Forensic data: the homepage CLS budget was 0.251; ~0.085 of that was 14 micro-shifts in a 250 ms window during the wl-count animation (Puppeteer trace, 2026-04-25). This rule eliminates them. */ .wl-count, [data-count] { font-variant-numeric: tabular-nums; display: inline-block; min-width: 4ch; text-align: right; } /* Entrance reveal — content is visible by default. The fade-up is a one-shot CSS animation that runs on element creation, no JS gate. Previously this was opacity:0 + transition, flipped to opacity:1 by an IntersectionObserver in site2.js. site2.js loads `afterInteractive`, so on real iOS over the 700 KB+ JS payload, hydration delayed reveal by 6-8s and below-fold sections appeared as solid blank cream during that window (real-iPhone screen recording, 2026-04-26). Pure CSS removes the gate. The `.is-in` class is retired. */ .reveal { animation: gw-reveal 0.7s var(--ease-out) both; } @keyframes gw-reveal { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: translateY(0); } } /* Staggered reveal — siblings cascade with 80ms offsets via per-child animation-delay. Caps at 9th+ child to avoid pathological delay chains on long lists. */ .reveal-stagger > * { animation: gw-reveal 0.7s var(--ease-out) both; } .reveal-stagger > :nth-child(1) { animation-delay: 0ms; } .reveal-stagger > :nth-child(2) { animation-delay: 80ms; } .reveal-stagger > :nth-child(3) { animation-delay: 160ms; } .reveal-stagger > :nth-child(4) { animation-delay: 240ms; } .reveal-stagger > :nth-child(5) { animation-delay: 320ms; } .reveal-stagger > :nth-child(6) { animation-delay: 400ms; } .reveal-stagger > :nth-child(7) { animation-delay: 480ms; } .reveal-stagger > :nth-child(8) { animation-delay: 560ms; } .reveal-stagger > :nth-child(n+9){ animation-delay: 640ms; } @media (prefers-reduced-motion: reduce) { .reveal, .reveal-stagger > * { animation: none !important; opacity: 1; transform: none; } html { scroll-behavior: auto; } } /* ---------- Type ---------- */ .display-xl { font-size: clamp(48px, 8.5vw, 128px); line-height: 0.92; letter-spacing: -0.035em; font-weight: 700; text-wrap: balance; } .display-lg { font-size: clamp(40px, 6.5vw, 96px); line-height: 0.95; letter-spacing: -0.03em; font-weight: 700; text-wrap: balance; } .display-md { font-size: clamp(32px, 4.8vw, 72px); line-height: 1; letter-spacing: -0.025em; font-weight: 700; text-wrap: balance; } .h1 { font-size: clamp(32px, 4vw, 56px); line-height: 1.02; letter-spacing: -0.022em; font-weight: 700; text-wrap: balance; } .h2 { font-size: clamp(26px, 3vw, 42px); line-height: 1.08; letter-spacing: -0.018em; font-weight: 700; text-wrap: balance; } .h3 { font-size: clamp(20px, 2.2vw, 28px); line-height: 1.15; letter-spacing: -0.012em; font-weight: 600; } .lede { font-size: clamp(17px, 1.4vw, 22px); line-height: 1.45; color: var(--ink-2); text-wrap: pretty; max-width: 64ch; } .lede--light { color: rgba(255, 255, 255, 0.72); } .small { font-size: 14px; line-height: 1.5; color: var(--ink-2); } em.italic { font-style: italic; } /* ---------- Buttons ---------- */ .btn { display: inline-flex; align-items: center; justify-content: center; gap: 10px; padding: 14px 26px; border-radius: var(--radius-pill); font-weight: 600; font-size: 16px; letter-spacing: -0.005em; transition: transform var(--dur-fast) var(--ease-out), background var(--dur-fast) var(--ease-out), color var(--dur-fast) var(--ease-out), box-shadow var(--dur-fast) var(--ease-out); white-space: nowrap; line-height: 1; min-height: 48px; } .btn svg { width: 16px; height: 16px; flex: none; } .btn--primary { background: var(--gw-yellow); color: var(--gw-charcoal); box-shadow: 0 0 0 1px rgba(1, 30, 19, 0.08); } .btn--primary:hover { background: var(--gw-charcoal); color: var(--gw-yellow); transform: translateY(-1px); box-shadow: 0 10px 28px rgba(1, 30, 19, 0.22); } .btn--dark { background: var(--gw-charcoal); color: #fff; } .btn--dark:hover { background: var(--gw-yellow); color: var(--gw-charcoal); transform: translateY(-1px); } .btn--ghost { background: transparent; color: inherit; box-shadow: inset 0 0 0 1px rgba(1, 30, 19, 0.25); } .btn--ghost:hover { background: var(--gw-charcoal); color: #fff; box-shadow: inset 0 0 0 1px var(--gw-charcoal); transform: translateY(-1px); } .dark-section .btn--ghost { box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.4); color: #fff; } .dark-section .btn--ghost:hover { background: #fff; color: var(--gw-charcoal); } .btn--sm { padding: 10px 18px; min-height: 40px; font-size: 14px; } .btn--lg { padding: 18px 32px; min-height: 56px; font-size: 17px; } .btn--block { width: 100%; } .arrow { display: inline-flex; width: 18px; height: 18px; align-items: center; justify-content: center; transition: transform var(--dur-fast) var(--ease-out); } .btn:hover .arrow { transform: translateX(3px); } /* Text link with arrow */ .link-arrow { display: inline-flex; align-items: center; gap: 8px; color: var(--ink); font-weight: 600; font-size: 16px; padding-bottom: 3px; border-bottom: 1.5px solid currentColor; transition: gap var(--dur-fast) var(--ease-out), color var(--dur-fast) var(--ease-out); } .link-arrow:hover { gap: 12px; } .dark-section .link-arrow { color: var(--gw-yellow); } /* Chips / pills */ .chip { display: inline-flex; align-items: center; gap: 8px; padding: 6px 12px; border-radius: var(--radius-pill); font-size: 13px; font-weight: 600; letter-spacing: 0.01em; background: rgba(1, 30, 19, 0.06); color: var(--ink); } .chip--yellow { background: var(--gw-yellow); color: var(--gw-charcoal); } .chip--dark { background: var(--gw-charcoal); color: #fff; } .dark-section .chip { background: rgba(255, 255, 255, 0.08); color: #fff; } .dark-section .chip--outline { background: transparent; box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.25); } .chip-dot { width: 6px; height: 6px; border-radius: 999px; background: var(--gw-yellow); } /* ---------- Header / Nav ---------- */ .site-nav { position: sticky; top: 0; z-index: 60; background: rgba(247, 247, 242, 0.85); backdrop-filter: saturate(160%) blur(14px); -webkit-backdrop-filter: saturate(160%) blur(14px); border-bottom: 1px solid transparent; transition: background var(--dur-fast), border-color var(--dur-fast); } .site-nav.is-scrolled { background: rgba(247, 247, 242, 0.94); border-bottom-color: var(--rule); } .site-nav__inner { display: flex; align-items: center; justify-content: space-between; gap: 24px; height: var(--nav-h); } .site-nav__brand { display: inline-flex; align-items: center; gap: 10px; font-weight: 700; letter-spacing: -0.01em; } .site-nav__brand img { height: 26px; width: auto; } .site-nav__links { display: none; align-items: center; gap: 4px; } @media (min-width: 980px) { .site-nav__links { display: inline-flex; } } .site-nav__links a { position: relative; padding: 8px 14px; border-radius: var(--radius-pill); font-size: 15px; font-weight: 500; color: var(--ink); transition: background var(--dur-fast), color var(--dur-fast); } .site-nav__links a:hover { background: rgba(1, 30, 19, 0.06); } .site-nav__links a.is-active { color: var(--gw-charcoal); } .site-nav__links a.is-active::after { content: ""; position: absolute; left: 14px; right: 14px; bottom: 2px; height: 2px; background: var(--gw-yellow); border-radius: 2px; } .site-nav__cta-group { display: flex; align-items: center; gap: 8px; } .site-nav__menu { display: inline-flex; align-items: center; justify-content: center; width: 44px; height: 44px; border-radius: 50%; background: transparent; color: var(--ink); } .site-nav__menu:hover { background: rgba(1, 30, 19, 0.06); } @media (min-width: 980px) { .site-nav__menu { display: none; } } /* Mobile drawer */ .nav-drawer { position: fixed; inset: 0; z-index: 80; display: none; } .nav-drawer.is-open { display: block; } .nav-drawer__scrim { position: absolute; inset: 0; background: rgba(1, 30, 19, 0.5); opacity: 0; animation: fadeIn 0.25s forwards; } .nav-drawer__panel { position: absolute; top: 0; right: 0; height: 100%; width: min(360px, 92vw); background: var(--gw-paper); padding: 20px 24px 40px; display: flex; flex-direction: column; gap: 12px; transform: translateX(20px); opacity: 0; animation: slideIn 0.3s var(--ease-out) forwards; box-shadow: -20px 0 60px rgba(0, 0, 0, 0.12); overflow-y: auto; } .nav-drawer__close { width: 44px; height: 44px; flex: 0 0 44px; aspect-ratio: 1 / 1; border-radius: 50%; background: rgba(1, 30, 19, 0.06); display: inline-flex; align-items: center; justify-content: center; align-self: flex-end; } .nav-drawer__group { padding-top: 16px; border-top: 1px solid var(--rule); } .nav-drawer__group h5 { font-size: 11px; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; color: var(--ink-3); margin-bottom: 8px; } /* Plain drawer links: block-level rows with a tight 4 px horizontal gutter so they align to the panel's text baseline. `:not(.btn)` keeps this rule from overriding the "Get the app" CTA at the bottom of the drawer — that one needs its .btn padding (14px 26px) + inline-flex + justify- content:center to render as a proper full-width pill. Without the exclusion, the CTA text left-aligns against a 4 px edge while the button stays 100% wide → visible dead space to the right. */ .nav-drawer a:not(.btn) { display: block; padding: 12px 4px; font-size: 18px; font-weight: 500; } .nav-drawer a:not(.btn):hover { color: var(--ink); } .nav-drawer .btn { margin-top: 12px; } @keyframes fadeIn { to { opacity: 1; } } @keyframes slideIn { to { transform: translateX(0); opacity: 1; } } /* ---------- Announce bar ---------- */ .announce-bar { background: var(--gw-charcoal); color: #fff; font-size: 13px; letter-spacing: 0.01em; } .announce-bar__inner { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 10px 0; } .announce-bar__msg { display: inline-flex; align-items: center; gap: 10px; } .announce-bar__msg .chip-dot { background: var(--gw-yellow); } .announce-bar__msg strong { font-weight: 600; color: var(--gw-yellow); } .announce-bar__links { display: inline-flex; align-items: center; gap: 16px; } .announce-bar__links a { opacity: 0.8; transition: opacity var(--dur-fast); } .announce-bar__links a:hover { opacity: 1; color: var(--gw-yellow); } @media (max-width: 720px) { .announce-bar__links { display: none; } } /* ---------- Footer ---------- */ .site-footer { background: var(--gw-charcoal); color: rgba(255, 255, 255, 0.7); padding: 80px 0 40px; margin-top: 0; } .site-footer__top { display: grid; grid-template-columns: 1.2fr repeat(4, 1fr); gap: 40px; padding-bottom: 48px; border-bottom: 1px solid rgba(255, 255, 255, 0.12); } @media (max-width: 960px) { .site-footer__top { grid-template-columns: 1fr 1fr; } } @media (max-width: 560px) { .site-footer__top { grid-template-columns: 1fr 1fr; gap: 28px 24px; } .site-footer__brand { grid-column: 1 / -1; } } .site-footer__brand img { height: 28px; width: auto; } .site-footer__brand p { margin-top: 16px; font-size: 14px; max-width: 28ch; color: rgba(255, 255, 255, 0.55); line-height: 1.5; } .site-footer h5 { color: #fff; font-weight: 600; font-size: 13px; letter-spacing: 0.1em; text-transform: uppercase; margin-bottom: 16px; } .site-footer ul li { margin-bottom: 10px; } .site-footer ul a { font-size: 14px; color: rgba(255, 255, 255, 0.65); transition: color var(--dur-fast); } .site-footer ul a:hover { color: var(--gw-yellow); } .site-footer__bottom { display: flex; justify-content: space-between; align-items: center; gap: 24px; flex-wrap: wrap; padding-top: 32px; font-size: 13px; } .site-footer__legal { display: inline-flex; flex-wrap: wrap; gap: 20px; } .site-footer__legal a:hover { color: var(--gw-yellow); } .site-footer__social { display: inline-flex; gap: 10px; } .site-footer__social a { width: 36px; height: 36px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; background: rgba(255, 255, 255, 0.08); transition: background var(--dur-fast); } .site-footer__social a:hover { background: var(--gw-yellow); color: var(--gw-charcoal); } .site-footer__stores img { height: 40px; width: auto; } /* ---------- Dark section ---------- */ .dark-section { background: var(--gw-charcoal); color: #fff; } .dark-section h1, .dark-section h2, .dark-section h3, .dark-section h4, .dark-section p { color: #fff; } .dark-section .text-muted { color: rgba(255, 255, 255, 0.65); } .dark-section .text-soft { color: rgba(255, 255, 255, 0.5); } .dark-section .eyebrow { color: rgba(255, 255, 255, 0.7); } /* ---------- Section rhythm ---------- */ .section { padding: clamp(64px, 9vw, 128px) 0; position: relative; } .section--tight { padding: clamp(48px, 6vw, 88px) 0; } .section-head { max-width: 780px; margin-bottom: clamp(32px, 5vw, 64px); } .section-head .eyebrow { margin-bottom: 16px; } .section-head h2 { margin-bottom: 18px; } /* ---------- Hero (home) ---------- */ .hero { position: relative; min-height: 78dvh; color: #fff; overflow: hidden; isolation: isolate; background: var(--gw-charcoal); } .hero__media { position: absolute; inset: 0; z-index: 0; } .hero__media img, .hero__media video { width: 100%; height: 100%; object-fit: cover; } .hero__scrim { position: absolute; inset: 0; z-index: 1; background: linear-gradient(180deg, rgba(1, 30, 19, 0.2) 0%, rgba(1, 30, 19, 0.55) 55%, rgba(1, 30, 19, 0.85) 100%), radial-gradient(80% 70% at 15% 90%, rgba(1, 30, 19, 0.6), transparent 70%); } .hero__inner { position: relative; z-index: 2; display: flex; flex-direction: column; justify-content: flex-end; min-height: 78dvh; padding-top: 72px; padding-bottom: 56px; gap: 28px; } .hero__eyebrow { display: inline-flex; align-items: center; gap: 10px; padding: 8px 14px; border-radius: var(--radius-pill); background: rgba(255, 255, 255, 0.08); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); font-size: 13px; font-weight: 500; letter-spacing: 0.02em; box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.12); } .hero__eyebrow .dot { width: 8px; height: 8px; border-radius: 999px; background: var(--gw-yellow); box-shadow: 0 0 0 4px rgba(234, 255, 104, 0.2); animation: pulse 2.4s infinite; } @keyframes pulse { 0%, 100% { box-shadow: 0 0 0 4px rgba(234, 255, 104, 0.2); } 50% { box-shadow: 0 0 0 8px rgba(234, 255, 104, 0.08); } } .hero h1 { color: #fff; font-size: clamp(44px, 9vw, 140px); line-height: 0.9; letter-spacing: -0.038em; font-weight: 700; max-width: 14ch; } .hero h1 em { color: var(--gw-yellow); font-style: italic; font-weight: 700; } .hero__grid { display: grid; grid-template-columns: 1.3fr 1fr; gap: 48px; align-items: flex-end; } @media (max-width: 900px) { .hero__grid { grid-template-columns: 1fr; } } .hero__sub { font-size: clamp(16px, 1.4vw, 20px); line-height: 1.4; color: rgba(255, 255, 255, 0.72); max-width: 46ch; } .hero__ctas { display: flex; gap: 12px; flex-wrap: wrap; margin-top: 24px; } .hero__meta { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 24px; padding-top: 24px; border-top: 1px solid rgba(255, 255, 255, 0.15); } .hero__meta .k { font-size: 11px; letter-spacing: 0.14em; text-transform: uppercase; color: rgba(255, 255, 255, 0.55); margin-bottom: 6px; } .hero__meta .v { font-size: 15px; color: #fff; font-weight: 500; line-height: 1.3; } .hero__meta .v strong { color: var(--gw-yellow); font-weight: 700; } /* ---------- Audience grid (Ride / Drive / Business) ---------- */ .audience-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; } @media (max-width: 900px) { .audience-grid { grid-template-columns: 1fr; } } .audience-card { position: relative; border-radius: var(--radius-lg); padding: 36px 32px 32px; min-height: 340px; display: flex; flex-direction: column; justify-content: space-between; gap: 16px; overflow: hidden; transition: transform 0.5s var(--ease-out), box-shadow 0.5s var(--ease-out); isolation: isolate; } /* Card hover: lift + subtle shadow + background zoom. Matches the motion language you see on the Uber / Lyft / Revel marketing sites — feels premium without being showy. Only applies on pointer-fine devices so mobile doesn't get a stuck hover state. */ @media (hover: hover) and (pointer: fine) { .audience-card:hover { transform: translateY(-6px); box-shadow: 0 24px 48px rgba(1, 30, 19, 0.12), 0 6px 12px rgba(1, 30, 19, 0.05); } .audience-card__media { transition: transform 0.6s cubic-bezier(0.2, 0.7, 0.1, 1); } .audience-card:hover .audience-card__media { transform: scale(1.04); } /* Nudge the inline arrow inside the CTA */ .audience-card:hover .audience-card__cta .arrow { transform: translateX(4px); } } @media (prefers-reduced-motion: reduce) { .audience-card, .audience-card__media, .audience-card__cta .arrow { transition: none !important; } .audience-card:hover { transform: none; } .audience-card:hover .audience-card__media { transform: none; } } .audience-card--compact { min-height: 0; justify-content: flex-start; gap: 28px; padding: 32px 28px 32px; } .audience-card__scrim { position: absolute; inset: 0; z-index: -1; background: linear-gradient(180deg, rgba(1, 30, 19, 0.1) 0%, rgba(1, 30, 19, 0.75) 100%); } .audience-card--light { background: #fff; color: var(--ink); box-shadow: inset 0 0 0 1px var(--rule); } .audience-card--dark { background: var(--gw-charcoal); color: #fff; } .audience-card--yellow { background: var(--gw-yellow); color: var(--gw-charcoal); } .audience-card--image { color: #fff; } .audience-card__top { display: flex; align-items: center; justify-content: space-between; gap: 12px; } .audience-card__num { font-size: 12px; letter-spacing: 0.14em; text-transform: uppercase; opacity: 0.7; font-weight: 600; } .audience-card__icon { width: 44px; height: 44px; border-radius: 12px; background: rgba(255, 255, 255, 0.1); display: inline-flex; align-items: center; justify-content: center; } .audience-card--light .audience-card__icon { background: var(--gw-paper-2); } .audience-card--yellow .audience-card__icon { background: rgba(1, 30, 19, 0.08); } .audience-card h3 { font-size: clamp(26px, 2.2vw, 34px); line-height: 1.05; letter-spacing: -0.018em; font-weight: 700; margin-bottom: 12px; } .audience-card p { font-size: 15px; line-height: 1.5; opacity: 0.8; } .audience-card__cta { display: inline-flex; align-items: center; gap: 8px; font-weight: 600; font-size: 15px; padding-top: 14px; border-top: 1px solid currentColor; opacity: 1; } .audience-card__cta .arrow { transition: transform var(--dur-fast); } .audience-card:hover .audience-card__cta .arrow { transform: translateX(4px); } /* ---------- Feature rows ---------- */ .feature-row { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(32px, 6vw, 96px); align-items: center; } @media (max-width: 900px) { .feature-row { grid-template-columns: 1fr; } } .feature-row--reverse > :first-child { order: 2; } @media (max-width: 900px) { .feature-row--reverse > :first-child { order: 0; } } .feature-row__media { position: relative; border-radius: var(--radius-lg); overflow: hidden; aspect-ratio: 4 / 5; background: var(--gw-charcoal-100); } .feature-row__media img { width: 100%; height: 100%; object-fit: cover; } /* Driver-polo safety hero: portrait source is slightly taller than the 4:5 container, so anchor the cover-crop to the top instead of centre so the driver's head stays in frame on every breakpoint. */ .feature-row__media img[src*="guyway-driver-yellow-polo"] { object-position: center top; } .feature-row__badge { position: absolute; top: 24px; left: 24px; background: rgba(255, 255, 255, 0.95); color: var(--ink); padding: 10px 16px; border-radius: var(--radius-pill); font-size: 13px; font-weight: 600; display: inline-flex; align-items: center; gap: 8px; box-shadow: 0 8px 24px rgba(0, 0, 0, 0.15); } .feature-row__body > * + * { margin-top: 20px; } .feature-row__body .lede { margin-top: 16px; } .feature-list { display: flex; flex-direction: column; gap: 20px; margin-top: 32px; } .feature-list li { display: grid; grid-template-columns: 32px 1fr; gap: 16px; align-items: flex-start; } .feature-list__icon { width: 32px; height: 32px; border-radius: 8px; background: var(--gw-yellow); color: var(--gw-charcoal); display: inline-flex; align-items: center; justify-content: center; flex: none; } .dark-section .feature-list__icon { background: var(--gw-yellow); color: var(--gw-charcoal); } .feature-list__title { font-size: 17px; font-weight: 600; margin-bottom: 4px; } .feature-list__desc { font-size: 15px; color: var(--ink-2); line-height: 1.5; } .dark-section .feature-list__desc { color: rgba(255, 255, 255, 0.65); } /* ---------- Metric / impact ---------- */ .metric-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; } @media (max-width: 960px) { .metric-grid { grid-template-columns: repeat(2, 1fr); } } .metric { background: #fff; border-radius: var(--radius-lg); padding: 32px 28px; box-shadow: inset 0 0 0 1px var(--rule); } .dark-section .metric { background: rgba(255, 255, 255, 0.04); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.08); color: #fff; } .metric__k { font-size: 12px; font-weight: 600; letter-spacing: 0.1em; text-transform: uppercase; color: var(--ink-3); } .dark-section .metric__k { color: rgba(255, 255, 255, 0.55); } .metric__v { font-size: clamp(40px, 5vw, 64px); font-weight: 700; letter-spacing: -0.03em; line-height: 1; margin-top: 16px; color: var(--ink); } .dark-section .metric__v { color: #fff; } .metric__v .u { font-size: 18px; font-weight: 500; color: var(--ink-3); margin-left: 4px; letter-spacing: 0; } .metric__n { font-size: 13px; color: var(--ink-2); margin-top: 12px; line-height: 1.45; } .dark-section .metric__n { color: rgba(255, 255, 255, 0.6); } /* ---------- Stat counter ---------- */ .stat-row { display: flex; flex-wrap: wrap; justify-content: space-evenly; align-items: flex-start; row-gap: 32px; padding: 32px 0; border-top: 1px solid rgba(255, 255, 255, 0.12); border-bottom: 1px solid rgba(255, 255, 255, 0.12); } .stat { display: flex; flex-direction: column; align-items: center; justify-content: flex-start; gap: 6px; text-align: center; flex: 0 0 auto; } @media (max-width: 720px) { .stat-row { justify-content: space-between; padding-left: 24px; padding-right: 24px; } .stat { flex-basis: calc(50% - 12px); align-items: flex-end; text-align: right; padding-inline-start: 0; } } .stat__v { font-size: clamp(36px, 4.5vw, 56px); font-weight: 700; letter-spacing: -0.025em; line-height: 1; color: var(--gw-yellow); font-variant-numeric: tabular-nums; } .stat__l { font-size: 13px; letter-spacing: 0.1em; text-transform: uppercase; color: rgba(255, 255, 255, 0.65); font-weight: 500; padding-inline-start: 0.1em; } /* ---------- Forms ---------- */ .form-field { display: flex; flex-direction: column; gap: 6px; } .form-field label { font-size: 12px; font-weight: 600; letter-spacing: 0.1em; text-transform: uppercase; color: var(--ink-3); } .form-field input, .form-field select, .form-field textarea { appearance: none; width: 100%; padding: 14px 16px; border-radius: var(--radius-sm); border: 1px solid var(--rule-strong); background: #fff; font-size: 16px; color: var(--ink); transition: border-color var(--dur-fast), box-shadow var(--dur-fast); } .form-field textarea { min-height: 120px; resize: vertical; } .form-field input:focus, .form-field select:focus, .form-field textarea:focus { outline: 0; border-color: var(--gw-charcoal); box-shadow: 0 0 0 3px rgba(234, 255, 104, 0.5); } .form-field input::placeholder, .form-field textarea::placeholder { color: var(--ink-3); } .form-grid-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; } @media (max-width: 640px) { .form-grid-2 { grid-template-columns: 1fr; } } /* Role toggle (segmented control) */ .role-toggle { display: inline-flex; padding: 4px; background: rgba(1, 30, 19, 0.06); border-radius: var(--radius-pill); position: relative; } .role-toggle button { padding: 10px 18px; border-radius: var(--radius-pill); font-size: 14px; font-weight: 600; color: var(--ink-2); transition: color var(--dur-fast); position: relative; z-index: 1; } .role-toggle button.is-active { color: var(--ink); } .role-toggle__slider { position: absolute; top: 4px; bottom: 4px; background: #fff; border-radius: var(--radius-pill); box-shadow: 0 2px 8px rgba(1, 30, 19, 0.08); transition: transform var(--dur-base) var(--ease-out), width var(--dur-base) var(--ease-out); z-index: 0; } /* Signup card (home hero inset / CTA section) */ .signup-card { background: #fff; border-radius: var(--radius-lg); padding: 32px; box-shadow: 0 24px 60px rgba(1, 30, 19, 0.12), inset 0 0 0 1px var(--rule); } /* When a form is switched into its "success" state the submit handler adds this class to the form body, which forces display:none past even an inline `display: flex` (which would otherwise beat the `[hidden]` UA rule on specificity). Belt-and-suspenders alongside the inline `style.display = 'none'` the JS also sets. */ [data-form-body].is-submitted-done { display: none !important; } /* ---------- Offline connection banner ---------- Injected by site2-forms.js when `navigator.onLine` is false. Fixed to the top of the viewport, over the header, so it's obvious but doesn't push content around (avoiding a layout shift every time the connection flips). Transitions in/out so the state change reads as calm, not alarming — no bright reds, just charcoal and a muted yellow pulse on the status dot. */ .offline-banner { position: fixed; top: 0; left: 0; right: 0; /* Above site-nav (z-index:60) because a lost connection warrants covering the nav for the brief window it's visible. */ z-index: 200; padding: 10px 20px; background: rgba(1, 30, 19, 0.96); color: #F7F7F2; font: 500 14px/1.3 var(--font-stack, 'GT Walsheim', system-ui, sans-serif); text-align: center; letter-spacing: 0.01em; box-shadow: 0 1px 0 rgba(234, 255, 104, 0.18), 0 6px 20px rgba(1, 30, 19, 0.3); transform: translateY(-100%); transition: transform 0.28s cubic-bezier(0.2, 0.8, 0.2, 1); pointer-events: none; } .offline-banner.is-visible { transform: translateY(0); pointer-events: auto; } .offline-banner__dot { display: inline-block; width: 8px; height: 8px; margin-right: 10px; border-radius: 999px; background: var(--gw-yellow, #EAFF68); box-shadow: 0 0 0 3px rgba(234, 255, 104, 0.22); animation: offline-dot-pulse 1.8s ease-in-out infinite; vertical-align: middle; transform: translateY(-1px); } @keyframes offline-dot-pulse { 0%, 100% { opacity: 1; } 50% { opacity: 0.35; } } @media (prefers-reduced-motion: reduce) { .offline-banner { transition: none; } .offline-banner__dot { animation: none; } } .signup-card__head { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 20px; } .signup-card__head h3 { font-size: 20px; font-weight: 700; letter-spacing: -0.01em; } /* ---------- FAQ ---------- */ .faq { border-top: 1px solid var(--rule); } .faq-row { border-bottom: 1px solid var(--rule); } .faq-row__q { width: 100%; display: flex; justify-content: space-between; align-items: flex-start; gap: 24px; padding: 22px 0; text-align: left; font-size: 17px; font-weight: 600; color: var(--ink); cursor: pointer; transition: color var(--dur-fast); } .faq-row__q:hover { color: var(--gw-charcoal-600); } .faq-row__q-icon { width: 28px; height: 28px; border-radius: 50%; background: var(--gw-paper-2); display: inline-flex; align-items: center; justify-content: center; flex: none; transition: transform var(--dur-base) var(--ease-out), background var(--dur-fast); } .faq-row.is-open .faq-row__q-icon { transform: rotate(45deg); background: var(--gw-yellow); } .faq-row__a { display: grid; grid-template-rows: 0fr; transition: grid-template-rows var(--dur-base) var(--ease-out); } .faq-row.is-open .faq-row__a { grid-template-rows: 1fr; } .faq-row__a > div { overflow: hidden; } .faq-row__a p { padding-bottom: 24px; font-size: 16px; line-height: 1.55; color: var(--ink-2); max-width: 72ch; } /* ---------- CTA band ---------- */ .cta-band { background: var(--gw-charcoal); color: #fff; padding: clamp(56px, 8vw, 96px) 0; position: relative; overflow: hidden; } .cta-band__inner { display: grid; grid-template-columns: 1.4fr 1fr; gap: 56px; align-items: end; } @media (max-width: 900px) { .cta-band__inner { grid-template-columns: 1fr; } } .cta-band h2 { font-size: clamp(36px, 5.5vw, 80px); line-height: 0.98; letter-spacing: -0.03em; font-weight: 700; color: #fff; } .cta-band h2 em { color: var(--gw-yellow); font-style: italic; } .cta-band__actions { display: flex; gap: 12px; flex-wrap: wrap; justify-content: flex-end; } @media (max-width: 900px) { .cta-band__actions { justify-content: flex-start; } } /* ---------- App download block ---------- */ .app-dl { display: inline-flex; flex-direction: column; gap: 14px; } .app-dl__btn:hover { background: #000; transform: translateY(-1px); } .dark-section .app-dl__btn { background: #fff; color: var(--gw-charcoal); } .dark-section .app-dl__btn:hover { background: var(--gw-yellow); } .app-dl__btn .os { font-size: 11px; text-transform: uppercase; letter-spacing: 0.08em; opacity: 0.7; } .app-dl__btn .store { font-size: 15px; font-weight: 600; } .app-dl__btn svg { width: 24px; height: 24px; } /* ---------- Cookie banner ---------- */ .cookie-banner { position: fixed; left: 20px; right: 20px; bottom: 20px; z-index: 90; max-width: 720px; margin: 0 auto; background: var(--gw-charcoal); color: #fff; border-radius: var(--radius-lg); padding: 20px 24px; display: flex; gap: 20px; align-items: center; flex-wrap: wrap; box-shadow: 0 30px 60px rgba(0, 0, 0, 0.25); transform: translateY(120%); opacity: 0; /* Faster slide-in/out on mobile so dismissal feels instant. The previous 500ms transition made users tap the buttons repeatedly thinking nothing happened. */ transition: transform 0.2s var(--ease-out), opacity 0.2s var(--ease-out); } .cookie-banner.is-visible { transform: translateY(0); opacity: 1; } .cookie-banner__body { flex: 1; min-width: 240px; font-size: 14px; line-height: 1.45; color: rgba(255, 255, 255, 0.75); } .cookie-banner__body strong { color: #fff; font-weight: 600; display: block; margin-bottom: 4px; font-size: 15px; } .cookie-banner__body a { color: var(--gw-yellow); } .cookie-banner__actions { display: flex; gap: 8px; } /* `touch-action: manipulation` removes the historical 300ms tap-delay on mobile browsers and makes click events fire immediately on tap. The buttons inside the banner ALSO get this so the user sees instant feedback. The :active state gives a clear "you tapped this" visual. */ .cookie-banner, .cookie-banner [data-cookie-action] { touch-action: manipulation; } .cookie-banner [data-cookie-action]:active { transform: scale(0.96); opacity: 0.85; transition: transform 0.05s ease-out, opacity 0.05s ease-out; } /* ---------- Page hero (secondary pages) ---------- */ .page-hero { position: relative; padding: clamp(80px, 12vw, 160px) 0 clamp(48px, 6vw, 96px); background: var(--gw-charcoal); color: #fff; overflow: hidden; isolation: isolate; } .page-hero--image { min-height: 560px; display: flex; align-items: flex-end; } .page-hero__media { position: absolute; inset: 0; z-index: -2; } .page-hero__media img { width: 100%; height: 100%; object-fit: cover; opacity: 0.55; } .page-hero__scrim { position: absolute; inset: 0; z-index: -1; background: linear-gradient(180deg, rgba(1, 30, 19, 0.2) 0%, rgba(1, 30, 19, 0.85) 100%); } .page-hero__top { display: flex; align-items: center; gap: 12px; margin-bottom: clamp(20px, 3vw, 40px); font-size: 13px; color: rgba(255, 255, 255, 0.7); letter-spacing: 0.05em; } .page-hero--light .page-hero__top { color: var(--ink-3); } .page-hero__top a:hover { color: var(--gw-yellow); } .page-hero h1 { font-size: clamp(40px, 7vw, 104px); line-height: 0.94; letter-spacing: -0.032em; font-weight: 700; color: #fff; max-width: 16ch; } .page-hero--light h1 { color: var(--ink); } .page-hero h1 em { color: var(--gw-yellow); font-style: italic; } .page-hero__sub { font-size: clamp(17px, 1.4vw, 22px); line-height: 1.4; color: rgba(255, 255, 255, 0.72); max-width: 56ch; margin-top: clamp(16px, 2vw, 24px); } .page-hero--light .page-hero__sub { color: var(--ink-2); } /* Breadcrumb */ .crumbs { display: inline-flex; align-items: center; gap: 8px; font-size: 13px; letter-spacing: 0.02em; } .crumbs a, .crumbs span { opacity: 0.7; } .crumbs a:hover { opacity: 1; color: var(--gw-yellow); } .crumbs .sep { opacity: 0.4; } /* ---------- Cards (generic) ---------- */ .card-base { background: #fff; border-radius: var(--radius-lg); padding: 32px; box-shadow: inset 0 0 0 1px var(--rule); transition: transform var(--dur-base) var(--ease-out), box-shadow var(--dur-base) var(--ease-out); } .card-base:hover { transform: translateY(-2px); box-shadow: 0 20px 40px rgba(1, 30, 19, 0.08), inset 0 0 0 1px var(--rule); } .card-base h4 { font-size: 20px; font-weight: 700; letter-spacing: -0.01em; margin-bottom: 10px; } .card-base p { font-size: 15px; color: var(--ink-2); line-height: 1.5; } /* ---------- Legal page ---------- */ .legal { background: var(--gw-paper); padding: clamp(48px, 8vw, 96px) 0; } .legal h1 { font-size: clamp(40px, 6vw, 72px); line-height: 0.95; letter-spacing: -0.025em; font-weight: 700; margin-bottom: 16px; } .legal .updated { font-size: 14px; color: var(--ink-3); margin-bottom: 32px; } .legal h2 { font-size: clamp(22px, 2vw, 30px); font-weight: 700; letter-spacing: -0.015em; margin: 48px 0 12px; } .legal h3 { font-size: 19px; font-weight: 600; margin: 24px 0 8px; } .legal p, .legal li { font-size: 16px; line-height: 1.6; color: var(--ink-2); margin-bottom: 12px; } .legal p strong { color: var(--ink); font-weight: 600; } .legal ul.disc { list-style: disc; padding-left: 20px; margin-bottom: 16px; } .legal ul.disc li { margin-bottom: 6px; } .legal a { color: var(--ink); border-bottom: 1px solid currentColor; padding-bottom: 1px; } .legal a:hover { color: var(--gw-charcoal-600); } .legal__callout strong { color: var(--ink); } /* ---------- Timeline ---------- */ .timeline { position: relative; padding-left: 28px; } .timeline::before { content: ""; position: absolute; top: 6px; bottom: 6px; left: 11px; width: 2px; background: var(--gw-yellow); } .timeline__item { position: relative; padding-bottom: 32px; } .timeline__item:last-child { padding-bottom: 0; } .timeline__item::before { content: ""; position: absolute; top: 6px; left: -22px; width: 12px; height: 12px; border-radius: 50%; background: var(--gw-yellow); box-shadow: 0 0 0 4px var(--gw-charcoal); } .page-hero--light .timeline__item::before, .section:not(.dark-section) .timeline__item::before { box-shadow: 0 0 0 4px var(--gw-paper); } .timeline__when { font-size: 12px; font-weight: 600; letter-spacing: 0.1em; text-transform: uppercase; color: var(--ink-3); margin-bottom: 6px; } .dark-section .timeline__when { color: rgba(255, 255, 255, 0.55); } .timeline__title { font-size: 18px; font-weight: 600; margin-bottom: 6px; } .timeline__body { font-size: 15px; color: var(--ink-2); line-height: 1.5; } .dark-section .timeline__body { color: rgba(255, 255, 255, 0.65); } /* ---------- Role tiles (help / contact / press) ---------- */ .role-tiles { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; } @media (max-width: 900px) { .role-tiles { grid-template-columns: 1fr; } } .role-tile { background: #fff; border-radius: var(--radius-lg); padding: 32px; display: flex; flex-direction: column; gap: 16px; box-shadow: inset 0 0 0 1px var(--rule); transition: transform var(--dur-base), box-shadow var(--dur-base), background var(--dur-base); } .role-tile:hover { transform: translateY(-3px); box-shadow: 0 20px 40px rgba(1, 30, 19, 0.08); background: var(--gw-paper); } .role-tile__icon { width: 48px; height: 48px; border-radius: 12px; background: var(--gw-yellow); display: inline-flex; align-items: center; justify-content: center; } .role-tile h4 { font-size: 20px; font-weight: 700; letter-spacing: -0.01em; } .role-tile p { font-size: 15px; color: var(--ink-2); line-height: 1.5; } /* ---------- Map / city ---------- */ .map-card__label { position: absolute; padding: 6px 10px; border-radius: var(--radius-pill); background: rgba(234, 255, 104, 0.95); color: var(--gw-charcoal); font-size: 11px; font-weight: 700; letter-spacing: 0.05em; text-transform: uppercase; box-shadow: 0 4px 14px rgba(0, 0, 0, 0.4); display: inline-flex; align-items: center; gap: 6px; } .map-card__label::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: var(--gw-charcoal); } /* ---------- Scroll-driven parallax-ish ---------- */ /* Pure-CSS one-shot entrance, same retire-the-IO pattern as `.reveal` above. */ .float-in { animation: gw-floatin 0.9s var(--ease-out) both; } @keyframes gw-floatin { from { transform: translateY(20px); opacity: 0; } to { transform: translateY(0); opacity: 1; } } @media (prefers-reduced-motion: reduce) { .float-in { animation: none !important; transform: none; opacity: 1; } } /* ---------- Media object for team / driver stories ---------- */ .person { display: flex; align-items: center; gap: 14px; } .person__avatar { width: 48px; height: 48px; border-radius: 50%; overflow: hidden; background: var(--gw-charcoal-200); } .person__avatar img { width: 100%; height: 100%; object-fit: cover; } .person__who strong { display: block; font-size: 15px; font-weight: 600; } .person__who span { font-size: 13px; color: var(--ink-3); } .dark-section .person__who span { color: rgba(255, 255, 255, 0.55); } /* ---------- Hero social proof row ---------- */ .hero__proof { display: flex; align-items: center; gap: 14px; margin-top: 36px; } .hero__proof-ava { display: inline-flex; align-items: center; } /* Each avatar is wrapped in so we can ship AVIF / WebP / JPEG. The overlap margin has to live on the (flex item), not on the inner . The wrapper needs explicit 38x38 + border-radius so IT is the visible circle — otherwise only the inner img rounds and the border sits on a square. */ .hero__proof-ava > picture, .hero__proof-ava > img { width: 38px; height: 38px; border-radius: 50%; border: 2px solid var(--gw-charcoal); overflow: hidden; display: inline-block; margin-left: -10px; box-sizing: border-box; flex: none; background: var(--gw-charcoal); } .hero__proof-ava > picture:first-child, .hero__proof-ava > img:first-child { margin-left: 0; } .hero__proof-ava img { width: 100%; height: 100%; object-fit: cover; display: block; border-radius: 0; border: 0; } .hero__proof-ava span { width: 38px; height: 38px; border-radius: 50%; border: 2px solid var(--gw-charcoal); background: var(--gw-yellow); color: var(--gw-charcoal); display: inline-flex; align-items: center; justify-content: center; font-weight: 700; font-size: 14px; margin-left: -10px; } .hero__proof-txt { color: rgba(255,255,255,0.9); font-size: 15px; } .hero__proof-txt strong { color: #fff; font-weight: 700; } /* ---------- Flow rail (4-step horizontal) ---------- */ .flow-rail { display: grid; grid-template-columns: repeat(4, 1fr); gap: 0; margin-top: 48px; background: #fff; border-radius: var(--radius-lg); overflow: hidden; box-shadow: inset 0 0 0 1px var(--rule); position: relative; } .flow-step { padding: 40px 32px 44px; border-right: 1px solid var(--rule); position: relative; transition: background var(--dur-base); } .flow-step:last-child { border-right: 0; } .flow-step:hover { background: var(--gw-yellow-soft); } .flow-step__num { font-family: "GT Walsheim"; font-size: 42px; font-weight: 700; color: var(--gw-charcoal); letter-spacing: -0.03em; line-height: 1; margin-bottom: 32px; display: inline-block; } .flow-step h4 { font-size: 20px; font-weight: 700; letter-spacing: -0.01em; margin-bottom: 10px; } .flow-step p { font-size: 15px; color: var(--ink-2); line-height: 1.55; } @media (max-width: 900px) { .flow-rail { grid-template-columns: 1fr 1fr; } .flow-step { border-bottom: 1px solid var(--rule); } .flow-step:nth-child(3), .flow-step:nth-child(4) { border-bottom: 0; } .flow-step:nth-child(2), .flow-step:nth-child(4) { border-right: 0; } } @media (max-width: 560px) { .flow-rail { grid-template-columns: 1fr; } .flow-step, .flow-step:nth-child(3), .flow-step:nth-child(4) { border-right: 0; border-bottom: 1px solid var(--rule); } .flow-step:last-child { border-bottom: 0; } } /* ---------- Utility text ---------- */ .max-60 { max-width: 60ch; } .max-50 { max-width: 50ch; } .max-40 { max-width: 40ch; } .max-28 { max-width: 28ch; } /* ---------- Print ---------- */ @media print { .site-nav, .announce-bar, .cookie-banner, .site-footer { display: none !important; } body { background: #fff; color: #000; } } /* ========================================================================== FARE CALCULATOR · Interactive Georgetown map ========================================================================== */ .farecalc { display: grid; grid-template-columns: 1.35fr 1fr; gap: 28px; margin-top: 48px; align-items: stretch; } @media (max-width: 980px) { .farecalc { grid-template-columns: 1fr; } } .farecalc__map-wrap { position: relative; background: #F7F1E1; border-radius: var(--radius-lg); overflow: hidden; box-shadow: 0 20px 50px -24px rgba(1,30,19,0.18), inset 0 0 0 1px rgba(1,30,19,0.08); min-height: 440px; } .farecalc__map { display: block; width: 100%; height: 100%; min-height: 440px; } .farecalc__halo { transform-origin: center; animation: fcHaloPulse 6s ease-in-out infinite; } @keyframes fcHaloPulse { 0%,100% { opacity: 1; } 50% { opacity: 0.55; } } .farecalc__legend { position: absolute; left: 16px; bottom: 16px; display: flex; gap: 14px; padding: 8px 12px; background: rgba(255,255,255,0.88); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); border-radius: var(--radius-pill); color: var(--gw-charcoal); font-size: 12px; box-shadow: inset 0 0 0 1px rgba(1,30,19,0.1), 0 6px 16px -8px rgba(1,30,19,0.2); } .farecalc__legend .dot { display:inline-block; width:10px; height:10px; border-radius:50%; margin-right:6px; vertical-align:middle; } .farecalc__legend .dot--a { background: var(--gw-yellow); box-shadow: 0 0 0 2px rgba(234,255,104,0.25); } .farecalc__legend .dot--b { background: #fff; box-shadow: 0 0 0 2px rgba(255,255,255,0.25); } .farecalc__legend .dot--halo { background: transparent; border:1.5px dashed rgba(234,255,104,0.7); } /* Clickable landmark dot */ .farecalc__dot { cursor: pointer; transition: transform var(--dur-base) var(--ease-out); transform-box: fill-box; transform-origin: center; } .farecalc__dot circle { transition: r 0.2s var(--ease-out), fill 0.2s; } .farecalc__dot:hover circle { r: 8; } .farecalc__dot text { pointer-events: none; user-select: none; } /* Right panel — light, editorial */ .farecalc__panel { background: #FFFDF5; color: var(--gw-charcoal); border-radius: var(--radius-lg); padding: 28px; display: flex; flex-direction: column; gap: 16px; box-shadow: inset 0 0 0 1px rgba(1,30,19,0.08), 0 20px 50px -28px rgba(1,30,19,0.2); } .farecalc__brand { display: flex; justify-content: space-between; align-items: center; } .farecalc__badge { display: inline-flex; align-items: center; gap: 8px; font-size: 11px; font-weight: 700; letter-spacing: 0.14em; color: var(--gw-charcoal); padding: 6px 10px; border-radius: var(--radius-pill); background: var(--gw-yellow); box-shadow: 0 4px 12px -4px rgba(234,255,104,0.6); } .farecalc__badge .chip-dot { width: 7px; height: 7px; border-radius: 50%; background: var(--gw-charcoal); animation: pulse 2s infinite; } .farecalc__field { display: flex; flex-direction: column; gap: 6px; } .farecalc__field label { font-size: 11px; font-weight: 600; letter-spacing: 0.12em; text-transform: uppercase; color: rgba(1,30,19,0.55); } .farecalc__select-wrap { position: relative; } .farecalc__pin { position: absolute; left: 14px; top: 50%; transform: translateY(-50%); width: 26px; height: 26px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; font-weight: 700; font-size: 12px; color: var(--gw-charcoal); font-family: "GT Walsheim", ui-sans-serif; pointer-events: none; z-index: 2; } .farecalc__pin--a { background: var(--gw-yellow); } .farecalc__pin--b { background: #fff; } .farecalc__select { width: 100%; -webkit-appearance: none; appearance: none; background: #F5EFE0 url("data:image/svg+xml;utf8,") no-repeat right 16px center; color: var(--gw-charcoal); border: 0; border-radius: var(--radius-md); padding: 16px 44px 16px 52px; font-size: 15px; font-weight: 600; font-family: inherit; cursor: pointer; box-shadow: inset 0 0 0 1px rgba(1,30,19,0.1); transition: box-shadow var(--dur-base), background var(--dur-base); } .farecalc__select:focus, .farecalc__select:hover { outline: none; box-shadow: inset 0 0 0 2px var(--gw-charcoal); background: #FFFDF5; } .farecalc__select option { background: #FFFDF5; color: var(--gw-charcoal); } .farecalc__swap-row { position: relative; display: flex; align-items: center; justify-content: center; height: 10px; margin: -2px 0; } .farecalc__line { position: absolute; left: 38px; right: 0; top: 50%; height: 1px; background: rgba(1,30,19,0.14); } .farecalc__swap { position: relative; background: var(--gw-yellow); color: var(--gw-charcoal); border: 0; width: 30px; height: 30px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; cursor: pointer; z-index: 1; transition: transform var(--dur-base); box-shadow: 0 2px 8px rgba(234,255,104,0.3); } .farecalc__swap:hover { transform: rotate(180deg); } .farecalc__tiers { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; margin-top: 6px; } .farecalc__tier { background: #F5EFE0; color: var(--gw-charcoal); border: 0; border-radius: var(--radius-md); padding: 12px 10px; text-align: left; cursor: pointer; font-family: inherit; transition: background var(--dur-base), box-shadow var(--dur-base), transform var(--dur-base); box-shadow: inset 0 0 0 1px rgba(1,30,19,0.08); display: flex; flex-direction: column; gap: 2px; } .farecalc__tier:hover { background: #FFFDF5; box-shadow: inset 0 0 0 1px rgba(1,30,19,0.2); } .farecalc__tier.is-on { background: var(--gw-charcoal); color: #fff; box-shadow: inset 0 0 0 1px var(--gw-charcoal), 0 6px 16px -6px rgba(1,30,19,0.4); transform: translateY(-1px); } .farecalc__tier-k { font-weight: 700; font-size: 14px; letter-spacing: -0.01em; } .farecalc__tier-v { font-size: 11px; opacity: 0.65; } .farecalc__tier.is-on .farecalc__tier-v { opacity: 0.7; color: var(--gw-yellow); } /* Dark fare summary card — the single dark moment, focal point */ .farecalc__summary { margin-top: 8px; padding: 22px; border-radius: var(--radius-md); background: radial-gradient(ellipse at top right, #0A2C1F 0%, var(--gw-charcoal) 70%); color: #fff; box-shadow: 0 16px 40px -20px rgba(1,30,19,0.5), inset 0 0 0 1px rgba(234,255,104,0.18); position: relative; overflow: hidden; } .farecalc__summary::before { content: ""; position: absolute; top: -30px; right: -30px; width: 140px; height: 140px; background: radial-gradient(circle, rgba(234,255,104,0.18), transparent 70%); pointer-events: none; } .farecalc__fare { text-align: left; position: relative; } .farecalc__fare-k { font-size: 11px; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; color: var(--gw-yellow); } .farecalc__fare-v { display: flex; align-items: baseline; gap: 4px; margin-top: 8px; font-family: "GT Walsheim", ui-sans-serif; font-weight: 700; letter-spacing: -0.03em; line-height: 1; } .farecalc__ccy { font-size: 20px; color: rgba(255,255,255,0.7); font-weight: 500; } .farecalc__fare-v #fcFare { font-size: 48px; color: #fff; } .farecalc__fare-range { font-size: 12px; color: rgba(255,255,255,0.55); margin-top: 6px; } .farecalc__stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; margin-top: 20px; padding-top: 18px; border-top: 1px solid rgba(255,255,255,0.14); position: relative; } .farecalc__stats .k { font-size: 10px; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; color: rgba(255,255,255,0.55); } .farecalc__stats .v { font-size: 15px; font-weight: 600; margin-top: 4px; color: #fff; } .farecalc__foot { display: flex; justify-content: space-between; align-items: center; padding-top: 4px; font-size: 13px; color: rgba(1,30,19,0.6); } .farecalc__cta { display: inline-flex; align-items: center; gap: 6px; color: var(--gw-charcoal); font-weight: 700; text-decoration: none; padding: 10px 16px; background: var(--gw-yellow); border-radius: var(--radius-pill); transition: transform var(--dur-base); } .farecalc__cta:hover { transform: translateY(-1px); } .farecalc__disclaimer { margin-top: 18px; font-size: 12px; color: var(--ink-3); max-width: 640px; } /* ========================================================================== EARNINGS CALCULATOR · Driver side ========================================================================== */ .earncalc { margin-top: 48px; background: #fff; border-radius: var(--radius-lg); padding: 10px; box-shadow: 0 30px 60px -24px rgba(1,30,19,0.22), inset 0 0 0 1px var(--rule); } .earncalc__plans { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; padding: 6px; } @media (max-width: 900px) { .earncalc__plans { grid-template-columns: repeat(2, 1fr); } } .earncalc__plan { background: var(--gw-paper-2); border: 0; border-radius: var(--radius-md); padding: 18px 16px; cursor: pointer; text-align: left; font-family: inherit; color: var(--ink); display: flex; flex-direction: column; gap: 6px; transition: background var(--dur-base), box-shadow var(--dur-base), transform var(--dur-base); box-shadow: inset 0 0 0 1px var(--rule); } .earncalc__plan:hover { background: #fff; box-shadow: inset 0 0 0 1px rgba(1,30,19,0.18); transform: translateY(-2px); } .earncalc__plan.is-on { background: var(--gw-charcoal); color: #fff; box-shadow: inset 0 0 0 1px var(--gw-charcoal), 0 8px 24px -8px rgba(1,30,19,0.4); transform: translateY(-2px); } .earncalc__plan-icon { display: inline-flex; align-items: center; justify-content: center; width: 36px; height: 36px; border-radius: 50%; background: rgba(1,30,19,0.05); color: var(--gw-charcoal); margin-bottom: 4px; } .earncalc__plan.is-on .earncalc__plan-icon { background: var(--gw-yellow); color: var(--gw-charcoal); } .earncalc__plan-k { font-weight: 700; font-size: 15px; letter-spacing: -0.01em; } .earncalc__plan-v { font-size: 12.5px; opacity: 0.65; line-height: 1.4; } .earncalc__plan.is-on .earncalc__plan-v { opacity: 0.75; } .earncalc__body { display: grid; grid-template-columns: 1.1fr 1fr; gap: 10px; margin-top: 10px; } @media (max-width: 900px) { .earncalc__body { grid-template-columns: 1fr; } } .earncalc__controls { background: #fff; border-radius: var(--radius-md); padding: 28px; display: flex; flex-direction: column; gap: 22px; } .earncalc__slider { display: flex; flex-direction: column; gap: 8px; } .earncalc__slider-top { display: flex; justify-content: space-between; align-items: baseline; } .earncalc__slider-top label { font-size: 13px; font-weight: 600; color: var(--ink); } .earncalc__slider-val { font-family: "GT Walsheim", ui-sans-serif; font-weight: 700; font-size: 18px; letter-spacing: -0.01em; color: var(--gw-charcoal); } .earncalc__slider input[type=range] { -webkit-appearance: none; appearance: none; width: 100%; height: 6px; background: linear-gradient(to right, var(--gw-yellow) 0 var(--fill, 50%), rgba(1,30,19,0.08) var(--fill, 50%) 100%); border-radius: 999px; outline: none; cursor: pointer; } .earncalc__slider input[type=range]::-webkit-slider-thumb { -webkit-appearance: none; appearance: none; width: 22px; height: 22px; border-radius: 50%; background: #fff; border: 3px solid var(--gw-charcoal); box-shadow: 0 2px 6px rgba(1,30,19,0.3); cursor: grab; transition: transform var(--dur-fast); } .earncalc__slider input[type=range]::-webkit-slider-thumb:hover { transform: scale(1.12); } .earncalc__slider input[type=range]::-moz-range-thumb { width: 22px; height: 22px; border-radius: 50%; background: #fff; border: 3px solid var(--gw-charcoal); cursor: grab; } .earncalc__slider-ticks { display: flex; justify-content: space-between; font-size: 11px; color: var(--ink-3); letter-spacing: 0.05em; margin-top: 2px; } .earncalc__toggles { display: flex; flex-direction: column; gap: 10px; margin-top: 4px; } .earncalc__chip { display: flex; align-items: center; gap: 10px; padding: 12px 14px; border-radius: var(--radius-md); background: var(--gw-paper-2); cursor: pointer; font-size: 13.5px; transition: background var(--dur-base); box-shadow: inset 0 0 0 1px var(--rule); } .earncalc__chip:hover { background: #F7F4EA; } .earncalc__chip input { accent-color: var(--gw-charcoal); width: 16px; height: 16px; flex-shrink: 0; } .earncalc__summary { background: var(--gw-paper-2); color: var(--gw-charcoal); border-radius: var(--radius-md); padding: 28px; display: flex; flex-direction: column; gap: 18px; position: relative; overflow: hidden; box-shadow: inset 0 0 0 1px var(--rule); } .earncalc__summary::before { content: ''; position: absolute; top: -80px; right: -80px; width: 260px; height: 260px; background: radial-gradient(circle, rgba(234,255,104,0.35), transparent 70%); pointer-events: none; } .earncalc__plan-label { display: inline-flex; align-items: center; gap: 8px; font-size: 11px; font-weight: 700; letter-spacing: 0.14em; color: var(--gw-charcoal); padding: 6px 10px; border-radius: var(--radius-pill); align-self: flex-start; background: var(--gw-yellow); box-shadow: inset 0 0 0 1px rgba(1,30,19,0.08); } .earncalc__payout { text-align: left; } .earncalc__payout-k { font-size: 11px; font-weight: 600; letter-spacing: 0.14em; text-transform: uppercase; color: var(--ink-3); } .earncalc__payout-v { display: flex; align-items: baseline; gap: 5px; margin-top: 6px; font-family: "GT Walsheim", ui-sans-serif; font-weight: 700; letter-spacing: -0.03em; line-height: 1; } .earncalc__ccy { font-size: 22px; color: var(--ink-3); font-weight: 500; } .earncalc__payout-v #ecNet { font-size: 56px; color: var(--gw-charcoal); } .earncalc__payout-sub { font-size: 13px; color: var(--ink-2); margin-top: 6px; } .earncalc__bars { display: flex; flex-direction: column; gap: 9px; } .earncalc__bar { position: relative; display: grid; grid-template-columns: 1fr auto; padding: 10px 12px; border-radius: var(--radius-sm, 10px); background: #fff; box-shadow: inset 0 0 0 1px var(--rule); font-size: 13px; overflow: hidden; } .earncalc__bar .bk { color: var(--ink-2); position: relative; z-index: 1; } .earncalc__bar .bv { font-weight: 700; color: var(--gw-charcoal); position: relative; z-index: 1; font-variant-numeric: tabular-nums; } .earncalc__bar .fill { position: absolute; left: 0; top: 0; bottom: 0; width: 0; transition: width 0.6s cubic-bezier(.22,.61,.36,1); opacity: 0.18; } .earncalc__bar--gross .fill { background: var(--gw-yellow); opacity: 0.45; } .earncalc__bar--fee .fill { background: var(--gw-coral); opacity: 0.22; } .earncalc__bar--cost .fill { background: var(--gw-lavender); opacity: 0.55; } .earncalc__bar--bonus { display: none; } .earncalc__bar--bonus.is-on { display: grid; } .earncalc__bar--bonus .fill { background: var(--gw-mint); opacity: 0.28; } .earncalc__bar--net { background: var(--gw-charcoal); box-shadow: inset 0 0 0 1px var(--gw-charcoal); } .earncalc__bar--net .fill { background: var(--gw-yellow); opacity: 0.14; } .earncalc__bar--net .bk, .earncalc__bar--net .bv { color: #fff; } .earncalc__note { font-size: 13px; color: var(--ink-2); line-height: 1.55; padding: 12px 14px; border-radius: var(--radius-sm, 10px); background: #fff; box-shadow: inset 0 0 0 1px var(--rule); } .earncalc__actions { display: flex; gap: 10px; flex-wrap: wrap; } .earncalc__actions .btn--ghost { color: var(--gw-charcoal); box-shadow: inset 0 0 0 1px rgba(1,30,19,0.25); } .earncalc__actions .btn--ghost:hover { background: rgba(1,30,19,0.06); } .earncalc__disclaimer { margin-top: 18px; font-size: 12px; color: var(--ink-3); } /* v8.1: calculator action row — side-by-side on all screens, tight on mobile */ .earncalc__actions { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 18px; } .earncalc__actions .btn { flex: 1 1 0; min-width: 0; white-space: nowrap; } @media (max-width: 480px) { .earncalc__actions { gap: 8px; } .earncalc__actions .btn { padding-left: 14px; padding-right: 14px; font-size: 14px; } } /* ===== v8: Shift selector (Lease to Own) ===== */ .earncalc__shift { display: flex; flex-direction: column; gap: 10px; padding-bottom: 22px; border-bottom: 1px solid var(--rule); } .earncalc__shift-label { font-size: 11px; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; color: var(--ink-3); } .earncalc__shift-buttons { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; } .earncalc__shift-btn { padding: 12px 14px; background: var(--gw-paper-2); border: 0; border-radius: 10px; cursor: pointer; font-family: inherit; text-align: left; display: flex; flex-direction: column; gap: 3px; color: var(--ink); transition: background var(--dur-base), color var(--dur-base); } .earncalc__shift-btn:hover { background: #F7F4EA; } .earncalc__shift-btn.is-on { background: var(--gw-charcoal); color: #fff; } .earncalc__shift-btn-k { font-size: 13px; font-weight: 700; letter-spacing: -0.01em; } .earncalc__shift-btn-v { font-size: 11.5px; opacity: 0.65; } .earncalc__shift-btn.is-on .earncalc__shift-btn-v { opacity: 0.8; } /* ===== v8: Slider sub-label (BYO per-trip, rider referral explainer) ===== */ .earncalc__slider-sub { font-size: 11.5px; color: var(--ink-3); line-height: 1.45; font-variant-numeric: tabular-nums; } /* ===== v8: Extra bonuses section ===== */ .earncalc__bonuses { display: flex; flex-direction: column; gap: 14px; padding-top: 22px; border-top: 1px solid var(--rule); } .earncalc__bonuses-label { font-size: 11px; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; color: var(--ink-3); } .earncalc__chip-hint { color: var(--ink-3); font-size: 12px; font-weight: 400; } /* ===== v8: Waterfall bars — sub-labels, baseline alignment, greyed state ===== */ .earncalc__bar { align-items: baseline; gap: 10px; padding: 11px 14px; } .earncalc__bar .bk-main { font-weight: 600; color: var(--gw-charcoal); } .earncalc__bar .bk-sub { color: var(--ink-3); font-size: 11px; display: block; margin-top: 2px; line-height: 1.35; } .earncalc__bar .bv { white-space: nowrap; font-variant-numeric: tabular-nums; } .earncalc__bar--greyed { opacity: 0.45; } .earncalc__bar--greyed .bv { text-decoration: line-through; } .earncalc__bar--net { margin-top: 4px; padding: 13px 14px; } .earncalc__bar--net .bk-main { color: var(--gw-yellow); } .earncalc__bar--net .bk-sub { color: rgba(234,255,104,0.75); } .earncalc__bar--net .bv { color: var(--gw-yellow); font-size: 15px; } .earncalc__bar--bonus { display: grid; } .earncalc__net { font-size: 56px; color: var(--gw-charcoal); font-variant-numeric: tabular-nums; } .earncalc__payout-sub { font-variant-numeric: tabular-nums; } /* v8: Summary ::before — legacy used radial-gradient; keep as-is, no change needed. */ /* ========================================================================== FARE CALCULATOR · v2 additions (popular pills, map overlay, breakdown) ========================================================================== */ .farecalc__quick { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin: 24px 0 4px; } .farecalc__quick-k { font-size: 11px; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; color: var(--ink-3); margin-right: 4px; } .fc-quick { background: #fff; border: 0; border-radius: var(--radius-pill); padding: 8px 14px; font-family: inherit; font-size: 13px; font-weight: 500; color: var(--ink); cursor: pointer; box-shadow: inset 0 0 0 1px var(--rule); transition: background var(--dur-base), box-shadow var(--dur-base), transform var(--dur-fast); } .fc-quick:hover { background: var(--gw-charcoal); color: #fff; box-shadow: inset 0 0 0 1px var(--gw-charcoal); transform: translateY(-1px); } .fc-quick.is-on { background: var(--gw-yellow); color: var(--gw-charcoal); box-shadow: inset 0 0 0 1px var(--gw-yellow); } /* Map overlay bar (top of map) */ .farecalc__map-overlay { position: absolute; top: 14px; left: 14px; right: 14px; display: flex; justify-content: space-between; align-items: center; z-index: 2; pointer-events: none; gap: 12px; } .fc-status { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; } .fc-status__chip { display: inline-flex; align-items: center; gap: 6px; padding: 6px 10px; border-radius: var(--radius-pill); background: var(--gw-yellow); color: var(--gw-charcoal); font-size: 10.5px; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; box-shadow: 0 4px 10px -4px rgba(234,255,104,0.5); } .fc-status__chip .chip-dot { width: 6px; height: 6px; background: var(--gw-charcoal); border-radius: 50%; animation: pulse 2s infinite; } .fc-status__corridor { font-family: "GT Walsheim", ui-sans-serif; font-size: 12px; font-weight: 600; letter-spacing: 0.06em; color: #011E13; padding: 6px 10px; border-radius: var(--radius-pill); background: rgba(247,244,234,0.85); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); box-shadow: inset 0 0 0 1px rgba(1,30,19,0.12); } .fc-zoom { display: flex; align-items: center; gap: 8px; padding: 6px 10px; border-radius: var(--radius-pill); background: rgba(247,244,234,0.85); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); box-shadow: inset 0 0 0 1px rgba(1,30,19,0.12); } .fc-zoom__label { font-size: 10.5px; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; color: var(--ink-3); } .fc-zoom__scale { width: 56px; height: 4px; background: rgba(1,30,19,0.08); border-radius: 999px; position: relative; overflow: hidden; } .fc-zoom__fill { position: absolute; inset: 0 auto 0 0; width: 40%; background: var(--gw-charcoal); border-radius: 999px; transition: width 0.5s cubic-bezier(.22,.61,.36,1); } /* Tier cards: extra meta row */ .farecalc__tier { padding: 14px 12px !important; } .farecalc__tier-meta { font-size: 10.5px; opacity: 0.55; letter-spacing: 0.05em; margin-top: 2px; } .farecalc__tier.is-on .farecalc__tier-meta { opacity: 0.7; } /* Fare v-number: animated */ .farecalc__fare-v #fcFare { font-variant-numeric: tabular-nums; transition: transform 0.3s var(--ease-out); } .farecalc__fare-v.is-pulsing #fcFare { animation: fcFarePulse 0.5s var(--ease-out); } @keyframes fcFarePulse { 0% { transform: translateY(0); opacity: 1; } 30% { transform: translateY(-4px); opacity: 0.5; color: var(--gw-yellow); } 100% { transform: translateY(0); opacity: 1; } } /* Breakdown */ .farecalc__breakdown { margin-top: 4px; } /* Route line: let's make it more editorial */ #fcRoute { filter: drop-shadow(0 1px 2px rgba(1,30,19,0.2)); } /* Car dot with glow */ #fcCar { filter: drop-shadow(0 0 6px rgba(234,255,104,0.9)); } /* Legend: sit above overlay correctly */ .farecalc__legend { z-index: 2; } /* Mobile overlay tweak */ @media (max-width: 640px) { .farecalc__map-overlay { flex-direction: column; align-items: flex-start; } .fc-zoom { align-self: flex-end; } } /* ========== Waitlist referral card ========== Appears inside `.signup-card` (which has a white background on the homepage hero form) after a successful waitlist/rider submit. The card uses a dark charcoal surface with yellow accents so white/yellow text is legible regardless of the surrounding panel. Layout: a 2-column grid that places the check-badge and the "You're *in*." heading side-by-side on the first row, with everything else (offer block, referral code, buttons) spanning the full width below. Without this the badge would sit on its own line with the heading stacked underneath — leaves acres of empty space on desktop and makes the card look 3x taller than it needs to. */ .referral-card { margin-top: 4px; padding: 28px; background: #011E13; background-image: radial-gradient(ellipse 140% 80% at 100% 0%, rgba(234,255,104,0.12), transparent 55%), linear-gradient(180deg, #052B1E 0%, #011E13 100%); color: #F7F7F2; border: 1px solid rgba(234,255,104,0.25); border-radius: 14px; box-shadow: 0 18px 40px rgba(1,30,19,0.22); animation: refCardIn 0.5s cubic-bezier(.2,.8,.2,1); /* Two-column grid. Badge in col 1, first heading in col 2, rest spans both. */ display: grid; grid-template-columns: 52px minmax(0, 1fr); column-gap: 18px; row-gap: 14px; align-items: start; } /* The card ships with the `hidden` attribute so it's invisible on initial page load — it's revealed by site2-forms.js after a successful submit. But our own `display: grid` above beats the UA default `[hidden] { display: none }` on specificity (class selector > attribute selector), so the card shows up anyway alongside the form. Override with !important so the hidden attribute wins regardless of which other display value we use. */ .referral-card[hidden] { display: none !important; } /* Everything inside the card spans both columns by default — the badge and first heading override below to sit side-by-side. */ .referral-card > * { grid-column: 1 / -1; } .referral-card h1, .referral-card h2, .referral-card h3, .referral-card h4, .referral-card h5, .referral-card h6 { color: #F7F7F2; } .referral-card em { color: var(--gw-yellow, #EAFF68); font-style: italic; } .referral-card p { color: rgba(247,247,242,0.78); } @keyframes refCardIn { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: translateY(0); } } .referral-card__badge { grid-column: 1; grid-row: 1; align-self: center; width: 52px; height: 52px; border-radius: 14px; background: rgba(234,255,104,0.18); box-shadow: 0 0 0 4px rgba(234,255,104,0.08); display: flex; align-items: center; justify-content: center; margin: 0; } /* First heading after the badge lives in col 2 of row 1. `!important` because the markup inline-styles `margin-top: 14px` directly. */ .referral-card__badge + h1, .referral-card__badge + h2, .referral-card__badge + h3, .referral-card__badge + h4, .referral-card__badge + h5 { grid-column: 2; grid-row: 1; align-self: center; margin-top: 0 !important; margin-bottom: 0 !important; } .referral-card__offer { margin-top: 0; padding: 20px; background: rgba(0,0,0,0.32); border: 1px solid rgba(234,255,104,0.12); border-radius: 12px; color: rgba(247,247,242,0.85); } .referral-card__offer strong { color: #F7F7F2; } .referral-card .btn--primary { background: var(--gw-yellow, #EAFF68); color: #011E13; } .referral-card .btn--ghost { background: transparent; color: #F7F7F2; border: 1px solid rgba(247,247,242,0.25); } .referral-card .btn--ghost:hover { background: rgba(247,247,242,0.08); border-color: rgba(247,247,242,0.5); } /* On narrow viewports, let the badge stack above the heading again so neither gets squeezed. Threshold picked so the current card content (check SVG + "You're *in*.") still fits two-up above ~420px width. */ @media (max-width: 420px) { .referral-card { grid-template-columns: 1fr; row-gap: 12px; } .referral-card__badge, .referral-card__badge + h1, .referral-card__badge + h2, .referral-card__badge + h3, .referral-card__badge + h4, .referral-card__badge + h5 { grid-column: 1; } } /* ============================================================ Legal pages — editorial layout for Terms / Privacy / Cookies / Accessibility ============================================================ */ .legal-masthead { padding: 140px 0 48px; background: #F3F0E6; border-bottom: 1px solid rgba(1,30,19,0.08); position: relative; overflow: hidden; } .legal-masthead::after { content: ""; position: absolute; inset: 0; pointer-events: none; background-image: radial-gradient(circle at 1px 1px, rgba(1,30,19,0.06) 1px, transparent 0); background-size: 28px 28px; mask-image: linear-gradient(to bottom, transparent, black 40%, black 70%, transparent); -webkit-mask-image: linear-gradient(to bottom, transparent, black 40%, black 70%, transparent); opacity: 0.55; } .legal-masthead__inner { max-width: 1120px; margin: 0 auto; padding: 0 28px; position: relative; z-index: 1; } .legal-masthead__crumbs { display: flex; align-items: center; gap: 8px; font-size: 13px; color: rgba(1,30,19,0.55); margin-bottom: 28px; letter-spacing: 0.02em; } .legal-masthead__crumbs a { color: rgba(1,30,19,0.55); text-decoration: none; transition: color 0.15s; } .legal-masthead__crumbs a:hover { color: #011E13; } .legal-masthead__crumbs svg { opacity: 0.45; } .legal-masthead__kicker { display: inline-flex; align-items: center; gap: 10px; padding: 7px 14px 7px 12px; background: #011E13; color: #EAFF68; border-radius: 999px; font-size: 12px; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; } .legal-masthead__kicker .dot { width: 7px; height: 7px; border-radius: 50%; background: #EAFF68; box-shadow: 0 0 0 3px rgba(234,255,104,0.25); } .legal-masthead h1 { margin: 20px 0 14px; font-size: clamp(48px, 7vw, 88px); line-height: 0.96; letter-spacing: -0.03em; font-weight: 700; max-width: 16ch; text-wrap: balance; } .legal-masthead__tag { font-size: clamp(20px, 2.4vw, 28px); line-height: 1.3; color: rgba(1,30,19,0.7); max-width: 48ch; margin: 0 0 32px; font-weight: 400; } .legal-masthead__meta { display: flex; flex-wrap: wrap; align-items: center; gap: 28px; padding-top: 24px; border-top: 1px solid rgba(1,30,19,0.12); font-size: 14px; } .legal-masthead__meta > div { display: flex; flex-direction: column; gap: 2px; } .legal-masthead__meta dt { font-size: 11px; letter-spacing: 0.1em; text-transform: uppercase; color: rgba(1,30,19,0.5); font-weight: 600; } .legal-masthead__meta dd { margin: 0; font-weight: 500; color: #011E13; } /* TL;DR card */ .legal-tldr { max-width: 1120px; margin: -32px auto 0; padding: 0 28px; position: relative; z-index: 2; } .legal-tldr__card { background: #011E13; color: #F7F7F2; border-radius: 18px; padding: 36px 40px; display: grid; grid-template-columns: auto 1fr; gap: 28px; align-items: start; box-shadow: 0 24px 60px -24px rgba(1,30,19,0.35); } .legal-tldr__icon { width: 52px; height: 52px; border-radius: 14px; background: rgba(234,255,104,0.14); color: #EAFF68; display: grid; place-items: center; flex-shrink: 0; } .legal-tldr__body h2 { margin: 0 0 10px; font-size: 13px; font-weight: 600; letter-spacing: 0.1em; text-transform: uppercase; color: #EAFF68; } .legal-tldr__body p { margin: 0; font-size: 18px; line-height: 1.55; color: rgba(247,247,242,0.9); max-width: 62ch; } /* Body layout */ .legal-body { padding: 80px 0 120px; background: #F7F7F2; } .legal-body__grid { max-width: 1120px; margin: 0 auto; padding: 0 28px; display: grid; grid-template-columns: 240px 1fr; gap: 80px; align-items: start; } /* Sticky TOC */ .legal-toc { position: sticky; top: 100px; font-size: 14px; line-height: 1.4; border-left: 1px solid rgba(1,30,19,0.12); padding-left: 20px; } .legal-toc__label { font-size: 11px; font-weight: 600; letter-spacing: 0.12em; text-transform: uppercase; color: rgba(1,30,19,0.5); margin-bottom: 16px; } .legal-toc ol { list-style: none; padding: 0; margin: 0; counter-reset: toc; } .legal-toc li { counter-increment: toc; margin: 0 0 10px; } .legal-toc a { display: flex; gap: 12px; color: rgba(1,30,19,0.68); text-decoration: none; padding: 2px 0; transition: color 0.15s; } .legal-toc a::before { content: counter(toc, decimal-leading-zero); font-variant-numeric: tabular-nums; color: rgba(1,30,19,0.35); font-size: 12px; padding-top: 2px; min-width: 22px; } .legal-toc a:hover { color: #011E13; } .legal-toc a.is-active { color: #011E13; font-weight: 600; } .legal-toc a.is-active::before { color: #011E13; } /* Article */ .legal-article { font-size: 17px; line-height: 1.7; color: rgba(1,30,19,0.82); max-width: 68ch; counter-reset: sec; } .legal-article > section { padding: 40px 0; border-bottom: 1px solid rgba(1,30,19,0.08); counter-increment: sec; scroll-margin-top: 100px; } .legal-article > section:first-child { padding-top: 0; } .legal-article > section:last-child { border-bottom: 0; } .legal-article h2 { font-size: clamp(24px, 2.6vw, 32px); line-height: 1.15; letter-spacing: -0.015em; font-weight: 700; color: #011E13; margin: 0 0 18px; display: flex; align-items: baseline; gap: 18px; } .legal-article h2::before { content: counter(sec, decimal-leading-zero); font-size: 14px; font-weight: 500; font-variant-numeric: tabular-nums; color: rgba(1,30,19,0.38); letter-spacing: 0.05em; min-width: 36px; padding-top: 6px; } .legal-article h3 { font-size: 17px; font-weight: 600; color: #011E13; margin: 24px 0 6px; letter-spacing: -0.005em; } .legal-article p { margin: 0 0 16px; text-wrap: pretty; } .legal-article p:last-child { margin-bottom: 0; } .legal-article strong { color: #011E13; font-weight: 600; } .legal-article a { color: #011E13; text-decoration: underline; text-decoration-color: rgba(1,30,19,0.25); text-underline-offset: 3px; transition: text-decoration-color 0.15s; } .legal-article a:hover { text-decoration-color: #011E13; } .legal-article ul { list-style: none; padding: 0; margin: 0 0 18px; } .legal-article ul li { position: relative; padding-left: 22px; margin: 0 0 10px; } .legal-article ul li::before { content: ""; position: absolute; left: 2px; top: 12px; width: 10px; height: 1.5px; background: #011E13; opacity: 0.4; } .legal-article ul li strong { color: #011E13; } .legal-article dl { margin: 0 0 18px; display: grid; grid-template-columns: auto 1fr; gap: 6px 18px; } .legal-article dl dt { font-weight: 600; color: #011E13; } .legal-article dl dd { margin: 0; } /* Callout */ .legal-callout { margin: 24px 0; padding: 20px 22px; background: rgba(234,255,104,0.2); border-left: 3px solid #011E13; border-radius: 4px 12px 12px 4px; font-size: 15px; line-height: 1.55; } .legal-callout strong { display: block; margin-bottom: 4px; } .legal-note { margin: 24px 0; padding: 16px 20px; background: #fff; border: 1px solid rgba(1,30,19,0.1); border-radius: 10px; font-size: 14px; color: rgba(1,30,19,0.7); } /* Contact card at end */ .legal-contact { margin-top: 48px; padding: 32px; background: #fff; border: 1px solid rgba(1,30,19,0.1); border-radius: 18px; } .legal-contact h3 { margin: 0 0 8px; font-size: 20px; font-weight: 700; color: #011E13; } .legal-contact p { margin: 0 0 16px; color: rgba(1,30,19,0.7); } .legal-contact__links { display: flex; flex-wrap: wrap; gap: 10px; } .legal-contact__links a { display: inline-flex; align-items: center; gap: 8px; padding: 10px 16px; border-radius: 999px; background: #011E13; color: #EAFF68; text-decoration: none; font-size: 14px; font-weight: 500; transition: transform 0.15s, background 0.15s; } .legal-contact__links a.secondary { background: transparent; color: #011E13; border: 1px solid rgba(1,30,19,0.2); } .legal-contact__links a:hover { transform: translateY(-1px); } /* Cross-links to other legal pages */ .legal-siblings { margin-top: 40px; display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 12px; } .legal-siblings a { padding: 18px 20px; background: #fff; border: 1px solid rgba(1,30,19,0.1); border-radius: 12px; color: #011E13; text-decoration: none; display: flex; flex-direction: column; gap: 2px; transition: border-color 0.15s, transform 0.15s; } .legal-siblings a:hover { border-color: #011E13; transform: translateY(-2px); } .legal-siblings a span.label { font-size: 11px; letter-spacing: 0.1em; text-transform: uppercase; color: rgba(1,30,19,0.5); font-weight: 600; } .legal-siblings a span.title { font-size: 16px; font-weight: 600; } .legal-siblings a[aria-current="page"] { background: #011E13; color: #F7F7F2; border-color: #011E13; } .legal-siblings a[aria-current="page"] span.label { color: rgba(234,255,104,0.8); } /* Responsive */ @media (max-width: 900px) { .legal-masthead { padding-top: 110px; } .legal-tldr__card { grid-template-columns: 1fr; padding: 28px; } .legal-body__grid { grid-template-columns: 1fr; gap: 40px; } .legal-toc { position: static; border-left: 0; padding-left: 0; border-top: 1px solid rgba(1,30,19,0.12); padding-top: 24px; } .legal-toc__label { margin-bottom: 12px; } .legal-toc ol { display: grid; grid-template-columns: 1fr 1fr; gap: 4px 16px; } .legal-article h2 { gap: 12px; } .legal-article h2::before { min-width: 28px; } } /* ============================================================ "This is Guyana" — 3-panel photographic band (About page) ============================================================ */ .tig { padding: 120px 0 140px; background: #011E13; color: #F7F7F2; position: relative; overflow: hidden; } .tig__inner { max-width: 1240px; margin: 0 auto; padding: 0 28px; position: relative; } .tig__head { display: block; margin-bottom: 56px; padding-bottom: 28px; border-bottom: 1px solid rgba(247,247,242,0.12); } .tig__eyebrow { display: inline-flex; align-items: center; gap: 10px; font-size: 12px; font-weight: 600; letter-spacing: 0.14em; text-transform: uppercase; color: #EAFF68; margin-bottom: 20px; } .tig__eyebrow::before { content: ""; width: 28px; height: 1px; background: #EAFF68; } .tig__title { margin: 0; font-size: clamp(40px, 5.2vw, 76px); line-height: 0.96; letter-spacing: -0.025em; font-weight: 700; max-width: 14ch; text-wrap: balance; } .tig__title em { font-style: italic; color: #EAFF68; font-weight: 400; } .tig__subtitle { max-width: 52ch; font-size: 17px; line-height: 1.55; color: rgba(247,247,242,0.7); margin: 18px 0 0; } /* Grid of 3 photos */ .tig__grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; } .tig__card { position: relative; background: #0a2e21; border-radius: 14px; overflow: hidden; aspect-ratio: 4/5; display: flex; flex-direction: column; justify-content: flex-end; transition: transform 0.35s cubic-bezier(.2,.8,.2,1); } .tig__card:hover { transform: translateY(-4px); } .tig__card img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: transform 0.6s cubic-bezier(.2,.8,.2,1); z-index: 0; } .tig__card:hover img { transform: scale(1.04); } .tig__card::before { content: ""; position: absolute; inset: 0; background: linear-gradient( to top, rgba(1,30,19,0.92) 0%, rgba(1,30,19,0.55) 30%, rgba(1,30,19,0.1) 55%, transparent 85% ); z-index: 1; pointer-events: none; } .tig__card-body { position: relative; z-index: 2; padding: 24px 24px 26px; color: #F7F7F2; } .tig__idx { display: inline-flex; align-items: center; gap: 8px; font-size: 11px; font-weight: 600; letter-spacing: 0.12em; color: rgba(247,247,242,0.7); margin-bottom: 10px; } .tig__idx::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: #EAFF68; } .tig__label { font-size: 11px; font-weight: 600; letter-spacing: 0.12em; text-transform: uppercase; color: #EAFF68; margin-bottom: 10px; } .tig__name { margin: 0 0 6px; font-size: 26px; line-height: 1.1; letter-spacing: -0.015em; font-weight: 700; } .tig__caption { margin: 0; font-size: 14px; line-height: 1.45; color: rgba(247,247,242,0.85); max-width: 32ch; } /* Footline under the grid */ .tig__foot { margin-top: 40px; display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 16px; font-size: 13px; color: rgba(247,247,242,0.55); letter-spacing: 0.04em; } .tig__foot strong { color: #F7F7F2; font-weight: 500; } @media (max-width: 900px) { .tig { padding: 80px 0 90px; } .tig__head { display: block; margin-bottom: 40px; } .tig__grid { grid-template-columns: 1fr; gap: 16px; } .tig__card { aspect-ratio: 16/11; } } /* --- Payment chips (fare calculator foot) --- */ .pay-chip { display:inline-flex; align-items:center; padding:5px 10px; border-radius:999px; background:rgba(1,30,19,.06); color:var(--gw-charcoal-900,#011E13); font-family:'GT Walsheim',system-ui,sans-serif; font-weight:600; font-size:12px; letter-spacing:.01em; line-height:1; border:1px solid rgba(1,30,19,.08); } .pay-chip--muted { background:transparent; color:var(--gw-charcoal-600,#39483F); border-style:dashed; } @media (max-width:640px) { .farecalc__foot > div:first-child { font-size:13px; } .pay-chip { font-size:11px; padding:4px 8px; } } /* ============================================================ Footer logo — hover wiggle on G cap (reinforces pin identity) Loaded sitewide (was previously only on home via brand-intro.css). ============================================================ */ .footer-logo { display: inline-block; line-height: 0; cursor: default; } .footer-logo svg { width: 140px; height: auto; display: block; overflow: visible; } .footer-logo .fl-gcap { transform-box: fill-box; transform-origin: 50% 50%; transition: transform 0s; } .footer-logo:hover .fl-gcap { animation: fl-wiggle 0.9s cubic-bezier(.3,1.4,.5,1) both; } @keyframes fl-wiggle { 0% { transform: rotate(0deg); } 25% { transform: rotate(-28deg) scale(1.08); } 55% { transform: rotate(14deg) scale(1.04); } 80% { transform: rotate(-5deg) scale(1.02); } 100% { transform: rotate(0deg) scale(1); } } @media (prefers-reduced-motion: reduce) { .footer-logo:hover .fl-gcap { animation: none; } } /* ============================================================ Perf: content-visibility on deep below-fold sections — REMOVED ---- This block previously applied `content-visibility: auto` to .faq, .cta-band, .app-dl, .timeline, .metric-grid, .stat-row, .role-tiles, .media-object. iPhone screen recording on iOS Safari (2026-04-26 11:41) showed sections rendering as solid blank cream for 5+ seconds while the user was stationary at a scroll position — that's iOS Safari 18's content-visibility implementation failing to trigger render on stationary-load viewport entry, not a fast-scroll banding flash. The user- visible bug on Safari outweighs the modest Android Chrome scroll-perf win, so the rule is removed pending a proper feature-detection re-introduction (P1 follow-up). ============================================================ */