/* ============================================================= Cielito Lindo v2 — envelope intro + long-scroll cinema. Screen 1: a sealed envelope on a watercolor sky, framed by a talavera arch, papel picado banner, florals and a sleeping baby on a cloud. Tap to open (~3s cinematic) → Screen 2, an 8-section storybook scroll with lush watercolor characters in every section. PALETTE: every color references a token. A boy↔girl swap is a single attribute flip on . Hardcoded colors live ONLY inside :root and body[data-palette="girl"]. ============================================================= */ /* ---------------- Palette tokens (single source of truth) ---- */ :root { /* Boy palette (default) — dusty sky blue + cream + marigold + sage */ --accent: #6FA8DC; --accent-soft: #BBDDF2; --accent-deep: #4A7FB0; --bg-sky: #E6F1FA; --bg-sky-deep: #C9DCEC; --bg-cream: #FBF6EC; --bg-cream-warm:#F4E6CF; --ink-deep: #2C4A6B; --ink-soft: #5A7A9B; --marigold: #E8A33D; --coral: #D26A4F; --sage: #7A9A6F; --wax: #4A7FB0; /* Neutral tones shared across palettes. */ --ink: var(--ink-deep); --cream: var(--bg-cream); /* Long ease curves for the cinematic feel. */ --ease-out: cubic-bezier(0.22, 1, 0.36, 1); --ease-soft: cubic-bezier(0.4, 0, 0.2, 1); --ease-lift: cubic-bezier(0.2, 0.8, 0.2, 1); --ease-slide:cubic-bezier(0.16, 1, 0.3, 1); /* Master open duration — 2000ms total for the 4-beat choreography. Beat 1 anticipation (0–250ms) + Beat 2 crack (200–700ms) + Beat 3 flap+card (500–1400ms) + Beat 4 settle+fade (1300–2000ms). JS reads this via openDurationMs() to know when to add .is-opened. */ --open-dur: 2000ms; --font-display: 'DM Serif Display', Georgia, 'Times New Roman', serif; --font-script: 'Caveat', 'Segoe Script', cursive; --font-sans: 'Inter', system-ui, -apple-system, 'Segoe UI', sans-serif; } body[data-palette="girl"] { --accent: #E8A3B8; --accent-soft: #F5D1DC; --accent-deep: #C77A92; --bg-sky: #FBEEF2; --bg-sky-deep: #F4D8E0; --bg-cream: #FBF6EC; --bg-cream-warm:#F8E4D8; --ink-deep: #6B2C44; --ink-soft: #9B5A70; --wax: #C77A92; } body[data-palette="meadow"] { --accent: #7a945a; --accent-soft: #b8cfaa; --accent-deep: #5a7040; --bg-sky: #dfe7d0; --bg-sky-deep: #ccd9ba; --bg-cream: #f5f7f0; --bg-cream-warm:#e8eddf; --ink-deep: #1f2a18; --ink-soft: #4a5e3a; --wax: #5a7040; } body[data-palette="sunset"] { --accent: #d97a4a; --accent-soft: #f0b99a; --accent-deep: #b85a2a; --bg-sky: #fde2c8; --bg-sky-deep: #f8c9a0; --bg-cream: #fef5ec; --bg-cream-warm:#fce8d4; --ink-deep: #3a1f10; --ink-soft: #7a4a30; --wax: #b85a2a; } body[data-palette="mocha"] { --accent: #8b6240; --accent-soft: #c4a888; --accent-deep: #6a4828; --bg-sky: #e8dcc7; --bg-sky-deep: #d8c8ae; --bg-cream: #f7f2ea; --bg-cream-warm:#ede4d4; --ink-deep: #2a1a10; --ink-soft: #6a4828; --wax: #6a4828; } body[data-palette="midnight"] { --accent: #d4a76a; --accent-soft: #e8cfa0; --accent-deep: #b88848; --bg-sky: #1f2738; --bg-sky-deep: #161e2e; --bg-cream: #2a3448; --bg-cream-warm:#232d40; --ink-deep: #f7f1e6; --ink-soft: #c8bfae; --wax: #b88848; } /* Sprint 16 — B13. Midnight's dark navy background clashed with the bright boy/girl papel-picado PNGs, which looked accidental rather than cinematic. Darken + desaturate the watercolor art and drop its opacity so it reads as background atmosphere instead of foreground noise. */ body[data-palette="midnight"] .bunting__img, body[data-palette="midnight"] .letter-card__papel, body[data-palette="midnight"] .arch-papel, body[data-palette="midnight"] .arch-frame, body[data-palette="midnight"] .corner-baby, body[data-palette="midnight"] .floral-divider, body[data-palette="midnight"] .s2-papel img, body[data-palette="midnight"] [data-palette-asset] { filter: brightness(0.65) saturate(0.7); opacity: 0.85; } * { box-sizing: border-box; } html { scroll-behavior: smooth; } body { margin: 0; font-family: var(--font-sans); color: var(--ink); /* Full-document gradient: sky → sky-deep → cream → warm cream. */ background: linear-gradient(180deg, var(--bg-sky) 0%, var(--bg-sky-deep) 32%, var(--bg-cream) 68%, var(--bg-cream-warm)100%); /* Sprint 12.3 — scroll (not fixed) so the gradient stretches across the full document height and flows continuously top-to-bottom as you scroll, rather than being pinned to the viewport. */ background-attachment: scroll; -webkit-font-smoothing: antialiased; overflow-x: hidden; } img { max-width: 100%; display: block; } .skip-link { position: absolute; left: -999px; top: 0; background: var(--accent-deep); color: #fff; padding: 10px 16px; border-radius: 0 0 8px 0; z-index: 10000; } .skip-link:focus { left: 0; } /* ---------------- Palette-driven asset swap ---------------- Two stacked variants per asset; show only the active palette's. */ [data-palette-asset]:not([data-palette-asset="boy"]) { display: none; } body[data-palette="girl"] [data-palette-asset="boy"] { display: none; } body[data-palette="girl"] [data-palette-asset="girl"] { display: block; } /* ---------------- Preview chrome ---------------- */ /* z-index 1100: must sit above .envelope-intro (z-index 1000) so the "Make this yours" CTA is visible on the raw template preview page. */ .preview-back, .preview-claim { position: fixed; z-index: 1100; font-family: var(--font-sans); font-size: 0.82rem; letter-spacing: 0.02em; text-decoration: none; padding: 0.5rem 0.9rem; border-radius: 999px; background: rgba(255,255,255,0.82) /* color-ok */; color: var(--ink); box-shadow: 0 4px 18px rgba(44,74,107,0.18); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); } .preview-back { top: 14px; left: 14px; display: inline-flex; align-items: center; gap: 6px; } .preview-claim { top: 14px; right: 14px; background: var(--accent); color: #fff; } .is-live-invite .preview-claim { display: none; } .preview-back:focus-visible, .preview-claim:focus-visible { outline: 2px solid currentColor; outline-offset: 2px; } /* ============================================================= SCREEN 1 — THE ENVELOPE Sprint 1.7: 4-beat choreography, ~2000ms total. Beat 1 0–250ms Anticipation wind-up (scale) Beat 2 200–700ms Seal crack + radial flash Beat 3 500–1400ms Flap pivots open, letter card rises Beat 4 1300–2000ms Settle and hand-off fade ============================================================= */ /* ---------- Beat 4 — intro shell fade-out ---------- Whole envelope-intro scales 1 → 1.02 and fades opacity 1 → 0 as a unit. Timing: delay 1300ms, duration --uv-dur-xl (820ms). The CSS class .is-opening triggers this; JS adds .is-opened at 2000ms. */ .envelope-intro { position: fixed; inset: 0; z-index: 1000; overflow: hidden; display: flex; flex-direction: column; align-items: center; justify-content: center; background: linear-gradient(180deg, var(--bg-sky) 0%, var(--bg-sky-deep) 100%); /* Resting state: no transition so first paint is clean. */ transition: none; } /* Beat 4 (1300ms+): scale 1 → 1.02, opacity 1 → 0 over --uv-dur-xl (820ms). pointer-events: none prevents a re-tap mid-open. */ body.is-opening .envelope-intro { opacity: 0; transform: scale(1.02); transition: opacity var(--uv-dur-xl) var(--uv-ease-soft) 1300ms, transform var(--uv-dur-xl) var(--uv-ease-soft) 1300ms; pointer-events: none; } body.is-opened .envelope-intro { display: none; } /* ---------- Background motion during open ---------- Clouds and bunting briefly speed up (×0.77) while is-opening to sell a feeling of release, then settle back to base drift once is-opened. No custom-property handle exists on cloud-drift or bunting-sway, so animation-duration is overridden directly. Refactoring those keyframes to use a custom property is out of scope for this sprint — leave it. */ body.is-opening .cloud--1 { animation-duration: calc(52s * 0.77); } body.is-opening .cloud--2 { animation-duration: calc(44s * 0.77); } body.is-opening .cloud--3 { animation-duration: calc(60s * 0.77); } body.is-opening .bunting { animation-duration: calc(6s * 0.77); } /* ---- Faint talavera arch watermark ---- */ .intro-arch { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width: min(92vw, 560px); opacity: 0.14; pointer-events: none; z-index: 0; } body.is-opening .intro-arch { opacity: 0.05; transition: opacity var(--uv-dur-m) var(--uv-ease-soft); } /* ---- Drifting clouds ---- */ .cloud { position: absolute; pointer-events: none; width: 40vw; opacity: 0.7; will-change: transform; } .cloud--1 { top: 20%; left: -20%; width: 46vw; opacity: 0.75; animation: cloud-drift 52s linear infinite; z-index: 1; } .cloud--2 { top: 56%; left: -30%; width: 34vw; opacity: 0.5; animation: cloud-drift 44s linear infinite; animation-delay: -12s; z-index: 1; } .cloud--3 { top: 38%; left: -25%; width: 28vw; opacity: 0.4; animation: cloud-drift 60s linear infinite; animation-delay: -28s; z-index: 1; } @keyframes cloud-drift { from { transform: translateX(0); } to { transform: translateX(150vw); } } body.is-opening .cloud { opacity: 0.2; transition: opacity var(--uv-dur-m) var(--uv-ease-soft); } /* ---- Papel picado banner ---- */ .bunting { position: absolute; top: 2.5%; left: 50%; width: 88%; transform: translateX(-50%); transform-origin: top center; animation: bunting-sway 6s var(--uv-ease-soft) infinite alternate; z-index: 2; } .bunting__img { width: 100%; filter: drop-shadow(0 8px 16px rgba(44,74,107,0.12)); } @keyframes bunting-sway { from { transform: translateX(-50%) rotate(-1.2deg); } to { transform: translateX(-50%) rotate(1.2deg); } } body.is-opening .bunting { opacity: 0.3; transition: opacity var(--uv-dur-m) var(--uv-ease-soft); } /* ---- Intro title ---- */ .intro-title { position: absolute; top: clamp(0.6rem, 2.4vh, 1.6rem); left: 50%; transform: translateX(-50%); font-family: var(--font-display); font-size: clamp(0.72rem, 3.2vw, 0.92rem); text-transform: uppercase; letter-spacing: 0.34em; color: var(--ink-soft); opacity: 0.7; z-index: 3; white-space: nowrap; } body.is-opening .intro-title { opacity: 0; transition: opacity var(--uv-dur-m) var(--uv-ease-soft); } /* ---- Small florals in the bottom corners ---- */ .intro-floral { position: absolute; bottom: -2%; width: 30vw; max-width: 200px; opacity: 0.6; pointer-events: none; z-index: 2; } .intro-floral--left { left: -3%; transform: scaleX(-1); } .intro-floral--right { right: -3%; } body.is-opening .intro-floral { opacity: 0.2; transition: opacity var(--uv-dur-m) var(--uv-ease-soft); } /* ---- Tiny sleeping baby peeking from a cloud, lower-left ---- */ .intro-baby { position: absolute; bottom: 6%; left: 4%; width: 25vw; max-width: 170px; opacity: 0.92; pointer-events: none; z-index: 2; animation: cloud-bob 7s var(--uv-ease-soft) infinite alternate; } body.is-opening .intro-baby { opacity: 0.3; transition: opacity var(--uv-dur-m) var(--uv-ease-soft); } /* ---- Envelope wrapper ---- */ .envelope-wrap { position: relative; z-index: 3; width: 70vw; max-width: 320px; display: flex; justify-content: center; will-change: transform; } /* ========================================================== Beat 1 — Anticipation (0–250ms) Wind-up: scale(1) → scale(0.96) → scale(1.04). --uv-ease-spring provides the slight overshoot. Duration: --uv-dur-s (200ms). fill-mode: both so the end scale(1.04) persists until Beat 3 overrides it. ========================================================== */ .envelope { position: relative; display: block; width: 100%; appearance: none; -webkit-appearance: none; border: 0; background: transparent; padding: 0; cursor: pointer; animation: env-breath 4s var(--uv-ease-soft) infinite; will-change: transform; /* perspective enables the rotateX flap effect on .envelope__stack */ perspective: 600px; } .envelope__stack { position: relative; display: block; /* preserve-3d needed for rotateX to work on children */ transform-style: preserve-3d; } .envelope__img { width: 100%; filter: drop-shadow(0 18px 36px rgba(44,74,107,0.22)); } /* Opened image sits atop sealed, invisible at rest */ .envelope__img--opened { position: absolute; inset: 0; opacity: 0; } @keyframes env-breath { 0%, 100% { transform: scale(1) translateY(0); } 50% { transform: scale(1.02) translateY(-0.4%); } } /* Beat 1 wind-up replaces the idle breath animation */ body.is-opening .envelope { animation: env-windup var(--uv-dur-s) var(--uv-ease-spring) 0ms both; } @keyframes env-windup { 0% { transform: scale(1); } 50% { transform: scale(0.96); } 100% { transform: scale(1.04); } } /* ========================================================== Beat 3 — Flap pivot (500–1000ms) .envelope__img--sealed tilts back: rotateX(-110deg) + fades. transform-origin: top center simulates the flap hinge. Duration: --uv-dur-l (520ms), delay: 500ms. ========================================================== */ body.is-opening .envelope__img--sealed { transform-origin: top center; opacity: 0; transform: rotateX(-110deg); transition: opacity var(--uv-dur-l) var(--uv-ease-soft) 500ms, transform var(--uv-dur-l) var(--uv-ease-soft) 500ms; } /* Opened image fades in as the sealed flap tilts away */ body.is-opening .envelope__img--opened { opacity: 1; transition: opacity var(--uv-dur-l) var(--uv-ease-out) 550ms; } /* ========================================================== Beat 2 — Wax-seal particles (200–700ms) Upgraded from original: 9px (within 8–10px spec), soft gold- to-cream radial gradient fill, 1px gold border, papel-picado- style rotation 0deg → 180deg during flight. Stagger: --uv-stagger-tight (60ms) between 12 siblings via --i. ========================================================== */ .seal-particles { position: absolute; top: 56%; left: 50%; width: 0; height: 0; z-index: 5; pointer-events: none; } .seal-particles i { position: absolute; top: 0; left: 0; width: 9px; height: 9px; margin: -4.5px; border-radius: 50%; /* Gold-to-cream gradient with a 1px gold ring */ background: radial-gradient(circle at 35% 35%, #f5e6c0 0%, var(--marigold) 55%, var(--wax) 100%); border: 1px solid var(--marigold); opacity: 0; } /* Trigger burst on is-opening; stagger via --i custom property */ body.is-opening .seal-particles i { animation: env-particle-burst var(--uv-dur-l) var(--uv-ease-out) both; animation-delay: calc(200ms + var(--i, 0) * var(--uv-stagger-tight)); } /* Radial vectors — 360° coverage; --i drives per-particle stagger */ .seal-particles i:nth-child(1) { --px: -72px; --py: -44px; --i: 0; } .seal-particles i:nth-child(2) { --px: 68px; --py: -50px; --i: 1; } .seal-particles i:nth-child(3) { --px: -84px; --py: 20px; --i: 2; } .seal-particles i:nth-child(4) { --px: 88px; --py: 14px; --i: 3; } .seal-particles i:nth-child(5) { --px: -34px; --py: -78px; --i: 4; } .seal-particles i:nth-child(6) { --px: 38px; --py: -76px; --i: 5; } .seal-particles i:nth-child(7) { --px: -52px; --py: 64px; --i: 6; } .seal-particles i:nth-child(8) { --px: 54px; --py: 66px; --i: 7; } .seal-particles i:nth-child(9) { --px: -106px; --py: -12px; --i: 8; } .seal-particles i:nth-child(10) { --px: 104px; --py: -20px; --i: 9; } .seal-particles i:nth-child(11) { --px: 8px; --py: -98px; --i: 10; } .seal-particles i:nth-child(12) { --px: -9px; --py: 90px; --i: 11; } /* Keyframe: scale 0→1→0.7, translate outward, rotation 0→180deg */ @keyframes env-particle-burst { 0% { opacity: 0; transform: translate(0,0) scale(0) rotate(0deg); } 20% { opacity: 1; transform: translate(calc(var(--px)*0.2),calc(var(--py)*0.2)) scale(1.3) rotate(40deg); } 60% { opacity: 0.9; } 100% { opacity: 0; transform: translate(var(--px), var(--py)) scale(0.7) rotate(180deg); } } /* ========================================================== Beat 2 — Seal shimmer flash .intro-flash: cream/gold radial burst from the seal point (50% 56%). Blooms in ~38% of animation then fades out. Duration: --uv-dur-l (520ms), delay: 200ms (Beat 2 start). ========================================================== */ .intro-flash { position: absolute; inset: 0; /* Radial burst centered at the wax-seal position */ background: radial-gradient( circle at 50% 56%, rgba(248, 235, 190, 0.85) 0%, rgba(232, 163, 61, 0.25) 22%, rgba(255, 255, 255, 0) 55% ); opacity: 0; pointer-events: none; z-index: 6; } body.is-opening .intro-flash { animation: env-seal-flash var(--uv-dur-l) var(--uv-ease-soft) 200ms both; } @keyframes env-seal-flash { 0% { opacity: 0; } 38% { opacity: 1; } 100% { opacity: 0; } } /* ========================================================== Beat 3 — Letter card rises (500–1320ms) translateY(40%) → translateY(-65%), scale 0.92 → 1. --uv-ease-emphasized: fast start, long tail — premium arrival. Duration: --uv-dur-xl (820ms), delay: 500ms. Paper-shadow deepens during the slide to sell the lift. ========================================================== */ .letter-card { position: absolute; left: 50%; bottom: 8%; width: 84%; transform: translate(-50%, 40%) scale(0.92); opacity: 0; z-index: 4; display: flex; flex-direction: column; align-items: center; gap: 0.35rem; padding: 1.6rem 1.2rem 1.8rem; background: var(--bg-cream); border: 2px solid var(--marigold); border-radius: 16px; /* Base shadow; grows via is-opening transition */ box-shadow: 0 12px 30px rgba(44,74,107,0.14); text-align: center; pointer-events: none; } .letter-card__papel { width: 56%; opacity: 0.9; margin-bottom: 0.2rem; } .letter-card__eyebrow { font-family: var(--font-sans); font-weight: 600; text-transform: uppercase; letter-spacing: 0.2em; font-size: 0.72rem; color: var(--accent); } .letter-card__title { font-family: var(--font-display); font-size: clamp(1.8rem, 8vw, 2.6rem); color: var(--ink); line-height: 1.05; } .letter-card__honoring { font-family: var(--font-sans); text-transform: uppercase; letter-spacing: 0.18em; font-size: 0.66rem; color: var(--ink-soft); } .letter-card__honoree { font-family: var(--font-script); font-size: clamp(1.8rem, 9vw, 3rem); color: var(--accent-deep); line-height: 1.05; } /* Beat 3: card slides from translateY(40%) scale(0.92) → translateY(-65%) scale(1). --uv-ease-emphasized chosen for premium deliberate arrival (motion-spec §4). Paper-shadow grows to 0 32px 72px to sell the vertical lift off the envelope. */ body.is-opening .letter-card { transform: translate(-50%, -65%) scale(1); opacity: 1; box-shadow: 0 32px 72px rgba(44,74,107,0.32), 0 8px 20px rgba(44,74,107,0.18); transition: transform var(--uv-dur-xl) var(--uv-ease-emphasized) 500ms, opacity var(--uv-dur-m) var(--uv-ease-out) 500ms, box-shadow var(--uv-dur-xl) var(--uv-ease-soft) 500ms; } /* ========================================================== Beat 3 — Letter card content stagger fade-up (climax) Children fade-up once card has risen ~30% of its travel. ~30% of 820ms ≈ 246ms into Beat 3 = 500 + 246 ≈ 750ms from open. Stagger: --uv-stagger-normal (90ms) between 5 children. Uses uv-fade-up keyframe from motion-tokens.css. Duration: --uv-dur-l (520ms) — scene-entry weight. ========================================================== */ body.is-opening .letter-card__papel, body.is-opening .letter-card__eyebrow, body.is-opening .letter-card__title, body.is-opening .letter-card__honoring, body.is-opening .letter-card__honoree { animation-name: uv-fade-up; animation-duration: var(--uv-dur-l); animation-timing-function: var(--uv-ease-out); animation-fill-mode: both; } body.is-opening .letter-card__papel { animation-delay: 750ms; } body.is-opening .letter-card__eyebrow { animation-delay: calc(750ms + 1 * var(--uv-stagger-normal)); } body.is-opening .letter-card__title { animation-delay: calc(750ms + 2 * var(--uv-stagger-normal)); } body.is-opening .letter-card__honoring { animation-delay: calc(750ms + 3 * var(--uv-stagger-normal)); } body.is-opening .letter-card__honoree { animation-delay: calc(750ms + 4 * var(--uv-stagger-normal)); } /* ---- Tap cue — fades out at Beat 1 start ---- */ .tap-cue { position: relative; z-index: 3; margin-top: clamp(1.2rem, 4vh, 2rem); font-family: var(--font-script); font-size: clamp(1.4rem, 6vw, 2rem); color: var(--accent-deep); animation: env-tap-pulse 2.5s var(--uv-ease-soft) infinite; } body.is-opening .tap-cue { opacity: 0; transition: opacity var(--uv-dur-m) var(--uv-ease-soft); } @keyframes env-tap-pulse { 0%, 100% { opacity: 0.55; } 50% { opacity: 1; } } /* ============================================================= REDUCED MOTION — envelope choreography Collapses entire sequence to a 250ms cross-fade. Sealed fades out, opened envelope + letter card fade in. JS sets dur=0 when prefers-reduced-motion, so body.is-opened fires via setTimeout(fn, 0) — no content stuck mid-rotation. ============================================================= */ @media (prefers-reduced-motion: reduce) { /* Beat 4 shell: instant, no scale */ body.is-opening .envelope-intro { opacity: 0; transform: none; transition: opacity var(--uv-dur-s) ease 0ms; } /* Background speed-up: cancel */ body.is-opening .cloud--1, body.is-opening .cloud--2, body.is-opening .cloud--3, body.is-opening .bunting { animation-duration: unset; } /* Arch / decorations: no animation */ body.is-opening .intro-arch, body.is-opening .intro-title, body.is-opening .intro-floral, body.is-opening .intro-baby, body.is-opening .cloud { transition: none; } body.is-opening .bunting { opacity: 1; transition: none; } /* Beat 1 wind-up: suppress */ body.is-opening .envelope { animation: none; } /* Beat 3 flap pivot: cross-fade only, no rotateX */ body.is-opening .envelope__img--sealed { transform: none; opacity: 0; transition: opacity var(--uv-dur-s) ease 0ms; } body.is-opening .envelope__img--opened { opacity: 1; transition: opacity var(--uv-dur-s) ease 0ms; } /* Beat 2 particles + flash: suppress */ body.is-opening .seal-particles i { animation: none; opacity: 0; } body.is-opening .intro-flash { animation: none; opacity: 0; } /* Beat 3 card: no translate, instant fade in */ body.is-opening .letter-card { transform: translate(-50%, -65%) scale(1); opacity: 1; box-shadow: 0 32px 72px rgba(44,74,107,0.32); transition: opacity var(--uv-dur-s) ease 0ms; } /* Card content: no stagger, reveal immediately */ body.is-opening .letter-card__papel, body.is-opening .letter-card__eyebrow, body.is-opening .letter-card__title, body.is-opening .letter-card__honoring, body.is-opening .letter-card__honoree { animation: none; opacity: 1; } /* Tap cue: hide instantly */ body.is-opening .tap-cue { opacity: 0; transition: none; } } /* ============================================================= SCREEN 2 — THE LONG SCROLL ============================================================= */ .scroll-stage { position: relative; z-index: 1; } /* Parallax cloud field spanning the whole document. */ .sky-field { position: absolute; inset: 0; overflow: hidden; pointer-events: none; z-index: 0; } .sky-cloud { position: absolute; opacity: 0.4; will-change: transform; } .sky-cloud--a { top: 8%; left: 6%; width: 36vw; max-width: 280px; opacity: 0.5; } .sky-cloud--b { top: 34%; right: 2%; width: 30vw; max-width: 240px; opacity: 0.35; } .sky-cloud--c { top: 62%; left: 10%; width: 26vw; max-width: 200px; opacity: 0.3; } .sky-cloud--d { top: 86%; right: 8%; width: 32vw; max-width: 220px; opacity: 0.32; } .section { position: relative; min-height: 100vh; min-height: 100svh; display: flex; align-items: center; justify-content: center; padding: clamp(2.5rem, 8vw, 6rem) clamp(1.25rem, 5vw, 4rem); overflow: hidden; z-index: 1; opacity: 0; transform: translateY(40px); transition: opacity 1100ms var(--ease-out), transform 1100ms var(--ease-out); } .section.is-revealed { opacity: 1; transform: translateY(0); } [hidden] { display: none !important; } .section__copy { position: relative; z-index: 2; width: 100%; max-width: 680px; text-align: center; display: flex; flex-direction: column; align-items: center; gap: clamp(0.6rem, 2.4vw, 1.2rem); } /* Staggered child reveal. */ .section.is-revealed .reveal-child { animation: fadeUp 760ms var(--ease-out) both; } .section.is-revealed .reveal-child:nth-child(2) { animation-delay: 110ms; } .section.is-revealed .reveal-child:nth-child(3) { animation-delay: 220ms; } .section.is-revealed .reveal-child:nth-child(4) { animation-delay: 330ms; } .section.is-revealed .reveal-child:nth-child(5) { animation-delay: 440ms; } .section.is-revealed .reveal-child:nth-child(6) { animation-delay: 550ms; } @keyframes fadeUp { from { opacity: 0; transform: translateY(22px); } to { opacity: 1; transform: translateY(0); } } /* ============================================================= TYPOGRAPHY ============================================================= */ .eyebrow { font-family: var(--font-sans); font-weight: 600; text-transform: uppercase; letter-spacing: 0.22em; font-size: clamp(0.66rem, 2.6vw, 0.86rem); color: var(--accent); } .eyebrow--soft { color: var(--ink-soft); letter-spacing: 0.18em; } .display { font-family: var(--font-display); font-weight: 400; line-height: 1.04; color: var(--ink); margin: 0; letter-spacing: 0.01em; } .display--xl { font-size: clamp(2.6rem, 12vw, 5rem); } .display--lg { font-size: clamp(2rem, 8.5vw, 3.4rem); } .script { font-family: var(--font-script); color: var(--accent-deep); line-height: 1.1; margin: 0; } .script--honoree { font-size: clamp(2.2rem, 10vw, 4rem); color: var(--ink-deep); } .script--date { font-size: clamp(1.8rem, 7.5vw, 3rem); } .script--finale { font-size: clamp(2.6rem, 12vw, 4.6rem); } .detail-line { font-family: var(--font-display); margin: 0; } .detail-line--time { font-size: clamp(1.1rem, 4.6vw, 1.6rem); color: var(--ink-soft); font-style: italic; } .detail-line--sub { font-size: clamp(1rem, 4.4vw, 1.4rem); color: var(--ink-soft); font-style: italic; } .detail-line--address { font-family: var(--font-sans); font-size: clamp(0.86rem, 3.4vw, 1.05rem); letter-spacing: 0.1em; text-transform: uppercase; color: var(--ink-soft); } .body-copy { font-family: var(--font-sans); font-size: clamp(0.96rem, 4vw, 1.12rem); line-height: 1.7; color: var(--ink-soft); max-width: 36ch; margin: 0 auto; } /* Shared decorative bits */ .floral-divider { width: clamp(120px, 36vw, 220px); opacity: 0.85; margin: 0.2rem auto 0; } .corner-baby { position: absolute; bottom: 2%; right: 2%; width: 25vw; max-width: 180px; opacity: 0.95; pointer-events: none; z-index: 1; animation: cloud-bob 8s var(--ease-soft) infinite alternate; } .corner-floral { position: absolute; bottom: -2%; right: -3%; width: 30vw; max-width: 200px; opacity: 0.55; pointer-events: none; z-index: 0; } .corner-floral--left { left: -3%; right: auto; transform: scaleX(-1); } @keyframes cloud-bob { from { transform: translateY(0); } to { transform: translateY(-14px); } } /* Split layout (signpost / books): art + copy side by side on desktop. */ .split { position: relative; z-index: 2; width: 100%; max-width: 920px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: clamp(1.4rem, 5vw, 3rem); } .split__art { flex: 0 0 auto; width: clamp(180px, 52vw, 320px); } .split__art img { width: 100%; filter: drop-shadow(0 16px 30px rgba(44,74,107,0.18)); } .split__copy { flex: 1 1 auto; } /* ============================================================= Section 1 — Invitation inside a talavera arch ============================================================= */ .section-1 .arch-frame { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width: min(92vw, 540px); z-index: 0; pointer-events: none; filter: drop-shadow(0 18px 40px rgba(44,74,107,0.16)); } /* The arch art is min(92vw,540px); its empty middle column is ~60% of that. Constrain the copy to that interior so text never reaches the painted sides. */ .arch-copy { width: calc(min(92vw, 540px) * 0.6); margin: 0 auto; padding: clamp(0.5rem, 3vw, 1.4rem) 0; } .arch-copy .display--xl { font-size: clamp(1.6rem, 7.6vw, 3rem); letter-spacing: 0.01em; } .arch-copy .script--honoree { font-size: clamp(1.6rem, 7vw, 3.2rem); } .arch-papel { width: 70%; opacity: 0.9; margin: 0 auto 0.3rem; } /* ============================================================= Section 2 — Save the Date (Sprint 1.1 typographic redesign) All new classes scoped with .section-2 or .s2- prefix. No new cubic-bezier literals — all timing uses token vars. ============================================================= */ /* ---- sr-only utility (accessibility) ---- */ .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; } /* ---- Eyebrow: gold small-caps ---- */ .s2-eyebrow { color: var(--accent-deep); letter-spacing: 0.28em; font-size: clamp(0.62rem, 2.4vw, 0.82rem); } /* ---- Weekday line: Caveat script ---- */ .s2-weekday { font-family: var(--font-script); font-size: clamp(1.6rem, 7vw, 2.6rem); color: var(--ink-deep); margin: 0; line-height: 1.1; text-align: center; } .s2-weekday__text.is-empty { color: var(--accent-deep); opacity: 0.6; } /* ---- Date tri-tile row: MONTH · DAY · YEAR ---- */ .s2-date-row { display: flex; align-items: baseline; justify-content: center; gap: clamp(0.4rem, 2vw, 0.9rem); flex-wrap: wrap; } .s2-month, .s2-year { font-family: var(--font-display); font-weight: 400; font-size: clamp(1.4rem, 5.5vw, 2rem); color: var(--ink-deep); letter-spacing: 0.06em; text-transform: uppercase; line-height: 1; } /* Hero number — big, breathing, DM Serif Display */ .s2-day { font-family: var(--font-display); font-weight: 400; font-size: clamp(3.5rem, 13vw, 5.5rem); color: var(--ink-deep); line-height: 1; letter-spacing: -0.01em; } /* Day-number: empty-state modifier */ .s2-day.is-empty { color: var(--accent-deep); border-bottom: 2px dashed var(--accent-deep); animation-name: uv-breathe; animation-duration: var(--uv-dur-2xl); animation-timing-function: var(--uv-ease-soft); animation-iteration-count: infinite; animation-direction: alternate; } /* Gold dot bullet separators */ .s2-dot { font-family: var(--font-display); font-size: clamp(1.2rem, 4vw, 1.8rem); color: var(--accent-deep); line-height: 1; user-select: none; } /* ---- Day-number micro-loop: breathing scale after entry ---- Entry: uv-fade-up dur-l (520ms) + delay-4 (360ms) ends ~880ms. Breathe: starts at 900ms so it never fights the entry. */ .s2-day.uv-in-view { animation-name: uv-fade-up, s2-day-breathe; animation-duration: var(--uv-dur-l), 3500ms; animation-timing-function: var(--uv-ease-out), var(--uv-ease-soft); animation-delay: calc(4 * var(--uv-stagger-normal)), 900ms; animation-fill-mode: both, none; animation-iteration-count: 1, infinite; animation-direction: normal, alternate; } @keyframes s2-day-breathe { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.015); } } /* ---- Thin gold rule ---- */ .s2-rule { width: clamp(80px, 30vw, 160px); height: 1px; background: linear-gradient(90deg, transparent, rgba(200, 154, 74, 0.5), transparent); border: 0; margin: 0.8rem auto; opacity: 1; } /* ---- Time line: italic display font ---- */ .s2-time { font-family: var(--font-display); font-style: italic; font-size: clamp(1rem, 4.2vw, 1.5rem); color: var(--ink-soft); margin: 0; text-align: center; display: flex; flex-direction: column; align-items: center; gap: 0.4rem; } /* Empty-state "Tap to set your event date" button */ .s2-time__empty-btn { -webkit-appearance: none; appearance: none; display: inline-flex; align-items: center; justify-content: center; padding: 0.6rem 1.3rem; min-height: 44px; font-family: var(--font-sans); font-size: clamp(0.88rem, 3.4vw, 0.98rem); font-weight: 600; color: var(--accent-deep); background: transparent; border: 1.5px dashed #c89a4a; border-radius: 999px; cursor: pointer; transition: background-color var(--uv-dur-xs) var(--uv-ease-out), transform var(--uv-dur-xs) var(--uv-ease-out); } .s2-time__empty-btn:hover { background: rgba(200, 154, 74, 0.08); transform: translateY(-2px); } .s2-time__empty-btn:focus-visible { outline: 3px solid #c89a4a; outline-offset: 3px; } .s2-time__empty-btn:active { transform: translateY(0); } /* ---- Floating papel-picado background decorations ---- Two positioned wrappers (upper-left, lower-right). Crop via overflow + fixed dimensions; drift via keyframe. */ .s2-papel { position: absolute; width: clamp(90px, 28vw, 180px); overflow: hidden; pointer-events: none; z-index: 0; opacity: 0.25; } .s2-papel img { width: 100%; display: block; } .s2-papel--tl { top: clamp(1rem, 4vh, 3rem); left: clamp(-1rem, -2vw, 0px); animation-name: s2-drift-slow; animation-duration: 9000ms; animation-timing-function: var(--uv-ease-soft); animation-iteration-count: infinite; animation-direction: alternate; } .s2-papel--br { bottom: clamp(1rem, 4vh, 3rem); right: clamp(-1rem, -2vw, 0px); animation-name: s2-drift-slow-flip; animation-duration: 11000ms; animation-timing-function: var(--uv-ease-soft); animation-iteration-count: infinite; animation-direction: alternate-reverse; } @keyframes s2-drift-slow { 0% { transform: translateY(0) rotate(-1deg); } 100% { transform: translateY(-12px) rotate(1deg); } } @keyframes s2-drift-slow-flip { 0% { transform: scaleX(-1) translateY(0) rotate(-1deg); } 100% { transform: scaleX(-1) translateY(-12px) rotate(1deg); } } /* ---- CSS confetti petals ---- 5 small shapes built from border-radius; no images. Each drifts downward with a gentle horizontal sway. */ .s2-petals { position: absolute; inset: 0; pointer-events: none; z-index: 0; overflow: hidden; } .s2-petal { position: absolute; border-radius: 50% 0 50% 0; opacity: 0; pointer-events: none; } .s2-petal--1 { top: -8px; left: 18%; width: 8px; height: 12px; background: #c89a4a; animation-name: s2-petal-fall; animation-duration: 6800ms; animation-timing-function: var(--uv-ease-soft); animation-iteration-count: infinite; animation-delay: 0ms; } .s2-petal--2 { top: -8px; left: 42%; width: 6px; height: 10px; background: var(--accent); animation-name: s2-petal-fall; animation-duration: 8200ms; animation-timing-function: var(--uv-ease-soft); animation-iteration-count: infinite; animation-delay: -2400ms; } .s2-petal--3 { top: -8px; left: 65%; width: 7px; height: 11px; background: #c89a4a; border-radius: 0 50% 0 50%; animation-name: s2-petal-fall; animation-duration: 7400ms; animation-timing-function: var(--uv-ease-soft); animation-iteration-count: infinite; animation-delay: -1000ms; } .s2-petal--4 { top: -8px; left: 80%; width: 5px; height: 9px; background: var(--accent-soft); animation-name: s2-petal-fall; animation-duration: 9100ms; animation-timing-function: var(--uv-ease-soft); animation-iteration-count: infinite; animation-delay: -4800ms; } .s2-petal--5 { top: -8px; left: 30%; width: 6px; height: 9px; background: var(--accent); border-radius: 50% 0 50% 0; animation-name: s2-petal-fall; animation-duration: 7900ms; animation-timing-function: var(--uv-ease-soft); animation-iteration-count: infinite; animation-delay: -3200ms; } @keyframes s2-petal-fall { 0% { opacity: 0; transform: translateY(-10px) translateX(0) rotate(0deg); } 10% { opacity: 0.55; } 80% { opacity: 0.4; } 100% { opacity: 0; transform: translateY(105vh) translateX(24px) rotate(200deg); } } /* ---- Floral corner decoration ---- */ .s2-floral { position: absolute; bottom: -2%; right: -3%; width: clamp(100px, 28vw, 200px); opacity: 0.55; pointer-events: none; z-index: 0; } /* ---- Reduced motion: collapse all scene-2 animations ---- */ @media (prefers-reduced-motion: reduce) { .s2-papel--tl, .s2-papel--br { animation: none !important; } .s2-papel--br { transform: scaleX(-1) !important; } .s2-petal { animation: none !important; opacity: 0 !important; } /* Day-number: no breathing loop; motion-tokens handles entry */ .s2-day.uv-in-view { animation-name: uv-fade-up !important; animation-duration: var(--uv-dur-l) !important; animation-delay: calc(4 * var(--uv-stagger-normal)) !important; animation-iteration-count: 1 !important; animation-direction: normal !important; } .s2-day.is-empty { animation: none !important; } } /* ============================================================= Section 3 — Venue + directions ============================================================= */ .signpost-btn { display: inline-flex; align-items: center; gap: 0.5rem; margin-top: clamp(1rem, 4vw, 1.8rem); font-family: var(--font-sans); font-size: clamp(0.9rem, 3.6vw, 1.05rem); font-weight: 600; letter-spacing: 0.04em; color: var(--accent-deep); background: var(--bg-cream); border: 2px solid var(--accent); border-radius: 999px; padding: 0.7rem 1.4rem; text-decoration: none; cursor: pointer; transition: transform 240ms var(--ease-out), box-shadow 240ms var(--ease-out), background 240ms var(--ease-out); box-shadow: 0 6px 18px rgba(44,74,107,0.14); } .signpost-btn:hover { transform: translateY(-3px); background: #fff; box-shadow: 0 10px 24px rgba(44,74,107,0.2); } .signpost-btn:focus-visible { outline: 3px solid var(--accent); outline-offset: 4px; } .signpost-btn__arrow { width: 18px; height: 18px; } /* ============================================================= Section 3 — Venue + Signpost (Sprint 1.3 redesign) All classes scoped with .section-3, .s3-, or .signpost- prefix. No new cubic-bezier literals — all timing uses token vars. ============================================================= */ /* ---- Outer card: centered column, max-width ---- */ .section-3 .s3-card { position: relative; z-index: 2; width: 100%; max-width: 520px; display: flex; flex-direction: column; align-items: center; gap: clamp(0.5rem, 2vw, 0.8rem); text-align: center; } /* ---- Heading + address ---- */ .section-3 .s3-eyebrow { color: var(--marigold); letter-spacing: 0.26em; } .section-3 .s3-venue-name { margin: 0; color: var(--ink-deep); } .section-3 .s3-address { font-style: italic; margin: 0; color: var(--ink-soft); } /* ---- Post + planks wrapper ---- */ .section-3 .s3-post-wrap { position: relative; width: 100%; max-width: 340px; display: flex; flex-direction: column; align-items: center; margin: clamp(0.6rem, 2.4vw, 1.2rem) 0; isolation: isolate; } /* ---- Decorative finial image (top of post) ---- Crops the PNG to only the top ~35% to show the flower/finial. overflow:hidden + max-height simulates a clip. */ .section-3 .s3-finial { width: clamp(64px, 20vw, 100px); overflow: hidden; max-height: clamp(60px, 18vw, 90px); position: relative; z-index: 3; flex-shrink: 0; filter: drop-shadow(0 6px 12px rgba(44,74,107,0.18)); } .section-3 .s3-finial__img { width: 100%; object-fit: cover; object-position: top center; display: block; } /* ---- Vertical post bar (6px wide, centered behind planks) ---- */ .section-3 .s3-post { position: absolute; top: clamp(56px, 17vw, 84px); bottom: 0; left: 50%; transform: translateX(-50%); width: 6px; background: linear-gradient(180deg, var(--marigold) 0%, #b87a2a 100%); border-radius: 3px; box-shadow: 2px 0 8px rgba(44,74,107,0.22), -1px 0 4px rgba(44,74,107,0.1); z-index: 1; } /* ---- Planks container ---- */ .section-3 .signpost-planks { position: relative; z-index: 2; width: 100%; display: flex; flex-direction: column; align-items: center; gap: clamp(0.5rem, 2vw, 0.8rem); padding: clamp(0.4rem, 1.6vw, 0.6rem) 0 clamp(0.8rem, 3vw, 1.4rem); } /* ---- Individual plank ---- Cream wood-grain card; inset shadow for texture depth. */ .section-3 .signpost-plank { position: relative; display: flex; align-items: center; gap: 0.6rem; width: clamp(200px, 78vw, 300px); padding: 0.65rem 1rem 0.6rem; background: linear-gradient(135deg, #f7f1e6 0%, #efe3cd 100%); box-shadow: inset 0 0 0 1px #c89a4a, 0 4px 14px rgba(44,74,107,0.16), 0 1px 4px rgba(44,74,107,0.1); border-radius: 8px; cursor: default; /* Entry: fade-up + wobble — paused until reveal-on-scroll adds .uv-in-view */ animation-name: uv-fade-up, signpostWobble; animation-duration: var(--uv-dur-l), 1.2s; animation-timing-function: var(--uv-ease-out), var(--uv-ease-soft); animation-fill-mode: both, both; animation-iteration-count: 1, 1; animation-play-state: paused, paused; animation-delay: var(--sp-delay, 0ms), calc(var(--sp-delay, 0ms) + 260ms); opacity: 0; } .section-3 .signpost-plank.uv-in-view { animation-play-state: running, running; } /* Direction modifiers: shift plank off the post centre */ .section-3 .signpost-plank--right { margin-left: clamp(16px, 6vw, 40px); flex-direction: row; } .section-3 .signpost-plank--left { margin-right: clamp(16px, 6vw, 40px); flex-direction: row-reverse; } /* ---- Plank text area ---- */ .section-3 .signpost-plank__body { flex: 1 1 auto; display: flex; flex-direction: column; align-items: center; gap: 0.1rem; min-width: 0; } .section-3 .signpost-plank__label { font-family: var(--font-sans); font-weight: 600; text-transform: uppercase; letter-spacing: 0.08em; font-size: clamp(0.75rem, 3vw, 0.9rem); color: var(--ink-deep); line-height: 1.1; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 100%; } .section-3 .signpost-plank__time { font-family: var(--font-display); font-style: italic; font-size: clamp(0.72rem, 2.8vw, 0.86rem); color: var(--marigold); line-height: 1; white-space: nowrap; } /* ---- Chevron arrow ---- Repeated nudge (translateX 0→4px→0) every 2.5s, infinite. */ .section-3 .signpost-plank__chevron { flex-shrink: 0; width: 22px; height: 22px; color: var(--marigold); animation: arrowNudge 2.5s var(--uv-ease-soft) infinite; animation-play-state: paused; } .section-3 .signpost-plank.uv-in-view .signpost-plank__chevron { animation-play-state: running; } .section-3 .signpost-plank--left .signpost-plank__chevron { animation-name: arrowNudgeLeft; } /* ---- Get Directions button spacing ---- */ .section-3 .s3-directions { margin-top: clamp(0.6rem, 2.4vw, 1rem); } /* ============================================================ Signpost keyframes All names prefixed to avoid global collisions. ============================================================ */ /* One-cycle wobble: rotate(-2deg → 2deg → -1deg → 0) */ @keyframes signpostWobble { 0% { transform: translateY(0) rotate( 0deg); } 20% { transform: translateY(0) rotate(-2deg); } 50% { transform: translateY(0) rotate( 2deg); } 75% { transform: translateY(0) rotate(-1deg); } 100% { transform: translateY(0) rotate( 0deg); } } /* Chevron nudge right (0 → +4px → 0) */ @keyframes arrowNudge { 0%, 70%, 100% { transform: translateX(0); } 85% { transform: translateX(4px); } } /* Chevron nudge left — mirror: scaleX(-1) + translateX nudge */ @keyframes arrowNudgeLeft { 0%, 70%, 100% { transform: scaleX(-1) translateX(0); } 85% { transform: scaleX(-1) translateX(4px); } } /* ---- Reduced motion overrides for section 3 ---- */ @media (prefers-reduced-motion: reduce) { .section-3 .signpost-plank { animation: none !important; opacity: 1 !important; transform: none !important; } .section-3 .signpost-plank__chevron { animation: none !important; } .section-3 .signpost-plank--left .signpost-plank__chevron { animation: none !important; transform: scaleX(-1); } } /* ---- Narrow mobile: tighten margins ---- */ @media (max-width: 640px) { .section-3 .signpost-plank { width: clamp(180px, 84vw, 280px); } .section-3 .signpost-plank--right { margin-left: 10px; } .section-3 .signpost-plank--left { margin-right: 10px; } /* Sprint 12.1 — P1: content-height sections (hero keeps full opener) */ .section { min-height: auto; padding-block: clamp(2.5rem, 10vw, 4rem); } .section:first-of-type { min-height: 100svh; } /* Sprint 12.1 — P3: iOS-safe scroll background */ body { background-attachment: scroll; } } /* ============================================================= Section 3 — Venue map tile (Sprint 1.4) Added AFTER signpost styles; DO NOT intersperse with signpost rules. ============================================================= */ /* ---- Map container ---- */ .s3-map { position: relative; width: 100%; max-width: 480px; aspect-ratio: 16 / 9; border-radius: 12px; overflow: hidden; border: 1px solid var(--marigold); box-shadow: 0 8px 24px rgba(44, 74, 107, 0.16), 0 2px 6px rgba(44, 74, 107, 0.1); /* margin between address and signpost post */ margin-top: clamp(0.4rem, 1.6vw, 0.8rem); margin-bottom: clamp(0.2rem, 0.8vw, 0.4rem); flex-shrink: 0; } /* ---- Iframe: fills the container; hidden in fallback state ---- */ .s3-map__frame { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; display: block; } .s3-map.is-fallback .s3-map__frame { display: none; } /* ---- Overlay: stacked on top of the iframe ---- In fallback state: full-tile cream backdrop + gold dotted grid. When NOT fallback: collapses to a small "Open in maps" pill in the bottom-right corner (pointer-events only over itself). */ .s3-map__overlay { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 0.5rem; text-decoration: none; color: var(--marigold); /* fallback: cream tile + gold dotted grid via two linear-gradient layers */ background: linear-gradient(rgba(200, 154, 74, 0.18) 1px, transparent 1px), linear-gradient(90deg, rgba(200, 154, 74, 0.18) 1px, transparent 1px), var(--bg-cream); background-size: 28px 28px, 28px 28px, auto; transition: opacity var(--uv-dur-xs, 120ms) var(--uv-ease-out, ease); } /* When map is live: overlay becomes a small bottom-right pill */ .s3-map:not(.is-fallback) .s3-map__overlay { inset: auto; bottom: 8px; right: 8px; width: auto; flex-direction: row; gap: 0.3rem; padding: 0.3rem 0.7rem; background: rgba(251, 246, 236, 0.92); border: 1px solid var(--marigold); border-radius: 999px; box-shadow: 0 2px 8px rgba(44, 74, 107, 0.18); font-family: var(--font-sans); font-size: 0.72rem; font-weight: 600; letter-spacing: 0.04em; backdrop-filter: blur(4px); -webkit-backdrop-filter: blur(4px); } .s3-map__overlay:hover { opacity: 0.85; } .s3-map__overlay:focus-visible { outline: 3px solid var(--marigold); outline-offset: 3px; } /* ---- Map pin SVG ---- */ .s3-map__pin { color: var(--marigold); flex-shrink: 0; transition: transform var(--uv-dur-xs, 120ms) var(--uv-ease-out, ease); } .s3-map__overlay:hover .s3-map__pin { transform: scale(1.05); } /* In pill (non-fallback) mode the pin is smaller */ .s3-map:not(.is-fallback) .s3-map__pin { width: 14px; height: 18px; } /* ---- Label text ---- */ .s3-map__label { font-family: var(--font-sans); font-size: clamp(0.82rem, 3.2vw, 0.96rem); font-weight: 600; color: var(--marigold); letter-spacing: 0.06em; text-align: center; } .s3-map:not(.is-fallback) .s3-map__label { font-size: 0.72rem; letter-spacing: 0.04em; } /* ---- Mobile: tighter aspect ratio (4/3) on very narrow screens ---- */ @media (max-width: 400px) { .s3-map { aspect-ratio: 4 / 3; } } /* ---- Reduced motion: no pin hover scale ---- */ @media (prefers-reduced-motion: reduce) { .s3-map__pin { transition: none; } .s3-map__overlay:hover .s3-map__pin { transform: none; } } /* ============================================================= Section 4 — Countdown + balloon ============================================================= */ .balloon-art { position: absolute; top: 8%; right: -4%; width: 38vw; max-width: 280px; opacity: 0.95; pointer-events: none; z-index: 1; } .balloon-bob { animation: balloon-bob 8s var(--ease-soft) infinite alternate; } @keyframes balloon-bob { from { transform: translateY(0) rotate(-1deg); } to { transform: translateY(-22px) rotate(1.5deg); } } /* ---- Countdown grid ---- */ /* Mobile-first: 2x2 grid on small screens; 4-up row on wider. */ .countdown { display: grid; grid-template-columns: repeat(2, 1fr); gap: clamp(0.6rem, 2.6vw, 1rem); justify-content: center; width: 100%; max-width: 400px; margin: 0 auto; position: relative; } /* Subtle papel-picado strip behind the tiles via pseudo-element. */ .countdown::before { content: ''; position: absolute; top: -28px; left: 50%; transform: translateX(-50%); width: 110%; height: 28px; background-image: url('frames/papel_long_boy.png'); background-size: contain; background-repeat: no-repeat; background-position: center top; opacity: 0.45; pointer-events: none; } body[data-palette="girl"] .countdown::before { background-image: url('frames/papel_long_girl.png'); } .countdown__tile { display: flex; flex-direction: column; align-items: center; gap: 0.25rem; padding: clamp(0.85rem, 3.4vw, 1.3rem) clamp(0.5rem, 2.2vw, 1rem); /* Cream card with gold top-accent border. */ background: rgba(247, 241, 230, 0.92); border-top: 3px solid #c89a4a; border-radius: 16px; box-shadow: 0 4px 14px rgba(44, 74, 107, 0.13), 0 1px 3px rgba(44, 74, 107, 0.08); overflow: hidden; position: relative; } /* ---- Number element with numTick animation ---- */ .countdown__num { display: block; font-family: var(--font-display); font-size: clamp(2rem, 9vw, 3rem); line-height: 1; color: var(--ink-deep); animation-name: numTick; animation-duration: var(--uv-dur-m, 320ms); animation-timing-function: var(--uv-ease-out, cubic-bezier(.2,.7,.2,1)); animation-fill-mode: both; animation-play-state: paused; } /* JS adds .is-ticking on each value change to fire the animation. */ .countdown__num.is-ticking { animation-play-state: running; } /* numTick: digit slides in from 6px below with a fade, giving the impression that the new value is rising up to replace the old one. */ @keyframes numTick { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: translateY(0); } } .countdown__label { font-family: var(--font-sans); font-size: clamp(0.6rem, 2.4vw, 0.72rem); text-transform: uppercase; letter-spacing: 0.18em; color: var(--ink-soft); font-weight: 600; } .countdown__today { font-family: var(--font-script); font-size: clamp(1.6rem, 7vw, 2.4rem); color: var(--coral); margin: 0; } /* ---- Countdown empty state ---- */ /* Shown when event_at is null. Styled as a soft dashed card in brand cream/gold so it blends seamlessly with the template feel. */ .countdown-empty { display: flex; flex-direction: column; align-items: center; gap: 0.6rem; padding: clamp(1.4rem, 5vw, 2rem) clamp(1.2rem, 5vw, 2rem); background: rgba(247, 241, 230, 0.88); border: 1.5px dashed #c89a4a; border-radius: 18px; box-shadow: 0 6px 20px rgba(44, 74, 107, 0.1); max-width: 380px; width: 100%; text-align: center; /* Wired to uv-reveal: play-state driven by .uv-in-view. */ animation-name: uvFadeUp; animation-duration: var(--uv-dur-l, 520ms); animation-timing-function: var(--uv-ease-out, cubic-bezier(.2,.7,.2,1)); animation-fill-mode: both; animation-play-state: paused; } .countdown-empty.uv-in-view { animation-play-state: running; } .countdown-empty__heading { font-family: var(--font-display); font-size: clamp(1.4rem, 6vw, 1.9rem); color: var(--ink-deep); margin: 0; line-height: 1.15; } .countdown-empty__sub { font-family: var(--font-sans); font-size: clamp(0.88rem, 3.6vw, 1.02rem); color: var(--ink-soft); margin: 0; max-width: 26ch; } /* Primary CTA — real