/* =============================================================================
vLHG — Virtual Lufthansa Group — shared design system
Single source of truth. Helvetica clone (TeX Gyre Heros) only.
Two themes supported: default DARK (premium) + [data-theme="light"] (heritage,
navy ink on white, like lufthansa.com). Per-airline accent via --accent.
Paths are RELATIVE to this file (assets/base.css) so file:// over SMB works.
========================================================================== */
/* ----------------------------------------------------------------------------
1. FONTS — Helvetica clone only. Never a system/Google webfont.
-------------------------------------------------------------------------- */
@font-face {
font-family: "Heros";
src: url("fonts/texgyreheros-regular.woff2") format("woff2");
font-weight: 400; font-style: normal; font-display: swap;
}
@font-face {
font-family: "Heros";
src: url("fonts/texgyreheros-bold.woff2") format("woff2");
font-weight: 700; font-style: normal; font-display: swap;
}
@font-face {
font-family: "HerosCn";
src: url("fonts/texgyreheroscn-regular.woff2") format("woff2");
font-weight: 400; font-style: normal; font-display: swap;
}
@font-face {
font-family: "HerosCn";
src: url("fonts/texgyreheroscn-bold.woff2") format("woff2");
font-weight: 700; font-style: normal; font-display: swap;
}
/* ----------------------------------------------------------------------------
2. TOKENS
-------------------------------------------------------------------------- */
:root {
/* Lufthansa Group core */
--navy: #05164D; /* primary */
--deep-navy: #0a0f1f; /* dark bg */
--gold: #FFAD00; /* group accent */
--ink: #e8eefc; /* text on dark */
--muted: #8295bf; /* secondary text */
/* Per-airline accents (the ONLY thing that changes per airline) */
--al-DLH: #05164D; --al-DLH-2: #FFAD00;
--al-AUA: #E71C23;
--al-SWR: #E60005;
--al-EWG: #8C144C; --al-EWG-2: #B3145B;
--al-GECBOX: #FFAD00;
--al-FDX: #4D148C; --al-FDX-2: #FF6600;
/* Condor signature stripes */
--condor-sunshine: #F2A900;
--condor-passion: #E2001A;
--condor-sea: #0098D8;
--condor-island: #3DB54A;
--condor-beach: #E4D5B7;
/* Live accent — pages/JS override this per airline */
--accent: var(--gold);
--accent-ink: #05164D; /* readable text colour to sit ON the accent */
/* Surfaces (DARK theme defaults) */
--bg: var(--deep-navy);
--bg-2: #0d1730; /* raised panels */
--surface: #101c3a; /* cards */
--surface-2: #16244a; /* card hover / inset */
--slat: #0b1226; /* split-flap slat */
--slat-edge: #1d2c52; /* flap seam */
--line: rgba(130,149,191,0.18); /* hairline separators */
--line-strong: rgba(130,149,191,0.32);
--fg: var(--ink);
--fg-muted: var(--muted);
--fg-dim: #5c6f9c;
/* Status / score colours (board + tables). Brand-derived, not rainbow. */
--ok: #3DB54A; /* good landing / on-block (Condor island) */
--warn: #FFAD00; /* watch (gold) */
--bad: #E2001A; /* hard landing / diverted (Condor passion) */
--info: #0098D8; /* enroute (Condor sea) */
/* Spacing — 8px grid */
--s1: 8px; --s2: 16px; --s3: 24px; --s4: 32px;
--s5: 48px; --s6: 64px; --s7: 96px; --s8: 128px;
/* Radii — one system */
--r-sm: 4px; --r: 8px; --r-lg: 16px;
/* Shadow — one system */
--shadow-sm: 0 1px 2px rgba(0,0,0,0.30);
--shadow: 0 6px 24px rgba(0,0,0,0.38);
--shadow-lg: 0 20px 60px rgba(0,0,0,0.50);
/* Type scale (1.250 major third, 16px base) */
--t-eyebrow: 0.75rem; /* 12 */
--t-sm: 0.8125rem; /* 13 */
--t-body: 1rem; /* 16 */
--t-lg: 1.25rem; /* 20 */
--t-h3: 1.5625rem; /* 25 */
--t-h2: 2.4414rem; /* 39 */
--t-h1: 3.8147rem; /* 61 */
--t-display: 5rem; /* 80, board/hero numbers */
/* Motion */
--ease: cubic-bezier(.2,.7,.2,1);
--fast: 150ms;
--med: 220ms;
--nav-h: 64px;
--maxw: 1200px;
}
/* LIGHT theme — heritage navy-on-white (real lufthansa.com direction) */
[data-theme="light"] {
--bg: #ffffff;
--bg-2: #f4f6fb;
--surface: #ffffff;
--surface-2: #eef1f8;
--slat: #0b1226; /* board stays dark even in light theme */
--slat-edge: #1d2c52;
--line: rgba(5,22,77,0.12);
--line-strong: rgba(5,22,77,0.22);
--fg: var(--navy);
--fg-muted: #4a5878;
--fg-dim: #8a96b3;
--accent-ink: #ffffff; /* on navy/red accents text goes white in light theme */
--shadow-sm: 0 1px 2px rgba(5,22,77,0.08);
--shadow: 0 8px 28px rgba(5,22,77,0.10);
--shadow-lg: 0 24px 64px rgba(5,22,77,0.14);
}
/* ----------------------------------------------------------------------------
3. RESET + BASE
-------------------------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }
* { margin: 0; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body {
font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
font-size: var(--t-body);
line-height: 1.6;
color: var(--fg);
background: var(--bg);
-webkit-font-smoothing: antialiased;
text-rendering: optimizeLegibility;
font-variant-numeric: tabular-nums;
}
img, svg { display: block; max-width: 100%; }
svg { stroke-linecap: round; stroke-linejoin: round; }
a { color: inherit; text-decoration: none; }
button, input, select, textarea { font: inherit; color: inherit; }
ul { list-style: none; padding: 0; }
:focus-visible {
outline: 2px solid var(--accent);
outline-offset: 2px;
border-radius: var(--r-sm);
}
::selection { background: var(--accent); color: var(--accent-ink); }
/* ----------------------------------------------------------------------------
4. TYPOGRAPHY HELPERS + EDITORIAL HIERARCHY
-------------------------------------------------------------------------- */
h1, h2, h3, h4 { font-weight: 700; line-height: 1.15; letter-spacing: 0; }
h1 { font-size: var(--t-h1); line-height: 1.1; letter-spacing: -0.01em; }
h2 { font-size: var(--t-h2); }
h3 { font-size: var(--t-h3); }
p { color: var(--fg); line-height: 1.6; }
.lede { font-size: var(--t-lg); line-height: 1.6; color: var(--fg-muted); max-width: 60ch; }
.muted { color: var(--fg-muted); }
.dim { color: var(--fg-dim); }
.cn { font-family: "HerosCn", "Helvetica Neue", Helvetica, Arial, sans-serif; }
.tnum { font-variant-numeric: tabular-nums; }
.display {
font-family: "HerosCn", "Helvetica Neue", Helvetica, Arial, sans-serif;
font-weight: 700; font-size: var(--t-display);
line-height: 1.0; letter-spacing: -0.01em;
}
/* Eyebrow — condensed uppercase label (editorial signpost) */
.eyebrow {
font-family: "HerosCn", "Helvetica Neue", Helvetica, Arial, sans-serif;
font-weight: 700;
font-size: var(--t-eyebrow);
text-transform: uppercase;
letter-spacing: 0.18em;
color: var(--accent);
display: inline-flex; align-items: center; gap: var(--s1);
}
.eyebrow.muted { color: var(--fg-muted); }
/* ----------------------------------------------------------------------------
5. LAYOUT
-------------------------------------------------------------------------- */
.wrap { width: 100%; max-width: var(--maxw); margin-inline: auto; padding-inline: var(--s3); }
.section { padding-block: var(--s7); }
.section--tight { padding-block: var(--s5); }
.stack > * + * { margin-top: var(--s3); }
.row { display: flex; align-items: center; gap: var(--s2); }
.row--between { justify-content: space-between; }
.grid { display: grid; gap: var(--s3); }
/* ----------------------------------------------------------------------------
6. NAV (sticky top — PUBLIC + MEMBER variants)
-------------------------------------------------------------------------- */
.nav {
position: sticky; top: 0; z-index: 50;
height: var(--nav-h);
display: flex; align-items: center;
background: color-mix(in srgb, var(--bg) 86%, transparent);
backdrop-filter: saturate(140%) blur(10px);
border-bottom: 1px solid var(--line);
}
.nav__inner {
width: 100%; max-width: var(--maxw); margin-inline: auto;
padding-inline: var(--s3);
display: flex; align-items: center; gap: var(--s4);
}
.nav__brand { display: flex; align-items: center; gap: var(--s2); flex-shrink: 0; }
.nav__brand img { height: 30px; width: auto; }
.nav__brand .crane-white { filter: brightness(0) invert(1); }
[data-theme="light"] .nav__brand .crane-white { filter: none; }
.nav__brand-name {
font-family: "HerosCn", sans-serif; font-weight: 700;
font-size: var(--t-lg); letter-spacing: 0.02em; line-height: 1;
}
.nav__brand-name small { display: block; font-size: 10px; letter-spacing: 0.22em;
text-transform: uppercase; color: var(--fg-muted); font-weight: 400; }
.nav__links { display: flex; align-items: center; gap: var(--s3); margin-inline: auto; }
.nav__links a {
font-size: var(--t-sm); color: var(--fg-muted);
padding: 6px 2px; position: relative; transition: color var(--fast) var(--ease);
}
.nav__links a:hover { color: var(--fg); }
.nav__links a[aria-current],
.nav__links a.is-active { color: var(--fg); }
.nav__links a[aria-current]::after,
.nav__links a.is-active::after {
content: ""; position: absolute; left: 0; right: 0; bottom: -21px;
height: 2px; background: var(--accent);
}
.nav__end { display: flex; align-items: center; gap: var(--s2); flex-shrink: 0; }
/* Member nav extras */
.nav__avatar {
width: 34px; height: 34px; border-radius: 50%;
background: var(--surface-2); border: 1px solid var(--line-strong);
display: grid; place-items: center; overflow: hidden;
font-family: "HerosCn"; font-weight: 700; font-size: 13px; color: var(--fg);
}
.nav__avatar img { width: 100%; height: 100%; object-fit: cover; }
.nav__gear {
width: 38px; height: 38px; border-radius: var(--r);
display: grid; place-items: center; color: var(--fg-muted);
border: 1px solid var(--line); background: transparent;
cursor: pointer; transition: all var(--fast) var(--ease);
}
.nav__gear:hover { color: var(--fg); border-color: var(--line-strong); background: var(--surface); }
.nav__burger { display: none; }
/* ----------------------------------------------------------------------------
7. BUTTONS
-------------------------------------------------------------------------- */
.btn {
--btn-bg: var(--surface);
display: inline-flex; align-items: center; justify-content: center; gap: var(--s1);
font-family: "Helvetica Neue", Helvetica, Arial, sans-serif; font-weight: 700; font-size: var(--t-sm);
line-height: 1; padding: 11px var(--s3); border-radius: var(--r);
border: 1px solid var(--line-strong); background: var(--btn-bg); color: var(--fg);
cursor: pointer; white-space: nowrap;
transition: transform var(--fast) var(--ease), background var(--fast) var(--ease),
border-color var(--fast) var(--ease), box-shadow var(--fast) var(--ease);
}
.btn:hover { border-color: var(--accent); }
.btn:active { transform: translateY(1px); }
.btn svg { width: 17px; height: 17px; }
.btn.accent {
background: var(--accent); color: var(--accent-ink);
border-color: var(--accent); box-shadow: var(--shadow-sm);
}
.btn.accent:hover { filter: brightness(1.06); box-shadow: var(--shadow); border-color: var(--accent); }
.btn.ghost { background: transparent; border-color: var(--line-strong); }
.btn.ghost:hover { background: var(--surface); border-color: var(--accent); }
.btn.sm { padding: 7px 14px; font-size: var(--t-eyebrow); }
/* ----------------------------------------------------------------------------
8. CARDS / PANELS
-------------------------------------------------------------------------- */
.card {
background: var(--surface);
border: 1px solid var(--line);
border-radius: var(--r-lg);
padding: var(--s4);
box-shadow: var(--shadow-sm);
transition: border-color var(--med) var(--ease), box-shadow var(--med) var(--ease),
transform var(--med) var(--ease);
}
.card.is-interactive { cursor: pointer; }
.card.is-interactive:hover { border-color: var(--line-strong); box-shadow: var(--shadow); transform: translateY(-2px); }
.card__head { display: flex; align-items: baseline; justify-content: space-between; margin-bottom: var(--s2); }
.panel { background: var(--bg-2); border: 1px solid var(--line); border-radius: var(--r-lg); }
/* ----------------------------------------------------------------------------
9. STATS — big HerosCn tabular figures
-------------------------------------------------------------------------- */
.stat-grid {
display: grid; gap: var(--s1);
grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
}
.stat {
padding: var(--s3) var(--s3) var(--s3) 0;
border-left: 0;
}
.stat__num {
font-family: "HerosCn", sans-serif; font-weight: 700;
font-size: clamp(2.2rem, 4.5vw, 3.4rem);
line-height: 1.0; letter-spacing: -0.01em;
font-variant-numeric: tabular-nums; color: var(--fg);
}
.stat__num .unit { font-size: 0.42em; color: var(--fg-muted); margin-left: 4px; letter-spacing: 0; }
.stat__label {
font-family: "HerosCn", sans-serif; font-weight: 700;
text-transform: uppercase; letter-spacing: 0.14em;
font-size: var(--t-eyebrow); color: var(--fg-muted); margin-top: 6px;
}
.stat__num.accent { color: var(--accent); }
/* Divided stat row (thin separators, not boxes) */
.stat-row { display: flex; flex-wrap: wrap; gap: 0; }
.stat-row .stat { padding-inline: var(--s4); border-left: 1px solid var(--line); }
.stat-row .stat:first-child { padding-left: 0; border-left: 0; }
/* ----------------------------------------------------------------------------
10. DEPARTURES BOARD — split-flap / Solari
-------------------------------------------------------------------------- */
.board {
background: var(--slat);
border: 1px solid var(--slat-edge);
border-radius: var(--r-lg);
overflow: hidden;
box-shadow: var(--shadow-lg);
}
.board__head {
display: flex; align-items: center; justify-content: space-between;
padding: var(--s2) var(--s3);
background: linear-gradient(180deg, #11193a, #0b1226);
border-bottom: 1px solid var(--slat-edge);
}
.board__title {
font-family: "HerosCn", sans-serif; font-weight: 700;
text-transform: uppercase; letter-spacing: 0.16em; color: #fff; font-size: var(--t-sm);
display: flex; align-items: center; gap: var(--s2);
}
.board__dot { width: 8px; height: 8px; border-radius: 50%; background: var(--ok);
box-shadow: 0 0 0 0 rgba(61,181,74,.5); animation: pulse 2.4s var(--ease) infinite; }
@keyframes pulse { 0%{box-shadow:0 0 0 0 rgba(61,181,74,.45)} 70%{box-shadow:0 0 0 7px rgba(61,181,74,0)} 100%{box-shadow:0 0 0 0 rgba(61,181,74,0)} }
.board__clock { font-family: "HerosCn"; font-weight: 700; color: var(--gold);
letter-spacing: 0.08em; font-variant-numeric: tabular-nums; }
.board table { width: 100%; border-collapse: collapse; }
.board thead th {
font-family: "HerosCn", sans-serif; font-weight: 700;
text-transform: uppercase; letter-spacing: 0.16em; font-size: 11px;
color: #6f80ad; text-align: left;
padding: 10px var(--s2); border-bottom: 1px solid var(--slat-edge);
}
.board tbody td {
padding: 0; /* the .flap inside owns padding so seams align */
border-bottom: 1px solid var(--slat-edge);
vertical-align: middle;
}
.board tbody tr:last-child td { border-bottom: 0; }
/* the slat/flap cell content */
.flap {
position: relative;
display: flex; align-items: center;
min-height: 46px; padding: 0 var(--s2);
font-family: "HerosCn", sans-serif; font-weight: 700;
text-transform: uppercase; letter-spacing: 0.06em;
color: #eef2ff; font-variant-numeric: tabular-nums;
background: linear-gradient(180deg, #0e1530 0 50%, #0a0f24 50% 100%);
}
/* the centre flap seam — the signature split-flap line */
.flap::after {
content: ""; position: absolute; left: 0; right: 0; top: 50%;
height: 1px; background: rgba(0,0,0,0.55);
box-shadow: 0 -1px 0 rgba(255,255,255,0.04);
}
.flap.amber { color: var(--gold); }
.board__flight { font-weight: 700; letter-spacing: 0.10em; }
.board__route .arr { color: #9fb0db; padding: 0 6px; font-weight: 400; }
.board__pilot { letter-spacing: 0.04em; }
/* status pills inside the board (score-coloured) */
.board .status { display: inline-flex; align-items: center; gap: 7px; font-size: 12px;
letter-spacing: 0.12em; }
.board .status::before { content:""; width:7px; height:7px; border-radius:50%; background: currentColor; }
.status--ok { color: var(--ok); }
.status--warn { color: var(--warn); }
.status--bad { color: var(--bad); }
.status--air { color: var(--info); }
/* score number coloured by quality */
.score { font-variant-numeric: tabular-nums; font-weight: 700; }
.score--great { color: var(--ok); }
.score--good { color: var(--gold); }
.score--poor { color: var(--bad); }
/* split-flap flip-in animation hook (board.js adds .flip + delay) */
.board tbody td .flap { transform-origin: 50% 0; backface-visibility: hidden; }
.board.is-animating tbody td { perspective: 420px; }
.flap.flip {
animation: flapIn var(--med) var(--ease) both;
animation-delay: var(--flip-delay, 0ms);
}
@keyframes flapIn {
0% { transform: rotateX(-92deg); opacity: 0; }
55% { transform: rotateX(12deg); opacity: 1; }
100% { transform: rotateX(0deg); }
}
@media (prefers-reduced-motion: reduce) {
.flap.flip { animation: none; }
.board__dot { animation: none; }
}
/* ----------------------------------------------------------------------------
11. TABLES (general)
-------------------------------------------------------------------------- */
.table { width: 100%; border-collapse: collapse; font-size: var(--t-sm); }
.table th {
text-align: left; font-family: "Helvetica Neue", Helvetica, Arial, sans-serif; font-weight: 700;
text-transform: uppercase; letter-spacing: 0.08em; font-size: 11px;
color: var(--fg-muted); padding: var(--s1) var(--s2);
border-bottom: 1px solid var(--line-strong);
}
.table td { padding: 12px var(--s2); border-bottom: 1px solid var(--line); vertical-align: middle; }
.table tbody tr { transition: background var(--fast) var(--ease); }
.table tbody tr:hover { background: var(--surface); }
.table .num { text-align: right; font-variant-numeric: tabular-nums; }
/* ----------------------------------------------------------------------------
12. BADGE / CHIP
-------------------------------------------------------------------------- */
.badge {
display: inline-flex; align-items: center; gap: 6px;
font-family: "Helvetica Neue", Helvetica, Arial, sans-serif; font-weight: 700; font-size: 11px;
text-transform: uppercase; letter-spacing: 0.08em;
padding: 4px 9px; border-radius: 999px;
background: color-mix(in srgb, var(--accent) 16%, transparent);
color: var(--accent); border: 1px solid color-mix(in srgb, var(--accent) 35%, transparent);
}
.badge.solid { background: var(--accent); color: var(--accent-ink); border-color: var(--accent); }
.badge.ghost { background: transparent; color: var(--fg-muted);
border-color: var(--line-strong); }
.badge--mock { background: transparent; color: var(--warn);
border: 1px dashed color-mix(in srgb, var(--warn) 55%, transparent); }
.chip {
display: inline-flex; align-items: center; gap: var(--s1);
padding: 7px 12px; border-radius: 999px;
background: var(--surface); border: 1px solid var(--line);
font-size: var(--t-sm); color: var(--fg);
transition: border-color var(--fast) var(--ease), background var(--fast) var(--ease);
}
.chip:hover { border-color: var(--line-strong); }
.chip img { height: 18px; width: auto; }
/* ----------------------------------------------------------------------------
13. SWITCHER — segmented control / dropdown that re-themes via --accent
-------------------------------------------------------------------------- */
.switcher {
display: inline-flex; align-items: center; gap: 2px;
padding: 3px; border-radius: 999px;
background: var(--surface); border: 1px solid var(--line);
max-width: 100%; overflow-x: auto; flex-wrap: nowrap;
scrollbar-width: none;
}
.switcher::-webkit-scrollbar { display: none; }
@media (max-width: 640px) { .switcher { flex-wrap: wrap; overflow-x: visible; } }
/* visual divider between LH-group airlines and partner carriers (FX/CFG) */
.switcher__sep {
flex: 0 0 auto; align-self: stretch;
width: 1px; min-height: 18px; margin: 4px 5px;
background: var(--line-strong, var(--line));
color: transparent; user-select: none; overflow: hidden;
}
.switcher button {
flex: 0 0 auto;
font-family: "HerosCn"; font-weight: 700; font-size: var(--t-sm);
letter-spacing: 0.08em; text-transform: uppercase;
padding: 7px 14px; border-radius: 999px; border: 0; background: transparent;
color: var(--fg-muted); cursor: pointer; white-space: nowrap;
transition: color var(--fast) var(--ease), background var(--fast) var(--ease),
box-shadow var(--fast) var(--ease);
}
.switcher button:hover { color: var(--fg); }
.switcher button[aria-pressed="true"],
.switcher button.is-active {
background: var(--accent); color: var(--accent-ink);
}
/* per-airline tint for the active item is driven by setAirline() -> --accent */
/* "All vLHG" = whole LH-group selected — distinct gold-ringed gradient,
visually different from a single-airline pill */
.switcher__all.is-active,
.switcher__all[aria-pressed="true"] {
background: linear-gradient(135deg, #05164d 0%, #0a2472 55%, #c9a227 100%);
color: #ffffff;
box-shadow: 0 0 0 1.5px #f0bf4c, 0 1px 6px rgba(201, 162, 39, 0.35);
letter-spacing: 0.06em;
}
/* dropdown variant */
.switcher-select { position: relative; display: inline-block; }
.switcher-select > .btn { gap: var(--s2); }
.switcher-menu {
position: absolute; top: calc(100% + 8px); right: 0; min-width: 220px;
background: var(--surface); border: 1px solid var(--line-strong);
border-radius: var(--r); box-shadow: var(--shadow-lg); padding: 6px; z-index: 60;
}
.switcher-menu button {
display: flex; align-items: center; gap: var(--s2); width: 100%;
padding: 9px 10px; border: 0; border-radius: var(--r-sm); background: transparent;
color: var(--fg); cursor: pointer; font-size: var(--t-sm); text-align: left;
}
.switcher-menu button:hover { background: var(--surface-2); }
.switcher-menu img { height: 18px; }
.switcher-menu .swatch { width: 10px; height: 10px; border-radius: 3px; margin-left: auto; }
/* ----------------------------------------------------------------------------
14. STEPPER — numbered wizard (the /link flow)
-------------------------------------------------------------------------- */
.stepper { display: flex; align-items: center; gap: 0; }
.stepper__step { display: flex; align-items: center; gap: var(--s2); flex: 1; }
.stepper__num {
flex-shrink: 0; width: 34px; height: 34px; border-radius: 50%;
display: grid; place-items: center;
font-family: "HerosCn"; font-weight: 700; font-variant-numeric: tabular-nums;
border: 1px solid var(--line-strong); color: var(--fg-muted); background: var(--surface);
}
.stepper__label { font-family: "HerosCn"; font-weight: 700; text-transform: uppercase;
letter-spacing: 0.10em; font-size: var(--t-sm); color: var(--fg-muted); }
.stepper__line { flex: 1; height: 1px; background: var(--line-strong); margin-inline: var(--s2); }
.stepper__step.is-active .stepper__num { background: var(--accent); color: var(--accent-ink); border-color: var(--accent); }
.stepper__step.is-active .stepper__label { color: var(--fg); }
.stepper__step.is-done .stepper__num { background: transparent; color: var(--accent); border-color: var(--accent); }
.stepper__step.is-done .stepper__label { color: var(--fg); }
/* ----------------------------------------------------------------------------
15. HERO + BACKDROP overlay utility (dark gradient over a bg image)
-------------------------------------------------------------------------- */
.backdrop {
position: relative; isolation: isolate;
background-size: cover; background-position: center;
background-color: var(--deep-navy); /* fallback before JS picks an image */
}
.backdrop::before {
content: ""; position: absolute; inset: 0; z-index: -1;
background:
linear-gradient(180deg, rgba(10,15,31,0.55) 0%, rgba(10,15,31,0.78) 55%, var(--bg) 100%),
linear-gradient(90deg, rgba(5,22,77,0.55), rgba(5,22,77,0.10));
}
[data-theme="light"] .backdrop::before {
background:
linear-gradient(180deg, rgba(5,22,77,0.30) 0%, rgba(5,22,77,0.55) 60%, var(--bg) 100%);
}
.backdrop .wrap { position: relative; z-index: 1; }
.hero { padding-block: clamp(var(--s6), 11vw, var(--s8)); }
.hero h1 { max-width: 16ch; }
.hero .lede { color: var(--ink); opacity: .92; }
/* ----------------------------------------------------------------------------
16. FOOTER
-------------------------------------------------------------------------- */
.foot {
border-top: 1px solid var(--line);
background: var(--bg-2);
padding-block: var(--s6) var(--s4);
margin-top: var(--s7);
}
.foot__grid {
display: grid; gap: var(--s5);
grid-template-columns: 1.4fr repeat(3, 1fr);
align-items: start;
}
.foot__brand img { height: 30px; filter: brightness(0) invert(1); }
[data-theme="light"] .foot__brand img { filter: none; }
.foot__brand p { color: var(--fg-muted); font-size: var(--t-sm); margin-top: var(--s2); max-width: 32ch; }
.foot h4 { font-family: "HerosCn"; text-transform: uppercase; letter-spacing: 0.14em;
font-size: 11px; color: var(--fg-muted); font-weight: 700; margin-bottom: var(--s2); }
.foot__col a { display: block; font-size: var(--t-sm); color: var(--fg); padding: 5px 0;
transition: color var(--fast) var(--ease); }
.foot__col a:hover { color: var(--accent); }
.foot__social { display: flex; gap: var(--s1); margin-top: var(--s2); }
.foot__social a {
width: 38px; height: 38px; border-radius: var(--r); display: grid; place-items: center;
border: 1px solid var(--line); color: var(--fg-muted);
transition: all var(--fast) var(--ease);
}
.foot__social a:hover { color: var(--fg); border-color: var(--accent); }
.foot__partners { display: flex; flex-wrap: wrap; gap: var(--s1); margin-top: var(--s2); }
.foot__bar {
display: flex; align-items: center; justify-content: space-between; gap: var(--s2);
flex-wrap: wrap; margin-top: var(--s5); padding-top: var(--s3);
border-top: 1px solid var(--line); color: var(--fg-dim); font-size: var(--t-eyebrow);
}
.foot__note { color: var(--fg-dim); font-size: var(--t-eyebrow); }
/* Instagram feature block (prominent on landing) */
.ig-block {
display: flex; align-items: center; justify-content: space-between; gap: var(--s4);
flex-wrap: wrap;
padding: var(--s4) var(--s5); border-radius: var(--r-lg);
border: 1px solid var(--line);
background:
radial-gradient(120% 180% at 100% 0%, color-mix(in srgb, var(--accent) 14%, transparent), transparent 60%),
var(--surface);
}
.ig-block .handle { font-family: "HerosCn"; font-weight: 700; font-size: var(--t-h3); }
/* ----------------------------------------------------------------------------
17. CONDOR stripe utility (for condor.vlhg.net)
-------------------------------------------------------------------------- */
.condor-stripes { display: flex; height: 5px; border-radius: 999px; overflow: hidden; }
.condor-stripes > i { flex: 1; }
.condor-stripes > i:nth-child(1){ background: var(--condor-sunshine); }
.condor-stripes > i:nth-child(2){ background: var(--condor-passion); }
.condor-stripes > i:nth-child(3){ background: var(--condor-sea); }
.condor-stripes > i:nth-child(4){ background: var(--condor-island); }
.condor-stripes > i:nth-child(5){ background: var(--condor-beach); }
/* ----------------------------------------------------------------------------
18. RESPONSIVE
-------------------------------------------------------------------------- */
@media (max-width: 900px) {
:root { --t-h1: 3rem; --t-h2: 2rem; }
.foot__grid { grid-template-columns: 1fr 1fr; gap: var(--s4); }
.stat-row { gap: var(--s2); }
.stat-row .stat { border-left: 0; padding-inline: 0; }
}
@media (max-width: 760px) {
.nav__links { display: none; }
.nav__burger {
display: grid; place-items: center; width: 40px; height: 40px;
border: 1px solid var(--line); border-radius: var(--r); background: transparent;
color: var(--fg); cursor: pointer; margin-left: auto;
}
/* hamburger-expanded primary nav: a solid dropdown anchored under the sticky bar */
.nav__links.is-open {
display: flex; flex-direction: column; align-items: stretch; gap: var(--s1);
position: absolute; left: 0; right: 0; top: var(--nav-h); z-index: 60;
margin: 0; padding: var(--s2) var(--s3) var(--s3);
background: var(--bg); border-bottom: 1px solid var(--line);
box-shadow: 0 14px 28px rgba(0, 0, 0, 0.32);
}
.nav__links.is-open a { padding: 11px 4px; }
/* the desktop active-underline (absolutely placed below the bar) is wrong in a column */
.nav__links.is-open a[aria-current]::after,
.nav__links.is-open a.is-active::after { display: none; }
/* board scrolls horizontally on small screens */
.board { overflow-x: auto; }
.board table { min-width: 720px; }
.stepper { flex-direction: column; align-items: stretch; gap: var(--s2); }
.stepper__line { display: none; }
.ig-block { justify-content: flex-start; }
}
@media (max-width: 540px) {
.wrap { padding-inline: var(--s2); }
.foot__grid { grid-template-columns: 1fr; }
.section { padding-block: var(--s5); }
}
/* =============================================================================
INLINE-SVG ICON SET (copy into pages — stroke 1.5, currentColor, NO EMOJI)
Size them with width/height or `.btn svg`. Use class "ic" if you like.
-----------------------------------------------------------------------------
crane is a LOGO (assets/logos/crane.png), not an icon — don't redraw it.
============================================================================ */