/* =========================================================================== 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; } /* ---- Canela (Latin display — English headings, per user 2026-07-01) ------ High-contrast humanist serif (Commercial Type). Self-hosted WOFF2, converted from the user's Canela-Regular.ttf. Weight 400 only; used for English display headings + hero. §4.1: adopted on explicit user request. */ @font-face { font-family: "Canela"; font-style: normal; font-weight: 400; font-display: swap; src: url("/assets/fonts/canela-regular.woff2") format("woff2"); /* French display copy needs glyphs above Latin-1: œ/Œ (bœuf, cœur), en/em dashes, curly quotes and the ellipsis. All verified present in the woff2, so the browser renders Canela for them instead of falling through to the Playfair fallback (which produced one mismatched serif glyph mid-heading). */ unicode-range: U+0020-007E, U+00A0-00FF, U+0152-0153, U+2013-2014, U+2018-201D, U+2026; } /* ---- Non-Hebrew display font (2026-07-01, extended to French 2026-07-02) --- When the site is switched to any Latin-script language (js/i18n.js sets html[lang="en"] or html[lang="fr"]), the DISPLAY family becomes Canela — an elegant high-contrast serif — instead of Rubik. Body copy stays Heebo for readability (classic serif-display / sans-body luxury pairing). html:not([lang="he"]) (0,1,1) outranks :root (0,1,0), so these win regardless of source order — and cover en, fr, and any future non-Hebrew language. */ html:not([lang="he"]) { --font-display-he: "Canela", "Playfair Display", serif; --font-display-en: "Canela", "Playfair Display", serif; --font-display-luxury: "Canela", "Playfair Display", serif; /* Only Canela Regular (400) is self-hosted, but headings request 700 → the browser faux-bolds the single face and thickens the strokes. Disable weight synthesis so Canela renders at its true, thinner Regular. */ font-synthesis-weight: none; } /* 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); /* Darkened #6B6B68 → #5E5E5B on 2026-07-21 (a11y pass): the old value passed on --ivory (4.68) but FAILED WCAG AA on the warmer light surfaces it also lands on — 4.20 on --ivory-warm (gallery), 4.05 on --mist (testimonials). #5E5E5B clears 4.5 on all three (ivory 5.69 / ivory-warm 5.11 / mist 4.93). */ --fg-muted: #5E5E5B; --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); --shadow-image: 0 30px 80px -40px rgba(26, 20, 16, 0.45); /* deep lift for large image cards (shabbat) */ /* Two-tone focus ring (AMENDED 2026-07-21, a11y pass). Was a single 3px --brass box-shadow, but brass-on-ivory = 1.83:1 fails WCAG 1.4.11 (≥3:1 for a non-text indicator) on every light surface. No single flat token clears 3:1 everywhere: brass fails on light, brass-deep fails on cocoa (2.05). A two-tone ring is bulletproof because at least ONE band always contrasts ≥3:1 with the surface — the ivory gap carries dark surfaces (ivory↔cocoa 8.46, ivory↔ink-deep ~15) and the brass-deep band carries light surfaces (brass-deep↔ivory 4.12 / ivory-warm 3.70 / mist 3.57). Inner tone is hard --ivory (not --bg) so the gap is guaranteed LIGHT even if a section rescopes --bg. */ --focus-ring: 0 0 0 2px var(--ivory), 0 0 0 5px var(--brass-deep); /* 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-07-21-slim"); --typo-on-dark: url("/assets/images/brand/typo-on-dark.webp?v=2026-07-21-slim"); --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: #e7deda; /* from 01.full.webp */ --shabbat-tint-2: #e7e0da; /* from 02.full.webp */ --shabbat-tint-3: #e7e6da; /* from 03.full.webp */ --shabbat-tint-4: #e7dfda; /* from 04.full.webp */ --shabbat-tint-5: #e4e7da; /* from 05.full.webp */ --shabbat-tint-6: #e7e2da; /* from 06.full.webp */ /* <<< shabbat-tints */ --shabbat-tint: var(--shabbat-tint-1); } /* ============================================================ GAMOS-SITE — base.css Modern reset + RTL-aware typography defaults + a11y primitives All visual values derive from var(--*) tokens (css/tokens.css). Cascade order: tokens → base → layout → utilities → sections/* ============================================================ */ @layer base, layout, utilities, sections; @layer base { /* ----- Modern reset (Andy Bell-flavoured) ----- */ *, *::before, *::after { box-sizing: border-box; } html, body, h1, h2, h3, h4, h5, h6, p, figure, blockquote, dl, dd, ul, ol { margin: 0; padding: 0; } ul[role="list"], ol[role="list"] { list-style: none; } /* Form elements inherit typography by default */ input, button, textarea, select { font: inherit; color: inherit; } button { background: none; border: 0; cursor: pointer; padding: 0; } /* Avoid orphans on paragraphs */ p, li, figcaption { text-wrap: pretty; } h1, h2, h3, h4, h5, h6 { text-wrap: balance; } /* ----- Root + body ----- */ html { font-family: var(--font-body); font-size: 16px; line-height: var(--lh-normal); -webkit-text-size-adjust: 100%; text-size-adjust: 100%; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; /* NO `scroll-behavior: smooth` (2026-06-10). All in-page anchor scrolls run through GSAP ScrollToPlugin (js/scrollytelling.js global handler + side-dot-nav). Native smooth-scroll re-animates every per-frame window.scrollTo() the plugin makes — the two fight, and `autoKill` reads the conflict as a user scroll and kills the tween early (this is why the hero cue click never reached #lounge). The reduced-motion block below already forces `auto`; default (no declaration) is also `auto`. */ /* RTL is set on in HTML; CSS uses logical props. */ } body { background: var(--bg); color: var(--fg); font-size: var(--text-base); line-height: var(--lh-normal); font-weight: var(--fw-regular); font-feature-settings: "kern" 1, "liga" 1; min-height: 100vh; min-height: 100dvh; text-align: start; overflow-x: hidden; } /* ----- Headings (Hebrew display by default) ----- */ h1, h2, h3, h4, h5, h6 { font-family: var(--font-display-he); font-weight: var(--fw-bold); color: var(--fg); letter-spacing: var(--tracking-tight); } h1 { font-size: var(--text-4xl); line-height: var(--lh-tight); } h2 { font-size: var(--text-3xl); line-height: var(--lh-tight); } h3 { font-size: var(--text-2xl); line-height: var(--lh-snug); } h4 { font-size: var(--text-xl); line-height: var(--lh-snug); font-weight: var(--fw-semibold); } h5 { font-size: var(--text-lg); line-height: var(--lh-snug); font-weight: var(--fw-semibold); } h6 { font-size: var(--text-md); line-height: var(--lh-normal); font-weight: var(--fw-medium); } /* ----- Paragraph + inline text ----- */ p { max-inline-size: 70ch; line-height: var(--lh-normal); } small { font-size: var(--text-sm); } strong, b { font-weight: var(--fw-bold); } em, i { font-style: italic; } /* ----- Links ----- */ a { color: inherit; text-decoration: none; transition: color var(--dur-fast) var(--ease-out-cinema); } a:hover, a:focus-visible { color: var(--accent); } /* ----- Lists ----- */ ul, ol { padding-inline-start: var(--space-6); } /* ----- Media ----- */ img, video, picture, svg, canvas { max-inline-size: 100%; max-width: 100%; display: block; block-size: auto; height: auto; } img { font-style: italic; /* alt text styling fallback */ } /* ----- Forms ----- */ input, textarea, select { background: transparent; border: 1px solid var(--border); border-radius: var(--radius-sm); padding-block: var(--space-2); padding-inline: var(--space-3); color: var(--fg); text-align: start; } textarea { resize: vertical; min-block-size: 6rem; } /* ----- Tables ----- */ table { border-collapse: collapse; inline-size: 100%; } th, td { text-align: start; padding-block: var(--space-2); padding-inline: var(--space-3); } /* ----- Horizontal rule ----- */ hr { border: 0; border-block-start: 1px solid var(--border); margin-block: var(--space-8); } /* ----- Selection ----- */ ::selection { background: var(--brass); color: var(--ink-deep); } /* ----- Focus visible (two-tone ivory+brass-deep ring) ----- Site-wide default. Switched from `outline: 3px solid brass` to the token box-shadow on 2026-07-21 (a11y pass): a flat brass ring is 1.83:1 on ivory, failing WCAG 1.4.11. The --focus-ring token is a two-tone box-shadow that clears 3:1 on every surface (see tokens.css). Elements with their own :focus-visible rule (buttons, side-dot, nav, lang) reuse the same token, so the ring is uniform across the site. */ :focus { outline: none; } :focus-visible { outline: none; box-shadow: var(--focus-ring); border-radius: var(--radius-sm); } /* ----- Skip link (visually hidden until focused) ----- */ .skip-link { position: absolute; inset-block-start: var(--space-2); inset-inline-start: var(--space-2); z-index: var(--z-toast); padding-block: var(--space-2); padding-inline: var(--space-4); background: var(--ink-deep); color: var(--ivory); border-radius: var(--radius-sm); font-weight: var(--fw-semibold); transform: translateY(-200%); transition: transform var(--dur-fast) var(--ease-out-cinema); } .skip-link:focus, .skip-link:focus-visible { transform: translateY(0); color: var(--ivory); } /* ----- Reduced motion (global override) ----- */ @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; } html { scroll-behavior: auto; } } } /* Cross-page fade into the halls pages (they opt in too). 2026-10-11, Moshe approved direct entry; replaces the 1.4s loading hold. */ @media (prefers-reduced-motion: no-preference) { @view-transition { navigation: auto; } } /* ============================================================ GAMOS-SITE — layout.css Containers, sections, grid + flex primitives. RTL-aware (logical properties only). ============================================================ */ @layer base, layout, utilities, sections; @layer layout { /* ----- Container ----- */ .container { inline-size: 100%; max-inline-size: var(--container-max); margin-inline: auto; padding-inline: var(--gutter); } .container--narrow { max-inline-size: var(--container-narrow); } .container--wide { max-inline-size: var(--container-wide); } .container--flush { padding-inline: 0; } /* ----- Section ----- */ .section { padding-block: var(--section-pad); /* shared section rhythm token */ position: relative; } .section--tight { padding-block: var(--section-pad-tight); } .section--loose { padding-block: calc(var(--section-pad) + var(--space-16)); } .section--flush { padding-block: 0; } .section--dark { background: var(--bg-dark); color: var(--fg-on-dark); } .section--alt { background: var(--bg-alt); } /* ----- Stack (vertical rhythm) ----- */ .stack > * + * { margin-block-start: var(--space-4); } .stack--sm > * + * { margin-block-start: var(--space-2); } .stack--md > * + * { margin-block-start: var(--space-6); } .stack--lg > * + * { margin-block-start: var(--space-8); } .stack--xl > * + * { margin-block-start: var(--space-12); } /* ----- Grid ----- */ .grid { display: grid; gap: var(--space-6); } .grid--auto-fit { grid-template-columns: repeat(auto-fit, minmax(min(280px, 100%), 1fr)); } .grid--auto-fill { grid-template-columns: repeat(auto-fill, minmax(min(240px, 100%), 1fr)); } .grid--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); } .grid--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); } .grid--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); } /* Responsive collapses (mobile-first) */ @media (max-width: 900px) { .grid--3, .grid--4 { grid-template-columns: repeat(2, minmax(0, 1fr)); } } @media (max-width: 600px) { .grid--2, .grid--3, .grid--4 { grid-template-columns: 1fr; } } /* Span helpers */ .col-span-2 { grid-column: span 2; } .col-span-3 { grid-column: span 3; } .col-span-full { grid-column: 1 / -1; } /* ----- Flex ----- */ .flex { display: flex; gap: var(--space-4); } .flex--inline { display: inline-flex; } .flex--column { flex-direction: column; } .flex--wrap { flex-wrap: wrap; } .flex--center { align-items: center; justify-content: center; } .flex--center-y { align-items: center; } .flex--center-x { justify-content: center; } .flex--between { align-items: center; justify-content: space-between; } .flex--around { align-items: center; justify-content: space-around; } .flex--start { justify-content: flex-start; } .flex--end { justify-content: flex-end; } .flex--baseline { align-items: baseline; } .flex--stretch { align-items: stretch; } .flex--1 { flex: 1 1 0%; } .flex--auto { flex: 1 1 auto; } .flex--none { flex: none; } /* ----- Gap utilities (logical, work for grid + flex) ----- */ .gap-0 { gap: 0; } .gap-1 { gap: var(--space-1); } .gap-2 { gap: var(--space-2); } .gap-3 { gap: var(--space-3); } .gap-4 { gap: var(--space-4); } .gap-6 { gap: var(--space-6); } .gap-8 { gap: var(--space-8); } .gap-12 { gap: var(--space-12); } .gap-16 { gap: var(--space-16); } .gap-x-2 { column-gap: var(--space-2); } .gap-x-4 { column-gap: var(--space-4); } .gap-x-6 { column-gap: var(--space-6); } .gap-x-8 { column-gap: var(--space-8); } .gap-y-2 { row-gap: var(--space-2); } .gap-y-4 { row-gap: var(--space-4); } .gap-y-6 { row-gap: var(--space-6); } .gap-y-8 { row-gap: var(--space-8); } /* ----- Aspect ratio holders (CLS prevention) ----- */ .aspect-square { aspect-ratio: 1 / 1; } .aspect-video { aspect-ratio: 16 / 9; } .aspect-portrait { aspect-ratio: 3 / 4; } .aspect-cinema { aspect-ratio: 21 / 9; } /* ----- Cluster (wraps inline items with gap) ----- */ .cluster { display: flex; flex-wrap: wrap; gap: var(--space-4); align-items: center; } /* ----- Center (horizontal centering helper) ----- */ .center { box-sizing: content-box; margin-inline: auto; max-inline-size: var(--container-narrow); } /* ----- Cover (full-bleed media) ----- */ .cover { position: relative; inline-size: 100%; block-size: 100%; } .cover > img, .cover > video { position: absolute; inset: 0; inline-size: 100%; block-size: 100%; object-fit: cover; } /* ----- Section rails (Agent 20 — weblove-motion side-aligned text) ----- Pushes text content into the outer 40% of the viewport while leaving the opposing 55% empty. Creates the off-center rhythm that defines the weblove-motion aesthetic. Mobile collapses to a centered single-column. RTL-aware via logical properties (`-start` = right in RTL). */ .section-rail--start { padding-inline-start: 5vw; padding-inline-end: 55vw; } .section-rail--end { padding-inline-start: 55vw; padding-inline-end: 5vw; } .section-rail--start > *, .section-rail--end > * { max-inline-size: 40vw; } /* ----- Contact override (un-crush the page's last section) ----- #contact previously inherited .section-rail--end's lopsided padding-inline-start:55vw + max-inline-size:40vw, shoving the form into a narrow off-center column ("weird angle" look). The contact section is a centered, full-width container like every other static section. .section-rail--end stays intact for #about. */ .contact .section-rail--end { padding-inline-start: var(--gutter); padding-inline-end: var(--gutter); inline-size: 100%; max-inline-size: var(--container-max); margin-inline: auto; } .contact .section-rail--end > * { max-inline-size: 100%; } @media (max-width: 767px) { .section-rail--start, .section-rail--end { padding-inline-start: 5vw; padding-inline-end: 5vw; } .section-rail--start > *, .section-rail--end > * { max-inline-size: 100%; } } } /* ============================================================ GAMOS-SITE — utilities.css Single-purpose utility classes. Logical properties only. !important is permitted ONLY here per Constitution §10.2 to guarantee override of components. ============================================================ */ @layer base, layout, utilities, sections; @layer utilities { /* ============================================================ Spacing — logical (margin-block / margin-inline) Naming: .mt = margin-block-start (top in LTR, top in RTL too) .mb = margin-block-end .ms = margin-inline-start (right in RTL) .me = margin-inline-end (left in RTL) .mx = margin-inline (start + end) .my = margin-block (start + end) Same pattern for .p* (padding). ============================================================ */ /* margin-block-start */ .mt-0 { margin-block-start: 0 !important; } .mt-1 { margin-block-start: var(--space-1) !important; } .mt-2 { margin-block-start: var(--space-2) !important; } .mt-3 { margin-block-start: var(--space-3) !important; } .mt-4 { margin-block-start: var(--space-4) !important; } .mt-6 { margin-block-start: var(--space-6) !important; } .mt-8 { margin-block-start: var(--space-8) !important; } .mt-12 { margin-block-start: var(--space-12) !important; } .mt-16 { margin-block-start: var(--space-16) !important; } .mt-24 { margin-block-start: var(--space-24) !important; } .mt-32 { margin-block-start: var(--space-32) !important; } /* margin-block-end */ .mb-0 { margin-block-end: 0 !important; } .mb-1 { margin-block-end: var(--space-1) !important; } .mb-2 { margin-block-end: var(--space-2) !important; } .mb-3 { margin-block-end: var(--space-3) !important; } .mb-4 { margin-block-end: var(--space-4) !important; } .mb-6 { margin-block-end: var(--space-6) !important; } .mb-8 { margin-block-end: var(--space-8) !important; } .mb-12 { margin-block-end: var(--space-12) !important; } .mb-16 { margin-block-end: var(--space-16) !important; } .mb-24 { margin-block-end: var(--space-24) !important; } .mb-32 { margin-block-end: var(--space-32) !important; } /* margin-inline-start (= "right" in RTL) */ .ms-0 { margin-inline-start: 0 !important; } .ms-1 { margin-inline-start: var(--space-1) !important; } .ms-2 { margin-inline-start: var(--space-2) !important; } .ms-3 { margin-inline-start: var(--space-3) !important; } .ms-4 { margin-inline-start: var(--space-4) !important; } .ms-6 { margin-inline-start: var(--space-6) !important; } .ms-8 { margin-inline-start: var(--space-8) !important; } .ms-auto { margin-inline-start: auto !important; } /* margin-inline-end (= "left" in RTL) */ .me-0 { margin-inline-end: 0 !important; } .me-1 { margin-inline-end: var(--space-1) !important; } .me-2 { margin-inline-end: var(--space-2) !important; } .me-3 { margin-inline-end: var(--space-3) !important; } .me-4 { margin-inline-end: var(--space-4) !important; } .me-6 { margin-inline-end: var(--space-6) !important; } .me-8 { margin-inline-end: var(--space-8) !important; } .me-auto { margin-inline-end: auto !important; } /* mx / my shortcuts */ .mx-auto { margin-inline: auto !important; } .mx-0 { margin-inline: 0 !important; } .mx-2 { margin-inline: var(--space-2) !important; } .mx-4 { margin-inline: var(--space-4) !important; } .mx-6 { margin-inline: var(--space-6) !important; } .my-0 { margin-block: 0 !important; } .my-2 { margin-block: var(--space-2) !important; } .my-4 { margin-block: var(--space-4) !important; } .my-6 { margin-block: var(--space-6) !important; } .my-8 { margin-block: var(--space-8) !important; } .my-12 { margin-block: var(--space-12) !important; } .my-16 { margin-block: var(--space-16) !important; } /* padding-block-start */ .pt-0 { padding-block-start: 0 !important; } .pt-2 { padding-block-start: var(--space-2) !important; } .pt-4 { padding-block-start: var(--space-4) !important; } .pt-6 { padding-block-start: var(--space-6) !important; } .pt-8 { padding-block-start: var(--space-8) !important; } .pt-12 { padding-block-start: var(--space-12) !important; } .pt-16 { padding-block-start: var(--space-16) !important; } .pt-24 { padding-block-start: var(--space-24) !important; } .pt-32 { padding-block-start: var(--space-32) !important; } /* padding-block-end */ .pb-0 { padding-block-end: 0 !important; } .pb-2 { padding-block-end: var(--space-2) !important; } .pb-4 { padding-block-end: var(--space-4) !important; } .pb-6 { padding-block-end: var(--space-6) !important; } .pb-8 { padding-block-end: var(--space-8) !important; } .pb-12 { padding-block-end: var(--space-12) !important; } .pb-16 { padding-block-end: var(--space-16) !important; } .pb-24 { padding-block-end: var(--space-24) !important; } .pb-32 { padding-block-end: var(--space-32) !important; } /* px / py shortcuts (logical) */ .px-0 { padding-inline: 0 !important; } .px-2 { padding-inline: var(--space-2) !important; } .px-4 { padding-inline: var(--space-4) !important; } .px-6 { padding-inline: var(--space-6) !important; } .px-8 { padding-inline: var(--space-8) !important; } .py-0 { padding-block: 0 !important; } .py-2 { padding-block: var(--space-2) !important; } .py-4 { padding-block: var(--space-4) !important; } .py-6 { padding-block: var(--space-6) !important; } .py-8 { padding-block: var(--space-8) !important; } .py-12 { padding-block: var(--space-12) !important; } .py-16 { padding-block: var(--space-16) !important; } /* ============================================================ Accessibility helpers ============================================================ */ .sr-only { position: absolute !important; inline-size: 1px !important; block-size: 1px !important; padding: 0 !important; margin: -1px !important; overflow: hidden !important; clip: rect(0, 0, 0, 0) !important; clip-path: inset(50%) !important; white-space: nowrap !important; border: 0 !important; } .not-sr-only { position: static !important; inline-size: auto !important; block-size: auto !important; padding: 0 !important; margin: 0 !important; overflow: visible !important; clip: auto !important; clip-path: none !important; white-space: normal !important; } /* Hide visually but keep in flow for assistive tech (alternative) */ .visually-hidden { clip-path: inset(50%) !important; block-size: 1px !important; inline-size: 1px !important; overflow: hidden !important; position: absolute !important; white-space: nowrap !important; } /* ============================================================ Bidi isolation — for LTR digits inside Hebrew text ============================================================ */ .bidi-iso { unicode-bidi: isolate !important; direction: ltr !important; display: inline-block !important; } .bidi-iso--block { unicode-bidi: isolate !important; direction: ltr !important; display: block !important; } /* ============================================================ Typography size utilities ============================================================ */ .text-xs { font-size: var(--text-xs) !important; } .text-sm { font-size: var(--text-sm) !important; } .text-base { font-size: var(--text-base) !important; } .text-md { font-size: var(--text-md) !important; } .text-lg { font-size: var(--text-lg) !important; } .text-xl { font-size: var(--text-xl) !important; } .text-2xl { font-size: var(--text-2xl) !important; } .text-3xl { font-size: var(--text-3xl) !important; } .text-4xl { font-size: var(--text-4xl) !important; } .text-hero { font-size: var(--text-hero) !important; line-height: var(--lh-tight) !important; } /* Text alignment (RTL-safe) */ .text-start { text-align: start !important; } .text-end { text-align: end !important; } .text-center { text-align: center !important; } .text-justify { text-align: justify !important; } /* Line heights */ .leading-tight { line-height: var(--lh-tight) !important; } .leading-snug { line-height: var(--lh-snug) !important; } .leading-normal { line-height: var(--lh-normal) !important; } .leading-loose { line-height: var(--lh-loose) !important; } /* Tracking */ .tracking-tight { letter-spacing: var(--tracking-tight) !important; } .tracking-normal { letter-spacing: var(--tracking-normal) !important; } .tracking-wide { letter-spacing: var(--tracking-wide) !important; } .tracking-eyebrow { letter-spacing: var(--tracking-eyebrow) !important; } /* Transform */ .uppercase { text-transform: uppercase !important; } .lowercase { text-transform: lowercase !important; } .capitalize { text-transform: capitalize !important; } .normal-case { text-transform: none !important; } /* Decoration */ .underline { text-decoration: underline !important; } .no-underline { text-decoration: none !important; } /* Truncation */ .truncate { overflow: hidden !important; text-overflow: ellipsis !important; white-space: nowrap !important; } .clamp-2 { display: -webkit-box !important; -webkit-line-clamp: 2 !important; line-clamp: 2 !important; -webkit-box-orient: vertical !important; overflow: hidden !important; } .clamp-3 { display: -webkit-box !important; -webkit-line-clamp: 3 !important; line-clamp: 3 !important; -webkit-box-orient: vertical !important; overflow: hidden !important; } /* ============================================================ Color utilities ============================================================ */ .color-ink { color: var(--ink-deep) !important; } .color-ink-medium { color: var(--ink-medium) !important; } .color-ivory { color: var(--ivory) !important; } .color-ivory-warm { color: var(--ivory-warm) !important; } .color-brass { color: var(--brass) !important; } .color-brass-deep { color: var(--brass-deep) !important; } .color-brass-glow { color: var(--brass-glow) !important; } .color-sage { color: var(--sage) !important; } .color-gold { color: var(--gold) !important; } .color-fg { color: var(--fg) !important; } .color-fg-muted { color: var(--fg-muted) !important; } .color-fg-on-dark { color: var(--fg-on-dark) !important; } .color-accent { color: var(--accent) !important; } /* ============================================================ Background utilities ============================================================ */ .bg-ivory { background-color: var(--ivory) !important; } .bg-ivory-warm { background-color: var(--ivory-warm) !important; } .bg-ink-deep { background-color: var(--ink-deep) !important; } .bg-ink-medium { background-color: var(--ink-medium) !important; } .bg-brass { background-color: var(--brass) !important; } .bg-brass-deep { background-color: var(--brass-deep) !important; } .bg-sage { background-color: var(--sage) !important; } .bg-transparent { background-color: transparent !important; } .bg-bg { background-color: var(--bg) !important; } .bg-bg-alt { background-color: var(--bg-alt) !important; } /* ============================================================ Font family + weight utilities ============================================================ */ .font-display-he { font-family: var(--font-display-he) !important; } .font-display-en { font-family: var(--font-display-en) !important; } .font-body { font-family: var(--font-body) !important; } .font-mono { font-family: var(--font-mono) !important; } .weight-400 { font-weight: 400 !important; } .weight-500 { font-weight: 500 !important; } .weight-600 { font-weight: 600 !important; } .weight-700 { font-weight: 700 !important; } /* ============================================================ Eyebrow (small uppercase label, common premium pattern) ============================================================ */ .eyebrow { font-family: var(--font-body) !important; font-size: var(--text-xs) !important; font-weight: var(--fw-semibold) !important; letter-spacing: var(--tracking-eyebrow) !important; text-transform: uppercase !important; color: var(--brass) !important; line-height: var(--lh-normal) !important; } .eyebrow--ivory { color: var(--ivory) !important; } .eyebrow--muted { color: var(--fg-muted) !important; } /* ============================================================ Display + visibility ============================================================ */ .block { display: block !important; } .inline-block { display: inline-block !important; } .inline { display: inline !important; } .hidden { display: none !important; } @media (max-width: 600px) { .hidden-mobile { display: none !important; } } @media (min-width: 601px) { .hidden-desktop { display: none !important; } } /* ============================================================ Border radius ============================================================ */ .radius-sm { border-radius: var(--radius-sm) !important; } .radius-md { border-radius: var(--radius-md) !important; } .radius-lg { border-radius: var(--radius-lg) !important; } .radius-xl { border-radius: var(--radius-xl) !important; } .radius-pill { border-radius: var(--radius-pill) !important; } .radius-circle { border-radius: var(--radius-circle) !important; } .radius-none { border-radius: 0 !important; } /* ============================================================ Shadows ============================================================ */ .shadow-soft { box-shadow: var(--shadow-soft) !important; } .shadow-strong { box-shadow: var(--shadow-strong) !important; } .shadow-none { box-shadow: none !important; } /* ============================================================ Position helpers ============================================================ */ .relative { position: relative !important; } .absolute { position: absolute !important; } .fixed { position: fixed !important; } .sticky { position: sticky !important; } .static { position: static !important; } /* ============================================================ Overflow ============================================================ */ .overflow-hidden { overflow: hidden !important; } .overflow-auto { overflow: auto !important; } .overflow-x-hidden { overflow-x: hidden !important; } .overflow-y-auto { overflow-y: auto !important; } /* ============================================================ Sizing ============================================================ */ .w-full { inline-size: 100% !important; width: 100% !important; } .h-full { block-size: 100% !important; height: 100% !important; } .min-h-screen { min-block-size: 100vh !important; min-block-size: 100dvh !important; } /* ============================================================ CANONICAL CARD COMPONENTS — single source of truth (Constitution §10.2 — tokens are single-source; no forks). NOTE — the button system moved OUT of this file (2026-06-15 unify pass) to css/components/buttons.css, which is UNLAYERED and linked after the section CSS so it wins ties without `!important`. The `.card` family stays here in @layer utilities. If you need a new CARD look, EXTEND with a `.card--*` variant here, never a bespoke rule in a section file. Source this generalizes: .card ← .directions__card Aligns the ~6 card species (directions card, testimonial quote, gallery + culinary media tiles, press article card) across the site. NOTE — section concerns stay in section CSS: positioning (position / inset / z-index / max-inline-size) is deliberately omitted so .card is position-agnostic and any section can drop it in (e.g. directions.css keeps its own absolute/inset/z-index). Tokens consumed (all from css/tokens.css — single-source): sizing/space: --space-3, --space-6 color: --ivory, --bg, --brass radius: --radius-md, --radius-lg elevation: --shadow-strong, --shadow-soft motion: --dur-cinema, --ease-out-cinema media zoom: --card-zoom ============================================================ */ /* ---- Card base (from .directions__card) ----------------------- * * Position-agnostic: NO position / inset / z-index / max-inline-size. */ .card { display: flex !important; flex-direction: column !important; gap: var(--space-3) !important; padding: var(--space-6) !important; background: color-mix(in srgb, var(--ivory) 88%, transparent) !important; -webkit-backdrop-filter: blur(10px) !important; backdrop-filter: blur(10px) !important; border: 1px solid var(--brass) !important; border-radius: var(--radius-md) !important; box-shadow: var(--shadow-strong) !important; } /* ---- Card variants ------------------------------------------- */ /* Opaque ivory testimonial card. Generalizes .testimonial. */ .card--quote { background: var(--bg) !important; border: 0 !important; border-radius: var(--radius-lg) !important; box-shadow: var(--shadow-soft) !important; -webkit-backdrop-filter: none !important; backdrop-filter: none !important; } /* Image tile w/ hover-zoom contract. Generalizes gallery + culinary dish tiles. The child owns the transform; the tile clips it. */ .card--media { padding: 0 !important; overflow: hidden !important; border-radius: var(--radius-md) !important; position: relative !important; isolation: isolate !important; border: 0 !important; box-shadow: none !important; -webkit-backdrop-filter: none !important; backdrop-filter: none !important; } .card--media img { transition: transform var(--dur-cinema) var(--ease-out-cinema) !important; } @media (hover: hover) and (pointer: fine) { .card--media:hover img { transform: scale(var(--card-zoom)) !important; } } /* Full-bleed image-led editorial card. Generalizes press article card. */ .card--editorial { padding: 0 !important; position: relative !important; overflow: hidden !important; isolation: isolate !important; border: 0 !important; border-radius: 0 !important; box-shadow: none !important; -webkit-backdrop-filter: none !important; backdrop-filter: none !important; } /* Reduced-motion: silence the media zoom. (Button press feedback is silenced in css/components/buttons.css alongside the .btn rules.) */ @media (prefers-reduced-motion: reduce) { .card--media:hover img { transform: none !important; } } } /* =========================================================================== hero-scene.css — cinematic scroll-pinned hero (REBUILT 2026-06-15) --------------------------------------------------------------------------- VERBATIM 1:1 PORT of the findrealestate sandbox hero (`…/findrealestate-clone - עותק/`): • `.hero_*` layer rules ← `_next/static/css/f46e979614fc3394.css` • `.gamos-*` composer/cue/prompt rules ← `_next/static/css/a463080343a8b988.css` Class names are copied from the source (user directive 2026-06-15). Verified no collision elsewhere in the repo (`.gamos-cue`/`.gamos-hero` were NOT used by /press/ — the earlier "collision" note was stale). REM-BASE: the sandbox drives every hero `rem` from a viewport-responsive root font-size — `html{font-size:2.6666666667vw}` (<768) → `0.5208333333vw` (≥768) → `10px` (≥1920). GAMOS-SITE's global root is locked at 16px (base.css), so we reproduce the sandbox's exact pixel geometry with a scoped custom property `--rem` and write every source `Xrem` as `calc(X * var(--rem))`. This is root-independent (no `em` compounding) → pixel-identical at every width to the sandbox. (--rem 0.5208333vw = 7.5px @1440 = sandbox @1440.) The whole block is unlayered → it wins over base.css's `@layer base` media reset (`img{height:auto}`) without `!important`, so `.hero_house img{height:100%}` etc. take effect exactly as in the sandbox. ========================================================================= */ /* ----- scoped responsive rem-base (mirrors sandbox html{font-size}) -------- */ #hero.hero_root { --rem: 2.6666666667vw; } @media (min-width: 768px) { #hero.hero_root { --rem: 0.5208333333vw; } } @media (min-width: 1920px) { #hero.hero_root { --rem: 10px; } } /* ----------------------------------------------------------- ROOT / PIN ---- */ /* sandbox: height 350vh (<768) / 500vh (≥768); margin-bottom:-100vh. We add background+isolation+z-index so the hero sits cleanly above the site chrome and the cream join to #hall-portal is seamless. The root is visible from first paint (2026-10-11); see the .hero_content/.hero_clouds rule below. */ .hero_root { position: relative; height: 300vh; margin-bottom: -100vh; background: var(--ivory); isolation: isolate; z-index: 110; } @media (min-width: 768px) { .hero_root { height: 400vh; } } /* 2026-10-11 (§3 amendment): the sky + desert paint at first paint (they are the LCP); only the text and the clouds wait for the JS entrance fade (js/hero-scene.js). */ .hero_content, .hero_clouds { visibility: hidden; } .hero_top { position: sticky; top: 0; height: 100vh; } .hero_bg { overflow: hidden; pointer-events: none; } .hero_back, .hero_bg { position: absolute; top: 0; left: 0; right: 0; bottom: 0; } .hero_back img { width: 100%; height: 100%; object-fit: cover; object-position: center center; max-width: none; } /* desert subject — rises (y:-40%) + grows (scale:1.3) on scroll */ .hero_house { position: absolute; top: 60vh; left: 0; right: 0; height: calc(33.4 * var(--rem)); z-index: 1; transform-origin: bottom center; } @media (min-width: 768px) { .hero_house { height: calc(170.8 * var(--rem)); } } /* wrapper (index.html ships responsive WebP) must fill the house so the inner 's height:100% resolves against the full house box, not the picture's intrinsic height. Without this the desert collapses to ~369px. */ .hero_house picture { display: block; width: 100%; height: 100%; } .hero_house img { width: 100%; height: 100%; object-fit: contain; max-width: none; } /* second desert copy, MASKED by the logo letters (mask data-URI injected by JS, so the letters "fill" with the desert texture). opacity:0 → revealed on scroll. */ .hero_composite { position: absolute; top: 0; left: 0; right: 0; bottom: 0; z-index: 1; opacity: 0; -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat; -webkit-mask-position: center center; mask-position: center center; /* mask-size is owned by JS (js/hero-scene.js applyCompositeMaskSize) — it fits the active logo's viewBox ratio INSIDE the measured .hero_logo box (letterbox), so the filled composite matches the outline for ANY logo (HE/EN/FR) at ANY breakpoint. The old hardcoded per-breakpoint mask-size stretched logos whose aspect ≠ the box; the dynamic fit replaces it. */ } .hero_clouds { top: 0; left: 0; right: 0; bottom: 0; } .hero_cloud, .hero_clouds { position: absolute; z-index: 2; } .hero_cloud:first-child { top: calc(33.7 * var(--rem)); left: calc(-57.2 * var(--rem)); width: calc(70.2 * var(--rem)); height: calc(29.8 * var(--rem)); } @media (min-width: 768px) { .hero_cloud:first-child { top: 25%; left: calc(-33.72 * var(--rem)); width: calc(112.4 * var(--rem)); height: calc(47.7 * var(--rem)); } } .hero_cloud:last-child { top: calc(37.12 * var(--rem)); right: calc(-41.2 * var(--rem)); width: calc(55.7 * var(--rem)); height: calc(23.6 * var(--rem)); } @media (min-width: 768px) { .hero_cloud:last-child { top: 20%; right: calc(-33.72 * var(--rem)); width: calc(93.6 * var(--rem)); height: calc(39.7 * var(--rem)); } } .hero_cloud img { width: 100%; height: 100%; object-fit: cover; max-width: none; } /* logo letters — white-stroke OUTLINE (drawSVG strokes them on); crossfades to the filled .hero_composite. box = 97.7rem × (97.7×79.53/219.78)=35.4rem. */ .hero_logo { position: absolute; z-index: 1; opacity: 0; top: calc(50% - (5.1 * var(--rem))); left: calc(50% - (11.75 * var(--rem))); width: calc(23.5 * var(--rem)); height: calc(10.2 * var(--rem)); } @media (min-width: 768px) { .hero_logo { top: calc(50% - (17.7 * var(--rem))); left: calc(50% - (48.85 * var(--rem))); width: calc(97.7 * var(--rem)); height: calc(35.4 * var(--rem)); } } .hero_logo svg { width: 100%; height: 100%; overflow: visible; } .hero_logo path { fill: rgba(0, 0, 0, 0); stroke: #fff; stroke-width: 0.75px; } @media (min-width: 768px) { .hero_logo path { stroke-width: 0.5px; } } /* off-screen smoke/overlay overlap (mirrors sandbox .hero_overlap) */ .hero_overlap { position: absolute; top: 0; left: 0; right: 0; bottom: 100vh; pointer-events: none; } .hero_smoke { position: absolute; left: 0; right: 0; bottom: 0; height: calc(45 * var(--rem)); z-index: 3; } @media (min-width: 768px) { .hero_smoke { height: calc(62 * var(--rem)); } } .hero_top .hero_smoke { transform: translateY(70%); } /* rises to 0% on scroll */ .hero_smoke img { width: 100%; height: 100%; object-fit: cover; object-position: top center; max-width: none; } /* overlay fade — sandbox fades to #fff; GAMOS-CREAM override fades to ivory so the join to #hall-portal is seamless. */ .hero_overlay { position: absolute; left: 0; right: 0; bottom: 0; height: calc(10 * var(--rem)); z-index: 3; background: linear-gradient(180deg, color-mix(in srgb, var(--ivory) 0%, transparent), var(--ivory)); } @media (min-width: 768px) { .hero_overlay { height: calc(30.9 * var(--rem)); } } .hero_content { position: relative; z-index: 4; display: grid; align-items: center; height: 100%; padding-bottom: calc(15 * var(--rem)); } @media (min-width: 768px) { .hero_content { padding-bottom: calc(22.8 * var(--rem)); } } /* Hero text — sandbox geometry/sizes kept verbatim, but COLOURS + WEIGHTS re-pointed to the GAMOS palette (§5) and the canonical section-header language (2026-06-15, user request "התאם צבעים + עדן את המשפטים הם עבים"): eyebrow → --accent (brass), --fw-semibold (was #ac9a78 / 600) title → --fg (ink-deep), --fw-bold (was #191410 / 800 — too heavy) accent → --brass-deep (was #857147 — ~identical, now tokenised) subtitle → --fg-muted, --fw-medium (was #716657 / 500) §10.2: no hard-coded hex — all via tokens. */ .hero_eyebrow { /* 2026-06-16: was 1.8·rem solid brass — user reported it tiny + wanted the brand dark texture. Bumped + texture-filled (fill applied in @supports). */ margin: 0 0 calc(1.6 * var(--rem)); text-align: center; font-family: "Heebo", sans-serif; font-weight: var(--fw-semibold); font-size: calc(2.6 * var(--rem)); letter-spacing: 0.18em; color: var(--fg); } .hero_title h1 { margin: 0; font-family: "Heebo", sans-serif; font-weight: var(--fw-bold); font-size: calc(5.4 * var(--rem)); line-height: 100%; letter-spacing: -0.02em; text-align: center; color: var(--brass); max-inline-size: none; } .hero_title h1 { color: var(--cocoa); } /* Large text contrast over the sky. */ @media (min-width: 768px) { .hero_title h1 { font-size: calc(14 * var(--rem)); } } /* 2026-06-16 (swapped): line 1 → solid brass, NO texture; line 2 (.accent) → brand DARK texture (typo-on-light). The solid `color`s are the graceful-degradation fallback when background-clip:text is unsupported (line 1 → brass, line 2 → ink). */ .hero_title .accent { color: var(--fg); } /* ---- Texture fill (graceful-degradation; mirrors texture-text.css) ---- Eyebrow + title line 2 (.accent) take the DARK gold-flecked brand texture. SplitText wraps each title word in a .hero_word span that renders ON TOP of the h1, so the fill must live on the SPANS too (a transparent span over the h1 shows nothing — the "invisible but selectable" bug). Same multi-span technique as .marquee__text. Line 1 (h1 words) stays solid brass. */ @supports ((-webkit-background-clip: text) or (background-clip: text)) { .hero_eyebrow, .hero_title .accent, .hero_title .accent .hero_word { background-repeat: no-repeat; background-size: 100% 100%; background-position: center; -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; background-image: var(--typo-on-light); } .hero_title h1, .hero_title h1 .hero_word { -webkit-text-fill-color: var(--cocoa); background: none; } } /* Short landscape screens need a horizontal reading layout inside the same animated content layer. No GSAP timing or scene height changes. */ @media (min-width: 769px) and (max-height: 600px) { #hero .hero_content { display: grid; grid-template-columns: 1fr 1fr; align-content: center; gap: var(--space-2) var(--space-6); padding: 88px var(--space-8) var(--space-4); } #hero .hero_eyebrow { grid-column: 1 / -1; font-size: var(--text-xs); margin: 0; } #hero .hero_title { grid-column: 1; grid-row: 2 / 5; } #hero .hero_title h1 { font-size: clamp(var(--text-xl), 4vw, var(--text-2xl)); line-height: 1.12; } #hero .hero_text { grid-column: 2; font-size: var(--text-base); margin: 0; } #hero .hero_stats { grid-column: 2; font-size: var(--text-xs); margin: 0; } #hero .hero_ctas { grid-column: 2; margin: 0; gap: var(--space-2); } #hero .hero_ctas .btn { font-size: var(--text-xs); padding-block: var(--space-2); } #hero .hero_top > .gamos-cue { display: none; } } .hero_text { margin: calc(1.5 * var(--rem)) 0 0; text-align: center; text-wrap: balance; font-family: "Heebo", sans-serif; font-weight: var(--fw-medium); font-size: calc(1.6 * var(--rem)); line-height: 150%; color: var(--fg-muted); max-inline-size: none; } @media (min-width: 768px) { .hero_text { margin: calc(2 * var(--rem)) 0 0; font-size: calc(3.2 * var(--rem)); line-height: 130%; letter-spacing: -0.01em; } } /* =========================================================================== .gamos-hero — the interactive composer section ("the section after the hero") VERBATIM from the sandbox GAMOS-HERO-CTA block. Lives at #hall-portal, between #hero and #lounge. base image + EVENTS/RESORT wordmark CTAs (hover-bulge + dim-siblings via :has()) + brass prompt + scroll cue. ========================================================================= */ /* The hero's `margin-bottom:-100vh` tucks this composer up under the hero's final screen-height (the sandbox's reveal-from-under). Because the hero is a stacking context with z-index:110 (so site chrome layers correctly), the composer must sit ABOVE it to be revealed during that overlap — otherwise the hero paints over it and the page appears to skip straight to #lounge. */ #hall-portal { position: relative; z-index: 111; } .gamos-hero { position: relative; width: 100%; aspect-ratio: 2048 / 1360; background: var(--ivory); overflow: hidden; isolation: isolate; } .gamos-hero__base { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: center; z-index: 1; pointer-events: none; user-select: none; } .gamos-hero__logo { position: absolute; top: 4%; left: 4%; width: clamp(140px, 12vw, 260px); height: auto; z-index: 2; pointer-events: none; user-select: none; } .gamos-hero__cta { position: absolute; left: 50%; transform: translateX(-50%); width: clamp(220px, 22vw, 360px); height: auto; cursor: pointer; text-decoration: none; z-index: 3; transition: opacity 280ms ease, filter 280ms ease; outline: 0 solid transparent; -webkit-user-drag: none; } .gamos-hero__cta--events { top: 42%; z-index: 3; } .gamos-hero__cta--resort { top: 51%; z-index: 4; } .gamos-hero__cta img { display: block; width: 100%; height: auto; max-width: none; transition: filter 280ms ease, transform 320ms cubic-bezier(.16,1,.3,1); -webkit-user-drag: none; user-select: none; } .gamos-hero__cta:hover img, .gamos-hero__cta:focus-visible img { transform: scale(1.06); filter: brightness(1.10) drop-shadow(0 0 28px color-mix(in srgb, var(--brass) 55%, transparent)); } .gamos-hero__cta:active img { transform: scale(0.98); } .gamos-hero__cta:focus-visible { outline: none; box-shadow: var(--focus-ring-offset); border-radius: var(--radius-md); } .gamos-hero:has(.gamos-hero__cta:hover) .gamos-hero__cta:not(:hover), .gamos-hero:has(.gamos-hero__cta:focus-visible) .gamos-hero__cta:not(:focus-visible) { opacity: .55; filter: brightness(.92); } .gamos-hero__prompt { position: absolute; top: 34%; left: 50%; transform: translateX(-50%); z-index: 5; display: flex; flex-direction: column; align-items: center; gap: .9rem; pointer-events: none; text-align: center; white-space: nowrap; } .gamos-hero__prompt-text { font-family: Heebo, sans-serif; font-weight: 500; font-size: clamp(1.3rem, 1.5vw, 2rem); letter-spacing: .32em; color: var(--brass-deep); opacity: 0; animation: gamos-prompt-in 1100ms cubic-bezier(.16,1,.3,1) 400ms forwards, gamos-prompt-pulse 3200ms ease-in-out 1600ms infinite; } .gamos-hero__prompt-line { width: 1px; height: 0; background: linear-gradient(180deg, var(--brass), color-mix(in srgb, var(--brass) 0%, transparent)); animation: gamos-prompt-line 900ms cubic-bezier(.16,1,.3,1) 1100ms forwards; } .gamos-hero__prompt-arrow { width: clamp(18px, 1.4vw, 24px); height: clamp(18px, 1.4vw, 24px); opacity: 0; animation: gamos-prompt-in 900ms cubic-bezier(.16,1,.3,1) 1100ms forwards, gamos-arrow-bob 2400ms ease-in-out 2000ms infinite; } .gamos-hero__prompt-arrow svg { display: block; width: 100%; height: 100%; stroke: var(--brass); fill: none; stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; } /* ----------------------------------------------------------- SCROLL CUE ---- */ /* Brass pill + falling dot. Two instances: inside .hero_top (→#hall-portal) and inside .gamos-hero (→#lounge). VERBATIM from the sandbox .gamos-cue. */ .gamos-cue { position: absolute; inset-block-end: clamp(24px, 5vh, 48px); left: 50%; transform: translateX(-50%); z-index: 20; visibility: visible; display: inline-flex; align-items: center; justify-content: center; inline-size: 26px; block-size: 60px; border: 1.5px solid color-mix(in srgb, var(--brass-deep) 85%, transparent); border-radius: 9999px; text-decoration: none; pointer-events: auto; opacity: 1; transition: border-color 240ms cubic-bezier(.2,.8,.2,1); } .gamos-cue:hover, .gamos-cue:focus-visible { border-color: var(--brass-deep); } .gamos-cue:focus-visible { outline: none; box-shadow: var(--focus-ring-offset); } /* Single-cue invariant. The hero's `margin-bottom:-100vh` (+ z-index:110) tucks the #hall-portal composer under the hero's last pinned frame, so the HERO cue (in .hero_top, → #hall-portal) and the COMPOSER cue (in .gamos-hero, → #lounge) render in the same bottom band → two cues at once. Once the hero no longer owns the viewport, its cue has served its "scroll into the composer" purpose — hide it, leaving only the composer cue. `data-hero-mode` is already maintained every scroll frame by js/site-nav-hover-reveal.js (true only while the pin fills the screen), so no new JS. Fixes desktop too (the overlap exists at both widths). */ html:not([data-hero-mode="true"]) .hero_top .gamos-cue { opacity: 0; pointer-events: none; transition: opacity var(--dur-base) var(--ease-out-cinema); } .gamos-cue__track { position: relative; display: block; inline-size: 1px; block-size: 34px; background: color-mix(in srgb, var(--brass-deep) 40%, transparent); } .gamos-cue__dot { position: absolute; inset-inline-start: -2.5px; inset-block-start: 0; inline-size: 6px; block-size: 6px; background: var(--brass-deep); border-radius: 50%; animation: gamos-cue-fall 1.6s cubic-bezier(.55,0,.55,1) infinite; } /* ----------------------------------------------------------- KEYFRAMES ----- */ @keyframes gamos-prompt-in { 0% { opacity: 0; transform: translateY(8px); } 100% { opacity: 1; transform: translateY(0); } } @keyframes gamos-prompt-line { 0% { height: 0; opacity: 0; } 100% { height: clamp(28px, 4vh, 52px); opacity: 1; } } @keyframes gamos-prompt-pulse { 0%, 100% { opacity: 1; } 50% { opacity: .55; } } @keyframes gamos-arrow-bob { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(6px); } } @keyframes gamos-cue-fall { 0% { transform: translateY(-4px); opacity: 0; } 20% { opacity: 1; } 80% { opacity: 1; } 100% { transform: translateY(34px); opacity: 0; } } /* -------------------------------------------------------- REDUCED MOTION ---- */ /* §8/§9: scrub off, reveals static. JS shows the final composition (logo filled, subject in place); only the cue + prompt loops freeze. */ @media (prefers-reduced-motion: reduce) { .hero_root { visibility: visible; } .gamos-cue__dot, .gamos-hero__prompt-text, .gamos-hero__prompt-line, .gamos-hero__prompt-arrow { animation: none; opacity: 1; } .gamos-hero__prompt-line { height: clamp(28px, 4vh, 52px); } .gamos-hero__cta img, .gamos-hero__cta { transition: none; } .gamos-hero__cta:hover img, .gamos-hero__cta:focus-visible img { transform: none; } } /* ------------------------------------------------ CONVERSION ADDITIONS ----- */ /* 2026-07-13 (§3 amendment, marketing-critique conversion pass): trust line + CTA pair appended INSIDE .hero_content. Additive only — the children inherit the existing content scrub tween; no timeline/scrub changes. Buttons use the canonical buttons.css line-language (on-light roles: the hero text sits on the bright sky/desert), scaled with the scene's --rem so proportions hold. */ .hero_stats { margin: calc(1.4 * var(--rem)) 0 0; text-align: center; font-family: var(--font-body); font-weight: var(--fw-medium); font-size: calc(1.4 * var(--rem)); letter-spacing: 0.08em; color: var(--fg-muted); max-inline-size: none; /* the global

