/* cca-aerospace viewer — custom styles layered on the NYC Core (fleet) theme. The header, footer, nav, cards, buttons, tables and grid all come from NYC Core (theme.css) + FontAwesome, mirroring cca-radiodb. The rules here only cover what the fleet theme doesn't: the full-bleed MapLibre surface, the typeahead search dropdown, the provenance meta-strip/badges, and the entity hub (headline / kv / timeline). Zero third-party assets: every font/icon/map tile comes from a fleet-controlled host. */ :root { --ink: #1f2733; --ink-dim: #51606f; --line: #dde3ea; --panel: #ffffff; --panel-2: #f3f6fa; --accent: #004CBE; --accent-ink: #ffffff; --good: #2e7d32; --warn: #b26a00; --bad: #c62828; --chip: #eef3fb; --link: #0a52c2; --link-hover: #06337a; --thead-bg: #e7edf5; --row-stripe: #f4f7fb; --row-hover: #e9f0fa; --focus-ring: #1565c0; --radius: .5rem; --shadow: 0 4px 14px rgba(18, 40, 60, .14); } /* Dark theme — full AA-contrast override of the (light-only) fleet surface. Opt-in via (toggled from the chrome theme button / the map basemap switch). The NYC Core chrome bars (top bar / footer) are already dark, so this only retints the light content surface, cards, tables, links and badges that live below the chrome. */ [data-theme="dark"] { --ink: #e6edf3; --ink-dim: #aab7c5; --line: #2b3441; --panel: #161b23; --panel-2: #1d2530; --accent: #4d8dff; --accent-ink: #08111f; --good: #4caf6a; --warn: #e0a33a; --bad: #ef6a6a; --chip: #20293a; --link: #8ab4ff; --link-hover: #b4ceff; --thead-bg: #232c39; --row-stripe: #1b222c; --row-hover: #263141; --focus-ring: #8ab4ff; --shadow: 0 4px 14px rgba(0, 0, 0, .5); } [data-theme="dark"] body { background: #0e1218; color: var(--ink); } [data-theme="dark"] .card, [data-theme="dark"] .map-panel, [data-theme="dark"] .aero-results, [data-theme="dark"] .legend { background: var(--panel); color: var(--ink); border-color: var(--line); } [data-theme="dark"] .card { box-shadow: var(--shadow); } [data-theme="dark"] .nav-more-menu { background: #1d2530; color: var(--ink); border-color: var(--line); } [data-theme="dark"] .nav-more-menu a { color: var(--ink) !important; } [data-theme="dark"] .nav-more-menu a:hover, [data-theme="dark"] .nav-more-menu a.active { background: var(--row-hover); } [data-theme="dark"] .omni-kbd { color: var(--ink-dim); background: #232c39; border-color: var(--line); } /* Sticky-footer column so the map home can fill the viewport and content pages keep the footer pinned to the bottom (same pattern as radiodb's styles.css). */ body { min-height: 100vh; display: flex; flex-direction: column; } body > main { flex: 1 0 auto; width: 100%; } body > footer { flex-shrink: 0; } .mono, code { font-family: ui-monospace, "SF Mono", SFMono-Regular, Menlo, Consolas, monospace; } .muted { color: var(--ink-dim); } .note { font-size: .85rem; color: var(--ink-dim); } .err { color: var(--bad); } /* Loading affordance: a REAL animated spinner before any "Loading…" text, on every page (every .spin label the viewer already ships gets one for free). Reduced-motion users get a static ring — still a clear in-progress cue, never a bare label that can read as stuck. */ .spin { color: var(--ink-dim); } .spin::before { content: ""; display: inline-block; vertical-align: -0.125em; width: 0.85em; height: 0.85em; margin-right: 0.5em; border: 2px solid currentColor; border-right-color: transparent; border-radius: 50%; opacity: 0.6; animation: aero-spin 0.6s linear infinite; } @keyframes aero-spin { to { transform: rotate(360deg); } } .hidden { display: none !important; } .add { color: var(--good); font-weight: 600; } .del { color: var(--bad); font-weight: 600; } .mod { color: var(--warn); font-weight: 600; } /* Skeleton shimmer — optional richer placeholder for async sections (theme-neutral tint). */ .skeleton { position: relative; overflow: hidden; background: var(--panel-2); border-radius: 6px; min-height: 0.9rem; } .skeleton::after { content: ""; position: absolute; inset: 0; transform: translateX(-100%); background: linear-gradient(90deg, transparent, rgba(127, 127, 127, 0.14), transparent); animation: aero-shimmer 1.2s infinite; } .skeleton-line { height: 0.9rem; margin: 0.35rem 0; } .skeleton-line.w-40 { width: 40%; } .skeleton-line.w-60 { width: 60%; } .skeleton-line.w-80 { width: 80%; } @keyframes aero-shimmer { to { transform: translateX(100%); } } /* Click-to-copy chip (idents, coords) — generalises the airport page's .freq-copy affordance so every entity hub shares one copy interaction. Built as a real