/* ========================================================================== Timeless Beach Hotel — Design Tokens ("Coastal") Single source of truth: colour, type, space, motion. PALETTE PROVENANCE Five brand colours, as supplied: Sea Mist #B6E6E9 · Turquoise Tide #4EC6D4 · Sunlit Sand #F2D9B7 Ocean Glass #7AC7BD · Coastal Depth #1E6E6F Plus the two colours carried by the logo artwork itself: cyan #0DCDDB (mark) · deep teal #12484D (wordmark) Every derived value below is a mix of those seven. No imported hues. ACCESSIBILITY — three rules the contrast maths forces. Do not break these. 1. --tbh-accent / --tbh-wash must NEVER be text on a light ground (1.68:1 and 1.74:1 — both fail). Use --tbh-ink / --tbh-ink-soft / --tbh-accent-deep instead. 2. An accent fill on a light ground fails WCAG 1.4.11 non-text contrast (1.68:1), so it MUST carry a 1px --tbh-ink border to define its edge. Its label is --tbh-ink (5.23 AA). White on accent is 1.95 — it fails. 3. On --tbh-panel (full Sunlit Sand) body copy uses --tbh-ink only; --tbh-depth manages just 4.38 there and is a surface colour, not text. ========================================================================== */ :root { /* ---- Brand core ---- */ --tbh-accent: #0DCDDB; /* logo cyan — the interactive accent */ --tbh-accent-hover: #42D8E3; /* hover LIGHTENS: darkening drops the ink label to 4.26 and fails AA */ --tbh-accent-glow: #62DFE8; /* glows + hairlines on dark (8.91 on dark)*/ --tbh-accent-deep: #086C75; /* links/text on light — 5.29/5.51/4.51 */ /* ---- Palette, used at full strength ---- */ --tbh-wash: #4EC6D4; /* Turquoise Tide — washes, gradients only */ --tbh-glass: #7AC7BD; /* Ocean Glass — mid tone, dividers */ --tbh-mist: #B6E6E9; /* Sea Mist */ --tbh-sand: #F2D9B7; /* Sunlit Sand — the warm counterpoint */ --tbh-depth: #1E6E6F; /* Coastal Depth */ /* ---- Grounds ---- */ --tbh-ground: #F9ECDB; /* page bg — Sunlit Sand → white 50%. dE 2.56 from the approved #F6EDE0, so the signed-off warmth is preserved */ --tbh-ground-alt: #E3F6F7; /* alt band — Sea Mist → white 62% */ --tbh-cream: #FBF5EC; /* lifted card ground */ --tbh-panel: #F2D9B7; /* full-strength sand panel */ --tbh-dark: #0E3031; /* night sections — white 14.13 AAA */ --tbh-dark-2: #103A3B; /* layered dark */ --tbh-surface-dark: #1E6E6F; /* Coastal Depth as a surface — white 5.97 */ /* ---- Text ---- */ --tbh-ink: #12484D; /* body on light — 8.76/9.12/7.47 */ --tbh-ink-soft: #3C6667; /* muted — 5.49/5.71/4.68 */ --tbh-ink-faint: rgba(18,72,77,.45); /* decorative only */ --tbh-on-dark: #EAF7F8; /* on --tbh-dark — 12.89 AAA */ --tbh-on-dark-soft: rgba(234,247,248,.68); --tbh-on-dark-faint:rgba(234,247,248,.38); /* ---- Channel triplets ---- rgba() cannot take a hex custom property, so any translucent use of a brand colour reads its channels from here. This keeps the palette single-sourced: change a colour once, above and here, never in a rule. */ --tbh-accent-rgb: 13,205,219; /* #0DCDDB logo cyan */ --tbh-glow-rgb: 98,223,232; /* #62DFE8 accent glow */ --tbh-wash-rgb: 78,198,212; /* #4EC6D4 Turquoise Tide */ --tbh-glass-rgb: 122,199,189; /* #7AC7BD Ocean Glass */ --tbh-mist-rgb: 182,230,233; /* #B6E6E9 Sea Mist */ --tbh-sand-rgb: 242,217,183; /* #F2D9B7 Sunlit Sand */ --tbh-depth-rgb: 30,110,111; /* #1E6E6F Coastal Depth */ --tbh-ink-rgb: 18,72,77; /* #12484D wordmark teal */ --tbh-dark-rgb: 14,48,49; /* #0E3031 night ground */ --tbh-scrim-rgb: 8,32,33; /* #082021 photo scrims */ --tbh-on-dark-rgb:234,247,248; /* #EAF7F8 text on dark */ /* ---- Lines / hairlines (teal-cast, never neutral grey) ---- */ --tbh-line: rgba(var(--tbh-ink-rgb),.14); --tbh-line-strong: rgba(var(--tbh-ink-rgb),.30); --tbh-line-dark: rgba(var(--tbh-on-dark-rgb),.16); /* ---- Typography ---- Unchanged. The logo wordmark is visually identical between the old and new artwork, so the pairing chosen against it still holds. */ --tbh-font-display: "Josefin Sans", "Times New Roman", serif; --tbh-font-body: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; /* fluid type scale (clamp: min, fluid, max) */ --tbh-fs-mega: clamp(2.9rem, 1.7rem + 5.4vw, 7rem); /* hero display */ --tbh-fs-h1: clamp(2.5rem, 1.6rem + 3.6vw, 4.8rem); --tbh-fs-h2: clamp(1.9rem, 1.4rem + 2.2vw, 3.2rem); --tbh-fs-h3: clamp(1.4rem, 1.2rem + 0.9vw, 1.9rem); --tbh-fs-lead: clamp(1.05rem, 0.98rem + 0.45vw, 1.28rem); --tbh-fs-body: clamp(0.98rem, 0.95rem + 0.15vw, 1.06rem); --tbh-fs-small: 0.82rem; --tbh-fs-eyebrow: 0.72rem; --tbh-track-display: -0.01em; --tbh-track-eyebrow: 0.42em; --tbh-track-wide: 0.22em; /* ---- Spacing rhythm ---- */ --tbh-gutter: clamp(1.25rem, 0.5rem + 3vw, 4.5rem); /* page side padding */ --tbh-section: clamp(5rem, 3rem + 8vw, 11rem); /* vertical section rhythm */ --tbh-maxw: 1480px; /* content max width */ --tbh-maxw-text: 60ch; /* ---- Radii / elevation (shadows re-cast teal, were warm brown) ---- */ --tbh-radius: 14px; --tbh-radius-lg: 22px; --tbh-radius-pill: 999px; --tbh-shadow-soft: 0 18px 50px -24px rgba(14,48,49,.40); --tbh-shadow-lift: 0 40px 90px -40px rgba(14,48,49,.52); /* ---- Motion ---- */ --tbh-ease-luxe: cubic-bezier(0.22, 1, 0.36, 1); /* primary out-expo-ish */ --tbh-ease-out: cubic-bezier(0.16, 1, 0.3, 1); --tbh-ease-inout: cubic-bezier(0.65, 0, 0.35, 1); --tbh-dur-fast: .35s; --tbh-dur: .6s; --tbh-dur-slow: 1.1s; /* ---- Nav row geometry ---- Shared so the overlay's close button can sit on exactly the same baseline as the Menu trigger it replaces, instead of guessing an offset. */ --tbh-nav-pad: clamp(.85rem, 1.4vw, 1.5rem); --tbh-nav-logo: clamp(56px, 5.6vw, 76px); /* ---- Layering ---- */ --tbh-z-nav: 900; --tbh-z-overlay: 1000; --tbh-z-lightbox: 3000; /* photo viewer: above nav + overlay, below the veil and cursor */ --tbh-z-veil: 3500; /* page transition: above the overlay, below the cursor */ --tbh-z-cursor: 4000; }