/* ============================================================= Hundred Acre Wood — 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) ---- Future color swaps change values here only — DO NOT rename vars. Default palette: honey (applied when no data-palette attr is set). HAW uses: --bg-sky (top gradient), --bg-cream (mid/card bg), --bg-mist (soft mid), --bg-dusk (deep text / bottom), --text-deep, --text-soft, --accent-honey (CTA tint), --accent-rose (soft accent), --ink (body text). 6-palette system wired via UV.palette (populate.js + uv-palette.js). Set data-palette="honey|meadow|lavender|sunset|mint|storybook" on (or inline CSS vars for the custom-hex path). ---------------------------------------------------------------- */ /* ── 1. honey (default — matches original single-palette look) ──── */ :root[data-palette="honey"], :root:not([data-palette]) { --bg-sky: #bcd4e0; --bg-cream: #f4ead3; --bg-mist: #e8f0f4; --bg-dusk: #4a5d70; --text-deep: #4a5d70; --text-soft: #7d8fa3; --accent-honey:#d4a76a; --accent-rose: #d4a8a8; --ink: #5c4838; --on-dark: #f4ead3; --on-dark-soft:#e0d5b8; --dark-band: 74, 93, 112; } /* ── 2. meadow ─────────────────────────────────────────────────── */ :root[data-palette="meadow"] { --bg-sky: #c6d9b8; --bg-cream: #e3ecd6; --bg-mist: #edf4e6; --bg-dusk: #2a3a20; --text-deep: #2a3a20; --text-soft: #5a7048; --accent-honey:#7a945a; --accent-rose: #a8c090; --ink: #2a3a20; --on-dark: #e3ecd6; --on-dark-soft:#c8d6b5; --dark-band: 42, 58, 32; } /* ── 3. lavender ───────────────────────────────────────────────── */ :root[data-palette="lavender"] { --bg-sky: #cec3e2; --bg-cream: #e7dff0; --bg-mist: #f1ecf8; --bg-dusk: #2a1e3a; --text-deep: #2a1e3a; --text-soft: #6b5890; --accent-honey:#8b6db5; --accent-rose: #c0aad8; --ink: #2a1e3a; --on-dark: #e7dff0; --on-dark-soft:#c8b8e0; --dark-band: 42, 30, 58; } /* ── 4. sunset ─────────────────────────────────────────────────── */ :root[data-palette="sunset"] { --bg-sky: #f5c8a0; --bg-cream: #fde2c8; --bg-mist: #fef0e4; --bg-dusk: #3a1f10; --text-deep: #3a1f10; --text-soft: #9a5030; --accent-honey:#d97a4a; --accent-rose: #f0b090; --ink: #3a1f10; --on-dark: #fde2c8; --on-dark-soft:#f2c8a4; --dark-band: 58, 31, 16; } /* ── 5. mint ───────────────────────────────────────────────────── */ :root[data-palette="mint"] { --bg-sky: #a8d8c0; --bg-cream: #d8ece2; --bg-mist: #eaf5ef; --bg-dusk: #16382b; --text-deep: #16382b; --text-soft: #3a7a5e; --accent-honey:#3f8a6e; --accent-rose: #88c8aa; --ink: #16382b; --on-dark: #d8ece2; --on-dark-soft:#b5d8c3; --dark-band: 22, 56, 43; } /* ── 6. storybook ──────────────────────────────────────────────── */ :root[data-palette="storybook"] { --bg-sky: #d8c4a8; --bg-cream: #f0e4cf; --bg-mist: #f7f0e4; --bg-dusk: #3a2a18; --text-deep: #3a2a18; --text-soft: #7a5c38; --accent-honey:#a07338; --accent-rose: #d0b080; --ink: #3a2a18; --on-dark: #f0e4cf; --on-dark-soft:#d8c4a0; --dark-band: 58, 42, 24; } /* ── 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: '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: 28%; left: 49%; transform: translate(-50%, -50%) rotate(-3deg); width: 64%; 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); } } /* ============================================================ HAW 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 */ .haw-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) { .haw-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 */ .haw-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 */ .haw-hero-photo .uv-hero-photo__edit-btn, .haw-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) { .haw-hero-photo { transform: translate(-50%, 0) translateX(calc(min(47vw, 280px) - 130px)); } } @media (prefers-reduced-motion: reduce) and (min-width: 768px) { .haw-hero-photo { transform: translate(-50%, 0) translateX(calc(min(30vw, 310px) - 130px)); } } /* ============================================================= Sprint 24 — Envelope intro palette bridge (HAW) ============================================================= */ .haw-envelope-intro { --uv-env-bg: var(--bg-cream, #f4ead3); --uv-env-ink: var(--text-deep, var(--ink, #5c4838)); --uv-env-accent: var(--accent-honey, #d4a76a); --uv-env-glow: color-mix(in srgb, var(--accent-honey, #d4a76a) 35%, transparent); }