/* ============================================================ 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); 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); color-scheme: dark; } body { background-color: var(--bg); color: var(--text); transition: background-color 200ms ease, color 200ms ease; } /* 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); } .badge-active::before { background: var(--accent); } .badge-landed::before { background: transparent; border: 2px solid var(--muted); width: 8px; height: 8px; box-sizing: border-box; } /* Cards */ .card { background: var(--bg); border: 1px solid var(--border); border-radius: 8px; transition: border-color 150ms ease; } .card:hover { border-color: var(--accent); } /* Hairline key:value detail rows (KAYAK-style flight details) */ .detail-row { display: flex; justify-content: space-between; align-items: baseline; gap: 16px; padding: 8px 0; border-bottom: 1px solid var(--border); } .detail-row:last-child { border-bottom: none; } /* 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); } /* 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; } }