/* ============================================================ nikah-card.css ------------------------------------------------------------ Self-contained. Every class is prefixed `nk-` and every custom property is scoped to `.nk-stage`, so this cannot collide with anything already in the project. Nothing here targets element selectors, html, body, or *. ============================================================ */ .nk-stage { /* ── palette ─────────────────────────────────────────── */ --nk-ivory: #fcfaf6; --nk-paper: #f7f1e6; --nk-paper-deep: #ecdfcc; --nk-ink: #4a3a34; --nk-ink-soft: #6f5c54; --nk-rose: #96414f; --nk-rose-deep: #742d3b; --nk-blush: #e6cbc5; --nk-gold: #b08c4a; --nk-gold-deep: #8d6d33; --nk-gold-pale: #dcc48b; /* ── type ────────────────────────────────────────────── */ --nk-serif: "Cormorant Garamond", Georgia, "Times New Roman", serif; --nk-script: "Pinyon Script", "Snell Roundhand", cursive; --nk-arabic: "Amiri", "Traditional Arabic", serif; --nk-xs: clamp(0.63rem, 0.56rem + 0.34vw, 0.8rem); --nk-sm: clamp(0.8rem, 0.72rem + 0.4vw, 1rem); --nk-md: clamp(0.98rem, 0.88rem + 0.55vw, 1.26rem); --nk-name: clamp(2rem, 1.25rem + 3.6vw, 3.6rem); --nk-verse: clamp(0.86rem, 0.72rem + 0.6vw, 1.08rem); --nk-track: 0.26em; --nk-silk: cubic-bezier(0.22, 1, 0.36, 1); /* Set --nk-card-max to the same max-width the sections below the card use, and the card lines up with them exactly. */ --nk-card-max: 820px; position: relative; display: flex; flex-direction: column; align-items: center; padding: 0; margin-top: 0; font-family: var(--nk-serif); color: var(--nk-ink); -webkit-font-smoothing: antialiased; } /* ── the page backdrop ───────────────────────────────────── Set --nk-page-bg to swap it: bg-texture.webp light gold damask (default) liner.webp blush floral (busier; card sits on it less calmly) none inherit whatever the page already uses Apply the SAME background to so the sections below the card match and the whole page reads as one surface. */ /* NO background here, deliberately. The page paints it once, on , and it shows straight through. Painting a second copy on .nk-stage puts a tile at a different offset behind the card, and the offset edge reads as a pale panel floating over the real background. Opt in with nk-stage--paper only if the page has no background of its own. */ .nk-stage--paper { background: url("/assets/bg-texture.webp") center / 520px repeat, #faf4e9; } .nk-stage--floral { background: url("/assets/liner.webp") center / 620px repeat, #faf4e9; } /* ── the card ────────────────────────────────────────────── ONE uncut 4K watercolour plate, drawn at the card's own proportions with the empty text field already painted into it. The card is pinned to the plate's native ratio, so the art is never cut, stretched or tiled — there is nothing to seam. Everything inside is sized in cqw so the text scales with the painting. ──────────────────────────────────────────────────────────── */ .nk-card { position: relative; box-sizing: border-box; /* The plate's native ratio. The card is pinned to it so the painting is never stretched, cropped or seamed — it only ever scales. Do not change. */ aspect-ratio: 2783 / 5169; background: url("/assets/plate.webp") center / 100% 100% no-repeat, #fdfbf7; /* Typography inside is sized in cqw, so the card is the same shape at every width — text scales with the artwork instead of reflowing to more lines. */ container-type: inline-size; width: 100%; border-radius: 2px; overflow: hidden; isolation: isolate; box-shadow: 0 1px 2px rgba(84,58,42,0.16), 0 22px 50px -14px rgba(84,58,42,0.32), 0 60px 120px -44px rgba(84,58,42,0.42); } /* ── content sits inside the painted arch ────────────────── Measured off the plate, not guessed: the gold shafts sit at 18.2% and 81.8% of the card width, the arch shoulder opens up around 18% of the height and the garden begins at ~65%. tools/autofit.py checks every rendered line against the painting row by row — see the note above tools/clear-profile.json. */ .nk-content { position: absolute; left: 19.3%; right: 19.3%; top: 18.0%; bottom: 33.599999999999994%; z-index: 2; display: flex; flex-direction: column; align-items: center; /* Anchored to the BOTTOM, not centred. The last name has a hard floor — the painted domes close in below it — so that edge is the fixed one and the block grows upward into the arch from there. Centring instead would push the names down into the domes every time anything above them got bigger. */ justify-content: flex-end; text-align: center; } /* ── typography ────────────────────────────────────────── */ .nk-bismillah { margin: 0 0 1.59cqw; font-family: var(--nk-arabic); font-size: 3.33cqw; line-height: 1.6; color: var(--nk-gold-deep); direction: rtl; } /* Surah Ar-Rum 30:21 — set in the serif, not the script. Script at this length is beautiful and almost unreadable, which is the wrong trade for the one piece of text on the card people actually stop to read. */ .nk-verse { margin: 0; font-family: var(--nk-serif); font-style: italic; font-weight: 400; font-size: 2.11cqw; line-height: 1.42; color: var(--nk-ink); max-width: 42.0cqw; } .nk-verse__ref { display: block; margin-top: 0.8em; font-family: var(--nk-serif); font-size: 1.61cqw; font-weight: 500; letter-spacing: var(--nk-track); text-transform: uppercase; color: var(--nk-gold-deep); } .nk-divider { display: block; width: 29.06cqw; margin: 1.36cqw auto; aspect-ratio: 320 / 26; color: var(--nk-gold); overflow: visible; } .nk-lede { margin: 0; font-size: 2.32cqw; font-weight: 500; line-height: 1.7; letter-spacing: 0.16em; text-transform: uppercase; color: var(--nk-ink-soft); } .nk-kicker { margin: 0.98cqw 0 1.28cqw; font-family: var(--nk-script); font-size: 6.56cqw; line-height: 1.2; color: var(--nk-gold-deep); } .nk-of { display: flex; align-items: center; gap: 1.23cqw; margin: 1.16cqw 0 1.23cqw; font-size: 2.1cqw; letter-spacing: 0.34em; text-transform: uppercase; color: var(--nk-gold-deep); } .nk-of__tick { width: 4.17cqw; height: 1px; background: currentColor; opacity: 0.7; } .nk-names { display: flex; flex-direction: column; align-items: center; margin: 0; font-family: var(--nk-script); font-weight: 400; font-size: 12.5cqw; line-height: 1.04; color: var(--nk-rose); } .nk-names > span { display: block; padding: 0.04em 0.1em; } /* a real ampersand between the names, no ornament behind it */ .nk-amp { display: block; margin: 0.91cqw 0; font-family: var(--nk-serif); font-style: italic; font-weight: 400; font-size: 8.63cqw; line-height: 1; color: var(--nk-gold); } /* ── details ───────────────────────────────────────────── */ /* ── the music button ──────────────────────────────────── */ .nk-music { position: fixed; right: clamp(0.9rem, 3vw, 1.6rem); bottom: clamp(0.9rem, 3vw, 1.6rem); z-index: 40; width: 44px; height: 44px; display: grid; place-items: center; padding: 0; border: 1px solid rgba(176,140,74,0.55); border-radius: 50%; background: rgba(255,253,249,0.86); backdrop-filter: blur(6px); cursor: pointer; transition: background 200ms var(--nk-silk), transform 200ms var(--nk-silk); } .nk-music:hover { background: #fff; transform: translateY(-2px); } .nk-music[hidden] { display: none; } .nk-music svg { width: 19px; height: 19px; fill: none; stroke: var(--nk-rose-deep); stroke-width: 1.4; stroke-linecap: round; stroke-linejoin: round; } .nk-music__on { display: none; } .nk-music[aria-pressed="true"] .nk-music__on { display: block; } .nk-music[aria-pressed="true"] .nk-music__off { display: none; } /* the YouTube iframe must stay painted or playback stops in some browsers */ .nk-yt { position: fixed; left: 0; bottom: 0; width: 1px; height: 1px; overflow: hidden; opacity: 0.01; pointer-events: none; z-index: -1; } /* ── narrow screens ────────────────────────────────────── */ @media (prefers-reduced-motion: reduce) { .nk-music { transition: none; } } @media print { .nk-stage::after, .nk-music, .nk-yt { display: none !important; } .nk-card { box-shadow: none; width: 100%; } } /* ============================================================ Seal reveal — optional. The seal LIFTS AWAY WHOLE. It is deliberately never split, cracked or broken in two: that is the wrong image for a wedding. ============================================================ */ .nk-locked { overflow: hidden; scrollbar-gutter: stable; } .nk-seal-scene { position: fixed; inset: 0; z-index: 60; display: grid; place-items: center; opacity: 1; transition: opacity 900ms cubic-bezier(0.22, 1, 0.36, 1); } .nk-seal-scene__bg { position: absolute; inset: 0; background: radial-gradient(120% 90% at 50% 38%, #fdfaf4 0%, #f4ead9 58%, #e9dbc6 100%), #f4ead9; } .nk-seal-scene__inner { position: relative; display: flex; flex-direction: column; align-items: center; gap: clamp(1.4rem, 4vh, 2.4rem); } .nk-seal { position: relative; width: clamp(122px, 30vw, 178px); aspect-ratio: 1; padding: 0; border: 0; background: none; cursor: pointer; -webkit-tap-highlight-color: transparent; animation: nk-rise 1100ms cubic-bezier(0.22, 1, 0.36, 1) both; } .nk-seal__wax { position: absolute; inset: 0; background: url("/assets/wax-seal.webp") center / contain no-repeat; filter: drop-shadow(0 6px 14px rgba(96,40,48,0.34)); transition: transform 420ms cubic-bezier(0.22, 1, 0.36, 1); } .nk-seal:hover .nk-seal__wax { transform: translateY(-3px) scale(1.04); } .nk-seal:active .nk-seal__wax { transform: scale(0.97); } .nk-seal__glow { position: absolute; inset: -40%; border-radius: 50%; background: radial-gradient(circle, rgba(220,196,139,0.5) 0%, rgba(220,196,139,0) 62%); animation: nk-pulse 3.6s ease-in-out infinite; pointer-events: none; } .nk-seal__hint { display: flex; align-items: center; gap: 0.85rem; margin: 0; font-family: var(--nk-serif, Georgia, serif); font-size: 0.72rem; letter-spacing: 0.28em; text-transform: uppercase; color: #8d6d33; animation: nk-rise 1100ms 260ms cubic-bezier(0.22, 1, 0.36, 1) both, nk-breathe 3.6s 1.4s ease-in-out infinite; } .nk-seal__hint span { width: clamp(20px, 6vw, 42px); height: 1px; background: linear-gradient(90deg, rgba(176,140,74,0), #b08c4a, rgba(176,140,74,0)); } /* opening: the seal lifts, everything dissolves. One transform, no 3D, nothing that can tear or judder mid-flight. */ .nk-seal-scene.is-open { opacity: 0; pointer-events: none; } .nk-seal-scene.is-open .nk-seal { animation: nk-lift 1100ms cubic-bezier(0.32, 0, 0.2, 1) forwards; } .nk-seal-scene.is-open .nk-seal__glow { animation: none; opacity: 0; transition: opacity 300ms; } .nk-seal-scene.is-open .nk-seal__hint { animation: nk-fade 400ms ease-out forwards; } @keyframes nk-rise { from { opacity: 0; transform: translateY(16px); } to { opacity: 1; transform: none; } } @keyframes nk-fade { to { opacity: 0; transform: translateY(8px); } } @keyframes nk-lift { to { opacity: 0; transform: translateY(-34px) scale(1.5); } } @keyframes nk-pulse { 0%,100% { opacity: 0.4; transform: scale(0.94); } 50% { opacity: 0.9; transform: scale(1.06); } } @keyframes nk-breathe { 0%,100% { opacity: 0.6; } 50% { opacity: 1; } } @media (prefers-reduced-motion: reduce) { .nk-seal, .nk-seal__hint, .nk-seal__glow { animation: none !important; } .nk-seal-scene { transition-duration: 200ms; } .nk-seal-scene.is-open .nk-seal { animation: none; opacity: 0; } } /* If wax-seal.webp still has its white studio background (background removal is optional, not required), add this class to the button and the white drops out against the cream scene. */ .nk-seal--white-bg .nk-seal__wax { mix-blend-mode: multiply; filter: none; } /* ============================================================ Envelope opening ------------------------------------------------------------ Modelled on the reference recording, which does something subtler than a flap swinging back: • the envelope occupies EXACTLY the card's footprint • its two side flaps swing outward, not a top flap backward • then envelope and card CROSS-DISSOLVE in place Because both are the same size in the same spot, nothing moves at the hand-off. The old version flew the card forward at 1.85x while a separate overlay faded — two competing motions fighting over the same moment, which is what read as janky. ============================================================ */ /* The wrapper carries the sizing so the envelope can sit in exactly the card's box. Never taller than the viewport, never sillier than 320px wide. 2.05 is the measured height-to-width ratio, which only holds because the card's type is sized in cqw. Raise --nk-card-max to widen it. */ /* On phones the card goes edge to edge: it escapes whatever horizontal padding the surrounding container has, so no width is wasted at the sides. */ @media (max-width: 620px) { .nk-stage { width: 100vw; max-width: 100vw; margin-left: calc(50% - 50vw); margin-right: calc(50% - 50vw); } } .nk-cardwrap { position: relative; margin-top: 0; /* Matches the container, so the card lines up with the modules below it. Add nk-stage--fit to cap the width by viewport height instead, which guarantees the whole card is visible without scrolling but makes it narrower than those modules. You can have one or the other. */ width: min(100%, var(--nk-card-max)); } .nk-stage--fit .nk-cardwrap { width: clamp(min(100%, 320px), calc((100svh - 2.2rem) / 2.05), min(100%, var(--nk-card-max))); } .nk-cardwrap > .nk-card { width: 100%; } .nk-cardwrap.is-sealed > .nk-card { opacity: 0; } .nk-cardwrap.is-opening > .nk-card { animation: nk-card-in 1100ms 1150ms ease-out forwards; } .nk-env { position: absolute; inset: 0; z-index: 5; perspective: 1700px; perspective-origin: 50% 40%; } /* The four flaps are clip-path regions of ONE envelope image, so the printed creases and the emboss travel with each flap as it swings. The clip percentages are measured off the artwork's real folds: a clean X meeting at 50%, creases running corner to corner. Change the art, re-measure these. */ .nk-env__paper, .nk-env__top, .nk-env__bottom, .nk-env__fl, .nk-env__fr { position: absolute; inset: 0; background: url("/assets/envelope-front.webp") center / 100% 100% no-repeat, #f6efe3; backface-visibility: hidden; } /* the inside of the envelope, seen once the flaps part */ /* tiled, not single-shot: a no-repeat liner leaves bare fallback colour at the top and bottom of the opening once the flaps are out of the way */ .nk-env__paper { background: url("/assets/liner.webp") center / 68% repeat, #f6efe3; box-shadow: inset 0 0 70px rgba(92,64,44,0.22); } .nk-env__top { clip-path: polygon(0 0, 100% 0, 50% 50%); } .nk-env__bottom { clip-path: polygon(0 100%, 50% 50%, 100% 100%); } .nk-env__fl { clip-path: polygon(0 0, 50% 50%, 0 100%); transform-origin: left center; } .nk-env__fr { clip-path: polygon(100% 0, 50% 50%, 100% 100%); transform-origin: right center; } /* a lit fold edge, the way the reference catches light along the crease */ .nk-env__fl::after, .nk-env__fr::after { content: ""; position: absolute; inset: 0; opacity: 0; } .nk-env__fl::after { background: linear-gradient(103deg, rgba(255,255,255,0) 46%, rgba(255,247,228,0.95) 50%, rgba(255,255,255,0) 54%); } .nk-env__fr::after { background: linear-gradient(257deg, rgba(255,255,255,0) 46%, rgba(255,247,228,0.95) 50%, rgba(255,255,255,0) 54%); } .nk-env .nk-seal { position: absolute; left: 50%; top: 50%; width: 30%; transform: translate(-50%, -50%); z-index: 3; animation: nk-rise 1000ms cubic-bezier(0.22,1,0.36,1) both; } .nk-env .nk-seal__wax { filter: drop-shadow(0 6px 12px rgba(96,44,52,0.3)); } /* Sits ON the envelope, under the seal, so it is impossible to miss and cannot fall outside the viewport the way a hint below the card can. */ .nk-env__hint { position: absolute; left: 0; right: 0; top: 30%; display: block; text-align: center; line-height: 1.7; margin: 0; font-family: var(--nk-serif); font-size: clamp(0.78rem, 2.7cqw, 1.05rem); font-weight: 600; letter-spacing: 0.34em; text-transform: uppercase; color: var(--nk-rose); text-shadow: 0 1px 0 rgba(255,255,255,0.85); animation-name: nk-rise, nk-pulse-soft; animation: nk-rise 1000ms 220ms cubic-bezier(0.22,1,0.36,1) both, nk-breathe 3.4s 1.3s ease-in-out infinite; } /* one word per line, centred under each other */ .nk-env__hint span { display: block; } @keyframes nk-pulse-soft { 0%,100% { opacity: 0.78; } 50% { opacity: 1; } } /* ── the sequence: one continuous move, ~2.2s ─────────────── */ .nk-cardwrap.is-opening .nk-seal { pointer-events: none; animation: nk-seal-go 700ms cubic-bezier(0.32,0,0.2,1) forwards; } .nk-cardwrap.is-opening .nk-seal__glow{ animation: none; opacity: 0; transition: opacity 220ms; } .nk-cardwrap.is-opening .nk-env__hint { animation: nk-fade 320ms ease-out forwards; } .nk-cardwrap.is-opening .nk-env__fl { animation: nk-open-l 1250ms 320ms cubic-bezier(0.42,0,0.18,1) forwards; } .nk-cardwrap.is-opening .nk-env__fr { animation: nk-open-r 1250ms 320ms cubic-bezier(0.42,0,0.18,1) forwards; } .nk-cardwrap.is-opening .nk-env__fl::after, .nk-cardwrap.is-opening .nk-env__fr::after { animation: nk-crease 900ms 340ms ease-out forwards; } .nk-cardwrap.is-opening .nk-env { animation: nk-env-out 1000ms 1150ms ease-in forwards; } @keyframes nk-open-l { to { transform: rotateY(-96deg); } } @keyframes nk-open-r { to { transform: rotateY(96deg); } } @keyframes nk-crease { 0% { opacity: 0; } 35% { opacity: 1; } 100% { opacity: 0; } } @keyframes nk-seal-go { to { opacity: 0; transform: translate(-50%, -50%) translateY(-14px) scale(1.12); } } @keyframes nk-env-out { to { opacity: 0; } } @keyframes nk-card-in { from { opacity: 0; } to { opacity: 1; } } @keyframes nk-rise { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } } @keyframes nk-fade { to { opacity: 0; } } @keyframes nk-breathe { 0%,100% { opacity: 0.6; } 50% { opacity: 1; } } @keyframes nk-pulse { 0%,100% { opacity: 0.4; transform: scale(0.94); } 50% { opacity: 0.9; transform: scale(1.06); } } /* the seal keeps its own centring transform, so override the shared rules */ .nk-env .nk-seal { animation-name: nk-seal-rise; } @keyframes nk-seal-rise { from { opacity: 0; transform: translate(-50%, -50%) translateY(14px); } to { opacity: 1; transform: translate(-50%, -50%); } } @media (prefers-reduced-motion: reduce) { .nk-env, .nk-env * { animation: none !important; } .nk-cardwrap.is-opening .nk-env { opacity: 0; transition: opacity 200ms; } .nk-cardwrap.is-opening > .nk-card { animation: none; opacity: 1; } } /* rose petals: a finite shower released when the envelope opens */ .nk-petals { position: fixed; inset: 0; z-index: 30; pointer-events: none; }