/* ============================================================= Bearly Wait — long-scroll cinematic page. One continuous vertical scroll, 8 sections, natural smooth scroll (NO snap). Parallax accents + IntersectionObserver reveals are wired in cinema.js; this file owns the look and the choreography. ============================================================= */ @import url('/motion-tokens.css'); /* ---------------- Palette + tokens (single source of truth) ---- Default palette: neutral (applied when no data-palette attr is set). Variable contract (kept stable across templates): --bg-sky soft top of the page gradient (atmosphere) --bg-mist feathered mid tone between sky and cream --bg-cream primary surface — body cards, mid scroll --bg-dusk deep tone at the very bottom of the gradient --text-deep primary text --text-soft secondary text / eyebrows --accent-honey accent for CTAs + script lines (name kept for cross- template compatibility even though the value differs per palette — peach, blue, rose, sage, mocha, indigo) --accent-rose softer companion accent --ink body text on cream surfaces 6-palette system wired via UV.palette (populate.js + uv-palette.js). Set data-palette="neutral|boy|girl|sage|mocha|midnight" on (or inline CSS vars for the custom-hex path). ---------------------------------------------------------------- */ /* 1. neutral (default) — soft cream + warm peach */ :root[data-palette="neutral"], :root:not([data-palette]) { --bg-sky: #f3e7d4; --bg-mist: #f7eee2; --bg-cream: #fbf5ea; --bg-dusk: #5c4030; --text-deep: #5c4030; --text-soft: #8a6f5a; --accent-honey: #d9a679; --accent-rose: #e8c4a8; --ink: #5c4030; --on-dark: #fbf5ea; --on-dark-soft: #e7d8c2; --dark-band: 74, 64, 48; } /* 2. boy — pale sky + dusty blue */ :root[data-palette="boy"] { --bg-sky: #d8e4ee; --bg-mist: #e6eef5; --bg-cream: #f1f5f9; --bg-dusk: #1f2d3d; --text-deep: #1f2d3d; --text-soft: #506578; --accent-honey: #7a9bb8; --accent-rose: #b4cadd; --ink: #1f2d3d; --on-dark: #f1f5f9; --on-dark-soft: #d6e0e8; --dark-band: 31, 45, 61; } /* 3. girl — blush + dusty rose */ :root[data-palette="girl"] { --bg-sky: #f5d5cf; --bg-mist: #fbe7e3; --bg-cream: #fdf1ee; --bg-dusk: #3a1f23; --text-deep: #3a1f23; --text-soft: #7a4c52; --accent-honey: #c98a8a; --accent-rose: #e1b2b2; --ink: #3a1f23; --on-dark: #fdf1ee; --on-dark-soft: #e8d2cf; --dark-band: 58, 31, 35; } /* 4. sage — pale sage + leafy green */ :root[data-palette="sage"] { --bg-sky: #d6e0cc; --bg-mist: #e6ede0; --bg-cream: #f0f4ea; --bg-dusk: #2a3a25; --text-deep: #2a3a25; --text-soft: #547048; --accent-honey: #7e9b6f; --accent-rose: #b6c8a8; --ink: #2a3a25; --on-dark: #f0f4ea; --on-dark-soft: #d5dfca; --dark-band: 42, 58, 37; } /* 5. mocha — warm latte + chocolate */ :root[data-palette="mocha"] { --bg-sky: #e2d3bd; --bg-mist: #efe4d5; --bg-cream: #f6efe4; --bg-dusk: #3a2415; --text-deep: #3a2415; --text-soft: #6b4a30; --accent-honey: #8a6240; --accent-rose: #c9a886; --ink: #3a2415; --on-dark: #f6efe4; --on-dark-soft: #d9c8b0; --dark-band: 58, 36, 21; } /* 6. midnight — moody ink + indigo */ :root[data-palette="midnight"] { --bg-sky: #cdd0db; --bg-mist: #dfe1ea; --bg-cream: #ecedf2; --bg-dusk: #181f2e; --text-deep: #181f2e; --text-soft: #44506e; --accent-honey: #4a577a; --accent-rose: #9aa3bd; --ink: #181f2e; --on-dark: #ecedf2; --on-dark-soft: #c8cdd9; --dark-band: 24, 31, 46; } /* ── Shared root tokens (non-palette — fonts, eases, scroll) ───── */ :root { /* 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); /* Live scroll position in px (written by cinema.js for parallax). LESSON: a length UNIT is mandatory — unitless calc() breaks transforms. */ --scroll: 0px; --font-display: 'Cormorant Garamond', Georgia, 'Times New Roman', serif; --font-script: 'Allura', 'Pinyon Script', 'Great Vibes', 'Caveat', 'Segoe Script', cursive; --font-sans: 'General Sans', system-ui, -apple-system, 'Segoe UI', sans-serif; } * { box-sizing: border-box; } html { scroll-behavior: smooth; } body { margin: 0; font-family: var(--font-sans); color: var(--text-deep); /* Page-wide gradient that reads sky-blue at top -> cream mid -> dusk bottom. Fixed so it blends across the whole scroll without re-tiling. */ background: linear-gradient(180deg, var(--bg-sky) 0%, var(--bg-mist) 22%, var(--bg-cream) 52%, #cdb89a 78%, var(--bg-dusk) 100%); /* Sprint 12.3 — scroll (not fixed) so the single gradient stretches the full document height and flows top→bottom as one continuous background. */ 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(--ink); color: #fff; padding: 10px 16px; border-radius: 0 0 8px 0; z-index: 10000; } .skip-link:focus { left: 0; } /* ---------------- Preview chrome ---------------- */ .preview-back, .preview-claim { position: fixed; z-index: 90; 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(--text-deep); box-shadow: 0 4px 18px rgba(74,93,112,0.18); 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-honey); color: #fff; } .is-live-invite .preview-claim { display: none; } .preview-back:focus-visible, .preview-claim:focus-visible { outline: 2px solid currentColor; outline-offset: 2px; } /* ============================================================= SECTION SYSTEM ============================================================= */ .cinema { position: relative; z-index: 1; } .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; /* Reveal base state — cinema.js adds .is-revealed when in view. */ opacity: 0; transform: translateY(40px); transition: opacity 1000ms var(--ease-out), transform 1000ms var(--ease-out); } .section.is-revealed { opacity: 1; transform: translateY(0); } /* Hidden HTML attribute must override CSS display rules. Fixes: registry-edit input was always visible because CSS `display: flex` overrode the `hidden` attribute. */ [hidden] { display: none !important; } /* Background watercolor art behind a section's copy. */ .section__art { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); width: min(92vw, 520px); max-height: 92%; object-fit: contain; pointer-events: none; z-index: 0; opacity: 0.96; filter: drop-shadow(0 18px 40px rgba(74,93,112,0.18)); } .section__art.is-missing { display: none; } .section__art--hero { width: min(94vw, 560px); } .section__art--backdrop { width: min(96vw, 640px); opacity: 0.55; } .section__art--accent { /* Small decorative watercolor anchored to the bottom-right of the section. Must override .section__art's centering transform and positioning. */ width: min(50vw, 240px); top: auto !important; bottom: 6% !important; left: auto !important; right: 4% !important; transform: none !important; opacity: 0.5; z-index: 0; } .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: 130ms; } .section.is-revealed .reveal-child:nth-child(3) { animation-delay: 260ms; } .section.is-revealed .reveal-child:nth-child(4) { animation-delay: 390ms; } .section.is-revealed .reveal-child:nth-child(5) { animation-delay: 520ms; } @keyframes fadeUp { from { opacity: 0; transform: translateY(22px); } to { opacity: 1; transform: translateY(0); } } /* ============================================================= TYPOGRAPHY (all sizes via clamp — never fixed px headings) ============================================================= */ .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(--text-soft); } .eyebrow--soft { color: var(--accent-honey); letter-spacing: 0.18em; } .display { font-family: var(--font-display); font-weight: 600; line-height: 1.02; color: var(--text-deep); margin: 0; letter-spacing: 0.01em; } .display--hero { font-size: clamp(2.6rem, 12vw, 5.5rem); } .display--xl { font-size: clamp(2.4rem, 11vw, 5rem); text-transform: uppercase; letter-spacing: 0.04em; } .display--lg { font-size: clamp(2rem, 8.5vw, 3.6rem); } .script { font-family: var(--font-script); color: var(--accent-honey); line-height: 1.1; margin: 0; } .subtitle { font-size: clamp(1.4rem, 6vw, 2.2rem); color: var(--text-soft); } .script--honoree { font-size: clamp(2.2rem, 10vw, 4rem); color: var(--ink); } .script--note { font-size: clamp(1.4rem, 5.5vw, 2rem); color: var(--text-soft); font-style: italic; } .script--date { font-size: clamp(1.8rem, 7vw, 2.8rem); color: var(--ink); } .script--signoff { font-size: clamp(1.6rem, 6vw, 2.2rem); color: var(--accent-honey); } .body-copy { font-family: var(--font-sans); font-size: clamp(0.98rem, 3.6vw, 1.12rem); line-height: 1.7; color: var(--text-deep); max-width: 38ch; margin: 0 auto; } .detail-line { font-family: var(--font-display); margin: 0; } .detail-line--date { font-size: clamp(1.5rem, 6vw, 2.4rem); font-weight: 600; text-transform: uppercase; letter-spacing: 0.06em; color: var(--text-deep); } .detail-line--address { font-family: var(--font-sans); font-size: clamp(0.86rem, 3.4vw, 1.05rem); letter-spacing: 0.12em; text-transform: uppercase; color: var(--text-soft); } /* Prevent the date line from breaking awkwardly mid-time on mobile. The combination "AT 3:30 PM" should stay together. Use a slightly smaller size on narrow viewports so it fits on two clean lines. */ .detail-line--date { font-size: clamp(1rem, 4.4vw, 1.6rem); letter-spacing: 0.08em; } /* ---------------- Section 1 hero layout ---------------- */ /* Title and copy sit in front of a soft, dimmed envelope watercolor that acts as a centered backdrop. The title is the focal point; the envelope is mood, not content. */ .section-1__copy { gap: clamp(0.6rem, 2.4vw, 1.2rem); z-index: 3; } .section-1 .section__art--hero { /* Smaller, softer envelope as ambient backdrop. */ width: min(78vw, 420px); opacity: 0.42; filter: drop-shadow(0 18px 40px rgba(74,93,112,0.12)); z-index: 1; } /* Make the title pop against the dimmed envelope. */ .section-1 .display--hero { text-shadow: 0 2px 18px rgba(244, 234, 211, 0.9), 0 1px 3px rgba(255,255,255,0.7); } .section-1 .eyebrow, .section-1 .subtitle, .section-1 .scroll-cue { text-shadow: 0 1px 8px rgba(244, 234, 211, 0.85); } .scroll-cue { margin-top: clamp(0.6rem, 2.4vw, 1.4rem); display: inline-flex; flex-direction: column; align-items: center; gap: 0.3rem; font-family: var(--font-sans); font-size: clamp(0.62rem, 2.4vw, 0.78rem); text-transform: uppercase; letter-spacing: 0.22em; color: var(--text-soft); } .scroll-cue .chev { width: 26px; height: 26px; color: var(--accent-honey); animation: chevBounce 1.8s var(--ease-soft) infinite; animation-play-state: paused; } :where(.section-1.is-revealed) .scroll-cue .chev { animation-play-state: running; } @keyframes chevBounce { 0%, 100% { transform: translateY(0); opacity: 0.7; } 50% { transform: translateY(8px); opacity: 1; } } /* ============================================================= Section 3 — Wooden signpost map button ============================================================= */ .signpost { display: inline-block; position: relative; margin-top: clamp(1rem, 4vw, 2rem); cursor: pointer; transition: transform 320ms var(--ease-out); line-height: 0; } .signpost__img { width: clamp(220px, 72vw, 280px); height: auto; filter: drop-shadow(0 14px 26px rgba(74,93,112,0.28)); } /* Sprint 22 — storybook label sits ON the wooden arrow plank, masking the baked-in "GOOGLE MAPS" text with a thematic phrase. Width is anchored to the arrow band (top ≈20% of the PNG, runs ~85% of the post width). */ .signpost__label { position: absolute; top: 38%; left: 50%; transform: translate(-50%, -50%) rotate(-2deg); width: 58%; min-height: 11%; display: flex; align-items: center; justify-content: center; font-family: var(--font-display, 'Caveat', 'Patrick Hand', cursive); color: var(--ink); font-size: clamp(1.05rem, 4.4vw, 1.35rem); font-weight: 800; letter-spacing: 0.01em; line-height: 1.05; text-align: center; white-space: nowrap; text-shadow: 0 1px 0 rgba(255, 235, 195, 0.55); pointer-events: none; user-select: none; /* Wooden plank background mask over the baked PNG text */ padding: 0.18em 0.45em; background: linear-gradient(180deg, #d6a157 0%, #c98a3f 38%, #b5762d 100%); border: 1px solid rgba(80, 48, 18, 0.45); border-radius: 3px; box-shadow: inset 0 1px 0 rgba(255, 230, 180, 0.45), inset 0 -2px 4px rgba(80, 45, 15, 0.35), inset 1px 0 2px rgba(255, 220, 160, 0.25), inset -1px 0 2px rgba(80, 45, 15, 0.25), 0 1px 2px rgba(60, 40, 15, 0.3); } .signpost:hover { transform: translateY(-6px); } .signpost:focus-visible { outline: 3px solid var(--accent-honey); outline-offset: 6px; border-radius: 12px; } .signpost.is-missing { display: none; } /* ============================================================= Section 4 — Countdown ============================================================= */ /* Sprint 12.3 — section background removed; the unified body gradient now shows through. (Reverts the 12.2 P2b blend zone.) */ .countdown { display: flex; align-items: flex-end; justify-content: center; gap: clamp(0.4rem, 1.6vw, 0.9rem); flex-wrap: nowrap; margin: clamp(0.8rem, 3vw, 1.6rem) 0; } .countdown__unit { display: flex; flex-direction: column; align-items: center; gap: 0.3rem; min-width: clamp(54px, 14vw, 76px); } .countdown__num { font-family: var(--font-display); font-size: clamp(2.4rem, 9vw, 3.6rem); font-weight: 600; color: var(--ink); line-height: 1; font-variant-numeric: tabular-nums; } .countdown__label { font-family: var(--font-sans); text-transform: uppercase; letter-spacing: 0.18em; font-size: clamp(0.58rem, 2.2vw, 0.74rem); color: var(--text-soft); } .countdown__sep { font-family: var(--font-display); font-size: clamp(2rem, 7vw, 3rem); color: var(--accent-honey); align-self: center; margin: 0 -0.2rem; } @keyframes hawNumTick { 0% { transform: translateY(0); } 35% { transform: translateY(-3px); opacity: 0.9; } 70% { transform: translateY(0); } } .countdown__num.is-tick { animation: hawNumTick 360ms var(--ease-soft); } .countdown__today { font-family: var(--font-display); font-size: clamp(1.6rem, 7vw, 2.6rem); color: var(--accent-honey); margin: clamp(0.8rem, 3vw, 1.6rem) 0; } /* ============================================================= Section 5 — Gift registry plaque ============================================================= */ /* Sprint 12.3 — section background removed; unified body gradient shows through. (Reverts the 12.2 P2b blend zone.) */ .plaque { position: relative; display: inline-block; margin-top: clamp(1rem, 4vw, 2rem); cursor: pointer; transition: transform 320ms var(--ease-out); line-height: 0; } .plaque__img { width: clamp(260px, 80vw, 320px); height: auto; filter: drop-shadow(0 14px 26px rgba(92,72,56,0.3)); transition: filter 320ms var(--ease-out), opacity 320ms var(--ease-out); } .plaque:hover { transform: translateY(-6px); } .plaque:focus-visible { outline: 3px solid var(--accent-honey); outline-offset: 6px; border-radius: 12px; } .plaque.is-missing { display: none; } /* Unset registry (preview): gray the plaque + show the hint tooltip. */ .plaque.is-disabled { cursor: default; } .plaque.is-disabled .plaque__img { filter: grayscale(0.85) opacity(0.55); } .plaque.is-disabled:hover { transform: none; } .plaque__tooltip { position: absolute; left: 50%; bottom: -2.4rem; transform: translateX(-50%); white-space: nowrap; font-family: var(--font-sans); font-size: 0.74rem; line-height: 1; color: var(--ink); background: rgba(255,255,255,0.92); padding: 0.4rem 0.7rem; border-radius: 999px; box-shadow: 0 4px 14px rgba(92,72,56,0.2); } /* Owner-only registry URL field below the plaque. */ .registry-edit { display: flex; flex-direction: column; gap: 0.35rem; margin-top: clamp(1rem, 4vw, 1.8rem); width: min(92vw, 360px); text-align: left; } .registry-edit__label { font-family: var(--font-sans); font-size: 0.7rem; text-transform: uppercase; letter-spacing: 0.16em; color: var(--text-soft); } .registry-edit__input { font-family: var(--font-sans); font-size: 0.95rem; padding: 0.6rem 0.8rem; border: 1px solid rgba(92,72,56,0.25); border-radius: 10px; background: rgba(255,255,255,0.9); color: var(--ink); } .registry-edit__input:focus { outline: 2px solid var(--accent-honey); outline-offset: 1px; } /* ============================================================= Section 6 — Books for baby ============================================================= */ /* Sprint 12.3 — section background removed; unified body gradient shows through. (Reverts the 12.2 P2b blend zone.) */ /* Hide the legacy accent illustration in section 6 — clean text-only layout for now. (Asset to be replaced with an original watercolor.) */ .section-6 .section__art--accent { display: none !important; } /* ============================================================= Section 7 — RSVP (deeper dusk tone) ============================================================= */ .section-7 { /* Sprint 12.5 — fade the dark overlay's alpha in from 0 at the section's top edge so there is no hard line where it meets the body gradient above. Stops are tightened (80px / 240px) because on mobile the "RSVP" heading starts only ~40-64px below the top edge, so the overlay reaches near-full darkness quickly enough to keep the cream text legible. Holds at 0.65 through the rest of the section. */ background: linear-gradient(180deg, rgba(var(--dark-band), 0) 0%, rgba(var(--dark-band), 0.55) 80px, rgba(var(--dark-band), 0.78) 240px, rgba(var(--dark-band), 0.78) 100%); color: var(--on-dark); } .section-7 .display { color: var(--on-dark); } .section-7 .eyebrow { color: var(--on-dark-soft); } .rsvp { width: min(92vw, 460px); margin: clamp(1rem, 4vw, 1.8rem) auto 0; text-align: left; display: flex; flex-direction: column; gap: clamp(0.9rem, 3vw, 1.3rem); } .rsvp__field { display: flex; flex-direction: column; gap: 0.4rem; } .rsvp__field label, .rsvp__radios legend { font-family: var(--font-sans); font-size: 0.82rem; letter-spacing: 0.02em; color: var(--on-dark-soft); padding: 0; } .rsvp__field .req { color: var(--accent-rose); } .rsvp input[type="text"], .rsvp input[type="tel"], .rsvp textarea { font-family: var(--font-sans); font-size: 1rem; padding: 0.7rem 0.9rem; border: 1px solid rgba(255,255,255,0.35); border-radius: 10px; background: rgba(255,255,255,0.94); color: var(--ink); width: 100%; } .rsvp textarea { resize: vertical; min-height: 80px; } .rsvp input:focus, .rsvp textarea:focus { outline: 2px solid var(--accent-honey); outline-offset: 1px; } .rsvp__radios { border: none; margin: 0; padding: 0; } .rsvp__radios legend { margin-bottom: 0.5rem; } .radio-pill { display: flex; align-items: center; gap: 0.6rem; font-family: var(--font-sans); font-size: 0.95rem; color: var(--on-dark); padding: 0.55rem 0.2rem; cursor: pointer; } .radio-pill input { width: 18px; height: 18px; accent-color: var(--accent-honey); } .rsvp__submit { margin-top: 0.4rem; font-family: var(--font-display); font-size: clamp(1rem, 4vw, 1.2rem); font-weight: 600; letter-spacing: 0.04em; color: var(--ink); background: var(--accent-honey); border: none; border-radius: 999px; padding: 0.8rem 1.4rem; cursor: pointer; transition: transform 240ms var(--ease-out), box-shadow 240ms var(--ease-out); box-shadow: 0 8px 20px rgba(0,0,0,0.22); } .rsvp__submit:hover { transform: translateY(-2px); box-shadow: 0 12px 26px rgba(0,0,0,0.28); } .rsvp__submit:focus-visible { outline: 2px solid currentColor; outline-offset: 2px; } .rsvp__submit:disabled { opacity: 0.6; cursor: default; transform: none; } .rsvp-thanks { margin-top: clamp(1rem, 4vw, 1.8rem); display: flex; flex-direction: column; align-items: center; gap: 0.6rem; color: var(--on-dark); font-family: var(--font-display); font-size: clamp(1.1rem, 4.5vw, 1.5rem); } .rsvp-thanks .thanks-star { width: 36px; height: 36px; } /* ============================================================= Section 8 — Save the date closer ============================================================= */ /* Sprint 12.3 — section background removed; body gradient already ends at --bg-dusk here, so the closer sits on the unified background. */ .section-8 .display { color: var(--on-dark); } .section-8 .script--date { color: var(--on-dark); } /* Sprint 22 — raise attribution contrast against the watercolour section-8. Adds weight + subtle shadow + chip so it is legible on light or dark plates. */ .made-with { margin-top: clamp(1.2rem, 5vw, 2.4rem); font-family: var(--font-sans); font-size: 0.74rem; letter-spacing: 0.14em; text-transform: uppercase; font-weight: 600; } .made-with a { color: var(--on-dark); text-decoration: none; padding: 0.4em 0.9em; border-radius: 999px; background: rgba(60, 40, 20, 0.32); backdrop-filter: blur(4px); -webkit-backdrop-filter: blur(4px); border: 1px solid rgba(248, 241, 226, 0.22); text-shadow: 0 1px 2px rgba(40, 25, 10, 0.45); transition: background 220ms var(--ease-out), color 220ms var(--ease-out); } .made-with a:hover, .made-with a:focus-visible { color: var(--on-dark); background: rgba(var(--dark-band), 0.6); outline: none; } /* ============================================================= FLOATING DECORATIONS (parallax + drift) The decor-field is fixed; each decoration drifts on its own loop. cinema.js also nudges --scroll on .decor for a gentle parallax. ============================================================= */ .decor-field { position: fixed; inset: 0; pointer-events: none; /* Sprint 22 — keep floaters BEHIND form fields, countdown digits, headlines, and the CTA. Previously z-index:3 put bees inside the RSVP email box and over countdown numbers, breaking the storybook spell and confusing guests. The decorations now sit in the page backdrop layer; sections still receive parallax via --scroll. */ z-index: 0; overflow: hidden; } /* Belt-and-suspenders — even if a stray decor escapes the field, hide any floating sticker inside an RSVP section or input. */ .section-7 .decor, .rsvp .decor, .countdown .decor, .cta-card .decor { display: none !important; } .decor { position: absolute; left: var(--x); top: var(--y); width: 30px; height: 30px; opacity: 0.65; /* Parallax offset (px units — required) composes with the drift keyframe. */ transform: translateY(calc(var(--scroll) * 0.04)); animation: drift var(--dur, 14s) var(--ease-soft) var(--delay, 0s) infinite; animation-play-state: paused; background-repeat: no-repeat; background-position: center; background-size: contain; } :where(body.uv-page-revealed) .decor { animation-play-state: running; } @keyframes drift { 0%, 100% { translate: 0 0; rotate: 0deg; } 50% { translate: 10px -16px; rotate: 4deg; } } .decor--bee { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 40 40'%3E%3Cellipse cx='22' cy='22' rx='9' ry='7' fill='%23e8a93d'/%3E%3Crect x='17' y='15' width='3' height='14' fill='%235c4838' transform='rotate(12 18 22)'/%3E%3Crect x='23' y='15' width='3' height='14' fill='%235c4838' transform='rotate(12 24 22)'/%3E%3Cellipse cx='14' cy='16' rx='7' ry='4' fill='%23ffffff' opacity='0.85' transform='rotate(-25 14 16)'/%3E%3C/svg%3E"); } .decor--balloon { width: 26px; height: 38px; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 26 38'%3E%3Cellipse cx='13' cy='13' rx='11' ry='13' fill='%23d4a8a8'/%3E%3Cpath d='M13 26 L13 37' stroke='%237d8fa3' stroke-width='1'/%3E%3C/svg%3E"); } .decor--leaf { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 40 40'%3E%3Cpath d='M8 32 C8 18 20 8 32 8 C32 22 20 32 8 32 Z' fill='%238db04a' opacity='0.9'/%3E%3Cpath d='M10 30 L30 10' stroke='%236b8e3a' stroke-width='1.4'/%3E%3C/svg%3E"); } .decor--star { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 2l2.6 6.4L21 9.2l-4.8 4.3L17.6 21 12 17.3 6.4 21l1.4-7.5L3 9.2l6.4-.8Z' fill='%23d4a76a'/%3E%3C/svg%3E"); } /* ============================================================= Reduced motion: honor the user's preference. ============================================================= */ @media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } .section { opacity: 1; transform: none; transition: none; } .section.is-revealed .reveal-child { animation: none; } .decor { animation: none; transform: none; } .scroll-cue .chev { animation: none; } .countdown__num.is-tick { animation: none; } } /* ============================================================= Desktop refinements ============================================================= */ @media (min-width: 768px) { .signpost__img { width: 360px; } .plaque__img { width: 420px; } .section__art--hero { width: min(60vw, 620px); } } /* ============================================================ Bearly Hero Photo Slot (Sprint 9.1) Square with soft rounded corners, slightly rotated Polaroid- style, placed in Section 1's hero above the copy block. Clamp ensures it looks right from 320px phones to large screens. ============================================================ */ /* The shared shared/uv-hero-photo.css sets .uv-hero-photo { position: relative } and loads AFTER this file in index.html. Same-specificity rules later in the cascade win, so we override the position here. Sprint 16.2 */ .bw-hero-photo { position: absolute !important; /* Polaroid proportions: wider than square to allow for a caption strip feel */ width: clamp(180px, 30vw, 260px); height: clamp(180px, 30vw, 260px); border-radius: 6px; /* Whimsical Polaroid-style tilt, anchored INSIDE the centered hero canvas. The canvas (.section__art--hero) is centered and capped at 560px wide, so its right edge sits at ~50% + 280px. translate(-50%) centers the polaroid on the section axis; the +150px shift (half-canvas 280 − half-polaroid 130) lands its right edge just inside the canvas's right edge, lower-right. Sprint 16's translateX(20px) was viewport-relative and drifted right of the canvas. (Sprint 16.1 — B7) */ transform: translate(-50%, 0) translateX(150px) rotate(-2deg); /* Polaroid-edge border */ border: 6px solid #fffdf5; box-shadow: 0 4px 18px rgba(74, 93, 112, 0.22), 0 2px 6px rgba(74, 93, 112, 0.12); background: var(--bg-cream, #f4ead3); color: var(--text-soft, #7d8fa3); /* drives dashed border + icon tint */ /* Anchored within the centered hero canvas, in its lower-right, above copy */ left: 50%; right: auto; bottom: clamp(120px, 22vh, 200px); z-index: 4; overflow: hidden; } /* On touch / mobile the section-1 canvas is .section-1 .section__art--hero = min(78vw, 420px), centered. So the gutter between section edge and canvas edge = (100vw - 78vw) / 2 = 11vw (capped). The polaroid is positioned relative to the SECTION (its offsetParent), so to land it 12px inside the canvas's right edge we need right = section gutter + 12px. Sprint 16.2. Also bound width so the polaroid never exceeds half the canvas. */ @media (max-width: 480px) { .bw-hero-photo { width: clamp(140px, 32vw, 200px); height: clamp(140px, 32vw, 200px); left: auto; right: calc((100vw - min(78vw, 420px)) / 2 + 12px); bottom: clamp(110px, 18vh, 170px); transform: rotate(-2deg); } } /* ============================================================ Sprint 12.1 — Cinematic foundations (mobile) P1: sections flow at content height instead of reserving a full viewport (kills the empty pink gaps). Hero keeps 100svh so the opening still fills the phone. P3: fixed background is janky on iOS Safari — switch to scroll. ============================================================ */ @media (max-width: 640px) { .section { min-height: auto; padding-block: clamp(2.5rem, 10vw, 4rem); } .section:first-of-type { min-height: 100svh; } body { background-attachment: scroll; } } /* Empty state */ .bw-hero-photo .uv-hero-photo__empty { border-radius: 4px; font-family: var(--font-sans, 'General Sans', system-ui, sans-serif); } /* Edit / menu inherit border-radius */ .bw-hero-photo .uv-hero-photo__edit-btn, .bw-hero-photo .uv-hero-photo__menu { border-radius: 4px; } /* Reduced-motion: drop the decorative tilt but keep the positional shift that anchors the photo inside the centered canvas. */ @media (prefers-reduced-motion: reduce) { .bw-hero-photo { transform: translate(-50%, 0) translateX(calc(min(47vw, 280px) - 130px)); } } @media (prefers-reduced-motion: reduce) and (min-width: 768px) { .bw-hero-photo { transform: translate(-50%, 0) translateX(calc(min(30vw, 310px) - 130px)); } } /* ============================================================= Bearly Wait — layered hero + decorative art sprites ============================================================= */ /* Section 1 hero — layered watercolor stack. Order back→front: 1. cloud backdrop (drifts gently, behind everything) 2. balloon cluster (top-right, gentle float) 3. teddy bear (bottom, anchored to lower-center) 4. wordmark + scroll cue on top ============================================================= */ .section-1 { /* Hero needs more vertical breathing room for the layered art. */ padding-block: clamp(2rem, 8vw, 5rem); align-items: flex-start; } .section-1__copy { /* Push copy down so the bear is visible beneath. */ margin-top: clamp(1rem, 6vw, 3rem); position: relative; z-index: 4; } /* Clouds — large, soft, drifting backdrop. */ .bw-cloud { position: absolute; pointer-events: none; user-select: none; z-index: 0; opacity: 0.7; filter: drop-shadow(0 8px 18px rgba(92, 64, 48, 0.08)); } .bw-cloud--lg { top: 6%; left: 50%; transform: translateX(-50%); width: min(110vw, 760px); max-height: 70%; object-fit: contain; animation: bwCloudDrift 28s var(--ease-soft) -4s infinite; animation-play-state: paused; } :where(body.uv-page-revealed) .bw-cloud--lg { animation-play-state: running; } @keyframes bwCloudDrift { 0%, 100% { transform: translateX(calc(-50% - 10px)); } 50% { transform: translateX(calc(-50% + 10px)); } } /* Balloon cluster — top right, floats up + down softly. */ .bw-balloons { position: absolute; pointer-events: none; user-select: none; } .bw-balloons--hero { top: clamp(4%, 6vh, 8%); right: clamp(-2%, 2vw, 4%); width: clamp(140px, 38vw, 280px); z-index: 2; filter: drop-shadow(0 10px 22px rgba(92, 64, 48, 0.18)); animation: bwBalloonFloat 6s var(--ease-soft) infinite; animation-play-state: paused; } :where(body.uv-page-revealed) .bw-balloons--hero { animation-play-state: running; } @keyframes bwBalloonFloat { 0%, 100% { transform: translateY(0) rotate(-1.5deg); } 50% { transform: translateY(-12px) rotate(1.5deg); } } /* Teddy bear hero — anchored bottom-center. */ .bw-bear { position: absolute; pointer-events: none; user-select: none; } .bw-bear--hero { bottom: clamp(-2%, 1vh, 4%); left: 50%; transform: translateX(-50%); width: clamp(220px, 64vw, 420px); z-index: 1; filter: drop-shadow(0 14px 28px rgba(92, 64, 48, 0.22)); } /* Tablet/desktop: the bear was sized for a tall phone viewport. On wide short viewports (iPad landscape 1180x820, desktop 1440x900) the bear at clamp → 420px wide sits right behind the wordmark. Shrink it and anchor it lower so there is clear separation between art and copy. See: customer screenshot 2026-06-23, IMG_0423. */ @media (min-width: 601px) { .bw-bear--hero { width: min(46vh, 360px); bottom: clamp(-3%, -0.5vh, 1%); } } @media (min-width: 1024px) { .bw-bear--hero { width: min(40vh, 340px); } } /* Short-viewport guard — if the viewport is shorter than ~900px (iPad landscape, laptops) the bear must shrink AND drop a touch further so the transparent PNG canvas above the bear's ears does not graze the wordmark's baseline. Verified clear on iPad landscape 1180x820. */ @media (min-width: 601px) and (max-height: 900px) { .bw-bear--hero { width: min(34vh, 280px); bottom: clamp(-6%, -2vh, -2%); } } /* Wordmark — three-line stacked typography. The display layer uses the mixed serif/script style seen in classic invitations. */ .bw-wordmark { display: flex; flex-direction: column; align-items: center; gap: clamp(0.1rem, 0.4vw, 0.3rem); line-height: 0.9; } .bw-wordmark__line1, .bw-wordmark__wait { font-family: var(--font-display); font-style: italic; font-weight: 400; color: var(--text-deep); text-transform: lowercase; letter-spacing: 0.02em; } .bw-wordmark__line1 { font-size: clamp(1.6rem, 7vw, 2.6rem); } .bw-wordmark__wait { font-size: clamp(2.4rem, 11vw, 4.2rem); font-weight: 500; } /* "Bearly" — the script flourish that ties the wordmark together. Uses Allura (Google) for a heavier, swashy calligraphy feel with a tall capital B — matches the reference card the customer shared. */ .bw-wordmark__bearly { font-family: 'Allura', var(--font-script); font-weight: 400; font-style: normal; /* Allura is already a script italic by design */ color: var(--text-deep); /* match the reference: ink, not honey */ font-size: clamp(4.6rem, 22vw, 9rem); line-height: 0.92; letter-spacing: 0; margin: clamp(-0.4rem, -1vw, -0.2rem) 0; /* Subtle drop shadow gives the script a hand-painted feel. */ text-shadow: 0 2px 14px rgba(255, 248, 235, 0.65); } /* Section 2 — bear with bow centerpiece. */ .section-2 { position: relative; } .bw-bear--bow { position: relative; width: clamp(200px, 56vw, 360px); margin: 0 auto clamp(0.6rem, 2vw, 1.2rem); filter: drop-shadow(0 12px 26px rgba(92, 64, 48, 0.18)); z-index: 1; } .section-2__copy { margin-top: 0; } /* Section 3 — single tilted balloon as side decoration. */ .section-3 { position: relative; } .bw-balloon-tilt { position: absolute; top: 8%; right: clamp(-4%, 2vw, 6%); width: clamp(80px, 22vw, 160px); transform: rotate(-8deg); pointer-events: none; filter: drop-shadow(0 10px 20px rgba(92, 64, 48, 0.16)); opacity: 0.92; z-index: 0; } /* Section 6 — soft sprinkles backdrop behind the books copy. */ .section-6 { position: relative; } .bw-sprinkles { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; pointer-events: none; opacity: 0.35; z-index: 0; } /* Section 8 — balloon cluster floats in for the closer. */ .bw-balloons--closer { top: clamp(-2%, 0vh, 4%); right: clamp(-6%, -2vw, 0%); width: clamp(130px, 34vw, 240px); opacity: 0.88; z-index: 0; filter: drop-shadow(0 12px 24px rgba(92, 64, 48, 0.18)); } /* ---------- Decor sprite art ---------- */ /* Watercolor-style background SVGs for the floating decor field. Coloring follows --accent-honey tint via opacity so each palette tints the decoration without re-drawing the sprite. */ .decor--balloon { width: 22px; height: 30px; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 22 30'%3E%3Cellipse cx='11' cy='11' rx='9' ry='10' fill='%23d9a679'/%3E%3Cellipse cx='8' cy='8' rx='3' ry='4' fill='%23ffffff' opacity='0.45'/%3E%3Cpath d='M11 21 L11 29' stroke='%238a6f5a' stroke-width='1.2' stroke-linecap='round'/%3E%3C/svg%3E"); opacity: 0.55; } .decor--cloud { width: 38px; height: 22px; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 38 22'%3E%3Cellipse cx='12' cy='14' rx='10' ry='7' fill='%23ffffff'/%3E%3Cellipse cx='22' cy='10' rx='9' ry='7' fill='%23ffffff'/%3E%3Cellipse cx='30' cy='14' rx='6' ry='5' fill='%23ffffff'/%3E%3C/svg%3E"); opacity: 0.7; } .decor--heart { width: 22px; height: 20px; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 22 20'%3E%3Cpath d='M11 18 C 4 13 1 9 1 6 C 1 3 3 1 6 1 C 8 1 10 2 11 4 C 12 2 14 1 16 1 C 19 1 21 3 21 6 C 21 9 18 13 11 18 Z' fill='%23e8c4a8'/%3E%3C/svg%3E"); opacity: 0.6; } /* Keep .decor--star (already defined above) but tint the fill via accent-honey indirectly — the existing SVG uses a baked color, so override with our own. */ .decor--star { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 2l2.6 6.4L21 9.2l-4.8 4.3L17.6 21 12 17.3 6.4 21l1.4-7.5L3 9.2l6.4-.8Z' fill='%23d9a679'/%3E%3C/svg%3E"); opacity: 0.55; } /* ---------- Hide legacy HAW polaroid hero photo slot ---------- The hero is now a layered watercolor stack; no centered canvas exists for the photo to anchor against. Keep the slot in DOM (shared module relies on it) but hide it visually for Bearly. */ .bw-hero-photo { display: none !important; } /* ---------- Refinements ---------- */ /* Pull the section 1 copy lower so it sits between the balloons (top) and the bear (bottom). */ @media (max-width: 640px) { .section-1__copy { margin-top: clamp(8vh, 14vh, 22vh); } .bw-bear--hero { width: clamp(220px, 70vw, 360px); } } @media (min-width: 641px) { .section-1__copy { margin-top: clamp(4rem, 10vh, 8rem); } } /* Cap the subtitle script for visual balance — "a baby shower". */ .section-1 .subtitle { font-family: var(--font-script); font-size: clamp(1.4rem, 6vw, 2rem); color: var(--accent-honey); font-style: italic; } /* Section 2 invitation card — bear-with-bow sits above the copy. */ .section-2 { flex-direction: column; } .section-2__copy { z-index: 2; } /* Section 3 — give the address line extra room since the balloon intrudes from the top-right on narrow viewports. */ .section-3__copy { padding-top: clamp(2rem, 8vw, 3rem); } /* ============================================================= Sprint 24 — Lifelike bears, motion graphics, and envelope theme ============================================================= */ /* ---------- Envelope intro: bear-themed palette tokens ---------- The shared component lifts colors from these vars. They mirror the host's --paper / --text-deep / --accent-honey palette so the envelope feels native to whatever colorway is active. */ .bw-envelope-intro { --uv-env-bg: var(--paper, #fbf5ea); --uv-env-ink: var(--text-deep, #5c4030); --uv-env-accent: var(--accent-honey, #d9a679); --uv-env-glow: color-mix(in srgb, var(--accent-honey, #d9a679) 50%, transparent); } /* ---------- Hero bear: lifelike micro-motion ---------- The waving bear breathes in (subtle scale) and the waving paw has a friendly back-and-forth. Pure transform — composited on GPU. */ .bw-bear--hero { transform-origin: 50% 92%; animation: bwBearBreathe 4.6s ease-in-out infinite; } @keyframes bwBearBreathe { 0%, 100% { transform: translateX(-50%) scale(1) rotate(0deg); } 50% { transform: translateX(-50%) scale(1.018) rotate(-0.6deg); } } /* The hero balloon (top-right cluster) sways with a wider arc + tilt. */ .bw-balloons--hero { transform-origin: 50% 100%; } @keyframes bwBalloonFloatRich { 0% { transform: translateY(0) rotate(-1.5deg); } 25% { transform: translateY(-9px) rotate(0.5deg); } 50% { transform: translateY(-14px) rotate(2deg); } 75% { transform: translateY(-7px) rotate(0.5deg); } 100% { transform: translateY(0) rotate(-1.5deg); } } :where(body.uv-page-revealed) .bw-balloons--hero { animation: bwBalloonFloatRich 7s ease-in-out infinite; } /* A second tilted balloon on the opposite side of the hero adds depth. */ .bw-balloon-tilt--hero { position: absolute; top: 18%; left: clamp(-2%, 1vw, 4%); width: clamp(60px, 16vw, 110px); transform: rotate(8deg); filter: drop-shadow(0 10px 18px rgba(92, 64, 48, 0.18)); opacity: 0.85; z-index: 1; animation: bwBalloonTiltSway 5.4s ease-in-out infinite; } @keyframes bwBalloonTiltSway { 0%, 100% { transform: translateY(0) rotate(8deg); } 50% { transform: translateY(-8px) rotate(11deg); } } /* Small cloud peeks behind, drifts horizontally. */ .bw-cloud--sm { position: absolute; top: 38%; left: -8%; width: clamp(120px, 28vw, 200px); opacity: 0.5; z-index: 0; animation: bwCloudDriftSm 22s linear infinite; } @keyframes bwCloudDriftSm { 0% { transform: translateX(0); } 100% { transform: translateX(12vw); } } /* ---------- Section 2: bow bear — gentle nuzzle + arc backdrop ---------- */ .bw-bear--bow { /* The bear is now hugging a balloon — give it the same breathing motion */ animation: bwBearBreatheBow 4.4s ease-in-out infinite; transform-origin: 50% 92%; } @keyframes bwBearBreatheBow { 0%, 100% { transform: scale(1) rotate(0deg); } 50% { transform: scale(1.022) rotate(0.8deg); } } /* Faint arc glow sits behind the bow bear for editorial framing. */ .bw-arc--top { position: absolute; top: clamp(2%, 5vh, 8%); left: 50%; transform: translateX(-50%); width: min(72vw, 420px); aspect-ratio: 1 / 1; border-radius: 50%; background: radial-gradient(closest-side, color-mix(in srgb, var(--accent-honey) 22%, transparent) 0%, transparent 70%); filter: blur(8px); z-index: 0; pointer-events: none; animation: bwArcPulse 5.6s ease-in-out infinite; } @keyframes bwArcPulse { 0%, 100% { opacity: 0.7; transform: translateX(-50%) scale(1); } 50% { opacity: 1; transform: translateX(-50%) scale(1.04); } } /* ---------- Section 3: a tiny peeking bear in the corner ---------- */ .bw-bear--peek { position: absolute; bottom: clamp(-2%, 0vh, 3%); left: clamp(-4%, -1vw, 2%); width: clamp(90px, 24vw, 160px); transform: rotate(-6deg); opacity: 0.95; filter: drop-shadow(0 8px 16px rgba(92, 64, 48, 0.16)); z-index: 1; pointer-events: none; animation: bwPeekBob 4.8s ease-in-out infinite; } @keyframes bwPeekBob { 0%, 100% { transform: rotate(-6deg) translateY(0); } 50% { transform: rotate(-4deg) translateY(-6px); } } /* ---------- Sparkle field: ambient cream-gold dots ---------- */ .bw-sparkle-field { position: absolute; inset: 0; pointer-events: none; z-index: 0; overflow: hidden; } .bw-sparkle { position: absolute; top: var(--y); left: var(--x); width: 6px; height: 6px; border-radius: 50%; background: radial-gradient(circle, color-mix(in srgb, #fff 92%, transparent) 0%, color-mix(in srgb, var(--accent-honey) 70%, transparent) 50%, transparent 70%); box-shadow: 0 0 8px color-mix(in srgb, var(--accent-honey) 35%, transparent); opacity: 0; animation: bwSparkleTwinkle var(--dur, 6s) ease-in-out infinite; animation-delay: var(--delay, 0s); } @keyframes bwSparkleTwinkle { 0%, 100% { opacity: 0; transform: scale(0.6); } 20% { opacity: 0.9; transform: scale(1); } 50% { opacity: 0.5; transform: scale(1.2); } 80% { opacity: 0.85; transform: scale(0.95); } } /* ---------- Section 6: petal rain drifting down ---------- */ .bw-petal-rain { position: absolute; inset: 0; pointer-events: none; z-index: 0; overflow: hidden; } .bw-petal-rain i { position: absolute; top: -8%; left: var(--x, 50%); width: 14px; height: 18px; background: url("/templates/bearly-wait/frames/bearly_petal.webp?v=20260623s24") center/contain no-repeat; opacity: 0; transform: rotate(var(--r, 0deg)); animation: bwPetalFall 7.2s linear infinite; animation-delay: var(--d, 0s); } @keyframes bwPetalFall { 0% { opacity: 0; transform: translateY(0) rotate(var(--r, 0deg)); } 10% { opacity: 0.85; } 85% { opacity: 0.7; } 100% { opacity: 0; transform: translateY(120%) rotate(calc(var(--r, 0deg) + 90deg)); } } /* ---------- Section 8: confetti burst on save-the-date ---------- */ .bw-confetti { position: absolute; inset: 0; pointer-events: none; z-index: 0; overflow: hidden; } .bw-confetti i { position: absolute; top: -6%; left: var(--x, 50%); width: 10px; height: 6px; background: var(--c, var(--accent-honey)); border-radius: 2px; opacity: 0; animation: bwConfetti 5.4s cubic-bezier(.25,.6,.4,1) infinite; animation-delay: var(--d, 0s); } @keyframes bwConfetti { 0% { opacity: 0; transform: translateY(0) rotate(0deg); } 8% { opacity: 1; } 60% { opacity: 1; transform: translateY(60vh) rotate(420deg); } 100% { opacity: 0; transform: translateY(100vh) rotate(720deg); } } /* Define --bw-accent / --bw-accent-soft on root so confetti can read it. These mirror the palette accent for whichever colorway is active. */ :root { --bw-accent: var(--accent-honey, #d9a679); --bw-accent-soft: color-mix(in srgb, var(--accent-honey, #d9a679) 60%, #fff 30%); } /* ---------- Section reveal: scale the bear lift on intersect ---------- */ .section-2 .bw-bear--bow, .section-3 .bw-bear--peek { opacity: 0; transform: translateY(16px) scale(0.96); transition: opacity 900ms cubic-bezier(.2,.7,.2,1), transform 900ms cubic-bezier(.2,.7,.2,1); } .section-2.is-revealed .bw-bear--bow { opacity: 1; transform: translateY(0) scale(1); } .section-3.is-revealed .bw-bear--peek { opacity: 0.95; transform: translateY(0) rotate(-6deg); } /* Re-apply the breathing once revealed (override the static transform). */ .section-2.is-revealed .bw-bear--bow { animation: bwBearBreatheBow 4.4s ease-in-out 900ms infinite; } .section-3.is-revealed .bw-bear--peek { animation: bwPeekBob 4.8s ease-in-out 900ms infinite; } /* Reduced motion: kill ambient animations, keep transitions short. */ @media (prefers-reduced-motion: reduce) { .bw-bear--hero, .bw-bear--bow, .bw-bear--peek, .bw-balloon-tilt--hero, .bw-cloud--sm, .bw-balloons--hero, .bw-sparkle, .bw-petal-rain i, .bw-confetti i, .bw-arc--top { animation: none !important; } } /* ============================================================= Sprint 24.2 — Palette-aware bear tinting (delicate) The bear is now a delicate watercolor with cream belly + thin brown line work. Aggressive filters muddy the cream patch and line work, so we keep shifts whisper-light (3-8%) — the bear still reads tan on every palette but feels native to the bg. ============================================================= */ .bw-bear { filter: none; transition: filter 420ms var(--ease-out); } :root[data-palette="boy"] .bw-bear { filter: saturate(0.88) hue-rotate(-4deg); } :root[data-palette="girl"] .bw-bear { filter: saturate(1.04) hue-rotate(-6deg); } :root[data-palette="sage"] .bw-bear { filter: saturate(0.95) hue-rotate(6deg); } :root[data-palette="mocha"] .bw-bear { filter: saturate(1.02) brightness(0.94); } :root[data-palette="midnight"] .bw-bear { filter: saturate(0.72) hue-rotate(-10deg) brightness(0.94); } /* ============================================================= Sprint 24.3 — Minimal hero: wordmark only The hero section now shows only "we can bearly wait" — no eyebrow, subtitle, or scroll cue. We keep those nodes in the DOM (populate.js binds to them) and hide them visually. We also elevate the "bearly" script flourish so the contrast between the italic serif lines and the script word feels more intentional and editorial. ============================================================= */ .section-1 .section-1__copy .bw-hero-hidden { position: absolute !important; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; opacity: 0; pointer-events: none; } /* Rebalance the hero copy spacing now that only the wordmark remains. */ .section-1 .section-1__copy { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 0; } /* Make the wordmark contrast more editorial: tighter italic serif lines, bolder script flourish on "bearly" with a hand-painted underline. */ .section-1 .bw-wordmark { gap: clamp(0.05rem, 0.3vw, 0.25rem); } .section-1 .bw-wordmark__line1, .section-1 .bw-wordmark__wait { /* Match the reference card: refined serif for the upright lines. Cormorant Garamond is already loaded; the reference uses an upright (not italic) variant so it reads as a clean editorial counterpoint to the swashy script in the middle. */ font-family: 'Cormorant Garamond', 'Cormorant', Georgia, serif; font-style: normal; letter-spacing: 0.01em; opacity: 0.95; text-transform: none; /* keep "We can" / "wait" as written */ } .section-1 .bw-wordmark__line1 { font-size: clamp(1.6rem, 7vw, 2.6rem); font-weight: 500; } .section-1 .bw-wordmark__wait { font-size: clamp(1.8rem, 7.5vw, 2.8rem); font-weight: 500; } .section-1 .bw-wordmark__bearly { font-family: 'Allura', var(--font-script); font-style: normal; font-size: clamp(5rem, 24vw, 10rem); color: var(--text-deep); margin: clamp(-0.5rem, -1.4vw, -0.3rem) 0; position: relative; display: inline-block; line-height: 0.95; /* Soft watercolor halo behind the script word. */ text-shadow: 0 1px 0 rgba(255, 255, 255, 0.55), 0 6px 24px rgba(92, 64, 48, 0.12), 0 2px 14px rgba(255, 248, 235, 0.7); } /* Brush underline removed — the new Allura script with capital B is visually strong enough on its own; the underline competed with the swash on "y" descender. If we want it back, scope it carefully. */ .section-1 .bw-wordmark__bearly::after { content: none; }