/* ============================================ CrosswindWX — main stylesheet Aesthetic: sectional aeronautical chart Cream background, navy ink, sage green, aviation red. ============================================ */ /* ---------- Fonts ---------- */ @import url('https://fonts.googleapis.com/css2?family=Anton&family=Manrope:wght@400;500;600;700&family=JetBrains+Mono:wght@400;500&display=swap'); /* ---------- CSS variables ---------- */ :root { --buff: #f4ecd6; /* sectional chart base */ --buff-dark: #e8dcb8; /* slightly darker for depth */ --ink: #0c2541; /* navy "ink" for text */ --ink-soft: #2d4360; /* softer navy for body text */ --sage: #5d6f3c; /* aviation green */ --rust: #b53d1f; /* aviation red / caution */ --sky: #4a7ba6; /* navigation chart blue */ --sun: #d9a521; /* METAR yellow / runway markings */ --rule: #b9a87a; /* hairline color, like chart contour lines */ --font-display: 'Anton', 'Impact', sans-serif; --font-body: 'Manrope', system-ui, sans-serif; --font-mono: 'JetBrains Mono', 'Courier New', monospace; --max-width: 1200px; --gutter: clamp(1rem, 4vw, 2.5rem); /* Spacing scale (4pt-based). Use these, not arbitrary values. */ --space-2xs: 0.25rem; --space-xs: 0.5rem; --space-sm: 0.75rem; --space-md: 1rem; --space-lg: 1.5rem; --space-xl: 2.5rem; --space-2xl: 4rem; --space-3xl: clamp(3.5rem, 7vw, 6rem); /* Surface tone used by every elevated panel/card on the site */ --surface: #fffaf0; /* Motion: exponential ease-out, no bounce. Two speeds. */ --ease-out: cubic-bezier(0.22, 1, 0.36, 1); --dur-1: 0.15s; /* taps, color shifts */ --dur-2: 0.25s; /* lifts, reveals */ color-scheme: light; } /* ---------- Dark theme (night-cockpit) ---------- Approach A: re-theme the same color-named variables for dark, then override the few components that use --ink/--buff in reversed roles (below). Applied when carries data-theme="dark" — set pre-paint by the inline head script and flipped by the header toggle. */ html[data-theme="dark"] { --buff: #0f1923; /* page field: deep night navy */ --buff-dark: #21323f; /* raised tint: hover fills + offset shadows */ --ink: #e9e4d6; /* primary text: warm instrument off-white */ --ink-soft: #9fb1c0; /* secondary text: muted slate */ --sage: #82c882; /* mint green (matches Minimums card readouts); reads clean on the dark field */ --rust: #e0613f; --sky: #6ea8d4; --sun: #e3ad2e; --rule: #314656; /* hairlines, visible on dark */ --surface: #18242f; /* elevated panels */ color-scheme: dark; } /* Dark overrides: components that use --ink/--buff in reversed roles */ html[data-theme="dark"] .about { background: var(--surface); color: var(--ink-soft); border-top: 2px solid var(--rust); /* aviation-red edge: a little warmth on the dark band */ } html[data-theme="dark"] .about h2 { color: var(--ink); } html[data-theme="dark"] .about p { color: var(--ink-soft); } /* Pilot-takeaway and scenario-answer panels are navy with cream text in light mode; keep them dark in dark mode (re-assert --buff) instead of flipping to a bright cream box. */ html[data-theme="dark"] .takeaway-box, html[data-theme="dark"] .scenario-takeaway { background: var(--surface); --buff: #f4ecd6; } /* PIREP example panel is navy with cream tokens in light mode; keep it dark. */ html[data-theme="dark"] .pirep-example { background: var(--surface); --buff: #f4ecd6; } /* PIREP field-code chips sit on a dark surface in dark mode: keep their text cream, and lighten the two navy chips (/SK, /IC) that would otherwise vanish. */ html[data-theme="dark"] .pirep-fields { --buff: #f4ecd6; } html[data-theme="dark"] .ptok-sky, html[data-theme="dark"] .ptok-ic { background: rgba(74, 123, 166, 0.45); } /* Ladder product tags carry colored inline backgrounds; their var(--buff) text flips dark in dark mode and disappears. Pin it to cream. */ html[data-theme="dark"] .ladder-product-tag { color: #f4ecd6; } /* Standard-atmosphere table header: dark bar instead of a bright flipped one. */ html[data-theme="dark"] .atmo-table thead th { background: var(--buff-dark); color: var(--ink); } /* Hero sample chips are theme-agnostic: faint hue tints + --ink text read on both light and dark panels, so no dark-mode override is needed (the .metar-raw .tag rules carry the colors). */ /* Print always uses the light palette: dark backgrounds waste ink, and the Minimums card / Nav Log sheet are meant to print on white. */ @media print { html[data-theme="dark"] { --buff: #f4ecd6; --buff-dark: #e8dcb8; --ink: #0c2541; --ink-soft: #2d4360; --sage: #5d6f3c; --rust: #b53d1f; --sky: #4a7ba6; --sun: #d9a521; --rule: #b9a87a; --surface: #fffaf0; color-scheme: light; } } /* Decoder: the input bar and the annotated-raw panels are navy in light mode (light text on dark). Keep them dark in dark mode and re-assert --buff so all their cream text — tabs, inputs, buttons, raw METAR, and the token chips — stays light. */ html[data-theme="dark"] .decoder-wrapper, html[data-theme="dark"] .decoder-raw-wrap { background: var(--surface); --buff: #f4ecd6; } /* TAF: recessed indent group + label colors that were hardcoded dark hexes. */ html[data-theme="dark"] .taf-group--indent { background: var(--buff); } html[data-theme="dark"] .taf-type-fm, html[data-theme="dark"] .taf-type-inter { color: var(--sky); } html[data-theme="dark"] .taf-type-prob30, html[data-theme="dark"] .taf-type-prob40 { color: var(--sun); } /* Hand-built SVG figures (decoder wind compass + cloud diagram, and every Learn-page .diagram) hardcode navy ink for a light background. Keep their cards light in dark mode (screen only) so labels/strokes stay legible — the site-wide "figures are light cards" rule. */ @media screen { html[data-theme="dark"] .vis-card, html[data-theme="dark"] .diagram { --buff: #f4ecd6; --buff-dark: #e8dcb8; --ink: #0c2541; --ink-soft: #2d4360; --rule: #b9a87a; --surface: #fffaf0; --sage: #5d6f3c; --rust: #b53d1f; --sky: #4a7ba6; --sun: #d9a521; color-scheme: light; background: #fffaf0; } } /* ---------- Reset & base ---------- */ *, *::before, *::after { box-sizing: border-box; } html { scroll-behavior: smooth; overflow-x: clip; } body { margin: 0; font-family: var(--font-body); font-size: 17px; line-height: 1.6; color: var(--ink-soft); background: var(--buff); /* Contain any stray horizontal overflow so the page never scrolls sideways and the sticky header always spans the full viewport (even pinch-zoomed out). `clip` (not `hidden`) keeps the header's position:sticky working. */ overflow-x: clip; /* Crisper, more deliberate type rendering site-wide */ -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; text-rendering: optimizeLegibility; font-kerning: normal; /* subtle grain for paper-chart feel */ background-image: radial-gradient(circle at 25% 35%, rgba(181, 61, 31, 0.03) 0%, transparent 40%), radial-gradient(circle at 75% 65%, rgba(93, 111, 60, 0.04) 0%, transparent 40%); } a { color: var(--sky); text-decoration: none; border-bottom: 1px solid currentColor; transition: color var(--dur-1) var(--ease-out); } a:hover { color: var(--rust); } h1, h2, h3 { color: var(--ink); margin: 0; text-wrap: balance; } p { text-wrap: pretty; } /* fewer orphans in prose */ /* ---------- Layout helpers ---------- */ .container { max-width: var(--max-width); margin: 0 auto; padding: 0 var(--gutter); } .rule { border: 0; border-top: 1px solid var(--rule); margin: 4rem 0; } /* ---------- Workflow steps ---------- For tool pages that ARE a sequence (plan a route, then performance, then build the log). Numbers earn their place here: they carry the order the student works through. Generous space BETWEEN steps, tight grouping within each. */ .wf-step { padding-top: var(--space-2xl); } .wf-step:first-of-type { padding-top: var(--space-xl); } .wf-step-head { display: flex; align-items: baseline; gap: 0.9rem; margin-bottom: 1.4rem; } .wf-step-num { flex: none; align-self: flex-start; font-family: var(--font-display); font-size: 1.05rem; line-height: 1; color: var(--buff); background: var(--ink); width: 2rem; height: 2rem; display: inline-flex; align-items: center; justify-content: center; letter-spacing: 0; } /* A breaking band that is NOT part of the numbered planning sequence (e.g. in-flight tools). Mono tag instead of a step number. */ .wf-step-tag { flex: none; align-self: flex-start; font-family: var(--font-mono); font-size: 0.62rem; letter-spacing: 0.16em; text-transform: uppercase; color: var(--buff); background: var(--rust); padding: 0.4rem 0.55rem; line-height: 1; } .wf-step-titles { min-width: 0; } .wf-step-title { font-family: var(--font-display); font-size: clamp(1.5rem, 3vw, 1.9rem); letter-spacing: 0.02em; color: var(--ink); line-height: 1.05; margin: 0; } .wf-step-sub { font-family: var(--font-mono); font-size: 0.8rem; letter-spacing: 0.03em; color: var(--ink-soft); margin: 0.35rem 0 0; } /* ---------- Header / Nav ---------- */ .site-header { border-bottom: 1px solid var(--rule); background: var(--buff); position: sticky; top: 0; z-index: 100; } .site-header .container { display: flex; align-items: center; justify-content: space-between; padding-top: 1.1rem; padding-bottom: 1.1rem; } .brand { font-family: var(--font-display); font-size: 1.6rem; letter-spacing: 0.04em; color: var(--ink); text-decoration: none; border: none; } .brand .brand-mark { color: var(--rust); font-size: 0.8em; letter-spacing: 0; } /* Right-side header cluster: nav, theme toggle, mobile menu button */ .header-actions { display: flex; align-items: center; gap: 1.4rem; } .theme-toggle { display: inline-flex; align-items: center; justify-content: center; width: 40px; height: 40px; padding: 0; flex: none; background: none; border: none; color: var(--ink); cursor: pointer; transition: color var(--dur-1) var(--ease-out); } .theme-toggle:hover { color: var(--rust); } .theme-toggle svg { width: 18px; height: 18px; display: block; } .theme-toggle .icon-moon { display: none; } html[data-theme="dark"] .theme-toggle .icon-sun { display: none; } html[data-theme="dark"] .theme-toggle .icon-moon { display: block; } .nav-links { display: flex; gap: 1.5rem; list-style: none; margin: 0; padding: 0; } .nav-links a { color: var(--ink); font-weight: 600; font-size: 0.92rem; letter-spacing: 0.02em; border: none; padding-bottom: 2px; border-bottom: 2px solid transparent; transition: border-color var(--dur-1) var(--ease-out); } .nav-links a:hover { border-bottom-color: var(--rust); color: var(--ink); } /* Medium desktop: tighten the tab gap and type a touch so all seven flat tabs never crowd in the ~1000–1150px band, just before the hamburger takes over. */ @media (max-width: 1150px) { .nav-links { gap: 1.1rem; } .nav-links a { font-size: 0.88rem; } } /* ---------- Mobile nav toggle ---------- */ .nav-toggle { display: none; /* desktop: hidden */ align-items: center; justify-content: center; width: 44px; height: 44px; /* full 44×44 touch target */ margin: -0.5rem 0; /* keep header bar height unchanged */ padding: 0; background: none; border: 1px solid var(--rule); color: var(--ink); cursor: pointer; } .nav-toggle-bars, .nav-toggle-bars::before, .nav-toggle-bars::after { display: block; width: 20px; height: 2px; background: var(--ink); transition: transform 0.2s, opacity 0.2s; } .nav-toggle-bars { position: relative; } .nav-toggle-bars::before, .nav-toggle-bars::after { content: ""; position: absolute; left: 0; } .nav-toggle-bars::before { top: -6px; } .nav-toggle-bars::after { top: 6px; } .nav-toggle[aria-expanded="true"] .nav-toggle-bars { background: transparent; } .nav-toggle[aria-expanded="true"] .nav-toggle-bars::before { top: 0; transform: rotate(45deg); } .nav-toggle[aria-expanded="true"] .nav-toggle-bars::after { top: 0; transform: rotate(-45deg); } /* Switch to the hamburger well before seven tabs would crowd or wrap. */ @media (max-width: 1000px) { .nav-toggle { display: inline-flex; } .site-nav { display: none; position: absolute; top: 100%; left: 0; right: 0; background: var(--buff); border-bottom: 1px solid var(--rule); box-shadow: 0 8px 0 var(--buff-dark); } .site-nav.is-open { display: block; } .site-nav .nav-links { flex-direction: column; gap: 0; padding: 0 var(--gutter); } .site-nav .nav-links a { display: block; padding: 0.9rem 0; /* tall tap rows */ font-size: 1rem; border-bottom: 1px solid var(--rule); } .site-nav .nav-links li:last-child a { border-bottom: none; } } /* ---------- Hero ---------- Single centered column: eyebrow → display headline → explainer → primary + secondary CTA → quiet mono reassurance. Anchored in navy (headline, solid primary button, and the compass-rose substrate). */ .hero { padding: clamp(4rem, 9vw, 7rem) 0 clamp(3rem, 5vw, 4.5rem); position: relative; overflow: hidden; /* clips the compass-rose chart substrate */ } .hero-stack { position: relative; z-index: 1; /* sits above .hero-chart */ max-width: 50rem; margin: 0 auto; text-align: center; /* block, not flex: children take full width and wrap */ } /* VOR-style compass rose printed behind the stack like chart paper. A radial mask fades the rose out through the center so the detailed degree ring reads at the rim while the headline stays on clean paper. */ .hero-chart { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width: min(740px, 96vw); aspect-ratio: 1; color: var(--ink); opacity: 0.13; pointer-events: none; z-index: 0; -webkit-mask-image: radial-gradient(circle, transparent 24%, #000 50%); mask-image: radial-gradient(circle, transparent 24%, #000 50%); } /* Mobile: on desktop the compass is large enough that the headline sits inside its masked center. On narrow screens the rose shrinks toward the viewport width and its center drifts well below the type, so raise it to sit behind the headline block. (The eyebrow tick is handled inline in the base rule and needs no mobile override.) */ @media (max-width: 560px) { .hero { padding-top: clamp(2.5rem, 8vw, 4rem); } .hero-chart { width: min(560px, 94vw); top: 30%; } } .hero-eyebrow { font-family: var(--font-mono); font-size: 0.78rem; text-transform: uppercase; letter-spacing: 0.18em; color: var(--sage); margin-bottom: 1.1rem; text-align: center; /* the tick is inline (see ::before), so it flows with the label and stays attached whether the text sits on one line or wraps to two */ } .hero-eyebrow::before { content: ""; display: inline-block; width: 24px; height: 1px; background: var(--sage); vertical-align: middle; margin-right: 0.6rem; /* gap to the label (was the flex container's gap) */ } .hero h1 { font-family: var(--font-display); font-size: clamp(2.75rem, 8.5vw, 6rem); line-height: 1.0; letter-spacing: -0.02em; text-wrap: balance; margin: 0 0 1.4rem; } .hero h1 .accent { color: var(--rust); } .hero p.lede { font-size: clamp(1.05rem, 1.6vw, 1.2rem); max-width: 46ch; margin: 0 auto 2.1rem; color: var(--ink-soft); } .hero-reassure { font-family: var(--font-mono); font-size: 0.72rem; text-transform: uppercase; letter-spacing: 0.14em; color: var(--ink-soft); margin: 1.5rem 0 0; } .hero-cta { display: inline-block; background: var(--ink); color: var(--buff); font-family: var(--font-display); letter-spacing: 0.06em; padding: 0.9rem 1.8rem; border: none; font-size: 1rem; transition: background var(--dur-1) var(--ease-out), transform var(--dur-2) var(--ease-out), box-shadow var(--dur-2) var(--ease-out); } .hero-cta:hover { background: var(--rust); color: var(--buff); transform: translate(-2px, -2px); box-shadow: 4px 4px 0 var(--buff-dark); } .hero-cta:active { transform: translate(0, 0); box-shadow: 1px 1px 0 var(--buff-dark); } .hero-actions { display: flex; flex-wrap: wrap; gap: 0.8rem 1.4rem; align-items: center; justify-content: center; /* centered CTA row */ } /* Secondary action: a text link, not a second button */ .hero-link { font-family: var(--font-body); font-weight: 600; font-size: 1rem; color: var(--ink); border-bottom: 1px solid transparent; transition: color var(--dur-1) var(--ease-out), border-color var(--dur-1) var(--ease-out); } .hero-link:hover { color: var(--rust); border-bottom-color: var(--rust); } .hero-cta-secondary { display: inline-block; background: transparent; color: var(--ink); font-family: var(--font-display); letter-spacing: 0.06em; padding: 0.9rem 1.8rem; border: 1px solid var(--ink); font-size: 1rem; transition: background var(--dur-1) var(--ease-out), color var(--dur-1) var(--ease-out), transform var(--dur-2) var(--ease-out), box-shadow var(--dur-2) var(--ease-out); } .hero-cta-secondary:hover { background: var(--ink); color: var(--buff); transform: translate(-2px, -2px); box-shadow: 4px 4px 0 var(--buff-dark); } .hero-cta-secondary:active { transform: translate(0, 0); box-shadow: 1px 1px 0 var(--buff-dark); } /* ---------- METAR teaser card ---------- */ .metar-card { background: var(--surface); border: 1px solid var(--rule); padding: 1.8rem; position: relative; box-shadow: 6px 6px 0 var(--buff-dark); } .metar-card-label { position: absolute; top: -12px; left: 1.5rem; background: var(--rust); color: var(--buff); font-family: var(--font-mono); font-size: 0.7rem; letter-spacing: 0.15em; padding: 3px 10px; text-transform: uppercase; } .metar-raw { font-family: var(--font-mono); font-size: 0.92rem; color: var(--ink); line-height: 1.7; word-break: normal; overflow-wrap: break-word; margin-bottom: 1.5rem; padding-bottom: 1.2rem; border-bottom: 1px dashed var(--rule); font-variant-numeric: tabular-nums; /* digits align like an avionics readout */ } /* METAR highlight chips: one coordinated hue per section, faint tints that read on both light and dark panels (text follows the theme via --ink). Metadata (time, altimeter) stays a quiet neutral; the condition tokens each carry a distinct hue, so no single color dominates. */ .metar-raw .tag { color: var(--ink); background: rgba(120, 134, 150, 0.18); /* quiet neutral = metadata default */ padding: 1px 4px; border-radius: 2px; cursor: help; white-space: nowrap; /* keep tokens whole: -RA never splits to "-" / "RA" */ } .metar-raw .tag-time, .metar-raw .tag-alt { background: rgba(120, 134, 150, 0.18); } /* metadata: quiet */ .metar-raw .tag-wind { background: rgba(74, 123, 166, 0.28); } /* wind → sky blue */ .metar-raw .tag-vis { background: rgba(93, 111, 60, 0.32); } /* visibility → sage green */ .metar-raw .tag-wx { background: rgba(181, 61, 31, 0.30); } /* weather → aviation red */ .metar-raw .tag-sky { background: rgba(100, 75, 140, 0.32); } /* sky/ceiling → violet */ .metar-raw .tag-temp { background: rgba(217, 165, 33, 0.30); } /* temperature → sun gold */ .metar-decode { display: grid; grid-template-columns: auto 1fr; gap: 0.5rem 1rem; font-size: 0.92rem; } .metar-decode dt { font-family: var(--font-mono); font-size: 0.78rem; color: var(--sage); text-transform: uppercase; letter-spacing: 0.1em; padding-top: 2px; } .metar-decode dd { margin: 0; color: var(--ink); font-variant-numeric: tabular-nums; } /* ---------- Live sample strip (below the hero) ---------- Keeps the annotated-METAR showcase the old hero card had, restyled as a full-width band so the hero itself can stay a clean centered column. */ .hero-sample { padding: 0 0 clamp(2.5rem, 5vw, 4rem); } .hero-sample-tag { font-family: var(--font-mono); font-size: 0.72rem; text-transform: uppercase; letter-spacing: 0.14em; color: var(--sage); margin: 0 0 0.8rem; } .hero-sample-panel { background: var(--surface); border: 1px solid var(--rule); border-top: 3px solid var(--sun); padding: 1.5rem 1.6rem; box-shadow: 6px 6px 0 var(--buff-dark); } .hero-sample-panel .metar-raw { margin-bottom: 1.3rem; } .hero-sample-decode { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 1rem 1.5rem; margin: 0; } .hero-sample-decode > div { min-width: 0; } .hero-sample-decode dt { font-family: var(--font-mono); font-size: 0.72rem; color: var(--sage); text-transform: uppercase; letter-spacing: 0.1em; } .hero-sample-decode dd { margin: 0.25rem 0 0; color: var(--ink); font-size: 0.95rem; font-variant-numeric: tabular-nums; /* values line up across the readout grid */ } /* ---------- Sections ---------- */ .section-label { font-family: var(--font-mono); font-size: 0.78rem; text-transform: uppercase; letter-spacing: 0.18em; color: var(--rust); margin-bottom: 0.8rem; } .section-title { font-family: var(--font-display); font-size: clamp(2.2rem, 5vw, 3.6rem); letter-spacing: 0.01em; line-height: 1.02; margin-bottom: clamp(2rem, 3.5vw, 3rem); max-width: 20ch; } /* ---------- Feature bento ---------- Not a grid of equal cards. Learn is the flagship (15 lessons), so it owns a 2×2 block; the rest orbit it. Hairline gaps read as one chart panel. */ .features { display: grid; grid-template-columns: repeat(3, 1fr); grid-auto-rows: 1fr; gap: 1px; /* the gap reveals the container color as hairlines */ background: var(--rule); border: 1px solid var(--rule); } .feature--learn { grid-column: 1 / 3; grid-row: 1 / 3; } .feature--acs { grid-column: 3; grid-row: 1; } .feature--decoder { grid-column: 3; grid-row: 2; } .feature--navlog { grid-column: 1; grid-row: 3; } .feature--crosswind { grid-column: 2; grid-row: 3; } .feature--minimums { grid-column: 3; grid-row: 3; } @media (max-width: 860px) { .features { grid-template-columns: 1fr 1fr; grid-auto-rows: auto; } .feature--learn, .feature--navlog { grid-column: 1 / -1; grid-row: auto; } .feature--acs, .feature--decoder, .feature--crosswind, .feature--minimums { grid-column: auto; grid-row: auto; } } @media (max-width: 560px) { .features { grid-template-columns: 1fr; } .feature--learn, .feature--navlog { grid-column: 1; } } .feature { padding: 2.2rem; background: var(--surface); /* surface tone: the grid reads as one elevated panel */ position: relative; display: flex; flex-direction: column; transition: background var(--dur-2) var(--ease-out); } .feature:hover { background: var(--buff); } .feature .feature-link { margin-top: auto; /* link pins to the bottom so tiles align */ padding-top: 1.2rem; font-size: 0.9rem; } .feature-num { font-family: var(--font-mono); font-size: 0.78rem; color: var(--rust); letter-spacing: 0.1em; } .feature h3 { font-family: var(--font-display); font-size: 1.7rem; letter-spacing: 0.02em; margin: 0.6rem 0 0.8rem; } .feature p { margin: 0; font-size: 0.95rem; } /* The flagship tile: dramatically larger type, more air, topic chips */ .feature--learn { padding: clamp(2.2rem, 3vw, 3.2rem); } .feature--learn h3 { font-size: clamp(2rem, 3.2vw, 2.9rem); line-height: 0.98; margin: 0.7rem 0 1rem; max-width: 16ch; } .feature--learn p { font-size: 1.05rem; max-width: 50ch; } /* The lesson anatomy: shows the 6-part format every lesson follows. This is the real capability — it fills the flagship tile and explains what a student actually gets, not just that lessons exist. */ .learn-anatomy-label { font-family: var(--font-mono); font-size: 0.72rem; text-transform: uppercase; letter-spacing: 0.14em; color: var(--sage); margin: 1.6rem 0 0.85rem; } .learn-anatomy-steps { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: 1fr 1fr; gap: 1rem 2rem; counter-reset: anat; } @media (max-width: 560px) { .learn-anatomy-steps { grid-template-columns: 1fr; } } .learn-anatomy-steps li { counter-increment: anat; padding-bottom: 0.85rem; border-bottom: 1px dotted var(--rule); } .anat-term { display: block; font-weight: 700; font-size: 1rem; color: var(--ink); } .anat-term::before { content: counter(anat, decimal-leading-zero); font-family: var(--font-mono); font-weight: 400; font-size: 0.72rem; color: var(--rust); margin-right: 0.6rem; } .anat-desc { display: block; font-size: 0.82rem; color: var(--ink-soft); margin-top: 0.2rem; } /* Tile footer: status + link share one baseline row, no pinned-link gap */ .feature-foot { margin-top: auto; padding-top: 1.6rem; display: flex; align-items: center; gap: 1.25rem; flex-wrap: wrap; } .feature-foot .feature-status { margin-top: 0; } .feature-foot a { font-size: 0.95rem; font-weight: 600; } .feature-status { font-family: var(--font-mono); font-size: 0.7rem; color: var(--sage); text-transform: uppercase; letter-spacing: 0.15em; margin-top: 1.2rem; display: inline-block; padding: 2px 8px; border: 1px solid var(--sage); } .feature-status.upcoming { color: var(--ink-soft); border-color: var(--rule); } /* ---------- Upcoming section strip ---------- */ .upcoming-strip { display: flex; align-items: center; justify-content: space-between; gap: 2rem; flex-wrap: wrap; border: 1px solid var(--rule); border-top: none; padding: 1.4rem 2.2rem; background: rgba(0, 0, 0, 0.015); } .upcoming-strip .feature-num { color: var(--ink-soft); } .upcoming-strip h3 { font-family: var(--font-display); font-size: 1.4rem; letter-spacing: 0.02em; margin: 0.4rem 0 0.5rem; color: var(--ink-soft); } .upcoming-strip p { font-size: 0.9rem; color: var(--ink-soft); max-width: 55ch; margin: 0; } @media (max-width: 700px) { .upcoming-strip { padding: 1.4rem; gap: 1rem; } } /* ---------- About strip ---------- */ .about { background: var(--ink); color: var(--buff); padding: clamp(3.5rem, 6vw, 5.5rem) 0; margin-top: 5rem; } .about h2 { color: var(--buff); font-family: var(--font-display); font-size: clamp(2rem, 4.5vw, 3.3rem); line-height: 1.02; margin-bottom: 1.4rem; max-width: 20ch; } .about p { max-width: 62ch; color: rgba(244, 236, 214, 0.88); font-size: 1.05rem; } .about .section-label { color: var(--sun); } /* Quiet doorway to the About page, sitting under the "why this exists" copy. Mono, cream-on-navy in light mode; the dark band flips to surface, so the text color is re-asserted below. Hover lands on sun in both themes. */ .about-cta { margin-top: 1.9rem; margin-bottom: 0; } .about-cta a { font-family: var(--font-mono); font-size: 0.82rem; text-transform: uppercase; letter-spacing: 0.12em; color: var(--buff); border-bottom: 1px solid rgba(244, 236, 214, 0.45); padding-bottom: 2px; } .about-cta a:hover { color: var(--sun); border-bottom-color: var(--sun); } html[data-theme="dark"] .about-cta a { color: var(--ink); border-bottom-color: rgba(233, 228, 214, 0.4); } html[data-theme="dark"] .about-cta a:hover { color: var(--sun); border-bottom-color: var(--sun); } /* ---------- Hero entrance ---------- One orchestrated reveal on load, the page's single signature moment. Default (and reduced-motion) state is fully visible: the animation only exists inside no-preference, so content never ships hidden. */ @keyframes hero-rise { from { opacity: 0; transform: translateY(16px); } to { opacity: 1; transform: none; } } @keyframes hero-card-in { from { opacity: 0; transform: translateY(22px) scale(0.985); } to { opacity: 1; transform: none; } } @media (prefers-reduced-motion: no-preference) { .hero .hero-eyebrow { animation: hero-rise 0.6s var(--ease-out) both; } .hero h1 { animation: hero-rise 0.7s var(--ease-out) 0.07s both; } .hero .lede { animation: hero-rise 0.7s var(--ease-out) 0.16s both; } .hero .hero-actions { animation: hero-rise 0.7s var(--ease-out) 0.25s both; } .hero .hero-reassure { animation: hero-rise 0.7s var(--ease-out) 0.33s both; } .hero-sample-panel { animation: hero-card-in 0.85s var(--ease-out) 0.3s both; } /* Interior-page hero (Learn concept pages, the Learn index, ACS) gets the same staggered entrance so the whole site shares one motion language. */ .concept-hero .hero-eyebrow { animation: hero-rise 0.6s var(--ease-out) both; } .concept-hero h1 { animation: hero-rise 0.7s var(--ease-out) 0.07s both; } .concept-hero .lede { animation: hero-rise 0.7s var(--ease-out) 0.16s both; } .concept-hero .concept-meta { animation: hero-rise 0.7s var(--ease-out) 0.25s both; } /* Tool-page heroes (Crosswind, Personal Minimums, Nav Log) carry their own wrapper classes but share the identical eyebrow / h1 / lede entrance, so every page on the site opens with the same staggered rise. */ .cw-hero .hero-eyebrow, .minimums-hero .hero-eyebrow, .nl-hero .hero-eyebrow { animation: hero-rise 0.6s var(--ease-out) both; } .cw-hero h1, .minimums-hero h1, .nl-hero h1 { animation: hero-rise 0.7s var(--ease-out) 0.07s both; } .cw-hero .lede, .minimums-hero .lede, .nl-hero .lede { animation: hero-rise 0.7s var(--ease-out) 0.16s both; } } /* ---------- Scroll reveal ---------- Sections fade-and-rise once as they scroll into view. The pre-hidden state lives ONLY inside no-preference, so reduced-motion users and the no-JS fallback both get fully-visible, static content. JS adds `.reveal` (hide) then `.is-visible` (settle); see js/main.js. Transition is on the end-state so the initial hide is instant, not a visible fade-out. */ @media (prefers-reduced-motion: no-preference) { .reveal { opacity: 0; transform: translateY(18px); } .reveal.is-visible { opacity: 1; transform: none; transition: opacity 0.5s var(--ease-out) var(--reveal-delay, 0ms), transform 0.5s var(--ease-out) var(--reveal-delay, 0ms); } } /* ---------- Footer ---------- */ footer { padding: 2.5rem 0; border-top: 1px solid var(--rule); font-family: var(--font-mono); font-size: 0.78rem; color: var(--ink-soft); text-transform: uppercase; letter-spacing: 0.12em; } footer .container { display: flex; justify-content: space-between; flex-wrap: wrap; gap: 1rem; } /* ---------- Tooltip on tagged METAR words ---------- */ .tag { position: relative; } .tag::after { content: attr(data-tip); position: absolute; bottom: calc(100% + 6px); left: 50%; transform: translateX(-50%); background: var(--ink); color: var(--buff); font-family: var(--font-body); font-size: 0.78rem; padding: 4px 8px; white-space: normal; max-width: min(220px, 60vw); text-align: center; letter-spacing: 0.02em; opacity: 0; pointer-events: none; transition: opacity 0.15s; z-index: 10; } .tag:hover::after, .tag:focus-visible::after, .tag.is-revealed::after { opacity: 1; } /* ============================================ Concept pages (pages/learn/*) Sectional-chart aesthetic, study-friendly layout. ============================================ */ /* ---------- Breadcrumb ---------- */ .breadcrumb { border-bottom: 1px solid var(--rule); padding: 0.7rem 0; font-family: var(--font-mono); font-size: 0.78rem; letter-spacing: 0.08em; text-transform: uppercase; } .breadcrumb a { color: var(--ink-soft); border: none; } .breadcrumb a:hover { color: var(--rust); } .breadcrumb-sep { color: var(--rule); margin: 0 0.5rem; } /* ---------- Concept hero ---------- */ .concept-hero { padding: 3.5rem 0 2.5rem; border-bottom: 1px solid var(--rule); } .concept-hero h1 { font-family: var(--font-display); font-size: clamp(2.5rem, 5.5vw, 4.5rem); line-height: 1; letter-spacing: 0.005em; margin-bottom: 1.2rem; } .concept-hero h1 .accent { color: var(--rust); } .concept-hero .lede { font-size: 1.1rem; max-width: 60ch; margin-bottom: 1.5rem; } .concept-hero .lede em { font-style: italic; color: var(--ink); } .concept-meta { display: flex; gap: 1.5rem; flex-wrap: wrap; font-family: var(--font-mono); font-size: 0.78rem; text-transform: uppercase; letter-spacing: 0.12em; color: var(--sage); } .concept-meta-item strong { color: var(--ink); margin-right: 0.3rem; font-weight: 600; } /* ---------- Body grid: sidebar + article ---------- */ .concept-body { padding: 3rem 0 5rem; } .concept-grid { display: grid; grid-template-columns: 220px 1fr; gap: 4rem; align-items: start; } @media (max-width: 900px) { .concept-grid { grid-template-columns: 1fr; gap: 2rem; } } /* The article is a grid item; without this its min-width defaults to auto, so a wide child (e.g. the intensity table) stretches the whole column past the viewport and clips paragraphs/diagrams on the right. Pin it to 0 so the column stays viewport-width and wide tables scroll inside their own overflow wrapper. */ .concept-grid > * { min-width: 0; } /* ---------- Sidebar TOC ---------- */ .concept-toc { position: sticky; top: 100px; /* clears the sticky site header */ font-size: 0.9rem; } @media (max-width: 900px) { .concept-toc { position: static; border: 1px solid var(--rule); padding: 1.2rem; background: var(--surface); } } .toc-label { font-family: var(--font-mono); font-size: 0.72rem; text-transform: uppercase; letter-spacing: 0.18em; color: var(--rust); margin: 0 0 0.8rem; } .concept-toc ol { list-style: none; padding: 0; margin: 0; counter-reset: toc; } .concept-toc li { counter-increment: toc; padding: 0.35rem 0; border-bottom: 1px dotted var(--rule); } .concept-toc li::before { content: counter(toc, decimal-leading-zero); font-family: var(--font-mono); font-size: 0.7rem; color: var(--sage); margin-right: 0.6rem; } .concept-toc a { color: var(--ink-soft); border: none; font-weight: 500; } .concept-toc a:hover { color: var(--rust); } /* ---------- Article body ---------- */ .concept-article { max-width: 70ch; } .concept-article section { margin-bottom: 3.5rem; scroll-margin-top: 90px; } .concept-article h2 { font-family: var(--font-display); font-size: 1.9rem; letter-spacing: 0.015em; margin-bottom: 1.2rem; padding-bottom: 0.4rem; border-bottom: 2px solid var(--ink); display: inline-block; } .concept-article h3 { font-family: var(--font-display); font-size: 1.3rem; letter-spacing: 0.02em; margin: 0 0 0.6rem; } .concept-article p { margin: 0 0 1.1rem; } .concept-article ul, .concept-article ol { padding-left: 1.4rem; margin: 0 0 1.2rem; } .concept-article li { margin-bottom: 0.4rem; } .concept-article strong { color: var(--ink); font-weight: 700; } /* ---------- Hazard cards (the three AIRMETs) ---------- */ .card-grid { display: grid; gap: 1.2rem; margin: 1.5rem 0 2rem; } .card-grid-3 { grid-template-columns: repeat(3, 1fr); } @media (max-width: 800px) { .card-grid-3 { grid-template-columns: 1fr; } } /* Grid children default to min-width:auto, so long/unbreakable content can force a track wider than its share and push the whole grid (and the article, and any width:100% diagram inside it) past the viewport. Let every content-grid child shrink so text wraps instead — at all widths, for class- and inline-styled grids. */ .card-grid > *, .concept-article [style*="grid-template-columns"] > * { min-width: 0; } /* Phones: collapse every multi-column content grid (class- or inline-styled) in the article to a single column so text always wraps within the screen — no horizontal overflow. !important overrides the inline grid-template-columns. */ @media (max-width: 560px) { .concept-article [style*="grid-template-columns"] { grid-template-columns: 1fr !important; } } .hazard-card { background: var(--surface); border: 1px solid var(--rule); border-top: 4px solid var(--ink); padding: 1.4rem; position: relative; } .hazard-sierra { border-top-color: var(--sky); } .hazard-tango { border-top-color: var(--sun); } .hazard-zulu { border-top-color: var(--rust); } .hazard-label { font-family: var(--font-mono); font-size: 0.72rem; text-transform: uppercase; letter-spacing: 0.15em; color: var(--sage); display: block; margin-bottom: 0.4rem; } .hazard-card h3 { font-size: 1.1rem; margin-bottom: 0.7rem; } .hazard-mnemonic { font-size: 0.92rem; font-style: italic; color: var(--ink-soft); padding-bottom: 0.7rem; margin-bottom: 0.7rem; border-bottom: 1px dashed var(--rule); } .hazard-list { list-style: none; padding: 0; margin: 0; font-size: 0.92rem; } .hazard-list li { padding: 0.25rem 0 0.25rem 1.2rem; position: relative; } .hazard-list li::before { content: "▸"; position: absolute; left: 0; color: var(--rust); } /* ---------- Callout (highlighted note) ---------- */ .callout { background: rgba(217, 165, 33, 0.12); border: 1px solid var(--rule); border-top: 3px solid var(--sun); /* top-accent, matches hazard-card */ padding: 1rem 1.2rem; margin: 1.5rem 0; font-size: 0.95rem; } /* ---------- Compare table (two-col definition lists) ---------- */ .compare-table { display: grid; grid-template-columns: 1fr 1fr; gap: 0; border: 1px solid var(--rule); margin: 1.5rem 0 2rem; background: var(--surface); } @media (max-width: 700px) { .compare-table { grid-template-columns: 1fr; } .compare-col + .compare-col { border-top: 1px solid var(--rule); } } .compare-col { padding: 1.4rem; } .compare-col + .compare-col { border-left: 1px solid var(--rule); } @media (max-width: 700px) { .compare-col + .compare-col { border-left: none; } } .compare-head { font-family: var(--font-display); font-size: 1.4rem; margin: 0 0 1rem; padding-bottom: 0.5rem; border-bottom: 2px solid var(--ink); letter-spacing: 0.03em; } .compare-col dl { margin: 0; } .compare-col dt { font-family: var(--font-mono); font-size: 0.7rem; text-transform: uppercase; letter-spacing: 0.12em; color: var(--sage); margin-top: 0.8rem; } .compare-col dt:first-child { margin-top: 0; } .compare-col dd { margin: 0.2rem 0 0; font-size: 0.95rem; color: var(--ink); } /* ---------- Q&A details/accordion ---------- */ .qa { border: 1px solid var(--rule); background: var(--surface); padding: 0; margin-bottom: 0.7rem; } .qa summary { padding: 0.9rem 1.2rem; cursor: pointer; font-weight: 600; color: var(--ink); list-style: none; position: relative; padding-right: 2.5rem; } .qa summary::-webkit-details-marker { display: none; } .qa summary::after { content: "+"; position: absolute; right: 1.2rem; top: 50%; transform: translateY(-50%); font-family: var(--font-mono); font-size: 1.2rem; color: var(--rust); transition: transform 0.2s; } .qa[open] summary::after { content: "−"; } .qa[open] summary { border-bottom: 1px solid var(--rule); } .qa p { padding: 1rem 1.2rem; margin: 0; font-size: 0.95rem; } /* ---------- Decision scenario ---------- */ .scenario-disclaimer { font-size: 0.85rem; background: rgba(181, 61, 31, 0.08); border: 1px solid var(--rust); padding: 0.7rem 1rem; margin-bottom: 1.2rem; color: var(--ink); } .scenario-box { background: var(--surface); border: 1px solid var(--rule); padding: 1.6rem; } .scenario-setup { border-bottom: 1px dashed var(--rule); padding-bottom: 1rem; margin-bottom: 1rem; } .scenario-question { font-family: var(--font-display); font-size: 1.15rem; letter-spacing: 0.02em; color: var(--ink); margin: 1.2rem 0 0.8rem; } .scenario-questions { margin-bottom: 1.2rem; } .scenario-questions li { margin-bottom: 0.7rem; } .scenario-takeaway { background: var(--ink); color: var(--buff); padding: 1rem 1.2rem; margin: 1rem 0 0; font-size: 0.95rem; } .scenario-takeaway strong { color: var(--sun); } /* ---------- Pilot takeaway ---------- */ .takeaway-box { background: var(--ink); color: var(--buff); padding: 1.6rem; border-top: 3px solid var(--rust); /* was border-left side-stripe */ } .takeaway-list { list-style: none; padding: 0; margin: 0; } .takeaway-list li { padding: 0.5rem 0 0.5rem 1.5rem; position: relative; border-bottom: 1px solid rgba(244, 236, 214, 0.15); } .takeaway-list li:last-child { border-bottom: none; } .takeaway-list li::before { content: "✈"; position: absolute; left: 0; color: var(--sun); } .takeaway-list strong { color: var(--sun); font-weight: 700; } /* ---------- Bottom nav between concepts ---------- */ .concept-nav-bottom { margin-top: 4rem; padding-top: 1.5rem; border-top: 1px solid var(--rule); display: flex; justify-content: space-between; align-items: flex-start; /* wrapped multi-line titles align at the top edge */ flex-wrap: nowrap; /* stay prev-left / next-right; wrap text within each */ gap: 1.25rem; font-family: var(--font-mono); font-size: 0.85rem; } .concept-nav-link { color: var(--ink); border: none; font-weight: 600; flex: 0 1 auto; max-width: 48%; /* long titles wrap inside their half instead of overflowing */ } /* Next link hugs the right edge so its arrow stays at the outer corner. */ .concept-nav-bottom .concept-nav-link:last-child { text-align: right; } .concept-nav-link:hover { color: var(--rust); } .concept-nav-next { color: var(--ink-soft); font-style: italic; letter-spacing: 0.03em; } /* ---------- Learn index — concept list cards ---------- */ .learn-list { display: grid; gap: 0.8rem; } .learn-card { display: grid; grid-template-columns: 60px 1fr 30px; gap: 1.5rem; align-items: center; background: var(--surface); border: 1px solid var(--rule); padding: 1.4rem 1.6rem; text-decoration: none; color: inherit; border-bottom: 1px solid var(--rule); transition: border-color var(--dur-1) var(--ease-out), transform var(--dur-2) var(--ease-out), box-shadow var(--dur-2) var(--ease-out); } .learn-card:hover { border-color: var(--rust); transform: translate(-2px, -2px); box-shadow: 5px 5px 0 var(--buff-dark); } .learn-card:active { transform: translate(0, 0); box-shadow: 1px 1px 0 var(--buff-dark); } .learn-card-pending { opacity: 0.55; cursor: default; pointer-events: none; background: transparent; } .learn-card-num { font-family: var(--font-mono); font-size: 1.4rem; color: var(--rust); font-weight: 500; letter-spacing: 0.05em; } .learn-card h3 { font-family: var(--font-display); font-size: 1.4rem; letter-spacing: 0.02em; margin: 0 0 0.4rem; color: var(--ink); } .learn-card p { margin: 0 0 0.5rem; font-size: 0.95rem; color: var(--ink-soft); } .learn-card-meta { font-family: var(--font-mono); font-size: 0.72rem; text-transform: uppercase; letter-spacing: 0.12em; color: var(--sage); } .learn-card-pending .learn-card-meta { color: var(--ink-soft); } .learn-card-arrow { font-family: var(--font-display); font-size: 1.6rem; color: var(--rust); text-align: right; } @media (max-width: 600px) { .learn-card { grid-template-columns: 40px 1fr; } .learn-card-arrow { display: none; } } /* ---------- Inline diagrams (figure + svg) ---------- */ .diagram { margin: 1.8rem 0; padding: 0; border: 1px solid var(--rule); background: var(--surface); } .diagram svg { display: block; width: 100%; height: auto; max-width: 100%; } .diagram figcaption { font-size: 0.85rem; color: var(--ink-soft); font-style: italic; padding: 0.7rem 1rem; border-top: 1px dashed var(--rule); background: var(--buff); } /* ---------- Standard atmosphere table (used on stability page) ---------- */ .atmo-table { width: 100%; max-width: 420px; margin: 1.2rem 0 1.6rem; border-collapse: collapse; background: var(--surface); border: 1px solid var(--rule); font-family: var(--font-mono); font-size: 0.9rem; } .atmo-table thead th { background: var(--ink); color: var(--buff); text-align: left; padding: 0.55rem 0.9rem; font-family: var(--font-mono); font-size: 0.72rem; text-transform: uppercase; letter-spacing: 0.12em; font-weight: 500; } .atmo-table tbody td { padding: 0.4rem 0.9rem; border-bottom: 1px solid var(--rule); color: var(--ink); } .atmo-table tbody tr:last-child td { border-bottom: none; } .atmo-table tbody tr:nth-child(even) { background: var(--buff); } .atmo-table tbody td:first-child { color: var(--ink-soft); } /* ============================================ METAR Decoder page (pages/decoder.html) ============================================ */ /* ── Input wrapper ── */ .decoder-wrapper { background: var(--ink); padding: 2rem 0 2.5rem; border-bottom: 3px solid var(--rust); } /* ── Tabs ── */ .decoder-tabs { display: flex; gap: 0; margin-bottom: 1.5rem; border-bottom: 1px solid rgba(244,236,214,0.2); } .decoder-tab { background: none; border: none; border-bottom: 2px solid transparent; color: rgba(244,236,214,0.55); font-family: var(--font-mono); font-size: 0.78rem; text-transform: uppercase; letter-spacing: 0.14em; padding: 0.6rem 1.4rem 0.6rem 0; cursor: pointer; margin-bottom: -1px; transition: color 0.15s, border-color 0.15s; } .decoder-tab.active { color: var(--buff); border-bottom-color: var(--rust); } .decoder-tab:hover { color: var(--buff); } /* ── Panels ── */ .decoder-hint { color: rgba(244,236,214,0.65); font-size: 0.9rem; margin: 0 0 1rem; } .decoder-input-row { display: flex; gap: 0.7rem; align-items: flex-start; flex-wrap: wrap; } .decoder-input-row--paste { flex-direction: column; } .decoder-text-input { font-family: var(--font-mono); font-size: 1.1rem; background: rgba(244,236,214,0.08); border: 1px solid rgba(244,236,214,0.25); color: var(--buff); padding: 0.6rem 0.9rem; letter-spacing: 0.08em; width: 120px; outline: none; transition: border-color 0.15s; } .decoder-text-input:focus { border-color: var(--sun); } .icao-input { text-transform: uppercase; } .decoder-textarea { font-family: var(--font-mono); font-size: 0.88rem; background: rgba(244,236,214,0.08); border: 1px solid rgba(244,236,214,0.25); color: var(--buff); padding: 0.8rem 1rem; width: 100%; resize: vertical; outline: none; line-height: 1.6; transition: border-color 0.15s; } .decoder-textarea:focus { border-color: var(--sun); } .decoder-btn { background: var(--rust); color: var(--buff); font-family: var(--font-display); font-size: 0.95rem; letter-spacing: 0.06em; border: none; padding: 0.65rem 1.4rem; cursor: pointer; transition: background var(--dur-1) var(--ease-out), transform var(--dur-2) var(--ease-out); white-space: nowrap; } .decoder-btn:hover { background: #933018; transform: translate(-1px,-1px); } .decoder-btn:active { transform: translate(0,0); } .decoder-btn:disabled { opacity: 0.5; cursor: not-allowed; transform: none; } .decoder-btn--secondary { background: transparent; border: 1px solid rgba(244,236,214,0.3); color: rgba(244,236,214,0.7); } .decoder-btn--secondary:hover { background: rgba(244,236,214,0.1); color: var(--buff); } .decoder-examples-hint { font-family: var(--font-mono); font-size: 0.75rem; color: rgba(244,236,214,0.62); /* was 0.4 (~3.3:1); 0.62 clears AA */ margin: 0.7rem 0 0; letter-spacing: 0.06em; } .decoder-examples-hint code { color: rgba(244,236,214,0.65); background: rgba(244,236,214,0.07); padding: 1px 5px; } .decoder-error { color: var(--sun); font-family: var(--font-mono); font-size: 0.85rem; margin: 0.8rem 0 0; letter-spacing: 0.04em; } .decoder-file-notice { background: rgba(217,165,33,0.12); border: 1px solid rgba(217,165,33,0.4); color: rgba(244,236,214,0.75); font-size: 0.88rem; padding: 0.75rem 1rem; margin: 0.8rem 0 0; line-height: 1.5; } .decoder-file-notice strong { color: var(--sun); } .decoder-file-notice code { color: var(--sun); background: rgba(217,165,33,0.15); padding: 1px 5px; font-family: var(--font-mono); font-size: 0.85em; } /* ── Output section ── */ #decoder-output { padding: 2.5rem 0 4rem; } .decoder-section-label { font-family: var(--font-mono); font-size: 0.72rem; text-transform: uppercase; letter-spacing: 0.18em; color: var(--rust); margin: 0 0 0.7rem; } /* ── Flight category badge ── */ .decoder-category-row { display: flex; align-items: center; gap: 1.2rem; flex-wrap: wrap; margin-bottom: 2rem; padding: 1.2rem 1.5rem; background: var(--surface); border: 1px solid var(--rule); border-top: 3px solid var(--sage); /* was border-left side-stripe */ } .cat-badge { font-family: var(--font-display); font-size: 1.6rem; letter-spacing: 0.08em; padding: 0.25rem 0.9rem; color: #fff; border-radius: 2px; } .cat-vfr { background: #3a7d44; } .cat-mvfr { background: #1a5ba6; } .cat-ifr { background: #b53d1f; } .cat-lifr { background: #7b2d8b; } .cat-desc { font-family: var(--font-mono); font-size: 0.85rem; color: var(--ink-soft); letter-spacing: 0.04em; flex: 1; } .cat-edu-note { font-family: var(--font-mono); font-size: 0.7rem; color: var(--sage); /* was --rule (~2.3:1, failed AA); sage clears 4.5:1 */ text-transform: uppercase; letter-spacing: 0.12em; margin-left: auto; } /* ── "Why this category" ceiling/visibility scale ── */ .cat-scale { margin: -1rem 0 2rem; padding: 1.1rem 1.5rem 1rem; background: var(--surface); border: 1px solid var(--rule); } .cat-scale:empty { display: none; } .cat-scale-row { display: grid; grid-template-columns: 84px 1fr 116px; gap: 0.9rem; align-items: center; margin-bottom: 0.55rem; } .cat-scale-label { font-family: var(--font-mono); font-size: 0.72rem; text-transform: uppercase; letter-spacing: 0.1em; color: var(--sage); } .cat-scale-bar { display: grid; grid-template-columns: repeat(4, 1fr); gap: 3px; } .cat-seg { display: flex; flex-direction: column; align-items: center; padding: 0.28rem 0.2rem; border-radius: 2px; background: var(--buff-dark); border: 1px solid var(--rule); } .cat-seg b { font-family: var(--font-mono); font-size: 0.7rem; letter-spacing: 0.05em; color: var(--ink-soft); } .cat-seg i { font-family: var(--font-mono); font-style: normal; font-size: 0.6rem; color: var(--ink-soft); opacity: 0.75; margin-top: 1px; } .cat-seg.active { border-color: transparent; } .cat-seg.active b, .cat-seg.active i { color: #fff; opacity: 1; } .cat-seg.seg-vfr.active { background: #3a7d44; } .cat-seg.seg-mvfr.active { background: #1a5ba6; } .cat-seg.seg-ifr.active { background: #b53d1f; } .cat-seg.seg-lifr.active { background: #7b2d8b; } .cat-scale-val { font-family: var(--font-mono); font-size: 0.82rem; color: var(--ink); text-align: right; } .cat-scale-note { font-family: var(--font-mono); font-size: 0.75rem; color: var(--ink-soft); margin: 0.55rem 0 0; line-height: 1.5; } .cat-scale-note b { color: var(--ink); } @media (max-width: 560px) { .cat-scale-row { grid-template-columns: 1fr; gap: 0.3rem; } .cat-scale-val { text-align: left; } } /* Cross-tool link in the wind card */ .vis-link { font-family: var(--font-mono); font-size: 0.78rem; text-align: center; margin: 0.6rem 0 0; } .vis-link a { color: var(--sky); text-decoration: none; border-bottom: 1px solid transparent; } .vis-link a:hover { border-bottom-color: var(--sky); } /* ── Annotated raw METAR ── */ .decoder-raw-wrap { margin-bottom: 2rem; padding: 1rem 1.2rem; background: var(--ink); border-radius: 2px; } .decoder-raw-label { font-family: var(--font-mono); font-size: 0.72rem; color: rgba(244,236,214,0.62); /* was 0.4; lifted for AA on navy */ text-transform: uppercase; letter-spacing: 0.18em; margin: 0 0 0.6rem; } .decoder-raw-metar { font-family: var(--font-mono); font-size: 0.95rem; color: var(--buff); line-height: 2; overflow-wrap: anywhere; /* wrap at spaces; only break a token if it alone overflows */ } /* Token color classes */ .tok { padding: 2px 5px; border-radius: 2px; cursor: help; transition: opacity 0.1s; } .tok:hover { opacity: 0.8; } /* Coordinated token colors — one hue per METAR section, matching the homepage sample. Metadata (type, station, time, modifier, altimeter, remarks) is a quiet slate; each condition token carries a distinct hue, so no single color dominates. Cream text reads on the navy raw-METAR panel; the field-breakdown copies (.field-token) follow the theme instead. */ .tok-type { background: rgba(120,134,150,0.24); color: var(--buff); } /* metadata */ .tok-station { background: rgba(120,134,150,0.34); color: var(--buff); font-weight: 600; } .tok-time { background: rgba(120,134,150,0.24); color: var(--buff); } .tok-modifier { background: rgba(120,134,150,0.24); color: var(--buff); } .tok-wind { background: rgba(74,123,166,0.52); color: var(--buff); } /* wind → sky blue */ .tok-wind-var { background: rgba(74,123,166,0.32); color: var(--buff); } .tok-visibility { background: rgba(93,111,60,0.48); color: var(--buff); } /* visibility → sage green */ .tok-rvr { background: rgba(93,111,60,0.28); color: var(--buff); } .tok-weather { background: rgba(181,61,31,0.52); color: var(--buff); } /* weather → aviation red */ .tok-sky { background: rgba(100,75,140,0.5); color: var(--buff); } /* sky/ceiling → violet */ .tok-temp { background: rgba(217,165,33,0.45); color: var(--buff); } /* temperature → sun gold */ .tok-altimeter { background: rgba(120,134,150,0.26); color: var(--buff); } /* metadata */ .tok-remarks-header { background: rgba(120,134,150,0.30); color: var(--buff); font-style: italic; } .tok-remarks { background: rgba(120,134,150,0.18); color: var(--buff); } /* Unrecognized group — flagged but skipped so the rest of the report still decodes. Dashed red outline marks it as "couldn't parse this one". */ .tok-unknown { background: rgba(181,61,31,0.16); color: var(--buff); border: 1px dashed rgba(181,61,31,0.7); } /* ── Main decoded content layout ── */ .decoder-main { display: grid; grid-template-columns: 1fr 260px; gap: 3rem; align-items: start; } @media (max-width: 820px) { .decoder-main { grid-template-columns: 1fr; gap: 2rem; } } /* ── Field breakdown table ── */ .decoder-fields-wrap { background: var(--surface); border: 1px solid var(--rule); padding: 1.2rem; } .decoder-fields { display: flex; flex-direction: column; gap: 0; } .field-row { display: grid; grid-template-columns: 140px 130px 1fr; gap: 0.5rem 1rem; align-items: baseline; padding: 0.45rem 0; border-bottom: 1px solid var(--rule); font-size: 0.9rem; } .field-row:last-child { border-bottom: none; } @media (max-width: 700px) { .field-row { grid-template-columns: 1fr; gap: 0.2rem; padding: 0.6rem 0; } } .field-token { font-family: var(--font-mono); font-size: 0.82rem; color: var(--ink); /* field copies sit on the light panel: follow the theme, not cream */ padding: 2px 6px; border-radius: 2px; display: inline-block; max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .field-label { font-family: var(--font-mono); font-size: 0.75rem; text-transform: uppercase; letter-spacing: 0.1em; color: var(--sage); } .field-explanation { color: var(--ink-soft); font-size: 0.88rem; } /* ── Visuals panel ── */ .decoder-visuals { display: flex; flex-direction: column; gap: 1.5rem; } .vis-card { background: var(--surface); border: 1px solid var(--rule); padding: 1rem; } .vis-raw { font-family: var(--font-mono); font-size: 0.75rem; color: var(--sage); text-align: center; margin: 0.4rem 0 0; letter-spacing: 0.08em; } .vis-placeholder { font-family: var(--font-mono); font-size: 0.8rem; color: var(--ink-soft); text-align: center; padding: 1.5rem 0; } /* ── Remarks ── */ .remarks-section { margin-top: 2rem; } .decoder-remarks-raw { font-family: var(--font-mono); font-size: 0.85rem; color: var(--ink-soft); background: var(--surface); border: 1px solid var(--rule); padding: 0.8rem 1rem; overflow-wrap: anywhere; margin: 0; } /* ============================================ TAF Decoder additions ============================================ */ /* ── TAF sub-tabs: match .decoder-tab styling ── */ .taf-subtab { background: none; border: none; border-bottom: 2px solid transparent; color: rgba(244,236,214,0.55); font-family: var(--font-mono); font-size: 0.78rem; text-transform: uppercase; letter-spacing: 0.14em; padding: 0.6rem 1.4rem 0.6rem 0; cursor: pointer; margin-bottom: -1px; transition: color 0.15s, border-color 0.15s; } .taf-subtab.active { color: var(--buff); border-bottom-color: var(--rust); } .taf-subtab:hover { color: var(--buff); } /* ── Product selector (METAR | TAF) ── */ .product-selector { display: flex; align-items: center; gap: 0; margin-bottom: 1.8rem; border-bottom: 1px solid rgba(244,236,214,0.15); } .product-tab { background: none; border: none; border-bottom: 3px solid transparent; color: rgba(244,236,214,0.45); font-family: var(--font-display); font-size: 1.15rem; letter-spacing: 0.06em; padding: 0.4rem 1.6rem 0.5rem 0; cursor: pointer; margin-bottom: -1px; transition: color 0.15s, border-color 0.15s; } .product-tab.active { color: var(--buff); border-bottom-color: var(--rust); } .product-tab:hover { color: var(--buff); } .product-selector-hint { font-family: var(--font-mono); font-size: 0.72rem; color: rgba(244,236,214,0.6); /* was 0.3 (~2.6:1); 0.6 clears AA */ text-transform: uppercase; letter-spacing: 0.14em; margin-left: auto; } /* ── TAF output section ── */ #taf-output { padding: 2.5rem 0 4rem; } /* ── TAF header ── */ .taf-header-row { display: flex; align-items: center; gap: 1.2rem; flex-wrap: wrap; margin-bottom: 2rem; padding: 1.2rem 1.5rem; background: var(--surface); border: 1px solid var(--rule); border-top: 3px solid var(--sky); /* was border-left side-stripe */ } .taf-header-left { display: flex; align-items: center; gap: 0.8rem; } .taf-header-right { display: flex; flex-direction: column; gap: 0.2rem; } .taf-station-id { font-family: var(--font-display); font-size: 2rem; color: var(--ink); letter-spacing: 0.05em; } .taf-type-badge { font-family: var(--font-mono); font-size: 0.72rem; text-transform: uppercase; letter-spacing: 0.18em; color: var(--buff); background: var(--sky); padding: 2px 8px; border-radius: 2px; } .taf-header-meta { font-family: var(--font-mono); font-size: 0.82rem; color: var(--ink-soft); letter-spacing: 0.04em; } .taf-issued { color: var(--sage); font-size: 0.75rem; } /* ── TAF timeline ── */ .taf-timeline { display: flex; flex-direction: column; gap: 0.5rem; margin-bottom: 1rem; } .taf-group { background: var(--surface); border: 1px solid var(--rule); border-top: 3px solid var(--rule); /* category color via modifier; was a side-stripe */ padding: 0.9rem 1.1rem; } .taf-group--indent { margin-left: 2rem; border-top-style: dashed; /* dashed accent = temporary / probabilistic */ background: var(--buff-dark); } /* Top-accent color by flight category */ .taf-group--vfr { border-top-color: #3a7d44; } .taf-group--mvfr { border-top-color: #1a5ba6; } .taf-group--ifr { border-top-color: #b53d1f; } .taf-group--lifr { border-top-color: #7b2d8b; } /* ── TAF overview timeline (visual band across the valid period) ── */ .taf-overview { margin: 0 0 1.5rem; } .taf-overview:empty { display: none; } .tl-band { position: relative; height: 30px; background: var(--buff-dark); border: 1px solid var(--rule); border-radius: 3px; overflow: hidden; } .tl-seg { position: absolute; top: 0; bottom: 0; display: flex; align-items: center; justify-content: center; box-shadow: inset -1px 0 0 rgba(255,255,255,0.25); } .tl-seg span { font-family: var(--font-mono); font-size: 0.66rem; color: #fff; letter-spacing: 0.04em; white-space: nowrap; overflow: hidden; } .tl-ovrow { position: relative; height: 18px; margin-top: 3px; } .tl-ov { position: absolute; top: 0; bottom: 0; display: flex; align-items: center; padding: 0 6px; border-radius: 2px; border: 1px dashed rgba(255,255,255,0.65); color: #fff; } .tl-ov span { font-family: var(--font-mono); font-size: 0.62rem; letter-spacing: 0.03em; white-space: nowrap; overflow: hidden; } .tl-ov-vfr { background: #3a7d44; } .tl-ov-mvfr { background: #1a5ba6; } .tl-ov-ifr { background: #b53d1f; } .tl-ov-lifr { background: #7b2d8b; } .tl-axis { position: relative; height: 15px; margin-top: 5px; } .tl-tick { position: absolute; top: 0; border-left: 1px solid var(--rule); height: 5px; } .tl-tick span { font-family: var(--font-mono); font-size: 0.62rem; color: var(--ink-soft); position: absolute; top: 5px; left: 0; transform: translateX(-50%); white-space: nowrap; } .taf-group-header { display: flex; align-items: center; gap: 0.8rem; flex-wrap: wrap; margin-bottom: 0.55rem; } .taf-type-label { font-family: var(--font-mono); font-size: 0.7rem; text-transform: uppercase; letter-spacing: 0.14em; padding: 2px 7px; border-radius: 2px; font-weight: 600; } /* Type label colors */ .taf-type-base { background: rgba(12,37,65,0.12); color: var(--ink); } .taf-type-fm { background: rgba(74,123,166,0.18); color: #1a5ba6; } .taf-type-tempo { background: rgba(181,61,31,0.12); color: var(--rust); } .taf-type-becmg { background: rgba(93,111,60,0.15); color: var(--sage); } .taf-type-prob30 { background: rgba(217,165,33,0.15); color: #8a6200; } .taf-type-prob40 { background: rgba(217,165,33,0.2); color: #8a6200; } .taf-type-inter { background: rgba(74,123,166,0.12); color: #1a5ba6; } .taf-group-header .cat-badge { font-size: 0.82rem; padding: 1px 7px; } .taf-time-range { font-family: var(--font-mono); font-size: 0.78rem; color: var(--ink-soft); letter-spacing: 0.04em; } /* ── Condition chips ── */ .taf-group-chips { display: flex; gap: 0.4rem; flex-wrap: wrap; } .taf-chip { font-family: var(--font-mono); font-size: 0.78rem; padding: 2px 8px; border-radius: 2px; letter-spacing: 0.04em; } .taf-chip-wind { background: rgba(74,123,166,0.18); color: var(--ink); } .taf-chip-vis { background: rgba(93,111,60,0.18); color: var(--ink); } .taf-chip-wx { background: rgba(181,61,31,0.18); color: var(--ink); } .taf-chip-sky { background: rgba(100,75,140,0.16); color: var(--ink); } /* sky → violet, matching the token scheme */ .taf-chip-ws { background: rgba(181,61,31,0.25); color: var(--ink); } .taf-chip-empty { font-family: var(--font-mono); font-size: 0.75rem; color: var(--ink-soft); font-style: italic; } /* ── Legend ── */ .taf-legend { margin-top: 0.5rem; } .taf-legend-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 0.6rem 2rem; } @media (max-width: 700px) { .taf-legend-grid { grid-template-columns: 1fr; } } .taf-legend-grid > div { display: flex; align-items: baseline; gap: 0.6rem; font-size: 0.88rem; color: var(--ink-soft); padding: 0.4rem 0; border-bottom: 1px dotted var(--rule); } .taf-legend-desc { flex: 1; } /* ============================================ Weather Product Ladder ============================================ */ .ladder-product-row { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1rem; margin: 1.5rem 0; } @media (max-width: 900px) { .ladder-product-row { grid-template-columns: 1fr; } } .ladder-product { background: var(--surface); border: 1px solid var(--rule); padding: 1rem 1rem 0.8rem; } .ladder-product-tag { display: inline-block; font-family: var(--font-mono); font-size: 0.72rem; text-transform: uppercase; letter-spacing: 0.1em; color: var(--buff); padding: 3px 8px; border-radius: 2px; margin-bottom: 0.6rem; } .ladder-site-link { font-family: var(--font-mono); font-size: 0.82rem; color: var(--sage); margin: 1.2rem 0 0; letter-spacing: 0.04em; } .ladder-site-link a { color: var(--sky); } /* ============================================ PIREPs — annotated example and field display ============================================ */ .pirep-example { background: var(--ink); padding: 1.2rem 1.4rem; margin: 1.5rem 0 0; border-radius: 2px; } .pirep-raw { font-family: var(--font-mono); font-size: 0.88rem; line-height: 2; overflow-wrap: anywhere; } /* PIREP token color classes */ .ptok { padding: 2px 4px; border-radius: 2px; white-space: nowrap; } .ptok-type { background: rgba(185,168,122,0.42); color: var(--buff); } .ptok-loc { background: rgba(217,165,33,0.35); color: var(--buff); } .ptok-time { background: rgba(93,111,60,0.4); color: var(--buff); } .ptok-alt { background: rgba(74,123,166,0.5); color: var(--buff); } .ptok-acft { background: rgba(45,110,100,0.5); color: var(--buff); } .ptok-sky { background: rgba(12,37,65,0.55); color: var(--buff); } .ptok-wx { background: rgba(181,61,31,0.45); color: var(--buff); } .ptok-temp { background: rgba(217,165,33,0.4); color: var(--buff); } .ptok-wind { background: rgba(74,123,166,0.4); color: var(--buff); } .ptok-tb { background: rgba(181,61,31,0.35); color: var(--buff); } .ptok-ic { background: rgba(12,37,65,0.4); color: var(--buff); } .ptok-rm { background: rgba(100,75,140,0.35); color: var(--buff); } /* Field breakdown */ .pirep-fields { border: 1px solid var(--rule); background: var(--surface); margin-bottom: 1.5rem; } .pirep-field-row { display: grid; grid-template-columns: 120px 120px 1fr; gap: 0.5rem 1rem; align-items: baseline; padding: 0.5rem 1rem; border-bottom: 1px solid var(--rule); font-size: 0.88rem; } .pirep-field-row--last { border-bottom: none; } @media (max-width: 700px) { .pirep-field-row { grid-template-columns: 1fr; gap: 0.2rem; padding: 0.6rem 1rem; } } .pirep-field-code { font-family: var(--font-mono); font-size: 0.8rem; padding: 2px 6px; border-radius: 2px; display: inline-block; } .pirep-field-label { font-family: var(--font-mono); font-size: 0.72rem; text-transform: uppercase; letter-spacing: 0.1em; color: var(--sage); } .pirep-field-desc { color: var(--ink-soft); } /* Pale field-code chips (UA / OV / TA) carry light translucent fills; on the light fields surface their cream text washes out. Flip to --ink (dark in light mode, light in dark mode) so they stay legible in both themes. The navy example panel above keeps the cream tokens and is unaffected. */ .pirep-field-code.ptok-type, .pirep-field-code.ptok-loc, .pirep-field-code.ptok-temp { color: var(--ink); } /* ============================================ Polish & accessibility Cross-cutting refinements: keyboard focus, anchor offset under the sticky header, text selection, and reduced-motion support. ============================================ */ /* In-page anchor jumps (TOC links, #section) clear the sticky header */ html { scroll-padding-top: 80px; } /* Branded, visible keyboard-focus ring. Mouse clicks stay clean; keyboard users get a clear indicator — including on inputs that otherwise suppress the default outline. */ a:focus-visible, button:focus-visible, summary:focus-visible, input:focus-visible, textarea:focus-visible, select:focus-visible, [tabindex]:focus-visible { outline: 2px solid var(--rust); outline-offset: 2px; border-radius: 1px; } /* On the dark navy decoder bar, use the warmer accent so the ring reads */ .decoder-wrapper input:focus-visible, .decoder-wrapper textarea:focus-visible, .decoder-wrapper button:focus-visible { outline-color: var(--sun); } /* ---------- About page ---------- A calm, single-column credibility page. One Anton headline in the hero; the body is quiet Manrope prose with mono section-labels as subheads. */ .about-page { padding: 3.5rem 0 5rem; } /* Wider than the reading measure so the intro can host the photo column; prose blocks inside re-clamp themselves to ~62ch for comfortable line length. */ .about-content { max-width: 920px; } .about-prose { max-width: 62ch; } /* About-me intro: text beside the cockpit photo on desktop, stacked on mobile. */ .about-intro { display: grid; grid-template-columns: minmax(0, 1fr) clamp(230px, 33%, 330px); gap: clamp(1.5rem, 4vw, 2.75rem); align-items: start; margin-bottom: 0.5rem; } .about-intro-text { max-width: 62ch; } .about-photo { margin: 0; } .about-photo img { display: block; width: 100%; height: auto; border-radius: 8px; border: 1px solid var(--rule); /* same offset-shadow motif used on cards/panels site-wide */ box-shadow: 4px 4px 0 var(--buff-dark); } @media (max-width: 760px) { .about-intro { grid-template-columns: 1fr; gap: 1.4rem; } .about-photo { order: -1; } /* photo stacks above the text on mobile */ .about-photo img { max-width: 460px; } /* keep it from dominating the column */ } /* Section subheads keep the mono .section-label DNA but are stepped up from the 0.78rem eyebrow size so they read as headings, not labels. */ .about-content .section-label { font-size: 0.98rem; font-weight: 500; letter-spacing: 0.14em; margin: 3.25rem 0 1rem; } .about-intro-text > .section-label:first-child { margin-top: 0; } /* Body copy sits at full --ink (not --ink-soft) so it stays crisp on both the cream and deep-navy fields — this is a reading page, contrast over softness. */ .about-content p { font-size: 1.08rem; line-height: 1.65; margin: 0 0 1.25rem; color: var(--ink); } .about-content a { font-weight: 600; } .about-signoff { margin-top: 2.75rem; } .about-signoff p { margin: 0; } .about-name { font-family: var(--font-display); font-size: 1.5rem; letter-spacing: 0.01em; color: var(--ink); margin-top: 0.35rem !important; } /* On-brand text selection */ ::selection { background: var(--ink); color: var(--buff); } /* Respect users who prefer less motion */ @media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } *, *::before, *::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; scroll-behavior: auto !important; } .hero-cta:hover, .hero-cta-secondary:hover, .decoder-btn:hover, .learn-card:hover { transform: none; } }