/* ============================================================ Павел & Галина — свадебный лендинг Дизайн-система: позднее лето / ранняя осень Палитра, типографика и движение управляются data-атрибутами на (см. assets/tweaks-app.jsx). ============================================================ */ /* ---------- Themes (palettes) ---------- Основа: Russian Green #638872 · Второй: Sage #C3C88C Текст: Dark Purple #30253E ------------------------------------------------- */ :root, :root[data-theme="green"]{ /* Зелёный — основной, по умолчанию */ --bg:#eef1df; /* светлый шалфейный крем */ --surface:#f7f8ee; --surface-2:#e2e7cd; --ink:#30253E; /* dark purple — текст */ --ink-soft:#5d5569; --deep:#638872; /* russian green — герой + тёмные секции */ --deep-ink:#f4f6e8; --deep-soft:#c6d0b6; --accent:#557a66; /* глубокий russian green — акцент на светлом */ --accent-2:#C3C88C; /* sage — акцент на зелёном */ --on-accent:#2c3d31; --line:rgba(48,37,62,.14); --line-deep:rgba(244,246,232,.18); --glow-a:rgba(195,200,140,.50); --glow-b:rgba(141,176,150,.40); color-scheme:light; } :root[data-theme="meadow"]{ /* Луг — светлее, шалфей вперёд */ --bg:#f1f3e6; --surface:#fafbf2; --surface-2:#e6ead4; --ink:#30253E; --ink-soft:#5a5566; --deep:#7a9b85; /* светлее russian green */ --deep-ink:#f7f8ec; --deep-soft:#d2dbc4; --accent:#5f8772; --accent-2:#aab572; /* более насыщенный sage — читаемый на светлом */ --on-accent:#2c3d31; --line:rgba(48,37,62,.12); --line-deep:rgba(247,248,236,.20); --glow-a:rgba(195,200,140,.55); --glow-b:rgba(160,190,165,.42); color-scheme:light; } :root[data-theme="plum"]{ /* Сливовый вечер — тёмная */ --bg:#30253E; --surface:#3b3049; --surface-2:#352a44; --ink:#eef1df; --ink-soft:#bcbda8; --deep:#4a6b58; /* тёмный russian green */ --deep-ink:#eef1df; --deep-soft:#c0cdb4; --accent:#a9c47e; /* sage-green — светится на тёмном */ --accent-2:#C3C88C; --on-accent:#2a2236; --line:rgba(238,241,223,.13); --line-deep:rgba(238,241,223,.14); --glow-a:rgba(195,200,140,.34); --glow-b:rgba(99,136,114,.34); color-scheme:dark; } /* ---------- Type direction (лёгкая, элегантная) ---------- */ :root{ --font-body:"Onest",system-ui,sans-serif; --font-display:"Playfair Display",Georgia,serif; } :root[data-type="editorial"]{ --font-names:"Playfair Display",Georgia,serif; --names-weight:400; --names-tracking:0; } :root[data-type="grotesque"]{ --font-names:"Onest",system-ui,sans-serif; --names-weight:600; --names-tracking:-0.035em; } :root[data-type="romantic"]{ --font-names:"Caveat",cursive; --names-weight:700; --names-tracking:0; } /* ---------- Motion scale ---------- */ :root{ --par:1; --reveal-y:34px; } :root[data-motion="min"]{ --par:0; --reveal-y:16px; } :root[data-motion="mid"]{ --par:1; --reveal-y:34px; } :root[data-motion="max"]{ --par:1.8; --reveal-y:54px; } /* ---------- Reset ---------- */ *{box-sizing:border-box;margin:0;padding:0} html{scroll-behavior:smooth;-webkit-text-size-adjust:100%} body{ background:var(--bg); color:var(--ink); font-family:var(--font-body); font-size:18px;line-height:1.6;font-weight:400; -webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility; overflow-x:hidden; } img{display:block;max-width:100%} a{color:inherit;text-decoration:none} button{font:inherit;color:inherit;cursor:pointer} /* subtle film grain over everything */ body::after{ content:"";position:fixed;inset:0;z-index:9000;pointer-events:none;opacity:var(--grain,.05); 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='.9' numOctaves='2'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E"); } /* ---------- Layout primitives ---------- */ .wrap{width:min(1180px,100% - 48px);margin-inline:auto} .wrap-narrow{width:min(820px,100% - 48px);margin-inline:auto} section{position:relative} .sec{padding:clamp(72px,11vw,150px) 0} .sec-deep{background:var(--deep);color:var(--deep-ink)} .sec-deep .ink-soft{color:var(--deep-soft)} .kicker{ font-size:13px;font-weight:600;letter-spacing:.22em;text-transform:uppercase; color:var(--accent);display:inline-flex;align-items:center;gap:12px; } .kicker::before{content:"";width:26px;height:1px;background:var(--accent);display:inline-block} .sec-deep .kicker{color:var(--accent-2)} h1,h2,h3{font-weight:400;line-height:1.04;letter-spacing:-0.02em} .h-sec{font-family:var(--font-display);font-weight:500;letter-spacing:-0.005em; font-size:clamp(36px,5.6vw,76px);line-height:1.04;margin:18px 0 0} .lead{font-size:clamp(18px,2.1vw,23px);line-height:1.55;color:var(--ink-soft);max-width:58ch} .ink-soft{color:var(--ink-soft)} /* generic placeholder image */ .ph{ position:relative;border-radius:4px;overflow:hidden; background: repeating-linear-gradient(135deg,var(--surface-2),var(--surface-2) 11px,transparent 11px,transparent 22px), var(--surface); border:1px solid var(--line); display:flex;align-items:flex-end; } .sec-deep .ph{ background: repeating-linear-gradient(135deg,rgba(255,255,255,.05),rgba(255,255,255,.05) 11px,transparent 11px,transparent 22px), rgba(255,255,255,.04); border-color:var(--line-deep); } .ph::after{ content:attr(data-label); font-family:ui-monospace,"SF Mono",Menlo,monospace; font-size:11px;letter-spacing:.08em;text-transform:uppercase; color:var(--ink-soft);opacity:.8;padding:12px 14px; } .sec-deep .ph::after{color:var(--deep-soft)} /* a real photo has loaded into this slot */ .ph.is-photo{background-size:cover;background-position:center;background-repeat:no-repeat;border-color:transparent} .ph.is-photo::after{display:none} /* ============================================================ NAV ============================================================ */ .nav{ position:fixed;top:0;left:0;right:0;z-index:1000; display:flex;align-items:center;justify-content:space-between; padding:18px clamp(20px,4vw,52px); transition:background .4s ease,padding .4s ease,box-shadow .4s ease,color .4s ease; color:var(--deep-ink);mix-blend-mode:normal; } .nav.scrolled{ background:color-mix(in srgb,var(--bg) 86%,transparent); -webkit-backdrop-filter:blur(14px) saturate(150%);backdrop-filter:blur(14px) saturate(150%); padding-top:13px;padding-bottom:13px;color:var(--ink); box-shadow:0 1px 0 var(--line); } .nav-logo{font-family:var(--font-names);font-weight:var(--names-weight); font-size:21px;letter-spacing:var(--names-tracking);white-space:nowrap} .nav-links{display:flex;gap:30px;align-items:center} .nav-links a{font-size:14px;font-weight:500;letter-spacing:.01em;position:relative;opacity:.92} .nav-links a::after{content:"";position:absolute;left:0;right:100%;bottom:-5px;height:1.5px; background:var(--accent);transition:right .3s ease} .nav-links a:hover{opacity:1} .nav-links a:hover::after{right:0} .nav-cta{ border:1px solid currentColor;border-radius:999px;padding:8px 18px;font-size:13px;font-weight:600; transition:background .25s,color .25s; } .nav.scrolled .nav-cta{border-color:var(--accent);color:var(--accent)} .nav-cta:hover{background:var(--accent);border-color:var(--accent);color:#fff} .nav-burger{display:none;flex-direction:column;gap:5px;background:none;border:0;padding:6px} .nav-burger span{width:24px;height:2px;background:currentColor;border-radius:2px;transition:.3s} /* ============================================================ HERO ============================================================ */ .hero{ min-height:100svh;position:relative;display:flex;align-items:center; background:var(--deep);color:var(--deep-ink);overflow:hidden; } .hero-glow{position:absolute;inset:-20% -10% auto -10%;height:120%;pointer-events:none;z-index:0} .hero-glow .g{position:absolute;border-radius:50%;filter:blur(60px);opacity:.9} .hero-glow .g1{width:46vw;height:46vw;top:-6%;right:-4%;background:radial-gradient(circle,var(--glow-a),transparent 68%)} .hero-glow .g2{width:40vw;height:40vw;bottom:-18%;left:-6%;background:radial-gradient(circle,var(--glow-b),transparent 68%)} .hero-glow .g3{width:26vw;height:26vw;top:34%;left:38%;background:radial-gradient(circle,var(--glow-a),transparent 70%);opacity:.5} .hero-vine{position:absolute;inset:0;z-index:0;opacity:.5; background: repeating-linear-gradient(125deg,transparent,transparent 70px,var(--line-deep) 70px,var(--line-deep) 71px); } .hero-inner{position:relative;z-index:2;width:100%;text-align:center;padding:120px 0 96px} .hero-kicker{justify-content:center;color:var(--accent-2)} .hero-names{ font-family:var(--font-names);font-weight:var(--names-weight);letter-spacing:var(--names-tracking); font-size:clamp(56px,15.5vw,210px);line-height:.92;margin:26px 0 8px; } .hero-names .amp{display:inline-block;color:var(--accent-2);font-style:italic; transform:translateY(.04em);padding:0 .06em} .hero-sub{display:flex;flex-wrap:wrap;gap:14px 30px;justify-content:center;align-items:center; margin-top:30px;font-size:clamp(15px,1.7vw,19px);letter-spacing:.04em} .hero-sub .dot{width:5px;height:5px;border-radius:50%;background:var(--accent-2)} .hero-sub b{font-weight:600} .hero-scroll{position:absolute;bottom:30px;left:50%;transform:translateX(-50%);z-index:3; display:flex;flex-direction:column;align-items:center;gap:9px; font-size:11px;letter-spacing:.22em;text-transform:uppercase;color:var(--deep-soft)} .hero-scroll .mouse{width:23px;height:36px;border:1.5px solid var(--deep-soft);border-radius:12px;position:relative} .hero-scroll .mouse::after{content:"";position:absolute;top:7px;left:50%;width:3px;height:7px;border-radius:2px; background:var(--deep-soft);transform:translateX(-50%);animation:scrolldot 1.7s ease-in-out infinite} @keyframes scrolldot{0%{opacity:0;transform:translate(-50%,0)}30%{opacity:1}70%{opacity:1}100%{opacity:0;transform:translate(-50%,11px)}} /* ============================================================ COUNTDOWN ============================================================ */ .cd-grid{display:flex;gap:clamp(14px,4vw,64px);justify-content:center;flex-wrap:wrap;margin-top:46px} .cd-cell{text-align:center;min-width:84px} .cd-num{font-family:var(--font-display);font-weight:500;letter-spacing:-0.01em; font-size:clamp(60px,12vw,140px);line-height:.9;font-variant-numeric:tabular-nums; color:var(--deep-ink)} .cd-lbl{margin-top:12px;font-size:12px;letter-spacing:.2em;text-transform:uppercase;color:var(--deep-soft)} .cd-sep{font-size:clamp(40px,8vw,96px);line-height:.9;color:var(--accent-2);align-self:flex-start; font-weight:300;opacity:.5} .cd-passed{font-size:clamp(28px,5vw,56px);font-weight:700;letter-spacing:-0.03em} /* ============================================================ STORY ============================================================ */ .story-head{display:flex;justify-content:space-between;align-items:flex-end;gap:40px;flex-wrap:wrap} .story-grid{display:grid;grid-template-columns:repeat(12,1fr);gap:20px;margin-top:56px} .story-grid .ph{min-height:0} .g-a{grid-column:1/7;aspect-ratio:4/5} .g-b{grid-column:7/13;aspect-ratio:16/12;align-self:start} .g-c{grid-column:7/13;aspect-ratio:16/9} .g-d{grid-column:1/5;aspect-ratio:3/4} .g-e{grid-column:5/13;aspect-ratio:16/8} .g-f{grid-column:1/7;aspect-ratio:4/3;align-self:center} /* ============================================================ DETAILS / VENUE ============================================================ */ .det-grid{display:grid;grid-template-columns:1.1fr .9fr;gap:clamp(28px,5vw,64px);margin-top:54px;align-items:stretch} .det-info{display:flex;flex-direction:column;gap:26px} .det-card{border:1px solid var(--line-deep);border-radius:6px;padding:26px 28px; background:rgba(255,255,255,.03)} .det-card .ttl{display:flex;align-items:center;gap:12px;font-size:14px;letter-spacing:.14em; text-transform:uppercase;color:var(--accent-2);font-weight:600} .det-card .big{font-size:clamp(22px,2.6vw,30px);font-weight:600;letter-spacing:-0.02em;margin-top:12px;line-height:1.2} .det-card p{margin-top:8px;color:var(--deep-soft)} .det-map{position:relative;border-radius:6px;overflow:hidden;min-height:340px;border:1px solid var(--line-deep); background: repeating-linear-gradient(0deg,rgba(255,255,255,.04),rgba(255,255,255,.04) 1px,transparent 1px,transparent 38px), repeating-linear-gradient(90deg,rgba(255,255,255,.04),rgba(255,255,255,.04) 1px,transparent 1px,transparent 38px), rgba(255,255,255,.03); display:flex;flex-direction:column;align-items:center;justify-content:center;gap:14px;text-align:center;padding:34px} .det-map .pin{width:18px;height:18px;border-radius:50% 50% 50% 0;background:var(--accent);transform:rotate(-45deg); box-shadow:0 0 0 8px color-mix(in srgb,var(--accent) 22%,transparent)} .det-map .region{font-size:clamp(24px,3vw,34px);font-weight:600;letter-spacing:-0.01em} .det-map .mono{font-family:ui-monospace,Menlo,monospace;font-size:11px;letter-spacing:.08em; text-transform:uppercase;color:var(--deep-soft)} .det-map .soon{display:inline-block;margin-top:6px;font-size:13px;border:1px dashed var(--line-deep); border-radius:999px;padding:7px 16px;color:var(--deep-soft)} .det-photos{display:flex;flex-direction:column;gap:18px} .det-photos .ph{width:100%} /* ============================================================ TIMELINE ============================================================ */ .tl{margin-top:58px;position:relative;max-width:760px} .tl::before{content:"";position:absolute;left:11px;top:8px;bottom:8px;width:2px; background:linear-gradient(var(--accent),var(--accent-2))} .tl-item{position:relative;padding:0 0 46px 56px} .tl-item:last-child{padding-bottom:0} .tl-item::before{content:"";position:absolute;left:4px;top:6px;width:16px;height:16px;border-radius:50%; background:var(--bg);border:3px solid var(--accent)} .tl-item.is-couple::before{background:var(--accent);box-shadow:0 0 0 6px color-mix(in srgb,var(--accent) 20%,transparent)} .tl-time{font-family:var(--font-display);font-weight:500;font-size:clamp(28px,3.6vw,44px); letter-spacing:0;font-variant-numeric:tabular-nums;line-height:1} .tl-ttl{font-size:19px;font-weight:600;margin-top:8px;letter-spacing:-0.01em} .tl-desc{color:var(--ink-soft);margin-top:4px;max-width:46ch} /* ============================================================ RSVP ============================================================ */ .rsvp-head{text-align:center} .rsvp-deadline{display:flex;flex-direction:column;align-items:center;gap:6px;margin:30px auto 0; max-width:560px;border:2px solid var(--accent-2);border-radius:14px;padding:22px 28px; background:color-mix(in srgb,var(--accent-2) 14%,transparent);text-align:center} .rsvp-deadline .dl-k{display:inline-flex;align-items:center;gap:9px;font-size:12px;letter-spacing:.18em; text-transform:uppercase;font-weight:700;color:var(--accent-2)} .rsvp-deadline .dl-date{font-family:var(--font-body);font-weight:700;letter-spacing:-0.02em; font-size:clamp(28px,4.4vw,44px);line-height:1.05;color:var(--deep-ink);white-space:nowrap} .rsvp-deadline .dl-sub{font-size:14px;color:var(--deep-soft);margin-top:2px} .rsvp-deadline .pulse{width:9px;height:9px;border-radius:50%;background:var(--accent-2); box-shadow:0 0 0 0 color-mix(in srgb,var(--accent-2) 60%,transparent);animation:pulse 2.2s infinite} @keyframes pulse{0%{box-shadow:0 0 0 0 color-mix(in srgb,var(--accent-2) 55%,transparent)} 70%{box-shadow:0 0 0 12px transparent}100%{box-shadow:0 0 0 0 transparent}} .form{max-width:680px;margin:50px auto 0;display:grid;gap:22px} .f-row{display:grid;gap:22px} .f-2{grid-template-columns:1fr 1fr} .field{display:flex;flex-direction:column;gap:9px} .field>label{font-size:13px;letter-spacing:.06em;text-transform:uppercase;color:var(--deep-soft);font-weight:600} .field .req{color:var(--accent-2)} .input,.select,.textarea{ width:100%;background:rgba(255,255,255,.04);border:1px solid var(--line-deep); border-radius:6px;padding:15px 16px;color:var(--deep-ink);font:inherit;font-size:17px; transition:border-color .2s,background .2s; } .input::placeholder,.textarea::placeholder{color:var(--deep-soft);opacity:.7} .input:focus,.select:focus,.textarea:focus{outline:none;border-color:var(--accent-2); background:rgba(255,255,255,.07)} .textarea{resize:vertical;min-height:104px} .select{appearance:none;cursor:pointer; background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8'%3E%3Cpath fill='%23b6bca4' d='M0 0h12L6 8z'/%3E%3C/svg%3E"); background-repeat:no-repeat;background-position:right 16px center;background-size:12px} .field.invalid .input,.field.invalid .select{border-color:var(--accent)} .f-err{font-size:13px;color:var(--accent);min-height:0;display:none} .field.invalid .f-err{display:block} /* segmented choice (придёте?) */ .seg{display:grid;grid-template-columns:1fr 1fr 1fr;gap:0;border:1px solid var(--line-deep); border-radius:8px;overflow:hidden} .seg label{position:relative;text-align:center;padding:15px 8px;font-size:15px;font-weight:600; cursor:pointer;transition:background .2s,color .2s;border-left:1px solid var(--line-deep)} .seg label:first-child{border-left:0} .seg input{position:absolute;opacity:0;pointer-events:none} .seg input:checked+span{color:#fff} .seg label:has(input:checked){background:var(--accent)} .seg label:hover{background:rgba(255,255,255,.05)} .seg label:has(input:checked):hover{background:var(--accent)} .f-submit{display:flex;align-items:center;gap:20px;flex-wrap:wrap;margin-top:6px} .btn{display:inline-flex;align-items:center;gap:10px;background:var(--accent-2);color:var(--on-accent); border-radius:999px;padding:16px 34px;font-weight:700;font-size:16px;letter-spacing:.01em; border:0;transition:transform .2s ease,filter .2s ease;white-space:nowrap} .btn:hover{transform:translateY(-2px);filter:brightness(1.06)} .btn:active{transform:translateY(0)} .btn-ghost{background:transparent;color:var(--deep-ink);border:1px solid var(--line-deep)} .btn-ghost:hover{border-color:var(--accent-2)} .f-note{font-size:14px;color:var(--deep-soft)} .f-note a{color:var(--accent-2);border-bottom:1px solid currentColor} .f-fail{margin-top:-6px;font-size:14px;color:var(--accent); background:color-mix(in srgb,var(--accent) 14%,transparent); border:1px solid color-mix(in srgb,var(--accent) 40%,transparent); border-radius:8px;padding:12px 16px} .f-fail a{color:var(--accent-2);border-bottom:1px solid currentColor} .rsvp-thanks{max-width:620px;margin:40px auto 0;text-align:center; border:1px solid var(--line-deep);border-radius:10px;padding:48px 36px; background:rgba(255,255,255,.04);display:none} .rsvp-thanks.show{display:block;animation:popin .5s cubic-bezier(.2,.8,.3,1)} @keyframes popin{from{opacity:0;transform:translateY(18px) scale(.98)}to{opacity:1;transform:none}} .rsvp-thanks .mark{width:62px;height:62px;border-radius:50%;margin:0 auto 20px; border:2px solid var(--accent-2);display:flex;align-items:center;justify-content:center} .rsvp-thanks .mark svg{width:28px;height:28px;stroke:var(--accent-2);fill:none;stroke-width:2.4; stroke-linecap:round;stroke-linejoin:round} .rsvp-thanks h3{font-family:var(--font-names);font-weight:var(--names-weight);font-size:34px; letter-spacing:var(--names-tracking)} .rsvp-thanks p{margin-top:12px;color:var(--deep-soft)} .rsvp-thanks .edit{margin-top:22px;font-size:14px;color:var(--accent-2); border-bottom:1px solid currentColor;display:inline-block} /* ============================================================ INFO (dress code / parking / faq) ============================================================ */ .info-grid{display:grid;grid-template-columns:1fr 1fr;gap:clamp(24px,4vw,48px);margin-top:54px} .info-card{border:1px solid var(--line);border-radius:8px;padding:clamp(26px,3.4vw,40px); background:var(--surface)} .info-card .ic-k{font-size:13px;letter-spacing:.16em;text-transform:uppercase;color:var(--accent);font-weight:600} .info-card h3{font-family:var(--font-body);font-weight:700;font-size:clamp(24px,3vw,34px); letter-spacing:-0.02em;margin-top:12px} .info-card p{margin-top:14px;color:var(--ink-soft)} .swatches{display:flex;gap:10px;margin-top:22px;flex-wrap:wrap} .swatch{display:flex;flex-direction:column;align-items:center;gap:8px;font-size:11px;color:var(--ink-soft)} .swatch i{width:46px;height:46px;border-radius:50%;border:1px solid var(--line)} .note-line{display:flex;gap:12px;margin-top:16px;align-items:flex-start} .note-line .d{width:7px;height:7px;border-radius:50%;background:var(--accent-2);margin-top:9px;flex:none} .faq{margin-top:14px;border-top:1px solid var(--line)} .faq-item{border-bottom:1px solid var(--line)} .faq-q{width:100%;display:flex;justify-content:space-between;align-items:center;gap:20px; padding:24px 4px;text-align:left;font-size:clamp(18px,2vw,22px);font-weight:600;letter-spacing:-0.01em; background:none;border:0} .faq-q .pm{position:relative;width:18px;height:18px;flex:none} .faq-q .pm::before,.faq-q .pm::after{content:"";position:absolute;background:var(--accent); border-radius:2px;transition:transform .3s ease,opacity .3s} .faq-q .pm::before{left:0;right:0;top:8px;height:2px} .faq-q .pm::after{top:0;bottom:0;left:8px;width:2px} .faq-item.open .pm::after{transform:scaleY(0)} .faq-a{max-height:0;overflow:hidden;transition:max-height .4s ease} .faq-a p{padding:0 4px 24px;color:var(--ink-soft);max-width:70ch} /* ============================================================ CONTACTS / FOOTER ============================================================ */ .foot{background:var(--deep);color:var(--deep-ink);padding:clamp(72px,9vw,120px) 0 48px;position:relative;overflow:hidden} .foot-glow{position:absolute;width:50vw;height:50vw;border-radius:50%;filter:blur(80px); background:radial-gradient(circle,var(--glow-b),transparent 70%);bottom:-30%;left:-10%;opacity:.7;pointer-events:none} .foot-inner{position:relative;z-index:1;text-align:center} .foot-names{font-family:var(--font-names);font-weight:var(--names-weight);letter-spacing:var(--names-tracking); font-size:clamp(48px,10vw,120px);line-height:.95} .foot-names .amp{color:var(--accent-2);font-style:italic} .foot-date{margin-top:14px;font-size:clamp(15px,1.8vw,19px);letter-spacing:.06em;color:var(--deep-soft)} .contact-row{display:flex;gap:18px;justify-content:center;flex-wrap:wrap;margin-top:42px} .contact-card{border:1px solid var(--line-deep);border-radius:10px;padding:24px 28px;text-align:left; min-width:260px;background:rgba(255,255,255,.03);transition:border-color .25s,transform .25s} .contact-card:hover{border-color:var(--accent-2);transform:translateY(-3px)} .contact-card .ck{font-size:12px;letter-spacing:.16em;text-transform:uppercase;color:var(--accent-2);font-weight:600} .contact-card .cn{font-size:21px;font-weight:600;margin-top:10px;letter-spacing:-0.01em} .contact-card .cv{color:var(--deep-soft);margin-top:4px;font-size:15px} .tg-btn{display:inline-flex;align-items:center;gap:10px;margin-top:14px;color:var(--accent-2);font-weight:600;font-size:15px} .tg-btn svg{width:18px;height:18px;fill:currentColor} .foot-end{margin-top:64px;padding-top:28px;border-top:1px solid var(--line-deep); display:flex;justify-content:space-between;gap:18px;flex-wrap:wrap;font-size:13px;color:var(--deep-soft)} /* ============================================================ Reveal animation ============================================================ */ .reveal{opacity:0;transform:translateY(var(--reveal-y)); transition:opacity .9s cubic-bezier(.2,.7,.2,1),transform .9s cubic-bezier(.2,.7,.2,1)} .reveal.in{opacity:1;transform:none} .reveal[data-d="1"]{transition-delay:.08s} .reveal[data-d="2"]{transition-delay:.16s} .reveal[data-d="3"]{transition-delay:.24s} .reveal[data-d="4"]{transition-delay:.32s} @media (prefers-reduced-motion:reduce){ *{scroll-behavior:auto!important} .reveal{opacity:1!important;transform:none!important;transition:none!important} .hero-scroll .mouse::after,.rsvp-deadline .pulse{animation:none!important} } /* ============================================================ Responsive ============================================================ */ @media (max-width:880px){ body{font-size:17px} .nav-links{position:fixed;inset:0 0 auto 0;top:0;flex-direction:column;background:var(--deep); color:var(--deep-ink);padding:88px 32px 36px;gap:22px;transform:translateY(-110%); transition:transform .4s cubic-bezier(.4,0,.2,1);height:auto;box-shadow:0 20px 50px rgba(0,0,0,.3)} .nav-links.open{transform:translateY(0)} .nav-links a{font-size:20px} .nav-links .nav-cta{align-self:flex-start} .nav-burger{display:flex;z-index:1001} .nav.menu-open .nav-burger span:nth-child(1){transform:translateY(7px) rotate(45deg)} .nav.menu-open .nav-burger span:nth-child(2){opacity:0} .nav.menu-open .nav-burger span:nth-child(3){transform:translateY(-7px) rotate(-45deg)} .nav.menu-open .nav-burger{color:var(--deep-ink)} .story-grid{grid-template-columns:repeat(6,1fr)} .g-a{grid-column:1/4}.g-b{grid-column:4/7}.g-f{grid-column:1/7} .g-c{grid-column:1/7}.g-d{grid-column:1/4}.g-e{grid-column:4/7} .det-grid{grid-template-columns:1fr} .info-grid{grid-template-columns:1fr} .f-2{grid-template-columns:1fr} } @media (max-width:520px){ .wrap,.wrap-narrow{width:calc(100% - 36px)} .cd-sep{display:none} .cd-grid{gap:18px 22px} .cd-cell{min-width:64px} .seg{grid-template-columns:1fr} .seg label{border-left:0;border-top:1px solid var(--line-deep)} .seg label:first-child{border-top:0} .story-grid{grid-template-columns:repeat(2,1fr)} .g-a,.g-b,.g-c,.g-d,.g-e,.g-f{grid-column:auto} }