/* ============================================================================ * TADA Hero — the live homepage layered slides (Etli / Vişneli / Biscotti). * Layered rebuild of the approved composites; coordinates measured off the golden * master. Namespace `.tada-hero-v2*` only (the live slider adds `.tada-hero-live` * / `.tada-hero-v2--slide` / `.tada-hero-mobile` at the bottom of this file). * Host geometry mirrors the production composite hero (viewport-fill, 50px * radius, gray card). The 2048/1123 stage is uniform-fit & centred; every layer * is positioned as a % of that stage so it tracks the golden composition. * ==========================================================================*/ .tada-hero-v2 { --hero-top-offset: 30px; --copy-left: 75px; /* == header search-icon left at 1440 (grid-aligned, measured) */ /* Per-GROUP vertical trim vs the approved composite baseline (references/qa/hero-composite-approved-baseline.png). Horizontal geometry is frozen; only these Y offsets move whole groups. Negative = up. Measured deltas at 1440×900: copy +5 / materials ~+3 / cloth +7 low; bowl, beans, video, socials already aligned. */ --copy-shift-y: -38px; --product-shift-y: -34px; --material-shift-y: -34px; --side-shift-y: -42px; --video-shift-y: -32px; --social-shift-y: -30px; --pagination-shift-y: -54px; /* Shared pagination tokens — measured from the Vişneli composite's baked pagination (bars ~37×5px, ~11px gap) so both slides read identically. */ --hero-pagination-item-width: 37px; --hero-pagination-item-height: 5px; --hero-pagination-gap: 11px; --hero-pagination-radius: 999px; --hero-pagination-active: #9e262d; --hero-pagination-inactive: #e3cacc; position: relative; width: min(calc(100% - 60px), 1860px); margin: var(--hero-top-offset) auto 0; height: calc(100svh - var(--hero-top-offset)); max-height: calc(100svh - var(--hero-top-offset)); overflow: hidden; isolation: isolate; background: #eaeaea; border-radius: 50px; display: grid; place-items: center; } @supports (height: 100dvh) { .tada-hero-v2 { height: calc(100dvh - var(--hero-top-offset)); max-height: calc(100dvh - var(--hero-top-offset)); } } /* Stage spans the FULL host width (never height-letterboxed horizontally) so the left copy — positioned inside the stage — stays on the same grid as the header search icon at every viewport height. When the viewport is shorter than the stage's aspect height the stage overflows vertically and is clipped by the host's overflow:hidden (decorative art only); when taller it centres with equal top/bottom bands. This is what keeps copyRect.left === searchRect.left. */ .tada-hero-v2__stage { position: relative; aspect-ratio: 2048 / 1123; width: 100%; } .tada-hero-v2__stage img { -webkit-user-drag: none; user-select: none; } /* Mobile artwork-overlay image (320–699px band only — see the `.tada-hero-v2--has-mobile-artwork` block at the bottom of this file). display:none at every other breakpoint/state so a slide with the field empty never reserves space for it, and slides WITH artwork stay hidden on tablet/desktop where the live-layered composition still renders. */ .tada-hero-v2__mobile-artwork { display: none; } /* ---- Left copy: real HTML, left edge grid-aligned to the header search icon, vertical position + type scale measured off the golden composite. ---- */ .tada-hero-v2__copy { position: absolute; left: var(--copy-left); top: 38.9%; width: 30%; z-index: 20; transform: translateY(var(--copy-shift-y, 0px)); } .tada-hero-v2__eyebrow { margin: 0 0 1.2%; color: #9e262d; font-size: clamp(14px, 1.55cqw, 28px); font-weight: 800; letter-spacing: .01em; } .tada-hero-v2__title { margin: 0 0 1.6%; font-family: var(--tada-font-display, "Baloo 2", Arial, sans-serif); font-weight: 800; font-size: clamp(30px, 3.35cqw, 62px); line-height: .96; letter-spacing: -.01em; color: var(--tada-black); } .tada-hero-v2__title span { display: block; } .tada-hero-v2__features { margin: 0 0 2.6%; padding: 0; list-style: none; display: grid; gap: 4%; font-size: clamp(13px, 1.35cqw, 22px); font-weight: 700; color: var(--tada-black); } .tada-hero-v2__features li { display: flex; align-items: center; gap: 10px; } .tada-hero-v2__features li::before { content: ""; width: 1.1em; height: 1.1em; flex: 0 0 auto; background: url("../images/home/feature-check.svg") no-repeat center / contain; } .tada-hero-v2__cta { display: inline-flex; align-items: center; justify-content: center; min-width: 34%; padding: .62em 1.6em; font-size: clamp(13px, 1.15cqw, 18px); font-weight: 700; color: var(--tada-white); background: #9e262d; border-radius: 999px; text-decoration: none; /* Hover/focus = colour ONLY. No transform, no transition, no geometry change. */ transform: none; transition: none; } .tada-hero-v2__cta:hover, .tada-hero-v2__cta:focus-visible { background: #000; color: #fff; transform: none; } /* ---- Dish + cloth: independent right-anchored layers, flush to hero right. ---- Asset alpha-bboxes (transparent padding baked into each PNG) are compensated so the VISIBLE content lands on the golden bbox: - cloth-checkered.png 740×1620, content L1.9 T1.6 W98.1 H98.4 → golden cloth top 17.81%, right flush, visible ~20% wide. - bean-stew-bowl-round.png 1024×1024 FULL round bowl (content 906×888, aspect 1.02) — matches the golden dish exactly: the golden simply places this round bowl cut at the hero right edge (visible left 72% → the round bowl's left ~60%). Sized to golden bowl height (visible top 9.97%, height ~85%); the wrapper overflows past 100% and is clipped by the host's overflow:hidden. */ .tada-hero-v2__cloth { position: absolute; top: 16.5%; right: 0; width: 20.4%; z-index: 1; transform: translateY(var(--side-shift-y, 0px)); } .tada-hero-v2__bowl { position: absolute; top: 22.24%; left: 81.36%; width: 36.59%; z-index: 2; transform: translateY(var(--side-shift-y, 0px)); } /* ---- Product group: 3 separate packages. The FRONT bag is placed from a template-match of the front asset against the golden (visible L41% R59% T35.1% B83.8%); the two back bags flank it symmetrically (±9.5% offset, slightly higher & smaller), reproducing the golden fan L31.5%→R68.5%. Each asset's baked padding (visible = 55.5%W / 82%H, offset L22.2%/T9.8% of the square canvas) is compensated so the visible bags land on the golden. Three nested layers, same split as the materials below: POSITION (this rule — the approved fan geometry + group shift, never animated) → IDLE (continuous CSS drift, the whole fan moves as one heavy body) → MOTION (mouse-parallax, JS-driven). ---- */ .tada-hero-v2__product { position: absolute; inset: 0; z-index: 3; transform: translateY(var(--product-shift-y, 0px)); pointer-events: none; } .tada-hero-v2__product-idle { position: absolute; inset: 0; animation: tada-hero-idle-float var(--idle-dur, 8s) ease-in-out var(--idle-delay, 0s) infinite; /* No explicit will-change here (unlike -motion below): a running CSS keyframe animation on `transform` already gets layer-promoted by the browser on its own. An unconditional will-change would instead reserve a compositor layer for this wrapper on EVERY slide all the time — the two inactive slides included, since animation-play-state:paused (further down this file) stops the animation but doesn't undo a static will-change declaration. */ } .tada-hero-v2__product-motion { position: absolute; inset: 0; transform: translate3d(var(--px, 0px), var(--py, 0px), 0); will-change: transform; } .tada-hero-v2__pack { position: absolute; height: auto; } .tada-hero-v2__pack--back-left { left: 24.84%; top: 28.14%; width: 30%; z-index: 1; } .tada-hero-v2__pack--back-right { left: 45.19%; top: 28.14%; width: 30%; z-index: 1; } .tada-hero-v2__pack--front { left: 33.77%; top: 29.28%; width: 32.55%; z-index: 2; } /* ---- Small materials: position wrapper (layout) + idle wrapper (continuous drift) + motion wrapper (mouse parallax). ---- */ .tada-hero-v2__material { position: absolute; left: var(--x); top: var(--y); width: var(--w); z-index: var(--z, 4); pointer-events: none; /* decorative — never blocks the video/CTA/social hovers */ /* Static: shared group shift + this piece's own extra shift. Never animated. */ transform: translateY(calc(var(--material-shift-y, 0px) + var(--extra-shift-y, 0px))); } /* Idle wrapper: continuous CSS drift (see tada-hero-idle-float below). Amplitude/ rotation scale off this piece's own --depth-x/--depth-y (the same numbers that drive its mouse-parallax reactivity a layer further in), so a piece that reacts more to the cursor also floats more on its own — one depth story for both idle and pointer motion. Duration/delay/direction come from the per-material `--idle-*` presets set by class name further down this file. */ .tada-hero-v2__material-idle { animation: tada-hero-idle-float var(--idle-dur, 6s) ease-in-out var(--idle-delay, 0s) infinite; /* No explicit will-change — see the matching note on .tada-hero-v2__product-idle. */ } /* Motion wrapper: mouse-parallax (--px/--py set by JS) + this piece's static rotation. */ .tada-hero-v2__material-motion { transform: translate3d(var(--px, 0px), var(--py, 0px), 0) rotate(var(--rot, 0deg)); will-change: transform; } .tada-hero-v2__material img { display: block; width: 100%; height: auto; } /* ---- Shared idle-drift keyframe (product + material idle wrappers). Reads --depth-x/--depth-y (px multiplier "how far this layer travels") and --idle-dir-x/-y/-r (+1/-1, "which way") off the animated element itself, so one keyframe serves every layer at every depth/direction/timing. Uneven keyframe stops (30/55/80, not a mirrored 0/50/100) trace a small organic loop rather than a mechanical back-and-forth; ease-in-out on the animation keeps every stop-to-stop transition smooth with no dead pause at the ends. */ @keyframes tada-hero-idle-float { 0% { transform: translate3d(0, 0, 0) rotate(0deg); } 30% { transform: translate3d(calc(var(--depth-x, 6) * 0.5px * var(--idle-dir-x, 1)), calc(var(--depth-y, 6) * -0.7px * var(--idle-dir-y, 1)), 0) rotate(calc(var(--depth-x, 6) * 0.08deg * var(--idle-dir-r, 1))); } 55% { transform: translate3d(calc(var(--depth-x, 6) * 1.3px * var(--idle-dir-x, 1)), calc(var(--depth-y, 6) * 0.3px * var(--idle-dir-y, 1)), 0) rotate(calc(var(--depth-x, 6) * 0.15deg * var(--idle-dir-r, 1))); } 80% { transform: translate3d(calc(var(--depth-x, 6) * 0.2px * var(--idle-dir-x, 1)), calc(var(--depth-y, 6) * 1px * var(--idle-dir-y, 1)), 0) rotate(calc(var(--depth-x, 6) * -0.05deg * var(--idle-dir-r, 1))); } 100% { transform: translate3d(0, 0, 0) rotate(0deg); } } /* ---- Per-material idle phase presets: 10 distinct (duration, delay, direction) combinations, assigned so that within any ONE slide every material gets its own preset — no two pieces in the same slide ever drift in sync. Amplitude itself is NOT set here — it comes from each piece's own --depth-x/--depth-y (set inline by the template, the same value already used for mouse-parallax). ---- */ /* Etli (10 materials — all 10 presets used once each). */ .tada-hero-v2__material--meat-top { --idle-dur: 5.2s; --idle-delay: 0.0s; --idle-dir-x: 1; --idle-dir-y: -1; --idle-dir-r: 1; } .tada-hero-v2__material--meat-bottom { --idle-dur: 6.6s; --idle-delay: 1.3s; --idle-dir-x: -1; --idle-dir-y: 1; --idle-dir-r: -1; } .tada-hero-v2__material--meat-right { --idle-dur: 4.6s; --idle-delay: 2.4s; --idle-dir-x: 1; --idle-dir-y: 1; --idle-dir-r: -1; } .tada-hero-v2__material--beans-top { --idle-dur: 7.1s; --idle-delay: 0.7s; --idle-dir-x: -1; --idle-dir-y: -1; --idle-dir-r: 1; } .tada-hero-v2__material--beans-top-2 { --idle-dur: 5.8s; --idle-delay: 1.9s; --idle-dir-x: 1; --idle-dir-y: -1; --idle-dir-r: -1; } .tada-hero-v2__material--beans-front { --idle-dur: 6.3s; --idle-delay: 0.3s; --idle-dir-x: -1; --idle-dir-y: 1; --idle-dir-r: 1; } .tada-hero-v2__material--onion-ring { --idle-dur: 4.9s; --idle-delay: 2.8s; --idle-dir-x: 1; --idle-dir-y: 1; --idle-dir-r: 1; } .tada-hero-v2__material--onion-side { --idle-dur: 7.4s; --idle-delay: 1.1s; --idle-dir-x: -1; --idle-dir-y: -1; --idle-dir-r: -1; } .tada-hero-v2__material--tomato-mid { --idle-dur: 5.5s; --idle-delay: 3.1s; --idle-dir-x: 1; --idle-dir-y: -1; --idle-dir-r: 1; } .tada-hero-v2__material--tomato-side { --idle-dur: 6.1s; --idle-delay: 2.6s; --idle-dir-x: -1; --idle-dir-y: 1; --idle-dir-r: -1; } /* Vişneli (9 materials — 9 of the 10 presets, none repeated within this slide). */ .tada-hero-v2__material--sarma-02-tl { --idle-dur: 4.6s; --idle-delay: 2.4s; --idle-dir-x: 1; --idle-dir-y: 1; --idle-dir-r: -1; } .tada-hero-v2__material--sarma-06 { --idle-dur: 7.1s; --idle-delay: 0.7s; --idle-dir-x: -1; --idle-dir-y: -1; --idle-dir-r: 1; } .tada-hero-v2__material--rice-b { --idle-dur: 5.8s; --idle-delay: 1.9s; --idle-dir-x: 1; --idle-dir-y: -1; --idle-dir-r: -1; } .tada-hero-v2__material--visne-02 { --idle-dur: 6.3s; --idle-delay: 0.3s; --idle-dir-x: -1; --idle-dir-y: 1; --idle-dir-r: 1; } .tada-hero-v2__material--sarma-07 { --idle-dur: 4.9s; --idle-delay: 2.8s; --idle-dir-x: 1; --idle-dir-y: 1; --idle-dir-r: 1; } .tada-hero-v2__material--rice-a { --idle-dur: 7.4s; --idle-delay: 1.1s; --idle-dir-x: -1; --idle-dir-y: -1; --idle-dir-r: -1; } .tada-hero-v2__material--sarma-02-br { --idle-dur: 5.2s; --idle-delay: 0.0s; --idle-dir-x: 1; --idle-dir-y: -1; --idle-dir-r: 1; } .tada-hero-v2__material--sarma-08 { --idle-dur: 6.6s; --idle-delay: 1.3s; --idle-dir-x: -1; --idle-dir-y: 1; --idle-dir-r: -1; } .tada-hero-v2__material--visne-01 { --idle-dur: 5.5s; --idle-delay: 3.1s; --idle-dir-x: 1; --idle-dir-y: -1; --idle-dir-r: 1; } /* Biscotti (6 materials — 6 of the 10 presets, none repeated within this slide). */ .tada-hero-v2__material--findik-02 { --idle-dur: 7.1s; --idle-delay: 0.7s; --idle-dir-x: -1; --idle-dir-y: -1; --idle-dir-r: 1; } .tada-hero-v2__material--uzum-02 { --idle-dur: 5.8s; --idle-delay: 1.9s; --idle-dir-x: 1; --idle-dir-y: -1; --idle-dir-r: -1; } .tada-hero-v2__material--biscotti-03 { --idle-dur: 6.3s; --idle-delay: 0.3s; --idle-dir-x: -1; --idle-dir-y: 1; --idle-dir-r: 1; } .tada-hero-v2__material--uzum-01 { --idle-dur: 4.9s; --idle-delay: 2.8s; --idle-dir-x: 1; --idle-dir-y: 1; --idle-dir-r: 1; } .tada-hero-v2__material--biscotti-01 { --idle-dur: 7.4s; --idle-delay: 1.1s; --idle-dir-x: -1; --idle-dir-y: -1; --idle-dir-r: -1; } .tada-hero-v2__material--findik-01 { --idle-dur: 5.2s; --idle-delay: 0.0s; --idle-dir-x: 1; --idle-dir-y: -1; --idle-dir-r: 1; } /* ---- Video badge: static position wrapper (button) + inner motion wrapper. ---- */ .tada-hero-v2__video { position: absolute; left: var(--copy-left, 75px); /* left-aligned to the copy/CTA reference line */ bottom: 8.333333%; width: 7.284844%; aspect-ratio: 1 / 1; z-index: 12; /* Static placement only — the hover scale lives on the inner motion wrapper. */ transform: translateY(var(--video-shift-y, 0px)); padding: 0; border: 0; background: none; cursor: pointer; } .tada-hero-v2__video-motion { position: relative; display: block; width: 100%; height: 100%; transform: scale(1); transition: transform 220ms ease; } .tada-hero-v2__video:hover .tada-hero-v2__video-motion, .tada-hero-v2__video:focus-visible .tada-hero-v2__video-motion { transform: scale(1.04); } .tada-hero-v2__video-ring { display: block; width: 100%; height: 100%; } .tada-hero-v2__video-play { position: absolute; left: 50%; top: 50%; width: 25.738%; height: 30.057%; transform: translate(-44%, -50%); } /* ---- Socials: group shift on the nav; per-icon owns its own hover. ---- */ .tada-hero-v2__socials { position: absolute; inset: 0; z-index: 13; transform: translateY(var(--social-shift-y, 0px)); pointer-events: none; } .tada-hero-v2__social { position: absolute; top: 89.62963%; height: 2.037037%; color: #000; pointer-events: auto; /* only the small icons are interactive, not the full-stage nav */ transform: translateY(0) scale(1); transition: transform 210ms ease, color 210ms ease; } .tada-hero-v2__social svg { display: block; width: 100%; height: 100%; fill: currentColor; } .tada-hero-v2__social:hover, .tada-hero-v2__social:focus-visible { color: #9e262d; transform: translateY(-2px) scale(1.05); } .tada-hero-v2__social--facebook { left: 83.854167%; width: 0.644531%; } .tada-hero-v2__social--instagram { left: 85.844271%; width: 1.145833%; } .tada-hero-v2__social--youtube { left: 88.292135%; width: 1.628177%; } .tada-hero-v2__social--x { left: 91.222396%; width: 1.121198%; } /* ---- SHARED visible pagination component (both slides use this exact markup + CSS). Centred on the hero and sat on the SAME baseline as the video badge and social icons (item bottom ≈ 748 at 1440×900, == video/social bottom). Thin tokenised bars; only the active bar's colour differs. No hover geometry. ---- */ .tada-hero-v2__pagination { position: absolute; left: 50%; /* Locked to the SAME basis as the video badge (bottom 8.3333% + the fixed -32px shift) so pagination.bottom === video.bottom at EVERY viewport width, not just 1440 — a pure-% bottom drifted ~5–11px high at ≥1663px. */ bottom: 8.333333%; transform: translate(-50%, var(--video-shift-y, -32px)); display: flex; gap: var(--hero-pagination-gap, 11px); align-items: center; justify-content: center; z-index: 15; } .tada-hero-v2__pagination-item { display: block; width: var(--hero-pagination-item-width, 37px); height: var(--hero-pagination-item-height, 5px); padding: 0; margin: 0; border: 0; -webkit-appearance: none; appearance: none; border-radius: var(--hero-pagination-radius, 999px); background: var(--hero-pagination-inactive, #e3cacc); /* Colour is the only state; never scale/resize on hover. */ transform: none; transition: none; } .tada-hero-v2__pagination-item.is-active { background: var(--hero-pagination-active, #9e262d); } .tada-hero-v2__pagination-item:hover, .tada-hero-v2__pagination-item:focus-visible { transform: none; } /* Container-query context so copy type can scale off the stage width. */ .tada-hero-v2__stage { container-type: inline-size; } /* ============================================================================ * Vişneli + Biscotti LAYERED slides: separate-DOM-layer * build of the same approved Vişneli assets. Reuses every shared .tada-hero-v2__* * layer rule (product/pack/bowl/cloth/material + copy/CTA/video/socials/ * pagination); the ONLY layered-specific behaviour is a shared -20px art shift * added to the art POSITION wrappers (never the copy/CTA/UI, never the parallax * motion wrapper). Parallax + hovers are inherited unchanged from Etli. * ==========================================================================*/ /* Products stay raised to the Etli product level (--visneli-art-shift-y). */ .tada-hero-v2--visneli-layered .tada-hero-v2__product, .tada-hero-v2--biscotti-layered .tada-hero-v2__product { transform: translateY(calc(var(--product-shift-y, 0px) + var(--visneli-art-shift-y, 0px))); } /* Biscotti only: the 3-pack group (position layer) scaled up ~1.08x for more visual weight, matching the XD reference more closely. transform-origin is the group's own optical centre — NOT the default 50%/50%, which here would be the full stage's centre since this element is inset:0 — so scaling can't drift the group sideways. Centre X (54%) is straightforward (left/ width % all resolve against stage WIDTH already). Centre Y (48.53%) is NOT `top% + (width% * imageAspect)/2` — that mixes a width-relative figure into a top/height percentage, which resolves against stage HEIGHT; converting requires the stage's own width:height ratio (1860:1019.9 at 1920 wide, i.e. 2048:1123). Y derived from the front pack's actual pixel box (which alone spans the group's full vertical range — see the XD derivation in hero-v2-biscotti-layered.php): top 34.91% + half its true pixel height expressed as %-of-stage-height ≈ 48.53%. Verified empirically (measured getBoundingClientRect before/after) to keep the group's centre within ~0.2px of its pre-scale position. Same specificity as the shared rule above, later in source order, so it wins for Biscotti only; Vişneli is untouched. Idle/motion wrappers are children of this element and are not modified themselves — they simply inherit the already-scaled space, so the group still moves/drifts as one composition. */ .tada-hero-v2--biscotti-layered .tada-hero-v2__product { transform: translateY(calc(var(--product-shift-y, 0px) + var(--visneli-art-shift-y, 0px))) scale(1.08); transform-origin: 54% 48.53%; } /* ---- Vişneli / Biscotti pack geometry ---- These six declarations were `style=""` attributes on the tags in hero-v2-visneli-layered.php / -biscotti-layered.php. They are reproduced here VERBATIM — same values, same order — purely so the cascade can reach them: an inline style beats every stylesheet rule except `!important`, so while they lived in the markup the tablet block at the bottom of this file could not restyle these two slides at all, which is why both rendered their desktop fan inside the tablet's right column. Unscoped (no media query), so desktop and mobile resolve exactly as before; two-class specificity, so the three-class tablet rules can override them cleanly without `!important`. */ /* Same lift-out for each slide's own dish + cloth: these four were `style=""` too, reproduced verbatim so desktop is untouched, moved here so the tablet block can place them. Note each slide really does ship a DIFFERENT dish file (bean-stew-bowl-round / dish-visneli-yaprak-sarma / dish-glutensiz-biscotti); only the checked cloth is genuinely shared. */ .tada-hero-v2--visneli-layered .tada-hero-v2__cloth, .tada-hero-v2--biscotti-layered .tada-hero-v2__cloth { top: 16.5%; width: 20.4%; } .tada-hero-v2--visneli-layered .tada-hero-v2__bowl, .tada-hero-v2--biscotti-layered .tada-hero-v2__bowl { left: 83%; right: auto; top: 27%; width: 31.5%; } .tada-hero-v2--visneli-layered .tada-hero-v2__pack--back-left { left: 33.22%; top: 33%; width: 14.96%; transform: rotate(-2deg); } .tada-hero-v2--visneli-layered .tada-hero-v2__pack--back-right { left: 50.82%; top: 33%; width: 14.96%; transform: rotate(2deg); } .tada-hero-v2--visneli-layered .tada-hero-v2__pack--front { left: 42.25%; top: 34.91%; width: 15.86%; } .tada-hero-v2--biscotti-layered .tada-hero-v2__pack--back-left { left: 31.77%; top: 36.36%; width: 24.35%; } .tada-hero-v2--biscotti-layered .tada-hero-v2__pack--back-right { left: 51.87%; top: 36.36%; width: 24.35%; } .tada-hero-v2--biscotti-layered .tada-hero-v2__pack--front { left: 38.5%; top: 34.91%; width: 31%; } /* Materials get their OWN (smaller) shift so they sit lower than the products. */ .tada-hero-v2--visneli-layered .tada-hero-v2__material, .tada-hero-v2--biscotti-layered .tada-hero-v2__material { transform: translateY(calc(var(--material-shift-y, 0px) + var(--extra-shift-y, 0px) + var(--visneli-mat-shift-y, 0px))); /* XD visualBounds include a drop-shadow + rotation AABB; scale to the true object size. */ width: calc(var(--w) * var(--visneli-mat-scale, 1)); } /* Dish + cloth are NOT art-shifted here — they inherit the shared .tada-hero-v2__bowl / .tada-hero-v2__cloth base coords + --side-shift-y, i.e. the exact Etli position. */ /* ============================================================================ * LIVE homepage slider — stacks the 3 layered slides into one crossfade * carousel (desktop) and swaps to a composite mobile hero (<= 1100px). * The wrapper owns the host sizing; each --slide fills it absolutely and * crossfades via .is-active. Base .tada-hero-v2 still supplies the rounded * gray card (border-radius/overflow/background) per slide. * ==========================================================================*/ .tada-hero-live { /* Was `aspect-ratio: 2048/1123` (content-driven height): at 1440×900 that resolves to 756.7px, well short of the 870px first viewport actually has below the 30px top offset — leaving the next section's top ~113px visible on load. Switched to the SAME viewport-fill formula the standalone `.tada-hero-v2` component already defines for itself (line ~36 above: `height: calc(100svh - var(--hero-top-offset))`), so the approved hero card now always reaches the fold, matching its own component's already-designed behaviour instead of only fitting content height. `--hero-offset` is subtracted TWICE (top margin + an equal bottom gap) so the card reads as a card floating inside the viewport on all four sides, not flush to the bottom — the reference design shows an equal white band above and below the rounded card. Nothing inside a slide changes: `.tada-hero-v2__stage` keeps its own `aspect-ratio: 2048/1123; width: 100%`, sized independently of this wrapper's height, and each slide's `display: grid; place-items: center` (base `.tada-hero-v2` rule, unaffected) centres that unscaled stage in the taller card — on short viewports this opens equal gray top/bottom bands inside the existing rounded card rather than cropping or scaling any layer. */ --hero-offset: 30px; position: relative; width: min(calc(100% - 60px), 1860px); margin: var(--hero-offset) auto 0; height: calc(100svh - var(--hero-offset) - var(--hero-offset)); max-height: calc(100svh - var(--hero-offset) - var(--hero-offset)); } @supports (height: 100dvh) { .tada-hero-live { height: calc(100dvh - var(--hero-offset) - var(--hero-offset)); max-height: calc(100dvh - var(--hero-offset) - var(--hero-offset)); } } /* A slide inside the live slider fills the wrapper and crossfades. */ .tada-hero-live .tada-hero-v2--slide { position: absolute; inset: 0; width: 100%; height: 100%; max-height: none; margin: 0; opacity: 0; visibility: hidden; transition: opacity 0.6s ease, visibility 0.6s ease; } /* First slide visible before JS boots (no blank flash / no CLS). */ .tada-hero-live .tada-hero-v2--slide:first-child { opacity: 1; visibility: visible; } .tada-hero-live .tada-hero-v2--slide.is-active { opacity: 1; visibility: visible; z-index: 2; } /* Idle drift only runs on the slide actually on screen. The other two slides stay in the DOM (opacity:0/visibility:hidden, not display:none) so their crossfade can start instantly, but with no gate here their ~15–20 idle animations each would keep ticking in the background for the whole time they're hidden — three slides' worth of continuous compositor work at once instead of one. `animation-play-state` needs no JS: default is `running` (untouched outside the live slider, e.g. a standalone/preview render of one slide template), and this rule pauses it the moment a slide inside the live slider isn't `.is-active`. */ .tada-hero-live .tada-hero-v2--slide:not(.is-active) .tada-hero-v2__material-idle, .tada-hero-live .tada-hero-v2--slide:not(.is-active) .tada-hero-v2__product-idle { animation-play-state: paused; } @media (prefers-reduced-motion: reduce) { .tada-hero-live .tada-hero-v2--slide { transition: none; } /* Idle drift fully off; mouse-parallax is already skipped at the JS level (initParallax bails out early when this media query matches), so with --px/--py never set the -motion wrappers' translate3d(var(--px,0px), ...) simply resolves to its 0px fallback. */ .tada-hero-v2__material-idle, .tada-hero-v2__product-idle { animation: none; } } /* The per-slide pagination dots become the shared slider control. */ .tada-hero-live .tada-hero-v2__pagination-item { cursor: pointer; } /* ---- Mobile composite hero (<= 1100px) ---- */ .tada-hero-mobile { display: none; } .tada-hero-mobile__viewport { position: relative; overflow: hidden; border-radius: 30px; } .tada-hero-mobile__slide { position: absolute; inset: 0; opacity: 0; visibility: hidden; pointer-events: none; transition: opacity 0.5s ease, visibility 0.5s ease; } /* Pre-init (no-JS) fallback: the first slide is the visible, in-flow one so the hero has height before the slider boots. Dropped once JS adds .is-ready. */ .tada-hero-mobile:not(.is-ready) .tada-hero-mobile__slide:first-child { position: relative; opacity: 1; visibility: visible; pointer-events: auto; } /* After init: ONLY the active slide is in-flow + visible; every other slide stays absolute/hidden so nothing stacks and the hero height never changes. (visibility:hidden also keeps inactive slides' CTA out of the tab order.) */ .tada-hero-mobile.is-ready .tada-hero-mobile__slide.is-active { position: relative; opacity: 1; visibility: visible; pointer-events: auto; z-index: 2; } .tada-hero-mobile__img { display: block; width: 100%; height: auto; } .tada-hero-mobile__copy { padding: 20px 24px 8px; text-align: center; } .tada-hero-mobile__eyebrow { margin: 0 0 6px; font-family: 'Montserrat', Arial, sans-serif; font-size: 12px; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; color: #9e262d; } .tada-hero-mobile__title { margin: 0 0 14px; font-family: 'Baloo 2', Arial, sans-serif; font-size: clamp(26px, 8vw, 40px); line-height: 1.05; color: var(--tada-black, #111); } .tada-hero-mobile__cta { display: inline-block; } /* The one real pagination is overlaid on the composite's own baked dots (~93.5% down the image, centred) instead of sitting as a second row below the card, so only a single, clickable, slider-synced pagination is visible. */ /* The real HTML pagination is sized/placed to sit directly on top of the composite's baked bars (measured at ~50% x, ~93.7% y, ~9.6% of the image width) so it covers them with no mask/patch behind it — the composite's own background stays uninterrupted. Everything is %-based so it tracks the baked bars at every mobile width. */ /* Vertically centred on the baked bars (measured centre ~93.7% of the image), a touch wider than the baked group (~9.6%) and thick enough to fully cover them, so there's no mask AND no doubled/offset pagination — just the single real HTML pagination sitting exactly over the baked one. %-based so it tracks every mobile width. */ .tada-hero-mobile__dots { position: absolute; left: 50%; top: 93.7%; transform: translate(-50%, -50%); z-index: 3; display: flex; justify-content: center; gap: 1.2%; width: 11%; margin: 0; } .tada-hero-mobile__dots button { flex: 1 1 auto; width: auto; height: 6px; padding: 0; border: 0; border-radius: 999px; background: var(--hero-pagination-inactive, #e3cacc); cursor: pointer; } .tada-hero-mobile__dots button.is-active { background: var(--hero-pagination-active, #9e262d); } /* ============================================================================ * Mobile/tablet (<= 1100px): the composite-image `.tada-hero-mobile` hero is * retired (kept in the DOM/JS for now but permanently hidden — see below) in * favour of showing the SAME live layered `.tada-hero-live` DOM used on * desktop, restyled into a vertically-stacked mobile composition instead of * the desktop's side-by-side one. No new elements, no duplicated copy/data — * only CSS position/display changes on the existing `.tada-hero-v2__*` nodes. * * Technique: `.tada-hero-v2__product`'s children (the 3 pack images) are * positioned as %s of `.tada-hero-v2__product` itself (its idle/motion * wrapper children are `inset: 0`, i.e. exactly its box). On desktop that box * IS the full 2048×1123 stage. Here `.tada-hero-v2__product` instead becomes * its own `position: relative` box, MUCH narrower, but given the identical * 2048/1123 aspect-ratio — so every pack's %-based left/top/width (whether * set via CSS custom property on Etli, or hardcoded inline `style=""` on the * Vişneli/Biscotti layered templates — both resolve the same way here) * renders at an IDENTICAL, undistorted relative position/size, just scaled * down as one rigid unit (the same "transform: scale() on the whole layer" * principle, applied via a proportional box resize instead of a transform). * The pack cluster only occupies the middle ~50% of that reference frame * horizontally, so the frame is intentionally wider than the visible cluster * and centred — the transparent excess overflows harmlessly and is clipped * by the card's own `overflow: hidden`. * * `.tada-hero-v2__copy` and `.tada-hero-v2__pagination` switch from * `position: absolute` (desktop: pinned inside the 2048×1123 stage) to * `position: relative` grid items, so they stack in normal flow BELOW the * product frame instead of overlapping it. Everything not in the reference * mobile composition (cloth, bowl, video badge, socials, and all but a * couple of the small decorative "materials" per slide) is hidden — see * Section 11 of CLAUDE.md: mobile may simplify decorative density only when * the reference itself shows a simplified mobile composition, which this * user-supplied mobile mockup does. * * Values below are measured off the user-supplied mobile reference mockup * (no XD mobile artboard exists for this composition yet) — closest-known, * flagged for visual QA confirmation per CLAUDE.md Section 2's fallback rule. * ============================================================================*/ @media (max-width: 699px) { .tada-hero-mobile { display: none !important; } .tada-hero-live { height: auto; max-height: none; margin-top: 12px; width: calc(100% - 24px); } /* display (not opacity/visibility) toggling: on mobile these slides are normal-flow (position: relative, stacked vertically composition), not absolutely stacked on top of each other like desktop — so exactly one must be display:none at a time or they'd all take up real page height at once. JS sets .is-active on slide 0 synchronously on script load (bindLive()'s initial render()), before first paint in practice; the true no-JS case is covered separately by hero-live.php's own