/* ===================================================================== New Vector Detailing — Foundations Colors + Type + Motion + Spacing + Radii + Shadows Approachable Luxury system. Light canvas by default (cream, warm), midnight available for dark moments. Steel blue from the logo, champagne for the warm, sage + sunset for delight notes. Import this file at the root of any artifact. ===================================================================== */ @import url("https://fonts.googleapis.com/css2?family=Bricolage+Grotesque:opsz,wght@12..96,400;12..96,500;12..96,600;12..96,700&family=Hanken+Grotesk:wght@400;500;600;700&family=Newsreader:ital,wght@1,400;1,500&family=JetBrains+Mono:wght@400;500&display=swap"); :root { /* ---------- CREAM ---------- The default canvas. Warm off-white — paper, plaster, microfiber. Never pure white; we want a room with the lamps on, not a hospital. */ --cream-50: #FBF8F2; /* Primary surface */ --cream-100: #F4EFE4; /* Raised surface */ --cream-200: #E9E1D1; /* Linen / divider */ --cream-300: #D6CBB4; /* Stone */ /* ---------- MIDNIGHT ---------- The deep navy from the logo's shield. Used as dark-mode canvas, and as foreground text on cream surfaces. Reads expensive but warm. */ --midnight-50: #E6ECF4; --midnight-100: #B3C0D3; --midnight-300: #4F6582; --midnight-500: #243B5C; --midnight-700: #142340; /* Deep — dark-mode raised */ --midnight-900: #0B1428; /* Deepest — dark-mode canvas */ /* ---------- INK ---------- Body text on cream. Avoids pure black — softer, more readable. */ --ink-900: #161A22; --ink-700: #2A2F3A; --ink-500: #4A5260; --ink-300: #7A8392; --ink-200: #A6ADBA; --ink-100: #D2D6DD; /* ---------- VECTOR BLUE ---------- Pulled directly from the logo. Steel/cobalt — confident, friendly. Used for primary action and interactive accents. */ --blue-50: #ECF2FA; --blue-100: #D2E0F1; --blue-300: #7AA3D0; --blue-500: #3B6FA8; /* Primary action */ --blue-600: #2D578A; /* Hover */ --blue-700: #1F3F6B; /* Pressed */ --blue-900: #0F2647; /* ---------- CHROME ---------- The silver from the logo. Neutral metallic — used as borders, dividers, badge frames, accents on the dark canvas. */ --chrome-100: #ECEEF1; --chrome-300: #C8CCD1; --chrome-500: #9CA3AC; --chrome-700: #6A7280; /* ---------- CHAMPAGNE ---------- The warm. Soft gold — friendlier than cognac, less stuffy than brass. Used for prestige moments (top tier service, certificates, member status) AND, more freely than before, as a delight accent in copy callouts and decorative underlines. */ --champagne-50: #FBF3E4; --champagne-100: #F4E4C4; --champagne-300: #E5C28A; --champagne-500: #D4A574; /* Primary warm */ --champagne-700: #A47A4D; --champagne-900: #6E5232; /* ---------- SAGE ---------- The fun-but-grown-up green. Used for success states, eco/wash readiness, and the "all clear" stamp on inspection reports. */ --sage-100: #DBE8DF; --sage-300: #A8C5B2; --sage-500: #7FA294; --sage-700: #4E7464; /* ---------- SUNSET ---------- The warm coral. Used for delight moments — confirmations, the "ready for pickup" pip, a new-service ribbon. Not for danger. */ --sunset-100: #FBE3DA; --sunset-300: #F3B59C; --sunset-500: #E07856; --sunset-700: #A8503A; /* ---------- SEMANTIC ---------- */ --success: var(--sage-500); --warning: #C99A2E; --danger: #C84A3E; --info: var(--blue-500); /* ---------- ROLE TOKENS (LIGHT — default) ---------- */ --bg: var(--cream-50); --bg-raised: var(--cream-100); --bg-card: #FFFFFF; --bg-input: #FFFFFF; --bg-inverse: var(--midnight-900); --fg-1: var(--ink-900); /* primary text */ --fg-2: var(--ink-500); /* secondary text */ --fg-3: var(--ink-300); /* caption */ --fg-disabled: var(--ink-200); --fg-inverse: var(--cream-50); --border-1: rgba(20,35,64,0.08); /* hairline */ --border-2: rgba(20,35,64,0.14); /* card edge */ --border-3: rgba(20,35,64,0.28); /* focused / strong */ --accent: var(--blue-500); --accent-fg: #FFFFFF; --accent-soft: rgba(59,111,168,0.10); --warm: var(--champagne-500); --warm-soft: rgba(212,165,116,0.18); } /* ---------- DARK ---------- Midnight canvas. Used for the homepage hero, the booking concierge screen, and night-mode browsing. Type swaps to cream-tinted whites. */ [data-theme="dark"] { --bg: var(--midnight-900); --bg-raised: var(--midnight-700); --bg-card: #182747; --bg-input: #1B2A4A; --bg-inverse: var(--cream-50); --fg-1: var(--cream-50); --fg-2: #B7C2D6; --fg-3: #8492AD; --fg-disabled: #5A6783; --fg-inverse: var(--ink-900); --border-1: rgba(255,255,255,0.08); --border-2: rgba(255,255,255,0.14); --border-3: rgba(255,255,255,0.30); --accent: var(--blue-300); --accent-fg: var(--midnight-900); --accent-soft: rgba(122,163,208,0.16); } /* ===================================================================== TYPE FAMILIES ===================================================================== Display: Bricolage Grotesque — friendly geometric with character. Optical sizing on; weights 500–700. Body: Hanken Grotesk — humanist, warm, calm at small sizes. Serif: Newsreader italic — single accent moments (tagline, pull quotes, certificate signature). Mono: JetBrains Mono — data, units, prices, timestamps. Stand-ins remain (no proprietary fonts shipped). Replace when brand supplies official families. */ :root { --font-display: "Bricolage Grotesque", ui-sans-serif, system-ui, sans-serif; --font-body: "Hanken Grotesk", ui-sans-serif, system-ui, sans-serif; --font-serif: "Newsreader", ui-serif, Georgia, serif; --font-mono: "JetBrains Mono", ui-monospace, "SF Mono", Menlo, monospace; /* ---------- TYPE SCALE ---------- */ --fs-display-2xl: clamp(56px, 9vw, 128px); --fs-display-xl: clamp(44px, 6.5vw, 88px); --fs-display-lg: clamp(36px, 5vw, 64px); --fs-h1: clamp(32px, 3.4vw, 48px); --fs-h2: clamp(24px, 2.4vw, 32px); --fs-h3: 20px; --fs-h4: 16px; --fs-body: 16px; --fs-body-lg: 18px; --fs-body-sm: 14px; --fs-caption: 12px; --fs-micro: 11px; --lh-tight: 1.04; --lh-snug: 1.18; --lh-base: 1.55; --lh-loose: 1.75; --tracking-tight: -0.02em; --tracking-snug: -0.01em; --tracking-base: 0; --tracking-wide: 0.06em; --tracking-mega: 0.16em; /* eyebrows, mono labels */ /* ---------- SPACING (4px base) ---------- */ --space-0: 0; --space-1: 4px; --space-2: 8px; --space-3: 12px; --space-4: 16px; --space-5: 24px; --space-6: 32px; --space-7: 48px; --space-8: 64px; --space-9: 96px; --space-10: 128px; /* ---------- RADII ---------- Softer than the old system. Cards welcome you in. Buttons round enough to look tappable. Pills used for badges and CTAs. */ --r-0: 0; --r-1: 4px; /* hairline tags */ --r-2: 8px; /* inputs */ --r-3: 12px; /* buttons */ --r-4: 20px; /* cards */ --r-5: 28px; /* large feature cards, modals */ --r-pill: 999px; /* pill buttons, badges */ /* ---------- SHADOWS ---------- Warm and layered. Two systems: a soft ambient (umbra) + a tiny contact line. No harsh black drops. Inspired by daylight in a showroom — diffuse, generous. */ --shadow-1: 0 1px 2px rgba(20,35,64,0.06), 0 1px 1px rgba(20,35,64,0.04); --shadow-2: 0 6px 18px rgba(20,35,64,0.08), 0 2px 6px rgba(20,35,64,0.05); --shadow-3: 0 18px 48px rgba(20,35,64,0.14), 0 4px 12px rgba(20,35,64,0.06); --shadow-4: 0 32px 80px rgba(20,35,64,0.22), 0 8px 20px rgba(20,35,64,0.08); --shadow-focus: 0 0 0 3px rgba(59,111,168,0.35); /* ---------- MOTION ---------- Slightly more relaxed than the old system. Allows a tiny lift on cards (2px translateY) and a 1.02 press on buttons. Still no bounces, still no spins. */ --dur-fast: 140ms; --dur-base: 220ms; --dur-slow: 320ms; --dur-page: 500ms; --ease-out: cubic-bezier(0.22, 1, 0.36, 1); /* primary */ --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1); --ease-soft: cubic-bezier(0.34, 1.12, 0.64, 1); /* gentle settle, micro overshoot allowed */ } /* ===================================================================== BASE ===================================================================== */ html, body { background: var(--bg); color: var(--fg-1); font-family: var(--font-body); font-size: var(--fs-body); line-height: var(--lh-base); -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; } ::selection { background: var(--blue-100); color: var(--midnight-900); } [data-theme="dark"] ::selection { background: var(--blue-700); color: var(--cream-50); } /* ===================================================================== SEMANTIC TYPE CLASSES ===================================================================== */ .eyebrow, .label-mega { font-family: var(--font-mono); font-size: var(--fs-micro); letter-spacing: var(--tracking-mega); text-transform: uppercase; color: var(--fg-3); font-weight: 500; } .display-2xl, h1.display { font-family: var(--font-display); font-size: var(--fs-display-2xl); font-variation-settings: "opsz" 96; line-height: var(--lh-tight); letter-spacing: var(--tracking-tight); font-weight: 500; text-wrap: balance; } .display-xl { font-family: var(--font-display); font-variation-settings: "opsz" 72; font-size: var(--fs-display-xl); line-height: var(--lh-tight); letter-spacing: var(--tracking-tight); font-weight: 500; text-wrap: balance; } .display-lg { font-family: var(--font-display); font-variation-settings: "opsz" 48; font-size: var(--fs-display-lg); line-height: var(--lh-snug); letter-spacing: var(--tracking-tight); font-weight: 500; text-wrap: balance; } h1, .h1 { font-family: var(--font-display); font-variation-settings: "opsz" 36; font-size: var(--fs-h1); line-height: var(--lh-snug); letter-spacing: var(--tracking-snug); font-weight: 500; margin: 0; text-wrap: balance; } h2, .h2 { font-family: var(--font-display); font-variation-settings: "opsz" 28; font-size: var(--fs-h2); line-height: var(--lh-snug); letter-spacing: var(--tracking-snug); font-weight: 500; margin: 0; text-wrap: balance; } h3, .h3 { font-family: var(--font-display); font-variation-settings: "opsz" 20; font-size: var(--fs-h3); line-height: 1.3; letter-spacing: var(--tracking-snug); font-weight: 600; margin: 0; } h4, .h4 { font-family: var(--font-body); font-size: var(--fs-h4); line-height: 1.3; font-weight: 600; margin: 0; } p, .p { font-family: var(--font-body); font-size: var(--fs-body); line-height: var(--lh-base); color: var(--fg-2); margin: 0; text-wrap: pretty; } .p-lead { font-size: var(--fs-body-lg); line-height: 1.55; color: var(--fg-1); max-width: 62ch; } .p-sm { font-size: var(--fs-body-sm); color: var(--fg-2); } .caption { font-size: var(--fs-caption); color: var(--fg-3); } .mono, code, kbd, .data { font-family: var(--font-mono); font-feature-settings: "tnum","zero"; } .serif-italic, em.fancy { font-family: var(--font-serif); font-style: italic; font-weight: 400; } /* The signature one-liner — used on hero callouts, certificates, the closing thought on a thank-you screen. Warm, human, restrained. */ .signature { font-family: var(--font-serif); font-style: italic; font-size: clamp(22px, 2.4vw, 32px); color: var(--fg-1); line-height: 1.25; text-wrap: balance; } /* The champagne underline — a single decorative gesture allowed under eyebrows and small headings. Use sparingly. */ .warm-underline { background-image: linear-gradient(transparent 62%, var(--warm-soft) 62%); background-repeat: no-repeat; padding: 0 0.15em; }