/* * Summer theme — "Tropical Golden Hour" * ------------------------------------------------------------------ * An ambient, premium tropical-seaside treatment. Every rule is * namespaced under `.summer-fx`, the fixed overlay that SummerTheme.tsx * mounts ONLY on the landing page ("/"). This keeps the whole effect * scoped to the storefront home even though `data-theme="summer"` is * applied to site-wide. * * Design goals: subtle & premium. Mostly warm light + soft foliage, * a few slow "breeze" motes, and a gentle shimmering waterline. * No PNG assets — everything is inline SVG + CSS. */ .summer-fx { position: fixed; inset: 0; z-index: 1; pointer-events: none; overflow: hidden; /* Palette (harmonises with the brand green #05C067) */ --summer-green: #05c067; --summer-leaf: #0f9d63; --summer-teal: #12b5b0; --summer-lime: #7bd86b; --summer-gold: #ffc93c; --summer-coral: #ff7e5f; --summer-water: #34c7d4; } /* ── Warm golden-hour sun glow (top-right) ──────────────────────── */ .summer-sun { position: absolute; top: -150px; right: -130px; width: 500px; height: 500px; border-radius: 50%; background: radial-gradient( circle at center, rgba(255, 219, 140, 0.72) 0%, rgba(255, 184, 104, 0.4) 40%, rgba(255, 184, 104, 0) 72% ); filter: blur(6px); animation: summer-breathe 9s ease-in-out infinite; } /* Defined sun disc so it reads as an actual sun (not just a wash) */ .summer-sun-core { position: absolute; top: -74px; right: -46px; width: 168px; height: 168px; border-radius: 50%; background: radial-gradient( circle at 42% 42%, rgba(255, 244, 194, 0.98) 0%, rgba(255, 212, 120, 0.92) 52%, rgba(255, 193, 102, 0) 80% ); filter: blur(1px); animation: summer-breathe 9s ease-in-out infinite; } /* ── Corner foliage fronds ──────────────────────────────────────── */ .summer-frond { position: absolute; width: 200px; height: 200px; opacity: 0.88; } .summer-frond--tl { top: -46px; left: -54px; transform: rotate(8deg); } .summer-frond--br { bottom: -48px; right: -50px; transform: rotate(184deg); } /* Fit small screens: smaller and tucked further into the corners */ @media (max-width: 640px) { .summer-frond { width: 120px; height: 120px; opacity: 0.8; } .summer-frond--tl { top: -34px; left: -38px; } .summer-frond--br { bottom: -34px; right: -36px; } } /* Sway lives on an inner wrapper so it composes with the base rotation above */ .summer-frond__inner { width: 100%; height: 100%; transform-origin: 30% 70%; animation: summer-sway 7s ease-in-out infinite; } .summer-frond--br .summer-frond__inner { animation-duration: 8.5s; animation-delay: -2s; } /* ── Shimmering waterline (page bottom) ─────────────────────────── */ /* Anchored BELOW the viewport edge (negative bottom + extra height) so the gentle bob never lifts the fill off the bottom and leaves a floating gap. */ .summer-waterline { position: absolute; left: 0; bottom: -16px; width: 100%; height: 94px; opacity: 0.5; animation: summer-water-bob 6s ease-in-out infinite; } .summer-waterline svg { position: absolute; left: 0; bottom: 0; width: 200%; height: 100%; animation: summer-water-drift 14s linear infinite; } /* ── Drifting "breeze" motes ────────────────────────────────────── */ .summer-mote { position: absolute; top: var(--top, 30%); left: 0; width: var(--size, 16px); height: var(--size, 16px); opacity: 0; will-change: transform, opacity; animation: summer-drift var(--dur, 30s) linear infinite; animation-delay: var(--delay, 0s); } .summer-mote svg { width: 100%; height: 100%; display: block; } /* ── Keyframes ──────────────────────────────────────────────────── */ @keyframes summer-breathe { 0%, 100% { transform: scale(1); opacity: 0.45; } 50% { transform: scale(1.09); opacity: 0.62; } } @keyframes summer-sway { 0%, 100% { transform: rotate(-2.5deg); } 50% { transform: rotate(2.5deg); } } @keyframes summer-water-bob { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-6px); } } @keyframes summer-water-drift { 0% { transform: translateX(0); } 100% { transform: translateX(-50%); } } @keyframes summer-drift { 0% { transform: translate(-12vw, 0) rotate(0deg); opacity: 0; } 8% { opacity: var(--op, 0.5); } 50% { transform: translate(52vw, -22px) rotate(180deg); } 92% { opacity: var(--op, 0.5); } 100% { transform: translate(112vw, 10px) rotate(360deg); opacity: 0; } } /* ── Occasional seagull gliding across the sky ──────────────────── */ .summer-gull { position: absolute; top: var(--gtop, 16%); left: 0; width: var(--gsize, 44px); z-index: 3; opacity: 0; will-change: transform, opacity; animation: summer-gull-fly var(--gdur, 30s) linear infinite; animation-delay: var(--gdelay, 0s); } /* inner element flaps its wings while the outer element flies across */ .summer-gull__inner { display: block; width: 100%; transform-origin: center 40%; animation: summer-gull-flap 0.55s ease-in-out infinite; } .summer-gull svg { display: block; width: 100%; } @keyframes summer-gull-fly { 0% { transform: translate(-10vw, 0); opacity: 0; } 5% { opacity: 0.85; } 38% { transform: translate(45vw, -26px); } 68% { opacity: 0.85; } 74% { transform: translate(114vw, 6px); opacity: 0; } /* rest off-screen until the next cycle → "occasional" */ 100% { transform: translate(114vw, 6px); opacity: 0; } } @keyframes summer-gull-flap { 0%, 100% { transform: scaleY(1); } 50% { transform: scaleY(0.55); } } /* ── Page accents (rendered inline by pages, gated on theme==='summer') ── These sit INSIDE page content (hero cat, cards), not the .summer-fx overlay. */ /* Mirrored shades over the hero cat's eyes. Percentages map to the cat illustration box (578x549 viewBox → eyes ≈ 34% across, 47% down). */ .summer-cat-shades { position: absolute; left: 24%; top: 44%; width: 20%; z-index: 20; pointer-events: none; filter: drop-shadow(0 3px 4px rgba(0, 0, 0, 0.18)); animation: summer-shades-in 0.6s ease-out both; } @keyframes summer-shades-in { 0% { opacity: 0; transform: translateY(-8px) rotate(-4deg); } 100% { opacity: 1; transform: translateY(0) rotate(0deg); } } /* Palm sprig tucked onto a card's top-right corner */ .summer-card-leaf { position: absolute; top: -15px; right: -9px; width: 46px; height: 46px; z-index: 5; pointer-events: none; transform: rotate(6deg); transform-origin: bottom left; filter: drop-shadow(0 2px 3px rgba(0, 0, 0, 0.10)); animation: summer-sway 7s ease-in-out infinite; } @media (max-width: 640px) { .summer-card-leaf { width: 38px; height: 38px; top: -12px; right: -7px; } } /* Tropical cocktail on the ground next to the cat (lower-left, clear of the floating stat cards on the right) */ .summer-cat-cocktail { position: absolute; bottom: 11%; left: 11%; width: 12%; z-index: 13; pointer-events: none; filter: drop-shadow(0 3px 4px rgba(0, 0, 0, 0.14)); } /* Straw sun hat on the cat's head */ .summer-cat-hat { position: absolute; top: 23%; left: 17%; width: 34%; z-index: 21; pointer-events: none; transform: rotate(-6deg); filter: drop-shadow(0 3px 4px rgba(0, 0, 0, 0.16)); } /* ── Visitor toggle: turn the effects off (low-end machines) ─────── */ .summer-toggle { position: fixed; left: 14px; bottom: 14px; z-index: 60; display: inline-flex; align-items: center; gap: 6px; padding: 6px 12px 6px 10px; border-radius: 999px; background: rgba(255, 255, 255, 0.85); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); border: 1px solid rgba(0, 0, 0, 0.08); box-shadow: 0 2px 8px rgba(0, 0, 0, 0.10); font-family: inherit; font-size: 12px; font-weight: 600; color: #3f5560; cursor: pointer; opacity: 0.72; transition: opacity 0.2s ease, transform 0.2s ease; } .summer-toggle:hover { opacity: 1; transform: translateY(-1px); } .summer-toggle__icon { font-size: 14px; line-height: 1; } @media (max-width: 640px) { .summer-toggle { left: 10px; bottom: 10px; padding: 7px; } .summer-toggle__label { display: none; } } /* ── Respect reduced-motion: keep the look, drop the movement ───── */ @media (prefers-reduced-motion: reduce) { .summer-fx *, .summer-card-leaf, .summer-cat-shades { animation: none !important; } /* A couple of motes still visible, just static and faint */ .summer-mote { opacity: var(--op, 0.4); } }