/* ========================================================================== Radha Krishna wedding theme — Opening section -------------------------------------------------------------------------- 1. Fonts 2. Reset 3. Tokens <- timings + easings live here, edit these only 4. Composition <- static layout (the reference screenshot) 5. Responsive <- per-breakpoint composition values 6. Animation <- the intro sequence, layered on top of 4 7. Reduced motion ========================================================================== */ /* 1. Fonts ================================================================ */ /* Ananda is the theme's display face: every name, title and heading is set in it. IT HAS NO NUMERALS — a digit set in Ananda comes out as a missing glyph — so anything with a number in it (the date, the time, the address, the day badge) stays in Poppins. That is not a preference, it is the reason those rules are written the way they are. Norican stays behind it as the fallback: it was the theme's face before and it is still in the project, so a failed download is a change of voice rather than a change of layout. */ @font-face { font-family: "Ananda"; src: url("../fonts/Ananda%20Personal%20Use.ttf") format("truetype"); font-weight: 400; font-style: normal; font-display: swap; } @font-face { font-family: "Ananda"; src: url("../fonts/Ananda%20Black%20Personal%20Use.ttf") format("truetype"); font-weight: 700; font-style: normal; font-display: swap; } @font-face { font-family: "Norican"; src: url("../fonts/norican.woff2") format("woff2"); font-weight: 400; font-style: normal; font-display: swap; } @font-face { font-family: "Poppins"; src: url("../fonts/poppins-600.woff2") format("woff2"); font-weight: 600; font-style: normal; font-display: swap; } /* 2. Reset ================================================================ */ *, *::before, *::after { box-sizing: border-box; } html, body { margin: 0; padding: 0; width: 100%; min-width: 100%; } /* Only the root gets this. Setting overflow-x on as well is what produces two scrollbars: once the root is no longer `visible`, the body's overflow stops propagating to the viewport and the body becomes a second, independent scroll container of its own. One declaration here, on the element the viewport actually takes its overflow from, is enough — the sections clip their own bleeding decoration internally. */ html { overflow-x: hidden; } /* The sky belongs to the opening section, not to the page — otherwise it shows through anywhere the opening is not, which put a blue band above the invitation. The page itself is the invitation's paper. */ body { background: #f4f2e4; } .rk-opening { background: #d8f0fb; } img { display: block; max-width: none; -webkit-user-drag: none; user-select: none; } /* 3. Tokens =============================================================== */ .rk-opening { /* --- sequence timing (single source of truth) --- */ --t-feather-start: 0.35s; --t-feather-dur: 4s; /* four sweeps need a little more room */ --t-feather-end: 4.35s; /* = start + dur, when the idle float begins */ --t-hand-left: 4.45s; --t-hand-right: 4.65s; /* small offset so the pair feels organic */ --t-hand-dur: 2.4s; --t-name-1: 7.15s; /* Riya */ --t-name-2: 7.55s; /* Weds */ --t-name-3: 7.85s; /* Kunal */ --t-name-dur: 1.5s; --t-scene-dur: 1.6s; /* sky + clouds + birds settle in */ /* --- easings --- */ --ease-fall: cubic-bezier(0.33, 0.15, 0.18, 1); /* long, soft landing */ --ease-drift: cubic-bezier(0.37, 0.00, 0.63, 1); /* sine in-out */ --ease-glide: cubic-bezier(0.32, 0.02, 0.18, 1); /* no overshoot */ --ease-reveal: cubic-bezier(0.22, 0.61, 0.36, 1); /* --- flight path (scaled per breakpoint) --- --f-sweep is how far LEFT of its resting place the feather swings at the far end of each sweep. The path never crosses to the right of where it lands, so it drifts in rather than hunting for the spot. */ --f-sweep: 30vw; --f-rise: 90vh; /* how far above its resting place it starts */ /* --- cloud drift amplitudes: big enough to read as movement --- */ --amp-l: clamp(30px, 4.2vw, 92px); /* large / far */ --amp-m: clamp(40px, 5.6vw, 118px); /* medium */ --amp-s: clamp(48px, 6.8vw, 140px); /* small / near */ /* --- palette (sampled from the reference artwork) --- */ --ink-name: #3a4a20; --ink-weds: #26333c; --weds-blob: #a9d6ec; /* gold picked to sit with the bangles in the hand artwork */ --cta-ivory: #fdf8ec; --cta-ivory-lit: #fffdf6; --cta-gold: #c8a03c; --cta-gold-lit: #b8892a; --cta-gold-soft: rgba(200, 160, 60, 0.42); --cta-ink: rgba(58, 74, 32, 0.85); --cta-ink-soft: rgba(58, 74, 32, 0.62); /* --- CTA timing: starts only once the last name has finished --- */ --t-cta-1: 9.9s; /* blessing line */ --t-cta-2: 10.25s; /* invitation line */ --t-cta-3: 10.65s; /* button */ --t-cta-dur: 1s; --t-cta-idle: 11.75s; /* = t-cta-3 + dur, when breathing starts */ } /* 4. Composition ========================================================== */ .rk-opening { position: relative; width: 100%; height: 100vh; height: 100dvh; overflow: hidden; isolation: isolate; } /* --- sky --------------------------------------------------------------- The asset is a pure vertical gradient with no shapes in it, so filling the box keeps the designed top-to-bottom sky at every aspect ratio. Every other layer is aspect-locked. */ .rk-sky { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: fill; z-index: 0; } /* --- clouds ------------------------------------------------------------ Each cloud is a sprite window onto overlay-clouds.png showing exactly one whole cloud. background-size / background-position are percentages, so a cloud keeps its shape and its crop at any size — nothing to recalculate. Only clouds with no cut edge in the source sheet are used. */ .rk-clouds { position: absolute; inset: 0; z-index: 1; overflow: hidden; pointer-events: none; } .rk-cloud { position: absolute; display: block; aspect-ratio: var(--ar); background-image: url("../../images/overlay-clouds.png"); background-repeat: no-repeat; filter: blur(var(--haze, 0px)); } /* Atmospheric perspective: the far clouds sit slightly out of focus, the near ones stay crisp. Static blur, so it rasterises once and the drift is still a pure transform. */ .rk-cloud--a, .rk-cloud--b, .rk-cloud--c { --haze: 2.6px; } .rk-cloud--d, .rk-cloud--f, .rk-cloud--g { --haze: 1.3px; } .rk-cloud--e, .rk-cloud--h, .rk-cloud--i { --haze: 0.4px; } /* --- mist --------------------------------------------------------------- Same artwork, blown up and blurred past recognition into pure haze. */ .rk-mist { position: absolute; inset: 0; z-index: 1; overflow: hidden; pointer-events: none; } .rk-mist__wisp { position: absolute; left: 0; display: block; width: var(--w); aspect-ratio: var(--ar); top: var(--y); background-image: url("../../images/overlay-clouds.png"); background-repeat: no-repeat; filter: blur(var(--blur)); opacity: 0; } .rk-mist__wisp--1 { --ar: 1559 / 432; background-size: 236.95% 1115.74%; background-position: 36.96% 9.25%; --w: 62vw; --y: 10%; --blur: 22px; --peak: 0.30; } .rk-mist__wisp--2 { --ar: 1122 / 311; background-size: 329.23% 1549.84%; background-position: 42.11% 75.96%; --w: 48vw; --y: 44%; --blur: 18px; --peak: 0.24; } .rk-mist__wisp--3 { --ar: 1237 / 320; background-size: 298.63% 1506.25%; background-position: 86.69% 22.22%; --w: 70vw; --y: 68%; --blur: 26px; --peak: 0.22; } /* sprite windows — fixed properties of the artwork, never change */ .rk-cloud--a { --ar: 1559 / 432; background-size: 236.95% 1115.74%; background-position: 36.96% 9.25%; } .rk-cloud--b { --ar: 1237 / 320; background-size: 298.63% 1506.25%; background-position: 86.69% 22.22%; } .rk-cloud--c { --ar: 1122 / 311; background-size: 329.23% 1549.84%; background-position: 42.11% 75.96%; } .rk-cloud--d { --ar: 890 / 231; background-size: 415.06% 2086.58%; background-position: 73.04% 83.94%; } .rk-cloud--e { --ar: 721 / 129; background-size: 512.34% 3736.43%; background-position: 9.55% 4.99%; } .rk-cloud--f { --ar: 582 / 161; background-size: 634.71% 2993.79%; background-position: 90.52% 54.60%; } .rk-cloud--g { --ar: 515 / 143; background-size: 717.28% 3370.63%; background-position: 12.77% 46.93%; } .rk-cloud--h { --ar: 450 / 122; background-size: 820.89% 3950.82%; background-position: 1.05% 0.66%; } .rk-cloud--i { --ar: 518 / 93; background-size: 713.13% 5182.80%; background-position: 22.67% 69.83%; } /* --- birds ------------------------------------------------------------- */ .rk-birds { position: absolute; z-index: 2; pointer-events: none; } .rk-birds--upper { width: var(--b1-w); left: var(--b1-x); top: var(--b1-y); } .rk-birds--lower { width: var(--b2-w); left: var(--b2-x); top: var(--b2-y); } /* --- morpankh ---------------------------------------------------------- */ .rk-feather { position: absolute; z-index: 3; width: var(--f-w); left: var(--f-x); top: var(--f-y); pointer-events: none; } .rk-feather__fall, .rk-feather__drift, .rk-feather__tilt, .rk-feather__idle { width: 100%; } .rk-feather img { width: 100%; height: auto; } /* --- names ------------------------------------------------------------- */ .rk-names { position: absolute; z-index: 4; left: var(--n-x); top: var(--n-y); transform: translateX(-50%); pointer-events: none; } .rk-names__pair { position: relative; margin: 0; font-family: "Ananda", "Norican", "Segoe Script", cursive; font-weight: 400; font-size: var(--n-size); line-height: 1.2; color: var(--ink-name); text-align: center; white-space: nowrap; } .rk-name { display: block; } .rk-name--groom { margin-left: var(--n-groom-shift); } /* "Weds" — small label sitting between the two names */ .rk-weds { position: absolute; left: 50%; top: 50%; transform: translate(calc(-50% + var(--weds-dx)), calc(-50% + var(--weds-dy))); display: grid; place-items: center; } /* the soft blue blob behind it — grid items stack in their own order, so both need an explicit z-index or the blob paints over the word */ .rk-weds::before { content: ""; grid-area: 1 / 1; z-index: 0; width: 0.62em; height: 0.33em; border-radius: 50%; background: var(--weds-blob); transform: rotate(-5deg); } .rk-weds__text { grid-area: 1 / 1; z-index: 1; font-family: "Poppins", system-ui, sans-serif; font-weight: 600; font-size: 0.145em; line-height: 1; letter-spacing: 0.005em; color: var(--ink-weds); } /* --- hands -------------------------------------------------------------