/* ========================================================== RIDA & ESMAIL — ELEGANT EDITION THEME Loaded after style.css. Refines palette, typography, spacing/hierarchy, motion and iconography without touching markup structure, IDs or JavaScript behaviour. Every visual here is pure CSS / inline SVG — no new external image assets are required, so nothing can 404. ========================================================== */ :root{ /* ---- Logo-true palette (sampled from the heart mark) ---- */ --maroon: #7E2D18; --maroon-deep: #4E1B0F; --maroon-soft: #9A4A2E; --blush: #CB9999; --blush-soft: #E9D3D3; --blush-pale: #F6E9E7; --wine: #5C2116; --ivory: #FFFCF8; --ivory-warm: #FBF2E8; --gold: #C6A164; --gold-light: #E3CE9C; --gold-line: rgba(198,161,100,.55); --shadow-soft: 0 24px 64px rgba(78,27,15,.10), 0 6px 18px rgba(78,27,15,.06); --shadow-lift: 0 18px 40px rgba(78,27,15,.16); --ease-silk: cubic-bezier(.22,.75,.28,1); } /* ---------- Base type & ambience ---------- */ body.elegant-edition{ font-size:19px; letter-spacing:.006em; background: radial-gradient(ellipse 80% 55% at 50% -6%, rgba(255,255,255,.9), transparent 60%), radial-gradient(ellipse 70% 50% at 92% 108%, rgba(203,153,153,.14), transparent 60%), linear-gradient(180deg,#fffaf3 0%,#f9eee2 46%,#fbf1e5 100%); } /* Base theme locks overflow-x on but not ; on some mobile browsers the root element is what actually controls the horizontal scroll, so a single element even 1px wider than the viewport (e.g. a fixed-position control caught mid-transition) can open a sideways scroll that clips the mute button off the right edge. Locking it on the root closes that gap. */ html{overflow-x:hidden;background:#f8efe4;} body.elegant-edition{max-width:100vw;} /* Slim ceremonial rails, like the edges of engraved stationery. */ body.elegant-edition::before,body.elegant-edition::after{ content:'';position:fixed;top:0;bottom:0;width:1px;z-index:3;pointer-events:none; background:linear-gradient(180deg,transparent 2%,var(--gold-line) 16%,var(--gold-line) 84%,transparent 98%); } body.elegant-edition::before{left:clamp(14px,2.25vw,34px);} body.elegant-edition::after{right:clamp(14px,2.25vw,34px);} @media(max-width:620px){ body.elegant-edition::before{left:8px;} body.elegant-edition::after{right:8px;} } .floral-corner{filter:saturate(.72) sepia(.08) hue-rotate(-6deg) contrast(1.03);opacity:.62;} .floral-bg .wash{ background: radial-gradient(ellipse at center,rgba(255,252,248,.5) 0 36%,rgba(255,252,248,.86) 72%), linear-gradient(180deg,rgba(255,252,248,.2),rgba(255,252,248,.55)); } .petal{filter:hue-rotate(-14deg) saturate(1.05) brightness(1.02);opacity:.5;} /* ---------- Typography system ---------- Display: Playfair Display (self-hosted) for names, dates, venue. Reading copy: Cormorant Garamond (self-hosted). Eyebrows / labels / buttons: Cinzel, a fine-tracked inscriptional capital face that reads like engraved invitation lettering. Signatures: Caveat — a natural, warm handwritten hand rather than a formal copperplate script. */ body.elegant-edition{font-family:'Cormorant Garamond',Georgia,serif;line-height:1.7;color:#3B2A22;} h1,h2,h3, .scratch-content .label,.scratch-instruction,.eyebrow,.countdown-label, .cal-btn,.language-button,.language-menu-title,.env-seal-cue-text, .take-me,.final-ameen-btn,#tapOpen .label,.scroll-guide{ font-family:'Cinzel','Playfair Display',Georgia,serif; } .name-rida,.name-esmail,.nikah-day,.venue-name, #familyInvite .grandmother-name,#familyInvite .invite-body .parents-name, .countdown-block .qubool,.scratch-content .big,.two-journeys,.keep-day, .closing-jannah-line,.loader-text{ font-family:'Playfair Display',Georgia,serif; } .letter .sign,.circle-sign,.env-note-sign,.sig-wrap .word,.sig-wrap .esmail{ font-family:'Caveat','Segoe Script',cursive; font-weight:600; } /* ---------- Elegant Arabic & Urdu display type ---------- Latin display faces have no Arabic glyphs, so headings and dates in RTL mode fall back to the base font. This block gives Arabic its own dignified naskh (Amiri) for display moments and Urdu its own calligraphic nastaliq, sized up to match their smaller optical body against the Latin faces. */ html[lang="ar"] h1,html[lang="ar"] h2,html[lang="ar"] h3, html[lang="ar"] .name-rida,html[lang="ar"] .name-esmail, html[lang="ar"] .scratch-content .date,html[lang="ar"] .nikah-day, html[lang="ar"] .venue-name,html[lang="ar"] .parents-name,html[lang="ar"] .grandmother-name, html[lang="ar"] .keep-day,html[lang="ar"] .two-journeys,html[lang="ar"] .closing-jannah-line{ font-family:'Amiri','Noto Naskh Arabic',serif!important;letter-spacing:0!important; } html[lang="ur"] h1,html[lang="ur"] h2,html[lang="ur"] h3, html[lang="ur"] .name-rida,html[lang="ur"] .name-esmail, html[lang="ur"] .scratch-content .date,html[lang="ur"] .nikah-day, html[lang="ur"] .venue-name,html[lang="ur"] .parents-name,html[lang="ur"] .grandmother-name, html[lang="ur"] .keep-day,html[lang="ur"] .two-journeys,html[lang="ur"] .closing-jannah-line{ font-family:'Noto Nastaliq Urdu','Noto Naskh Arabic',serif!important;letter-spacing:0!important; } html[lang="ar"] body.elegant-edition{font-family:'Noto Naskh Arabic','Amiri',serif;font-size:20.5px;} html[lang="ur"] body.elegant-edition{font-family:'Noto Nastaliq Urdu','Noto Naskh Arabic',serif;font-size:20px;line-height:2.05;} html[lang="ar"] .name-rida,html[lang="ar"] .name-esmail{font-size:clamp(3rem,11vw,6rem);line-height:1.2;letter-spacing:0;} html[lang="ur"] .name-rida,html[lang="ur"] .name-esmail{font-size:clamp(2.5rem,10vw,4.9rem);line-height:1.7;letter-spacing:0;} html[lang="ar"] .bismillah-ar,html[lang="ar"] .dua-arabic,html[lang="ar"] .final-ar, html[lang="ur"] .bismillah-ar,html[lang="ur"] .dua-arabic,html[lang="ur"] .final-ar{color:var(--wine);} html[lang="ar"] .eyebrow,html[lang="ar"] .cal-btn,html[lang="ar"] .take-me,html[lang="ar"] .language-button, html[lang="ur"] .eyebrow,html[lang="ur"] .cal-btn,html[lang="ur"] .take-me,html[lang="ur"] .language-button{ font-family:'Amiri','Noto Naskh Arabic',serif!important;letter-spacing:0!important;text-transform:none!important; } html[lang="ur"] .eyebrow,html[lang="ur"] .cal-btn,html[lang="ur"] .take-me,html[lang="ur"] .language-button{ font-family:'Noto Nastaliq Urdu','Noto Naskh Arabic',serif!important; } /* ---------- Rhythm & hierarchy ---------- */ .scene{padding:clamp(5.5rem,12vh,9rem) clamp(1.5rem,7vw,6.5rem);position:relative;} .scene-inner{max-width:730px;} /* A quiet, pure-CSS ornamental rule between chapters — three dots on a hairline, in place of any external divider image. */ .scene:not(#hero):not(#parentsLetter):not(#finalDua):not(#hashtagScene)::before{ content:''; display:block; width:min(150px,34vw); height:1px; margin:0 auto clamp(1.9rem,4.6vh,2.9rem); background:linear-gradient(90deg,transparent,var(--gold-line) 20%,var(--gold-line) 80%,transparent); position:relative; } .scene:not(#hero):not(#parentsLetter):not(#finalDua):not(#hashtagScene)::after{ content:'✦'; display:block; text-align:center; color:var(--gold); font-size:.62rem; letter-spacing:.3em; margin-top:calc(-1 * clamp(1.9rem,4.6vh,2.9rem) - .5rem); margin-bottom:clamp(1.4rem,3.4vh,2.1rem); opacity:.85; } /* ---------- Fixed chrome & icons ---------- */ .language-button,#soundToggle{ border-color:var(--gold-line); background:rgba(255,252,248,.92); color:var(--wine); box-shadow:0 10px 26px rgba(78,27,15,.10); transition:transform .35s var(--ease-silk),box-shadow .35s var(--ease-silk); } .language-button:hover,#soundToggle:hover{transform:translateY(-2px);box-shadow:0 14px 32px rgba(78,27,15,.16);} .language-globe{display:inline-flex;align-items:center;justify-content:center;color:var(--maroon);} .language-globe svg{display:block;} .language-menu{border-color:var(--gold-line);box-shadow:var(--shadow-soft);} .language-option{transition:background .2s ease,color .2s ease,padding-left .2s ease;} .language-option:hover{background:var(--blush-pale);padding-left:.35rem;} .language-option.active{background:rgba(198,161,100,.16);color:var(--maroon);} #progressLine{height:2px;background:linear-gradient(90deg,var(--gold),var(--blush),var(--maroon));} /* The tap/scroll affordance icons: a soft downward chevron with a resting dot, gently bobbing to invite interaction. Reads clearly at any size and matches the invitation's line-art mood far better than a stock emoji hand ever could. */ .interaction-tip{color:#8a655c;font-weight:500;letter-spacing:.05em;} .interaction-hand{color:var(--gold);animation:tapIconBob 1.8s ease-in-out infinite;} @keyframes tapIconBob{0%,100%{transform:translateX(-50%) translateY(0);}50%{transform:translateX(-50%) translateY(3px);}} @media(prefers-reduced-motion:reduce){.interaction-hand{animation:none;}} .scroll-guide{ border-color:var(--gold-line);background:rgba(255,252,248,.9);color:var(--wine); box-shadow:0 12px 30px rgba(78,27,15,.10); } /* ---------- Loader ---------- */ #loader{ background: radial-gradient(circle at 50% 42%,rgba(203,153,153,.16),transparent 32%), linear-gradient(180deg,#fffaf3,#f3e3d4); } /* Enlarge the mark and pull the blessing line / tap target up underneath it — the base layout spaced these across a fixed 68%/74% of viewport height regardless of how tall the mark itself was, which left a very large gap on most phones. */ .loader-heart{ width:min(60vw,240px); height:min(60vw,240px); top:11%; } .loader-text{color:var(--wine);letter-spacing:.02em;top:54%;} #tapOpen{gap:.7rem;top:60.5%;} #tapOpen .tap-pulse{ border:1px solid var(--gold-line); background:rgba(255,253,249,.6); box-shadow:0 0 0 8px rgba(198,161,100,.06),0 10px 28px rgba(78,27,15,.10); } #tapOpen .tap-pulse::after{background:var(--gold);} #tapOpen .label{color:var(--wine);margin-top:0;} /* ---------- Hero / save-the-date ---------- */ #hero .scene-inner{ border:1px solid var(--gold-line); border-radius:280px 280px 24px 24px; padding:clamp(3.2rem,8vw,5.2rem) clamp(1rem,4vw,2.8rem) clamp(2.8rem,7vw,4.5rem); background:linear-gradient(180deg,rgba(255,253,249,.62),rgba(255,250,243,.32)); box-shadow:inset 0 0 0 6px rgba(255,255,255,.24),0 34px 90px rgba(78,27,15,.08); } #hero .scene-inner::before{ content:'✦';display:block;margin:0 auto 1rem;color:var(--gold);font-size:1.05rem;letter-spacing:.3em;text-align:center; } .scratch-prelude{color:var(--wine);} .scratch-instruction{color:#6f5550;} .scratch-wrap{ border-color:var(--gold-line); box-shadow:0 26px 60px rgba(78,27,15,.16),inset 0 0 0 5px rgba(255,255,255,.24); } .scratch-content{background:linear-gradient(150deg,#fffdf9,#f6e6da);} .scratch-content .label,.scratch-date-caption{color:var(--wine);} .scratch-content .big{color:var(--maroon-soft);} .scratch-content .date{color:var(--maroon-deep);letter-spacing:.05em;} .countdown-block .qubool{color:var(--wine);} .countdown-cell{ border-top-color:var(--gold-line);border-bottom-color:var(--gold-line); background:linear-gradient(180deg,rgba(255,255,255,.35),transparent); border-radius:6px; transition:transform .4s var(--ease-silk); } .countdown-cell:hover{transform:translateY(-3px);} .countdown-num{color:var(--maroon);} .inshaallah{color:var(--wine);opacity:.85;} /* ---------- Bismillah / family invitation ---------- */ .bismillah-ar{color:var(--wine);text-shadow:0 12px 34px rgba(78,27,15,.10);} .trio span{color:var(--maroon-soft);font-family:'Cinzel','Playfair Display',serif;letter-spacing:.16em;} #familyInvite .grandmother-name,#familyInvite .invite-body .parents-name{color:var(--wine);} .divider{ height:1px;width:min(220px,52vw);margin:1.6rem auto; background:linear-gradient(90deg,transparent,var(--gold-line),transparent); position:relative; } /* ---------- Couple reveal — the emotional centrepiece ---------- */ #coupleReveal{padding-top:clamp(6.4rem,14vh,10rem);padding-bottom:clamp(6.4rem,14vh,10rem);} .name-rida,.name-esmail{ font-size:clamp(3.7rem,14vw,8.2rem); letter-spacing:.045em; text-shadow:0 18px 46px rgba(78,27,15,.12); } .name-rida{color:var(--blush);} .name-esmail{color:var(--wine);} .reveal.in-view .name-rida,.reveal.in-view .name-esmail{ transition:opacity 1s var(--ease-silk),transform 1s var(--ease-silk); } .couple-stage::before,.couple-stage::after{background:linear-gradient(90deg,transparent,var(--gold));} .esmail-sub{opacity:.62;} .two-journeys{color:var(--wine);font-style:italic;} /* ---------- Parents' letter ---------- */ .letter{ border:1px solid var(--gold-line); border-radius:4px; box-shadow:var(--shadow-soft); background:linear-gradient(180deg,#fffdf9,#f7ecdf 160%); } .letter h3{color:var(--wine);letter-spacing:.16em;} .letter h3::after{ content:'';display:block;width:64px;height:1px;margin:1.1rem auto 0; background:linear-gradient(90deg,transparent,var(--gold-line),transparent); } .letter .sign{color:var(--maroon);} /* ---------- Nikah details ---------- */ #nikahDetails .scene-inner{ background:rgba(255,252,248,.92); border:1px solid var(--gold-line); border-radius:6px; box-shadow:var(--shadow-soft); position:relative; padding:clamp(2.6rem,7vw,3.6rem) clamp(1.4rem,5vw,3rem); } .eyebrow{color:#8a655c;letter-spacing:.25em;} .nikah-day{color:var(--wine);} .keep-day{color:var(--blush);} .cal-btn{ display:inline-flex;align-items:center;gap:.55rem; border:1px solid rgba(198,161,100,.65); border-radius:999px; background:linear-gradient(180deg,var(--maroon-soft),var(--maroon-deep)); box-shadow:0 14px 30px rgba(78,27,15,.20); transition:transform .3s var(--ease-silk),box-shadow .3s var(--ease-silk); } .cal-btn:hover{transform:translateY(-3px);box-shadow:0 18px 38px rgba(78,27,15,.26);background:linear-gradient(180deg,var(--maroon),var(--maroon-deep));} .cal-btn-icon{flex:none;opacity:.92;} .cal-menu{border-radius:8px;border-color:var(--gold-line);background:#fffaf3;box-shadow:var(--shadow-soft);} /* ---------- Venue ---------- */ .pin{color:var(--wine);} .pin svg{stroke:var(--wine)!important;} .venue-name{color:var(--wine);} .take-me{ display:inline-flex;align-items:center;gap:.5rem; border:1px solid rgba(198,161,100,.7); border-radius:999px; color:var(--wine);background:rgba(255,252,248,.7); font-size:.75rem; padding:.55rem 1.2rem; transition:background .3s var(--ease-silk),color .3s var(--ease-silk),transform .3s var(--ease-silk),box-shadow .3s var(--ease-silk); } .take-me:hover{background:var(--wine);color:#fffaf4;transform:translateY(-3px);box-shadow:var(--shadow-lift);} .take-me-icon{flex:none;} .map-frame-wrap{border:1px solid var(--gold-line);border-radius:6px;background:#fffaf3;box-shadow:var(--shadow-soft);} /* ---------- Bridal circle ---------- */ #circleIntro h2{color:var(--wine)!important;letter-spacing:.19em!important;} .orbit{border-color:var(--gold-line);} .node{ border-color:var(--gold-line);background:#fffaf4;color:var(--wine); box-shadow:0 6px 16px rgba(78,27,15,.08); transition:transform .35s var(--ease-silk),background .35s var(--ease-silk),color .35s var(--ease-silk),box-shadow .35s var(--ease-silk); } .node:hover{transform:translate(-50%,-50%) scale(1.14);box-shadow:0 10px 26px rgba(78,27,15,.16);} .node.active{background:var(--wine);color:#fffaf4;border-color:var(--gold-light);box-shadow:0 0 0 5px rgba(198,161,100,.16),0 10px 26px rgba(78,27,15,.22);} .circle-center-msg .cname{color:var(--wine);} .circle-sign{color:var(--maroon);} /* ---------- Envelope ---------- */ /* Taller envelope so the seal has real breathing room, and the flap/body proportions (fixed in the base sheet) simply extend into the extra height rather than needing to be recalculated. */ .envelope{height:232px;} .env-body{background:linear-gradient(180deg,#fffdf9,#f5e3d3);border-color:var(--gold-line);box-shadow:var(--shadow-soft);} .env-flap{background:linear-gradient(150deg,#fcf3ea,#ecd4c1);border-color:rgba(198,161,100,.32);} .env-seal{ background:radial-gradient(circle at 35% 30%,var(--maroon-soft),var(--wine) 48%,#320c09 100%); border-color:rgba(227,206,156,.75); box-shadow:0 10px 22px rgba(78,27,15,.32),inset 0 0 0 4px rgba(255,255,255,.05); transition:transform .35s var(--ease-silk); } .env-seal:hover{transform:translate(-50%,0) scale(1.06);} /* The heart mark reads as maroon-on-maroon against the wax-seal background at its original faint watermark opacity, so it's recast here as a pale engraved emblem — much closer to how a real wax seal insignia reads — with real contrast at any size. */ .env-seal img{ opacity:.95; filter:brightness(0) invert(1) drop-shadow(0 1px 2px rgba(0,0,0,.35)); } /* The old "TAP TO OPEN" label lived inside the 82px seal circle, crowding the logo it sat on top of. It's now a small caption beneath the seal, with its own arrow pointing back up at it. */ .env-seal-cue{ position:absolute;left:50%;top:154px;transform:translateX(-50%); display:flex;flex-direction:column;align-items:center;gap:.3rem; z-index:4;color:var(--wine);opacity:.85; transition:opacity .4s ease; } .env-seal-cue-arrow{color:var(--gold);} .env-seal-cue-text{ font-family:'Cinzel','Playfair Display',Georgia,serif; font-size:.66rem;letter-spacing:.22em;text-transform:uppercase; } .envelope.open .env-seal-cue{opacity:0;pointer-events:none;} .env-letter{border-color:var(--gold-line);background:#fffaf4;box-shadow:0 24px 58px rgba(78,27,15,.10);} .env-note-sign{color:var(--maroon);} /* ---------- Faith / duas ---------- */ .calm-line{color:var(--wine);} #duaCouple h2,#finalDua h2{color:var(--wine)!important;} .dua-arabic{color:var(--wine);} .final-ar{color:var(--wine);} .final-ameen-btn{transition:transform .3s var(--ease-silk),background .35s ease,border-color .35s ease,box-shadow .3s var(--ease-silk);} .final-ameen-btn:hover{transform:translateY(-2px);box-shadow:0 10px 24px rgba(78,27,15,.14);} /* ---------- Closing signature ---------- */ .closing-jannah-line{color:var(--wine);} .sig-wrap .word{color:var(--wine);} .sig-wrap .esmail{color:var(--blush);} .nasheed-credit-footer{color:#8a6a60;} .nasheed-credit-footer a{color:var(--maroon);} /* ---------- Focus states ---------- */ a:focus-visible,button:focus-visible,.node:focus-visible{outline:2px solid var(--maroon);outline-offset:3px;} /* ---------- Responsive polish ---------- */ @media(min-width:900px){ #hero .scene-inner{min-height:74vh;display:flex;flex-direction:column;justify-content:center;} .name-rida,.name-esmail{letter-spacing:.06em;} #venue .map-frame-wrap{height:360px;} } @media(max-width:620px){ body.elegant-edition{font-size:18px;} .scene{padding-inline:1.3rem;padding-top:4.9rem;padding-bottom:4.9rem;} /* The base #hero forces a full 100dvh regardless of how tall its revealed content actually is, which leaves a large dead-space gap under the countdown card on most phones and pushes the "scroll down" cue further away than it needs to be. Letting the section hug its content here keeps the tap-to-open moment full height (see JS state class below) without stranding that gap once the date is revealed. */ #hero{min-height:0;padding:4.6rem .8rem 2.6rem;} #hero .scene-inner{border-radius:190px 190px 18px 18px;padding:3.7rem .85rem 3.1rem;} .name-rida,.name-esmail{letter-spacing:.02em;font-size:clamp(3.4rem,17vw,5.6rem);} .letter{padding:3rem 1.5rem;} .countdown-cell{border-radius:4px;} .cal-btn,.take-me,.final-ameen-btn{padding-inline:1.5rem;} .map-frame-wrap{height:270px;} } @media(max-width:380px){ #hero .scene-inner{border-radius:170px 170px 15px 15px;padding-top:3.5rem;} .name-rida,.name-esmail{font-size:3.25rem;} .map-frame-wrap{height:240px;} } @media(prefers-reduced-motion:reduce){ .countdown-cell,.node,.env-seal,.take-me,.cal-btn,.final-ameen-btn,.language-button,#soundToggle{ transition:none!important; } }