/** * Toile Blanche — Design Tokens * ───────────────────────────────────────────────────────────────────────────── * Single source of truth for all brand colours, typography, spacing, and * interaction values. Import this before toile-blanche.min.css and * site-overrides.css so that all token references resolve correctly. * * Usage: color: var(--color-ink); * font-family: var(--font-display); * padding: var(--space-xl) var(--space-section-x); * * Updated: March 2026 * ───────────────────────────────────────────────────────────────────────────── */ :root { /* ── Colour — Core Palette ─────────────────────────────────────────────── */ /* Primary ink — used for all body copy and UI elements */ --color-ink: #2c2a26; --color-ink-deep: #1C1917; /* near-black, headings at maximum weight */ /* Terracotta — the brand accent; use for CTAs, highlights, key UI moments */ --color-terracotta: #9e5c4a; --color-terracotta-mid: #AD5D47; /* slightly brighter; Zenchef widget match */ --color-terracotta-deep:#8a4e3e; /* hover states */ --color-terracotta-active: #7a4335; /* pressed/active states */ --color-terracotta-30: rgba(158, 92, 74, 0.30); /* link underline */ /* Stone — secondary text, labels, captions, borders */ --color-stone: #6B6256; --color-stone-muted: #9C9080; /* eyebrow, muted labels */ --color-border-warm: #C4B9AA; /* list bullets, subtle accents */ /* Ink mid — body copy on light backgrounds where full ink is too strong */ --color-ink-mid: #3D3530; /* Warm greens — sage accent used sparingly (e.g. score indicators, tags) */ --color-sage: #4a7c59; /* Backgrounds */ --color-bg: #FAF8F3; /* site canvas — matches */ --color-bg-warm: #f5f2ed; /* slightly deeper, used in card/section backgrounds */ --color-bg-white: #ffffff; /* Borders and dividers */ --color-border: #E2D9CC; /* standard warm-beige rule */ --color-border-faint: #ede8e2; /* hairline / very subtle dividers */ /* ── Colour — Opacity Scales ───────────────────────────────────────────── */ /* Ink overlays (over light backgrounds — e.g. hero gradient, modal scrim) */ --color-ink-06: rgba(44, 42, 38, 0.06); --color-ink-08: rgba(44, 42, 38, 0.08); --color-ink-12: rgba(44, 42, 38, 0.12); --color-ink-15: rgba(44, 42, 38, 0.15); --color-ink-35: rgba(44, 42, 38, 0.35); --color-ink-40: rgba(44, 42, 38, 0.40); --color-ink-50: rgba(44, 42, 38, 0.50); --color-ink-60: rgba(44, 42, 38, 0.60); --color-ink-75: rgba(44, 42, 38, 0.75); /* Ink-deep overlays (for navigation, language switcher) */ --color-ink-deep-30: rgba(28, 25, 23, 0.30); --color-ink-deep-60: rgba(28, 25, 23, 0.60); /* White overlays (over dark/image backgrounds — e.g. hero content protection) */ --color-white-08: rgba(255, 255, 255, 0.08); --color-white-15: rgba(255, 255, 255, 0.15); --color-white-40: rgba(255, 255, 255, 0.40); --color-white-60: rgba(255, 255, 255, 0.60); --color-white-70: rgba(255, 255, 255, 0.70); --color-white-80: rgba(255, 255, 255, 0.80); /* ── Typography — Font Families ────────────────────────────────────────── */ /* * Gilda Display — the primary display face. Headlines, hero text, * suite names. Loaded at weight 400 only. * * Cormorant Garamond — editorial serif. Pull quotes, captions, sub-headings * that need warmth without shouting. Loaded italic only * (400i, 500i, 600i) to enforce its secondary role. * * Didact Gothic — the functional sans. Body copy, UI labels, navigation, * form elements. Weight 400 only — the font has no bold. */ --font-display: 'Gilda Display', Georgia, serif; --font-editorial: 'Cormorant Garamond', Georgia, serif; --font-body: 'Didact Gothic', Arial, sans-serif; /* ── Typography — Size Scale ───────────────────────────────────────────── */ /* * A modular scale anchored at 1rem (16px). All sizes in rem so they * respect the user's browser default and scale with accessibility settings. * Pixel equivalents shown as comments for reference only. */ --text-2xs: 0.625rem; /* 10px — legal, micro-labels */ --text-xs: 0.6875rem; /* 11px — tags, overlines, captions */ --text-sm: 0.8125rem; /* 13px — secondary UI, footnotes */ --text-base: 1rem; /* 16px — body copy */ --text-md: 1.125rem; /* 18px — slightly prominent body */ --text-lg: 1.25rem; /* 20px — intro paragraphs, lead copy */ --text-xl: 1.5rem; /* 24px — section sub-headings */ --text-2xl: 2rem; /* 32px — card titles, smaller headings */ --text-3xl: 2.5rem; /* 40px — page headings */ --text-4xl: 3.5rem; /* 56px — hero sub-headings */ --text-hero: clamp(3rem, 6vw, 9rem); /* fluid hero headline — scales at ultra-wide */ --text-hero-body: clamp(1rem, 2vw, 1.5rem); /* fluid hero paragraph */ /* ── Typography — Weight Scale ─────────────────────────────────────────── */ --weight-light: 300; --weight-regular: 400; --weight-medium: 500; --weight-semi: 600; /* ── Typography — Letter Spacing ───────────────────────────────────────── */ /* Used primarily on uppercase labels, overlines, and small caps */ --tracking-tight: 0.03em; --tracking-normal: 0.06em; --tracking-wide: 0.12em; --tracking-wider: 0.15em; --tracking-widest: 0.20em; /* ── Typography — Line Height ──────────────────────────────────────────── */ --leading-none: 1; /* display / hero headlines */ --leading-tight: 1.2; /* large sub-headings */ --leading-snug: 1.3; --leading-normal: 1.5; --leading-relaxed: 1.6; /* standard body copy */ --leading-loose: 1.7; /* long-form editorial text */ /* ── Spacing Scale ─────────────────────────────────────────────────────── */ /* * Anchored at 8px. Use multiples of this base for all margins, paddings, * and gaps. Deviating from this scale (e.g. 13px, 22px) creates visual * inconsistency — always round to the nearest token. */ --space-1: 0.5rem; /* 8px */ --space-2: 1rem; /* 16px */ --space-3: 1.5rem; /* 24px */ --space-4: 2rem; /* 32px */ --space-5: 2.5rem; /* 40px */ --space-6: 3rem; /* 48px */ --space-8: 4rem; /* 64px */ --space-10: 5rem; /* 80px */ --space-12: 6rem; /* 96px */ --space-16: 8rem; /* 128px */ /* Section-level rhythm — horizontal padding and vertical breathing room */ --space-section-x: clamp(1.5rem, 5vw, 5rem); --space-section-y: clamp(4rem, 8vw, 8rem); /* ── Layout ────────────────────────────────────────────────────────────── */ --max-w-text: 600px; /* optimal reading measure */ --max-w-content: 1000px; /* standard content column */ --max-w-wide: 1100px; /* wider layouts (suites grid, restaurant) */ /* ── Breakpoints ───────────────────────────────────────────────────────── */ /* * Note: CSS custom properties cannot be used inside @media queries. * These are documented here as a reference — use the raw values in queries. * * --bp-sm: 480px small mobile * --bp-md: 768px tablet / mobile-landscape switch * --bp-lg: 1100px desktop */ /* ── Border Radius ─────────────────────────────────────────────────────── */ --radius-sm: 2px; /* subtle rounding on buttons, tags */ --radius-full: 50%; /* circles (avatars, icon buttons) */ /* ── Z-Index Scale ─────────────────────────────────────────────────────── */ --z-base: 0; --z-raised: 100; /* cards on hover, dropdowns */ --z-overlay: 1000; /* booking bar, drawers */ --z-modal: 9000; /* modal dialogs */ --z-top: 10000; /* cookie banner, emergency toasts */ /* ── Transitions ───────────────────────────────────────────────────────── */ /* * Keep interactions consistent and intentional. * Fast (0.2s) for instant feedback on hover/focus. * Standard (0.3s) for UI state changes (menus, toggles). * Slow (0.6s+) for atmospheric fades (hero, loaders) — Lenis/GSAP handles these. */ --transition-fast: 0.2s ease; --transition-std: 0.3s ease; --transition-slow: 0.6s ease; --transition-crawl: 1.2s ease; /* loader, hero fade-in */ }