/* ============================================================
TOKENAT E DIZAJNIT — ndrysho paletën / fontet këtu
============================================================ */
/* ============================================================
UDHËZUES — si t'i ndryshosh sfondet e seksioneve (bardhë/gold)
============================================================
Çdo seksion (#hero, #story, #venue, #countdown, #rsvp, #final...)
nëse s'ka rregull "background" të vetin, e merr automatikisht
ngjyrën bazë ivory (bardhë e ngrohtë) nga .
Për ta bërë një seksion GOLD/CHAMPAGNE:
#idSeksionit{ background:var(--champagne); }
Për ta kthyer prapë BARDHË:
#idSeksionit{ background:var(--ivory); }
KUJDES kur fshin një të tërë: fshije
krejt bllokun (nga ),
përfshi çdo të hapur brenda — nëse mbetet ndonjë
pa çift, faqja "thyhet" dhe shfaqen hapësira bosh/gabime.
============================================================ */
:root{
--font-script: 'Tangerine', cursive;
--container: 640px;
}
*{margin:0;padding:0;box-sizing:border-box;}
html{scroll-behavior:smooth;}
body{
background:var(--ivory);
color:var(--charcoal);
font-family:var(--font-body);
font-weight:300;
overflow-x:hidden;
-webkit-font-smoothing:antialiased;
}
@media (prefers-reduced-motion: reduce){
*{animation-duration:0.01ms !important; animation-iteration-count:1 !important; transition-duration:0.01ms !important; scroll-behavior:auto !important;}
}
img,svg{display:block; max-width:100%;}
button{font-family:inherit; cursor:pointer; border:none; background:none;}
a{color:inherit; text-decoration:none;}
:focus-visible{outline:2px solid var(--gold); outline-offset:4px;}
.wrap{max-width:var(--container); margin:0 auto; padding:0 28px;}
.grain{
position:fixed; inset:0; pointer-events:none; z-index:2; opacity:0.035; mix-blend-mode:multiply;
background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}
.petals{position:fixed; inset:0; pointer-events:none; z-index:3; overflow:hidden;}
.petal{
position:absolute; top:-5%; opacity:0; color:var(--gold-soft);
animation:fall linear infinite;
}
@keyframes fall{
0%{ transform:translateY(-8vh) translateX(0) rotate(0deg); opacity:0; }
8%{ opacity:.55; }
92%{ opacity:.4; }
100%{ transform:translateY(108vh) translateX(var(--drift,40px)) rotate(220deg); opacity:0; }
}
#cover{
position:fixed; inset:0; z-index:20;
display:flex; align-items:center; justify-content:center;
background:
radial-gradient(120% 90% at 50% 0%, #fffdf9 0%, var(--ivory) 55%, var(--champagne) 100%);
transition:transform 1.1s var(--ease), opacity 1.1s var(--ease);
}
#cover.closed{ transform:translateY(-100%); opacity:0.4; pointer-events:none; }
.cover-inner{ text-align:center; padding:40px 24px; position:relative; }
.cover-frame{ position:relative; padding:52px 30px; }
.cover-frame::before, .cover-frame::after{
content:""; position:absolute; left:0; right:0; height:1px;
background:linear-gradient(90deg, transparent, var(--gold-soft) 20%, var(--gold-soft) 80%, transparent);
opacity:0; animation:drawLine 1.4s var(--ease) 0.3s forwards;
}
.cover-frame::before{ top:0; }
.cover-frame::after{ bottom:0; }
@keyframes drawLine{ from{opacity:0; transform:scaleX(0);} to{opacity:1; transform:scaleX(1);} }
.monogram{ width:128px; height:128px; margin:0 auto 20px; opacity:0; animation:riseIn 1s var(--ease) 0.15s forwards; }
.monogram .ring{
fill:none; stroke:var(--gold); stroke-width:1;
stroke-dasharray:365; stroke-dashoffset:365;
animation:draw 2.2s var(--ease) 0.35s forwards;
}
.monogram .sprig{
fill:none; stroke:var(--gold-soft); stroke-width:1; stroke-linecap:round;
opacity:0; transform-origin:70px 70px; transform:scale(0.85);
animation:sprout 1s var(--ease) 1.05s forwards;
}
.monogram .mono-text{
font-family:var(--font-script); font-size:36px; fill:var(--wine);
opacity:0; animation:riseIn 0.9s var(--ease) 1.3s forwards;
}
@keyframes draw{ to{ stroke-dashoffset:0; } }
@keyframes sprout{ from{opacity:0; transform:scale(0.85);} to{opacity:0.9; transform:scale(1);} }
.eyebrow{
font-family:var(--font-body); letter-spacing:0.35em; text-transform:uppercase;
font-size:11px; color:var(--wine); opacity:0;
animation:riseIn 0.9s var(--ease) 0.5s forwards;
}
.cover-names{
font-family:var(--font-display); font-weight:400; font-style:italic;
font-size:clamp(42px, 12vw, 74px); line-height:1; margin:14px 0 6px;
color:var(--charcoal); opacity:0; animation:riseIn 1s var(--ease) 0.65s forwards;
}
.cover-amp{ font-family:var(--font-script); font-size:1.3em; color:var(--wine); padding:0 6px; }
.cover-date{
font-family:var(--font-body); letter-spacing:0.5em; font-size:14px;
color:var(--gold); opacity:0; animation:riseIn 1s var(--ease) 0.85s forwards;
}
@keyframes riseIn{ from{opacity:0; transform:translateY(14px);} to{opacity:1; transform:translateY(0);} }
.open-btn{
margin-top:44px; position:relative; padding:16px 44px;
font-family:var(--font-body); font-size:12px; letter-spacing:0.3em; text-transform:uppercase;
color:var(--ivory); background:var(--charcoal); border-radius:999px;
opacity:0; animation:riseIn 1s var(--ease) 1.1s forwards;
transition:letter-spacing .4s var(--ease), background .4s var(--ease), transform .3s var(--ease);
overflow:hidden;
}
.open-btn::before{
content:""; position:absolute; inset:0; border-radius:999px;
box-shadow:0 0 0 1px var(--gold-soft); opacity:0;
animation:pulseRing 2.6s ease-out infinite; animation-delay:1.6s;
}
@keyframes pulseRing{
0%{ box-shadow:0 0 0 0px rgba(169,131,46,0.5); opacity:1;}
100%{ box-shadow:0 0 0 12px rgba(169,131,46,0); opacity:0;}
}
.open-btn:hover{ letter-spacing:0.42em; background:var(--wine); transform:translateY(-1px); }
.open-btn:active{ transform:translateY(0) scale(0.98); }
#site{ position:relative; z-index:1; }
section{ padding:96px 0; position:relative; }
.reveal{ opacity:0; transform:translateY(28px); transition:opacity 1s var(--ease), transform 1s var(--ease); }
.reveal.in{ opacity:1; transform:translateY(0); }
.reveal-slow > *{ transition-delay:calc(var(--i, 0) * 0.09s); }
.kicker{
display:flex; align-items:center; justify-content:center; gap:14px;
font-size:11px; letter-spacing:0.35em; text-transform:uppercase; color:var(--wine);
margin-bottom:18px;
}
.kicker::before, .kicker::after{ content:""; width:28px; height:1px; background:var(--gold-soft); }
h2.title{
font-family:var(--font-display); font-weight:400; text-align:center;
font-size:clamp(30px, 6vw, 46px); color:var(--charcoal); margin-bottom:8px;
}
.subtitle{
text-align:center; font-size:15px; color:#5a5148; max-width:480px; margin:0 auto;
line-height:1.8; font-weight:300;
}
.divider{ width:1px; height:56px; margin:0 auto; background:linear-gradient(var(--gold-soft), transparent); }
.divider-flourish{ width:120px; height:22px; margin:26px auto; opacity:0.65; }
.divider-flourish path{ fill:none; stroke:var(--gold-soft); stroke-width:1; }
#hero{
min-height:auto; display:flex; align-items:center; justify-content:center; text-align:center;
background:
radial-gradient(90% 60% at 50% 0%, rgba(233,220,198,0.55), transparent 60%),
var(--ivory);
padding:150px 0 90px;
}
.hero-eyebrow{ letter-spacing:0.4em; font-size:11px; color:var(--wine); text-transform:uppercase; margin-bottom:20px; }
.hero-names{
font-family:var(--font-display); font-style:italic; font-weight:400;
font-size:clamp(38px, 9vw, 64px); line-height:1.08; color:var(--charcoal);
}
.hero-sub{ margin-top:22px; font-size:15px; line-height:2; color:#584f45; max-width:420px; margin-inline:auto; }
.hero-date-badge{
margin-top:30px; display:inline-block; font-family:var(--font-body); letter-spacing:0.3em;
font-size:13px; color:var(--gold); border:1px solid var(--line); padding:10px 26px; border-radius:999px;
}
.scroll-cue{
display:block; width:22px; height:22px; margin:56px auto 0; color:var(--gold-soft);
animation:bob 2.4s ease-in-out infinite;
}
@keyframes bob{ 0%,100%{ transform:translateY(0); opacity:0.55;} 50%{ transform:translateY(8px); opacity:1;} }
#story .story-text{
font-family:var(--font-display); font-size:clamp(19px,3vw,23px); line-height:1.9; text-align:center;
color:#3c342c; font-style:italic; font-weight:400; max-width:560px; margin:0 auto;
}
#story .signoff{ text-align:center; margin-top:26px; font-family:var(--font-script); font-size:34px; color:var(--wine); }
#venue{ background:var(--champagne); }
.venue-card{
max-width:480px; margin:0 auto; text-align:center; background:var(--ivory);
border:1px solid var(--line); padding:48px 34px; border-radius:2px;
box-shadow:0 30px 60px -30px rgba(42,36,30,0.25);
}
.venue-date{ font-family:var(--font-display); font-size:clamp(26px,5vw,34px); color:var(--charcoal); }
.venue-name{ font-family:var(--font-display); font-style:italic; font-size:clamp(30px,6vw,40px); color:var(--wine); margin-top:6px; }
.venue-meta{ margin-top:16px; font-size:13px; letter-spacing:0.06em; color:#6b6156; line-height:1.9; }
.venue-meta .edit-note{ display:block; font-size:11px; color:#a4998a; letter-spacing:0.02em; margin-top:2px; }
.venue-photo{
margin-top:34px; border:1px solid var(--line); border-radius:2px; overflow:hidden; position:relative;
aspect-ratio:16/10; background:linear-gradient(150deg, #efe6d6, #e3d3ba);
display:flex; align-items:center; justify-content:center;
}
.venue-photo img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; transition:transform .8s var(--ease); }
.venue-photo:hover img{ transform:scale(1.04); }
.venue-photo .photo-placeholder{
display:flex; flex-direction:column; align-items:center; gap:10px; color:var(--gold-soft);
}
.venue-photo .photo-placeholder svg{ width:30px; height:30px; }
.venue-photo .photo-placeholder span{
font-size:10px; letter-spacing:0.2em; text-transform:uppercase; color:#a4998a;
}
.directions-btn{
margin-top:28px; display:inline-flex; align-items:center; gap:10px; padding:14px 30px;
border:1px solid var(--charcoal); border-radius:999px; font-size:12px; letter-spacing:0.25em; text-transform:uppercase;
transition:background .35s var(--ease), color .35s var(--ease), transform .25s var(--ease);
}
.directions-btn:hover{ background:var(--charcoal); color:var(--ivory); transform:translateY(-2px); }
.directions-btn svg{ width:14px; height:14px; }
.map-frame{
margin-top:34px; border:1px solid var(--line); border-radius:2px; overflow:hidden; position:relative;
aspect-ratio:16/9; background:
repeating-linear-gradient(135deg, var(--champagne) 0 2px, transparent 2px 22px), var(--ivory);
}
.map-frame .map-label{
position:absolute; inset:0; display:flex; flex-direction:column; align-items:center; justify-content:center;
gap:8px; color:var(--gold); font-size:12px; letter-spacing:0.25em; text-transform:uppercase; text-align:center; padding:20px;
}
.map-frame .map-label svg{ width:30px; height:30px; }
.map-frame .map-label small{ display:block; color:#8c8172; letter-spacing:0.04em; text-transform:none; font-size:11px; margin-top:6px;}
#countdown{ text-align:center; }
.countdown-grid{ display:flex; justify-content:center; gap:clamp(14px,4vw,34px); margin-top:44px; flex-wrap:wrap; }
.count-unit{ min-width:76px; }
.count-num{
font-family:var(--font-display); font-size:clamp(34px,7vw,54px); color:var(--charcoal); line-height:1;
font-variant-numeric:tabular-nums;
}
.count-label{ margin-top:10px; font-size:10px; letter-spacing:0.28em; text-transform:uppercase; color:var(--wine); }
.count-sep{ align-self:flex-start; margin-top:6px; font-family:var(--font-display); font-size:clamp(24px,5vw,38px); color:var(--gold-soft); }
#timeline{ background:var(--champagne); }
.timeline{ max-width:460px; margin:50px auto 0; position:relative; }
.timeline::before{ content:""; position:absolute; left:14px; top:6px; bottom:6px; width:1px; background:var(--gold-soft); }
.t-item{ position:relative; padding:0 0 40px 46px; }
.t-item:last-child{ padding-bottom:0; }
.t-dot{ position:absolute; left:8px; top:2px; width:13px; height:13px; border-radius:50%; background:var(--ivory); border:1px solid var(--gold); }
.t-dot::after{ content:""; position:absolute; inset:3px; border-radius:50%; background:var(--wine); }
.t-time{ font-family:var(--font-display); font-size:20px; color:var(--gold); }
.t-title{ font-size:16px; letter-spacing:0.04em; margin-top:2px; color:var(--charcoal); font-weight:400; }
.t-desc{ font-size:12.5px; color:#8c8172; margin-top:4px; }
#rsvp .venue-card{ max-width:520px; text-align:left; }
#rsvp .kicker, #rsvp h2.title, #rsvp .subtitle{ text-align:center; }
.form-row{ margin-top:22px; }
.form-row label{ display:block; font-size:11px; letter-spacing:0.2em; text-transform:uppercase; color:var(--wine); margin-bottom:8px; }
.form-row input[type=text], .form-row input[type=number], .form-row textarea{
width:100%; border:none; border-bottom:1px solid var(--line); background:transparent;
padding:10px 2px; font-family:var(--font-body); font-size:15px; color:var(--charcoal);
transition:border-color .3s var(--ease);
}
.form-row input:focus, .form-row textarea:focus{ border-color:var(--gold); }
.form-row textarea{ resize:vertical; min-height:80px; }
.reception-card{
text-align:center; position:relative; overflow:hidden;
background:
radial-gradient(130% 85% at 50% -8%, rgba(169,131,46,0.12), transparent 60%),
var(--ivory);
}
.reception-card::before{
content:""; position:absolute; inset:9px; border:1px solid rgba(169,131,46,0.32);
pointer-events:none;
}
.reception-card::after{
content:"&"; position:absolute; inset:0; display:flex; align-items:center; justify-content:center;
font-family:var(--font-script); font-size:min(48vw,240px); color:var(--gold); opacity:0.055;
pointer-events:none; line-height:1;
}
.reception-card > *{ position:relative; z-index:1; }
.card-corner{ position:absolute; width:42px; height:42px; color:var(--gold-soft); opacity:0.6; pointer-events:none; z-index:1; }
.card-corner-tl{ top:15px; left:15px; }
.card-corner-br{ bottom:15px; right:15px; transform:rotate(180deg); }
.reception-invite{ font-size:12px; letter-spacing:0.15em; text-transform:uppercase; color:#6b6156; }
.reception-time{ font-family:var(--font-display); font-weight:600; font-size:30px; color:var(--charcoal); margin-top:6px; }
.reception-date-row{
display:flex; align-items:center; justify-content:center; gap:16px; margin-top:28px;
font-size:12px; letter-spacing:0.15em; text-transform:uppercase; color:#6b6156;
}
.reception-date-row::before, .reception-date-row::after{ content:""; }
.reception-date-num{
font-family:var(--font-display); font-size:40px; color:var(--charcoal); line-height:1;
padding:0 12px; border-left:1px solid var(--line); border-right:1px solid var(--line);
}
.reception-year
{font-family:var(--font-display); font-size:40px; color:var(--charcoal); line-height:1;
padding:0 12px; border-left:1px solid var(--line); border-right:1px solid var(--line);
}
.mini-cal{ max-width:340px; margin:30px auto 0; border:1px solid var(--line); border-radius:2px; padding:18px 14px; }
.mini-cal-head{ text-align:center; font-family:var(--font-display); font-size:17px; color:var(--charcoal); margin-bottom:10px; }
.mini-cal-grid{ display:grid; grid-template-columns:repeat(7,1fr); gap:6px; text-align:center; }
.mini-cal-labels span{ font-size:10px; letter-spacing:0.05em; color:#a4998a; text-transform:uppercase; }
.mini-cal-grid:not(.mini-cal-labels) span{ font-size:12.5px; color:#6b6156; padding:5px 0; }
.mini-cal-day {
background: var(--wine);
color: var(--ivory);
display: flex !important;
align-items: center;
justify-content: center;
font-weight: 500;
width: 38px;
height: 34px;
/* Zëvendëson clip-path me një maskë perfekte zemre */
-webkit-mask-image: url('data:image/svg+xml;utf8,