/* Session 31D Phase 1 — Design system enforcement. Spec-canonical palette (navy / gold / cream / warm-cream / stone / charcoal / ink), 8px spacing scale, and legacy token aliases preserved with realigned values. Phase 1 elevation (May 2026) extends this with the full Component Library token system from BAROQUE_TRAVEL_COMPONENT_LIBRARY.md. All Session 31D tokens above the divider are preserved unchanged; new tokens are additive under semantic aliases (--space-xs/sm/md/...) to avoid breaking the existing multiplier-based --space-1..24 scale used across legacy CSS. */ :root { /* Spec-canonical palette (Session 31D — Phase 1 design system enforcement) Phase 1 brand alignment (May 2026): swapped navy for BUILD3 brown-black across the entire public surface so member and public chrome belong to one palette family. Variable names retained ("navy") for backwards- compat with thousands of selectors; the *values* are now BUILD3's. */ --navy: #0C0906; /* was #1A2B4A — BUILD3 dark */ --gold: #B8921A; /* was #C4A052 — BUILD3 gold */ --cream: #FAF7F2; /* was #FAF8F5 — BUILD3 canvas */ --warm-cream: #F5EFE6; --stone: #E8E0D3; --charcoal: #18120C; /* BUILD3 ink */ --ink: #0C0906; /* Legacy token names — values realigned to the spec palette so existing selectors across client/css and client/public/css pick up the new palette without per-file rewrites. */ --black: var(--navy); --dark: #141009; /* BUILD3 dark2 */ --card: #141009; /* BUILD3 dark2 */ --card2: #1B1509; /* BUILD3 dark3 */ --text: var(--cream); --text-mid: rgba(243, 230, 191, 0.7); --text-dim: rgba(243, 230, 191, 0.5); --white: var(--cream); /* Gold variants */ --gold-dim: #8A7038; --gold-pale: #F3E6BF; /* BUILD3 gold3 */ --gold-subtle: rgba(184, 146, 26, 0.12); --border: rgba(184, 146, 26, 0.18); --border-strong: rgba(184, 146, 26, 0.35); /* Status colors */ --green: #2ECC71; --red: #B03030; --font-display: 'Cormorant Garamond', Georgia, serif; --font-body: 'Jost', 'Helvetica Neue', Helvetica, Arial, sans-serif; /* 8px spacing scale (Session 31D Section A) */ --space-1: 8px; --space-2: 16px; --space-3: 24px; --space-4: 32px; --space-6: 48px; --space-8: 64px; --space-12: 96px; --space-16: 128px; --space-24: 192px; --radius-sm: 2px; --radius-md: 4px; --transition: 0.2s ease; /* ──────────────────────────────────────────────────────────────────────── Component Library extension (Phase 1 elevation) Source: BAROQUE_TRAVEL_COMPONENT_LIBRARY.md §1 New tokens are additive; existing tokens above are untouched. ──────────────────────────────────────────────────────────────────────── */ /* Extended palette — values realigned to BUILD3 family (May 2026). */ --navy-deep: #0C0906; /* was #0F1A30 */ --navy-light: #1B1509; /* was #2A3B5A */ --gold-deep: #8A6E10; --gold-light: #D4AF37; /* ───────────────────────────────────────────────────────────────── Surface mood palette (May 2026 brand expansion). Each page or section can pick a mood via class — keeps the site from reading uniformly dark while staying inside the Baroque family. Mood is set on OR a section wrapper. Mood Use case Background Text-on-bg ───────────────────────────────────────────────────────────────── .mood-deep cinematic hero, login, #0C0906 cream/gold hotel-detail cover photo .mood-ivory editorial, magazine, #FAF3E5 ink about pages .mood-stone catalog/grid, property listing #E8E0D3 ink .mood-beige concierge, advisor card, #F5EDDE ink settings, account default .mood-mist pale-slate breathing room, #E2E5EA ink journeys, calm pages ────────────────────────────────────────────────────────────────── */ --mood-deep-bg: #0C0906; --mood-ivory-bg: #FAF3E5; --mood-stone-bg: #E8E0D3; --mood-beige-bg: #F5EDDE; --mood-mist-bg: #E2E5EA; --stone-light: #F0EBE0; --mist: #C8C2B5; /* Semantic colors */ --color-success: #4A6B3F; --color-warning: #B08D3F; --color-error: #8B2D2D; --color-info: #4A5F7A; /* Surface tokens (cream-surface mode for editorial / exhibition pages) */ --surface-primary: var(--cream); --surface-secondary: var(--warm-cream); --surface-elevated: #FFFFFF; --surface-overlay: rgba(15, 26, 48, 0.92); --surface-cinema: rgba(15, 20, 25, 0.96); /* Text tokens on cream surfaces (use inside .surface-cream containers) */ --text-on-cream-primary: var(--charcoal); --text-on-cream-secondary: rgba(44, 44, 44, 0.7); --text-on-cream-tertiary: rgba(44, 44, 44, 0.5); --text-on-navy: var(--cream); --text-on-gold: var(--navy); /* Borders on cream surfaces */ --border-subtle: rgba(44, 44, 44, 0.08); --border-default: rgba(44, 44, 44, 0.12); --border-strong-cream: rgba(44, 44, 44, 0.2); /* Typography — third family, weights, sizes, line-heights, tracking */ --font-ui-sans: 'DM Sans', 'Jost', -apple-system, BlinkMacSystemFont, sans-serif; --font-mono: 'JetBrains Mono', 'SF Mono', Consolas, monospace; --weight-light: 300; --weight-regular: 400; --weight-medium: 500; --weight-semibold: 600; --weight-bold: 700; --size-xs: 11px; --size-sm: 13px; --size-base: 16px; --size-md: 18px; --size-lg: 22px; --size-xl: 28px; --size-2xl: 36px; --size-3xl: 48px; --size-4xl: 64px; --size-5xl: 96px; --size-6xl: 120px; --leading-tight: 1.1; --leading-snug: 1.3; --leading-normal: 1.5; --leading-relaxed: 1.6; --leading-loose: 1.7; --tracking-tighter: -0.02em; --tracking-tight: -0.01em; --tracking-normal: 0; --tracking-wide: 0.05em; --tracking-wider: 0.1em; --tracking-widest: 0.2em; /* Semantic spacing aliases (additive — existing --space-1..24 preserved) */ --space-xxs: 4px; --space-xs: 8px; --space-sm: 12px; --space-md: 16px; --space-lg: 24px; --space-xl: 32px; --space-2xl: 48px; --space-3xl: 64px; --space-4xl: 96px; --space-5xl: 128px; --space-6xl: 192px; /* Radii */ --radius-none: 0; --radius-lg: 8px; --radius-xl: 12px; --radius-full: 9999px; /* Shadows — restrained (luxury is light, not heavy) */ --shadow-none: none; --shadow-subtle: 0 1px 2px rgba(15, 26, 48, 0.04); --shadow-soft: 0 2px 8px rgba(15, 26, 48, 0.06); --shadow-elevated: 0 4px 16px rgba(15, 26, 48, 0.08); --shadow-floating: 0 8px 32px rgba(15, 26, 48, 0.12); --shadow-modal: 0 16px 64px rgba(15, 26, 48, 0.2); --shadow-hover-lift: 0 4px 12px rgba(15, 26, 48, 0.1); /* Animation tokens */ --duration-instant: 100ms; --duration-fast: 200ms; --duration-base: 300ms; --duration-slow: 400ms; --duration-slower: 600ms; --duration-deliberate: 800ms; --ease-default: cubic-bezier(0.4, 0, 0.2, 1); --ease-in: cubic-bezier(0.4, 0, 1, 1); --ease-out: cubic-bezier(0, 0, 0.2, 1); --ease-in-out: cubic-bezier(0.4, 0, 0.2, 1); --ease-editorial: cubic-bezier(0.25, 0.46, 0.45, 0.94); --transition-fast: all var(--duration-fast) var(--ease-out); --transition-base: all var(--duration-base) var(--ease-default); --transition-page: all var(--duration-deliberate) var(--ease-editorial); /* Z-index scale */ --z-base: 0; --z-elevated: 10; --z-sticky: 100; --z-overlay: 1000; --z-modal: 1100; --z-tooltip: 1200; --z-toast: 1300; --z-top: 9999; /* Breakpoints (for use in container queries / consumer JS) and max widths */ --bp-sm: 640px; --bp-md: 768px; --bp-lg: 1024px; --bp-xl: 1280px; --bp-2xl: 1536px; --bp-3xl: 1920px; --max-content: 1440px; --max-content-narrow: 720px; --max-content-wide: 1920px; } /* Cream-surface opt-in container. Editorial / exhibition pages (property detail elevation, article reader, journey pages) wrap their main content in .surface-cream to flip from the default navy body to the cream primary surface called for by Site UI Elevation §2/§7. */ .surface-cream { background: var(--surface-primary); color: var(--text-on-cream-primary); } .surface-cream-warm { background: var(--surface-secondary); color: var(--text-on-cream-primary); } /* Universal focus state — gold outline, 2px, offset (Component Library §19) */ :focus-visible { outline: 2px solid var(--gold); outline-offset: 2px; } /* Reduced motion — Site UI Elevation §14, Component Library §18 */ @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; scroll-behavior: auto !important; } } * { margin: 0; padding: 0; box-sizing: border-box; } html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; } html, body { height: 100%; } body { background: var(--black); color: var(--text); font-family: var(--font-body); font-weight: 300; font-size: 15px; line-height: 1.6; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; min-height: 100vh; } a { color: inherit; text-decoration: none; transition: color var(--transition); } a:hover { color: var(--gold); } img, picture, video, canvas, svg { display: block; max-width: 100%; } button { font-family: inherit; cursor: pointer; background: none; border: none; color: inherit; } input, select, textarea { font-family: inherit; color: inherit; } ::selection { background: var(--gold); color: var(--black); } .sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; }