/* ───────────────────────────────────────────────────────────── A-B Sky Airport Transfers — Aurora design system ───────────────────────────────────────────────────────────── Sister system to Luton's Arctic. Same philosophy (minimalism, generous whitespace, single decision per screen, type-led hierarchy) but a different palette: Audi Red + Metallic Silver instead of Arctic sky-blue + sunshine-yellow. Use: -- scope so this never bleeds into pages that still use the legacy navy/red Tailwind theme. The token names mirror Arctic 1:1 (--lat-* → --sky-*) so a future shared design-system can swap the prefix without re-naming every class. Spacing scale, type scale, radii, shadow rules: identical shape to Arctic. Only the colour-and-feel layer differs. Cycle 2a (2026-05-12): tokens only. Cycle 2b will refactor book.html step 2 / 3 / 4 to use the system. ───────────────────────────────────────────────────────────── */ :root { /* ── Primary palette ── Audi Red on top of Metallic Silver. Deep red for CTAs and the "you're booked" moments, silver for surfaces and borders so the red feels measured and premium, not shouty. */ --sky-primary-deep: #BB0A30; /* Audi Red — CTAs / links / brand */ --sky-primary-mid: #D31539; /* Hover, brighter red */ --sky-primary-light: #F8E2E7; /* Tinted card / section bg */ --sky-paper: #FAFAFB; /* Page bg — paper-warm, NOT pure white */ --sky-white: #FFFFFF; /* Metallic Silver — borders, secondary surfaces, dividers */ --sky-silver: #C0C0C0; /* Brand silver, hero accents */ --sky-silver-mid: #D8D8DA; /* Mid-tone silver, divider */ --sky-silver-soft: #ECEDEF; /* Card surface alt */ /* Ink — body text. Deep readable neutral, NOT pure black. */ --sky-ink: #14181F; --sky-muted: #5A626D; --sky-faint: #8E96A2; --sky-border: #E2E4E7; /* Status colours — green for success, amber for warnings, the same red as the brand for danger (intentional: dangerous things feel branded, not generic). */ --sky-success: #1E8E5A; --sky-warn: #C18000; --sky-danger: #BB0A30; /* Same as primary — Audi Red */ /* Aurora blend — used as a wash on premium / hero blocks. Goes silver → red so the gradient has the brand baked in. */ --sky-aurora: linear-gradient(135deg, #ECEDEF 0%, #C0C0C0 55%, #BB0A30 100%); --sky-aurora-soft: linear-gradient(180deg, #FAFAFB 0%, #ECEDEF 100%); /* Type — same families as the current Sky site (Plus Jakarta Sans body + DM Serif Display headings) so we don't introduce yet another font load. The DM Serif gives Sky its premium, magazine-grade feel. We pair it with Plus Jakarta for body since the spec is already there in book.html / index.html. */ --sky-font-display: 'DM Serif Display', Georgia, serif; --sky-font-body: 'Plus Jakarta Sans', system-ui, -apple-system, sans-serif; --sky-font-num: 'Plus Jakarta Sans', system-ui, -apple-system, sans-serif; /* Spacing scale (4 / 8 / 12 / 16 / 24 / 32 / 48 / 64) — same as Arctic */ --sky-s1: 4px; --sky-s2: 8px; --sky-s3: 12px; --sky-s4: 16px; --sky-s5: 24px; --sky-s6: 32px; --sky-s7: 48px; --sky-s8: 64px; /* Radii */ --sky-r-sm: 8px; --sky-r-md: 12px; --sky-r-lg: 16px; --sky-r-xl: 24px; --sky-r-pill: 999px; /* Shadows — light, restrained. Audi Red is loud; the shadows should not double up on that. Cool grey shadow keeps the silver palette feeling metallic rather than dirty. */ --sky-shadow-sm: 0 1px 2px rgba(20,24,31,.04), 0 0 0 1px rgba(20,24,31,.04); --sky-shadow-md: 0 4px 16px rgba(20,24,31,.06), 0 0 0 1px rgba(20,24,31,.04); --sky-shadow-lg: 0 12px 32px rgba(20,24,31,.08), 0 2px 6px rgba(20,24,31,.04); --sky-shadow-focus: 0 0 0 4px rgba(187,10,48,.18); } /* ── Reset (scoped to .sky so we never break legacy pages) ────────── */ .sky, .sky * { box-sizing: border-box; } .sky { font-family: var(--sky-font-body); font-size: 16px; line-height: 1.55; color: var(--sky-ink); background: var(--sky-paper); -webkit-font-smoothing: antialiased; } .sky h1, .sky h2, .sky h3, .sky h4, .sky h5 { font-family: var(--sky-font-display); color: var(--sky-ink); letter-spacing: -0.01em; margin: 0; line-height: 1.1; text-wrap: balance; } .sky p { margin: 0; text-wrap: pretty; } .sky a { color: var(--sky-primary-deep); text-decoration: none; } .sky a:hover { color: var(--sky-primary-mid); } .sky button { font-family: inherit; cursor: pointer; border: none; background: none; } /* ── Typography utilities ────────────────────────────────────────── */ .sky .eyebrow { font-family: var(--sky-font-body); font-size: 12px; font-weight: 600; letter-spacing: 0.12em; text-transform: uppercase; color: var(--sky-primary-deep); } .sky .h-display { font-size: 56px; font-weight: 400; letter-spacing: -0.02em; } .sky .h-1 { font-size: 40px; font-weight: 400; letter-spacing: -0.01em; } .sky .h-2 { font-size: 28px; font-weight: 400; } .sky .h-3 { font-size: 20px; font-weight: 600; font-family: var(--sky-font-body); } .sky .body-lg { font-size: 17px; line-height: 1.55; color: var(--sky-muted); } .sky .body { font-size: 15px; line-height: 1.55; color: var(--sky-muted); } .sky .caption { font-size: 13px; color: var(--sky-muted); } .sky .num { font-variant-numeric: tabular-nums; font-feature-settings: 'tnum'; } /* ── Buttons ─────────────────────────────────────────────────────── */ .sky .btn { display: inline-flex; align-items: center; justify-content: center; gap: var(--sky-s2); font-family: var(--sky-font-body); font-weight: 600; font-size: 15px; height: 48px; padding: 0 var(--sky-s5); border-radius: var(--sky-r-md); transition: background .18s, color .18s, box-shadow .18s, transform .12s; white-space: nowrap; } .sky .btn:focus-visible { outline: none; box-shadow: var(--sky-shadow-focus); } .sky .btn:active { transform: translateY(1px); } .sky .btn-primary { background: var(--sky-primary-deep); color: var(--sky-white); box-shadow: inset 0 -2px 0 rgba(0,0,0,.08); } .sky .btn-primary:hover { background: var(--sky-primary-mid); box-shadow: 0 6px 16px rgba(187,10,48,.28), inset 0 -2px 0 rgba(0,0,0,.08); } .sky .btn-secondary { background: var(--sky-white); color: var(--sky-ink); box-shadow: inset 0 0 0 1px var(--sky-silver); } .sky .btn-secondary:hover { box-shadow: inset 0 0 0 1px var(--sky-primary-deep); color: var(--sky-primary-deep); } .sky .btn-tertiary { background: transparent; color: var(--sky-primary-deep); height: auto; padding: var(--sky-s2) 0; } .sky .btn-tertiary:hover { color: var(--sky-primary-mid); } .sky .btn-call { background: var(--sky-white); color: var(--sky-ink); box-shadow: inset 0 0 0 1px var(--sky-silver); } .sky .btn-call:hover { box-shadow: inset 0 0 0 1px var(--sky-primary-deep); color: var(--sky-primary-deep); } .sky .btn-call .dot { width: 8px; height: 8px; border-radius: 50%; background: var(--sky-success); box-shadow: 0 0 0 3px rgba(30,142,90,.18); } .sky .btn-block { width: 100%; } .sky .btn-lg { height: 56px; font-size: 16px; padding: 0 var(--sky-s6); } .sky .btn-sm { height: 36px; font-size: 13px; padding: 0 var(--sky-s4); border-radius: var(--sky-r-sm); } /* ── Inputs ──────────────────────────────────────────────────────── */ .sky .field { position: relative; background: var(--sky-white); border-radius: var(--sky-r-md); box-shadow: inset 0 0 0 1px var(--sky-border); transition: box-shadow .18s, background .18s; } .sky .field:focus-within { box-shadow: inset 0 0 0 1.5px var(--sky-primary-deep), 0 0 0 4px rgba(187,10,48,.12); } .sky .field.is-error { box-shadow: inset 0 0 0 1.5px var(--sky-danger); } .sky .field input, .sky .field select, .sky .field textarea { width: 100%; padding: 14px 16px; font-family: inherit; font-size: 15px; line-height: 1.4; color: var(--sky-ink); background: transparent; border: 0; outline: 0; box-shadow: none; } .sky .field label { position: absolute; top: 8px; left: 16px; font-size: 11px; font-weight: 600; letter-spacing: 0.04em; color: var(--sky-muted); text-transform: uppercase; } .sky .field.has-label input, .sky .field.has-label select { padding-top: 26px; padding-bottom: 8px; } /* ── Cards & surfaces ────────────────────────────────────────────── */ .sky .card { background: var(--sky-white); border-radius: var(--sky-r-lg); box-shadow: var(--sky-shadow-md); padding: var(--sky-s6); } .sky .card-flat { background: var(--sky-silver-soft); border-radius: var(--sky-r-lg); padding: var(--sky-s6); } .sky .divider { height: 1px; background: var(--sky-border); border: 0; margin: var(--sky-s5) 0; } /* ── Stepper ─────────────────────────────────────────────────────── */ .sky .stepper { display: flex; align-items: center; gap: var(--sky-s3); margin-bottom: var(--sky-s6); } .sky .stepper .step { display: inline-flex; align-items: center; gap: var(--sky-s2); font-size: 13px; font-weight: 600; color: var(--sky-faint); } .sky .stepper .step .num { width: 28px; height: 28px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; background: var(--sky-silver-soft); color: var(--sky-muted); font-family: var(--sky-font-num); font-size: 13px; font-weight: 700; } .sky .stepper .step.is-active .num { background: var(--sky-primary-deep); color: var(--sky-white); } .sky .stepper .step.is-active { color: var(--sky-ink); } .sky .stepper .step.is-done .num { background: var(--sky-success); color: var(--sky-white); } .sky .stepper .step.is-done { color: var(--sky-muted); } .sky .stepper .rail { flex: 0 0 24px; height: 2px; background: var(--sky-border); border-radius: 999px; } /* ── Vehicle pick row (used in step 2) ───────────────────────────── */ .sky .vehicle-row { display: grid; grid-template-columns: 88px 1fr auto; gap: var(--sky-s4); align-items: center; padding: var(--sky-s5); background: var(--sky-white); border-radius: var(--sky-r-lg); box-shadow: inset 0 0 0 1px var(--sky-border); cursor: pointer; transition: box-shadow .18s, background .18s; } .sky .vehicle-row:hover { box-shadow: inset 0 0 0 1.5px var(--sky-primary-deep); } .sky .vehicle-row.is-selected { background: var(--sky-primary-light); box-shadow: inset 0 0 0 1.5px var(--sky-primary-deep); } .sky .vehicle-row .photo { width: 88px; height: 56px; object-fit: contain; } .sky .vehicle-row .name { font-family: var(--sky-font-display); font-size: 18px; color: var(--sky-ink); margin-bottom: 2px; } .sky .vehicle-row .meta { font-size: 12px; color: var(--sky-muted); } .sky .vehicle-row .price { font-family: var(--sky-font-num); font-size: 22px; font-weight: 700; color: var(--sky-ink); text-align: right; } .sky .vehicle-row .pill { display: inline-block; padding: 2px 8px; background: var(--sky-primary-light); color: var(--sky-primary-deep); font-size: 10px; font-weight: 700; letter-spacing: 0.05em; text-transform: uppercase; border-radius: 999px; margin-bottom: 4px; } /* ── Trust strip ─────────────────────────────────────────────────── */ .sky .trust { display: flex; flex-wrap: wrap; gap: var(--sky-s4) var(--sky-s5); justify-content: center; margin-top: var(--sky-s6); } .sky .trust .item { display: inline-flex; align-items: center; gap: 6px; font-size: 12px; color: var(--sky-muted); font-weight: 500; } .sky .trust .item .check { width: 14px; height: 14px; display: inline-flex; align-items: center; justify-content: center; background: var(--sky-success); color: var(--sky-white); border-radius: 50%; font-size: 9px; } /* ── Mobile sticky CTA bar ───────────────────────────────────────── */ @media (max-width: 767.98px) { .sky .h-display { font-size: 36px; } .sky .h-1 { font-size: 28px; } .sky .h-2 { font-size: 22px; } .sky .vehicle-row { grid-template-columns: 64px 1fr auto; padding: var(--sky-s4); } .sky .vehicle-row .photo { width: 64px; height: 44px; } .sky .vehicle-row .name { font-size: 16px; } .sky .vehicle-row .price { font-size: 18px; } } /* ── Reduced motion ──────────────────────────────────────────────── */ @media (prefers-reduced-motion: reduce) { .sky *, .sky *::before, .sky *::after { transition-duration: 0.01ms !important; animation-duration: 0.01ms !important; } }