/* ============================================================ 00-base — palette, reset, page shell, shared classes ============================================================ */ /* «Anor» — Uzbek village palette (var names kept from the a1f4 base so the whole sheet re-themes at once; roles preserved: warm sky, cream ground, clay/gold accents, suzani madder-red, walnut ink). */ :root{ --sky:#E3C9A0; --sky-deep:#C99A5E; --cream:#FBF3E6; --cloud:#FDF6E9; --snow:#F4ECDD; --snow-shadow:#D8C3A6; --mauve:#B07A55; --mauve-deep:#6E4A32; --rose:#E7677D; --crimson:#B5302B; --amber:#D9A94E; --amber-soft:#E8C36A; --plum-950:#2B1A12; --plum-900:#3A2418; --plum-700:#5A3A22; --ink:var(--plum-900); --paper:var(--cream); /* Anor-only materials */ --indigo:#1E5A82; /* Rishton ceramic blue */ --anor:#8E1E22; /* deep pomegranate */ /* carved walnut (posts, beams, niche frames) — vertical grain */ --wood:linear-gradient(90deg,#6E4A32,#3A2418 34%,#5A3A22 60%,#2B1A12); --wood-grain:repeating-linear-gradient(90deg, rgba(251,243,230,.05) 0 1px, transparent 1px 3px); --wood-notch:repeating-linear-gradient(180deg, transparent 0 54px, rgba(43,26,18,.55) 54px 57px, transparent 57px 84px); } /* ---- reset ---- */ *,*::before,*::after{box-sizing:border-box;margin:0;padding:0} img,svg{display:block;max-width:100%} button{font:inherit;color:inherit;background:none;border:0;cursor:pointer} a{color:inherit} html{scroll-behavior:smooth;-webkit-text-size-adjust:100%} /* the invitation reads like a card — no scrollbar, scrolling itself stays */ html{scrollbar-width:none;-ms-overflow-style:none} html::-webkit-scrollbar{width:0;height:0;display:none} body{ background:var(--plum-950); color:var(--ink); font-family:"Manrope",system-ui,sans-serif; font-size:1rem; line-height:1.65; -webkit-font-smoothing:antialiased; /* a long unbroken value (a 60-char name run, a pasted link) must wrap, never overflow the fixed 480px column and get clipped by .page{overflow:hidden}. overflow-wrap is inherited, so this one rule covers every text element. */ overflow-wrap:break-word; } body.lock{overflow:hidden;height:100dvh} /* grain overlay */ body::after{ content:""; position:fixed; inset:0; z-index:999; pointer-events:none; opacity:.06; background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23n)'/%3E%3C/svg%3E"); } /* ---- page column ---- */ .page{ max-width:480px; margin:0 auto; min-height:100dvh; /* woven cotton ground: faint perpendicular warp/weft lines (~3% tonal), NOT a1f4's watercolor paper */ background: repeating-linear-gradient(0deg, rgba(58,36,24,.03) 0 1px, transparent 1px 4px), repeating-linear-gradient(90deg, rgba(58,36,24,.03) 0 1px, transparent 1px 4px), var(--cream); box-shadow:0 0 60px rgba(0,0,0,.45); overflow:hidden; /* ponytail: clips decorative bleed; drop if a section needs overflow */ } /* ---- typography ---- */ h1,h2,h3{ font-family:"Cormorant",serif; font-weight:600; line-height:1.15; color:var(--plum-900); text-wrap:balance; } h1{font-size:clamp(2.6rem,10vw,4rem)} h2{font-size:clamp(2rem,7.2vw,2.5rem)} /* ceremony register: 34–40px walnut */ h3{font-size:clamp(1.2rem,4.5vw,1.5rem)} p{font-size:clamp(.95rem,3.6vw,1.05rem)} /* ---- shared classes ---- */ /* natural flow; only the hero is a full-window page */ .sec{ padding:4.5rem 2.1rem; position:relative; } /* every bay of the ayvon is framed by slender carved-wood posts at both margins (vertical grain + carved notch ticks) — the terrace architecture */ .sec:not(.hero){ background-image: var(--wood-notch), var(--wood-grain), var(--wood), var(--wood-notch), var(--wood-grain), var(--wood); background-size:7px 100%; background-position: left 10px top, left 10px top, left 10px top, right 10px top, right 10px top, right 10px top; background-repeat:no-repeat; } .kicker{ display:block; font-family:"Manrope",sans-serif; font-size:.72rem; font-weight:600; letter-spacing:.35em; text-transform:uppercase; color:var(--mauve-deep); text-align:center; text-indent:.35em; /* optically recenter tracked text */ margin-bottom:1.75rem; /* one consistent kicker→content handoff (codex design pass) */ } /* in-bay kickers are embroidered miniatures, not letterspaced caps banners: a stitched madder rule with a gold couching thread, ending in a tiny pomegranate dot (seed-pink core) either side of the label. The splash kicker keeps the base style above. main.js strips the dict's decorative "— … —" dashes, since the strings live in the off-limits i18n.js. */ .sec .kicker{ display:flex; align-items:center; justify-content:center; gap:.7em; font-size:.7rem; letter-spacing:.14em; text-indent:0; color:var(--crimson); } .sec .kicker::before, .sec .kicker::after{ content:""; flex:none; width:47px; height:9px; background: /* pomegranate dot at the inner end, seed-pink center */ radial-gradient(circle 4.5px at calc(100% - 4.5px) 4.5px, var(--rose) 0 1.5px, var(--anor) 1.5px 3.9px, transparent 4.4px) 0 0/100% 100% no-repeat, /* stitched madder rule */ repeating-linear-gradient(90deg, var(--crimson) 0 5px, transparent 5px 8px) left 3.5px/35px 2px no-repeat, /* gold couching thread riding under the stitches */ repeating-linear-gradient(90deg, var(--amber) 0 1.5px, transparent 1.5px 8px) 2.5px 6.5px/35px 1px no-repeat; } .sec .kicker::after{transform:scaleX(-1)} .kicker[hidden]{display:none} /* flex would silently cancel [hidden] */ /* no cursive in Anor — .script spans painted by the shared dict render as ceremonial Cormorant italic instead of a calligraphic face */ .script{ font-family:"Cormorant",serif; font-style:italic; font-weight:500; line-height:1.2; } /* grounded, carved — not a soft pill: square corners + a gold thread border */ .btn{ display:inline-flex; align-items:center; justify-content:center; gap:.5em; padding:.9em 2.2em; background:var(--plum-900); color:var(--cream); font-family:"Manrope",sans-serif; font-size:.92rem; font-weight:600; letter-spacing:.08em; border-radius:3px; border:1px solid color-mix(in srgb, var(--amber) 60%, transparent); text-decoration:none; transition:background .3s ease,transform .3s ease,box-shadow .3s ease; box-shadow:0 6px 16px rgba(43,26,18,.3), inset 0 0 0 1px rgba(43,26,18,.35); } .btn:hover{background:var(--crimson);transform:translateY(-2px);box-shadow:0 10px 24px rgba(181,48,43,.35)} .btn:active{transform:translateY(0)} .art{display:block;width:100%;height:auto} /* ---- reveal ---- */ .reveal{ opacity:0; transform:translateY(24px); transition:opacity .8s cubic-bezier(.22,1,.36,1),transform .8s cubic-bezier(.22,1,.36,1),filter .8s cubic-bezier(.22,1,.36,1); transition-delay:var(--d,0s); } .reveal.is-visible{opacity:1;transform:none;filter:none} /* variants — compose with .reveal */ .reveal--scale{transform:translateY(18px) scale(.955)} .reveal--blur{filter:blur(9px)} /* ---- utilities ---- */ /* ---- section chapters: ayvon bays divided by STRAIGHT ikat thresholds ---- No wavy torn edges. Each tinted bay opens and closes with a thin woven atlas/ikat stripe (madder chevrons, indigo + gold threads, walnut rails). The seam belongs to the section, so a hidden section takes its seam along. Tints are translucent — the cotton weave of .page shows through. */ :root{ /* soft stitched seam — two thin muted chevrons (madder + gold) floating on a whisper of cream; no walnut rails, no indigo, nothing hard-edged */ --ikat:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='36' height='12' viewBox='0 0 36 12'%3E%3Crect width='36' height='12' fill='%23F5E9D4' fill-opacity='.55'/%3E%3Cpolyline points='0,3.2 9,7.8 18,3.2 27,7.8 36,3.2' fill='none' stroke='%23B5302B' stroke-opacity='.5' stroke-width='1.7'/%3E%3Cpolyline points='0,6.4 9,11 18,6.4 27,11 36,6.4' fill='none' stroke='%23D9A94E' stroke-opacity='.6' stroke-width='1.2'/%3E%3C/svg%3E"); --tint-lavender:color-mix(in srgb, var(--snow-shadow) 30%, transparent); --tint-sky:color-mix(in srgb, var(--sky) 26%, transparent); /* embroidery-scale ornament, all inline SVG (no rasters) — palak-rosette watermarks (pomegranate on cream bays / cream on the walnut finale), the paired-pomegranate knot, and the calendar's rosette medallion */ --palak-wm:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 250 250'%3E%3Cdefs%3E%3Cellipse id='p' cx='125' cy='52' rx='15' ry='36'/%3E%3C/defs%3E%3Cg fill='%238E1E22' fill-opacity='.032'%3E%3Cuse href='%23p'/%3E%3Cuse href='%23p' transform='rotate(45 125 125)'/%3E%3Cuse href='%23p' transform='rotate(90 125 125)'/%3E%3Cuse href='%23p' transform='rotate(135 125 125)'/%3E%3Cuse href='%23p' transform='rotate(180 125 125)'/%3E%3Cuse href='%23p' transform='rotate(225 125 125)'/%3E%3Cuse href='%23p' transform='rotate(270 125 125)'/%3E%3Cuse href='%23p' transform='rotate(315 125 125)'/%3E%3Ccircle cx='125' cy='125' r='30'/%3E%3C/g%3E%3Cg fill='none' stroke='%238E1E22' stroke-opacity='.045' stroke-width='3'%3E%3Ccircle cx='125' cy='125' r='118'/%3E%3Ccircle cx='125' cy='125' r='86'/%3E%3C/g%3E%3C/svg%3E"); --palak-wm-cream:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 250 250'%3E%3Cdefs%3E%3Cellipse id='p' cx='125' cy='52' rx='15' ry='36'/%3E%3C/defs%3E%3Cg fill='%23FBF3E6' fill-opacity='.04'%3E%3Cuse href='%23p'/%3E%3Cuse href='%23p' transform='rotate(45 125 125)'/%3E%3Cuse href='%23p' transform='rotate(90 125 125)'/%3E%3Cuse href='%23p' transform='rotate(135 125 125)'/%3E%3Cuse href='%23p' transform='rotate(180 125 125)'/%3E%3Cuse href='%23p' transform='rotate(225 125 125)'/%3E%3Cuse href='%23p' transform='rotate(270 125 125)'/%3E%3Cuse href='%23p' transform='rotate(315 125 125)'/%3E%3Ccircle cx='125' cy='125' r='30'/%3E%3C/g%3E%3Cg fill='none' stroke='%23FBF3E6' stroke-opacity='.05' stroke-width='3'%3E%3Ccircle cx='125' cy='125' r='118'/%3E%3Ccircle cx='125' cy='125' r='86'/%3E%3C/g%3E%3C/svg%3E"); --pom-pair:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 34 22'%3E%3Cpath d='M8.5 5.5 L11 1.5 L13.5 5.5 Z' fill='%238E1E22'/%3E%3Cpath d='M20.5 5.5 L23 1.5 L25.5 5.5 Z' fill='%238E1E22'/%3E%3Cg fill='%23B5302B'%3E%3Ccircle cx='11' cy='13' r='7'/%3E%3Ccircle cx='23' cy='13' r='7'/%3E%3C/g%3E%3Cg fill='%238E1E22'%3E%3Ccircle cx='11' cy='13' r='3.4'/%3E%3Ccircle cx='23' cy='13' r='3.4'/%3E%3C/g%3E%3Cg fill='%23D9A94E'%3E%3Ccircle cx='11' cy='12.4' r='1.2'/%3E%3Ccircle cx='23' cy='12.4' r='1.2'/%3E%3C/g%3E%3C/svg%3E"); --blossom:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cg fill='%23B5302B'%3E%3Ccircle cx='10' cy='4.5' r='3'/%3E%3Ccircle cx='15.2' cy='8.3' r='3'/%3E%3Ccircle cx='13.2' cy='14.4' r='3'/%3E%3Ccircle cx='6.8' cy='14.4' r='3'/%3E%3Ccircle cx='4.8' cy='8.3' r='3'/%3E%3C/g%3E%3Ccircle cx='10' cy='9.8' r='2.6' fill='%23E7677D'/%3E%3C/svg%3E"); --leafknot:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath d='M10 2 C 16 6 16 14 10 18 C 4 14 4 6 10 2 Z' fill='%23B5302B'/%3E%3Cpath d='M10 4.5 V15.5' stroke='%23D9A94E' stroke-width='1.2'/%3E%3Ccircle cx='10' cy='10' r='1.6' fill='%238E1E22'/%3E%3C/svg%3E"); } /* the tinted bay reads as sunlit cloth, not a flat card: a localized golden-hour glow high on one side, a faint reflected seed-pink at the opposite lower edge, a warm edge vignette hugging the posts, and a big palak-rosette watermark cropped by one lower corner (never behind body copy — it lives in the bottom band under the section's closing content). The post layers are restated because this background stack replaces the .sec:not(.hero) one wholesale. Even bays mirror the light. */ .sec.sec-tint{ /* .sec compound — must outrank .sec:not(.hero)'s post stack */ --glow-x:78%; --glow-y:12%; background-color:var(--secbg); background-image: var(--wood-notch), var(--wood-grain), var(--wood), var(--wood-notch), var(--wood-grain), var(--wood), radial-gradient(ellipse 78% 34% at var(--glow-x) var(--glow-y), rgba(224,153,92,.22), rgba(217,169,78,.09) 45%, transparent 72%), radial-gradient(ellipse 62% 26% at calc(100% - var(--glow-x)) 96%, rgba(231,103,125,.08), transparent 70%), linear-gradient(90deg, rgba(142,30,34,.04), transparent 16% 84%, rgba(196,106,63,.05)), var(--palak-wm); background-size: 7px 100%, 7px 100%, 7px 100%, 7px 100%, 7px 100%, 7px 100%, 100% 100%, 100% 100%, 100% 100%, 250px 250px; background-position: left 10px top, left 10px top, left 10px top, right 10px top, right 10px top, right 10px top, center, center, center, var(--wm-pos, right -95px bottom -95px); background-repeat:no-repeat; } /* tinted bays sit at even section indexes (plain/tint alternation), so "every other bay" = every 4th section — that's what flips the light */ .sec-tint:nth-of-type(4n){--glow-x:22%;--glow-y:16%;--wm-pos:left -95px bottom -95px} /* soft interior shade beside the walnut posts — the bay gains depth */ .sec:not(.hero){ box-shadow: inset 12px 0 18px -14px rgba(58,36,24,.2), inset -12px 0 18px -14px rgba(58,36,24,.2); } .sec-tint::before, .sec-tint::after{ content:""; position:absolute; left:0;right:0; height:12px; background:var(--ikat) left top / 36px 12px repeat-x; pointer-events:none; } .sec-tint::before{top:0} .sec-tint::after{bottom:0;transform:scaleY(-1)} /* ---- niche-and-shelf frames: art mounted like objects in a carved wall niche — 8px walnut frame, 4px cream mat, four Rishton-ceramic corner studs, a carved top profile (pointed / arch / stepped) and a hard lower shelf casting a short warm shadow ---- */ .niche{ position:relative; padding:8px; border-radius:3px; background: radial-gradient(circle 3px at 4.5px 4.5px, #E9F2F8 0 .9px, #2E7BA8 1.2px 2.2px, #14374F 2.2px 2.7px, transparent 3px), radial-gradient(circle 3px at calc(100% - 4.5px) 4.5px, #E9F2F8 0 .9px, #2E7BA8 1.2px 2.2px, #14374F 2.2px 2.7px, transparent 3px), radial-gradient(circle 3px at 4.5px calc(100% - 4.5px), #E9F2F8 0 .9px, #2E7BA8 1.2px 2.2px, #14374F 2.2px 2.7px, transparent 3px), radial-gradient(circle 3px at calc(100% - 4.5px) calc(100% - 4.5px), #E9F2F8 0 .9px, #2E7BA8 1.2px 2.2px, #14374F 2.2px 2.7px, transparent 3px), var(--wood-grain), var(--wood); box-shadow:0 2px 5px rgba(43,26,18,.28); } .niche img{ border:4px solid var(--cream); /* the mat */ border-radius:2px; } /* carved top profile — shallow pointed pediment by default */ .niche::before{ content:""; position:absolute; left:50%;top:-11px; translate:-50% 0; width:92px;height:12px; background:linear-gradient(180deg,#6E4A32,#2B1A12); clip-path:polygon(0 100%,8% 45%,50% 0,92% 45%,100% 100%); } .niche--arch::before{clip-path:none;border-radius:100% 100% 0 0 / 200% 200% 0 0} .niche--step::before{clip-path:polygon(0 100%,0 60%,18% 60%,18% 30%,36% 30%,36% 0,64% 0,64% 30%,82% 30%,82% 60%,100% 60%,100% 100%)} /* the hard shelf under the niche + its short warm shadow */ .niche::after{ content:""; position:absolute; left:-7px;right:-7px;bottom:-12px; height:12px; border-radius:2px 2px 3px 3px; background:linear-gradient(180deg,#6E4A32,#3A2418 45%,#2B1A12); box-shadow:0 8px 14px -4px rgba(110,74,50,.6); } .niche[hidden]{display:none!important} /* ---- the marginal suzani vine: madder islimi embroidery climbing a side post, pomegranate / palak-rosette knots. Draws itself in on scroll via animation-timeline: view(); .is-visible (IntersectionObserver, main.js) is the fallback. Decorative only. ---- */ .vine{ position:absolute; top:4.8rem; left:4px; width:28px; height:min(78%, 460px); pointer-events:none; clip-path:inset(-4% -40% 104% -40%); transition:clip-path 2.6s cubic-bezier(.3,.1,.3,1) .1s; } .vine--r{left:auto;right:4px;transform:scaleX(-1)} .vine.is-visible{clip-path:inset(-4% -40% -4% -40%)} @supports (animation-timeline: view()){ .vine{ transition:none; animation:vine-draw linear both; animation-timeline:view(); animation-range:entry 15% cover 60%; } } @keyframes vine-draw{ from{clip-path:inset(-4% -40% 104% -40%)} to{clip-path:inset(-4% -40% -4% -40%)} } .vine[hidden]{display:none!important} /* ---- delight moments (three only) ---- (a) .bloom — a golden-hour light bloom breathes in behind a section heading when it enters view (rides the shared .reveal IntersectionObserver); (b) .petals — 3–5 SVG petals drifting a few px in the gutters, never over the text column; (c) .vine-sprout — at two bays the marginal vine sends a short tendril inward and opens one blossom (stroke-dash reveal, then the flower). All opacity/transform only; reduced motion shows the end state. */ .bloom{position:relative;z-index:0} .bloom::before{ content:""; position:absolute; inset:-1.4rem -3rem; z-index:-1; pointer-events:none; background:radial-gradient(52% 62% at 50% 50%, rgba(224,153,92,.3), rgba(217,169,78,.12) 55%, transparent 76%); opacity:0; transition:opacity .7s ease .2s; } .bloom.is-visible::before{opacity:1} .petals{position:absolute;inset:0;overflow:hidden;pointer-events:none} .petals i{ position:absolute; left:var(--px); top:var(--py); width:13px; height:13px; background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 14 14'%3E%3Cpath d='M7 1 C 11 4 12 9 7 13 C 2 9 3 4 7 1 Z' fill='%23E7677D'/%3E%3C/svg%3E") center/contain no-repeat; opacity:.45; rotate:var(--pr,0deg); animation:petal-drift var(--pt,9s) ease-in-out var(--pd,0s) infinite alternate; } @keyframes petal-drift{ from{transform:translate(0,0) rotate(0deg)} to{transform:translate(7px,15px) rotate(16deg)} } .vine-sprout{ position:absolute; left:26px; top:var(--sy,42%); width:42px; height:26px; pointer-events:none; overflow:visible; } .vs-stem{ stroke-dasharray:46; stroke-dashoffset:46; transition:stroke-dashoffset .9s cubic-bezier(.3,.1,.3,1) .25s; } .vine-sprout.is-visible .vs-stem{stroke-dashoffset:0} .vs-bloom{opacity:0;transition:opacity .55s ease 1.05s} .vine-sprout.is-visible .vs-bloom{opacity:1} /* ---- focus ---- */ :focus-visible{ outline:3px solid var(--rose); outline-offset:3px; border-radius:4px; } /* ---- reduced motion ---- */ @media (prefers-reduced-motion:reduce){ html{scroll-behavior:auto} *,*::before,*::after{ animation-duration:.01ms !important; animation-iteration-count:1 !important; transition-duration:.01ms !important; transition-delay:0s !important; } .reveal{opacity:1;transform:none} /* the vine appears fully embroidered, no scroll drawing */ .vine{clip-path:none!important;animation:none!important;transition:none!important} /* delight moments settle into their end state, motionless */ .vs-stem{stroke-dashoffset:0!important} .vs-bloom{opacity:1!important} .bloom::before{opacity:1} .petals i{animation:none} } /* ---- desktop backdrop: night glade around the phone column ---- */ .backdrop{display:none} @media (min-width:640px){ .backdrop{ display:block; position:fixed; inset:0; z-index:0; overflow:hidden; pointer-events:none; /* lantern-glow behind the card + warm adobe-dusk vignette */ background: radial-gradient(52% 60% at 50% 42%, rgba(232,195,106,.12), transparent 70%), radial-gradient(120% 90% at 50% 110%, rgba(90,58,34,.55), transparent 60%); } /* dark adobe-wall silhouettes along the viewport bottom */ .backdrop::before{ content:""; position:absolute; inset:auto 0 0 0; height:22vh; background: linear-gradient(171deg, transparent 55%, rgba(90,58,34,.5) 55.5%), linear-gradient(188deg, transparent 68%, rgba(58,36,24,.85) 68.5%), linear-gradient(176deg, transparent 80%, var(--plum-950) 80.4%); } .bd-star{ position:absolute; left:var(--x); top:var(--y); width:3px; height:3px; border-radius:50%; background:var(--cloud); opacity:.15; animation:bd-twinkle var(--t,5s) ease-in-out var(--fd,0s) infinite; } .bd-fly{ position:absolute; left:var(--x); top:var(--y); width:4px; height:4px; border-radius:50%; background:var(--amber-soft); box-shadow:0 0 7px 2px rgba(242,166,90,.6); opacity:0; animation:firefly var(--t,9s) ease-in-out var(--fd,0s) infinite; } .page{position:relative;z-index:1} } @keyframes bd-twinkle{ 0%,100%{opacity:.12;transform:scale(1)} 50%{opacity:.65;transform:scale(1.35)} } @media (prefers-reduced-motion:reduce){ .bd-star,.bd-fly{animation:none;opacity:.3} } /* ---- language switcher ---- */ .lang{ position:fixed; top:.9rem; /* hug the phone column's right edge on desktop, the window edge on mobile */ right:max(.9rem, calc((100% - 480px) / 2 + .9rem)); z-index:1001; /* above splash and grain */ display:flex; gap:2px; padding:3px; border-radius:999px; background:rgba(43,26,18,.55); backdrop-filter:blur(6px); -webkit-backdrop-filter:blur(6px); } .lang-btn{ padding:.32em .7em; border-radius:999px; font-family:"Manrope",sans-serif; font-size:.72rem; font-weight:600; letter-spacing:.04em; color:var(--cream); opacity:.75; transition:background .3s,opacity .3s; } .lang-btn:hover{opacity:1} .lang-btn.is-active{background:var(--crimson);opacity:1} .lang-btn:focus-visible{outline:2px solid var(--rose);outline-offset:2px} /* === 00 splash === */ /* ===== 00 SPLASH ===== */ .splash { position: fixed; inset: 0; /* desktop: same phone-width column as .page, centered over the plum body */ width: min(100%, 480px); margin-inline: auto; box-shadow: 0 0 60px rgba(0, 0, 0, .45); z-index: 998; /* below grain (999) so the splash gets the same paint texture as every screen */ touch-action: none; overscroll-behavior: contain; display: grid; place-items: center; overflow: hidden; text-align: center; color: var(--cream); /* painterly gradient echo of the artwork — paints instantly while splash.webp streams in */ background: linear-gradient(172deg, transparent 82%, var(--plum-950) 82.4%), linear-gradient(192deg, transparent 66%, var(--mauve-deep) 66.5%), linear-gradient(174deg, transparent 61%, var(--mauve) 61.6%), radial-gradient(120% 55% at 50% 46%, var(--cloud) 0%, rgba(251,246,234,0) 60%), linear-gradient(180deg, var(--sky-deep) 0%, var(--sky) 34%, var(--cream) 58%, var(--amber-soft) 72%); transition: opacity .9s ease, transform 1.1s cubic-bezier(.22,1,.36,1), visibility 0s linear .9s; } .splash--closing { opacity: 0; transform: scale(1.08); visibility: hidden; pointer-events: none; } .splash:focus, .splash:focus-visible { outline: none; } /* programmatic focus target */ /* pre-dawn painting, slow cinematic drift */ .splash-art { position: absolute; inset: 0; overflow: hidden; } .splash-art img { width: 100%; height: 100%; object-fit: cover; animation: splash-drift 20s ease-in-out infinite alternate; } /* directional warm-walnut scrim descending from the implied ayvon roof — never a generic black gradient */ .splash-art::after { content: ""; position: absolute; inset: 0; pointer-events: none; background: linear-gradient(180deg, rgba(58,36,24,.5), rgba(58,36,24,.14) 22%, transparent 42%); } @keyframes splash-drift { from { transform: scale(1); } to { transform: scale(1.09) translateY(-1.5%); } } /* warm courtyard-air glow behind the content — strong enough that the dark Cormorant text reads even where the group meets the painted scene */ .splash-sun { position: absolute; left: 50%; top: 33%; width: min(90vw, 440px); aspect-ratio: 1; transform: translate(-50%, -50%); border-radius: 50%; background: radial-gradient(circle, rgba(253,246,233,.95) 0%, rgba(253,246,233,.5) 38%, rgba(232,195,106,.18) 60%, rgba(232,195,106,0) 74%); pointer-events: none; } /* the artwork's calm sky sits high (top ~20–48%); lift the group off dead-centre so the crown meets the painted vine and the names/date land in the sky, not on the busy ayvon below */ .splash-inner { position: relative; padding: 2rem 1.5rem; max-width: 30rem; transform: translateY(-10vh); } /* the suzani palak-rosette / pomegranate crown above the names — Anor's splash signature (no letter monogram here) */ .splash-crown { width: clamp(104px, 32vw, 136px); height: auto; margin-inline: auto; filter: drop-shadow(0 2px 6px rgba(43,26,18,.3)); animation: splash-up 1s cubic-bezier(.22,1,.36,1) both; } .splash-kicker { margin-top: 1.4rem; color: var(--plum-700); animation: splash-up 1s cubic-bezier(.22,1,.36,1) .18s both; } .splash-names { margin-top: .9rem; font-family: "Cormorant", serif; font-weight: 600; font-size: clamp(2.6rem, 10vw, 4rem); line-height: 1.08; color: var(--plum-950); animation: splash-up 1.1s cubic-bezier(.22,1,.36,1) .32s both; } .splash-i { font-size: .58em; color: var(--crimson); margin: 0 .06em; } .splash-date { margin-top: 1rem; font-family: "Cormorant", serif; font-size: 1.1rem; letter-spacing: .18em; text-transform: uppercase; color: var(--plum-900); animation: splash-up 1.1s cubic-bezier(.22,1,.36,1) .46s both; } .splash-btn { margin-top: 2.4rem; animation: splash-up 1.1s cubic-bezier(.22,1,.36,1) .62s both, splash-glow 2.8s ease-in-out 2.2s infinite; } @keyframes splash-glow { 0%, 100% { box-shadow: 0 6px 18px rgba(43,26,18,.25); } 50% { box-shadow: 0 6px 30px rgba(181,48,43,.5); } } @keyframes splash-up { from { opacity: 0; transform: translateY(26px); } to { opacity: 1; transform: none; } } /* === 01 hero === */ /* ===== 01 HERO ===== */ /* the art is 9:16 scenery held INSIDE the architecture: full-window cover, a carved roof-beam across the top, walnut scrims from roof and ground */ .hero { padding: 0; min-height: 100svh; /* the hero owns exactly one window */ position: relative; display: flex; align-items: flex-start; /* title lives in the calm upper sky; the couple (the art's focal point, lower third) stays uncovered */ overflow: hidden; background: var(--plum-950); } /* programmatic focus target after the splash closes — never show an outline */ .hero:focus, .hero:focus-visible { outline: none; } /* the implied ayvon roof: a carved beam along the hero's top edge */ .hero::before { content: ""; position: absolute; top: 0; left: 0; right: 0; height: 12px; z-index: 2; background: repeating-linear-gradient(90deg, transparent 0 42px, rgba(251,243,230,.1) 42px 44px, transparent 44px 58px), linear-gradient(180deg, #5A3A22, #2B1A12); box-shadow: 0 3px 8px rgba(43,26,18,.5); } .hero-canvas { position: absolute; inset: 0; overflow: hidden; /* contains the entrance zoom */ } .hero-art { width: 100%; height: 112%; /* crop the art's empty orange foreground path off the base */ object-fit: cover; object-position: top; } /* directional warm-walnut scrims: one descending from the roof beam, one rising from the ground the names stand on — never a generic black fade */ .hero-scrim { position: absolute; inset: 0; pointer-events: none; background: /* a warm-walnut veil over the upper sky so the cream title reads on the bright golden hour — reaches down through the title zone, then clears */ linear-gradient(180deg, rgba(58,36,24,.52), rgba(58,36,24,.3) 30%, rgba(58,36,24,.08) 50%, transparent 64%), /* the base eases into the next bay's cream — no hard color cut */ linear-gradient(0deg, rgba(251,243,230,.9), rgba(251,243,230,.35) 7%, transparent 14%); } .hero-content { position: relative; width: 100%; text-align: center; padding: 15vh 1.6rem 0; /* title group sits in the upper sky, below the roof beam */ color: var(--cream); } /* upright, inscription-like — Anor never writes the names in a script face */ .hero-names { font-family: "Cormorant", serif; font-weight: 600; color: var(--cream); /* base h1 rule would paint it --plum-900, invisible over the art */ font-size: clamp(2.5rem, 9.8vw, 3.5rem); line-height: 1; /* tighter, more monumental (brief asks .9 — Cyrillic descenders need the extra) */ letter-spacing: .01em; display: flex; flex-direction: column; align-items: center; gap: .05em; text-shadow: 0 2px 20px rgba(43,26,18,.65); } /* a 20+-char name wraps to a second line — never clips at the column edge */ .hero-name { max-width: 100%; overflow-wrap: anywhere; } .hero-amp { font-family: "Cormorant", serif; font-style: italic; font-weight: 500; font-size: .42em; color: var(--amber-soft); line-height: 1; } /* the carved beam the names rest on — walnut, subtle grain, carved notches, post-cap ends */ .hero-beam { position: relative; width: min(82%, 340px); height: 14px; margin: 1.1rem auto .9rem; border-radius: 2px; background: repeating-linear-gradient(90deg, transparent 0 40px, rgba(43,26,18,.5) 40px 42px, transparent 42px 56px), repeating-linear-gradient(180deg, rgba(251,243,230,.06) 0 1px, transparent 1px 4px), linear-gradient(180deg, #6E4A32, #3A2418 55%, #2B1A12); box-shadow: 0 4px 10px rgba(0,0,0,.45); } .hero-beam::before, .hero-beam::after { content: ""; position: absolute; top: -4px; width: 10px; height: 22px; background: linear-gradient(180deg, #5A3A22, #2B1A12); border-radius: 2px; } .hero-beam::before { left: -6px; } .hero-beam::after { right: -6px; } .hero-date { font-family: "Cormorant", serif; font-weight: 500; font-size: clamp(.9rem, 3.4vw, 1.1rem); letter-spacing: .22em; text-transform: uppercase; color: var(--cloud); font-variant-numeric: tabular-nums; } /* the desktop backdrop's lantern sparks still use this flight path */ @keyframes firefly { 0%, 100% { transform: translate(0, 0); opacity: 0; } 12% { opacity: .95; } 45% { transform: translate(14px, -30px); opacity: .3; } 60% { transform: translate(4px, -44px); opacity: .9; } 88% { transform: translate(-8px, -20px); opacity: 0; } } /* cinematic entrance, keyed to the splash opening */ body.is-open .hero-art { animation: hero-art-in 1.8s cubic-bezier(.22,1,.36,1) both; } body.is-open .hero-names { animation: hero-in 1.1s cubic-bezier(.22,1,.36,1) .3s both; } body.is-open .hero-beam { animation: hero-in 1.1s cubic-bezier(.22,1,.36,1) .42s both; } body.is-open .hero-date { animation: hero-in 1.1s cubic-bezier(.22,1,.36,1) .55s both; } @keyframes hero-fade { from { opacity: 0; } to { opacity: 1; } } @keyframes hero-art-in { from { transform: scale(1.06); } to { transform: none; } } @keyframes hero-in { from { opacity: 0; transform: translateY(22px); filter: blur(6px); } to { opacity: 1; transform: none; filter: none; } } /* === 02 invite + couple (one page) === */ #invite { text-align: center; --secbg: var(--tint-lavender); } /* the greeting speaks in the intimate register: Cormorant italic, larger, warm walnut ink */ .invite-lead { max-width: 29ch; margin: 1.2rem auto 0; font-family: "Cormorant", serif; font-style: italic; font-weight: 500; font-size: clamp(1.4rem, 5.4vw, 1.75rem); line-height: 1.4; color: var(--ink); text-wrap: balance; } .invite-accent { font-size: 1.18em; color: var(--rose); white-space: nowrap; } /* an open textile panel, not a boxed sampler: two opposing embroidered vine corners, a low sunlit-clay glow behind the middle, and a woven pomegranate- and-gold stripe closing the hem. No border, no dashed outline. */ .invite-quote { position: relative; margin: 2.8rem auto 0; max-width: 26rem; padding: 2.6rem 1.75rem 2rem; background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 48 48' fill='none'%3E%3Cpath d='M2 46 C2 20 20 2 46 2' stroke='%23B5302B' stroke-width='1.6' stroke-dasharray='6 3'/%3E%3Cpath d='M14 30 C10 26 10 20 14 16' stroke='%23B5302B' stroke-width='1.4'/%3E%3Ccircle cx='30' cy='7' r='2.4' fill='%23B5302B'/%3E%3Ccircle cx='7' cy='30' r='2.4' fill='%23B5302B'/%3E%3Ccircle cx='30' cy='7' r='.9' fill='%23D9A94E'/%3E%3Ccircle cx='7' cy='30' r='.9' fill='%23D9A94E'/%3E%3C/svg%3E") left 6px top 6px/42px no-repeat, url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 48 48' fill='none'%3E%3Cg transform='rotate(180 24 24)'%3E%3Cpath d='M2 46 C2 20 20 2 46 2' stroke='%23B5302B' stroke-width='1.6' stroke-dasharray='6 3'/%3E%3Cpath d='M14 30 C10 26 10 20 14 16' stroke='%23B5302B' stroke-width='1.4'/%3E%3Ccircle cx='30' cy='7' r='2.4' fill='%23B5302B'/%3E%3Ccircle cx='7' cy='30' r='2.4' fill='%23B5302B'/%3E%3Ccircle cx='30' cy='7' r='.9' fill='%23D9A94E'/%3E%3Ccircle cx='7' cy='30' r='.9' fill='%23D9A94E'/%3E%3C/g%3E%3C/svg%3E") right 6px bottom 12px/42px no-repeat, radial-gradient(58% 46% at 50% 52%, rgba(224,153,92,.14), transparent 72%); } /* the woven closing stripe */ .invite-quote::after { content: ""; position: absolute; left: 18%; right: 18%; bottom: 0; height: 3px; background: repeating-linear-gradient(90deg, var(--anor) 0 8px, var(--amber) 8px 11px); } /* a pomegranate blossom opens the quote — no quotation marks, no ceramic tile */ .invite-quote-mark { position: absolute; top: .3rem; left: 50%; transform: translateX(-50%); width: 26px; height: 26px; background: var(--blossom) center/contain no-repeat; } .invite-quote-text { margin: 0; font-family: "Cormorant", serif; font-weight: 600; font-style: italic; font-size: clamp(1.4rem, 5.4vw, 1.7rem); line-height: 1.3; color: var(--plum-900); text-wrap: balance; } .invite-quote-sub { margin-top: 1rem; font-size: .84rem; line-height: 1.6; letter-spacing: .02em; color: color-mix(in srgb, var(--ink) 78%, var(--mauve-deep)); max-width: 32ch; margin-inline: auto; } /* portraits — paired vertical 3:4 wall niches that OVERLAP, staggered like two niches carved at different heights in the same adobe wall */ .couple-grid { position: relative; display: flex; justify-content: center; align-items: flex-start; gap: 0; margin-top: 2.6rem; padding-top: 12px; /* room for the pediments */ } .couple-card { flex: 1 1 0; min-width: 0; max-width: 11.5rem; } /* the second niche overlaps the first and hangs a step lower */ .couple-card:last-child { margin-left: -20px; margin-top: 34px; } .couple-frame { width: 100%; margin-inline: auto; } /* portraits mirrored so the couple gaze toward each other; no zoom — a mounted portrait must not slide inside its mat */ .couple-photo { width: 100%; aspect-ratio: 3 / 4; object-fit: cover; transform: scaleX(-1); } .couple-name { margin-top: 1rem; font-family: "Cormorant", serif; font-weight: 600; font-size: clamp(1.35rem, 5.5vw, 1.8rem); line-height: 1.1; color: var(--ink); } .couple-line { margin-top: .3rem; font-size: .78rem; letter-spacing: .05em; color: var(--mauve-deep); } .couple-ig { margin-top: .5rem; display: inline-flex; align-items: flex-start; /* icon stays on the first line when the handle wraps */ gap: .35em; max-width: 100%; /* never wider than the couple card */ font-size: .78rem; font-weight: 600; color: var(--rose); text-decoration: none; } /* a long handle truncates with … instead of overflowing into the other card; min-width:0 lets the flex item shrink below its content width */ /* a long handle wraps to a second line (min-width:0 lets the flex item shrink, overflow-wrap:anywhere breaks the unbroken handle) instead of overflowing */ .couple-ig-handle { min-width: 0; overflow-wrap: anywhere; } /* .couple-ig's own display:inline-flex outranks the UA [hidden]{display:none} rule (author styles always beat UA styles) — added in the same diff on purpose, see the hidden-attribute gotcha this repo keeps re-learning */ .couple-ig[hidden] { display: none; } .couple-ig:hover { color: var(--crimson); } .couple-ig::before { content: ""; flex: none; /* keep the 14px icon — don't let the flex row shrink it */ width: 14px; height: 14px; /* fallback where 1lh is unsupported (top-aligns via flex-start) */ height: 1lh; /* one line box tall, so the 14px glyph centres on the handle's first line instead of sitting above it — and still lands on the first line (not between them) when a long handle wraps */ background: currentColor; -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2'%3E%3Crect x='3' y='3' width='18' height='18' rx='5'/%3E%3Ccircle cx='12' cy='12' r='4'/%3E%3Ccircle cx='17.5' cy='6.5' r='1'/%3E%3C/svg%3E") center/contain no-repeat; mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2'%3E%3Crect x='3' y='3' width='18' height='18' rx='5'/%3E%3Ccircle cx='12' cy='12' r='4'/%3E%3Ccircle cx='17.5' cy='6.5' r='1'/%3E%3C/svg%3E") center/contain no-repeat; } /* the joining word sits as a small stitched roundel over the niche overlap */ .couple-amp { position: absolute; left: 50%; top: 37%; translate: -50% 0; z-index: 3; display: grid; place-items: center; width: 2.3em; height: 2.3em; font-size: clamp(.95rem, 3.6vw, 1.15rem); line-height: 1; color: var(--crimson); background: var(--cream); border: 1.5px dashed var(--crimson); border-radius: 50%; box-shadow: 0 4px 10px rgba(43,26,18,.28); } /* === 04 countdown (lives inside #calendar) === */ /* four UNBOXED columns inside the keepsake niche, parted only by tiny stitched vertical rules — no tiles, no borders */ .cd-grid { display: grid; grid-template-columns: repeat(4, 1fr); max-width: 21rem; margin: 1.7rem auto 0; padding-top: 1.3rem; /* a stitched madder rule separates the calendar from the countdown */ background: repeating-linear-gradient(90deg, rgba(181,48,43,.4) 0 5px, transparent 5px 8px) top center/62% 1.5px no-repeat; } .cd-grid[hidden] { display: none; } .cd-tile { display: flex; flex-direction: column; align-items: center; gap: .3rem; padding: .2rem 0; } .cd-tile + .cd-tile { background: repeating-linear-gradient(180deg, rgba(181,48,43,.45) 0 5px, transparent 5px 9px) left center/1.5px 68% no-repeat; } .cd-num { font-family: "Cormorant", serif; font-weight: 600; font-variant-numeric: tabular-nums; font-size: clamp(1.9rem, 7.8vw, 2.35rem); line-height: 1; color: var(--anor); /* fixed advance width — no layout shift as digits tick */ min-width: 2.2ch; } .cd-label { /* scale down + tighter tracking so the longest labels (ru СЕКУНДЫ/МИНУТЫ, en SECONDS/MINUTES) stay inside the column instead of spilling out */ font-size: clamp(.55rem, 2.4vw, .68rem); letter-spacing: .1em; text-transform: uppercase; color: var(--plum-900); /* walnut, full opacity */ white-space: nowrap; max-width: 100%; } .cd-today { margin-top: 2rem; font-size: clamp(1.5rem, 5.8vw, 1.85rem); color: var(--anor); } /* === 05 calendar === */ /* 05 — calendar */ #calendar { text-align: center; --secbg: var(--tint-sky); } .cal-title { font-family: "Cormorant", serif; font-weight: 500; font-size: clamp(1.7rem, 6.5vw, 2.2rem); color: var(--plum-900); margin-top: .85rem; } /* calendar + countdown share ONE keepsake: a shallow arched wall niche with a cream→sunlit-clay wash — not two utility cards */ .cal-keep { max-width: 23.5rem; margin: 2rem auto 0; /* top padding clears the arch shoulders: the corner weekday labels (du/ya) must start BELOW where the ellipse curves in past the grid's edge columns */ padding: 2.6rem 1rem 1.8rem; border: 1.5px solid color-mix(in srgb, var(--plum-700) 40%, transparent); border-radius: 140px 140px 6px 6px / 78px 78px 6px 6px; background: linear-gradient(180deg, var(--cloud) 30%, color-mix(in srgb, var(--sky-deep) 16%, var(--cream))); } .cal-card { max-width: 21rem; margin: 0 auto; padding: 0 .3rem; } .cal-week, .cal-grid { display: grid; grid-template-columns: repeat(7, 1fr); justify-items: center; } .cal-week span { font-size: .66rem; letter-spacing: .14em; text-transform: uppercase; color: var(--mauve-deep); padding-bottom: .7rem; } .cal-grid { row-gap: .35rem; } .cal-day { width: min(2.4rem, 100%); aspect-ratio: 1; display: grid; place-items: center; font-variant-numeric: tabular-nums; font-size: .92rem; /* ordinary days recede in warm walnut, never gray */ color: color-mix(in srgb, var(--plum-900) 70%, var(--cream)); position: relative; } /* wedding day — a pomegranate rosette medallion (petaled outline, thin gold stitch ring), pulsing softly */ .cal-day--wed { color: #fff; font-weight: 600; z-index: 1; } .cal-day--wed::before { content: ""; position: absolute; inset: -.15rem; z-index: -1; background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 40 40'%3E%3Cg fill='%238E1E22'%3E%3Ccircle cx='20' cy='6.5' r='5.5'/%3E%3Ccircle cx='29.5' cy='10.5' r='5.5'/%3E%3Ccircle cx='33.5' cy='20' r='5.5'/%3E%3Ccircle cx='29.5' cy='29.5' r='5.5'/%3E%3Ccircle cx='20' cy='33.5' r='5.5'/%3E%3Ccircle cx='10.5' cy='29.5' r='5.5'/%3E%3Ccircle cx='6.5' cy='20' r='5.5'/%3E%3Ccircle cx='10.5' cy='10.5' r='5.5'/%3E%3Ccircle cx='20' cy='20' r='13.5'/%3E%3C/g%3E%3Ccircle cx='20' cy='20' r='10.5' fill='none' stroke='%23D9A94E' stroke-width='1' stroke-dasharray='2 2.2'/%3E%3C/svg%3E") center/contain no-repeat; } .cal-day--wed::after { content: ""; position: absolute; inset: .12rem; border-radius: 50%; border: 2px solid var(--rose); animation: cal-pulse 2s cubic-bezier(.22,1,.36,1) infinite; } /* the ♥ glyph main.js still renders is off-vocabulary here (suzani rosette marks the day instead) — suppressed in CSS, markup left to the shared JS */ .cal-heart { display: none; } @keyframes cal-pulse { 0% { transform: scale(1); opacity: .75; } 70% { transform: scale(1.55); opacity: 0; } 100% { transform: scale(1.55); opacity: 0; } } @media (prefers-reduced-motion: reduce) { .cal-day--wed::after { animation: none; opacity: 0; } } .cal-fallback { font-size: .92rem; color: var(--ink); padding-top: .5rem; } /* === 06 venue === */ /* 06 — venue */ #venue { text-align: center; } /* wide 16:9 niche; the indigo ceramic location plaque rests on its shelf */ .venue-card { margin: 2.2rem .2rem 3rem; } .venue-art { width: 100%; aspect-ratio: 16 / 9; object-fit: cover; } .venue-plaque { position: absolute; left: 50%; bottom: -9px; /* standing on the shelf */ translate: -50% 0; z-index: 2; width: 58px; height: 26px; border-radius: 3px; background: linear-gradient(165deg, #2E7BA8, var(--indigo) 55%, #174763); box-shadow: inset 0 1px 0 rgba(255,255,255,.4), 0 3px 6px rgba(43,26,18,.45); } .venue-plaque::before { content: ""; position: absolute; inset: 4px 21px; background: var(--cream); -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23000'%3E%3Cpath d='M12 2a7 7 0 0 0-7 7c0 5 7 13 7 13s7-8 7-13a7 7 0 0 0-7-7zm0 9.5A2.5 2.5 0 1 1 12 6.5a2.5 2.5 0 0 1 0 5z'/%3E%3C/svg%3E") center/contain no-repeat; mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23000'%3E%3Cpath d='M12 2a7 7 0 0 0-7 7c0 5 7 13 7 13s7-8 7-13a7 7 0 0 0-7-7zm0 9.5A2.5 2.5 0 1 1 12 6.5a2.5 2.5 0 0 1 0 5z'/%3E%3C/svg%3E") center/contain no-repeat; } .venue-name { font-family: "Cormorant", serif; font-weight: 600; font-size: clamp(1.7rem, 6.5vw, 2.2rem); line-height: 1.15; color: var(--ink); margin: 0 0 .5rem; } .venue-address { font-size: .95rem; color: var(--mauve-deep); margin: 0 0 .35rem; } .venue-time { font-family: "Cormorant", serif; font-size: clamp(1.1rem, 4.2vw, 1.3rem); font-weight: 500; color: var(--ink); margin: 0 0 1.75rem; } .venue-hour { color: var(--mauve-deep); font-variant-numeric: tabular-nums; } /* directional cue on the map CTA (codex design pass) */ .venue-btn-arrow { display: inline-block; font-size: 1.1em; transition: transform .3s cubic-bezier(.22, 1, .36, 1); } .venue-btn:hover .venue-btn-arrow, .venue-btn:focus-visible .venue-btn-arrow { transform: translate(.2rem, -.2rem); } .venue-note { margin: 1.5rem auto 0; max-width: 22ch; font-size: .85rem; line-height: 1.6; color: var(--mauve-deep); } .venue-note::before { content: ""; display: block; width: 3rem; height: 1px; margin: 0 auto 1.1rem; background: linear-gradient(90deg, transparent, var(--rose), transparent); } /* === 07 program === */ /* 07 — program */ #program { --secbg: var(--tint-lavender); } /* (the old `#program .kicker{display:block}` fix is gone — its ID specificity would override the shared stitched-kicker flex row) */ .prog-list { list-style: none; margin: 2.5rem auto 0; padding: 0 0 2.4rem; /* room for the closing paired-pomegranate knot */ max-width: 21rem; position: relative; } /* container is only a trigger for the line draw — never fade the whole list */ .prog-list.reveal { opacity: 1; transform: none; transition: none; } /* the embroidered vine stem: gently curved, pomegranate at 45%, threaded through the blossom stations — draws itself in on scroll (scaleY) */ .prog-list::before { content: ""; position: absolute; left: 20px; top: .9rem; bottom: 2.2rem; width: 12px; transform: scaleY(0); transform-origin: top; transition: transform 1.5s cubic-bezier(.22,1,.36,1) .15s; background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='120' viewBox='0 0 12 120'%3E%3Cpath d='M6 0 C 11 20 1 40 6 60 C 11 80 1 100 6 120' fill='none' stroke='%238E1E22' stroke-opacity='.45' stroke-width='2'/%3E%3C/svg%3E") left top/12px 120px repeat-y; } .prog-list.is-visible::before { transform: scaleY(1); } /* the vine ends in a small paired-pomegranate knot */ .prog-list::after { content: ""; position: absolute; left: 9px; /* centred on the stem (x=26px) */ bottom: 0; width: 34px; height: 22px; background: var(--pom-pair) center/contain no-repeat; } /* dots pop after the line reaches them */ .prog-item::before { transition: scale .5s cubic-bezier(.34,1.56,.64,1); scale: 0; } .prog-list.is-visible .prog-item::before { scale: 1; } .prog-list.is-visible .prog-item:nth-child(1)::before { transition-delay: .25s; } .prog-list.is-visible .prog-item:nth-child(2)::before { transition-delay: .55s; } .prog-list.is-visible .prog-item:nth-child(3)::before { transition-delay: .85s; } .prog-list.is-visible .prog-item:nth-child(4)::before { transition-delay: 1.15s; } .prog-list.is-visible .prog-item:nth-child(5)::before { transition-delay: 1.45s; } .prog-list.is-visible .prog-item:nth-child(6)::before { transition-delay: 1.75s; } .prog-list.is-visible .prog-item:nth-child(7)::before { transition-delay: 2.05s; } .prog-list.is-visible .prog-item:nth-child(8)::before { transition-delay: 2.35s; } /* each event rests in a shallow textile fold — a warm sunlit-clay wash that thins away to the right, folded corners top-left/bottom-right. Not a card. */ .prog-item { position: relative; margin-bottom: 1.7rem; padding: 16px 14px 18px 54px; background: linear-gradient(100deg, rgba(224,153,92,.1), transparent 72%); border-radius: 28px 8px 28px 8px; } .prog-item:last-child { margin-bottom: 0; } /* embroidered stations on the stem: pomegranate blossom / leaf knot, alternating, each on a small cream disc so the stem passes behind */ .prog-item::before { content: ""; position: absolute; left: 16px; top: 17px; width: 20px; height: 20px; border-radius: 50%; background: var(--blossom) center/16px no-repeat, radial-gradient(circle, var(--cream) 0 62%, transparent 66%); } .prog-item:nth-child(even)::before { background: var(--leafknot) center/15px no-repeat, radial-gradient(circle, var(--cream) 0 62%, transparent 66%); } .prog-time { display: block; font-family: "Cormorant", serif; font-style: italic; font-weight: 600; font-size: clamp(1.15rem, 4.4vw, 1.3rem); line-height: 1.1; color: var(--anor); font-variant-numeric: tabular-nums; } .prog-label { display: block; margin-top: .2rem; font-family: "Cormorant", serif; font-weight: 600; font-size: clamp(1.35rem, 5.2vw, 1.65rem); line-height: 1.15; letter-spacing: .01em; color: var(--plum-900); } /* its own display:block outranks the UA [hidden]{display:none}, and i18n.js hides an unlabelled programme item's text — same fix as .couple-ig below */ .prog-label[hidden] { display: none; } /* === 08 wishes === */ /* 08 — wishes */ .wish { text-align: center; } /* the farewell scene rests in its own wide niche */ .wish-art { margin: 2.2rem .2rem 3rem; } .wish-art .art { width: 100%; aspect-ratio: 16 / 9; object-fit: cover; } /* the centred italic blessing — the page's emotional crescendo */ .wish-closing { font-family: "Cormorant", serif; font-style: italic; font-weight: 500; font-size: clamp(1.55rem, 6vw, 1.9rem); line-height: 1.4; color: var(--ink); max-width: 22ch; margin: 0 auto; } .wish-closing strong { font-weight: 600; } /* a paired-pomegranate motif seals the blessing (survives the i18n repaint — textContent swaps never touch a ::after) */ .wish-closing::after { content: ""; display: block; width: 40px; height: 26px; margin: 1.4rem auto 0; background: var(--pom-pair) center/34px 22px no-repeat; } .wish-bless { margin-top: 2rem; font-family: "Manrope", sans-serif; font-weight: 600; font-variant-caps: all-small-caps; letter-spacing: .3em; text-indent: .3em; /* balance the letter-spacing tail */ font-size: 1rem; color: var(--mauve-deep); } /* === 09 finale === */ /* page footer — the dark plum finale; a real