/* ========================================================================== Rolly — tokens.css · single source of truth (colors / type / space / z) Brand palette from the "Rolly · House of Tortilla" logo + brief. ========================================================================== */ :root { /* --- Brand core --- */ --salsa: #944721; /* Rust Red — primary brand, CTA, accents */ --salsa-deep: #5f2c14; /* deep rust for pressed / shadows */ --aioli: #b69f6b; /* Mustard / gold — secondary, glow, overlines */ --aioli-light: #cbb886; --tortilla: #d7c8ad; /* Cream — light base backgrounds */ --tortilla-lt: #ece3d1; --paper: #f6f1e8; /* lightest paper */ --cocoa: #5a381b; /* Dark Cocoa / Charcoal — dark sections */ --cocoa-deep: #3a2210; /* deepest brown */ --ink: #2a1710; /* near-black warm text */ /* --- Semantic --- */ --bg: var(--paper); --fg: var(--ink); --brand: var(--salsa); --brand-2: var(--aioli); /* --- Type --- */ --f-head: "Noto Sans Hebrew", "Heebo", system-ui, sans-serif; --f-body: "Noto Sans Hebrew", "Rubik", system-ui, sans-serif; --f-mono: "Space Mono", ui-monospace, monospace; /* fluid type scale */ --t-hero: clamp(3rem, 11vw, 9.5rem); --t-h2: clamp(2.2rem, 6vw, 5rem); --t-h3: clamp(2rem, 7vw, 4.5rem); --t-lead: clamp(1.05rem, 2.2vw, 1.5rem); --t-body: clamp(1rem, 1.4vw, 1.15rem); --t-mono: clamp(0.7rem, 1.1vw, 0.82rem); /* --- Space --- */ --gap: clamp(1rem, 3vw, 2.5rem); --pad-sec: clamp(4rem, 10vh, 9rem); --maxw: 1280px; --radius: 18px; --radius-lg: 32px; /* --- Motion --- */ --ease-out: cubic-bezier(.16,1,.3,1); --ease-io: cubic-bezier(.65,.05,.36,1); --dur: .6s; /* --- Z-index scale --- */ --z-bg: 1; --z-content: 5; --z-header: 80; --z-order: 90; --z-a11y: 95; --z-modal: 100; --z-preload: 120; /* --- Neon glows (info section) --- */ --glow-gold: 0 0 6px #fff2c8, 0 0 14px var(--aioli), 0 0 30px var(--aioli), 0 0 60px rgba(182,159,107,.6); --glow-cream:0 0 6px #fff, 0 0 14px #f3ead2, 0 0 28px #e9dcbb; --glow-rust: 0 0 6px #ffb27a, 0 0 14px var(--salsa), 0 0 34px var(--salsa); } /* ========================================================================== base.css — reset, RTL flow, global grain texture, buttons, utilities ========================================================================== */ *, *::before, *::after { box-sizing: border-box; } * { margin: 0; padding: 0; } html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; text-size-adjust: 100%; background: var(--cocoa-deep); /* never let a scroll gap / overscroll / parking transition flash WHITE — match the stage bg */ } html.lenis, html.lenis body { height: auto; } .lenis.lenis-smooth { scroll-behavior: auto !important; } body { font-family: var(--f-body); font-size: var(--t-body); line-height: 1.65; color: var(--fg); background: var(--cocoa); /* fallback while the roll-track fades */ direction: rtl; overflow-x: hidden; -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; } img, svg, video { display: block; max-width: 100%; } a { color: inherit; text-decoration: none; } button { font: inherit; color: inherit; background: none; border: 0; cursor: pointer; } ul { list-style: none; } :focus-visible { outline: 3px solid var(--aioli); outline-offset: 3px; border-radius: 4px; } h1, h2, h3, h4 { font-family: var(--f-head); font-weight: 900; line-height: .98; letter-spacing: -.01em; } /* Latin / numeric islands inside the RTL doc */ .ltr { direction: ltr; unicode-bidi: isolate; } /* --- Global roll-track: one continuous warm sheet behind everything -------- Section backgrounds are (mostly) transparent so this morphing gradient shows through — no hard cut lines between chapters. JS scrubs --roll 0..1. */ .roll-track { position: fixed; inset: 0; z-index: 0; pointer-events: none; background: linear-gradient(180deg, var(--paper) 0%, var(--tortilla) 22%, var(--aioli) 42%, var(--salsa) 62%, var(--cocoa) 82%, var(--cocoa-deep) 100%); background-size: 100% 460vh; background-position: 0 calc(var(--roll, 0) * -360vh); transition: background-position .12s linear; } /* --- Global grain overlay (tactile, ~0.04) ------------------------------- */ .grain { position: fixed; inset: 0; z-index: 70; pointer-events: none; opacity: .05; mix-blend-mode: overlay; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E"); background-size: 200px 200px; } /* --- Main wrapper sits above the fixed track ----------------------------- */ main { position: relative; z-index: var(--z-content); } section { position: relative; } .wrap { width: min(100% - 2.4rem, var(--maxw)); margin-inline: auto; } /* --- Overline (English / mono labels) ------------------------------------ */ .overline { font-family: var(--f-mono); font-size: var(--t-mono); letter-spacing: .38em; text-transform: uppercase; direction: ltr; unicode-bidi: isolate; opacity: .9; } /* --- Buttons ------------------------------------------------------------- */ .btn { --bg: var(--salsa); --tx: #fff; position: relative; display: inline-flex; align-items: center; gap: .55rem; padding: .95rem 1.9rem; border-radius: 999px; font-family: var(--f-head); font-weight: 800; font-size: 1.02rem; color: var(--tx); background: var(--bg); box-shadow: 0 6px 0 var(--salsa-deep), 0 14px 26px rgba(90,56,27,.34); transform: translateY(0); transition: transform .16s var(--ease-out), box-shadow .16s var(--ease-out), background .2s; white-space: nowrap; } .btn:hover { transform: translateY(-3px); box-shadow: 0 9px 0 var(--salsa-deep), 0 20px 34px rgba(90,56,27,.42); } .btn:active { transform: translateY(3px); box-shadow: 0 2px 0 var(--salsa-deep), 0 6px 14px rgba(90,56,27,.4); } .btn--ghost { --bg: transparent; --tx: var(--ink); box-shadow: inset 0 0 0 2px currentColor; } .btn--ghost:hover { box-shadow: inset 0 0 0 2px currentColor, 0 12px 22px rgba(0,0,0,.18); } .btn--gold { --bg: var(--aioli); --tx: var(--cocoa-deep); box-shadow: 0 6px 0 #8f7a48, 0 14px 26px rgba(90,56,27,.3); } .btn--gold:hover { box-shadow: 0 9px 0 #8f7a48, 0 20px 34px rgba(90,56,27,.4); } .btn__ico { width: 1.15em; height: 1.15em; } /* --- Section eyebrow ----------------------------------------------------- */ .eyebrow { display: inline-flex; align-items: center; gap: .6rem; font-family: var(--f-mono); font-size: var(--t-mono); letter-spacing: .3em; text-transform: uppercase; direction: ltr; } .eyebrow::before { content: ""; width: 34px; height: 2px; background: currentColor; opacity: .6; } /* --- Reveal primitives (JS toggles .is-in) ------------------------------- */ .reveal { opacity: 0; transform: translateY(34px); transition: opacity .9s var(--ease-out), transform .9s var(--ease-out); } .reveal.is-in { opacity: 1; transform: none; } /* --- Reduced motion ------------------------------------------------------ */ @media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } .reveal { opacity: 1 !important; transform: none !important; transition: none !important; } .roll-track { transition: none; } } /* utility */ .sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0; } /* ── images always COVER their box and CENTER (any source aspect) ───────────── Applies to fill-media (video/bg/gallery/bridge). No-op for width-based transparent product cutouts (car-item / hero__ing) which have no fixed height. */ .scene img, .scene video, .combo-bridge, .hero-clean-bg { object-fit: cover; object-position: 50% 50%; } /* ========================================================================== zoom.css — the "zoom tunnel" scroll engine The whole journey is ONE pinned stage. Scroll = zoom depth. Each scene grows from deep → full → past-the-camera while the next emerges from center. JS (rolly.js · initZoom) sets transform/opacity/z-index per scene per frame. ========================================================================== */ /* tall container; the stage sticks while it scrolls → scroll = zoom depth. Generous height = slow, deliberate reveal (~1.4 screens of scroll per scene, 5 scenes (hero · 3D menu · packaging · about · info); menu gets the biggest scroll slice (see CP in rolly.js) so each dish holds at front. */ .zoom { position: relative; z-index: var(--z-content); height: 2400vh; background: var(--cocoa-deep); } /* dark bg on MY element — any parking gap stays on-brand even where a WP theme overrides html/body */ .zoom__stage { position: relative; top: 0; height: 100vh; height: 100lvh; overflow: hidden; background: var(--cocoa-deep); perspective: 1200px; } /* Frontend tunnel: pin the stage with position:fixed — NOT position:sticky, which silently breaks inside overflow:hidden ancestors (common in WP themes) → the "white screen". fixed is immune to ancestor overflow. rolly.js "parks" it (absolute, bottom) at the very end so the footer is revealed, and reverts to this static layout if init fails. */ html.anim .zoom__stage { position: fixed; top: 0; left: 0; right: 0; width: 100%; height: 100vh; height: 100lvh; } html.anim .zoom__stage.is-parked { position: absolute; top: auto; bottom: 0; } .scene { position: absolute; inset: 0; z-index: 1; display: grid; place-items: center; transform-origin: 50% 50%; will-change: transform, opacity; backface-visibility: hidden; opacity: 0; } .scene__bg { position: absolute; inset: 0; z-index: 0; } .scene__bg::after { content: ""; position: absolute; inset: 0; } .scene__inner { position: relative; z-index: 3; width: min(100% - 2.4rem, var(--maxw)); margin-inline: auto; text-align: center; padding-inline: 1.2rem; } /* --- per-scene backgrounds (continuous warm palette shift) --- */ .scene--hero .scene__bg { background: url("../img/wood-table.jpg") center/cover no-repeat; } .scene--hero .scene__bg::after { background: radial-gradient(120% 90% at 50% 42%, transparent 28%, rgba(58,34,16,.55)), linear-gradient(180deg, rgba(58,34,16,.3), transparent 30% 60%, rgba(58,34,16,.45)); } .scene--pack .scene__bg { background: radial-gradient(120% 120% at 50% 42%, #7a4a24, var(--cocoa) 55%, var(--cocoa-deep)); } .scene--menu .scene__bg { background: radial-gradient(130% 130% at 50% 46%, #40260f, var(--cocoa-deep)); } /* About has NO background of its own — it overlays the frozen last frame of the bag video. A soft dark scrim keeps the text legible over it. */ .scene--about .scene__bg { background: none; } .scene--about .scene__bg::after { background: linear-gradient(180deg, rgba(20,10,4,.5), rgba(20,10,4,.32) 45%, rgba(20,10,4,.62)); } .scene--info .scene__bg { background: url("../img/info-bg.jpg") center/cover no-repeat; } .scene--info .scene__bg::after { background: radial-gradient(100% 80% at 60% 40%, transparent, rgba(20,12,6,.6)), linear-gradient(180deg, rgba(20,12,6,.62), rgba(20,12,6,.4) 40%, rgba(20,12,6,.78)); } /* ================= HERO scene ================= */ .scene--hero .scene__inner { color: #fff; } /* subtle staggered entrance for the hero title (once, after the preloader) */ @keyframes heroIn { from { opacity: 0; transform: translateY(28px); filter: blur(8px); } to { opacity: 1; transform: none; filter: blur(0); } } html.anim.rolly-in .scene--hero .overline { animation: heroIn .8s var(--ease-out) both .05s; } html.anim.rolly-in .scene--hero h1 { animation: heroIn 1s var(--ease-out) both .2s; } html.anim.rolly-in .scene--hero .hero__sub { animation: heroIn .9s var(--ease-out) both .42s; } html.anim.rolly-in .scene--hero .hero__cta { animation: heroIn .9s var(--ease-out) both .6s; } .scene--hero .overline { color: var(--aioli-light); text-shadow: 0 2px 8px rgba(0,0,0,.5); } .scene--hero h1 { font-size: var(--t-hero); color: #fff; margin-block: .06em .1em; text-shadow: 0 6px 30px rgba(0,0,0,.55); } .hero__sub { font-family: "Caveat", cursive; font-weight: 700; font-size: clamp(1.6rem,4.6vw,3.2rem); color: #fff2d6; direction: ltr; margin-block-end: .3em; /* strong readable halo so it stands out even over the dish */ text-shadow: 0 2px 6px rgba(20,10,4,.9), 0 0 22px rgba(20,10,4,.75), 0 4px 30px rgba(0,0,0,.6); } .hero__lead { font-size: var(--t-lead); color: #f2e9dc; max-width: 38rem; margin: 0 auto 1.6rem; text-shadow: 0 2px 12px rgba(0,0,0,.6); } .hero__cta { display: inline-flex; flex-wrap: wrap; gap: 1rem; justify-content: center; } /* each ingredient floats on its own — a soft cast shadow lifts it off the wood, and an independent idle animation makes it feel alive, not glued down */ .hero__ing { position: absolute; z-index: 2; width: var(--w, 200px); filter: drop-shadow(6px 30px 22px rgba(0,0,0,.5)); pointer-events: none; will-change: transform; transform-origin: center; animation: floaty var(--dur, 7s) ease-in-out infinite; animation-delay: var(--dly, 0s); } .ing-lime { inset-block-start: 6%; inset-inline-start: 3%; --w: clamp(170px,20vw,340px); --dur: 6.5s; --dly: -0.2s; --rot: -5deg; --fx: 14px; --fy: -22px; } .ing-cilantro { inset-block-start: 9%; inset-inline-end: 3%; --w: clamp(190px,23vw,390px); --dur: 8.5s; --dly: -1.4s; --rot: 4deg; --fx: -16px; --fy: -18px; } .ing-chili { inset-block-end: 8%; inset-inline-start: 5%; --w: clamp(160px,18vw,310px); --dur: 7.2s; --dly: -0.8s; --rot: 6deg; --fx: 12px; --fy: -26px; } .ing-tomato { inset-block-end: 5%; inset-inline-end: 5%; --w: clamp(160px,18vw,310px); --dur: 9s; --dly: -2.1s; --rot: -6deg; --fx: -14px; --fy: -20px; } .ing-avocado { inset-block-start: 55%; inset-inline-start: -1%; --w: clamp(150px,16vw,290px); --dur: 7.8s; --dly: -3s; --rot: 5deg; --fx: 18px; --fy: -16px; } .ing-pepper { inset-block-start: 60%; inset-inline-end: -1%; --w: clamp(150px,16vw,290px); --dur: 8.2s; --dly: -1s; --rot: -4deg; --fx: -18px; --fy: -24px; } @keyframes floaty { 0% { transform: translate(0,0) rotate(0); } 50% { transform: translate(var(--fx,10px), var(--fy,-20px)) rotate(var(--rot,4deg)); } 100% { transform: translate(0,0) rotate(0); } } /* hero background = scroll-scrubbed image-sequence canvas, full-bleed. INSTANT POSTER: a static hero photo sits behind the canvas bitmap via background-image, so the first screen is NEVER blank — even on slow internet before a single WebP frame decodes. Once frames load, drawImage paints over it opaquely. (Mobile swaps to the portrait poster below.) */ .hero__video { position: absolute; inset: 0; z-index: 0; width: 100%; height: 100%; object-fit: cover; pointer-events: none; background: #2a1710 url("../img/hero-poster.jpg") center/cover no-repeat; } @media (max-width: 820px) { .hero__video { background-image: url("../mobile/hero-poster-mobile.jpg"); } } /* logo is hidden in the FIRST view; it draws itself (on scroll) NEXT TO the dish at the end of the video, then fades as the zoom into the carousel begins (JS-driven). */ .hero__logomark { position: absolute; z-index: 910; top: 24%; left: 71%; width: clamp(420px, 50vw, 760px); translate: -50% -50%; pointer-events: none; opacity: 0; will-change: opacity; } .hero__logomark svg { width: 100%; height: auto; overflow: visible; } /* white stroke-outline logo (scoped so it never recolours other SVGs); JS draws it via dashoffset */ .hero__logomark path { fill: none !important; stroke: #fff; stroke-width: 2.5; stroke-linecap: round; stroke-linejoin: round; vector-effect: non-scaling-stroke; } @media (max-width: 820px) { .hero__logomark { top: 20%; left: 60%; width: clamp(280px, 66vw, 440px); } } /* title + CTA sit high on the first frame, with a generous gap below the header */ .scene--hero .scene__inner { align-self: start; margin-block-start: 23vh; } @media (max-width: 820px) { .scene--hero .scene__inner { margin-block-start: 19vh; } } /* subtle floating veg — FIRST VIEW ONLY (JS fades them in gently, then out on scroll) */ /* subtle, barely-moving (NO "jumping") — slow & tiny drift */ .scene--hero .hero__ing { opacity: 0; filter: drop-shadow(3px 12px 12px rgba(0,0,0,.38)); animation-duration: 12s; --fx: 3px; --fy: -5px; } /* 5 veg, asymmetric (3 left · 2 right) — not one-per-corner, off the centre. `inset: top right bottom left` (physical) overrides the base logical positions. */ .ing-cilantro { --w: clamp(160px, 18vw, 300px); inset: 2% auto auto -1%; } .ing-avocado { --w: clamp(115px, 13vw, 200px); inset: 47% auto auto -2%; } .ing-tomato { --w: clamp(115px, 13vw, 210px); inset: auto auto 5% 2%; } .ing-lime { --w: clamp(115px, 13vw, 195px); inset: 8% -1% auto auto; } .ing-chili { --w: clamp(80px, 10vw, 145px); inset: auto 5% 12% auto; } @media (max-width: 820px) { .scene--hero .hero__ing { --w: clamp(60px, 17vw, 110px) !important; } } .hero__spice { position: absolute; inset: 0; z-index: 4; pointer-events: none; } /* darkening scrim at rest so the headline never fights the wood; JS fades it out as the zoom begins (opacity driven by depth in initZoom) */ .hero__scrim { position: absolute; inset: 0; z-index: 1; pointer-events: none; background: linear-gradient(180deg, rgba(26,14,7,.55), rgba(26,14,7,.32) 45%, rgba(26,14,7,.6)); } html:not(.anim) .hero__scrim { opacity: .55; } .hero__cue { position: absolute; z-index: 5; inset-block-end: 4vh; inset-inline-start: 50%; translate: -50% 0; display: grid; place-items: center; gap: .5rem; color: var(--aioli-light); } .hero__cue .mouse { width: 24px; height: 40px; border: 2px solid currentColor; border-radius: 14px; position: relative; } .hero__cue .mouse::after { content:""; position:absolute; inset-inline-start:50%; inset-block-start:7px; width:4px; height:8px; border-radius:3px; background: currentColor; translate:-50% 0; animation: cueDrop 1.5s infinite; } @keyframes cueDrop { 0%{opacity:0;translate:-50% 0} 30%{opacity:1} 100%{opacity:0;translate:-50% 14px} } /* ================= LOGO scene (scroll-drawn brand mark) ================= */ .scene--logo .scene__inner { display: grid; place-items: center; } .logo-mark { width: clamp(300px, 60vw, 760px); } .logo-mark svg { width: 100%; height: auto; overflow: visible; } .logo-mark path { fill: none; stroke: var(--aioli-light); stroke-width: 1; stroke-linejoin: round; stroke-linecap: round; filter: drop-shadow(0 2px 12px rgba(0,0,0,.5)); } html:not(.anim) .logo-mark .cls-1 { fill: #e3ddd3; } html:not(.anim) .logo-mark .cls-2 { fill: #ae945f; } html:not(.anim) .logo-mark .cls-3 { fill: #ac9460; } html:not(.anim) .logo-mark .cls-4 { fill: #944821; } html:not(.anim) .logo-mark path { stroke: none; } .logo-tag { font-family: "Caveat", cursive; font-size: clamp(1.4rem,3.4vw,2.4rem); color: var(--tortilla-lt); margin-block-start: 1rem; direction: ltr; } /* ================= DISH station scene ================= */ .dish-hero { position: absolute; z-index: 2; top: 46%; left: 50%; transform: translate(-50%, -50%); width: clamp(360px, 52vw, 780px); filter: drop-shadow(0 48px 70px rgba(0,0,0,.58)); will-change: transform; } .scene--dish__cap { position: absolute !important; inset-block-end: 8vh; inset-inline: 0; color: #fff; } .scene--dish .overline { color: var(--aioli-light); text-shadow: 0 2px 10px rgba(0,0,0,.6); } .dish-cap { font-family: "Caveat", cursive; direction: rtl; font-weight: 700; font-size: clamp(2rem, 6vw, 4rem); color: #fff; text-shadow: 0 4px 22px rgba(0,0,0,.55); } @media (max-width: 820px) { .dish-hero { width: clamp(280px, 82vw, 460px); } } /* ================= INFINITE 3D CAROUSEL — the menu ====================== */ .scene--menu { perspective: 1500px; overflow: hidden; } .scene--menu .scene__bg { transition: background .6s var(--ease-out); } /* main bg morphs per dish */ .scene--menu .scene__bg::after { background: radial-gradient(60% 55% at 50% 44%, transparent 40%, rgba(0,0,0,.32) 100%); } /* giant blurred sauce splash behind the front dish (JS tints it per dish) */ .menu-splash { position: absolute; top: 42%; left: 50%; width: min(86vw, 860px); aspect-ratio: 1; transform: translate(-50%, -50%); border-radius: 50%; filter: blur(48px); opacity: .5; z-index: 1; background: var(--salsa); transition: background .5s var(--ease-out), opacity .5s; will-change: background; } /* MOBILE: hide the dish-colour splash glow. On the narrow/tall phone aspect its blurred circular edge sat ~22% down and read as a horizontal "seam" that recoloured per dish. The colour still changes per dish via the main .scene__bg gradient (uniform, edge-less) — just no seam. */ @media (max-width: 820px) { .menu-splash { display: none !important; } } .carousel { position: absolute; inset: 0; transform-style: preserve-3d; z-index: 2; transform-origin: 50% 34%; transition: transform .18s linear; } /* dish sits in the UPPER-half; tracks recede + tilt */ .car-item { position: absolute; top: 34%; left: 50%; width: clamp(210px, 24vw, 340px); transform-style: preserve-3d; } /* NOTE: no `will-change` here on purpose — it made the browser cache each dish's texture at its small layout size and then MAGNIFY it through the 3D perspective → blurry dishes. Without it the browser re-rasterizes the dishes crisply at their on-screen size. */ .car-item img { width: 100%; display: block; filter: drop-shadow(0 34px 36px rgba(0,0,0,.55)); } /* the combo card = the SAME no-bg cutout the seam dish shrinks into (transparent, wide plate) */ .car-item--combo { width: clamp(300px, 31vw, 440px); } /* clean foodless backdrop for the transition — behind the dish (above the video), so when the dish shrinks it reveals ONLY the empty wall/table (no duplicate food). */ .hero-clean-bg { position: absolute; inset: 0; z-index: 890; width: 100%; height: 100%; object-fit: cover; opacity: 0; pointer-events: none; will-change: opacity; } /* the single food layer — transparent dish cutout that shrinks & settles into the menu */ .combo-bridge { position: absolute; inset: 0; z-index: 900; width: 100%; height: 100%; object-fit: cover; opacity: 0; pointer-events: none; will-change: transform, opacity; transform-origin: 50% 50%; } /* small floating ingredients that FRAME the dish (fade in with the category, JS-driven opacity) */ .menu-ing { position: absolute; z-index: 3; top: 30%; width: clamp(70px, 8vw, 130px); opacity: 0; pointer-events: none; filter: drop-shadow(3px 12px 12px rgba(0,0,0,.45)); animation: floaty 9s ease-in-out infinite; --fx: 4px; --fy: -7px; } .menu-ing--l { inset-inline-start: 7%; --dly: -1s; } .menu-ing--r { inset-inline-end: 7%; top: 26%; --dly: -3s; } @media (max-width: 820px) { .menu-ing { width: clamp(52px, 13vw, 90px); } } .car-shadow { position: absolute; inset-block-end: -7%; inset-inline-start: 50%; width: 68%; height: 9%; transform: translateX(-50%); background: radial-gradient(closest-side, rgba(0,0,0,.45), transparent 78%); filter: blur(7px); } .menu-cap { position: absolute; inset-block-start: 60%; inset-inline: 0; text-align: center; z-index: 5; color: #fff; pointer-events: none; } .menu-cap .idx { font-family: var(--f-mono); direction: ltr; letter-spacing: .34em; font-size: clamp(.72rem,1.4vw,.92rem); color: var(--aioli-light); display: block; margin-block-end: .5rem; } .menu-cap h3 { font-size: clamp(2.4rem, 8vw, 5.6rem); color: #fff; line-height: .95; text-shadow: 0 4px 24px rgba(0,0,0,.5); } .menu-cap p { max-width: 34rem; margin: .5rem auto 0; color: #f2e9dc; font-size: var(--t-lead); text-shadow: 0 2px 14px rgba(0,0,0,.5); } /* no-JS / reduced-motion: show the dishes as a simple centered row */ html:not(.anim) .scene--menu { perspective: none; } html:not(.anim) .menu-splash { display: none; } html:not(.anim) .carousel { position: relative; inset: auto; transform: none; display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: clamp(1rem,3vw,2.5rem); padding: 7rem 1rem 2rem; } html:not(.anim) .car-item { position: relative; top: auto; left: auto; transform: none !important; opacity: 1 !important; filter: none !important; width: clamp(150px, 38vw, 230px); } html:not(.anim) .menu-cap { position: relative; inset: auto; margin-block-start: 1rem; } /* ================= SCROLL-SCRUBBED VIDEO scene ========================== */ .scene--bagvideo { overflow: hidden; background: var(--cocoa-deep); } /* on-brand (not pure black) so a slow-net frame gap stays warm */ .scene--bagvideo canvas { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; } @media (max-width: 820px) { .scene--menu { perspective: 1000px; } .car-item { width: clamp(160px, 48vw, 240px); } /* smaller dishes on mobile — lighter to composite + cleaner look */ .car-item--combo { width: clamp(190px, 54vw, 280px); } .menu-cap h3 { font-size: clamp(2rem, 11vw, 3.4rem); } .menu-cap p { font-size: .95rem; max-width: 88%; } } /* ================= GALLERY scene — a lush "feast" collage ================= */ .scene--gallery .scene__inner { max-width: min(94vw, 1180px); } .scene--gallery .eyebrow { color: var(--aioli-light); justify-content: center; margin-block-end: .9rem; } .scene--gallery h2 { font-size: var(--t-h2); color: #fff; margin-block-end: clamp(1rem,3vh,1.8rem); text-shadow: 0 4px 22px rgba(0,0,0,.4); } .gallery { display: grid; grid-template-columns: repeat(4, 1fr); grid-auto-rows: clamp(90px, 15vh, 150px); gap: clamp(.5rem, 1vw, .9rem); } .gallery figure { overflow: hidden; border-radius: 14px; box-shadow: 0 18px 40px rgba(0,0,0,.4); } .gallery img { width: 100%; height: 100%; object-fit: cover; transition: transform .6s var(--ease-out); } .gallery figure:hover img { transform: scale(1.08); } .gallery .g-a { grid-column: span 2; grid-row: span 2; } .gallery .g-b { grid-column: span 2; grid-row: span 1; } .gallery .g-c { grid-column: span 1; grid-row: span 2; } .gallery .g-d { grid-column: span 1; grid-row: span 1; } @media (max-width: 820px) { .gallery { grid-template-columns: repeat(2, 1fr); grid-auto-rows: 30vw; } .gallery .g-a { grid-column: span 2; } .gallery .g-c { grid-row: span 1; } } /* ================= ABOUT scene ================= */ .scene--about .scene__inner { max-width: 60rem; } .scene--about .eyebrow { color: var(--aioli-light); justify-content: center; margin-block-end: 1rem; } .scene--about h2 { font-size: var(--t-h2); color: #fff; margin-block-end: .55em; text-shadow: 0 4px 24px rgba(0,0,0,.5); } .scene--about h2 em { font-style: normal; color: var(--aioli-light); } /* ================= INFO scene ================= */ .scene--info .scene__inner { max-width: 1080px; color: #f3ead2; } .scene--info .eyebrow { color: var(--aioli-light); justify-content: center; margin-block-end: 1rem; } .info__head { margin-block-end: clamp(1.5rem,5vh,2.6rem); } .info__addr { font-family: var(--f-body); font-weight: 500; font-size: var(--t-lead); color: #e9dcc0; margin-block-start: .5rem; } /* ================= zoom depth cue / progress ================= */ /* persistent "keep scrolling" cue — stays visible the WHOLE journey (both devices), fades only near the very end (JS hides it once Info takes over). White + shadow so it reads over any scene. */ .zoom__hint { position: fixed; z-index: 60; inset-block-end: 2.6vh; inset-inline: 0; display: grid; place-items: center; gap: .45rem; text-align: center; color: #fff; pointer-events: none; transition: opacity .5s; text-shadow: 0 2px 12px rgba(0,0,0,.6); } .zoom__hint .overline { font-size: .62rem; opacity: .92; } .zoom__hint .mouse { width: 22px; height: 36px; border: 2px solid currentColor; border-radius: 13px; position: relative; opacity: .9; } .zoom__hint .mouse::after { content:""; position:absolute; inset-inline-start:50%; inset-block-start:6px; width:3.5px; height:7px; border-radius:3px; background: currentColor; translate:-50% 0; animation: cueDrop 1.5s infinite; } .zoom__hint.hide { opacity: 0; } @media (max-width: 820px) { .zoom__hint { inset-block-end: 2vh; } .zoom__hint .mouse { width: 20px; height: 32px; } } /* ================= no-JS / reduced-motion fallback: stacked scenes ======== */ html:not(.anim) .zoom { height: auto; } html:not(.anim) .zoom__stage { position: static; height: auto; overflow: visible; perspective: none; } html:not(.anim) .scene { position: relative; inset: auto; min-height: 100vh; opacity: 1 !important; transform: none !important; visibility: visible !important; } html:not(.anim) .zoom__hint { display: none; } html:not(.anim) .logo-mark .cls-1 { fill: #e3ddd3; } html:not(.anim) .logo-mark .cls-2 { fill: #ae945f; } html:not(.anim) .logo-mark .cls-3 { fill: #ac9460; } html:not(.anim) .logo-mark .cls-4 { fill: #944821; } html:not(.anim) .logo-mark path { stroke: none; } @media (prefers-reduced-motion: reduce) { .hero__cue .mouse::after, .hero__ing, .carousel { animation: none; } } /* ================= mobile ================= */ @media (max-width: 820px) { /* bigger, bolder hero title — wraps to 2 lines (ch cap) so it never overflows a phone */ .scene--hero h1 { font-size: clamp(2.7rem, 11.5vw, 3.9rem); line-height: 1.04; max-width: 11ch; margin-inline: auto; text-wrap: balance; } .hero__sub { font-size: clamp(1.5rem, 5.8vw, 2.3rem); } } /* ============================================================================ MOBILE — dedicated polish (≤600px). The zoom tunnel keeps working (native scroll drives ScrollTrigger); sizes/positions tuned so nothing clips. ============================================================================ */ @media (max-width: 600px) { /* hero */ .scene--hero h1 { font-size: clamp(2.6rem, 12.5vw, 3.5rem); line-height: 1.04; max-width: 10ch; margin-inline: auto; text-wrap: balance; } .hero__sub { font-size: clamp(1.4rem, 7vw, 2rem); } .scene--hero .overline { font-size: .55rem; letter-spacing: .22em; } .hero__cta { gap: .55rem; flex-wrap: wrap; } .hero__cta .btn { padding: .72rem 1.05rem; font-size: .92rem; box-shadow: 0 4px 0 var(--salsa-deep), 0 10px 18px rgba(90,56,27,.34); } /* keep the asymmetric hero cluster on mobile too (sizes scaled by the ≤820 rule) */ .hero__ing { filter: drop-shadow(4px 16px 14px rgba(0,0,0,.5)); } /* 3D carousel — dish UPPER, caption BELOW (same layout as desktop, tuned for phone) */ .scene--menu { perspective: 820px; } .car-item { width: clamp(130px, 44vw, 195px); } /* phones: ~24% smaller dishes */ .car-item--combo { width: clamp(160px, 50vw, 240px); } .menu-cap { inset-block-start: 55%; inset-block-end: auto; padding-inline: 1.2rem; } .menu-cap h3 { font-size: clamp(2rem, 12vw, 3.2rem); } .menu-cap p { font-size: 1rem; line-height: 1.55; max-width: 30rem; margin-inline: auto; } .menu-splash { width: min(96vw, 520px); } /* about (over the frozen frame) — comfortable text spacing */ .scene--about h2 { font-size: clamp(2rem, 9.5vw, 2.9rem); line-height: 1.1; } .reveal-copy { font-size: clamp(1.2rem, 5.6vw, 1.7rem); line-height: 1.55; } .about__values { gap: .55rem; margin-block-start: 1.8rem; } .about__values .chip { padding: .6rem 1.05rem; font-size: .95rem; } /* info · branches — comfortable spacing */ .scene--info .scene__inner { padding-inline: 1.3rem; } .info__addr { font-size: 1.05rem; line-height: 1.5; } .info__grid { gap: 1rem; } .fixture .rows { line-height: 1.5; } } /* ================= KINETIC HORIZONTAL PARALLAX GALLERY =================== */ .scene--gallery { overflow: hidden; background: var(--cocoa-deep); } /* slow dark background texture layer (ratio ~0.2) */ .gal-bg { position: absolute; inset: 0; width: 140%; height: 100%; z-index: 0; background: url("../img/info-bg.jpg") center/cover no-repeat; will-change: transform; } .gal-bg::after { content: ""; position: absolute; inset: 0; background: rgba(20,12,6,.6); } /* mid outline typography layer (ratio ~0.5) */ .gal-text { position: absolute; top: 50%; left: 0; transform: translateY(-50%); z-index: 1; display: flex; align-items: center; gap: 6vw; width: max-content; white-space: nowrap; direction: ltr; pointer-events: none; will-change: transform; } .gal-text span { font-family: var(--f-head); font-weight: 900; font-size: 24vh; line-height: 1; color: transparent; -webkit-text-stroke: 2px rgba(182,159,107,.32); } /* foreground image row (ratio 1 — fastest) */ .gal-track { position: absolute; top: 0; left: 0; height: 100%; z-index: 2; direction: ltr; display: flex; align-items: center; gap: 4vw; padding-inline: 9vw; width: max-content; will-change: transform; } .gal-card { flex: 0 0 auto; width: clamp(260px, 32vw, 480px); aspect-ratio: 4/5; border-radius: 18px; overflow: hidden; box-shadow: 0 40px 70px rgba(0,0,0,.55); transform: rotate(var(--r,0deg)); transition: transform .4s var(--ease-out), box-shadow .4s; will-change: transform; } .gal-card:nth-child(odd) { --r: -2.5deg; } .gal-card:nth-child(even) { --r: 2.5deg; } .gal-card img { width: 100%; height: 100%; object-fit: cover; } .gal-card:hover { transform: rotate(0deg) scale(1.05); box-shadow: 0 52px 92px rgba(0,0,0,.62); } /* mobile: cards auto-traverse horizontally as you scroll (JS drives translateX) — clearly a moving gallery. gal-track keeps its absolute / max-content layout (do NOT switch to overflow). */ @media (max-width: 820px) { .gal-bg { width: 100%; } /* replace the giant outline typography with one small gold overline at the top */ .scene--gallery .gal-text { position: absolute; inset: 9% 0 auto 0; transform: none; display: block; text-align: center; z-index: 3; width: 100%; } .scene--gallery .gal-text span { display: none; font-size: .82rem !important; letter-spacing: .32em; -webkit-text-stroke: 0 !important; color: var(--aioli-light) !important; font-weight: 800; } .scene--gallery .gal-text span:first-child { display: inline-block; } .gal-track { gap: 6vw; padding-inline: 14vw; } /* one card centred at a time, next peeks */ .gal-card { width: 72vw; max-width: 340px; aspect-ratio: 4/5; transform: rotate(0deg) !important; } /* straighten */ .gal-card:hover { transform: rotate(0deg) !important; box-shadow: 0 40px 70px rgba(0,0,0,.55); } } html:not(.anim) .gal-track { position: relative; overflow-x: auto; padding-block: 18vh; } /* ========================================================================== header.css — floating frosted header, audio wave toggle, order dropdown, branded preloader ========================================================================== */ /* ---- Preloader ---------------------------------------------------------- */ .preloader { position: fixed; inset: 0; z-index: var(--z-preload); display: flex; flex-direction: column; align-items: center; justify-content: center; gap: clamp(20px, 3.4vh, 34px); background: var(--cocoa-deep); transition: opacity .7s var(--ease-out), visibility .7s; } .preloader.done { opacity: 0; visibility: hidden; } .preloader__mark { /* brand logo, ABOVE the bar */ width: clamp(120px, 26vw, 200px); height: auto; animation: rollSpin 1.15s var(--ease-io) infinite; } .preloader__bar { /* progress bar, below the logo */ width: min(260px, 60vw); height: 3px; border-radius: 3px; background: rgba(255,255,255,.14); overflow: hidden; } .preloader__bar i { display: block; height: 100%; width: 0; background: var(--aioli); transition: width .3s var(--ease-out); } .preloader__pct { /* live percentage, below the bar */ font-family: var(--f-mono); font-size: .78rem; letter-spacing: .3em; color: var(--aioli-light); } @keyframes rollSpin { 0% { transform: rotate(0) translateY(0); } 50% { transform: rotate(180deg) translateY(-8px); } 100% { transform: rotate(360deg) translateY(0); } } /* ---- Header ------------------------------------------------------------- */ .header { position: absolute; inset-block-start: 0; inset-inline: 0; z-index: var(--z-header); display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding: clamp(.7rem, 2vw, 1.15rem) clamp(1rem, 4vw, 2.6rem); background: rgba(58,34,16,0); backdrop-filter: blur(0px); -webkit-backdrop-filter: blur(0px); border-block-end: 1px solid transparent; transition: background .4s var(--ease-out), backdrop-filter .4s, border-color .4s, padding .4s; } .header.solid { background: rgba(58,34,16,.82); backdrop-filter: blur(12px) saturate(1.2); -webkit-backdrop-filter: blur(12px) saturate(1.2); border-block-end-color: rgba(182,159,107,.22); padding-block: clamp(.5rem, 1.4vw, .8rem); } .header__logo { display: flex; align-items: center; } .header__logo img { height: clamp(74px, 10.5vw, 128px); width: auto; filter: drop-shadow(0 2px 8px rgba(0,0,0,.35)); transition: transform .3s var(--ease-out); } .header__logo:hover img { transform: scale(1.05); } .header__nav { display: flex; align-items: center; gap: clamp(1rem, 2.4vw, 2.2rem); } .header__nav a { position: relative; font-family: var(--f-head); font-weight: 700; font-size: clamp(1.18rem, 1.5vw, 1.4rem); color: #f3ebdd; padding-block: .3rem; } .header__nav a::after { content: ""; position: absolute; inset-inline: 0; inset-block-end: -2px; height: 2px; background: var(--aioli); transform: scaleX(0); transform-origin: inline-end; transition: transform .3s var(--ease-out); } .header__nav a:hover::after { transform: scaleX(1); transform-origin: inline-start; } /* lock nav-link colour in EVERY state so no host/theme turns the text pink on hover / active / focus */ .header__nav a, .header__nav a:link, .header__nav a:visited, .header__nav a:hover, .header__nav a:focus, .header__nav a:active { color: #f3ebdd !important; } .header__actions { display: flex; align-items: center; gap: .8rem; } /* audio wave toggle */ .audio-toggle { position: relative; display: grid; place-items: center; width: 44px; height: 44px; border-radius: 50%; background: rgba(255,255,255,.08); box-shadow: inset 0 0 0 1.5px rgba(182,159,107,.5); transition: background .25s, box-shadow .25s; } .audio-toggle:hover { background: rgba(182,159,107,.2); } .audio-toggle svg { width: 22px; height: 22px; } .audio-toggle .bar { transform-origin: center; animation: eq 1s ease-in-out infinite; } .audio-toggle .bar:nth-child(2){ animation-delay:.15s } .audio-toggle .bar:nth-child(3){ animation-delay:.3s } .audio-toggle .bar:nth-child(4){ animation-delay:.45s } .audio-toggle[aria-pressed="false"] .bar { animation: none; } @keyframes eq { 0%,100%{ transform: scaleY(.35) } 50%{ transform: scaleY(1) } } /* order dropdown */ .order-cta { position: relative; } .order-menu { position: absolute; inset-block-start: calc(100% + .6rem); inset-inline-end: 0; min-width: 210px; padding: .5rem; border-radius: 16px; background: rgba(58,34,16,.96); backdrop-filter: blur(10px); box-shadow: 0 20px 50px rgba(0,0,0,.4); border: 1px solid rgba(182,159,107,.25); opacity: 0; visibility: hidden; transform: translateY(-8px) scale(.98); transition: opacity .22s var(--ease-out), transform .22s var(--ease-out), visibility .22s; } .order-cta.open .order-menu { opacity: 1; visibility: visible; transform: none; } .order-menu a { display: flex; align-items: center; gap: .7rem; padding: .8rem 1rem; border-radius: 11px; color: #f3ebdd; font-family: var(--f-head); font-weight: 700; transition: background .18s; } .order-menu a:hover { background: rgba(182,159,107,.18); } .order-menu a span:first-child { font-size: 1.2rem; } /* mobile nav toggle */ .nav-burger { display: none; width: 46px; height: 46px; border-radius: 12px; background: rgba(255,255,255,.08); box-shadow: inset 0 0 0 1.5px rgba(182,159,107,.5); } .nav-burger i { display: block; width: 20px; height: 2px; background: #f3ebdd; margin: 4px auto; transition: .3s; } .header.nav-open .nav-burger i:nth-child(1){ transform: translateY(6px) rotate(45deg); } .header.nav-open .nav-burger i:nth-child(2){ opacity: 0; } .header.nav-open .nav-burger i:nth-child(3){ transform: translateY(-6px) rotate(-45deg); } /* lock burger colour so no host/theme tints it pink on hover / active / focus */ .nav-burger:hover, .nav-burger:focus, .nav-burger:focus-visible, .nav-burger:active { background: rgba(255,255,255,.08) !important; } .nav-burger:hover i, .nav-burger:focus i, .nav-burger:focus-visible i, .nav-burger:active i { background: #f3ebdd !important; } @media (max-width: 860px) { /* header BAR is NON-sticky (scrolls away). The burger lives IN the header (top of page); the menu opens when you tap it while the header is in view. */ .nav-burger { display: block; order: 3; } /* burger sits above the full-screen menu so it stays tappable to CLOSE it */ .header__actions { position: relative; z-index: 2; } .header__nav { position: fixed; inset: 0; width: 100%; height: 100vh; height: 100lvh; flex-direction: column; justify-content: center; gap: 1.6rem; background: rgba(58,34,16,.98); backdrop-filter: blur(16px); transform: translateY(-100%); opacity: 0; visibility: hidden; transition: transform .45s var(--ease-io), opacity .3s, visibility .45s; z-index: 1; } .header.nav-open .header__nav { transform: none; opacity: 1; visibility: visible; } .header__nav a { font-size: 1.9rem; } .header__actions .btn span.txt { display: none; } } /* compact header on phones — smaller logo so the bar isn't oversized/crowded */ @media (max-width: 600px) { .header { padding: .55rem .9rem; } .header__logo img { height: 66px; } } /* ========================================================================== about.css — Section 3 "טריות · איכות · דיוק" · scroll word-by-word reveal ========================================================================== */ .about { position: relative; z-index: var(--z-content); min-height: 130vh; display: grid; align-items: center; padding-block: var(--pad-sec); overflow: hidden; } .about__bg { position: absolute; inset: -8% 0; z-index: 0; background: url("../img/about-bg.png") center/cover no-repeat; will-change: transform; } .about__bg::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(246,241,232,.72), rgba(215,200,173,.5) 45%, rgba(246,241,232,.8)); backdrop-filter: blur(2px); } .about__inner { position: relative; z-index: 2; max-width: 60rem; margin-inline: auto; text-align: center; padding-inline: 1.2rem; } /* smooth scroll-driven entrance (JS slides these up + fades in) */ .scene--about .eyebrow, .scene--about h2, .scene--about .reveal-copy, .scene--about .about__values { will-change: transform, opacity; } .about .eyebrow { color: var(--salsa); justify-content: center; margin-block-end: 1.2rem; } .about h2 { font-size: var(--t-h2); color: var(--salsa); margin-block-end: .7em; } .about h2 em { font-style: normal; color: var(--cocoa); } /* word reveal paragraph */ .reveal-copy { font-family: var(--f-head); font-weight: 800; line-height: 1.4; font-size: clamp(1.4rem, 3.6vw, 2.7rem); color: #f3ead2; text-shadow: 0 2px 16px rgba(0,0,0,.5); } .reveal-copy .w { display: inline-block; color: rgba(255,255,255,.22); transition: color .3s var(--ease-out); } .reveal-copy .w.lit { color: #fff; } /* value chips overlapping into the info chapter */ .about__values { position: relative; z-index: 2; display: flex; flex-wrap: wrap; justify-content: center; gap: 1rem; margin-block-start: clamp(2rem,6vh,4rem); } .about__values .chip { display: inline-flex; align-items: center; gap: .5rem; padding: .7rem 1.3rem; border-radius: 999px; background: rgba(255,255,255,.12); color: #fff; font-family: var(--f-head); font-weight: 800; box-shadow: inset 0 0 0 1.5px rgba(255,255,255,.34); backdrop-filter: blur(3px); } .about__values .chip span { font-size: 1.2rem; } /* ========================================================================== info.css — Section 4 · urban neon hours & location on a concrete wall ========================================================================== */ .info { position: relative; z-index: var(--z-content); padding-block: clamp(5rem,12vh,9rem); overflow: hidden; color: #f3ead2; } .info__bg { position: absolute; inset: -6% 0; z-index: 0; background: url("../img/info-bg.jpg") center/cover no-repeat; will-change: transform; } .info__bg::after { content:""; position:absolute; inset:0; background: radial-gradient(100% 80% at 70% 40%, transparent, rgba(20,12,6,.55)), linear-gradient(180deg, rgba(20,12,6,.6), rgba(20,12,6,.35) 40%, rgba(20,12,6,.75)); } .info__inner { position: relative; z-index: 2; width: min(100% - 2.4rem, 1080px); margin-inline: auto; } .info__head { text-align: center; margin-block-end: clamp(2rem,6vh,3.5rem); } .info .eyebrow { color: var(--aioli-light); justify-content: center; margin-block-end: 1rem; } /* neon text primitives */ .neon { font-family: var(--f-head); font-weight: 900; } .neon--gold { color: #fff6dc; text-shadow: var(--glow-gold); } .neon--cream { color: #fff; text-shadow: var(--glow-cream); } .neon--rust { color: #ffd0ad; text-shadow: var(--glow-rust); } .info__title { font-size: clamp(2.4rem,7vw,4.6rem); line-height: 1.05; } .info__addr { font-family: var(--f-body); font-weight: 500; font-size: var(--t-lead); color: #e9dcc0; margin-block-start: .6rem; opacity: .92; } /* grid of neon fixtures */ .info__grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(1.2rem,3vw,2.2rem); max-width: 820px; margin-inline: auto; align-items: stretch; } .fixture { position: relative; grid-column: span 4; padding: clamp(1.4rem,3vw,2.2rem); border-radius: 18px; background: linear-gradient(160deg, rgba(255,255,255,.06), rgba(255,255,255,.02)); box-shadow: inset 0 0 0 1.5px rgba(182,159,107,.28), 0 24px 50px rgba(0,0,0,.4); backdrop-filter: blur(3px); } .fixture h3 { font-family: var(--f-mono); direction: ltr; font-size: .72rem; letter-spacing: .28em; text-transform: uppercase; color: var(--aioli-light); margin-block-end: 1rem; opacity: .85; } .fixture .rows { display: grid; gap: .55rem; font-family: var(--f-head); font-weight: 700; font-size: clamp(1rem,1.7vw,1.28rem); } .fixture .rows .d { color: var(--aioli-light); font-family: var(--f-mono); direction: ltr; font-size: .8em; opacity: .8; } /* two balanced fixtures side-by-side (hours + contact) — fills the width, no empty gap */ .fixture--hours { grid-column: auto; } .fixture--contact { grid-column: auto; } .info__phone { display: inline-flex; align-items: center; gap: .5rem; direction: ltr; } .info__phone svg { width: 1.1em; height: 1.1em; } /* kosher circular emblem */ .kosher { width: clamp(90px,13vw,128px); aspect-ratio: 1; border-radius: 50%; display: grid; place-items: center; margin-block-end: .8rem; box-shadow: 0 0 0 2px var(--salsa), 0 0 10px var(--salsa), inset 0 0 12px rgba(148,71,33,.6); color: #ffcaa6; text-shadow: var(--glow-rust); } .kosher b { font-size: clamp(2rem,5vw,3rem); font-family: var(--f-head); line-height: 1; } .kosher small { font-size: .7rem; letter-spacing: .1em; } /* flicker — added by JS on entry via .flicker-on */ .flicker-on .neon--gold { animation: flickGold 3.2s infinite; } .flicker-on .neon--cream { animation: flickCream 4.1s infinite; } @keyframes flickGold { 0%,18%,22%,25%,53%,57%,100% { text-shadow: var(--glow-gold); opacity: 1; } 20%,24%,55% { text-shadow: none; opacity: .55; } } @keyframes flickCream { 0%,40%,43%,100% { text-shadow: var(--glow-cream); opacity: 1; } 41%,42% { text-shadow: none; opacity: .6; } } .info__cta { margin-block-start: clamp(2rem,5vh,3rem); display: flex; justify-content: center; gap: 1rem; flex-wrap: wrap; } @media (prefers-reduced-motion: reduce) { .flicker-on .neon--gold, .flicker-on .neon--cream { animation: none; } } @media (max-width: 820px) { .info__grid { grid-template-columns: 1fr; gap: .8rem; } .fixture, .fixture--hours, .fixture--contact, .fixture--kosher { grid-column: 1 / -1; } /* fit the whole branch section in ONE mobile viewport so nothing (title / delivery button) gets clipped by the scene's overflow. Tightens spacing only — layout, order & design unchanged. */ .info__head { margin-block-end: 1rem; } .fixture { padding: .95rem 1.1rem; } .fixture h3 { margin-block-end: .5rem; } .fixture .rows { gap: .4rem; } .info__cta { margin-block-start: .9rem; gap: .7rem; } } .info__kosher { margin-block-start: .6rem; font-weight: 800; letter-spacing: .04em; } /* ========================================================================== footer.css — dark cocoa footer, 3 columns + copyright, glowing socials ========================================================================== */ .footer { position: relative; z-index: 1; /* BELOW the fixed zoom-stage (z-content=5) so it never paints over the tunnel; it only shows once the stage "parks" at the end. */ background: var(--cocoa-deep); color: var(--tortilla-lt); padding-block: clamp(3.5rem,8vh,6rem) 0; } .footer__grid { width: min(100% - 2.4rem, var(--maxw)); margin-inline: auto; display: grid; grid-template-columns: 1.4fr 1fr 1fr; gap: clamp(2rem,5vw,4rem); padding-block-end: clamp(2.5rem,6vh,4rem); } .footer__brand img { height: 48px; width: auto; margin-block-end: 1.1rem; } .footer__brand p { max-width: 26rem; color: rgba(236,227,209,.72); } .footer__brand .copy { margin-block-start: 1.2rem; font-family: var(--f-head); font-weight: 700; color: var(--aioli-light); } .footer h4 { font-family: var(--f-mono); direction: ltr; font-size: .72rem; letter-spacing: .26em; text-transform: uppercase; color: var(--aioli-light); margin-block-end: 1.1rem; opacity: .85; } .footer__col ul { display: grid; gap: .7rem; } .footer__col a { color: rgba(236,227,209,.82); transition: color .2s, padding-inline-start .2s; } .footer__col a:hover { color: #fff; padding-inline-start: .3rem; } .socials { display: flex; gap: .8rem; } .socials a { width: 46px; height: 46px; border-radius: 50%; display: grid; place-items: center; color: var(--aioli-light); box-shadow: inset 0 0 0 1.5px rgba(182,159,107,.4); transition: transform .25s var(--ease-out), box-shadow .25s, color .25s; } .socials a:hover { transform: translateY(-4px); color: #fff; box-shadow: inset 0 0 0 1.5px var(--aioli), 0 0 10px var(--aioli), 0 0 22px rgba(182,159,107,.6); } .socials svg { width: 22px; height: 22px; } .footer__bar { border-block-start: 1px solid rgba(182,159,107,.18); padding-block: 1.4rem; text-align: center; font-size: .88rem; color: rgba(236,227,209,.6); } .footer__bar a { color: var(--aioli-light); } @media (max-width: 820px) { .footer__grid { grid-template-columns: 1fr; gap: 2rem; text-align: center; } .footer__brand img, .footer__brand p, .socials { margin-inline: auto; } /* center the block logo too (text-align doesn't center a block img) */ .footer__col ul { justify-items: center; } .socials { justify-content: center; } } /* ========================================================================== order.css — center order modal (איסוף עצמי / משלוחים), opened by any CTA ========================================================================== */ .modal { position: fixed; inset: 0; z-index: var(--z-modal); display: grid; place-items: center; padding: 1.2rem; opacity: 0; visibility: hidden; transition: opacity .3s var(--ease-out), visibility .3s; } .modal.open { opacity: 1; visibility: visible; } .modal__scrim { position: absolute; inset: 0; background: rgba(30,16,8,.72); backdrop-filter: blur(6px); } .modal__card { position: relative; width: min(100%, 520px); background: var(--paper); color: var(--ink); border-radius: var(--radius-lg); padding: clamp(1.6rem,4vw,2.6rem); text-align: center; box-shadow: 0 40px 90px rgba(0,0,0,.5); transform: translateY(20px) scale(.96); transition: transform .35s var(--ease-out); border: 1px solid rgba(148,71,33,.15); } .modal.open .modal__card { transform: none; } .modal__card img.logo { height: 44px; width: auto; margin-inline: auto; margin-block-end: 1rem; } .modal__card h3 { font-family: var(--f-head); color: var(--salsa); font-size: clamp(1.5rem,4vw,2rem); margin-block-end: .4rem; } .modal__card p { color: var(--cocoa); margin-block-end: 1.5rem; } .modal__opts { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; } .modal__opt { display: grid; gap: .5rem; place-items: center; padding: 1.6rem 1rem; border-radius: 18px; background: #fff; box-shadow: inset 0 0 0 2px rgba(148,71,33,.18); font-family: var(--f-head); font-weight: 800; color: var(--cocoa-deep); transition: transform .2s var(--ease-out), box-shadow .2s, background .2s; } .modal__opt:hover { transform: translateY(-4px); background: var(--salsa); color: #fff; box-shadow: 0 16px 34px rgba(148,71,33,.4); } .modal__opt .em { font-size: 2.2rem; } .modal__close { position: absolute; inset-block-start: .9rem; inset-inline-end: 1.1rem; width: 38px; height: 38px; border-radius: 50%; display: grid; place-items: center; background: rgba(148,71,33,.1); font-size: 1.3rem; color: var(--salsa); } .modal__close:hover { background: var(--salsa); color: #fff; } @media (max-width: 460px){ .modal__opts { grid-template-columns: 1fr; } } /* ========================================================================== a11y.css — floating accessibility widget + body-level a11y modes ========================================================================== */ .a11y { position: fixed; z-index: var(--z-a11y); inset-block-end: clamp(1rem,3vw,1.6rem); inset-inline-start: clamp(1rem,3vw,1.6rem); } .a11y__btn { width: 56px; height: 56px; border-radius: 50%; display: grid; place-items: center; background: var(--salsa); color: #fff; box-shadow: 0 10px 26px rgba(0,0,0,.35); transition: transform .2s var(--ease-out); } .a11y__btn:hover { transform: scale(1.06); } .a11y__btn svg { width: 28px; height: 28px; } .a11y__panel { position: absolute; inset-block-end: calc(100% + .8rem); inset-inline-start: 0; width: 288px; max-width: 82vw; padding: 1rem; border-radius: 18px; background: #fff; color: var(--ink); box-shadow: 0 24px 60px rgba(0,0,0,.35); border: 1px solid rgba(148,71,33,.18); opacity: 0; visibility: hidden; transform: translateY(12px) scale(.98); transition: opacity .25s var(--ease-out), transform .25s var(--ease-out), visibility .25s; } .a11y.open .a11y__panel { opacity: 1; visibility: visible; transform: none; } .a11y__panel h4 { font-family: var(--f-head); color: var(--salsa); margin-block-end: .8rem; font-size: 1.15rem; } .a11y__opt { display: flex; align-items: center; gap: .7rem; width: 100%; text-align: start; padding: .7rem .8rem; border-radius: 12px; margin-block-end: .4rem; background: var(--paper); font-family: var(--f-head); font-weight: 700; font-size: .98rem; transition: background .18s; } .a11y__opt:hover { background: var(--tortilla-lt); } .a11y__opt[aria-pressed="true"] { background: var(--salsa); color: #fff; } .a11y__opt span:first-child { font-size: 1.2rem; } .a11y__reset { width: 100%; margin-block-start: .4rem; padding: .6rem; border-radius: 12px; font-family: var(--f-head); font-weight: 700; color: var(--salsa); box-shadow: inset 0 0 0 1.5px var(--salsa); } /* ---- Body-level modes (toggled on ) ---- */ html.a11y-contrast { filter: contrast(1.35) saturate(1.2); } html.a11y-contrast .roll-track { background: #000 !important; } html.a11y-contrast .about__bg::after, html.a11y-contrast .info__bg::after { background: rgba(0,0,0,.7) !important; } html.a11y-big-text body { font-size: 1.24rem; } html.a11y-big-text h1, html.a11y-big-text h2, html.a11y-big-text h3 { letter-spacing: 0; } html.a11y-links a:not(.btn):not(.header__logo):not(.socials a) { outline: 2px dashed var(--aioli); outline-offset: 2px; background: rgba(182,159,107,.16); text-decoration: underline; text-underline-offset: 3px; } /* "stop motion" — kills GSAP timelines (JS) + CSS animations/video */ html.a11y-still *, html.a11y-still *::before, html.a11y-still *::after { animation-play-state: paused !important; transition: none !important; } html.a11y-still .roll-track { transition: none !important; } /* ============================================================================ Standalone Header/Footer widgets (used on OTHER pages, not the zoom experience). The shared .header is position:absolute for the tunnel overlay — a standalone header must flow normally in the page instead. ============================================================================ */ .rolly-standalone-header { position: relative !important; inset: auto !important; } /* ============================================================================ Fixes: kill inherited theme/Elementor default pink (#cc3366), and hide the in-widget accessibility button (site uses its own a11y plugin). ============================================================================ */ #rolly-root, .rolly-standalone-header, .rolly-standalone-footer { color: #f3ead2; } #rolly-root .info__phone, #rolly-root .info__phone:hover, #rolly-root .info__phone .ltr, #rolly-root .fixture .rows a { color: inherit; } #rolly-root .a11y, .a11y#a11y { display: none !important; } /* ============================================================================ Hello Elementor's reset.css forces a 1px pink (#cc3366) border + pink text on EVERY