/* =========================================================
PLANESDB — ATC Console Design System
Hand-authored, dependency-free CSS.
========================================================= */
:root {
/* --- Core palette (dark ATC scope) --- */
--bg-0: #060a10; /* deepest background */
--bg-1: #0a0f18; /* page background */
--bg-2: #0e1520; /* panel background */
--bg-3: #121a27; /* card background */
--bg-4: #182233; /* hover / raised */
--border-0: #1c2635;
--border-1: #263248;
--border-glow: rgba(84, 255, 170, 0.35);
/* --- Radar / signal accents --- */
--radar: #4dffb0; /* primary scope green */
--radar-dim: #2c8f68;
--radar-glow: rgba(77, 255, 176, 0.55);
--amber: #f5b942; /* action / search amber */
--amber-dim: #c8922c;
--cyan: #4fd7ff;
--red: #ff5c5c;
--violet: #b45cff; /* general-milestone accent (timeline tab) */
--orange: #ff8a4d; /* Power & Payload category (Specifications
tab) - distinct from --amber, which every
row label already uses, so that category's
header row doesn't blend into its own rows */
/* --- Text --- */
--text-0: #eaf3ee;
--text-1: #b9c9c2;
--text-2: #7f8f8a;
--text-3: #57645f;
/* --- Type --- */
--font-mono: "JetBrains Mono", "Share Tech Mono", ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
--font-sans: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
/* --- Scale --- */
--radius-sm: 4px;
--radius-md: 8px;
--radius-lg: 14px;
--gap: 1rem;
--container: 1320px;
/* --- Accessibility text scale (overridden by JS) --- */
--scale: 1;
/* --- Translucent chrome (sticky topbar / mobile tabbar backdrop) --- */
--chrome-bg: rgba(6,10,16,0.86);
--chrome-bg-strong: rgba(6,10,16,0.92);
}
/* =========================================================
LIGHT THEME — "aged sectional chart" take on the same ATC-console
layout as the dark theme above. Rather than just being a paler
version of the dark scope, this leans into a second real cockpit
reference point: the well-thumbed paper aeronautical chart -
warm parchment stock (kept intentionally closer to neutral gray
than a golden-yellow, so it reads as worn paper rather than a
sepia filter), faded chart-ink green, worn brass instrument
amber, and a faint grain/vignette texture (added below via
body::before/::after) instead of a glowing digital grid.
Toggled via the moon button in the top bar (see [data-theme-toggle]
/ main.js), applied as a data-theme attribute on . Defaults
to dark; this block only takes effect once the attribute is set.
Note: --bg-0 stays dark intentionally - it doubles as the
site-footer background AND (in the dark theme) the contrast text
colour stamped on bright --radar buttons/chips. That second job
doesn't carry over here: on paper, "dark-on-accent" would mean
dark text on a dark-ish chart green, which doesn't read - so the
handful of components that stamp --bg-0 onto a --radar background
(.chip[aria-pressed], .compare-check.checked, .pagination
button[aria-current]) get an explicit light-theme override lower
down using a light parchment text colour instead.
The radar-scope graphic itself (.scope, .mini-scope canvas) is
also left on its own hard-coded dark colours in both themes,
like a real cockpit instrument display. */
html[data-theme="light"] {
color-scheme: light;
--bg-0: #1c150e;
--bg-1: #eae4d7;
--bg-2: #f0ebde;
--bg-3: #f8f5ea;
--bg-4: #ddd4bd;
--border-0: #d5cbb0;
--border-1: #b7a985;
--border-glow: rgba(31, 122, 68, 0.3);
/* Accent trio (radar/amber/cyan) deepened and more saturated than an
early pass of this theme - the original muted tones shared too much
hue/lightness with the warm parchment background and visually
"disappeared" as text (links, tab labels, spec labels, quick-facts
index chips, etc.), even though they technically passed contrast.
These read as a clear, punchy accent against --bg-1/--bg-2 the way
the neon dark-theme colours read against the dark background. */
--radar: #1f7a44;
--radar-dim: #4f8f68;
--radar-glow: rgba(31, 122, 68, 0.4);
--amber: #9c530a;
--amber-dim: #c07f2e;
--cyan: #0f6d7d;
--red: #a24632;
--violet: #79579a;
--orange: #a6601f;
--text-0: #2a2115;
--text-1: #514734;
--text-2: #6f6248;
--text-3: #948a6c;
--chrome-bg: rgba(248,245,234,0.86);
--chrome-bg-strong: rgba(248,245,234,0.92);
}
/* Faded chart-contour grid instead of the dark theme's neon scope
lines, plus a light paper grain layered on top for surface
character - kept subtle so the page still reads clean, not dirty. */
html[data-theme="light"] body::before {
background-image:
linear-gradient(rgba(90, 80, 55, 0.055) 1px, transparent 1px),
linear-gradient(90deg, rgba(90, 80, 55, 0.055) 1px, transparent 1px);
}
html[data-theme="light"] body::after {
content: "";
position: fixed;
inset: 0;
pointer-events: none;
z-index: 0;
background-image:
radial-gradient(ellipse at center, transparent 60%, rgba(60, 50, 30, 0.08) 100%),
url("data:image/svg+xml;utf8,");
background-size: cover, 140px 140px;
mix-blend-mode: multiply;
opacity: 0.45;
}
html[data-theme="light"] .hero {
background:
radial-gradient(ellipse 70% 60% at 78% 15%, rgba(63,122,85,0.08), transparent 60%),
var(--bg-1);
}
/* The scope keeps its own hard-coded dark instrument colours in both
themes (see the note above), but its outer glow is tuned per theme -
a very low-alpha bright green reads as a clear halo against the dark
page, but is nearly invisible against parchment at the same alpha.
Retinted brownish (rather than green) so it reads as a warm light
spilling off an old instrument lamp, not a mismatched neon accent. */
html[data-theme="light"] .scope {
box-shadow: inset 0 0 60px rgba(0,0,0,0.6), 0 0 46px rgba(143,94,23,0.4);
}
/* Homepage "Search" button - the muted brass --amber used for text/
borders elsewhere reads fine, but as a solid CTA fill against
parchment it doesn't pop the way the neon amber does against the
dark page. Give the button its own brighter, more saturated gold. */
html[data-theme="light"] .btn-primary {
background: #c9891f;
border-color: #c9891f;
color: #241a08;
}
html[data-theme="light"] .btn-primary:hover {
background: #dda23c;
border-color: #dda23c;
box-shadow: 0 0 14px rgba(201,137,31,0.35);
}
/* Plane-card role badge + category chips overlaid on the thumbnail -
these hard-coded a near-black translucent chip designed to contrast
with the dark theme's neon text/icon colour. Against this theme's
muted, darker accent colours that combination goes dark-on-dark and
becomes unreadable, so give both a light parchment chip instead. */
html[data-theme="light"] .plane-card-badge {
background: rgba(248,242,224,0.94);
border-color: var(--border-1);
color: var(--text-0);
}
html[data-theme="light"] .cat-badge {
background: rgba(248,242,224,0.94);
border-color: var(--border-1);
color: var(--radar);
}
/* Timeline category icons - a few shades brighter/more saturated than
their text-safe counterparts, since as small icons against parchment
they read as flat rather than as distinct accent colours. */
html[data-theme="light"] .timeline-development.timeline-item .timeline-dot,
html[data-theme="light"] .timeline-scale-dot.timeline-development,
html[data-theme="light"] .timeline-legend-dot.timeline-development { color: #2f9a5e; }
html[data-theme="light"] .timeline-first-flight.timeline-item .timeline-dot,
html[data-theme="light"] .timeline-scale-dot.timeline-first-flight,
html[data-theme="light"] .timeline-legend-dot.timeline-first-flight { color: #1f8a9c; }
html[data-theme="light"] .timeline-combat.timeline-item .timeline-dot,
html[data-theme="light"] .timeline-scale-dot.timeline-combat,
html[data-theme="light"] .timeline-legend-dot.timeline-combat { color: #b8790f; }
html[data-theme="light"] .timeline-incident.timeline-item .timeline-dot,
html[data-theme="light"] .timeline-scale-dot.timeline-incident,
html[data-theme="light"] .timeline-legend-dot.timeline-incident { color: #c2422a; }
html[data-theme="light"] .timeline-retirement.timeline-item .timeline-dot,
html[data-theme="light"] .timeline-scale-dot.timeline-retirement,
html[data-theme="light"] .timeline-legend-dot.timeline-retirement { color: #8a7440; }
html[data-theme="light"] .timeline-milestone.timeline-item .timeline-dot,
html[data-theme="light"] .timeline-scale-dot.timeline-milestone,
html[data-theme="light"] .timeline-legend-dot.timeline-milestone { color: #9463c4; }
/* Incidents tab (747-test experiment, see incidentsTab() in detail.js) -
reuses the same .timeline-* dot/scale/legend/date rules above, just
under two new category keys ("fatal"/"safe") instead of the Timeline
tab's development/combat/etc, so both tabs share one visual language
without either affecting the other's colour set. */
html[data-theme="light"] .timeline-fatal.timeline-item .timeline-dot,
html[data-theme="light"] .timeline-scale-dot.timeline-fatal,
html[data-theme="light"] .timeline-legend-dot.timeline-fatal { color: #c2422a; }
html[data-theme="light"] .timeline-safe.timeline-item .timeline-dot,
html[data-theme="light"] .timeline-scale-dot.timeline-safe,
html[data-theme="light"] .timeline-legend-dot.timeline-safe { color: #2f9a5e; }
html[data-theme="light"] .timeline-hull-loss-legend { color: #b8790f; }
html[data-theme="light"] .search-box:focus-within {
box-shadow: 0 0 0 3px rgba(63,122,85,0.16);
}
html[data-theme="light"] .badge-radar {
background: rgba(63,122,85,0.10);
}
html[data-theme="light"] .detail-hero-media {
background: radial-gradient(ellipse 90% 130% at 20% 0%, rgba(63,122,85,0.12), transparent 60%), var(--bg-2);
}
html[data-theme="light"] .flag-select-menu li[aria-selected="true"] {
background: rgba(63,122,85,0.10);
}
/* --bg-0 no longer works as "on-accent" text in this theme (see note
above) - swap in a light parchment tone wherever --radar is used as
a solid background so the active/checked/current state stays readable. */
html[data-theme="light"] .chip[aria-pressed="true"],
html[data-theme="light"] .compare-check.checked,
html[data-theme="light"] .pagination button[aria-current="true"] {
color: #f6f1e3;
}
/* Records/leaderboards row-fill gradients - hard-coded at a low, fixed
alpha tuned for the dark theme's near-black panel background, where
even a faint tint reads as a glow. Against this theme's light parchment
panels the same alpha is nearly invisible, so the gold/green leaderboard
bars need their own, stronger-alpha version here rather than just
inheriting the dark-theme rgba values. */
html[data-theme="light"] .record-bar {
background: linear-gradient(90deg, rgba(31,122,68,0.22), rgba(31,122,68,0.05));
border-right-color: rgba(31,122,68,0.45);
}
html[data-theme="light"] .record-leader .record-bar {
background: linear-gradient(90deg, rgba(156,83,10,0.26), rgba(156,83,10,0.05));
border-right-color: rgba(156,83,10,0.5);
}
/* Hero photo credit chip - hard-coded a near-black translucent pill
designed to contrast with the dark theme's light text. Against this
theme's dark parchment text that combination goes dark-on-dark, so
give it the same light parchment chip treatment already used for the
category tiles' badges (.plane-card-badge / .cat-badge above). */
html[data-theme="light"] .hero-photo-credit {
background: rgba(248,242,224,0.94);
border-color: var(--border-1);
color: var(--text-0);
}
/* Flightradar24 sidebar widget - the cyan wash background is another
dark-theme-tuned low alpha that goes nearly flat against parchment. */
html[data-theme="light"] .fr24-box {
background: linear-gradient(160deg, rgba(15,109,125,0.14), transparent);
}
html[data-theme="light"] .fr24-box .fr24-code {
border-color: var(--cyan);
}
/* Footer - a first pass gave this its own near-black brown band (matching
--bg-0, which doubles as "text on bright accent" elsewhere - see the
big note above) with a bespoke light-parchment text set painted on top.
That meant anything NOT explicitly repainted - like the social .icon-btn
links, which set their own light --bg-3 fill and dark --text-1 icon
colour - kept its normal light-theme colours and turned into a washed-
out pale square sitting on the dark band instead of blending in.
Simpler and more consistent: just use --bg-4, the theme's own "slightly
darker/raised" surface tone (already used for hovers elsewhere), so the
footer reads as a subtly recessed panel within the same warm-parchment
palette rather than a separate dark island - every element already
styled for the light theme (text colours, icon buttons, links) keeps
working here with no extra overrides needed. */
html[data-theme="light"] .site-footer {
background: var(--bg-4);
}
html[data-theme="light"] .footer-bottom {
color: var(--text-2);
}
/* Homepage hero - the accent-coloured "One database." line and the
eyebrow line above it are this page's single biggest visual hook, so
give them a bit more than the base --radar bump above: a stronger glow
on the headline (closer to how it reads against the dark theme) and
bolder weight on the small-caps eyebrow line. */
html[data-theme="light"] .hero h1 span {
text-shadow: 0 0 18px rgba(31,122,68,0.4);
}
html[data-theme="light"] .hero.hero-count h1 span.hc-num {
text-shadow: 0 0 18px rgba(31,122,68,0.4);
}
html[data-theme="light"] .hero-eyebrow {
font-weight: 700;
}
/* ---------- Reset ---------- */
*, *::before, *::after { box-sizing: border-box; }
/* Recurring gotcha on this site: any component class that sets its own
`display` (`.btn`, `.search-box`, `.chip`, etc - and there are a lot of
them) is an author rule, so it wins the cascade over the UA stylesheet's
`[hidden]{display:none}` even though [hidden] is "just" an attribute
selector - author origin beats UA origin at equal specificity. Rather
than re-discovering and re-patching this one component at a time (it's
bitten .adv-filters, .chip-more-count, .flag-select-menu and the
compare-page search box so far), one global override guarantees any
element marked hidden actually stays hidden regardless of what other
classes it carries. */
[hidden] { display: none !important; }
html { color-scheme: dark; }
body, h1, h2, h3, h4, p, ul, ol, figure { margin: 0; }
ul, ol { padding: 0; list-style: none; }
img { display: block; max-width: 100%; }
svg { display: inline-block; max-width: 100%; height: auto; vertical-align: middle; }
/* Icons used inline in buttons/labels/nav have no sizing context of their
own (unlike icon-btn/cat-tile/plane-card-media which are fixed-size
containers), so they must be capped explicitly or they render at the
browser's default intrinsic SVG size. */
.search-box svg,
.btn svg,
.card-title svg,
.section-title svg,
.spec-item .spec-label svg {
width: 17px;
height: 17px;
flex-shrink: 0;
vertical-align: -3px;
}
/* Explicit sizes for icon buttons. Without these, Safari (iOS in
particular) falls back to the SVG default 300x150 box and the icons
render blown-up/clipped inside their containers. */
.icon-btn svg { width: 18px; height: 18px; }
/* Country-of-origin flag badge - shown next to manufacturer/origin text */
.flag-icon {
display: inline-flex;
width: 24px;
height: 16px;
margin-right: 0.45rem;
border-radius: 2px;
overflow: hidden;
box-shadow: 0 0 0 1px var(--border-1);
vertical-align: -3px;
flex-shrink: 0;
}
.flag-icon svg { width: 100%; height: 100%; display: block; }
.detail-title .flag-icon { width: 30px; height: 20px; vertical-align: -4px; }
.kv-row .v .flag-icon { vertical-align: -3px; }
a { color: inherit; text-decoration: none; }
button, input, select { font: inherit; color: inherit; }
button { cursor: pointer; }
html {
font-size: calc(16px * var(--scale));
scroll-behavior: smooth;
}
body {
background: var(--bg-1);
color: var(--text-0);
font-family: var(--font-sans);
line-height: 1.5;
min-height: 100vh;
position: relative;
}
/* faint scope grid across whole page */
body::before {
content: "";
position: fixed;
inset: 0;
pointer-events: none;
z-index: 0;
background-image:
linear-gradient(rgba(77,255,176,0.035) 1px, transparent 1px),
linear-gradient(90deg, rgba(77,255,176,0.035) 1px, transparent 1px);
background-size: 42px 42px;
mask-image: radial-gradient(ellipse at top, black, transparent 75%);
}
.container {
max-width: var(--container);
margin: 0 auto;
padding: 0 1.5rem;
position: relative;
z-index: 1;
}
.mono { font-family: var(--font-mono); letter-spacing: 0.02em; }
/* ---------- Utility ---------- */
.visually-hidden {
position: absolute; width: 1px; height: 1px; overflow: hidden;
clip: rect(0 0 0 0); white-space: nowrap;
}
/* padding-top/bottom only (not the `padding: Xrem 0` shorthand) - the shorthand
also sets padding-left/right:0, which silently wins over .container's
left/right padding on any element carrying both classes (e.g.
class="section container ..."), since .section is later in this file at
equal specificity. That clobbering caused a real 24px horizontal
misalignment on every "section container" block site-wide (popular
comparisons, homepage sections, etc). Longhand avoids the conflict entirely. */
.section { padding-top: 3.25rem; padding-bottom: 3.25rem; position: relative; z-index: 1; }
.section-head {
display: flex; align-items: baseline; justify-content: space-between;
margin-bottom: 1.25rem; gap: 1rem; flex-wrap: wrap;
}
.section-title {
font-family: var(--font-mono);
font-size: 0.85rem;
letter-spacing: 0.14em;
text-transform: uppercase;
color: var(--text-1);
display: flex; align-items: center; gap: 0.6rem;
}
.section-title::before {
content: "";
width: 8px; height: 8px; border-radius: 50%;
background: var(--radar);
box-shadow: 0 0 8px var(--radar-glow);
}
.section-link {
font-family: var(--font-mono);
font-size: 0.78rem;
color: var(--amber);
white-space: nowrap;
}
.section-link:hover { text-decoration: underline; }
/* Page-level
modifier - .section-title on its own is sized for small
sub-section headers, not a page title. Every page's main h1 pairs this
class alongside .section-title instead of a one-off inline font-size, so
there's a single place to change the page-title size site-wide. */
.page-title { font-size: 1.3rem; margin-bottom: 0.5rem; }
/* Inline "color:var(--radar)" appeared on ~11 one-off in-prose links across
several templates - a real, repeated pattern, just never given a class. */
.link-radar { color: var(--radar); }
/* ---------- Buttons ---------- */
.btn {
display: inline-flex; align-items: center; justify-content: center;
gap: 0.5rem;
padding: 0.65rem 1.1rem;
border-radius: var(--radius-sm);
font-family: var(--font-mono);
font-weight: 600;
font-size: 0.82rem;
letter-spacing: 0.06em;
text-transform: uppercase;
border: 1px solid var(--border-1);
background: var(--bg-3);
color: var(--text-0);
transition: border-color .15s ease, background .15s ease, box-shadow .15s ease, transform .1s ease;
}
.btn:hover { border-color: var(--radar-dim); background: var(--bg-4); }
.btn:active { transform: translateY(1px); }
.btn-primary {
background: var(--amber);
border-color: var(--amber);
color: #14100a;
}
.btn-primary:hover { background: #ffcb63; border-color: #ffcb63; box-shadow: 0 0 18px rgba(245,185,66,0.35); }
.btn-ghost { background: transparent; }
.btn-radar { border-color: var(--radar-dim); color: var(--radar); }
.btn-radar:hover { box-shadow: 0 0 14px var(--border-glow); }
.btn-sm { padding: 0.4rem 0.75rem; font-size: 0.72rem; }
/* Icon-only button that still reads as one of the .btn family - square, with
the horizontal padding cut back to match the vertical so the glyph sits
centred. aspect-ratio rather than a fixed width so it tracks whatever
height .btn currently has, including the 44px touch-target minimum the
tablet/phone tiers set. Give every .btn-icon an aria-label: there is no
visible text for a screen reader to announce. */
/* The height comes from the flex row stretching this to match the labelled
button beside it, which is taller than this one's content (a text line box
vs a 17px icon). The horizontal padding is therefore set slightly wider
than the vertical to land on a true square rather than a 40x42 near-miss -
aspect-ratio alone cannot do it, because a flex item's main size is taken
from its content before the ratio is applied. */
.btn-icon { padding: 0.65rem 0.72rem; aspect-ratio: 1; gap: 0; flex: none; }
.btn-sm.btn-icon { padding: 0.4rem; }
.btn-block { width: 100%; }
.btn[disabled] { opacity: 0.4; cursor: not-allowed; }
/* ---------- Toast ---------- */
/* Transient confirmation for an action that otherwise gives no visible
result - currently just the detail page's Share button, which copies the
page address. Created on demand by showToast() in main.js; the host is a
single live region so repeated presses announce cleanly rather than
stacking up new regions. pointer-events:none throughout, so a toast can
never swallow a click meant for whatever is underneath it. */
.toast-host {
position: fixed; z-index: 120;
left: 50%; bottom: calc(1.4rem + env(safe-area-inset-bottom, 0px));
transform: translateX(-50%);
display: flex; flex-direction: column; align-items: center; gap: 0.5rem;
pointer-events: none;
}
.toast {
display: inline-flex; align-items: center; gap: 0.5rem;
max-width: min(92vw, 26rem);
font-family: var(--font-mono); font-size: 0.74rem; letter-spacing: 0.03em;
color: var(--text-0);
background: var(--chrome-bg-strong);
-webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px);
border: 1px solid var(--radar-dim); border-radius: 999px;
padding: 0.6rem 1rem;
box-shadow: 0 10px 34px rgba(0, 0, 0, 0.45);
opacity: 0; transform: translateY(10px);
transition: opacity 0.18s ease, transform 0.18s ease;
}
.toast.is-in { opacity: 1; transform: none; }
.toast svg { width: 14px; height: 14px; flex: none; color: var(--radar); }
@media (prefers-reduced-motion: reduce) {
.toast { transition: none; }
}
/* Clear of the mobile tab bar, which is fixed to the bottom of the
viewport at this breakpoint. */
@media (max-width: 720px) {
.toast-host { bottom: calc(5.2rem + env(safe-area-inset-bottom, 0px)); }
}
/* ---------- Top bar / nav ---------- */
.topbar {
position: sticky; top: 0; z-index: 50;
background: var(--chrome-bg);
/* Both spellings, matching .toast and .tabbar - this rule carried only the
unprefixed one, so on a browser that supports just -webkit- the blur
silently didn't render and the 86%-opaque --chrome-bg was left to hide
the page on its own, which reads as a see-through header. */
-webkit-backdrop-filter: blur(10px);
backdrop-filter: blur(10px);
border-bottom: 1px solid var(--border-0);
}
/* If the blur cannot render at all, the translucency has nothing behind it
doing the work and page content shows straight through the header. Fall
back to a fully opaque bar: slightly flatter than intended, but legible. */
@supports not ((backdrop-filter: blur(10px)) or (-webkit-backdrop-filter: blur(10px))) {
.topbar { background: var(--bg-1); }
}
.topbar-inner {
display: grid;
grid-template-columns: 1fr auto 1fr;
align-items: center;
gap: 1.75rem;
/* Longhand top/bottom only - a shorthand "0.85rem 0" here would zero out
the left/right padding this element inherits from also carrying the
.container class, which is invisible on wide viewports (.container's
own centering already leaves whitespace at the sides) but leaves the
brand mark and icon buttons sitting flush against the screen edge on
any viewport at or below .container's max-width - i.e. every mobile
and tablet width. Same fix applied to the mobile override below. */
padding-top: 0.85rem;
padding-bottom: 0.85rem;
}
.brand { display: flex; align-items: center; margin-right: 0.5rem; justify-self: start; }
/* Brand lockup: dark/light PNG wordmarks (src/assets/img/logo/), swapped
via the html[data-theme] attribute the same way every other themed
colour swaps - dark logo shows by default, light logo takes over once
the light theme is active (see theme-toggle in main.js). Both images
sit in the same grid cell so the swap doesn't shift layout. */
/* height:auto + max-height (rather than a flat fixed height) so the image
always scales down preserving its own aspect ratio instead of
distorting. With a hard `height: 41px`, the global `img { max-width:
100% }` reset (see the Reset section) could still clamp the rendered
WIDTH down to fit a narrow container while height stayed pinned at
41px, squashing the logo horizontally - exactly what happened on
narrow phones, where the topbar's brand column is well under the
~264px this logo needs at 41px tall. max-width: 100% here (redundant
with the global img rule, kept explicit so this component's sizing
intent is self-contained) plus max-height together let the browser's
normal replaced-element sizing pick whichever constraint is tighter,
never distorting. See the mobile override below for the deliberately
smaller cap on phones. */
.brand-logo {
height: auto;
width: auto;
max-width: 100%;
max-height: 41px;
display: block;
}
.brand-logo-light { display: none; }
html[data-theme="light"] .brand-logo-dark { display: none; }
html[data-theme="light"] .brand-logo-light { display: block; }
.nav { display: flex; align-items: center; justify-content: center; gap: 1.4rem; justify-self: center; }
.nav a {
font-family: var(--font-mono); font-size: 0.78rem; letter-spacing: 0.05em;
text-transform: uppercase; color: var(--text-1);
padding: 0.4rem 0.1rem; border-bottom: 2px solid transparent;
}
.nav a:hover, .nav a[aria-current="page"] { color: var(--radar); border-color: var(--radar); }
.topbar-actions { display: flex; align-items: center; gap: 0.6rem; justify-self: end; }
.icon-btn {
width: 36px; height: 36px; border-radius: var(--radius-sm);
display: flex; align-items: center; justify-content: center;
border: 1px solid var(--border-1); background: var(--bg-3); color: var(--text-1);
}
.icon-btn:hover { color: var(--radar); border-color: var(--radar-dim); }
.theme-toggle[aria-pressed="true"] { color: var(--text-1); border-color: var(--border-1); }
/* Theme-toggle icon swap - sun (dark theme, click to go light) / moon+stars
(light theme, click to go dark), same html[data-theme] swap pattern as
.brand-logo-dark/-light. Both icons render into the button; only one is
ever displayed, so there's no layout shift or flash on toggle. */
.theme-toggle-icon { display: none; }
.theme-toggle-icon-sun { display: flex; align-items: center; justify-content: center; }
html[data-theme="light"] .theme-toggle-icon-sun { display: none; }
html[data-theme="light"] .theme-toggle-icon-moon { display: flex; align-items: center; justify-content: center; }
/* Font-size accessibility control */
/* Traditional "small A / medium A / large A" text-size control - the glyph
itself grows across the three buttons so the size difference is visible
at a glance, not just implied by a "+" suffix. */
.text-scale { display: flex; align-items: flex-end; border: 1px solid var(--border-1); border-radius: var(--radius-sm); overflow: hidden; }
.text-scale button {
background: var(--bg-3); border: none; color: var(--text-2);
font-family: var(--font-sans); font-weight: 700; padding: 0 0.6rem; height: 36px;
border-right: 1px solid var(--border-1);
display: flex; align-items: flex-end; justify-content: center; line-height: 1;
}
.text-scale button.ts-small { font-size: 0.75rem; padding-bottom: 0.5rem; }
.text-scale button.ts-medium { font-size: 1rem; padding-bottom: 0.5rem; }
.text-scale button.ts-large { font-size: 1.3rem; padding-bottom: 0.4rem; }
.text-scale button:last-child { border-right: none; }
.text-scale button[aria-pressed="true"] { color: var(--radar); background: var(--bg-4); }
.text-scale button:hover { color: var(--radar); }
.mobile-toggle { display: none; }
/* NOTE: the topbar is position:sticky (see its base rule) - which also
makes it the containing block for the absolutely-positioned mobile nav
panel, so no extra positioning is needed here. A `position: relative`
override briefly lived on this line and silently killed the sticky
header (and with it the detail pages' stuck tab bar) - don't re-add it. */
/* ---------- Hero (radar scope) ---------- */
/* NOTE: deliberately no overflow:hidden here. The decorative radar scope
(.scope) clips its own sweep/blip animation itself, and clipping at the
.hero level was cutting off the search results dropdown - a descendant
of this element - any time it grew taller than the remaining hero
space, making results invisible on both desktop and mobile. */
.hero {
position: relative;
border-bottom: 1px solid var(--border-0);
background:
radial-gradient(ellipse 70% 60% at 78% 15%, rgba(77,255,176,0.08), transparent 60%),
var(--bg-1);
}
.hero-inner {
position: relative;
/* .hero-inner is also a `.container`, which sets position:relative +
z-index:1 to sit above the fixed decorative grid background. That
z-index:1 makes .hero-inner its own stacking context - and because
every `.section` below it (e.g. "Explore Aircraft by Category") is
ALSO pinned at z-index:1 via the shared `.section` rule, the two tie
and painting falls back to DOM order, so the later section paints
OVER the search-results dropdown even though the dropdown itself is
z-index:40 (that 40 only counts inside .hero-inner's own context).
Bumping this above every `.section`'s z-index:1 fixes it. */
z-index: 2;
/* Longhand top/bottom only - same fix as .section and .topbar-inner
elsewhere in this file: a shorthand "3.6rem 0 3rem" here zeroes out
the left/right padding this element inherits from also carrying the
.container class, which pulled the hero content and radar scope 1.5rem
further out than every other .container-based section (category
tiles, featured aircraft, the brand mark) - a real edge-to-edge
misalignment on every viewport down to the 1080px tablet tier (the
720px mobile block below already re-declares its own explicit
left/right padding, so it wasn't affected). */
padding-top: 3.6rem;
padding-bottom: 3rem;
display: grid;
grid-template-columns: 1.05fr 0.95fr;
gap: 2.5rem;
align-items: center;
}
.hero-eyebrow {
font-family: var(--font-mono); font-size: 0.75rem; color: var(--radar);
letter-spacing: 0.18em; text-transform: uppercase; margin-bottom: 0.9rem;
display: flex; align-items: center; gap: 0.5rem;
}
.hero-eyebrow .dot { width: 7px; height: 7px; border-radius: 50%; background: var(--radar); box-shadow: 0 0 8px var(--radar-glow); animation: blink 2s infinite; }
.hero h1 {
font-family: var(--font-mono);
font-size: clamp(2rem, 4vw, 2.9rem);
line-height: 1.12;
font-weight: 700;
letter-spacing: -0.01em;
text-transform: uppercase;
color: var(--text-0);
}
.hero h1 span { color: var(--radar); text-shadow: 0 0 24px var(--radar-glow); }
.hero p.lede { margin-top: 1.1rem; color: var(--text-1); font-size: 1.03rem; max-width: 46ch; }
/* ---------- Hero variant: "count" (the number is the headline) ----------
Paired with HERO_VARIANT in src/templates/home.js - the section only
carries .hero-count when that constant is "count", so switching the
template back to "classic" leaves every rule below inert rather than
needing them removed.
Everything is nested inside the
(see heroCount() for why), so the
first rule neutralises the base `.hero h1` type styling and the accent
`.hero h1 span` colour before each piece sets its own. Selectors are
deliberately doubled (.hero.hero-count) to out-specify both of those
and the light-theme `html[data-theme="light"] .hero h1 span` glow. */
.hero.hero-count h1.hc-block {
font-size: inherit; line-height: inherit; letter-spacing: normal;
text-transform: none; margin: 0; font-weight: 400;
}
.hero.hero-count h1 span { color: inherit; text-shadow: none; }
.hero.hero-count .hc-row {
display: flex; align-items: center; gap: 1.4rem; margin-bottom: 0.4rem;
}
.hero.hero-count h1 span.hc-num {
font-family: var(--font-mono); font-weight: 700;
font-size: clamp(4.5rem, 11vw, 8.5rem); line-height: 0.85;
color: var(--radar); text-shadow: 0 0 34px var(--radar-glow);
font-variant-numeric: tabular-nums; letter-spacing: -0.04em;
}
.hero.hero-count .hc-side { border-left: 1px solid var(--border-1); padding-left: 1.4rem; }
/* Three lines of pairs sit beside the number, so this runs a step smaller
than .hc-tail (which is the same size the two-line version used to be) -
at the old size the third line pushed the block taller than the figure
next to it and the longest pair crowded the radar on tablets. */
.hero.hero-count .hc-l1 {
display: block;
font-family: var(--font-mono); font-size: clamp(0.9rem, 1.75vw, 1.2rem); font-weight: 700;
text-transform: uppercase; letter-spacing: -0.01em; line-height: 1.2; color: var(--text-0);
}
.hero.hero-count .hc-l2 {
display: block;
font-family: var(--font-mono); font-size: 0.72rem; letter-spacing: 0.16em;
text-transform: uppercase; color: var(--text-2); margin-top: 0.5rem;
}
.hero.hero-count .hc-tail {
display: block;
font-family: var(--font-mono); font-size: clamp(1rem, 2.1vw, 1.45rem); font-weight: 700;
text-transform: uppercase; color: var(--text-0); line-height: 1.15;
}
/* nowrap so a narrow screen breaks between "documented" and "and
counting." rather than stranding "and" at the end of the first line. */
.hero.hero-count .hc-tail em { font-style: normal; color: var(--text-2); white-space: nowrap; }
/* ---------- Hero variant: "flap" (split-flap counter) ----------------
HERO_VARIANT = "flap" in src/templates/home.js. Everything from the
"count" variant above still applies - the section carries BOTH
.hero-count and .hero-flap - and only the figure changes: instead of
a plain numeral that counts up, each digit becomes a Solari-style
leaf that flips to its character on load (assets/js/split-flap.js).
How one unit is put together, since the markup is generated and
there's nothing to read in the templates:
.sf-half.t static - TOP half of the INCOMING character,
sitting behind, revealed as the leaf falls
.sf-half.b static - BOTTOM half of the OUTGOING character,
visible until the falling leaf covers it
.sf-front the outgoing character's top half, hinged on
its bottom edge, rotating 0 -> -90deg
.sf-back the incoming character's bottom half, hinged on
its top edge, rotating 90deg -> 0
Each glyph is drawn at full card height inside a half-height,
overflow-hidden box, so the split lands exactly through the middle of
the numeral. That mid-glyph seam is the whole illusion - if you change
--sf-h you must leave .g at the same height or the halves stop
lining up.
With JavaScript off, the row is just the number as plain text (see
heroFlap() in home.js), styled to match, so nothing is lost.
-------------------------------------------------------------------- */
.hero.hero-flap h1 span.sf-row {
display: inline-flex; gap: 0.24em;
font-family: var(--font-mono); font-weight: 700;
font-size: var(--sf-fs); line-height: 1;
color: var(--sf-ink); text-shadow: none; letter-spacing: normal;
font-variant-numeric: tabular-nums;
}
.hero.hero-flap .sf {
position: relative; display: inline-block;
width: 0.78em; height: var(--sf-h); line-height: var(--sf-h);
perspective: 340px; border-radius: var(--sf-r);
background: var(--sf-card);
box-shadow: inset 0 0 0 1px var(--sf-edge), 0 2px 6px rgba(0,0,0,0.5);
}
.hero.hero-flap .sf-half {
position: absolute; left: 0; right: 0; height: 50%; overflow: hidden;
background: var(--sf-card); backface-visibility: hidden;
}
.hero.hero-flap .sf-half.t {
top: 0; border-radius: var(--sf-r) var(--sf-r) 0 0;
background: linear-gradient(180deg, var(--sf-card-hi), var(--sf-card));
}
.hero.hero-flap .sf-half.b {
bottom: 0; border-radius: 0 0 var(--sf-r) var(--sf-r);
background: linear-gradient(180deg, var(--sf-card), var(--sf-card-lo));
}
/* .g must stay the FULL card height inside its half-height box - that's
what splits the numeral across the seam. Colour is set here at a
weight that clears the `.hero.hero-count h1 span { color: inherit }`
reset above, which would otherwise repaint the glyphs. */
.hero.hero-flap h1 .sf-half span.g {
position: absolute; left: 0; width: 100%; height: var(--sf-h);
text-align: center; color: var(--sf-ink); text-shadow: none;
}
.hero.hero-flap .sf-half.t .g { top: 0; }
.hero.hero-flap .sf-half.b .g { bottom: 0; }
/* hinge seam and pins, drawn over the leaves */
.hero.hero-flap .sf::after {
content: ""; position: absolute; left: 0; right: 0; top: 50%; height: 2px;
transform: translateY(-1px); background: var(--sf-seam); z-index: 6; pointer-events: none;
}
.hero.hero-flap .sf::before {
content: ""; position: absolute; top: 50%; left: -2px; right: -2px; height: 7px;
transform: translateY(-3.5px); z-index: 7; pointer-events: none; border-radius: 2px;
background: linear-gradient(90deg, var(--sf-pin) 0 4px, transparent 4px calc(100% - 4px), var(--sf-pin) calc(100% - 4px) 100%);
}
.hero.hero-flap .sf-front, .hero.hero-flap .sf-back { z-index: 5; }
.hero.hero-flap .sf-front { transform-origin: bottom; }
.hero.hero-flap .sf-back { transform-origin: top; transform: rotateX(90deg); }
.hero.hero-flap .sf.flip .sf-front { animation: sf-fall var(--sf-dur) cubic-bezier(.36,.06,.31,1) forwards; }
.hero.hero-flap .sf.flip .sf-back { animation: sf-rise var(--sf-dur) cubic-bezier(.36,.06,.31,1) forwards; }
@keyframes sf-fall { 0% { transform: rotateX(0); } 50%,100% { transform: rotateX(-90deg); } }
@keyframes sf-rise { 0%,50% { transform: rotateX(90deg); } 100% { transform: rotateX(0); } }
/* Shading as the leaf turns. Cheap, and it's what stops the flip
reading as a flat card swap. */
.hero.hero-flap .sf.flip .sf-front .g { animation: sf-dark var(--sf-dur) linear forwards; }
.hero.hero-flap .sf.flip .sf-back .g { animation: sf-lift var(--sf-dur) linear forwards; }
@keyframes sf-dark { 0% { filter: brightness(1); } 50%,100% { filter: brightness(0.45); } }
@keyframes sf-lift { 0%,50% { filter: brightness(0.45); } 100% { filter: brightness(1); } }
/* Palette + size. Dark theme: a departure board is a dark object, so
the leaves are near-black with the neon radar green as ink. */
.hero.hero-flap h1 span.sf-row {
--sf-card: #0e1620; --sf-card-hi: #16202c; --sf-card-lo: #0a1017;
--sf-edge: #1d2b3a; --sf-seam: #05080c; --sf-pin: #38485c;
--sf-ink: var(--radar);
--sf-h: 1.18em; --sf-r: 10px; --sf-dur: 90ms;
--sf-fs: clamp(4rem, 9.6vw, 7.4rem);
}
/* Light theme: ivory leaves with printed ink, rather than the dark
board retinted. The light theme's whole character is paper - contour
grid, paper grain, parchment ground - so a cream departure board with
near-black ink belongs to it in a way a dark widget does not.
The risk the dark palette was avoiding is real and is handled here:
pale leaves on a pale page lose the seam. Three things prevent that -
the card sits a shade LIGHTER than --bg-1 rather than darker, the
seam and pins are taken well past the leaf edge in tone, and a warm
shadow under each leaf separates it from the page. Lighten the seam
or flatten the shadow and the split stops reading. */
html[data-theme="light"] .hero.hero-flap h1 span.sf-row {
--sf-card: #f3eee0; --sf-card-hi: #fcf9f1; --sf-card-lo: #e2d9c2;
--sf-edge: #c0b18e; --sf-seam: #8d7c58; --sf-pin: #5d5139;
--sf-ink: #23301f;
}
html[data-theme="light"] .hero.hero-flap .sf {
box-shadow: inset 0 0 0 1px var(--sf-edge), 0 2px 7px rgba(84,72,44,0.28);
}
.search-panel { margin-top: 1.9rem; }
/* Sized to line up with .select/.input (the "Sort by" dropdown sits right
next to this on the Aircraft Database toolbar) rather than its own
larger padding/font-size - it used to run noticeably taller than every
other control next to it. */
.search-box {
display: flex; align-items: center; gap: 0.5rem;
background: var(--bg-2); border: 1px solid var(--border-1); border-radius: var(--radius-md);
padding: 0.22rem 0.3rem 0.22rem 0.85rem;
}
.search-box:focus-within { border-color: var(--radar-dim); box-shadow: 0 0 0 3px rgba(77,255,176,0.12); }
.search-box svg { color: var(--text-2); flex-shrink: 0; }
.search-box input {
flex: 1; background: transparent; border: none; outline: none;
color: var(--text-0); font-size: 0.85rem; padding: 0.5rem 0;
/* Placeholder/value that still doesn't fit fades out with an ellipsis
instead of clipping mid-word against the attached Search button. */
min-width: 0; text-overflow: ellipsis;
}
.search-box input::placeholder { color: var(--text-3); }
/* Hero search's attached "Search" button (see home.js) - without this it
keeps the default .btn padding, which is taller than the box above once
that box is shrunk, and ends up dictating the whole row's height again. */
.search-box .btn { padding: 0.5rem 0.9rem; font-size: 0.85rem; }
.search-popular { margin-top: 0.7rem; font-size: 0.78rem; color: var(--text-3); font-family: var(--font-mono); }
.search-popular a { color: var(--text-1); }
.search-popular a:hover { color: var(--amber); }
/* Search dropdown results (used in header + hero search) */
[data-search-box] { position: relative; }
[data-search-results] {
position: absolute; top: calc(100% + 0.5rem); left: 0; right: 0; z-index: 40;
background: var(--bg-2); border: 1px solid var(--border-1); border-radius: var(--radius-md);
box-shadow: 0 16px 40px rgba(0,0,0,0.5); overflow-y: auto; max-height: 420px;
}
.search-result { display: flex; align-items: center; gap: 0.75rem; padding: 0.6rem 0.9rem; border-bottom: 1px solid var(--border-0); }
.search-result:last-child { border-bottom: none; }
.search-result:hover, .search-result:focus-visible { background: var(--bg-4); }
/* Small silhouette thumbnail so a result is recognisable before the page
even loads - reuses the same silhouette artwork as the plane cards. */
.sr-thumb {
width: 44px; height: 44px; flex-shrink: 0; border-radius: var(--radius-sm);
background: linear-gradient(160deg, var(--bg-4), var(--bg-2)); border: 1px solid var(--border-0);
display: flex; align-items: center; justify-content: center; overflow: hidden;
}
.sr-thumb svg { width: 85%; height: 85%; }
/* Generic "real photo instead of the SVG silhouette" thumbnail - used
wherever an aircraft has images.hero, sized to fill whatever small icon
box it's dropped into (card media, compare slots/table, presets, search
results) exactly the way the silhouette SVGs already did. */
.thumb-photo { width: 100%; height: 100%; object-fit: cover; display: block; }
.sr-info { flex: 1; min-width: 0; }
.sr-name-row { display: flex; align-items: center; gap: 0.4rem; }
.sr-name { font-weight: 600; font-size: 0.88rem; }
.sr-status-dot { width: 6px; height: 6px; border-radius: 50%; background: var(--radar); box-shadow: 0 0 6px var(--radar-glow); flex-shrink: 0; }
.sr-status-dot.retired { background: var(--text-3); box-shadow: none; }
.sr-status-dot.development { background: var(--cyan); box-shadow: 0 0 6px rgba(79,215,255,0.5); }
.sr-status-dot.cancelled { background: var(--orange); box-shadow: 0 0 6px rgba(255,138,77,0.5); }
.sr-meta {
display: block; margin-top: 0.15rem; font-size: 0.7rem; color: var(--text-3);
text-transform: uppercase; letter-spacing: 0.04em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.sr-meta .flag-icon { margin-right: 0.35rem; }
.sr-stat { flex-shrink: 0; text-align: right; font-size: 0.76rem; color: var(--radar); white-space: nowrap; }
.sr-stat small { display: block; font-size: 0.6rem; color: var(--text-3); text-transform: uppercase; letter-spacing: 0.05em; margin-top: 0.1rem; }
.search-empty { padding: 0.9rem 1rem; font-size: 0.8rem; color: var(--text-3); }
.search-more { display: block; text-align: center; padding: 0.7rem; font-family: var(--font-mono); font-size: 0.76rem; color: var(--amber); }
.search-more:hover { background: var(--bg-4); }
/* Radar scope visual */
.scope {
position: relative; aspect-ratio: 1 / 1; width: 100%; max-width: 460px; justify-self: end;
border-radius: 50%;
background: radial-gradient(circle at 50% 50%, #0c1a15 0%, #08120e 70%, #060b09 100%);
border: 1px solid var(--border-1);
box-shadow: inset 0 0 60px rgba(0,0,0,0.6), 0 0 60px rgba(77,255,176,0.06);
overflow: hidden;
}
.scope::before, .scope::after {
content: ""; position: absolute; border: 1px solid rgba(77,255,176,0.16); border-radius: 50%;
}
.scope::before { inset: 12%; }
.scope::after { inset: 32%; }
.scope-ring-outer { position: absolute; inset: 4%; border: 1px solid rgba(77,255,176,0.12); border-radius: 50%; }
.scope-cross { position: absolute; inset: 0; }
.scope-cross::before, .scope-cross::after {
content: ""; position: absolute; background: rgba(77,255,176,0.14);
}
.scope-cross::before { left: 0; right: 0; top: 50%; height: 1px; }
.scope-cross::after { top: 0; bottom: 0; left: 50%; width: 1px; }
.scope-sweep {
position: absolute; inset: 0; border-radius: 50%;
/* Like a real PPI display: a definite bright line LEADS the sweep, with
the phosphor glow trailing ~85deg behind it and fading out. The line
sits at 90deg in the gradient, so the beam's actual bearing at any
moment is (rotation + 90deg) - the 404 blip timing in @keyframes
nf-ping is derived from that. */
background: conic-gradient(from 0deg,
transparent 0deg,
rgba(77, 255, 176, 0.02) 20deg,
rgba(77, 255, 176, 0.10) 60deg,
rgba(77, 255, 176, 0.28) 85deg,
rgba(77, 255, 176, 0.60) 89.3deg,
rgba(170, 255, 210, 0.95) 89.7deg,
rgba(170, 255, 210, 0.95) 90deg,
transparent 90.4deg);
animation: sweep 4.5s linear infinite;
mix-blend-mode: screen;
}
.blip { position: absolute; width: 7px; height: 7px; border-radius: 50%; background: #4dffb0; box-shadow: 0 0 10px rgba(77,255,176,0.55); }
.blip-label {
position: absolute; font-family: var(--font-mono); font-size: 0.62rem; color: #4dffb0;
white-space: nowrap; transform: translateY(-140%);
text-shadow: 0 0 6px rgba(0,0,0,0.9);
}
.blip-1 { top: 22%; left: 30%; } .blip-2 { top: 62%; left: 68%; } .blip-3 { top: 40%; left: 78%; }
.blip-4 { top: 74%; left: 24%; } .blip-5 { top: 15%; left: 62%; }
@keyframes sweep { to { transform: rotate(360deg); } }
@keyframes blink { 0%, 100% { opacity: 1; } 50% { opacity: 0.25; } }
/* ---------- Category tiles ---------- */
.cat-grid {
/* One tile per category in a single row on desktop (grid-auto-flow:
column makes every child its own equal column); the tablet/phone
media queries below flip auto-flow back to row and wrap into
4 / 3 / 2 columns. */
display: grid; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); gap: 0.8rem;
align-items: stretch;
}
.cat-tile {
background: var(--bg-3); border: 1px solid var(--border-0); border-radius: var(--radius-md);
padding: 1rem 0.45rem; text-align: center; transition: border-color .15s, transform .15s, background .15s;
/* Flex + center, not just text-align, so the icon/name/count block stays
vertically centered even when a neighbouring tile's longer label
(e.g. "Fighter Jets") wraps to two lines and stretches the row. */
display: flex; flex-direction: column; align-items: center; justify-content: center;
}
.cat-tile:hover { border-color: var(--radar-dim); background: var(--bg-4); transform: translateY(-2px); }
.cat-tile svg { margin: 0 auto 0.55rem; color: var(--radar); width: 26px; height: 26px; flex-shrink: 0; }
.cat-tile .cat-name { font-size: 0.82rem; font-weight: 600; }
.cat-tile .cat-count { display: block; font-family: var(--font-mono); font-size: 0.72rem; color: var(--text-3); margin-top: 0.2rem; }
/* ---------- Cards / grids ---------- */
.grid-4 { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1.1rem; }
.grid-3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.1rem; }
.grid-2 { display: grid; grid-template-columns: repeat(2, 1fr); gap: 1.1rem; }
.plane-card {
background: var(--bg-3); border: 1px solid var(--border-0); border-radius: var(--radius-lg);
overflow: hidden; display: flex; flex-direction: column;
transition: border-color .15s, transform .15s, box-shadow .15s;
}
.plane-card:hover { border-color: var(--radar-dim); transform: translateY(-3px); box-shadow: 0 14px 30px rgba(0,0,0,0.35); }
.plane-card-media {
aspect-ratio: 16/10; background: linear-gradient(160deg, var(--bg-4), var(--bg-2));
display: flex; align-items: center; justify-content: center; position: relative;
border-bottom: 1px solid var(--border-0);
}
.plane-card-media svg { width: 78%; opacity: 0.92; }
.plane-card-badge {
position: absolute; top: 0.6rem; left: 0.6rem;
font-family: var(--font-mono); font-size: 0.62rem; letter-spacing: 0.08em; text-transform: uppercase;
background: rgba(6,10,16,0.75); border: 1px solid var(--border-1); color: var(--radar);
padding: 0.2rem 0.5rem; border-radius: 999px;
}
/* Category badge row - small icon-only chips (bottom-left of the media
area) showing every category an aircraft belongs to, e.g. a plane
tagged both "military" and "cargo" shows both icons, not just its
single primary role. Deliberately tiny/quiet so it doesn't compete
with the role badge or the silhouette artwork. */
.plane-card-cats { position: absolute; bottom: 0.6rem; left: 0.6rem; z-index: 2; display: flex; gap: 0.3rem; }
.cat-badge {
width: 22px; height: 22px; border-radius: 50%;
background: rgba(6,10,16,0.78); border: 1px solid var(--border-1); color: var(--radar);
display: flex; align-items: center; justify-content: center;
}
.cat-badge svg { width: 12px; height: 12px; }
.plane-card-body { padding: 0.95rem 1rem 1.1rem; flex: 1; display: flex; flex-direction: column; gap: 0.4rem; }
.plane-card-body h3 { font-size: 1rem; font-weight: 700; }
.plane-card-body .role { font-size: 0.78rem; color: var(--text-2); }
.plane-card-stats {
display: flex; flex-wrap: wrap; gap: 0.7rem 1rem; margin-top: auto; padding-top: 0.7rem; border-top: 1px dashed var(--border-1);
font-family: var(--font-mono); font-size: 0.72rem; color: var(--text-2);
}
.plane-card-stats span { min-width: 0; max-width: 100%; }
.plane-card-stats b { color: var(--text-0); display: block; font-size: 0.82rem; max-width: 200px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
/* News cards */
.news-card { background: var(--bg-3); border: 1px solid var(--border-0); border-radius: var(--radius-md); overflow: hidden; }
.news-card-media { aspect-ratio: 16/9; background: linear-gradient(160deg, var(--bg-4), var(--bg-2)); display:flex; align-items:center; justify-content:center; }
.news-card-media svg { width: 46%; opacity: 0.5; }
.news-card-body { padding: 0.85rem 0.95rem 1rem; }
.news-card-body h4 { font-size: 0.9rem; line-height: 1.35; font-weight: 600; }
.news-meta { font-family: var(--font-mono); font-size: 0.72rem; color: var(--text-3); margin-bottom: 0.45rem; text-transform: uppercase; letter-spacing: 0.04em; }
.news-meta .tag { color: var(--amber); }
.news-meta .featured { color: var(--radar); }
/* RSS source directory (News page) */
/* Aircraft detail — photo gallery (local user-supplied images) */
.photo-gallery-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 0.9rem; margin-top: 0.4rem; }
.photo-gallery-item { background: var(--bg-3); border: 1px solid var(--border-0); border-radius: var(--radius-md); overflow: hidden; margin: 0; }
.photo-gallery-open {
display: block; width: 100%; padding: 0; border: none; margin: 0; cursor: zoom-in;
background: none; position: relative;
}
.photo-gallery-open::after {
content: ""; position: absolute; inset: 0; opacity: 0; transition: opacity .15s ease;
background: rgba(6,10,16,0.25);
}
.photo-gallery-open:hover::after, .photo-gallery-open:focus-visible::after { opacity: 1; }
.photo-gallery-item img { width: 100%; aspect-ratio: 4/3; object-fit: cover; display: block; }
.photo-gallery-item figcaption { padding: 0.5rem 0.7rem; font-size: 0.72rem; color: var(--text-2); }
/* ---------- Gallery lightbox: caption + next/prev nav ----------
Extends the .lightbox/.lightbox-close/.lightbox-inner base built for the
compare page's click-to-zoom - same overlay, same close behaviour, this
just adds a caption line and prev/next arrows for stepping through a set
of photos instead of viewing a single image. */
.lightbox-caption {
color: var(--text-2); font-size: 0.8rem; text-align: center;
max-width: 720px; margin: 0.9rem auto 0; padding: 0 1rem;
}
.lightbox-nav {
position: fixed; top: 50%; transform: translateY(-50%); z-index: 501;
width: 48px; height: 48px; border-radius: 50%;
display: flex; align-items: center; justify-content: center;
background: var(--bg-2); border: 1px solid var(--border-1); color: var(--text-0); cursor: pointer;
}
.lightbox-nav:hover { border-color: var(--radar-dim); color: var(--radar); }
.lightbox-nav svg { width: 22px; height: 22px; }
.lightbox-prev { left: 1.2rem; }
.lightbox-prev svg { transform: rotate(180deg); }
.lightbox-next { right: 1.2rem; }
@media (max-width: 720px) {
.lightbox-nav { width: 40px; height: 40px; }
.lightbox-prev { left: 0.5rem; }
.lightbox-next { right: 0.5rem; }
.lightbox-caption { font-size: 0.72rem; }
}
/* ---------- "On This Day" banner ----------
Sits just above the Quick Facts/Airshows strip (see onThisDayBanner()
in home.js) as a stack of up to 5 colour-coded callouts, one per
event matching today's date. Ships server-side as an empty [hidden]
list - see src/assets/js/otd.js, which builds the actual banner(s) and
only clears [hidden] once it's found at least one real match for
today's date, so a visitor never sees an empty list flash before JS
runs, and a day with nothing in the database for it just quietly has
no banner at all.
Each banner's colour comes from its category (see otdCategory() in
build.js and CATEGORY_INFO in otd.js): amber = incident, green = first
flight, blue = development starts, red = retirement, purple =
milestone/everything else. Top-aligned rather than centered since the
fact text can run to a full sentence or two and wrap across lines. */
.otd-list { display: flex; flex-direction: column; gap: 0.6rem; margin: 1.6rem 0; }
.otd-banner {
/* Accent colour is a custom property so each otd-c- variant
below is a one-line override - nothing else in the rule changes
between categories. */
--otd-accent: var(--amber);
--otd-accent-bg: rgba(245,185,66,0.07);
--otd-accent-border: rgba(245,185,66,0.3);
display: flex; align-items: flex-start; gap: 0.7rem;
background: var(--otd-accent-bg); border: 1px solid var(--otd-accent-border); border-left: 3px solid var(--otd-accent);
border-radius: var(--radius-md); padding: 0.9rem 1.1rem;
}
.otd-icon { color: var(--otd-accent); flex: none; display: inline-flex; margin-top: 0.15rem; }
.otd-icon svg { width: 20px; height: 20px; }
.otd-body { display: flex; flex-direction: column; gap: 0.55rem; min-width: 0; flex: 1 1 auto; }
.otd-text { font-size: 0.88rem; line-height: 1.55; color: var(--text-1); }
.otd-label { color: var(--text-0); }
.otd-label span { color: var(--otd-accent); font-family: var(--font-mono); }
/* Clickable jump-through to the mentioned aircraft's own page - a small
pill rather than inline text so it reads as an action, not more prose. */
.otd-plane-tile {
display: inline-flex; align-items: center; gap: 0.4rem; align-self: flex-start;
background: var(--bg-1); border: 1px solid var(--otd-accent-border);
border-radius: var(--radius-sm); padding: 0.3rem 0.65rem;
font-family: var(--font-mono); font-size: 0.78rem; font-weight: 600;
color: var(--otd-accent); text-decoration: none;
transition: background 0.15s ease, border-color 0.15s ease;
}
.otd-plane-tile:hover { background: var(--otd-accent-bg); border-color: var(--otd-accent); }
.otd-plane-icon { display: inline-flex; flex: none; }
.otd-plane-icon svg { width: 14px; height: 14px; }
@media (max-width: 640px) {
.otd-banner { padding: 0.75rem 0.9rem; }
.otd-text { font-size: 0.8rem; }
}
.otd-c-incident { --otd-accent:#f5b942; --otd-accent-bg:rgba(245,185,66,0.07); --otd-accent-border:rgba(245,185,66,0.3); }
.otd-c-first-flight { --otd-accent:#4dffb0; --otd-accent-bg:rgba(77,255,176,0.07); --otd-accent-border:rgba(77,255,176,0.3); }
.otd-c-development { --otd-accent:#4da6ff; --otd-accent-bg:rgba(77,166,255,0.07); --otd-accent-border:rgba(77,166,255,0.3); }
.otd-c-retirement { --otd-accent:#ff5c5c; --otd-accent-bg:rgba(255,92,92,0.07); --otd-accent-border:rgba(255,92,92,0.3); }
.otd-c-milestone { --otd-accent:#b380ff; --otd-accent-bg:rgba(179,128,255,0.07); --otd-accent-border:rgba(179,128,255,0.3); }
/* ---------- Recently Updated (homepage maintenance log) ---------- */
/* Intentionally NOT a .panel/.card: this block is the one place on the
homepage that should read as a record rather than a feature, so it uses
hairline rows on the page background instead of card chrome. The amber
left edge only appears on hover, so a static screenshot stays quiet. */
.updates-log { border-top: 1px solid var(--border-0); }
.update-row {
display: grid;
grid-template-columns: 4.6rem minmax(0, 1fr) 8.5rem;
gap: 0 1.2rem;
padding: 0.75rem 0.7rem;
border-bottom: 1px solid var(--border-0);
border-left: 2px solid transparent;
color: var(--text-0);
transition: background 0.15s ease, border-left-color 0.15s ease;
}
.update-row:hover { background: var(--bg-2); border-left-color: var(--amber); }
.update-when {
font-size: 0.68rem; line-height: 1.35; color: var(--text-3);
white-space: nowrap; padding-top: 0.12rem;
}
.update-when b {
display: block; font-size: 0.76rem; font-weight: 600;
color: var(--amber); letter-spacing: 0.03em;
}
.update-body { min-width: 0; }
/* Wraps because a grouped row lists up to four aircraft; each name carries
its own flag, which does the separating a middot would otherwise do. */
.update-planes {
display: flex; flex-wrap: wrap; align-items: center;
gap: 0.2rem 0.75rem; margin-bottom: 0.24rem;
}
.update-planes a {
display: inline-flex; align-items: center; gap: 0.38rem;
font-size: 0.92rem; font-weight: 600; color: var(--text-0);
transition: color 0.15s ease;
}
.update-planes a:hover { color: var(--radar); }
.update-planes .flag-icon { flex: none; }
.update-more { font-family: var(--font-mono); font-size: 0.7rem; color: var(--text-3); }
.update-text {
display: -webkit-box; -webkit-box-orient: vertical;
-webkit-line-clamp: 2; line-clamp: 2; overflow: hidden;
/* Capped measure: the grid column is far wider than comfortable reading
length on a 1440px screen, and an uncapped line never reaches the
two-line clamp it was written for. */
max-width: 82ch;
font-size: 0.82rem; line-height: 1.45; color: var(--text-2);
}
.update-who {
text-align: right; font-size: 0.68rem; line-height: 1.35;
color: var(--text-3); white-space: nowrap; padding-top: 0.12rem;
}
.update-who b { display: block; font-weight: 500; font-size: 0.74rem; color: var(--text-1); }
.update-revs { display: block; }
.updates-foot { margin-top: 0.85rem; font-size: 0.7rem; color: var(--text-3); }
/* Phone: date and author share the top line, the entry drops underneath.
The entry count goes - it is the least useful number here at this
width, and dropping it keeps the author on one line. */
@media (max-width: 720px) {
.update-row { grid-template-columns: minmax(0, 1fr) auto; gap: 0.25rem 0.8rem; padding: 0.8rem 0.6rem; }
.update-when { grid-column: 1; grid-row: 1; }
.update-when b { display: inline; }
.update-who { grid-column: 2; grid-row: 1; }
.update-who b { display: inline; }
.update-revs { display: none; }
.update-body { grid-column: 1 / -1; grid-row: 2; }
/* Four names + flags only fit two to a line at 390px; a slightly smaller
name keeps a grouped row to two lines instead of three. */
.update-planes { gap: 0.2rem 0.6rem; }
.update-planes a { font-size: 0.86rem; }
}
/* ---------- Bottom info strip ---------- */
.strip { display: grid; grid-template-columns: 1.1fr 1fr 1.3fr; gap: 1.1rem; }
.strip-2 { grid-template-columns: 1fr 1fr; }
.panel { background: var(--bg-2); border: 1px solid var(--border-0); border-radius: var(--radius-md); padding: 1.1rem 1.2rem; }
.panel h3 { font-family: var(--font-mono); font-size: 0.78rem; letter-spacing: 0.08em; text-transform: uppercase; color: var(--text-1); margin-bottom: 0.9rem; display:flex; align-items:center; justify-content:space-between; }
.route-list, .forum-list { display: flex; flex-direction: column; gap: 0.65rem; }
.route-list li, .forum-list li { display: flex; justify-content: space-between; font-size: 0.84rem; gap: 0.6rem; }
.route-list .r-rank { color: var(--amber); font-family: var(--font-mono); margin-right: 0.4rem; }
.route-list .r-count { font-family: var(--font-mono); color: var(--text-3); white-space: nowrap; }
.forum-list a { color: var(--text-0); }
.forum-list a:hover { color: var(--radar); }
.forum-meta { font-family: var(--font-mono); font-size: 0.7rem; color: var(--text-3); }
.live-stats-source { margin-top: 0.8rem; font-size: 0.66rem; font-family: var(--font-mono); color: var(--text-3); }
/* ---------- Footer ---------- */
.site-footer { border-top: 1px solid var(--border-0); background: var(--bg-0); padding: 2.6rem 0 1.6rem; margin-top: 2rem; }
.footer-grid { display: grid; grid-template-columns: 1.4fr repeat(3, 1fr); gap: 2rem; }
.footer-grid h4 { font-family: var(--font-mono); font-size: 0.74rem; letter-spacing: 0.1em; text-transform: uppercase; color: var(--text-2); margin-bottom: 0.9rem; }
.footer-grid ul { display: flex; flex-direction: column; gap: 0.5rem; }
.footer-grid a { font-size: 0.85rem; color: var(--text-1); }
.footer-grid a:hover { color: var(--radar); }
.footer-about p { color: var(--text-2); font-size: 0.85rem; max-width: 34ch; margin-top: 0.7rem; }
.social-row { display: flex; gap: 0.6rem; margin-top: 1rem; }
.footer-bottom { margin-top: 2.2rem; padding-top: 1.2rem; border-top: 1px solid var(--border-0); display: flex; justify-content: space-between; font-size: 0.76rem; color: var(--text-3); font-family: var(--font-mono); }
/* ---------- Breadcrumb ---------- */
.breadcrumb { display: flex; align-items: center; gap: 0.45rem; font-size: 0.8rem; color: var(--text-2); padding: 1.1rem 0; font-family: var(--font-mono); flex-wrap: wrap; }
.breadcrumb a:hover { color: var(--radar); }
.breadcrumb .sep { color: var(--text-3); }
/* ---------- Detail header ---------- */
.detail-head { display: flex; justify-content: space-between; align-items: flex-start; gap: 1.5rem; flex-wrap: wrap; padding-bottom: 1.6rem; }
/* Without an explicit basis, this column shrinks to fit its own widest
child (usually the name/badges row) rather than growing to fill the
space .detail-actions doesn't need - which was capping .detail-sub's
available width well short of its own 60ch max-width, especially once
the tagline became 2 sentences. flex-grow lets it claim the rest of the
row; min-width: 0 stops a long unbroken plane name from blowing the
flex item wider than the row instead of wrapping normally. */
.detail-head > div:first-child { flex: 1 1 420px; min-width: 0; }
.detail-title { display: flex; align-items: center; gap: 0.8rem; flex-wrap: wrap; }
.detail-title h1 { font-family: var(--font-mono); font-size: clamp(1.6rem, 3vw, 2.1rem); text-transform: uppercase; }
.badge { display: inline-flex; align-items: center; gap: 0.35rem; font-family: var(--font-mono); font-size: 0.68rem; letter-spacing: 0.06em; text-transform: uppercase; padding: 0.28rem 0.6rem; border-radius: 999px; border: 1px solid var(--border-1); }
.badge-radar { color: var(--radar); border-color: var(--radar-dim); background: rgba(77,255,176,0.08); }
.badge-amber { color: var(--amber); border-color: var(--amber-dim); background: rgba(245,185,66,0.08); }
.badge-red { color: var(--red); border-color: #7a2f2f; background: rgba(255,92,92,0.08); }
.badge-cyan { color: var(--cyan); border-color: var(--cyan); background: rgba(79,215,255,0.08); }
.badge-orange { color: var(--orange); border-color: var(--orange); background: rgba(255,138,77,0.08); }
/* Detail-page title badges: role + status render twice - as the two separate
badges above (.badge-split) - on phones the ROLE half is dropped rather
than merged into the status (swapped at the 720px breakpoint,
where the separate pair usually wrapped to a second line under the h1).
The status suffix keeps its usual amber/red state colour. */
/* The role and status pills are always separate now - the merged
"Role \u00b7 Status" phone badge that used to live here is gone; see the
note beside .badge-split in the 720px block. */
/* Was capped at 60ch, then 74ch to match .prose (the site's other
long-form-text width) - but this row isn't running body-copy prose next
to other columns, it's the only thing in its flex item (see
".detail-head > div:first-child" above, which already grows to fill the
row up to wherever .detail-actions sits), so a ch-based cap just left a
dead gap between the end of the text and the actions column instead of
using that space. Uncapped here; the flex item's own width (bounded by
the row and the actions column next to it) is what keeps lines from
running edge-to-edge on very wide screens. */
.detail-sub { color: var(--text-1); margin-top: 0.5rem; max-width: none; }
/* Two variants of the same line (see firstSentence()/detail.js): the full
2-sentence tagline is the desktop default, and a first-sentence-only
version swaps in at mobile width (below) so the extra sentence doesn't
push the hero photo further down a phone screen before anything else
is visible. */
.detail-sub-short { display: none; }
.detail-actions { display: flex; gap: 0.6rem; }
/* "Last updated " now sits under the name/tagline (not over the
hero photo - see detail.js render() for why) as a normal inline pill,
not an absolutely-positioned overlay. Wrapped in .updated-row alongside a
second, mobile-only compact "Compare" button (.detail-actions-mobile) -
hidden here by default and swapped in at the 720px breakpoint below in
place of the desktop .detail-actions block, which was rendering as an
oversized full-width button on a phone (see .detail-actions{width:100%}
further down). margin-top now lives on the row rather than the flag
itself so the two sit level with each other instead of the flag getting
pushed down by its own top margin inside the flex row. */
.updated-row { display: flex; align-items: center; flex-wrap: wrap; gap: 0.6rem; margin-top: 0.7rem; }
/* Phone-width copy of the pill's label; the long one is hidden there
instead. See the note beside this markup in detail.js render(). */
.updated-date-short { display: none; }
.updated-flag {
font-family: var(--font-mono); font-size: 0.68rem; color: var(--text-2);
white-space: nowrap;
background: var(--bg-2); border: 1px solid var(--border-1); padding: 0.3rem 0.6rem; border-radius: 999px;
display: inline-flex; align-items: center; gap: 0.4rem;
}
.detail-actions-mobile { display: none; }
/* The mobile Compare + Share pair, kept together on one line - see the
comment beside this markup in detail.js render(). */
.updated-row-actions { gap: 0.6rem; }
.updated-flag .dot { width: 6px; height: 6px; border-radius: 50%; background: var(--radar); box-shadow: 0 0 6px var(--radar-glow); }
/* Hero media strip for detail page */
.detail-hero-media {
position: relative; border: 1px solid var(--border-0); border-radius: var(--radius-lg); overflow: hidden;
background: radial-gradient(ellipse 90% 130% at 20% 0%, rgba(77,255,176,0.10), transparent 60%), var(--bg-2);
padding: 2.4rem 2rem; display:flex; align-items:center; justify-content:center; min-height: 260px;
}
.detail-hero-media svg { width: min(680px, 90%); }
/* Real-photo hero variant (opt-in per aircraft via images.hero) - the
silhouette version is a padded icon on a flat panel, but a photo wants to
fill the frame edge-to-edge like a proper header image. */
.detail-hero-media.has-photo { padding: 0; min-height: 0; background: var(--bg-2); }
/* height:auto (not a fixed max-height + object-fit:cover) so the box always
matches the photo's own aspect ratio - the whole aircraft stays in frame
no matter how the photographer composed the shot. max-height caps how tall
the hero is allowed to get, and contain (not cover) means that cap
letterboxes instead of cropping.
This base rule still applies as-is to the Aircraft of the Week card
(.aotw-media in aotw.js, which reuses these classes), where the photo
should fill its card edge-to-edge. The detail page's own hero overrides
it below. */
.detail-hero-photo { display: block; width: 100%; height: auto; max-height: 620px; object-fit: contain; margin: 0 auto; }
/* Shrink-wrapped detail-page hero.
---------------------------------
The panel used to be a full-column box that the photo was stretched into.
Because 40 of the ~51 hero photos are around 3:2 - taller, proportionally,
than a 1272px-wide box capped at 620px - `object-fit: contain` letterboxed
them, leaving up to ~235px of empty panel background as visible bars down
either side of the picture.
So the box now sizes itself to the photo rather than the other way round:
`width: fit-content` shrinks it to whatever the image actually renders at,
and it stays left-aligned with the rest of the column. The image keeps the SAME
maximum it had before (the column's full width, and 620px tall), so a
large photo is displayed exactly as large as it always was - it is only
the empty box around it that goes. `width: auto` means a photo smaller
than those limits is never stretched up to fill the column either; the box
closes in around it instead, which keeps it sharp.
Scoped away from .aotw-media on purpose: that card has its own min-height
and sits in a fixed-width panel, where a shrink-wrapped photo would just
move the gap somewhere else. */
.detail-hero-media.has-photo:not(.aotw-media) {
width: fit-content;
max-width: 100%;
/* Left-aligned in the column, flush with the breadcrumb, title and the
spec tiles below it, rather than floating centred between them. */
margin-left: 0;
margin-right: auto;
}
.detail-hero-media.has-photo:not(.aotw-media) .detail-hero-photo {
width: auto;
max-width: 100%;
}
.hero-photo-credit {
/* Above the photo. The Aircraft of the Week banner gives its photo
z-index:1 so it stacks over .aotw-media-backdrop, and without a z-index
of its own this pill lost the paint order to it: the pill rendered
underneath the photo, so only the part hanging past the photo's edge -
over the blurred backdrop - was visible, which read as a credit line
floating in the top-right corner with its first half chopped off. */
position: absolute; z-index: 2;
bottom: 0.9rem; left: 1rem; max-width: calc(100% - 2rem);
font-family: var(--font-mono); font-size: 0.66rem; color: var(--text-2);
background: rgba(6,10,16,0.7); border: 1px solid var(--border-1); padding: 0.3rem 0.6rem; border-radius: 999px;
overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
@media (max-width: 720px) {
.hero-photo-credit { left: 0.6rem; right: 0.6rem; max-width: none; bottom: 0.6rem; }
}
/* ---------- Tabs ---------- */
/* .tabs-wrap carries the scroll-edge fades below - it doesn't scroll itself,
so the fades stay pinned to the viewport edge while .tabs scrolls beneath
them. JS (initTabScrollFades in main.js) toggles has-scroll-left/right on
it based on actual scroll position, so a fade only shows on the side
there's genuinely more to see - e.g. no left fade when already at the
start. This exists mainly so mobile users notice there ARE more tabs
(Variants/Operators/Gallery/etc.) instead of assuming Overview is it. */
/* Sticky on every screen size (not just mobile): once the tab bar's natural
position scrolls above the topbar, it pins there instead of scrolling
out of view, and un-pins itself the moment the user scrolls back above
its original spot - all native `position: sticky` behaviour, no scroll
listener needed. `top: 64px` matches the topbar's rendered height
(0.85rem top/bottom padding + a 36px icon-btn/brand-mark + 1px border;
the mobile topbar works out to the same ~64px with its own smaller
padding/icon sizes, see the mobile override below) so the tabs dock
directly under it rather than overlapping. The solid `--bg-1`
background - the same colour as `body` - stops panel content from
showing through once the bar is pinned and content scrolls underneath.
That background is only painted in while the bar is actually pinned
(see .tabs-wrap.is-stuck below) - always-on opaque `--bg-1` used to sit
as a visibly flatter rectangle behind the bar's resting position too,
since both the light theme's paper-grain/vignette texture and the dark
theme's faint scope-grid are painted as fixed full-viewport layers
behind `body` (see body::before/::after up top) that a permanently
opaque bar simply blocks out - obvious as a "banner" on the light theme
in particular. Toggled via initStickyTabBackgrounds() in main.js
(IntersectionObserver, not a scroll listener) the moment the bar's top
edge reaches its sticky offset. No-JS fallback: background stays
transparent throughout, so a JS-less visitor gets the old "content
scrolls through the pinned bar" look rather than the old flat-banner
look - a fair trade given how rare that is, and consistent with how
`top: 64px` already degrades gracefully without JS below. */
/* top: --topbar-h is measured from the real header by main.js
(initTopbarHeightVar) because the header's height varies - the brand
tagline wraps to two lines on narrow phones, which made any hardcoded
offset crop the header into the tab buttons. Falls back to 64px if JS
is unavailable. */
.tabs-wrap { position: sticky; top: var(--topbar-h, 64px); z-index: 30; background: transparent; margin-top: 1.6rem; }
.tabs-wrap.is-stuck { background: var(--bg-1); }
.tabs-wrap::before, .tabs-wrap::after {
content: ""; position: absolute; top: 0; bottom: 1px; width: 32px;
pointer-events: none; z-index: 1; opacity: 0; transition: opacity 0.2s ease;
}
.tabs-wrap::before { left: 0; background: linear-gradient(to right, var(--bg-1), transparent); }
.tabs-wrap::after { right: 0; background: linear-gradient(to left, var(--bg-1), transparent); }
.tabs-wrap.has-scroll-left::before { opacity: 1; }
.tabs-wrap.has-scroll-right::after { opacity: 1; }
/* Small amber chevrons sat on top of the fades - on a dark-on-dark theme the
gradient alone barely registers, so this is the part that actually catches
the eye and reads as "there's more this way" rather than just a soft edge. */
.tabs-fade {
position: absolute; top: 0; bottom: 1px; z-index: 2; width: 22px;
display: flex; align-items: center; justify-content: center;
color: var(--amber); pointer-events: none; opacity: 0; transition: opacity 0.2s ease;
}
.tabs-fade svg { width: 15px; height: 15px; }
.tabs-fade-left { left: 0; transform: scaleX(1); }
.tabs-fade-left svg { transform: rotate(90deg); }
.tabs-fade-right { right: 0; }
.tabs-fade-right svg { transform: rotate(-90deg); }
.tabs-wrap.has-scroll-left .tabs-fade-left { opacity: 1; }
.tabs-wrap.has-scroll-right .tabs-fade-right { opacity: 1; }
.tabs { display: flex; gap: 0.4rem; border-bottom: 1px solid var(--border-0); margin-top: 0; overflow-x: auto; }
.tab-btn {
background: transparent; border: none; border-bottom: 2px solid transparent;
padding: 0.75rem 0.9rem; font-family: var(--font-mono); font-size: 0.78rem; letter-spacing: 0.06em;
text-transform: uppercase; color: var(--text-2); white-space: nowrap;
}
.tab-btn:hover { color: var(--text-0); }
.tab-btn[aria-selected="true"] { color: var(--amber); border-color: var(--amber); }
.tab-panel { display: none; padding-top: 1.8rem; }
.tab-panel.active { display: block; }
/* ---------- Detail layout ---------- */
.detail-layout { display: grid; grid-template-columns: 1.55fr 0.9fr; gap: 1.4rem; align-items: start; }
/* The left column's tab panels carry 1.8rem top padding; the sidebar
needs the same so Quick Facts lines up with the first card. */
.detail-layout > aside { padding-top: 1.8rem; }
/* Copies of the sidebar cards rendered inside the tab panels (see
tabExtras in detail.js render()). Hidden by default; swapped in for the
aside at the 1080px breakpoint below, where .detail-layout stacks
single-column and the aside would otherwise dangle off the bottom of the
page duplicating the Operators tab. */
.aside-in-tabs-cards { display: none; }
.card { background: var(--bg-2); border: 1px solid var(--border-0); border-radius: var(--radius-md); padding: 1.25rem 1.4rem; }
.card + .card { margin-top: 1.1rem; }
.card h3.card-title { font-family: var(--font-mono); font-size: 0.78rem; letter-spacing: 0.1em; text-transform: uppercase; color: var(--text-1); margin-bottom: 1rem; }
.card p { color: var(--text-1); line-height: 1.65; }
.card p + p { margin-top: 0.8rem; }
.read-more-link { color: var(--amber); font-family: var(--font-mono); font-size: 0.78rem; margin-top: 0.9rem; display: inline-block; }
.spec-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1.1rem 1rem; margin-top: 0.6rem; }
.spec-item .spec-label { font-family: var(--font-mono); font-size: 0.66rem; letter-spacing: 0.07em; text-transform: uppercase; color: var(--amber); display:flex; align-items:center; gap:0.4rem;}
/* Back to the mono spec font used everywhere else on this quick-glance row
(not the sans-serif used for the Full Specifications tab's longer, more
sentence-like values) - just dropped the bold weight. Still clamped to 2
lines so the row stays scannable and roughly the same height from one
aircraft to the next; the untruncated text is a hover (title attr) or a
click (the "See SPECIFICATIONS" hint above the grid) away. */
.spec-item .spec-value {
font-family: var(--font-mono); font-size: 1.05rem; font-weight: 400; color: var(--text-0); margin-top: 0.3rem;
display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow: hidden;
}
.spec-more-hint { font-size: 0.78rem; color: var(--text-3); margin-top: 1.1rem; }
.spec-more-hint a { color: var(--text-3); font-family: var(--font-mono); text-transform: uppercase; letter-spacing: 0.05em; font-weight: 700; }
.spec-more-hint a:hover { text-decoration: underline; color: var(--text-1); }
/* Shared "what this tab is/how to read it" caption, sits directly under a
card-title before the tab's real content (Timeline's scale explainer,
References'/Further Reading's numbering note). Previously each of these
repeated the same inline style="font-size:0.85rem;color:var(--text-2);
margin-bottom:1rem" - consolidated into one class so the three stay in
sync if this styling ever changes. */
/* ".card p" (class+element) would otherwise outrank a bare ".tab-intro"
class for the colour, so this is written as ".card p.tab-intro" to
actually win - the same requirement the old inline styles satisfied
automatically by being inline. */
.card p.tab-intro { font-size: 0.85rem; color: var(--text-2); margin-bottom: 1rem; }
/* Variant card - the header row (code + one-line desc) is unchanged from
the original compact layout; "detail" paragraphs and "sources" links
(see variantCard() in detail.js) are optional additions that only
appear once an aircraft's JSON has been researched to that depth, so
older entries with just a one-liner still look identical to before. */
.variant-card { padding: 0.6rem 0; border-bottom: 1px solid var(--border-0); }
.variant-card:last-child { border-bottom: none; }
.variant-card .variant-row { padding: 0; border-bottom: none; }
.variant-row { display: flex; justify-content: space-between; gap: 1rem; padding: 0.6rem 0; border-bottom: 1px solid var(--border-0); }
.variant-row:last-child { border-bottom: none; }
.variant-row .v-code { font-family: var(--font-sans); font-weight: 600; color: var(--radar); min-width: 90px; }
.variant-row .v-desc { color: var(--text-1); font-size: 0.85rem; flex: 1; }
.variant-detail { margin-top: 0.6rem; padding-left: calc(90px + 1rem); }
.variant-detail p { font-size: 0.85rem; color: var(--text-1); line-height: 1.6; }
.variant-detail p + p { margin-top: 0.6rem; }
.variant-card > .i-sources { padding-left: calc(90px + 1rem); }
@media (max-width: 640px) {
.variant-row { flex-direction: column; gap: 0.2rem; }
.variant-row .v-code { min-width: 0; }
.variant-detail, .variant-card > .i-sources { padding-left: 0; margin-top: 0.5rem; }
}
/* Variants table - the only variants design - fixes the card
layout's misalignment: .v-code above is only min-width, so a longer
variant code pushes .v-desc to a different starting x-position on
every row. table-layout: fixed with an explicit width on the code
column guarantees every description lines up regardless of code
length. Same visual language as .spec-table (mono/amber header caps,
hover wash, bottom-rule rows) so it reads as the same design system,
not a one-off. A variant's optional detail/sources render as a
full-width row directly under its header row (see variantTableRows()
in detail.js) rather than a third column, since prose doesn't suit a
fixed-width cell. */
.variant-table { width: 100%; border-collapse: collapse; table-layout: fixed; }
/* Fixed code column. table-layout:fixed makes the browser honour this width
instead of sizing the column to its longest cell, which is the whole point:
without it one long variant code ("Spirit modernisation (2000s-2020s)")
stretches the column and every description on the page shifts right with
it. 30% leaves the description the room it needs while staying wide enough
for a long code to wrap to two lines rather than shredding. */
.variant-table col.variant-col-code { width: 30%; }
.variant-table th, .variant-table td { padding: 0.8rem 0.9rem; text-align: left; vertical-align: top; }
/* No white-space:nowrap here. It was harmless while the table was
table-layout:auto (the column simply grew to fit the longest code), but
with the fixed 30% column a long code like "Spirit modernisation
(2000s-2020s)" had nowhere to go and ran straight over the description.
Wrapping keeps every code inside its own column. */
.variant-table td.v-code { font-family: var(--font-sans); font-weight: 600; font-size: 0.9rem; color: var(--radar); overflow-wrap: break-word; word-wrap: break-word; hyphens: auto; }
.variant-table td.v-desc { font-family: var(--font-sans); font-size: 0.85rem; color: var(--text-1); line-height: 1.6; overflow-wrap: anywhere; word-wrap: break-word; }
.variant-table tbody tr.vt-row { border-bottom: 1px solid var(--border-0); transition: background-color 0.12s ease; }
.variant-table tbody tr.vt-row:hover { background: var(--bg-3); }
.variant-table tr.variant-detail-row td { padding-top: 0; border-bottom: 1px solid var(--border-0); }
.variant-table tbody tr:last-child { border-bottom: none; }
.variant-table .variant-detail { margin: 0; }
.variant-table .variant-detail p { font-size: 0.85rem; color: var(--text-1); line-height: 1.6; }
.variant-table .variant-detail p + p { margin-top: 0.6rem; }
.variant-table .i-sources { margin-top: 0.4rem; }
.kv-list { display: flex; flex-direction: column; gap: 0.65rem; }
.kv-row { display: flex; justify-content: space-between; font-size: 0.85rem; gap: 1rem; }
.kv-row .k { color: var(--text-3); }
/* Sans-serif (matches the description/history/service prose) rather than the
monospace used for short glanceable labels elsewhere on the page - the
Full Specifications tab, Sources list and "At a Glance" sidebar can carry
full-sentence values (crew, capacity, engines...) that get hard to read
in mono at length, especially on mobile. */
/* min-width:0 + overflow-wrap:anywhere: source URLs are single unbroken
tokens (long PDF filenames etc.) that flex refuses to shrink, so without
these one long link stretches the whole page wider than a phone viewport
- the "Sources tab breaks the layout on mobile" bug. */
.kv-row .k { min-width: 0; }
.kv-row .v { color: var(--text-0); text-align: right; font-family: var(--font-sans); min-width: 0; overflow-wrap: anywhere; }
/* Full Specifications tab v4 - colour-coded table, US units only. Replaces
v2's icon-tile grid (which spread related figures across separate boxes
and switched fonts inconsistently) and v3's US/Metric/Both toggle (one
system is simpler, so the metric figure is now stripped at render time
via usOnly() in detail.js rather than hidden with CSS/JS). Every row
lives in one table - mono/amber labels, bold sans values, always, no
exceptions - and colour-codes groups with a left rail so
Performance/Airframe/Power/Program still read as distinct sections.
Piloted on the F-117 Nighthawk; every aircraft shares the same specs
shape so this applies database-wide with no JSON changes. */
/* ============================================================
CANONICAL DESIGN - Full Specifications tab (v6, dated 2026-07-27).
This is the current, user-approved standard for every aircraft's
Specifications tab - iconed colour-coded category banners (fixed
35.2px/2.2rem tall, vertically centred, identical across all four
categories), roomier label/value type, and row hover feedback. It was
built and refined over several rounds directly against the C-130
Hercules entry and is meant to apply site-wide with no per-aircraft
JSON changes.
If you are looking at an OLDER version of this block (no
.spec-cat-inner span, category rows using display:flex directly on
the
, or a plain text-only category header with no icon) - that
is a regression, most likely from an out-of-date cached copy of this
file overwriting the current one. Restore this version rather than
treating the older one as a new starting point.
Nothing under data/aircraft/*.json (including anything written via
the planesdb-aircraft-entry skill) should ever need to touch this
file or src/templates/detail.js - if a change here seems necessary
to add an aircraft, that's a sign something's being done in the
wrong file.
============================================================ */
.spec-table-card { padding: 1.25rem 1.4rem 0.7rem; }
/* Optional variant note banner - sits between the "Full Specifications"
title and the table itself (see specNoteBanner() in detail.js), driven
by the optional plane.specifications.specificationsNote string. v2 (toned down
from the first pass, which used a bold amber left-accent + tinted
background and read as an alert box competing with the table for
attention). Modelled after GitHub/Docusaurus-style "note" admonitions
but deliberately muted well below their default contrast: a thin
neutral border (not a colour-coded one), a small dim icon, and text a
shade quieter than the surrounding card copy - closer to the site's
existing .spec-more-hint caption treatment than a warning callout.
Renders nothing at all when specificationsNote is unset or empty, so existing entries
are unaffected. */
.spec-note {
display: flex; align-items: flex-start; gap: 0.5rem;
background: var(--bg-1);
border: 1px solid var(--border-0);
border-radius: var(--radius-sm);
padding: 0.55rem 0.8rem;
margin-bottom: 1.1rem;
}
.spec-note-icon { flex-shrink: 0; width: 14px; height: 14px; margin-top: 0.15rem; color: var(--text-3); }
.spec-note-icon svg { display: block; width: 100%; height: 100%; }
.spec-note-text { font-family: var(--font-sans); font-size: 0.82rem; line-height: 1.5; color: var(--text-2); }
.spec-note-text strong {
font-family: inherit; font-weight: inherit; font-size: inherit;
color: inherit;
margin-right: 0.15rem;
}
.spec-table { width: 100%; border-collapse: collapse; }
.spec-table th, .spec-table td { padding: 0.8rem 0.9rem; text-align: left; vertical-align: top; }
/* One font per column, always - the labels are always mono/caps/amber
(matches every other label on the page: .spec-item .spec-label,
.kv-row .k), the values are always sans and always bold, whether the
value is a short number or a full sentence like Combat Losses. No
switching fonts or weights depending on content length.
v5 bumped both columns up a notch (label 0.72->0.76rem, value
0.85->0.94rem, value line-height 1.55->1.6) and gave values a touch
more letter-spacing room - on the v4 pass the value column read small
and cramped next to the roomier type used everywhere else on the
detail page (e.g. .qf-text, .incident-item p at 0.84-0.88rem). */
.spec-table th {
font-family: var(--font-mono); font-weight: 500; font-size: 0.76rem; letter-spacing: 0.05em; text-transform: uppercase;
color: var(--amber); white-space: nowrap; width: 1%;
}
.spec-table th svg { width: 15px; height: 15px; margin-right: 0.45rem; vertical-align: -3px; flex-shrink: 0; }
.spec-table td { font-family: var(--font-sans); font-weight: 600; font-size: 0.94rem; color: var(--text-0); line-height: 1.6; letter-spacing: 0.005em; }
.spec-table tbody tr.spec-row { border-bottom: 1px solid var(--border-0); border-left: 4px solid transparent; transition: background-color 0.12s ease; }
.spec-table tbody tr.spec-row:last-child { border-bottom: none; }
/* Hover feedback on data rows - a static table otherwise gives no signal
that a row is being scanned; a faint highlight (matches the wash used
on .op-row a:hover elsewhere on the site) helps the eye track across a
wide value cell without needing to re-find the row. */
.spec-table tbody tr.spec-row:hover { background: var(--bg-3); }
/* Category header rows, v5 - previously a single line of small coloured
caps text that read as barely more than a divider; on the "make
categories more obvious" request these are now a full-width tinted
banner (soft colour wash + an icon + a solid underline in the same
category colour) so Performance/Airframe/Power/Program register
as distinct sections on a quick scan, not just on close reading. */
.spec-cat-row td {
/* Fixed height + vertical-align:middle (both table-cell-native, no flex
needed on the
itself) - every category row gets the SAME
overall box, regardless of label length or row position.
Deliberately NOT display:flex here (that was the v5 bug fixed
earlier) - setting display:flex on a
strips its table-cell box
type, so the browser stops honouring its colspan="2" and the
anonymous cell it falls back to shrink-wraps to content width
instead of spanning the row. Kept as a plain table-cell; the
icon+label centring inside it is handled by .spec-cat-inner below,
not by anything on the td. */
height: 2.2rem; box-sizing: border-box; padding: 0 0.9rem;
vertical-align: middle; line-height: 1;
border-bottom: 2px solid transparent;
}
/* Icon + label live in their own inline-flex span rather than making the
td a flex container (see above) - this also sidesteps a baseline quirk
where an icon sitting as a bare inline-block next to a text node (the
original v5/v6 approach, aligned with a hand-tuned vertical-align:-3px)
quietly inflates the line box taller than the text's own line-height,
which was why shrinking `height` alone didn't actually shrink the row.
Flexbox centres both against this span's own box instead, so the row's
rendered height now matches `height` above exactly. */
.spec-cat-row td, .spec-cat-inner { font-family: var(--font-mono); font-size: 0.8rem; font-weight: 700; letter-spacing: 0.09em; text-transform: uppercase; }
.spec-cat-inner { display: inline-flex; align-items: center; height: 100%; }
.spec-cat-icon { display: inline-flex; flex-shrink: 0; margin-right: 0.55rem; }
.spec-cat-icon svg { width: 15px; height: 15px; display: block; }
.spec-cat-row.spec-cat-performance td { color: var(--radar); background: linear-gradient(90deg, rgba(77,255,176,0.12), transparent 75%); border-bottom-color: rgba(77,255,176,0.4); }
.spec-row.spec-cat-performance { border-left-color: var(--radar-dim); }
.spec-cat-row.spec-cat-airframe td { color: var(--cyan); background: linear-gradient(90deg, rgba(79,215,255,0.12), transparent 75%); border-bottom-color: rgba(79,215,255,0.4); }
.spec-row.spec-cat-airframe { border-left-color: var(--cyan); }
.spec-cat-row.spec-cat-power td { color: var(--orange); background: linear-gradient(90deg, rgba(255,138,77,0.12), transparent 75%); border-bottom-color: rgba(255,138,77,0.4); }
.spec-row.spec-cat-power { border-left-color: var(--orange); }
.spec-cat-row.spec-cat-program td { color: var(--violet); background: linear-gradient(90deg, rgba(180,92,255,0.12), transparent 75%); border-bottom-color: rgba(180,92,255,0.4); }
.spec-row.spec-cat-program { border-left-color: var(--violet); }
/* Data rows carry the same spec-cat-* class as their section's header row
(set directly in specRow(), not inferred via sibling selectors) so the
left-rail colour is explicit and correct regardless of row order. The
".spec-cat-row.spec-cat-* td { color }" rules above are scoped to the
header row specifically (needs BOTH classes) so a data row's own
label/value colours (amber label, text-0 value, set on th/td above)
are untouched - only its left rail picks up the category colour. */
/* Base .op-icon size/shape - the single source of truth for operator badge
sizing everywhere on the site (an aircraft's own Operators tab via
.operator-row below, plus the /operators/ index and detail pages via
.op-row - see src/templates/operators-index.js and operator-detail.js).
Used to only be defined scoped under ".operator-row .op-icon", which
meant badges rendered anywhere else (the /operators/ index rows) picked
up no sizing at all - unscoped here so one 30x30 badge size applies
consistently no matter which page it's on. */
.op-icon { width: 30px; height: 30px; border-radius: var(--radius-sm); background: var(--bg-3); border: 1px solid var(--border-1); display:flex; align-items:center; justify-content:center; color: var(--radar); flex-shrink:0; }
.operator-row { display: flex; align-items: flex-start; gap: 0.7rem; padding: 0.7rem 0; border-bottom: 1px solid var(--border-0); }
.operator-row:last-child { border-bottom: none; }
.operator-row .op-name { font-weight: 600; font-size: 0.9rem; }
.operator-row .op-meta { font-size: 0.72rem; color: var(--text-3); text-transform: uppercase; letter-spacing: 0.04em; font-family: var(--font-mono); }
/* /operators/ index rows (.op-row, used by operators-index.js) - name and
aircraft-type count stacked on two lines rather than crammed onto one,
which is what was previously crushing the count down to an unreadable
sliver next to a long operator name in a narrow grid column. */
.op-row a { display: flex; align-items: center; gap: 0.6rem; padding: 0.4rem 0.5rem; border-radius: var(--radius-sm); text-decoration: none; min-width: 0; }
.op-row a:hover { background: var(--bg-3); }
.op-row-text { display: flex; flex-direction: column; gap: 0.15rem; min-width: 0; }
.op-row-text b { font-size: 0.85rem; color: var(--text-0); font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.op-row-text .az-sub { white-space: nowrap; }
/* Retired/historical section heading modifier (operator-detail.js) -
every .section-title already renders its own green dot via the
::before rule above; this just recolours THAT SAME dot to red for a
retired-fleet heading rather than adding a second dot alongside it. */
.section-title-red::before { background: var(--red); box-shadow: 0 0 8px rgba(255,92,92,0.55); }
/* "Official website" link on an operator's page (operator-detail.js) - a
bare inline ui.link SVG has no size of its own outside of a scoping
rule like this, so without it the icon renders at its full intrinsic
size (see .incident-item .i-sources svg above for the established
11px-icon convention this mirrors). */
.op-website-link { font-size: 0.85rem; color: var(--text-2); margin-top: 0.6rem; }
.op-website-link svg { width: 13px; height: 13px; vertical-align: -2px; opacity: 0.8; }
.op-website-link a { color: var(--radar); text-decoration: none; }
.op-website-link a:hover { text-decoration: underline; }
/* Operator flag badge - used when no licensed logo file is supplied for the
operator (replaced an initials monogram, see opBadge() in detail.js).
The flag SVGs are 3:2 in a 30x30 square badge, so they are set to the box
width and centred, leaving an even 5px band above and below rather than
being stretched or cropped. overflow:hidden + the inner radius keep the
corners inside the badge's own border. */
.op-flag { overflow: hidden; padding: 3px; }
.op-flag svg {
width: 100%; height: auto; display: block; border-radius: 1px;
box-shadow: 0 0 0 1px var(--border-0);
}
.op-logo { overflow: hidden; background: #fff; }
.op-logo img { width: 100%; height: 100%; object-fit: contain; padding: 2px; }
/* ~30% bigger badge (30px -> 39px), used only next to the H1 on an
operator's own /operators// page (operator-detail.js) - everywhere
else (an aircraft's Operators tab, the /operators/ index rows) stays the
standard 30px .op-icon size. */
.op-icon-lg { width: 39px; height: 39px; }
/* "Show N more" expandable for long operator lists (native ) */
.op-more > summary {
list-style: none; cursor: pointer;
font-family: var(--font-mono); font-size: 0.74rem; letter-spacing: 0.06em;
text-transform: uppercase; color: var(--amber);
padding: 0.65rem 0 0.2rem; display: flex; align-items: center; gap: 0.4rem;
}
.op-more > summary::-webkit-details-marker { display: none; }
.op-more > summary svg { width: 14px; height: 14px; transition: transform .15s ease; }
.op-more[open] > summary svg { transform: rotate(180deg); }
.op-more > summary:hover { color: #ffcb63; }
.fr24-box { background: linear-gradient(160deg, rgba(79,215,255,0.08), transparent); border: 1px solid var(--border-1); }
.fr24-box .fr24-code { display:inline-block; font-family: var(--font-mono); background: var(--bg-3); border:1px solid var(--border-1); color: var(--cyan); padding: 0.25rem 0.55rem; border-radius: var(--radius-sm); font-weight:700; margin: 0.2rem 0.35rem 0.2rem 0; }
/* Untrackable variant (see fr24Box() in detail.js) - same shell, muted
cyan wash traded for a neutral one so the box doesn't visually promise
a tracking hint it can't actually deliver. */
.fr24-box-untrackable { background: linear-gradient(160deg, rgba(127,143,138,0.08), transparent); }
/* The box's two branches (trackable / untrackable) both step through the
same "primary line, then two progressively-muted notes" hierarchy -
previously each repeated its own inline font-size/color instead of
sharing these two classes. */
.fr24-box p { font-size: 0.85rem; }
.fr24-box .fr24-note { color: var(--text-2); font-size: 0.78rem; margin-top: 0.6rem; }
.fr24-box .fr24-subnote { color: var(--text-3); font-size: 0.74rem; margin-top: 0.5rem; }
.incident-item { padding: 0.85rem 0; border-bottom: 1px solid var(--border-0); }
.incident-item:last-child { border-bottom: none; }
.incident-item .i-date { font-family: var(--font-mono); font-size: 0.72rem; color: var(--text-3); letter-spacing: 0.04em; }
.incident-item h4 { margin-top: 0.3rem; font-size: 0.9rem; font-weight: 600; }
.incident-item p { margin-top: 0.35rem; font-size: 0.84rem; }
/* News tab category colour-coding (see newsCategoryMeta() in detail.js).
Reuses the exact same shape+colour language as the Timeline tab
(.timeline-incident is red, .timeline-development is green, etc.) so a
reader who's already learned "red triangle = incident" from one tab gets
it for free on the other. A left accent bar on each story - not just the
badge text colour - means the category reads even in a quick vertical
scan, not just when your eye lands on the small icon. */
.news-item { border-left: 3px solid var(--border-1); padding-left: 0.7rem; margin-left: -0.7rem; }
/* Empty News tab - an entry with no story published about it yet. Set as a
plain read rather than a warning/notice box: nothing is wrong, there is
just no news, and a coloured callout would imply the entry is incomplete. */
.news-empty { font-size: 0.88rem; color: var(--text-2); max-width: 60ch; margin: 0.2rem 0 0; }
.news-cat-badge { display: inline-flex; align-items: center; gap: 0.3rem; }
.news-cat-badge svg { width: 12px; height: 12px; flex-shrink: 0; }
.news-cat-incident { border-left-color: var(--red); }
.news-cat-incident .news-cat-badge, .news-cat-incident .featured { color: var(--red); }
.news-cat-operations { border-left-color: var(--amber); }
.news-cat-operations .news-cat-badge, .news-cat-operations .featured { color: var(--amber); }
.news-cat-upgrade { border-left-color: var(--radar); }
.news-cat-upgrade .news-cat-badge, .news-cat-upgrade .featured { color: var(--radar); }
.news-cat-milestone { border-left-color: var(--violet); }
.news-cat-milestone .news-cat-badge, .news-cat-milestone .featured { color: var(--violet); }
.news-cat-policy { border-left-color: var(--text-2); }
.news-cat-policy .news-cat-badge, .news-cat-policy .featured { color: var(--text-2); }
.news-cat-analysis { border-left-color: var(--cyan); }
.news-cat-analysis .news-cat-badge, .news-cat-analysis .featured { color: var(--cyan); }
.news-cat-general { border-left-color: var(--border-1); }
.news-cat-general .news-cat-badge, .news-cat-general .featured { color: var(--text-3); }
/* ---------- Quick Facts (trivia card, Overview tab) ---------- */
/* No coloured left rule: .qf-card is a plain .card like every other box on a
database entry. It carried a 2px --radar border-left until September 2026,
which made it the only card on the page with one. */
.qf-list { list-style: none; margin: 0; padding: 0; }
.qf-item {
display: flex; gap: 0.85rem; align-items: baseline;
padding: 0.7rem 0; border-bottom: 1px dashed var(--border-0);
}
.qf-item:last-child { border-bottom: none; }
.qf-index {
flex: 0 0 auto; font-family: var(--font-mono); font-size: 0.68rem;
color: var(--amber); letter-spacing: 0.08em;
border: 1px solid var(--border-0); border-radius: 4px;
padding: 0.15rem 0.4rem; background: var(--bg-3);
}
.qf-text { font-size: 0.88rem; color: var(--text-1); }
/* Homepage Quick Facts panel variant - plain panel (no coloured side rule)
with a small amber plane-icon bullet instead of the detail page's
"FACT-01" mono index chip, which read as too busy at this compact size.
Overrides .qf-item's align-items:baseline with flex-start - baseline
alignment worked fine for the old inline SVG glyph, but the PNG bullet
(yellow-arrow-icon.png) has no text baseline of its own to align with,
so the flex box fell back to its bottom edge and left the icon sitting
noticeably higher than the first line of text. flex-start + a
hand-tuned margin-top on .qf-plane-icon (checked against a row of
margin-top test values 0-6px) centres it against the text instead. */
.qf-item-home { gap: 0.7rem; align-items: flex-start; }
.qf-plane-icon { flex: 0 0 auto; color: var(--amber); margin-top: 3px; }
.qf-plane-icon svg { width: 16px; height: 16px; }
/* Facts of the Day bullet is a small PNG (yellow-arrow-icon.png), not an
inline SVG like the rest of the site's iconography - display:block
drops the inline-image's default baseline gap under the icon. */
.qf-plane-icon img { width: 16px; height: 16px; display: block; }
/* Loading placeholder shown in the homepage Facts of the Day panel until
src/assets/js/fotd.js swaps in today's real picks - reuses the same
generic .shimmer animation as the Aircraft of the Week skeleton. */
.fotd-skel-line { display: inline-block; width: 70%; height: 0.85rem; border-radius: 999px; }
/* ---------- Upcoming Airshows panel (homepage) ---------- */
.airshow-list { list-style: none; margin: 0.4rem 0 0; padding: 0; }
.airshow-list li {
display: flex; gap: 0.7rem; align-items: flex-start;
padding: 0.6rem 0; border-bottom: 1px dashed var(--border-0);
}
.airshow-list li:last-child { border-bottom: none; }
.airshow-list .flag-icon { flex: 0 0 auto; margin-top: 0.15rem; }
.airshow-body { display: flex; flex-direction: column; gap: 0.12rem; min-width: 0; }
.airshow-name { font-size: 0.86rem; font-weight: 600; color: var(--text-0); text-decoration: none; }
.airshow-name:hover { color: var(--radar); text-decoration: underline; }
.airshow-meta { font-size: 0.68rem; color: var(--amber); letter-spacing: 0.03em; }
.airshow-desc { font-size: 0.76rem; color: var(--text-2); }
/* News tab headline links */
.news-item h4 a { color: var(--text-0); text-decoration: none; }
.news-item h4 a:hover { color: var(--radar); text-decoration: underline; }
.news-item h4 a svg { width: 11px; height: 11px; vertical-align: -1px; opacity: 0.6; }
/* Quick Facts sits in the narrow sidebar - tighten it slightly */
aside .qf-item { gap: 0.6rem; padding: 0.55rem 0; }
aside .qf-text { font-size: 0.8rem; }
/* Per-incident source links (deep-dive entries + the Timeline tab, which
reuses this same "i-sources" markup for its own per-milestone sources). */
.incident-item .i-sources, .timeline-item .i-sources, .variant-card .i-sources, .variant-table .i-sources,
.inc-entry .i-sources, .inc-card .i-sources { margin-top: 0.4rem; font-size: 0.72rem; color: var(--text-3); }
.incident-item .i-sources svg, .timeline-item .i-sources svg, .variant-card .i-sources svg, .variant-table .i-sources svg,
.inc-entry .i-sources svg, .inc-card .i-sources svg { width: 11px; height: 11px; vertical-align: -1px; opacity: 0.7; }
.incident-item .i-sources a, .timeline-item .i-sources a, .variant-card .i-sources a, .variant-table .i-sources a,
.inc-entry .i-sources a, .inc-card .i-sources a { color: var(--radar); text-decoration: none; }
.incident-item .i-sources a:hover, .timeline-item .i-sources a:hover, .variant-card .i-sources a:hover, .variant-table .i-sources a:hover,
.inc-entry .i-sources a:hover, .inc-card .i-sources a:hover { text-decoration: underline; }
/* ---------- Timeline tab (graphical milestone view, experimental) ----------
Two parts: a horizontal colour-coded "scale" giving an at-a-glance read of
how events cluster over the aircraft's life, then the same milestones as
a detailed vertical timeline underneath. Each category gets its own icon
AND colour (development=wrench/radar-green, first-flight=arrow/cyan,
combat=target/amber, incident=warning triangle/red, retirement=flag/grey,
milestone=star/violet) - shared across the scale, legend and vertical
markers, so a shape means the same thing everywhere, not just a colour.
The icons stand on their own (no circular badge behind them) - a plain
badge ring made the icon itself smaller and harder to read at a glance,
so the coloured glyph IS the marker here. */
.timeline-legend { display: flex; flex-wrap: wrap; gap: 0.6rem 1.2rem; margin: 0.9rem 0 1.6rem; }
.timeline-legend-item { display: inline-flex; align-items: center; gap: 0.4rem; font-size: 0.72rem; color: var(--text-2); font-family: var(--font-mono); text-transform: uppercase; letter-spacing: 0.04em; }
.timeline-legend-dot { display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
.timeline-legend-dot svg { width: 16px; height: 16px; }
.timeline-scale { position: relative; height: 62px; margin: 0 0.5rem; }
.timeline-scale-track { position: absolute; left: 0; right: 0; top: 28px; height: 2px; background: var(--border-1); }
/* Now a real