/* ═════════════════════════════════════════════════════════════════════════ * style.css — the live site's single stylesheet. * * Generated 2026-05-02 by merging the prior `_legacy-base.css` (v1 * structural primitives + legacy design-language) with `style-v2.css` * (Snow Leopard / Aqua design overrides, scoped under * `html[data-design="v2"]`). The two files used to load separately; * consolidating them removes any chance of v1 design-language sneaking * back as a separately-shipped file. * * Snapshots of the pre-merge files live in _archive/v1-design-language/. * * Architecture inside this file: * ▸ The first ~5800 lines are v1 base — flex/grid layouts, positioning, * animations, mobile @media breakpoints, focus rings, base reset. * Plus some legacy decorative rules that v2 overrides below; pruning * those is a future cleanup pass. * ▸ The remainder is v2 design-language overrides (Lucida Grande body, * Inter heads, Aqua-blue accents, soft drop shadows, hover tilts). * Every rule prefixed `html[data-design="v2"]`. The attribute is * hard-coded on in index.html — load-bearing for specificity. * ═════════════════════════════════════════════════════════════════════════ */ /* ═════════════════════════════════════════════════════════════════════════════ * _legacy-base.css — DO NOT EDIT * * This file was `public/style.css` until 2026-05-03. It carries the v1 * design language PLUS the structural layout primitives (flex grids, * positions, animations, mobile breakpoints) that style-v2.css does NOT * redefine. style-v2.css is overrides on top of this file — without this * file the site renders as nearly-unstyled HTML with v2 colors floating * in space. * * The rename + this banner are intentional. This file is no longer the * design source of truth. Treat it as legacy structure pending fold-in * to style-v2.css. * * If you are tempted to add new styles here: STOP. Add to style-v2.css. * * If you are tempted to remove rules here: ALSO STOP. Many rules are * silently load-bearing — verify the rule has an equivalent in * style-v2.css across every page before removing. * * Retirement plan (separate session): audit which rules in this file * have NO override in style-v2.css → those are the structural primitives * v2 silently relies on → fold them into style-v2.css unprefixed → strip * the html[data-design="v2"] prefix from style-v2.css → drop this file. * ═════════════════════════════════════════════════════════════════════════════ */ /* ── Reset ────────────────────────────────────────────────────────────────── */ *, *::before, *::after { margin: 0; padding: 0; box-sizing: border-box; } /* ── ORIGINAL PALETTE (revert by swapping blocks) ────────────────────────── :root { --bg: #f5f5f7; --surface: #fff; --text: #1d1d1f; --text-2: #6e6e73; --text-3: #aeaeb2; --border: rgba(0,0,0,0.06); --green: #30d158; --red: #ff453a; --amber: #ff9f0a; --hero-bg: #13111a; --hero-accent: #e85d2a; --radius: 14px; --ease-out: cubic-bezier(0.16, 1, 0.3, 1); } ───────────────────────────────────────────────────────────────────────────── */ :root { /* warm palette — cream/terracotta/navy */ --bg: #f4f1eb; --surface: #fdfcf9; --text: #2c2926; --text-2: #7a7368; --text-3: #b0a89a; --border: rgba(44, 41, 38, 0.08); --green: #3a9a5c; --red: #c4453a; --amber: #d4890a; /* CURRENT HERO BG (swap blocks to revert) ─────────────────────────────── */ /* --hero-bg: #1a1e2e; ← original: cool navy night sky */ /* --hero-accent: #e85d2a; */ /* ──────────────────────────────────────────────────────────────────────── */ --hero-bg: #0e0f1e; /* sunrise: deep indigo night sky */ --hero-accent: #e85d2a; --hero-glow: #e8e5df; --nav-shell-pad: 3px; --mono: 'Monaco', 'Menlo', 'Andale Mono', 'Courier New', monospace; --radius: 14px; --ease-out: cubic-bezier(0.16, 1, 0.3, 1); /* Mobile/touch design tokens. iOS HIG min tap target = 44px. env() insets fall back to 0px on non-notched devices, so these are safe to use as additive padding everywhere. */ --tap: 44px; --safe-top: env(safe-area-inset-top, 0px); --safe-bottom: env(safe-area-inset-bottom, 0px); --safe-left: env(safe-area-inset-left, 0px); --safe-right: env(safe-area-inset-right, 0px); } :root[data-hero-theme="day"] { --hero-bg: #87c7ee; --hero-accent: #b97c12; --hero-glow: #f7f1df; } html { font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif; -webkit-font-smoothing: antialiased; color: var(--text); background: var(--bg); } body { min-height: 100vh; overflow-x: hidden; display: flex; flex-direction: column; } #app { flex: 1; } /* ═══════════════════════════════════════════════════════════════════════════ */ /* NAV */ /* ═══════════════════════════════════════════════════════════════════════════ */ /* Cream cross-fade scrim used during page transitions. Lives at the * highest z-index so it blankets nav + map + everything else, then * lifts to reveal the new view underneath. Cream (not white) so the * fade reads as part of the app's palette, not a flash to nothing. */ .page-cream-overlay { position: fixed; inset: 0; background: var(--bg); pointer-events: none; opacity: 0; z-index: 200; transition: opacity 250ms cubic-bezier(0.4, 0, 0.2, 1); } .page-cream-overlay.is-fade-in { opacity: 1; pointer-events: all; } .page-cream-overlay.is-fade-out { /* slightly slower fade-out so the destination view has a beat to * settle (basemap tiles, layer creation) before the scrim lifts */ transition: opacity 350ms cubic-bezier(0.4, 0, 0.2, 1); opacity: 0; } @media (prefers-reduced-motion: reduce) { .page-cream-overlay { transition-duration: 0ms; } } /* Brand stack — fixed top-left wrapper holding the logo + the "a project by funnest.world" tagline beneath it. The wrapper owns the positioning so the two elements stay aligned across themes. */ .brand-stack { position: fixed; top: 2px; left: 24px; z-index: 101; display: flex; flex-direction: column; align-items: center; } .brand-logo { display: inline-block; text-decoration: none; padding: 4px 6px; border-radius: 8px; transition: opacity 200ms ease, transform 200ms ease; } .brand-logo-img { display: block; /* Asset is 400×79 cropped to its visible bbox; serve at half-size for a crisp 2× retina render. The image is its own visual extent, so brand-stack's align-items: center lines the tagline up directly beneath it without any layout-vs-visual compensation. */ width: 200px; height: auto; /* Theme-aware tint — solid black art inverts on dark hero. */ transition: filter 200ms ease; } .brand-tagline { margin: -2px 0 0; font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif; font-size: 10px; font-weight: 500; letter-spacing: 0.02em; line-height: 1.2; color: var(--text-3); text-align: center; /* Nudge the tagline left to read centered against the visible wordmark rather than the pixel-center of the logo bbox. The plane icon at the right of the asset adds ~16px of visual weight that pulls perceived "center" rightward; this counter-nudges. */ transform: translateX(-16px); } .brand-tagline-link { color: var(--hero-accent); text-decoration: none; font-weight: 600; transition: opacity 200ms ease; } .brand-tagline-link:hover { text-decoration: underline; } body.is-home .brand-tagline { color: rgba(255, 246, 238, 0.7); text-shadow: 0 1px 12px rgba(10, 14, 28, 0.26); } body.is-home .brand-tagline-link { color: rgba(255, 246, 238, 0.95); } :root[data-hero-theme="day"] body.is-home .brand-tagline { color: rgba(44, 41, 38, 0.7); text-shadow: none; } :root[data-hero-theme="day"] body.is-home .brand-tagline-link { color: rgba(44, 41, 38, 0.95); } .brand-logo:hover { opacity: 0.7; transform: translateY(-1px); } /* On the homepage the nav is dark, so the logo inverts to a light tint to stay legible. Day-mode hero gets a softened black instead. */ body.is-home .brand-logo-img { filter: invert(1) opacity(0.94); } :root[data-hero-theme="day"] body.is-home .brand-logo-img { filter: opacity(0.92); } nav { position: fixed; top: 16px; left: 50%; transform: translateX(-50%); z-index: 100; display: flex; gap: 2px; padding: var(--nav-shell-pad); border-radius: 12px; transition: all 0.6s ease; /* WARM: muted warm glass */ background: rgba(244, 241, 235, 0.7); backdrop-filter: blur(20px) saturate(150%); /* WARM: warm border */ border: 1px solid rgba(44, 41, 38, 0.08); box-shadow: 0 1px 4px rgba(0,0,0,0.05); } .nav-indicator { position: absolute; top: var(--nav-shell-pad); left: var(--nav-shell-pad); width: 0; height: calc(100% - (var(--nav-shell-pad) * 2)); border-radius: 9px; background: var(--surface); box-shadow: 0 1px 3px rgba(0,0,0,0.05); transform: translateX(0); opacity: 0; z-index: 0; transition: transform 0.42s cubic-bezier(0.22, 1, 0.36, 1), width 0.42s cubic-bezier(0.22, 1, 0.36, 1), background 0.35s ease, box-shadow 0.35s ease, opacity 0.18s ease; } nav.dark { background: rgba(255,255,255,0.08); border-color: rgba(255,255,255,0.1); box-shadow: 0 1px 4px rgba(0,0,0,0.2); } nav.dark .nav-indicator { background: rgba(255,255,255,0.12); box-shadow: none; } :root[data-hero-theme="day"] nav.dark { background: rgba(54, 66, 79, 0.2); border-color: rgba(54, 66, 79, 0.26); box-shadow: 0 10px 28px rgba(65, 93, 121, 0.16); } :root[data-hero-theme="day"] nav.dark .nav-indicator { background: rgba(255, 255, 255, 0.54); box-shadow: 0 1px 3px rgba(44, 74, 98, 0.1); } .nav-link { position: relative; z-index: 1; padding: 7px 18px; font-size: 13px; font-weight: 500; text-decoration: none; border-radius: 9px; transition: color 0.3s ease; user-select: none; color: var(--text-2); } .nav-link:hover { color: var(--text); } /* WARM: cream active tab */ .nav-link.active { color: var(--text); } nav.dark .nav-link { color: rgba(255,255,255,0.5); } nav.dark .nav-link:hover { color: rgba(255,255,255,0.85); } nav.dark .nav-link.active { color: #fff; } :root[data-hero-theme="day"] nav.dark .nav-link { color: rgba(36, 54, 71, 0.68); } :root[data-hero-theme="day"] nav.dark .nav-link:hover { color: rgba(29, 46, 62, 0.95); } :root[data-hero-theme="day"] nav.dark .nav-link.active { color: #1f3447; } /* The v1/v2 design-language toggle lived here from 2026-04-30 to 2026-05-02. Removed when v2 became the default; see _archive/v1-design-language/ for the v1 snapshot + revert path. */ /* ═══════════════════════════════════════════════════════════════════════════ */ /* ROUTES PAGE — two separate layers, no layout animation */ /* ═══════════════════════════════════════════════════════════════════════════ */ .routes-page { position: relative; min-height: 100vh; } /* ── Layer 1: Dark hero (fixed, full screen, fades out) ──────────────────── */ .hero-layer { position: fixed; inset: 0; z-index: 10; display: flex; align-items: center; justify-content: center; padding: 0 32px; /* ORIGINAL HERO GRADIENTS (revert by swapping blocks) ────────────────── background: radial-gradient(ellipse 110% 80% at 50% 30%, rgba(232, 93, 42, 0.15) 0%, transparent 60%), radial-gradient(ellipse 70% 50% at 20% 70%, rgba(60, 80, 140, 0.25) 0%, transparent 55%), radial-gradient(ellipse 60% 40% at 80% 50%, rgba(40, 60, 120, 0.15) 0%, transparent 50%), var(--hero-bg); ──────────────────────────────────────────────────────────────────────── */ /* sunrise: warm light from lower-right, indigo upper-left */ background: radial-gradient(ellipse 110% 70% at 90% 95%, rgba(255, 90, 30, 0.42) 0%, transparent 60%), radial-gradient(ellipse 95% 60% at 75% 80%, rgba(255, 55, 40, 0.28) 0%, transparent 55%), radial-gradient(ellipse 120% 50% at 80% 100%, rgba(255, 150, 50, 0.32) 0%, transparent 55%), radial-gradient(ellipse 80% 45% at 55% 72%, rgba(180, 50, 80, 0.16) 0%, transparent 55%), radial-gradient(ellipse 80% 70% at 20% 25%, rgba(50, 40, 120, 0.25) 0%, transparent 55%), radial-gradient(ellipse 60% 50% at 10% 15%, rgba(40, 35, 100, 0.2) 0%, transparent 50%), var(--hero-bg); /* will be animated by JS — starts visible */ opacity: 1; transition: opacity 0.55s ease; /* JS controls fades, theme controls crossfade */ } .hero-layer::before { content: ''; position: absolute; inset: 0; background: radial-gradient(ellipse 120% 80% at 88% 92%, rgba(255, 202, 84, 0.55) 0%, transparent 58%), radial-gradient(ellipse 95% 65% at 74% 78%, rgba(255, 178, 67, 0.34) 0%, transparent 55%), radial-gradient(ellipse 130% 60% at 82% 100%, rgba(255, 229, 154, 0.3) 0%, transparent 54%), radial-gradient(ellipse 95% 60% at 24% 16%, rgba(255, 255, 255, 0.28) 0%, transparent 52%), radial-gradient(ellipse 80% 55% at 18% 36%, rgba(163, 214, 247, 0.24) 0%, transparent 56%), radial-gradient(ellipse 90% 70% at 55% 20%, rgba(126, 193, 237, 0.18) 0%, transparent 54%), #87c7ee; opacity: 0; transition: opacity 0.7s cubic-bezier(0.22, 1, 0.36, 1); pointer-events: none; } :root[data-hero-theme="day"] .hero-layer::before { opacity: 1; } /* grain */ .hero-layer::after { content: ''; position: absolute; inset: 0; background: var(--grain-url); background-size: 200px 200px; opacity: 0.4; pointer-events: none; transition: opacity 0.55s ease; } .hero-layer.hidden { pointer-events: none; } /* ── Glow box — bright screen on dark background ─────────────────────────── */ .glow-box { position: relative; z-index: 1; padding: 52px 72px 28px; border-radius: 12px; max-width: 900px; width: 100%; text-align: center; /* Warm muted screen — not pure white, slightly warm/grey */ background: var(--hero-glow); border: 4px solid #2a2a30; border-radius: 14px; /* Screen glow cast onto dark surroundings */ box-shadow: 0 0 160px 50px rgba(232, 229, 223, 0.1), 0 0 60px 20px rgba(232, 229, 223, 0.07), 0 0 15px 3px rgba(255, 255, 255, 0.08); transition: background 0.45s ease, border-color 0.45s ease, box-shadow 0.6s cubic-bezier(0.22, 1, 0.36, 1); } :root[data-hero-theme="day"] .glow-box { border-color: rgba(87, 104, 123, 0.8); box-shadow: 0 0 180px 52px rgba(255, 223, 147, 0.14), 0 0 70px 24px rgba(255, 248, 214, 0.12), 0 0 18px 4px rgba(255, 255, 255, 0.1); } /* Grain on the screen surface */ .glow-box::after { content: ''; position: absolute; inset: 0; border-radius: inherit; pointer-events: none; z-index: 0; background: var(--grain-url); background-size: 200px 200px; opacity: 0.12; } /* ── Sentence (hero state) ───────────────────────────────────────────────── */ .sentence-main { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; justify-content: center; font-size: clamp(26px, 4.5vw, 44px); font-weight: 600; letter-spacing: -0.025em; line-height: 1.5; color: var(--text); } .sentence-sub { display: block; margin-top: 28px; font-size: clamp(16px, 2.2vw, 22px); font-weight: 600; letter-spacing: -0.01em; color: var(--hero-accent); min-height: 1.4em; transition: color 0.4s ease; } /* The hero
wraps the sentence + subtitle + CTA so Enter triggers native form submission (single code path with the Fly button click). display: contents removes the form from layout entirely — children behave as if they were direct children of .glow-box, preserving the existing flow exactly. */ .hero-form { display: contents; } /* CTA row — Fly button on its own line, centered below the subtitle. Always rendered; .go-btn:disabled handles the greyed pre-fill state so no slot ever appears empty. */ .hero-cta-row { display: flex; justify-content: center; margin-top: 24px; } .hero-cta-row .go-btn { opacity: 1; transform: none; pointer-events: all; transition: opacity 0.2s ease, background 0.2s ease, box-shadow 0.2s ease, transform 0.2s ease; } .hero-cta-row .go-btn:disabled { opacity: 0.4; cursor: not-allowed; pointer-events: none; box-shadow: none; transform: none; } /* ── Hero center column: glow-box + followup link ────────────────────────── */ .hero-center { display: flex; flex-direction: column; align-items: center; width: 100%; max-width: 900px; gap: 26px; } .hero-theme-toggle { position: fixed; left: 18px; bottom: 18px; z-index: 120; display: inline-flex; align-items: center; gap: 4px; padding: 4px; border-radius: 999px; background: rgba(255, 255, 255, 0.1); border: 1px solid rgba(255, 255, 255, 0.14); backdrop-filter: blur(18px) saturate(145%); box-shadow: 0 6px 24px rgba(0, 0, 0, 0.14); transition: background 0.35s ease, border-color 0.35s ease, box-shadow 0.35s ease; } .hero-toggle-btn { font: inherit; font-size: 12px; color: rgba(255, 255, 255, 0.72); background: transparent; border: none; border-radius: 999px; padding: 7px 11px; cursor: pointer; transition: color 0.2s ease, background 0.2s ease; } .hero-toggle-btn:hover { color: rgba(255, 255, 255, 0.95); } .hero-toggle-btn.active { color: #fff; background: rgba(255, 255, 255, 0.16); } :root[data-hero-theme="day"] .hero-theme-toggle { background: rgba(248, 252, 255, 0.3); border-color: rgba(255, 255, 255, 0.34); box-shadow: 0 10px 28px rgba(92, 136, 170, 0.16); } :root[data-hero-theme="day"] .hero-toggle-btn { color: rgba(41, 69, 95, 0.72); } :root[data-hero-theme="day"] .hero-toggle-btn:hover { color: rgba(41, 69, 95, 0.98); } :root[data-hero-theme="day"] .hero-toggle-btn.active { color: #23405d; background: rgba(255, 255, 255, 0.52); } /* Typewriter cursor */ .typewriter-cursor { display: inline-block; width: 2px; height: 0.85em; background: var(--hero-accent); vertical-align: text-bottom; margin-left: 1px; animation: blink 0.6s step-end infinite; transition: background 0.4s ease; } @keyframes blink { 50% { opacity: 0; } } /* ── Glow box inner flash (child element, lives inside the box) ──────────── */ .glow-box-flash { position: absolute; inset: 0; border-radius: inherit; background: white; opacity: 0; pointer-events: none; z-index: 10; } /* ── Airport inputs (bright screen) ──────────────────────────────────────── */ .airport-input-wrapper { position: relative; display: inline-flex; } .airport-input { font-family: var(--mono); font-size: inherit; font-weight: 400; color: var(--text); background: rgba(0, 0, 0, 0.04); border: 1.5px solid rgba(0, 0, 0, 0.12); border-radius: 8px; padding: 6px 14px; width: 130px; text-align: center; text-transform: uppercase; letter-spacing: 0.06em; outline: none; transition: all 0.25s ease; } .airport-input::placeholder { color: var(--text-3); font-weight: 400; text-transform: uppercase; } .airport-input:focus { border-color: rgba(0, 0, 0, 0.25); background: rgba(0, 0, 0, 0.02); box-shadow: 0 0 0 3px rgba(0, 0, 0, 0.05); } .go-btn { font-family: inherit; font-size: 15px; font-weight: 600; color: #fff; background: var(--text); border: none; border-radius: 8px; padding: 8px 20px; cursor: pointer; transition: all 0.3s ease; opacity: 0; transform: translateY(6px); pointer-events: none; letter-spacing: -0.01em; } .go-btn.visible { opacity: 1; transform: translateY(0); pointer-events: all; } .go-btn:hover { box-shadow: 0 4px 16px rgba(0,0,0,0.12); transform: translateY(-1px); } .go-btn:active { transform: translateY(1px); } .go-arrow { display: inline-block; margin-left: 2px; transition: transform 0.2s ease; } .go-btn:hover .go-arrow { transform: translateX(3px); } /* ── Dropdown (hero state — high z-index) ────────────────────────────────── */ .dropdown { position: absolute; top: calc(100% + 8px); left: 50%; transform: translateX(-50%) translateY(-6px); background: #fff; border: 1px solid rgba(0,0,0,0.08); border-radius: 12px; box-shadow: 0 12px 40px rgba(0,0,0,0.2); min-width: 220px; max-height: 260px; overflow-y: auto; z-index: 500; /* above everything */ opacity: 0; pointer-events: none; transition: opacity 0.15s ease, transform 0.15s ease; overscroll-behavior: contain; color: var(--text); } .dropdown.open { opacity: 1; pointer-events: all; transform: translateX(-50%) translateY(0); } .dropdown-item { padding: 10px 14px; cursor: pointer; font-size: 14px; display: flex; justify-content: space-between; align-items: center; transition: background 0.1s; } .dropdown-item:first-child { border-radius: 11px 11px 0 0; } .dropdown-item:last-child { border-radius: 0 0 11px 11px; } /* WARM: warm hover */ .dropdown-item:hover, .dropdown-item.highlighted { background: #f4f1eb; } .dropdown-item .code { font-family: var(--mono); font-weight: 400; font-size: 14px; letter-spacing: 0.04em; } .dropdown-item .name { color: var(--text-3); font-size: 13px; margin-left: 14px; } /* ── Split-flap departure board overlay ─────────────────────────────────── */ .flap-display { display: inline-flex; gap: 4px; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); z-index: 3; opacity: 0; pointer-events: none; transition: opacity 0.15s ease; } .flap-display.visible { opacity: 1; } /* Hide input text whenever the flap overlay is visible — keying off the overlay's own state (not focus) so the input text never bleeds through the flap cells when the animation fires while the input is still focused (e.g. selecting a destination without a follow-up focus shift). */ .airport-input-wrapper.has-flap:has(.flap-display.visible) .airport-input { color: transparent !important; caret-color: transparent; } .flap-cell { display: flex; align-items: center; justify-content: center; min-width: 0.7em; height: 1.3em; padding: 0 2px; background: rgb(10, 14, 28); border-radius: 3px; font-family: var(--mono); font-size: inherit; line-height: 1; color: rgba(255, 255, 255, 0.7); position: relative; box-shadow: 0 1px 3px rgba(0, 0, 0, 0.4), inset 0 1px 0 rgba(255, 255, 255, 0.06); } /* The horizontal split — the signature departure-board detail */ .flap-cell::after { content: ''; position: absolute; left: 0; right: 0; top: calc(50% - 0.5px); height: 1px; background: rgba(0, 0, 0, 0.25); z-index: 1; } /* Character "lands" — brightens */ .flap-cell.landed { color: rgba(255, 255, 255, 0.95); } /* ── Layer 2: Results page (normal flow, always rendered) ────────────────── */ .results-page { position: relative; z-index: 5; min-height: 100vh; padding: 96px 24px 80px; background: var(--bg); /* starts hidden, JS fades it in */ opacity: 0; pointer-events: none; } .results-page.visible { opacity: 1; pointer-events: all; } /* ── Compact input bar (sits at top of results page) ─────────────────────── */ .compact-bar { max-width: 600px; margin: 0 auto 32px; display: flex; align-items: center; justify-content: center; gap: 8px; font-size: 15px; font-weight: 500; color: var(--text-2); } .compact-bar-sentence { gap: 6px; } .compact-bar-sentence > span:first-child, .compact-bar-sentence > span:nth-of-type(2) { white-space: nowrap; } /* WARM: warm compact inputs */ .compact-bar .airport-input { color: var(--text); background: var(--surface); border: 1.5px solid rgba(44, 41, 38, 0.1); width: 60px; padding: 4px 8px; font-size: 14px; border-radius: 7px; } .compact-bar .airport-input::placeholder { color: var(--text-3); } .compact-bar .airport-input:focus { border-color: rgba(0,0,0,0.25); box-shadow: 0 0 0 3px rgba(0,0,0,0.04); background: var(--surface); } .compact-bar .go-btn { padding: 4px 14px; font-size: 12px; border-radius: 6px; color: #fff; background: var(--text); margin-left: 2px; opacity: 1; transform: none; pointer-events: all; } .compact-bar .go-btn:hover { background: #333; box-shadow: 0 2px 8px rgba(0,0,0,0.1); transform: none; } .results-inner { max-width: 600px; margin: 0 auto; } .results-header { display: flex; align-items: baseline; justify-content: space-between; margin-bottom: 20px; } .results-route { font-size: 22px; font-weight: 700; letter-spacing: -0.025em; } .results-route .code { font-family: var(--mono); font-weight: 400; letter-spacing: 0.02em; } .results-route .arrow { color: var(--text-3); margin: 0 2px; font-weight: 400; } .results-count { font-size: 13px; color: var(--text-3); font-weight: 500; } .no-results { text-align: center; padding: 80px 24px; } .no-results .big { font-size: 18px; font-weight: 600; color: var(--text-2); margin-bottom: 6px; } .no-results .sub { font-size: 14px; color: var(--text-3); line-height: 1.5; } /* ═══════════════════════════════════════════════════════════════════════════ */ /* WINNER CARD — breakout card for #1 result on route search */ /* ═══════════════════════════════════════════════════════════════════════════ */ .winner-card { position: relative; background: linear-gradient(180deg, #fffefa 0%, #f9f6ee 100%); border: 1px solid var(--border); border-radius: var(--radius); padding: 24px 28px 22px; margin-bottom: 20px; } .winner-card { cursor: pointer; transition: box-shadow 0.2s ease, transform 0.2s ease; } .winner-card:hover { box-shadow: 0 4px 20px rgba(0,0,0,0.08); transform: translateY(-1px); } .winner-card:active { transform: translateY(0); } .winner-card::after { content: "›"; position: absolute; right: 16px; top: 50%; transform: translateY(-50%); font-size: 24px; font-weight: 300; color: var(--text-3); opacity: 0.4; transition: opacity 0.2s ease, transform 0.2s ease; z-index: 2; } .winner-card:hover::after { opacity: 0.8; transform: translateY(-50%) translateX(2px); } /* Grain overlay — on top of content, pointer-events none */ .winner-card::before { content: ''; position: absolute; inset: 0; border-radius: inherit; pointer-events: none; z-index: 2; background: var(--grain-url); background-size: 200px 200px; opacity: 0.12; } .winner-label { font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.08em; color: var(--text-2); margin-bottom: 14px; } .winner-name { font-size: 26px; font-weight: 700; color: var(--text); letter-spacing: -0.03em; } .winner-code { font-size: 14px; font-weight: 600; color: var(--text-3); letter-spacing: 0.03em; margin-left: 8px; } .winner-metrics { display: flex; gap: 32px; margin-top: 20px; flex-wrap: wrap; } .winner-metric { display: flex; flex-direction: column; gap: 3px; } .winner-metric-value { font-size: 34px; font-weight: 700; letter-spacing: -0.03em; line-height: 1; font-variant-numeric: tabular-nums; } .winner-metric-label { font-size: 11px; font-weight: 700; color: var(--text-3); text-transform: uppercase; letter-spacing: 0.06em; } /* Entrance animation */ .winner-card.will-enter { opacity: 0; transform: translateY(16px); } /* ═══════════════════════════════════════════════════════════════════════════ */ /* SHARED: AIRLINE / AIRPORT LIST ROWS */ /* ═══════════════════════════════════════════════════════════════════════════ */ /* WARM: warm surface with grain overlay */ .airline-list { position: relative; display: flex; flex-direction: column; background: var(--surface); border-radius: var(--radius); overflow: hidden; border: 1.5px solid rgba(44, 41, 38, 0.1); box-shadow: 0 1px 3px rgba(0,0,0,0.03), 0 4px 16px rgba(0,0,0,0.03); } /* WARM: subtle grain on the list surface */ .airline-list::after { content: ''; position: absolute; inset: 0; border-radius: inherit; pointer-events: none; z-index: 0; background: var(--grain-url); background-size: 200px 200px; opacity: 0.06; } .airline-row { display: grid; grid-template-columns: 40px 1fr auto; align-items: center; gap: 0 14px; padding: 18px 24px; background: var(--surface); transition: background 0.15s; /* entrance animation handled by JS, start visible by default for non-animated contexts */ } /* Connection-panel rows hide the rank cell (it's meaningless once we've * pinned a non-default winner and grouped the rest by alliance). Collapse * the column so the name doesn't sit in front of empty space. */ .airline-row.no-rank { grid-template-columns: 1fr auto; } .airline-row:not(:last-child) { border-bottom: 1px solid var(--border); } /* WARM: warm hover */ .airline-row:hover { background: #f6f3ed; } /* animate-in class: JS adds this then removes it */ .airline-row.will-enter { opacity: 0; transform: translateY(16px); } .row-rank { font-family: var(--mono); font-size: 15px; font-weight: 400; color: var(--text-3); text-align: center; } .airline-row.top-1 .row-rank { color: #b8860b; } .airline-row.top-2 .row-rank { color: #8e8e93; } .airline-row.top-3 .row-rank { color: #a0522d; } .row-center { display: flex; flex-direction: column; gap: 2px; min-width: 0; } .row-name { font-size: 15px; font-weight: 600; color: var(--text); letter-spacing: -0.01em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .row-code { font-family: var(--mono); font-weight: 400; color: var(--text-3); font-size: 12px; letter-spacing: 0.04em; margin-left: 6px; } .row-sub { font-size: 13px; color: var(--text-3); display: flex; gap: 14px; } .row-sub span { white-space: nowrap; } .row-sub .c-green { color: var(--green); font-weight: 500; } .row-sub .c-amber { color: var(--amber); font-weight: 500; } .row-sub .c-red { color: var(--red); font-weight: 500; } .row-primary { text-align: right; padding-left: 20px; flex-shrink: 0; } .row-primary-value { font-family: var(--mono); font-size: 22px; font-weight: 400; letter-spacing: 0; line-height: 1; } .row-primary-label { font-size: 10px; font-weight: 600; color: var(--text-3); text-transform: uppercase; letter-spacing: 0.05em; margin-top: 3px; } .row-metrics { display: flex; gap: 16px; padding-left: 20px; flex-shrink: 0; } .row-metric { text-align: center; min-width: 60px; } .row-metric-value { font-family: var(--mono); font-size: 20px; font-weight: 400; letter-spacing: 0; line-height: 1; } .row-metric-label { font-size: 9px; font-weight: 600; color: var(--text-3); text-transform: uppercase; letter-spacing: 0.05em; margin-top: 3px; } .c-green { color: var(--green); } .c-amber { color: var(--amber); } .c-red { color: var(--red); } .c-muted { color: var(--text-3); } .row-nodata { font-size: 13px; color: var(--text-3); font-style: italic; } /* Low-sample caveat — small amber "!" icon next to the airline name. * Lighter visual weight than the old "limited sample" text. Tooltip * on hover surfaces the full caveat. */ .row-caveat { display: inline-flex; align-items: center; justify-content: center; width: 16px; height: 16px; margin-left: 8px; border-radius: 50%; background: color-mix(in srgb, var(--amber) 22%, transparent); color: color-mix(in srgb, var(--amber) 90%, var(--text)); font-family: var(--mono); font-weight: 700; font-size: 11px; line-height: 1; cursor: help; flex: 0 0 auto; vertical-align: 1px; } .row-caveat::before { content: none; } .click-hint { font-size: 12px; color: var(--text-3); margin-bottom: 8px; padding: 0 4px; } .airline-row.clickable { cursor: pointer; position: relative; padding-right: 28px; } .airline-row.clickable::after { content: "›"; position: absolute; right: 12px; top: 50%; transform: translateY(-50%); font-size: 20px; font-weight: 300; color: var(--text-3); opacity: 0.5; transition: opacity 0.2s ease, transform 0.2s ease; } .airline-row.clickable:hover::after { opacity: 1; transform: translateY(-50%) translateX(2px); } /* WARM: warm clickable hover */ .airline-row.clickable:hover { background: #f6f3ed; } /* ═══════════════════════════════════════════════════════════════════════════ */ /* RANKINGS + AIRPORTS PAGES */ /* ═══════════════════════════════════════════════════════════════════════════ */ .rankings-page, .airports-page { max-width: 600px; margin: 0 auto; padding: 96px 24px 80px; } .controls { display: flex; align-items: center; gap: 6px; margin-bottom: 20px; flex-wrap: wrap; } .controls-airports { width: fit-content; margin-left: auto; margin-right: auto; justify-content: center; } .controls-label { font-size: 13px; color: var(--text-3); font-weight: 500; margin-right: 4px; } .controls-sep { width: 1px; height: 20px; background: var(--border); margin: 0 4px; } /* WARM: warm pill buttons */ .sort-btn { font-family: inherit; font-size: 13px; font-weight: 500; color: var(--text-2); background: var(--surface); border: 1.5px solid rgba(44, 41, 38, 0.1); border-radius: 20px; padding: 6px 15px; cursor: pointer; transition: all 0.15s; user-select: none; } .sort-btn:hover { border-color: var(--text-3); color: var(--text); } .sort-btn.active { color: var(--surface); background: var(--text); border-color: var(--text); } /* ── Sort group pushes to the right edge of the controls bar ───────────── */ .controls .sort-group { margin-left: auto; } /* ── Segmented control (iOS-style) ──────────────────────────────────────── */ .segmented { position: relative; display: grid; grid-template-columns: 1fr 1fr; align-items: stretch; padding: 3px; background: rgba(44, 41, 38, 0.06); border-radius: 20px; isolation: isolate; } .segmented-btn { position: relative; z-index: 1; grid-row: 1; font-family: inherit; font-size: 13px; font-weight: 500; color: var(--text-2); background: transparent; border: none; border-radius: 16px; padding: 5px 18px; min-width: 64px; cursor: pointer; transition: color 0.2s ease; user-select: none; } .segmented-btn:nth-child(1) { grid-column: 1; } .segmented-btn:nth-child(2) { grid-column: 2; } .segmented-btn:hover { color: var(--text); } .segmented-btn.active { color: var(--text); font-weight: 600; } .segmented-thumb { position: absolute; top: 3px; bottom: 3px; left: 3px; width: calc(50% - 3px); background: var(--surface); border-radius: 16px; box-shadow: 0 1px 3px rgba(0,0,0,0.08), 0 0 0 0.5px rgba(44, 41, 38, 0.06); transition: transform 0.32s cubic-bezier(0.32, 0.72, 0, 1); z-index: 0; } .segmented-thumb[data-pos="1"] { transform: translateX(100%); } /* ── Sort group: dropdown + direction pill ──────────────────────────────── */ .sort-group { display: inline-flex; align-items: center; gap: 6px; } .sort-dir-btn { display: inline-flex; align-items: center; gap: 7px; padding: 6px 13px; } .sort-dir-label { line-height: 1; } .sort-dir-arrow { display: inline-block; font-size: 9px; line-height: 1; color: var(--text-3); transition: transform 0.28s cubic-bezier(0.32, 0.72, 0, 1), color 0.15s ease; } .sort-dir-btn:hover .sort-dir-arrow { color: var(--text-2); } .sort-dir-btn.desc .sort-dir-arrow { transform: rotate(180deg); } .ui-atmosphere .segmented { background: rgba(72, 57, 36, 0.08); } .ui-atmosphere .segmented-thumb { background: #fcfaf5; box-shadow: 0 1px 3px rgba(94, 68, 27, 0.1), 0 0 0 0.5px rgba(72, 57, 36, 0.06); } .list-header { display: flex; justify-content: space-between; margin-bottom: 8px; padding: 0 4px; } .list-header-label { font-size: 11px; font-weight: 600; color: var(--text-3); text-transform: uppercase; letter-spacing: 0.08em; } /* ═══════════════════════════════════════════════════════════════════════════ */ /* MODAL */ /* ═══════════════════════════════════════════════════════════════════════════ */ .modal-overlay { position: fixed; inset: 0; z-index: 300; display: flex; align-items: center; justify-content: center; padding: 24px; opacity: 0; pointer-events: none; transition: opacity 0.35s ease; } .modal-overlay.open { opacity: 1; pointer-events: all; } .modal-backdrop { position: absolute; inset: 0; background: rgba(0, 0, 0, 0.4); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); } /* WARM: warm modal panel with border. Scoped font override: inside a modal, `var(--mono)` resolves to Inter so stat values and codes feel modern instead of the retro Share Tech Mono used elsewhere on the site. Same move as .flap-board-page. */ .modal-panel { --mono: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif; position: relative; width: 100%; max-width: 560px; max-height: 80vh; overflow: hidden; border-radius: 16px; background: var(--surface); border: 1.5px solid rgba(44, 41, 38, 0.1); box-shadow: 0 24px 80px rgba(0,0,0,0.12), 0 8px 24px rgba(0,0,0,0.06); transform: scale(0.95) translateY(12px); transition: transform 0.4s var(--ease-out); display: flex; flex-direction: column; font-feature-settings: 'tnum', 'ss01'; } .modal-overlay.open .modal-panel { transform: scale(1) translateY(0); } /* Header — flat cream surface with a dashed rule, Board-style. */ .modal-header { padding: 22px 28px 18px; background: transparent; border-bottom: 1px dashed rgba(44, 41, 38, 0.18); flex-shrink: 0; } .modal-kicker { font-family: var(--mono); font-size: 11px; font-weight: 500; letter-spacing: 0.14em; text-transform: uppercase; color: var(--text-3); margin-bottom: 10px; } .modal-title { display: flex; align-items: center; gap: 12px; font-size: 22px; font-weight: 700; letter-spacing: -0.025em; line-height: 1.15; margin-bottom: 4px; } .modal-title-text { min-width: 0; } .modal-code { /* legacy inline code span — kept so any other caller still works */ font-size: 14px; font-weight: 500; color: var(--text-3); margin-left: 8px; letter-spacing: 0.02em; } .modal-subtitle { font-size: 14px; color: var(--text-2); } /* Paper-tile IATA — visual callback to the Board's flap cells. Static (no flap animation) since it's a detail view, not a leaderboard. */ .modal-code-tile { display: inline-flex; align-items: center; justify-content: center; min-width: 42px; height: 34px; padding: 0 8px; font-family: var(--mono); font-size: 16px; font-weight: 600; letter-spacing: 0.02em; color: var(--text); background: #f7efdd; border: 1px solid rgba(44, 41, 38, 0.14); border-radius: 3px; box-shadow: 0 1px 0 rgba(44, 41, 38, 0.06), inset 0 -1px 0 rgba(44, 41, 38, 0.08); position: relative; flex-shrink: 0; } /* Signature horizontal split line */ .modal-code-tile::after { content: ''; position: absolute; left: 0; right: 0; top: calc(50% - 0.5px); height: 0.5px; background: rgba(44, 41, 38, 0.18); pointer-events: none; } .route-codes { font-family: var(--mono); letter-spacing: 0.03em; } /* Route section labels — quiet mono kicker with a dot prefix, instead of a loud colored header. Color lives in the dot; label stays muted. */ .route-section-label { font-family: var(--mono); font-size: 11px; font-weight: 500; text-transform: uppercase; letter-spacing: 0.14em; color: var(--text-3); padding: 20px 0 10px; margin: 0; display: flex; align-items: center; gap: 10px; } .route-section-label::before { content: ''; width: 8px; height: 8px; border-radius: 999px; background: var(--green); box-shadow: 0 0 0 1px rgba(44, 41, 38, 0.04); } .route-section-label.worst::before { background: var(--red); } .route-section-label.worst { padding-top: 22px; } .modal-close { position: absolute; top: 16px; right: 16px; width: 32px; height: 32px; display: flex; align-items: center; justify-content: center; border: none; background: rgba(0,0,0,0.04); border-radius: 50%; font-size: 16px; color: var(--text-2); cursor: pointer; transition: all 0.15s; line-height: 1; } .modal-close:hover { background: rgba(0,0,0,0.08); color: var(--text); } /* Low-sample caveat — subtle amber strip between header and stats. Only rendered when measured_flights < LOW_SAMPLE_THRESHOLD. */ .modal-caveat { display: flex; align-items: center; gap: 10px; padding: 11px 28px; background: rgba(212, 137, 10, 0.06); border-bottom: 1px solid rgba(212, 137, 10, 0.2); font-family: var(--mono); font-size: 11px; font-weight: 500; letter-spacing: 0.12em; text-transform: uppercase; color: var(--amber); flex-shrink: 0; } .modal-caveat-dot { width: 8px; height: 8px; border-radius: 999px; background: transparent; box-shadow: inset 0 0 0 1.5px var(--amber); flex-shrink: 0; } /* Stat strip — flat, divided cells instead of floating rounded cards. Reads like a single data line at the top of the modal. */ .modal-stats { display: flex; padding: 16px 28px; gap: 0; flex-shrink: 0; border-bottom: 1px solid rgba(44, 41, 38, 0.08); } .modal-stat { flex: 1; min-width: 0; padding: 4px 18px; background: transparent; border: 0; border-left: 1px solid rgba(44, 41, 38, 0.08); border-radius: 0; box-shadow: none; display: flex; flex-direction: column; gap: 6px; } .modal-stat:first-child { border-left: 0; padding-left: 0; } .modal-stat:last-child { padding-right: 0; } .modal-stat-value { font-family: var(--mono); font-size: 20px; font-weight: 600; letter-spacing: -0.005em; font-variant-numeric: tabular-nums; color: var(--text); white-space: nowrap; } .modal-stat-label { font-family: var(--mono); font-size: 10px; font-weight: 500; color: var(--text-3); text-transform: uppercase; letter-spacing: 0.12em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } /* 5-cell variant (airport modal) — tighter padding + slightly smaller labels so 5 cells fit inside a 560px modal without clipping. */ .modal-stats-5 .modal-stat { padding: 4px 10px; } .modal-stats-5 .modal-stat:first-child { padding-left: 0; } .modal-stats-5 .modal-stat:last-child { padding-right: 0; } .modal-stats-5 .modal-stat-label { letter-spacing: 0.1em; } .modal-stats-5 .modal-stat-value { font-size: 18px; } /* Day-of-week strip inside the flight-detail modal, below the 3 stats. */ .modal-dow { padding: 8px 24px 12px; flex-shrink: 0; } .modal-dow .airline-row-dow { margin: 0; padding: 12px 14px; background: var(--surface); border: 1px solid var(--border); border-radius: 10px; gap: 12px; } .modal-body { overflow-y: auto; padding: 4px 16px 24px; flex: 1; overscroll-behavior: contain; } .modal-body .airline-list { border: none; box-shadow: none; border-radius: 10px; } .modal-body .airline-row { padding: 14px 16px; gap: 0 10px; grid-template-columns: 32px 1fr auto; } .modal-body .row-primary-value { font-size: 18px; } /* Fix alignment across route rows — lock each metric to a stable width so "7m late" and "18m late" sit in the same column regardless of char count. Smaller value size than the default 20px so "14m early" stays on one line. */ .modal-body .row-metric { width: 92px; min-width: 92px; flex-shrink: 0; } .modal-body .row-metric-value { font-size: 16px; white-space: nowrap; } .modal-body .row-metric-label { white-space: nowrap; } /* ── Disclaimers ────────────────────────────────────────────────────────── */ .disclaimer { display: block; text-align: center; padding: 20px 16px 8px; font-size: 11px; font-weight: 400; color: #b0a89a; letter-spacing: 0.01em; line-height: 1.4; opacity: 0.8; } .disclaimer + .disclaimer { padding-top: 2px; } .dot-note { font-size: 11px; color: #b0a89a; line-height: 1.4; padding: 4px 0 0; letter-spacing: 0.01em; } /* ── Flight Detail Modal ─────────────────────────────────────────────────── */ .flight-modal .modal-panel { max-width: 620px; } .flight-list { display: flex; flex-direction: column; gap: 0; } .flight-date-label { font-size: 11px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.05em; color: var(--text-3); padding: 14px 8px 6px; border-bottom: 1px solid var(--border); } .flight-date-group:first-child .flight-date-label { padding-top: 4px; } .flight-row { display: flex; align-items: center; gap: 12px; padding: 10px 8px; border-bottom: 1px solid rgba(0,0,0,0.03); transition: background 0.15s; } .flight-row:last-child { border-bottom: none; } .flight-row:hover { background: rgba(0,0,0,0.02); } .flight-num { font-family: var(--mono); font-size: 13px; font-weight: 600; color: var(--text); min-width: 72px; letter-spacing: -0.01em; } .flight-times { display: flex; align-items: center; gap: 8px; flex: 1; } .flight-time-pair { display: flex; flex-direction: column; align-items: center; gap: 1px; } .flight-time-label { font-size: 9px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.06em; color: var(--text-3); } .flight-time-value { font-family: var(--mono); font-size: 14px; color: var(--text-2); } .flight-arrow { color: var(--text-3); font-size: 12px; margin: 6px 2px 0; } .flight-delay { font-family: var(--mono); font-size: 13px; font-weight: 600; padding: 3px 10px; border-radius: 20px; white-space: nowrap; min-width: 72px; text-align: center; } .flight-delay.c-green { background: rgba(58, 154, 92, 0.1); color: var(--green); } .flight-delay.c-amber { background: rgba(212, 137, 10, 0.1); color: var(--amber); } .flight-delay.c-red { background: rgba(196, 69, 58, 0.1); color: var(--red); } .flight-delay.c-muted { background: rgba(0,0,0,0.03); color: var(--text-3); } /* ── Region Dropdown ────────────────────────────────────────────────────── */ .region-dropdown { position: relative; display: inline-flex; } .region-trigger { display: inline-flex; align-items: center; gap: 5px; } .region-caret { font-size: 10px; color: var(--text-3); transition: transform 0.25s var(--ease-out); display: inline-block; } .region-menu.open + .region-trigger .region-caret, .region-dropdown:has(.region-menu.open) .region-caret { transform: rotate(180deg); } .region-menu { position: absolute; top: calc(100% + 6px); left: 0; min-width: 180px; background: var(--surface); border: 1.5px solid rgba(44, 41, 38, 0.1); border-radius: 12px; box-shadow: 0 12px 40px rgba(0,0,0,0.12), 0 2px 8px rgba(0,0,0,0.04); z-index: 200; overflow: hidden; /* animation */ opacity: 0; transform: translateY(-4px); pointer-events: none; transition: opacity 0.2s cubic-bezier(0.16, 1, 0.3, 1), transform 0.25s cubic-bezier(0.16, 1, 0.3, 1); } .region-menu.open { opacity: 1; transform: translateY(0); pointer-events: all; } .region-option { padding: 9px 16px; font-size: 13px; font-weight: 500; color: var(--text-2); cursor: pointer; transition: background 0.12s ease, color 0.12s ease; user-select: none; white-space: nowrap; } .region-option:first-child { padding-top: 10px; } .region-option:last-child { padding-bottom: 10px; } .region-option:hover { background: rgba(44, 41, 38, 0.04); color: var(--text); } .region-option.active { color: var(--text); font-weight: 600; background: rgba(44, 41, 38, 0.06); } .ui-editorial .region-menu { background: #fcfaf5; border-color: rgba(72, 57, 36, 0.1); box-shadow: 0 12px 40px rgba(94, 68, 27, 0.1), 0 2px 8px rgba(0,0,0,0.04); } .ui-editorial .region-option:hover { background: #f8f2e8; } .ui-editorial .region-option.active { background: #f3ead6; } /* ── Pagination ─────────────────────────────────────────────────────────── */ .pagination { display: flex; align-items: center; justify-content: center; gap: 8px; padding: 24px 0 8px; } .pagination-pages { display: flex; align-items: center; gap: 2px; } .pagination-btn { font-family: inherit; font-size: 13px; font-weight: 500; color: var(--text-2); background: var(--surface); border: 1.5px solid rgba(44, 41, 38, 0.1); border-radius: 8px; padding: 7px 14px; text-decoration: none; cursor: pointer; transition: all 0.15s ease; user-select: none; } .pagination-btn:hover:not(.disabled) { border-color: var(--text-3); color: var(--text); } .pagination-btn.disabled { opacity: 0.35; cursor: default; } .pagination-page { font-family: var(--mono); font-size: 13px; font-weight: 400; color: var(--text-3); background: none; border: none; border-radius: 8px; padding: 7px 11px; text-decoration: none; cursor: pointer; transition: all 0.15s ease; min-width: 36px; text-align: center; } .pagination-page:hover:not(.active) { background: rgba(44, 41, 38, 0.04); color: var(--text); } .pagination-page.active { color: var(--surface); background: var(--text); border-radius: 8px; font-weight: 400; } .pagination-ellipsis { font-size: 13px; color: var(--text-3); padding: 0 4px; user-select: none; } /* ── Loading ─────────────────────────────────────────────────────────────── */ .loading { display: flex; align-items: center; justify-content: center; padding: 80px; color: var(--text-3); font-size: 14px; font-weight: 500; } .spinner { width: 16px; height: 16px; border: 2px solid var(--border); border-top-color: var(--text-3); border-radius: 50%; animation: spin 0.6s linear infinite; margin-right: 10px; } @keyframes spin { to { transform: rotate(360deg); } } /* ═══════════════════════════════════════════════════════════════════════════ */ /* "WHY?" LINK — fixed top-right, handwritten */ /* ═══════════════════════════════════════════════════════════════════════════ */ .why-link { position: fixed; top: 20px; right: 24px; z-index: 100; font-family: 'Kalam', cursive; font-size: 17px; font-weight: 700; color: var(--text-2); text-decoration: none; transition: color 0.25s ease; } .why-link:hover { color: var(--text); } /* Light version when hero is visible */ nav.dark ~ .why-link { color: rgba(255, 255, 255, 0.4); transition: color 0.6s ease; } nav.dark ~ .why-link:hover { color: rgba(255, 255, 255, 0.8); } :root[data-hero-theme="day"] nav.dark ~ .why-link { color: rgba(36, 54, 71, 0.45); } :root[data-hero-theme="day"] nav.dark ~ .why-link:hover { color: rgba(29, 46, 62, 0.85); } /* ═══════════════════════════════════════════════════════════════════════════ */ /* WHY PAGE */ /* ═══════════════════════════════════════════════════════════════════════════ */ .why-page { max-width: 480px; margin: 0 auto; padding: 120px 24px 80px; } .why-title { font-size: 38px; font-weight: 700; letter-spacing: -0.03em; color: var(--text); margin-bottom: 28px; } .why-content p { font-size: 16px; line-height: 1.7; color: var(--text); margin-bottom: 18px; } .why-content em { font-style: italic; color: var(--text); } .why-content ul { list-style: none; padding: 0; margin: 0 0 18px; display: flex; flex-direction: column; gap: 10px; } .why-content li { font-size: 15px; line-height: 1.55; color: var(--text); padding-left: 18px; position: relative; } .why-content li::before { content: '·'; position: absolute; left: 4px; font-weight: 700; color: var(--text-3); } .why-content strong { font-weight: 600; color: var(--text); } .why-sign-off { margin-top: 28px; margin-bottom: 0 !important; color: var(--text); } .ui-atmosphere .compact-bar, .ui-atmosphere .controls { position: relative; background: none; border: none; box-shadow: none; backdrop-filter: none; } .ui-atmosphere .compact-bar { margin-bottom: 28px; } .ui-atmosphere .controls.controls-airports { width: fit-content; max-width: none; } .ui-atmosphere .winner-card { background: radial-gradient(ellipse 120% 90% at 0% 0%, rgba(255, 241, 209, 0.62) 0%, transparent 58%), linear-gradient(180deg, #f7efdc 0%, #f3ead6 100%); box-shadow: 0 10px 30px rgba(127, 92, 24, 0.08), 0 2px 10px rgba(0,0,0,0.04); } .ui-atmosphere .airline-list { border-color: rgba(44, 41, 38, 0.08); box-shadow: 0 1px 4px rgba(0,0,0,0.03), 0 12px 32px rgba(103, 78, 38, 0.05); } .ui-atmosphere .list-header { padding: 0 6px 6px; } .ui-atmosphere .list-header-label { color: #9e927f; } .ui-atmosphere .modal-panel { box-shadow: 0 24px 80px rgba(0,0,0,0.12), 0 10px 34px rgba(102, 73, 29, 0.08); } .ui-atmosphere .modal-header { background: radial-gradient(ellipse 120% 100% at 12% 0%, rgba(255, 244, 220, 0.8) 0%, transparent 56%), linear-gradient(135deg, rgba(232, 229, 223, 0.56) 0%, rgba(244, 241, 235, 0.34) 100%); } .ui-atmosphere .disclaimer, .ui-atmosphere .dot-note { color: #a09079; } .ui-editorial .compact-bar, .ui-editorial .controls { background: none; border: none; box-shadow: none; backdrop-filter: none; } .ui-editorial .compact-bar { color: #6d6254; } .ui-editorial .winner-card { background: radial-gradient(ellipse 140% 100% at 0% 0%, rgba(255, 238, 195, 0.52) 0%, transparent 56%), linear-gradient(180deg, #f4e9d2 0%, #efdfc0 100%); border-color: #373129; box-shadow: 0 2px 0 rgba(255,255,255,0.35) inset, 0 12px 30px rgba(94, 68, 27, 0.06); } .ui-editorial .airline-list { background: #fcfaf5; border-color: rgba(72, 57, 36, 0.1); box-shadow: 0 2px 0 rgba(255,255,255,0.5) inset, 0 12px 30px rgba(94, 68, 27, 0.04); } .ui-editorial .airline-list::after { opacity: 0.04; } .ui-editorial .airline-row:hover, .ui-editorial .airline-row.clickable:hover { background: #f8f2e8; } .ui-editorial .modal-panel { background: #fcfaf5; border-color: rgba(72, 57, 36, 0.12); box-shadow: 0 24px 80px rgba(0,0,0,0.12), 0 14px 34px rgba(90, 64, 24, 0.06); } .ui-editorial .modal-header { background: radial-gradient(ellipse 120% 100% at 10% 0%, rgba(255, 237, 198, 0.7) 0%, transparent 56%), linear-gradient(180deg, #f4ebdc 0%, #efe4d3 100%); } .ui-editorial .modal-stat { background: #fffdf8; border-color: rgba(72, 57, 36, 0.1); } /* ── Responsive ──────────────────────────────────────────────────────────── */ @media (max-width: 640px) { nav { top: 8px; } .hero-theme-toggle { left: 14px; bottom: 14px; } .hero-toggle-btn { padding: 6px 10px; } .glow-box { padding: 40px 28px; border-radius: 24px; } .airport-input { width: 100px; } .airline-row { grid-template-columns: 32px 1fr auto; padding: 14px 16px; gap: 0 10px; } .row-primary-value { font-size: 18px; } .row-metrics { gap: 10px; padding-left: 12px; } .row-metric-value { font-size: 16px; } .row-metric { min-width: 48px; } .compact-bar { gap: 6px; font-size: 14px; } .why-content p { font-size: 15px; } .why-content li { font-size: 14px; } .ui-atmosphere .compact-bar, .ui-atmosphere .controls { border-radius: 16px; } .region-menu { min-width: 160px; } .region-option { padding: 8px 14px; font-size: 12px; } .pagination { gap: 4px; } .pagination-btn { font-size: 12px; padding: 6px 10px; } .pagination-page { font-size: 12px; padding: 6px 8px; min-width: 30px; } } /* ═════════════════════════════════════════════════════════════════════════ * REPORT CARD — per-flight 30-day stats + Oracle-derived letter grade. * Layout follows Rankings: .board-intro (title + subtitle, no kicker) → * inputs → always-rendered card with row stats and a flap-animated value * column. Picking a flight populates rows via renderFlap(), same helper * the rankings board uses. See DESIGN.md for the canonical patterns. * ═════════════════════════════════════════════════════════════════════════ */ .reportcard-page { max-width: 620px; margin: 0 auto; padding: 96px 24px 80px; } .rc-form { display: flex; flex-direction: column; gap: 22px; margin-top: 8px; } .rc-route-row { display: flex; align-items: center; justify-content: center; gap: 10px; font-size: 20px; } .rc-route-row .airport-input { font-size: 20px; width: 108px; padding: 8px 12px; } .rc-arrow { font-family: var(--mono); font-size: 13px; color: var(--text-3); letter-spacing: 0.08em; text-transform: uppercase; } .rc-field { display: flex; flex-direction: column; gap: 8px; align-items: center; } .rc-field-label { font-family: var(--mono); font-size: 11px; font-weight: 400; letter-spacing: 0.12em; text-transform: uppercase; color: var(--text-3); } .rc-flight-row { display: flex; justify-content: center; } .rc-card { margin-top: 32px; background: var(--surface, #fdfaf2); border: 1px solid rgba(44, 41, 38, 0.08); border-radius: 14px; padding: 28px 28px 24px; box-shadow: 0 14px 34px rgba(90, 64, 24, 0.06), 0 1px 3px rgba(37, 24, 27, 0.04); } /* Head: flight identity on the left, large grade glyph on the right. */ .rc-card-head { display: flex; align-items: center; justify-content: space-between; gap: 24px; padding-bottom: 18px; margin-bottom: 18px; border-bottom: 1px solid rgba(44, 41, 38, 0.06); } .rc-card-flight { display: flex; flex-direction: column; gap: 4px; min-width: 0; } .rc-card-code { display: inline-flex; align-items: baseline; font-family: var(--mono); font-size: 26px; font-weight: 400; letter-spacing: 0.04em; color: var(--text); min-height: 1em; } .rc-card-route { font-size: 15px; font-weight: 600; color: var(--text); letter-spacing: -0.005em; } .rc-card-meta { font-size: 13px; color: var(--text-3); } .rc-grade { display: flex; flex-direction: column; align-items: center; gap: 4px; flex: 0 0 auto; } .rc-grade-letter { display: inline-flex; align-items: baseline; font-family: var(--mono); font-size: 64px; line-height: 0.92; font-weight: 400; letter-spacing: -0.02em; color: var(--rc-grade-color, var(--text)); text-shadow: 0 0 0.6px currentColor; min-height: 0.9em; } .rc-grade-caption { font-family: var(--mono); font-size: 10px; color: var(--text-3); letter-spacing: 0.12em; text-transform: uppercase; } .rc-caveat { font-family: var(--mono); font-size: 11px; color: var(--text-3); letter-spacing: 0.06em; text-align: center; padding: 0 0 14px; } /* Single-column row list — looks like a real report card. Label sits left, value flap-cells right, dotted leader fills the gap. */ .rc-rows { display: flex; flex-direction: column; margin-bottom: 22px; --mono: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif; font-feature-settings: 'tnum', 'ss01'; } .rc-row { display: flex; align-items: baseline; gap: 10px; padding: 13px 0; border-bottom: 1px dashed rgba(44, 41, 38, 0.10); } .rc-row:last-child { border-bottom: none; } .rc-row-label { font-size: 14px; font-weight: 500; color: var(--text); letter-spacing: -0.005em; flex: 0 1 auto; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .rc-row-leader { flex: 1 1 auto; border-bottom: 1px dotted rgba(44, 41, 38, 0.18); align-self: flex-end; margin-bottom: 5px; min-width: 12px; } .rc-row-value { display: inline-flex; flex: 0 0 auto; font-family: var(--mono); font-size: 16px; font-weight: 600; letter-spacing: 0; color: var(--text); font-feature-settings: 'tnum', 'ss01'; } /* Flap cells inside .rc-row-value inherit color from cc()/rcOnTimeClass() classes set on the container. */ .rc-row-value.c-green { color: var(--green); } .rc-row-value.c-amber { color: var(--amber); } .rc-row-value.c-red { color: var(--red); } .rc-row-value.c-muted { color: var(--text-3); } /* Strip the paper-tile chrome from all report-card flap cells — we want clean text, not the rankings board's flap-tile look. Selectors include `.landed` to beat .board-flap-cell.landed's specificity, so colour set on the container (c-green/c-amber/c-red, --rc-grade-color) wins. */ .rc-row-value .flap-cell, .rc-row-value .flap-cell.landed, .rc-card-code .flap-cell, .rc-card-code .flap-cell.landed, .rc-grade-letter .flap-cell, .rc-grade-letter .flap-cell.landed { /* Override base .flap-cell flex centering — for plain text we want each cell to sit on the same text baseline, not center its content as a flex container (which makes letters and digits render at different vertical positions because their box metrics differ). */ display: inline-block; text-align: center; vertical-align: baseline; width: auto; min-width: 0.62em; height: auto; padding: 0 1px; background: transparent; border: none; box-shadow: none; border-radius: 0; font-size: inherit; font-weight: inherit; line-height: 1.2; color: inherit; } /* Hide the rankings-board hairline split — looks wrong on flat text. */ .rc-row-value .flap-cell::after, .rc-card-code .flap-cell::after, .rc-grade-letter .flap-cell::after { display: none; } .rc-expand-btn { display: block; margin: 0 auto; padding: 9px 20px; font-family: inherit; font-size: 13px; font-weight: 600; letter-spacing: 0.02em; color: var(--text); background: transparent; border: 1px solid rgba(44, 41, 38, 0.15); border-radius: 999px; cursor: pointer; transition: background 0.15s ease, border-color 0.15s ease, opacity 0.15s ease; } .rc-expand-btn:hover:not(:disabled) { background: rgba(44, 41, 38, 0.04); border-color: rgba(44, 41, 38, 0.25); } .rc-expand-btn:disabled { opacity: 0.45; cursor: not-allowed; } .rc-source { margin-top: 28px; font-size: 12px; color: var(--text-3); text-align: center; line-height: 1.55; } .rc-source em { font-style: italic; } @media (max-width: 640px) { .reportcard-page { padding: 72px 16px 64px; } .rc-route-row { font-size: 18px; } .rc-route-row .airport-input { font-size: 18px; width: 92px; } .rc-card { padding: 22px 18px 18px; border-radius: 12px; } .rc-card-head { gap: 14px; } .rc-card-code { font-size: 22px; } .rc-grade-letter { font-size: 52px; } .rc-row { padding: 11px 0; } .rc-row-label { font-size: 13px; } .rc-row-value { font-size: 15px; } } /* ═════════════════════════════════════════════════════════════════════════ * THE ORACLE — flight delay oracle in the form of a Magic 8-Ball. * Layout is intentionally minimal: a single headline, the inputs woven into * one prose sentence (with inline tokens that open popovers), the 8-ball * itself as the focus (clickable when ready — it IS the consult button), * a red→green sliding scale beneath, and a single sentence that fades in * once the verdict has landed. * ═════════════════════════════════════════════════════════════════════════ */ .oracle-page { max-width: 720px; margin: 0 auto; padding: 80px 24px 80px; } .oracle-headline { font-size: 38px; font-weight: 700; letter-spacing: -0.035em; line-height: 1.15; text-align: center; margin: 0 0 24px; color: var(--text); text-wrap: balance; } /* Subhead under the oracle headline. .board-subtitle is left-aligned by default (since the rankings/reportcard pages use left-aligned headers); the oracle page is centered, so re-center it here. */ .oracle-page .board-subtitle { text-align: center; } /* The whole form lives inside one sentence. Three editable tokens — airport, airline, time — use a single .oracle-token treatment so they render at identical height/baseline. Only the background color and a couple of details (input width, button hover) differ between them. */ .oracle-prompt { font-family: inherit; font-size: 22px; font-weight: 400; line-height: 1.85; color: var(--text); text-align: center; margin: 0 auto; max-width: 640px; text-wrap: balance; } .oracle-pop-wrap { position: relative; display: inline-block; vertical-align: baseline; } /* The single source of truth for token styling. Applied to s (airport) and