/* ============================================================ Cinematic beach film — backdrop, hero, handwriting, nav ============================================================ */ :root { --ink: #f7efe2; --ink-dim: #d9cbb5; --gold: #ffcf87; --gold-deep: #e59a52; /* One text colour throughout: warm white (gold only as the palest tint), with a fixed, very soft wide shadow that lifts it off the footage without a visible shadow shape. It never changes while scrolling, so it's painted once. */ --text-hi: #fffaf2; --text-dim: #f6eee3; --text-gold: #ffe9c7; --glyph-halo: 0 0 2px rgba(14,8,28,0.55), 0 1px 10px rgba(14,8,28,0.45), 0 2px 44px rgba(14,8,28,0.5); --script: "Great Vibes", "Noto Sans Tamil", "Noto Sans Telugu", cursive; --display: "Cormorant Garamond", "Noto Sans Tamil", "Noto Sans Telugu", Georgia, serif; --body: "Noto Sans Tamil", "Noto Sans Telugu", -apple-system, "Segoe UI", sans-serif; } * { margin: 0; padding: 0; box-sizing: border-box; } html { scroll-behavior: smooth; background: #0a0e2a; } /* overflow-x: clip, not hidden — on phones `hidden` can make a second scroll container, so the first swipe scrolls the wrong thing ("had to scroll twice") */ body { background: #0a0e2a; color: var(--ink); font-family: var(--body); line-height: 1.6; overflow-x: clip; } @supports not (overflow-x: clip) { body { overflow-x: hidden; } } [hidden] { display: none !important; } a { color: var(--text-gold); text-decoration: none; } /* ---------- Fixed film backdrop (stacked scene layers) ---------- */ .backdrop { /* as tall as the screen with the browser bars HIDDEN (lvh), so while a phone's address bar slides in/out the film always reaches the bottom — `inset: 0` resized only after the bar's animation and showed the page colour */ position: fixed; top: 0; left: 0; right: 0; height: 100vh; height: 100lvh; z-index: 0; overflow: hidden; } #scene-stack { position: absolute; inset: 0; } .scene-layer { position: absolute; inset: 0; opacity: 0; will-change: opacity; } .scene-layer video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; } .scene-layer .scene-canvas { position: absolute; inset: 0; width: 100%; height: 100%; display: block; } /* phones: js/frames.js */ .scene-scrim { position: absolute; inset: 0; z-index: 50; opacity: 0.34; pointer-events: none; background: linear-gradient(to bottom, rgba(10,14,42,0.55) 0%, rgba(10,14,42,0.15) 35%, rgba(10,14,42,0.35) 70%, rgba(10,14,42,0.75) 100%); } .scene-warm { position: absolute; inset: 0; z-index: 51; opacity: 0; pointer-events: none; background: radial-gradient(120% 80% at 50% 100%, rgba(255,150,60,0.9) 0%, rgba(229,120,70,0.55) 30%, rgba(120,60,80,0.2) 55%, transparent 75%); } main { position: relative; z-index: 1; } /* ---------- Scene layout: each section pins its content while it scrubs ---------- */ .scene { position: relative; } .scene-inner { position: sticky; top: 0; min-height: 100vh; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; padding: 4rem 1.3rem; gap: 0; text-shadow: var(--glyph-halo); } /* Equal heights → uniform scrub speed & even crossfades across scenes. */ .scene--hero { min-height: 240vh; } /* clip 1 (10 s) plays across it at the same pace as the other clips */ .scene--story { min-height: 155vh; } .scene--photos { min-height: 100vh; } /* height comes from the photo column */ .scene--couple { min-height: 155vh; } .scene--finale { min-height: 230vh; } /* clip 5 push-in (~1.3 screens) + a still hold for the invitation */ /* ---------- Nav ---------- */ .site-nav { position: fixed; top: 0; right: 0; z-index: 20; padding: 0.8rem 1.1rem; } .lang-toggle { display: flex; gap: 0.3rem; } .lang-toggle button { background: rgba(0,0,0,0.28); color: var(--text-dim); border: 1px solid rgba(255,235,200,0.2); border-radius: 999px; padding: 0.25rem 0.7rem; font: inherit; font-size: 0.76rem; cursor: pointer; backdrop-filter: blur(4px); transition: all 0.2s ease; } .lang-toggle button.active { background: var(--gold); border-color: var(--gold); color: #201322; font-weight: 600; } /* ---------- Handwriting effect ---------- */ .handwrite { position: relative; display: inline-block; } .hw-ink { display: inline-block; clip-path: inset(-0.2em 100% -0.2em -0.35em); } .hw-nib { position: absolute; top: 50%; width: 10px; height: 10px; border-radius: 50%; transform: translate(-50%, -50%); opacity: 0; pointer-events: none; background: radial-gradient(circle, #fff 0%, var(--gold) 45%, transparent 75%); box-shadow: 0 0 14px 4px rgba(255, 207, 135, 0.7); } /* ---------- Hero ---------- */ .hero { min-height: 100vh; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; padding: 4rem 1.3rem; text-shadow: var(--glyph-halo); } .hero-invited { font-family: var(--display); font-style: italic; letter-spacing: 0.16em; text-transform: uppercase; font-size: clamp(0.72rem, 2.4vw, 0.95rem); color: var(--text-dim); margin-bottom: 0.8rem; } .hero-names { font-family: var(--script); font-weight: 400; line-height: 1; font-size: clamp(3.4rem, 15vw, 8rem); display: flex; align-items: baseline; gap: 0.35em; color: var(--text-hi); } .hero-name { color: var(--text-hi); } .hero-amp { color: var(--text-gold); font-size: 0.55em; } .hero-date { margin-top: 0.9rem; font-family: var(--display); letter-spacing: 0.2em; text-transform: uppercase; font-size: clamp(0.85rem, 2.6vw, 1.05rem); color: var(--text-gold); } .countdown-wrap { margin-top: 2.4rem; display: flex; flex-direction: column; align-items: center; gap: 0.7rem; } .countdown-pre { font-family: var(--display); font-style: italic; font-size: 1rem; color: var(--text-dim); } .countdown { display: flex; gap: clamp(0.6rem, 3vw, 1.5rem); } .cd-cell { display: flex; flex-direction: column; align-items: center; min-width: 58px; padding: 0.55rem 0.5rem; border: 1px solid rgba(255,235,200,0.22); border-radius: 12px; background: rgba(10,14,42,0.35); backdrop-filter: blur(6px); } .cd-val { font-family: var(--display); font-size: clamp(1.5rem, 4.5vw, 2.1rem); font-weight: 600; font-variant-numeric: tabular-nums; } .cd-lab { font-size: 0.66rem; letter-spacing: 0.1em; text-transform: uppercase; color: var(--text-dim); } .countdown-married { font-family: var(--script); font-size: 1.8rem; color: var(--text-gold); } .scroll-hint { margin-top: 2.8rem; display: flex; flex-direction: column; align-items: center; gap: 0.5rem; } .scroll-hint-line { width: 1px; height: 40px; background: linear-gradient(var(--gold), transparent); animation: hint 1.8s ease-in-out infinite; } .scroll-hint-label { font-size: 0.68rem; letter-spacing: 0.24em; text-transform: uppercase; color: var(--text-dim); } @keyframes hint { 0% { transform: scaleY(0); transform-origin: top; opacity: 0; } 40% { opacity: 1; } 100% { transform: scaleY(1) translateY(8px); opacity: 0; } } /* ---------- Button ---------- */ .btn { border: none; border-radius: 999px; cursor: pointer; font: inherit; font-weight: 600; letter-spacing: 0.05em; padding: 0.75rem 2.4rem; background: linear-gradient(120deg, var(--gold), var(--gold-deep)); color: #241322; transition: transform 0.15s ease, box-shadow 0.15s ease; } .btn:hover { transform: translateY(-1px); box-shadow: 0 8px 26px rgba(255,190,110,0.4); } @media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } .scroll-hint-line { animation: none; } } /* ---------- "Loading the film…" — only shown if someone scrolls into a clip before it has arrived ---------- */ .film-loading { position: fixed; left: 50%; bottom: max(16px, env(safe-area-inset-bottom)); transform: translateX(-50%); z-index: 60; display: flex; align-items: center; gap: 0.6rem; padding: 0.45rem 0.95rem; border-radius: 999px; background: rgba(12,10,22,0.62); backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); color: #fffaf2; font-family: var(--body); font-size: 0.78rem; letter-spacing: 0.02em; opacity: 0; transition: opacity 0.35s ease; pointer-events: none; } .film-loading.is-on { opacity: 1; } .film-loading-bar { width: 64px; height: 3px; border-radius: 3px; background: rgba(255,250,242,0.25); overflow: hidden; } .film-loading-bar i { display: block; height: 100%; width: 0; background: #ffe9c7; transition: width 0.3s ease; } /* Phones: no background blur (backdrop-filter) over the film — the film changes every frame, so a phone would re-blur what's behind these on every frame (expensive, especially on iPhones). A plain translucent fill instead. */ @media (pointer: coarse) { .lang-toggle button, .cd-cell, .film-loading { backdrop-filter: none; -webkit-backdrop-filter: none; } .lang-toggle button { background: rgba(10,12,28,0.55); } .cd-cell { background: rgba(10,14,42,0.55); } .film-loading { background: rgba(12,10,22,0.8); } }