@font-face { font-family: "Hanken Grotesk"; src: url("/assets/fonts/HankenGrotesk-Variable.woff2") format("woff2"); font-weight: 400 700; font-display: swap; } @font-face { font-family: Vogie-Black; src: url("/assets/fonts/Vogie-Black.woff2") format("woff2"); font-display: swap; } /* ========================================================================== Nelson's Car Hire — design tokens ("Lagoon Luxe") The single source of truth for the palette, type scale, radii, elevation and motion. Loaded first; base / components / home / responsive all consume these variables. Scoped under `.lx` (set on ) so any legacy markup outside the redesign keeps its old palette. ========================================================================== */ /* -------------------------------------------------------------------------- 1. Palette + type scale -------------------------------------------------------------------------- */ .lx { /* Brand — matched to the Nelson's logo (navy #1a3668, cyan #00abc7, red #d7272e). Variable names kept from the original build so every component re-themes. */ --teal-900: #112341; /* deepest navy — footer / dark sections / overlays */ --teal-800: #16305c; --teal-700: #1a3668; /* brand navy — strong text, dark buttons */ --teal-600: #20437d; /* navy accent — eyebrows, prices, icons (AA ~9:1 on white) */ --teal-500: #00abc7; /* brand cyan — decorative accents / tints */ --teal-200: #9bd8e6; /* cyan light — hero highlight */ --teal-100: #cdeef4; --teal-50: #ebf8fb; /* Brand red — reserved for primary action + energy */ --coral: #d7272e; /* accent / glow / focus / deal tags */ --coral-cta: #d7272e; /* button fill — white text AA 4.98:1 */ --coral-cta-dark: #b81f25; /* hover/active */ --coral-text: #c21f26; /* small red text on light (AA ~5.5:1) */ --coral-50: #fdecec; /* Cool neutrals — tinted toward the lagoon, not warm "AI cream" */ --ink: #13212b; /* primary text (AA 16:1) */ --ink-soft: #34454f; --muted: #5d6b73; /* secondary (AA 5.5) */ --line: #d9e6ec; /* cool hairline */ --line-soft: #e7f1f5; --surface: #ffffff; --sand: #e8f1f5; /* cool chip/control bg (sea-glass) */ --sand-band: #d2e4ee; /* section banding — deep enough to read against cream */ --sand-deep: #dce9ef; --cream: #f4f8fb; /* page bg (cool off-white) */ --bg: #f4f8fb; --star: #f5a623; --success: #1f9d57; /* Solid surfaces (de-glassed): opaque card + brand hairline */ --glass-bg: #ffffff; --glass-border: var(--line); /* Type */ --font-body: "Hanken Grotesk", system-ui, -apple-system, sans-serif; --font-display: Vogie-Black, "Hanken Grotesk", sans-serif; /* Fluid display sizes */ --t-hero: clamp(2.65rem, 1.7rem + 4.6vw, 5.25rem); --t-h2: clamp(2rem, 1.4rem + 2.6vw, 3.1rem); --t-h3: clamp(1.35rem, 1.1rem + 1.1vw, 1.85rem); --t-lead: clamp(1.05rem, 0.98rem + 0.4vw, 1.25rem); /* Radii */ --r-sm: 8px; --r-md: 14px; --r-lg: 22px; --r-xl: 30px; --r-pill: 999px; /* Elevation — warm, soft */ --sh-sm: 0 1px 2px rgba(18, 40, 50, 0.06), 0 2px 6px rgba(18, 40, 50, 0.06); --sh-md: 0 6px 18px rgba(18, 40, 50, 0.08), 0 2px 6px rgba(18, 40, 50, 0.05); --sh-lg: 0 18px 50px rgba(18, 36, 70, 0.16), 0 6px 16px rgba(18, 36, 70, 0.08); --sh-glass: 0 24px 60px rgba(18, 36, 70, 0.28); /* Motion */ --dur: 240ms; --dur-slow: 520ms; --ease: cubic-bezier(0.22, 1, 0.36, 1); --focus-ring: 0 0 0 3px rgba(215, 39, 46, 0.5); --focus-outline: 2px solid var(--coral); --maxw: 1200px; --gutter: clamp(1.1rem, 0.6rem + 2.4vw, 2.75rem); }