/* ========================================================================== EZEEMABI HUB: DESIGN TOKENS Art direction: "Obsidian & Gold" (dark) with an "Ivory & Bronze" light theme. HOW THIS FILE IS ORGANISED 1. RAW PALETTES every colour literal, written exactly once. --d-* is the dark set, --l-* is the light set. 2. ROLE TOKENS what the rest of the site actually uses. These point at a raw value and get repointed when the theme changes. 3. LIGHT THEME repoints the role tokens at the --l-* palette. 4. DARK ISLANDS repoints them back to --d-* for sections built on full-bleed photography, which stay dark in both themes. 5. NON-COLOUR type, space, motion, shape, layers. Theme-independent. READ THE ROLE NAMES AS ROLES, NOT COLOURS: --ink-* is always "a surface" (dark in dark mode, ivory in light) --ivory-* is always "text on that surface" That is why they appear to invert. Nothing else in the site hard-codes a colour, so a palette change here propagates everywhere. ========================================================================== */ :root{ /* ======================================================= 1. RAW PALETTES */ /* ---- Dark: Obsidian & Gold -------------------------------------------- */ --d-ink-950:#050506; /* deepest: preloader, footer, menu */ --d-ink-900:#08080A; /* page ground */ --d-ink-850:#0B0B0C; /* alternate section ground */ --d-ink-800:#101013; /* raised surface, inputs */ --d-ink-750:#141418; /* card */ --d-ink-700:#1A1A1F; /* card hover */ --d-ink-650:#232329; /* border on raised surface */ --d-text:#F4F1EA; /* primary text */ --d-text-80:rgba(244,241,234,.80); --d-text-60:rgba(244,241,234,.60); /* body copy */ --d-text-45:rgba(244,241,234,.45); /* secondary, captions */ --d-text-30:rgba(244,241,234,.30); --d-text-14:rgba(244,241,234,.14); --d-gold:#C9A227; --d-gold-bright:#E3C05A; --d-gold-pale:#EBDCA8; /* gold-tinted text */ --d-gold-deep:#8C6F14; --d-gold-08:rgba(201,162,39,.08); --d-gold-15:rgba(201,162,39,.15); --d-gold-30:rgba(201,162,39,.30); --d-gold-50:rgba(201,162,39,.50); --d-line:rgba(244,241,234,.09); --d-line-strong:rgba(244,241,234,.16); --d-nav-bg:rgba(8,8,10,.78); --d-shadow-card:0 24px 60px -24px rgba(0,0,0,.85); --d-shadow-lift:0 36px 90px -30px rgba(0,0,0,.9); /* The lit top edge of a raised surface. This one line is most of what makes a card read as a physical object rather than a coloured rectangle. */ --d-edge:inset 0 1px 0 rgba(255,255,255,.055); --d-fig-edge:none; /* Elevation on dark cannot be a shadow: black on near-black shows nothing. A raised surface announces itself with a faint gold halo instead. */ --d-glow:0 0 70px -16px rgba(201,162,39,.22); /* Photographic grade. Mixed-source imagery is desaturated, warmed and darkened so the whole library reads as one commissioned shoot. Applied ONCE, here. The files themselves carry only correction: white balance, LED colour-cast removal and sharpening. */ --d-grade:saturate(.78) sepia(.06) contrast(1.06) brightness(.90); --d-grade-hover:saturate(.94) sepia(.02) contrast(1.04) brightness(1.02); --d-grade-deep:saturate(.6) sepia(.12) contrast(1.06) brightness(.5); /* ---- Light: Stone & Bronze --------------------------------------------- The first two attempts failed for one reason: the ground was near-white, and so is this venue's photography (white chair covers, cream linen, pale drapes). Picture and page were the same brightness, so every image dissolved into the background and the whole thing read washed out. The ground is now warm stone, clearly DARKER than the photographs. The pictures become the light in the room, exactly as they do on the dark theme, and raised surfaces sit LIGHTER than the ground so cards lift. */ --l-ink-950:#C9BFA8; /* deepest: footer, menu, deep sections */ --l-ink-900:#E3DCCB; /* page ground: warm stone */ --l-ink-850:#DAD2BD; /* alternate section, a clear step down */ --l-ink-800:#F3EEE2; /* raised surface, inputs: LIGHTER than ground */ --l-ink-750:#F3EEE2; /* card */ --l-ink-700:#FBF8F1; /* card hover, the brightest note */ --l-ink-650:#B7AC91; /* border on raised surface */ --l-text:#14110A; /* ~13.8:1 on stone */ --l-text-80:rgba(20,17,10,.88); --l-text-60:rgba(20,17,10,.78); --l-text-45:rgba(20,17,10,.66); /* clears 4.7:1 on stone */ --l-text-30:rgba(20,17,10,.48); --l-text-14:rgba(20,17,10,.18); --l-gold:#6B5416; /* ~6.1:1 on stone */ --l-gold-bright:#8A6D1E; --l-gold-pale:#4E3D0F; --l-gold-deep:#C9A227; --l-gold-08:rgba(107,84,22,.07); --l-gold-15:rgba(107,84,22,.15); --l-gold-30:rgba(107,84,22,.30); --l-gold-50:rgba(107,84,22,.52); --l-line:rgba(20,17,10,.14); --l-line-strong:rgba(20,17,10,.22); --l-nav-bg:rgba(227,220,203,.88); --l-shadow-card:0 1px 2px rgba(48,38,14,.07), 0 16px 34px -14px rgba(48,38,14,.22); --l-shadow-lift:0 2px 6px rgba(48,38,14,.09), 0 38px 70px -26px rgba(48,38,14,.30); --l-edge:inset 0 1px 0 rgba(255,255,255,.75); /* Every photograph gets a hairline mat and a cast shadow, so it reads as a print hung on the wall rather than a rectangle floating on a colour. */ --l-fig-edge:0 0 0 1px rgba(20,17,10,.16), 0 20px 44px -20px rgba(48,38,14,.34); --l-glow:0 0 0 0 rgba(0,0,0,0); /* On stone the photographs are the light source, so they stay bright. */ --l-grade:saturate(.90) sepia(.02) contrast(1.02) brightness(1.02); --l-grade-hover:saturate(1) sepia(0) contrast(1.02) brightness(1.05); --l-grade-deep:saturate(.6) sepia(.12) contrast(1.06) brightness(.5); /* Fixed overlays that sit above both ivory content and dark photography, so they cannot follow the theme. */ --cursor-gold:#C9A227; --cursor-ring:rgba(201,162,39,.5); /* ====================================================== 2. ROLE TOKENS Dark is the default: no data-theme attribute means Obsidian & Gold. */ color-scheme:dark; --ink-950:var(--d-ink-950); --ink-900:var(--d-ink-900); --ink-850:var(--d-ink-850); --ink-800:var(--d-ink-800); --ink-750:var(--d-ink-750); --ink-700:var(--d-ink-700); --ink-650:var(--d-ink-650); --ivory:var(--d-text); --ivory-80:var(--d-text-80); --ivory-60:var(--d-text-60); --ivory-45:var(--d-text-45); --ivory-30:var(--d-text-30); --ivory-14:var(--d-text-14); --gold:var(--d-gold); --gold-bright:var(--d-gold-bright); --gold-pale:var(--d-gold-pale); --gold-deep:var(--d-gold-deep); --gold-08:var(--d-gold-08); --gold-15:var(--d-gold-15); --gold-30:var(--d-gold-30); --gold-50:var(--d-gold-50); --line:var(--d-line); --line-strong:var(--d-line-strong); --nav-bg:var(--d-nav-bg); --shadow-card:var(--d-shadow-card); --shadow-lift:var(--d-shadow-lift); --edge:var(--d-edge); --fig-edge:var(--d-fig-edge); --glow:var(--d-glow); --grade:var(--d-grade); --grade-hover:var(--d-grade-hover); --grade-deep:var(--d-grade-deep); --success:#5FA777; --danger:#C46A5A; /* ==================================================== 5. NON-COLOUR ---- */ /* ------------------------------------------------------------ TYPEFACES */ --ff-display:'Cormorant Garamond',ui-serif,'Iowan Old Style','Times New Roman',serif; --ff-body:'Manrope',-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,Helvetica,Arial,sans-serif; --ff-mono:ui-monospace,'SF Mono',SFMono-Regular,Menlo,Consolas,monospace; /* Weights. Cormorant is a high-contrast face: below 500 its hairlines shimmer and half-vanish against a near-black ground, so display sits at 500 and body copy at 400. Never drop display below 500. */ --fw-display:500; --fw-display-alt:600; --fw-body:400; /* ----------------------------------------------------------- TYPE SCALE Fluid across the whole viewport range so nothing needs breakpoints. */ --fs-hero:clamp(2.9rem,1rem + 6.6vw,7.4rem); --fs-d1:clamp(2.5rem,1.35rem + 4.9vw,5.75rem); --fs-d2:clamp(2rem,1.3rem + 3.1vw,3.9rem); --fs-d3:clamp(1.55rem,1.22rem + 1.5vw,2.4rem); --fs-d4:clamp(1.2rem,1.08rem + .6vw,1.55rem); --fs-lead:clamp(1.0625rem,1rem + .42vw,1.3125rem); --fs-body:clamp(.9688rem,.94rem + .14vw,1.0625rem); --fs-sm:.875rem; --fs-xs:.8125rem; --fs-eyebrow:.6875rem; --lh-tight:.98; --lh-display:1.06; --lh-body:1.72; --ls-eyebrow:.3em; /* uppercase micro-labels */ --ls-caps:.16em; /* uppercase buttons / nav */ --ls-display:-.018em; /* large serif wants slight negative tracking */ --ls-body:-.005em; /* Manrope sets wide; pull it in very slightly */ /* --------------------------------------------------------------- SPACE */ --sp-1:.25rem; --sp-2:.5rem; --sp-3:.75rem; --sp-4:1rem; --sp-5:1.5rem; --sp-6:2rem; --sp-7:3rem; --sp-8:4rem; --sp-9:6rem; --sp-10:8rem; --section-y:clamp(4rem,2.4rem + 6.2vw,8.75rem); /* vertical section rhythm */ --gutter:clamp(1.25rem,.35rem + 3.6vw,4.5rem); /* page side padding */ --maxw:78rem; /* standard content column */ --maxw-wide:100rem; /* full-bleed-ish containers */ --maxw-text:42rem; /* comfortable measure */ /* -------------------------------------------------------------- SHAPE */ --radius:2px; /* luxury reads sharp: near-zero radius everywhere */ --radius-lg:3px; /* -------------------------------------------------------------- LIFT Hover elevation is applied with the independent `translate` property, never `transform`. The scroll-reveal system owns `transform`, and using both on one element makes whichever loads last silently win. */ --lift:-6px; /* large media cards */ --lift-sm:-2px; /* buttons, chips, small controls */ /* -------------------------------------------------------------- MOTION */ --ease-luxe:cubic-bezier(.22,1,.36,1); /* the house easing */ --ease-out:cubic-bezier(.16,1,.3,1); --ease-io:cubic-bezier(.65,0,.35,1); --dur-1:.24s; --dur-2:.5s; --dur-3:.9s; --dur-4:1.3s; /* --------------------------------------------------------------- LAYER */ --z-grain:9000; --z-nav:8000; --z-menu:8500; --z-lightbox:9200; --z-cursor:9500; --z-preloader:9800; } /* ========================================================================== 3. LIGHT THEME Set by the toggle button and remembered in localStorage. Dark stays the default so every first-time visitor lands on the brand palette. ========================================================================== */ :root[data-theme="light"]{ color-scheme:light; --ink-950:var(--l-ink-950); --ink-900:var(--l-ink-900); --ink-850:var(--l-ink-850); --ink-800:var(--l-ink-800); --ink-750:var(--l-ink-750); --ink-700:var(--l-ink-700); --ink-650:var(--l-ink-650); --ivory:var(--l-text); --ivory-80:var(--l-text-80); --ivory-60:var(--l-text-60); --ivory-45:var(--l-text-45); --ivory-30:var(--l-text-30); --ivory-14:var(--l-text-14); --gold:var(--l-gold); --gold-bright:var(--l-gold-bright); --gold-pale:var(--l-gold-pale); --gold-deep:var(--l-gold-deep); --gold-08:var(--l-gold-08); --gold-15:var(--l-gold-15); --gold-30:var(--l-gold-30); --gold-50:var(--l-gold-50); --line:var(--l-line); --line-strong:var(--l-line-strong); --nav-bg:var(--l-nav-bg); --shadow-card:var(--l-shadow-card); --shadow-lift:var(--l-shadow-lift); --edge:var(--l-edge); --fig-edge:var(--l-fig-edge); --glow:var(--l-glow); --grade:var(--l-grade); --grade-hover:var(--l-grade-hover); --grade-deep:var(--l-grade-deep); } /* ========================================================================== 4. DARK ISLANDS Sections built on full-bleed photography keep the dark palette in BOTH themes, because ivory type over a photograph is the only thing that reads. The lightbox stays dark for the same reason every photo viewer does. This block must sit AFTER the light theme to win on source order (both selectors carry the same specificity). No colour literals are repeated: it simply repoints the role tokens back at the --d-* palette. ========================================================================== */ :root[data-theme="light"] .phero, :root[data-theme="light"] .ctaband, :root[data-theme="light"] .space, :root[data-theme="light"] .gitem, :root[data-theme="light"] .slet__flag, :root[data-theme="light"] .hero__badge, :root[data-theme="light"] .lb{ --ink-900:var(--d-ink-900); --ink-850:var(--d-ink-850); --ink-800:var(--d-ink-800); --ink-750:var(--d-ink-750); --ivory:var(--d-text); --ivory-80:var(--d-text-80); --ivory-60:var(--d-text-60); --ivory-45:var(--d-text-45); --ivory-30:var(--d-text-30); --ivory-14:var(--d-text-14); --gold:var(--d-gold); --gold-bright:var(--d-gold-bright); --gold-pale:var(--d-gold-pale); --gold-08:var(--d-gold-08); --gold-15:var(--d-gold-15); --gold-30:var(--d-gold-30); --gold-50:var(--d-gold-50); --line:var(--d-line); --line-strong:var(--d-line-strong); --shadow-lift:var(--d-shadow-lift); --edge:var(--d-edge); --fig-edge:var(--d-fig-edge); --glow:var(--d-glow); --grade:var(--d-grade); --grade-hover:var(--d-grade-hover); --grade-deep:var(--d-grade-deep); } /* The nav is transparent until you scroll, so at the very top of the page it floats over the hero photograph and must keep the dark palette even in light mode. Once it gains .is-stuck it has its own --nav-bg surface and flips. */ :root[data-theme="light"] body:not([data-page="index.html"]) .nav:not(.is-stuck){ --ivory:var(--d-text); --ivory-80:var(--d-text-80); --ivory-60:var(--d-text-60); --ivory-45:var(--d-text-45); --ivory-30:var(--d-text-30); --gold:var(--d-gold); --gold-pale:var(--d-gold-pale); --gold-08:var(--d-gold-08); --gold-50:var(--d-gold-50); --ink-900:var(--d-ink-900); --line:var(--d-line); --line-strong:var(--d-line-strong); } /* Users who ask for less motion get a static, still-beautiful site. */ @media (prefers-reduced-motion:reduce){ :root{ --dur-1:.01ms; --dur-2:.01ms; --dur-3:.01ms; --dur-4:.01ms; } }