/* ============================================================ GlamX (Pink) — the theme is styled with Tailwind utility classes ONLY (see ui.ts + the components). This file is the small, ABSOLUTELY-UNAVOIDABLE residue that cannot be expressed as utilities: 1. the entrance/scroll reveal primitives (keyframes + scroll timeline + data-d stagger), 2. the hero 5-slide cross-fade slideshow + Ken-Burns + scroll parallax (keyframes + per-slide bg), 3. the mask-tinted press logos (one token recolours every wordmark via CSS mask), 4. the before/after slider (clip-path driven by the --pos CSS variable), 5. two data-URI texture helpers (film grain + the coverage location pin). Everything is scoped under `.glamx-pink` so it can never leak into the admin/chrome or another theme. ============================================================ */ /* ---------- 0. Per-site brand tokens (R3) ---------------------------------------------------------- The theme CONSUMES the render-tier's per-site colours as var(--brand)/var(--accent). These scope-root values are only a PREVIEW fallback (the GlamX signature rose): on a real site the render tier injects --brand/--accent inline on , which always wins. */ .glamx-pink { --brand: #ea7ea3; /* accent rose — CTA / fills (white text sits on it) */ --accent: #d15a84; /* deep rose — CTA gradient end / hover */ /* Section surfaces — LIGHT tints of the per-site brand, so the page/band backgrounds recolour per site yet stay soft. The low mix ratios keep them near-white (dark body text stays legible for any brand, dark or light). Primary → page cream · Secondary → the alt band. */ --surface: #fff; /* page background — plain content sections are WHITE (was cream #fdf0f5) */ --surface-alt: color-mix(in srgb, var(--accent) 16%, #fff); /* accent feature band — Secondary-light pink; the ONLY tinted surface now (stats / Why Book / press / hero panel) (was ivory #fadce9) */ scroll-behavior: smooth; /* native in-page anchor easing — replaces the removed Lenis client JS */ } @media (prefers-reduced-motion: reduce) { .glamx-pink { scroll-behavior: auto; } } /* ---------- 0b. Menu open → lock the page behind the sheet ----------------------------------------- The mobile menu (Header.tsx) is a full-viewport fixed panel, but `position: fixed` does NOT stop the DOCUMENT scrolling underneath it — a flick anywhere on the sheet leaves the visitor somewhere else entirely the moment they close it. It only became reachable now the panel actually fills the screen (it used to be clipped to the header bar — see the note in Header.tsx). Keyed off the menu's own checkbox, so it costs nothing while the menu is shut, and stays zero-JS. `html:has()`, not `.glamx-pink`: the scroll port is the document element, which no theme class can sit on — the `:has()` is what keeps a root-level property scoped to pages that render this theme. Bounded to the breakpoint that HAS a menu (from 981px the inline nav shows and the panel never opens), so a desktop window can't be locked by a checkbox nobody can see. */ @media (max-width: 980px) { html:has(.glamx-pink #g2-nav:checked) { overflow: hidden; } } /* ---------- 1. Motion primitives (replace framer-motion / IntersectionObserver, no client JS) ----- */ /* Above-the-fold entrance — transform + blur only (never opacity) so the LCP paints at frame 0. */ .glamx-pink .g2-reveal { animation: g2revealUp 0.9s cubic-bezier(0.22, 1, 0.36, 1) both; } @keyframes g2revealUp { from { transform: translateY(24px); filter: blur(4px); } to { transform: translateY(0); filter: blur(0); } } .glamx-pink .g2-reveal[data-d="1"] { animation-delay: 0.12s; } .glamx-pink .g2-reveal[data-d="2"] { animation-delay: 0.24s; } .glamx-pink .g2-reveal[data-d="3"] { animation-delay: 0.36s; } .glamx-pink .g2-reveal[data-d="4"] { animation-delay: 0.48s; } .glamx-pink .g2-reveal[data-d="5"] { animation-delay: 0.60s; } /* Below-the-fold — autoplay fallback, upgraded to a scroll-driven timeline where supported. */ .glamx-pink .g2-inview { animation: g2reveal 1s cubic-bezier(0.22, 1, 0.36, 1) both; } @supports (animation-timeline: view()) { .glamx-pink .g2-inview { animation-timeline: view(); animation-range: entry 0% entry 100%; } .glamx-pink .g2-inview[data-d="2"] { animation-range: entry 6% entry 100%; } .glamx-pink .g2-inview[data-d="3"] { animation-range: entry 12% entry 100%; } .glamx-pink .g2-inview[data-d="4"] { animation-range: entry 18% entry 100%; } } @keyframes g2reveal { from { opacity: 0; transform: translateY(28px); filter: blur(4px); } to { opacity: 1; transform: translateY(0); filter: blur(0); } } /* Opacity-only reveal for glassmorphism cards: a residual transform/filter on the element empties the backdrop and stops a child's backdrop-filter from blurring, so the occasion cards fade in with NO transform/filter (their photo-zoom + glass panel do the rest). */ .glamx-pink .g2-fade { animation: g2fade 1s ease both; } @supports (animation-timeline: view()) { .glamx-pink .g2-fade { animation-timeline: view(); animation-range: entry 0% entry 100%; } } @keyframes g2fade { from { opacity: 0; } to { opacity: 1; } } @media (prefers-reduced-motion: reduce) { .glamx-pink .g2-reveal, .glamx-pink .g2-inview, .glamx-pink .g2-fade { animation: none !important; opacity: 1 !important; transform: none !important; filter: none !important; } } /* ---------- 2. Hero cross-fade slideshow (5 slides / 30s) + Ken Burns + scroll parallax ---------- */ .glamx-pink .hero__slides { position: absolute; inset: 0; } .glamx-pink .hero__slide { position: absolute; inset: 0; background-size: cover; background-position: center; opacity: 0; transform: scale(1.05); backface-visibility: hidden; will-change: opacity, transform; animation: g2heroFade 30s cubic-bezier(0.45, 0, 0.55, 1) infinite; } .glamx-pink .hero__slide:nth-child(1) { background-image: url("/images/glamx-pink/hero-1.webp"); animation-delay: -1.5s; } .glamx-pink .hero__slide:nth-child(2) { background-image: url("/images/glamx-pink/hero-2.webp"); animation-delay: 4.5s; } .glamx-pink .hero__slide:nth-child(3) { background-image: url("/images/glamx-pink/hero-3.webp"); animation-delay: 10.5s; } .glamx-pink .hero__slide:nth-child(4) { background-image: url("/images/glamx-pink/hero-4.webp"); animation-delay: 16.5s; } .glamx-pink .hero__slide:nth-child(5) { background-image: url("/images/glamx-pink/hero-5.webp"); animation-delay: 22.5s; } @keyframes g2heroFade { 0% { opacity: 0; transform: scale(1.05); } 5% { opacity: 1; } 18% { opacity: 1; transform: scale(1.11); } 23% { opacity: 0; transform: scale(1.13); } 100% { opacity: 0; transform: scale(1.05); } } @supports (animation-timeline: scroll()) { @media (prefers-reduced-motion: no-preference) { .glamx-pink .hero__slides { inset: -9% 0; animation: g2heroParallax linear both; animation-timeline: scroll(root block); animation-range: 0 100svh; } } } @keyframes g2heroParallax { from { transform: translateY(-4.5%); } to { transform: translateY(4.5%); } } @media (prefers-reduced-motion: reduce) { .glamx-pink .hero__slide { animation: none; transform: none; } .glamx-pink .hero__slide:nth-child(1) { opacity: 1; } .glamx-pink .hero__slide:nth-child(n + 2) { opacity: 0; } } /* ---------- 3. Press logos — tinted via CSS mask so ONE token recolours every wordmark ---------- */ .glamx-pink .press__logo { --press-h: clamp(24px, 3.4vw, 34px); flex: 0 0 auto; display: block; height: var(--press-h); width: auto; /* width comes from the per-logo aspect-ratio set inline */ background-color: var(--brand); /* press wordmarks tinted with the per-site Primary colour */ -webkit-mask-image: var(--logo); mask-image: var(--logo); -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat; -webkit-mask-position: center; mask-position: center; -webkit-mask-size: contain; mask-size: contain; opacity: 0.9; transition: opacity 0.3s cubic-bezier(0.22, 1, 0.36, 1), transform 0.3s cubic-bezier(0.22, 1, 0.36, 1); } .glamx-pink .press__logo:hover { opacity: 1; transform: translateY(-2px); } /* ---------- 4. Before/After slider — pure-CSS drag-to-compare (NO client JS) ------------------------ The "after" panel (.ba__after) is a native `resize: horizontal` element: dragging its bottom-right grabber widens/narrows it, revealing the "before" photo beneath. `container-type: inline-size` on the frame lets the inner photo stay the FULL frame width (100cqw) while the panel clips it — so the reveal never squishes the image. The divider + knob are decorative and ride the panel's right edge. */ .glamx-pink .ba { container-type: inline-size; } .glamx-pink .ba__after { resize: horizontal; overflow: hidden; width: 55%; min-width: 3rem; max-width: 100%; height: 100%; } .glamx-pink .ba__after > img { width: 100cqw; max-width: none; } /* Hide the OS resizer triangle; our knob (bottom-right, where the drag actually works) stands in for it. */ .glamx-pink .ba__after::-webkit-resizer { background: transparent; } .glamx-pink .ba__after:hover .ba__knob, .glamx-pink .ba__after:focus-within .ba__knob { box-shadow: 0 0 0 4px color-mix(in srgb, var(--brand) 60%, transparent), 0 10px 26px -8px rgba(0, 0, 0, 0.55); } /* ---------- 5. Data-URI texture helpers (too binary to inline as Tailwind arbitrary values) ------- */ /* Film grain — tiled fractal-noise, blended over the Join mesh gradient for a tactile, premium light. */ .glamx-pink .g2-grain::before { content: ""; position: absolute; inset: 0; z-index: 1; pointer-events: none; opacity: 0.14; mix-blend-mode: overlay; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E"); background-size: 140px 140px; } /* Coverage "nation" pin — a location marker (recolours per-site via --accent, the light shortcode) before each nation label. `currentColor` in the mask lets the CSS `color` declaration drive it. */ .glamx-pink .g2-pin::before { content: ""; flex-shrink: 0; width: 15px; height: 15px; color: var(--accent); -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 2C8.1 2 5 5.1 5 9c0 5.2 7 13 7 13s7-7.8 7-13c0-3.9-3.1-7-7-7zm0 9.5A2.5 2.5 0 1 1 12 6.5a2.5 2.5 0 0 1 0 5z'/%3E%3C/svg%3E") center / contain no-repeat; mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 2C8.1 2 5 5.1 5 9c0 5.2 7 13 7 13s7-7.8 7-13c0-3.9-3.1-7-7-7zm0 9.5A2.5 2.5 0 1 1 12 6.5a2.5 2.5 0 0 1 0 5z'/%3E%3C/svg%3E") center / contain no-repeat; background-color: currentColor; }