/* ============================================================ SkyTracker Pro — house design tokens (OKLCH, 4px grid) Light "operations console" chrome around a dark map canvas. Every color in the site flows through these variables. ============================================================ */ :root { --bg: oklch(0.98 0.005 250); --surface: oklch(0.95 0.008 250); --text: oklch(0.25 0.01 250); --muted: oklch(0.55 0.01 250); --border: oklch(0.88 0.008 250); --accent: oklch(0.62 0.17 255); --accent-fg: oklch(0.98 0.005 250); /* derived tones, same hue family */ --accent-deep: oklch(0.5 0.17 255); --accent-soft: oklch(0.94 0.03 255); --ink-strong: oklch(0.18 0.01 250); /* dark map canvas (Leaflet container + placeholders) */ --canvas: oklch(0.25 0.02 255); /* HUD glow strength — derived from --accent so both themes stay in family. Light chrome keeps the glow whisper-quiet; dark mode turns it up. */ --glow: color-mix(in oklab, var(--accent) 16%, transparent); --bracket: color-mix(in oklab, var(--accent) 45%, transparent); color-scheme: light; } /* Dark mode — same hue family, inverted lightness. Toggled by theme.js via a `dark` class on ; the whole site re-themes because every color above flows through these variables. */ html.dark { --bg: oklch(0.17 0.02 255); --surface: oklch(0.22 0.02 255); --text: oklch(0.93 0.01 250); --muted: oklch(0.66 0.02 250); --border: oklch(0.32 0.02 255); --accent: oklch(0.72 0.15 255); --accent-fg: oklch(0.15 0.02 255); --accent-deep: oklch(0.62 0.16 255); --accent-soft: oklch(0.30 0.06 255); --ink-strong: oklch(0.98 0.005 250); --canvas: oklch(0.14 0.02 255); --glow: color-mix(in oklab, var(--accent) 35%, transparent); --bracket: color-mix(in oklab, var(--accent) 60%, transparent); color-scheme: dark; } /* Deep-space ambience (dark theme only): two faint accent nebulae fixed behind everything. Decorative, static, and cheap — no animation. */ html.dark body::before { content: ''; position: fixed; inset: 0; z-index: -1; pointer-events: none; background: radial-gradient(640px 420px at 82% -8%, color-mix(in oklab, var(--accent) 9%, transparent), transparent 70%), radial-gradient(760px 520px at 8% 108%, color-mix(in oklab, var(--accent) 6%, transparent), transparent 70%); } /* The hidden attribute must always win, even over utility display classes */ [hidden] { display: none !important; } body { background-color: var(--bg); color: var(--text); transition: background-color 200ms ease, color 200ms ease; } /* Sticky translucent header — chrome stays put over the scrolling canvas. The ::after hairline is the HUD signature: an accent scan-line that fades out toward both edges, sitting on the structural border. */ .site-header { position: sticky; top: 0; z-index: 40; border-bottom: 1px solid var(--border); background: color-mix(in oklab, var(--bg) 88%, transparent); -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px); } .site-header::after { content: ''; position: absolute; left: 0; right: 0; bottom: -1px; height: 1px; pointer-events: none; background: linear-gradient(90deg, transparent 0%, color-mix(in oklab, var(--accent) 55%, transparent) 18%, color-mix(in oklab, var(--accent) 55%, transparent) 82%, transparent 100%); opacity: 0.5; } /* Nav pills — active page carries the accent, not just a gray fill */ .nav-link { display: inline-block; padding: 8px 12px; border-radius: 9999px; font-size: 14px; font-weight: 500; color: var(--muted); transition: color 150ms ease, background-color 150ms ease; } .nav-link:hover { color: var(--text); background: var(--surface); } .nav-link[aria-current="page"] { color: var(--accent-deep); background: var(--accent-soft); box-shadow: 0 0 14px -4px var(--glow); } /* Header light/dark toggle */ .theme-toggle { display: inline-flex; align-items: center; justify-content: center; width: 36px; height: 36px; border: 1px solid var(--border); border-radius: 4px; color: var(--text); background: transparent; transition: border-color 150ms ease, background-color 150ms ease; } .theme-toggle:hover { border-color: var(--muted); background: var(--surface); } /* Radar-grid ambient behind page headers — aviation chart texture */ .grid-paper { background-image: linear-gradient(var(--border) 1px, transparent 1px), linear-gradient(90deg, var(--border) 1px, transparent 1px); background-size: 32px 32px; mask-image: linear-gradient(to bottom, rgb(0 0 0 / 0.5), transparent 90%); -webkit-mask-image: linear-gradient(to bottom, rgb(0 0 0 / 0.5), transparent 90%); } /* Signature: the route line — mono IATA pair over a dashed flight path */ .route-path { flex: 1; min-width: 32px; height: 16px; margin: 0 12px; background-image: linear-gradient(90deg, var(--accent) 50%, transparent 50%); background-size: 8px 2px; background-repeat: repeat-x; background-position: 0 center; position: relative; } .route-path::after { content: ''; position: absolute; right: -2px; top: 50%; width: 8px; height: 8px; transform: translateY(-50%) rotate(45deg); border-top: 2px solid var(--accent); border-right: 2px solid var(--accent); } /* Status badges — one hue; state carried by fill vs. outline */ .badge { display: inline-flex; align-items: center; gap: 8px; padding: 4px 12px; border: 1px solid var(--border); border-radius: 9999px; font-size: 12px; line-height: 1.5; text-transform: capitalize; color: var(--muted); background: var(--bg); } .badge::before { content: ''; width: 8px; height: 8px; border-radius: 50%; background: var(--muted); } .badge-active { color: var(--accent-deep); border-color: var(--accent); background: var(--accent-soft); box-shadow: 0 0 12px -3px var(--glow); } .badge-active::before { background: var(--accent); box-shadow: 0 0 6px var(--accent); } .badge-landed::before { background: transparent; border: 2px solid var(--muted); width: 8px; height: 8px; box-sizing: border-box; } /* Cards — hover picks up the accent hairline plus a disciplined glow */ .card { background: var(--bg); border: 1px solid var(--border); border-radius: 8px; transition: border-color 150ms ease, box-shadow 150ms ease; } .card:hover { border-color: var(--accent); box-shadow: 0 0 24px -8px var(--glow); } /* HUD corner brackets — four hairline reticle corners drawn with layered background gradients (no extra markup, works on any box). */ .hud-corners, .stat-tile { --bl: 16px; /* bracket arm length */ background-image: linear-gradient(var(--bracket), var(--bracket)), linear-gradient(var(--bracket), var(--bracket)), linear-gradient(var(--bracket), var(--bracket)), linear-gradient(var(--bracket), var(--bracket)), linear-gradient(var(--bracket), var(--bracket)), linear-gradient(var(--bracket), var(--bracket)), linear-gradient(var(--bracket), var(--bracket)), linear-gradient(var(--bracket), var(--bracket)); background-repeat: no-repeat; background-position: 0 0, 0 0, 100% 0, 100% 0, 0 100%, 0 100%, 100% 100%, 100% 100%; background-size: var(--bl) 1px, 1px var(--bl), var(--bl) 1px, 1px var(--bl), var(--bl) 1px, 1px var(--bl), var(--bl) 1px, 1px var(--bl); } /* Stat tiles — HUD readouts: corner brackets (inherited from the rule above), sharp instrument corners, mono tabular numerals, and a glow pulse (.stat-flash) when a value changes. */ .stat-tile { position: relative; background-color: var(--bg); border: 1px solid var(--border); border-radius: 3px; padding: 12px 16px; } .stat-tile .stat-value { font-family: 'IBM Plex Mono', monospace; font-size: 24px; line-height: 1.25; font-weight: 500; color: var(--ink-strong); font-variant-numeric: tabular-nums; } html.dark .stat-tile .stat-value { text-shadow: 0 0 18px var(--glow); } .stat-flash { animation: stat-flash 900ms ease-out 1; } /* Only a 0% frame: the animation decays back to the element's own style, so the same flash works on any readout in either theme. */ @keyframes stat-flash { 0% { color: var(--accent); text-shadow: 0 0 16px var(--accent); } } .stat-tile .stat-label { font-family: 'IBM Plex Mono', monospace; font-size: 12px; line-height: 1.5; color: var(--muted); text-transform: lowercase; } .stat-tile.stat-accent { border-color: var(--accent); background-color: var(--accent-soft); box-shadow: 0 0 20px -6px var(--glow); } .stat-tile.stat-accent .stat-value { color: var(--accent-deep); } /* HUD kicker — the mono microlabel above page titles */ .hud-kicker { font-family: 'IBM Plex Mono', monospace; font-size: 12px; line-height: 1.5; letter-spacing: 0.18em; text-transform: uppercase; color: var(--accent); } /* Radar-ring ambience — concentric hairline rings with a slow sweep, parked behind hero content. Decorative only; the sweep is killed by the global prefers-reduced-motion block below. */ .radar-ambient { position: absolute; top: -180px; right: -140px; width: 620px; height: 620px; border-radius: 50%; pointer-events: none; background: repeating-radial-gradient(circle, transparent 0 77px, color-mix(in oklab, var(--accent) 22%, transparent) 77px 78px); mask-image: radial-gradient(circle, rgb(0 0 0 / 0.55), transparent 72%); -webkit-mask-image: radial-gradient(circle, rgb(0 0 0 / 0.55), transparent 72%); } .radar-ambient::after { content: ''; position: absolute; inset: 0; border-radius: 50%; background: conic-gradient(from 0deg, transparent 0deg 318deg, color-mix(in oklab, var(--accent) 4%, transparent) 330deg, color-mix(in oklab, var(--accent) 30%, transparent) 359deg, color-mix(in oklab, var(--accent) 45%, transparent) 360deg); animation: radar-sweep 16s linear infinite; } @keyframes radar-sweep { to { transform: rotate(1turn); } } /* Live pulse dot next to "live" labels */ .pulse-dot { display: inline-block; width: 8px; height: 8px; border-radius: 50%; background: var(--accent); animation: pulse-dot 2s ease-in-out infinite; } @keyframes pulse-dot { 0%, 100% { opacity: 1; } 50% { opacity: 0.4; } } /* Filter panel — applied filters must be obvious */ select { background: var(--bg); border: 1px solid var(--border); border-radius: 4px; color: var(--text); padding: 8px 12px; font-size: 14px; line-height: 1.5; width: 100%; transition: border-color 150ms ease; } select:hover { border-color: var(--muted); } select:focus { outline: 2px solid var(--accent); outline-offset: 0; border-color: var(--accent); } /* A control whose value deviates from the default gets the accent ring */ .filter-on { border-color: var(--accent) !important; box-shadow: 0 0 0 1px var(--accent); } /* Removable applied-filter chips */ .filter-chip { display: inline-flex; align-items: center; gap: 8px; padding: 4px 12px; border: 1px solid var(--accent); border-radius: 9999px; background: var(--accent-soft); color: var(--accent-deep); font-family: 'IBM Plex Mono', monospace; font-size: 12px; line-height: 1.5; cursor: pointer; transition: background-color 150ms ease; } .filter-chip:hover { background: var(--bg); } .filter-chip .chip-x { font-weight: 600; } /* Count badge on the Filters heading */ .filter-count { display: none; min-width: 20px; height: 20px; padding: 0 6px; border-radius: 9999px; background: var(--accent); color: var(--accent-fg); font-family: 'IBM Plex Mono', monospace; font-size: 12px; line-height: 20px; text-align: center; } .filter-count.on { display: inline-block; } /* Instrument-panel frame around the live map: corner brackets outside the canvas plus a faint inset glow overlay (::after sits above the WebGL canvas but below the legend, and ignores the pointer). */ .hud-frame { position: relative; border-radius: 3px; border-color: color-mix(in oklab, var(--accent) 30%, var(--border)); } .hud-frame::after { content: ''; position: absolute; inset: 0; z-index: 5; pointer-events: none; border-radius: inherit; box-shadow: inset 0 0 80px -30px var(--glow); } /* Mono microtag for HUD panels ("target lock", etc.) */ .hud-tag { display: inline-flex; align-items: center; gap: 8px; font-family: 'IBM Plex Mono', monospace; font-size: 12px; line-height: 1.5; letter-spacing: 0.18em; text-transform: uppercase; color: var(--accent); } /* Target-lock panel — the pinned-aircraft card wears reticle corners and a slightly stronger hairline when an aircraft is pinned (.locked). */ .target-lock { --bl: 18px; border-radius: 3px; transition: border-color 150ms ease, box-shadow 150ms ease; } .target-lock.locked { border-color: color-mix(in oklab, var(--accent) 45%, var(--border)); box-shadow: 0 0 28px -10px var(--glow); } /* Globe overlay legend (DOM overlay, so tokens are safe here) */ .globe-legend { position: absolute; left: 12px; bottom: 12px; z-index: 10; display: flex; flex-direction: column; gap: 4px; padding: 8px 12px; border: 1px solid var(--border); border-radius: 8px; background: color-mix(in oklab, var(--bg) 82%, transparent); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); font-family: 'IBM Plex Mono', monospace; font-size: 12px; line-height: 1.5; color: var(--muted); pointer-events: none; } .globe-legend .legend-swatch { display: inline-block; width: 8px; height: 8px; border-radius: 50%; margin-right: 8px; } /* Hairline key:value detail rows (KAYAK-style flight details). Values read as instrument data: tabular numerals, hover lights the rule. */ .detail-row { display: flex; justify-content: space-between; align-items: baseline; gap: 16px; padding: 8px 0; border-bottom: 1px solid var(--border); transition: border-color 150ms ease; } .detail-row:last-child { border-bottom: none; } .detail-row dd { font-variant-numeric: tabular-nums; } .detail-row:hover { border-bottom-color: color-mix(in oklab, var(--accent) 45%, var(--border)); } .detail-row:hover dt { color: var(--text); } /* Inputs */ input[type="text"] { background: var(--bg); border: 1px solid var(--border); border-radius: 9999px; color: var(--text); transition: border-color 150ms ease; } input[type="text"]::placeholder { color: var(--muted); } input[type="text"]:hover { border-color: var(--muted); } input[type="text"]:focus { outline: 2px solid var(--accent); outline-offset: 0; border-color: var(--accent); } /* Buttons */ .btn-primary { display: inline-flex; align-items: center; justify-content: center; gap: 8px; background: var(--accent); color: var(--accent-fg); border: 1px solid var(--accent); border-radius: 4px; padding: 8px 16px; font-weight: 600; font-size: 14px; transition: background-color 150ms ease; } .btn-primary:hover { background: var(--accent-deep); } .btn-secondary { display: inline-flex; align-items: center; justify-content: center; gap: 8px; background: transparent; color: var(--text); border: 1px solid var(--border); border-radius: 4px; padding: 8px 16px; font-weight: 600; font-size: 14px; transition: border-color 150ms ease, background-color 150ms ease; } .btn-secondary:hover { border-color: var(--muted); background: var(--surface); } /* Mobile: nav collapses to one horizontally-scrollable row of pills. min-width: 0 lets the nav shrink below the row's min-content width — without it the nowrap pill row widens the whole layout viewport on phones. */ nav[aria-label="Main"] { min-width: 0; max-width: 100%; } .nav-scroll { display: flex; gap: 4px; max-width: 100%; overflow-x: auto; -webkit-overflow-scrolling: touch; scrollbar-width: none; white-space: nowrap; } .nav-scroll::-webkit-scrollbar { display: none; } /* Keyboard focus is always visible */ a:focus-visible, button:focus-visible, input:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; border-radius: 2px; } /* Dark map canvas inside light chrome */ .leaflet-container { background: var(--canvas) !important; } .map-placeholder { background: var(--canvas); color: var(--accent-fg); } /* Respect reduced-motion preferences */ @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: 0.01ms !important; transition-duration: 0.01ms !important; scroll-behavior: auto !important; } }