/* =========================================================================== tokens.css — GAMOS-SITE single source of design truth --------------------------------------------------------------------------- Spec: architecture/tokens.md (LOCKED 2026-05-28 by Agent 02) Constitution: CLAUDE.md §4 (Typography), §5 (Palette), §10.2 (Tokens are single-source — any hard-coded value elsewhere is a bug). Owner: Agent 02 — Brand & Typography --------------------------------------------------------------------------- RULES - No raw hex outside the brand block. Every semantic token references a brand token via var(...). - All numeric scales reference each other where possible. - WOFF2 only, self-hosted at /assets/fonts/, font-display: swap mandatory. ========================================================================= */ /* --------------------------------------------------------------------------- 1. @font-face — self-hosted WOFF2 (font-display: swap, unicode-range hints) --------------------------------------------------------------------------- The browser only downloads a face when a glyph in its unicode-range is actually rendered, so listing Hebrew + Latin sub-faces lets the cascade pick the right file per glyph automatically (covers numerals/punctuation inside Hebrew copy without forcing two full webfonts). --------------------------------------------------------------------------- */ /* ---- Rubik (Hebrew + Latin display) ---- Replaces Frank Ruhl Libre as the display family per user direction (2026-06-02): the literary serif read too "writerly"; Rubik is a modern geometric humanist that flows in Hebrew without losing premium weight. The WOFF2 is a VARIABLE font (wght axis 300–900, verified via fvar). Each face is declared as a `font-weight` RANGE (not a discrete value) so the browser renders the exact requested weight from the variable file — pinning to 700/900 made any lighter token snap back to 700. Lightened site-wide 2026-06-15 per user request (text felt too bold/heavy). Loaded for both Hebrew + Latin so eyebrows like "GAMOS EVENTS" use the same family as the Hebrew titles. */ @font-face { font-family: "Rubik"; font-style: normal; font-weight: 300 900; font-display: swap; src: url("../assets/fonts/rubik-hebrew.woff2") format("woff2"); unicode-range: U+0307-0308, U+0590-05FF, U+200C-2010, U+20AA, U+25CC, U+FB1D-FB4F; } @font-face { font-family: "Rubik"; font-style: normal; font-weight: 300 900; font-display: swap; src: url("../assets/fonts/rubik-latin.woff2") format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; } /* ---- Heebo (Hebrew + Latin body) ---- Variable font (wght axis 100–900, verified via fvar); the 400/500/600 files are byte-identical, so one face with a `font-weight` RANGE serves the whole body-weight span from the single VF — the browser renders the exact token weight (incl. the lighter 350 default set 2026-06-15). */ @font-face { font-family: "Heebo"; font-style: normal; font-weight: 100 900; /* `optional` (not `swap`) — Heebo is the above-the-fold hero text + body face, so a swap-in mid-view = the letter flicker the user reported (FOUT metric shift). `optional` gives a ~100ms block then locks the choice for the view: with the head preload (index.html) Heebo wins that race → real font, zero flash; on a cold/slow link it shows a STABLE fallback with no late swap. Deliberate deviation from the "swap" convention noted above — FOUC fix 2026-06-16. Other faces keep `swap`. */ font-display: optional; src: url("../assets/fonts/heebo-400.woff2") format("woff2"); unicode-range: U+0020-007E, U+00A0-00FF, U+0590-05FF, U+200C-2010, U+20AA, U+25CC, U+FB1D-FB4F; } /* ---- Playfair Display (Latin display only — used for English flourishes) ---- */ @font-face { font-family: "Playfair Display"; font-style: normal; font-weight: 400; font-display: swap; src: url("../assets/fonts/playfair-display-400.woff2") format("woff2"); unicode-range: U+0020-007E, U+00A0-00FF, U+0152-0153, U+02BB-02BC, U+2010-2027, U+20AC; } @font-face { font-family: "Playfair Display"; font-style: normal; font-weight: 700; font-display: swap; src: url("../assets/fonts/playfair-display-700.woff2") format("woff2"); unicode-range: U+0020-007E, U+00A0-00FF, U+0152-0153, U+02BB-02BC, U+2010-2027, U+20AC; } /* ---- Cinzel (Latin display only — used for the hero "Events"/"Resort" labels, mirroring the all-caps engraved feel of the GAMOS wordmark) ---- */ @font-face { font-family: "Cinzel"; font-style: normal; font-weight: 700; font-display: swap; src: url("../assets/fonts/cinzel-700.woff2") format("woff2"); unicode-range: U+0020-007E, U+00A0-00FF; } /* Bodoni Moda removed 2026-06-02 — the Hero wordmark is now an of the central Gamos logo (assets/images/brand/logo-central.webp), so no subsetted Latin Didone is needed in the font cascade. */ /* --------------------------------------------------------------------------- 2. :root tokens --------------------------------------------------------------------------- */ :root { /* ===== 2.1 Brand palette (LOCKED 2026-05-28 by Agent 01 — CLAUDE.md §5) ===== Pulled from gamos.co.il scrape (BRANDING.JSON) and upgraded per "Luxury or nothing" principle. Maximum 5 active colors at a time. */ --brass: #CFAE83; /* PRIMARY — live brand color, unchanged */ --brass-deep: #8B6F46; /* hover/active — derived */ --brass-glow: #D4B98A; /* glow / highlight */ --brass-olive: #857147; /* v10 hero title accent + eyebrow (2026-06-15) — warm olive-brass from the findrealestate hero; sits between brass + brass-deep. */ --cocoa: #534133; /* SECONDARY — live brand color, unchanged */ --ivory: #F5EFE6; /* surface — replaces live #FFFFFF */ --ivory-warm: #ECE3D3; /* warm tint */ --mist: #E8DFD3; /* surface tint, light fade */ --ink-deep: #1A1410; /* body text — warm near-black, replaces #000 */ --ink-medium: #2A2A28; /* subtle borders */ --accent-rose: #B8576F; /* CTA accent — replaces live #CC3366 */ /* ===== 2.2 Semantic colors (reference brand only) ===== */ --bg: var(--ivory); --bg-alt: var(--ivory-warm); --bg-tint: var(--mist); --bg-dark: var(--ink-deep); --bg-cocoa: var(--cocoa); --fg: var(--ink-deep); --fg-muted: #6B6B68; --fg-on-dark: var(--ivory); --accent: var(--brass); --accent-hover: var(--brass-deep); --accent-glow: var(--brass-glow); --accent-cta: var(--accent-rose); --border: rgba(26, 20, 16, 0.12); --border-strong: rgba(26, 20, 16, 0.24); --shadow-soft: 0 8px 24px rgba(26, 20, 16, 0.06); --shadow-strong: 0 24px 60px rgba(26, 20, 16, 0.16); --focus-ring: 0 0 0 3px var(--brass); /* Offset focus ring for image/hotspot CTAs (hero CTAs, portals, hero cue, rooms door). A double box-shadow gives the "outline + gap" look that the bespoke `outline: 3px … ; outline-offset: 4-6px` rules used to fake, but stays token-driven, works over photographs, and matches the .btn focus grammar. The inner ring is the bg color so the gap reads on any surface. */ --focus-ring-offset: 0 0 0 4px var(--bg), 0 0 0 7px var(--brass); /* ===== 2.2c Media scrims + on-dark text (LOCKED 2026-06-15 — unify pass) ===== Single source for "legible text over media". Replaces three divergent, hard-coded gradient formulas (scroll-scene rgba(14,14,12,…), lounge rgba(26,20,16,…), culinary rgba(14,14,12,…)) with one ink-deep base. --scrim-strong : heavy bottom wash for tight caption boxes (lounge figcaption, culinary item caption). --scrim-overlay : gentler, taller fade for large text overlays (scroll-scene section header over canvas/video). --fg-on-dark-muted : the ONE translucent-ivory method for secondary body text over media (replaces the color-mix-88% vs opacity-0.9 split). */ --scrim-strong: linear-gradient(to top, color-mix(in srgb, var(--ink-deep) 85%, transparent) 0%, color-mix(in srgb, var(--ink-deep) 55%, transparent) 45%, transparent 78%); --scrim-overlay: linear-gradient(to top, color-mix(in srgb, var(--ink-deep) 72%, transparent) 0%, color-mix(in srgb, var(--ink-deep) 45%, transparent) 30%, color-mix(in srgb, var(--ink-deep) 10%, transparent) 65%, transparent 100%); --fg-on-dark-muted: color-mix(in srgb, var(--ivory) 88%, transparent); /* ===== 2.2b Texture fills (background-clip:text headings) ===== 2026-06-03 RENAMED for clarity. The previous typo-light/typo-dark pair was mapped backwards: the file labeled "dark" was actually the light texture, so titles disappeared into the background on every page. New names describe the SURFACE the fill sits on: --typo-on-light : DARK texture (gold flecks on near-black) — for titles/eyebrows on ivory/cream surfaces (dominant case site-wide). --typo-on-dark : LIGHT texture (cream + gold) — for titles/eyebrows on cocoa/dark surfaces (Hero, halls, kosher, culinary, footer). Legacy --typo-light/--typo-dark aliases removed; texture-text.css now references the new names directly. */ --typo-on-light: url("/assets/images/brand/typo-on-light.webp?v=2026-06-15-brown"); --typo-on-dark: url("/assets/images/brand/typo-on-dark.webp?v=2026-06-15-brown"); --texture-light: url("/assets/images/brand/texture-light.webp"); --texture-dark: url("/assets/images/brand/texture-dark.webp"); /* ===== 2.3 Typography — families ===== */ /* Display family — modern Hebrew + Latin (Rubik). Replaced Frank Ruhl Libre on 2026-06-02 per user direction ("the literary serif feels too writerly; want modern + flowing"). Same family powers BOTH Hebrew headings and English eyebrows like "GAMOS EVENTS". */ --font-display-he: "Rubik", "Heebo", "Arial", sans-serif; --font-display-en: "Rubik", "Helvetica Neue", "Arial", sans-serif; --font-display-luxury: var(--font-display-he); /* legacy alias */ --font-body: "Heebo", "Arial", sans-serif; --font-mono: ui-monospace, "Menlo", "Consolas", monospace; /* ===== 2.4 Type scale (modular ratio 1.250) ===== */ --text-xs: 0.75rem; /* 12px */ --text-sm: 0.875rem; /* 14px */ --text-base: 1rem; /* 16px */ --text-md: 1.25rem; /* 20px */ --text-lg: 1.563rem; /* 25px */ --text-xl: 1.953rem; /* 31px */ --text-2xl: 2.441rem; /* 39px */ --text-3xl: 3.052rem; /* 49px */ --text-4xl: 3.815rem; /* 61px */ --text-hero: clamp(3.5rem, 9vw, 8rem); /* 56–128px */ /* ===== 2.5 Weights ===== */ /* Lightened ~one half-step site-wide 2026-06-15 (text felt too bold/heavy). Rubik + Heebo are variable fonts (see @font-face range blocks above), so these render exactly — no font files added. Revert to 400/500/600/700 to undo. */ --fw-regular: 350; --fw-medium: 400; --fw-semibold: 500; --fw-bold: 600; /* ===== 2.6 Line heights ===== */ --lh-tight: 1.05; --lh-snug: 1.2; --lh-normal: 1.5; --lh-loose: 1.7; /* ===== 2.7 Letter spacing ===== */ --tracking-tight: -0.02em; --tracking-normal: 0; --tracking-wide: 0.05em; --tracking-eyebrow: 0.18em; /* ===== 2.8 Spacing (4px base) ===== */ --space-1: 0.25rem; /* 4px */ --space-2: 0.5rem; /* 8px */ --space-3: 0.75rem; /* 12px */ --space-4: 1rem; /* 16px */ --space-5: 1.25rem; /* 20px */ --space-6: 1.5rem; /* 24px */ --space-8: 2rem; /* 32px */ --space-10: 2.5rem; /* 40px */ --space-12: 3rem; /* 48px */ --space-16: 4rem; /* 64px */ --space-20: 5rem; /* 80px — fills the 16→24 gap; consumed by scroll-scene */ --space-24: 6rem; /* 96px */ --space-32: 8rem; /* 128px */ /* ===== 2.8b Section rhythm (LOCKED 2026-06-15 — unify pass) ===== Named section-padding tokens so every scroll section shares ONE vertical rhythm instead of re-declaring padding-block. Sections converge on these (and the .section utility in layout.css consumes them too). */ --section-pad: var(--space-32); /* 128px — default section rhythm */ --section-pad-tight: var(--space-24); /* 96px — denser sections (kosher) */ --section-pad-hero-gap: 25vh; /* lounge top: deliberate post-hero pause */ /* ===== 2.9 Radii ===== */ --radius-sm: 4px; --radius-md: 8px; --radius-lg: 16px; --radius-xl: 24px; --radius-pill: 9999px; --radius-circle: 50%; --radius-btn: 0; /* editorial CTA/chip/icon radius — sharp corners (de-pill 2026-06-15) */ /* ===== 2.9b Component tokens ===== */ --card-zoom: 1.04; /* unified media-card hover zoom — single source of truth */ /* ===== 2.10 Layout ===== */ --container-max: 1320px; --container-narrow: 880px; --container-wide: 1480px; --gutter: clamp(1rem, 4vw, 2.5rem); /* ===== 2.11 Motion durations ===== */ --dur-fast: 160ms; --dur-base: 240ms; --dur-slow: 360ms; --dur-deluxe: 600ms; --dur-cinema: 1000ms; /* ===== 2.12 Easings ===== */ --ease-out-cinema: cubic-bezier(0.2, 0.8, 0.2, 1); --ease-cue: cubic-bezier(0.55, 0, 0.55, 1); /* symmetric scroll-cue curve (hero + press cue-fall) */ --ease-linear: linear; /* ===== 2.13 Z-index scale ===== */ --z-base: 0; --z-content: 10; --z-sticky: 100; --z-overlay: 1000; --z-modal: 2000; --z-toast: 3000; } /* --------------------------------------------------------------------------- 3. Global typography defaults — referenced everywhere via these tokens. Sets Hebrew body as default; display tokens applied per-element. --------------------------------------------------------------------------- */ html { /* Smooth Hebrew + Latin shaping; harmless on modern engines. */ font-feature-settings: "kern" 1, "liga" 1, "calt" 1; text-rendering: optimizeLegibility; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } body { font-family: var(--font-body); font-weight: var(--fw-regular); font-size: var(--text-base); line-height: var(--lh-normal); color: var(--fg); background: var(--bg); } /* Reduced-motion respect at the token layer (per CLAUDE.md §8). */ @media (prefers-reduced-motion: reduce) { :root { --dur-fast: 0.01ms; --dur-base: 0.01ms; --dur-slow: 0.01ms; --dur-deluxe: 0.01ms; --dur-cinema: 0.01ms; } } /* Shabbat-chatan scroll tint cycle — image-derived SOFT PASTELS. User-authorised §5 exception for this one section: each tint keeps the dominant HUE of the photo it's paired with (panel N ↔ image N) but is pastelized (high lightness, tempered saturation) so the background is an airy soft tint that still matches the picture on screen. Because the tints are light, the heading + title texture stay --dark (js/shabbat-gallery.js's luma flip leaves them dark above its threshold). The values below are GENERATED by scripts/extract-shabbat-tints.mjs — do not hand-edit between the sentinels; re-run `npm run extract:shabbat-tints` after changing the source images. Logged in §12 Maintenance Log 2026-06-10. */ :root { /* >>> shabbat-tints (generated by scripts/extract-shabbat-tints.mjs — do not edit by hand) */ --shabbat-tint-1: #e7e0da; /* from 01.full.webp */ --shabbat-tint-2: #e7dadc; /* from 03.full.webp */ --shabbat-tint-3: #e7deda; /* from 05.full.webp */ --shabbat-tint-4: #e7deda; /* from 07.full.webp */ --shabbat-tint-5: #dae3e7; /* from 09.full.webp */ /* <<< shabbat-tints */ --shabbat-tint: var(--shabbat-tint-1); }