/* cinema.css */ /* The cinema frame (layout "cinema"), shared by every cinematic design: a scene for a cover, opened by a ritual (cinema.js), then one long page that reads as a letter. Linked before the design's sheet, first in all.css. Markup: styles/cinema.ts. Colours are the --i-* tokens and the colourway's --cn-paper; gold is the one colour fixed across colourways. */ .inv[data-layout=cinema]{--cn-e:cubic-bezier(.16,1,.3,1);--cn-g:rgba(176,138,69,.45);--cn-rules:linear-gradient(var(--i-accent2),var(--i-accent2)) 10px 0/1px 100% no-repeat,linear-gradient(var(--cn-g),var(--cn-g)) 14px 0/1px 100% no-repeat,linear-gradient(var(--i-accent2),var(--i-accent2)) calc(100% - 10px) 0/1px 100% no-repeat,linear-gradient(var(--cn-g),var(--cn-g)) calc(100% - 14px) 0/1px 100% no-repeat;--cn-fl:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 120 16' fill='none' stroke='%23000' stroke-width='1.2' stroke-linecap='round'%3E%3Cpath d='M4 8c14 0 22-5 34-3 7 1 11 3 16 3M116 8c-14 0-22-5-34-3-7 1-11 3-16 3M26 10.5c5 2 11 2 15 0M94 10.5c-5 2-11 2-15 0'/%3E%3Cpath d='M60 3.5l4.5 4.5-4.5 4.5-4.5-4.5z' fill='%23000'/%3E%3C/svg%3E");background:var(--cn-paper,none) 0 0/384px,var(--i-bg)} .inv[data-layout=cinema] .cn-cover{color:var(--i-ink)} .inv[data-layout=cinema] .cn-scene{position:absolute;inset:0;display:block;overflow:hidden} .inv[data-layout=cinema] .cn-scene img{display:block;width:100%;height:100%;object-fit:cover;object-position:50% var(--cn-y,50%)} .inv[data-layout=cinema] .cn-scroll{position:absolute;inset:0;z-index:1;display:flex;flex-direction:column;padding:max(24px,env(safe-area-inset-top)) 16px max(20px,env(safe-area-inset-bottom));overflow-x:hidden;overflow-y:auto;overscroll-behavior:contain;-webkit-overflow-scrolling:touch} .inv[data-layout=cinema] .cn-open{-webkit-tap-highlight-color:transparent} .inv[data-layout=cinema] .cn-dots{display:flex;gap:8px;justify-content:center} .inv[data-layout=cinema] .cn-dots i{width:7px;height:7px;border-radius:50%;background:currentColor;opacity:.3;transition:opacity .2s,transform .2s} .inv[data-layout=cinema] .cn-dots i.on{opacity:1;transform:scale(1.3)} .inv[data-layout=cinema] .cn-bar{width:120px;height:2px;background:rgba(255,255,255,.3);overflow:hidden} .inv[data-layout=cinema] .cn-bar i{display:block;height:100%;background:currentColor;transform:scaleX(0);transform-origin:right;transition:transform .25s ease-out} .inv[data-layout=cinema] .cn-cover.holding .cn-bar i{transform:scaleX(1);transition:transform 1.4s linear} .inv[data-layout=cinema] .cn-thump{animation:cn-thump .12s ease-out} @keyframes cn-thump{50%{transform:scale(.985)}} /* The page: a letter. Never wider than the screen: in RTL that shifts the fixed cover (Chrome). */ .inv[data-layout=cinema] .inv-page{max-width:560px;padding:0 0 env(safe-area-inset-bottom);overflow-x:hidden;background:var(--cn-rules)} .inv[data-layout=cinema] .inv-sheet,.inv[data-layout=cinema] .inv-side{display:contents} .inv[data-layout=cinema] .lang-switch,.inv[data-layout=cinema] .bar-btn{background:var(--i-glass);border-color:var(--i-accent-line)} .inv[data-layout=cinema] .lang-switch a{font-size:.8rem;min-height:30px;padding:4px 11px} .inv[data-layout=cinema] .lang-switch a[aria-current]{background:var(--i-soft);color:var(--i-accent-ink)} .inv[data-layout=cinema] .bar-btn{width:38px;padding:0;justify-content:center} .inv[data-layout=cinema] .bar-btn span,.inv[data-layout=cinema] .cn-sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap} .inv[data-layout=cinema] .cn-sec{position:relative;padding:46px 30px 26px;gap:14px} .inv[data-layout=cinema] .cn-kick{position:relative;margin:0;padding-bottom:16px;font-family:var(--i-font);font-weight:700;font-size:1.5rem;line-height:1.45;color:var(--i-accent-ink)} .inv[data-layout=cinema] .cn-kick::after{content:"";position:absolute;left:50%;bottom:0;width:96px;height:13px;margin-left:-48px;background:var(--i-accent2);-webkit-mask-image:var(--cn-fl);mask-image:var(--cn-fl);-webkit-mask-size:100% 100%;mask-size:100% 100%} .inv[data-layout=cinema] .btn{border-radius:3px;box-shadow:0 0 0 2px var(--i-bg),0 0 0 3px var(--i-accent2)} .inv[data-layout=cinema] .btn.soft{box-shadow:none;border-color:var(--i-ink-line)} .inv[data-layout=cinema] .btn.cn-btn,.inv[data-layout=cinema] .calendar a{display:inline-flex;align-items:center;justify-content:center;gap:8px;min-height:44px;padding:6px 4px;border:0;border-bottom:1px solid var(--i-accent2);border-radius:0;background:none;box-shadow:none;color:var(--i-ink);font-weight:700;font-size:1rem;text-decoration:none} .inv[data-layout=cinema] .cn-hero{padding-top:30px} .inv[data-layout=cinema] .cn-arch{width:min(70%,290px);aspect-ratio:4/5;padding:6px;border:1px solid var(--i-accent2);border-radius:999px 999px 16px 16px;margin-bottom:6px} .inv[data-layout=cinema] .cn-arch img{display:block;width:100%;height:100%;object-fit:cover;border-radius:999px 999px 11px 11px} .inv[data-layout=cinema] .cn-names{font-size:clamp(3rem,15vw,4.3rem);line-height:1.2} .inv[data-layout=cinema] .cn-names[data-len=l]{font-size:clamp(2.5rem,12vw,3.4rem)} .inv[data-layout=cinema] .cn-names[data-len=xl]{font-size:clamp(2.1rem,10vw,2.9rem)} .inv[data-layout=cinema] .cn-names em{font-size:.62em;line-height:1} .inv[data-layout=cinema] .cn-bism{margin:2px 0 -4px;max-width:100%;font-family:"Amiri",serif;font-size:clamp(20px,5.8vw,29px);line-height:1.6;color:var(--i-accent2)} @supports (-webkit-background-clip:text) or (background-clip:text){.inv[data-layout=cinema] .cn-bism span:first-child{background:linear-gradient(120deg,#7A5A1C,#B38B3F 38%,#8A6526 62%,#A9853A);-webkit-background-clip:text;background-clip:text;color:transparent}} .inv[data-layout=cinema] .cn-cd{max-width:380px;gap:0} .inv[data-layout=cinema] .cn-cd div{padding:2px 2px 4px} .inv[data-layout=cinema] .cn-cd div+div{border-inline-start:1px solid var(--i-accent-line)} .inv[data-layout=cinema] .cn-cd strong{font-family:var(--i-font);font-weight:400;font-size:clamp(2.2rem,10.5vw,2.8rem);line-height:1.25;color:var(--i-accent-ink)} .inv[data-layout=cinema] .cn-when .when-date span{display:block} .inv[data-layout=cinema] .cn-time{margin:-6px 0 0;font-weight:700;font-size:1.1rem;color:var(--i-accent-ink)} .inv[data-layout=cinema] .cn-prog .programme{position:relative;list-style:none;margin:0;padding:4px 0;width:100%;max-width:360px;display:grid} .inv[data-layout=cinema] .cn-prog .programme::before{content:"";position:absolute;top:0;bottom:0;left:50%;width:1px;margin-left:-.5px;background:linear-gradient(transparent,var(--i-accent2) 14%,var(--i-accent2) 86%,transparent)} .inv[data-layout=cinema] .cn-prog .programme li{display:grid;grid-template-columns:1fr 28px 1fr;align-items:center;padding:11px 0;border:0;font-size:1.05rem} .inv[data-layout=cinema] .cn-prog .programme li::before{content:"";grid-column:2;grid-row:1;justify-self:center;width:11px;height:11px;border-radius:50%;background:var(--i-accent2);box-shadow:0 0 0 3px var(--i-bg),0 0 0 4px var(--i-accent-line)} .inv[data-layout=cinema] .cn-prog .programme time{grid-column:1;grid-row:1;min-width:0;text-align:end;padding-inline-end:12px;font-weight:700;color:var(--i-accent-ink);font-variant-numeric:tabular-nums} .inv[data-layout=cinema] .cn-prog .programme span{grid-column:3;grid-row:1;text-align:start;padding-inline-start:12px;font-weight:600} .inv[data-layout=cinema] .cn-hall,.inv[data-layout=cinema] .gallery img{border-radius:2px;border:5px solid var(--i-surface);background:var(--i-surface);box-shadow:0 0 0 1px var(--i-line),0 16px 28px -22px var(--i-shadow)} .inv[data-layout=cinema] .cn-reach{gap:30px} .inv[data-layout=cinema] .cn-item{display:grid;gap:12px;justify-items:center;width:100%} .inv[data-layout=cinema] .contact-btn{display:grid;justify-items:center;gap:6px;width:auto;max-width:none;padding:0;border:0;border-radius:0;background:none;box-shadow:none;color:var(--i-ink);text-decoration:none;text-align:center} .inv[data-layout=cinema] .contact-btn svg{width:22px;height:22px;padding:0;background:none;fill:none;stroke:var(--i-accent2);stroke-width:1.5;stroke-linejoin:round} .inv[data-layout=cinema] .contact-who{display:grid;justify-items:center;line-height:1.5} .inv[data-layout=cinema] .contact-name{font-size:1.15rem} .inv[data-layout=cinema] .contact-num{font-size:.92rem;color:var(--i-muted)} .inv[data-layout=cinema] .contact-call{margin-top:4px;padding:8px 22px;border-radius:3px;background:var(--i-btn);color:var(--i-btn-ink);font-weight:700;font-size:.9rem;box-shadow:0 0 0 2px var(--i-bg),0 0 0 3px var(--i-accent2)} .inv[data-layout=cinema] .calendar{display:flex;gap:10px 32px;justify-content:center;flex-wrap:wrap} .inv[data-layout=cinema] .cn-note{position:relative;max-width:34ch;padding:24px 6px;border:0;border-radius:0;font-size:1.05rem} .inv[data-layout=cinema] .cn-note::before,.inv[data-layout=cinema] .cn-note::after{content:"";position:absolute;left:50%;width:72px;height:10px;margin-left:-36px;background:var(--i-accent2);-webkit-mask-image:var(--cn-fl);mask-image:var(--cn-fl);-webkit-mask-size:100% 100%;mask-size:100% 100%} .inv[data-layout=cinema] .cn-note::before{top:0}.inv[data-layout=cinema] .cn-note::after{bottom:0} .inv[data-layout=cinema] .cn-card,.inv[data-layout=cinema] .cn-wishes .wish-form{position:relative;width:100%;display:grid;gap:14px;justify-items:center;padding:34px 24px 28px;border:1px solid var(--i-accent2);border-radius:0;background:none;box-shadow:none} .inv[data-layout=cinema] .cn-card::before,.inv[data-layout=cinema] .cn-wishes .wish-form::before{content:"";position:absolute;inset:4px;border:1px solid var(--cn-g);pointer-events:none} .inv[data-layout=cinema] .rsvp input,.inv[data-layout=cinema] .rsvp select,.inv[data-layout=cinema] .wish-form input,.inv[data-layout=cinema] .wish-form textarea{width:100%;min-height:44px;padding:8px 2px;border:0;border-bottom:1px solid var(--i-ink-line);border-radius:0;background:transparent;color:var(--i-ink);font:inherit;font-size:16px} .inv[data-layout=cinema] .rsvp select{-webkit-appearance:none;appearance:none;background:linear-gradient(45deg,transparent 50%,var(--i-muted) 50%) 10px 55%/5px 5px no-repeat,linear-gradient(135deg,var(--i-muted) 50%,transparent 50%) 15px 55%/5px 5px no-repeat} .inv[data-layout=cinema] .wish-form textarea{min-height:5.1em;padding:0 2px;border:0;line-height:1.7em;resize:vertical;background:repeating-linear-gradient(transparent 0,transparent calc(1.7em - 1px),var(--i-ink-line) calc(1.7em - 1px),var(--i-ink-line) 1.7em);background-attachment:local} .inv[data-dark="1"] .rsvp input,.inv[data-dark="1"] .rsvp select,.inv[data-dark="1"] .wish-form input,.inv[data-dark="1"] .wish-form textarea{color-scheme:dark} .inv[data-layout=cinema] .cn-wishes{gap:18px} .inv[data-layout=cinema] .wish-form label{display:grid;gap:4px;width:100%;text-align:start;font-size:.9rem;font-weight:600;color:var(--i-muted)} .inv[data-layout=cinema] .wish-form .btn{min-width:140px} .inv[data-layout=cinema] .wish-msg,.inv[data-layout=cinema] .wish-thanks{margin:0;font-weight:700;color:var(--i-accent-ink)} .inv[data-layout=cinema] .wish-list{list-style:none;margin:0;padding:0;display:grid;width:100%;border-top:1px solid var(--i-accent-line)} .inv[data-layout=cinema] .wish{display:grid;grid-template-columns:auto 1fr;column-gap:12px;padding:14px 4px;border:0;border-bottom:1px solid var(--i-accent-line);border-radius:0;background:none;box-shadow:none;text-align:start} .inv[data-layout=cinema] .wish-i{grid-row:span 2;width:auto;height:auto;min-width:1.2em;border-radius:0;background:none;color:var(--i-accent-ink);font:700 1.8rem/1.1 var(--i-font);text-align:center} .inv[data-layout=cinema] .wish b{font-size:1rem} .inv[data-layout=cinema] .wish p{margin:0;font-size:.98rem;line-height:1.8;color:var(--i-muted);white-space:pre-line;overflow-wrap:anywhere} .inv[data-layout=cinema] .wish-empty{margin:0;color:var(--i-muted)} .inv[data-layout=cinema] .gallery{display:grid;grid-template-columns:1fr 1fr;gap:12px;width:100%} .inv[data-layout=cinema] .gallery img{display:block;width:100%;aspect-ratio:4/5;object-fit:cover} .inv[data-layout=cinema] .gallery[data-count="1"] img,.inv[data-layout=cinema] .gallery[data-count="3"] img:first-child,.inv[data-layout=cinema] .gallery[data-count="5"] img:first-child{grid-column:1/-1;aspect-ratio:16/10} .inv[data-layout=cinema] .hashtag{margin:0;font-family:var(--i-body);font-weight:700;font-size:1.35rem;color:var(--i-ink);overflow-wrap:anywhere} .inv[data-layout=cinema] .cn-foot{display:flex;flex-wrap:wrap;justify-content:center;align-items:center;gap:2px 8px;margin-top:6px;padding:18px 28px 30px;border-top:0} /* The maker's mark, quiet; the last line, «make your own», on its own row at full strength (parts.ts makeYours). */ .inv[data-layout=cinema] .cn-foot>:not(.foot-make){opacity:.72} .inv[data-layout=cinema] .cn-foot .foot-make{flex-basis:100%;margin-top:14px;color:var(--i-ink)} .inv[data-layout=cinema] .cn-foot .foot-mark{opacity:1} /* Muted, but at a size Kurdish and Arabic script still read at on the darkest grounds (velvet, henna): 13px, not 11. */ .inv[data-layout=cinema] .cn-foot .mark{height:13px} .inv[data-layout=cinema] .cn-foot p,.inv[data-layout=cinema] .cn-foot .foot-cta{font-size:13px;font-weight:400;color:var(--i-ink);text-decoration:none} /* Sections rise in once as they scroll in; at rest without script. */ @media (prefers-reduced-motion:no-preference){ .inv[data-layout=cinema] .cn-sec>*{transition:opacity .8s var(--cn-e),transform .8s var(--cn-e)} .inv[data-layout=cinema] .cn-sec>:nth-child(2){transition-delay:.08s}.inv[data-layout=cinema] .cn-sec>:nth-child(3){transition-delay:.16s}.inv[data-layout=cinema] .cn-sec>:nth-child(n+4){transition-delay:.24s} html.io .inv.play .cn-sec[data-io]:not(.in)>*{opacity:0;transform:translateY(16px)} } /* A laptop: a deckle-edged sheet on the design's backdrop. */ @media (min-width:1024px){ .inv[data-layout=cinema]{background:var(--i-backdrop);--cn-dk:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='8' height='160'%3E%3Cpath d='M0 0L6.0 0 6.4 2 6.8 4 7.1 6 7.8 8 7.2 10 6.9 12 6.3 14 6.2 16 6.6 18 6.6 20 6.8 22 5.9 24 5.9 26 5.5 28 6.3 30 6.7 32 7.1 34 7.0 36 7.3 38 7.5 40 7.3 42 7.1 44 7.0 46 6.7 48 6.4 50 6.3 52 5.9 54 6.3 56 5.5 58 5.9 60 5.5 62 5.3 64 4.6 66 4.6 68 4.4 70 4.5 72 4.2 74 4.2 76 5.0 78 5.2 80 4.9 82 5.3 84 5.2 86 5.5 88 5.7 90 5.5 92 4.6 94 4.4 96 4.7 98 4.5 100 4.6 102 5.1 104 4.8 106 5.3 108 6.0 110 6.5 112 7.0 114 7.5 116 8.0 118 8.0 120 8.0 122 8.0 124 8.0 126 7.6 128 7.2 130 7.3 132 7.5 134 6.8 136 5.9 138 5.7 140 5.6 142 5.6 144 5.9 146 6.4 148 6.5 150 6.7 152 6.2 154 5.6 156 5.7 158 6.0 160L0 160Z'/%3E%3C/svg%3E")} .inv[data-layout=cinema] .inv-page{display:block;max-width:640px;margin:24px auto 72px;padding:8px 0 40px;overflow:visible;background-color:var(--i-bg);background-image:linear-gradient(var(--i-accent2),var(--i-accent2)),linear-gradient(var(--cn-g),var(--cn-g)),linear-gradient(var(--i-accent2),var(--i-accent2)),linear-gradient(var(--cn-g),var(--cn-g)),var(--cn-paper,none);background-size:1px 100%,1px 100%,1px 100%,1px 100%,384px;background-position:16px 0,21px 0,calc(100% - 16px) 0,calc(100% - 21px) 0,0 0;background-repeat:no-repeat,no-repeat,no-repeat,no-repeat,repeat;box-shadow:0 40px 70px -40px rgba(30,18,8,.55),0 2px 8px rgba(30,18,8,.16)} .inv[data-layout=cinema] .inv-page::before,.inv[data-layout=cinema] .inv-page::after{content:"";position:absolute;top:0;bottom:0;width:8px;background:var(--cn-paper,none) 0 0/384px,var(--i-bg);-webkit-mask-image:var(--cn-dk);mask-image:var(--cn-dk);-webkit-mask-size:8px 160px;mask-size:8px 160px} .inv[data-layout=cinema] .inv-page::before{left:100%} .inv[data-layout=cinema] .inv-page::after{right:100%;transform:scaleX(-1)} .inv[data-layout=cinema] .inv-bar{max-width:none} .inv[data-layout=cinema] .inv-side>.inv-sec,.inv[data-layout=cinema] .inv-sheet>.inv-sec{padding:50px 48px 30px;border-radius:0;background:none;box-shadow:none} .inv[data-layout=cinema] .inv-side .inv-foot{margin:6px 0 0} .inv[data-layout=cinema] .cn-kick{font-size:1.7rem} } /* ---------- English, left to right (2026-10-03, PLAN-EN D6, D8). Scoped to [dir=ltr] and [lang=en]: Kurdish and Arabic never meet these. ---------- */ /* The reply's count: the arrow on the end side, clear of the number, as it sits on the start side's opposite in RTL. */ .inv[dir="ltr"][data-layout=cinema] .rsvp select{background-position:calc(100% - 15px) 55%,calc(100% - 10px) 55%;padding-inline-end:24px} /* A held press fills its bar from the start side. */ .inv[dir="ltr"][data-layout=cinema] .cn-bar i{transform-origin:left} /* Section titles: in a serif design the label face, uppercase and tracked, at 0.8 of the calligraphy's size; a design lettered in a script sets them in its script at 1.25 instead (envelope.css). */ .inv[lang="en"][data-layout=cinema] .cn-kick{font-family:var(--i-label);font-weight:500;font-size:1.2rem;line-height:1.4;letter-spacing:.15em;text-transform:uppercase;text-wrap:balance} /* The names: the face's own line height; the "&" between them a little closer than a Kurdish و with its hat needs. */ .inv[lang="en"][data-layout=cinema] .cn-names{line-height:var(--i-names-lh,1.2)} .inv[lang="en"][data-layout=cinema] .cn-names em{line-height:1.15} /* The page's own names (cinema.ts hero): each size capped so the wider name (--nm em of the names face, from the server) fits the column (--cn-col; a design with other margins says its own); never under 2.1rem, where a name longer still breaks at its own space or hyphen. */ .inv[lang="en"][data-layout=cinema]{--cn-col:calc(min(100vw,560px) - 60px)} .inv[lang="en"][data-layout=cinema] .cn-hero>.cn-names{--cn-ns:clamp(3rem,15vw,4.3rem);font-size:min(var(--cn-ns),max(2.1rem,var(--cn-col) / var(--nm,4)))} .inv[lang="en"][data-layout=cinema] .cn-hero>.cn-names[data-len=l]{--cn-ns:clamp(2.5rem,12vw,3.4rem)} .inv[lang="en"][data-layout=cinema] .cn-hero>.cn-names[data-len=xl]{--cn-ns:clamp(2.1rem,10vw,2.9rem)} /* Figures that count or line up: lining and tabular in the numeral face (invite.css), where this frame names its own. */ .inv[lang="en"][data-layout=cinema] .cn-cd strong,.inv[lang="en"][data-layout=cinema] .cn-prog .programme time{font-family:var(--i-num);font-variant-numeric:lining-nums tabular-nums} .inv[lang="en"][data-layout=cinema] .wish p{line-height:1.55} /* The footer: "Made with the Hawsar app" and "Plan your own celebration with the Hawsar app" each on a line of its own, never run together on a wide screen with the app named twice side by side. */ .inv[lang="en"][data-layout=cinema] .cn-foot .foot-cta{flex-basis:100%;text-align:center;text-wrap:balance} @media (min-width:1024px){ .inv[lang="en"][data-layout=cinema]{--cn-col:544px} .inv[lang="en"][data-layout=cinema] .cn-kick{font-size:1.36rem} } /* story.css */ /* The story frame: what the Premium "story" designs share. A page is a column of full-height scenes, each on its own paper, one idea each, that fill a laptop's width; words rise into each scene as it arrives. A design's own sheet (assets/styles/.css) is linked after this one and sets each scene's paper (--st-paper) and everything drawn on it. Loaded only when the theme's layout is "story" (render.ts), and first in all.css for the pickers. */ .inv[data-layout="story"] { --st-ease: cubic-bezier(.16, 1, .3, 1); /* Paper grain: 64 faint dots on a 96px tile, the first layer of every paper. Too small and faint to read as stars. */ --st-grain: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='96' height='96'%3E%3Cpath fill='%23fff' fill-opacity='.05' d='M41 19h.6v.6h-.6zM50 83h.6v.6h-.6zM6 9h.6v.6h-.6zM68 12h.6v.6h-.6zM46 74h.6v.6h-.6zM7 64h.6v.6h-.6zM27 4h.6v.6h-.6zM11 55h.6v.6h-.6zM53 8h.6v.6h-.6zM30 11h.6v.6h-.6zM70 54h.6v.6h-.6zM7 72h.6v.6h-.6zM15 28h.6v.6h-.6zM80 80h.6v.6h-.6zM74 7h.6v.6h-.6zM73 74h.6v.6h-.6zM50 6h.6v.6h-.6zM28 5h.6v.6h-.6zM71 17h.6v.6h-.6zM37 53h.6v.6h-.6zM18 69h.6v.6h-.6zM15 73h.6v.6h-.6zM39 71h.6v.6h-.6zM87 23h.6v.6h-.6zM13 74h.6v.6h-.6zM73 81h.6v.6h-.6zM24 47h.6v.6h-.6zM12 70h.6v.6h-.6zM91 8h.6v.6h-.6zM72 7h.6v.6h-.6zM79 26h.6v.6h-.6zM63 87h.6v.6h-.6z'/%3E%3Cpath fill='%23000' fill-opacity='.07' d='M68 54h.6v.6h-.6zM40 59h.6v.6h-.6zM74 58h.6v.6h-.6zM46 38h.6v.6h-.6zM31 23h.6v.6h-.6zM89 31h.6v.6h-.6zM10 73h.6v.6h-.6zM38 67h.6v.6h-.6zM63 43h.6v.6h-.6zM93 57h.6v.6h-.6zM36 77h.6v.6h-.6zM9 15h.6v.6h-.6zM65 53h.6v.6h-.6zM21 43h.6v.6h-.6zM19 62h.6v.6h-.6zM53 5h.6v.6h-.6zM85 9h.6v.6h-.6zM71 73h.6v.6h-.6zM40 43h.6v.6h-.6zM88 44h.6v.6h-.6zM76 63h.6v.6h-.6zM74 58h.6v.6h-.6zM8 11h.6v.6h-.6zM34 60h.6v.6h-.6zM89 85h.6v.6h-.6zM8 7h.6v.6h-.6zM93 89h.6v.6h-.6zM39 82h.6v.6h-.6zM73 87h.6v.6h-.6zM57 36h.6v.6h-.6zM91 49h.6v.6h-.6zM85 44h.6v.6h-.6z'/%3E%3C/svg%3E"); } .inv[data-layout="story"] .inv-page { max-width: none; padding-bottom: 0; } .inv[data-layout="story"] .inv-sheet, .inv[data-layout="story"] .inv-side { display: contents; } /* A scene: the section is the paper; .st-w holds the words; .st-art the drawing along its bottom. */ .inv .st-s { position: relative; display: grid; align-content: center; justify-items: center; gap: 14px; min-height: 100vh; min-height: 100svh; padding: 96px 24px; overflow: hidden; background: var(--st-grain) 0 0 / 96px 96px, var(--st-paper, var(--i-bg)); } .st-w { position: relative; z-index: 1; display: grid; gap: 14px; justify-items: center; width: 100%; max-width: 640px; } .st-art { position: absolute; left: 0; right: 0; bottom: 0; z-index: 0; pointer-events: none; } .st-art svg { display: block; width: 100%; height: auto; } /* Words rise in as a scene arrives, one after another; the art a little later and less: two speeds give a diorama's depth without scroll-linked motion. Before JavaScript, in the pickers, for a returning guest and under reduced motion, everything sits at rest, visible and complete. */ @media (prefers-reduced-motion: no-preference) { .st-w > * { transition: opacity .7s var(--st-ease), transform .7s var(--st-ease); transition-delay: var(--d, 0s); } .st-w > :nth-child(2) { --d: .09s; } .st-w > :nth-child(3) { --d: .18s; } .st-w > :nth-child(4) { --d: .27s; } .st-w > :nth-child(5) { --d: .36s; } .st-w > :nth-child(6) { --d: .45s; } .st-art { transition: opacity .9s var(--st-ease), transform .9s var(--st-ease); } html.io .inv.play .st-s:not(.in) .st-w > * { opacity: 0; transform: translateY(18px); } html.io .inv.play .st-s:not(.in) .st-art { opacity: 0; transform: translateY(8px); } } /* A laptop: the same story, one column, every scene's paper across the whole width. */ @media (min-width: 1024px) { .inv[data-layout="story"] { background: var(--i-backdrop); } .inv[data-layout="story"] .inv-page { display: block; max-width: none; padding: 0; } .inv[data-layout="story"] .inv-bar { max-width: none; } .inv[data-layout="story"] .inv-sheet > .inv-sec, .inv[data-layout="story"] .inv-side > .inv-sec { padding-top: 120px; padding-inline: 32px; border: 0; border-radius: 0; box-shadow: none; background: var(--st-grain) 0 0 / 96px 96px, var(--st-paper, var(--i-bg)); } .inv[data-layout="story"] .inv-side .inv-foot { margin: 0; } } /* door.css */ /* The doors (family "door"): the engine every photographed door shares. Markup: styles/door.ts; each door's own few differences: .css, linked after this. Every position comes from the door's layer pack: each element carries its place in both formats (--px/--py/--pw/--ph portrait, --lx/--ly/--lw/--lh landscape) and this file picks the format with the screen's orientation, as the sources pick the files. Linked after cinema.css, first in all.css after it. Animates transform, opacity and filter only. Bump ASSET_VERSION in functions/src/invite/render.ts when this changes. */ /* ---------- formats ---------- */ .inv[data-family=door] .dr-cover,.inv[data-family=door] .dr-after{--dr-ar:var(--dr-par);--dr-ay:var(--dr-pay);--dr-s:var(--dr-ps);--dr-persp:var(--dr-ppersp);--dr-cx:var(--dr-pcx);--dr-cy:var(--dr-pcy);--dr-sill:var(--dr-psill);--dr-ox:var(--dr-pox);--dr-oy:var(--dr-poy);--dr-seam:var(--dr-pseam);--dr-door:var(--dr-pdoor)} .inv[data-family=door] .dr-box{position:absolute;left:var(--px);top:var(--py);width:var(--pw);height:var(--ph)} .inv[data-family=door] .dr-at{position:absolute;left:var(--px);top:var(--py);width:var(--pw);max-width:min(calc(100vw - 36px),46rem);transform:translate(-50%,-50%)} .inv[data-family=door] .dr-kn{transform-origin:var(--dr-kx) var(--dr-ky)} .inv[data-family=door] .dr-leaf{--dr-hx:var(--dr-phx)} @media (min-aspect-ratio:1/1){ .inv[data-family=door] .dr-names,.inv[data-family=door] .dr-date{width:var(--lw)} .inv[data-family=door] .dr-cover,.inv[data-family=door] .dr-after{--dr-ar:var(--dr-lar);--dr-ay:var(--dr-lay);--dr-s:var(--dr-ls);--dr-persp:var(--dr-lpersp);--dr-cx:var(--dr-lcx);--dr-cy:var(--dr-lcy);--dr-sill:var(--dr-lsill);--dr-ox:var(--dr-lox);--dr-oy:var(--dr-loy);--dr-seam:var(--dr-lseam);--dr-door:var(--dr-ldoor)} .inv[data-family=door] .dr-box{left:var(--lx);top:var(--ly);width:var(--lw);height:var(--lh)} .inv[data-family=door] .dr-at{left:var(--lx);top:var(--ly);width:var(--lw)} .inv[data-family=door] .dr-kn{transform-origin:var(--dr-lkx) var(--dr-lky)} .inv[data-family=door] .dr-leaf{--dr-hx:var(--dr-lhx)} } /* ---------- the stage: the photograph's proportions, covering its box, every layer on it ---------- */ .inv[data-family=door] .dr-cover{background:var(--dr-wood);color:#fff;cursor:pointer;-webkit-tap-highlight-color:transparent;-webkit-user-select:none;user-select:none} .inv[data-family=door] .dr-scene{position:absolute;inset:0;overflow:hidden;pointer-events:none} /* min-width and min-height carry through aspect-ratio: the box is the cover box's "cover" size, as object-fit would make it. */ .inv[data-family=door] .dr-stage,.inv[data-family=door] .dr-plate,.inv[data-family=door] .dr-words{position:absolute;left:50%;top:var(--dr-ay);min-width:100%;min-height:100%;aspect-ratio:var(--dr-ar);transform:translate(-50%,calc(-1 * var(--dr-ay)))} .inv[data-family=door] .dr-plate picture,.inv[data-family=door] .dr-plate img{display:block;width:100%;height:100%} .inv[data-family=door] .dr-stage{transform-origin:var(--dr-ox) var(--dr-oy)} .inv[data-family=door] .dr-stage>*{position:absolute;inset:0;display:block} .inv[data-family=door] .dr-stage img{display:block;width:100%;height:100%;-webkit-user-drag:none} .inv[data-family=door] .dr-door{perspective:var(--dr-persp,1400px);perspective-origin:var(--dr-cx) var(--dr-cy)} .inv[data-family=door] .dr-leaf{transform-origin:var(--dr-hx) 50%;-webkit-backface-visibility:visible;backface-visibility:visible} .inv[data-family=door] .dr-leaf picture,.inv[data-family=door] .dr-kn picture{position:absolute;inset:0} /* The light inside the doorway, over the garden and under the leaves: the sun that is waiting behind the door. */ .inv[data-family=door] .dr-sun{background:radial-gradient(60% 45% at var(--dr-ox) 42%,rgba(255,244,214,.95),rgba(255,214,150,.35) 60%,rgba(255,214,150,0));-webkit-clip-path:var(--dr-door);clip-path:var(--dr-door);opacity:0} /* The dark of the doorway behind the closed leaves: a knock's flex shows shadow, never garden. Gone as the door opens. */ .inv[data-family=door] .dr-back{background:var(--dr-dark);-webkit-clip-path:var(--dr-door);clip-path:var(--dr-door)} /* The light that spills over the sill and the steps as the doors open. */ .inv[data-family=door] .dr-stage>.dr-spill{inset:auto;left:var(--dr-cx);top:var(--dr-sill);width:115%;height:30%;background:radial-gradient(closest-side,rgba(255,232,190,.92),rgba(255,214,150,.4) 52%,rgba(255,214,150,0));mix-blend-mode:screen;opacity:0;transform:translate(-50%,-46%)} /* The light the camera passes through at the threshold: it washes the screen as the garden takes over. */ .inv[data-family=door] .dr-veil{position:absolute;inset:-10%;display:block;background:radial-gradient(70% 60% at 50% 55%,rgba(255,244,222,.95),rgba(255,226,180,.7) 55%,rgba(255,214,160,.45));mix-blend-mode:screen;opacity:0;pointer-events:none} /* The seam: a shadow that thumps with each knock, and the light that first shows there. */ .inv[data-family=door] .dr-gap{background:linear-gradient(90deg,rgba(12,6,2,0) 30%,rgba(12,6,2,.75) 50%,rgba(12,6,2,0) 70%);opacity:.45} .inv[data-family=door] .dr-line{background:linear-gradient(90deg,rgba(255,226,170,0) 32%,rgba(255,236,196,.55) 44%,#fffaf0 50%,rgba(255,236,196,.55) 56%,rgba(255,226,170,0) 68%);mix-blend-mode:screen;opacity:0} .inv[data-family=door] .dr-stage>.dr-bloom{inset:auto;left:var(--dr-ox);top:var(--dr-oy);width:130%;aspect-ratio:1;background:radial-gradient(closest-side,rgba(255,236,200,.95),rgba(255,214,150,.5) 38%,rgba(255,200,130,.16) 66%,rgba(255,200,130,0));mix-blend-mode:screen;opacity:0;transform:translate(-50%,-50%) scale(.25)} /* The petals: door.js flies each its own way (transform and opacity only), from where it starts at the box's top-left. Unseen until it does, so a page without it, or with reduced motion or html.calm, has none. */ .inv[data-family=door] .dr-near,.inv[data-family=door] .dr-fall{position:absolute;inset:0;display:block;pointer-events:none} .inv[data-family=door] .dr-fly .dr-petals img,.inv[data-family=door] .dr-near img,.inv[data-family=door] .dr-fall img,.inv[data-family=door] .dr-shower img{position:absolute;left:0;top:0;width:24px;height:auto;max-width:none;opacity:0;-webkit-backface-visibility:visible;backface-visibility:visible;pointer-events:none} /* The one or two that pass close to the camera, out of its focus. */ .inv[data-family=door] .dr-near img{filter:blur(2.6px)} /* The shade a photograph of a doorway has at its top and its foot, where the kicker and the knock line sit; gone as it opens. */ .inv[data-family=door] .dr-cover .dr-scene::after{content:"";position:absolute;inset:0;background:linear-gradient(rgba(18,9,4,.46),rgba(18,9,4,0) 16%,rgba(18,9,4,0) 72%,rgba(18,9,4,.42) 88%,rgba(18,9,4,.62));transition:opacity .5s} .inv[data-family=door] .dr-cover.opening .dr-scene::after{opacity:0} /* ---------- the words on the door ---------- */ /* Their tone follows the place the pack measured: white over a dark scrim on wood (the default), or the wood's own ink over a cream glow on bright stone or haze ([data-ptone=dark] for a portrait screen, [data-ltone=dark] a landscape). */ .inv[data-family=door] .dr-ui{display:block;padding:0;overflow:hidden} .inv[data-family=door] .dr-words{pointer-events:none} .inv[data-family=door] .dr-at{margin:0;text-align:center;color:var(--dr-on,#fff);isolation:isolate} /* A soft local scrim behind each line: dark (or light) where the letters are, gone before any edge. */ .inv[data-family=door] .dr-at::before{content:"";position:absolute;z-index:-1;inset:-40% -14%;background:radial-gradient(closest-side,rgba(var(--dr-shade,18,9,4),var(--dr-scrim,.5)),rgba(var(--dr-shade,18,9,4),0));pointer-events:none} .inv[data-family=door] .dr-kick{font-size:clamp(.98rem,4.4vw,1.2rem);font-weight:600;line-height:1.6;letter-spacing:.01em;--dr-scrim:.55;text-shadow:var(--dr-ts,0 1px 2px rgba(0,0,0,.55),0 0 14px rgba(0,0,0,.45))} .inv[data-family=door] .dr-names{font-family:var(--i-font);font-weight:700;font-size:clamp(3rem,16.8vw,4.7rem);line-height:1.2;--dr-scrim:.42;text-shadow:var(--dr-tsn,0 2px 2px rgba(0,0,0,.4),0 6px 26px rgba(10,5,2,.7))} .inv[data-family=door] .dr-names em{font-style:normal;font-size:.78em;margin-inline:.14em;color:var(--dr-and,var(--dr-accent));text-shadow:var(--dr-ts,0 1px 2px rgba(0,0,0,.6),0 0 18px rgba(0,0,0,.5))} /* Long names on the door: two lines, the first name, then the و with the second, so they stay large in the lower panels. */ .inv[data-family=door] .dr-names[data-stack] span:first-child{display:block} .inv[data-family=door] .dr-names[data-stack] em{margin-inline:0 .22em} .inv[data-family=door] .dr-names[data-len=m]{font-size:clamp(2.6rem,14.2vw,4rem)} .inv[data-family=door] .dr-names[data-len=l]{font-size:clamp(2.4rem,12.6vw,3.5rem);line-height:1.1} .inv[data-family=door] .dr-names[data-len=xl]{font-size:clamp(2rem,10.2vw,2.9rem);line-height:1.1} .inv[data-family=door] .dr-names{width:max(var(--pw),86%)} .inv[data-family=door] .dr-date{width:max(var(--pw),88%);font-size:clamp(.9rem,3.9vw,1.06rem);font-weight:600;--dr-scrim:.6;text-shadow:var(--dr-ts,0 1px 2px rgba(0,0,0,.6),0 0 12px rgba(0,0,0,.5))} .inv[data-family=door] .dr-knock{--dr-scrim:.62} .inv[data-family=door] .dr-open{pointer-events:auto;display:inline-flex;flex-direction:column;align-items:center;gap:10px;min-height:44px;padding:6px 16px;color:var(--dr-on,#fff);text-decoration:none;font-weight:700;font-size:clamp(1rem,4.3vw,1.18rem);text-shadow:var(--dr-ts,0 1px 2px rgba(0,0,0,.6),0 0 14px rgba(0,0,0,.5))} .inv[data-family=door] .dr-open:focus-visible{outline:2px solid currentColor;outline-offset:4px;border-radius:6px} .inv[data-family=door] .dr-open .cn-dots{gap:12px} .inv[data-family=door] .dr-open .cn-dots i{width:9px;height:9px;background:var(--dr-on,#fff);opacity:.5;box-shadow:0 0 0 1.5px rgba(var(--dr-ring,24,12,4),.55),0 0 8px rgba(var(--dr-ring,0,0,0),.3);transition:opacity .25s,transform .25s cubic-bezier(.3,1.6,.5,1),box-shadow .35s} .inv[data-family=door] .dr-open .cn-dots i.on{opacity:1;transform:scale(1.35);background:#fffaf0;box-shadow:0 0 0 1px rgba(255,255,255,.25),0 0 10px 3px var(--dr-glow),0 0 22px 6px rgba(255,214,150,.45)} @media not all and (min-aspect-ratio:1/1){.inv[data-family=door] [data-ptone=dark]{--dr-on:var(--dr-wood);--dr-and:var(--dr-accent-deep);--dr-shade:255,246,230;--dr-ring:255,248,236;--dr-ts:0 1px 1px rgba(255,250,240,.6),0 0 12px rgba(255,244,226,.75);--dr-tsn:0 1px 1px rgba(255,250,240,.55),0 0 24px rgba(255,244,226,.8)}} @media (min-aspect-ratio:1/1){.inv[data-family=door] [data-ltone=dark]{--dr-on:var(--dr-wood);--dr-and:var(--dr-accent-deep);--dr-shade:255,246,230;--dr-ring:255,248,236;--dr-ts:0 1px 1px rgba(255,250,240,.6),0 0 12px rgba(255,244,226,.75);--dr-tsn:0 1px 1px rgba(255,250,240,.55),0 0 24px rgba(255,244,226,.8)}} /* A picker's card that shows the garden the door opens onto (door.ts cardFace, Erbil): the garden's own light, none of the door's shade, and an open link that takes no room (a card is never opened). */ .inv[data-family=door] .dr-face{background:var(--i-accent3)} .inv[data-family=door] .dr-face .dr-scene::after{display:none} .inv[data-family=door] .dr-face .dr-fw{position:absolute;left:5%;right:5%;top:9%;display:grid;justify-items:center;gap:4px;text-align:center;color:var(--dr-on,#fff)} .inv[data-family=door] .dr-face .dr-anames{--dr-base:clamp(2.6rem,14vw,3.6rem);font-size:var(--dr-base);line-height:1.15} .inv[data-family=door] .dr-face .dr-anames:not([data-stack]) em{display:inline;margin-inline:.16em} .inv[data-family=door] .dr-face .dr-anames[data-stack]{--dr-base:clamp(2rem,10vw,2.7rem)} .inv[data-family=door] .dr-face .dr-adate{margin:0;max-width:100%;font-size:clamp(.82rem,3.8vw,1rem)} .inv[data-family=door] .dr-face-open{position:absolute;width:1px;height:1px;overflow:hidden;-webkit-clip-path:inset(50%);clip-path:inset(50%)} /* ---------- the knock: the door answers, the ring swings (door.js says which), the gap thumps ---------- */ .inv[data-family=door] .cn-thump{animation:none} .inv[data-family=door] .cn-thump .dr-leaf{animation:dr-flex .2s cubic-bezier(.3,.6,.4,1)} .inv[data-family=door] .cn-thump .dr-gap{animation:dr-gap .32s ease-out} .inv[data-family=door] .cn-thump:not([data-k=r]) .dr-kn-l,.inv[data-family=door] .cn-thump:not([data-k=l]) .dr-kn-r{animation:dr-ring .85s cubic-bezier(.3,.6,.3,1)} @keyframes dr-flex{35%{transform:rotateY(calc(var(--dr-dir) * 1.4deg))}70%{transform:rotateY(calc(var(--dr-dir) * -.35deg))}} @keyframes dr-gap{25%{opacity:1;transform:scaleX(1.9)}} @keyframes dr-ring{12%{transform:rotate(-12deg)}30%{transform:rotate(8deg)}48%{transform:rotate(-4.5deg)}66%{transform:rotate(2deg)}84%{transform:rotate(-.7deg)}} html.no3d .inv[data-family=door] .cn-thump .dr-leaf{animation-name:dr-flex2d} @keyframes dr-flex2d{35%{transform:scale(.992)}} /* While the guest stands at the door: a thread of light breathes at the seam. */ @media (prefers-reduced-motion:no-preference){.inv[data-family=door] .dr-cover:not(.opening) .dr-line{animation:dr-breathe 3.6s ease-in-out infinite alternate}} @keyframes dr-breathe{from{opacity:.05}to{opacity:.3}} html.calm .inv[data-family=door] .dr-line{animation:none!important} /* ---------- the opening (3.7 s): the seam lights, the leaves swing in, light spills out, the camera goes through ---------- (and door.js lets the breeze take a few petals from the flowers over the arch, down into the doorway) */ .inv[data-family=door] .opening .dr-words{opacity:0;transition:opacity .35s} .inv[data-family=door] .opening .dr-line{animation:dr-line 1.3s .05s ease-out forwards} .inv[data-family=door] .opening .dr-gap{animation:dr-out .5s .45s forwards} .inv[data-family=door] .opening .dr-back{animation:dr-out .7s .12s ease-in forwards} .inv[data-family=door] .opening .dr-spill{animation:dr-spill 2.6s .75s ease-out forwards} /* The sharp garden rides the camera's move from where the move lands on it (door.ts measures where the after-hero sits in the garden plate: --dr-pinto), fading in over its last stretch, so only the sharpness changes. A landscape screen's move stops short of the doorway: there it comes in over the light at the threshold. */ .inv[data-family=door] .opening .dr-into{will-change:transform,opacity;transform-origin:0 0;animation:dr-ride 1.3s 2.05s cubic-bezier(.55,0,.22,1) both,dr-in .62s 2.78s ease-out both} @media (min-aspect-ratio:1/1){.inv[data-family=door] .opening .dr-into{transform-origin:50% 50%;animation:dr-into .62s 2.78s cubic-bezier(.3,0,.25,1) forwards}} .inv[data-family=door] .opening .dr-veil{animation:dr-veil 1s 2.5s ease-in-out forwards} .inv[data-family=door] .opening .dr-leaf{will-change:transform;animation:dr-swing 1.85s .42s cubic-bezier(.55,0,.2,1) forwards} .inv[data-family=door] .opening .dr-wood{animation:dr-dim 1.85s .42s ease-in forwards} .inv[data-family=door] .opening .dr-sun{animation:dr-sun 2.6s .5s ease-out forwards} .inv[data-family=door] .opening .dr-bloom{animation:dr-bloom 3s .6s ease-out forwards} .inv[data-family=door] .opening .dr-stage{will-change:transform;animation:dr-push 1.3s 2.05s cubic-bezier(.55,0,.22,1) forwards} .inv[data-family=door] .dr-cover.opening{animation:dr-out .45s 3.2s linear forwards} @keyframes dr-line{0%{opacity:0;transform:scaleY(.12)}28%{opacity:1;transform:scaleY(1)}50%{opacity:1;transform:scaleX(2.2)}to{opacity:0;transform:scaleX(6)}} @keyframes dr-swing{0%{transform:none}7%{transform:rotateY(calc(var(--dr-dir) * 3.2deg))}13%{transform:rotateY(calc(var(--dr-dir) * 2deg))}to{transform:rotateY(calc(var(--dr-dir) * 100deg))}} @keyframes dr-dim{to{filter:brightness(.5)}} @keyframes dr-sun{0%{opacity:0}40%{opacity:.9}to{opacity:.32}} @keyframes dr-spill{0%{opacity:0}45%{opacity:.85}to{opacity:.45}} @keyframes dr-veil{0%{opacity:0}45%{opacity:.62}to{opacity:0}} /* A landscape screen's move stops short of the doorway (its walls still show), so the hand-over to the garden is a larger change: the light at the threshold is brighter there, at its height as the two pictures cross. */ @media (min-aspect-ratio:1/1){.inv[data-family=door] .opening .dr-veil{animation-name:dr-veil-l}} @keyframes dr-veil-l{0%{opacity:0}45%{opacity:.88}to{opacity:0}} @keyframes dr-into{from{opacity:0;transform:translate(-50%,calc(-1 * var(--dr-ay))) scale(.9)}to{opacity:1;transform:translate(-50%,calc(-1 * var(--dr-ay)))}} @keyframes dr-ride{from{transform:translate(-50%,calc(-1 * var(--dr-ay))) var(--dr-pinto,translate(5%,5%) scale(.9))}to{transform:translate(-50%,calc(-1 * var(--dr-ay))) translate(0,0) scale(1)}} @keyframes dr-in{from{opacity:0}to{opacity:1}} @keyframes dr-bloom{0%{opacity:0;transform:translate(-50%,-50%) scale(.25)}45%{opacity:.92;transform:translate(-50%,-50%) scale(1)}to{opacity:.38;transform:translate(-50%,-50%) scale(1.25)}} @keyframes dr-push{from{transform:translate(-50%,calc(-1 * var(--dr-ay)))}to{transform:translate(-50%,calc(-1 * var(--dr-ay))) scale(var(--dr-s))}} @keyframes dr-out{to{opacity:0}} /* Without 3D the leaves slide apart, under the stone. */ html.no3d .inv[data-family=door] .opening .dr-leaf{animation-name:dr-slide} @keyframes dr-slide{0%{transform:none}13%{transform:translateX(calc(var(--dr-dir) * -2%))}to{transform:translateX(calc(var(--dr-dir) * -100%))}} /* ---------- where the camera stops: the page's first section, the same stage, opened and pushed in ---------- */ .inv[data-family=door] .inv-bar{position:fixed;left:0;right:0;margin:0 auto} .inv[data-family=door] .dr-after{position:-webkit-sticky;position:sticky;top:0;z-index:0;display:block;height:100vh;height:100svh;min-height:440px;overflow:hidden;color:#fff;background:var(--dr-wood);isolation:isolate} .inv[data-family=door] .dr-after .dr-stage{transform:translate(-50%,calc(-1 * var(--dr-ay))) scale(var(--dr-s))} .inv[data-family=door] .dr-after .dr-leaf{transform:rotateY(calc(var(--dr-dir) * 100deg))} .inv[data-family=door] .dr-after .dr-wood{filter:brightness(.5)} .inv[data-family=door] .dr-after .dr-gap,.inv[data-family=door] .dr-after .dr-line{display:none} .inv[data-family=door] .dr-after .dr-sun{opacity:.32} .inv[data-family=door] .dr-after .dr-stage>.dr-bloom{opacity:.38;transform:translate(-50%,-50%) scale(1.25)} .inv[data-family=door] .dr-after .dr-back{display:none} .inv[data-family=door] .dr-after .dr-stage>.dr-spill{opacity:.45} .inv[data-family=door] .dr-plate.dr-into{opacity:0} html.no3d .inv[data-family=door] .dr-after .dr-leaf{transform:translateX(calc(var(--dr-dir) * -100%))} /* The garden's light: warm at the top, a little dusk at the foot for the cue, the edges held. */ .inv[data-family=door] .dr-light{position:absolute;inset:0;background:linear-gradient(rgba(20,10,4,.3),rgba(20,10,4,.08) 30%,rgba(20,10,4,0) 52%,rgba(20,10,4,0) 70%,rgba(20,10,4,.5))} .inv[data-family=door] .dr-awords{display:grid;grid-template-columns:minmax(0,1fr);justify-items:center;gap:8px;--dr-scrim:.5;transform:translate(-50%,calc(-50% + var(--dr-nudge,0px)))} .inv[data-family=door] .dr-awords::before{inset:-30% -14%} .inv[data-family=door] .dr-anames{margin:0;font-family:var(--i-font);font-weight:700;--dr-base:clamp(3.3rem,17.6vw,5.2rem);font-size:var(--dr-base);line-height:1.12;text-shadow:var(--dr-tsn,0 2px 3px rgba(40,18,6,.45),0 8px 34px rgba(40,18,6,.6))} .inv[data-family=door] .dr-anames span{display:block} .inv[data-family=door] .dr-anames em{display:block;font-style:normal;font-size:.62em;line-height:1;color:var(--dr-and,var(--dr-accent));text-shadow:var(--dr-ts,0 1px 2px rgba(0,0,0,.5),0 0 20px rgba(40,18,6,.5))} .inv[data-family=door] .dr-anames[data-len=l]{--dr-base:clamp(2.6rem,12.5vw,3.8rem)} .inv[data-family=door] .dr-anames[data-len=xl]{--dr-base:clamp(2.1rem,10vw,3rem)} .inv[data-family=door] .dr-adate{width:max-content;max-width:min(calc(100vw - 32px),46rem);margin:6px 0 0;font-weight:700;font-size:clamp(.92rem,4.4vw,1.2rem);line-height:1.5;text-align:center;color:var(--dr-on,#fffaf0);text-shadow:var(--dr-ts,0 1px 2px rgba(0,0,0,.7),0 0 10px rgba(20,8,2,.75),0 0 26px rgba(20,8,2,.5))} /* The date's two halves keep together; it breaks between them only on a phone too narrow for one line. */ .inv[data-family=door] .dr-adate span{white-space:nowrap} /* ---------- the names over the garden fit its calm sky, never the far arch's flowers (v8) ---------- door.ts centres the words in the door's sky (DoorConfig.sky, measured on the after-hero) and gives its height as a fraction of the photograph's (--dr-pskh, --dr-lskh) and the photograph's proportions (--dr-pfr, --dr-lfr). The garden covers its section, which is the screen's width and max(440px, 100svh) tall, so on screen the photograph is as tall as the larger of those and the width × fr. The names (2.86 of their size: two lines and the و) are no larger than lets them and the rest (the date and the gaps, and the couple's photo) fit that much of it, and never smaller than 2.3rem. Units of the screen, on the garden's own rules only: nothing here a phone on iOS 15 drops. A picker's card keeps the sizes above. */ .inv[data-family=door] .dr-after{--dr-skh:var(--dr-pskh,10);--dr-fr:var(--dr-pfr,1.8)} @media (min-aspect-ratio:1/1){.inv[data-family=door] .dr-after{--dr-skh:var(--dr-lskh,10);--dr-fr:var(--dr-lfr,.56)}} .inv[data-family=door] .dr-after .dr-anames{--dr-fit:calc((max(440px,100vh,100vw * var(--dr-fr)) * var(--dr-skh) - var(--dr-rest,48px)) / 2.86);font-size:max(2.3rem,min(var(--dr-base),var(--dr-fit)))} @supports (height:100svh){.inv[data-family=door] .dr-after .dr-anames{--dr-fit:calc((max(440px,100svh,100vw * var(--dr-fr)) * var(--dr-skh) - var(--dr-rest,48px)) / 2.86)}} .inv[data-family=door] .dr-after .dr-hasphoto .dr-anames{--dr-rest:calc(78px + 1.25 * min(200px,17vh))} @media (max-width:345px){.inv[data-family=door] .dr-after .dr-anames{--dr-rest:76px}} .inv[data-family=door] .dr-after .dr-photo{width:min(46%,200px);width:min(46%,200px,17svh);aspect-ratio:4/5;padding:5px;margin-bottom:6px;border-radius:999px 999px 14px 14px;background:linear-gradient(150deg,rgba(255,240,205,.9),rgba(214,178,110,.75));box-shadow:0 0 0 1px rgba(255,255,255,.35),0 0 46px 10px rgba(255,220,160,.45),0 18px 30px -14px rgba(30,12,4,.6)} .inv[data-family=door] .dr-photo img{display:block;width:100%;height:100%;object-fit:cover;border-radius:999px 999px 10px 10px} .inv[data-family=door] .dr-cue{position:absolute;left:50%;bottom:calc(22px + env(safe-area-inset-bottom));width:46px;height:46px;margin-left:-23px;border-radius:50%;border:1.5px solid rgba(255,255,255,.8);background:rgba(20,10,4,.32);-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);box-shadow:0 6px 18px rgba(0,0,0,.3)} /* On a demo page the cue sits above the bar that sells the design (invite.css). */ .inv[data-family=door][data-demo="1"] .dr-cue{bottom:calc(96px + env(safe-area-inset-bottom))} .inv[data-family=door] .dr-cue i{position:absolute;left:50%;top:50%;width:11px;height:11px;margin:-8px 0 0 -5.5px;border:solid #fff;border-width:0 2px 2px 0;transform:rotate(45deg)} .inv[data-family=door] .dr-motes{position:absolute;inset:0} .inv[data-family=door] .dr-motes i{position:absolute;left:var(--x);top:var(--y);width:3px;height:3px;border-radius:50%;background:rgba(255,246,222,.9);box-shadow:0 0 6px 1px rgba(255,226,170,.7);opacity:0} .inv[data-family=door] .dr-motes i:nth-child(1){--x:22%;--y:58%}.inv[data-family=door] .dr-motes i:nth-child(2){--x:64%;--y:46%}.inv[data-family=door] .dr-motes i:nth-child(3){--x:41%;--y:70%}.inv[data-family=door] .dr-motes i:nth-child(4){--x:78%;--y:62%} .inv[data-family=door] .dr-motes i:nth-child(5){--x:33%;--y:38%}.inv[data-family=door] .dr-motes i:nth-child(6){--x:56%;--y:76%}.inv[data-family=door] .dr-motes i:nth-child(7){--x:12%;--y:44%}.inv[data-family=door] .dr-motes i:nth-child(8){--x:86%;--y:34%} @media (prefers-reduced-motion:no-preference){ .inv[data-family=door] .dr-cue.on i{animation:dr-cue 1.8s ease-in-out infinite} .inv[data-family=door] .dr-motes.on i{animation:dr-mote 9s linear infinite} .inv[data-family=door] .dr-motes.on i:nth-child(2n){animation-duration:12s;animation-delay:-4s}.inv[data-family=door] .dr-motes.on i:nth-child(3n){animation-duration:10.5s;animation-delay:-7s} html.io .inv[data-family=door].play .dr-after .dr-awords>*{animation:dr-rise 1.1s .3s cubic-bezier(.16,1,.3,1) backwards} html.io .inv[data-family=door].play .dr-after .dr-awords>:nth-child(2){animation-delay:.42s}html.io .inv[data-family=door].play .dr-after .dr-awords>:nth-child(3){animation-delay:.54s} html.io .inv[data-family=door].play .dr-after .dr-cue{animation:dr-fadein .8s 1s backwards} } html.calm .inv[data-family=door] .dr-motes i,html.calm .inv[data-family=door] .dr-cue i{animation:none!important} @keyframes dr-cue{0%,100%{transform:translateY(-2px) rotate(45deg)}50%{transform:translateY(4px) rotate(45deg)}} @keyframes dr-mote{0%{opacity:0;transform:translate(0,0)}15%{opacity:.9}85%{opacity:.7}to{opacity:0;transform:translate(14px,-90px)}} @keyframes dr-rise{from{opacity:0;transform:translateY(18px) scale(.985)}} @keyframes dr-fadein{from{opacity:0}} /* ---------- reading on: the garden stays and the page is laid over it ---------- The after-hero is sticky; the page after it is a card (.dr-card, behind the sections, which sit above it) with a shadow on its top edge, sliding up over the garden. While it covers the garden, and only then, the garden leans in (1 to 1.06) and dims, the names and date drift up 40px and go, and the cue goes as soon as the page moves. Scroll-driven animations where the browser has them (below); door.js does the same elsewhere, and hides the garden once covered. Reduced motion and html.calm: the page scrolls plainly over a still garden. Transform and opacity only. No ancestor of the garden is ever overflow:hidden, which would make it the scroller and stop sticky: the page and .inv clip sideways (overflow-x:clip), and a browser without clip (Safari before 16) leaves them visible, never hidden. Nothing reaches past the screen's sides: the garden's own overflow:hidden holds its layers. */ .inv[data-family=door] .dr-after,.inv[data-family=door] .dr-card,.inv[data-family=door] .inv-page::before,.inv[data-family=door] .inv-page::after{--dr-span:max(440px,100vh)} @supports (height:100svh){.inv[data-family=door] .dr-after,.inv[data-family=door] .dr-card,.inv[data-family=door] .inv-page::before,.inv[data-family=door] .inv-page::after{--dr-span:max(440px,100svh)}} .inv[data-family=door] .inv-page{overflow-x:visible;overflow-x:clip;background:none} .inv[data-family=door] .dr-lift,.inv[data-family=door] .dr-hint{position:absolute;inset:0;display:block;pointer-events:none} .inv[data-family=door] .dr-after .dr-dim{position:absolute;inset:0;display:block;background:#140a04;opacity:0} .inv[data-family=door] .dr-card{position:absolute;left:0;right:0;top:var(--dr-span);bottom:0;z-index:0;border-radius:26px 26px 0 0;background:linear-gradient(var(--i-accent2),var(--i-accent2)) 10px 30px/1px calc(100% - 30px) no-repeat,linear-gradient(var(--cn-g),var(--cn-g)) 14px 30px/1px calc(100% - 30px) no-repeat,linear-gradient(var(--i-accent2),var(--i-accent2)) calc(100% - 10px) 30px/1px calc(100% - 30px) no-repeat,linear-gradient(var(--cn-g),var(--cn-g)) calc(100% - 14px) 30px/1px calc(100% - 30px) no-repeat,var(--cn-paper,none) 0 0/384px,var(--i-bg);box-shadow:0 -14px 30px -10px rgba(16,8,3,.5),inset 0 1px 0 rgba(255,252,244,.7)} .inv[data-family=door] .inv-sheet>*,.inv[data-family=door] .inv-side>*{position:relative;z-index:1} /* Once the page covers the garden it is not drawn at all, its loops stopped (door.js). */ .inv[data-family=door] .dr-after.dr-under{visibility:hidden} .inv[data-family=door] .dr-after.dr-under .dr-motes i,.inv[data-family=door] .dr-after.dr-under .dr-cue i{animation-play-state:paused} @media (prefers-reduced-motion:no-preference){@supports (animation-timeline:scroll()){ html:not(.calm) .inv[data-family=door] .dr-after .dr-scene{animation:dr-lean linear both;animation-timeline:scroll(root);animation-range:0 var(--dr-span)} html:not(.calm) .inv[data-family=door] .dr-after .dr-dim{animation:dr-dusk linear both;animation-timeline:scroll(root);animation-range:0 var(--dr-span)} html:not(.calm) .inv[data-family=door] .dr-lift{animation:dr-drift linear both;animation-timeline:scroll(root);animation-range:0 calc(var(--dr-span) * .7)} html:not(.calm) .inv[data-family=door] .dr-hint{animation:dr-out linear both;animation-timeline:scroll(root);animation-range:0 90px} }} @keyframes dr-lean{to{transform:scale(1.06)}} @keyframes dr-dusk{to{opacity:.34}} @keyframes dr-drift{to{opacity:0;transform:translateY(-40px)}} /* ---------- the page: the cream letter, in the door's palette ---------- */ .inv[data-family=door]{overflow-x:visible;overflow-x:clip} .inv[data-family=door] .inv-page{max-width:none} .inv[data-family=door] .cn-sec{padding-inline:max(26px,calc(50% - 290px))} /* A handful of real petals on the paper, placed by hand, never a pattern. */ .inv[data-family=door] .cn-hero::before,.inv[data-family=door] .cn-when::after,.inv[data-family=door] .cn-where::before,.inv[data-family=door] .cn-rsvp::after,.inv[data-family=door] .cn-wishes::before,.inv[data-family=door] .cn-tag::after{content:"";position:absolute;width:34px;height:34px;background:var(--dr-petal-1) center/contain no-repeat;pointer-events:none;filter:drop-shadow(0 3px 3px rgba(60,30,10,.18))} .inv[data-family=door] .cn-hero::before{top:20px;inset-inline-start:22px;transform:rotate(-28deg)} .inv[data-family=door] .cn-when::after{top:30px;inset-inline-end:20px;width:26px;height:26px;background-image:var(--dr-petal-2);transform:rotate(40deg)} .inv[data-family=door] .cn-where::before{bottom:18px;inset-inline-start:16px;width:30px;height:30px;background-image:var(--dr-petal-3);transform:rotate(12deg)} .inv[data-family=door] .cn-rsvp::after{top:22px;inset-inline-end:14px;width:28px;height:28px;transform:rotate(-62deg)} .inv[data-family=door] .cn-wishes::before{top:26px;inset-inline-start:18px;width:24px;height:24px;background-image:var(--dr-petal-2);transform:rotate(18deg)} .inv[data-family=door] .cn-tag::after{bottom:8px;inset-inline-end:26%;width:22px;height:22px;background-image:var(--dr-petal-3);transform:rotate(-34deg)} /* The families' invitation, an invitation card: a double gold rule on the surface, the words set like a letter. */ .inv[data-family=door] .cn-hero{padding-top:44px} .inv[data-family=door] .cn-hero .lead{position:relative;width:100%;max-width:30rem;margin:4px 0 2px;padding:26px 22px 24px;font-size:1.08rem;line-height:2;color:var(--i-ink);background:var(--i-surface);border:1px solid var(--i-accent2);box-shadow:inset 0 0 0 4px var(--i-surface),inset 0 0 0 5px var(--cn-g),0 22px 34px -28px var(--i-shadow)} .inv[data-family=door] .cn-hero .lead::before,.inv[data-family=door] .cn-hero .lead::after{content:"";position:absolute;left:50%;width:9px;height:9px;margin-left:-4.5px;background:var(--i-accent2);transform:rotate(45deg);box-shadow:0 0 0 3px var(--i-surface)} .inv[data-family=door] .cn-hero .lead::before{top:-5px}.inv[data-family=door] .cn-hero .lead::after{bottom:-5px} .inv[data-family=door] .cn-names{color:var(--i-ink)} .inv[data-family=door] .cn-names em{color:var(--i-accent-ink)} .inv[data-family=door] .cn-hero .bless{color:var(--i-muted)} /* The countdown as tiles of the door's own walnut, the numerals in gold. */ .inv[data-family=door] .cn-cd{gap:8px;max-width:400px} .inv[data-family=door] .cn-cd div{padding:12px 2px 9px;border-radius:12px;background:linear-gradient(162deg,#56382a,#2f1c12 72%);box-shadow:inset 0 0 0 1px rgba(226,190,120,.42),inset 0 1px 0 rgba(255,236,200,.18),0 12px 20px -14px rgba(40,20,8,.75)} .inv[data-family=door] .cn-cd div+div{border-inline-start:0} .inv[data-family=door] .cn-cd strong{color:#ECD39A;font-size:clamp(1.9rem,9vw,2.5rem);line-height:1.15;text-shadow:0 1px 0 rgba(0,0,0,.4)} .inv[data-family=door] .cn-cd span{color:rgba(255,240,214,.78);font-size:.78rem} /* The programme: the gold line, a dot of the flowers' colour for each moment. */ .inv[data-family=door] .cn-prog .programme li::before{background:var(--i-accent);box-shadow:0 0 0 3px var(--i-bg),0 0 0 4px var(--i-accent2)} /* Buttons and links as brass on walnut. */ .inv[data-family=door] .btn.cn-btn,.inv[data-family=door] .contact-call{display:inline-flex;align-items:center;justify-content:center;gap:8px;min-height:46px;padding:10px 24px;border:0;border-radius:999px;background:linear-gradient(160deg,#4c3122,#2d1b11);color:#F1DDAD;font-weight:700;font-size:.98rem;text-decoration:none;box-shadow:inset 0 0 0 1px rgba(226,190,120,.55),0 12px 22px -14px rgba(40,20,8,.8)} .inv[data-family=door] .btn.cn-btn svg{width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:1.8} .inv[data-family=door] .calendar{gap:12px} .inv[data-family=door] .calendar a{min-height:44px;padding:8px 20px;border:1px solid var(--i-accent2);border-radius:999px;background:var(--i-surface);color:var(--i-ink);font-weight:700;font-size:.95rem;box-shadow:0 8px 16px -14px var(--i-shadow)} .inv[data-family=door] .calendar a::before{content:"";width:16px;height:16px;background:var(--i-accent-ink);-webkit-mask:var(--dr-cal) center/contain no-repeat;mask:var(--dr-cal) center/contain no-repeat} .inv[data-family=door]{--dr-cal:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.8' stroke-linecap='round'%3E%3Crect x='3.5' y='5' width='17' height='15' rx='2.5'/%3E%3Cpath d='M3.5 10h17M8 3v4M16 3v4'/%3E%3C/svg%3E")} .inv[data-family=door] .cn-hall{border-radius:999px 999px 6px 6px;border-width:6px} /* The note: a card of its own, the flourishes kept. */ .inv[data-family=door] .cn-note{max-width:30rem;padding:30px 24px;background:var(--i-surface);box-shadow:0 0 0 1px var(--i-line),0 18px 30px -26px var(--i-shadow)} .inv[data-family=door] .cn-note::before{top:-5px}.inv[data-family=door] .cn-note::after{bottom:-5px} /* The reply: the double-ruled card on the surface; yes in the flowers' colour, no in a quiet outline. */ .inv[data-family=door] .cn-card,.inv[data-family=door] .cn-wishes .wish-form{background:var(--i-surface);box-shadow:0 26px 40px -34px var(--i-shadow)} .inv[data-family=door] .rsvp-actions .btn,.inv[data-family=door] .wish-form .btn{border-radius:999px;min-height:48px} .inv[data-family=door] .rsvp-actions .btn:not(.soft){background:var(--i-btn);color:var(--i-btn-ink);box-shadow:0 0 0 2px var(--i-surface),0 0 0 3px var(--i-accent2),0 14px 22px -14px var(--i-shadow)} .inv[data-family=door] .rsvp-actions .btn.soft{background:transparent;color:var(--i-ink);border:1px solid var(--i-ink-line);box-shadow:none} /* The wishes: each signed with an initial in a coloured disc, the colours in turn. */ .inv[data-family=door] .wish{align-items:start} .inv[data-family=door] .wish-i{display:grid;place-items:center;width:42px;height:42px;min-width:0;border-radius:50%;background:var(--dr-c,var(--i-accent));color:#fff;font-size:1.25rem;line-height:1;box-shadow:inset 0 -3px 0 rgba(0,0,0,.14)} .inv[data-family=door] .wish:nth-child(4n+2) .wish-i{--dr-c:var(--i-accent2)} .inv[data-family=door] .wish:nth-child(4n+3) .wish-i{--dr-c:var(--dr-wood)} .inv[data-family=door] .wish:nth-child(4n) .wish-i{--dr-c:var(--i-muted)} .inv[data-family=door] .hashtag{display:inline-block;padding:6px 20px;border-radius:999px;background:var(--i-soft);color:var(--i-accent-ink)} /* A "yes": the door's petals fall over the page, as they fell through the doorway (door.js). */ .inv[data-family=door] .dr-shower{position:fixed;inset:0;z-index:35;overflow:hidden;pointer-events:none} /* ---------- squarish screens: the words follow the box, not the photograph, so none is cut ---------- */ @media (min-aspect-ratio:5/8) and (max-aspect-ratio:1/1),(min-aspect-ratio:1/1) and (max-aspect-ratio:159/100){ .inv[data-family=door] .dr-cover .dr-words{left:0;top:0;width:100%;height:100%;min-width:0;min-height:0;aspect-ratio:auto;transform:none} } /* ---------- a laptop: the door in its landscape photograph, the page a sheet on the blurred garden ---------- */ @media (min-aspect-ratio:1/1){ /* The words on the wall beside the door: the wall in the shade of a passing cloud there, the letters larger. */ .inv[data-family=door] .dr-cover .dr-scene::after{background:radial-gradient(40% 62% at var(--dr-lwx,78%) var(--dr-lwy,60%),rgba(var(--dr-shade,18,9,4),.42),rgba(var(--dr-shade,18,9,4),0)),linear-gradient(rgba(18,9,4,0) 80%,rgba(18,9,4,.3))} .inv[data-family=door] .dr-names{font-size:clamp(3.6rem,6.2vw,6.4rem)} .inv[data-family=door] .dr-names[data-len=m]{font-size:clamp(3rem,4.8vw,5rem)} .inv[data-family=door] .dr-names[data-len=l],.inv[data-family=door] .dr-names[data-len=xl]{font-size:clamp(2.4rem,3.9vw,4rem)} .inv[data-family=door] .dr-kick,.inv[data-family=door] .dr-date{font-size:clamp(.95rem,1.5vw,1.3rem)} .inv[data-family=door] .dr-open{font-size:clamp(1rem,1.5vw,1.3rem)} .inv[data-family=door] .dr-anames{--dr-base:clamp(3.4rem,7.4vw,7.2rem)} .inv[data-family=door] .dr-anames[data-len=l],.inv[data-family=door] .dr-anames[data-len=xl]{--dr-base:clamp(2.6rem,4.8vw,4.8rem)} .inv[data-family=door] .dr-adate{font-size:clamp(1rem,1.6vw,1.35rem)} } @media (min-width:1024px){ /* Behind the sheet, the garden the page opened on, out of focus: framed as the after-hero is at the end of its lean (cover, the same point held, 1.06), so the garden's going out of focus as the sheet covers it is a pull of focus. */ .inv[data-family=door]::before{content:"";position:fixed;inset:0;background:linear-gradient(rgba(255,236,204,.12),rgba(40,22,10,.3)),var(--dr-garden,none) 50% var(--dr-gy,50%)/cover;filter:blur(24px) brightness(.84) saturate(1.1);transform:scale(1.06)} .inv[data-family=door] .inv-page{max-width:640px;margin:0 auto 80px;padding-top:0;overflow:visible;background:none;box-shadow:none} .inv[data-family=door] .dr-after{width:100vw;margin-inline:calc(50% - 50vw);background:none} .inv[data-family=door] .cn-sec{padding-inline:48px} .inv[data-family=door] .inv-page::before,.inv[data-family=door] .inv-page::after{top:var(--dr-span);z-index:1} .inv[data-family=door] .dr-card{border-radius:4px 4px 0 0;background-color:var(--i-bg);background-image:linear-gradient(var(--i-accent2),var(--i-accent2)),linear-gradient(var(--cn-g),var(--cn-g)),linear-gradient(var(--i-accent2),var(--i-accent2)),linear-gradient(var(--cn-g),var(--cn-g)),var(--cn-paper,none);background-size:1px 100%,1px 100%,1px 100%,1px 100%,384px;background-position:16px 0,21px 0,calc(100% - 16px) 0,calc(100% - 21px) 0,0 0;background-repeat:no-repeat,no-repeat,no-repeat,no-repeat,repeat;box-shadow:0 -18px 40px -14px rgba(10,5,2,.55),0 40px 70px -40px rgba(30,18,8,.55),0 2px 8px rgba(30,18,8,.16)} @keyframes dr-lean-l{to{transform:scale(1.06);opacity:0}} @media (prefers-reduced-motion:no-preference){@supports (animation-timeline:scroll()){html:not(.calm) .inv[data-family=door] .dr-after .dr-scene{animation-name:dr-lean-l}}} } /* ---------- English (2026-10-03, PLAN-EN 3.3): Latin words on the door, over the garden and on the letter ---------- Scoped to .inv[lang="en"]: a Kurdish or Arabic door never meets these. Latin names run 1.3 to 1.6 times as wide as Kurdish ones (themes.ts LATIN k), so every place that fits names to a box fits them by width too: door.ts writes their widths in em of the names face (--nl the pair on one line, --nm2 the wider of the door's two stacked lines, --nm the wider name) and the boxes as fractions of the frame (--dr-pnw/--dr-lnw the names on the door, --dr-pskw/--dr-lskw the garden's sky), and door.js measures them once the faces are in. */ /* The kicker and the date on the door are labels: the label face, uppercase and tracked, 0.82 of their size. */ .inv[lang="en"][data-family=door] .dr-kick,.inv[lang="en"][data-family=door] .dr-date{font-family:var(--i-label);font-weight:500;text-transform:uppercase;letter-spacing:.16em;font-variant-numeric:lining-nums} .inv[lang="en"][data-family=door] .dr-kick{font-size:clamp(.8rem,3.6vw,.98rem)} /* The countdown's units at the labels' size (invite.css), over this frame's own .78rem. */ .inv[lang="en"][data-family=door] .cn-cd span{font-size:.64rem} /* On a phone the kicker's place is the top of the photograph, far above the names: there it reads the occasion alone, "A Wedding Celebration" (door.ts kick), set on the same shade as the date and a little stronger, since the top is often bright flowers (Erbil's jasmine); on a laptop the kicker stands directly above the names: "The Wedding of". */ .inv[lang="en"][data-family=door] .dr-kl{display:none} @media not all and (min-aspect-ratio:1/1){ .inv[lang="en"][data-family=door] .dr-kick{font-weight:600;--dr-scrim:.66;text-shadow:var(--dr-ts,0 1px 2px rgba(0,0,0,.75),0 0 10px rgba(0,0,0,.6),0 0 24px rgba(0,0,0,.4))} .inv[lang="en"][data-family=door] .dr-kick::before{inset:-120% -8%} } .inv[lang="en"][data-family=door] .dr-date{font-size:clamp(.74rem,3.2vw,.87rem);letter-spacing:.14em} /* The "&" in its own face, italic; on the door's two lines it is tied to the second name by a no-break space. */ .inv[lang="en"][data-family=door] .dr-names em,.inv[lang="en"][data-family=door] .dr-anames em{font-family:var(--i-and);font-style:italic} .inv[lang="en"][data-family=door] .dr-names[data-stack] em{margin-inline:0} /* The names on the door: each size (as above, --dr-ns) capped so the pair on one line, or the wider of its two lines, fits the names' box: as wide as the pack's place for them (at least 86% of the photograph on a phone), never past the screen's margins. Never under 0.72 of the size: past that a pair wraps at its one break, "Vian" / "& Hemin", and door.js gives it the stacked sizes. The photograph is at least as wide as the screen (wider on a tall phone or a 16:10 laptop, which only makes this cap a little cautious): no vh on the cover, where a picker's card is not the screen. */ .inv[lang="en"][data-family=door] .dr-cover{--dr-nbox:min(100vw - 36px,46rem,100vw * max(var(--dr-pnw,.62),.86))} .inv[lang="en"][data-family=door] .dr-names{--dr-ns:clamp(3rem,16.8vw,4.7rem);--dr-ncap:calc(var(--dr-nbox) / var(--nl,5.8));font-size:min(var(--dr-ns),max(var(--dr-ns) * .72,var(--dr-ncap)))} .inv[lang="en"][data-family=door] .dr-names[data-stack]{--dr-ncap:calc(var(--dr-nbox) / var(--nm2,4))} .inv[lang="en"][data-family=door] .dr-names[data-len=m]{--dr-ns:clamp(2.6rem,14.2vw,4rem)} .inv[lang="en"][data-family=door] .dr-names[data-len=l]{--dr-ns:clamp(2.4rem,12.6vw,3.5rem)} .inv[lang="en"][data-family=door] .dr-names[data-len=xl]{--dr-ns:clamp(2rem,10.2vw,2.9rem)} /* A picker's card of the garden (cardFace): the same, in the card's 90%. */ .inv[lang="en"][data-family=door] .dr-face .dr-anames{font-size:min(var(--dr-base),max(var(--dr-base) * .72,90vw / var(--nl,5.8)))} .inv[lang="en"][data-family=door] .dr-face .dr-anames[data-stack]{font-size:min(var(--dr-base),max(var(--dr-base) * .72,90vw / var(--nm2,4)))} /* The names over the garden fit its sky's width as well as its height: the photograph is as wide as it is tall over fr, the sky that fraction of it (--dr-skyw), the wider name --nm em. The date stays inside the sky too, breaking between its halves ("Thursday," / "20 May 2027") only where the sky is narrower than it. */ .inv[lang="en"][data-family=door] .dr-after{--dr-skw:var(--dr-pskw,.72);--dr-skyw:calc(max(440px,100vh,100vw * var(--dr-fr)) / var(--dr-fr) * var(--dr-skw))} @supports (height:100svh){.inv[lang="en"][data-family=door] .dr-after{--dr-skyw:calc(max(440px,100svh,100vw * var(--dr-fr)) / var(--dr-fr) * var(--dr-skw))}} .inv[lang="en"][data-family=door] .dr-after .dr-anames{font-size:max(2.3rem,min(var(--dr-base),var(--dr-fit),var(--dr-skyw) / var(--nm,4)))} .inv[lang="en"][data-family=door] .dr-after .dr-adate{max-width:min(calc(100vw - 32px),46rem,var(--dr-skyw))} /* The letter: the families' card in Latin rhythm, and the line that finishes its sentence after the names, plain on the paper (it is not a second card); the page's names in their column. */ .inv[lang="en"][data-family=door] .cn-hero .lead{font-size:1.1rem;line-height:1.55} .inv[lang="en"][data-family=door] .cn-hero .lead-after{margin:-4px 0 0;padding:0;font-size:1.1rem;color:var(--i-ink);background:none;border:0;box-shadow:none} .inv[lang="en"][data-family=door] .cn-hero .lead-after::before,.inv[lang="en"][data-family=door] .cn-hero .lead-after::after{content:none} .inv[lang="en"][data-family=door]{--cn-col:min(100vw - 52px,580px)} @media (min-aspect-ratio:1/1){ .inv[lang="en"][data-family=door] .dr-cover{--dr-nbox:min(100vw - 36px,46rem,100vw * var(--dr-lnw,.27))} .inv[lang="en"][data-family=door] .dr-kick,.inv[lang="en"][data-family=door] .dr-date{font-size:clamp(.78rem,1.23vw,1.07rem)} .inv[lang="en"][data-family=door] .dr-kp{display:none} .inv[lang="en"][data-family=door] .dr-kl{display:inline} .inv[lang="en"][data-family=door] .dr-names{--dr-ns:clamp(3.6rem,6.2vw,6.4rem)} .inv[lang="en"][data-family=door] .dr-names[data-len=m]{--dr-ns:clamp(3rem,4.8vw,5rem)} .inv[lang="en"][data-family=door] .dr-names[data-len=l],.inv[lang="en"][data-family=door] .dr-names[data-len=xl]{--dr-ns:clamp(2.4rem,3.9vw,4rem)} .inv[lang="en"][data-family=door] .dr-after{--dr-skw:var(--dr-lskw,.3)} } @media (min-width:1024px){.inv[lang="en"][data-family=door]{--cn-col:544px}} /* film.css */ /* The film designs (family "film"): the engine every opening film shares (khwancha, kotir, semom) and the keepsake print (yadgar). Markup: styles/film.ts; each design's own few differences: .css, linked after this. Every place comes from the design's config: each line of words carries its place in both formats (--px/--py/--pw portrait, --lx/--ly/--lw landscape) and this file picks the format with the screen's orientation, as the sources and film.js pick the files. Linked after cinema.css, after door.css in all.css. Animates transform, opacity and filter only. Bump ASSET_VERSION in functions/src/invite/render.ts when this changes. */ /* ---------- formats ---------- */ .inv[data-family=film] .fm-cover,.inv[data-family=film] .fm-after{--fm-ar:var(--fm-par);--fm-ax:var(--fm-pax);--fm-ay:var(--fm-pay)} /* --fm-nudge: film.js moves a line that would run into its neighbour (a stacked name), and the hero's names clear of the bar. */ .inv[data-family=film] .fm-at{position:absolute;left:var(--px);top:var(--py);width:var(--pw);max-width:min(calc(100vw - 36px),46rem);transform:translate(-50%,calc(-50% + var(--fm-nudge,0px)))} .inv[data-family=film] .yd-print{position:absolute;left:var(--px);top:var(--py);width:var(--pw);height:var(--ph);transform:translate(-50%,-50%) rotate(var(--pr))} .inv[data-family=film] .fm-pinned .fm-act{transform:translate(-50%,-50%) rotate(var(--pr))} .inv[data-family=film] .fm-flames i{left:var(--px);top:var(--py)} @media (min-aspect-ratio:1/1){ .inv[data-family=film] .fm-cover,.inv[data-family=film] .fm-after{--fm-ar:var(--fm-lar);--fm-ax:var(--fm-lax);--fm-ay:var(--fm-lay)} .inv[data-family=film] .fm-at{left:var(--lx);top:var(--ly);width:var(--lw)} .inv[data-family=film] .yd-print{left:var(--lx);top:var(--ly);width:var(--lw);height:var(--lh);transform:translate(-50%,-50%) rotate(var(--lr))} .inv[data-family=film] .fm-pinned .fm-act{transform:translate(-50%,-50%) rotate(var(--lr))} .inv[data-family=film] .fm-flames i{left:var(--lx);top:var(--ly)} } /* ---------- the stage: the film's proportions, covering its box, the pictures and the film on it ---------- */ .inv[data-family=film] .fm-cover{background:var(--fm-tile-b);color:#fff;cursor:pointer;-webkit-tap-highlight-color:transparent;-webkit-user-select:none;user-select:none} .inv[data-family=film] .fm-scene{position:absolute;inset:0;overflow:hidden;pointer-events:none} /* min-width and min-height carry through aspect-ratio: the box is the cover box's "cover" size, as object-fit would make it, held at the design's point (--fm-ax, --fm-ay) as object-position would, so a squarish window keeps the subject in. */ .inv[data-family=film] .fm-stage,.inv[data-family=film] .fm-words{position:absolute;left:var(--fm-ax,50%);top:var(--fm-ay);min-width:100%;min-height:100%;aspect-ratio:var(--fm-ar);transform:translate(calc(-1 * var(--fm-ax,50%)),calc(-1 * var(--fm-ay)))} .inv[data-family=film] .fm-stage{transform-origin:50% 50%} .inv[data-family=film] .fm-stage>picture,.inv[data-family=film] .fm-stage>.fm-film{position:absolute;inset:0;display:block;width:100%;height:100%} .inv[data-family=film] .fm-stage img{display:block;width:100%;height:100%;object-fit:cover;-webkit-user-drag:none} .inv[data-family=film] .fm-film{object-fit:cover;background:transparent;pointer-events:none} /* The shade a photograph has where words sit: dark at the top for light words, a soft cream for dark ones, and dark at the foot for the instruction. Gone as the film plays. */ .inv[data-family=film] .fm-shade{position:absolute;inset:0;display:block;background:linear-gradient(rgba(var(--fm-top,18,9,4),var(--fm-topa,.4)),rgba(var(--fm-top,18,9,4),0) 26%,rgba(12,6,4,0) 72%,rgba(12,6,4,.3) 86%,rgba(12,6,4,.55));transition:opacity .5s} @media not all and (min-aspect-ratio:1/1){.inv[data-family=film] .fm-cover[data-ptone=dark]{--fm-top:255,250,242;--fm-topa:.32}} @media (min-aspect-ratio:1/1){.inv[data-family=film] .fm-cover[data-ltone=dark]{--fm-top:255,250,242;--fm-topa:.32}} .inv[data-family=film] .fm-cover.opening .fm-shade{opacity:0} /* ---------- the words, light or dark as the place under them was measured ---------- */ .inv[data-family=film] .fm-ui{display:block;padding:0;overflow:hidden} .inv[data-family=film] .fm-words{pointer-events:none} .inv[data-family=film] .fm-at{margin:0;text-align:center;color:var(--fm-on,#fff);isolation:isolate} /* A soft local scrim behind each line: dark (or cream) where the letters are, gone before any edge. */ .inv[data-family=film] .fm-at::before{content:"";position:absolute;z-index:-1;inset:-40% -14%;background:radial-gradient(closest-side,rgba(var(--fm-shade,18,9,4),var(--fm-scrim,.5)),rgba(var(--fm-shade,18,9,4),0));pointer-events:none} @media not all and (min-aspect-ratio:1/1){ .inv[data-family=film] [data-ptone=light]{--fm-on:var(--fm-light-ink);--fm-and:var(--fm-light-and);--fm-shade:var(--fm-light-shade);--fm-ring:0,0,0;--fm-ts:0 1px 2px rgba(0,0,0,.55),0 0 14px rgba(0,0,0,.45);--fm-tsn:0 2px 3px rgba(0,0,0,.4),0 6px 26px rgba(8,4,2,.62)} .inv[data-family=film] [data-ptone=dark]{--fm-on:var(--fm-dark-ink);--fm-and:var(--fm-dark-and);--fm-shade:255,249,240;--fm-ring:255,248,236;--fm-ts:0 1px 1px rgba(255,250,240,.6),0 0 12px rgba(255,246,232,.8);--fm-tsn:0 1px 1px rgba(255,250,240,.55),0 0 24px rgba(255,246,232,.85)} } @media (min-aspect-ratio:1/1){ .inv[data-family=film] [data-ltone=light]{--fm-on:var(--fm-light-ink);--fm-and:var(--fm-light-and);--fm-shade:var(--fm-light-shade);--fm-ring:0,0,0;--fm-ts:0 1px 2px rgba(0,0,0,.55),0 0 14px rgba(0,0,0,.45);--fm-tsn:0 2px 3px rgba(0,0,0,.4),0 6px 26px rgba(8,4,2,.62)} .inv[data-family=film] [data-ltone=dark]{--fm-on:var(--fm-dark-ink);--fm-and:var(--fm-dark-and);--fm-shade:255,249,240;--fm-ring:255,248,236;--fm-ts:0 1px 1px rgba(255,250,240,.6),0 0 12px rgba(255,246,232,.8);--fm-tsn:0 1px 1px rgba(255,250,240,.55),0 0 24px rgba(255,246,232,.85)} } .inv[data-family=film] .fm-kick{font-size:clamp(.98rem,4.4vw,1.2rem);font-weight:600;line-height:1.6;letter-spacing:.01em;--fm-scrim:.5;text-shadow:var(--fm-ts)} .inv[data-family=film] .fm-names{font-family:var(--i-font);font-weight:700;font-size:clamp(2.3rem,11.6vw,3.4rem);line-height:1.25;--fm-scrim:.4;text-shadow:var(--fm-tsn)} .inv[data-family=film] .fm-names em{font-style:normal;font-size:.72em;margin-inline:.14em;color:var(--fm-and);text-shadow:var(--fm-ts)} .inv[data-family=film] .fm-names[data-stack] span:first-child{display:block} .inv[data-family=film] .fm-names[data-stack] em{margin-inline:0 .22em} .inv[data-family=film] .fm-names[data-len=m]{font-size:clamp(2.1rem,10.4vw,3rem)} .inv[data-family=film] .fm-names[data-len=l]{font-size:clamp(2rem,9.6vw,2.8rem);line-height:1.12} .inv[data-family=film] .fm-names[data-len=xl]{font-size:clamp(1.8rem,8.4vw,2.4rem);line-height:1.12} .inv[data-family=film] .fm-date{font-size:clamp(.9rem,3.9vw,1.06rem);font-weight:600;white-space:nowrap;--fm-scrim:.55;text-shadow:var(--fm-ts)} .inv[data-family=film] .fm-act{--fm-scrim:.55} .inv[data-family=film] .fm-open{pointer-events:auto;display:inline-flex;flex-direction:column;align-items:center;gap:10px;min-height:44px;padding:6px 16px;color:var(--fm-on,#fff);text-decoration:none;font-weight:700;font-size:clamp(1rem,4.3vw,1.18rem);text-shadow:var(--fm-ts)} .inv[data-family=film] .fm-open:focus-visible{outline:2px solid currentColor;outline-offset:4px;border-radius:6px} /* One tap: a ring that breathes under the instruction. Three: a dot for each, lit as each candle is. */ .inv[data-family=film] .fm-ring{position:relative;display:block;width:30px;height:30px;border-radius:50%;border:1.5px solid currentColor;box-shadow:0 0 0 1px rgba(var(--fm-ring,0,0,0),.25),0 0 10px rgba(var(--fm-ring,0,0,0),.25)} .inv[data-family=film] .fm-ring::after{content:"";position:absolute;inset:7px;border-radius:50%;background:currentColor;opacity:.85} @media (prefers-reduced-motion:no-preference){.inv[data-family=film] .fm-cover:not(.opening) .fm-ring{animation:fm-breathe 2.4s ease-in-out infinite}} @keyframes fm-breathe{0%,100%{transform:scale(1);opacity:.85}50%{transform:scale(1.14);opacity:1}} html.calm .inv[data-family=film] .fm-ring{animation:none!important} .inv[data-family=film] .fm-open .cn-dots{gap:12px} .inv[data-family=film] .fm-open .cn-dots i{width:9px;height:9px;background:var(--fm-on,#fff);opacity:.5;box-shadow:0 0 0 1.5px rgba(var(--fm-ring,24,12,4),.5),0 0 8px rgba(var(--fm-ring,0,0,0),.3);transition:opacity .25s,transform .25s cubic-bezier(.3,1.6,.5,1),box-shadow .35s} .inv[data-family=film] .fm-open .cn-dots i.on{opacity:1;transform:scale(1.35);background:#fff8e6;box-shadow:0 0 0 1px rgba(255,255,255,.25),0 0 10px 3px rgba(255,200,120,.85),0 0 22px 6px rgba(255,190,110,.45)} /* Where what the tap sets off is small on the cover (kotir's dove): a fine ring round it, white with a rim of gold so it reads on a bright garden, that breathes, and a second that ripples out from it, in the frame's own coordinates (--px/--py, the diameter --pw of its width), until the tap. */ .inv[data-family=film] .fm-beacon{position:absolute;left:var(--px);top:var(--py);display:block;width:var(--pw);aspect-ratio:1;border-radius:50%;background:radial-gradient(closest-side,rgba(255,252,244,.32),rgba(255,248,232,0));transform:translate(-50%,-50%);pointer-events:none;transition:opacity .35s} .inv[data-family=film] .fm-beacon::before,.inv[data-family=film] .fm-beacon i{content:"";position:absolute;inset:0;display:block;border-radius:50%;border:2px solid rgba(255,254,250,.96);box-shadow:0 0 0 1.5px rgba(150,110,50,.78),inset 0 0 0 1.5px rgba(150,110,50,.5),0 0 22px rgba(110,74,32,.32),inset 0 0 18px rgba(110,74,32,.18)} .inv[data-family=film] .fm-beacon i{opacity:0} @media (min-aspect-ratio:1/1){.inv[data-family=film] .fm-beacon{left:var(--lx);top:var(--ly);width:var(--lw)}} @media (prefers-reduced-motion:no-preference){ .inv[data-family=film] .fm-cover:not(.opening) .fm-beacon::before{animation:fm-breathe 2.8s ease-in-out infinite} .inv[data-family=film] .fm-cover:not(.opening) .fm-beacon i{animation:fm-ripple 2.8s cubic-bezier(.2,.6,.3,1) infinite} } @keyframes fm-ripple{0%{transform:scale(1);opacity:.85}to{transform:scale(1.32);opacity:0}} .inv[data-family=film] .fm-cover.opening .fm-beacon{opacity:0} html.calm .inv[data-family=film] .fm-beacon::before,html.calm .inv[data-family=film] .fm-beacon i{animation:none!important} /* ---------- the instruction: on screen, and clear of what the tap sets off ---------- The cover's words sit at the film's own places, but the instruction (the open link) is laid on a layer the size of the window (.fm-prompt, film.ts), not on the picture: a window wider than the film crops the picture's foot, where the film's place for it is, so it fell below the fold on a short laptop window. Its centre is the film's place mapped onto the window (where a squarish window lays the words on the box, the box's), but never higher than just below the beacon's ring and its ripple, and never lower than the window's foot, which wins. The numbers come from film.ts promptVars: the film's height over its width (--fm-pr, --fm-lr), how far down it is held (--fm-payn, --fm-layn), the beacon's centre and radius (--fm-psy/--fm-psr, --fm-lsy/--fm-lsr), and the instruction's own height (--fm-acth, its label and its mark). The cover's box is the container, so the pickers' small covers keep it too; a browser without container units keeps it at the film's place in the window. */ .inv[data-family=film] .fm-cover{--fm-r:var(--fm-pr);--fm-ayn:var(--fm-payn);--fm-sy:var(--fm-psy,0);--fm-sr:var(--fm-psr,0);--fm-acth:84px} .inv[data-family=film] .fm-cover[data-ritual=knock]{--fm-acth:64px} @media (min-aspect-ratio:1/1){.inv[data-family=film] .fm-cover{--fm-r:var(--fm-lr);--fm-ayn:var(--fm-layn);--fm-sy:var(--fm-lsy,0);--fm-sr:var(--fm-lsr,0);--fm-acth:88px}.inv[data-family=film] .fm-cover[data-ritual=knock]{--fm-acth:66px}} .inv[data-family=film] .fm-prompt{position:absolute;inset:0;display:block;pointer-events:none} .inv[data-family=film] .fm-prompt .fm-act{--fm-yn:var(--pyn)} @media (min-aspect-ratio:1/1){.inv[data-family=film] .fm-prompt .fm-act{--fm-yn:var(--lyn)}} @supports (top:1cqh){ .inv[data-family=film] .fm-ui{container-type:size} .inv[data-family=film] .fm-prompt .fm-act{--fm-h:max(100cqh,100cqw * var(--fm-r));--fm-w:max(100cqw,100cqh / var(--fm-r));--fm-y0:calc(var(--fm-ayn) * (var(--fm-h) - 100cqh));--fm-at:calc(var(--fm-yn) * var(--fm-h) - var(--fm-y0));--fm-clear:calc(var(--fm-sy) * var(--fm-h) - var(--fm-y0) + var(--fm-sr) * 1.14 * var(--fm-w) + 6px + var(--fm-acth) / 2);--fm-foot:calc(100cqh - max(14px,env(safe-area-inset-bottom)) - var(--fm-acth) / 2);top:min(max(var(--fm-at),var(--fm-clear)),var(--fm-foot))} @media (min-aspect-ratio:5/8) and (max-aspect-ratio:1/1),(min-aspect-ratio:1/1) and (max-aspect-ratio:159/100){.inv[data-family=film] .fm-prompt .fm-act{--fm-at:calc(var(--fm-yn) * 100cqh)}} } /* A phone held sideways (a landscape window under 500 px tall) has no room under the ring round what the tap sets off (kotir's dove): the window's foot would win and lay the instruction across the ring. There the instruction sits beside the ring instead, at its height, on the side a line of Kurdish starts from, clear of its ripple, and the ring itself is its mark (the small one under it would be a second ring). The ring's centre across the window comes from film.ts promptVars too (--fm-lsx, and --fm-laxn, how far across the frame is held); the cover says it has a ring (data-beacon). */ @supports (top:1cqh){@media (min-aspect-ratio:1/1) and (max-height:500px){ .inv[data-family=film] .fm-cover[data-beacon] .fm-prompt .fm-act{--fm-cx:calc(var(--fm-lsx,.5) * var(--fm-w) - var(--fm-laxn,.5) * (var(--fm-w) - 100cqw));--fm-gap:calc(var(--fm-sr) * 1.14 * var(--fm-w) + 14px);left:calc(var(--fm-cx) + var(--fm-gap));top:clamp(var(--fm-acth) / 2 + 8px,calc(var(--fm-sy) * var(--fm-h) - var(--fm-y0)),var(--fm-foot));width:max-content;max-width:calc(100cqw - var(--fm-cx) - var(--fm-gap) - 12px);transform:translate(0,-50%)} .inv[data-family=film] .fm-cover[data-beacon] .fm-prompt .fm-open .fm-ring{display:none} }} /* A knock here is a light, not a thump: the cover stays still. */ .inv[data-family=film] .fm-cover.cn-thump{animation:none} /* ---------- the opening ---------- The tap: the cover's own words go. The film starts under its first frame, which gives way as soon as the film shows a frame of its own (.fm-rolling); the names come in over it where the hero holds them (.fm-named); when it ends the cover goes (.fm-end), onto the page's first section, the same last frame with the same names in the same place. Without a film (or one that will not start), the cover itself gives way to that hero (.fm-still). */ .inv[data-family=film] .fm-cover .fm-kick,.inv[data-family=film] .fm-cover .fm-names,.inv[data-family=film] .fm-cover .fm-date,.inv[data-family=film] .fm-cover .fm-act{transition:opacity .35s} .inv[data-family=film] .fm-cover.opening .fm-kick,.inv[data-family=film] .fm-cover.opening .fm-names,.inv[data-family=film] .fm-cover.opening .fm-date,.inv[data-family=film] .fm-cover.opening .fm-act{opacity:0} /* Three taps: the words stay while the candles are lit; the instruction's dots say how many. */ /* The cover is the film's first frame: it goes over a third of a second, so the 1080p picture softening to the film's own (upscaled) frames reads as the film beginning, not as a cut. */ .inv[data-family=film] .fm-first{transition:opacity .35s linear} .inv[data-family=film] .fm-rolling .fm-first{opacity:0} .inv[data-family=film] .fm-big{opacity:0} .inv[data-family=film] .fm-big>*{transform:translateY(14px)} .inv[data-family=film] .fm-named .fm-big{opacity:1;transition:opacity 1s cubic-bezier(.3,0,.3,1)} .inv[data-family=film] .fm-named .fm-big>*{transform:none;transition:transform 1.2s cubic-bezier(.16,1,.3,1)} .inv[data-family=film] .fm-named .fm-big>:nth-child(2){transition-delay:.12s} /* The guest taps again while the film plays: it is skipped (film.js), so the cover takes taps while it opens. */ .inv[data-family=film] .fm-cover.opening{pointer-events:auto;touch-action:none} .inv[data-family=film] .fm-cover.fm-end{animation:fm-out .7s linear forwards} .inv[data-family=film] .fm-cover.fm-end.fm-skip{animation-duration:.35s} /* The cover's own dark ground stays out of it, so the two pictures dissolve into each other, never through black. */ .inv[data-family=film] .fm-cover.fm-still{background:transparent;animation:fm-out 1.5s .1s cubic-bezier(.45,0,.4,1) forwards} .inv[data-family=film] .fm-cover.fm-still .fm-first{animation:fm-lift 1.7s cubic-bezier(.4,0,.6,1) forwards} .inv[data-family=film] .fm-cover.fm-still .fm-big{display:none} /* Under it, the hero settles as the cover gives way: the camera's last few steps. */ .inv[data-family=film].fm-settle .fm-after .fm-stage{animation:fm-settle 2s cubic-bezier(.2,.7,.2,1) both} @keyframes fm-out{to{opacity:0}} @keyframes fm-lift{to{transform:translateY(-3%) scale(1.06)}} @keyframes fm-settle{from{transform:translate(calc(-1 * var(--fm-ax,50%)),calc(-1 * var(--fm-ay))) scale(1.05)}to{transform:translate(calc(-1 * var(--fm-ax,50%)),calc(-1 * var(--fm-ay)))}} /* Not enough of the film in at the tap (film.js waits up to 1.5 s for it): the instruction's mark stays and breathes. */ .inv[data-family=film] .fm-cover.opening.fm-wait .fm-act{opacity:1} .inv[data-family=film] .fm-cover.opening.fm-wait .fm-open>span:first-child{visibility:hidden} @media (prefers-reduced-motion:no-preference){.inv[data-family=film] .fm-cover.fm-wait .fm-ring{animation:fm-breathe .9s ease-in-out infinite}} /* ---------- the keepsake print: milky, then developing to full colour ---------- */ .inv[data-family=film] .yd-print{overflow:hidden;background:#B2BFBC;transform-origin:50% 50%} .inv[data-family=film] .yd-print>img,.inv[data-family=film] .yd-print>.yd-milk{position:absolute;inset:0;display:block;width:100%;height:100%;object-fit:cover} .inv[data-family=film] .yd-milk{background:linear-gradient(170deg,#BCC9C6,#AFBDB9 55%,#B6C2BF)} .inv[data-family=film] .yd-fore{position:absolute;inset:0;display:block;pointer-events:none} /* Undeveloped: the photo all but gone, a ghost in the milk. */ .inv[data-family=film] .fm-cover .yd-photo{filter:saturate(0) contrast(.55) brightness(1.16)} .inv[data-family=film] .fm-cover .yd-milk{opacity:.88} /* While it waits for a tap, a slow gleam crosses the print. */ .inv[data-family=film] .fm-cover .yd-print::after{content:"";position:absolute;inset:-20%;background:linear-gradient(115deg,rgba(255,255,255,0) 40%,rgba(255,255,255,.28) 50%,rgba(255,255,255,0) 60%);opacity:0;transform:translateX(-60%)} @media (prefers-reduced-motion:no-preference){.inv[data-family=film] .fm-cover:not(.opening) .yd-print::after{animation:yd-gleam 4.2s 1.2s ease-in-out infinite}} html.calm .inv[data-family=film] .yd-print::after{animation:none!important} @keyframes yd-gleam{0%{opacity:0;transform:translateX(-60%)}20%{opacity:1}45%{opacity:0;transform:translateX(60%)}to{opacity:0;transform:translateX(60%)}} /* The tap: the milk clears and the colour comes up, as instant film does, in about two and a half seconds. */ .inv[data-family=film] .fm-cover.opening .yd-veil{animation:yd-clear 2.6s cubic-bezier(.45,0,.35,1) forwards} .inv[data-family=film] .fm-cover.opening .yd-photo{animation:yd-colour 2.6s cubic-bezier(.4,0,.3,1) forwards} @keyframes yd-clear{to{opacity:0}} @keyframes yd-colour{0%{filter:saturate(0) contrast(.55) brightness(1.16)}45%{filter:saturate(.35) contrast(.8) brightness(1.08)}to{filter:saturate(1) contrast(1) brightness(1)}} /* The names come in like ink drying: soft and pale, then sharp. */ .inv[data-family=film] .fm-print .fm-big>*{transform:none;filter:blur(3px)} .inv[data-family=film] .fm-print.fm-named .fm-big{transition:opacity 1.3s ease-out} .inv[data-family=film] .fm-print.fm-named .fm-big>*{filter:none;transition:filter 1.4s ease-out} /* The line written on the print's white margin: the instruction, in the couple's lettering. */ .inv[data-family=film] .fm-pinned .fm-act{max-width:none;--fm-scrim:0} .inv[data-family=film] .fm-pinned .fm-open{min-height:0;padding:2px 6px;gap:0;font-family:var(--i-font);font-weight:700;font-size:clamp(.9rem,3.6vw,1.15rem);line-height:1.3;text-shadow:none} .inv[data-family=film] .fm-pinned .fm-ring{display:none} .inv[data-family=film] .fm-cover.opening .fm-pinned .fm-act{opacity:0;transition:opacity .9s} /* ---------- where the film ends: the page's first section ---------- */ .inv[data-family=film] .inv-bar{position:fixed;left:0;right:0;margin:0 auto} /* The chip that mutes the sound shows while the film plays, over the cover. */ #inv[data-family=film] .inv-music{z-index:45} .inv[data-family=film] .fm-after{position:-webkit-sticky;position:sticky;top:0;z-index:0;display:block;height:100vh;height:100svh;min-height:440px;overflow:hidden;color:#fff;background:var(--fm-tile-b);isolation:isolate} /* A little dusk at the foot, for the cue to read on. */ .inv[data-family=film] .fm-light{position:absolute;inset:0;display:block;background:linear-gradient(rgba(10,6,4,0) 72%,rgba(10,6,4,.42))} .inv[data-family=film] .fm-awords,.inv[data-family=film] .fm-big{display:grid;justify-items:center;gap:6px;--fm-scrim:.48;transform:translate(-50%,calc(-50% + var(--fm-nudge,0px))) scale(var(--fm-k,1))} .inv[data-family=film] .fm-awords::before,.inv[data-family=film] .fm-big::before{inset:-26% -12%} .inv[data-family=film] .fm-anames{margin:0;font-family:var(--i-font);font-weight:700;font-size:clamp(3rem,15.6vw,4.6rem);line-height:1.12;text-shadow:var(--fm-tsn)} .inv[data-family=film] .fm-anames span{display:block} /* The stacked و keeps clear of the next name's marks: a Kurdish ێ's hat (هێمن, شێرین) rises well above the letters. */ .inv[data-family=film] .fm-anames em{display:block;font-style:normal;font-size:.62em;line-height:1;margin-block:0 .42em;color:var(--fm-and);text-shadow:var(--fm-ts)} .inv[data-family=film] .fm-anames[data-len=l]{font-size:clamp(2.5rem,12vw,3.6rem)} .inv[data-family=film] .fm-anames[data-len=xl]{font-size:clamp(2.1rem,10vw,3rem)} .inv[data-family=film] .fm-adate{margin:4px 0 0;font-weight:700;font-size:clamp(.92rem,4.2vw,1.15rem);white-space:nowrap;color:var(--fm-on);text-shadow:var(--fm-ts)} /* A design with its own first line (efsane) says what it celebrates under the date: small, on the cover hung under the date's own line (it moves with it), on the hero and over the film the words' last line. */ .inv[data-family=film] .fm-date .fm-occ{position:absolute;left:50%;top:100%;display:block;margin-top:1px;transform:translateX(-50%);font-size:.84em;font-weight:600;white-space:nowrap;opacity:.9} .inv[data-family=film] .fm-aocc{margin:-2px 0 0;font-weight:600;font-size:clamp(.78rem,3.4vw,.95rem);white-space:nowrap;color:var(--fm-on);text-shadow:var(--fm-ts);opacity:.9} /* Where the words would not fit above the design's floor even with the names smaller, the occasion's line goes from the hero and over the film (film.js keep(): fm-quiet); the cover keeps it. */ .inv[data-family=film] .fm-quiet .fm-aocc{display:none} .inv[data-family=film] .fm-cue{position:absolute;left:50%;bottom:calc(22px + env(safe-area-inset-bottom));width:46px;height:46px;margin-left:-23px;border-radius:50%;border:1.5px solid rgba(255,255,255,.8);background:rgba(20,10,4,.32);-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);box-shadow:0 6px 18px rgba(0,0,0,.3)} .inv[data-family=film] .fm-cue i{position:absolute;left:50%;top:50%;width:11px;height:11px;margin:-8px 0 0 -5.5px;border:solid #fff;border-width:0 2px 2px 0;transform:rotate(45deg)} /* On a demo page the cue sits above the bar that sells the design (invite.css), as the doors' does: never hidden under it, nor drawn over its button as it rises. */ .inv[data-family=film][data-demo="1"] .fm-cue{bottom:calc(96px + env(safe-area-inset-bottom))} /* The candles on the hero: a warm glow that breathes over each flame, while it is on screen. */ .inv[data-family=film] .fm-flames{position:absolute;inset:0;display:block} .inv[data-family=film] .fm-flames i{position:absolute;width:15%;aspect-ratio:1;border-radius:50%;background:radial-gradient(closest-side,rgba(255,214,150,.5),rgba(255,180,100,.18) 55%,rgba(255,170,90,0));mix-blend-mode:screen;opacity:.7;transform:translate(-50%,-50%)} /* What falls over the hero as the film hands over: film.js flies each (transform and opacity only); unseen until then. */ .inv[data-family=film] .fm-fall{position:absolute;inset:0;display:block;pointer-events:none} .inv[data-family=film] .fm-fall img,.inv[data-family=film] .fm-shower img{position:absolute;left:0;top:0;width:24px;height:auto;max-width:none;opacity:0;-webkit-backface-visibility:visible;backface-visibility:visible;pointer-events:none} .inv[data-family=film] .fm-fall i,.inv[data-family=film] .fm-shower i{position:absolute;left:0;top:0;width:10px;height:10px;border-radius:50%;opacity:0;background:radial-gradient(closest-side,#fffaf0,rgba(255,226,160,.9) 30%,rgba(255,200,110,.35) 62%,rgba(255,190,100,0));box-shadow:0 0 8px 2px rgba(255,214,140,.45);pointer-events:none} .inv[data-family=film] .fm-shower{position:fixed;inset:0;z-index:35;overflow:hidden;pointer-events:none} @media (prefers-reduced-motion:no-preference){ .inv[data-family=film] .fm-cue.on i{animation:fm-cue 1.8s ease-in-out infinite} .inv[data-family=film] .fm-flames.on i{animation:fm-flicker 2.3s ease-in-out infinite alternate} .inv[data-family=film] .fm-flames.on i:nth-child(2){animation-duration:2.9s;animation-delay:-1.1s} .inv[data-family=film] .fm-flames.on i:nth-child(3){animation-duration:3.3s;animation-delay:-.4s} html.io .inv[data-family=film].play .fm-after .fm-cue{animation:fm-fadein .8s 1s backwards} } html.calm .inv[data-family=film] .fm-cue i,html.calm .inv[data-family=film] .fm-flames i{animation:none!important} @keyframes fm-cue{0%,100%{transform:translateY(-2px) rotate(45deg)}50%{transform:translateY(4px) rotate(45deg)}} @keyframes fm-flicker{0%{opacity:.55;transform:translate(-50%,-50%) scale(.96)}30%{opacity:.82;transform:translate(-50%,-50%) scale(1.03)}55%{opacity:.62}80%{opacity:.9;transform:translate(-50%,-50%) scale(1.05)}to{opacity:.7;transform:translate(-50%,-50%)}} @keyframes fm-fadein{from{opacity:0}} /* ---------- reading on: the hero stays and the page is laid over it ---------- As the doors' garden does (door.css): the hero is sticky; the page after it is a card (.fm-card, behind the sections) sliding up over it. While it covers the hero, and only then, the hero leans in (1 to 1.06) and dims, the names drift up and go, and the cue goes as soon as the page moves. Scroll-driven animations where the browser has them; film.js does the same elsewhere, and hides the hero once covered. Reduced motion and html.calm: the page scrolls plainly over a still hero. No ancestor of the hero is ever overflow:hidden (overflow-x:clip, or visible). */ .inv[data-family=film] .fm-after,.inv[data-family=film] .fm-card,.inv[data-family=film] .inv-page::before,.inv[data-family=film] .inv-page::after{--fm-span:max(440px,100vh)} @supports (height:100svh){.inv[data-family=film] .fm-after,.inv[data-family=film] .fm-card,.inv[data-family=film] .inv-page::before,.inv[data-family=film] .inv-page::after{--fm-span:max(440px,100svh)}} .inv[data-family=film] .inv-page{overflow-x:visible;overflow-x:clip;background:none} .inv[data-family=film] .fm-lift,.inv[data-family=film] .fm-hint{position:absolute;inset:0;display:block;pointer-events:none} .inv[data-family=film] .fm-after .fm-dim{position:absolute;inset:0;display:block;background:#0d0705;opacity:0} .inv[data-family=film] .fm-card{position:absolute;left:0;right:0;top:var(--fm-span);bottom:0;z-index:0;border-radius:26px 26px 0 0;background:linear-gradient(var(--i-accent2),var(--i-accent2)) 10px 30px/1px calc(100% - 30px) no-repeat,linear-gradient(var(--cn-g),var(--cn-g)) 14px 30px/1px calc(100% - 30px) no-repeat,linear-gradient(var(--i-accent2),var(--i-accent2)) calc(100% - 10px) 30px/1px calc(100% - 30px) no-repeat,linear-gradient(var(--cn-g),var(--cn-g)) calc(100% - 14px) 30px/1px calc(100% - 30px) no-repeat,var(--cn-paper,none) 0 0/384px,var(--i-bg);box-shadow:0 -14px 30px -10px rgba(16,8,3,.5),inset 0 1px 0 rgba(255,252,244,.7)} .inv[data-family=film] .inv-sheet>*,.inv[data-family=film] .inv-side>*{position:relative;z-index:1} .inv[data-family=film] .fm-after.fm-under{visibility:hidden} .inv[data-family=film] .fm-after.fm-under .fm-cue i,.inv[data-family=film] .fm-after.fm-under .fm-flames i{animation-play-state:paused} @media (prefers-reduced-motion:no-preference){@supports (animation-timeline:scroll()){ html:not(.calm) .inv[data-family=film] .fm-after .fm-scene{animation:fm-lean linear both;animation-timeline:scroll(root);animation-range:0 var(--fm-span)} html:not(.calm) .inv[data-family=film] .fm-after .fm-dim{animation:fm-dusk linear both;animation-timeline:scroll(root);animation-range:0 var(--fm-span)} html:not(.calm) .inv[data-family=film] .fm-lift{animation:fm-drift linear both;animation-timeline:scroll(root);animation-range:0 calc(var(--fm-span) * .7)} html:not(.calm) .inv[data-family=film] .fm-hint{animation:fm-out linear both;animation-timeline:scroll(root);animation-range:0 90px} }} @keyframes fm-lean{to{transform:scale(1.06)}} @keyframes fm-dusk{to{opacity:.34}} @keyframes fm-drift{to{opacity:0;transform:translateY(-40px)}} /* ---------- the page after the hero: cards in the design's own world, its page skin ---------- One markup for every film design (styles/film.ts skinPage): each section a card (.sk-card) with two ornament slots (.sk-o1, .sk-o2), a title (.sk-head: .sk-kick and its divider, .sk-rule) and, on the invitation and the reply, an emblem (.sk-emblem). This is the frame every skin shares: the cards' places on a phone and a laptop, and a plain look from the palette that each skin (assets/styles/skins/.css, linked after this) redraws in its world through these tokens, its ornaments and its own rules. */ .inv[data-family=film]{overflow-x:visible;overflow-x:clip;--sk-ground:var(--i-bg);--sk-on:var(--i-ink);--sk-on-soft:var(--i-muted);--sk-card:var(--i-surface);--sk-ink:var(--i-ink);--sk-muted:var(--i-muted);--sk-title:var(--i-accent-ink);--sk-gold:var(--i-accent2);--sk-line:var(--i-line);--sk-field:var(--i-surface);--sk-btn:var(--i-btn);--sk-btn-ink:var(--i-btn-ink);--sk-radius:14px;--sk-lift:0 26px 40px -30px var(--i-shadow)} .inv[data-family=film] .inv-page{max-width:none} .inv[data-family=film] .fm-card{background:var(--cn-paper,none) 0 0/384px,var(--sk-ground)} .inv[data-family=film] .cn-sec.sk-sec{display:flex;flex-direction:column;align-items:center;gap:14px;padding:16px 16px;text-align:center} .inv[data-family=film] .cn-hero.sk-sec{padding-top:40px} /* Below a laptop the page is one column of cards; on a wide one (a tablet) each section is as wide as its card, so what a skin lays on a card's corner (the roses, the blossom, the narcissus) stays on it. */ @media (max-width:1023.98px){.inv[data-family=film] .cn-sec.sk-sec{box-sizing:border-box;width:100%;max-width:calc(34rem + 32px);margin-inline:auto}} .inv[data-family=film] .sk-foot{position:relative;z-index:1} /* The card. */ .inv[data-family=film] .sk-card{position:relative;width:100%;max-width:34rem;display:grid;justify-items:center;align-content:start;gap:12px;padding:34px 24px 30px;border-radius:var(--sk-radius);background:var(--sk-card);color:var(--sk-ink);box-shadow:0 0 0 1px var(--sk-line),var(--sk-lift)} .inv[data-family=film] .sk-o{position:absolute;display:none;pointer-events:none} .inv[data-family=film] .sk-card>p,.inv[data-family=film] .sk-card h1,.inv[data-family=film] .sk-card h2{margin:0} /* Titles: the design's calligraphy, the skin's divider under it. */ .inv[data-family=film] .sk-head{display:grid;justify-items:center;gap:2px;width:100%} .inv[data-family=film] .sk-kick{margin:0;font-family:var(--i-font);font-weight:700;font-size:1.6rem;line-height:1.45;color:var(--sk-title);text-wrap:balance} .inv[data-family=film] .sk-rule{display:block;width:150px;max-width:70%;height:22px;background:var(--sk-rule,linear-gradient(var(--sk-gold),var(--sk-gold)) 50% 50%/70% 1px no-repeat) 50% 50%/contain no-repeat} .inv[data-family=film] .sk-emblem{display:block;width:64px;height:64px;margin-bottom:-2px;background:var(--sk-emblem,none) 50% 50%/contain no-repeat} /* The invitation: the families' words, the names, the blessing. */ .inv[data-family=film] .sk-invite{padding-block:30px 34px;gap:14px} .inv[data-family=film] .sk-invite .lead{max-width:26rem;font-size:1.08rem;line-height:2;color:var(--sk-ink);text-wrap:balance} .inv[data-family=film] .sk-invite .cn-names{margin:2px 0 0;color:var(--sk-title);line-height:1.18} .inv[data-family=film] .sk-invite .cn-names em{color:var(--sk-gold)} .inv[data-family=film] .sk-invite .bless{max-width:24rem;color:var(--sk-muted);font-size:1rem;line-height:1.9} .inv[data-family=film] .sk-invite .cn-bism{margin:0} .inv[data-family=film] .sk-invite .cn-arch{width:min(62%,250px);margin:0 0 4px;border-color:var(--sk-gold)} /* The day: the countdown's tiles and the calendar's leaf. */ .inv[data-family=film] .sk-date{gap:16px} .inv[data-family=film] .sk-date .cn-cd{width:100%;max-width:330px;gap:8px} .inv[data-family=film] .sk-date .cn-cd div{display:grid;gap:0;padding:10px 2px 8px;border:0;border-radius:12px;background:var(--sk-field);box-shadow:0 0 0 1px var(--sk-gold),0 10px 18px -14px var(--i-shadow)} .inv[data-family=film] .sk-date .cn-cd div+div{border:0} .inv[data-family=film] .sk-date .cn-cd strong{font-family:var(--i-font);font-weight:700;font-size:clamp(1.7rem,8vw,2.2rem);line-height:1.2;color:var(--sk-title)} .inv[data-family=film] .sk-date .cn-cd span{font-size:.76rem;color:var(--sk-muted)} .inv[data-family=film] .sk-cal{display:grid;justify-items:center;width:min(100%,220px);padding:0 0 14px;overflow:hidden;border-radius:14px;background:var(--sk-field);box-shadow:0 0 0 1px var(--sk-line),0 16px 26px -20px var(--i-shadow)} .inv[data-family=film] .sk-cal p{margin:0} .inv[data-family=film] .sk-cal-m{justify-self:stretch;padding:8px 10px;background:var(--sk-btn);color:var(--sk-btn-ink);font-weight:700;font-size:.95rem;white-space:nowrap} .inv[data-family=film] .sk-cal-wd{margin-top:10px!important;color:var(--sk-muted);font-weight:600;font-size:.98rem} .inv[data-family=film] .sk-cal-d{font-family:var(--i-font);font-weight:700;font-size:3.6rem;line-height:1.1;color:var(--sk-title)} .inv[data-family=film] .sk-cal-t{padding-inline:10px;font-weight:700;font-size:.92rem;color:var(--sk-ink)} .inv[data-family=film] .sk-date .when-date{font-weight:700;color:var(--sk-ink)} .inv[data-family=film] .sk-date .when-date span{display:block} /* The programme: a line of the skin's colour with a mark for each moment. */ .inv[data-family=film] .sk-prog .programme{max-width:320px;padding:6px 0} .inv[data-family=film] .sk-prog .programme::before{background:linear-gradient(transparent,var(--sk-gold) 12%,var(--sk-gold) 88%,transparent)} .inv[data-family=film] .sk-prog .programme li{padding:13px 0;color:var(--sk-ink)} .inv[data-family=film] .sk-prog .programme li::before{width:10px;height:10px;border-radius:2px;background:var(--sk-gold);transform:rotate(45deg);box-shadow:0 0 0 3px var(--sk-card),0 0 0 4px var(--sk-line)} .inv[data-family=film] .sk-prog .programme time{color:var(--sk-title)} /* On a phone the moments' names have the wider side of the line (64 to the times' 36; 72 to 28 on a 320 px one), and the marks sit a little closer to both: a moment of three words («ئەڵقە لە پەنجە کردن») stays one line beside its time, as the others do. The line moves with the column between (--sk-pt, the times' share). The scrapbook's index card has its own columns. */ @media (max-width:1023.98px){ .inv[data-family=film]:not([data-skin=scrapbook]) .sk-prog .programme{--sk-pt:.36} .inv[data-family=film]:not([data-skin=scrapbook]) .sk-prog .programme li{column-gap:6px;grid-template-columns:calc((100% - 40px) * var(--sk-pt)) 28px minmax(0,1fr)} .inv[data-family=film]:not([data-skin=scrapbook]) .sk-prog .programme time{padding-inline-end:8px} .inv[data-family=film]:not([data-skin=scrapbook]) .sk-prog .programme span{padding-inline-start:8px} .inv[data-family=film]:not([data-skin=scrapbook]) .sk-prog .programme::before{left:auto;right:calc((100% - 40px) * var(--sk-pt) + 20px);margin:0 -.5px 0 0} } @media (max-width:359.98px){.inv[data-family=film]:not([data-skin=scrapbook]) .sk-prog .programme{--sk-pt:.28}} /* The hall: its photo in a frame, its name, the address, the map. */ .inv[data-family=film] .sk-hall{width:100%;max-width:400px} .inv[data-family=film] .sk-hall:empty{display:none} .inv[data-family=film] .sk-venue .cn-hall{width:100%;aspect-ratio:4/3;border:6px solid var(--sk-field);border-radius:999px 999px 10px 10px;box-shadow:0 0 0 1px var(--sk-gold),0 18px 28px -22px var(--i-shadow)} .inv[data-family=film] .sk-venue .venue{font-family:var(--i-font);font-weight:700;font-size:1.7rem;line-height:1.4;color:var(--sk-ink)} .inv[data-family=film] .sk-venue .addr{color:var(--sk-muted);font-size:.98rem;line-height:1.8} .inv[data-family=film] .sk-venue .where-actions{margin-top:4px} /* Buttons: a pill of the skin's colour. */ .inv[data-family=film] .sk-card .btn.cn-btn,.inv[data-family=film] .sk-card .contact-call{display:inline-flex;align-items:center;justify-content:center;gap:8px;min-height:46px;padding:10px 26px;border:0;border-radius:999px;background:var(--sk-btn);color:var(--sk-btn-ink);font-weight:700;font-size:.98rem;text-decoration:none;box-shadow:0 12px 22px -14px var(--i-shadow)} .inv[data-family=film] .sk-card .btn.cn-btn svg{width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:1.8} /* Who to call. */ .inv[data-family=film] .sk-call .contact-btn{gap:4px;color:var(--sk-ink)} .inv[data-family=film] .sk-call .contact-btn>svg,.inv[data-family=film] .sk-pin{display:block;box-sizing:border-box;width:52px;height:52px;margin:0 auto 4px;padding:13px;border-radius:50%;background:var(--sk-field);fill:none;stroke:var(--sk-gold);stroke-width:1.5;box-shadow:0 0 0 1px var(--sk-gold),0 0 0 4px var(--sk-field),0 0 0 5px var(--sk-line)} .inv[data-family=film] .sk-pin svg{display:block;width:100%;height:100%;fill:none;stroke:inherit;stroke-width:inherit} .inv[data-family=film] .sk-call .contact-name{font-family:var(--i-font);font-size:1.45rem;line-height:1.4} .inv[data-family=film] .sk-call .contact-num{font-size:1rem;letter-spacing:.04em;color:var(--sk-muted)} .inv[data-family=film] .sk-call .contact-call{margin-top:8px} /* The note. */ .inv[data-family=film] .sk-note{gap:8px;padding-block:24px 26px} .inv[data-family=film] .sk-note .cn-note{max-width:28rem;padding:0;font-size:1.04rem;line-height:1.95;color:var(--sk-ink)} .inv[data-family=film] .sk-note .cn-note::before,.inv[data-family=film] .sk-note .cn-note::after{display:none} /* The reply: the emblem over its card, then the form. */ .inv[data-family=film] .sk-reply{padding-top:30px} .inv[data-family=film] .sk-reply .rsvp-card{width:100%;padding:0;gap:12px;border:0;background:none;box-shadow:none} .inv[data-family=film] .sk-reply .rsvp-card::before{display:none} .inv[data-family=film] .sk-reply .rsvp-q{font-size:1.45rem;color:var(--sk-ink)} .inv[data-family=film] .sk-reply .rsvp label,.inv[data-family=film] .cn-wishes .wish-form label{color:var(--sk-muted)} .inv[data-family=film] .sk-reply .rsvp input,.inv[data-family=film] .sk-reply .rsvp select,.inv[data-family=film] .cn-wishes .wish-form input,.inv[data-family=film] .cn-wishes .wish-form textarea{min-height:46px;padding:10px 14px;border:1px solid var(--sk-line);border-radius:12px;background-color:var(--sk-field);color:var(--sk-ink)} .inv[data-family=film] .sk-reply .rsvp select{background:linear-gradient(45deg,transparent 50%,var(--sk-muted) 50%) 16px 55%/5px 5px no-repeat,linear-gradient(135deg,var(--sk-muted) 50%,transparent 50%) 21px 55%/5px 5px no-repeat,var(--sk-field)} .inv[data-family=film] .cn-wishes .wish-form textarea{min-height:6.5em;line-height:1.8;background-image:none} .inv[data-family=film] .sk-reply .rsvp-actions{grid-template-columns:1fr;gap:10px} .inv[data-family=film] .sk-reply .rsvp-actions .btn,.inv[data-family=film] .cn-wishes .wish-form .btn{min-height:48px;border-radius:999px;font-weight:700} .inv[data-family=film] .sk-reply .rsvp-actions .btn:not(.soft),.inv[data-family=film] .cn-wishes .wish-form .btn{border:0;background:var(--sk-btn);color:var(--sk-btn-ink);box-shadow:0 12px 22px -14px var(--i-shadow)} .inv[data-family=film] .sk-reply .rsvp-actions .btn.soft{border:1px solid var(--sk-gold);background:transparent;color:var(--sk-ink);box-shadow:none} .inv[data-family=film] .sk-reply .rsvp-done,.inv[data-family=film] .sk-reply .rsvp-note{color:var(--sk-title)} /* The wishes: the title on the ground, the form a card, each wish a card with its initial. */ /* The wall, its own section, comes up close under the form. */ .inv[data-family=film] .cn-wall.sk-sec{padding-top:2px} .inv[data-family=film] .cn-wishes .sk-kick{color:var(--sk-on)} .inv[data-family=film] .cn-wishes .wish-form{width:100%;max-width:34rem;padding:22px 20px 20px;gap:12px;border:0;border-radius:var(--sk-radius);background:var(--sk-card);color:var(--sk-ink);box-shadow:0 0 0 1px var(--sk-line),var(--sk-lift)} .inv[data-family=film] .cn-wishes .wish-form::before{display:none} .inv[data-family=film] .cn-wishes .wish-form .btn{min-width:150px} .inv[data-family=film] .wish-list{max-width:34rem;gap:10px;border:0} .inv[data-family=film] .wish{grid-template-columns:auto 1fr;align-items:center;column-gap:14px;padding:14px 16px;border:0;border-radius:12px;background:var(--sk-card);box-shadow:0 0 0 1px var(--sk-line),0 14px 24px -22px var(--i-shadow)} .inv[data-family=film] .wish-i{display:grid;place-items:center;width:44px;height:44px;min-width:0;border-radius:50%;background:var(--sk-btn);color:var(--sk-btn-ink);font:700 1.2rem/1 var(--i-body)} .inv[data-family=film] .wish b{color:var(--sk-ink)} .inv[data-family=film] .wish p{color:var(--sk-muted)} .inv[data-family=film] .wish-msg,.inv[data-family=film] .wish-thanks{color:var(--sk-title)} .inv[data-family=film] .wish-empty{color:var(--sk-on-soft)} /* The photos, the hashtag, the footer: on the ground. */ .inv[data-family=film] .cn-gal .sk-kick,.inv[data-family=film] .cn-tag .sk-kick{color:var(--sk-on)} .inv[data-family=film] .cn-gal .gallery{max-width:34rem} .inv[data-family=film] .cn-gal .gallery img{border:6px solid var(--sk-card);border-radius:4px;box-shadow:0 0 0 1px var(--sk-line),0 18px 28px -22px var(--i-shadow)} .inv[data-family=film] .cn-tag .hashtag{display:inline-block;padding:8px 22px;border:1px solid var(--sk-gold);border-radius:999px;color:var(--sk-on);font-size:1.25rem} .inv[data-family=film] .sk-foot{padding-top:26px} .inv[data-family=film] .sk-foot,.inv[data-family=film] .sk-foot p,.inv[data-family=film] .sk-foot .foot-cta,.inv[data-family=film] .sk-foot .foot-mark,.inv[data-family=film] .sk-foot .foot-make{color:var(--sk-on)} /* The page's last word: the skin's seal (--sk-seal, its background layers; --sk-seal-h, its height) on a fine rule over the footer, as a letter is sealed. A skin without one draws nothing here, or its own (the scrapbook's kilim). */ .inv[data-family=film] .sk-foot::before{content:"";flex:0 0 100%;height:var(--sk-seal-h,0);margin-bottom:14px;background:var(--sk-seal,none),linear-gradient(90deg,rgba(0,0,0,0),var(--sk-line) 22%,rgba(0,0,0,0) 40%,rgba(0,0,0,0) 60%,var(--sk-line) 78%,rgba(0,0,0,0)) 50% 50%/min(340px,100%) 1px no-repeat} .inv[data-family=film] .sk-foot .foot-make{margin-top:16px;text-decoration:none} .inv[data-family=film] .sk-foot .foot-make span{display:inline-block;padding:10px 22px;border:1px solid var(--sk-gold);border-radius:999px;font-size:.92rem;font-weight:700} /* In the pickers and the landing's gallery (a .cover-box, never a guest's page) the keepsake shows developed: its colour sells it; the milky print is the guest's own moment. */ .cover-box .inv[data-family=film] .fm-print .yd-veil{opacity:0} .cover-box .inv[data-family=film] .fm-print .yd-photo{filter:none} .cover-box .inv[data-family=film] .fm-print .yd-print::after{display:none} /* ---------- squarish screens: the words follow the box, not the picture, so none is cut ---------- The cover's and the hero's together, so the names still hand over in place; the line on a print stays on it. */ @media (min-aspect-ratio:5/8) and (max-aspect-ratio:1/1),(min-aspect-ratio:1/1) and (max-aspect-ratio:159/100){ .inv[data-family=film] .fm-words:not(.fm-pinned){left:0;top:0;width:100%;height:100%;min-width:0;min-height:0;aspect-ratio:auto;transform:none} } /* ---------- a laptop: the 16:9 film ---------- */ @media (min-aspect-ratio:1/1){ .inv[data-family=film] .fm-names{font-size:clamp(2.6rem,4.6vw,4.6rem)} .inv[data-family=film] .fm-names[data-len=m]{font-size:clamp(2.4rem,4vw,4rem)} .inv[data-family=film] .fm-names[data-len=l],.inv[data-family=film] .fm-names[data-len=xl]{font-size:clamp(2.2rem,3.4vw,3.4rem)} .inv[data-family=film] .fm-kick,.inv[data-family=film] .fm-date{font-size:clamp(.95rem,1.5vw,1.3rem)} .inv[data-family=film] .fm-open{font-size:clamp(1rem,1.5vw,1.3rem)} .inv[data-family=film] .fm-anames{font-size:clamp(3rem,5.6vw,6rem)} .inv[data-family=film] .fm-anames[data-len=l],.inv[data-family=film] .fm-anames[data-len=xl]{font-size:clamp(2.4rem,4.2vw,4.4rem)} .inv[data-family=film] .fm-adate{font-size:clamp(1rem,1.6vw,1.35rem)} .inv[data-family=film] .fm-pinned .fm-open{font-size:clamp(.9rem,1.35vw,1.3rem)} } /* ---------- a laptop: the cards laid out across the window, never a phone's column ---------- The page is a grid of twelve columns, at most 1180 pixels wide, on the skin's ground, which spans the window. Each section says where it goes (film.ts skinPage, from what this invitation has): sk-solo in the middle eight columns, sk-full across, sk-l6 and sk-r6 a pair of halves, sk-l7 and sk-r5 the hall beside who to call and the note (sk-tall: the hall beside both). A pair's cards are as tall as each other; beside the reply, the form to send a wish, and the wall of wishes across the window under them (cn-wall). */ @media (min-width:1024px){ .inv[data-family=film]::before{content:none} .inv[data-family=film] .inv-page{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));column-gap:28px;align-items:start;max-width:1180px;margin:0 auto;padding:0 40px 40px;overflow:visible;background:none;box-shadow:none} .inv[data-family=film] .inv-page::before,.inv[data-family=film] .inv-page::after{content:none} .inv[data-family=film] .fm-after{width:var(--fm-vw,100vw);margin-inline:calc(50% - var(--fm-vw,100vw) / 2);grid-column:1/-1;background:none} .inv[data-family=film] .fm-card{left:calc(50% - var(--fm-vw,100vw) / 2);right:auto;width:var(--fm-vw,100vw);border-radius:32px 32px 0 0;box-shadow:0 -20px 44px -16px rgba(10,5,2,.55)} .inv[data-family=film] .inv-sheet>.sk-sec,.inv[data-family=film] .inv-side>.sk-sec{grid-column:3/span 8;align-self:stretch;padding:18px 0} .inv[data-family=film] .inv-sheet>.cn-hero.sk-sec{padding-top:64px} .inv[data-family=film] .sk-sec>.sk-card{flex:1 0 auto;max-width:none} /* A pair's cards are as tall as each other: what each holds sits in its middle, never at its top over an empty foot. */ .inv[data-family=film] .inv-page .sk-sec:is(.sk-l6,.sk-r6,.sk-l7,.sk-r5)>.sk-card{align-content:center} /* But a short card beside a tall one (who to call or the note beside the hall, an evening of one or two moments beside the day) is as tall as what it holds, in the middle of its neighbour's height; who to call and the note together meet in the middle of the hall's (film.ts: sk-hug, sk-hug-end over sk-hug-start), never a tall empty box. */ .inv[data-family=film] .inv-page .sk-sec.sk-hug{align-self:center} .inv[data-family=film] .inv-page .sk-sec.sk-hug-end{align-self:end} .inv[data-family=film] .inv-page .sk-sec.sk-hug-start{align-self:start} .inv[data-family=film] .inv-page .sk-sec.sk-hug>.sk-card{flex:0 0 auto} .inv[data-family=film] .inv-page .sk-sec.sk-full{grid-column:1/-1} /* A note of one short line has a row of its own under the hall (film.ts sk-line), never a scrap in an empty half beside the hall's tall card; a card that holds it (the scrapbook's slip) is as wide as a phone's, not the row's. */ .inv[data-family=film] .inv-page .sk-sec.sk-line>.sk-card{flex:0 0 auto;max-width:34rem} .inv[data-family=film] .inv-page .sk-sec.sk-line .cn-note{font-size:1.3rem} .inv[data-family=film] .inv-page .sk-sec.sk-l6{grid-column:1/span 6} .inv[data-family=film] .inv-page .sk-sec.sk-r6{grid-column:7/span 6} .inv[data-family=film] .inv-page .sk-sec.sk-l7{grid-column:1/span 7} .inv[data-family=film] .inv-page .sk-sec.sk-r5{grid-column:8/span 5} .inv[data-family=film] .inv-page .sk-sec.sk-tall{grid-row:span 2} .inv[data-family=film] .inv-page .cn-rsvp.sk-l6{align-self:start} .inv[data-family=film] .inv-page .cn-wishes.sk-sec{align-self:start} /* Beside the reply, the form to send a wish, in the middle of the reply's height; under the pair the wall of wishes across the window in columns, centred while it is short, a long one scrolling in its own height. */ .inv[data-family=film] .inv-page .cn-wishes.sk-r6{align-self:center} .inv[data-family=film] .cn-wall .wish-list{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,352px));justify-content:center;align-items:start;gap:18px 20px;width:100%;max-height:520px;padding:12px 8px 14px;overflow-y:auto;overscroll-behavior:contain;scrollbar-width:thin} /* The evening's moments, at a laptop's size. */ .inv[data-family=film] .sk-prog .programme{max-width:400px} .inv[data-family=film] .sk-prog .programme li{padding-block:15px;font-size:1.14rem} .inv[data-family=film] .cn-wishes .wish-form,.inv[data-family=film] .wish-list,.inv[data-family=film] .cn-gal .gallery{max-width:none} .inv[data-family=film] .sk-card{padding:44px 40px 40px} .inv[data-family=film] .sk-invite{padding:48px 64px 52px} .inv[data-family=film] .sk-invite .cn-names{font-size:clamp(3.6rem,5.4vw,5rem)} .inv[data-family=film] .sk-kick{font-size:1.85rem} .inv[data-family=film] .sk-hall{max-width:440px} .inv[data-family=film] .sk-reply .rsvp-actions{grid-template-columns:1fr 1fr} .inv[data-family=film] .cn-gal .gallery{grid-template-columns:repeat(3,minmax(0,1fr));gap:22px} .inv[data-family=film] .cn-gal .gallery[data-count="1"] img,.inv[data-family=film] .cn-gal .gallery[data-count="3"] img:first-child,.inv[data-family=film] .cn-gal .gallery[data-count="5"] img:first-child{grid-column:auto;aspect-ratio:4/5} .inv[data-family=film] .cn-gal .gallery[data-count="1"]{grid-template-columns:minmax(0,520px);justify-content:center} .inv[data-family=film] .cn-gal .gallery[data-count="2"],.inv[data-family=film] .cn-gal .gallery[data-count="4"]{grid-template-columns:repeat(2,minmax(0,360px));justify-content:center} .inv[data-family=film] .sk-foot{grid-column:1/-1} /* A demo's bar: room under the footer on the skin's own ground (invite.css's margin would collapse through the page and show the window's colour there). */ #inv[data-family=film][data-demo="1"] .inv-page{margin-bottom:0;padding-bottom:152px} } @media (min-width:1024px){ @keyframes fm-lean-l{to{transform:scale(1.06);opacity:0}} @media (prefers-reduced-motion:no-preference){@supports (animation-timeline:scroll()){html:not(.calm) .inv[data-family=film] .fm-after .fm-scene{animation-name:fm-lean-l}}} } /* ---------- the date under a coat to rub away (film.ts scratchDate; film.js paints it) ---------- The day's leaf as always, and over it a canvas film.js paints with the skin's coat (--sk-coat, a picture laid over it; --sk-coat-ink, its colour while that loads) and the line on it (--sk-coat-on). Without script, for reduced motion and html.calm it is never painted and stays out of the way. At about 40% cleared the rest melts (sk-melt) and a few petals fall down the card's edges (.sk-fall). The button under it shows the date at once. A finger that starts up or down the card scrolls the page (pan-y): only a stroke across it rubs (film.js). */ .inv[data-family=film] .sk-scratch{position:relative;width:min(100%,220px);border-radius:14px} .inv[data-family=film] .sk-scratch>.sk-cal{width:100%} .inv[data-family=film] .sk-coat{position:absolute;inset:0;z-index:1;display:block;width:100%;height:100%;border-radius:inherit;opacity:0;pointer-events:none} .inv[data-family=film] .sk-scratch.sk-on .sk-coat{opacity:1;pointer-events:auto;touch-action:pan-y} .inv[data-family=film] .sk-scratch-hint{position:absolute;inset:0;z-index:2;display:grid;place-items:center;margin:0;padding:16px;color:var(--sk-coat-on,#FFF9F0);font-weight:700;font-size:1.02rem;line-height:1.75;text-align:center;text-wrap:balance;text-shadow:0 1px 2px rgba(0,0,0,.28);opacity:0;pointer-events:none;transition:opacity .4s} .inv[data-family=film] .sk-scratch.sk-on .sk-scratch-hint{opacity:1} .inv[data-family=film] .sk-scratch.sk-rubbing .sk-scratch-hint,.inv[data-family=film] .sk-scratch.sk-melted .sk-scratch-hint{opacity:0} .inv[data-family=film] .sk-scratch.sk-melted .sk-coat{pointer-events:none;animation:sk-melt .9s cubic-bezier(.4,0,.2,1) forwards} @keyframes sk-melt{to{opacity:0;filter:blur(6px);transform:translateY(10px) scale(1.04)}} .inv[data-family=film] .sk-fall{position:absolute;inset:0;z-index:3;display:block;overflow:visible;pointer-events:none} .inv[data-family=film] .sk-fall img{position:absolute;left:0;top:0;width:24px;height:auto;max-width:none;opacity:0;-webkit-backface-visibility:visible;backface-visibility:visible;pointer-events:none} .inv[data-family=film] .sk-fall i{position:absolute;left:0;top:0;width:10px;height:10px;border-radius:50%;opacity:0;background:radial-gradient(closest-side,#fffaf0,rgba(255,226,160,.9) 30%,rgba(255,200,110,.35) 62%,rgba(255,190,100,0));pointer-events:none} .inv[data-family=film] .sk-scratch-show{display:inline-flex;align-items:center;justify-content:center;min-height:44px;margin:-6px 0 0;padding:6px 18px;border:0;border-radius:999px;background:none;color:var(--sk-title);font:inherit;font-weight:700;font-size:.94rem;text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:5px;cursor:pointer} .inv[data-family=film] .sk-scratch-show:focus-visible{outline:2px solid currentColor;outline-offset:2px} /* ---------- English: a page read left to right in its design's Latin faces (2026-10-03, PLAN-EN D6 to D9) ---------- Every rule here is under .inv[lang=en] (the words) or .inv[dir=ltr] (the geometry), so a Kurdish or Arabic page never matches one: their pixels stay as they were. The faces come from themes.ts palette(design, "en"): --i-font the names, --i-and the "&", --i-label the kickers, dates and labels, --i-body the running text, --i-num the figures, --i-title (with its size factor, case and tracking) a section's title. No place on a picture moves: --px/--py/--pw and their landscape twins stay physical, as the films do. */ /* The names: never upper-cased (McDonald, al-Hashimi), broken only at a name's own space or hyphen, never inside a word; a script's swash capitals given room (--i-names-lh, --i-names-pad). film.js holds each name on one line while it fits its place (fm-one), made smaller to fit to 0.72 of its size; past that a name may break at its own space (fm-wrap). */ .inv[data-family=film][lang=en] :is(.fm-names,.fm-anames,.cn-names){line-height:var(--i-names-lh,1.15);padding-inline:var(--i-names-pad,0);overflow-wrap:normal;word-break:normal;-webkit-hyphens:manual;hyphens:manual;text-transform:none} .inv[data-family=film][lang=en] .fm-one span,.inv[data-family=film][lang=en] .fm-names.fm-line:not([data-stack]){white-space:nowrap} .inv[data-family=film][lang=en] .fm-wrap span{text-wrap:balance} /* The "&": its own face, italic where the face has one (font-synthesis is off: a script's "&" is its own). The text carries a space before it and a no-break space after it, so it needs no margin of its own on a line. */ .inv[data-family=film][lang=en] :is(.fm-names,.fm-anames,.cn-names) em{font-family:var(--i-and);font-style:italic;font-weight:500} .inv[data-family=film][lang=en] .fm-names em,.inv[data-family=film][lang=en] .fm-names[data-stack] em{margin-inline:0} /* Stacked over the hero, the names stand close, the "&" between them: a Latin capital has no ێ's hat to clear, and a script's swash may reach past its line here, where nothing clips it. */ .inv[data-family=film][lang=en] .fm-anames{line-height:1.08} .inv[data-family=film][lang=en] .fm-anames em{margin-block:.02em .12em} /* The cover's names fit their box across before any script runs (a picker's card never runs film.js): each size (as above, --fm-ns) capped so the pair on one line (--nl em of the names face, from film.ts), or the wider stacked line (--nm2), fits the box, a fraction of the picture (--fm-pnw/--fm-lnw) and never past the screen's margins; never under 0.72 of the size. The picture is at least as wide as the screen, which only makes the cap a little cautious. A pair that does not stack (film.ts: all but the longest) keeps its one line there, until film.js takes over (fm-one); one that stacks keeps the kicker and the date clear of its second line (.fm-words[data-stack]), as film.js's nudge does on a page. */ .inv[data-family=film][lang=en] .fm-cover{--fm-nbox:min(100vw - 36px,46rem,100vw * var(--fm-pnw,.8))} .inv[data-family=film][lang=en] .fm-cover .fm-names{--fm-ns:clamp(2.3rem,11.6vw,3.4rem);font-size:min(var(--fm-ns),max(var(--fm-ns) * .72,var(--fm-nbox) / var(--nl,6)))} .inv[data-family=film][lang=en] .fm-cover .fm-names[data-stack]{font-size:min(var(--fm-ns),max(var(--fm-ns) * .72,var(--fm-nbox) / var(--nm2,4)))} .inv[data-family=film][lang=en] .fm-cover .fm-names[data-len=m]{--fm-ns:clamp(2.1rem,10.4vw,3rem)} .inv[data-family=film][lang=en] .fm-cover .fm-names[data-len=l]{--fm-ns:clamp(2rem,9.6vw,2.8rem)} .inv[data-family=film][lang=en] .fm-cover .fm-names[data-len=xl]{--fm-ns:clamp(1.8rem,8.4vw,2.4rem)} .inv[data-family=film][lang=en] .fm-cover .fm-names:not([data-stack]):not(.fm-one):not(.fm-wrap){white-space:nowrap} .inv[data-family=film][lang=en] .fm-words[data-stack]{--fm-ns:clamp(2.3rem,11.6vw,3.4rem);--fm-half:calc(.5 * var(--i-names-lh,1.15) * var(--fm-ns))} .inv[data-family=film][lang=en] .fm-words[data-stack=m]{--fm-ns:clamp(2.1rem,10.4vw,3rem)} .inv[data-family=film][lang=en] .fm-words[data-stack=l]{--fm-ns:clamp(2rem,9.6vw,2.8rem)} .inv[data-family=film][lang=en] .fm-words[data-stack=xl]{--fm-ns:clamp(1.8rem,8.4vw,2.4rem)} .inv[data-family=film][lang=en] .fm-words[data-stack] .fm-kick{margin-top:calc(-1 * var(--fm-half))} .inv[data-family=film][lang=en] .fm-words[data-stack] .fm-date{margin-top:var(--fm-half)} @media (min-aspect-ratio:1/1){ .inv[data-family=film][lang=en] .fm-cover{--fm-nbox:min(100vw - 36px,46rem,100vw * var(--fm-lnw,.5))} .inv[data-family=film][lang=en] .fm-cover .fm-names,.inv[data-family=film][lang=en] .fm-words[data-stack]{--fm-ns:clamp(2.6rem,4.6vw,4.6rem)} .inv[data-family=film][lang=en] .fm-cover .fm-names[data-len=m],.inv[data-family=film][lang=en] .fm-words[data-stack=m]{--fm-ns:clamp(2.4rem,4vw,4rem)} .inv[data-family=film][lang=en] .fm-cover .fm-names:is([data-len=l],[data-len=xl]),.inv[data-family=film][lang=en] .fm-words:is([data-stack=l],[data-stack=xl]){--fm-ns:clamp(2.2rem,3.4vw,3.4rem)} } /* Kickers, the cover's date and the hero's: uppercase, tracked, in the label face, at 0.82 of the Kurdish size (Arabic script is never letter-spaced, hence lang=en). The figures in them stand at capital height. */ .inv[data-family=film][lang=en] :is(.fm-kick,.fm-date,.fm-adate){font-family:var(--i-label);text-transform:uppercase;letter-spacing:.14em;font-variant-numeric:lining-nums} .inv[data-family=film][lang=en] .fm-kick{letter-spacing:.16em;font-size:clamp(.8rem,3.6vw,.98rem)} .inv[data-family=film][lang=en] .fm-date{font-size:clamp(.74rem,3.2vw,.87rem)} .inv[data-family=film][lang=en] .fm-adate{font-size:clamp(.76rem,3.45vw,.94rem)} /* The occasion standing alone under the date (efsane: "A Wedding Celebration"), in the body's italic, never shouted. */ .inv[data-family=film][lang=en] :is(.fm-occ,.fm-aocc){font-family:var(--i-body);font-style:italic;font-weight:400;text-transform:none;letter-spacing:.02em} .inv[data-family=film][lang=en] .fm-date .fm-occ{font-size:1.08em} .inv[data-family=film][lang=en] .fm-aocc{font-size:clamp(.84rem,3.7vw,1.02rem)} /* The instruction (the open link): a label too. The keepsake's is written on the print's margin, in the names' hand. */ .inv[data-family=film][lang=en] .fm-prompt .fm-open{font-family:var(--i-label);font-weight:600;text-transform:uppercase;letter-spacing:.14em;font-size:clamp(.84rem,3.5vw,.97rem)} .inv[data-family=film][lang=en] .fm-pinned .fm-open{font-weight:700} @media (min-aspect-ratio:1/1){ .inv[data-family=film][lang=en] .fm-kick,.inv[data-family=film][lang=en] .fm-date{font-size:clamp(.78rem,1.23vw,1.07rem)} .inv[data-family=film][lang=en] .fm-adate{font-size:clamp(.82rem,1.31vw,1.1rem)} .inv[data-family=film][lang=en] .fm-prompt .fm-open{font-size:clamp(.84rem,1.23vw,1.07rem)} } /* The page: Latin reads at a body line of 1.55 where Arabic script needs 1.8 to 2; the lead after the names (leadAfter) finishes the lead's sentence. */ .inv[data-family=film][lang=en] .sk-invite .lead{line-height:1.55;font-size:1.12rem} .inv[data-family=film][lang=en] .sk-invite .lead-after{margin-top:-4px} .inv[data-family=film][lang=en] .sk-invite .bless{line-height:1.55;font-style:italic} .inv[data-family=film][lang=en] .sk-venue .addr{line-height:1.55} .inv[data-family=film][lang=en] .sk-card.sk-note .cn-note{line-height:1.55} .inv[data-family=film][lang=en] .sk-scratch-hint{line-height:1.4} .inv[data-family=film][lang=en] .sk-venue .venue,.inv[data-family=film][lang=en] .sk-call .contact-name{line-height:1.2} /* Titles (D8): a script design's in its script, a step larger; a serif design's in its label face, uppercase, tracked, smaller (palette's --i-title, --i-title-k, --i-title-case, --i-title-track). */ .inv[data-family=film][lang=en] .sk-kick{font-family:var(--i-title,var(--i-font));font-size:calc(1.6rem * var(--i-title-k,1));text-transform:var(--i-title-case,none);letter-spacing:var(--i-title-track,0);line-height:1.3} /* The figures that are counted or read across (the countdown, the calendar's day, the evening's times) stand at capital height and keep their width, so a ticking second never jitters; never a script's swashed numerals (--i-num). */ .inv[data-family=film][lang=en] :is(.sk-date .cn-cd strong,.sk-cal-d,.sk-prog .programme time){font-family:var(--i-num);font-variant-numeric:lining-nums tabular-nums} .inv[data-family=film][lang=en] .sk-date .cn-cd span{font-family:var(--i-label);text-transform:uppercase;letter-spacing:.1em;font-size:.6rem} /* The calendar's leaf: the month and year a tracked label, the weekday in the body's italic. */ .inv[data-family=film][lang=en] .sk-cal-m{font-family:var(--i-label);text-transform:uppercase;letter-spacing:.14em;font-size:.8rem;font-variant-numeric:lining-nums} .inv[data-family=film][lang=en] .sk-cal-wd{font-style:italic;font-weight:400} @media (min-width:1024px){.inv[data-family=film][lang=en] .sk-kick{font-size:calc(1.85rem * var(--i-title-k,1))}} /* ---------- left to right: what must swap sides (layout.md 3A) ---------- */ /* The evening's gold line runs between the times and the moments, measured from the start side the times stand on. */ @media (max-width:1023.98px){ .inv[data-family=film][dir=ltr]:not([data-skin=scrapbook]) .sk-prog .programme::before{right:auto;left:calc((100% - 40px) * var(--sk-pt) + 20px);margin:0 0 0 -.5px} } /* The reply's number: its arrow on the end side, clear of the number. */ .inv[data-family=film][dir=ltr] .sk-reply .rsvp select{background-position:calc(100% - 21px) 55%,calc(100% - 16px) 55%,0 0;padding-inline-end:30px} /* A phone held sideways: the instruction beside the ring, words first, so on the ring's left (every ring is near the frame's middle, so the room is there). */ @supports (top:1cqh){@media (min-aspect-ratio:1/1) and (max-height:500px){ .inv[data-family=film][dir=ltr] .fm-cover[data-beacon] .fm-prompt .fm-act{left:calc(var(--fm-cx) - var(--fm-gap));max-width:calc(var(--fm-cx) - var(--fm-gap) - 12px);transform:translate(-100%,-50%)} }} /* tactile.css */ /* The Classic interactive covers: the tactile kit (functions/src/invite/styles/tactile.ts, tactile.js). Linked after film.css (the frame every film design shares) and before the design's skin and its own stylesheet, which win. Every rule is scoped to .inv[data-kit=tactile]. Animates transform, translate, rotate, scale, opacity and masks only. What the design's own stylesheet reads: --tc-p on the cover, the gesture's progress, 0 to 1 (unset at rest and in the pickers: the closed state); on the hero always 1, so one set of rules draws both. Scrub a paused keyframe animation with it: .inv[data-style=x] .tc-layer[data-l=panel-l] .tc-pic{animation:x-open 1s linear both paused; animation-delay:calc(var(--tc-p, 0) * -1s)} .tc-started / .tc-on / .tc-auto / .tc-done on the cover: a gesture under way, a finger on it, playing by itself, done (the cover lingers on the opened scene, then film.js hands over). .tc-layer[data-l=] > .tc-pic > picture: a layer (the engine moves .tc-layer, the design .tc-pic); .tc-slot[data-s=] > .tc-in: live text in the scene. Bump ASSET_VERSION in functions/src/invite/render.ts when this changes. */ /* ---------- the scene: layers at their depths ---------- */ /* A live cover's own gestures, never the page's scroll (.tc-ready: the kit runs). Never in a picker, whose covers sit in a page the guest scrolls. */ .inv[data-kit=tactile] .fm-tactile.fm-cover.tc-ready,.inv[data-kit=tactile] .fm-tactile.fm-cover.tc-calm{touch-action:none;-webkit-touch-callout:none} .inv[data-kit=tactile] .fm-after{--tc-p:1} /* The cover's shade: the films' dark top and foot where light words sit, a soft cream where dark words do (the foot follows the instruction's tone, data-tc-pfoot / data-tc-lfoot), lighter than a film's: a still scene has no frame to hide. */ .inv[data-kit=tactile] .fm-tactile .fm-shade{background:linear-gradient(rgba(var(--fm-top,18,9,4),var(--fm-topa,.4)),rgba(var(--fm-top,18,9,4),0) 26%,rgba(var(--tc-foot,12,6,4),0) 70%,rgba(var(--tc-foot,12,6,4),var(--tc-foota,.26)) 86%,rgba(var(--tc-foot,12,6,4),var(--tc-footb,.5)))} @media not all and (min-aspect-ratio:1/1){.inv[data-kit=tactile] .fm-tactile[data-tc-pfoot=dark]{--tc-foot:255,250,242;--tc-foota:.22;--tc-footb:.4}} @media (min-aspect-ratio:1/1){.inv[data-kit=tactile] .fm-tactile[data-tc-lfoot=dark]{--tc-foot:255,250,242;--tc-foota:.22;--tc-footb:.4}} /* The hero's foot, where the cue to read on sits: the films' dusk on a dark scene, a cream light on a bright one. */ @media not all and (min-aspect-ratio:1/1){.inv[data-kit=tactile] .fm-after[data-ptone=dark] .fm-light{background:linear-gradient(rgba(255,250,242,0) 72%,rgba(255,250,242,.4))}} @media (min-aspect-ratio:1/1){.inv[data-kit=tactile] .fm-after[data-ltone=dark] .fm-light{background:linear-gradient(rgba(255,250,242,0) 72%,rgba(255,250,242,.4))}} /* A short window (a phone held sideways): the hero is the window, as the cover is, so the two meet in place. The films' 440 px floor drew a 320 px window's scene 1.4 times larger than its cover's, and put the date under the window's foot. The cue to read on stands in the window's lower corner on the side a line ends, beside the words, never on the date (above the bar that sells the design on a demo, film.css). */ @media (max-height:500px){.inv[data-kit=tactile] .fm-after{min-height:0}} @media (min-aspect-ratio:1/1) and (max-height:500px){ .inv[data-kit=tactile] .fm-after .fm-cue{left:auto;right:max(18px,env(safe-area-inset-right));margin-left:0} .inv[data-kit=tactile][dir=rtl] .fm-after .fm-cue{right:auto;left:max(18px,env(safe-area-inset-left))} } .inv[data-kit=tactile] .tc-layer,.inv[data-kit=tactile] .tc-pic{position:absolute;top:0;left:0;right:0;bottom:0;display:block} /* Depth: a mouse moves a layer by its depth, the nearest most, against the pointer; on the hero the scroll lifts the nearer ones faster. tactile.js gives the move for depth 1 in pixels (--tc-ux, --tc-uy: 1.6% of the window across and down, and 7% of its height over the hero's scroll) on each layer and slot; where no mouse moves (a phone) it breathes them on the compositor instead (each one's own animation of this translate). A full-frame layer is scaled a little (--tc-o) so its edge never shows. Individual transform properties, so a design's own transform on .tc-pic, and on a box, composes with them. The four are not inherited: a write restyles the one layer, never the scene under it. */ @property --tc-ux{syntax:"";inherits:false;initial-value:0px} @property --tc-uy{syntax:"";inherits:false;initial-value:0px} @property --tc-mx{syntax:"";inherits:false;initial-value:0} @property --tc-my{syntax:"";inherits:false;initial-value:0} .inv[data-kit=tactile] .tc-layer{translate:calc(var(--tc-ux,0px) * var(--tc-d,0)) calc(var(--tc-uy,0px) * var(--tc-d,0));scale:var(--tc-o,1)} .inv[data-kit=tactile] .tc-pic>picture,.inv[data-kit=tactile] .tc-pic>img{position:absolute;top:0;left:0;width:100%;height:100%;display:block} .inv[data-kit=tactile] .tc-pic img{-webkit-user-select:none;user-select:none;pointer-events:none} /* A cut-out in a box of the frame (at), as wide and as tall as its box. */ .inv[data-kit=tactile] .tc-box{right:auto;bottom:auto;left:var(--px);top:var(--py);width:var(--pw);height:var(--ph);transform:translate(-50%,-50%)} .inv[data-kit=tactile] .tc-pic img.tc-cut{object-fit:fill} @media (min-aspect-ratio:1/1){.inv[data-kit=tactile] .tc-box{left:var(--lx);top:var(--ly);width:var(--lw);height:var(--lh)}} @media not all and (min-aspect-ratio:1/1){.inv[data-kit=tactile] .tc-only-l{display:none}} @media (min-aspect-ratio:1/1){.inv[data-kit=tactile] .tc-only-p{display:none}} /* Live text in the scene, placed as the cover's words are; it drifts with its depth too. */ .inv[data-kit=tactile] .tc-slot{position:absolute;left:var(--px);top:var(--py);width:var(--pw);margin:0;text-align:center;transform:translate(-50%,-50%);translate:calc(var(--tc-ux,0px) * var(--tc-d,0)) calc(var(--tc-uy,0px) * var(--tc-d,0))} @media (min-aspect-ratio:1/1){.inv[data-kit=tactile] .tc-slot{left:var(--lx);top:var(--ly);width:var(--lw)}} /* In front of the words: a stage of the same frame, over the cover's words and under its instruction. */ .inv[data-kit=tactile] .tc-front{position:absolute;top:0;left:0;right:0;bottom:0;display:block;overflow:hidden;pointer-events:none} .inv[data-kit=tactile] .fm-after .tc-front{z-index:1} .inv[data-kit=tactile] .tc-fx{position:absolute;top:0;left:0;right:0;bottom:0;display:block;pointer-events:none} /* ---------- the paint: the canvas over its layer, the picture itself hidden on the cover until painted ---------- */ .inv[data-kit=tactile] .tc-canvas{position:absolute;top:0;left:0;width:100%;height:100%;display:block;pointer-events:none} .inv[data-kit=tactile] .fm-cover .tc-paint .tc-pic>picture,.inv[data-kit=tactile] .fm-cover .tc-paint .tc-pic>img{opacity:0;transition:opacity .9s ease-out} .inv[data-kit=tactile] .fm-cover .tc-paint.tc-painted .tc-pic>picture,.inv[data-kit=tactile] .fm-cover .tc-paint.tc-painted .tc-pic>img{opacity:1} .inv[data-kit=tactile] .fm-after .tc-canvas{display:none} /* ---------- the names (data-tc-names) ---------- */ /* On one line where the design asks (data-tc-line, a phone upright), stacked or not, each piece a box of its own so a name's last letter never joins the و; tactile.js makes them smaller to fit their place. */ @media not all and (min-aspect-ratio:1/1){ .inv[data-kit=tactile] .fm-tactile[data-tc-line] .fm-names{white-space:nowrap} .inv[data-kit=tactile] .fm-tactile[data-tc-line] .fm-names[data-stack] span,.inv[data-kit=tactile] .fm-tactile[data-tc-line] .fm-names[data-stack] em{display:inline-block} .inv[data-kit=tactile] .fm-tactile[data-tc-line] .fm-names[data-stack] em{margin-inline:.22em} .inv[data-kit=tactile][lang=en] .fm-tactile[data-tc-line] .fm-words[data-stack] .fm-kick,.inv[data-kit=tactile][lang=en] .fm-tactile[data-tc-line] .fm-words[data-stack] .fm-date{margin-top:0} } /* "under": the hero's names are on the cover from the start, under whatever the gesture moves away. */ .inv[data-kit=tactile] .fm-tactile[data-tc-names=under] .fm-big{opacity:1} .inv[data-kit=tactile] .fm-tactile[data-tc-names=under] .fm-big>*{transform:none} /* "write": they write themselves with the progress (tactile.js writer); the cover's own names and date step aside. */ .inv[data-kit=tactile] .fm-tactile[data-tc-names=write].tc-ready .fm-big{opacity:1;transition:none} .inv[data-kit=tactile] .fm-tactile[data-tc-names=write].tc-ready .fm-big>*{transform:none;transition:none} .inv[data-kit=tactile] .fm-tactile[data-tc-names=write].tc-ready .fm-names,.inv[data-kit=tactile] .fm-tactile[data-tc-names=write].tc-ready .fm-date{opacity:0} /* Words written by a progress (--tc-w, 0 to 1): a soft-edged mask three times their width, slid along, from the right in Kurdish and Arabic and from the left in English; at 1 the edge is past the end and nothing is hidden. */ .inv[data-kit=tactile] .tc-ink{position:relative;-webkit-mask-image:linear-gradient(to right,#000 45%,transparent 55%);mask-image:linear-gradient(to right,#000 45%,transparent 55%);-webkit-mask-size:300% 100%;mask-size:300% 100%;-webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;-webkit-mask-position:calc(82.5% - 65% * var(--tc-w,1)) 0;mask-position:calc(82.5% - 65% * var(--tc-w,1)) 0} .inv[data-kit=tactile][dir=rtl] .tc-ink{-webkit-mask-image:linear-gradient(to left,#000 45%,transparent 55%);mask-image:linear-gradient(to left,#000 45%,transparent 55%);-webkit-mask-position:calc(17.5% + 65% * var(--tc-w,1)) 0;mask-position:calc(17.5% + 65% * var(--tc-w,1)) 0} /* A written piece hugs its words (its mask is its own width) and stands centred in its place by its middle, not by auto margins: a piece wider than its place (a long name past the size film.js fits it to) then runs over by as much on either side, never all to one (the Calligrapher's English date crossed its card's border on the right). The place's one column is its own width, so it never grows to the widest piece. */ .inv[data-kit=tactile] .fm-tactile[data-tc-names=write] .fm-big{grid-template-columns:minmax(0,1fr)} .inv[data-kit=tactile] .fm-big .tc-ink,.inv[data-kit=tactile] .fm-big .fm-anames>.tc-ink{width:-webkit-fit-content;width:fit-content;justify-self:start;margin-inline:0;left:50%;translate:-50% 0} .inv[data-kit=tactile][dir=rtl] .fm-big .tc-ink,.inv[data-kit=tactile][dir=rtl] .fm-big .fm-anames>.tc-ink{left:auto;right:50%;translate:50% 0} .inv[data-kit=tactile] .sk-kick .tc-ink{display:inline-block} /* Room for the ink: a written word is masked to its own box (and a gold one is painted only inside it), so a Kurdish or Arabic descender, or a script capital's swash past the box, was cut off (the P of an English RSVP read as an F). The box grows by its padding, never its place. The names' pieces get their height's room from the design. */ .inv[data-kit=tactile] .sk-kick>.tc-ink{padding:.3em .2em;margin:-.3em -.2em} .inv[data-kit=tactile] .fm-big .fm-anames>.tc-ink{padding-inline:.15em} /* The pen's point: a gold-white glint riding the edge while a piece is being written. */ .inv[data-kit=tactile] .tc-ink.tc-pen::after{content:"";position:absolute;top:52%;left:calc(var(--tc-w,1) * 100%);width:.2em;height:.2em;margin:-.1em 0 0 -.1em;border-radius:50%;background:radial-gradient(closest-side,#fff,#ffe9b0 45%,rgba(255,214,130,0));box-shadow:0 0 .35em .12em rgba(255,214,140,.75);pointer-events:none} .inv[data-kit=tactile][dir=rtl] .tc-ink.tc-pen::after{left:auto;right:calc(var(--tc-w,1) * 100%);margin:-.1em -.1em 0 0} /* ---------- the instruction and the finger ---------- */ /* Once a gesture is under way the instruction steps aside; it comes back if the gesture springs back. */ .inv[data-kit=tactile] .fm-tactile .fm-act{transition:opacity .3s} .inv[data-kit=tactile] .fm-tactile.tc-started .fm-act,.inv[data-kit=tactile] .fm-tactile.tc-done .fm-act{opacity:0} /* The instruction's mark says the gesture: two chevrons parting (drag), one rising (swipe), a ring that fills (hold), a brush circling (paint); one tap keeps the frame's breathing ring. */ .inv[data-kit=tactile] .fm-tactile:not([data-tc-g=tap]) .fm-ring{border-color:transparent;box-shadow:none} .inv[data-kit=tactile] .fm-tactile:not([data-tc-g=tap]) .fm-ring::after{opacity:0} .inv[data-kit=tactile] .fm-tactile[data-tc-g=drag] .fm-ring{width:46px} .inv[data-kit=tactile] .fm-tactile[data-tc-g=drag] .fm-ring::before,.inv[data-kit=tactile] .fm-tactile[data-tc-g=drag] .fm-ring::after{content:"";position:absolute;inset:auto;top:50%;width:9px;height:9px;margin-top:-5px;border-radius:0;background:none;border:solid currentColor;border-width:0 0 2px 2px;opacity:.9} .inv[data-kit=tactile] .fm-tactile[data-tc-g=drag] .fm-ring::before{left:8px;transform:rotate(45deg)} .inv[data-kit=tactile] .fm-tactile[data-tc-g=drag] .fm-ring::after{right:8px;transform:rotate(-135deg)} .inv[data-kit=tactile] .fm-tactile[data-tc-g=swipe] .fm-ring::before{content:"";position:absolute;left:50%;top:50%;width:10px;height:10px;margin:-3px 0 0 -6px;border:solid currentColor;border-width:2px 0 0 2px;transform:rotate(45deg)} .inv[data-kit=tactile] .fm-tactile[data-tc-g=hold] .fm-ring{border-color:currentColor} .inv[data-kit=tactile] .fm-tactile[data-tc-g=hold] .fm-ring::after{opacity:.85;inset:9px} .inv[data-kit=tactile] .fm-tactile[data-tc-g=paint] .fm-ring::before{content:"";position:absolute;left:50%;top:50%;width:10px;height:10px;margin:-5px;border-radius:50%;background:currentColor;opacity:.9} /* Where nothing moves (reduced motion, html.calm: .tc-calm, tactile.js) a tap, or any finger that lifts, opens, and the instruction is the page's own "open the invitation" with the frame's own ring (film.css), never a gesture's words and mark: the chevrons and the brush asked for what a tap does. */ .inv[data-kit=tactile] .fm-tactile.tc-calm[data-tc-g] .fm-ring{width:30px;height:30px;border-color:currentColor;box-shadow:0 0 0 1px rgba(var(--fm-ring,0,0,0),.25),0 0 10px rgba(var(--fm-ring,0,0,0),.25)} .inv[data-kit=tactile] .fm-tactile.tc-calm[data-tc-g] .fm-ring::before{content:none} .inv[data-kit=tactile] .fm-tactile.tc-calm[data-tc-g] .fm-ring::after{content:"";position:absolute;inset:7px;top:7px;right:7px;bottom:7px;left:7px;width:auto;height:auto;margin:0;border:0;border-radius:50%;background:currentColor;opacity:.85;transform:none} @media (prefers-reduced-motion:no-preference){ html:not(.calm) .inv[data-kit=tactile] .fm-tactile[data-tc-g=drag]:not(.tc-started) .fm-ring::before{animation:tc-part-l 1.9s ease-in-out infinite} html:not(.calm) .inv[data-kit=tactile] .fm-tactile[data-tc-g=drag]:not(.tc-started) .fm-ring::after{animation:tc-part-r 1.9s ease-in-out infinite} html:not(.calm) .inv[data-kit=tactile] .fm-tactile[data-tc-g=swipe]:not(.tc-started) .fm-ring::before{animation:tc-rise 1.7s ease-in-out infinite} html:not(.calm) .inv[data-kit=tactile] .fm-tactile[data-tc-g=paint]:not(.tc-started) .fm-ring::before{animation:tc-orbit 2.4s linear infinite} } @keyframes tc-part-l{0%,100%{transform:translateX(3px) rotate(45deg);opacity:.5}50%{transform:translateX(-4px) rotate(45deg);opacity:1}} @keyframes tc-part-r{0%,100%{transform:translateX(-3px) rotate(-135deg);opacity:.5}50%{transform:translateX(4px) rotate(-135deg);opacity:1}} @keyframes tc-rise{0%{transform:translateY(5px) rotate(45deg);opacity:0}40%{opacity:1}100%{transform:translateY(-6px) rotate(45deg);opacity:0}} @keyframes tc-orbit{from{transform:rotate(0deg) translateX(8px) rotate(0deg)}to{transform:rotate(360deg) translateX(8px) rotate(-360deg)}} /* Where the finger is (tactile.js sets --tc-tx and --tc-ty): a soft glow on a drag or a swipe, a brush's circle on the paint, and on a hold a fine ring that fills as the progress does. */ .inv[data-kit=tactile] .tc-touch{position:fixed;left:var(--tc-tx,-200px);top:var(--tc-ty,-200px);z-index:2;display:block;width:76px;height:76px;margin:-38px 0 0 -38px;border-radius:50%;opacity:0;transform:scale(.7);pointer-events:none;background:radial-gradient(closest-side,rgba(255,250,238,.38),rgba(255,246,228,0));transition:opacity .25s,transform .3s cubic-bezier(.3,1.4,.5,1)} .inv[data-kit=tactile] .fm-tactile.tc-on .tc-touch{opacity:1;transform:none} .inv[data-kit=tactile] .fm-tactile[data-tc-g=paint] .tc-touch{width:58px;height:58px;margin:-29px 0 0 -29px;background:none;border:1.5px solid rgba(255,255,255,.85);box-shadow:0 0 0 1px rgba(60,50,40,.25),0 2px 10px rgba(0,0,0,.15)} .inv[data-kit=tactile] .fm-tactile[data-tc-g=hold] .tc-touch{width:88px;height:88px;margin:-44px 0 0 -44px;background:conic-gradient(var(--tc-ring,#E9C77E) calc(var(--tc-p,0) * 360deg),rgba(255,255,255,.28) 0);-webkit-mask:radial-gradient(closest-side,transparent 84%,#000 86%,#000 98%,transparent);mask:radial-gradient(closest-side,transparent 84%,#000 86%,#000 98%,transparent)} html.calm .inv[data-kit=tactile] .tc-touch{display:none} /* ---------- what moves by itself: particles and light, only while on screen (.on) ---------- */ .inv[data-kit=tactile] .tc-amb{position:absolute;top:0;left:0;right:0;bottom:0;display:block;overflow:hidden;pointer-events:none} /* Petals: each from its own place above the frame, falling, swaying and turning on its own time (tactile.ts seeds them). */ .inv[data-kit=tactile] .tc-amb[data-amb=petals] img{position:absolute;left:var(--x);top:-8%;width:var(--z);height:auto;max-width:none;opacity:0;-webkit-backface-visibility:visible;backface-visibility:visible} /* Sparkles: a four-point glint at each place, twinkling; motes: a soft warm light rising slowly. */ .inv[data-kit=tactile] .tc-amb[data-amb=sparkle] i,.inv[data-kit=tactile] .tc-amb[data-amb=motes] i{position:absolute;left:var(--px);top:var(--py);display:block;width:22px;height:22px;margin:-11px 0 0 -11px;opacity:0;transform:scale(var(--z,1))} .inv[data-kit=tactile] .tc-amb[data-amb=sparkle] i{background:radial-gradient(closest-side,#fff,rgba(255,240,205,.85) 22%,rgba(255,220,150,0) 60%),linear-gradient(90deg,rgba(255,244,214,0) 0,rgba(255,250,236,.95) 50%,rgba(255,244,214,0) 100%) 50% 50%/100% 2px no-repeat,linear-gradient(rgba(255,244,214,0) 0,rgba(255,250,236,.95) 50%,rgba(255,244,214,0) 100%) 50% 50%/2px 100% no-repeat;mix-blend-mode:screen} .inv[data-kit=tactile] .tc-amb[data-amb=motes] i{width:8px;height:8px;margin:-4px 0 0 -4px;border-radius:50%;background:radial-gradient(closest-side,rgba(255,236,190,.95),rgba(255,214,140,0));mix-blend-mode:screen} @media (min-aspect-ratio:1/1){.inv[data-kit=tactile] .tc-amb[data-amb=sparkle] i,.inv[data-kit=tactile] .tc-amb[data-amb=motes] i{left:var(--lx);top:var(--ly)}} /* A phone's hero twinkles and motes are half as many: Crystal's ran 69 animations at once on a budget phone. */ @media (max-width:600px),(max-height:500px){.inv[data-kit=tactile] .fm-after .tc-amb[data-amb=sparkle] i:nth-child(2n),.inv[data-kit=tactile] .fm-after .tc-amb[data-amb=motes] i:nth-child(2n){display:none}} /* A band of light gliding over a layer, in that layer's own shape (its picture as the mask). The band fades out at its own sides too: its gradient is slanted, so on a tall layer two corners of its box stayed lit, and the box's edge glided across the Veil's satin as a hard vertical seam. */ .inv[data-kit=tactile] .tc-sweep{position:absolute;top:0;left:0;right:0;bottom:0;display:block;overflow:hidden;pointer-events:none;-webkit-mask-image:var(--tc-mp);mask-image:var(--tc-mp);-webkit-mask-size:100% 100%;mask-size:100% 100%;-webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;mix-blend-mode:screen} @media (min-aspect-ratio:1/1){.inv[data-kit=tactile] .tc-sweep{-webkit-mask-image:var(--tc-ml);mask-image:var(--tc-ml)}} .inv[data-kit=tactile] .tc-sweep::before{content:"";position:absolute;top:-10%;bottom:-10%;left:-60%;width:60%;background:linear-gradient(100deg,rgba(255,248,230,0) 20%,rgba(255,248,230,.55) 50%,rgba(255,248,230,0) 80%);opacity:0;-webkit-mask-image:linear-gradient(90deg,transparent,#000 16%,#000 84%,transparent);mask-image:linear-gradient(90deg,transparent,#000 16%,#000 84%,transparent)} @media (prefers-reduced-motion:no-preference){ html:not(.calm) .inv[data-kit=tactile] .tc-amb.on[data-amb=petals] img{animation:tc-fall var(--du,14s) linear var(--dl,0s) infinite} html:not(.calm) .inv[data-kit=tactile] .tc-amb.on[data-amb=sparkle] i{animation:tc-twinkle var(--du,3s) ease-in-out var(--dl,0s) infinite} html:not(.calm) .inv[data-kit=tactile] .tc-amb.on[data-amb=motes] i{animation:tc-mote var(--du,12s) ease-in-out var(--dl,0s) infinite} html:not(.calm) .inv[data-kit=tactile] .tc-sweep.on::before{animation:tc-sweep var(--tc-every,7s) cubic-bezier(.45,0,.3,1) 1.2s infinite} html:not(.calm) .inv[data-kit=tactile] .tc-sway>.tc-pic{transform-origin:50% 0;animation:tc-sway 6.5s ease-in-out infinite alternate} } @keyframes tc-fall{ 0%{opacity:0;transform:translate(0,0) rotate(0deg)} 8%{opacity:.92} 35%{transform:translate(calc(var(--sw,5) * 1vw),40vh) rotate(calc(var(--r,300deg) * .35));transform:translate(calc(var(--sw,5) * 1cqw),42cqh) rotate(calc(var(--r,300deg) * .35))} 70%{transform:translate(calc(var(--sw,5) * -.5vw),80vh) rotate(calc(var(--r,300deg) * .7));transform:translate(calc(var(--sw,5) * -.5cqw),82cqh) rotate(calc(var(--r,300deg) * .7))} 92%{opacity:.85} 100%{opacity:0;transform:translate(calc(var(--sw,5) * .6vw),112vh) rotate(var(--r,300deg));transform:translate(calc(var(--sw,5) * .6cqw),116cqh) rotate(var(--r,300deg))} } @keyframes tc-twinkle{0%,100%{opacity:0;transform:scale(calc(var(--z,1) * .3)) rotate(0deg)}45%{opacity:1;transform:scale(var(--z,1)) rotate(20deg)}60%{opacity:.7}} @keyframes tc-mote{0%{opacity:0;transform:translateY(0) scale(var(--z,1))}25%{opacity:.8}100%{opacity:0;transform:translateY(-14vh) scale(var(--z,1))}} @keyframes tc-sweep{0%{opacity:0;transform:translateX(0)}6%{opacity:1}28%{opacity:1;transform:translateX(270%)}32%,100%{opacity:0;transform:translateX(270%)}} @keyframes tc-sway{from{rotate:calc(var(--tc-sway,1.2deg) * -1);translate:0 0}to{rotate:var(--tc-sway,1.2deg);translate:0 .6%}} /* ---------- a tap on a point: a warm bloom, a ring going out and a few glints (tactile.js burst) ---------- Drawn as they are, not screened: on the brightest part of a lit picture a screen blend added next to nothing. Only for a tap the guest made (no burst for reduced motion: tactile.js runs no points there). The ring and the glints stay about half a second at their brightest before they go: at a third of one they were missed. */ .inv[data-kit=tactile] .tc-glint{position:absolute;display:block;width:24px;height:24px;margin:-12px 0 0 -12px;opacity:0;pointer-events:none;background:radial-gradient(closest-side,#fff,rgba(255,238,196,.92) 30%,rgba(255,214,140,0) 70%);filter:drop-shadow(0 0 3px rgba(255,255,255,.9));animation:tc-glint 1.1s var(--gd,0s) cubic-bezier(.2,.7,.3,1) both} @keyframes tc-glint{0%{opacity:0;transform:translate(0,0) scale(.3)}16%{opacity:1}62%{opacity:.95}100%{opacity:0;transform:translate(var(--gx,0),var(--gy,0)) scale(.9)}} .inv[data-kit=tactile] .tc-bloom{position:absolute;display:block;width:84px;height:84px;margin:-42px 0 0 -42px;border-radius:50%;opacity:0;pointer-events:none;background:radial-gradient(closest-side,rgba(255,255,250,.95),rgba(255,236,190,.7) 30%,rgba(255,206,130,.28) 62%,rgba(255,200,120,0))} .inv[data-kit=tactile] .tc-ring{position:absolute;display:block;width:40px;height:40px;margin:-20px 0 0 -20px;border-radius:50%;opacity:0;pointer-events:none;border:1.5px solid rgba(255,250,236,.95);box-shadow:0 0 6px rgba(255,220,150,.8)} @media (prefers-reduced-motion:no-preference){ html:not(.calm) .inv[data-kit=tactile] .tc-bloom{animation:tc-bloom .65s cubic-bezier(.2,.7,.3,1) both} html:not(.calm) .inv[data-kit=tactile] .tc-ring{animation:tc-ring 1s cubic-bezier(.2,.7,.3,1) both} } @keyframes tc-bloom{0%{opacity:0;transform:scale(.3)}22%{opacity:1;transform:scale(1)}100%{opacity:0;transform:scale(1.25)}} @keyframes tc-ring{0%{opacity:0;transform:scale(.4)}12%{opacity:1}60%{opacity:.9}100%{opacity:0;transform:scale(2.1)}} /* ---------- the page's playful moments (the hero's data-tc play; tactile.js) ---------- */ /* The countdown's digits flip as they change. */ .inv[data-kit=tactile].tc-flips [data-cd] [data-u]{display:inline-block;transform-origin:50% 50%;-webkit-backface-visibility:hidden;backface-visibility:hidden} @media (prefers-reduced-motion:no-preference){html:not(.calm) .inv[data-kit=tactile].tc-flips [data-cd] .tc-tick{animation:tc-flip .5s cubic-bezier(.3,1.35,.5,1)}} @keyframes tc-flip{from{transform:perspective(300px) rotateX(-88deg);opacity:.2}to{transform:perspective(300px) rotateX(0);opacity:1}} /* The programme opens on a tap (folded only with script; open without it). */ .inv[data-kit=tactile] .tc-fold{cursor:pointer} /* The fold is as wide as its card, so the moments keep the card's width once open (as a fit-content column «نانی ئێوارە» broke in two). */ .inv[data-kit=tactile] .tc-fold-body{display:grid;grid-template-rows:0fr;width:100%;align-self:stretch;transition:grid-template-rows .6s cubic-bezier(.3,0,.2,1)} .inv[data-kit=tactile] .tc-fold-body>div{min-height:0;overflow:hidden} .inv[data-kit=tactile] .tc-fold.tc-open .tc-fold-body{grid-template-rows:1fr} .inv[data-kit=tactile] .tc-fold-btn{position:relative;display:block;width:42px;height:42px;margin:4px auto 2px;padding:0;border:1px solid var(--i-accent-line,currentColor);border-radius:50%;background:transparent;color:var(--i-accent-ink,currentColor);cursor:pointer;-webkit-tap-highlight-color:transparent} .inv[data-kit=tactile] .tc-fold-btn i{position:absolute;left:50%;top:50%;width:9px;height:9px;margin:-7px 0 0 -5px;border:solid currentColor;border-width:0 2px 2px 0;transform:rotate(45deg);transition:transform .4s,margin .4s} .inv[data-kit=tactile] .tc-fold.tc-open .tc-fold-btn i{transform:rotate(-135deg);margin-top:-2px} .inv[data-kit=tactile] .tc-fold-btn:focus-visible{outline:2px solid currentColor;outline-offset:3px} /* Under the closed fold, the page's words for "tap to open" (heroData's fold), gone once it has opened. */ .inv[data-kit=tactile] .tc-fold-hint{display:block;margin:2px auto 6px;font-size:.82rem;line-height:1.5;color:var(--sk-muted,currentColor);text-align:center;transition:opacity .4s} .inv[data-kit=tactile][lang=en] .tc-fold-hint{font-family:var(--i-label);letter-spacing:.12em;text-transform:uppercase;font-size:.72rem} .inv[data-kit=tactile] .tc-fold.tc-opened .tc-fold-hint{display:none} @media (prefers-reduced-motion:no-preference){html:not(.calm) .inv[data-kit=tactile] .tc-fold:not(.tc-open) .tc-fold-btn{animation:tc-nudge 2.6s ease-in-out 1s infinite}} @keyframes tc-nudge{0%,70%,100%{transform:none}80%{transform:translateY(3px)}90%{transform:translateY(-1px)}} /* The day's leaf turns down from its top edge once it is well on screen (.tc-seen on it, tactile.js; .tc-leafio: the script watches it): as its section came in the leaf was still below the fold, and it had turned before it was seen. */ @media (prefers-reduced-motion:no-preference){ html.io:not(.calm) .inv[data-kit=tactile].tc-play-leaf .cn-when .sk-cal{transform-origin:50% 0;transition:transform 1.1s .15s cubic-bezier(.2,.8,.2,1),opacity .6s .15s} html.io:not(.calm) .inv[data-kit=tactile].tc-play-leaf.tc-leafio.play .cn-when .sk-cal:not(.tc-seen){transform:perspective(800px) rotateX(-96deg);opacity:0} } /* ---------- sections rising in: other ways than the cinema frame's lift (the hero's data-rise) ---------- */ @media (prefers-reduced-motion:no-preference){ html.io .inv[data-kit=tactile] .fm-after[data-rise=unfold]~.inv-sheet .cn-sec>*,html.io .inv[data-kit=tactile] .fm-after[data-rise=unfold]~.inv-side .cn-sec>*{transform-origin:50% 0} html.io .inv[data-kit=tactile].play .fm-after[data-rise=unfold]~.inv-sheet .cn-sec[data-io]:not(.in)>*,html.io .inv[data-kit=tactile].play .fm-after[data-rise=unfold]~.inv-side .cn-sec[data-io]:not(.in)>*{transform:perspective(900px) rotateX(-18deg) translateY(10px)} html.io .inv[data-kit=tactile] .fm-after[data-rise=blur]~.inv-sheet .cn-sec>*,html.io .inv[data-kit=tactile] .fm-after[data-rise=blur]~.inv-side .cn-sec>*{transition:opacity .9s var(--cn-e),transform .9s var(--cn-e),filter .9s var(--cn-e)} html.io .inv[data-kit=tactile].play .fm-after[data-rise=blur]~.inv-sheet .cn-sec[data-io]:not(.in)>*,html.io .inv[data-kit=tactile].play .fm-after[data-rise=blur]~.inv-side .cn-sec[data-io]:not(.in)>*{filter:blur(7px);transform:translateY(10px) scale(.985)} } /* bahar.css */ /* بەهار (Spring Wreath): its own differences on the tactile kit (functions/src/invite/styles/bahar.ts; tactile.css, film.css). Every rule under .inv[data-style=bahar]. The cover is the wreath in pencil on cotton paper, the names in it in pencil grey; the guest paints the watercolour in with a finger (tactile.js paints the wreath's canvas). The hero is the same scene painted: the names in green-black ink, the و in the tulips' red, the sprig (a laptop's posy and sprig) in colour, three petals settled on the paper. What drives the opening: the finger's own strokes on the wreath's canvas; from the first touch the names deepen to ink and the sprig (a laptop's posy and sprig) colours in, and once the wreath is painted whole the petals settle and the pencil under it fades to a trace (below: why classes, not --tc-p). Static rules are the closed scene (the cover at rest, and the pickers, which run no script); .fm-after the hero, the opened scene, as it stands for reduced motion, html.calm and a page without script. Every motion waits for prefers-reduced-motion: no-preference and html:not(.calm). Bump ASSET_VERSION in functions/src/invite/render.ts when this changes. */ /* ---------- the paper, and a spring light gliding over it ---------- */ .inv[data-style=bahar] .fm-tactile{background:#FBFAF6} .inv[data-style=bahar] .tc-layer[data-l=paper] .tc-pic{background:url(/assets/scenes/bahar/orn/paper.jpg?v=32) 0 0/46% auto,#FCFBF7} @media (min-aspect-ratio:1/1){.inv[data-style=bahar] .tc-layer[data-l=paper] .tc-pic{background-size:13.5% auto}} /* Daylight from a window at the top: warmer and brighter there, a breath of shade toward the foot and the far corner, which drifts slowly, as light through new leaves does. */ .inv[data-style=bahar] .tc-layer[data-l=light]{overflow:hidden} .inv[data-style=bahar] .tc-layer[data-l=light] .tc-pic{top:-12%;left:-12%;right:-12%;bottom:-12%;background:radial-gradient(52% 36% at 30% 16%,rgba(255,252,240,.5),rgba(255,252,240,0) 72%),radial-gradient(44% 30% at 82% 92%,rgba(92,104,80,.07),rgba(92,104,80,0) 70%),radial-gradient(34% 22% at 10% 70%,rgba(92,104,80,.045),rgba(92,104,80,0) 70%),linear-gradient(170deg,rgba(255,250,236,.25),rgba(255,250,236,0) 40%,rgba(80,72,52,.035));pointer-events:none} /* ---------- the words: pencil grey on the cover, green-black ink on the hero ---------- */ /* The cover's own names and date step aside: the hero's are there from the start (names "under"), in the ring. */ .inv[data-style=bahar] .fm-cover .fm-names,.inv[data-style=bahar] .fm-cover .fm-date{visibility:hidden} .inv[data-style=bahar] .fm-kick{color:#56635A;font-weight:600;text-shadow:0 0 10px rgba(252,251,247,.9)} .inv[data-style=bahar] .fm-at::before{background:radial-gradient(closest-side,rgba(252,251,247,.55),rgba(252,251,247,0))} /* In the ring's clear centre (42% of a phone's frame across, 23% of a laptop's), sized by the frame, not the window: the frame covers the screen (film.css), so it is the larger of the two. */ .inv[data-style=bahar] .fm-anames{--bh-k:1;line-height:1.08;color:#23332A;text-shadow:0 0 14px rgba(252,251,247,.95),0 0 3px rgba(252,251,247,.9)} /* The longer name's letters (parts.ts stackLen: s up to 6, m 7-9, l 10-13, xl 14 and more) across the clear centre: a letter of the lettering is about half its size wide, so each bucket's longest still fits; an xl name breaks at its own hyphen or space. */ .inv[data-style=bahar] .fm-anames[data-len=m]{--bh-k:.86} .inv[data-style=bahar] .fm-anames[data-len=l]{--bh-k:.64} .inv[data-style=bahar] .fm-anames[data-len=xl]{--bh-k:.5} /* (On [data-len], so it wins over film.css's own sizes for the longer buckets.) */ .inv[data-style=bahar] .fm-anames[data-len]{font-size:calc(max(100vw,55.814vh) * .106 * var(--bh-k) * var(--bh-en,1) * var(--bh-n,1))} .inv[data-style=bahar] .fm-anames em{color:#A9473B;font-size:.6em;margin-block:.06em .34em;text-shadow:0 0 10px rgba(252,251,247,.95)} .inv[data-style=bahar] .fm-adate{max-width:min(10em,100%);margin:.45em auto 0;font-size:max(.78rem,calc(max(100vw,55.814vh) * .033));line-height:1.6;white-space:normal;text-wrap:balance;color:#3F5444;text-shadow:0 0 8px rgba(252,251,247,.95)} @media (min-aspect-ratio:1/1){ .inv[data-style=bahar] .fm-anames[data-len]{font-size:min(calc(max(100vh,55.814vw) * .088 * var(--bh-k) * var(--bh-en,1)),calc(4.9rem * var(--bh-k)))} .inv[data-style=bahar] .fm-adate{font-size:min(calc(max(100vh,55.814vw) * .024),1.3rem)} } /* The cover's copy of them by its own box (film.css makes .fm-ui a container): the same on a full screen, and right in a picker, whose cover is a phone's drawn small inside another page (vw would be that page's). */ @supports (top:1cqh){ .inv[data-style=bahar] .fm-big .fm-anames[data-len]{font-size:calc(max(100cqw,55.814cqh) * .106 * var(--bh-k) * var(--bh-en,1) * var(--bh-n,1))} .inv[data-style=bahar]:not([lang=en]) .fm-big .fm-adate{font-size:max(.78rem,calc(max(100cqw,55.814cqh) * .033))} @media (min-aspect-ratio:1/1){ .inv[data-style=bahar] .fm-big .fm-anames[data-len]{font-size:min(calc(max(100cqh,55.814cqw) * .088 * var(--bh-k) * var(--bh-en,1)),calc(4.9rem * var(--bh-k)))} .inv[data-style=bahar]:not([lang=en]) .fm-big .fm-adate{font-size:min(calc(max(100cqh,55.814cqw) * .024),1.3rem)} } } .inv[data-style=bahar] .fm-awords,.inv[data-style=bahar] .fm-big{gap:0} .inv[data-style=bahar] .fm-awords::before,.inv[data-style=bahar] .fm-big::before{inset:-6% -10%;background:radial-gradient(closest-side,rgba(252,251,247,.7),rgba(252,251,247,0))} /* Pencil: the names, the و and the date in graphite, unpainted. */ .inv[data-style=bahar] .fm-cover .fm-anames,.inv[data-style=bahar] .fm-cover .fm-anames em,.inv[data-style=bahar] .fm-cover .fm-adate{color:#6A7073} /* English: Dancing Script's capitals reach high; the names a touch smaller than Kurdish ones in the same ring. */ .inv[data-style=bahar][lang=en] .fm-anames{--bh-en:.92;line-height:1.12} /* Its date, tracked capitals, broken after the weekday's comma: one line would run into the flowers. */ .inv[data-style=bahar][lang=en] .fm-adate{max-width:12.5em} /* A phone whose window is near the frame's own shape (360x740, 320x568, an SE's 375x667): the date keeps its 12.5 px floor while the ring is drawn smaller, so its second line lay on the ring's lower blossoms (the Arabic two lines worst). There the names are 8% smaller and the date's lines closer, and the block stays in the clear centre. */ @media (min-aspect-ratio:47/100) and (max-aspect-ratio:62/100){ .inv[data-style=bahar] .fm-anames{--bh-n:.92} .inv[data-style=bahar] .fm-anames em{margin-block:.04em .24em} .inv[data-style=bahar] .fm-adate{margin-top:.25em;line-height:1.32} } /* ---------- the scene's pictures ---------- */ /* The pencil under the paint: whole on the cover, a faint trace once painted over, as on a real sheet. */ .inv[data-style=bahar] .fm-after .tc-layer[data-l=wreath-sketch] .tc-pic{opacity:.2} /* The sprig and the posy colour in from the side a line starts: the painted picture under a soft-edged mask three times its width, slid across (at rest it is past the picture, so none shows; opened, all of it). */ .inv[data-style=bahar] .tc-layer[data-l=sprig] .tc-pic,.inv[data-style=bahar] .tc-layer[data-l=posy] .tc-pic{-webkit-mask-image:linear-gradient(to right,#000 42%,transparent 58%);mask-image:linear-gradient(to right,#000 42%,transparent 58%);-webkit-mask-size:300% 100%;mask-size:300% 100%;-webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;-webkit-mask-position:82.5% 0;mask-position:82.5% 0} .inv[data-style=bahar][dir=rtl] .tc-layer[data-l=sprig] .tc-pic,.inv[data-style=bahar][dir=rtl] .tc-layer[data-l=posy] .tc-pic{-webkit-mask-image:linear-gradient(to left,#000 42%,transparent 58%);mask-image:linear-gradient(to left,#000 42%,transparent 58%);-webkit-mask-position:17.5% 0;mask-position:17.5% 0} .inv[data-style=bahar] .fm-after .tc-layer[data-l=sprig] .tc-pic,.inv[data-style=bahar] .fm-after .tc-layer[data-l=posy] .tc-pic{-webkit-mask-image:none;mask-image:none} /* Once the wreath is painted whole its picture comes in over the canvas the finger painted: the canvas goes as it comes, or the two watercolours would lie one on the other, heavier than the hero's. */ .inv[data-style=bahar] .fm-cover .tc-painted .tc-canvas{opacity:0} /* In a picker, the landing's gallery and the maker's preview (data-preview, never a guest's page) the wreath at rest is half painted, round from its top to its foot on the right: what the guest will do, and the colour that sells it. */ .inv[data-style=bahar][data-preview="1"] .fm-cover .tc-layer[data-l=wreath] .tc-pic>img{opacity:1;-webkit-mask-image:conic-gradient(from 8deg,#000 0deg 168deg,transparent 206deg);mask-image:conic-gradient(from 8deg,#000 0deg 168deg,transparent 206deg)} .inv[data-style=bahar][data-preview="1"] .fm-cover .tc-layer.tc-painted[data-l=wreath] .tc-pic>img{-webkit-mask-image:none;mask-image:none} /* The petals that settle on the paper: each at its own angle, with the paper's soft shadow; not there until painted. */ .inv[data-style=bahar] .tc-layer[data-l^=rest] .tc-pic{-webkit-filter:drop-shadow(0 1px 1px rgba(90,70,60,.18)) drop-shadow(0 3px 4px rgba(90,70,60,.1));filter:drop-shadow(0 1px 1px rgba(90,70,60,.18)) drop-shadow(0 3px 4px rgba(90,70,60,.1))} .inv[data-style=bahar] .tc-layer[data-l=rest-1] .tc-pic{rotate:-28deg} .inv[data-style=bahar] .tc-layer[data-l=rest-2] .tc-pic{rotate:34deg} .inv[data-style=bahar] .tc-layer[data-l=rest-3] .tc-pic{rotate:-62deg} .inv[data-style=bahar] .fm-cover .tc-layer[data-l^=rest] .tc-pic{opacity:0} /* The drifting petals: a watercolour petal is pale; a touch of shadow keeps one in front of the words a petal. */ .inv[data-style=bahar] .tc-amb[data-amb=petals] img{-webkit-filter:drop-shadow(0 2px 2px rgba(90,70,60,.14));filter:drop-shadow(0 2px 2px rgba(90,70,60,.14))} /* A laptop's frame is three times a phone's across: its petals a little smaller against it, the size of a petal. */ @media (min-aspect-ratio:1/1){.inv[data-style=bahar] .tc-amb[data-amb=petals] img{width:calc(var(--z) * .62)}} /* A squarish screen crops the frame (film.css keeps the words on the screen): on an iPad held upright the sprig comes up out of the instruction's way; on one held sideways the posy and the sprig come in from the cropped sides. A phone held sideways keeps its names a little smaller, inside the ring between the bar and the foot. */ @media (min-aspect-ratio:5/8) and (max-aspect-ratio:1/1){.inv[data-style=bahar] .tc-layer[data-l^=sprig]{top:66%}} @media (min-aspect-ratio:1/1) and (max-aspect-ratio:159/100){ .inv[data-style=bahar] .tc-layer[data-l^=posy]{left:22.5%;width:11%;height:23.37%} .inv[data-style=bahar] .tc-layer[data-l^=sprig]{left:77%;width:19%;height:14.94%} } @media (min-aspect-ratio:1/1) and (max-height:500px){.inv[data-style=bahar] .fm-anames{--bh-k:.8}.inv[data-style=bahar] .fm-anames[data-len=m]{--bh-k:.7}.inv[data-style=bahar] .fm-anames[data-len=l]{--bh-k:.54}.inv[data-style=bahar] .fm-anames[data-len=xl]{--bh-k:.42}} /* As the page comes up over the hero, the painting fades back into the paper, not into the films' dusk. */ .inv[data-style=bahar] .fm-after .fm-dim{background:#E7E4DA} /* ---------- the instruction and the brush ---------- */ .inv[data-style=bahar] .fm-tactile .fm-open{color:#3F5444;text-shadow:0 0 10px rgba(252,251,247,.95)} /* Its mark: a small wet dab of sage that circles, as a brush loading its paint. */ .inv[data-style=bahar] .fm-tactile[data-tc-g=paint] .fm-ring::before{width:12px;height:12px;margin:-6px;background:radial-gradient(circle at 40% 38%,#A9BCA2,#6F8A69 60%,#55704F);opacity:1;box-shadow:0 0 0 2px rgba(125,148,120,.18)} /* Where the finger paints: the brush's soft wet edge, sage, never a white ring on white paper. */ .inv[data-style=bahar] .fm-tactile[data-tc-g=paint] .tc-touch{width:64px;height:64px;margin:-32px 0 0 -32px;border:1.5px solid rgba(79,111,75,.42);background:radial-gradient(closest-side,rgba(157,176,152,.22),rgba(157,176,152,.08) 70%,rgba(157,176,152,0));box-shadow:0 0 0 4px rgba(157,176,152,.12)} /* ---------- the opening: in order, from the first touch ---------- */ /* The paint reports its share painted as --tc-p, but its brush sends it back to 0.09 as it sets off round the path by itself, so the rest of the opening keys on what only goes forward: the first touch (.tc-started: a stroke, or the tap that sends the brush round), the wreath painted whole (.tc-painted on its layer; the petals' layers come after it), and the end (.tc-done). Every opening finishes once begun: the wait after a stroke sends the brush round. */ @media (prefers-reduced-motion:no-preference){ html:not(.calm) .inv[data-style=bahar] .fm-cover .fm-anames,html:not(.calm) .inv[data-style=bahar] .fm-cover .fm-anames em,html:not(.calm) .inv[data-style=bahar] .fm-cover .fm-adate{transition:color 1.9s cubic-bezier(.4,0,.2,1) .35s} html:not(.calm) .inv[data-style=bahar] .fm-cover.tc-started .fm-anames{color:#23332A} html:not(.calm) .inv[data-style=bahar] .fm-cover.tc-started .fm-anames em{color:#A9473B;transition-delay:1s} html:not(.calm) .inv[data-style=bahar] .fm-cover.tc-started .fm-adate{color:#3F5444;transition-delay:1.25s} html:not(.calm) .inv[data-style=bahar] .fm-cover .tc-layer[data-l=sprig] .tc-pic,html:not(.calm) .inv[data-style=bahar] .fm-cover .tc-layer[data-l=posy] .tc-pic{transition:-webkit-mask-position 1.8s cubic-bezier(.45,0,.35,1) 1.05s,mask-position 1.8s cubic-bezier(.45,0,.35,1) 1.05s} html:not(.calm) .inv[data-style=bahar] .fm-cover .tc-layer[data-l=posy] .tc-pic{transition-delay:.45s,.45s} html:not(.calm) .inv[data-style=bahar] .fm-cover.tc-started .tc-layer[data-l=sprig] .tc-pic,html:not(.calm) .inv[data-style=bahar] .fm-cover.tc-started .tc-layer[data-l=posy] .tc-pic{-webkit-mask-position:17.5% 0;mask-position:17.5% 0} html:not(.calm) .inv[data-style=bahar][dir=rtl] .fm-cover.tc-started .tc-layer[data-l=sprig] .tc-pic,html:not(.calm) .inv[data-style=bahar][dir=rtl] .fm-cover.tc-started .tc-layer[data-l=posy] .tc-pic{-webkit-mask-position:82.5% 0;mask-position:82.5% 0} html:not(.calm) .inv[data-style=bahar] .fm-cover .tc-canvas{transition:opacity .9s ease-out} /* The pencil under the wreath fades to its trace as the cover lingers, painted. */ html:not(.calm) .inv[data-style=bahar] .fm-cover .tc-layer[data-l=wreath-sketch] .tc-pic{transition:opacity 1.1s ease} html:not(.calm) .inv[data-style=bahar] .fm-cover.tc-done .tc-layer[data-l=wreath-sketch] .tc-pic{opacity:.2} /* The petals settle once the wreath is painted whole: down from a little above, turning, one after another. */ html:not(.calm) .inv[data-style=bahar] .fm-cover .tc-layer[data-l^=rest] .tc-pic{transform:translateY(-70%) scale(1.3) rotate(-40deg);transition:opacity .45s ease .15s,transform 1.15s cubic-bezier(.2,.75,.25,1) .15s} html:not(.calm) .inv[data-style=bahar] .fm-cover .tc-layer[data-l=rest-2] .tc-pic{transition-delay:.4s} html:not(.calm) .inv[data-style=bahar] .fm-cover .tc-layer[data-l=rest-3] .tc-pic{transition-delay:.65s} html:not(.calm) .inv[data-style=bahar] .fm-cover .tc-painted~.tc-layer[data-l^=rest] .tc-pic,html:not(.calm) .inv[data-style=bahar] .fm-cover.tc-done .tc-layer[data-l^=rest] .tc-pic{opacity:1;transform:none} /* The light drifts, slowly; the posy and the sprig stir in it. */ html:not(.calm) .inv[data-style=bahar] .tc-layer[data-l=light] .tc-pic{animation:bh-light 23s ease-in-out infinite alternate} html:not(.calm) .inv[data-style=bahar] .tc-layer[data-l^=sprig]>.tc-pic>img,html:not(.calm) .inv[data-style=bahar] .tc-layer[data-l^=posy]>.tc-pic>img{transform-origin:50% 90%;animation:bh-stir 7.5s ease-in-out infinite alternate} html:not(.calm) .inv[data-style=bahar] .tc-layer[data-l^=posy]>.tc-pic>img{transform-origin:30% 95%;animation-duration:9s;animation-delay:-3s} } @keyframes bh-light{from{transform:translate(-3%,-2%) scale(1)}to{transform:translate(3%,2.5%) scale(1.04)}} @keyframes bh-stir{from{transform:rotate(-.9deg)}to{transform:rotate(.9deg)}} /* bilur.css */ /* بلوور (Crystal): its own differences on the tactile kit (functions/src/invite/styles/bilur.ts; tactile.css, film.css). Every rule under .inv[data-style=bilur]. The layers, back to front: hall (lit, no chandelier), cover (the unlit still, the cover only), glow (no picture: drawn here), chandelier (lit, cut out), near-l and near-r (strands of crystal close to the lens). The gesture's progress is --tc-p (unset at rest and in the pickers: the hall dark, the chandelier unlit; 1 on the hero). One tap lights it in two seconds. The kit eases the progress in and out (tactile.js finish: easeInOut over the gesture's 2000 ms, so 0.3 s is 1.35%, 0.6 s 10.8%, 1 s 50%), and the keyframes are placed at the progress of the moment each step should come, so the light answers the finger at once: 0.12-0.48 s the candles catch, with a flicker (the lit chandelier over the unlit still); 0.1-0.35 s the faint cool glints go; 0.35-0.95 s the moonlit still gives way to the lit hall under it; 0.4-1.5 s a flash runs over the crystals, glint after glint; 0.4-2 s a warm glow spreads down the hall to the names; the near strands catch the light; 0.45-2 s the names turn from pale gold to bright gold foil, a warm light round them. Each is a paused keyframe animation scrubbed by the progress over a static closed state (the pickers' covers run no animation at all: they show that state), so the same rule draws the hero lit and the cover dark, and nothing moves by itself for reduced motion or html.calm (only the progress, which their tap never sets: it fades straight to the hero). What moves by itself (the twinkles, the light gliding over the crystals, the motes, the strands swaying) is tactile.css's, restyled here for glass and gold. Bump ASSET_VERSION in functions/src/invite/render.ts when this changes. */ .inv[data-style=bilur]{--bl-glint:url(/assets/scenes/bilur/glint.webp?v=32)} /* ---------- the light coming on ---------- */ /* The candles catch: on, a dip, on again, a last tremble, then steady (0.12, 0.15, 0.21, 0.28, 0.36 and 0.48 s); over 10 s, so its first moments are milliseconds of the animation's own time, not fractions of one. */ .inv[data-style=bilur] .tc-layer[data-l=chandelier] .tc-pic>picture{opacity:0;animation:bl-catch 10s linear both paused;animation-delay:calc(var(--tc-p,0) * -10s)} @keyframes bl-catch{0%,.09%{opacity:0}.17%{opacity:.9}.46%{opacity:.35}1.1%{opacity:1}2.33%{opacity:.62}5.53%,100%{opacity:1}} /* The moonlit still gives way to the lit hall under it, once the chandelier is on over it (0.35 to 0.95 s). */ .inv[data-style=bilur] .tc-layer[data-l=cover] .tc-pic{animation:bl-dusk 1s linear both paused;animation-delay:calc(var(--tc-p,0) * -1s)} @keyframes bl-dusk{0%,2.14%{opacity:1}10.8%{opacity:.62}42.87%,100%{opacity:0}} /* The warm glow: a bloom in the air under the chandelier, spreading down the hall to the names. */ .inv[data-style=bilur] .tc-layer[data-l=glow] .tc-pic{background:radial-gradient(54% 34% at 50% 34%,rgba(255,200,128,.36),rgba(255,184,104,.14) 52%,rgba(255,176,96,0) 100%),radial-gradient(70% 22% at 50% 70%,rgba(255,196,124,.12),rgba(255,190,120,0) 100%);mix-blend-mode:screen;transform-origin:50% 30%;opacity:0;transform:scaleY(.5);animation:bl-glow 1s linear both paused;animation-delay:calc(var(--tc-p,0) * -1s)} @media (min-aspect-ratio:1/1){.inv[data-style=bilur] .tc-layer[data-l=glow] .tc-pic{background:radial-gradient(28% 40% at 50% 32%,rgba(255,200,128,.34),rgba(255,184,104,.13) 52%,rgba(255,176,96,0) 100%),radial-gradient(36% 16% at 50% 71%,rgba(255,196,124,.12),rgba(255,190,120,0) 100%)}} @keyframes bl-glow{0%,3.2%{opacity:0;transform:scaleY(.5)}100%{opacity:1;transform:none}} /* The strands near the lens: dark in the moonlight, catching the light as it comes. */ .inv[data-style=bilur] .tc-layer[data-l^=near] .tc-pic>img{opacity:.62;filter:brightness(.5) saturate(.4);animation:bl-near 1s linear both paused;animation-delay:calc(var(--tc-p,0) * -1s)} @keyframes bl-near{0%,3.2%{opacity:.62;filter:brightness(.5) saturate(.4)}100%{opacity:.9;filter:brightness(1) saturate(1)}} /* ---------- the glints: four-point stars of light (glint.webp) ---------- */ .inv[data-style=bilur] .tc-amb[data-amb=sparkle] i{width:44px;height:44px;margin:-22px 0 0 -22px;background:var(--bl-glint) 50% 50%/contain no-repeat} @media (min-aspect-ratio:1/1){.inv[data-style=bilur] .tc-amb[data-amb=sparkle] i{width:38px;height:38px;margin:-19px 0 0 -19px}} /* At rest: a few, faint and cool, in the moonlight; gone as the light comes. */ .inv[data-style=bilur] .fm-cover .tc-amb[data-amb=sparkle]{filter:saturate(0) brightness(.9);opacity:.6;animation:bl-cool 1s linear both paused;animation-delay:calc(var(--tc-p,0) * -1s)} @keyframes bl-cool{0%,.05%{opacity:.6}2.14%,100%{opacity:0}} /* The flash: every crystal in turn (each glint's own moment, from its seeded --dl), bright, turning, gone. */ .inv[data-style=bilur] .fm-cover .tc-amb[data-amb=sparkle]~.tc-amb[data-amb=sparkle]{filter:none;animation:none;opacity:1} .inv[data-style=bilur] .fm-cover .tc-amb[data-amb=sparkle]~.tc-amb[data-amb=sparkle] i{width:64px;height:64px;margin:-32px 0 0 -32px;animation:bl-flash 1s linear both paused;animation-delay:calc(var(--tc-p,0) * -.62s + var(--dl,0s) / 20)} @keyframes bl-flash{0%,32%{opacity:0;transform:scale(.2) rotate(0deg)}44%{opacity:1;transform:scale(calc(var(--z,1) * 1.3)) rotate(28deg)}60%,100%{opacity:0;transform:scale(.5) rotate(50deg)}} /* A tap's answer (the kit's burst): its glints fly out as stars, large and ringed in white enough to read on the lit crystals, over the kit's warm bloom and its ring going out. At 42 px with a soft shadow they changed a tapped crystal less than its own twinkles did (2026-10-04). */ .inv[data-style=bilur] .tc-glint{width:62px;height:62px;margin:-31px 0 0 -31px;background:var(--bl-glint) 50% 50%/contain no-repeat;filter:drop-shadow(0 0 3px #fff) drop-shadow(0 0 8px rgba(255,232,180,.95))} .inv[data-style=bilur] .tc-bloom{width:92px;height:92px;margin:-46px 0 0 -46px} /* The light gliding over the crystals: a narrow warm band. */ .inv[data-style=bilur] .tc-sweep::before{width:42%;background:linear-gradient(100deg,rgba(255,236,196,0) 25%,rgba(255,240,206,.5) 50%,rgba(255,236,196,0) 75%)} /* The motes in the glow: small, warm, few. */ .inv[data-style=bilur] .tc-amb[data-amb=motes] i{width:6px;height:6px;margin:-3px 0 0 -3px} /* ---------- the words ---------- */ /* Gold foil: a gradient in the letters, a fine dark edge to stand on the hall. The cover's names, on one line, pale in the moonlight and gilded with the light (their scrim gives way to the edge, as a scrim would cover a gradient in the letters); the hero's, larger, come in over them once it is lit (names "after"), a warm light round them. */ /* Room for the foil: a letter is painted only inside its own box (background-clip:text), and a Kurdish or Arabic name's descender (the ی of ڤیان) and the top of its ێ reached past it and were cut off. Each box grows by .3em above and below (the hero's pieces by .15em at their sides too), never its place: the pieces give it back in margin, and the cover's line stays centred on its spot (film.js, measuring it, may stand the kicker and the date a little further off). Each stop of the gradient moves with the room, so the letters are gilded as before. */ .inv[data-style=bilur] .fm-names{padding-block:.3em} .inv[data-style=bilur] .fm-anames span{padding:.3em .15em;margin:-.3em -.15em} .inv[data-style=bilur] .fm-names,.inv[data-style=bilur] .fm-anames span{background:linear-gradient(176deg,#FFF7E2 calc(6% + .264em),#F4D892 calc(38% + .072em),#C99A45 calc(56% - .036em),#F7E3AC calc(76% - .156em),#DDB062 calc(100% - .3em));-webkit-background-clip:text;background-clip:text;color:transparent;-webkit-text-fill-color:transparent;text-shadow:none} .inv[data-style=bilur] .fm-names::before{content:none} .inv[data-style=bilur] .fm-names em,.inv[data-style=bilur] .fm-anames em{color:#E9C67E;-webkit-text-fill-color:#E9C67E;text-shadow:none} .inv[data-style=bilur] .fm-names,.inv[data-style=bilur] .fm-anames{filter:brightness(.72) saturate(.38) drop-shadow(0 2px 3px rgba(5,8,24,.8));animation:bl-gild 1s linear both paused;animation-delay:calc(var(--tc-p,0) * -1s)} @keyframes bl-gild{0%,4.56%{filter:brightness(.72) saturate(.38) drop-shadow(0 2px 3px rgba(5,8,24,.8)) drop-shadow(0 0 0 rgba(255,190,100,0))}100%{filter:brightness(1) saturate(1) drop-shadow(0 2px 3px rgba(5,8,24,.6)) drop-shadow(0 0 14px rgba(255,186,96,.42))}} .inv[data-style=bilur] .fm-adate,.inv[data-style=bilur] .fm-date{color:#F4E6C6;letter-spacing:.02em} .inv[data-style=bilur] .fm-kick{color:#EADFC8;letter-spacing:.02em} .inv[data-style=bilur][lang=en] .fm-kick{letter-spacing:.16em} /* The hero's names: as large as the hall's foot under the chandelier holds them; smaller on a short phone (a wider screen for its height), where the stacked names would reach the chandelier. */ .inv[data-style=bilur] .fm-anames{font-size:clamp(2.2rem,13.2vw,4rem);line-height:1.1} @media (min-aspect-ratio:1/2) and (max-aspect-ratio:1/1){.inv[data-style=bilur] .fm-anames{font-size:clamp(2.1rem,11.4vw,3.6rem)}} .inv[data-style=bilur] .fm-anames em{font-size:.58em;margin-block:.04em .36em} /* A laptop: the names on one line, each piece a box of its own (so a Kurdish name's last letter never joins the و), and an English pair the cover breaks only when it must. */ @media (min-aspect-ratio:1/1){ .inv[data-style=bilur] .fm-anames span,.inv[data-style=bilur] .fm-anames em{display:inline-block;vertical-align:baseline} .inv[data-style=bilur] .fm-anames em{margin:0 .26em;font-size:.6em} .inv[data-style=bilur][lang=en] .fm-names[data-stack] span:first-child{display:inline} .inv[data-style=bilur][lang=en] .fm-anames em{margin:0 .08em} .inv[data-style=bilur] .fm-anames{font-size:clamp(2.4rem,4.6vw,4.2rem)} } /* Once lit, the cover's one line goes first (.opening, a third of a second) and the hero's stacked names come in after it, so the two never stand over each other half seen. */ .inv[data-style=bilur] .fm-cover.fm-named .fm-big,.inv[data-style=bilur] .fm-cover.fm-named .fm-big>*{transition-delay:.2s} .inv[data-style=bilur] .fm-cover.fm-named .fm-big>:nth-child(2){transition-delay:.32s} /* A short demo page, or a laptop's: the cue to read on would sit on the date over the bar that sells the design. Up to 790 px tall: at 360x740 it stood on the Kurdish and Arabic date, at 375x667 on every language's, and 6 px under it at 360x780; from 800 px tall it is 12 px and more clear (2026-10-04). */ @media (max-height:790px),(min-aspect-ratio:1/1){.inv[data-style=bilur][data-demo="1"] .fm-after .fm-cue{display:none}} /* In the pickers and the landing's gallery (data-preview: no script runs there; a guest's page is never a preview) an English pair that stacks parts the kicker and the date by half a line each (film.css), and the date, close above the instruction here, stood on it. The kicker and the names rise instead, so the date keeps its place (in the maker's own preview film.js still keeps every line clear). */ .inv[data-style=bilur][lang=en][data-preview="1"] .fm-cover .fm-words[data-stack] .fm-kick{margin-top:calc(-2 * var(--fm-half))} .inv[data-style=bilur][lang=en][data-preview="1"] .fm-cover .fm-words[data-stack] .fm-names{margin-top:calc(-1 * var(--fm-half))} .inv[data-style=bilur][lang=en][data-preview="1"] .fm-cover .fm-words[data-stack] .fm-date{margin-top:0} /* ---------- a phone held sideways ---------- A landscape window under 500 px tall: held 40% of the way down, the frame left the date under the window's foot and laid the instruction, pinned to that foot, over the names. The frame is held lower (62%: the chain's top goes, the chandelier and the words come up, the cover and the hero alike so they still meet in place), and the instruction stands beside the names, on the side a line starts from, on the dark of the hall. */ @media (min-aspect-ratio:1/1) and (max-height:500px){ .inv[data-style=bilur] .fm-cover,.inv[data-style=bilur] .fm-after{--fm-ay:62%} .inv[data-style=bilur] .fm-cover{--fm-ayn:.62} } @supports (top:1cqh){@media (min-aspect-ratio:1/1) and (max-height:500px){ .inv[data-style=bilur] .fm-cover .fm-prompt .fm-act{left:auto;right:max(18px,env(safe-area-inset-right));top:calc(.7 * var(--fm-h) - var(--fm-y0));width:max-content;max-width:25cqw;transform:translate(0,-50%)} .inv[data-style=bilur][dir=ltr] .fm-cover .fm-prompt .fm-act{right:auto;left:max(18px,env(safe-area-inset-left))} }} /* ---------- what moves by itself ---------- */ @media (prefers-reduced-motion:no-preference){ /* The instruction's ring breathes as a light would, warm. */ html:not(.calm) .inv[data-style=bilur] .fm-cover:not(.tc-started) .fm-ring{box-shadow:0 0 0 1px rgba(0,0,0,.25),0 0 14px rgba(255,214,150,.5)} } /* chiya.css */ /* Mountains (چیا): five tints of one teal paper cut as ridges under a cream sky, blurred mist at their feet, poplars on the near shelf. story.css gives every scene its height, paper and reveal; this sheet sets the papers, the type and the drawing. Rules on the design's own ch- classes need no scope; the scoped ones out-rank a base or frame rule. Markup: styles/chiya.ts. */ .inv[data-style="chiya"] { --ch-ease: cubic-bezier(.2, .7, .2, 1); } .ch-s[data-paper="cream"] { --st-paper: var(--ch-sky); } .ch-s[data-paper="deep"] { --st-paper: var(--ch-deep); } .ch-s[data-paper="mid"] { --st-paper: var(--ch-mid); } /* On teal papers every word is cream; only the deep paper is dark enough for a muted cream. */ .ch-s[data-paper="deep"], .ch-s[data-paper="mid"] { --i-ink: #F4EFE3; --i-accent-ink: #F4EFE3; --i-muted: #F4EFE3; color: #F4EFE3; } .ch-s[data-paper="deep"] { --i-muted: var(--ch-mcream); } /* ---------- type ---------- */ .ch-kick { position: relative; margin: 0; padding-bottom: 12px; font-size: .85rem; color: var(--i-muted); } .ch-kick::after { content: ""; position: absolute; left: 50%; bottom: 0; width: 48px; height: 1px; margin-left: -24px; background: var(--ch-mid); } .ch-s[data-paper="deep"] .ch-kick::after, .ch-s[data-paper="mid"] .ch-kick::after { background: rgba(244, 239, 227, .6); } .ch-cnames, .ch-names { margin: 0; font-family: var(--i-font); font-weight: 700; line-height: 1.55; color: var(--i-ink); text-wrap: balance; font-size: calc(clamp(2.4rem, 11.5vw, 3.4rem) * var(--k, 1)); } .ch-names { font-size: calc(clamp(3rem, 13vw, 4.2rem) * var(--k, 1)); } .ch-names.ch-stack { font-size: calc(clamp(2.8rem, 12vw, 3.8rem) * var(--k, 1)); } .inv[data-style="chiya"] [data-len="m"] { --k: .9; } .inv[data-style="chiya"] [data-len="l"] { --k: .78; } .inv[data-style="chiya"] [data-len="xl"] { --k: .68; } .ch-cnames em, .ch-names em { font-style: normal; font-family: var(--i-body); font-weight: 600; font-size: .5em; line-height: 1; color: var(--ch-mid); margin-inline: .15em; } .ch-stack { display: grid; } .ch-stack em { padding: .15em 0; } /* ---------- the cover ---------- */ .ch-cover { background: linear-gradient(180deg, var(--ch-sky) 38%, var(--ch-blush) 58%); color: var(--i-ink); } .ch-cover::before { content: ""; position: absolute; inset: 0; background: var(--st-grain) 0 0 / 96px 96px; pointer-events: none; } .ch-ctext { position: absolute; left: 0; right: 0; top: 12%; bottom: 50%; display: flex; flex-direction: column; justify-content: center; align-items: center; gap: 14px; padding: 0 24px; } .ch-cdate { margin: 0; font-size: .95rem; color: var(--i-muted); } .ch-range { position: absolute; left: 0; right: 0; bottom: 0; height: 48%; } svg.ch-l { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; } /* A cream haze over the far ridges: the veil the opening lifts. */ .ch-veil { position: absolute; left: 0; right: 0; top: 0; height: 40%; opacity: .12; background: linear-gradient(var(--ch-sky) 55%, rgba(244, 239, 227, 0)); } .ch-mlink { position: absolute; left: 0; right: 0; top: 30%; bottom: 0; } /* A poplar's placement sits on its ; the sway and the tremble go on the , from its own base. */ .ch-pop { transform-box: fill-box; transform-origin: 50% 100%; } .ch-open { position: absolute; left: 50%; top: 89%; transform: translateX(-50%); z-index: 2; display: inline-flex; align-items: center; min-height: 48px; padding: 11px 26px; border-radius: 999px; background: var(--ch-sky); color: var(--ch-deep); font-weight: 600; font-size: 1rem; line-height: 1.3; text-decoration: none; white-space: nowrap; box-shadow: 0 8px 20px -10px rgba(23, 61, 55, .6); } @media (max-height: 600px) { .ch-open { top: 88%; } } /* Idle: the poplars tremble a degree, on the cover and, while on screen, the last scene. The mist lies still. */ @media (prefers-reduced-motion: no-preference) { .ch-cover .ch-pop, .ch-end.on .ch-pop { animation: ch-tremble 5s ease-in-out infinite alternate; } .ch-cover g:nth-child(odd) .ch-pop, .ch-end.on g:nth-child(odd) .ch-pop { animation-direction: alternate-reverse; } /* The opening: the mist lifts and thins, the veil goes and the far ridges sharpen, the poplars sway once, the words rise, the cover fades. */ .ch-cover.opening .ch-open, .ch-cover.opening .ch-mlink { opacity: 0; transition: opacity .15s; } .ch-cover.opening .ch-hz { animation: ch-lift 1.1s var(--ch-ease) forwards; } .ch-cover.opening .ch-hz:nth-child(4) { animation-delay: 80ms; } .ch-cover.opening .ch-hz:nth-child(6) { animation-delay: 160ms; } .ch-cover.opening .ch-hz:nth-child(8) { animation-delay: 240ms; } .ch-cover.opening .ch-veil { opacity: 0; transition: opacity .9s; } .ch-cover.opening .ch-l { transform: translateY(10px); transition: transform .9s var(--ch-ease); } .ch-cover.opening .ch-pop { animation: ch-sway .7s .1s ease-in-out; } .ch-cover.opening g:nth-child(2) .ch-pop, .ch-cover.opening g:nth-child(4) .ch-pop { animation-delay: .14s; } .ch-cover.opening g:nth-child(1) .ch-pop, .ch-cover.opening g:nth-child(5) .ch-pop { animation-delay: .18s; } .ch-cover.opening .ch-ctext { opacity: 0; transform: translateY(-10px); transition: opacity .5s .5s, transform .5s .5s; } .ch-cover.opening { animation: ch-out .35s 1.1s forwards; } } @keyframes ch-tremble { from { transform: rotate(-1deg); } to { transform: rotate(1deg); } } @keyframes ch-lift { 30% { opacity: .8; } to { transform: translateY(-44px); opacity: 0; } } @keyframes ch-sway { 35% { transform: rotate(-2deg); } 70% { transform: rotate(1.5deg); } } @keyframes ch-out { to { opacity: 0; } } /* ---------- the bar: solid cream pills, readable on every paper ---------- */ .inv[data-style="chiya"] .lang-switch, .inv[data-style="chiya"] .bar-btn { background: var(--ch-sky); border-color: var(--ch-mid); -webkit-backdrop-filter: none; backdrop-filter: none; } .inv[data-style="chiya"] .lang-switch a { color: #3F6D64; } .inv[data-style="chiya"] .lang-switch a[aria-current] { background: var(--ch-deep); color: var(--ch-sky); } .inv[data-style="chiya"] .bar-btn { color: var(--ch-deep); } /* ---------- the scenes ---------- */ .inv[data-style="chiya"] .st-w > p { margin: 0; } /* The strips: the far ridges filled along a cream scene's bottom (1, 5, 7); the near ridge on the place's paper without a hall. */ .ch-bless { max-width: 28ch; font-size: 1.02rem; line-height: 1.9; color: var(--i-muted); text-wrap: balance; } .ch-far { height: 22%; } .ch-far svg, .ch-sky svg, .ch-near svg { height: 100%; } .ch-far-low { height: 18%; } .ch-near { height: 24%; } /* 2 and 6: one skyline in cream on the deep paper. */ .ch-bism { font-family: "Amiri", "Noto Naskh Arabic", serif; font-size: 1.2rem; line-height: 1.8; } .ch-lead { max-width: 30ch; font-size: 1.12rem; line-height: 2; color: rgba(244, 239, 227, .9); text-wrap: balance; } .ch-sky { height: 14%; } .ch-sky use { fill: none; stroke: var(--ch-sky); stroke-opacity: .7; } /* 3: the day as a calendar leaf; the numeral is the largest thing on any scene; the morning as a postcard under it. */ .ch-s3 .st-w { gap: 6px; } .ch-wday, .ch-year { font-size: .95rem; color: var(--i-muted); } .ch-day { font-family: var(--i-font); font-weight: 700; font-size: clamp(5.4rem, 28vw, 7rem); line-height: 1.1; font-variant-numeric: tabular-nums; color: var(--i-ink); } .ch-month { font-family: var(--i-font); font-weight: 700; font-size: 1.6rem; line-height: 1.5; color: var(--i-ink); } .ch-pill { margin-top: 12px; padding: 7px 18px; border-radius: 999px; background: var(--ch-deep); color: var(--ch-sky); font-weight: 600; font-size: .95rem; } /* The cut-paper cards (3 and 5): a field-white face standing off the cream, a hard shadow twin and a soft one. */ .ch-card { padding: 12px; background: var(--ch-field); border: 1px solid rgba(23, 61, 55, .12); box-shadow: 0 6px 0 rgba(31, 74, 67, .25), 0 12px 24px -14px rgba(23, 61, 55, .5); } .ch-card i { position: relative; display: block; overflow: hidden; box-shadow: inset 0 0 0 1px rgba(23, 61, 55, .12); } .ch-pcard { width: min(100%, 520px); margin-top: 22px; } .ch-pcard i { padding-top: 50%; background: linear-gradient(var(--ch-sky) 42%, var(--ch-blush)); } .ch-pcard svg { position: absolute; left: 0; top: 0; width: 100%; height: 100%; } /* 4: the hall in the valley window, the near ridge climbing its foot. */ .ch-valley { position: relative; width: 100%; max-width: 560px; padding-top: 75%; border-radius: 20px; overflow: hidden; background: linear-gradient(var(--ch-sky) 30%, var(--ch-blush)); } .ch-valley svg, .ch-hall { position: absolute; left: 0; right: 0; bottom: 0; width: 100%; height: 100%; } .ch-hall { top: 0; object-fit: cover; object-position: 50% 35%; border: 0; border-radius: 0; aspect-ratio: auto; } .ch-valley .ch-vnear { height: 40%; } .ch-vnear use { fill: var(--ch-deep); } .ch-venue { margin: 0; font-family: var(--i-font); font-weight: 700; font-size: 1.9rem; line-height: 1.5; text-wrap: balance; } .ch-addr { max-width: 32ch; font-size: .98rem; line-height: 1.8; } .ch-btn-cream { background: var(--ch-sky); color: var(--ch-deep); box-shadow: 0 8px 20px -12px rgba(23, 61, 55, .7); margin-top: 6px; } /* 5: the couple as a cut-paper postcard, the note beneath. */ .ch-s5 .ch-card { width: min(72%, 320px); transform: rotate(-2deg); margin-bottom: 8px; } .ch-s5 .ch-card i { padding-top: 125%; background: var(--ch-t3) center var(--ch-fy, 40%) / cover no-repeat; } .ch-note { max-width: 30ch; font-size: 1.1rem; line-height: 1.9; white-space: pre-line; color: var(--i-ink); } /* A note without a photo takes the kickers' hairline above it, so the scene keeps its structure: mark, words, horizon. */ .ch-s5 .st-w > .ch-note:first-child::before { content: ""; display: block; width: 48px; height: 1px; margin: 0 auto 22px; background: var(--ch-mid); } /* 6: the reply on a cream card. */ .inv[data-style="chiya"] .ch-rcard { max-width: 440px; padding: 26px 20px; border-radius: 18px; border: 1px solid var(--ch-t2); background: var(--ch-sky); box-shadow: none; color: #173D37; --i-ink: #173D37; --i-muted: #5A6C62; --i-accent-ink: #3F6D64; } .ch-rcard .rsvp-q { font-size: 1.5rem; } .ch-rcard .rsvp input, .ch-rcard .rsvp select { background: var(--ch-field); border: 1px solid var(--ch-t3); border-radius: 12px; } .ch-rcard .btn.soft { border-color: var(--ch-mid); color: #173D37; } .ch-rcard .rsvp-change { color: #3F6D64; } /* 7: the countdown as type alone over the far ridges. */ .ch-cd { max-width: 520px; gap: 0; } .ch-cell { padding: 4px 0; } .ch-cell + .ch-cell { border-inline-start: 1px solid var(--ch-mid); } .ch-cell strong { font-family: var(--i-font); font-size: clamp(1.9rem, 9vw, 2.3rem); line-height: 1.3; color: var(--i-ink); } .ch-cell span { font-size: .8rem; color: var(--i-muted); } .ch-after { max-width: 28ch; font-size: 1.05rem; line-height: 1.9; color: var(--i-ink); } /* 8: thanks, and the whole range in full day. */ .ch-s8 .st-w { margin-bottom: 38%; } .ch-foot { margin: 0; padding: 0; border: 0; gap: 12px; } .ch-foot .foot-mark { color: var(--i-ink); opacity: .8; } .ch-foot .foot-cta { color: var(--ch-deep); font-weight: 600; } .ch-end { height: 42%; } .ch-rng { position: absolute; inset: 0; } @media (prefers-reduced-motion: no-preference) { /* The last scene's range enters ridge by ridge, far to near, the mist with each, once the range itself is seen. */ .ch-end use { transition: opacity .8s var(--st-ease), transform .8s var(--st-ease); } .ch-end use:nth-child(3), .ch-end use:nth-child(4) { transition-delay: .09s; } .ch-end use:nth-child(5), .ch-end use:nth-child(6) { transition-delay: .18s; } .ch-end use:nth-child(7), .ch-end use:nth-child(8), .ch-trees use { transition-delay: .27s; } .ch-end use:nth-child(9) { transition-delay: .36s; } html.io .inv.play .ch-rng:not(.in) use { opacity: 0; transform: translateY(30px); } } /* ---------- a laptop: the same story, the scenes across the whole width ---------- */ @media (min-width: 1024px) { .ch-cover { background: linear-gradient(180deg, var(--ch-sky) 42%, var(--ch-blush) 66%); } .ch-ctext { top: 10%; bottom: 42%; gap: 18px; } .ch-cnames { font-size: calc(clamp(3.4rem, 5.2vw, 5.5rem) * var(--k, 1)); line-height: 1.5; } .ch-kick { font-size: .95rem; } .ch-cdate { font-size: 1.05rem; } .ch-range { height: 40%; } .ch-open { top: 91%; } .ch-names { font-size: calc(4.8rem * var(--k, 1)); } .ch-names.ch-stack { font-size: calc(4.2rem * var(--k, 1)); } .ch-bless { font-size: 1.15rem; } .ch-far { height: 24%; } .ch-far-low { height: 22%; } .ch-near { height: 28%; } .ch-lead { font-size: 1.3rem; max-width: 34ch; } .ch-bism { font-size: 1.4rem; } .ch-sky { height: 30%; } .ch-day { font-size: 8.5rem; } .ch-month { font-size: 2rem; } .ch-wday, .ch-year { font-size: 1.05rem; } .ch-pcard { width: 480px; } .ch-valley { max-width: 720px; padding-top: 62.5%; } .ch-venue { font-size: 2.2rem; } .ch-s5 .ch-card { width: 380px; } .ch-note { font-size: 1.2rem; } .ch-rcard .rsvp-actions { grid-template-columns: 1fr 1fr; } .ch-cell strong { font-size: 2.8rem; } .ch-s8 .st-w { margin-bottom: 28%; } .ch-end { height: 40%; } } /* derga.css */ /* دەرگا (the Door): only what differs from the doors' engine (door.css). Markup and pack: styles/derga.ts. */ /* The kicker sits on the bougainvillea, busy magenta and leaf: a deeper scrim there. */ .inv[data-style=derga] .dr-kick{--dr-scrim:.66} /* The haze between the trees: a soft glow under the names over it. */ .inv[data-style=derga] .dr-awords{--dr-scrim:.5} /* The page's reply and its petals in the bougainvillea's colour. */ .inv[data-style=derga] .cn-rsvp .cn-kick,.inv[data-style=derga] .cn-wishes .cn-kick{color:var(--i-accent-ink)} /* English (2026-10-03, PLAN-EN D7): the names in Cormorant Garamond's 600, the weight the door's Latin set chose. */ .inv[lang="en"][data-style=derga] .dr-names,.inv[lang="en"][data-style=derga] .dr-anames,.inv[lang="en"][data-style=derga] .cn-names{font-weight:600} /* dest.css */ /* دەست لە دەست (Hand in Hand): only what differs from the film engine (film.css). Markup and config: styles/dest.ts. Its page is the jasmine skin (skins/jasmine.css). */ /* The dark around the hands needs no shade at the top for the light words: only a breath of it, and a little more at the foot under the instruction. */ .inv[data-style=dest] .fm-shade{background:linear-gradient(rgba(14,8,4,.22),rgba(14,8,4,0) 30%,rgba(14,8,4,0) 74%,rgba(14,8,4,.32))} /* The names on a phone's cover are the evening's: a step larger in the empty dark above the hands (a short pair, and one of middle length; long ones stack at the engine's own size). */ @media not all and (min-aspect-ratio:1/1){ .inv[data-style=dest] .fm-cover .fm-names[data-len=s]{font-size:clamp(2.5rem,12.8vw,3.7rem)} .inv[data-style=dest] .fm-cover .fm-names[data-len=m]{font-size:clamp(2.3rem,11.4vw,3.3rem)} } .inv[data-style=dest] .fm-cover .fm-kick{letter-spacing:.02em;color:#F3DDAE} /* The light between the fingertips, where the guest touches: a small warm light in a fine gold ring that breathes, a second ring rippling out from it, never the white ring of the dove's bright garden. */ .inv[data-style=dest] .fm-beacon{background:radial-gradient(closest-side,rgba(255,236,190,.55),rgba(255,214,140,.22) 45%,rgba(255,200,120,0))} .inv[data-style=dest] .fm-beacon::before,.inv[data-style=dest] .fm-beacon i{border:1.5px solid rgba(246,214,150,.95);box-shadow:0 0 0 1px rgba(90,60,20,.35),0 0 14px rgba(255,206,130,.55),inset 0 0 12px rgba(255,214,140,.35)} /* The touch: the light swells under the guest's finger and the ring fills with gold round it (half a second, while the film's own light swells), then goes; a quick tap fills it just the same, so no one waits on it. */ .inv[data-style=dest] .fm-beacon::after{content:"";position:absolute;inset:-1px;border-radius:50%;border:2.5px solid #F6D696;background:radial-gradient(closest-side,rgba(255,244,214,.92),rgba(255,218,150,.5) 48%,rgba(255,200,120,0));box-shadow:0 0 16px rgba(255,206,130,.85),inset 0 0 10px rgba(255,214,140,.6);opacity:0} .inv[data-style=dest] .fm-cover.opening .fm-beacon{opacity:0;transition:opacity .35s .5s} .inv[data-style=dest] .fm-cover.opening .fm-beacon::after{opacity:1} @media (prefers-reduced-motion:no-preference){ .inv[data-style=dest] .fm-cover.opening .fm-beacon::after{animation:dt-fill .5s cubic-bezier(.3,0,.2,1) both} .inv[data-style=dest] .fm-cover.opening .fm-beacon{animation:dt-swell .85s cubic-bezier(.3,0,.3,1) both} } @keyframes dt-fill{from{opacity:0;transform:scale(.35)}60%{opacity:1}to{opacity:1;transform:scale(1)}} @keyframes dt-swell{0%{transform:translate(-50%,-50%) scale(1)}60%{transform:translate(-50%,-50%) scale(1.12)}to{transform:translate(-50%,-50%) scale(1.18)}} /* The hero's names in the calm dark above the joined hands, a soft dark glow under them, never a box. */ .inv[data-style=dest] .fm-awords,.inv[data-style=dest] .fm-big{--fm-scrim:.34} .inv[data-style=dest] .fm-anames em{color:#E8C27C} /* The cue to read on, in the dark at the hero's foot. */ .inv[data-style=dest] .fm-light{background:linear-gradient(rgba(10,6,4,0) 76%,rgba(10,6,4,.36))} /* English (2026-10-03): the cover's kicker tracked as every English kicker is (film.css), in the same gold. */ .inv[data-style=dest][lang=en] .fm-cover .fm-kick{letter-spacing:.16em} /* Pinyon Script's own "&" is a small one: a step larger between the names, so it reads as the join it is. */ .inv[data-style=dest][lang=en] .fm-names em{font-size:.92em} .inv[data-style=dest][lang=en] :is(.fm-anames,.cn-names) em{font-size:.8em} /* Its larger phone sizes, fitted across as film.css fits every English cover's names (--fm-ns, the box, the 0.72 floor). */ @media not all and (min-aspect-ratio:1/1){ .inv[data-style=dest][lang=en] .fm-cover .fm-names:is([data-len=s],[data-len=m]){font-size:min(var(--fm-ns),max(var(--fm-ns) * .72,var(--fm-nbox) / var(--nl,6)))} .inv[data-style=dest][lang=en] .fm-cover .fm-names[data-len=s]{--fm-ns:clamp(2.5rem,12.8vw,3.7rem)} .inv[data-style=dest][lang=en] .fm-cover .fm-names[data-len=m]{--fm-ns:clamp(2.3rem,11.4vw,3.3rem)} .inv[data-style=dest][lang=en] .fm-cover .fm-names[data-stack]:is([data-len=s],[data-len=m]){font-size:min(var(--fm-ns),max(var(--fm-ns) * .72,var(--fm-nbox) / var(--nm2,4)))} .inv[data-style=dest][lang=en] .fm-words[data-stack=s]{--fm-ns:clamp(2.5rem,12.8vw,3.7rem)} .inv[data-style=dest][lang=en] .fm-words[data-stack=m]{--fm-ns:clamp(2.3rem,11.4vw,3.3rem)} } /* A phone held sideways: the hero's stacked names sized by the screen's height too (the copy over the film by the cover's own), so Pinyon Script's tall capitals leave the date in the dark above the hands. */ @supports (top:1cqh){@media (min-aspect-ratio:1/1) and (max-height:520px){ .inv[data-style=dest][lang=en] .fm-after .fm-anames{font-size:min(clamp(3rem,5.6vw,6rem),9.5svh)} .inv[data-style=dest][lang=en] .fm-after .fm-anames:is([data-len=l],[data-len=xl]){font-size:min(clamp(2.4rem,4.2vw,4.4rem),8.5svh)} .inv[data-style=dest][lang=en] .fm-big .fm-anames{font-size:min(clamp(3rem,5.6vw,6rem),9.5cqh)} .inv[data-style=dest][lang=en] .fm-big .fm-anames:is([data-len=l],[data-len=xl]){font-size:min(clamp(2.4rem,4.2vw,4.4rem),8.5cqh)} }} } /* efsane.css */ /* هەبوو نەبوو (Once Upon a Time): only what differs from the film engine (film.css). Markup and config: styles/efsane.ts. */ /* A night sky: the scrim under the words is the sky's own blue, light, as the sky is already dark. */ .inv[data-style=efsane] .fm-shade{background:linear-gradient(rgba(8,12,36,.34),rgba(8,12,36,0) 28%,rgba(8,12,36,0) 74%,rgba(8,12,36,.32) 88%,rgba(8,12,36,.6))} .inv[data-style=efsane] .fm-at{--fm-scrim:.34} .inv[data-style=efsane] .fm-awords,.inv[data-style=efsane] .fm-big{--fm-scrim:.3} /* The fairy tale's first words, «هەبوو نەبوو…», in the couple's lettering and the turrets' gold, before the names. */ .inv[data-style=efsane] .fm-kick{font-family:var(--i-font);font-weight:700;font-size:clamp(1.4rem,6.2vw,1.8rem);line-height:1.5;letter-spacing:0;color:var(--fm-and)} @media (min-aspect-ratio:1/1){.inv[data-style=efsane] .fm-kick{font-size:clamp(1.3rem,2.1vw,2rem)}} /* The ring round the bow: warm gold, as candlelight on the ribbon, not the engine's white. */ .inv[data-style=efsane] .fm-beacon{background:radial-gradient(closest-side,rgba(255,228,160,.26),rgba(255,214,130,0))} .inv[data-style=efsane] .fm-beacon::before,.inv[data-style=efsane] .fm-beacon i{border:1.5px solid rgba(255,232,170,.95);box-shadow:0 0 0 1px rgba(110,78,26,.5),0 0 20px rgba(255,196,100,.55),inset 0 0 16px rgba(255,206,120,.3)} /* The tap: the ring goes, and a small burst of gold sparkle flies out from the knot. */ .inv[data-style=efsane] .fm-cover.opening .fm-beacon{opacity:1;background:none} .inv[data-style=efsane] .fm-cover.opening .fm-beacon::before{opacity:0;transition:opacity .25s} .inv[data-style=efsane] .fm-cover.opening .fm-beacon i{border:0;box-shadow:none;opacity:0;background:radial-gradient(circle at 50% 50%,rgba(255,246,220,.85),rgba(255,214,130,.38) 14%,rgba(255,214,130,0) 32%),radial-gradient(circle at 50% 6%,#FFFBEA 0 1.5%,#F4C96E 2.8%,rgba(244,201,110,0) 5.4%),radial-gradient(circle at 82% 18%,#FFFBEA 0 1.2%,#F4C96E 2.3%,rgba(244,201,110,0) 4.3%),radial-gradient(circle at 95% 52%,#FFFBEA 0 1.5%,#F4C96E 2.8%,rgba(244,201,110,0) 5.4%),radial-gradient(circle at 80% 84%,#FFFBEA 0 1.1%,#F4C96E 2.1%,rgba(244,201,110,0) 4.0%),radial-gradient(circle at 48% 96%,#FFFBEA 0 1.3%,#F4C96E 2.5%,rgba(244,201,110,0) 4.7%),radial-gradient(circle at 16% 82%,#FFFBEA 0 1.2%,#F4C96E 2.3%,rgba(244,201,110,0) 4.3%),radial-gradient(circle at 5% 48%,#FFFBEA 0 1.5%,#F4C96E 2.8%,rgba(244,201,110,0) 5.4%),radial-gradient(circle at 20% 15%,#FFFBEA 0 1.1%,#F4C96E 2.1%,rgba(244,201,110,0) 4.0%),radial-gradient(circle at 66% 30%,#FFFBEA 0 0.9%,#F4C96E 1.7%,rgba(244,201,110,0) 3.2%),radial-gradient(circle at 32% 66%,#FFFBEA 0 0.9%,#F4C96E 1.7%,rgba(244,201,110,0) 3.2%),radial-gradient(circle at 70% 68%,#FFFBEA 0 1%,#F4C96E 1.9%,rgba(244,201,110,0) 3.6%),radial-gradient(circle at 30% 34%,#FFFBEA 0 0.8%,#F4C96E 1.5%,rgba(244,201,110,0) 2.9%)} @media (prefers-reduced-motion:no-preference){.inv[data-style=efsane] .fm-cover.opening .fm-beacon i{animation:ef-burst 1s cubic-bezier(.15,.7,.3,1) both}} html.calm .inv[data-style=efsane] .fm-beacon i{animation:none!important} @keyframes ef-burst{0%{opacity:0;transform:scale(.5) rotate(0)}14%{opacity:1}60%{opacity:.95}to{opacity:0;transform:scale(1.75) rotate(20deg)}} /* The instruction on the dark path: its words, and under them a thin gold line that fills as the film arrives (film.js --fm-load; full where there is nothing to wait for), in place of the engine's ring: the ring round the bow already says where. */ .inv[data-style=efsane] .fm-open{gap:9px} .inv[data-style=efsane] .fm-open .fm-ring{display:none} .inv[data-style=efsane] .fm-open::after{content:"";display:block;width:84px;height:2px;border-radius:2px;background:linear-gradient(90deg,#F1CD7C,#FFF0C8 50%,#F1CD7C) 0 0/100% 100% no-repeat,rgba(255,236,190,.22);background-size:calc(var(--fm-load,1) * 100%) 100%,100% 100%;background-position:100% 0,0 0;box-shadow:0 0 8px rgba(255,200,110,.45);transition:background-size .3s linear} @media (prefers-reduced-motion:no-preference){.inv[data-style=efsane] .fm-cover.fm-wait .fm-open::after{animation:ef-wait .9s ease-in-out infinite alternate}} @keyframes ef-wait{from{opacity:.45}to{opacity:1}} /* A phone held sideways sits the instruction beside the ring: the ring is its mark, so no line there either. */ @supports (top:1cqh){@media (min-aspect-ratio:1/1) and (max-height:500px){.inv[data-style=efsane] .fm-cover[data-beacon] .fm-open::after{display:none}}} /* The names over the hero's sky. On a phone the sky above the turrets is a band, not a page: names that fit go on one line (n1 و n2), the date under them, so neither reaches the golden roofs; long or compound names stack, smaller. The cover's copy of them over the film is the same, so they hand over in place. */ @media not all and (min-aspect-ratio:1/1){ .inv[data-style=efsane] .fm-anames:not([data-len=l]):not([data-len=xl]){display:flex;justify-content:center;align-items:baseline;gap:0 .2em;white-space:nowrap;font-size:clamp(2.3rem,12.6vw,3.5rem)} .inv[data-style=efsane] .fm-anames:not([data-len=l]):not([data-len=xl]) span,.inv[data-style=efsane] .fm-anames:not([data-len=l]):not([data-len=xl]) em{display:inline} .inv[data-style=efsane] .fm-anames[data-len=m]{font-size:clamp(2rem,10.4vw,2.9rem)} .inv[data-style=efsane] .fm-anames[data-len=l]{font-size:clamp(1.9rem,9.6vw,2.6rem);line-height:1.08} .inv[data-style=efsane] .fm-anames[data-len=xl]{font-size:clamp(1.7rem,8.6vw,2.3rem);line-height:1.08} .inv[data-style=efsane] .fm-anames em{font-size:.6em} /* Long names stand in two lines, as on the cover: the first name, then the و before the second, so a short phone keeps a line's height of sky for the date and the occasion's line rather than shrink them (film.js keep()). The first name is a block of its own, so its last letter never takes the و's join. */ .inv[data-style=efsane] .fm-anames:is([data-len=l],[data-len=xl]) span:first-child{display:block} .inv[data-style=efsane] .fm-anames:is([data-len=l],[data-len=xl]) span:last-child{display:inline} .inv[data-style=efsane] .fm-anames:is([data-len=l],[data-len=xl]) em{display:inline;margin:0;margin-inline:0 .22em} } @media (min-aspect-ratio:1/1){ .inv[data-style=efsane] .fm-anames{font-size:clamp(2.8rem,4.8vw,5.2rem);line-height:1.08} .inv[data-style=efsane] .fm-anames[data-len=l],.inv[data-style=efsane] .fm-anames[data-len=xl]{font-size:clamp(2.3rem,3.6vw,3.8rem)} } /* The date in the turrets' gold, a step below the names. On a landscape screen it keeps to the sky right of the citadel: where it would be wider than that sky (a phone held sideways, a long Arabic date) it breaks in two, balanced, rather than run into the turrets. */ .inv[data-style=efsane] .fm-adate{color:var(--fm-and)} @media (min-aspect-ratio:1/1){.inv[data-style=efsane] .fm-adate{max-width:100%;white-space:normal;text-wrap:balance}} /* The hero's sky lives: a few of its stars twinkle, slowly, while it is on screen. */ .inv[data-style=efsane] .fm-after .fm-stage::before,.inv[data-style=efsane] .fm-after .fm-stage::after{content:"";position:absolute;left:0;right:0;top:0;height:34%;opacity:0;pointer-events:none;background:radial-gradient(circle at 12% 22%,#FFFBEF 0 1px,rgba(255,251,239,0) 2.2px),radial-gradient(circle at 31% 9%,#FFFBEF 0 1.2px,rgba(255,251,239,0) 2.6px),radial-gradient(circle at 58% 30%,#FFF4D6 0 1px,rgba(255,244,214,0) 2.2px),radial-gradient(circle at 76% 14%,#FFFBEF 0 1.3px,rgba(255,251,239,0) 2.8px),radial-gradient(circle at 92% 38%,#FFF4D6 0 1px,rgba(255,244,214,0) 2.2px),radial-gradient(circle at 44% 52%,#FFFBEF 0 1px,rgba(255,251,239,0) 2.2px)} .inv[data-style=efsane] .fm-after .fm-stage::after{background:radial-gradient(circle at 7% 44%,#FFFBEF 0 1px,rgba(255,251,239,0) 2.2px),radial-gradient(circle at 23% 31%,#FFF4D6 0 1.2px,rgba(255,244,214,0) 2.6px),radial-gradient(circle at 47% 17%,#FFFBEF 0 1px,rgba(255,251,239,0) 2.2px),radial-gradient(circle at 68% 41%,#FFFBEF 0 1.2px,rgba(255,251,239,0) 2.6px),radial-gradient(circle at 86% 24%,#FFF4D6 0 1.3px,rgba(255,244,214,0) 2.8px),radial-gradient(circle at 97% 6%,#FFFBEF 0 1px,rgba(255,251,239,0) 2.2px)} @media (prefers-reduced-motion:no-preference){ .inv[data-style=efsane] .fm-after.in .fm-stage::before{animation:ef-twinkle 3.4s ease-in-out infinite alternate} .inv[data-style=efsane] .fm-after.in .fm-stage::after{animation:ef-twinkle 4.6s 1.7s ease-in-out infinite alternate} } .inv[data-style=efsane] .fm-after.fm-under .fm-stage::before,.inv[data-style=efsane] .fm-after.fm-under .fm-stage::after{animation-play-state:paused} html.calm .inv[data-style=efsane] .fm-stage::before,html.calm .inv[data-style=efsane] .fm-stage::after{animation:none!important} @keyframes ef-twinkle{0%,30%{opacity:0}to{opacity:.9}} /* The hero's foot is the misty hill: the cue to read on keeps its own disc, in the night's blue. */ .inv[data-style=efsane] .fm-light{background:linear-gradient(rgba(8,12,36,0) 74%,rgba(8,12,36,.4))} .inv[data-style=efsane] .fm-cue{border-color:rgba(241,205,124,.85);background:rgba(10,14,40,.4)} .inv[data-style=efsane] .fm-cue i{border-color:#F6DFA4} /* English (2026-10-03): "Once upon a time…" in the storybook's gilded capitals (Cinzel Decorative, --i-label), in the turrets' gold as the Kurdish is; never upper-cased or tracked as the other kickers are (its small letters are capitals already). The landscape sky right of the citadel is 24% of the frame: 0.85 of the Kurdish size there. */ .inv[data-style=efsane][lang=en] .fm-kick{font-family:var(--i-label);text-transform:none;letter-spacing:.02em;font-size:clamp(1.25rem,5.6vw,1.6rem)} @media (min-aspect-ratio:1/1){.inv[data-style=efsane][lang=en] .fm-kick{font-size:clamp(1.15rem,1.8vw,1.7rem)}} /* Cinzel Decorative's swashes close the space between words, the more so tracked (a W's reaches back into it): a little more room between words in the kicker and the section titles, as the link preview draws them (2026-10-03). */ .inv[data-style=efsane][lang=en] :is(.fm-kick,.sk-kick){word-spacing:.2em} /* The gold line under the instruction fills from the side a line of English starts from. */ .inv[data-style=efsane][dir=ltr] .fm-open::after{background-position:0 0,0 0} /* A pair on one line over a phone's sky that would not fit even at 0.72 (film.js fm-wrap): the stack's own two lines. */ @media not all and (min-aspect-ratio:1/1){ .inv[data-style=efsane][lang=en] .fm-anames.fm-wrap{display:block;white-space:normal} .inv[data-style=efsane][lang=en] .fm-anames.fm-wrap span:first-child{display:block} } /* The pieces carry real spaces in English: a long pair's "& Hemin" needs no margin after the "&". */ @media not all and (min-aspect-ratio:1/1){.inv[data-style=efsane][lang=en] .fm-anames:is([data-len=l],[data-len=xl],.fm-wrap) em{margin-inline:0}} /* Its gilded capitals are for the kicker and the titles only (PLAN-EN D7): the date, the instruction and the countdown's and the calendar's labels are tracked capitals of the body face. */ .inv[data-style=efsane][lang=en] :is(.fm-date,.fm-adate,.fm-prompt .fm-open,.sk-date .cn-cd span,.sk-cal-m){font-family:var(--i-body)} /* A phone held sideways: the sky right of the citadel is narrow, and "Once upon a time…" broke there, "time…" alone on a second line. One line, sized to the sky (it is 12.1 em long and the sky 24% of the frame, never narrower than the window), never under 0.8rem. */ @media (min-aspect-ratio:1/1) and (max-height:520px){.inv[data-style=efsane][lang=en] .fm-kick{white-space:nowrap;font-size:max(.8rem,min(1.15rem,1.9vw))}} /* envelope.css */ /* The envelope (زەرف). Markup: styles/envelope.ts. Linen, pocket and flap are grey maps (scenes-src/bake_envelope.py) laid over each colourway's colours with hard-light. */ .inv[data-style=envelope]{--ev-w:min(86vw,346px);--ev-ratio:142%;--ev-tip:53%;--ev-rise:-72%;--ev-down:8%;--ev-seal:31%;--ev-drop:378%;--ev-mouth:polygon(0 0,48.08% 48.08%,50% 46%,51.92% 48.08%,100% 0,100% 100%,0 100%);--ev-pk:url(/assets/scenes/envelope/pocket-p.jpg?v=32);--ev-fl:url(/assets/scenes/envelope/flap-p.jpg?v=32);--ev-gold:linear-gradient(135deg,#8a6526,#e7cd8b 30%,#b38b3f 52%,#f3dea3 70%,#94702c);--ev-edge:linear-gradient(115deg,#f6e3ae,#d2ad62 22%,#9c7631 55%,#b8924a 78%,#6e521f);--ev-lin:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='36' height='36' fill='none' stroke='%23C9A45C' stroke-opacity='.75' stroke-width='.7'%3E%3Cpath d='M18 0L36 18 18 36 0 18z'/%3E%3Cpath d='M18 9l9 9-9 9-9-9z' stroke-opacity='.4'/%3E%3Ccircle cx='18' cy='18' r='1.3' fill='%23C9A45C' stroke='none'/%3E%3C/svg%3E") 0 0/24px,var(--ev-liner);--ev-ground:radial-gradient(110% 80% at 22% 10%,rgba(255,236,206,.55),rgba(255,236,206,0) 60%),radial-gradient(95% 80% at 50% 52%,rgba(0,0,0,0) 45%,rgba(36,22,10,.32)),url(/assets/scenes/envelope/linen.jpg?v=32) 0 0/144px,var(--ev-linen)} .inv[data-style=envelope] .ev-cover{background:var(--cn-rules),var(--cn-paper,none) 0 0/384px,var(--i-bg)} .inv[data-style=envelope] .ev-linen{background:var(--ev-ground);background-blend-mode:soft-light,multiply,hard-light,normal} .inv[data-style=envelope] .ev-stage{position:relative;z-index:1;margin:auto;width:100%;display:grid;justify-items:center;gap:clamp(12px,2.2%,22px)} .inv[data-style=envelope] .ev-words{display:grid;justify-items:center;color:var(--ev-on);text-shadow:0 1px 1px rgba(255,255,255,.3)} .inv[data-style=envelope] .ev-words .cover-kick,.inv[data-style=envelope] .ev-words .cover-date{color:var(--ev-on-2);font-size:.95rem;font-weight:600} .inv[data-style=envelope] .ev-words .cover-kick::after{content:"";display:block;width:36px;height:1px;margin:7px auto 0;background:var(--i-accent2)} .inv[data-style=envelope] .ev-names{margin:2px 0 0;font-family:var(--i-font);font-weight:700;font-size:2.9rem;line-height:1.3;color:var(--ev-on)} .inv[data-style=envelope] .ev-names span{display:block} .inv[data-style=envelope] .ev-names em{font-style:normal;margin-inline:.2em;color:var(--ev-and)} .inv[data-style=envelope] .ev-names span+em{display:block;line-height:.95} .inv[data-style=envelope] .ev-names[data-len=m]{font-size:2.5rem} .inv[data-style=envelope] .ev-names[data-len=l]{font-size:2.3rem;line-height:1.15} .inv[data-style=envelope] .ev-names[data-len=xl]{font-size:1.9rem;line-height:1.15} .inv[data-style=envelope] .ev-open{display:inline-flex;align-items:center;gap:12px;min-height:44px;padding:8px 14px;font-weight:700;font-size:1rem;color:var(--ev-on);text-decoration:none} .inv[data-style=envelope] .ev-open::before,.inv[data-style=envelope] .ev-open::after{content:"";width:28px;height:1px;background:var(--i-accent2)} .inv[data-style=envelope][data-dark="1"]{--ev-edge:linear-gradient(115deg,#c9a356,#93733a 30%,#5f4719 70%,#7e6127)}.inv[data-style=envelope][data-dark="1"] .ev-words{text-shadow:0 1px 3px rgba(0,0,0,.6)} @supports (-webkit-background-clip:text) or (background-clip:text){.inv[data-style=envelope][data-dark="1"] .cn-kick,.inv[data-style=envelope][data-dark="1"] .cn-names em,.inv[data-style=envelope][data-dark="1"] .ev-names span,.inv[data-style=envelope][data-dark="1"] .ev-names em,.inv[data-style=envelope][data-dark="1"] .cn-bism span:first-child{background:var(--ev-gold);-webkit-background-clip:text;background-clip:text;color:transparent;text-shadow:none}} .inv[data-style=envelope] .ev-env{position:relative;width:var(--ev-w);font-size:calc(var(--ev-w)*.05);perspective:900px;perspective-origin:50% 0} .inv[data-style=envelope] .ev-env::before{content:"";display:block;padding-top:var(--ev-ratio)} .inv[data-style=envelope] .ev-env>*,.inv[data-style=envelope] .ev-env i{position:absolute;inset:0;display:block} .inv[data-style=envelope] .ev-back{z-index:1;border-radius:3px;background:linear-gradient(rgba(0,0,0,.42),rgba(0,0,0,0) 50%),var(--ev-lin);box-shadow:0 1px 1.5px rgba(30,18,8,.4),0 5px 9px -3px rgba(30,18,8,.28),16px 38px 52px -26px rgba(30,18,8,.6)} .inv[data-style=envelope] .ev-glow{z-index:1;inset:0 0 40%;background:radial-gradient(60% 55% at 50% 88%,rgba(255,214,150,.75),rgba(255,190,110,0));mix-blend-mode:screen} .inv[data-style=envelope] .ev-card{--k:var(--ev-k,.75);--r:calc(1px*var(--k));z-index:2;inset:5% 6% 8%;background:linear-gradient(var(--i-accent2),var(--i-accent2)) calc(10px*var(--k)) 0/var(--r) 100% no-repeat,linear-gradient(var(--cn-g),var(--cn-g)) calc(14px*var(--k)) 0/var(--r) 100% no-repeat,linear-gradient(var(--i-accent2),var(--i-accent2)) calc(100% - 10px*var(--k)) 0/var(--r) 100% no-repeat,linear-gradient(var(--cn-g),var(--cn-g)) calc(100% - 14px*var(--k)) 0/var(--r) 100% no-repeat,var(--cn-paper,none) 0 0/calc(384px*var(--k)),var(--i-bg)} .inv[data-style=envelope] .ev-card::after{content:"";position:absolute;inset:0;box-shadow:0 -1px 6px rgba(0,0,0,.16);pointer-events:none} .inv[data-style=envelope] .ev-card-in{position:absolute;top:0;left:0;width:var(--ev-pw,min(100vw,560px));height:var(--ev-ch,140%);overflow:hidden;transform:scale(var(--k));transform-origin:0 0} .inv[data-style=envelope] .ev-pocket{z-index:3;filter:drop-shadow(0 -1px 1.5px rgba(40,25,10,.3))} .inv[data-style=envelope] .ev-pocket i,.inv[data-style=envelope] .ev-ff::before{background:var(--ev-pk) 0 0/100% 100%,var(--ev-paper-c);background-blend-mode:hard-light;clip-path:var(--ev-mouth)} .inv[data-style=envelope] .ev-shade{z-index:4;bottom:auto;height:calc(var(--ev-tip) + 2.2%);filter:blur(3.5px)} .inv[data-style=envelope] .ev-shade i{background:rgba(40,24,10,.3);clip-path:polygon(0 0,100% 0,50% 100%)} .inv[data-style=envelope] .ev-leak{z-index:5;bottom:auto;height:calc(var(--ev-tip) + 3%);background:radial-gradient(55% 75% at 50% 100%,rgba(255,206,140,.95),rgba(255,206,140,0));clip-path:polygon(0 0,100% 0,50% 100%);filter:blur(2.5px);mix-blend-mode:screen;opacity:.8} /* The flap: two faces in 3D (paper edged in gold, the liner), swapped on edge. */ .inv[data-style=envelope] .ev-flap{z-index:6;bottom:auto;height:var(--ev-tip);transform-origin:50% 0;-webkit-transform-style:preserve-3d;transform-style:preserve-3d} .inv[data-style=envelope] .ev-flap i{background:var(--ev-edge);-webkit-backface-visibility:hidden;backface-visibility:hidden} .inv[data-style=envelope] .ev-ff{clip-path:polygon(0 0,100% 0,50% 100%)} .inv[data-style=envelope] .ev-fb{clip-path:polygon(0 100%,100% 100%,50% 0);transform:rotateX(180deg)} .inv[data-style=envelope] .ev-ff::before,.inv[data-style=envelope] .ev-fb::before,.inv[data-style=envelope] .ev-ff::after,.inv[data-style=envelope] .ev-fb::after{content:"";position:absolute;inset:0} .inv[data-style=envelope] .ev-ff::before{background-image:var(--ev-fl);clip-path:polygon(1.6px 0,calc(100% - 1.6px) 0,50% calc(100% - 2.6px))} .inv[data-style=envelope] .ev-fb::before{background:linear-gradient(0deg,rgba(0,0,0,.3),rgba(0,0,0,0) 65%),var(--ev-lin);clip-path:polygon(1.6px 100%,calc(100% - 1.6px) 100%,50% 2.6px)} .inv[data-style=envelope] .ev-ff::after{inset:0 -60%;background:linear-gradient(100deg,rgba(255,252,244,0) 38%,rgba(255,252,244,.55) 50%,rgba(255,252,244,0) 62%);opacity:0} .inv[data-style=envelope] .ev-fb::after{background:linear-gradient(0deg,rgba(26,18,10,.55),rgba(26,18,10,.1))} .inv[data-style=envelope] .ev-bloom{z-index:2;inset:auto -12%;top:calc(var(--ev-tip) - 45%);height:80%;background:radial-gradient(closest-side,rgba(255,226,170,.85),rgba(255,206,140,.3) 50%,rgba(255,206,140,0));mix-blend-mode:screen;opacity:0;pointer-events:none} .inv[data-style=envelope] .ev-seal{z-index:7;inset:auto;left:50%;top:var(--ev-tip);width:var(--ev-seal);transform:translate(-50%,-50%);-webkit-tap-highlight-color:transparent} .inv[data-style=envelope] .ev-wax,.inv[data-style=envelope] .ev-mini{position:relative;display:block} .inv[data-style=envelope] .ev-wax img,.inv[data-style=envelope] .ev-mini img{display:block;width:100%;height:auto} .inv[data-style=envelope] .ev-ini{position:absolute;inset:0 3% 6% 0;display:flex;align-items:center;justify-content:center;font:700 2.25em/1 var(--i-font);color:var(--ev-wax-face);text-shadow:-.03em -.035em .02em rgba(255,255,255,.38),.045em .06em .05em rgba(0,0,0,.6),0 0 .14em rgba(0,0,0,.2)} .inv[data-style=envelope] .ev-ini b+b{margin-inline-start:-.16em;transform:translateY(.16em)} .inv[data-style=envelope] .ev-mini{width:104px;font-size:15px;margin-bottom:4px} /* The opening (2.8 s): seal off, flap open, light out, letter up, envelope away, the letter onto the page's names (envelope.js). */ .inv[data-style=envelope] .opening .ev-words,.inv[data-style=envelope] .opening .ev-open{opacity:0;transition:opacity .3s} .inv[data-style=envelope] .opening .ev-stage{animation:ev-down .7s .15s ease-in-out forwards} .inv[data-style=envelope] .opening .ev-seal{animation:ev-press .12s ease-out forwards,ev-lift .42s .12s cubic-bezier(.45,0,.75,.55) forwards} .inv[data-style=envelope] .opening .ev-shade,.inv[data-style=envelope] .opening .ev-leak{opacity:0;transition:opacity .25s .25s} .inv[data-style=envelope] .opening .ev-flap{will-change:transform;animation:ev-open .68s .3s cubic-bezier(.55,.05,.45,.95) forwards,ev-under .68s .3s linear forwards,ev-dropf .6s 1.55s cubic-bezier(.5,0,.9,.5) forwards} .inv[data-style=envelope] .opening .ev-ff::after{animation:ev-sweep .36s .3s ease-in-out forwards} .inv[data-style=envelope] .opening .ev-fb::after{animation:ev-fade .34s .64s linear forwards} .inv[data-style=envelope] .opening .ev-bloom{animation:ev-flood 1.1s .35s ease-out forwards} .inv[data-style=envelope] .opening .ev-card{will-change:transform;animation:ev-rise .8s .95s cubic-bezier(.45,.05,.25,1) forwards,ev-top .01s 1.78s forwards,ev-grow .6s 1.8s cubic-bezier(.45,0,.3,1) forwards} .inv[data-style=envelope] .opening .ev-card::after{animation:ev-fade .3s 1.8s linear forwards} .inv[data-style=envelope] .opening .ev-linen{animation:ev-fade .45s 1.85s linear forwards} .inv[data-style=envelope] .opening .ev-back,.inv[data-style=envelope] .opening .ev-glow,.inv[data-style=envelope] .opening .ev-pocket{animation:ev-drop .6s 1.55s cubic-bezier(.5,0,.9,.5) forwards} .inv[data-style=envelope] .ev-cover.opening{animation:ev-fade .35s 2.4s linear forwards} .inv[data-style=envelope] .ev-cover.opening .cn-scene{transform:scale(1.06);transition:transform 2.8s ease-out} html.io .inv[data-style=envelope].play .cn-hero[data-io]:not(.in)>*{opacity:1;transform:none} html.no3d .inv[data-style=envelope] .opening .ev-flap{animation-name:ev-open2d,ev-under,ev-dropf2d} html.no3d .inv[data-style=envelope] .ev-fb{transform:none;clip-path:polygon(0 0,100% 0,50% 100%);opacity:0} html.no3d .inv[data-style=envelope] .ev-fb::before{clip-path:polygon(1.6px 0,calc(100% - 1.6px) 0,50% calc(100% - 2.6px))} html.no3d .inv[data-style=envelope] .opening .ev-fb{animation:ev-show .01s .64s forwards} @keyframes ev-press{to{transform:translate(-50%,-50%) scale(.94)}} @keyframes ev-lift{from{transform:translate(-50%,-50%) scale(.94)}88%{opacity:1}to{transform:translate(-50%,-230%) scale(1.3) rotate(-9deg);opacity:0}} @keyframes ev-open{to{transform:rotateX(-180deg)}} @keyframes ev-open2d{to{transform:scaleY(-1)}} @keyframes ev-under{0%,49%{z-index:6}50%,to{z-index:1}} @keyframes ev-show{to{opacity:1}} @keyframes ev-sweep{from{opacity:1;transform:translateX(-30%)}to{opacity:.6;transform:translateX(30%)}} @keyframes ev-fade{to{opacity:0}} @keyframes ev-flood{35%{opacity:.9}to{opacity:0}} @keyframes ev-rise{to{transform:translateY(var(--ev-rise))}} @keyframes ev-top{to{z-index:9}} @keyframes ev-grow{from{transform:translateY(var(--ev-rise))}to{transform:translateY(var(--ev-rise)) translate(var(--ev-gx,0px),var(--ev-gy,30%)) scale(var(--ev-gs,1.4))}} @keyframes ev-drop{to{transform:translateY(200%)}} @keyframes ev-dropf{from{transform:rotateX(-180deg)}to{transform:translateY(var(--ev-drop)) rotateX(-180deg)}} @keyframes ev-dropf2d{from{transform:scaleY(-1)}to{transform:translateY(var(--ev-drop)) scaleY(-1)}} @keyframes ev-down{to{transform:translateY(var(--ev-down))}} @keyframes ev-breathe{from{opacity:.4}to{opacity:.95}} @media (prefers-reduced-motion:no-preference){.inv[data-style=envelope] .ev-cover:not(.opening) .ev-leak{animation:ev-breathe 3.2s ease-in-out infinite alternate}} html.calm .inv[data-style=envelope] .ev-leak{animation:none!important} /* Short phones: a smaller envelope, so it all fits one screen. Wide screens: it lies landscape. */ @media (max-height:760px){.inv[data-style=envelope]{--ev-w:min(76vw,296px)}.inv[data-style=envelope] .ev-names{font-size:2.4rem}} @media (max-height:660px){.inv[data-style=envelope]{--ev-w:min(64vw,240px)}.inv[data-style=envelope] .ev-names{font-size:2rem}.inv[data-style=envelope] .ev-names[data-len=l],.inv[data-style=envelope] .ev-names[data-len=xl]{font-size:1.6rem}} @media (min-width:600px) and (max-aspect-ratio:1/1) and (min-height:900px){.inv[data-style=envelope]{--ev-w:min(60vw,470px)}.inv[data-style=envelope] .ev-names{font-size:3.6rem}.inv[data-style=envelope] .ev-names[data-len=l],.inv[data-style=envelope] .ev-names[data-len=xl]{font-size:2.8rem}} @media (min-aspect-ratio:1/1) and (min-width:560px){.inv[data-style=envelope]{--ev-w:min(46vw,300px);--ev-ratio:70.42%;--ev-tip:58%;--ev-rise:-58%;--ev-seal:21%;--ev-drop:345%;--ev-mouth:polygon(0 0,45.45% 45.45%,50% 40%,54.55% 45.45%,100% 0,100% 100%,0 100%);--ev-pk:url(/assets/scenes/envelope/pocket-l.jpg?v=32);--ev-fl:url(/assets/scenes/envelope/flap-l.jpg?v=32)}.inv[data-style=envelope] .ev-card{inset:4% 5% 7%}} @media (min-width:1024px){.inv[data-style=envelope]{background:var(--ev-ground);background-blend-mode:soft-light,multiply,hard-light,normal;background-attachment:fixed}.inv[data-style=envelope] .opening .ev-linen{animation:none}} @media (min-width:1024px) and (min-aspect-ratio:1/1){.inv[data-style=envelope]{--ev-w:min(42vw,520px)}.inv[data-style=envelope] .ev-names{font-size:3.7rem}.inv[data-style=envelope] .ev-names[data-len=l],.inv[data-style=envelope] .ev-names[data-len=xl]{font-size:2.9rem}.inv[data-style=envelope] .ev-words .cover-kick,.inv[data-style=envelope] .ev-words .cover-date{font-size:1.1rem}.inv[data-style=envelope] .ev-mini{width:124px;font-size:18px}} @media (min-width:1024px) and (min-aspect-ratio:1/1) and (max-height:760px){.inv[data-style=envelope]{--ev-w:min(42vw,460px)}} /* ---------- English (2026-10-03, PLAN-EN D7, D8). Scoped to [lang=en]: Kurdish and Arabic never meet these. ---------- */ /* The kicker and the date over the envelope as labels: Cormorant Garamond, uppercase and tracked. */ .inv[lang="en"][data-style=envelope] .ev-words .cover-kick,.inv[lang="en"][data-style=envelope] .ev-words .cover-date{font-family:var(--i-label);font-weight:600;font-size:.8rem;letter-spacing:.16em;text-transform:uppercase;font-variant-numeric:lining-nums} /* The names in Parisienne, a script: its line height and swash room, the "&" in it; each size (--ev-ns) capped so the pair on one line, or the wider name when they stack (--nw em of the face, envelope.ts), fits the cover's width. */ .inv[lang="en"][data-style=envelope] .ev-names{--ev-ns:2.9rem;line-height:var(--i-names-lh,1.3);padding-inline:var(--i-names-pad,0);font-size:min(var(--ev-ns),max(var(--ev-ns) * .72,(100vw - 40px) / (var(--nw,5.8) + .6)))} .inv[lang="en"][data-style=envelope] .ev-names em{font-family:var(--i-and)} .inv[lang="en"][data-style=envelope] .ev-names span+em{line-height:1.05} .inv[lang="en"][data-style=envelope] .ev-names[data-len=m]{--ev-ns:2.5rem} .inv[lang="en"][data-style=envelope] .ev-names[data-len=l]{--ev-ns:2.3rem} .inv[lang="en"][data-style=envelope] .ev-names[data-len=xl]{--ev-ns:1.9rem} /* The couple's initials on the wax: Cormorant Garamond's 700 capitals, the first on the start side (a script's overhanging capitals would smear under the embossing). */ .inv[lang="en"][data-style=envelope] .ev-ini{font-family:var(--i-label);font-weight:700;text-transform:uppercase} /* Section titles in the names' script at 1.25 of the calligraphy's size (cinema.css sets a serif design's as labels). */ .inv[lang="en"][data-style=envelope] .cn-kick{font-family:var(--i-font);font-weight:400;font-size:1.875rem;line-height:1.3;letter-spacing:0;text-transform:none} /* The page's names in their column, a script's swash room taken from it. */ .inv[lang="en"][data-style=envelope] .cn-hero>.cn-names{padding-inline:var(--i-names-pad,0);font-size:min(var(--cn-ns),max(2.1rem,var(--cn-col) / (var(--nm,4) + .6)))} @media (max-height:760px){.inv[lang="en"][data-style=envelope] .ev-names{--ev-ns:2.4rem}} @media (max-height:660px){.inv[lang="en"][data-style=envelope] .ev-names{--ev-ns:2rem}.inv[lang="en"][data-style=envelope] .ev-names[data-len=l],.inv[lang="en"][data-style=envelope] .ev-names[data-len=xl]{--ev-ns:1.6rem}} @media (min-width:600px) and (max-aspect-ratio:1/1) and (min-height:900px){.inv[lang="en"][data-style=envelope] .ev-names{--ev-ns:3.6rem}.inv[lang="en"][data-style=envelope] .ev-names[data-len=l],.inv[lang="en"][data-style=envelope] .ev-names[data-len=xl]{--ev-ns:2.8rem}} @media (min-width:1024px){.inv[lang="en"][data-style=envelope] .cn-kick{font-size:2.125rem}} @media (min-width:1024px) and (min-aspect-ratio:1/1){.inv[lang="en"][data-style=envelope] .ev-names{--ev-ns:3.7rem}.inv[lang="en"][data-style=envelope] .ev-names[data-len=l],.inv[lang="en"][data-style=envelope] .ev-names[data-len=xl]{--ev-ns:2.9rem}.inv[lang="en"][data-style=envelope] .ev-words .cover-kick,.inv[lang="en"][data-style=envelope] .ev-words .cover-date{font-size:.9rem}} /* A phone held sideways (English): the kicker, the names, the envelope and the instruction stacked are taller than the window, so "Open your invitation" was cut at its foot. The envelope is sized by the window's height too: what is left of it under the words (about 102 px), above the instruction (44 px), less the gaps and the scroller's padding. */ @media (min-aspect-ratio:1/1) and (min-width:560px) and (max-height:520px){.inv[lang="en"][data-style=envelope]{--ev-w:max(180px,min(46vw,300px,(100vh - 216px) * 1.42))}} @supports (height:1dvh){@media (min-aspect-ratio:1/1) and (min-width:560px) and (max-height:520px){.inv[lang="en"][data-style=envelope]{--ev-w:max(180px,min(46vw,300px,(100dvh - 216px) * 1.42))}}} /* gate.css */ /* Brick Gate. Text on plaster, never on brick. The cover's screen sizes are --gt-* on .gt-cover. */ [data-style=gate]{--gt-brick:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='60' height='20'%3E%3Cpath fill='%23CDA36C' d='M1 1h28v8H1zm15 10h28v8H16z'/%3E%3Cpath fill='%23C79A61' d='M31 1h28v8H31z'/%3E%3Cpath fill='%23D3AC78' d='M-14 11h28v8h-28zm60 0h28v8H46z'/%3E%3C/svg%3E");--gt-tint:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='100'%3E%3Cpath fill='%2376421A21' d='M31 1h28v8H31zM151 21h28v8h-28zM1 61h28v8H1zM121 81h28v8h-28z'/%3E%3Cpath fill='%23FFF7E633' d='M16 51h28v8H16z'/%3E%3C/svg%3E");--gt-tint2:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='420' height='260'%3E%3Cpath fill='%2376421A21' d='M106 11h28v8h-28zM376 51h28v8h-28zM331 101h28v8h-28zM196 131h28v8h-28zM76 191h28v8H76zM241 221h28v8h-28z'/%3E%3Cpath fill='%23FFF7E633' d='M211 21h28v8h-28zM46 91h28v8H46zM316 151h28v8h-28z'/%3E%3C/svg%3E");--gt-bs:60px 20px;--gt-ts:180px 100px;--gt-t2:420px 260px;--gt-wall:var(--gt-tint) 0 0/var(--gt-ts),var(--gt-tint2) 0 0/var(--gt-t2),var(--gt-brick) 0 0/var(--gt-bs),var(--gt-mortar);--gt-lat:repeating-linear-gradient(45deg,#0000 0 6px,#E6C99A 0 8px),repeating-linear-gradient(-45deg,#0000 0 6px,#E6C99A 0 8px),#B47E47;--gt-steps:linear-gradient(#B98B57,#A77A48 9px,#7E5A33 9px 10px,#A0733F 10px,#936A3D);--gt-ar:min(50vw - 20px,272px);--gt-b:12px;--gt-ease:cubic-bezier(.16,1,.3,1);background:linear-gradient(#FFF0D266,#0000 360px),var(--gt-wall)} .gt-cover{--gt-w:min(78vw,310px);--gt-r:min(39vw,155px);--gt-fs:clamp(1.8rem,9vw,2.4rem);--gt-v:12px;background:radial-gradient(70% 42% at 50% 62%,#FFE2AA52,#0000 72%),radial-gradient(95% 85% at 50% 42%,#0000 58%,#46260E4D),var(--gt-wall);transform-origin:var(--gt-o,50% 64%)} .gt-col{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;padding-top:var(--gt-pt,calc(env(safe-area-inset-top) + 26px));overflow:hidden auto} .gt-plaque{z-index:2;flex:none;width:var(--gt-pw,min(84%,340px));margin-top:var(--gt-pa,0);filter:drop-shadow(0 14px 12px #3C1E0A59)} .gt-rim,.gt-pl,.gt-pl::before,.gt-pl::after{clip-path:polygon(var(--c) 0,calc(100% - var(--c)) 0,100% var(--c),100% calc(100% - var(--c)),calc(100% - var(--c)) 100%,var(--c) 100%,0 calc(100% - var(--c)),0 var(--c))} .gt-rim{--c:12px;padding:3px;background:#8E6538} .gt-pl{--c:10px;position:relative;isolation:isolate;display:grid;gap:2px;padding:var(--gt-pp,14px 18px 16px);background:var(--i-bg)} .gt-pl::before,.gt-pl::after{content:"";position:absolute;z-index:-1;inset:5px;--c:8px;background:var(--gt-line)} .gt-pl::after{inset:6px;--c:7.6px;background:var(--i-bg)} .gt-pl p{margin:0;font-size:var(--gt-ps,.84rem);line-height:1.7;color:var(--i-muted)} .gt-pl .gt-cnames{font:800 calc(var(--gt-fs)*var(--gt-k,1))/1.5 var(--i-font);color:var(--i-ink);text-wrap:balance} .gt-cnames[data-len=m]{--gt-k:.88}.gt-cnames[data-len=l]{--gt-k:.76}.gt-cnames[data-len=xl]{--gt-k:.68} .gt-cnames em{font:700 .6em var(--i-body);margin-inline:.15em;color:var(--i-accent-ink)} .gt-portal{position:relative;z-index:0;flex:1 0 var(--gt-pf,260px);width:var(--gt-w);max-height:var(--gt-ph,none);margin-top:var(--gt-pm,40px)} .gt-portal::before,.gt-portal::after{content:"";position:absolute;inset:-16px -16px 0;background:var(--gt-lat);border-radius:50% 50% 0 0/calc(var(--gt-r) + 16px) calc(var(--gt-r) + 16px) 0 0;box-shadow:inset 0 0 0 2px #8E6538} .gt-portal::after{z-index:-1;inset:calc(-16px - var(--gt-v)) calc(-16px - var(--gt-v)) auto;height:calc(var(--gt-r) + 16px + var(--gt-v));border-radius:50% 50% 0 0/100% 100% 0 0;box-shadow:none;background:radial-gradient(circle at 50% 100%,#0000 55%,#5A321429),repeating-conic-gradient(from -2.45deg at 50% 100%,#DDBF92 0 .4deg,#C79A61 0 4.5deg,#DDBF92 0 4.9deg,#D0A56E 0 9deg)} .gt-ckey,.gt-key{position:absolute;left:50%;z-index:3;width:26px;height:26px;margin-left:-13px;background:var(--i-accent3);transform:rotate(45deg);box-shadow:0 0 0 3px var(--i-bg),0 0 0 5px #8E6538} .gt-ckey{top:calc(-21px - var(--gt-v)/2)} /* Safari clips turned doors to the arch only through the mask. */ .gt-court{position:absolute;inset:0;overflow:hidden;border-radius:50% 50% 0 0/var(--gt-r) var(--gt-r) 0 0;-webkit-mask-image:linear-gradient(#000,#000);background:radial-gradient(90% 62% at 50% 56%,#FFF5DA,#F7D093 46%,#C8864A)} .gt-court::before{content:"";position:absolute;inset:0;z-index:2;border-radius:inherit;background:linear-gradient(90deg,#0000 calc(50% - 15px),#FFD07E6E,#0000 calc(50% + 15px)),linear-gradient(0deg,#FFD07EB3,#0000 30px);box-shadow:inset 0 16px 20px -10px #1E0F058C,inset 10px 0 14px -10px #1E0F0559,inset -10px 0 14px -10px #1E0F0559} .gt-far,.gt-cphoto{position:absolute;inset:0;width:100%;height:100%} .gt-cphoto{background-size:cover;box-shadow:inset 0 0 0 999px #FFD6961F} .gt-clights{position:absolute;width:100%;height:var(--gt-r);overflow:visible} .gt-cord{fill:none;stroke:#8E6538} .gt-leaf{--s:1;--gt-d:to right;position:absolute;z-index:1;top:0;bottom:3px;right:0;width:calc(50% - 1px);transform-origin:100% 50%;border-top-right-radius:100% var(--gt-r);background:linear-gradient(#140A0440,#0000 30% 70%,#140A0438),linear-gradient(var(--gt-d),#FFD69617,#140A0438),radial-gradient(circle,#FBEBBD 0 1px,#D9B266 1.7px 2.4px,#6A4520 3px 3.4px,#0000 4px) 11px 0/22px 25%,linear-gradient(#0000 calc(50% - 7px),#1A120D 0,#3B3029 calc(50% - 4px),#221913 calc(50% + 4px),#150E0A 0 calc(50% + 7px),#0000 0) 0 0/100% 25%,repeating-linear-gradient(var(--gt-d),#5A3920 0 25px,#3F2817 0 26px,#4F321B 0 51px,#3F2817 0 52px);box-shadow:inset 0 0 0 3px #3A2413,inset 0 0 0 6px #6B4629;-webkit-backface-visibility:hidden;backface-visibility:hidden;transform:perspective(1100px) rotateY(0)} .gt-leaf-l{--s:-1;--gt-d:to left;right:auto;left:0;border-radius:100% 0 0 0/var(--gt-r) 0 0 0;transform-origin:0 50%;background-position:0 0,0 0,right 11px top 0} .gt-ring{position:absolute;top:52%;left:10px;width:18px;height:18px;border-radius:50%;transform-origin:50% -3px;border:2.5px solid #E2BD74;box-shadow:0 1px 1px #2A170B,inset 0 1px 1px #2A170B99} .gt-leaf-l .gt-ring{left:auto;right:10px} .gt-ring::before{content:"";position:absolute;left:1px;top:-10px;width:9px;height:9px;border-radius:50%;background:radial-gradient(#8E6538 1.5px,#E9C57C 2px)} .gt-open{position:absolute;left:50%;bottom:var(--gt-ob,calc(25% - 26px));z-index:3;transform:translateX(-50%);padding:13px 24px;white-space:nowrap;border:2px solid #8E6538;border-radius:99px;background:var(--gt-door);color:var(--i-ink);font:700 .98rem/1.4 var(--i-body);text-decoration:none;box-shadow:0 12px 26px -8px #1E0F05A6} .inv .gt-open:focus-visible{outline-color:var(--gt-door)} .gt-step,.gt-sill{position:relative;flex:none;width:100%;height:calc(28px + env(safe-area-inset-bottom));background:var(--gt-steps);box-shadow:0 -2px #7E5A33} .gt-step::after{content:"";position:absolute;inset:0;background:radial-gradient(min(26%,200px) 140% at 50% 0,#FFE3AEB3,#0000)} .inv .gt-fest{display:var(--gt-fd,none);position:absolute;top:4px;left:50%;width:2880px;height:101px;margin-left:-1440px} .inv .gt-lamp{display:var(--gt-ld,none);position:absolute;top:calc(var(--gt-r)*.56);right:calc(100% + var(--gt-v) + 60px);width:58px;overflow:visible} .inv .gt-lamp-r{right:auto;left:calc(100% + var(--gt-v) + 60px);transform:scaleX(-1)} @media (prefers-reduced-motion:no-preference){ .gt-cover.opening{animation:var(--gt-walk,gt-walk) .9s 1s ease-in forwards,gt-out .45s 1.5s linear forwards} .opening .gt-open,.opening .gt-court::before{opacity:0;transition:opacity .15s} .opening .gt-step::after{transform:scale(2.2,1.6);transition:transform .9s .35s} .opening .gt-ring{animation:gt-knock .45s ease-in-out} .opening .gt-leaf{transform:perspective(1100px) rotateY(calc(-105deg*var(--s)));transition:transform 1.3s cubic-bezier(.45,.05,.2,1) .15s} .opening .gt-leaf-l{transition-delay:.23s} .no3d .opening .gt-leaf{transform:translateX(calc(102%*var(--s)))} .opening .gt-court use{animation:gt-lit .3s calc(.3s + var(--i)*60ms) ease-out backwards} .opening .gt-cphoto{opacity:0;transition:opacity .45s 1s} .play .gt-key{animation:gt-key .4s .2s cubic-bezier(.3,1.5,.5,1) backwards} .play .gt-lights use{animation:gt-lit .35s calc(.35s + var(--i)*60ms) ease-out backwards} .play .gt-r{animation:gt-rise .8s var(--gt-ease) var(--d,.3s) backwards} [data-style=gate] [data-io]{transition:opacity .7s var(--gt-ease),transform .7s var(--gt-ease)} .io [data-style=gate].play [data-io]:not(.in){opacity:0;transform:translateY(22px)} } @keyframes gt-walk{to{transform:scale(1.9)}}@keyframes gt-far{to{transform:scale(3.2)}}@keyframes gt-out{to{opacity:0}}@keyframes gt-knock{33%{transform:rotate(14deg)}66%{transform:rotate(-8deg)}}@keyframes gt-lit{from{opacity:.3}}@keyframes gt-key{from{opacity:0;transform:rotate(45deg) scale(.6)}}@keyframes gt-rise{from{opacity:0;transform:translateY(16px)}} [data-style=gate] .inv-bar>*{background:var(--i-bg);border-color:var(--gt-pill);box-shadow:0 6px 14px -8px #3C1E0A8C} [data-style=gate] .inv-page{z-index:0;width:calc(100% - 40px);margin-top:26px;padding-bottom:0} /* Static: the arch frames the page (phone) or the sheet (laptop). */ .inv .gt-hero{position:static;padding-top:calc(var(--gt-ar)*.62 + 16px);gap:12px} .gt-arch,.gt-arch::after{position:absolute;z-index:-1;inset:calc(-1*var(--gt-b)) calc(-1*var(--gt-b)) 0;background:var(--gt-lat);border-radius:50% 50% 0 0/calc(var(--gt-ar) + var(--gt-b)) calc(var(--gt-ar) + var(--gt-b)) 0 0;box-shadow:inset 0 0 0 2px #8E6538,var(--gt-lift,0 0 #0000)} .gt-arch::after{content:"";inset:var(--gt-b) var(--gt-b) 0;border-radius:50% 50% 0 0/var(--gt-ar) var(--gt-ar) 0 0;background:var(--i-bg);box-shadow:inset 0 14px 22px -16px #3C1E0A73} .gt-key{top:-18px} .gt-lights{position:absolute;left:9.05%;width:81.9%;top:calc(var(--gt-ar)*.382);overflow:visible} .gt-portrait,.gt-hall{width:78%;aspect-ratio:4/5;margin:6px 0;background:var(--i-surface) 50%/cover;border:6px solid var(--i-surface);border-radius:50% 50% 0 0/40% 40% 0 0;box-shadow:0 0 0 1px var(--gt-mat),0 22px 36px -24px #3C1E0AB3} .gt-hall{width:100%;aspect-ratio:4/3;margin:0;border-radius:50% 50% 0 0/38% 38% 0 0} .gt-hero .bism{font-size:1rem} .gt-names{font-size:calc(clamp(2.5rem,12vw,3.4rem)*var(--gt-k,1));line-height:1.5} .gt-names[data-len=l]{--gt-k:.83}.gt-names[data-len=xl]{--gt-k:.71} .gt-names em{font-weight:700;font-size:max(.42em,15px);line-height:1;padding:.2em 0 .6em} .gt-course{display:flex;justify-content:center;gap:3px;padding:8px 0} .gt-course i{width:22px;height:7px;background:#C79A61;box-shadow:inset 0 -1px #A87B45} .gt-course i:nth-child(2){background:var(--i-accent3);box-shadow:none} .gt-tile,.gt-note,.gt-card{border:1px solid var(--gt-line);border-radius:0;background:var(--i-surface);outline:1px solid var(--gt-rule);outline-offset:-6px} .gt-tile{padding:10px 0 8px;outline-offset:-5px} .gt-tile strong{font:800 1.7rem/1.4 var(--i-font)} .gt-note{width:100%;max-width:none;padding:18px 22px;background:var(--i-bg)} .gt-card{padding:26px 20px} .gt-card input,.gt-card select{border-radius:4px;border-color:var(--gt-line)} .gt-time{padding:4px 14px;border:1px solid;color:var(--i-accent-ink);font-weight:700;font-size:.95rem} .gt-where .venue{font-size:1.8rem;line-height:1.5} .gt-foot{margin:28px 24px 0;border-top-color:var(--gt-hair)} .gt-foot .foot-mark{opacity:1} .gt-sill{margin:8px -20px 0;width:auto} @media (min-width:600px){ .gt-cover{--gt-w:min(56vw,420px);--gt-r:min(28vw,210px);--gt-fs:clamp(2.4rem,4.6vw,3rem);--gt-pw:min(84%,var(--gt-w) + 150px);--gt-pa:auto;--gt-ph:calc(var(--gt-r)*3.6);--gt-pm:46px;--gt-fd:block} } @media (max-height:520px){ .gt-cover{--gt-w:220px;--gt-r:110px;--gt-fs:1.7rem;--gt-pt:12px;--gt-pf:190px;--gt-pm:36px;--gt-ob:6%;--gt-fd:none} .gt-ckick{display:none} } @media (min-width:1024px){ [data-style=gate]{--gt-sw:min(44vw,520px);--gt-bs:84px 28px;--gt-ts:252px 140px;--gt-t2:588px 364px;background:radial-gradient(80% 90% at 50% 35%,#0000 50%,#3C1E0A42),var(--gt-wall)} .gt-cover{--gt-w:clamp(310px,27vw,420px);--gt-r:clamp(155px,13.5vw,210px);--gt-fs:clamp(2.6rem,3.8vw,4rem);--gt-v:20px;--gt-walk:gt-far;--gt-o:50% 70%;--gt-pt:92px;--gt-ps:1.05rem;--gt-pp:22px 40px 26px;--gt-ld:block;background:radial-gradient(34% 58% at 50% 62%,#FFE0A84D,#0000 75%),linear-gradient(#FFD69638,#0000 190px),radial-gradient(80% 100% at 50% 40%,#0000 42%,#3C1E0A6B),var(--gt-wall)} [data-style=gate] .inv-page{width:auto;margin-top:0;padding:44px 32px 96px;grid-template-columns:var(--gt-sw) minmax(0,440px);column-gap:72px;align-items:stretch} .gt-sill,.gt-course-where{display:none} [data-style=gate] .inv-sheet{--gt-ar:calc(var(--gt-sw)/2);--gt-b:14px;--gt-lift:0 40px 80px -40px #321908CC;z-index:0;padding:0 0 40px;border-radius:0;background:none;box-shadow:none} [data-style=gate] .inv-sheet>.inv-sec{padding-inline:44px} .inv .gt-hero{flex:1 0 auto;align-content:center;gap:16px} .inv-sheet .gt-names{font-size:calc(4.2rem*var(--gt-k,1))} [data-style=gate] .inv-sheet::after{content:"";position:absolute;inset:auto -30px -28px;height:28px;background:var(--gt-steps);box-shadow:0 -2px #7E5A33,0 18px 30px -18px #321908CC} [data-style=gate] .inv-side{padding-top:0;align-content:space-between} [data-style=gate] .inv-side>*{margin:0;padding:24px;border:9px solid #0000;border-radius:0;background:var(--gt-lat);background-origin:border-box;box-shadow:0 0 0 1px #8E6538,inset 0 0 0 1px #8E6538,inset 0 0 0 5px var(--i-bg),inset 0 0 0 6px var(--gt-rule),inset 0 0 0 999px var(--i-bg),0 18px 28px -20px #3219088C} .inv-side .gt-foot{padding:16px;border:1px solid var(--gt-line);box-shadow:inset 0 0 0 999px var(--i-bg),0 14px 24px -20px #3219088C} .inv-side .gt-note{padding:0;border:0;outline:0}.inv-side .gt-card{outline:0} .inv-side .gt-hall{aspect-ratio:16/10} .gt-card .rsvp-actions{grid-template-columns:1fr 1fr} } @media (min-width:1024px) and (max-height:720px){ .gt-cover{--gt-fs:clamp(2.2rem,3vw,3rem);--gt-pt:64px;--gt-pp:14px 28px 16px;--gt-pm:36px} } /* Pickers draw a phone cover on any screen. */ .cover-box [data-style=gate]{--gt-bs:60px 20px;--gt-ts:180px 100px;--gt-t2:420px 260px} .cover-box .gt-cover{--gt-w:310px;--gt-r:155px;--gt-fs:2.3rem;--gt-v:12px;--gt-pt:26px;--gt-pp:14px 18px 16px;--gt-ps:.84rem;--gt-pm:40px;--gt-fd:none;--gt-ld:none;background:var(--gt-wall)} /* halparke.css */ /* Halparke: everyone the couple loves, dancing. Colours: palette() and the colourway's --hp-*. Figures: styles/halparke.ts. */ .inv[data-style="halparke"] { --hp-e: cubic-bezier(.2, .8, .2, 1); /* The weave: stepped diamonds, a mask the band colour fills. */ --hp-weave: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='72' height='72'%3E%3Cpath fill-rule='evenodd' d='M16 8h4v2h2v2h2v2h2v2h2v4h-2v2h-2v2h-2v2h-2v2h-4v-2h-2v-2h-2v-2h-2v-2h-2v-4h2v-2h2v-2h2v-2h2zM16 14h4v2h2v4h-2v2h-4v-2h-2v-4h2z'/%3E%3C/svg%3E"); } .inv[data-style="halparke"] p { margin: 0; } /* ---------- the dancers ---------- */ .inv[data-style="halparke"] .hp-fz { display: block; max-width: 100%; height: auto; overflow: visible; color: var(--i-ink); fill: var(--hp-dress); } .inv[data-style="halparke"] .hp-a { fill: none; stroke: var(--i-ink); stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; } .inv[data-style="halparke"] .hp-d { fill: none; stroke: var(--i-accent3); stroke-width: 4; stroke-linecap: round; } .inv[data-style="halparke"] .hp-sh { fill: none; stroke: var(--i-soft); stroke-width: 4.4; stroke-linecap: round; } .inv[data-style="halparke"] .hp-kf { transform-origin: 0 0; transform-box: view-box; } .inv[data-style="halparke"] .hp-stage { display: grid; justify-items: center; width: 100%; } /* The joining line's empty place, taken after a yes. */ .inv[data-style="halparke"] .hp-join { opacity: 0; } .inv[data-style="halparke"].rsvp-yes .hp-join { opacity: 1; } /* Names: base × length × context × face. */ .inv[data-style="halparke"] .hp-names { margin: 0; display: grid; justify-items: center; color: var(--i-ink); text-wrap: balance; font: 700 calc(var(--hp-b, 64px) * var(--hp-l, 1) * var(--hp-k, 1) * var(--hp-f, 1))/1.05 var(--i-font); } .inv[data-style="halparke"] .hp-names[data-len="m"] { --hp-l: .81; } .inv[data-style="halparke"] .hp-names[data-len="l"] { --hp-l: .66; } .inv[data-style="halparke"] .hp-names[data-len="xl"] { --hp-l: .56; line-height: 1.3; } .inv[data-style="halparke"] .hp-names em { display: grid; place-items: center; width: 30px; height: 30px; margin: 12px 0 8px; border-radius: 50%; background: var(--i-btn); color: var(--i-btn-ink); font: normal 700 17px/1 var(--i-body); } .inv[data-style="halparke"] .hp-sch { --hp-f: 1.12; } .inv[data-style="halparke"] .hp-sch .hp-names { line-height: 1.5; } .inv[data-style="halparke"] .hp-nb { display: inline-block; } /* ---------- the cover ---------- */ /* --hp-k names, --hp-lw line, --hp-ph portrait, --hp-g gaps. */ .inv[data-style="halparke"] .hp-cover { --hp-lw: 360px; --hp-ph: 150px; --hp-g: 14px; } .inv[data-style="halparke"] .hp-cover .cover-scroll { padding-inline: 16px; } .inv[data-style="halparke"] .hp-cover::before { content: ""; position: absolute; inset: 0; pointer-events: none; background: linear-gradient(var(--hp-band1), rgba(255, 255, 255, 0) 24%, rgba(255, 255, 255, 0) 76%, var(--hp-band1)); -webkit-mask: var(--hp-weave) 0 0/56px 56px, var(--hp-weave) 28px 28px/56px 56px; mask: var(--hp-weave) 0 0/56px 56px, var(--hp-weave) 28px 28px/56px 56px; } .inv[data-style="halparke"] .hp-in { gap: var(--hp-g); max-width: 26rem; } .inv[data-style="halparke"] .hp-kick { font-size: 14.5px; font-weight: 600; color: var(--i-accent-ink); } .inv[data-style="halparke"] .hp-dance, .inv[data-style="halparke"] .hp-far { width: 100%; display: grid; justify-items: center; } .inv[data-style="halparke"] .hp-line { width: 100%; max-width: var(--hp-lw); } /* The circle's far side, small and pale; mirrored, so it hops in from the right. */ .inv[data-style="halparke"] .hp-far { transform: scaleX(-1); } .inv[data-style="halparke"] .hp-back { width: 100%; max-width: calc(var(--hp-lw) * .55); opacity: .5; } .inv[data-style="halparke"] .hp-pic .hp-far { display: none; } .inv[data-style="halparke"] .hp-date { font-size: 15.5px; font-weight: 700; color: var(--i-ink); line-height: 1.6; } .inv[data-style="halparke"] p.hp-time { margin-top: -10px; font-size: 14px; color: var(--i-muted); } .inv[data-style="halparke"] .hp-open { margin-top: 4px; min-height: 50px; padding: 13px 26px; font-size: 16px; background: var(--i-ink); color: var(--i-surface); box-shadow: 0 16px 30px -18px var(--i-ink); } .inv[data-style="halparke"] .hp-pic { --hp-k: .78; --hp-lw: 330px; } .inv[data-style="halparke"] .hp-photo { width: var(--hp-ph); height: var(--hp-ph); margin: 4px 0; border-radius: 50%; background-size: cover; background-color: var(--hp-band1); box-shadow: 0 0 0 4px var(--i-bg), 0 0 0 9px var(--i-accent), 0 22px 40px -18px var(--i-shadow); } /* ---------- the page ---------- */ .inv[data-style="halparke"] .lang-switch, .inv[data-style="halparke"] .bar-btn { background: var(--i-surface); } .inv[data-style="halparke"] .lang-switch a[aria-current] { background: var(--i-ink); color: var(--i-surface); } .inv[data-style="halparke"] .hp-hero { --hp-b: 66px; padding-block: 22px 0; gap: 14px; overflow: hidden; } .inv[data-style="halparke"] .hp-hero .hp-names { margin: 4px 0; } .inv[data-style="halparke"] .hp-hero .hp-stage { margin-top: 12px; } .inv[data-style="halparke"] .hp-band { padding-block: 26px 30px; gap: 12px; } .inv[data-style="halparke"] .hp-when, .inv[data-style="halparke"] .hp-rsvp { background: var(--hp-band1); } .inv[data-style="halparke"] .hp-where { background: var(--hp-band2); padding-bottom: 0; } .inv[data-style="halparke"] .hp-cd { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); width: 100%; max-width: 22rem; } .inv[data-style="halparke"] .hp-cd div { display: grid; gap: 2px; } .inv[data-style="halparke"] .hp-cd div + div { border-inline-start: 1.5px dotted var(--i-accent); } .inv[data-style="halparke"] .hp-cd strong { font: 700 40px/1.3 var(--i-font); color: var(--i-ink); font-variant-numeric: tabular-nums; } .inv[data-style="halparke"] .hp-cd span { font-size: 12.5px; color: var(--i-muted); } .inv[data-style="halparke"] .hp-sch .hp-cd strong { line-height: 1.6; } .inv[data-style="halparke"] .hp-after { max-width: 20ch; font: 700 24px/1.5 var(--i-font); text-wrap: balance; } .inv[data-style="halparke"] .hp-when .when-date { font-size: 16.5px; } .inv[data-style="halparke"] .hp-pill { display: inline-block; padding: 6px 16px; border-radius: 999px; background: var(--i-btn); color: var(--i-btn-ink); font-weight: 700; font-size: .95rem; } .inv[data-style="halparke"] .hp-where .kick { color: var(--i-accent2); } .inv[data-style="halparke"] .hp-hall { border: 5px solid var(--i-surface); border-radius: 18px; box-shadow: 0 18px 36px -26px var(--i-shadow); } .inv[data-style="halparke"] .hp-where .venue { font-size: 34px; line-height: 1.4; } .inv[data-style="halparke"] .hp-sch .venue, .inv[data-style="halparke"] .hp-sch .rsvp-q, .inv[data-style="halparke"] .hp-sch .hp-after { line-height: 1.75; } .inv[data-style="halparke"] .hp-map { background: var(--i-accent2); color: var(--i-surface); box-shadow: 0 14px 28px -16px var(--i-accent2); } .inv[data-style="halparke"] .hp-where .hp-stage { margin-top: 10px; } .inv[data-style="halparke"] .hp-note-sec { padding-block: 28px 8px; } .inv[data-style="halparke"] .hp-note { max-width: 34ch; border: 1.5px dashed var(--i-accent); } .inv[data-style="halparke"] .hp-rsvp .hp-stage { margin: 2px 0 -12px; } .inv[data-style="halparke"] .hp-rsvp .hp-card { padding: 24px 18px 12px; border: 0; border-radius: 24px; background: var(--i-surface); box-shadow: 0 24px 44px -34px var(--i-shadow); } .inv[data-style="halparke"] .rsvp-q { font-size: 30px; line-height: 1.4; } .inv[data-style="halparke"] .rsvp input, .inv[data-style="halparke"] .rsvp select { background: var(--i-surface); border: 1.5px solid var(--i-ink-line); } .inv[data-style="halparke"] .rsvp .btn.soft { border: 1.5px solid var(--i-ink); } .inv[data-style="halparke"] .hp-foot { margin: 0; padding: 30px 20px 0; gap: 8px; border: 0; } .inv[data-style="halparke"] .hp-foot .hp-stage { margin: 14px 0 10px; } /* Below a laptop the bands run full width, the words in a column inside. */ @media (max-width: 1023px) { .inv[data-style="halparke"] .inv-page { max-width: none; } .inv[data-style="halparke"] .inv-sec { padding-inline: max(20px, calc(50% - 16rem)); } } /* ---------- motion ---------- */ /* Dancers bob half a beat apart; on the page only while on screen. */ .inv[data-style="halparke"] .hp-cover .hp-fz use, .inv[data-style="halparke"] .on > .hp-fz use { animation: hp-bob .8s steps(1, end) infinite; } .inv[data-style="halparke"] .hp-fz use:nth-of-type(even), .inv[data-style="halparke"] .hp-join use { animation-delay: -.4s; } .inv[data-style="halparke"] .hp-cover .hp-fz .hp-kf, .inv[data-style="halparke"] .on > .hp-fz .hp-kf { animation: hp-wave .6s ease-in-out infinite alternate; } @keyframes hp-bob { 50% { transform: translateY(-1.8px); } } @keyframes hp-wave { from { transform: rotate(-10deg); } to { transform: rotate(12deg); } } /* The lines hop in inside the wrappers the opening moves. */ .inv[data-style="halparke"] .hp-cover .hp-fz { animation: hp-in 1s .2s ease-out backwards; } .inv[data-style="halparke"].play .hp-hero .hp-fz { animation: hp-in 1s .3s ease-out backwards; } .inv[data-style="halparke"].play .hp-hero .rv:nth-child(1) { animation-delay: .1s; } .inv[data-style="halparke"].play .hp-hero .rv:nth-child(2) { animation-delay: .18s; } .inv[data-style="halparke"].play .hp-hero .rv:nth-child(3) { animation-delay: .26s; } .inv[data-style="halparke"].play .hp-hero .rv:nth-child(4) { animation-delay: .34s; } @keyframes hp-in { from { transform: translate(-115%, 0); } 6% { transform: translate(-101%, -3px); } 12%, 25% { transform: translate(-87%, 0); } 31% { transform: translate(-73%, -3px); } 37%, 50% { transform: translate(-59%, 0); } 56% { transform: translate(-45%, -3px); } 62%, 75% { transform: translate(-31%, 0); } 81% { transform: translate(-15%, -3px); } 87%, to { transform: none; } } /* The opening: the near side hops off to the right. */ .inv[data-style="halparke"] .hp-cover.opening .hp-in > :not(.hp-dance) { opacity: 0; transition: opacity .25s ease; } .inv[data-style="halparke"] .hp-cover.opening .hp-dance { animation: hp-off 1s ease-out forwards; will-change: transform; } .inv[data-style="halparke"] .hp-cover.opening { animation: hp-fade .3s .7s linear forwards; } @keyframes hp-fade { to { opacity: 0; } } @keyframes hp-off { 6% { transform: translate(14%, -3px); } 12%, 25% { transform: translate(28%, 0); } 31% { transform: translate(42%, -3px); } 37%, 50% { transform: translate(56%, 0); } 56% { transform: translate(70%, -3px); } 62%, 75% { transform: translate(84%, 0); } 81% { transform: translate(100%, -3px); } 87%, to { transform: translate(115%, 0); } } /* Words rise as they come on screen; the reply card only settles. */ .inv[data-style="halparke"] .hp-r, .inv[data-style="halparke"] .hp-card { transition: opacity .7s var(--hp-e), transform .7s var(--hp-e); } html.io .inv[data-style="halparke"].play .hp-r:not(.in) { opacity: 0; transform: translateY(18px); } html.io .inv[data-style="halparke"].play .hp-card:not(.in) { transform: translateY(28px); } .inv[data-style="halparke"].play.rsvp-yes .hp-join { animation: hp-drop .7s ease-out backwards; } @keyframes hp-drop { from { opacity: 0; transform: translateY(-18px); } 54% { opacity: 1; transform: none; } 65%, 88% { transform: translateY(-6px); } 77% { transform: none; } } /* ---------- short or narrow phones ---------- */ @media (max-width: 350px) { .inv[data-style="halparke"] .hp-cover, .inv[data-style="halparke"] .hp-hero { --hp-k: .85; } } @media (max-height: 700px) { .inv[data-style="halparke"] .hp-cover { --hp-k: .85; --hp-lw: 310px; --hp-ph: 124px; --hp-g: 10px; } .inv[data-style="halparke"] .hp-pic { --hp-k: .7; } } @media (max-height: 600px) { .inv[data-style="halparke"] .hp-cover { --hp-lw: 270px; --hp-ph: 96px; --hp-g: 8px; } .inv[data-style="halparke"] .hp-pic { --hp-k: .62; } .inv[data-style="halparke"] .hp-cn em { margin: 8px 0 4px; } } /* A tall tablet (body > spares the pickers' small covers). */ @media (min-width: 600px) and (max-width: 1023px) and (min-height: 860px) { body > .inv[data-style="halparke"] .hp-cover { --hp-b: 5rem; --hp-lw: 32rem; --hp-ph: 200px; --hp-g: 18px; } body > .inv[data-style="halparke"] .hp-in { max-width: 38rem; } body > .inv[data-style="halparke"] .hp-kick { font-size: 1.05rem; } body > .inv[data-style="halparke"] .hp-date { font-size: 1.15rem; } body > .inv[data-style="halparke"] .hp-cn em { width: 36px; height: 36px; font-size: 20px; margin: 13px 0 9px; } } /* ---------- a laptop ---------- */ @media (min-width: 1024px) { .inv[data-style="halparke"]::before { content: ""; position: absolute; inset: 0; pointer-events: none; background: var(--hp-band1); } .inv[data-style="halparke"]::before, body > .inv[data-style="halparke"] .hp-cover::before { -webkit-mask: var(--hp-weave) 0 0/72px 72px, var(--hp-weave) 36px 36px/72px 72px; mask: var(--hp-weave) 0 0/72px 72px, var(--hp-weave) 36px 36px/72px 72px; } /* One height for every card, sticky: 48px down a tall window, risen on a short one to keep its band in view. */ .inv[data-style="halparke"] .inv-sheet { position: sticky; top: min(48px, calc(100vh - 850px)); min-height: 826px; padding: 0; overflow: hidden; background: var(--i-surface); border-radius: 28px; box-shadow: 0 40px 80px -40px var(--i-shadow), 0 0 0 1px var(--i-line); } .inv[data-style="halparke"] .hp-hero { --hp-b: 72px; flex: 1; display: flex; flex-direction: column; align-items: center; padding: 44px 40px 0; gap: 12px; } .inv[data-style="halparke"] .hp-hero .lead { line-height: 1.85; } .inv[data-style="halparke"] .hp-hero.hp-sch { --hp-f: .92; } .inv[data-style="halparke"] .hp-hero.hp-sch .hp-names { line-height: 1.3; } .inv[data-style="halparke"] .hp-hero > :first-child, .inv[data-style="halparke"] .hp-hero .hp-stage { margin-top: auto; } .inv[data-style="halparke"] .hp-hero .hp-stage { padding-top: 18px; } .inv[data-style="halparke"] .hp-hero .hp-fz { width: 330px; } .inv[data-style="halparke"] .hp-when { padding: 24px 40px 30px; gap: 10px; } html.io .inv[data-style="halparke"].play .inv-sheet .hp-r:not(.in) { opacity: 1; transform: none; } .inv[data-style="halparke"] .inv-side { gap: 26px; padding-top: 0; } .inv[data-style="halparke"] .inv-side > .hp-band { padding: 30px 32px 32px; box-shadow: 0 30px 60px -44px var(--i-shadow); } .inv[data-style="halparke"] .inv-side > .hp-where { padding-bottom: 0; overflow: hidden; } .inv[data-style="halparke"] .inv-side > .hp-note-sec { padding: 0; background: none; box-shadow: none; } .inv[data-style="halparke"] .hp-note { width: 100%; max-width: none; background: var(--i-bg); } .inv[data-style="halparke"] .inv-side .hp-foot { margin: 0; padding-top: 10px; } body > .inv[data-style="halparke"] .hp-cover { --hp-b: 5.5rem; --hp-lw: 40rem; --hp-ph: 232px; } body > .inv[data-style="halparke"] .hp-cover::before { background: radial-gradient(64% 58% at 50% 50%, rgba(255, 255, 255, 0) 45%, var(--hp-band1) 100%); } body > .inv[data-style="halparke"] .hp-in { max-width: 56rem; } body > .inv[data-style="halparke"] .hp-kick { font-size: 1.1rem; } body > .inv[data-style="halparke"] .hp-cn em { width: 40px; height: 40px; font-size: 22px; margin: 14px 0 10px; } body > .inv[data-style="halparke"] .hp-date { font-size: 1.2rem; } body > .inv[data-style="halparke"] p.hp-time { font-size: 1.05rem; margin-top: -8px; } body > .inv[data-style="halparke"] .hp-open { padding: 15px 34px; font-size: 17px; } body > .inv[data-style="halparke"] .hp-pic { --hp-k: .84; } body > .inv[data-style="halparke"] .hp-pic .hp-far { display: grid; } body > .inv[data-style="halparke"] .hp-pic .hp-in { grid-template-columns: 1fr auto auto 1fr; align-items: center; column-gap: 32px; } body > .inv[data-style="halparke"] .hp-pic .hp-in > * { grid-column: 1 / -1; } body > .inv[data-style="halparke"] .hp-pic .hp-photo { grid-column: 2; margin: 8px 0; } body > .inv[data-style="halparke"] .hp-pic .hp-cn { grid-column: 3; max-width: 24rem; } } @media (min-width: 1024px) and (max-height: 860px) { body > .inv[data-style="halparke"] .hp-cover { --hp-k: .8; --hp-lw: 34rem; --hp-ph: 200px; --hp-g: 12px; } } @media (min-width: 1024px) and (max-height: 720px) { body > .inv[data-style="halparke"] .hp-cover { --hp-k: .64; --hp-lw: 28rem; --hp-ph: 160px; --hp-g: 10px; } } @media (min-width: 1024px) and (max-height: 620px) { body > .inv[data-style="halparke"] .hp-cover { --hp-k: .55; --hp-lw: 24rem; --hp-ph: 132px; --hp-g: 8px; } } @media (prefers-reduced-motion: reduce) { .inv[data-style="halparke"] .hp-fz, .inv[data-style="halparke"] .hp-fz use, .inv[data-style="halparke"] .hp-fz .hp-kf, .inv[data-style="halparke"] .hp-join { animation: none !important; } .inv[data-style="halparke"] .hp-r, .inv[data-style="halparke"] .hp-card { transition: none; } } /* hawsar.css */ /* Hawsar: the rings and the stone of the هاوسەر mark at poster size. Colours come from palette() and the colourway's --hw-* properties (peach, ceil, night); nothing here names a colour of its own except white over a photo. See styles/hawsar.ts for the markup. */ .inv[data-style="hawsar"] { --hw-ease: cubic-bezier(.2, .8, .2, 1); } /* ---------- the cover ---------- */ .inv[data-style="hawsar"] .hw-cover { background: var(--i-bg); } .inv[data-style="hawsar"] .hw-cover:not(.has-photo) { background: radial-gradient(120% 62% at 50% 40%, var(--hw-glow), var(--i-bg) 62%); } .inv[data-style="hawsar"] .hw-cover .cover-scroll { padding-inline: 20px; } .hw-in { gap: 16px; max-width: 26rem; transform: translateY(-4%); } .inv[data-style="hawsar"] .hw-cover .cover-kick { font-size: .95rem; color: var(--i-muted); } .hw-emb-wrap { position: relative; width: 190px; height: 147px; display: grid; place-items: center; isolation: isolate; } .hw-emb { color: var(--i-ink); overflow: visible; } .hw-emb-cover { width: 190px; height: 147px; } .hw-halo { position: absolute; left: 50%; top: 50%; z-index: -1; border-radius: 50%; transform: translate(-50%, -50%); pointer-events: none; } .hw-halo:nth-child(1) { width: 300px; height: 300px; border: 1.5px solid var(--hw-halo1); } .hw-halo:nth-child(2) { width: 470px; height: 470px; border: 1px solid var(--hw-halo2); } .hw-halo:nth-child(3) { width: 660px; height: 660px; border: 1px solid var(--hw-halo3); } .inv[data-style="hawsar"] .hw-names { font-size: 3.25rem; line-height: 1.3; color: var(--i-ink); text-wrap: balance; } .inv[data-style="hawsar"] .hw-names[data-len="m"] { font-size: 2.7rem; } .inv[data-style="hawsar"] .hw-names[data-len="l"] { font-size: 2.2rem; } .inv[data-style="hawsar"] .hw-names[data-len="xl"] { font-size: 2rem; } .inv[data-style="hawsar"] .hw-names em { font-size: .62em; margin-inline: .15em; color: var(--i-accent-ink); } .inv[data-style="hawsar"] .hw-cover .cover-date { font-size: .95rem; color: var(--i-muted); } .inv[data-style="hawsar"] .hw-open { min-height: 50px; padding: 12px 28px; font-size: 16px; box-shadow: 0 16px 30px -18px var(--i-btn); } /* With the couple's photo: their faces stay clear. The words sit low, on the darkest part of the scrim, under a smaller emblem. */ .inv[data-style="hawsar"] .hw-cover.has-photo .cover-photo::after { background: linear-gradient(180deg, rgba(10, 8, 7, .1) 25%, rgba(10, 8, 7, .52) 52%, rgba(10, 8, 7, .8) 100%); } .inv[data-style="hawsar"] .hw-cover.has-photo .hw-in > p { text-shadow: 0 1px 10px rgba(0, 0, 0, .35); } .inv[data-style="hawsar"] .hw-cover.has-photo .hw-in { margin: auto auto 0; transform: none; gap: 12px; padding-bottom: 8px; } .inv[data-style="hawsar"] .hw-cover.has-photo .hw-emb-wrap, .inv[data-style="hawsar"] .hw-cover.has-photo .hw-emb-cover { width: 96px; height: 74px; } .inv[data-style="hawsar"] .hw-cover.has-photo .hw-halo:nth-child(1) { width: 150px; height: 150px; } .inv[data-style="hawsar"] .hw-cover.has-photo .hw-halo:nth-child(2) { width: 235px; height: 235px; } .inv[data-style="hawsar"] .hw-cover.has-photo .hw-halo:nth-child(3) { width: 330px; height: 330px; } .inv[data-style="hawsar"] .hw-cover.has-photo.opening .hw-emb-cover { animation-name: hw-through-far, hw-fade; } @keyframes hw-through-far { to { transform: scale(16); } } .inv[data-style="hawsar"] .hw-cover.has-photo { color: #fff; } .inv[data-style="hawsar"] .hw-cover.has-photo .hw-emb { color: #FFF6F0; } .inv[data-style="hawsar"] .hw-cover.has-photo .hw-halo:nth-child(1) { border-color: rgba(255, 246, 240, .35); } .inv[data-style="hawsar"] .hw-cover.has-photo .hw-halo:nth-child(2) { border-color: rgba(255, 246, 240, .22); } .inv[data-style="hawsar"] .hw-cover.has-photo .hw-halo:nth-child(3) { border-color: rgba(255, 246, 240, .12); } .inv[data-style="hawsar"] .hw-cover.has-photo .hw-names { color: #fff; text-shadow: 0 2px 18px rgba(0, 0, 0, .25); } .inv[data-style="hawsar"] .hw-cover.has-photo .hw-names em { color: #FEE1D1; } .inv[data-style="hawsar"] .hw-cover.has-photo .cover-kick, .inv[data-style="hawsar"] .hw-cover.has-photo .cover-date { color: rgba(255, 255, 255, .88); } .inv[data-style="hawsar"] .hw-cover.has-photo .btn { background: #FEE1D1; color: #144474; box-shadow: 0 16px 30px -18px rgba(0, 0, 0, .6); } /* First paint: the emblem settles, the halos open, the stone catches the light. */ .hw-cover .hw-emb-cover { animation: hw-emb-in .7s var(--hw-ease) backwards; } .hw-cover .hw-halo { animation: hw-halo-in .9s var(--hw-ease) backwards; } .hw-cover .hw-halo:nth-child(2) { animation-delay: .12s; } .hw-cover .hw-halo:nth-child(3) { animation-delay: .24s; } .hw-cover .hw-glint { animation: hw-glint 7s 1.2s ease-in-out infinite; } @keyframes hw-emb-in { from { opacity: 0; transform: scale(.92); } } @keyframes hw-halo-in { from { opacity: 0; transform: translate(-50%, -50%) scale(.7); } } /* The glint starts left of the stone and ends right of it: out of the clip at both ends. */ @keyframes hw-glint { 0% { transform: translateX(0); } 10%, 100% { transform: translateX(34px); } } @keyframes hw-glint-once { from { transform: translateX(0); } to { transform: translateX(34px); } } /* The opening: through the ring. */ .hw-cover.opening .hw-in > :not(.hw-emb-wrap) { opacity: 0; transition: opacity .22s ease; } .hw-cover.opening .hw-halo { animation: hw-halo-out .5s .15s ease-in forwards; } .hw-cover.opening .hw-emb-cover { transform-origin: 75.5% 60.3%; animation: hw-through .75s .25s cubic-bezier(.55, 0, .75, .2) forwards, hw-fade .3s .7s linear forwards; } .hw-cover.opening .hw-glint { animation: hw-glint-once .6s ease-in-out forwards; } .hw-cover.opening { animation: hw-fade .25s .9s linear forwards; } @keyframes hw-halo-out { to { opacity: 0; transform: translate(-50%, -50%) scale(1.6); } } @keyframes hw-through { to { transform: scale(8); } } @keyframes hw-fade { to { opacity: 0; } } /* ---------- the page ---------- */ .hw-emb-hero { width: 74px; height: 57px; } .inv.play .hw-hero .hw-glint { animation: hw-glint-once .7s 1.1s ease-in-out both; } .inv[data-style="hawsar"] .bless { color: var(--i-ink); } .hw-rule { display: flex; align-items: center; gap: 12px; width: 100%; max-width: 22rem; margin: 0 auto; padding: 4px 24px; } .hw-rule span { flex: 1; height: 1px; background: var(--hw-hair2); } .hw-emb-rule { width: 30px; height: 23px; flex: none; } .inv[data-style="hawsar"] .card { border-color: var(--hw-hair); box-shadow: 0 24px 48px -36px var(--i-shadow); } .inv[data-style="hawsar"] .when { padding: 24px 16px; } .inv[data-style="hawsar"] .pill { background: var(--hw-pill); color: var(--hw-pill-ink); } /* The countdown as a chain of rings: each cell's ring overlaps the next. */ .inv .hw-chain { display: flex; justify-content: center; gap: 0; width: auto; } .hw-link { width: 70px; display: grid; justify-items: center; gap: 6px; transition: transform .5s cubic-bezier(.3, 1.3, .5, 1); } .hw-link + .hw-link { margin-inline-start: -11px; } .inv .hw-link strong { width: 70px; height: 70px; display: grid; place-items: center; border-radius: 50%; border: 2.5px solid var(--i-ink); font-family: var(--i-font); font-weight: 700; font-size: 25px; line-height: 1; color: var(--i-ink); } .inv .hw-link:nth-child(even) strong { border-color: var(--i-accent2); } .inv .hw-link span { font-size: 12.5px; color: var(--i-muted); } /* Revealed: the rings slide together and link. */ html.io .inv.play .hw-card:not(.in) .hw-link:nth-child(-n+2) { transform: translateX(10px); } html.io .inv.play .hw-card:not(.in) .hw-link:nth-child(n+3) { transform: translateX(-10px); } .inv[data-style="hawsar"] .note { border: 1px dashed var(--hw-hair2); } .inv[data-style="hawsar"] .rsvp input, .inv[data-style="hawsar"] .rsvp select { background: var(--hw-field); border-color: var(--hw-hair2); } .inv[data-style="hawsar"] .inv-foot { border-top-color: var(--hw-hair); } .inv[data-style="hawsar"] .foot-mark .mark { height: 24px; } .inv[data-style="hawsar"] .foot-cta { color: var(--i-ink); } /* ---------- a laptop ---------- */ @media (min-width: 1024px) { .hw-emb-wrap, .hw-emb-cover { width: 270px; height: 209px; } .hw-halo:nth-child(1) { width: 430px; height: 430px; } .hw-halo:nth-child(2) { width: 680px; height: 680px; } .hw-halo:nth-child(3) { width: 960px; height: 960px; } .hw-in { max-width: 40rem; gap: 20px; } .inv[data-style="hawsar"] .hw-names { font-size: clamp(3.4rem, 4.8vw, 4.8rem); } .inv[data-style="hawsar"] .hw-names[data-len="m"] { font-size: clamp(3rem, 4.2vw, 4.2rem); } .inv[data-style="hawsar"] .hw-names[data-len="l"] { font-size: clamp(2.6rem, 3.6vw, 3.6rem); } .inv[data-style="hawsar"] .hw-names[data-len="xl"] { font-size: clamp(2.3rem, 3vw, 3rem); } .inv[data-style="hawsar"] .hw-cover .cover-kick, .inv[data-style="hawsar"] .hw-cover .cover-date { font-size: 1.1rem; } /* The sheet is stationery: the surface, a hairline frame inside its edge. */ .inv[data-style="hawsar"] .inv-sheet { border: 1px solid var(--hw-hair); } .inv[data-style="hawsar"] .inv-sheet::before { content: ""; position: absolute; inset: 14px; pointer-events: none; border: 1px solid var(--hw-hair); border-radius: 18px; } .inv[data-style="hawsar"] .inv-side > .inv-sec { border: 1px solid var(--hw-hair); } .inv[data-style="hawsar"] .inv-sheet .card, .inv[data-style="hawsar"] .inv-side .card { border: 0; box-shadow: none; } .inv[data-style="hawsar"] .hw-cover.has-photo .hw-emb-wrap, .inv[data-style="hawsar"] .hw-cover.has-photo .hw-emb-cover { width: 120px; height: 93px; } .inv[data-style="hawsar"] .hw-cover.has-photo .hw-in { padding-bottom: 28px; } .hw-rule-where { display: none; } .inv[data-style="hawsar"] .inv-sheet .when { padding-block: 8px 4px; } } @media (prefers-reduced-motion: reduce) { .inv[data-style="hawsar"] .hw-emb-cover, .inv[data-style="hawsar"] .hw-halo, .inv[data-style="hawsar"] .hw-glint { animation: none !important; } .hw-link { transition: none; } } /* hewler.css */ /* هەولێر (Erbil): only what differs from the doors' engine (door.css). Markup and pack: styles/hewler.ts. */ /* The kicker sits on white jasmine: the deepest scrim of any line. */ .inv[data-style=hewler] .dr-kick{--dr-scrim:.74} /* The courtyard's sun is straight ahead: a wider glow under the names over it. */ .inv[data-style=hewler] .dr-awords{--dr-scrim:.58} /* Brass, not walnut, for the countdown's numerals' glow: the lanterns' light. */ .inv[data-style=hewler] .cn-cd strong{color:#F2D79C;text-shadow:0 1px 0 rgba(0,0,0,.4),0 0 14px rgba(242,196,107,.35)} /* The courtyard's arcade in the hall's frame: a pointed top, as the door's arch. */ .inv[data-style=hewler] .cn-hall{border-radius:50% 50% 6px 6px / 22% 22% 6px 6px} /* jajim.css */ /* Jajim (styles/jajim.ts). Colours are the colourway's --jj-*; motifs are currentColor masks. */ .inv[data-style="jajim"]{--jj-d:url('data:image/svg+xml,%3Csvg xmlns="http://www.w3.org/2000/svg" width="12" height="14"%3E%3Cpath d="M6 1h1v1h1v1h1v1h1v1H9v1H8v1H7v1H5V7H4V6H3V5H2V4h1V3h1V2h1V1z"/%3E%3C/svg%3E');--jj-z:url('data:image/svg+xml,%3Csvg xmlns="http://www.w3.org/2000/svg" width="12" height="12"%3E%3Cpath d="M0 9l3-3 3 3 3-3 3 3v3L9 9 6 12 3 9 0 12z"/%3E%3C/svg%3E');--jj-m:12px;text-align:start} .inv[data-style="jajim"] *{border-radius:0!important;box-shadow:none!important} .inv[data-style="jajim"] :focus-visible{outline:3px solid var(--i-ink);outline-offset:3px} .inv[data-style="jajim"] .jj-where :focus-visible,.inv[data-style="jajim"] .jj-foot :focus-visible{outline-color:var(--jj-saffron)} .inv[data-style="jajim"] .jj-warp{overflow:hidden} .inv[data-style="jajim"] .jj-rep+.jj-rep{display:none;right:auto} .inv[data-style="jajim"] .jj-s{position:absolute;top:0;bottom:0} .inv[data-style="jajim"] .jj-p{background:var(--jj-persimmon)} .inv[data-style="jajim"] .jj-k{background:var(--i-ink)} .inv[data-style="jajim"] .jj-y{background:var(--jj-saffron)} .inv[data-style="jajim"] .jj-l{background:var(--i-bg)} .inv[data-style="jajim"] .jj-t{background:var(--jj-teal)} .inv[data-style="jajim"] .jj-q{background:var(--jj-pale)} .inv[data-style="jajim"] .jj-a{background:var(--jj-aubergine)} .inv[data-style="jajim"] .jj-r{background:var(--jj-rose)} .inv[data-style="jajim"] .jj-pin{background-image:repeating-linear-gradient(90deg,var(--i-ink) 0 1px,transparent 1px 4px)} .inv[data-style="jajim"] .jj-ml,.inv[data-style="jajim"] .jj-foot .foot-mark{color:var(--i-bg)} .inv[data-style="jajim"] .jj-mk,.inv[data-style="jajim"] .rsvp label,.inv[data-style="jajim"] .jj-cover{color:var(--i-ink)} .inv[data-style="jajim"] .jj-my,.inv[data-style="jajim"] .jj-where .jj-kick{color:var(--jj-saffron)} .inv[data-style="jajim"] .jj-dia::before,.inv[data-style="jajim"] .jj-zig::before{content:"";position:absolute;inset:0;background:currentColor;-webkit-mask:var(--jj-d) 50% 0/var(--jj-m) repeat-y;mask:var(--jj-d) 50% 0/var(--jj-m) repeat-y} .inv[data-style="jajim"] .jj-zig::before{-webkit-mask-image:var(--jj-z);mask-image:var(--jj-z)} .inv[data-style="jajim"] .jj-rep,.inv[data-style="jajim"] .jj-warp-cover,.inv[data-style="jajim"] .jj-loom{position:absolute;inset:0} .inv[data-style="jajim"] .jj-loom{display:flex;flex-direction:column;overflow:hidden auto} .inv[data-style="jajim"] .jj-band{position:relative;z-index:2;flex:none;min-height:56%;margin:auto 0;display:grid;align-content:space-between;gap:16px;padding:26px max(26px,calc(50% - 300px)) 22px;background:var(--i-bg);border:solid var(--i-ink);border-width:6px 0} .inv[data-style="jajim"] .jj-kick{display:flex;align-items:center;gap:10px;margin:0;font:800 14px/1.6 var(--i-body)} .inv[data-style="jajim"] .jj-kick::before{content:"";flex:none;width:28px;height:6px;background:var(--jj-persimmon)} .inv[data-style="jajim"] .jj-band .jj-kick{font-weight:600;font-size:13.5px} /* Names: --jj-b at most, and small enough for each name's longest word (--jj-e1/2, in ems) to fit its line: n1 the width --jj-cw, n2 beside the و square (else it drops below it). */ .inv[data-style="jajim"] .jj-names{--jj-b:78px;--jj-sq:38px;--jj-cw:calc(min(100vw,34rem) - 48px);--jj-ns:min(var(--jj-b),calc(var(--jj-cw) / var(--jj-e1)),calc((var(--jj-cw) - var(--jj-sq) - 14px) / var(--jj-e2)));margin:0;display:grid;font:900 var(--jj-ns)/1.2 var(--i-font);color:var(--i-ink)} .inv[data-style="jajim"] .jj-cover-names{--jj-b:72px;--jj-sq:34px;--jj-cw:calc(min(100vw,390px) - 52px)} .inv[data-style="jajim"] .has-photo .jj-cover-names{--jj-b:56px} .inv[data-style="jajim"] .jj-and{float:right;display:grid;place-items:center;width:var(--jj-sq);height:var(--jj-sq);margin:calc(var(--jj-ns) * .6 - var(--jj-sq) / 2) 0 0 14px;background:var(--jj-saffron);color:var(--i-ink);font:800 calc(var(--jj-sq) / 2)/1 var(--i-body)} .inv[data-style="jajim"] .jj-n2{display:block;text-align:end} .inv[data-style="jajim"] .jj-meta{display:flex;flex-wrap:wrap;align-items:flex-end;justify-content:space-between;gap:12px 14px} .inv[data-style="jajim"] .jj-cdate{margin:0;display:grid;font:800 14.5px/1.6 var(--i-body);white-space:nowrap} .inv[data-style="jajim"] .jj-open{margin-inline-start:auto;padding:13px 18px;font-size:15px;white-space:nowrap} .inv[data-style="jajim"] .jj-shuttle{position:absolute;top:-4px;left:0;width:100%;height:2px;transform:translateX(100%)} .inv[data-style="jajim"] .jj-shuttle::after{content:"";position:absolute;top:0;left:0;width:40px;height:2px;background:var(--jj-saffron)} @keyframes jj-shuttle{ 0%{transform:translateX(100%);animation-timing-function:ease-in-out} 12.9%,100%{transform:translateX(-40px)} } .inv[data-style="jajim"] .jj-top{position:relative;flex:1 1 0;min-height:0} .inv[data-style="jajim"] .jj-top .cover-photo{bottom:14px} .inv[data-style="jajim"] .jj-top .cover-photo::after{content:none} .inv[data-style="jajim"] .jj-hem{position:absolute;left:0;right:0;bottom:0;height:14px;background:var(--jj-rib)} .inv[data-style="jajim"] .jj-gap{flex:none;height:14%;min-height:64px} .inv[data-style="jajim"] .has-photo .jj-band{min-height:32%;margin:0;border-top:0;gap:12px;padding-inline:max(22px,calc(50% - 300px))} .inv[data-style="jajim"] .has-photo .jj-cdate{font-size:13px} .inv[data-style="jajim"] .has-photo .jj-open{padding:12px 14px;font-size:14px} .inv[data-style="jajim"] .has-photo .jj-shuttle{top:auto;bottom:-4px} .inv[data-style="jajim"] .jj-cover.opening{background:transparent} .inv[data-style="jajim"] .lang-switch,.inv[data-style="jajim"] .bar-btn,.inv[data-style="jajim"] .rsvp input,.inv[data-style="jajim"] .rsvp select,.inv[data-style="jajim"] .jj-rsvp .btn.soft{border:2px solid var(--i-ink);background:var(--i-bg)} .inv[data-style="jajim"] .inv-sec{justify-items:stretch;gap:14px} .inv[data-style="jajim"] .jj-rib{height:14px;overflow:hidden} .inv[data-style="jajim"] .jj-rib i{display:block;height:100%;background:var(--jj-rib)} .inv[data-style="jajim"] .jj-hero{padding:28px 24px 32px} .inv[data-style="jajim"] .jj-hero-names{margin:10px 0 8px} .inv[data-style="jajim"] .jj-when{padding:30px 24px 36px} .inv[data-style="jajim"] .jj-tiles{display:grid;grid-template-columns:1fr 1fr;gap:6px} .inv[data-style="jajim"] .jj-tile{min-height:104px;padding:12px 14px;display:grid;align-content:space-between;justify-items:start;background:var(--jj-days);color:var(--jj-days-ink)} .inv[data-style="jajim"] .jj-tile strong{font:900 48px/1.1 var(--i-font)} .inv[data-style="jajim"] .jj-tile span{font:800 13.5px/1.3 var(--i-body)} .inv[data-style="jajim"] .jj-tile:nth-child(3){background:var(--jj-teal);color:var(--i-bg)} .inv[data-style="jajim"] .jj-tile:nth-child(4){background:var(--jj-rose);color:var(--i-ink)} .inv[data-style="jajim"] .jj-after{font-size:17px} .inv[data-style="jajim"] .jj-date{margin:6px 0 0;display:grid;font:900 clamp(17px,5.2vw,24px)/1.5 var(--i-font);white-space:nowrap} .inv[data-style="jajim"] .jj-tag,.inv[data-style="jajim"] .jj-open,.inv[data-style="jajim"] .jj-foot{background:var(--i-ink);color:var(--i-bg)} .inv[data-style="jajim"] .jj-tag{justify-self:start;padding:8px 14px;font:800 14.5px/1.4 var(--i-body)} .inv[data-style="jajim"] .jj-where{padding:32px 24px 36px;background:var(--jj-aubergine);color:var(--i-bg)} .inv[data-style="jajim"] .jj-hall{border:2px solid var(--i-bg);background:var(--jj-aubergine)} .inv[data-style="jajim"] .jj-where .venue{font:900 32px/1.4 var(--i-font)} .inv[data-style="jajim"] .jj-where .addr{color:var(--jj-pale)} .inv[data-style="jajim"] .jj-where .where-actions{justify-items:start} .inv[data-style="jajim"] .jj-map,.inv[data-style="jajim"] .jj-tile:nth-child(2){background:var(--jj-saffron);color:var(--i-ink)} .inv[data-style="jajim"] .jj-note{padding:30px 24px} .inv[data-style="jajim"] .jj-note .note{max-width:none;padding:16px 18px;border:2px solid var(--i-ink)} .inv[data-style="jajim"] .jj-rsvp{padding:30px 24px 40px} .inv[data-style="jajim"] .jj-rsvp .rsvp-card{padding:0;gap:14px;border:0;background:none;justify-items:stretch} .inv[data-style="jajim"] .rsvp-q{font:900 30px/1.45 var(--i-font)} .inv[data-style="jajim"] .rsvp-done,.inv[data-style="jajim"] .rsvp-note{font:900 22px/1.6 var(--i-font);color:var(--i-ink)} .inv[data-style="jajim"] .rsvp-after{justify-items:start} .inv[data-style="jajim"] .jj-foot{margin:0;padding:38px 24px 34px;justify-items:start;border:0} .inv[data-style="jajim"] .jj-foot p{color:var(--jj-foot)} .inv[data-style="jajim"] .jj-foot .foot-cta{color:var(--i-bg);text-decoration-color:var(--jj-saffron);text-decoration-thickness:3px;text-underline-offset:8px} .inv[data-style="jajim"] .jj-edge{position:relative;height:48px} .inv[data-style="jajim"] .jj-selv{display:none} /* "body >" spares a picker's scaled phone cover */ @media (min-width:400px){ body > .inv[data-style="jajim"] .jj-cover-names{--jj-cw:calc(min(100vw,652px) - 52px)} } @media (max-height:480px){ .inv[data-style="jajim"] .jj-cover .jj-cover-names{--jj-b:52px;--jj-cw:calc(min(100vw,492px) - 52px)} .inv[data-style="jajim"] .jj-band{gap:10px;padding:16px max(26px,calc(50% - 220px)) 14px} } @media (min-width:600px){ body > .inv[data-style="jajim"] .jj-warp-cover{--jj-m:clamp(12px,1.5vw,22px);--jj-st:11ms} body > .inv[data-style="jajim"] .jj-warp-cover .jj-rep{width:50%} body > .inv[data-style="jajim"] .jj-warp-cover .jj-rep+.jj-rep{display:block} } @media (min-width:600px) and (min-height:600px){ body > .inv[data-style="jajim"] .jj-band{gap:22px;padding:44px max(56px,calc(50% - 280px)) 40px} body > .inv[data-style="jajim"] .jj-band .jj-kick{font-size:16px} body > .inv[data-style="jajim"] .jj-cover .jj-cover-names{--jj-b:88px;--jj-sq:44px;--jj-cw:calc(min(100vw,672px) - 112px)} body > .inv[data-style="jajim"] .jj-cover .jj-cdate{font-size:17px} body > .inv[data-style="jajim"] .jj-cover .jj-open{min-height:56px;padding:15px 28px;font-size:17px} } @media (min-width:1024px),(min-width:600px) and (max-height:480px){ body > .inv[data-style="jajim"] .has-photo .jj-band{min-height:56%;margin:auto 0;border-top:6px solid var(--i-ink);padding-left:calc(max(56px,50% - 560px) + min(34%,460px) + 72px);padding-right:max(56px,calc(50% - 520px))} body > .inv[data-style="jajim"] .has-photo .jj-cover-names{--jj-cw:calc(min(66vw,732px) - 184px)} body > .inv[data-style="jajim"] .jj-top{position:absolute;z-index:3;top:calc(50% - min(21.25vw,287.5px,42%));left:max(56px,calc(50% - 560px));width:min(34%,460px);aspect-ratio:4/5;max-height:84%;border:8px solid var(--i-ink);background:var(--i-ink)} body > .inv[data-style="jajim"] .jj-gap{display:none} } @media (min-width:700px){ .inv[data-style="jajim"]{--jj-sv:clamp(56px,calc(50vw - 296px),240px)} .inv[data-style="jajim"] .jj-selv{display:block;position:fixed;top:0;bottom:0;right:0;width:var(--jj-sv);overflow:hidden;border-left:6px solid var(--i-ink)} .inv[data-style="jajim"] .jj-selv-l{right:auto;left:0;transform:scaleX(-1)} .inv[data-style="jajim"] .jj-selv .jj-warp{position:absolute;top:0;bottom:0;right:-26px;width:390px} } @media (min-width:1024px){ .inv[data-style="jajim"]{--jj-sv:clamp(56px,calc(50vw - 560px),240px)} .inv[data-style="jajim"] .jj-rib-x{display:none} .inv[data-style="jajim"] .inv-bar{max-width:calc(1104px + 2 * var(--jj-sv))} .inv[data-style="jajim"] .inv-bar,.inv[data-style="jajim"] .inv-page{padding-inline:calc(var(--jj-sv) + 24px)} .inv[data-style="jajim"] .inv-page{max-width:none;grid-template-rows:auto auto 1fr auto;row-gap:24px;padding-bottom:56px} .inv[data-style="jajim"] .inv-side{display:contents} .inv[data-style="jajim"] .inv-sheet{grid-column:1;grid-row:1/4;align-self:stretch;min-height:0;justify-content:flex-start;padding:14px 0 0;border:2px solid var(--i-ink);background:var(--i-bg)} .inv[data-style="jajim"] .inv-sheet::before{content:"";position:absolute;top:0;left:0;right:0;height:14px;background:var(--jj-rib)} .inv[data-style="jajim"] .jj-hero{flex:1 0 auto;align-content:center;padding:40px 40px 36px} .inv[data-style="jajim"] .jj-hero-names{--jj-b:88px;--jj-sq:44px;--jj-cw:calc(min(520px,50vw - 110px) - 80px)} .inv[data-style="jajim"] .jj-when{padding:34px 40px 40px} .inv[data-style="jajim"] .jj-date{font-size:min(24px,calc(3.15vw - 12.4px))} .inv[data-style="jajim"] .inv-side>.inv-sec{grid-column:2;padding:32px 36px 36px;border:2px solid var(--i-ink)} .inv[data-style="jajim"] .inv-side>.inv-sec:last-of-type{align-self:stretch;align-content:center} .inv[data-style="jajim"] .jj-note .note{padding:0;border:0} .inv[data-style="jajim"] .jj-end{grid-column:1/-1;grid-row:4;border:2px solid var(--i-ink)} .inv[data-style="jajim"] .jj-edge .jj-rep{width:50%} .inv[data-style="jajim"] .jj-edge .jj-rep+.jj-rep{display:block} .inv[data-style="jajim"] .jj-foot{grid-template-columns:auto 1fr auto;align-items:center;column-gap:28px;padding:30px 40px} .inv[data-style="jajim"] .jj-foot .foot-cta{justify-self:end} } /* the shed: the band pulls to a thread, the warp parts from the right, the photo lifts */ @media (prefers-reduced-motion:no-preference){ .inv[data-style="jajim"] .opening .jj-band{transform:scaleY(.02);opacity:0;transition:transform .28s ease-in,opacity .28s ease-in} .inv[data-style="jajim"] .opening .jj-s{transform:translateY(101%);transition:transform .7s cubic-bezier(.7,0,.3,1) calc(var(--n) * var(--jj-st,22ms) + 60ms)} .inv[data-style="jajim"] .opening .jj-s:nth-child(odd){transform:translateY(-101%)} .inv[data-style="jajim"] .opening .jj-top{transform:translateY(-160%);transition:transform .75s cubic-bezier(.7,0,.3,1) .06s} .inv[data-style="jajim"] .jj-cover:not(.opening) .jj-shuttle{animation:jj-shuttle 7s 1.6s infinite} html.io .inv[data-style="jajim"] .jj-cover.opening~.inv-page .jj-rib:not(.in) i{transform:translateX(100%)} .inv[data-style="jajim"] .jj-rib.in i{transition:transform .5s cubic-bezier(.2,.8,.2,1)} html.io .inv[data-style="jajim"] .jj-cover.opening~.inv-page .jj-tiles:not(.in) .jj-tile{opacity:0;transform:translateY(-24px)} .inv[data-style="jajim"] .jj-tiles.in .jj-tile{transition:opacity .35s ease-out,transform .5s cubic-bezier(.3,1.35,.5,1);transition-delay:calc(var(--i) * 60ms)} } /* khoshnus.css */ /* خۆشنووس (The Calligrapher): its own differences on the tactile kit (functions/src/invite/styles/khoshnus.ts; tactile.css, film.css). Every rule under .inv[data-style=khoshnus]. The scene: the desk and its card at depth 0, the objects lifted off it with their shadows (scenes-src/khoshnus/ layers.py); the rings' and the inkwell's shapes alone (-shine) only carry the light that glides over the gold. The opening (the kit's hold, --tc-p 0 to 1): the names write themselves in gold ink (tactile.js writer, its mask), each word in its own stretch of the hold with a breath between, as a calligrapher writes them (PACE below, which takes the kit's even share by length from it), the pen's glint at the nib and the ink settling from soft to sharp as each word is done; over the last 30% the card comes 1.12 times closer about its middle (the stage and the words together, so the words never leave the card). The hero is the same at --tc-p 1. Reduced motion and html.calm: no zoom, nothing written or settling; the hero is the cover with its names. In the pickers (data-preview) the card shows the names written, as the hero does. Bump ASSET_VERSION in functions/src/invite/render.ts when this changes. */ /* The gold ink is the board's own (orn/gold.jpg) under a deep wash (--kh-deep): the photograph alone averages a pale gold (2.8:1 on the white card, 2026-10-04); washed, about 6:1 for its average, and its grain and shine stay. */ .inv[data-style=khoshnus]{--kh-gold:url(/assets/scenes/khoshnus/orn/gold.jpg?v=32);--kh-deep:linear-gradient(rgba(56,36,8,.52),rgba(56,36,8,.52));--kh-ink:#141414;--kh-gold-ink:#8A6A2C} /* The -shine layers: the shapes the light is masked by, never seen themselves. */ .inv[data-style=khoshnus] .tc-layer[data-l$=-shine] .tc-pic>picture{opacity:0} .inv[data-style=khoshnus] .tc-sweep::before{background:linear-gradient(100deg,rgba(255,246,222,0) 22%,rgba(255,248,232,.72) 50%,rgba(255,246,222,0) 78%)} /* ---------- the card comes closer: the stage and the words, about the card's middle ---------- The frame's point (ax, ay) is the card's middle (khoshnus.ts), held at the box's own (ax, ay): scaled about it, the card stays in place. A frame-sized box is translated by (-ax, -ay), so its origin is its top-left corner; on a squarish screen the words fill the window instead (film.css), so theirs is (ax, ay). */ @media (prefers-reduced-motion:no-preference){ html:not(.calm) .inv[data-style=khoshnus] .fm-tactile{--kh-t:clamp(0,calc((var(--tc-p,0) - .7) / .3),1);--kh-z:calc(1 + .12 * var(--kh-t) * (2 - var(--kh-t)))} html:not(.calm) .inv[data-style=khoshnus] .fm-tactile .fm-stage,html:not(.calm) .inv[data-style=khoshnus] .fm-tactile .fm-words{transform-origin:0 0;scale:var(--kh-z)} } @media (prefers-reduced-motion:no-preference) and (min-aspect-ratio:5/8) and (max-aspect-ratio:1/1),(prefers-reduced-motion:no-preference) and (min-aspect-ratio:1/1) and (max-aspect-ratio:159/100){ html:not(.calm) .inv[data-style=khoshnus] .fm-tactile .fm-words:not(.fm-pinned){transform-origin:var(--fm-ax,50%) var(--fm-ay,50%)} } /* A short phone (320x568, an SE's 375x667): the card fills the screen's height, so it comes closer about its foot (the card's lower edge is 27.27% of the frame below its middle) and grows upwards, leaving the desk under it free for the hero's arrow; on the demo that arrow sits midway between the card and the bar (the card's foot is .4907 H + .2728 of the frame's height, the bar's top H - 74px). */ @media (prefers-reduced-motion:no-preference) and (min-aspect-ratio:27/50) and (max-aspect-ratio:5/8){ html:not(.calm) .inv[data-style=khoshnus] .fm-tactile .fm-stage,html:not(.calm) .inv[data-style=khoshnus] .fm-tactile .fm-words{translate:0 calc((1 - var(--kh-z,1)) * 27.27%)} } @media (min-aspect-ratio:27/50) and (max-aspect-ratio:5/8){ .inv[data-style=khoshnus][data-demo="1"] .fm-after .fm-cue{bottom:calc(25.47vh - .1364 * max(100vh, 179.17vw) + 14px + env(safe-area-inset-bottom))} @supports (height:100svh){.inv[data-style=khoshnus][data-demo="1"] .fm-after .fm-cue{bottom:calc(25.47svh - .1364 * max(100svh, 179.17vw) + 14px + env(safe-area-inset-bottom))}} } /* ---------- the words on the card: black ink, the names in gold ink ---------- */ /* Paper, not a picture: no glow or scrim behind the card's words (the instruction, on the walnut, keeps its own). */ .inv[data-style=khoshnus] .fm-kick::before,.inv[data-style=khoshnus] .fm-names::before,.inv[data-style=khoshnus] .fm-date::before,.inv[data-style=khoshnus] .fm-big::before,.inv[data-style=khoshnus] .fm-awords::before{display:none} .inv[data-style=khoshnus] .fm-kick,.inv[data-style=khoshnus] .fm-date,.inv[data-style=khoshnus] .fm-adate,.inv[data-style=khoshnus] .fm-anames,.inv[data-style=khoshnus] .fm-anames em{text-shadow:none} .inv[data-style=khoshnus] .fm-kick,.inv[data-style=khoshnus] .tc-slot[data-s=kick] .tc-in{margin:0;font-family:var(--i-body);font-weight:700;font-size:clamp(.76rem,3.6vw,1.02rem);line-height:1.6;color:var(--kh-ink);text-wrap:balance} .inv[data-style=khoshnus] .fm-adate{font-family:var(--i-body);font-weight:700;font-size:clamp(.86rem,3.9vw,1.06rem);color:var(--kh-ink);white-space:normal;text-wrap:balance} /* The names: gold ink, the board's own (orn/gold.jpg), a hairline of its darker gold under each stroke. */ .inv[data-style=khoshnus] .fm-anames{font-size:clamp(3.3rem,18.6vw,5.2rem);line-height:1.08;filter:drop-shadow(0 .6px 0 rgba(96,68,22,.42))} .inv[data-style=khoshnus] .fm-anames[data-len=l]{font-size:clamp(2.8rem,14vw,4rem)} .inv[data-style=khoshnus] .fm-anames[data-len=xl]{font-size:clamp(2.3rem,11.4vw,3.3rem)} .inv[data-style=khoshnus] .fm-anames span,.inv[data-style=khoshnus] .fm-anames em{color:var(--kh-gold-ink)} @supports ((-webkit-background-clip:text) or (background-clip:text)){ .inv[data-style=khoshnus] .fm-anames span,.inv[data-style=khoshnus] .fm-anames em{background:var(--kh-deep),var(--kh-gold) 50% 38%/9em auto;-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent} } .inv[data-style=khoshnus] .fm-anames em{margin-block:.02em .3em;font-size:.56em} /* Room for the ink: the gold is painted only inside each name's box (background-clip:text), and the writing's mask is that box too, so a Kurdish or Arabic descender (the ی of ڤیان read ڤان) and a script capital's swash past it were cut off. The box grows by its padding, never its place (its margins give the padding back; the و's and the &'s own margins, which collapse with them, are left as they are). */ .inv[data-style=khoshnus] .fm-anames>span{padding:.3em .15em;margin:-.3em -.15em} .inv[data-style=khoshnus] .fm-awords,.inv[data-style=khoshnus] .fm-big{gap:2px} /* The cover's own names and date stand aside for the hero's: written by the kit, there already in a picker. */ .inv[data-style=khoshnus] .fm-cover .fm-names,.inv[data-style=khoshnus] .fm-cover .fm-date{opacity:0} .inv[data-style=khoshnus][data-preview="1"] .fm-cover .fm-big{opacity:1} .inv[data-style=khoshnus][data-preview="1"] .fm-cover .fm-big>*{transform:none} /* The occasion's line stays on the card while it is handed over (film.css lets a cover's words go as it opens): the hero's copy of it, a slot of the scene, stands where it does. */ .inv[data-style=khoshnus] .fm-cover.opening .fm-kick{opacity:1} /* ---------- the writing ---------- PACE: each piece's own stretch of the hold's progress, smoothed (3t² - 2t³): the first name .04 to .34, the و .36 to .44, the second name .46 to .76, the date .78 to .95 (the board's 2.4 s: 0.1-0.82, 0.86-1.06, 1.1-1.82, 1.87-2.28 s). The kit writes --tc-w on each piece by its length; this one is the page's own, so it wins. The pen's glint is drawn here too, at the nib of the piece being written (the kit's, on the piece its own share says, stands aside). */ @media (prefers-reduced-motion:no-preference){ html:not(.calm) .inv[data-style=khoshnus] .fm-cover.tc-ready .fm-big{--kh-a1:clamp(0,calc((var(--tc-p,0) - .04) / .3),1);--kh-a2:clamp(0,calc((var(--tc-p,0) - .36) / .08),1);--kh-a3:clamp(0,calc((var(--tc-p,0) - .46) / .3),1);--kh-a4:clamp(0,calc((var(--tc-p,0) - .78) / .17),1)} html:not(.calm) .inv[data-style=khoshnus] .fm-cover.tc-ready .fm-big .fm-anames>:first-child{--tc-w:calc(var(--kh-a1) * var(--kh-a1) * (3 - 2 * var(--kh-a1)))!important} html:not(.calm) .inv[data-style=khoshnus] .fm-cover.tc-ready .fm-big .fm-anames>em{--tc-w:calc(var(--kh-a2) * var(--kh-a2) * (3 - 2 * var(--kh-a2)))!important} html:not(.calm) .inv[data-style=khoshnus] .fm-cover.tc-ready .fm-big .fm-anames>:last-child{--tc-w:calc(var(--kh-a3) * var(--kh-a3) * (3 - 2 * var(--kh-a3)))!important} html:not(.calm) .inv[data-style=khoshnus] .fm-cover.tc-ready .fm-big .fm-adate{--tc-w:calc(var(--kh-a4) * var(--kh-a4) * (3 - 2 * var(--kh-a4)))!important} /* The ink settles from soft to sharp as each word is done. */ html:not(.calm) .inv[data-style=khoshnus] .fm-big .tc-ink{filter:blur(calc((1 - var(--tc-w,1)) * 1.5px))} html:not(.calm) .inv[data-style=khoshnus] .fm-big .tc-ink.tc-pen::after{display:none} html:not(.calm) .inv[data-style=khoshnus] .fm-cover.tc-ready .fm-big .tc-ink::before{content:"";position:absolute;top:50%;left:calc(var(--tc-w,1) * 100%);width:.16em;height:.16em;margin:-.08em 0 0 -.08em;border-radius:50%;background:radial-gradient(closest-side,#fff,#ffe9b0 45%,rgba(255,214,130,0));box-shadow:0 0 .3em .1em rgba(255,214,140,.75);opacity:calc(min(1,var(--tc-w,1) * 25) * min(1,(1 - var(--tc-w,1)) * 25));pointer-events:none} html:not(.calm) .inv[data-style=khoshnus][dir=rtl] .fm-cover.tc-ready .fm-big .tc-ink::before{left:auto;right:calc(var(--tc-w,1) * 100%);margin:-.08em -.08em 0 0} /* On the hero, now and then a light glides over the gold of the names. */ html:not(.calm) .inv[data-style=khoshnus] .fm-after:not(.fm-under) .fm-anames span{background:linear-gradient(105deg,rgba(255,250,236,0) 42%,rgba(255,250,236,.75) 50%,rgba(255,250,236,0) 58%) -60% 0/250% 100% no-repeat,var(--kh-deep),var(--kh-gold) 50% 38%/9em auto;-webkit-background-clip:text;background-clip:text;animation:kh-glide 9s cubic-bezier(.45,0,.3,1) 2.4s infinite} html:not(.calm) .inv[data-style=khoshnus] .fm-after:not(.fm-under) .fm-anames span+em+span{animation-delay:2.75s} } @keyframes kh-glide{0%{background-position:160% 0,0 0,50% 38%}26%,100%{background-position:-60% 0,0 0,50% 38%}} /* ---------- the instruction: on the walnut, its ring in the window's cream and gold ---------- */ .inv[data-style=khoshnus] .fm-tactile[data-tc-g=hold] .fm-ring{width:34px;height:34px;border-color:rgba(255,236,196,.9)} .inv[data-style=khoshnus] .fm-tactile[data-tc-g=hold] .fm-ring::after{inset:10px;background:#E9C77E} .inv[data-style=khoshnus] .fm-tactile{--tc-ring:#E2BC6A} /* ---------- a laptop ---------- */ @media (min-aspect-ratio:1/1){ .inv[data-style=khoshnus] .fm-kick,.inv[data-style=khoshnus] .tc-slot[data-s=kick] .tc-in{font-size:clamp(.86rem,1.2vw,1.1rem)} .inv[data-style=khoshnus] .fm-adate{font-size:clamp(.9rem,1.3vw,1.16rem)} .inv[data-style=khoshnus] .fm-anames{font-size:clamp(3.4rem,6.4vw,7.2rem)} .inv[data-style=khoshnus] .fm-anames[data-len=l]{font-size:clamp(2.8rem,5vw,5.4rem)} .inv[data-style=khoshnus] .fm-anames[data-len=xl]{font-size:clamp(2.4rem,4.2vw,4.5rem)} } /* ---------- a phone held sideways ---------- A landscape window under 500 px tall: the card is the window's height, and the names at their 3.4 rem floor, with the date under them, ran under the bar that sells the design and off the window's foot, and an English pair rose into the occasion's line at the card's top (two lines in Kurdish and Arabic there). The names (the hero's, and the cover's written ones), the occasion's line and the date by the window's height, the two lines of each closer. */ @media (min-aspect-ratio:1/1) and (max-height:500px){ .inv[data-style=khoshnus] .fm-anames{font-size:clamp(1.8rem,calc(28vh - 58px),3.4rem)} .inv[data-style=khoshnus] .fm-anames[data-len=l]{font-size:clamp(1.6rem,calc(23vh - 48px),2.8rem)} .inv[data-style=khoshnus] .fm-anames[data-len=xl]{font-size:clamp(1.4rem,calc(19vh - 40px),2.4rem)} .inv[data-style=khoshnus] .fm-kick,.inv[data-style=khoshnus] .tc-slot[data-s=kick] .tc-in{font-size:clamp(.74rem,calc(3.4vh + 1px),.86rem);line-height:1.45} .inv[data-style=khoshnus] .fm-adate{font-size:clamp(.8rem,calc(3.6vh + 1px),.9rem);line-height:1.5} } /* ---------- English: the occasion's line in Marcellus capitals, as the cover's kicker; the instruction on one line ---------- */ .inv[data-style=khoshnus][lang=en] .tc-slot[data-s=kick] .tc-in{font-family:var(--i-label);font-weight:400;text-transform:uppercase;letter-spacing:.16em;font-size:clamp(.8rem,3.6vw,.98rem)} .inv[data-style=khoshnus][lang=en] .fm-kick{font-weight:400} .inv[data-style=khoshnus][lang=en] .fm-adate{font-weight:400;letter-spacing:.1em} .inv[data-style=khoshnus][lang=en] .fm-anames{line-height:1.12} .inv[data-style=khoshnus][lang=en] .fm-anames em{font-size:.62em;margin-block:0 .08em} .inv[data-style=khoshnus][lang=en] .fm-prompt .fm-open{letter-spacing:.1em;font-size:clamp(.76rem,3.3vw,.92rem)} @media (min-aspect-ratio:1/1){.inv[data-style=khoshnus][lang=en] .tc-slot[data-s=kick] .tc-in{font-size:clamp(.78rem,1.23vw,1.07rem)}} /* khwancha.css */ /* خوانچە (the Engagement Tray): only what differs from the film engine (film.css). Markup and config: styles/khwancha.ts. */ /* The warm wall glows behind the names over the open tray: a deeper scrim there. */ .inv[data-style=khwancha] .fm-awords,.inv[data-style=khwancha] .fm-big{--fm-scrim:.56} /* English (2026-10-03), a phone held sideways: the candles stand beside the names there, never under them (film.js floorOf), so nothing makes the hero's three stacked lines smaller, and their Playfair capitals pushed the date down onto the favours. Sized by the screen's height too (the copy over the film by the cover's own, as the White Dove's are), so the date stays on the wall above the tray, as the Kurdish (which the flames make smaller) does. */ @supports (top:1cqh){@media (min-aspect-ratio:1/1) and (max-height:520px){ .inv[data-style=khwancha][lang=en] .fm-after .fm-anames{font-size:min(clamp(3rem,5.6vw,6rem),9.5svh)} .inv[data-style=khwancha][lang=en] .fm-after .fm-anames:is([data-len=l],[data-len=xl]){font-size:min(clamp(2.4rem,4.2vw,4.4rem),8.5svh)} .inv[data-style=khwancha][lang=en] .fm-big .fm-anames{font-size:min(clamp(3rem,5.6vw,6rem),9.5cqh)} .inv[data-style=khwancha][lang=en] .fm-big .fm-anames:is([data-len=l],[data-len=xl]){font-size:min(clamp(2.4rem,4.2vw,4.4rem),8.5cqh)} }} } /* kotir.css */ /* کۆتری سپی (White Dove): only what differs from the film engine (film.css). Markup and config: styles/kotir.ts. */ /* A bright loggia: a cream glow at the top for the words on the ivory wall, and at the foot for the instruction on the marble, never the engine's dusk. */ .inv[data-style=kotir] .fm-shade{background:linear-gradient(rgba(255,250,242,.34),rgba(255,250,242,0) 24%,rgba(255,250,242,0) 78%,rgba(255,250,242,.4))} /* The names over the sunset sky, in the dark tone (plum-brown, the و in wine rose): a soft cream glow under them, never a box, so the first line holds 4.5:1 on the rose and the date on the peach. On a phone too narrow for the date on one line between the cypresses (320 px) it breaks in two, balanced, never across them. */ .inv[data-style=kotir] .fm-awords,.inv[data-style=kotir] .fm-big{--fm-scrim:.42} .inv[data-style=kotir] .fm-adate{position:relative;z-index:0;max-width:84%;white-space:normal;text-wrap:balance} /* And the date a cream glow of its own, for where a short phone lays its second line on the olive trees' haze. */ .inv[data-style=kotir] .fm-adate::before{content:"";position:absolute;z-index:-1;inset:-30% -8%;background:radial-gradient(closest-side,rgba(255,249,240,.6),rgba(255,249,240,0));pointer-events:none} /* A short phone (an SE, 320x568 or 375x667) has less sky under the bar than a tall one: the names are sized by its height too, so they and the date stay in the sky, never on the olive trees and the cypresses below it. The hero by the window's small height, the names over the film by the cover's own (its container), so they hand over at the same size; only where the browser has both, so the two never differ. */ @supports (top:1cqh){@media not all and (min-aspect-ratio:1/1){ .inv[data-style=kotir] .fm-after .fm-anames{font-size:clamp(2.4rem,min(15.6vw,7.4svh),4.6rem)} .inv[data-style=kotir] .fm-after .fm-anames[data-len=l]{font-size:clamp(2.1rem,min(12vw,5.8svh),3.6rem)} .inv[data-style=kotir] .fm-after .fm-anames[data-len=xl]{font-size:clamp(1.9rem,min(10vw,4.9svh),3rem)} .inv[data-style=kotir] .fm-big .fm-anames{font-size:clamp(2.4rem,min(15.6vw,7.4cqh),4.6rem)} .inv[data-style=kotir] .fm-big .fm-anames[data-len=l]{font-size:clamp(2.1rem,min(12vw,5.8cqh),3.6rem)} .inv[data-style=kotir] .fm-big .fm-anames[data-len=xl]{font-size:clamp(1.9rem,min(10vw,4.9cqh),3rem)} }} /* The hero's foot is the bright paving: the cue to read on keeps its own dark disc, and no dusk is laid on the petals. */ .inv[data-style=kotir] .fm-light{background:linear-gradient(rgba(60,30,36,0) 80%,rgba(60,30,36,.22))} /* English (2026-10-03): Great Vibes sets its words close, a capital's swash reaching back over the space before it ("TheVenue", "ShareYour Photos", "Vian&Hemin"): a little more room between words wherever it writes more than one, as Once Upon a Time's titles have (efsane.css). The no-break space that ties the "&" to the second name is a word space too. */ .inv[data-style=kotir][lang=en] :is(.sk-kick,.rsvp-q,.fm-names,.cn-names){word-spacing:.25em} /* A phone held sideways (English): the instruction beside the dove's ring stands where the Kurdish one does, after the ring over the garden, not across the left pillar's roses and the curtain (film.css puts an English one before its ring); and in the label face's bold with a stronger cream glow, which Cormorant's fine capitals need there. At most 9em wide, so it breaks as "OPEN YOUR" / "INVITATION" in the garden between the ring and the right-hand pillar's roses, never running across them. */ @supports (top:1cqh){@media (min-aspect-ratio:1/1) and (max-height:500px){ .inv[data-style=kotir][dir=ltr] .fm-cover[data-beacon] .fm-prompt .fm-act{left:calc(var(--fm-cx) + var(--fm-gap));max-width:min(calc(100cqw - var(--fm-cx) - var(--fm-gap) - 12px),9em);transform:translate(0,-50%)} .inv[data-style=kotir][lang=en] .fm-cover[data-beacon] .fm-prompt .fm-open{font-weight:700;text-shadow:0 0 2px rgba(255,250,240,.95),0 0 10px rgba(255,246,232,.95),0 0 22px rgba(255,246,232,.8)} }} /* magazine.css */ /* Cover Story (styles/magazine.ts). The cover is em-sized, so the laptop's magazine scales it with one font-size. Colours: --i-*, --mg-*; fixed only over a photo and on paper edges. mg- rules go unscoped, as hawsar.css's hw-. */ .inv[data-style=magazine]{--mg-e:cubic-bezier(.16,1,.3,1);--mg-hair:rgba(20,18,17,.15)} /* ---------- the cover ---------- */ .mg-cover{background:none} .mg-mag,.mg-leaf,.mg-photo{position:absolute;inset:0} .mg-leaf{overflow:hidden;background:var(--mg-cv);color:var(--mg-cv-ink);transform-origin:100% 50%;-webkit-backface-visibility:hidden;backface-visibility:hidden} .has-photo .mg-leaf{background:#1c1917;color:#fff} .mg-photo{background-size:cover;filter:var(--mg-photo-filter)} .mg-in{position:absolute;inset:0;z-index:1;display:flex;flex-direction:column;overflow-x:hidden;overflow-y:auto;overscroll-behavior:contain;padding:calc(env(safe-area-inset-top) + .875em) 1em calc(env(safe-area-inset-bottom) + 1.75em)} .has-photo .mg-in{text-shadow:0 1px 2px rgba(0,0,0,.45)} .mg-in p,.mg-sec p{margin:0} .mg-top,.mg-lines{position:relative;flex:none} /* The masthead: sized by its letters (--mg-n), fitted by magazine.js; two lines are «n1 و», «n2». */ .mg-mast{text-align:center;text-wrap:balance;font:400 clamp(2.4em,calc(60em / var(--mg-n)),6.5em)/1.3 var(--i-font);animation:mg-rise .6s var(--mg-e) backwards} .mg-cover:not(.mg-kufi) .mg-mast{margin-bottom:-.1em} .mg-two{font-size:clamp(2.4em,calc(58em / var(--mg-n)),4.4em)} .mg-two .mg-ln>span{display:table;margin:0 auto} .mg-one .mg-ln,.mg-m .mg-ln>span{white-space:nowrap} .mg-mast em{font-style:normal;font-size:.8em} /* Kufi hangs its ڕ below a 1.3 line: the line opens up. */ .mg-kufi .mg-mast{padding-bottom:.12em;font-size:clamp(2.4em,calc(34em / var(--mg-n)),4.6em);line-height:1.75} .mg-kufi .mg-two{font-size:clamp(2.1em,calc(33em / var(--mg-n)),3.2em)} /* The strap: the issue line and the publisher's mark. */ .mg-dl{display:flex;align-items:center;justify-content:space-between;gap:.75em;margin:.25em -1.282em 0;padding:.5em 1.282em;background:var(--mg-strap);color:var(--mg-strap-ink);text-shadow:none;font-size:.78em;font-weight:600;line-height:1.5;animation:mg-rise .6s .1s var(--mg-e) backwards} .mg-dl .mark{flex:none;width:auto;height:1.05em} .has-photo .mg-dl{background:rgba(12,10,9,.86);color:#fff} /* Over a photo: one long eased shade from each edge. */ .has-photo .mg-top::before,.has-photo .mg-lines::before{content:"";position:absolute;z-index:-1;left:-1em;right:-1em;pointer-events:none} .has-photo .mg-top::before{top:calc(-.875em - env(safe-area-inset-top));bottom:-12em;background:linear-gradient(rgba(0,0,0,.64),rgba(0,0,0,.45) calc(100% - 14em),rgba(0,0,0,.36) calc(100% - 12em),rgba(0,0,0,.22) calc(100% - 9em),rgba(0,0,0,.1) calc(100% - 6em),rgba(0,0,0,.03) calc(100% - 3em),transparent)} .has-photo .mg-lines::before{left:-1.125em;right:-1.125em;top:-8em;bottom:calc(-1.75em - env(safe-area-inset-bottom));background:linear-gradient(0deg,rgba(0,0,0,.8),rgba(0,0,0,.5) calc(100% - 8em),rgba(0,0,0,.31) calc(100% - 6em),rgba(0,0,0,.15) calc(100% - 3.8em),rgba(0,0,0,.05) calc(100% - 1.6em),transparent)} /* The special edition: the day, as large as the room left. */ .mg-ed{flex:1 1 0;min-height:0;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;padding:1em 0 .5em} .mg-ed>*{flex:none;animation:mg-settle .5s .15s var(--mg-e) backwards} .mg-num{position:relative;flex:1 1 0;min-height:0;width:100%;max-height:18em} .mg-num svg{position:absolute;inset:0;width:100%;height:100%;overflow:visible} .mg-num text{font:400 100px var(--i-font);fill:var(--mg-num)} .mg-kufi .mg-num text{font-weight:800} .mg-ed span{margin-top:.1em;font:400 2.6em/1.3 var(--i-font)} .mg-kufi .mg-ed span{font-size:1.9em;line-height:1.75} .mg-lines{display:grid;gap:.25em;justify-items:start;text-align:start;padding-inline:.125em} .mg-lines>*{animation:mg-rise .6s calc(.4s + var(--mg-i,0) * 80ms) var(--mg-e) backwards} .mg-l1{font:400 2.3em/1.35 var(--i-font)} .mg-kufi .mg-l1{font-size:1.6em;line-height:1.75} .mg-l2{display:flex;align-items:center;gap:.5em;font-size:1.25em;font-weight:700;line-height:1.5} .mg-l2::before{content:"";flex:none;width:1.1em;height:.25em;background:var(--i-accent)} .mg-in .mg-l3{margin-bottom:.75em;font-size:.88em;color:var(--mg-cv-muted)} .has-photo .mg-l3{color:rgba(255,255,255,.9)} .mg-go{--mg-i:3;display:inline-flex;align-items:center;gap:.625em;min-height:3em;padding:.75em 1.125em;border-radius:2px;background:var(--mg-go);color:var(--mg-go-ink);font-weight:700;line-height:1.3;text-decoration:none;text-shadow:none} .has-photo .mg-go{background:#fff;color:#141211;outline-color:#fff} .mg-arr{flex:none;width:1.125em;height:1.125em;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round} @keyframes mg-rise{from{opacity:0;transform:translateY(12px)}} @keyframes mg-settle{from{opacity:0;transform:scale(.96)}} /* The opening: the leaf turns on its spine, its free edge lifting. */ .mg-leaf::after{content:"";position:absolute;inset:0;z-index:3;pointer-events:none;background:linear-gradient(to left,rgba(0,0,0,.35),transparent 60%);opacity:0} .mg-cover.opening .mg-leaf{will-change:transform;animation:mg-turn .9s cubic-bezier(.65,0,.35,1) forwards} .mg-cover.opening .mg-leaf::after{animation:mg-shade .9s cubic-bezier(.65,0,.35,1) forwards} html.no3d .mg-cover.opening .mg-leaf{animation:mg-slide .9s cubic-bezier(.76,0,.24,1) forwards} @keyframes mg-turn{from{transform:perspective(1800px) rotateY(0)}to{transform:perspective(1800px) rotateY(180deg)}} @keyframes mg-shade{50%{opacity:1}} @keyframes mg-slide{to{transform:translateY(-100%)}} @keyframes mg-fade{to{opacity:0}} /* ---------- the page: a feature, its sections numbered ---------- */ .inv[data-style=magazine] :is(.lang-switch,.bar-btn){border-radius:2px;border:1px solid var(--i-ink);background:rgba(255,255,255,.92)} .inv[data-style=magazine] .lang-switch a{border-radius:1px} .mg-sec{display:grid;gap:16px;justify-items:stretch;text-align:start;padding:18px 20px 30px} .mg-hd{display:flex;align-items:center;gap:12px;margin-bottom:-4px} .mg-no{font:400 3.2rem/1.3 var(--i-font);color:var(--i-accent-ink)} .mg-kick{font-size:.8rem;font-weight:700;line-height:1.5} .mg-hair{flex:1;height:1px;background:var(--mg-hair)} .mg-bism{font-size:1.1rem} .mg-lead{font-size:1.2rem;line-height:1.9} .mg-head{--mg-k:1;margin:0;display:grid;justify-items:start;font:400 clamp(3.2rem,17vw,calc(5rem * var(--mg-k)))/1.3 var(--i-font)} .mg-head[data-len=m]{font-size:clamp(2.7rem,12.5vw,calc(4.2rem * var(--mg-k)))} .mg-head[data-len=l]{font-size:clamp(2.3rem,10.5vw,calc(3.4rem * var(--mg-k)))} .mg-head[data-len=xl]{font-size:clamp(2rem,8.6vw,calc(2.8rem * var(--mg-k)))} .mg-and{display:flex;align-items:center;gap:.4em;width:100%;font-size:max(.45em,1.45rem);line-height:1.3;color:var(--i-accent-ink)} .mg-and em{font-style:normal} .mg-and::after{content:"";flex:1;height:1px;background:var(--i-accent)} .mg-pq{margin:6px 0 0;padding:14px 0 16px;border:solid var(--i-ink);border-width:3px 0 1px} .mg-pq p{font:400 1.7rem/1.6 var(--i-font);text-wrap:balance} .mg-pq p::before,.mg-pq p::after{content:"«";margin-inline-end:.12em;font-size:1.42em;line-height:0;vertical-align:-.1em;color:var(--i-accent-ink)} .mg-pq p::after{content:"»";margin:0 .12em 0 0} .mg-cd{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));border-top:1.5px solid var(--i-ink);border-bottom:1px solid var(--mg-hair)} .mg-cell{display:grid;gap:2px;padding:12px 12px 10px;border-inline-start:1px solid var(--mg-hair)} .mg-cell:first-child{border:0;padding-inline-start:0} .mg-cell strong{font-size:2.4rem;font-weight:700;line-height:1.15;font-variant-numeric:tabular-nums} .mg-cell span,.mg-bism,.mg-addr{color:var(--i-muted)} .mg-cell span{font-size:.78rem} .mg-date,.mg-after{font:400 1.6rem/1.55 var(--i-font);text-wrap:balance} .mg-nw{white-space:nowrap} .mg-after{font-size:1.9rem} .mg-sec .mg-time{display:flex;align-items:center;gap:10px;margin-top:-6px;font-size:1.05rem;font-weight:700} .mg-time::before{content:"";flex:none;width:6px;height:6px;background:var(--i-accent)} .mg-hall{display:block;width:calc(100% + 40px);max-width:none;margin:0 -20px;aspect-ratio:4/3;object-fit:cover;border:0;border-radius:0;background:var(--i-surface)} .mg-venue,.inv[data-style=magazine] .rsvp-q{margin:0;font:400 1.9rem/1.4 var(--i-font)} .mg-sec .mg-addr{margin-top:-12px} .mg-map{display:flex;align-items:center;justify-content:center;gap:10px;min-height:52px;padding:12px 18px;border-radius:2px;background:var(--i-btn);color:var(--i-btn-ink);font-weight:700;text-decoration:none} .mg-map svg{width:19px;height:19px;fill:none;stroke:currentColor;stroke-width:1.8} .mg-note{padding:16px 18px 18px;background:var(--i-surface);border-top:4px solid var(--i-accent);white-space:pre-line;line-height:1.9} /* Kufi: every line that can wrap opens up. */ .mg-kufi .mg-head{--mg-k:.9;line-height:1.7} .mg-kufi .mg-and{margin-top:.2em} .inv[data-style=magazine] .mg-kufi :is(.mg-pq p,.mg-date,.mg-after,.mg-venue,.rsvp-q,.rsvp-done,.rsvp-note){line-height:1.75} .mg-coupon{position:relative;padding:26px 20px 20px;background:var(--i-surface);border:1.5px dashed var(--i-ink)} .mg-sc{position:absolute;top:-10px;right:22px;width:18px;height:18px;padding:0 3px;box-sizing:content-box;background:var(--i-bg);fill:none;stroke:var(--i-ink);stroke-width:1.6} .mg-cpn{display:grid;gap:12px} .inv[data-style=magazine] :is(.rsvp input,.rsvp select){min-height:48px;padding:8px 2px;border:0;border-bottom:1.5px solid var(--i-ink);border-radius:0;background:transparent} .inv[data-style=magazine] .rsvp-actions .btn{min-height:50px;border-radius:2px;box-shadow:none} .inv[data-style=magazine] .rsvp-actions .soft{background:var(--i-surface);border:1.5px solid var(--i-ink)} .inv[data-style=magazine] :is(.rsvp-done,.rsvp-note){font:400 1.6rem/1.55 var(--i-font);color:var(--i-ink)} .inv[data-style=magazine] .rsvp-after{justify-items:start} .inv[data-style=magazine] .mg-cpn .rsvp-change{padding-inline:0} .mg-foot{justify-items:start;text-align:start;margin:10px 20px 0;padding:16px 0 40px;border-top:3px solid var(--i-ink)} .mg-foot .foot-cta{color:var(--i-ink);text-wrap:balance} /* Openers slide in when first seen, the guillemets after. */ @media (prefers-reduced-motion:no-preference){ html.io .mg-cover.opening~.inv-page .mg-hd:not(.in)>*{opacity:0;transform:translateX(-16px)} html.io .mg-cover.opening~.inv-page .mg-pq:not(.in) p::before,html.io .mg-cover.opening~.inv-page .mg-pq:not(.in) p::after{opacity:0} .mg-hd.in>*{transition:opacity .5s var(--mg-e),transform .5s var(--mg-e)} .mg-pq.in p::before,.mg-pq.in p::after{transition:opacity .4s .3s} } /* A phone held sideways. */ @media (max-height:480px){.mg-cover .mg-ed>*{display:none}} /* ---------- a laptop: a magazine on a linen table ---------- */ @media (min-width:1024px){ .inv[data-style=magazine]{--mg-ev:repeating-linear-gradient(90deg,#F4EFE7 0 1px,#D6CCBE 1px 2px);--mg-eh:repeating-linear-gradient(0deg,#F4EFE7 0 1px,#D6CCBE 1px 2px)} .inv[data-style=magazine] .inv-page{column-gap:48px;padding-top:20px} /* The feature's opening page; the details beside it as clippings. */ .inv[data-style=magazine] .inv-sheet{justify-content:flex-start;min-height:680px;padding:40px 44px 44px;border:solid transparent;border-width:0 0 6px 6px;border-radius:0;background:linear-gradient(to left,rgba(20,18,17,.09),transparent 20px) padding-box,linear-gradient(var(--i-bg),var(--i-bg)) padding-box,var(--mg-ev) 0 5px/6px 100% no-repeat border-box,var(--mg-eh) 0 100%/calc(100% - 5px) 6px no-repeat border-box;box-shadow:-20px 40px 80px -30px rgba(0,0,0,.8)} .mg-hero{flex:1;display:flex;flex-direction:column;gap:18px;padding:0} .mg-hero .mg-pq{margin-top:auto} .mg-head{--mg-k:1.2} .inv[data-style=magazine] .inv-side{gap:28px;padding-top:0} .inv[data-style=magazine] .inv-side>.mg-sec{padding:22px 30px 30px;border-radius:0;background:var(--i-surface);box-shadow:0 30px 60px -34px rgba(0,0,0,.85)} .inv[data-style=magazine] .inv-side>.mg-side{padding:0;background:none} .inv-side .mg-hall{width:calc(100% + 60px);margin-inline:-30px} .inv-side .mg-sc{background:var(--i-surface)} .inv[data-style=magazine] :is(.mg-foot,.mg-foot .foot-mark,.mg-foot .foot-cta){margin:0;border-color:var(--mg-on-table);color:var(--mg-on-table)} .mg-foot p{color:var(--mg-on-table-muted)} .mg-foot :focus-visible{outline-color:currentColor} /* The magazine on the table (the pickers show a phone). */ body>[data-style=magazine] .mg-cover{display:flex;align-items:center;justify-content:center} body>[data-style=magazine] .mg-cover::before{content:"";position:absolute;inset:0;background:var(--i-backdrop)} body>[data-style=magazine] .mg-mag{position:relative;inset:auto;flex:none;width:var(--mg-w,480px);height:calc(var(--mg-w,480px) * 1.4145);font-size:calc(var(--mg-w,480px) / 27.5)} body>[data-style=magazine] .mg-mag::before{content:"";position:absolute;top:5px;right:5px;bottom:-6px;left:-6px;background:var(--mg-ev) 0 0/7px 100% no-repeat,var(--mg-eh) 0 100%/100% 7px no-repeat,#E4DCD0;box-shadow:-30px 50px 90px -30px rgba(0,0,0,.85),0 20px 40px -20px rgba(0,0,0,.6)} body>[data-style=magazine] .mg-in{background:linear-gradient(to left,rgba(0,0,0,.22),rgba(255,255,255,.1) 2px,rgba(0,0,0,.05) 7px,transparent 14px)} body>[data-style=magazine] .mg-cover.opening::before,body>[data-style=magazine] .mg-cover.opening .mg-mag::before{animation:mg-fade .3s .1s ease forwards} } /* The opening page stays in view where the window can hold it. */ @media (min-width:1024px) and (min-height:780px){.inv[data-style=magazine] .inv-sheet{position:sticky;top:64px}} @media (min-width:1024px) and (min-height:860px){body>[data-style=magazine] .mg-mag{--mg-w:540px}} @media (min-width:1024px) and (min-height:1000px){body>[data-style=magazine] .mg-mag{--mg-w:620px}} @media (min-width:1024px) and (max-height:759px){body>[data-style=magazine] .mg-mag{--mg-w:400px}} @media (prefers-reduced-motion:reduce){.mg-cover *{animation:none!important}} /* marble.css */ /* Marble: Calacatta, gold inlay, gilt, brass. Colours are the colourway's --mb-* vars; the layers, clearings and timings are explained in functions/src/invite/styles/marble.ts. */ .inv[data-style=marble]{ --mb-veins:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='400' height='860' viewBox='0 0 2000 4300' preserveAspectRatio='none' fill='none' stroke='%238E887F' stroke-linecap='round' stroke-linejoin='round'%3E%3Cstyle%3E*{vector-effect:non-scaling-stroke}%3C/style%3E%3Cdefs%3E%3Cpath id='a' d='M2149 303l-48 34-50 33-45 26-46 38-39 27-45 30-40 30-40 26-41 31-39 26-39 29-34 25-40 32-37 25-35 26-38 33-33 26-37 36-38 29-36 30-36 36-38 31-35 39-41 40-39 33-41 46-39 40-44 44-43 44-42 54-47 48-41 51-44 44-41 49-41 44-39 48-42 43-39 38-35 45-41 37-36 45-34 35-38 42-36 35-35 36-32 36-36 38-35 31-34 34-36 33-32 34-32 32-37 29-32 26-33 34-35 28-37 27-32 28-32 21-38 29'/%3E%3Cpath id='d' d='M2150 2799l-47 25-41 16-47 26-46 21-43 24-43 23-49 29-41 22-46 29-47 27-41 26-47 26-42 32-47 28-40 26-44 30-46 29-42 30-43 26-45 31-40 27-41 31-46 29-41 29-42 27-41 26-40 29-43 28-41 21-38 25-42 25-39 29-36 18-40 26-40 16-36 19-40 25-35 12-35 19-37 20-38 15-34 15-34 16-35 12-36 8-35 13-29 17-33 7-31 11-34 7-31 9-28 13-29 10-29 4-31 7-27 4-28 8-25 5-27 10-27 0'/%3E%3C/defs%3E%3Cg stroke='%239D978E' opacity='.1'%3E%3Cuse href='%23a' stroke-width='10'/%3E%3Cuse href='%23d' stroke-width='8'/%3E%3C/g%3E%3Cuse href='%23a' stroke-width='1.6' opacity='.75'/%3E%3Cpath d='M952 1303l3 6 1 14 2 12 1 17 0 10-1 9-1 11 1 17-1 9 2 17-3 8 1 11-1 9-2 13-3 11-1 15-4 7 0 11-5 12-2 12-5 12-6 10-2 11-8 14-2 10-4 10-8 9-2 14-11 8-3 9-7 16-7 11-9 11-6 6-4 10-11 15-8 6-9 12-7 11-5 9-13 13-7 4-9 16-10 7-8 14-8 8-15 6-9 17-9 9-10 9-13 10-11 6-8 13-14 13-9 7-16 9-8 14-12 6-11 8-13 11' stroke-width='.8' opacity='.6'/%3E%3Cpath d='M1500 703l5 8 6 11 5 6 4 10 7 11 8 7 2 12 8 8 8 5 7 13 5 6 7 6 7 10 7 10 6 8 13 7 3 7 12 4 8 9 6 5 11 8 5 8 11 7 12 5 9 5 9 9 10 4 8 7 14 9 7 3 10 4 14 10 12 4 12 1 10 9 10 2 14 10 9 1 13 4 12 4 14 9 12 0 17 5 11 5 16 1 13 8 14-1 13 10 17-2 14 4 17 7 11 0 17 8 16-2 17 1 18 7 15 5 17-2 17 1 20 9' stroke-width='.7' opacity='.5'/%3E%3Cuse href='%23d' stroke-width='1.3' opacity='.7'/%3E%3Cpath d='M1251 3353l-10-21-13-21-12-19-14-16-16-16-15-14-14-14-19-10-20-13-18-8-17-14-23-8-19-5-25-9-24-7-21-6-27-6-25-8-25-3-29-1-29 2-28-7-31 0-29 7-29-1-32-2-37 8-33 0-32 6-34 5-38 3-32 5-31 4-31 1-34 9-25-1-31 4-29 2-25 7-29 0-23 6-29 3-25 6-23 4-23 2-18 3-22 7-23 1-18 5-22 3-21 5-16 10-19 0-18 7-18 7-16 12-17 7-12 7-18 12-17 8' stroke-width='.7' opacity='.5'/%3E%3Cpath d='M2151 1699l-18 5-18 4-16 7-16 7-21 9-13 0-21 10-17 6-13 5-18 9-16 5-19 12-18 9-15 3-14 11-19 5-14 9-19 9-12 10-19 7-16 8-15 14-14 9-18 5-13 8-18 11-15 11-14 11-17 13-10 7-17 8-17 13-15 10-10 7-17 11-15 13-17 11-11 5-16 17-13 8-13 8-15 15-13 9-17 11-10 8-16 14-13 7-13 10-12 11-16 12-14 12-13 12-12 5-13 14-14 7-11 11-16 13-13 10-13 12-11 10' stroke='%23A39D94' stroke-width='.6' opacity='.45'/%3E%3C/svg%3E"); --mb-sz:100% auto; --mb-stone:var(--mb-vein) 50% 0/var(--mb-sz) repeat-y,var(--mb-veins) 50% 0/var(--mb-sz) repeat-y,var(--mb-cloud,none) 50% 0/var(--mb-sz) repeat-y,var(--i-bg); --mb-clear:radial-gradient(closest-side,rgba(245,242,236,.94),rgba(245,242,236,.8) 55%,rgba(245,242,236,0)); --mb-hush:radial-gradient(closest-side,rgba(245,242,236,.95) 40%,rgba(245,242,236,.85) 70%,rgba(245,242,236,0)); --mb-card:0 1px 2px rgba(44,40,36,.1),0 22px 34px -22px rgba(44,40,36,.35),0 60px 90px -50px rgba(44,40,36,.5); --mb-ease:cubic-bezier(.65,0,.35,1); background:var(--mb-stone)} .mb-cover{background:var(--mb-stone)} .mb-cover::after{content:"";position:absolute;inset:0;pointer-events:none;background:radial-gradient(130% 90% at 50% 45%,rgba(44,40,36,0) 50%,rgba(44,40,36,.08))} .mb-fr{position:relative;background:var(--mb-clear)} .mb-fr::before,.mb-fr::after{content:"";position:absolute;inset:0;pointer-events:none} .mb-fr::before{border:20px solid transparent;border-image:var(--mb-frame) 20/20px stretch} @supports (-webkit-mask-box-image:none){.mb-fr::after{background:var(--mb-metal);-webkit-mask-box-image:var(--mb-frame) 20 stretch}} .mb-brass{--mb-screw:rgba(44,40,36,.5) 1.3px,rgba(255,255,255,.55) 1.9px,rgba(255,255,255,0) 2.6px;background:radial-gradient(circle at 10px 50%,var(--mb-screw)),radial-gradient(circle at calc(100% - 10px) 50%,var(--mb-screw)),var(--mb-plate);clip-path:polygon(10px 0,calc(100% - 10px) 0,100% 10px,100% calc(100% - 10px),calc(100% - 10px) 100%,10px 100%,0 calc(100% - 10px),0 10px);color:var(--i-ink);text-shadow:0 1px 0 rgba(255,255,255,.45);box-shadow:inset 0 1px 0 rgba(255,255,255,.5),inset 0 -1px 0 rgba(44,40,36,.25)} /* Words */ .mb-k,.mb-g{position:relative;display:inline-block;margin:-.4em -.3em} .mb-k>*{display:block;margin:0} .mb-t,.mb-g,.mb-l>span{padding:.4em .3em} .mb-t,.mb-t em{color:transparent;text-shadow:0 1px 0 rgba(255,255,255,.95)} .mb-g,.mb-l>span{-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent} .mb-g,.mb-gild>span{background-image:var(--mb-gilt-d)} .mb-ini .mb-g,.mb-stack[data-len=s] .mb-g{background-image:var(--mb-gilt)} .mb-g{filter:drop-shadow(0 1px 0 rgba(255,255,255,.85))} .mb-g i,.mb-cut em,.mb-gild em{-webkit-text-fill-color:var(--i-accent-ink)} .mb-cut>span{background-image:var(--mb-carve)} .mb-sh>span{background-image:var(--mb-shine)} .mb-l{position:absolute;top:0;bottom:0;overflow:hidden;-webkit-mask-image:var(--mb-f);mask-image:var(--mb-f)} .mb-l>span{position:absolute;top:0} .mb-cut,.mb-gild{width:128%;transform:translateX(100%)} .mb-cut>span,.mb-gild>span{width:78.125%;transform:translateX(-128%)} .mb-cut,.mb-sh{right:100%} .mb-cut>span,.mb-sh>span{left:100%} .mb-cut{--mb-f:linear-gradient(to right,#000 78.125%,transparent)} .mb-gild{right:0;--mb-f:linear-gradient(to left,#000 78.125%,transparent)} .mb-gild>span{right:0} .mb-sh{width:50%;transform:translateX(300%);--mb-f:linear-gradient(100deg,transparent 18%,#000 50%,transparent 82%)} .mb-sh>span{width:200%;transform:translateX(-150%)} .mb-medal{--mb-m:132px;position:relative;width:var(--mb-m);height:var(--mb-m);color:var(--mb-inlay)} .mb-rings{position:absolute;inset:0;width:100%;height:100%} .mb-ini{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;padding-bottom:4%;font:700 calc(var(--mb-m) * var(--mb-ik,.3))/1 var(--i-font)} .mb-ini[data-w=m]{--mb-ik:.25} .mb-ini[data-w=l]{--mb-ik:.215} .mb-ini[data-w=xl]{--mb-ik:.185} .mb-ini i{font:600 .5em var(--i-body)} .mb-ph{position:absolute;inset:9.5%;border-radius:50%;background:var(--i-surface) 50% 40%/cover no-repeat;box-shadow:inset 0 0 0 1px rgba(44,40,36,.18)} /* The cover */ .mb-cover .cover-scroll{padding-inline:20px} .mb-in{gap:22px;padding:88px 34px 84px;max-width:24rem;animation:mb-in .9s .1s ease backwards} .mb-in .cover-kick,.mb-in .cover-date{font-size:.95rem;text-wrap:balance;max-width:18rem} .mb-d,.mb-n{white-space:nowrap} .mb-has-ph .mb-medal{--mb-m:176px} .mb-line,.mb-stack{--mb-k:1} .inv[data-style=marble] [data-len=m]{--mb-k:.84} .inv[data-style=marble] [data-len=l]{--mb-k:.72} .mb-stack[data-len=xl]{--mb-k:.63} .mb-line[data-len=xl]{--mb-k:.8} .mb-line{font-size:calc(var(--mb-k) * clamp(2.6rem,12vw,3.3rem));text-wrap:balance} .mb-line em{font-size:.55em;margin-inline:.15em} .mb-fr>p,.mb-nm,.mb-note .note{position:relative;z-index:0} .mb-fr>p::before,.mb-nm::before,.mb-note .note::before{content:"";position:absolute;z-index:-1;inset:-.2em -1.2em;background:var(--mb-hush)} .mb-btn,.mb-reply .btn{border-radius:2px} .mb-btn,.mb-reply .btn:not(.soft){padding-inline:30px;box-shadow:inset 0 0 0 1px var(--mb-inlay),inset 0 0 0 4px var(--i-btn),inset 0 0 0 5px var(--mb-key),0 12px 24px -16px rgba(44,40,36,.7)} .mb-reply .btn.soft{border-color:var(--mb-inlay);background:rgba(245,242,236,.85)} .inv[data-style=marble] .lang-switch,.inv[data-style=marble] .bar-btn{background:var(--i-glass);border-color:var(--mb-edge)} /* The opening */ .mb-cover.opening .mb-l,.mb-cover.opening .mb-l>span{will-change:transform;animation:mb-flow .9s .15s var(--mb-ease) forwards} .mb-cover.opening .mb-sh,.mb-cover.opening .mb-sh>span{animation:mb-flow .55s 1.1s ease-in-out forwards} .mb-cover.opening .mb-ini .mb-sh,.mb-cover.opening .mb-ini .mb-sh>span{animation-delay:0s} .mb-cover.opening .cover-scroll{animation:mb-out .26s 1.75s ease-in forwards} .mb-cover.opening{animation:mb-out .45s 2s ease-out forwards} @keyframes mb-flow{to{transform:none}} @keyframes mb-out{to{opacity:0}} @keyframes mb-in{from{opacity:0}} @keyframes mb-up{from{transform:translateY(10px)}} /* The page. */ .inv .mb-hero{margin:6px 16px 0;padding:60px 38px 54px} .mb-hero .mb-medal{--mb-m:84px} .mb-hero .lead,.mb-note .note{color:#4E4842} .mb-stack{justify-items:center;font-size:calc(var(--mb-k) * clamp(3rem,15vw,4.2rem));line-height:1.3} .mb-stack em{display:flex;align-items:center;gap:.6em;font-size:.46em;line-height:1.2;margin:.15em 0 .35em} .mb-stack em::before,.mb-stack em::after{content:"";width:2.2em;height:1px;background:var(--mb-inlay);opacity:.8} .mb-when{padding:26px 16px 22px} .mb-strip{width:100%;display:grid;gap:12px;justify-items:center;padding:20px 6px 22px;background:var(--mb-clear);border-block:1px solid var(--mb-inlay);box-shadow:inset 0 4px 0 -3px var(--i-bg),inset 0 5px 0 -3px var(--mb-key),inset 0 -4px 0 -3px var(--i-bg),inset 0 -5px 0 -3px var(--mb-key)} .mb-cd{gap:0} .mb-cell+.mb-cell{border-inline-start:1px solid var(--mb-rule)} .mb-cell strong{font:700 2.2rem/1.2 var(--i-font)} .mb-strip .when-date{font-size:1.05rem} .mb-time{margin:0;font-weight:700;color:var(--i-accent-ink)} .mb-where{gap:14px} .mb-hall{border:11px solid transparent;border-image:var(--mb-mould) 12/11px stretch;border-radius:0;padding:4px;background:var(--mb-mat);box-shadow:inset 0 0 0 1px rgba(44,40,36,.3),0 16px 28px -16px rgba(0,0,0,.6)} .mb-where .venue{font-size:1.3rem;line-height:1.5;padding:6px 28px} .mb-where .addr{background:var(--mb-clear);padding-inline:1em} .mb-note{overflow:hidden} .mb-note .note{border:0;border-block:1px solid var(--mb-inlay);border-radius:0;padding:12px 6px} .mb-note .note::before{inset:-1em -3.6em} .mb-rsvp{padding-inline:16px} .mb-reply{width:100%;display:grid;gap:10px;justify-items:center;padding:50px 34px 30px} .mb-reply .rsvp-card{padding:0;border:0;background:none;box-shadow:none} .mb-reply .rsvp-q{font-size:1.8rem} .mb-reply .rsvp{width:auto;justify-self:stretch;margin:-1.2em -1.6em;padding:1.2em 1.6em;background:var(--mb-hush)} .mb-reply input,.mb-reply select{background:rgba(255,255,255,.85);border:0;border-bottom:1.5px solid var(--mb-inlay);border-radius:0} .inv .mb-foot{margin:8px 24px 0;padding:22px 0 44px;border:0;gap:14px} .mb-maker{display:grid;gap:2px;justify-items:center;padding:10px 30px 9px} .mb-maker .foot-mark{opacity:1} .mb-maker .mark{height:20px} .mb-maker p{font-size:.82rem;font-weight:600;color:var(--i-ink)} .mb-foot .foot-cta{color:var(--i-accent-ink)} .inv[data-style=marble].play .rv{animation:none} .inv[data-style=marble].play .inv-sheet{animation:mb-up .9s cubic-bezier(.2,.8,.3,1) backwards} .inv[data-style=marble] [data-io].in{transition:opacity .9s ease} html.io .inv[data-style=marble].play [data-io]:not(.in){opacity:0} @media (max-width:359px){.mb-line[data-len=l]{--mb-k:.8}} @media (max-height:760px){.mb-in{gap:18px;padding-block:64px 60px}} @media (max-height:640px){.mb-cover .mb-medal{--mb-m:96px}.mb-in{gap:12px;padding-block:40px 38px}} @media (max-height:480px){.mb-cover .mb-medal{display:none}.mb-cover.mb-has-ph .mb-medal{display:block;--mb-m:84px}} /* A laptop. body>.inv: not the pickers' cover boxes. */ @media (min-width:1024px){ body>.inv[data-style=marble]{--mb-sz:100% 1800px} body>.inv .mb-in{max-width:35rem;gap:26px;padding:96px 64px 88px} body>.inv .mb-cover .mb-medal{--mb-m:190px} body>.inv .mb-has-ph .mb-medal{--mb-m:250px} body>.inv .mb-line{font-size:calc(var(--mb-k) * clamp(3.4rem,5.4vw,5.4rem))} body>.inv .mb-in .cover-kick,body>.inv .mb-in .cover-date{font-size:1.2rem;max-width:26rem} body>.inv .mb-gild>span,.mb-stack:not([data-len=xl]) .mb-g{background-image:var(--mb-gilt)} .inv[data-style=marble] .inv-sheet,.mb-reply{--mb-clear:none;--mb-hush:none;border:2px solid transparent;border-radius:2px;box-shadow:var(--mb-card);background:linear-gradient(var(--i-surface),var(--i-surface)) padding-box,var(--mb-plate) border-box} .inv[data-style=marble] .inv-sheet{padding:32px 40px 42px} .inv[data-style=marble] .inv-sheet::before,.inv[data-style=marble] .inv-sheet::after{content:"";position:absolute;inset:14px;pointer-events:none} .inv[data-style=marble] .inv-sheet::before{border:20px solid transparent;border-image:var(--mb-frame) 20/20px stretch} .inv .mb-hero{margin:0;padding:22px 30px 6px;gap:10px} .mb-hero::before,.mb-hero::after{content:none} .mb-hero .lead{max-width:36ch;line-height:1.8} .mb-stack{line-height:1.2} .mb-when{padding:12px 30px 4px} .inv[data-style=marble] .inv-side>.inv-sec{background:none;box-shadow:none;padding:20px 28px} .inv[data-style=marble] .inv-side>.mb-rsvp{padding:0} .mb-reply{padding:58px 48px 46px} .mb-reply::before,.mb-reply::after{inset:12px} .mb-reply input,.mb-reply select{background:rgba(245,242,236,.75)} .mb-hall{border-width:13px;border-image-width:13px} } @supports (-webkit-mask-box-image:none){@media (min-width:1024px){.inv[data-style=marble] .inv-sheet::after{background:var(--mb-metal);-webkit-mask-box-image:var(--mb-frame) 20 stretch}}} @media (min-width:1024px) and (min-height:860px){.inv[data-style=marble] .inv-sheet{position:sticky;top:48px}} @media (min-width:1024px) and (max-height:820px){body>.inv .mb-in{gap:20px;padding-block:64px 60px}body>.inv .mb-cover .mb-medal{--mb-m:160px}body>.inv .mb-has-ph .mb-medal{--mb-m:208px}} /* High contrast: plain text in the system's colours, no layers. */ @media (forced-colors:active){.mb-g,.mb-l>span{-webkit-text-fill-color:currentColor}.mb-l{display:none}} @media (prefers-reduced-motion:reduce){ .mb-in,.inv[data-style=marble].play .inv-sheet{animation:none} .mb-cover.opening .mb-gild,.mb-cover.opening .mb-gild>span{transform:none} .mb-cover.opening .mb-cut{opacity:0} .inv[data-style=marble] [data-io].in{transition:none} } /* mor.css */ /* مۆری شیلان (Wild Rose Seal): only what differs from the film engine (film.css). Markup and config: styles/mor.ts; its page: skins/wax.css. */ /* Ivory paper everywhere: a cream glow at the top for the words and at the foot for the instruction, never the engine's dusk, which greys the paper. */ .inv[data-style=mor] .fm-shade{background:linear-gradient(rgba(255,251,244,.3),rgba(255,251,244,0) 30%,rgba(255,251,244,0) 76%,rgba(255,251,244,.42))} .inv[data-style=mor] .fm-light{background:linear-gradient(rgba(70,52,40,0) 82%,rgba(70,52,40,.16))} /* The seal gives a little under the finger before the paper tears: the ring round it dips 2 px and tightens. */ .inv[data-style=mor] .fm-cover:not(.opening):active .fm-beacon{transform:translate(-50%,calc(-50% + 2px)) scale(.97);transition:transform .08s ease-out} /* Under the rising page the hero dims toward a warm kraft, never the engine's near-black: on this cream paper that turned to a flat grey slab above the torn edge. */ .inv[data-style=mor] .fm-after .fm-dim{background:#86704F} /* On a laptop the engine also fades the hero out as the page rises (fm-lean-l, or film.js's inline opacity where scroll-driven animations are missing), which let the page's dark green ground through the cream paper: a grey-green wash, then a flat olive band above the torn edge. Here the hero stays whole and dims to the kraft, as on a phone. */ @media (min-width:1024px){.inv[data-style=mor] .fm-after .fm-scene{opacity:1!important}} /* The names over the hero sit on bright paper, in the warm ink: a soft cream glow under them, never a box. */ .inv[data-style=mor] .fm-awords,.inv[data-style=mor] .fm-big{--fm-scrim:.36} /* On a phone the paper above the torn window is short (a quarter of the frame): the names run on one line, as on the cover, and a long pair breaks once, at the و, so the date under them keeps its size rather than the whole block being made smaller to fit above the window (film.js keep(), data-floor-p). */ @media not all and (min-aspect-ratio:1/1){ .inv[data-style=mor] .fm-anames{text-wrap:balance} /* The petals start under the words, over the torn window, never across the date on the short paper band as it is read (film.js fall(), --fm-under). */ .inv[data-style=mor] .fm-after .fm-fall{--fm-under:1} /* Each name and the و are inline-blocks, never plain inline: the three are written with no space between them, and inline pieces are shaped as one word, so a first name's last letter took the و's join (ڤیان read «ڤیاز», ئاراس lost its tail). The names paint above the و's cream glow, which would pale a final ن's bowl under it. */ .inv[data-style=mor] .fm-anames span,.inv[data-style=mor] .fm-anames em{display:inline-block} .inv[data-style=mor] .fm-anames span{position:relative;z-index:1} .inv[data-style=mor] .fm-anames em{margin-inline:.34em;margin-block:0} .inv[data-style=mor] .fm-anames[data-len=l] span:first-child,.inv[data-style=mor] .fm-anames[data-len=xl] span:first-child{display:block} .inv[data-style=mor] .fm-anames[data-len=l] em,.inv[data-style=mor] .fm-anames[data-len=xl] em{margin-inline:0 .34em} } /* On a laptop the names stand stacked on the paper left of the torn window (mor.ts names: [16.5, 47, 22]); the date under them breaks between its words rather than running into the window. */ @media (min-aspect-ratio:1/1){ .inv[data-style=mor] .fm-awords,.inv[data-style=mor] .fm-big{gap:10px} .inv[data-style=mor] .fm-anames{font-size:clamp(3rem,5.4vw,5.6rem);line-height:1.08} .inv[data-style=mor] .fm-anames em{margin:.08em 0 .34em} .inv[data-style=mor] .fm-anames[data-len=l],.inv[data-style=mor] .fm-anames[data-len=xl]{font-size:clamp(2.3rem,3.6vw,3.8rem)} .inv[data-style=mor] .fm-adate{max-width:100%;white-space:normal;text-wrap:balance;line-height:1.7} } /* An iPad on its side (4:3 to 3:2) shows less of the paper beside the window: the names a step smaller. */ @media (min-aspect-ratio:1/1) and (max-aspect-ratio:3/2){ .inv[data-style=mor] .fm-anames{font-size:clamp(2.6rem,4.6vw,4.4rem)} .inv[data-style=mor] .fm-anames[data-len=l],.inv[data-style=mor] .fm-anames[data-len=xl]{font-size:clamp(2rem,3.2vw,3rem)} } /* English (2026-10-03): the pieces carry real spaces, so the "&" needs no margin of its own on a phone. The pair stays on one line while it fits (film.js makes it smaller to fit, fm-one), and past that, or when long (l, xl), it stands as "Vian" / "& Hemin" (fm-wrap), never broken after the "&". */ @media not all and (min-aspect-ratio:1/1){ .inv[data-style=mor][lang=en] .fm-anames em{margin-inline:.04em} .inv[data-style=mor][lang=en] .fm-anames:not([data-len=l]):not([data-len=xl]):not(.fm-wrap){white-space:nowrap} .inv[data-style=mor][lang=en] .fm-anames.fm-wrap span:first-child{display:block} .inv[data-style=mor][lang=en] .fm-anames:is([data-len=l],[data-len=xl],.fm-wrap) em{margin-inline:0 .04em} } /* nakhsh.css */ /* نەخش (Lace): its scene on the tactile kit (functions/src/invite/styles/nakhsh.ts; tactile.css, film.css). Every rule under .inv[data-style=nakhsh]. The engine moves each .tc-layer (its depth); this sheet draws what is in it: the linen its light (the layer's picture) under its weave, one tile laid over it in overlay; the card on the linen with its shadow; warm in the lace's shade while the panels lie on it; the standing panels' shade along its edges once they are open; the panels one picture, the right one mirrored, each turning on its outer edge in 3D under a perspective held at the scene's middle (moved a little by the pointer, so the open panels shift as solid things would); the lace casts a fine shadow through its holes while it lies flat; the band with the initials on its tag: it slips down and away first; the light a window's light drifting slowly over the linen and the card, under the words; the names on the card, in gold foil, under the panels until they open (names: "under"), a light passing over them. The rules at rest are the closed card (the cover, and every picker); the hero's own rules are the open one. On a live cover (.tc-ready) the opening is scrubbed from the gesture's progress --tc-p: a paused 1 s animation whose delay is -p s, so a finger that stops holds it, and one that springs back takes it back. Reduced motion and html.calm never scrub: a tap fades the closed cover onto the open hero (invite.js). Bump ASSET_VERSION in functions/src/invite/render.ts when this changes. */ /* The scene's height (its frame is as tall as the window, or taller where the window is wider than the frame): the panels' perspective, the band's fall and the initials are a share of it, so they look the same on every screen and in a picker's small cover: the cover's words layer is a size container (film.css), so where container units are known they are its own; elsewhere the window's. */ .inv[data-style=nakhsh]{--nk-h:max(100vh,179.2vw)} @media (min-aspect-ratio:1/1){.inv[data-style=nakhsh]{--nk-h:max(100vh,55.81vw)}} @supports (top:1cqh){ .inv[data-style=nakhsh]{--nk-h:max(100cqh,179.2cqw)} @media (min-aspect-ratio:1/1){.inv[data-style=nakhsh]{--nk-h:max(100cqh,55.81cqw)}} } /* Opening, the eye draws back a little where the window is narrower than the frame (a tall phone crops its sides), so the open panels stand in view either side of the card (--nk-z: the card, its panels and its words, about the scene's middle; the linen stays, it has no edge to show). */ .inv[data-style=nakhsh]{--nk-z:1} @media (max-aspect-ratio:54/100){.inv[data-style=nakhsh]{--nk-z:.96}} @media (max-aspect-ratio:51/100){.inv[data-style=nakhsh]{--nk-z:.91}} @media (max-aspect-ratio:475/1000){.inv[data-style=nakhsh]{--nk-z:.86}} /* Each about the scene's middle, in its own box (the box is placed by its centre, film.css: the origin is the middle's offset from that centre). The words' frame is placed by its top-left at the middle. */ .inv[data-style=nakhsh] .tc-layer[data-l=card],.inv[data-style=nakhsh] .tc-layer[data-l=shade]{transform-origin:0 .33%} .inv[data-style=nakhsh] .tc-layer[data-l=panel-l]{transform-origin:50.34% .53%} .inv[data-style=nakhsh] .tc-layer[data-l=panel-r]{transform-origin:-49.66% .53%} .inv[data-style=nakhsh] .tc-layer[data-l=band]{transform-origin:-.08% -.78%} .inv[data-style=nakhsh] .fm-words{transform-origin:0 0} .inv[data-style=nakhsh] .fm-after .tc-layer[data-l=card],.inv[data-style=nakhsh] .fm-after .tc-layer[data-l=panel-l],.inv[data-style=nakhsh] .fm-after .tc-layer[data-l=panel-r],.inv[data-style=nakhsh] .fm-after .fm-words{scale:var(--nk-z)} /* ---------- the linen: its light, and its weave over it ---------- */ /* One tile pixel to one screen pixel (--nk-weave, skins/nakhsh.css): resampled, a 4 px weave shimmers and seams. */ .inv[data-style=nakhsh] .tc-layer[data-l=ground] .tc-pic::after{content:"";position:absolute;top:0;left:0;right:0;bottom:0;background:url(/assets/scenes/nakhsh/linen.webp?v=32) 0 0/var(--nk-weave,86px) var(--nk-weave,86px) repeat;mix-blend-mode:overlay;pointer-events:none} /* ---------- the gypsophila: its shadow on the linen; it stirs about its stem ---------- */ .inv[data-style=nakhsh] .tc-layer[data-l=sprig] img{filter:drop-shadow(2px 4px 3px rgba(74,54,32,.26))} .inv[data-style=nakhsh] .tc-layer[data-l=sprig2] img{transform:rotate(180deg);filter:drop-shadow(-2px -4px 3px rgba(74,54,32,.24))} .inv[data-style=nakhsh] .tc-layer[data-l=sprig] .tc-pic{transform-origin:4% 97%} .inv[data-style=nakhsh] .tc-layer[data-l=sprig2] .tc-pic{transform-origin:96% 3%} /* ---------- the card: lying on the linen ---------- */ .inv[data-style=nakhsh] .tc-layer[data-l=card] .tc-pic{box-shadow:1px 1px 0 rgba(70,52,32,.38),2px 3px 4px rgba(70,52,32,.2),8px 12px 22px -4px rgba(70,52,32,.24)} /* The open panels' shade along its edges: wide on the left (the window is up there, the left panel stands in its way), a line on the right. None while the card is closed. */ .inv[data-style=nakhsh] .tc-layer[data-l=card] .tc-pic::before,.inv[data-style=nakhsh] .tc-layer[data-l=card] .tc-pic::after{content:"";position:absolute;top:0;bottom:0;display:block;opacity:0;pointer-events:none} .inv[data-style=nakhsh] .tc-layer[data-l=card] .tc-pic::before{left:0;width:16%;background:linear-gradient(90deg,rgba(84,62,36,.2),rgba(84,62,36,.07) 45%,rgba(84,62,36,0))} .inv[data-style=nakhsh] .tc-layer[data-l=card] .tc-pic::after{right:0;width:6%;background:linear-gradient(270deg,rgba(84,62,36,.14),rgba(84,62,36,0))} .inv[data-style=nakhsh] .fm-after .tc-layer[data-l=card] .tc-pic::before,.inv[data-style=nakhsh] .fm-after .tc-layer[data-l=card] .tc-pic::after{opacity:1} /* The lace's shade on it while closed: warmer, deeper through the holes. */ .inv[data-style=nakhsh] .tc-layer[data-l=shade] .tc-pic{background:linear-gradient(180deg,rgb(242,219,183),rgb(247,229,198) 50%,rgb(243,222,188));mix-blend-mode:multiply} /* ---------- the panels ---------- */ .inv[data-style=nakhsh] .tc-layer[data-l=panel-l],.inv[data-style=nakhsh] .tc-layer[data-l=panel-r]{perspective:calc(var(--nk-h) * 1.42)} /* The eye above the scene's middle (100.3% / 0.3% across each panel's box, 50.5% down), moved by the pointer. */ .inv[data-style=nakhsh] .tc-layer[data-l=panel-l]{perspective-origin:calc(100.34% + var(--tc-mx,0) * 38%) calc(50.53% + var(--tc-my,0) * 22%)} .inv[data-style=nakhsh] .tc-layer[data-l=panel-r]{perspective-origin:calc(.34% + var(--tc-mx,0) * 38%) calc(50.53% + var(--tc-my,0) * 22%)} /* Each turns on its outer edge; the right one is the left one mirrored inside its own box. */ .inv[data-style=nakhsh] .tc-layer[data-l=panel-l] .tc-pic{transform-origin:0 50%} .inv[data-style=nakhsh] .tc-layer[data-l=panel-r] .tc-pic{transform-origin:100% 50%;transform:translateX(-100%) scaleX(-1)} /* Lying flat, the lace throws a fine shadow on the card through every hole (the window is up and to the left). */ .inv[data-style=nakhsh] .fm-cover .tc-layer[data-l=panel-l] img,.inv[data-style=nakhsh] .fm-cover .tc-layer[data-l=panel-r] img{filter:drop-shadow(1px 2px 1.2px rgba(84,60,30,.34))} /* Open (the hero): standing just past upright either side of the card, turned out of the light. */ .inv[data-style=nakhsh] .fm-after .tc-layer[data-l=panel-l] .tc-pic{transform:rotateY(-100deg)} .inv[data-style=nakhsh] .fm-after .tc-layer[data-l=panel-r] .tc-pic{transform:rotateY(100deg) translateX(-100%) scaleX(-1)} /* The shade on a turning panel, in its lace's own shape (the kit's sweep is masked by the panel's picture). */ .inv[data-style=nakhsh] .tc-layer[data-l=panel-l] .tc-sweep,.inv[data-style=nakhsh] .tc-layer[data-l=panel-r] .tc-sweep{mix-blend-mode:normal;background:linear-gradient(90deg,rgb(96,72,44),rgb(70,50,28));opacity:0} .inv[data-style=nakhsh] .tc-layer[data-l=panel-l] .tc-sweep::before,.inv[data-style=nakhsh] .tc-layer[data-l=panel-r] .tc-sweep::before{display:none} .inv[data-style=nakhsh] .fm-after .tc-layer[data-l=panel-l] .tc-sweep,.inv[data-style=nakhsh] .fm-after .tc-layer[data-l=panel-r] .tc-sweep{opacity:.1} /* ---------- the band and the initials on its tag ---------- */ .inv[data-style=nakhsh] .tc-layer[data-l=band] img{filter:drop-shadow(0 3px 3px rgba(80,56,26,.28))} .inv[data-style=nakhsh] .tc-slot[data-s=tag]{display:flex;align-items:center;justify-content:center;font-family:var(--i-font);font-weight:700;font-size:calc(var(--nk-h) * .031);line-height:1;color:#6e501d;text-shadow:0 1px 0 rgba(255,244,210,.8),0 -1px 0 rgba(90,60,20,.38)} .inv[data-style=nakhsh] .tc-slot[data-s=tag] .tc-in{display:flex;align-items:center;justify-content:center;gap:.28em;white-space:nowrap} .inv[data-style=nakhsh] .tc-slot[data-s=tag] em{font-style:normal;font-size:.7em;color:#8a6a2c} .inv[data-style=nakhsh][lang=en] .tc-slot[data-s=tag]{font-family:var(--i-label);font-weight:400;font-size:calc(var(--nk-h) * .027);letter-spacing:.06em} .inv[data-style=nakhsh][lang=en] .tc-slot[data-s=tag] em{font-family:var(--i-and);font-size:.86em} /* ---------- the words ---------- */ /* Gold foil: the names on the card (the hero's, and the cover's under the panels), and the cover's above it. */ /* The gradient repeats either side of its light (0 to 41.7% is 58.3 to 100%), so a pass that ends where it began shows no jump. The part a box shows at rest (58.3 to 100%) is a deep antique gold, #5f420f to #7f5d22, and only the narrow light passing over it is pale: a paler foil (#7b591b to #ae863e) read 1.7:1 on the linen and 2.6:1 on the card (2026-10-04); this one is 4.5:1 or more on both. */ .inv[data-style=nakhsh] .fm-anames span,.inv[data-style=nakhsh] .fm-anames em,.inv[data-style=nakhsh] .fm-cover .fm-names{background:linear-gradient(100deg,#5f420f 0%,#7f5d22 20.8%,#5f420f 41.7%,#c2a160 47%,#ecd9a4 50%,#c2a160 53%,#5f420f 58.3%,#7f5d22 79.2%,#5f420f 100%) 100% 0/240% 100% no-repeat;-webkit-background-clip:text;background-clip:text;color:transparent;-webkit-text-fill-color:transparent;text-shadow:none} /* The cover's names stand on the linen in the middle of a wide box, where the foil's lighter part falls: a deeper foil for them (and their و), as the card's own reads in its smaller box. */ .inv[data-style=nakhsh] .fm-cover .fm-names{background-image:linear-gradient(100deg,#4a3209 0%,#684a16 20.8%,#4a3209 41.7%,#b8955a 47%,#e4cf98 50%,#b8955a 53%,#4a3209 58.3%,#684a16 79.2%,#4a3209 100%)} /* No cream glow behind them: a gold that is the element's own background is painted before its glow (film.css's ::before, z-index -1 inside it), so the glow lay over the letters as a white veil (red came out #ff3a38). */ .inv[data-style=nakhsh] .fm-cover .fm-names::before{content:none} .inv[data-style=nakhsh] .fm-cover .fm-names em{background:linear-gradient(100deg,#563c10,#765622 45%,#563c10) 0 0/100% 100%;-webkit-background-clip:text;background-clip:text;color:transparent;-webkit-text-fill-color:transparent;text-shadow:none} /* Room for the foil: a letter is painted only inside its own box (background-clip:text), and a Kurdish or Arabic name's descender (the ی of ڤیان), the top of its ێ and a script capital's swash reached past it and were cut off. Each box grows by its padding, never its place: the hero's pieces give it back in margin, and the cover's line stays centred on its spot (film.js, measuring it, may stand the kicker and the date a little further off). */ .inv[data-style=nakhsh] .fm-anames>span{padding:.3em .15em;margin:-.3em -.15em} .inv[data-style=nakhsh] .fm-cover .fm-names{padding-block:.3em} .inv[data-style=nakhsh] .fm-anames,.inv[data-style=nakhsh] .fm-cover .fm-names{filter:drop-shadow(0 1px 0 rgba(255,251,240,.85)) drop-shadow(0 1px 1px rgba(92,64,24,.22))} .inv[data-style=nakhsh] .fm-anames em{background-size:100% 100%} .inv[data-style=nakhsh] .fm-adate,.inv[data-style=nakhsh] .fm-cover .fm-kick,.inv[data-style=nakhsh] .fm-cover .fm-date{color:#5e4a2e} /* English: Forum has one weight (a bold was drawn as a smear), and its thin Roman capitals ask for a deeper ink and a step more size than the Kurdish words beside them; the instruction in the same ink. */ .inv[data-style=nakhsh][lang=en] .fm-adate,.inv[data-style=nakhsh][lang=en] .fm-kick,.inv[data-style=nakhsh][lang=en] .fm-date{font-weight:400;color:#47361f} .inv[data-style=nakhsh][lang=en] .fm-cover .fm-kick{font-size:clamp(.86rem,3.9vw,1.04rem)} .inv[data-style=nakhsh][lang=en] .fm-adate{font-size:clamp(.84rem,3.8vw,1.02rem)} .inv[data-style=nakhsh][lang=en] .fm-prompt .fm-open{font-weight:400;color:#47361f;text-shadow:0 0 8px rgba(255,251,240,.9)} @media (min-aspect-ratio:1/1){ .inv[data-style=nakhsh][lang=en] .fm-cover .fm-kick{font-size:clamp(.86rem,1.36vw,1.16rem)} .inv[data-style=nakhsh][lang=en] .fm-adate{font-size:clamp(.9rem,1.42vw,1.2rem)} } /* On the card, the board's star rule between the names and the day. */ .inv[data-style=nakhsh] .fm-adate::before{content:"";display:block;width:min(13em,100%);height:1.5em;margin:0 auto .5em;background:url(/assets/scenes/nakhsh/orn/rule.webp?v=32) 50% 50%/contain no-repeat} /* Where the window has no room under the card for the date and the instruction both, the date waits for the card, where it is printed under the names: a short phone (an old iPhone SE), and a window that crops the frame's top and foot (an iPad upright, a very wide screen), where the instruction is pinned to the window's foot. */ @media (max-aspect-ratio:1/1) and (max-height:600px),(max-aspect-ratio:1/1) and (min-aspect-ratio:62/100),(min-aspect-ratio:2/1){.inv[data-style=nakhsh] .fm-cover .fm-date{visibility:hidden}} /* A phone held sideways (a landscape window under 500 px tall): the card fills three quarters of its height, so the names above it went behind the panels and the date under it off the window's foot. The linen either side of the card (38% to 62% of the frame across) takes the words instead: the kicker, the names and the date down the side a line starts from (the right in Kurdish and Arabic, the left in English), the instruction on the other side. The names may wrap there (tactile.css keeps one line only on a phone upright). */ @media (min-aspect-ratio:1/1) and (max-height:500px){ .inv[data-style=nakhsh] .fm-cover .fm-kick,.inv[data-style=nakhsh] .fm-cover .fm-names,.inv[data-style=nakhsh] .fm-cover .fm-date{left:81%;width:30%} .inv[data-style=nakhsh][dir=ltr] .fm-cover .fm-kick,.inv[data-style=nakhsh][dir=ltr] .fm-cover .fm-names,.inv[data-style=nakhsh][dir=ltr] .fm-cover .fm-date{left:19%} .inv[data-style=nakhsh] .fm-cover .fm-kick{top:29%} .inv[data-style=nakhsh] .fm-cover .fm-names{top:42%} .inv[data-style=nakhsh] .fm-cover .fm-date{top:56%;visibility:visible} /* The card's own date (the hero's, and the cover's under the panels) breaks in two inside the narrow card rather than run past its edge, as the Arabic one did. */ .inv[data-style=nakhsh] .fm-adate{white-space:normal;text-wrap:balance} /* The card's words (the hero's, and the cover's under the panels, so the two meet in place) by the window's height: at the names' 3 rem floor the date ran under the bar that sells the design and off a 320 px window's foot. */ .inv[data-style=nakhsh] .fm-anames{font-size:clamp(1.75rem,calc(20vh - 30px),3rem)} .inv[data-style=nakhsh] .fm-anames[data-len=l],.inv[data-style=nakhsh] .fm-anames[data-len=xl]{font-size:clamp(1.5rem,calc(16vh - 24px),2.4rem)} .inv[data-style=nakhsh] .fm-adate,.inv[data-style=nakhsh][lang=en] .fm-adate{font-size:clamp(.8rem,calc(4.4vh - 1px),1rem)} .inv[data-style=nakhsh] .fm-adate::before{height:1.2em;margin-bottom:.35em} } @supports (top:1cqh){@media (min-aspect-ratio:1/1) and (max-height:500px){ .inv[data-style=nakhsh] .fm-cover .fm-prompt .fm-act{left:19%;top:50%;width:30%} .inv[data-style=nakhsh][dir=ltr] .fm-cover .fm-prompt .fm-act{left:81%} }} /* A short phone upright (320x568) on a demo: the cue to read on, above the bar, sat on the card's lower frame. It stands on the card under the date instead, its foot 7 px above the frame's line (77.7% down the frame, which is max(100svh, 179.2vw) tall and held 30% of the way down). */ @media (max-aspect-ratio:1/1) and (max-height:600px){ .inv[data-style=nakhsh][data-demo="1"] .fm-after .fm-cue{bottom:max(96px,calc(70vh - .477 * max(100vh, 179.2vw) + 7px))} @supports (height:100svh){.inv[data-style=nakhsh][data-demo="1"] .fm-after .fm-cue{bottom:max(96px,calc(70svh - .477 * max(100svh, 179.2vw) + 7px))}} } /* So does a preview's: a picker's card is a squarish box, whatever the window. */ .inv[data-style=nakhsh][data-preview="1"] .fm-cover .fm-date{visibility:hidden} /* The card is bright: no cream glow behind the names on it, only over the linen. */ .inv[data-style=nakhsh] .fm-big::before,.inv[data-style=nakhsh] .fm-awords::before{opacity:.5} /* The cover's names step back while the panels lie on them (and in every picker); the kit shows them at once. */ .inv[data-style=nakhsh] .fm-tactile.fm-cover[data-tc-names] .fm-big{opacity:0} /* ---------- the window's light, drifting ---------- */ /* A soft white band over the linen and the card, under the words (nakhsh.ts: in front of them, it washed every word to 2:1). It is drawn as it always looked: a soft-light on its picture blended with nothing (a layer the kit moves is a group of its own), so the band was a plain wash, and it stays one. */ .inv[data-style=nakhsh] .tc-layer[data-l=light] .tc-pic{background:linear-gradient(122deg,rgba(255,248,232,0) 8%,rgba(255,248,232,.5) 19%,rgba(255,248,232,0) 31%,rgba(255,248,232,0) 38%,rgba(255,248,232,.34) 47%,rgba(255,248,232,0) 58%);opacity:.8} @media (min-aspect-ratio:1/1){.inv[data-style=nakhsh] .tc-layer[data-l=light] .tc-pic{background:linear-gradient(140deg,rgba(255,248,232,0) 6%,rgba(255,248,232,.5) 16%,rgba(255,248,232,0) 27%,rgba(255,248,232,0) 33%,rgba(255,248,232,.34) 41%,rgba(255,248,232,0) 52%)}} /* ---------- the motion: only for those who want it ---------- */ @media (prefers-reduced-motion:no-preference){ /* The opening, scrubbed by the finger (a live cover only). */ html:not(.calm) .inv[data-style=nakhsh] .fm-cover.tc-ready .tc-layer[data-l=panel-l] .tc-pic{animation:nk-open-l 1s linear both paused;animation-delay:calc(var(--tc-p,0) * -1s)} html:not(.calm) .inv[data-style=nakhsh] .fm-cover.tc-ready .tc-layer[data-l=panel-r] .tc-pic{animation:nk-open-r 1s linear both paused;animation-delay:calc(var(--tc-p,0) * -1s)} html:not(.calm) .inv[data-style=nakhsh] .fm-cover.tc-ready .tc-layer[data-l=panel-l] .tc-sweep,html:not(.calm) .inv[data-style=nakhsh] .fm-cover.tc-ready .tc-layer[data-l=panel-r] .tc-sweep{animation:nk-turn 1s linear both paused;animation-delay:calc(var(--tc-p,0) * -1s)} html:not(.calm) .inv[data-style=nakhsh] .fm-cover.tc-ready .tc-layer[data-l=band] .tc-pic,html:not(.calm) .inv[data-style=nakhsh] .fm-cover.tc-ready .tc-slot[data-s=tag] .tc-in{animation:nk-slip 1s linear both paused;animation-delay:calc(var(--tc-p,0) * -1s)} html:not(.calm) .inv[data-style=nakhsh] .fm-cover.tc-ready .tc-layer[data-l=shade] .tc-pic{animation:nk-unshade 1s linear both paused;animation-delay:calc(var(--tc-p,0) * -1s)} html:not(.calm) .inv[data-style=nakhsh] .fm-cover.tc-ready .tc-layer[data-l=card] .tc-pic::before,html:not(.calm) .inv[data-style=nakhsh] .fm-cover.tc-ready .tc-layer[data-l=card] .tc-pic::after{animation:nk-stand 1s linear both paused;animation-delay:calc(var(--tc-p,0) * -1s)} html:not(.calm) .inv[data-style=nakhsh] .fm-cover.tc-ready .fm-big{animation:nk-reveal 1s linear both paused;animation-delay:calc(var(--tc-p,0) * -1s)} html:not(.calm) .inv[data-style=nakhsh] .fm-cover.tc-ready .fm-kick,html:not(.calm) .inv[data-style=nakhsh] .fm-cover.tc-ready .fm-date{animation:nk-leave 1s linear both paused;animation-delay:calc(var(--tc-p,0) * -1s)} html:not(.calm) .inv[data-style=nakhsh] .fm-cover.tc-ready .fm-names{animation:nk-leave 1s linear both paused,nk-foil 9s cubic-bezier(.45,0,.3,1) 1.4s infinite;animation-delay:calc(var(--tc-p,0) * -1s),1.4s;animation-play-state:paused,running} html:not(.calm) .inv[data-style=nakhsh] .fm-cover.tc-ready .tc-layer[data-l=card],html:not(.calm) .inv[data-style=nakhsh] .fm-cover.tc-ready .tc-layer[data-l=shade],html:not(.calm) .inv[data-style=nakhsh] .fm-cover.tc-ready .tc-layer[data-l=panel-l],html:not(.calm) .inv[data-style=nakhsh] .fm-cover.tc-ready .tc-layer[data-l=panel-r],html:not(.calm) .inv[data-style=nakhsh] .fm-cover.tc-ready .fm-words{animation:nk-back 1s linear both paused;animation-delay:calc(var(--tc-p,0) * -1s)} /* The window's light drifts, as a curtain stirs. */ html:not(.calm) .inv[data-style=nakhsh] .tc-layer[data-l=light] .tc-pic{animation:nk-drift 17s ease-in-out infinite alternate} html:not(.calm) .inv[data-style=nakhsh] .fm-after.fm-under .tc-layer[data-l=light] .tc-pic{animation-play-state:paused} /* A light passes over the gold of the names now and then. */ html:not(.calm) .inv[data-style=nakhsh] .fm-anames span,html:not(.calm) .inv[data-style=nakhsh] .fm-cover .fm-names{animation:nk-foil 9s cubic-bezier(.45,0,.3,1) 1.4s infinite} html:not(.calm) .inv[data-style=nakhsh] .fm-after.fm-under .fm-anames span{animation-play-state:paused} } @keyframes nk-open-l{0%,9%{transform:rotateY(0deg);animation-timing-function:cubic-bezier(.32,.06,.3,1)}100%{transform:rotateY(-100deg)}} @keyframes nk-open-r{0%,9%{transform:rotateY(0deg) translateX(-100%) scaleX(-1);animation-timing-function:cubic-bezier(.32,.06,.3,1)}100%{transform:rotateY(100deg) translateX(-100%) scaleX(-1)}} @keyframes nk-turn{0%,9%{opacity:0}52%{opacity:.2}100%{opacity:.1}} @keyframes nk-slip{0%{transform:none;opacity:1;animation-timing-function:cubic-bezier(.5,0,.8,.6)}24%,100%{transform:translateY(calc(var(--nk-h) * .05)) rotate(1.4deg) scale(.985);opacity:0}} @keyframes nk-unshade{0%,12%{opacity:1}64%,100%{opacity:0}} @keyframes nk-stand{0%,30%{opacity:0}100%{opacity:1}} @keyframes nk-reveal{0%,26%{opacity:0}74%,100%{opacity:1}} @keyframes nk-leave{0%{opacity:1}26%,100%{opacity:0}} @keyframes nk-back{0%,42%{scale:1;animation-timing-function:cubic-bezier(.45,0,.25,1)}100%{scale:var(--nk-z)}} @keyframes nk-drift{0%{transform:translate(-2.5%,-1.5%);opacity:.62}50%{opacity:.92}100%{transform:translate(2.5%,1.8%);opacity:.72}} @keyframes nk-foil{0%,72%{background-position:100% 0}100%{background-position:0 0}} /* narcissus.css */ /* Narcissus (نێرگز), drawn in styles/narcissus.ts. Shared classes are reached through nc- ones or .inv[data-style]; `body>` rules read the window, so pickers keep the phone's. */ .inv[data-style=narcissus] { --nc-e: cubic-bezier(.2, .8, .2, 1); --nc-s: cubic-bezier(.3, 1.35, .5, 1); --nc-k: 1; } .nc-sch { --nc-k: .78; } .nc-ph { --nc-z: .82; } /* The cover: the spray at the bottom left, the words in the right half. */ .nc-cover { background: radial-gradient(120% 60% at 30% 0%, var(--nc-glow), var(--i-bg) 70%); } :is(.nc-art, .nc-art2, .nc-sart, .nc-bd) { aspect-ratio: 240 / 844; overflow: visible; stroke-width: .8; } .nc-art, .nc-art2 { position: absolute; left: 0; bottom: 0; width: 62%; height: 100%; } .inv :is(.nc-art2, .nc-sart, .nc-bd) { display: none; } .nc-scroll { padding: env(safe-area-inset-top) 26px calc(env(safe-area-inset-bottom) + 24px); } .nc-scroll::before { content: ""; flex: 0 1 27%; } .nc-ph .nc-scroll::before { flex-basis: 13%; } .nc-col { width: 50%; display: grid; justify-items: start; gap: 12px; text-align: start; } .nc-col > p { margin: 0; } .nc-names { display: grid; justify-items: start; font-family: var(--i-font); font-weight: 500; } .nc-names em { font: 600 max(.3em, 15px)/1.5 var(--i-body); color: var(--i-accent-ink); padding-inline-start: .4em; } .nc-cn { --nc-n: clamp(3.6rem, 19vw, 4.8rem); font-size: calc(var(--nc-n) * var(--nc-k) * var(--nc-z, 1)); line-height: 1.04; } .nc-cn[data-len=m] { --nc-n: clamp(3rem, 15vw, 4rem); } .nc-cn[data-len=l] { --nc-n: 2.6rem; line-height: 1.2; } .nc-cn[data-len=xl] { --nc-n: 2.2rem; line-height: 1.25; } .nc-date { font-size: 1rem; line-height: 1.75; color: var(--i-muted); white-space: nowrap; } .nc-date span, .nc-day span { display: block; } .nc-open { margin-top: 10px; white-space: nowrap; } .nc-frame { width: clamp(118px, 36vw, 156px); aspect-ratio: 4 / 5; padding: 6px; margin-bottom: 4px; background: var(--i-surface); border: 1px solid var(--nc-hair); border-radius: 50% 50% 6px 6px / 38% 38% 6px 6px; box-shadow: 0 18px 30px -18px var(--nc-sd); } .nc-photo { height: 100%; border-radius: inherit; background: var(--nc-bud) 50% / cover; } .nc-sw { transform-origin: 58px 844px; animation: nc-in 1.2s var(--nc-e) backwards; } .nc-col > * { animation: nc-in .9s .1s var(--nc-e) backwards; } .nc-col > :nth-child(n+3) { animation-delay: .22s; } /* The bloom: skins fall, petals turn apart, a breeze, the scent. The names stay till the cover goes. */ .nc-bud use { fill: var(--nc-pe); stroke: var(--nc-pl); transform: rotate(0deg) scaleX(.62); transition: transform .9s var(--nc-s); } .nc-bud [href="#nc-pi"] { fill: var(--nc-pi); } .nc-bud .nc-bc { transform: scale(0); transition: transform .5s .35s var(--nc-e); } .nc-bud .nc-bk { transform: none; transition: opacity .3s .05s, transform .45s .05s var(--nc-e); } .opening .nc-bud use { transform: rotate(var(--a)) scaleX(1); } .opening .nc-bud .nc-bc { transform: none; } .opening .nc-bud .nc-bk { opacity: 0; transform: scale(1.25, .8); } .nc-b2 use { transition-delay: .18s; } .nc-b2 .nc-bc { transition-delay: .53s; } .nc-b2 .nc-bk { transition-delay: .23s; } .opening .nc-sw { animation: nc-breeze 1.2s ease-in-out; } .nc-rings circle { fill: none; stroke: var(--nc-th); stroke-width: 2.6; opacity: 0; } .opening .nc-rings circle { animation: nc-ring 1s .62s var(--nc-e) forwards; } .opening .nc-rings :nth-child(2) { animation-delay: .76s; } .opening .nc-rings :nth-child(3) { animation-delay: .9s; } .opening .nc-col > * { opacity: 0; transform: translateY(-6px); transition: opacity .25s, transform .4s; } .opening .nc-col > .nc-open { transition: opacity .15s; } .opening .nc-col > .nc-cn { transition: opacity .3s .75s, transform .5s .75s var(--nc-e); } .nc-cover.opening { animation: nc-fade .45s .9s linear forwards; } @keyframes nc-in { from { opacity: 0; transform: translateY(12px); } } @keyframes nc-breeze { 35% { transform: rotate(-2deg); } 70% { transform: rotate(1.2deg); } } @keyframes nc-ring { from { opacity: .55; transform: scale(.08); } to { opacity: 0; transform: scale(1); } } @keyframes nc-fade { to { opacity: 0; } } /* Small or short phones: the flowers centred above the words. */ @media (max-width: 359px), (max-height: 639px) and (orientation: portrait) { body>.inv .nc-art { left: 50%; top: -3.5%; width: auto; height: 104%; transform: translateX(-45.8%); -webkit-mask-image: linear-gradient(#000 35.6%, transparent 38%); } body>.inv .nc-scroll::before { flex: none; height: 38.5%; } body>.inv .nc-ph .nc-scroll::before { height: 23%; } body>.inv .nc-col { width: 100%; justify-items: center; text-align: center; gap: 8px; } body>.inv .nc-cn { --nc-n: clamp(2.8rem, 15vw, 3.6rem); justify-items: center; } body>.inv .nc-cn[data-len=m] { --nc-n: 2.6rem; } body>.inv .nc-cn em { padding: 0; } body>.inv .nc-frame { width: 96px; } } @media (max-height: 500px) and (max-width: 559px) { body>.inv .nc-col { gap: 6px; } body>.inv .nc-cn { --nc-n: 2.4rem; } body>.inv .nc-cn[data-len=m] { --nc-n: 2.2rem; } body>.inv .nc-date { line-height: 1.4; } body>.inv .nc-open { margin-top: 4px; min-height: 46px; padding-block: 10px; } body>.inv .nc-ph .nc-scroll::before { height: 21%; } body>.inv .nc-frame { width: 72px; } } /* A phone held sideways: flowers, words and photo side by side. */ @media (max-height: 480px) and (min-width: 560px) and (max-width: 1023px) { body>.inv .nc-art { left: 3%; top: 50%; width: 32%; height: auto; transform: translateY(-21.3%); } body>.inv .nc-scroll { padding-block: 12px; } body>.inv .nc-scroll::before { display: none; } body>.inv .nc-col { width: 54%; margin: auto 4% auto 0; column-gap: 26px; } body>.inv .nc-ph .nc-col { grid-template-columns: auto 1fr; } body>.inv .nc-frame { grid-row: 1 / 5; align-self: center; width: 112px; } body>.inv .nc-cn { --nc-n: 3.3rem; line-height: 1.08; } body>.inv .nc-cn[data-len=m] { --nc-n: 2.8rem; } body>.inv .nc-cn[data-len=l] { --nc-n: 2.3rem; } body>.inv .nc-cn[data-len=xl] { --nc-n: 2rem; } } /* The page: one stem down the start side, a flower at each part. */ .inv[data-style=narcissus] :is(.inv-page, .inv-side)::before { content: ""; position: absolute; right: 30px; top: 33px; bottom: calc(env(safe-area-inset-bottom) + 58px); width: 2px; border-radius: 2px; background: var(--nc-st); transform-origin: 50% 0; transform: scaleY(var(--nc-p, 1)); } .inv[data-style=narcissus] .inv-side::before { content: none; } html.nc-js .inv[data-style=narcissus] :is(.inv-page, .inv-side)::before { transform: scaleY(var(--nc-p, 0)); transition: transform .8s var(--nc-e); } /* A strip under the bar: what scrolls by fades before the pills. */ .inv[data-style=narcissus] .inv-bar::before { content: ""; position: absolute; inset: 0 0 -10px; z-index: -1; background: var(--i-bg); -webkit-mask-image: linear-gradient(#000 55%, transparent); } .nc-sec { justify-items: start; text-align: start; gap: 10px; padding: 18px 64px 22px 24px; } .nc-node { position: absolute; right: 11px; top: 11px; width: 40px; height: 40px; overflow: visible; stroke-width: 2.4; } .nc-on use { transition: transform .7s var(--nc-s); } .nc-on .nc-nc { transition-delay: .18s; } .nc-hero .lead { max-width: 28ch; } .nc-hero .bless { color: var(--i-ink); } .nc-hero .nc-names { margin: 4px 0 2px; --nc-n: clamp(3.8rem, 19vw, 5.2rem); font-size: calc(var(--nc-n) * var(--nc-k) * var(--nc-z, 1)); line-height: 1.02; } .nc-hero [data-len=l] { --nc-n: 3.2rem; line-height: 1.2; } .nc-hero [data-len=xl] { --nc-n: 2.7rem; line-height: 1.25; } .nc-hero [data-len] em { padding-inline-start: .5em; line-height: 1.7; } .nc-hero :is([data-len=s], [data-len=m]) em { font-size: .28em; } /* The names rise first, as the cover fades. */ .inv.play .nc-hero .rv:nth-child(n) { animation-delay: 0s; } .inv.play .nc-hero .names:nth-child(n) { animation-delay: .08s; } .inv.play .nc-hero .bless:nth-child(n) { animation-delay: .16s; } .nc-cd, .nc-after { margin: 2px 0 4px; padding: 10px 0 8px; gap: 4px; border-block: 1px solid var(--nc-hair); } .nc-cd div { justify-items: start; gap: 0; } .nc-cd strong { font-family: var(--i-font); font-weight: 300; font-size: 3.1rem; line-height: 1.1; } .nc-sch .nc-cd strong { font: 400 2.3rem/1.45 var(--i-body); } .nc-cd span { font-size: .78rem; } .nc-after { width: 100%; font: 500 calc(2rem * var(--nc-k))/1.35 var(--i-font); } .nc-day, .nc-time { margin: 0; font-weight: 700; font-size: 1.06rem; line-height: 1.7; } .nc-day span:first-child:not(:last-child) { font-weight: 400; color: var(--i-muted); } .nc-time { font-size: .98rem; color: var(--i-accent-ink); } .nc-hall { margin: 8px 0 12px; aspect-ratio: 4 / 3; padding: 8px; border-radius: 0; border-color: var(--nc-hair); box-shadow: 0 18px 30px -18px var(--nc-sd); } .nc-venue { font-weight: 500; font-size: calc(2.6rem * var(--nc-k)); line-height: 1.15; } .nc-label { margin: 0 0 6px; padding: 3px 12px 4px; font-size: .85rem; color: var(--i-muted); background: var(--i-surface); border: 1px solid var(--nc-hair); border-top: 2px solid var(--nc-st); } .nc-note { margin: 0; padding: 2px 16px 2px 0; border: 0; border-right: 2px solid var(--nc-st); border-radius: 0; text-wrap: pretty; } .nc-card { justify-items: stretch; text-align: start; gap: 12px; padding: 22px 18px 12px; border-radius: 3px; border-color: var(--nc-hair); box-shadow: none; } .nc-card .rsvp-msg { margin-top: -8px; } .nc-card .rsvp-q { font-weight: 500; font-size: calc(2.4rem * var(--nc-k)); line-height: 1.2; } .nc-card :is(input, select) { border-radius: 4px; border-color: var(--nc-line); background: var(--i-surface); } .nc-card :is(.rsvp-actions, .rsvp-after) { justify-items: start; } .nc-card .btn { width: 100%; } .nc-card :is(.soft, .rsvp-change) { width: auto; min-height: 44px; padding: 8px 0; border: 0; background: none; color: var(--i-ink); text-decoration: underline; text-underline-offset: 5px; text-decoration-thickness: 1px; } .nc-card :is(.rsvp-note, .rsvp-after) { padding-bottom: 8px; } .nc-foot { position: relative; justify-items: start; text-align: start; margin: 8px 64px 0 24px; padding: 24px 0 44px; border-color: var(--nc-hair); } .nc-foot .nc-node { top: auto; bottom: 37px; right: -53px; } .nc-foot .foot-cta { text-wrap: balance; } /* Flowers open as the stem reaches them; sections rise after the names. */ @media (prefers-reduced-motion: no-preference) { html.nc-js .nc-node:not(.nc-on) .nc-no { transform: scale(.4); } html.nc-js .nc-node:not(.nc-on) .nc-ni { transform: rotate(-60deg); } html.nc-js .nc-node:not(.nc-on) .nc-nc { transform: scale(0); } .nc-sec.in > * { transition: opacity .8s .15s, transform .8s .15s var(--nc-e); } .nc-first .nc-sec.in > * { transition-delay: .55s; } html.io .inv.play .nc-sec[data-io]:not(.in) > :not(.nc-node) { opacity: 0; transform: translateY(14px); } } /* A laptop: the card in bloom, sticky (narcissus.js sets its top); the stem down the details. */ @media (min-width: 1024px) { .inv[data-style=narcissus] .inv-page::before, .inv-sheet .nc-node { display: none; } .inv[data-style=narcissus] .inv-side::before { content: ""; top: 30px; bottom: 58px; } .inv[data-style=narcissus] .inv-bar { max-width: none; padding-inline: max(32px, calc(50% - 558px)); } .inv[data-style=narcissus] .inv-bar::before { background: var(--i-backdrop); } .inv[data-style=narcissus] .inv-sheet { min-height: 700px; padding: 44px 40px 36px; border-radius: 3px; border: 1px solid var(--nc-hair); background: radial-gradient(120% 60% at 30% 0%, var(--nc-glow), var(--nc-paper) 70%); box-shadow: 0 40px 80px -40px var(--nc-sd); } html.nc-fit .inv[data-style=narcissus] .inv-sheet { position: sticky; top: var(--nc-top, 64px); } .inv-sheet .nc-sec { position: static; padding: 0 0 0 30%; } .inv-sheet .nc-when { padding-top: 30px; } .inv .nc-sart { display: block; position: absolute; left: 16px; bottom: 18px; height: calc(100% - 36px); } .inv[data-style=narcissus] .inv-side { position: relative; gap: 0; padding-top: 0; } .inv[data-style=narcissus] .inv-side > .inv-sec { padding: 18px 64px 22px 24px; border-radius: 0; background: none; box-shadow: none; } .inv[data-style=narcissus] .inv-side .nc-card { padding: 22px 20px 12px; background: var(--i-surface); border: 1px solid var(--nc-hair); } .inv-side .nc-foot { margin: 8px 64px 0 24px; } /* The cover: the names between two sprays, one mirrored. */ body>.inv :is(.nc-art, .nc-art2) { display: block; top: 50%; bottom: auto; height: auto; } body>.inv .nc-art { left: auto; right: calc(50% + 214px); width: clamp(290px, 26vw, 400px); transform: translateY(-27%); } body>.inv .nc-art2 { left: calc(50% + 226px); width: clamp(220px, 18vw, 290px); transform: translateY(-14%) scaleX(-1); } body>.inv .nc-scroll { padding: 32px; } body>.inv .nc-scroll::before { display: none; } body>.inv .nc-col { width: min(440px, 100%); margin: auto; justify-items: center; text-align: center; gap: 16px; } body>.inv .nc-names { justify-items: center; } body>.inv .nc-cn em { padding: 0; } body>.inv .nc-cover .kick { font-size: 1.1rem; } body>.inv .nc-date { font-size: 1.15rem; } body>.inv .nc-cn { --nc-n: 5.5rem; } body>.inv .nc-cn[data-len=m] { --nc-n: 4.6rem; } body>.inv .nc-cn[data-len=l] { --nc-n: 3.6rem; } body>.inv .nc-cn[data-len=xl] { --nc-n: 3rem; } body>.inv .nc-frame { width: 176px; } } @media (min-width: 1024px) and (min-height: 800px) { .inv[data-style=narcissus] .inv-sheet { position: sticky; top: 64px; } } /* A short laptop window: a closer card and cover. */ @media (min-width: 1024px) and (max-height: 820px) { .inv[data-style=narcissus] .inv-sheet { --nc-z: .84; min-height: 0; padding: 30px 36px 26px; } .nc-sec.nc-hero { gap: 8px; padding-bottom: 14px; } .inv-sheet .lead { line-height: 1.75; } .inv-sheet .nc-when { padding-top: 14px; } .nc-cd strong { font-size: 2.7rem; } body>.inv .nc-col { gap: 11px; } body>.inv .nc-ph { --nc-z: .74; } body>.inv .nc-frame { width: 132px; } } @media (min-width: 1360px) { .inv .nc-bd { display: block; position: fixed; left: max(8px, calc(50% - 780px)); bottom: -6%; height: 92%; opacity: .45; } } @media (prefers-reduced-motion: reduce) { .nc-cover * { animation: none !important; } .nc-bud use { transform: rotate(var(--a)) scaleX(1); } .nc-bud .nc-bc { transform: none; } .nc-bud .nc-bk { opacity: 0; } } /* perde.css */ /* پەردە (the Curtain): only what differs from the film engine (film.css). Markup and config: styles/perde.ts. */ /* The velvet is dark wherever the cover's words sit: the scrim only deepens it a little, and the engine's dusk at the top would muddy the valance's gold, so the shade is a breath at the top and at the floor, for the instruction. */ .inv[data-style=perde] .fm-cover .fm-at{--fm-scrim:.34} .inv[data-style=perde] .fm-shade{background:linear-gradient(rgba(24,3,7,.22),rgba(24,3,7,0) 20%,rgba(24,3,7,0) 82%,rgba(14,5,3,.34))} /* The names over the painting's parchment sky (the dark tone: ink brown, the و in the velvet's crimson) on a soft glow of the parchment itself, never a box. */ .inv[data-style=perde] .fm-awords,.inv[data-style=perde] .fm-big{--fm-scrim:.4} .inv[data-style=perde] .fm-adate{position:relative;z-index:0;max-width:96%;white-space:normal;text-wrap:balance} /* A narrow phone (375x667, 360x740, 360x640) broke the date after its comma: it is a step smaller there, and may run as wide as the parchment between the curtains' trims at its height (23.5% to 76.5% of the frame), not only the names' box (24.5% to 72.5%): negative margins, so the names' column keeps its width and the names their place. At 320 px it still breaks, once, balanced, rather than shrink below 13 px. */ @media (max-width:379px){.inv[data-style=perde] .fm-adate{max-width:none;margin-left:-2.08%;margin-right:-8.33%;font-size:clamp(.84rem,3.9vw,1rem)}} /* A short phone (360x740, an SE) has less of the painting's sky under the valance than a tall one: the names are sized by its height too, so they and the date stay on the parchment, never on the couple's heads below it. The hero by the window's small height, the names over the film by the cover's own box (its container), so the two hand over at the same size; only where the browser has both. */ @supports (top:1cqh){@media not all and (min-aspect-ratio:1/1){ .inv[data-style=perde] .fm-after .fm-anames{font-size:clamp(2.3rem,min(14vw,6.6svh),4.2rem)} .inv[data-style=perde] .fm-after .fm-anames[data-len=l]{font-size:clamp(2rem,min(11vw,5.4svh),3.4rem)} .inv[data-style=perde] .fm-after .fm-anames[data-len=xl]{font-size:clamp(1.8rem,min(9.4vw,4.6svh),2.9rem)} .inv[data-style=perde] .fm-big .fm-anames{font-size:clamp(2.3rem,min(14vw,6.6cqh),4.2rem)} .inv[data-style=perde] .fm-big .fm-anames[data-len=l]{font-size:clamp(2rem,min(11vw,5.4cqh),3.4rem)} .inv[data-style=perde] .fm-big .fm-anames[data-len=xl]{font-size:clamp(1.8rem,min(9.4vw,4.6cqh),2.9rem)} }} /* A laptop's names stand three lines tall in the painting's sky: a little smaller than the engine's, so the date keeps clear of the groom's turban under it, the names of the valance's fringe over them; over the film and on the hero alike. A short window (1280x620, a laptop under its browser's bars; a phone on its side) shows less of the sky than the frame has: there the names are sized by its height too, the hero by the window's, the names over the film by the cover's own box, so they hand over at the same size. */ @media (min-aspect-ratio:1/1){ .inv[data-style=perde] .fm-anames{font-size:clamp(2.8rem,5vw,5.2rem)} .inv[data-style=perde] .fm-anames[data-len=l],.inv[data-style=perde] .fm-anames[data-len=xl]{font-size:clamp(2.3rem,3.8vw,4rem)} } @supports (top:1cqh){@media (min-aspect-ratio:1/1){ .inv[data-style=perde] .fm-after .fm-anames{font-size:clamp(1.8rem,min(5vw,7.6svh),5.2rem)} .inv[data-style=perde] .fm-after .fm-anames[data-len=l],.inv[data-style=perde] .fm-after .fm-anames[data-len=xl]{font-size:clamp(1.6rem,min(3.8vw,5.8svh),4rem)} .inv[data-style=perde] .fm-big .fm-anames{font-size:clamp(1.8rem,min(5vw,7.6cqh),5.2rem)} .inv[data-style=perde] .fm-big .fm-anames[data-len=l],.inv[data-style=perde] .fm-big .fm-anames[data-len=xl]{font-size:clamp(1.6rem,min(3.8vw,5.8cqh),4rem)} }} /* The seam: a ring of warm gold light where the two panels meet (not the dove's white, on velvet), and the line of light leaking at the seam's foot drawn up to it. The ring's box is the beacon's (film.ts, in the frame's own places); the line runs from the leak (portrait 85.4% of the frame's height, 2.18 rings below the ring's centre; landscape 88.9%, 1.98 rings) and, while a finger is on the cover (fm-press, film.js) or as the opening starts, climbs the seam to just under the date (portrait 38%, landscape 42%) and brightens, then goes as the panels part. */ .inv[data-style=perde] .fm-beacon{background:radial-gradient(closest-side,rgba(255,204,120,.26),rgba(255,190,100,.08) 60%,rgba(255,190,100,0))} .inv[data-style=perde] .fm-beacon::before,.inv[data-style=perde] .fm-beacon i{border:1.5px solid rgba(255,228,168,.94);box-shadow:0 0 0 1px rgba(110,60,14,.45),0 0 16px rgba(255,186,90,.5),inset 0 0 12px rgba(255,186,90,.32)} .inv[data-style=perde] .fm-beacon::after{content:"";position:absolute;left:50%;bottom:-168.1%;width:3px;height:561.8%;margin-left:-1.5px;border-radius:2px;background:linear-gradient(0deg,#FFF3D6,rgba(255,222,150,.95) 30%,rgba(255,206,128,.85) 75%,rgba(255,196,110,0));box-shadow:0 0 6px 1px rgba(255,196,100,.7),0 0 18px 4px rgba(255,170,70,.35);opacity:.8;transform:scaleY(.299);transform-origin:50% 100%;transition:transform .6s cubic-bezier(.3,.6,.3,1),opacity .3s} @media (min-aspect-ratio:1/1){.inv[data-style=perde] .fm-beacon::after{bottom:-148.2%;height:405.8%;transform:scaleY(.365)}} .inv[data-style=perde] .fm-cover.fm-press .fm-beacon::after,.inv[data-style=perde] .fm-cover.opening .fm-beacon::after{opacity:1;transform:scaleY(1)} /* The ring goes with the touch; the line's light stays a moment longer, climbing, and goes as the film's panels lift apart at the seam (from 0.25 s), so it is never drawn over the gap of light they open. */ .inv[data-style=perde] .fm-cover.fm-press .fm-beacon::before,.inv[data-style=perde] .fm-cover.fm-press .fm-beacon i,.inv[data-style=perde] .fm-cover.opening .fm-beacon::before{opacity:0;animation:none;transition:opacity .25s} .inv[data-style=perde] .fm-cover.opening .fm-beacon{opacity:0;transition:opacity .35s .2s} @media (prefers-reduced-motion:reduce){.inv[data-style=perde] .fm-beacon::after{transition:none}} html.calm .inv[data-style=perde] .fm-beacon::after{transition:none} /* The hero's foot is the dark walnut stage: the engine's dusk there is enough for the cue. */ .inv[data-style=perde] .fm-light{background:linear-gradient(rgba(14,6,4,0) 80%,rgba(14,6,4,.3))} /* The hero's petals start under the words: dark crimson on the bright parchment sky, they crossed the names and the date (1.2:1 under a petal) at the moment they are read. The fall's box begins below the date, so they drift down over the stage and the couple only, and each petal starts under the words' real foot (film.js fall(), --fm-under), so a date in two lines (320 px) or long names push them lower still. */ .inv[data-style=perde] .fm-after .fm-fall{top:39%;--fm-under:1} @media (min-aspect-ratio:1/1){.inv[data-style=perde] .fm-after .fm-fall{top:47%}} /* A laptop's demo page: the bar that sells the design stands where the cue would be, and the cue lifted above it fell on the couple's feet beside the henna bowl (on a 1366x668 or 1440x789 window, on their legs). There it sits beside the bar instead, at its height, on the stage's boards and the roses, never on the couple. */ @media (min-aspect-ratio:1/1) and (min-width:900px){.inv[data-style=perde][data-demo="1"] .fm-cue{bottom:calc(19px + env(safe-area-inset-bottom));left:calc(50% + 326px)}} /* English (2026-10-03): the painting's sky narrows towards the valance, so a long Latin name keeps a little in from the names' box on a phone (film.js fits the names to what is left): never on the curtains' gold trims. */ @media not all and (min-aspect-ratio:1/1){.inv[data-style=perde][lang=en] .fm-anames{padding-inline:5%}} /* qaysari.css */ /* Qaysari: the bazaar at noon. Arches as CSS boxes, sun as masked gradients, the names on indigo cloth. Colours are the colourway's --qs-* vars; the scenes sit on story.css; arches carry their size and tints as --w/--fill/--rim. */ .inv[data-style="qaysari"]{--qs-k:1} .qs-cover{--qs-w:min(100vw,520px);--qs-h:calc(var(--qs-w)*var(--qs-k));--qs-u:calc(var(--qs-w)/600);--qs-ow:calc(var(--qs-u)*68);--qs-floor:84%;--qs-oy:16%;--qs-ct:26%;--qs-ch:20%;--qs-cw:min(76%,480px);--qs-fs:clamp(2rem,8.5vw,5.5rem);background:var(--st-grain) 0 0/96px 96px,radial-gradient(150% 120% at 50% 100%,transparent 60%,var(--qs-shade)),var(--qs-umber)} :not(body)>.cover-box .qs-cover{--qs-w:390px} .qs-a{--r:calc(var(--w)/2);position:absolute;bottom:0;left:50%;width:var(--w);height:calc(var(--w)*var(--qs-k));margin-left:calc(var(--r)*-1);border-radius:var(--r) var(--r) 0 0;background:var(--fill);box-shadow:inset 0 0 0 2px var(--rim)} .qs-tunnel{position:absolute;z-index:1;left:50%;bottom:calc(100% - var(--qs-floor));width:var(--qs-w);height:var(--qs-h);margin-left:calc(var(--qs-w)/-2)} .qs-a1{display:none} .qs-glow{position:absolute;bottom:calc(var(--qs-u)*70);left:50%;width:calc(var(--qs-u)*180);aspect-ratio:1;margin-left:calc(var(--qs-u)*-90);border-radius:50%;background:radial-gradient(closest-side,var(--qs-light) 0 28%,transparent);opacity:.7} /* A skylight: a flat opening with a lit lip; its shaft a soft parallel beam. */ .qs-oc{position:absolute;z-index:2;border-radius:50%;background:var(--qs-light);box-shadow:0 0 0 2px var(--qs-saffron)} .qs-oc-l,.qs-oc-r,.qs-s2 .qs-oc{top:var(--qs-oy);left:50%;width:var(--qs-ow);height:calc(var(--qs-ow)*.59);margin:calc(var(--qs-ow)*-.295) 0 0 calc(var(--qs-ow)/-2)} .qs-oc-f{bottom:calc(var(--qs-h)*.66);left:50%;width:calc(var(--qs-u)*48);height:calc(var(--qs-u)*28);margin-left:calc(var(--qs-u)*-24)} .qs-sh{position:absolute;z-index:2;top:var(--qs-oy);width:calc(var(--qs-ow)*1.4);height:calc(var(--qs-floor) - var(--qs-oy));margin-left:calc(var(--qs-ow)*-.7);background:linear-gradient(90deg,transparent,var(--qs-saffron) 30% 70%,transparent);-webkit-mask-image:linear-gradient(#000,rgba(0,0,0,.5) 45%,transparent);mask-image:linear-gradient(#000,rgba(0,0,0,.5) 45%,transparent);opacity:.55;transform-origin:50% 0;transform:rotate(-6deg)} .qs-sh-f{top:auto;bottom:0;left:50%;width:calc(var(--qs-u)*67);height:calc(var(--qs-h)*.66);margin-left:calc(var(--qs-u)*-33.5)} .qs-oc-l,.qs-sh-l{left:calc(50% - var(--qs-u)*156)} .qs-oc-r,.qs-sh-r{left:calc(50% + var(--qs-u)*156)} .qs-floor{position:absolute;z-index:3;left:0;right:0;top:var(--qs-floor);bottom:0;background:linear-gradient(var(--qs-shade),transparent 34px),var(--qs-deep);box-shadow:0 -2px 0 var(--qs-t2)} .qs-ckick{position:absolute;z-index:4;left:24px;right:24px;top:max(8%,calc(env(safe-area-inset-top) + 10px));margin:0;font:600 clamp(.85rem,1vw,1rem)/1.5 var(--i-body)} .qs-cloth{position:absolute;z-index:4;top:var(--qs-ct);left:50%;width:var(--qs-cw);min-height:var(--qs-ch);margin-left:calc(var(--qs-cw)/-2);display:flex;flex-direction:column;color:var(--qs-saffron);text-decoration:none;transform-origin:50% 0} .qs-cloth[data-len="l"],.qs-cloth[data-len="xl"]{--qs-ch:24%} .qs-cloth[data-len="m"]{--qs-fs:clamp(1.8rem,7.6vw,4.6rem)} .qs-cloth[data-len="l"]{--qs-fs:clamp(1.9rem,8.4vw,4.2rem)} .qs-cloth[data-len="xl"]{--qs-fs:clamp(1.6rem,7vw,3.2rem)} .qs-cord{position:absolute;bottom:100%;width:2px;height:400%;background:var(--qs-sand)} .qs-cord:first-child{left:6px}.qs-cord:nth-child(2){right:6px} .qs-cloth-sw{position:relative;flex:1;display:flex;flex-direction:column;transform-origin:50% 0} .qs-sag{flex:none;width:100%;height:20px;fill:var(--qs-indigo)} .qs-cloth-in{flex:1;display:flex;flex-direction:column;justify-content:center;gap:4px;padding:2px 16px 12px;background:var(--qs-indigo);box-shadow:0 4px 0 var(--qs-ishade)} .qs-cnames{font:700 var(--qs-fs)/1.7 var(--i-font)} .qs-cnames span{display:block} .qs-cnames em,.qs-names em{font:600 .55em/1 var(--i-body);margin-inline:.15em;vertical-align:.1em} .qs-cdate{font:600 clamp(.88rem,1.1vw,1.05rem)/1.6 var(--i-body);color:var(--qs-light)} /* A tassel: a knot and three threads; saffron on the cover, where indigo vanishes. */ .qs-tas{--k:var(--qs-indigo);--t:var(--qs-indigo);position:absolute;top:100%;width:7px;height:24px;background:linear-gradient(var(--k),var(--k)) 0 0/100% 10px no-repeat,repeating-linear-gradient(90deg,var(--t) 0 1px,transparent 1px 3px) 0 100%/100% 14px no-repeat} .qs-tas:nth-last-child(2){left:10px}.qs-tas:last-child{right:10px} .qs-cloth .qs-tas{--k:var(--qs-saffron);--t:var(--qs-sand)} .qs-open{position:absolute;z-index:5;left:50%;bottom:max(8%,calc(env(safe-area-inset-bottom) + 14px));transform:translateX(-50%);padding:12px 28px;border-radius:99px;background:var(--qs-saffron);color:var(--qs-umber);font:700 clamp(.95rem,1.1vw,1.05rem)/1.4 var(--i-body);white-space:nowrap;text-decoration:none;box-shadow:0 10px 24px -10px var(--qs-ishade)} .opening .qs-sh{animation:qs-sweep .9s cubic-bezier(.4,0,.2,1) forwards;will-change:transform} .opening .qs-sh-l{animation-delay:60ms} .opening .qs-sh-f{animation-delay:120ms} .opening .qs-glow{animation:qs-noon .9s ease-out forwards} .opening .qs-open{animation:qs-fade .15s linear forwards} .opening .qs-cloth-sw{animation:qs-sway .7s ease-in-out} .opening .qs-cloth{animation:qs-raise .8s .6s cubic-bezier(.45,.05,.2,1) forwards;will-change:transform} .opening .qs-ckick{animation:qs-fade .3s .6s linear forwards} .qs-cover.opening{animation:qs-fade .4s 1.1s linear forwards} @keyframes qs-sweep{from{transform:rotate(-6deg);opacity:.55}to{transform:rotate(3deg);opacity:1}} @keyframes qs-noon{from{transform:scale(1);opacity:.7}to{transform:scale(1.6);opacity:1}} @keyframes qs-sway{30%{transform:rotate(1.5deg)}70%{transform:rotate(-1deg)}} @keyframes qs-raise{to{transform:translateY(-240%)}} @keyframes qs-fade{to{opacity:0}} .qs-s[data-paper="u"]{--st-paper:var(--qs-umber);--i-muted:var(--qs-sand);color:var(--qs-saffron)} .qs-s[data-paper="l"]{--st-paper:var(--qs-light);--i-ink:var(--qs-umber);--i-muted:var(--qs-sepia);--i-accent-ink:var(--qs-indigo);color:var(--qs-umber)} .qs-s[data-paper="i"]{--st-paper:repeating-linear-gradient(var(--qs-weave) 0 1px,transparent 1px 4px),var(--qs-indigo);color:var(--qs-saffron)} [data-style="qaysari"] .inv-bar{position:fixed;left:0;right:0;top:0} [data-style="qaysari"] .lang-switch,[data-style="qaysari"] .bar-btn{background:var(--qs-glass);color:var(--qs-umber);border-color:var(--qs-hair)} [data-style="qaysari"] .lang-switch a{color:var(--qs-sepia)} [data-style="qaysari"] .lang-switch a[aria-current]{background:var(--qs-umber);color:var(--qs-light)} .qs-kick{margin:0;font:600 .85rem/1.6 var(--i-body);color:var(--i-muted)} .qs-s[data-paper="u"] .qs-kick{color:inherit} .qs-pill{display:inline-flex;align-items:center;padding:8px 22px;border-radius:99px;background:var(--qs-saffron);color:var(--qs-umber);font:700 clamp(1rem,1.15vw,1.1rem)/1.5 var(--i-body);text-decoration:none;box-shadow:none} .qs-time{color:var(--qs-indigo);margin-top:6px} .qs-arch{--fw:min(100vw - 72px,360px);width:var(--fw);min-height:calc(var(--fw)*1.2);padding:calc(var(--fw)/2 - 18px) 14px 34px;align-content:end;gap:10px;border:1.5px solid var(--qs-saffron);border-bottom:0;border-radius:calc(var(--fw)/2) calc(var(--fw)/2) 0 0} .qs-names{margin:0;display:grid;font:700 clamp(2.8rem,13vw,5rem)/1.6 var(--i-font);color:var(--qs-saffron)} .qs-names[data-len="l"]{font-size:clamp(2.2rem,10vw,4.2rem)} .qs-names[data-len="xl"]{font-size:clamp(1.9rem,8.6vw,3.6rem)} .qs-bless{margin:0;max-width:30ch;font-size:clamp(1rem,1.25vw,1.15rem);line-height:1.9;color:var(--qs-sand)} /* Scene 2: the vault's edge, one skylight, its sun on the paper. */ .qs-s2 .st-art{--cw:min(80vw,560px);--qs-ow:calc(var(--cw)*.24);--qs-oy:7%;top:0} .qs-vault{position:absolute;top:0;left:0;right:0;height:14%;background:var(--qs-umber)} .qs-s2 .qs-cone{position:absolute;top:var(--qs-oy);left:50%;width:var(--cw);height:calc(72% - var(--qs-oy));margin-left:calc(var(--cw)/-2);clip-path:polygon(38% 0,62% 0,100% 100%,0 100%);background:linear-gradient(var(--qs-lit),transparent)} .qs-bism{margin:0 0 10px;font:400 clamp(1.05rem,1.3vw,1.2rem)/2 "Amiri","Noto Naskh Arabic",serif} .qs-lead{margin:0;max-width:36ch;font-size:clamp(1.1rem,1.4vw,1.3rem);line-height:2} /* Scene 3: two tassels on cords from the top; --s scales them on a laptop. */ .qs-s3{--s:1} .qs-s3 .st-art{top:0;bottom:auto;height:calc(18% + 40px*var(--s))} .qs-tassels{position:absolute;inset:0} .qs-tas-big{position:absolute;top:0;width:calc(10px*var(--s));height:100%;margin-left:calc(-5px*var(--s));transform-origin:50% 0;background:linear-gradient(var(--qs-sand),var(--qs-sand)) 50% 0/2px calc(100% - 40px*var(--s)) no-repeat,linear-gradient(var(--qs-saffron),var(--qs-saffron)) 0 calc(100% - 24px*var(--s))/100% calc(16px*var(--s)) no-repeat,repeating-linear-gradient(90deg,var(--qs-sand) 0 calc(2px*var(--s)),transparent calc(2px*var(--s)) calc(4px*var(--s))) 0 100%/100% calc(24px*var(--s)) no-repeat} .qs-tas-big:first-child{left:calc(50% - min(31vw,200px))}.qs-tas-big:last-child{left:calc(50% + min(31vw,200px))} .qs-wday{margin:0;font:700 clamp(1.6rem,2vw,2rem)/1.6 var(--i-font)} .qs-date{margin:0;font:700 clamp(2rem,9vw,4rem)/1.6 var(--i-font)} .qs-hall{width:min(100%,420px);aspect-ratio:4/5;object-fit:cover;margin:14px 0 10px;border:6px solid var(--qs-saffron);border-radius:50% 50% 0 0/40% 40% 0 0;box-shadow:0 0 0 12px var(--qs-deep),0 0 0 13px var(--qs-t1)} .qs-venue{margin:0;font:700 clamp(1.9rem,2.6vw,2.4rem)/1.6 var(--i-font);color:var(--qs-saffron)} .qs-addr{margin:0;max-width:32ch;font-size:clamp(.95rem,1.1vw,1.05rem);line-height:1.8;color:var(--qs-sand)} .qs-oculus{position:relative;z-index:1;width:min(78%,480px);aspect-ratio:1;border-radius:50%;background-size:cover;border:6px solid var(--qs-saffron);box-shadow:0 0 0 1px var(--qs-t3)} .qs-s5 .st-art{top:42%;left:50%;right:auto;width:min(120%,1000px);margin-left:calc(min(120%,1000px)/-2)} .qs-s5 .qs-cone{position:absolute;inset:0;clip-path:polygon(36% 0,64% 0,100% 100%,0 100%);background:linear-gradient(var(--qs-lit),transparent)} .qs-note{margin:0;max-width:44ch;font-size:clamp(1.05rem,1.3vw,1.2rem);line-height:2;white-space:pre-line} .qs-banner{position:relative;width:100%;margin-top:24px;color:var(--qs-saffron)} .qs-banner .qs-cord{height:60vh;background:var(--qs-sepia)} .qs-banner-sw{position:relative;display:block;transform-origin:50% 0} .qs-banner-in{display:block;padding:24px 28px 36px;background:var(--qs-indigo);box-shadow:0 4px 0 var(--qs-ishade)} .qs-card{width:100%;max-width:560px;display:grid;gap:14px;justify-items:center;padding:26px 22px;border-radius:6px;background:var(--qs-card);border:1px solid var(--qs-hair);color-scheme:light} .qs-card .rsvp-q{font-size:1.5rem;line-height:1.6} .qs-card .rsvp input,.qs-card .rsvp select{border:1px solid var(--qs-hair);border-radius:6px;background:var(--qs-field)} .qs-card .btn.soft{border:1.5px solid var(--qs-umber);color:var(--qs-umber)} .qs-cd{grid-template-columns:repeat(4,1fr);gap:10px;width:min(100%,584px);border-bottom:1px solid var(--qs-sepia)} .qs-cd .qs-cell{display:flex;flex-direction:column;justify-content:flex-end;gap:0;padding-bottom:10px;aspect-ratio:4/5;background:var(--qs-saffron);border-radius:50% 50% 0 0/40% 40% 0 0} .qs-cell strong{font:700 clamp(1.8rem,2.8vw,2.6rem)/1.3 var(--i-font);color:var(--qs-umber)} .qs-cell span{font:600 clamp(.74rem,.9vw,.85rem)/1.4 var(--i-body);color:var(--qs-umber)} .qs-after{margin:0;max-width:22ch;font:700 clamp(1.5rem,5vw,2.2rem)/1.7 var(--i-font)} .qs-thanks{margin:0;max-width:30ch;line-height:1.9} .qs-foot{margin:0;padding:6px 0 0;border:0;gap:10px} .qs-foot .foot-mark .mark{width:100px;height:auto} .qs-far{position:absolute;left:50%;bottom:56px;width:340px;height:180px;margin-left:-170px;border-bottom:1px solid var(--qs-sepia)} .qs-far .qs-a:last-child{box-shadow:inset 0 0 0 2px var(--rim),0 0 28px 8px var(--qs-glow)} @media (prefers-reduced-motion:no-preference){ .qs-arch{transition:opacity 1.1s var(--st-ease),transform 1.1s var(--st-ease)} html.io .inv.play .qs-s:not(.in) .qs-arch{opacity:0;transform:scale(.96)} html.io .inv.play .qs-s3:not(.in) .st-art{transform:translateY(-12px)} .qs-cell{transition:opacity .6s var(--st-ease) calc(var(--i,0)*90ms + .1s),transform .6s var(--st-ease) calc(var(--i,0)*90ms + .1s)} .qs-cell:nth-child(2){--i:1}.qs-cell:nth-child(3){--i:2}.qs-cell:nth-child(4){--i:3} html.io .inv.play .qs-s7:not(.in) .qs-cell{opacity:0;transform:translateY(16px)} html.io .inv.play .qs-s7:not(.in) .st-w>.qs-cd{opacity:1;transform:none} .qs-tassels.on .qs-tas-big,.qs-banner.on .qs-banner-sw{animation:qs-swing 6s ease-in-out infinite alternate} .qs-tassels.on .qs-tas-big:last-child{animation-delay:-3s} } @keyframes qs-swing{from{transform:rotate(-1.2deg)}to{transform:rotate(1.2deg)}} @media (prefers-reduced-motion:reduce){[data-style="qaysari"] [data-io="loop"] *{animation:none!important}} @media (max-height:640px){ .qs-cover{--qs-ch:23%} .qs-cloth[data-len="l"],.qs-cloth[data-len="xl"]{--qs-ch:28%} } @media (max-height:520px){ .qs-cover{--qs-k:.6;--qs-ct:12%;--qs-cw:min(50%,420px);--qs-oy:8%} .qs-cover .qs-cloth{--qs-fs:1.6rem;--qs-ch:auto} .qs-ckick{display:none} } @media (min-width:1024px){ .inv[data-style="qaysari"]{--qs-tile:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='480' height='480'%3E%3Cpath fill='none' stroke='%23F2C36B' stroke-opacity='.05' stroke-width='1.5' d='M90 470V240a150 150 0 0 1 300 0v230'/%3E%3C/svg%3E")} .qs-s[data-paper="u"]{--st-paper:var(--qs-tile) 0 0/480px 480px,var(--qs-umber)} .qs-cover{--qs-w:min(56vw,800px);--qs-k:.8;--qs-oy:14%;--qs-ow:calc(var(--qs-u)*56);--qs-ct:24%;--qs-ch:22%;--qs-cw:min(64%,640px)} .qs-cloth[data-len="l"],.qs-cloth[data-len="xl"]{--qs-ch:28%} .qs-a1{display:block;z-index:0;bottom:calc(100% - var(--qs-floor))} .qs-open{bottom:calc((100% - var(--qs-floor))/2 - 24px)} .qs-arch{--fw:min(34vw,460px)} .qs-s3{--s:1.5} .qs-hall{--hw:min(44vw,560px,52vh);width:var(--hw);aspect-ratio:5/4;border-radius:calc(var(--hw)/2) calc(var(--hw)/2) 0 0} .qs-card .rsvp-actions{grid-template-columns:1fr 1fr} } @media (min-width:1024px) and (max-height:820px){.qs-cover{--qs-floor:89%}} /* qela.css */ /* Citadel: Erbil's citadel over the Shar Park pool. The cover holds the afternoon; the tap brings the blue hour. Scenes are papers of the story frame (story.css); the colours are the colourway's --qa-*. Markup: styles/qela.ts. */ .inv[data-style=qela]{--qa-ease:cubic-bezier(.4,0,.2,1);--qa-hair:rgba(247,236,220,.35);--qa-vig:radial-gradient(120% 90% at 50% 40%,transparent 55%,rgba(28,43,75,.10));--qa-glow:linear-gradient(to bottom,rgba(241,178,122,0),rgba(241,178,122,.12) 20%,rgba(241,178,122,.32) 52%,rgba(241,178,122,.58))} /* ---- the cover ---- */ .inv[data-style=qela] .qa-cover{color:var(--qa-cream);background:var(--st-grain) 0 0 / 96px 96px,linear-gradient(var(--qa-sky) 40%,var(--qa-mid) 70%)} .inv[data-style=qela] .qa-cover>*{position:absolute} /* The last light, from the pool line up past the gate. */ .inv[data-style=qela] .qa-hz{left:0;right:0;bottom:30%;height:26%;background:var(--qa-glow)} .inv[data-style=qela] .qa-day{left:0;right:0;top:0;bottom:30%;background:radial-gradient(70% 46% at 50% 100%,rgba(255,246,232,.55),rgba(255,246,232,0) 72%),linear-gradient(to bottom,var(--qa-apl),#F5CBA0 55%,var(--qa-apr));transition:opacity .9s var(--qa-ease)} .inv[data-style=qela] .qa-cover .qa-city{left:0;right:0;bottom:30%;width:100%;height:var(--qa-ch,32%)} .inv[data-style=qela] .qa-pool{left:0;right:0;bottom:0;height:30%;display:block;background:linear-gradient(var(--qa-mid),var(--qa-sky));box-shadow:0 -1px 0 rgba(247,236,220,.8)} /* The horizon mirrored at the pool's far edge. */ .inv[data-style=qela] .qa-refl{position:absolute;inset:0;background:linear-gradient(to bottom,var(--qa-apr),#F5CBA0 40%,var(--qa-apl));-webkit-mask-image:linear-gradient(#000,rgba(0,0,0,.3) 8%,transparent 30%);mask-image:linear-gradient(#000,rgba(0,0,0,.3) 8%,transparent 30%);transition:opacity .9s var(--qa-ease)} .inv[data-style=qela] .qa-jets{left:50%;bottom:30%;width:min(100%,660px);aspect-ratio:600 / 170;transform:translateX(-50%);overflow:visible} .inv[data-style=qela] .qa-jets-r{bottom:auto;top:70%;opacity:.22;transform:translateX(-50%) scaleY(-1);-webkit-mask-image:linear-gradient(#000,transparent 60%);mask-image:linear-gradient(#000,transparent 60%)} .inv[data-style=qela] .qa-jets use{fill:var(--qa-cream)} .inv[data-style=qela] .qa-cover .qa-5g{opacity:0;transition:opacity .7s .1s} /* Jet motion is keyed on custom properties from the stage: the close and the reflection draw jets from defs, and a 's copies see no ancestor, so these three rules alone carry no .inv scope. */ .qa-j{transform-box:fill-box;transform-origin:50% 100%;animation:var(--qa-surge,none) .6s calc(.15s + var(--i) * 70ms) ease-in-out} .qa-sp{animation:var(--qa-drift,none) var(--qa-dd,4s) calc(var(--i) * .5s) ease-in-out infinite} .qa-gl{animation:var(--qa-breathe,none) 3s calc(var(--i) * .4s) ease-in-out infinite alternate} .inv[data-style=qela] .qa-cover .qa-jets{--qa-drift:qa-drift} @keyframes qa-drift{0%{opacity:0;transform:translateY(0)}30%{opacity:1}100%{opacity:0;transform:translateY(-10px)}} /* The words twice: indigo by day, cream at night. */ .inv[data-style=qela] .qa-words{left:24px;right:24px;top:9%;height:32%;display:grid;align-content:center;justify-items:center;text-align:center} .inv[data-style=qela] .qa-cw{grid-area:1 / 1;display:grid;gap:8px;justify-items:center;transition:opacity .5s} .inv[data-style=qela] .qa-cw-day{color:var(--qa-sky)} .inv[data-style=qela] .qa-cw-night{color:var(--qa-cream);opacity:0;transition:opacity .6s .3s} .inv[data-style=qela] .qa-ckick{margin:0;font-size:.9rem;font-weight:600} .inv[data-style=qela] .qa-cdate{margin:0;font-size:1rem} .inv[data-style=qela] .qa-names{margin:0;font-family:var(--i-font);font-weight:700;font-size:clamp(2.4rem,10vw,3.2rem);line-height:1.6;word-spacing:.2em;white-space:nowrap} .inv[data-style=qela] .qa-names[data-len=m]{font-size:clamp(2rem,8.5vw,2.8rem)} .inv[data-style=qela] .qa-names[data-len=l]{font-size:clamp(2rem,7.5vw,2.4rem)} .inv[data-style=qela] .qa-names[data-len=xl]{font-size:clamp(1.6rem,6.5vw,2rem)} .inv[data-style=qela] .qa-names em{font:600 .5em / 1 var(--i-body);font-style:normal;margin-inline:.15em;color:var(--qa-apr)} .inv[data-style=qela] .qa-cw-day em{color:var(--qa-far)} .inv[data-style=qela] .qa-stack{display:grid;white-space:normal} .inv[data-style=qela] .qa-stack em{padding:.1em 0 .3em} .inv[data-style=qela] .qa-open{left:50%;bottom:10%;transform:translate(-50%,50%);padding:13px 28px;border-radius:99px;background:var(--qa-cream);color:var(--qa-sky);font:700 1rem / 1.4 var(--i-body);text-decoration:none;white-space:nowrap;box-shadow:0 12px 28px -10px rgba(0,0,0,.5)} @media (max-height:520px){ .inv[data-style=qela] .qa-words{top:6%;height:30%} .inv[data-style=qela] .qa-cn[data-len=s]{font-size:clamp(2rem,8.5vw,2.8rem)} .inv[data-style=qela] .qa-open{bottom:8%} } /* The opening: the afternoon fades to the blue hour, the glows rise, each jet surges once, the square slides away. */ .inv[data-style=qela] .qa-cover.opening .qa-open{opacity:0;transition:opacity .15s} .inv[data-style=qela] .qa-cover.opening .qa-day, .inv[data-style=qela] .qa-cover.opening .qa-refl, .inv[data-style=qela] .qa-cover.opening .qa-cw-day{opacity:0;will-change:opacity} .inv[data-style=qela] .qa-cover.opening .qa-cw-night{opacity:1;will-change:opacity} .inv[data-style=qela] .qa-cover.opening .qa-5g{opacity:1} .inv[data-style=qela] .qa-cover.opening .qa-jets{--qa-surge:qa-surge} @keyframes qa-surge{50%{transform:scaleY(1.12)}} .inv[data-style=qela] .qa-cover.opening{animation:qa-away .5s .9s var(--qa-ease) forwards} @keyframes qa-away{to{transform:translateY(-8%);opacity:0}} /* ---- the scenes ---- */ .inv[data-style=qela] .qa-s[data-paper=indigo]{--st-paper:var(--qa-sky)} .inv[data-style=qela] .qa-s[data-paper=apricot]{--st-paper:var(--qa-vig),var(--qa-apl)} .inv[data-style=qela] .qa-s[data-paper=cream]{--st-paper:var(--qa-vig),var(--qa-cream)} .inv[data-style=qela] .qa-s[data-paper=apricot], .inv[data-style=qela] .qa-s[data-paper=cream]{--i-ink:var(--qa-sky);--i-muted:var(--qa-mutl);--i-accent-ink:var(--qa-sky);--qa-hair:rgba(28,43,75,.35);color:var(--i-ink)} .inv[data-style=qela] .qa-kick{display:flex;align-items:center;gap:14px;margin:0;font-size:.85rem;font-weight:600;color:var(--i-muted)} .inv[data-style=qela] .qa-kick::before,.inv[data-style=qela] .qa-kick::after{content:"";width:48px;height:1px;background:var(--qa-hair)} /* The rim along a scene's foot, in the last light. */ .inv[data-style=qela] .qa-s1,.inv[data-style=qela] .qa-s4{padding-bottom:30vh} .inv[data-style=qela] .qa-foot-art{height:34vh} .inv[data-style=qela] .qa-foot-art .qa-hz{position:absolute;inset:0;height:auto} .inv[data-style=qela] .qa-band{position:absolute;bottom:0;height:26vh} .inv[data-style=qela] .qa-bless{margin:0;max-width:28ch;font-size:1.06rem;line-height:1.9;color:var(--i-muted)} .inv[data-style=qela] .qa-bism{margin:0;font:400 1rem / 1.8 "Amiri","Noto Naskh Arabic",serif;color:var(--i-muted)} .inv[data-style=qela] .qa-lead{margin:0;max-width:26rem;font-size:1.1rem;line-height:1.95} .inv[data-style=qela] .qa-homes{width:min(48%,190px);height:auto;margin-top:14px} .inv[data-style=qela] .qa-jetd{width:100px;height:104px} .inv[data-style=qela] .qa-wd{margin:0;font-size:1.05rem;color:var(--i-muted)} .inv[data-style=qela] .qa-date{margin:0;font:700 clamp(1.9rem,8vw,2.6rem) / 1.5 var(--i-font);text-wrap:balance} .inv[data-style=qela] .qa-time{display:inline-block;padding:7px 20px;border-radius:99px;background:var(--qa-sky);color:var(--qa-cream);font-weight:700;font-size:.95rem} /* Arched paper windows; the couple's hard-shadowed, with a hairline for bright photos. */ .inv[data-style=qela] .qa-win{display:block;width:100%;max-width:720px;aspect-ratio:4 / 3;object-fit:cover;object-position:50% 50%;border:8px solid var(--qa-cream);border-radius:50% 50% 0 0 / 34% 34% 0 0;box-sizing:border-box;background:var(--qa-mid);box-shadow:0 10px 30px -12px rgba(0,0,0,.6)} .inv[data-style=qela] .qa-couple{width:82%;max-width:520px;aspect-ratio:4 / 5;background-size:cover;box-shadow:3px 4px 0 var(--qa-sky),0 0 0 1px rgba(28,43,75,.25)} .inv[data-style=qela] .qa-venue{margin:0;font:700 1.9rem / 1.5 var(--i-font)} .inv[data-style=qela] .qa-addr{margin:0;color:var(--i-muted)} .inv[data-style=qela] .qa-note{margin:0;max-width:26rem;font-size:1.05rem;line-height:1.9;white-space:pre-line;text-wrap:balance} .inv[data-style=qela] .qa-gate{width:150px;height:auto;margin-bottom:6px} /* The reply card: cream, arched, with the light token set for the base's fields; holding only a line (thanks, closed) the arch sits low. */ .inv[data-style=qela] .qa-s .qa-card{--i-bg:#FBF6EF;--i-surface:var(--qa-cream);--i-ink:var(--qa-sky);--i-ink-line:rgba(28,43,75,.6);--i-muted:var(--qa-mutl);--i-accent-ink:var(--qa-sky);--i-accent-line:rgba(28,43,75,.2);--i-shadow:rgba(0,0,0,.5);width:100%;max-width:520px;padding:max(26%,96px) 22px 26px;border:0;border-radius:50% 50% 0 0 / 120px 120px 0 0;background:var(--qa-cream);color:var(--i-ink);color-scheme:light;box-shadow:0 24px 48px -30px rgba(0,0,0,.7)} .inv[data-style=qela].rsvp-yes .qa-card,.inv[data-style=qela].rsvp-no .qa-card,.inv[data-style=qela] .qa-s .qa-short{padding-top:40px;border-radius:50% 50% 0 0 / 48px 48px 0 0} /* Four indigo tiles, rising in turn. */ .inv[data-style=qela] .qa-cd{grid-template-columns:repeat(4,minmax(0,1fr));gap:8px;max-width:520px} .inv[data-style=qela] .qa-tile{display:grid;gap:0;padding:12px 0 10px;background:var(--qa-sky);color:var(--qa-cream);border-radius:10px} .inv[data-style=qela] .qa-tile strong{font:700 1.9rem / 1.35 var(--i-font);font-variant-numeric:tabular-nums} .inv[data-style=qela] .qa-tile span{font-size:.78rem;color:var(--qa-mutd)} @media (prefers-reduced-motion:no-preference){ .inv[data-style=qela] .qa-tile{transition:opacity .7s var(--st-ease),transform .7s var(--st-ease);transition-delay:var(--d,0s)} .inv[data-style=qela] .qa-tile:nth-child(2){--d:.18s} .inv[data-style=qela] .qa-tile:nth-child(3){--d:.27s} .inv[data-style=qela] .qa-tile:nth-child(4){--d:.36s} html.io .inv[data-style=qela].play .st-s:not(.in) .qa-tile{opacity:0;transform:translateY(18px)} } .inv[data-style=qela] .qa-after{margin:0;max-width:26rem;font:700 1.6rem / 1.5 var(--i-font)} /* Thanks, and the square at night closing the page. */ .inv[data-style=qela] .qa-again{font-size:.98rem} .inv[data-style=qela] .qa-s .qa-foot{width:100%;margin:0;padding:22px 0 0;border-top:1px solid var(--qa-hair)} .inv[data-style=qela] .qa-s8{padding-bottom:44vh} .inv[data-style=qela] .qa-close{height:40vh} .inv[data-style=qela] .qa-close>*{position:absolute} .inv[data-style=qela] .qa-close .qa-hz{bottom:22%;height:50%} .inv[data-style=qela] .qa-close .qa-city{bottom:22%;height:78%} .inv[data-style=qela] .qa-close .qa-pool{height:22%} .inv[data-style=qela] .qa-close .qa-jets{bottom:22%} .inv[data-style=qela] .qa-close .qa-5g{opacity:.9} /* Idle, on screen only: the glows breathe, the spray drifts. */ .inv[data-style=qela] [data-io=loop].on{--qa-breathe:qa-breathe;--qa-drift:qa-drift;--qa-dd:5s} @keyframes qa-breathe{from{opacity:.8}to{opacity:1}} /* ---- a laptop: the square across the whole width ---- */ @media (min-width:1024px){ .inv[data-style=qela] .qa-cover{--qa-ch:36%} .inv[data-style=qela] .qa-hz{bottom:26%;height:30%} .inv[data-style=qela] .qa-day,.inv[data-style=qela] .qa-cover .qa-city,.inv[data-style=qela] .qa-jets{bottom:26%} .inv[data-style=qela] .qa-pool{height:26%} .inv[data-style=qela] .qa-jets{width:min(46vw,660px)} .inv[data-style=qela] .qa-jets-r{top:74%;bottom:auto} .inv[data-style=qela] .qa-words{top:12%;height:34%} .inv[data-style=qela] .qa-cw{gap:12px} .inv[data-style=qela] .qa-ckick{font-size:1.05rem} .inv[data-style=qela] .qa-cdate{font-size:1.15rem} .inv[data-style=qela] .qa-open{padding:15px 34px;font-size:1.05rem} .inv[data-style=qela] .qa-s1,.inv[data-style=qela] .qa-s4{padding-bottom:34vh} .inv[data-style=qela] .qa-foot-art{height:38vh} .inv[data-style=qela] .qa-band{height:30vh} .inv[data-style=qela] .qa-names{font-size:clamp(3.4rem,4.6vw,4.6rem)} .inv[data-style=qela] .qa-names[data-len=m]{font-size:clamp(3rem,4vw,4rem)} .inv[data-style=qela] .qa-names[data-len=l]{font-size:3.2rem} .inv[data-style=qela] .qa-names[data-len=xl]{font-size:2.6rem} .inv[data-style=qela] .qa-cn{font-size:clamp(3.6rem,5.6vw,5.5rem)} .inv[data-style=qela] .qa-cn[data-len=m]{font-size:clamp(3rem,4.8vw,4.6rem)} .inv[data-style=qela] .qa-cn[data-len=l]{font-size:3.8rem} .inv[data-style=qela] .qa-cn[data-len=xl]{font-size:3rem} /* Long names on one line: stacked, they reached the gate. */ .inv[data-style=qela] .qa-cn.qa-stack{display:flex;justify-content:center;align-items:baseline;gap:.3em;white-space:nowrap} .inv[data-style=qela] .qa-cn.qa-stack em{padding:0} .inv[data-style=qela] .qa-bless{font-size:1.15rem} .inv[data-style=qela] .qa-lead{font-size:1.2rem} .inv[data-style=qela] .qa-homes{width:220px} .inv[data-style=qela] .qa-gate{width:180px} .inv[data-style=qela] .qa-date{font-size:3rem} .inv[data-style=qela] .hall-photo.qa-win{aspect-ratio:16 / 10} .inv[data-style=qela] .qa-venue{font-size:2.2rem} .inv[data-style=qela] .qa-card .rsvp-actions{grid-template-columns:1fr 1fr} .inv[data-style=qela] .qa-tile strong{font-size:2.2rem} } /* A picker's cover is a phone's, at rest, the reflection's copies too. */ .cover-box .inv[data-style=qela] .qa-cover{--qa-ch:32%} .cover-box .inv[data-style=qela] .qa-jets{--qa-drift:none} /* Reduced motion: the cover rests at the blue hour; the base's short fade opens it. */ @media (prefers-reduced-motion:reduce){ .inv[data-style=qela] .qa-day,.inv[data-style=qela] .qa-refl,.inv[data-style=qela] .qa-cw-day{opacity:0} .inv[data-style=qela] .qa-cw-night,.inv[data-style=qela] .qa-cover .qa-5g{opacity:1} .qa-sp,.qa-gl,.qa-j{animation:none !important} } /* A phone saving data (html.calm): loops off. */ html.calm .inv[data-style=qela] .qa-cover .qa-jets,html.calm .inv[data-style=qela] [data-io=loop].on{--qa-drift:none;--qa-breathe:none} /* seal.css */ /* Seal: an envelope on linen and the suite inside it. Only the wax follows the colourway. Markup: styles/seal.ts */ .inv[data-style=seal]{--sl-e:cubic-bezier(.2,.8,.2,1);--sl-ew:min(88vw,360px);--sl-linen:url("data:image/svg+xml,"),repeating-linear-gradient(#ffffff09 0 1px,#0000 1px 3px),repeating-linear-gradient(90deg,#0000001a 0 1px,#0000 1px 3px),#24303D;--sl-liner:url("data:image/svg+xml,") 0 0/22px,var(--wax-liner);--sl-blob:url("data:image/svg+xml,");background:var(--sl-linen)} .inv[data-style=seal] .sl-cover{background:radial-gradient(120% 70% at 50% 42%,#fff1,#0000 60%),radial-gradient(90% 75% at 50% 45%,#0000 55%,#080c1266),var(--sl-linen)} .inv[data-style=seal] .sl-in{gap:26px} .inv[data-style=seal] .sl-in>*{color:var(--i-accent3)} .inv[data-style=seal] .sl-open{padding:8px 14px;line-height:28px;font-weight:600;text-decoration:underline;text-underline-offset:6px} .inv[data-style=seal] .sl-env{position:relative;width:var(--sl-ew);height:calc(var(--sl-ew)*.7)} .inv[data-style=seal] .sl-env>*{position:absolute} .inv[data-style=seal] .sl-back{inset:0;border-radius:5px;background:#DDD0BB;box-shadow:0 24px 30px -8px #0007,0 3px 5px #0005} .inv[data-style=seal] .sl-back::before{content:"";position:absolute;inset:0 3% 50%;background:var(--sl-liner);clip-path:polygon(0 0,100% 0,50% 100%)} .inv[data-style=seal] .sl-up{inset:auto 0 100%;height:54%;background:var(--sl-liner);clip-path:polygon(0 100%,100% 100%,50% 0);transform-origin:50% 100%;transform:scaleY(0)} .inv[data-style=seal] .sl-card{inset:5%;display:flex;flex-direction:column;align-items:center;gap:2%;padding:11% 6% 0;background:var(--i-surface);border-radius:2px;box-shadow:0 0 0 1px var(--i-accent2)} .inv[data-style=seal] .sl-card span{font-size:calc(var(--sl-ew)*.031);color:var(--i-muted)} .inv[data-style=seal] .sl-env b{font-family:var(--i-font);color:var(--i-ink);text-align:center} .inv[data-style=seal] .sl-card b{font-size:calc(var(--sl-ew)*.1*var(--k,1));line-height:1.35;text-wrap:balance} .inv[data-style=seal] .sl-env em{font-style:normal;margin-inline:.15em;color:var(--i-accent)} .inv[data-style=seal] .sl-front{inset:0;border-radius:5px;background:linear-gradient(170deg,#F3EBDD,#E9DECB);clip-path:polygon(0 0,50% 48%,100% 0,100% 100%,0 100%)} .inv[data-style=seal] .sl-addr{position:absolute;inset:auto 4% 6%;margin:0;display:grid;justify-items:center;line-height:1.3} .inv[data-style=seal] .sl-addr b{font-size:calc(var(--sl-ew)*(.03 + .05*var(--k,1)));white-space:nowrap} .inv[data-style=seal] [data-len=xl] .sl-addr{bottom:3%} .inv[data-style=seal] [data-len=xl] .sl-addr b{white-space:normal;text-wrap:balance;line-height:1.2} .inv[data-style=seal] .sl-addr span{font-size:max(11px,calc(var(--sl-ew)*.031));line-height:1.2;color:#58504A} .inv[data-style=seal] .sl-shade{inset:0 0 44.5%;filter:blur(1.5px)} .inv[data-style=seal] .sl-shade::before,.inv[data-style=seal] .sl-flap{clip-path:polygon(0 0,100% 0,50% 100%)} .inv[data-style=seal] .sl-shade::before{content:"";position:absolute;inset:0;background:#3c28142e} .inv[data-style=seal] .sl-flap{inset:0 0 46%;border-radius:5px 5px 0 0;background:linear-gradient(#F6EFE3,#EDE3D2);transform-origin:50% 0} .inv[data-style=seal] .sl-flap::after{content:"";position:absolute;inset:0;background:#3c281438;opacity:0} .inv[data-style=seal] .sl-seal,.inv[data-style=seal] .sl-half{left:38.5%;top:37.57%;width:23%;height:32.86%} .inv[data-style=seal] .sl-seal{filter:drop-shadow(0 3px 3px #0005)} .inv[data-style=seal] .sl-half{opacity:0;pointer-events:none} .inv[data-style=seal] .sl-l{clip-path:polygon(0 0,52% 0,47% 22%,55% 41%,46% 60%,53% 79%,49% 100%,0 100%)} .inv[data-style=seal] .sl-r{clip-path:polygon(52% 0,100% 0,100% 100%,49% 100%,53% 79%,46% 60%,55% 41%,47% 22%)} .inv[data-style=seal] .sl-wax,.inv[data-style=seal] .sl-wax i{position:absolute;inset:0} .inv[data-style=seal] .sl-wax i{-webkit-mask-image:var(--sl-blob);mask-image:var(--sl-blob)} .inv[data-style=seal] .sl-wax i:first-child{background:#0004;transform:translate(1.25%,2.5%)} .inv[data-style=seal] .sl-wax i+i{background:radial-gradient(80% 80% at 38% 32%,var(--wax-hi),var(--wax-mid) 45%,var(--wax-lo))} .inv[data-style=seal] .sl-front svg,.inv[data-style=seal] .sl-wax svg{position:absolute;inset:0;width:100%;height:100%;overflow:visible} .inv[data-style=seal] .sl-wax use{fill:var(--wax-disc);stroke:var(--wax-bead)} .inv[data-style=seal] .sl-wax text{font:700 29px var(--i-font);text-anchor:middle;fill:#0007} .inv[data-style=seal] .sl-wax text+text{fill:#ffffff40} .inv[data-style=seal] .sl-wax text+text+text{fill:var(--wax-initials)} @keyframes sl-in{from{opacity:0;transform:translateY(14px)}} @keyframes sl-press{from{opacity:0;transform:scale(1.25)}} .inv[data-style=seal] .opening .sl-in>:not(.sl-env){opacity:0;transition:opacity .25s} .inv[data-style=seal] .opening .sl-seal{opacity:0;animation:none} .inv[data-style=seal] .opening .sl-half{opacity:1;animation:sl-crack-l .35s cubic-bezier(.3,.7,.4,1) forwards} .inv[data-style=seal] .opening .sl-r{animation-name:sl-crack-r} .inv[data-style=seal] .opening .sl-shade{opacity:0;transition:opacity .2s} .inv[data-style=seal] .opening .sl-flap{animation:sl-fold .28s .3s cubic-bezier(.55,0,1,.45) forwards} .inv[data-style=seal] .opening .sl-flap::after{animation:sl-fade .28s .3s linear reverse forwards} .inv[data-style=seal] .opening .sl-up{animation:sl-unfold .32s .58s cubic-bezier(0,.55,.45,1) forwards} .inv[data-style=seal] .opening .sl-card{animation:sl-rise .7s .9s var(--sl-e) forwards} .inv[data-style=seal] .opening .sl-env{animation:sl-hold 1.85s .3s ease-in-out forwards,sl-fade .25s 1.6s ease-in forwards} .inv[data-style=seal] .sl-cover.opening{animation:sl-fade .28s 1.84s linear forwards} @keyframes sl-crack-l{40%{opacity:1}to{opacity:0;transform:translate(-23%,13%) rotate(-14deg)}} @keyframes sl-crack-r{40%{opacity:1}to{opacity:0;transform:translate(20%,18%) rotate(12deg)}} @keyframes sl-fold{to{transform:scaleY(0)}} @keyframes sl-unfold{to{transform:none}} @keyframes sl-rise{to{transform:translateY(-58%)}} @keyframes sl-fade{from{opacity:1}to{opacity:0}} @keyframes sl-hold{32%,70%{transform:translateY(30%)}to{transform:translateY(30%) scale(1.06)}} .inv[data-style=seal] :is(.lang-switch,.bar-btn){background:#fbf7f0eb;border-color:#b08a4580} .inv[data-style=seal] .lang-switch a[aria-current]{background:var(--i-accent);color:var(--i-surface)} .inv[data-style=seal] .inv-page{padding:6px 16px 0;overflow-x:clip} .inv[data-style=seal] .sl-sec{display:block;justify-items:normal;padding:0;margin:0 0 40px} .inv[data-style=seal] .sl-paper{--i-accent-ink:var(--i-accent);position:relative;isolation:isolate;display:grid;gap:14px;justify-items:center;padding:34px 22px 30px} .inv[data-style=seal] .sl-paper::before,.inv[data-style=seal] .sl-paper::after{content:"";position:absolute;inset:0;z-index:-1} .inv[data-style=seal] .sl-paper::after{background:var(--sl-stock,#FBF7F0);box-shadow:0 0 0 var(--sl-gilt,1px) #B08A45,0 22px 30px -20px #0009,0 2px 4px #0004} .inv[data-style=seal] .sl-paper::before{background:var(--sl-under,#E8DCCB);transform:var(--sl-ut,rotate(-1.4deg) translate(-3px,8px));box-shadow:0 10px 20px -12px #0009} .inv[data-style=seal] .sl-main{--sl-gilt:1.5px;padding-top:40px} .inv[data-style=seal] .sl-main::after{outline:1px solid #b08a458c;outline-offset:-10px} .inv[data-style=seal] .sl-mini{position:relative;width:72px;height:72px} .inv[data-style=seal] .sl-names{font-size:calc(var(--k,1)*clamp(3rem,15vw,4rem));line-height:1.25;text-shadow:0 1px 0 #ffffffb3} .inv[data-style=seal] .sl-names em{line-height:1.6} .inv[data-style=seal] .sl-print{position:relative;width:78%;margin:34px auto 0;padding:10px;background:#fff;transform:rotate(2deg);box-shadow:0 18px 26px -16px #000b,0 2px 5px #0004} .inv[data-style=seal] .sl-print i{display:block;padding-top:125%;background-size:cover} .inv[data-style=seal] .sl-print::after,.inv[data-style=seal] .sl-snap::after{content:"";position:absolute;inset:-3px;border:26px solid;border-image:url("data:image/svg+xml,") 26} .inv[data-style=seal] .sl-snap::after{border-width:15px} .inv[data-style=seal] .sl-date{--sl-stock:#F3E7DD;--sl-under:#FBF7F0;--sl-ut:rotate(1.6deg) translate(5px,8px);width:92%;margin-inline-start:4%;gap:12px} .inv[data-style=seal] .sl-cd div+div{border-inline-start:1px solid var(--i-accent-line)} .inv[data-style=seal] .sl-cd strong{font-family:var(--i-font);font-size:2.3rem} .inv[data-style=seal] .when-date span{display:block} .inv[data-style=seal] .sl-time{margin:0;font-weight:700;color:var(--i-accent)} .inv[data-style=seal] .sl-cal{--sl-gilt:0;--sl-ut:scale(0);width:70%;margin:-18px 0 0;margin-inline-start:24%;padding:22px 16px 16px;gap:4px} .inv[data-style=seal] .sl-cal-h{margin:0;font:700 1.4rem/1.5 var(--i-font)} .inv[data-style=seal] .sl-cal-h span+span{font-size:.72em;color:var(--i-muted)} .inv[data-style=seal] .sl-grid{display:grid;grid-template-columns:repeat(7,1fr);width:100%;font-size:.9rem;font-weight:600;line-height:2.1} .inv[data-style=seal] .sl-grid b{font-size:.72rem;color:var(--i-muted)} .inv[data-style=seal] .sl-grid i{position:relative;font-style:normal} .inv[data-style=seal] .sl-grid .sl-fri{color:var(--i-accent)} .inv[data-style=seal] .sl-day svg{position:absolute;left:-14%;top:-10%;width:128%;height:120%;overflow:visible} .inv[data-style=seal] .sl-day path{stroke:var(--i-accent)} .inv[data-style=seal] .sl-venue{--sl-stock:#EEF0EA;--sl-under:#F3E7DD;--sl-ut:rotate(-1.6deg) translate(-8px,7px);width:94%;gap:12px} .inv[data-style=seal] .sl-snap{order:-1;position:relative;width:58%;margin:-54px 0 6px;padding:6px;background:#fff;transform:rotate(-1.5deg);box-shadow:0 12px 18px -10px #000a,0 1px 3px #0003} .inv[data-style=seal] .sl-snap:empty{display:none} .inv[data-style=seal] .sl-hall{border:0;border-radius:0} .inv[data-style=seal] .btn{border-radius:2px;box-shadow:none} .inv[data-style=seal] .btn.soft{border-color:#2a262299} .inv[data-style=seal] :is(.sl-where,.sl-note){margin-bottom:26px} .inv[data-style=seal] .sl-note{display:flex} .inv[data-style=seal] .sl-tag{position:relative;max-width:min(88%,22rem);margin-inline:auto 8%;filter:drop-shadow(0 8px 10px #0006)} .inv[data-style=seal] .sl-tag .note{max-width:none;border:0;border-radius:0;padding:14px 22px 14px 44px;text-align:start;background:var(--i-surface);clip-path:polygon(0 50%,22px 0,100% 0,100% 100%,22px 100%)} .inv[data-style=seal] .sl-cord{position:absolute;z-index:1;left:-21.5px;top:calc(50% - 30px);width:44px;height:72px;overflow:visible} .inv[data-style=seal] .rsvp-card{--sl-under:#EDE3D2;--sl-ut:rotate(1.4deg) translate(3px,8px);width:86%;margin-inline-start:14%} .inv[data-style=seal] .rsvp :is(input,select){min-height:46px;padding-inline:2px;background:none;border:0;border-bottom:1px solid #2a262299;border-radius:0} .inv[data-style=seal] .sl-foot{margin:0;padding:12px 0 44px;border:0} .inv[data-style=seal] .sl-foot>*{color:var(--i-accent3)} .inv[data-style=seal] .sl-foot p{color:#CFC4B3} .inv[data-style=seal]~.toast{background:#FBF7F0;color:#2A2622;box-shadow:0 0 0 1px #B08A45} @media (prefers-reduced-motion:no-preference){ .inv[data-style=seal] .sl-env{animation:sl-in .7s var(--sl-e) backwards} .inv[data-style=seal] .sl-seal{animation:sl-press .5s .45s var(--sl-e) backwards} html.io .inv[data-style=seal].play [data-io]:not(.in){opacity:0;transform:translateY(18px) rotate(.6deg)} html.io .inv[data-style=seal].play .sl-cal:not(.in) path{stroke-dashoffset:1} .inv[data-style=seal] [data-io].in{transition:opacity .6s,transform .9s var(--sl-e)} .inv[data-style=seal] :is(.inv-side [data-io],.sl-cal).in{transition-delay:.09s} .inv[data-style=seal] .sl-cal.in path{transition:stroke-dashoffset .65s .5s ease-in-out} } @media (max-height:480px){ .inv[data-style=seal]{--sl-ew:min(44vw,300px)} .inv[data-style=seal] .sl-in{gap:12px} } @media (min-width:1024px){ .inv[data-style=seal]{--sl-ew:min(40vw,540px)} .inv[data-style=seal] .sl-in{gap:34px} .inv[data-style=seal] .sl-in>*{font-size:1.12rem} .inv[data-style=seal] .inv-page{column-gap:64px;padding:20px 32px 40px} .inv[data-style=seal] :is(.inv-sheet,.inv-side>.inv-sec){display:block;min-height:0;padding:0;border-radius:0;background:none;box-shadow:none} .inv[data-style=seal] .inv-side{display:block;padding-top:56px;align-self:center} .inv[data-style=seal] .sl-main{min-height:700px;padding:56px 48px 48px;align-content:center;gap:18px} .inv[data-style=seal] .sl-names{font-size:calc(var(--k,1)*4.4rem)} .inv[data-style=seal] .sl-print{width:52%;margin:-40px auto 0 5%} .inv[data-style=seal] .sl-cal{width:56%;margin-inline-start:38%} .inv[data-style=seal] .sl-w2{display:grid;grid-template-columns:60% 40%;align-items:start;gap:0} .inv[data-style=seal] .sl-w2 .sl-date{width:auto;margin:0} .inv[data-style=seal] .sl-w2 .sl-cal{width:auto;margin:44px 0 0;margin-inline-start:-16px} } .cover-box .inv[data-style=seal]{--sl-ew:340px} /* semom.css */ /* سێ مۆم (Three Candles): only what differs from the film engine (film.css). Markup and config: styles/semom.ts. */ /* The velvet is all but black: the scrim only deepens it a little. */ .inv[data-style=semom] .fm-at{--fm-scrim:.3} /* Left to right (2026-10-03): the film lights the candles right to left, whatever the page's language, so the dots light in the candles' order: the first on the right. */ .inv[data-style=semom][dir=ltr] .cn-dots{flex-direction:row-reverse} /* tara.css */ /* تارا (The Veil): its scene on the tactile kit (functions/src/invite/styles/tara.ts; tactile.css, film.css). Every rule under .inv[data-style=tara]. Layers: .tc-layer[data-l=] > .tc-pic; the gesture's progress: --tc-p (unset on a cover at rest and in the pickers, the closed state; the finger's on the cover; 1 on the hero, the opened state). The static rules draw the veil lying on the card; the lift is a paused animation scrubbed by --tc-p, only where motion is wanted (a reduced-motion cover fades straight onto the hero, invite.js). Bump ASSET_VERSION in functions/src/invite/render.ts when this changes. */ /* ---------- the veil: light laid over the scene (screen), as the board composed it ---------- */ /* The veil and the hem are light on black: screened over the satin and the card they are a mist the card shows through, their lace and pearls white. The layer itself blends (the kit moves it), inside the stage. */ .inv[data-style=tara] .tc-layer[data-l=veil],.inv[data-style=tara] .tc-layer[data-l=hem]{mix-blend-mode:screen} .inv[data-style=tara] .tc-layer[data-l=veil] .tc-pic,.inv[data-style=tara] .tc-layer[data-l=shade] .tc-pic{transform-origin:50% 0;will-change:transform,opacity} /* The hem: the lace under its band of tulle, repeating across (hem.webp, five scallops), as tall as its box. */ .inv[data-style=tara] .tc-layer[data-l=hem] .tc-pic{background:url(/assets/scenes/tara/hem.webp?v=32) 50% 0/auto 100% repeat-x;transform-origin:50% 0} /* The card's daylight: a soft ivory light on it that comes up as the veil goes (on the hero, there). */ .inv[data-style=tara] .tc-layer[data-l=glow] .tc-pic{background:radial-gradient(36% 23% at 50% 49.5%,rgba(255,253,249,.5),rgba(255,251,246,.22) 55%,rgba(255,251,246,0));opacity:var(--tc-p,0)} @media (min-aspect-ratio:1/1){.inv[data-style=tara] .tc-layer[data-l=glow] .tc-pic{background:radial-gradient(17% 38% at 50% 48.4%,rgba(255,253,249,.5),rgba(255,251,246,.22) 55%,rgba(255,251,246,0))}} /* The sheen drifting over the satin (the kit's sweep): broad and faint, a daylight on silk, not a glint on gold. */ .inv[data-style=tara] .tc-layer[data-l=satin] .tc-sweep::before{left:-90%;width:90%;background:linear-gradient(105deg,rgba(255,250,246,0) 15%,rgba(255,250,246,.2) 45%,rgba(255,252,250,.26) 52%,rgba(255,250,246,0) 85%)} /* ---------- the cover at rest: the veil lying over the card ---------- */ /* The hero's names are on the card from the start (names: under), the cover's own line of them and its date not shown. The softness under the tulle is the tulle's own mist over the card, never the ink's: the names were blurred and at .74 of their ink, 3.8:1 in Kurdish and Arabic and 2.5 to 3.6 in English's thin script (2026-10-04). They stand at .94 now, their plum a fifth deeper (and the و with it) until the veil lifts, when it is the hero's own again, so the handover is in place: 7:1 and more on every screen, measured on their glyphs. (Where a filter takes no calc(), the hero's plum at .94: 6:1.) The date and its pearls come up under them once the veil is half away. The occasion's line at the top goes with the veil (the hero has none). */ .inv[data-style=tara] .fm-cover .fm-names,.inv[data-style=tara] .fm-cover .fm-date{opacity:0} .inv[data-style=tara] .fm-cover .fm-anames{opacity:calc(.94 + .06 * var(--tc-p,0));filter:brightness(calc(.8 + .2 * var(--tc-p,0)))} .inv[data-style=tara] .fm-cover .fm-adate{opacity:calc(var(--tc-p,0) * 2.2 - .9)} .inv[data-style=tara] .fm-cover.tc-ready .fm-kick{opacity:calc(1.6 - var(--tc-p,0) * 2.4)} .inv[data-style=tara] .fm-cover .tc-layer[data-l=hem] .tc-pic{opacity:0} /* The veil's glints go with it. */ .inv[data-style=tara] .fm-cover .tc-layer[data-l=hem]+.tc-amb{opacity:calc(1 - var(--tc-p,0) * 3)} /* ---------- the names on the card: the strand of pearls between them and the date, a light gliding over it ---------- */ .inv[data-style=tara] .fm-adate::before{content:"";display:block;width:9.2em;max-width:100%;height:1.28em;margin:.1em auto .5em;background:linear-gradient(100deg,rgba(255,255,255,0) 35%,rgba(255,255,255,.85) 50%,rgba(255,255,255,0) 65%) -160% 0/45% 100% no-repeat,url(/assets/scenes/tara/orn/pearls.webp?v=32) 50% 50%/contain no-repeat;-webkit-mask:url(/assets/scenes/tara/orn/pearls.webp?v=32) 50% 50%/contain no-repeat;mask:url(/assets/scenes/tara/orn/pearls.webp?v=32) 50% 50%/contain no-repeat} /* The date a step deeper than the pearls' rose (#8A6470 read 4.4 to 4.5:1 in its thin strokes on a 320 px phone, 2026-10-04): the plum English already had. */ .inv[data-style=tara] .fm-adate{color:#74505C;letter-spacing:.02em} .inv[data-style=tara] .fm-anames em{color:#A9727B} /* A name wider than its place on the card (Abdulrahman in the script's wide hand, which film.js makes no smaller than 0.72 of its size) stands centred on the card, as a shorter one does, rather than running off its far edge: the grid's track, grown to the name, is centred on the place, not started at its edge. */ .inv[data-style=tara] .fm-awords,.inv[data-style=tara] .fm-big{justify-content:center} /* An English name that runs long (data-len xl) starts smaller on a phone held upright, so film.js's fit, which makes it no smaller than 0.72 of where it starts, brings it inside the card's inner line: Abdulrahman began at 33.6 px on a 320 px phone, came to 24 px at that floor and still ran over the card's deckled edge onto the satin (2026-10-04). The names' place (tara.ts, 44% of the frame) is already inside that line (26% to 75% of the frame across). */ @media not all and (min-aspect-ratio:1/1){.inv[data-style=tara][lang=en] .fm-anames[data-len=xl]{font-size:clamp(1.4rem,7.8vw,2.6rem)}} /* ---------- the hero's cue to read on ---------- */ /* The cue to read on: a pearl-white disc with a plum chevron, not the films' smoked glass, on this pale scene. */ .inv[data-style=tara] .fm-cue{border-color:rgba(142,85,98,.55);background:rgba(255,250,248,.6);box-shadow:0 6px 16px -6px rgba(92,48,56,.35)} .inv[data-style=tara] .fm-cue i{border-color:#8E5562} /* ---------- motion: the lift, the breath, the ask ---------- */ @media (prefers-reduced-motion:no-preference){ /* The lift, scrubbed by the progress: the hem rises first and toward the eye (the veil turns about its top, its foot coming nearer), then the whole veil floats up and back off the top with a little tilt, thinning as it goes. Its shadow falls behind and fades as it rises away from the card. The hem comes to rest along the top as it leaves. */ html:not(.calm) .inv[data-style=tara] .fm-cover .tc-layer[data-l=veil] .tc-pic{animation:tr-lift 1s linear both paused;animation-delay:calc(var(--tc-p,0) * -1s)} html:not(.calm) .inv[data-style=tara] .fm-cover .tc-layer[data-l=shade] .tc-pic{animation:tr-shade 1s linear both paused;animation-delay:calc(var(--tc-p,0) * -1s)} html:not(.calm) .inv[data-style=tara] .fm-cover .tc-layer[data-l=hem] .tc-pic{animation:tr-settle 1s linear both paused;animation-delay:calc(var(--tc-p,0) * -1s)} /* While it waits: the tulle breathes, and every few seconds its hem lifts a little, as if a breath of air caught it, asking for the finger. Once a finger is on it, only the breath. */ html:not(.calm) .inv[data-style=tara] .fm-cover .tc-layer[data-l=veil] .tc-pic>*{transform-origin:50% 0;animation:tr-breathe 7s ease-in-out infinite alternate,tr-ask 5.2s cubic-bezier(.45,0,.3,1) 1.6s infinite} html:not(.calm) .inv[data-style=tara] .fm-cover.tc-started .tc-layer[data-l=veil] .tc-pic>*{animation:tr-breathe 7s ease-in-out infinite alternate} html:not(.calm) .inv[data-style=tara] .fm-cover .tc-layer[data-l=shade] .tc-pic>*{transform-origin:50% 0;animation:tr-ask-shade 5.2s cubic-bezier(.45,0,.3,1) 1.6s infinite} html:not(.calm) .inv[data-style=tara] .fm-cover.tc-started .tc-layer[data-l=shade] .tc-pic>*{animation:none} /* The light on the pearls under the names: a slow gleam along the strand while it is on screen. */ html:not(.calm) .inv[data-style=tara] .fm-after.in .fm-adate::before{animation:tr-gleam 6.5s ease-in-out 2.2s infinite} /* As the veil leaves the card, the loose pearls on the satin catch the light, one after another. */ html:not(.calm) .inv[data-style=tara] .fm-cover.tc-done .tc-layer[data-l=hem]+.tc-amb+.tc-amb i{animation:tr-flare 1.1s cubic-bezier(.2,.7,.3,1) both} html:not(.calm) .inv[data-style=tara] .fm-cover.tc-done .tc-layer[data-l=hem]+.tc-amb+.tc-amb i:nth-child(2){animation-delay:.14s} html:not(.calm) .inv[data-style=tara] .fm-cover.tc-done .tc-layer[data-l=hem]+.tc-amb+.tc-amb i:nth-child(3){animation-delay:.26s} html:not(.calm) .inv[data-style=tara] .fm-cover.tc-done .tc-layer[data-l=hem]+.tc-amb+.tc-amb i:nth-child(4){animation-delay:.36s} html:not(.calm) .inv[data-style=tara] .fm-cover.tc-done .tc-layer[data-l=hem]+.tc-amb+.tc-amb i:nth-child(5){animation-delay:.44s} /* The page's playful moment (skins/tara.css draws it): the day's leaf waits under a little veil of tulle, which lifts off it, floating up and away, once the leaf itself is well on screen (.tc-seen, tactile.js watchLeaf; keyed on its section, the lift was over while the leaf was still below the fold). Only once the page has played its opening (.play), and only where the kit's script watches the leaf (.tc-leafio): a page without script, reduced motion and a returning guest have the leaf unveiled. */ html.io:not(.calm) .inv[data-style=tara] .sk-cal::after{transition:transform 1.3s .3s cubic-bezier(.3,.1,.2,1),opacity 1s .55s ease-in} html.io:not(.calm) .inv[data-style=tara].tc-leafio.play .cn-when .sk-cal:not(.tc-seen)::after{opacity:1;transform:none;transition:none} } @keyframes tr-flare{0%{opacity:0;transform:scale(calc(var(--z,1) * .2)) rotate(0deg)}35%{opacity:1;transform:scale(calc(var(--z,1) * 1.5)) rotate(30deg)}100%{opacity:0;transform:scale(calc(var(--z,1) * .4)) rotate(60deg)}} @keyframes tr-lift{ 0%{transform:none;opacity:1} 20%{transform:perspective(1500px) rotateX(10deg) translate(0,-3%) scale(1,.975);opacity:1} 45%{transform:perspective(1500px) rotateX(22deg) translate(-1%,-16%) rotate(-1.5deg) scale(1.03,.9);opacity:1} 72%{transform:perspective(1500px) rotateX(28deg) translate(-2.8%,-50%) rotate(-3.6deg) scale(1.06,.85);opacity:.78} 100%{transform:perspective(1500px) rotateX(32deg) translate(-4.4%,-100%) rotate(-5.5deg) scale(1.08,.8);opacity:0} } @keyframes tr-shade{ 0%{transform:none;opacity:1} 16%{transform:translate(.3%,-1.6%) scale(1.01);opacity:.55} 34%{transform:translate(.8%,-4%) scale(1.03);opacity:0} 100%{transform:translate(.8%,-4%) scale(1.03);opacity:0} } @keyframes tr-settle{ 0%,58%{transform:translateY(-100%);opacity:0} 78%{opacity:.85} 100%{transform:none;opacity:1} } @keyframes tr-breathe{from{rotate:-.25deg;scale:1 1}to{rotate:.25deg;scale:1.006 1.012}} @keyframes tr-ask{0%,64%,100%{translate:0 0}74%{translate:0 -1.6%}82%{translate:0 -.4%}88%{translate:0 -.9%}} @keyframes tr-ask-shade{0%,64%,100%{translate:0 0;opacity:1}74%{translate:.3% -1%;opacity:.8}82%{translate:0 -.2%;opacity:.95}88%{translate:.1% -.5%;opacity:.9}} @keyframes tr-gleam{0%{background-position:-160% 0,50% 50%}38%,100%{background-position:260% 0,50% 50%}} /* ---------- the date fits the card on every screen ---------- */ /* A phone's card is 58% of the frame, which is as wide as the window or 0.56 times as tall as it is. */ @media not all and (min-aspect-ratio:1/1){.inv[data-style=tara] .fm-adate{font-size:clamp(.7rem,min(4.2vw,2vh),1.15rem)}} /* A wide screen's card is 27% of the frame, which is as wide as the window or 1.79 times as wide as it is tall. */ @media (min-aspect-ratio:1/1){.inv[data-style=tara] .fm-adate{font-size:clamp(.72rem,max(1.55vw,2.77vh),1.35rem)}} /* A phone held sideways: the card is narrow (27% of a window only 800 or so wide), so the date is small. */ @media (min-aspect-ratio:1/1) and (max-height:500px){.inv[data-style=tara] .fm-adate{font-size:.7rem}.inv[data-style=tara] .fm-anames{font-size:clamp(1.9rem,9.5vh,3rem)}.inv[data-style=tara] .fm-awords,.inv[data-style=tara] .fm-big{--fm-nudge:-10px}} /* English sets its date in tracked capitals (film.css): the same fit, a step smaller, but never under 12 px (it was 10.2 px on a 320 px phone), a little less tracked there so it keeps to the card, and in a deeper plum: Cormorant's capitals are thin, and the Kurdish date's colour read about 4:1 in them. */ @media not all and (min-aspect-ratio:1/1){.inv[data-style=tara][lang=en] .fm-adate{font-size:clamp(.75rem,min(3.45vw,1.8vh),.94rem)}} @media (max-aspect-ratio:1/1) and (max-width:359px){.inv[data-style=tara][lang=en] .fm-adate{letter-spacing:.1em}} .inv[data-style=tara][lang=en] .fm-adate{color:#74505c} @media (min-aspect-ratio:1/1) and (max-height:500px){.inv[data-style=tara][lang=en] .fm-adate{font-size:.64rem}} /* tewn.css */ /* Tewn (تەون), the kilim. Markup and colourway tiles: styles/tewn.ts. */ .inv[data-style="tewn"]{--tw-stair:polygon(8px 0,calc(100% - 8px) 0,calc(100% - 8px) 4px,calc(100% - 4px) 4px,calc(100% - 4px) 8px,100% 8px,100% calc(100% - 8px),calc(100% - 4px) calc(100% - 8px),calc(100% - 4px) calc(100% - 4px),calc(100% - 8px) calc(100% - 4px),calc(100% - 8px) 100%,8px 100%,8px calc(100% - 4px),4px calc(100% - 4px),4px calc(100% - 8px),0 calc(100% - 8px),0 8px,4px 8px,4px 4px,8px 4px); --tw-weave:repeating-linear-gradient(#0000 0 2px,#14060412 0 3px); --tw-frame:url("data:image/svg+xml,"); --tw-runner:var(--tw-gr) 100% 0/16px repeat-y,var(--tw-gl) 0 0/16px repeat-y,var(--tw-weave),var(--tw-ground); background:var(--tw-runner)} .tw-open,.tw-tag,.tw-panel .btn,.tw-panel .soft::before,.inv[data-style="tewn"] [aria-current],.inv[data-style="tewn"] .lang-switch,.inv[data-style="tewn"] .bar-btn{-webkit-clip-path:var(--tw-stair);clip-path:var(--tw-stair)} /* Reem Kufi's word space is half the body face's. */ .tw-names,.tw-panel .venue,.tw-panel .rsvp-q,.tw-after{word-spacing:.14em} /* Cover: --tw-r half the lattice's width, --tw-g its guard stripes, --tw-k its scale. */ .inv .tw-cover{--tw-k:1;--tw-r:50%;--tw-g:0px;background:var(--tw-ground)} .tw-cover::before{content:"";position:absolute;inset:0 calc(50% - var(--tw-r));box-shadow:0 0 60px #0008} .tw-half{position:absolute;inset:0;background:var(--tw-lat) 50% 0/80px; --tw-cut:url("data:image/svg+xml,") calc(50% + 20px) 0/40px 80px repeat-y,linear-gradient(90deg,#0000 calc(50% + 40px),#000 0 calc(50% + var(--tw-r)),#0000 0); -webkit-mask:var(--tw-cut);mask:var(--tw-cut)} .tw-l{--tw-cut:url("data:image/svg+xml,") calc(50% + 20px) 0/40px 80px repeat-y,linear-gradient(90deg,#0000 calc(50% - var(--tw-r)),#000 0 50%,#0000 0)} .tw-half::after{content:"";position:absolute;inset:0;background:var(--tw-weave),radial-gradient(#0000 40%,#14060490)} .tw-edge{position:absolute;inset:0 auto 0 calc(50% + var(--tw-r) - var(--tw-g));width:var(--tw-g);background:var(--tw-gr) 0 0/16px} .tw-l .tw-edge{inset:0 calc(50% + var(--tw-r) - var(--tw-g)) 0 auto;background-image:var(--tw-gl)} .inv .tw-scroll{padding:max(24px,env(safe-area-inset-top)) 16px max(46px,env(safe-area-inset-bottom) + 30px);font-size:calc(16px * var(--tw-k))} .tw-med{position:relative;flex:none;margin:auto;width:min(80%,18.75em);animation:tw-in .8s .1s backwards} .tw-med::after{content:"";display:block;padding-top:140.1%} .tw-med-bg{position:absolute;left:-6.8%;top:-4.85%;width:113.6%;height:109.7%;filter:drop-shadow(0 14px 22px #14060473)} .tw-halo{fill:var(--tw-ground)} .tw-mo{fill:var(--tw-motif)} .tw-med-in{position:absolute;inset:18% 11% 17%;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:.625em} .tw-kick{margin:0;font-size:.78em;font-weight:600;line-height:1.6;color:var(--i-muted);text-wrap:balance} .tw-names{margin:0;display:grid;justify-items:center;font:700 2.75em/1.18 var(--i-font);color:var(--i-ink);text-wrap:balance} .tw-names[data-len="m"]{font-size:2.25em} .tw-names[data-len="l"]{font-size:1.875em} .tw-names[data-len="xl"]{font-size:1.625em} .tw-names em{position:relative;z-index:0;margin:.5em 0;font:normal 700 max(.43em,12px)/1 var(--i-font);color:var(--i-surface)} .tw-names em::before{content:"";position:absolute;z-index:-1;left:50%;top:50%;width:1.12em;height:1.12em;margin:-.6em 0 0 -.56em;background:var(--i-accent);transform:rotate(45deg)} .tw-date{margin:0;display:grid;font-size:.84em;font-weight:600;line-height:1.6;color:var(--i-ink)} .tw-open{flex:none;align-self:center;margin-top:1.375em;padding:5px;background:var(--tw-ground);color:var(--i-ink);text-decoration:none;animation:tw-breathe 2.4s 1s ease-in-out infinite alternate} .tw-open span{display:block;padding:.19em 1em;border:12px solid;border-image:var(--tw-frame) 24 fill;font:700 1em/1.3 var(--i-body)} @keyframes tw-in{from{opacity:0;transform:scale(.96)}} @keyframes tw-breathe{to{transform:scale(1.03)}} /* A photo: the window, and the names on a plaque over the lower cap. */ .tw-med.tw-med-photo{width:min(70%,16.5em);margin:auto auto 0;isolation:isolate} @media (min-height:700px){.tw-med.tw-med-photo{width:min(80%,18.75em)}} .tw-pic{position:absolute;z-index:-1;left:14%;top:21.4%;width:72%;height:51.4%;background-size:cover} .tw-plaque{position:relative;flex:none;align-self:center;display:grid;gap:.375em;width:min(92%,21.25em);margin:-2.875em 0 auto;border:24px solid;border-image:var(--tw-frame) 24 fill;filter:drop-shadow(0 10px 16px #14060466);animation:tw-in .8s .2s backwards} .tw-names.tw-line{display:block;font-size:2.125em;line-height:1.35} .tw-line[data-len="m"]{font-size:1.875em} .tw-line[data-len="l"]{font-size:1.56em} .tw-line[data-len="xl"]{font-size:1.31em} .tw-line em{margin:0 .45em;font-size:.47em} /* Opening: the weave parts along its slit. */ .inv .tw-cover.opening{background:#0000} .opening .tw-scroll{opacity:0;transform:scale(.96);transition:.22s} .opening .tw-half{will-change:transform;transform:translateX(104%);transition:transform .95s .12s cubic-bezier(.7,0,.2,1)} .opening .tw-l{transform:translateX(-104%);transition-delay:.18s} /* The page: a runner of woven panels. */ .inv[data-style="tewn"] .inv-page{padding:14px 16px 0} .tw-top{display:none} .tw-panel.tw-panel{margin:0 10px;padding:4px 0;gap:12px;border:24px solid;border-image:var(--tw-frame) 24 fill} .tw-weft{position:relative;overflow:hidden;height:18px;margin:18px 10px} .tw-weft::before{content:"";position:absolute;inset:0;background:var(--tw-weft) 50% 0/16px repeat-x} .tw-gul{width:48px;height:48px} .tw-hero.tw-hero{font-size:19.6px;padding-block:10px 12px} .tw-hero .lead{font-size:15.5px;max-width:27ch} .tw-panel .kick{color:var(--i-accent)} /* 12px stepped diamonds: saffron between the units, accent guls at panel heads. */ .tw-u+.tw-u::before,.tw-panel .kick::before,.tw-panel .kick::after,.tw-note::before{content:"";width:12px;height:12px;--tw-dc:#D9A13B;background:linear-gradient(#D9A13B 0 0) 50%/4px 4px,linear-gradient(var(--tw-dc) 0 0) 50%/4px 12px,linear-gradient(var(--tw-dc) 0 0) 50%/8px 8px,linear-gradient(var(--tw-dc) 0 0) 50%/12px 4px;background-repeat:no-repeat} .tw-panel .kick::before,.tw-panel .kick::after,.tw-note::before{display:inline-block;margin:0 10px;vertical-align:-1px;--tw-dc:var(--i-accent)} .tw-cd{display:flex;justify-content:center;gap:20px} .tw-u{position:relative;display:grid;min-width:48px} .tw-u+.tw-u::before{position:absolute;right:-16px;top:17px} .tw-u strong{font:700 34px/1.3 var(--i-font)} .tw-u span{font-size:12px;color:var(--i-muted)} .tw-after{margin:0;font:700 22px/1.6 var(--i-font);text-wrap:balance} .tw-panel .when-date{font-size:16px} .tw-tag{display:inline-block;padding:7px 18px;font-weight:700;font-size:14.5px;background:var(--i-accent);color:var(--i-surface)} .tw-photo{position:relative;width:100%} /* A broken hall photo is removed: its frame goes too. */ .tw-photo:empty{display:none} .tw-photo::after{content:"";position:absolute;inset:0;border:14px solid;border-image:url("data:image/svg+xml,") 14} .tw-photo .hall-photo{border:0;border-radius:0} .tw-panel .btn{border-radius:0;box-shadow:none} .tw-panel .btn.soft{position:relative;isolation:isolate;border:0;background:var(--i-ink)} .tw-panel .soft::before{content:"";position:absolute;z-index:-1;inset:1.5px;background:var(--i-surface)} .tw-panel .note{border:0;padding:4px;max-width:30ch} .tw-card{width:100%;display:grid;gap:12px;justify-items:center} .tw-panel input,.tw-panel select{border-radius:0;border:1.5px solid #2A1A1480;background:#FBF6EE} .tw-panel .rsvp-done,.tw-panel .rsvp-note,.tw-panel .rsvp-msg{color:var(--i-accent)} .inv-foot.tw-foot{margin:26px 10px 0;padding:4px 0 28px;border:0} .tw-foot .foot-mark,.tw-foot .foot-cta,.tw-foot .foot-make{color:var(--tw-on)} .tw-foot .foot-mark{opacity:.9} .tw-foot p{color:var(--tw-on-muted)} .tw-end{height:12px;margin:0 -16px;background:repeating-linear-gradient(90deg,#2A1A14 0 6px,#0000 0 12px) 0 4px/100% 4px no-repeat,#F5ECDD} .tw-fringe{height:calc(44px + env(safe-area-inset-bottom));margin:0 -16px; background:radial-gradient(6px 4.5px at 10px 5px,#E9DCC6 86%,#E9DCC600) 0 0/20px 12px repeat-x,linear-gradient(#2B141000 45%,#2B1410), linear-gradient(90deg,#0000 3.5px,#EFE3CF 0 5.5px,#0000 0 7px,#E4D5BC 0 9px,#0000 0 11px,#EFE3CF 0 13px,#0000 0 14.5px,#E4D5BC 0 16.5px,#0000 0) 0 0/20px,#2B1410} /* The toast lives outside #inv and its palette. */ .inv[data-style="tewn"]~.toast{background:#2A1A14;color:#F5ECDD;border-radius:0;box-shadow:inset 0 0 0 2px #D9A13B} .inv[data-style="tewn"] .lang-switch,.inv[data-style="tewn"] .bar-btn{background:var(--i-surface);border:0;border-radius:0;color:var(--i-ink)} .inv[data-style="tewn"] .lang-switch a{border-radius:0} /* Focus: ivory on the ground, accent on the wool, own ink in stair-cut controls. */ .inv[data-style="tewn"] :focus-visible{outline:2px solid var(--tw-on)} .tw-panel.tw-panel :focus-visible{outline-color:var(--i-accent)} .inv .tw-open:focus-visible,.tw-panel .btn:focus-visible,.inv[data-style="tewn"] .bar-btn:focus-visible,.inv[data-style="tewn"] .lang-switch a:focus-visible{outline:2px solid currentColor;outline-offset:-7px} .inv .tw-open:focus-visible{outline-offset:-10px} @media (max-width:359px){ .inv .tw-cover{--tw-k:.88} .tw-panel.tw-panel{margin-inline:4px} .tw-cd{gap:14px} .tw-u{min-width:40px} .tw-u+.tw-u::before{right:-13px} .tw-u strong{font-size:28px} } @media (max-height:620px){.inv .tw-cover{--tw-k:.84}} @media (max-height:480px){.inv .tw-cover{--tw-k:.62}.inv .tw-scroll{padding-block:max(12px,env(safe-area-inset-top)) max(16px,env(safe-area-inset-bottom))}.tw-med.tw-med-photo{width:14.5em}} /* From 560px the runner lies on its floor, fringed at both ends. */ @media (min-width:560px){ .inv[data-style="tewn"]{background:var(--i-backdrop);padding-bottom:48px} .inv .tw-cover{--tw-r:min(272px,50% - 24px);--tw-g:16px;background:var(--i-backdrop)} .inv[data-style="tewn"] .inv-page{isolation:isolate;padding:0 16px} .inv[data-style="tewn"] .inv-page::before{content:"";position:absolute;z-index:-1;inset:44px 0;background:var(--tw-runner);box-shadow:0 0 60px #0008} .tw-top{display:block} .tw-fringe.tw-fringe{height:44px;background-color:#0000;-webkit-mask:linear-gradient(#000 50%,#0000);mask:linear-gradient(#000 50%,#0000)} .tw-fringe.tw-top{transform:scaleY(-1)} .tw-end.tw-top{margin-bottom:26px} } /* From 1024px: one sheet, --tw-sh tall, pinned whole in view; a short window drops its crown. */ @media (min-width:1024px){ .inv .tw-cover{--tw-k:1.4;--tw-r:min(560px,50% - 48px)} .inv[data-style="tewn"] .inv-bar{max-width:none;padding-inline:16px} .tw-med.tw-med-photo{width:min(80%,17.5em)} .inv[data-style="tewn"] .inv-page{width:calc(100% - 96px);max-width:1120px;padding:0 56px;grid-template-columns:minmax(0,13fr) minmax(0,11fr);gap:0 48px} .inv .tw-fringe,.inv .tw-end{margin-inline:-56px} .tw-end.tw-top{margin-bottom:0} .inv[data-style="tewn"] .inv-sheet{position:sticky;top:max(calc(50vh - var(--tw-sh)/2),min(52px,calc(100vh - var(--tw-sh) - 12px)));--tw-sh:680px;min-height:var(--tw-sh);margin-block:44px;padding:10px 24px;background:none;box-shadow:none;border:26px solid;border-image:var(--tw-frame) 24 fill} .inv-sheet .tw-panel.tw-panel{margin:0;padding:0;border:0;gap:10px} .inv-sheet .tw-when.tw-when{gap:8px} .inv-sheet .tw-weft{margin:12px -8px} .inv-sheet .tw-gul{width:36px;height:36px} .tw-hero.tw-hero{font-size:21px} .inv-sheet .lead{max-width:24em} .inv-sheet .bless{max-width:none} .inv[data-style="tewn"] .inv-side{gap:0;padding-top:44px} .inv-side>.tw-weft:first-child{display:none} .inv-side>.tw-panel.tw-panel{padding:10px 14px;background:none;box-shadow:none} .inv-side .tw-foot.tw-foot{margin:30px 0 44px} } @media (min-width:1024px) and (max-height:840px){.inv .tw-cover{--tw-k:1.2}} @media (min-width:1024px) and (max-height:760px){ .inv-sheet .tw-gul{display:none} .inv[data-style="tewn"] .inv-sheet{--tw-sh:634px} } @media (min-width:1024px) and (max-height:720px){.inv .tw-cover{--tw-k:1}} /* An unframed picker box shows the phone's cover. */ :not(body)>.cover-box .inv .tw-cover{--tw-k:1;--tw-r:50%;--tw-g:0px;background:var(--tw-ground)} /* The entrance: panels rise, each weft is passed through. */ @media (prefers-reduced-motion:no-preference){ .inv[data-style="tewn"]:not(.play) .opening~.inv-bar{opacity:0} .inv[data-style="tewn"].play .inv-bar{transition:opacity .6s .3s} html.io :is(.opening~.inv-page,.play) .tw-panel:not(.in){opacity:0;transform:translateY(26px)} .play .tw-panel{transition:opacity .6s,transform .9s cubic-bezier(.16,1,.3,1)} .play .tw-when{transition-delay:.08s} html.io :is(.opening~.inv-page,.play) .tw-weft:not(.in)::before{transform:translateX(101%)} .play .tw-weft::before{transition:transform .6s .04s cubic-bezier(.3,.7,.2,1)} @media (min-width:1024px){ html.io .inv-sheet .tw-panel.tw-panel:not(.in){opacity:1;transform:none} .inv[data-style="tewn"]:not(.play) .opening~.inv-page .inv-sheet{opacity:0;transform:translateY(30px)} .inv[data-style="tewn"].play .inv-sheet{transition:opacity .6s,transform .9s cubic-bezier(.16,1,.3,1)} .play .tw-where{transition-delay:.12s} .play .tw-note{transition-delay:.2s} .play .tw-rsvp{transition-delay:.28s} } } @media (prefers-reduced-motion:reduce){ .tw-med,.tw-plaque,.tw-open{animation:none} .opening .tw-half{transform:none} } /* yadgar.css */ /* یادگار (Keepsake): only what differs from the film engine (film.css). Markup and config: styles/yadgar.ts. */ /* The kilim's red field under the names: a warm dark scrim. */ .inv[data-style=yadgar] .fm-awords,.inv[data-style=yadgar] .fm-big{--fm-scrim:.5} /* zer.css */ /* Zêr (styles/zer.ts). --u: a coin's width; --f: the forehead in coins; --nk: the names' scale. */ .inv[data-style="zer"]{--u:20px;--f:6;--zr-coin:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 22'%3E%3ClinearGradient id='g' x2='1' y2='1'%3E%3Cstop stop-color='%23FFF2C4'/%3E%3Cstop offset='.42' stop-color='%23E7BC5B'/%3E%3Cstop offset='.78' stop-color='%23A36F1C'/%3E%3Cstop offset='1' stop-color='%23DDB257'/%3E%3C/linearGradient%3E%3CradialGradient id='s'%3E%3Cstop offset='.6' stop-opacity='.42'/%3E%3Cstop offset='1' stop-opacity='0'/%3E%3C/radialGradient%3E%3Ccircle cx='10.9' cy='13.9' r='9.4' fill='url(%23s)'/%3E%3Cpath d='M10 0v2.2' stroke='%23C99A42'/%3E%3Ccircle cx='10' cy='3.4' r='1.5' fill='none' stroke='%23D6A84C' stroke-width='.9'/%3E%3Cg transform='translate(10 12.6)' stroke-width='.7'%3E%3Ccircle r='8.6' fill='url(%23g)' stroke='%236E4810'/%3E%3Ccircle r='6.3' fill='none' stroke='%23FFF4D0' stroke-opacity='.75' stroke-dasharray='1 1.15'/%3E%3Ccircle r='2.4' fill='%238E5F17' fill-opacity='.35' stroke='none'/%3E%3C/g%3E%3C/svg%3E");--zr-lira:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 36'%3E%3ClinearGradient id='g' x2='1' y2='1'%3E%3Cstop stop-color='%23FFF2C4'/%3E%3Cstop offset='.42' stop-color='%23E7BC5B'/%3E%3Cstop offset='.78' stop-color='%23A36F1C'/%3E%3Cstop offset='1' stop-color='%23DDB257'/%3E%3C/linearGradient%3E%3CradialGradient id='s'%3E%3Cstop offset='.6' stop-opacity='.42'/%3E%3Cstop offset='1' stop-opacity='0'/%3E%3C/radialGradient%3E%3Ccircle cx='16.2' cy='20.8' r='14.6' fill='url(%23s)'/%3E%3Ccircle cx='15' cy='3' r='2' fill='none' stroke='%23D6A84C' stroke-width='1.1'/%3E%3Cg transform='translate(15 19)' fill='none'%3E%3Ccircle r='13.5' fill='url(%23g)' stroke='%236E4810' stroke-width='.8'/%3E%3Ccircle r='11.4' stroke='%23FFF4D0' stroke-opacity='.8' stroke-dasharray='1.2 1.3'/%3E%3Ccircle r='8' stroke='%237A5114' stroke-opacity='.55' stroke-width='.7'/%3E%3Ccircle r='3.2' fill='%238E5F17' fill-opacity='.35'/%3E%3C/g%3E%3C/svg%3E");--zr-bead:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 18'%3E%3Cpath d='M0 2.5h12M0 15.5h12' stroke='%23E6C168'/%3E%3Ccircle cx='3' cy='9' r='2.7' fill='%23E2B85A'/%3E%3Ccircle cx='2.3' cy='8.2' r='1' fill='%23FFF3C8'/%3E%3Ccircle cx='9' cy='9' r='1.3' fill='%23C99A42'/%3E%3C/svg%3E");--zr-pill:linear-gradient(#F2D489,#D9A94A);--zr-hair:#E6C16873;--zr-bar:rgba(var(--zr-m),.75);background:radial-gradient(120% 600px at 50% 360px,var(--zr-hi),var(--i-bg) 55%,var(--zr-lo)) no-repeat,var(--zr-lo)} /* ---------- the cover: the headdress ---------- */ .zr-cover{background:var(--zr-sheen)} .zr-band{position:absolute;inset:0 max(0px,50% - var(--u)*36.5) auto;z-index:3;height:calc(var(--u)*.9);background:var(--zr-bead) 0 0/calc(var(--u)*.6) 100% repeat-x var(--zr-lo)} .zr-fringe,.zr-grp{position:absolute;inset:0;pointer-events:none;transform-origin:50% 0} /* Above the words' layer: a photo's shade never dulls the gold. The far strands in shadow */ .zr-fringe{z-index:2;overflow:hidden} .zr-fringe::after{content:"";position:absolute;inset:0;background:linear-gradient(90deg,rgba(var(--zr-d),.55),rgba(var(--zr-d),0) 17%,rgba(var(--zr-d),0) 83%,rgba(var(--zr-d),.55))} .zr-st{position:absolute;top:calc(var(--u)*.65);left:calc(50% + (var(--x)*.9 - .5)*var(--u));width:var(--u);height:calc((var(--n,60) + var(--o,0)*.5)*var(--u)*1.1)} .zr-sw,.zr-sw::after,.zr-gl{position:absolute} .zr-sw{inset:0;transform-origin:50% 0;animation:zr-sway 4.4s ease-in-out calc((var(--x) + 40)*-.37s) infinite alternate;background:var(--zr-coin) 0 calc(var(--o,0)*var(--u)*.55)/var(--u) calc(var(--u)*1.1) repeat-y} .zr-sw::after{content:"";top:100%;left:calc(var(--u)*-.25);width:calc(var(--u)*1.5);height:calc(var(--u)*1.8);background:var(--zr-lira) 0 0/100% 100%} .zr-fh{display:var(--fhd,block)} .zr-far,.zr-trim{display:none} .zr-gl,.zr-ng{background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath d='M10 3.5l1 5.5 5.5 1-5.5 1-1 5.5-1-5.5-5.5-1 5.5-1z' fill='%23FFF8E1'/%3E%3C/svg%3E") 0 0/100%;filter:drop-shadow(0 0 3px #FFF3C0)} .zr-gl{left:0;top:calc((var(--k)*1.1 + var(--o,0)*.55 + .13)*var(--u));width:var(--u);height:var(--u);animation:zr-twinkle 2.8s ease-in-out calc((var(--x) + 40)*-.45s) infinite} @keyframes zr-sway{from{transform:rotate(-1.1deg)}to{transform:rotate(1.1deg)}} @keyframes zr-twinkle{0%,100%{opacity:0;transform:scale(.6)}50%{opacity:.9;transform:none}} .zr-lite .zr-sw{animation:none} .zr-lite .zr-grp{animation:zr-sway 5s ease-in-out infinite alternate} .zr-lite .zr-grp + .zr-grp{animation-delay:-2.5s} .zr-scroll{z-index:1;padding:calc(var(--u)*var(--w,(var(--f)*1.1 + 4.1))) calc(50% - var(--u)*6.4) calc(env(safe-area-inset-bottom) + 28px)} .zr-in{position:relative;display:grid;gap:calc(var(--u)*var(--g,.6));justify-items:center;width:100%;margin:auto;animation:rise .9s .15s cubic-bezier(.2,.8,.2,1) backwards} .zr-in>*{margin:0} .zr-kick{font-size:calc(var(--u)*.7);line-height:1.6;opacity:.86} .zr-names,.zr-names-page{display:grid;justify-items:center;color:var(--i-accent-ink);text-wrap:balance} .zr-names{--s:2.8;font:700 calc(var(--u)*var(--s)*var(--nk,1))/1.15 var(--i-font)} .zr-names[data-len="m"]{--s:2.3} .zr-names[data-len="l"]{--s:1.9} .zr-names[data-len="xl"]{--s:1.6} /* One leaf per line: a wrapped name keeps its colour */ .zr-names span,.zr-names-page span{padding:.14em .1em;margin:-.14em -.1em;background:linear-gradient(#F7E2A4,#E6C168 46%,#CFA049) 0 0/100% 1.15em content-box;-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;filter:drop-shadow(0 2px 14px #0006)} @media (forced-colors:active) { .zr-names span,.zr-names-page span{-webkit-text-fill-color:currentColor} } .zr-names em,.zr-names-page em{font:600 20px/1.5 var(--i-body);color:var(--i-ink);margin:0 0 8px} .zr-date{font-size:calc(var(--u)*.75);line-height:1.7} .zr-date span{display:var(--dd,block)} .zr-date i{display:var(--dd,none)} .zr-date span,.zr-when .when-date span{white-space:nowrap} .zr-date i,.zr-when i{font-style:normal} .zr-open,.zr-gold,.zr-rsvp .btn:not(.soft),.inv[data-style="zer"] .lang-switch a[aria-current]{background:var(--zr-pill);color:var(--zr-on-gold);box-shadow:0 10px 24px -12px #000b,inset 0 1px #fff9} .zr-open{display:inline-flex;align-items:center;min-height:48px;margin-top:8px;padding:12px 26px;border-radius:999px;font:700 16px/1.3 var(--i-body);text-decoration:none} .has-photo .zr-photo::after{background:radial-gradient(85% 60% at 50% 36%,rgba(var(--zr-m),.22),rgba(var(--zr-d),.95)),linear-gradient(rgba(var(--zr-d),0) 38%,rgba(var(--zr-d),.8) 60%,rgba(var(--zr-d),.92))} .has-photo .zr-in::before{content:"";position:absolute;z-index:-1;inset:-28% -34% -28px;background:radial-gradient(closest-side,rgba(var(--zr-d),.82) 58%,rgba(var(--zr-d),0))} .has-photo .zr-scroll{padding-top:40px} .has-photo .zr-in{margin-bottom:0} .has-photo .zr-kick,.has-photo .zr-date{opacity:1;text-shadow:0 1px 10px #0008} /* Opening: the forehead lifts as one straight edge (an arch reads as a mihrab) */ @media (prefers-reduced-motion:no-preference) { .zr-cover.opening .zr-in{opacity:0;transition:opacity .25s;animation:none} .zr-cover.opening .zr-st{will-change:transform;transform:translateY(calc(-100% - var(--u)*3));transition:transform .75s cubic-bezier(.6,0,.8,.3) calc(max(0,max(var(--x),-1*var(--x)) - 7)*45ms)} .zr-cover.opening .zr-band{transform:translateY(-100%);transition:transform .3s ease-in .9s} .inv .zr-cover.opening{opacity:0;transition:opacity .3s .9s} } /* Short screens: a shorter forehead keeps the faces a window */ @media (max-height:760px) { .has-photo{--f:4} } @media (max-height:700px) { .zr-cover{--nk:.82} .has-photo{--dd:inline;--g:.5} } @media (max-height:620px) { .zr-cover{--f:5} .zr-cover.has-photo{--f:3;--nk:.76} } @media (max-height:480px) { .zr-cover{--fhd:none;--w:1.4} } @media (min-width:480px) { .zr-far{display:block} } /* A thumbnail inside a phone's page reads that page's height: keep the rest look */ :not(body)>.cover-box .zr-cover{--f:6;--nk:1;--g:initial;--dd:initial;--fhd:initial;--w:initial} /* ---------- the page ---------- */ .inv[data-style="zer"] .lang-switch,.inv[data-style="zer"] .bar-btn{background:var(--zr-bar);border-color:var(--zr-hair)} .zr-neck{position:relative;width:300px;height:92px} .zr-neck svg{position:absolute;inset:0;overflow:visible} .zr-neck i,.zr-ng{position:absolute} .zr-neck i{left:calc(280px*var(--t));top:calc(112px*var(--t)*(1 - var(--t)) + 4.4px);width:20px;height:22px;background:var(--zr-coin)} .zr-neck .zr-nl{left:135px;top:30px;width:30px;height:36px;background:var(--zr-lira)} .zr-ng{left:140px;top:37px;width:14px;height:14px;opacity:0} .inv.play .zr-ng{animation:zr-twinkle 1.1s 1.5s} .zr-names-page{font:700 64px/1.15 var(--i-font);margin-top:4px} .zr-names-page[data-len="m"]{font-size:54px} .zr-names-page[data-len="l"]{font-size:44px} .zr-names-page[data-len="xl"]{font-size:36px} .zr-names-page em{margin:2px 0 10px} .zr-sec .kick{font-size:14.5px} .zr-sec{padding-inline:0} .zr-tray{position:relative;width:calc(100% - 32px);margin:8px 16px;padding:38px 20px;display:grid;gap:14px;justify-items:center;border-radius:6px;background:linear-gradient(#ffffff0a,#0000002e),var(--i-surface);box-shadow:inset 0 1px #ffffff14,inset 0 0 0 1px #E6C1682e,0 24px 40px -28px #000b} .zr-tray::before,.zr-tray::after,.zr-chain{content:"";position:absolute;left:12px;right:12px;height:12px;background:var(--zr-bead) 0 0/8px 12px round no-repeat} .zr-tray::before{top:10px} .zr-tray::after{bottom:10px} .zr-cd{display:flex;justify-content:center;gap:10px} .zr-cc{display:grid;gap:8px;justify-items:center} .zr-cc strong{--s:clamp(52px,25vw - 25px,72px);position:relative;width:var(--s);height:var(--s);border-radius:50%;display:grid;place-items:center;background:linear-gradient(135deg,#FFF2C4,#E7BC5B 42%,#B78128 78%,#DDB257);font:700 26px/1 var(--i-body);color:var(--i-accent2);box-shadow:inset 0 0 0 1px #6E4810,inset 0 2px 2px #FFF8E18c,inset 0 -3px 5px #6E481059,0 8px 18px -8px #0009} .zr-cc strong::after{content:"";position:absolute;inset:5px;border-radius:50%;border:1.5px dashed #6E48108c} .zr-cc span{font-size:12.5px;color:var(--i-muted)} .zr-cc + .zr-cc{--fd:.29s} .zr-cc + .zr-cc + .zr-cc{--fd:.38s} .zr-cc + .zr-cc + .zr-cc + .zr-cc{--fd:.47s} @media (prefers-reduced-motion:no-preference) { .inv:not(.zr-hold) .zr-when.in .zr-cc strong{animation:zr-flip .9s var(--fd,.2s) cubic-bezier(.25,.7,.3,1) backwards} } @keyframes zr-flip{from{transform:perspective(320px) rotateY(-360deg)}to{transform:perspective(320px)}} .zr-pill{background:none;border:1px solid var(--i-accent);padding:5px 16px;font-size:14.5px} @media (max-width:1023px) { .zr-where{margin:0;width:100%;padding:16px 24px 4px;background:none;box-shadow:none} .zr-where::before,.zr-where::after{content:none} } .zr-hall{border:0;border-radius:2px;outline:1px solid var(--i-accent);outline-offset:5px;margin:8px 0 10px} .zr-where .venue{font-size:34px} .zr-where .venue,.zr-rsvp .rsvp-q,.zr-foot .foot-mark{color:var(--i-accent-ink);opacity:1} .zr-sec .note{border:0;padding:0 6px} .zr-rsvp{background:none;border:0;box-shadow:none;padding:0} .zr-rsvp input,.zr-rsvp select{background:var(--i-bg);border-color:var(--zr-hair);border-radius:10px;color-scheme:dark} .zr-rsvp .btn.soft{border-color:#F3E8D099} #rsvp .zr-tray{padding-bottom:22px} .zr-chain{position:static;display:block;width:136px;margin:30px auto 0} .zr-foot{border:0;margin-top:0;padding-top:18px} .zr-foot .foot-cta{color:var(--i-ink)} @media (prefers-reduced-motion:no-preference) { html.io .inv[data-style="zer"].play [data-io]:not(.in):not(.zr-when),html.io .zr-hold [data-io]:not(.zr-when){opacity:0;transform:translateY(18px)} .inv[data-style="zer"] [data-io]:not(.zr-when){transition:opacity .7s,transform .9s cubic-bezier(.16,1,.3,1)} } /* ---------- a laptop: a guest's window, or a picker's frame that wide ---------- */ @media (min-width:1024px) { .inv[data-style="zer"]{--u:clamp(22px,1.875vw,36px);--zr-bar:rgba(var(--zr-d),.6);background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.8' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 .09 0'/%3E%3C/filter%3E%3Crect width='200' height='200' filter='url(%23n)'/%3E%3C/svg%3E"),var(--i-backdrop)} .inv[data-style="zer"] .inv-sheet{padding:132px 40px 28px;border-radius:6px;overflow:hidden;background:var(--zr-sheen);box-shadow:0 50px 90px -40px #000b,0 0 0 1px var(--zr-hair)} .zr-pin .inv-sheet{position:sticky} .zr-trim{display:block;position:absolute;inset:0 0 auto;height:124px;overflow:hidden;--u:20px} .zr-trim .zr-sw{animation:none} .zr-neck{display:none} .inv .zr-hero{position:static;padding:0 0 6px;gap:10px} .zr-hero .lead{max-width:36ch} .inv-sheet .zr-tray{width:100%;margin:0;padding-block:30px 28px;gap:12px;background:none;box-shadow:none} .inv-sheet .zr-cc strong{--s:64px} .inv[data-style="zer"] .inv-side{gap:20px;padding:0 0 48px} .inv[data-style="zer"] .inv-page{padding-bottom:24px} .inv[data-style="zer"] .inv-side>.inv-sec{padding:0;background:none;box-shadow:none} .inv-side .zr-tray{width:100%;margin:0;padding:42px 36px} #rsvp .zr-tray{padding-bottom:24px} .zr-chain{margin-top:12px} .inv .zr-cover{--f:6;--nk:1;--g:initial;--dd:initial} .zr-st{height:calc((var(--m) + var(--o,0)*.5)*var(--u)*1.1)} .zr-gl{top:calc((var(--kl)*1.1 + var(--o,0)*.55 + .13)*var(--u))} .zr-scroll{padding-inline:calc(50% - var(--u)*11.4);padding-bottom:44px} .zr-names{--s:3.2;font-size:min(5.5rem,var(--u)*var(--s)*var(--nk))} .zr-names[data-len="m"]{--s:2.9} .zr-names[data-len="l"]{--s:2.5} .zr-names[data-len="xl"]{--s:2.1} .zr-names em{font-size:calc(var(--u)*.95)} .zr-open{font-size:17px;min-height:54px;padding-inline:34px} .zr-photo{inset:calc(var(--u)*(var(--f)*1.1 + 3.8)) calc(50% + var(--u)*.6) calc(var(--u)*1.6) calc(50% - var(--u)*15.6);outline:1px solid var(--zr-hair);outline-offset:7px;box-shadow:0 30px 60px -30px #000c} .has-photo .zr-photo::after,.has-photo .zr-in::before{content:none} .inv .has-photo .zr-scroll{padding:calc(var(--u)*(var(--f)*1.1 + 3.8)) calc(50% - var(--u)*15.6) 44px calc(50% + var(--u)*1.6)} .inv .has-photo .zr-in{margin:auto} .zr-cover.opening .zr-st{transition-delay:calc(max(0,max(var(--x),-1*var(--x)) - 19)*30ms)} } /* A laptop window short for its width */ @media (min-width:1024px) and (min-aspect-ratio:7/4) and (max-height:1039px), (min-width:1024px) and (max-height:679px) { .inv .zr-cover{--f:4;--nk:.86;--dd:inline} } @media (min-width:1024px) and (min-aspect-ratio:21/10) and (max-height:1039px), (min-width:1024px) and (max-height:579px) { .inv .zr-cover{--f:3;--nk:.76;--g:.45} } @media (prefers-reduced-motion:reduce) { .zr-sw,.zr-grp,.zr-gl,.zr-in,.zr-ng{animation:none !important} }