measure cap would shrink+right-pin it in the grid (like .hero_text, which also overrides it) */ } @media (min-width: 768px) { .hero_stats { margin-top: calc(2 * var(--rem)); font-size: calc(2.2 * var(--rem)); } } .hero_ctas { margin: calc(2 * var(--rem)) 0 0; display: flex; justify-content: center; align-items: center; gap: calc(2.4 * var(--rem)); flex-wrap: wrap; } @media (min-width: 768px) { .hero_ctas { margin-top: calc(2.8 * var(--rem)); gap: calc(4 * var(--rem)); } } /* Scale the editorial labels with the scene (base .btn is a fixed 13px). */ .hero_ctas .btn { font-size: calc(1.5 * var(--rem)); } @media (min-width: 768px) { .hero_ctas .btn { font-size: calc(1.8 * var(--rem)); } .hero_ctas .btn--primary-lg { font-size: calc(2.2 * var(--rem)); } } /* Copy is UI, not artwork: scene scaling must never shrink it below readable sizes on tablets. Keep the portrait composition in the upper sky area. */ @media (min-width: 769px) { .hero_text { font-size: max(var(--text-base), calc(3.2 * var(--rem))); } .hero_stats { font-size: max(var(--text-sm), calc(2.2 * var(--rem))); } .hero_ctas .btn { font-size: max(var(--text-sm), calc(1.8 * var(--rem))); } .hero_ctas .btn--primary-lg { font-size: max(var(--text-sm), calc(2.2 * var(--rem))); } } @media (min-width: 769px) and (max-width: 1023.98px) and (min-height: 601px) { #hero .hero_content { display: flex; flex-direction: column; justify-content: flex-start; gap: var(--space-6); padding: 128px var(--space-8) var(--space-8); } #hero .hero_eyebrow { margin: 0; font-size: var(--text-sm); } #hero .hero_title h1 { font-size: clamp(var(--text-2xl), 7vw, var(--text-4xl)); } #hero .hero_text { margin: 0; max-inline-size: 46ch; } #hero .hero_stats { margin: 0; } #hero .hero_ctas { margin: 0; gap: var(--space-5); } } /* ---------------------------------------- GESTURE LANGUAGE v2 (2026-10-11) -- */ /* §3 amendment (Moshe: one gesture language site-wide). The scroll cue's falling dot is replaced by the site's one hand (css/components/gesture-hint.css): rising hand = "scroll on". Old .gamos-cue__track/__dot rules stay inert. The hall-portal prompt keeps its chevron (it points at the two halls); the tap is taught by the first-visit hint on the EVENTS wordmark instead. */ .gamos-cue__hand { display: block; inline-size: 22px; block-size: 22px; fill: var(--brass-deep); animation: gamos-cue-rise 1.6s cubic-bezier(.45,0,.25,1) infinite; } @keyframes gamos-cue-rise { 0% { transform: translateY(6px); opacity: 0; } 25%, 70% { opacity: 1; } 100% { transform: translateY(-6px); opacity: 0; } } @media (prefers-reduced-motion: reduce) { .gamos-cue__hand { animation: none; } } /* =========================================================================== portals.css — invisible hotspots over the bubble plate in the hero canvas --------------------------------------------------------------------------- Concept (2026-06-01 — replaces the round