/* =========================================================================== ELEGANT & TRADITIONAL WEDDING THEME Gold + jewel tones, ornamental, trilingual (EN / UR / KK) Uses CSS logical properties so Right-to-Left (Urdu) works automatically. =========================================================================== */ :root{ --cream:#F7F1E6; --ivory:#FFFCF6; --gold:#BB9A4B; --gold-soft:#D9C088; --gold-deep:#8E6E2C; --emerald:#0E433D; --emerald-2:#0A322D; --maroon:#6E1F2E; --ink:#2B2620; --muted:#766B5B; --line:rgba(142,110,44,.30); --shadow:0 18px 48px -24px rgba(43,38,32,.45); --serif:'Cormorant Garamond','Noto Serif',Georgia,serif; --body:'Noto Serif',Georgia,'Times New Roman',serif; --label:'Marcellus','Cormorant Garamond',serif; --maxw:1080px; } /* ---- Urdu: swap to Nastaliq and give the script room to breathe ---------- */ html[lang="ur"]{ --serif:'Noto Nastaliq Urdu',serif; --body:'Noto Nastaliq Urdu',serif; --label:'Noto Nastaliq Urdu',serif; } html[lang="ur"] body{ line-height:2.35; } html[lang="ur"] .eyebrow{ letter-spacing:normal; } *{ box-sizing:border-box; } html{ scroll-behavior:smooth; } /* Lenis smooth scroll (momentum). Lenis adds .lenis to when active; it runs on native scroll, so position:sticky / fixed keep working. */ html.lenis{ height:auto; scroll-behavior:auto; } html.lenis body{ height:auto; } .lenis.lenis-stopped{ overflow:clip; } .lenis [data-lenis-prevent]{ overscroll-behavior:contain; } body{ margin:0; font-family:var(--body); color:var(--ink); background:var(--cream); line-height:1.75; -webkit-font-smoothing:antialiased; overflow-x:hidden; } img{ max-width:100%; display:block; } a{ color:var(--gold-deep); } /* subtle paper texture behind everything */ body::before{ content:"";position:fixed;inset:0;z-index:-1;pointer-events:none; background: radial-gradient(1200px 600px at 80% -10%, rgba(187,154,75,.10), transparent 60%), radial-gradient(900px 500px at -10% 110%, rgba(110,31,46,.06), transparent 60%); } /* ---------- Layout helpers ------------------------------------------------ */ .container{ width:min(100% - 2.5rem, var(--maxw)); margin-inline:auto; } .section{ padding-block:5.5rem; } .section.tight{ padding-block:3.5rem; } .center{ text-align:center; } .eyebrow{ font-family:var(--label); text-transform:uppercase; letter-spacing:.34em; font-size:.78rem; color:var(--gold-deep); margin:0 0 .85rem; } .section-title{ font-family:var(--serif); font-weight:600; font-size:clamp(2rem,4.6vw,3.1rem); line-height:1.1; margin:0 0 1rem; color:var(--emerald); } .lead{ font-size:1.12rem; color:var(--muted); max-width:60ch; margin-inline:auto; } /* ---------- Ornaments ----------------------------------------------------- */ .ornament{ display:flex; align-items:center; justify-content:center; gap:.9rem; color:var(--gold); margin:1.4rem auto; } .ornament svg{ width:230px; max-width:62vw; height:auto; opacity:.9; } .divider-leaf{ width:34px;height:34px; color:var(--gold); } /* gold corner flourishes for framed boxes */ .framed{ position:relative; } .framed::before,.framed::after{ content:"";position:absolute;width:46px;height:46px;border:2px solid var(--gold); opacity:.55; } .framed::before{ inset-block-start:14px; inset-inline-start:14px; border-inline-end:0; border-block-end:0; } .framed::after{ inset-block-end:14px; inset-inline-end:14px; border-inline-start:0; border-block-start:0; } /* ---------- Header / nav -------------------------------------------------- */ .site-header{ position:sticky; top:0; z-index:50; background:rgba(247,241,230,.82); backdrop-filter:blur(10px); border-block-end:1px solid var(--line); } .nav{ display:flex; align-items:center; justify-content:space-between; gap:1rem; padding-block:.85rem; } .brand{ font-family:var(--serif); font-weight:600; font-size:1.45rem; color:var(--emerald); text-decoration:none; letter-spacing:.02em; display:flex; align-items:center; gap:.55rem; } .brand .seal{ width:34px;height:34px;border-radius:50%;display:grid;place-items:center; border:1.5px solid var(--gold); color:var(--gold-deep); font-size:.82rem; letter-spacing:.02em; } /* Monogram brand mark (inline SVG, vector outlines) */ .brand-mark{ display:inline-flex; align-items:center; color:var(--emerald); line-height:0; } .brand-mark .monogram{ height:38px; width:auto; display:block; } .site-footer .brand-mark--lg{ color:var(--emerald); } .site-footer .brand-mark--lg .monogram{ height:62px; } .nav-links{ display:flex; align-items:center; gap:1.6rem; } .nav-links a{ font-family:var(--label); text-decoration:none; color:var(--ink); font-size:.96rem; letter-spacing:.04em; position:relative; padding-block:.2rem; } .nav-links a::after{ content:"";position:absolute;inset-inline-start:0;inset-block-end:-2px;height:1.5px;width:0; background:var(--gold); transition:width .3s ease; } .nav-links a:hover::after{ width:100%; } /* language switcher */ .lang-switch{ display:inline-flex; border:1px solid var(--line); border-radius:999px; overflow:hidden; } .lang-switch button{ font-family:var(--label); font-size:.82rem; letter-spacing:.05em; background:transparent; border:0; color:var(--muted); padding:.4rem .7rem; cursor:pointer; transition:background .25s,color .25s; } .lang-switch button.active{ background:var(--gold); color:#fff; } .lang-switch button:not(.active):hover{ background:rgba(187,154,75,.16); color:var(--ink); } .nav-toggle{ display:none; background:none;border:0;cursor:pointer; color:var(--emerald); } /* ---------- Buttons ------------------------------------------------------- */ .btn{ display:inline-flex; align-items:center; gap:.55rem; justify-content:center; font-family:var(--label); letter-spacing:.06em; font-size:1rem; padding:.95rem 2.1rem; border-radius:999px; text-decoration:none; cursor:pointer; border:1.5px solid transparent; transition:transform .2s ease, box-shadow .25s, background .25s, color .25s; } .btn:hover{ transform:translateY(-2px); } .btn-gold{ background:linear-gradient(180deg,var(--gold-soft),var(--gold)); color:#3a2c08; box-shadow:0 12px 30px -12px rgba(142,110,44,.7); } .btn-gold:hover{ box-shadow:0 18px 38px -12px rgba(142,110,44,.85); } .btn-outline{ background:transparent; border-color:var(--gold); color:var(--gold-deep); } .btn-outline:hover{ background:var(--gold); color:#fff; } .btn-ghost{ background:rgba(255,255,255,.12); border-color:rgba(255,255,255,.6); color:#fff; } .btn-ghost:hover{ background:#fff; color:var(--emerald); } /* ---------- HERO ---------------------------------------------------------- */ .hero{ position:relative; min-height:92vh; display:grid; place-items:center; text-align:center; color:#FBF3DF; padding-block:5rem; overflow:hidden; background: radial-gradient(1100px 700px at 50% -20%, rgba(187,154,75,.28), transparent 60%), linear-gradient(160deg,var(--emerald) 0%, var(--emerald-2) 70%, #08231f 100%); } .hero::before{ /* faint diamond lattice */ content:"";position:absolute;inset:0;opacity:.10;pointer-events:none; background-image: linear-gradient(45deg, var(--gold-soft) 1px, transparent 1px), linear-gradient(-45deg, var(--gold-soft) 1px, transparent 1px); background-size:42px 42px; } .hero-inner{ position:relative; z-index:2; width:min(100% - 2.5rem, 760px); } .hero .eyebrow{ color:var(--gold-soft); } .hero-names{ font-family:var(--serif); font-weight:600; color:#fff; font-size:clamp(3rem,9vw,6rem); line-height:1.02; margin:.4rem 0 .6rem; text-shadow:0 2px 30px rgba(0,0,0,.35); } .hero-tagline{ font-size:1.25rem; color:var(--gold-soft); margin:0 0 1.4rem; font-style:italic; } .hero-date{ font-family:var(--label); letter-spacing:.12em; text-transform:uppercase; font-size:1rem; color:#F4E9CC; margin-bottom:2rem; } .hero .ornament{ color:var(--gold-soft); } .hero-cta{ display:flex; gap:1rem; justify-content:center; flex-wrap:wrap; margin-top:.5rem; } /* "Already RSVP'd?" link — sits on dark hero / banner backgrounds */ .edit-link{ display:inline-block; margin-top:1.3rem; font-family:var(--label); letter-spacing:.05em; font-size:.95rem; color:var(--gold-soft); text-decoration:none; border-bottom:1px solid var(--gold-soft); padding-bottom:3px; transition:color .25s, border-color .25s, transform .2s ease; } .edit-link:hover{ color:#fff; border-color:#fff; transform:translateY(-1px); } .scroll-cue{ position:absolute; inset-block-end:1.4rem; inset-inline:0; z-index:2; color:var(--gold-soft); font-size:1.4rem; animation:bob 2.2s ease-in-out infinite; } @keyframes bob{ 0%,100%{ transform:translateY(0);} 50%{ transform:translateY(8px);} } /* ---------- Countdown ----------------------------------------------------- */ .countdown{ display:flex; gap:1.1rem; justify-content:center; flex-wrap:wrap; margin-top:1.6rem; } .count-box{ min-width:78px; } .count-num{ font-family:var(--serif); font-size:2.4rem; line-height:1; color:#fff; } .count-label{ font-family:var(--label); font-size:.72rem; letter-spacing:.2em; text-transform:uppercase; color:var(--gold-soft); } /* ---------- Detail cards -------------------------------------------------- */ .cards{ display:grid; grid-template-columns:repeat(auto-fit,minmax(220px,1fr)); gap:1.4rem; margin-top:2.5rem; } .card{ background:var(--ivory); border:1px solid var(--line); border-radius:14px; padding:2rem 1.6rem; text-align:center; box-shadow:var(--shadow); transition:transform .3s ease, box-shadow .3s ease; } .card:hover{ transform:translateY(-4px); } .card .ic{ color:var(--gold); margin-bottom:.7rem; display:flex; justify-content:center; } .card h3{ font-family:var(--serif); color:var(--emerald); font-size:1.5rem; margin:.2rem 0 .5rem; font-weight:600; } .card p{ margin:.15rem 0; color:var(--muted); } .card .big{ color:var(--ink); font-size:1.08rem; } /* ---------- Dress-code colour palette ------------------------------------- */ .palette{ margin-top:3.2rem; text-align:center; } .palette-title{ font-family:var(--serif); color:var(--emerald); font-size:1.7rem; font-weight:600; margin:0 0 .2rem; } .palette-groups{ display:flex; flex-direction:column; gap:1.9rem; margin-top:1.8rem; } .palette-label{ font-family:var(--label); text-transform:uppercase; letter-spacing:.2em; font-size:.8rem; color:var(--gold-deep); margin:0 0 .95rem; } .swatches{ display:flex; gap:1rem; justify-content:center; flex-wrap:wrap; } .swatch{ width:48px; height:48px; border-radius:50%; flex:0 0 auto; box-shadow: inset 0 0 0 1px rgba(255,255,255,.45), 0 0 0 1px rgba(142,110,44,.25), 0 8px 18px -8px rgba(43,38,32,.5); transition:transform .2s ease, box-shadow .25s ease; } .swatch:hover{ transform:translateY(-3px) scale(1.05); box-shadow: inset 0 0 0 1px rgba(255,255,255,.45), 0 0 0 1px rgba(142,110,44,.45), 0 14px 26px -10px rgba(43,38,32,.6); } /* Urdu (Nastaliq) reads better without the wide tracking on the labels */ html[lang="ur"] .palette-label{ letter-spacing:normal; } /* ---------- Timeline (single-sided: robust for RTL + mobile) -------------- */ .timeline{ max-width:560px; margin:2.6rem auto 0; position:relative; padding-inline-start:2.4rem; text-align:start; } .timeline::before{ content:""; position:absolute; inset-block:8px; inset-inline-start:7px; width:2px; background:linear-gradient(var(--gold),rgba(187,154,75,.12)); } .t-item{ position:relative; padding-block:.85rem 1.1rem; } .t-item::before{ content:""; position:absolute; inset-inline-start:-2.4rem; inset-block-start:1.35rem; transform:translateX(1px); width:14px; height:14px; border-radius:50%; background:var(--gold); box-shadow:0 0 0 5px rgba(187,154,75,.18); } html[dir="rtl"] .t-item::before{ transform:translateX(-1px); } .t-time{ font-family:var(--label); color:var(--gold-deep); letter-spacing:.08em; font-size:.95rem; } .t-title{ font-family:var(--serif); font-size:1.5rem; color:var(--emerald); font-weight:600; } /* ---------- Map ----------------------------------------------------------- */ .map-wrap{ margin-top:2.5rem; border-radius:16px; overflow:hidden; border:1px solid var(--line); box-shadow:var(--shadow); } .map-wrap iframe{ width:100%; height:420px; border:0; display:block; filter:saturate(.92); } /* ---------- Banner CTA ---------------------------------------------------- */ .banner{ text-align:center; color:#FBF3DF; padding-block:4.5rem; background: radial-gradient(800px 400px at 50% 0%, rgba(187,154,75,.25), transparent 60%), linear-gradient(160deg,var(--maroon),#4d1320); } .banner .section-title{ color:#fff; } .banner .lead{ color:#F0DCC9; } /* ---------- RSVP form ----------------------------------------------------- */ .form-card{ background:var(--ivory); border:1px solid var(--line); border-radius:18px; padding:clamp(1.6rem,4vw,3rem); box-shadow:var(--shadow); max-width:640px; margin-inline:auto; } .field{ margin-block:1.15rem; text-align:start; } .field label{ display:block; font-family:var(--label); letter-spacing:.04em; margin-bottom:.45rem; color:var(--emerald); } .field input,.field select,.field textarea{ width:100%; font-family:var(--body); font-size:1rem; color:var(--ink); padding:.85rem 1rem; border:1px solid var(--line); border-radius:10px; background:#fff; transition:border-color .2s, box-shadow .2s; } .field input:focus,.field select:focus,.field textarea:focus{ outline:0; border-color:var(--gold); box-shadow:0 0 0 3px rgba(187,154,75,.18); } .field textarea{ min-height:110px; resize:vertical; } /* yes / no toggle */ .attend{ display:grid; grid-template-columns:1fr 1fr; gap:.8rem; } .attend label{ display:flex; align-items:center; justify-content:center; gap:.5rem; cursor:pointer; border:1.5px solid var(--line); border-radius:12px; padding:1rem; background:#fff; font-family:var(--label); transition:all .2s; margin:0; } .attend input{ position:absolute; opacity:0; width:0; height:0; } .attend label:hover{ border-color:var(--gold-soft); } .attend input:checked + .attend-face{ } .attend label.sel-yes{ border-color:var(--emerald); background:rgba(14,67,61,.06); color:var(--emerald); } .attend label.sel-no{ border-color:var(--maroon); background:rgba(110,31,46,.05); color:var(--maroon); } .form-msg{ margin-top:1rem; padding:.9rem 1rem; border-radius:10px; display:none; } .form-msg.show{ display:block; } .form-msg.ok{ background:rgba(14,67,61,.10); color:var(--emerald); border:1px solid rgba(14,67,61,.25); } .form-msg.err{ background:rgba(110,31,46,.08); color:var(--maroon); border:1px solid rgba(110,31,46,.25); } .muted-note{ font-size:.86rem; color:var(--muted); margin-top:1.2rem; } /* Edit-mode banner shown inside the RSVP form when updating a response */ .edit-note{ margin-bottom:1.5rem; padding:.9rem 1.05rem; border-radius:10px; background:rgba(187,154,75,.10); border:1px solid rgba(187,154,75,.32); color:var(--gold-deep); font-size:.92rem; line-height:1.5; text-align:start; } /* ---------- Celebration page --------------------------------------------- */ .welcome-hero{ text-align:center; color:#FBF3DF; padding-block:5rem 4rem; background: radial-gradient(800px 420px at 50% -10%, rgba(187,154,75,.3), transparent 60%), linear-gradient(160deg,var(--emerald),var(--emerald-2)); } .welcome-hero .section-title{ color:#fff; } .welcome-hero .lead{ color:#F0E5CC; } .registry-grid{ display:grid; grid-template-columns:repeat(auto-fill,minmax(250px,1fr)); gap:1.3rem; margin-top:2.4rem; } .gift{ background:var(--ivory); border:1px solid var(--line); border-radius:14px; padding:1.5rem; display:flex; flex-direction:column; gap:.5rem; box-shadow:var(--shadow); position:relative; transition:transform .25s; } .gift:hover{ transform:translateY(-3px); } .gift h4{ font-family:var(--serif); font-size:1.4rem; color:var(--emerald); margin:.1rem 0; font-weight:600; } .gift p{ margin:0; color:var(--muted); } .gift .gift-cta{ margin-top:auto; padding-top:.7rem; } .tag{ position:absolute; inset-block-start:1rem; inset-inline-end:1rem; font-family:var(--label); font-size:.7rem; letter-spacing:.12em; text-transform:uppercase; padding:.25rem .6rem; border-radius:999px; } .tag.reserved{ background:rgba(110,31,46,.1); color:var(--maroon); } .tag.available{ background:rgba(14,67,61,.1); color:var(--emerald); } .tables-grid{ display:grid; grid-template-columns:repeat(auto-fill,minmax(240px,1fr)); gap:1.3rem; margin-top:2.4rem; } .table-card{ background:var(--ivory); border:1px solid var(--line); border-radius:14px; padding:1.5rem 1.6rem; box-shadow:var(--shadow); } .table-card h4{ font-family:var(--serif); font-size:1.4rem; color:var(--emerald); margin:0 0 .6rem; font-weight:600; border-bottom:1px solid var(--line); padding-bottom:.5rem; } .table-card ul{ list-style:none; margin:0; padding:0; } .table-card li{ padding:.28rem 0; color:var(--ink); display:flex; align-items:center; gap:.5rem; } .table-card li::before{ content:"❖"; color:var(--gold); font-size:.7rem; } /* searchable guest list */ .guest-tools{ display:flex; justify-content:center; margin-top:2rem; } .guest-search{ width:min(100%,420px); padding:.8rem 1.1rem; border:1px solid var(--line); border-radius:999px; font-family:var(--body); font-size:1rem; background:#fff; } .guest-search:focus{ outline:0; border-color:var(--gold); box-shadow:0 0 0 3px rgba(187,154,75,.18); } .guest-list{ display:grid; grid-template-columns:repeat(auto-fill,minmax(220px,1fr)); gap:.7rem; margin-top:1.6rem; } .guest-row{ background:var(--ivory); border:1px solid var(--line); border-radius:10px; padding:.7rem 1rem; display:flex; justify-content:space-between; gap:.6rem; } .guest-row .gname{ color:var(--ink); } .guest-row .gtable{ color:var(--gold-deep); font-family:var(--label); font-size:.86rem; white-space:nowrap; } .guest-row.hide{ display:none; } .contact-box{ background:var(--ivory); border:1px solid var(--line); border-radius:16px; padding:2.4rem; text-align:center; box-shadow:var(--shadow); max-width:560px; margin:2.4rem auto 0; } .contact-box a.email{ font-family:var(--serif); font-size:1.5rem; color:var(--gold-deep); text-decoration:none; border-bottom:1px solid var(--line); } /* ---------- Footer -------------------------------------------------------- */ .site-footer{ text-align:center; padding-block:3rem; color:var(--muted); border-block-start:1px solid var(--line); } .site-footer .brand{ justify-content:center; margin-bottom:.6rem; } .site-footer .ornament svg{ width:180px; } /* ---------- Scroll progress bar ------------------------------------------ */ .scroll-progress{ position:fixed; inset-block-start:0; inset-inline:0; height:3px; z-index:60; transform:scaleX(0); transform-origin:0 50%; will-change:transform; background:linear-gradient(90deg,var(--gold-soft),var(--gold),var(--gold-deep)); pointer-events:none; } html[dir="rtl"] .scroll-progress{ transform-origin:100% 50%; } /* ---------- Parallax (subtle, transform-only) ---------------------------- */ [data-parallax]{ will-change:transform; } /* ---------- Scroll reveal ------------------------------------------------- */ .reveal{ opacity:0; transform:translateY(26px); transition:opacity .8s cubic-bezier(.22,.61,.36,1), transform .8s cubic-bezier(.22,.61,.36,1); transition-delay:var(--rd,0s); will-change:opacity, transform; } .reveal.reveal-left{ transform:translateX(-28px); } .reveal.reveal-right{ transform:translateX(28px); } .reveal.reveal-scale{ transform:scale(.94); } html[dir="rtl"] .reveal.reveal-left{ transform:translateX(28px); } html[dir="rtl"] .reveal.reveal-right{ transform:translateX(-28px); } .reveal.in{ opacity:1; transform:none; } @media (prefers-reduced-motion:reduce){ .reveal{ opacity:1; transform:none; transition:none; } .scroll-cue{ animation:none; } .scroll-progress{ display:none; } [data-parallax]{ transform:none !important; } } /* ---------- Responsive ---------------------------------------------------- */ @media (max-width:760px){ .nav-links{ position:fixed; inset-block-start:62px; inset-inline:0; flex-direction:column; gap:1.1rem; background:var(--cream); border-block-end:1px solid var(--line); padding:1.4rem; align-items:center; transform:translateY(-130%); transition:transform .35s ease; box-shadow:var(--shadow); } .nav-links.open{ transform:translateY(0); } .nav-toggle{ display:block; } .brand-mark .monogram{ height:30px; } .section{ padding-block:4rem; } .map-wrap iframe{ height:320px; } }