/* ============================================================================ fly.css — FlyTime signature layer (AAA spec, per-site set piece) Loads AFTER data.css. Namespaced .ft-* so it cannot collide with the shared component layer, which another session owns. Voice: MID-CENTURY FLIGHT ATLAS. Thin plate rules, survey marks, gazetteer small caps, city names set in the serif the way a plate caption sets them. Nothing is skeuomorphic and nothing pretends to be a map. ========================================================================== */ /* --------------------------------------------------- 0. ACCENT REPAIR (local) data.css declares --accent: var(--site-accent, #3C4A55) on :root, but shell() writes --site-accent on . A custom property is substituted where it is DECLARED, so --accent resolves to the neutral fallback on every page of every ring site and the per-site hue never reaches the CSS. Repaired here rather than in the master because _shared is owned by another session mid-rollout — flag raised; the master fix is one line. fly light #1F5E7A = 6.79:1 on paper · dark #63B4D6 = 7.94:1 on dark paper (both values are the ring's own, from _shared/contrast-check.mjs). */ :root { --accent: #1F5E7A; --accent-2: #1F5E7A; --accent-3: #1F5E7A; --accent-soft: color-mix(in srgb, #1F5E7A 9%, var(--paper)); } :root[data-theme="dark"] { --accent: #63B4D6; --accent-2: #63B4D6; --accent-3: #63B4D6; --accent-soft: color-mix(in srgb, #63B4D6 13%, var(--paper)); } :root[data-theme="dark"] .az a:hover, :root[data-theme="dark"] .pager .on, :root[data-theme="dark"] .btn-primary { color: #0A1418; } /* ------------------------------------------------------ 1. micro-iconography fly's hand: 1px plate rules with SOLID survey marks — the drawing language of a printed atlas, where thin lines carry the information and filled dots carry the position. (fuel engraves at 1.4px hairline; burn presses a 2.2px nib; cook cuts solid silhouettes.) */ .ft-i { width: 1em; height: 1em; flex: none; vertical-align: -.13em; fill: none; stroke: currentColor; stroke-width: 1; stroke-linecap: butt; stroke-linejoin: miter; } .ft-i .sol { fill: currentColor; stroke: none; } /* ------------------------------------------------------------ 2. THE SET PIECE The great-circle strip: origin and destination as survey marks, the arc between them, the duration set at the apex. Distances are real; the strip is deliberately NOT a map — it is a plate showing one route's shape and length. Pure template SVG, no per-page hand work, ~1.2 KB rendered. */ .ft-strip { margin: var(--s4) 0 0; max-width: 860px; border-top: 1px solid var(--ink-2); border-bottom: 1px solid var(--line-2); padding: 4px 0 0; } .ft-plate { display: flex; align-items: baseline; justify-content: space-between; gap: var(--s3); padding: 8px 0 2px; font-family: var(--sans); font-size: .66rem; font-weight: 650; letter-spacing: .19em; text-transform: uppercase; color: var(--muted); } .ft-plate span:first-child { display: inline-flex; align-items: center; gap: 8px; } .ft-plate .ft-no { color: var(--faint); letter-spacing: .12em; font-variant-numeric: tabular-nums; } .ft-svg { display: block; width: 100%; height: auto; } .ft-svg .base { stroke: var(--line-2); stroke-width: 1; } .ft-svg .arc { fill: none; stroke: var(--accent); stroke-width: 1.8; } .ft-svg .arcghost { fill: none; stroke: var(--line-2); stroke-width: 1; stroke-dasharray: 2 3; } .ft-svg .drop { stroke: var(--line-2); stroke-width: 1; } .ft-svg .mark { fill: none; stroke: var(--ink); stroke-width: 1; } .ft-svg .marksol { fill: var(--ink); } .ft-svg .wpt { fill: var(--muted); } .ft-svg .code { fill: var(--ink); font-family: var(--sans); font-size: 15px; font-weight: 680; letter-spacing: .06em; } .ft-svg .city { fill: var(--ink-2); font-family: var(--serif); font-size: 13px; font-style: italic; font-weight: 400; letter-spacing: -.01em; } .ft-svg .meta { fill: var(--faint); font-family: var(--sans); font-size: 9.5px; font-weight: 600; letter-spacing: .12em; font-variant-numeric: tabular-nums; } .ft-svg .dur { fill: var(--accent); font-family: var(--sans); font-size: 34px; font-weight: 660; letter-spacing: -.04em; font-variant-numeric: proportional-nums; } .ft-svg .durlab { fill: var(--muted); font-family: var(--sans); font-size: 9px; font-weight: 650; letter-spacing: .2em; } .ft-svg .elap { fill: var(--faint); font-family: var(--sans); font-size: 9px; font-weight: 600; letter-spacing: .06em; font-variant-numeric: tabular-nums; } .ft-svg .rtick { stroke: var(--line-2); stroke-width: 1; } .ft-svg .rlab { fill: var(--faint); font-family: var(--sans); font-size: 9.5px; font-weight: 500; letter-spacing: .05em; font-variant-numeric: tabular-nums; } @media (max-width: 640px) { .ft-svg .city { font-size: 15px; } .ft-svg .meta, .ft-svg .elap, .ft-svg .rlab { font-size: 11px; } .ft-svg .durlab { font-size: 10px; } } /* ------------------------------------------- 2b. AAA+++ TOP-UP (2026-07-30) Spec: _plans/AAA-PLUS-STUDIO-PREMIUM.md §3, §5 ("do NOT re-spec the delivered set pieces — retint them so they survive warm-basalt dark"). Nothing below moves a single coordinate: the strip's geometry, its survey marks, its waypoints and its kilometre ruler are exactly as delivered. BUDGET NOTE. The strip is inlined on 8,812 route pages, so the markup is held to ~2.7 KB. Eight `text-anchor="middle"` attributes per page is 176 bytes of pure repetition that ONE rule states once — the strip's default anchor now lives here and only the exceptions (start / end) are emitted. */ .ft-svg text { text-anchor: middle; } /* The plate caption and the gazetteer row are SPECIFICATION, not prose (§3.4): codes, bearings, coordinates and a dataset vintage belong in the mono voice. A system-stack mono also paints on first frame, so unlike the async Inter it cannot swap width under the figure — the strip is a CLS-0 surface. */ .ft-plate { font-family: var(--mono); font-size: .68rem; font-weight: 500; letter-spacing: .16em; } .ft-plate .ft-no { letter-spacing: .1em; } .ft-gaz { font-family: var(--mono); font-size: .72rem; letter-spacing: .07em; } .ft-gaz b { font-weight: 500; letter-spacing: .1em; } /* The figure's own dated source line (§6.4) sits INSIDE the plate rules, so the figure closes with its provenance rather than under a second hairline. */ .ft-strip > .srcline { border-top: 0; margin-top: 0; padding: 0 0 12px; } /* Comparable figures are tabular. The hero stat row and the coordinate table are pinned markup (verify.mjs re-derives them from the printed values and matches on the exact attribute), so the numerals are set here rather than by hanging a .num class on them. Same rendered result, verifier untouched. */ .stats .stat .v, .stats .stat .s, .ft-gaz i { font-variant-numeric: tabular-nums lining-nums; } /* The AIO-proof moment (§3.1): block time as display typography, its unit in the mono voice, so an AI-search snippet lifts a DESIGNED number. .big keeps the shared .answer.aaa treatment; only the unit is site-local. */ .answer.aaa .stat-display { margin: 0 0 6px; } .answer.aaa .stat-display .u { text-transform: uppercase; } .answer.aaa p + p { margin-top: .7em; } /* --------------------------------------------------- 2c. WARM-BASALT SURVIVAL §5: "retint strokes to --ink-2, never pure white." The survey marks and the IATA codes were drawn in --ink, which is #EDE9DF at night — near-white, and at 1px it glares against basalt instead of reading as printed plate. The drawing HAND is unchanged: same 1px rule, same solid centre dot. */ :root[data-theme="dark"] .ft-svg .mark { stroke: var(--ink-2); } :root[data-theme="dark"] .ft-svg .marksol { fill: var(--ink-2); } :root[data-theme="dark"] .ft-svg .code { fill: var(--ink-2); } :root[data-theme="dark"] .ft-svg .wpt { fill: var(--ink-2); } :root[data-theme="dark"] .ft-strip { border-top-color: var(--line-2); } /* the gazetteer strip beneath the plate — bearing, midpoint, provenance */ .ft-gaz { display: flex; flex-wrap: wrap; gap: 2px 22px; align-items: baseline; padding: 10px 0 12px; border-top: 1px solid var(--line); font-family: var(--sans); font-size: .71rem; letter-spacing: .09em; text-transform: uppercase; color: var(--faint); } .ft-gaz b { color: var(--muted); font-weight: 650; letter-spacing: .13em; } .ft-gaz i { font-style: normal; color: var(--ink-2); font-weight: 600; font-variant-numeric: tabular-nums; letter-spacing: .06em; } .ft-gaz .ft-sep { color: var(--line-2); } /* --------------------------------------------------- 3. confident emptiness */ .ft-quiet { border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); } .ft-quiet .wrap { padding-top: var(--s8); padding-bottom: var(--s8); } .ft-quiet p { font-family: var(--serif); font-size: clamp(1.25rem, 2.6vw, 1.75rem); font-weight: 400; line-height: 1.45; letter-spacing: -.02em; color: var(--ink-2); max-width: 30ch; margin: 0; } .ft-quiet p em { color: var(--ink); font-style: italic; } @media (max-width: 640px) { .ft-quiet .wrap { padding-top: var(--s6); padding-bottom: var(--s6); } } @media (prefers-reduced-motion: reduce) { .ft-svg * { transition: none !important; animation: none !important; } }