:root { --primary-color:#f7f1e8; --secondary-color:#d8bd82; --gold-color:#c9a45d; --text-color:#fffdf9; --background-color:#1c1a19; --charcoal:#211e1c; --sans:'Montserrat',sans-serif; --serif:'Cormorant Garamond',serif; }
* { box-sizing:border-box; } html,body { margin:0; min-height:100%; background:var(--background-color); color:var(--text-color); font-family:var(--sans); overflow:hidden; } button,input,textarea,select { font:inherit; } button,a { -webkit-tap-highlight-color:transparent; } button { cursor:pointer; } .opening-screen,.invitation-app,.slide { width:100%; min-height:100vh; min-height:100dvh; } .opening-screen { position:fixed; inset:0; z-index:10; display:grid; place-items:center; overflow:hidden; background:#25211e; transition:opacity .8s ease,visibility .8s ease; } .opening-screen.is-open { opacity:0; visibility:hidden; pointer-events:none; } .opening-bg { position:absolute; inset:-2%; background:linear-gradient(#1b18158c,#1b181584),url('https://images.unsplash.com/photo-1519225421980-715cb0215aed?auto=format&fit=crop&w=1600&q=85') center/cover; transform:scale(1.04); animation:slowZoom 18s ease-in-out infinite alternate; } .glow { position:absolute; width:42vw; height:42vw; border-radius:50%; background:#d8bd8247; filter:blur(35px); } .glow-one { top:8%; left:-13%; } .glow-two { bottom:5%; right:-13%; } .envelope-wrap { position:relative; z-index:1; width:min(86vw,400px); height:410px; display:grid; place-items:center; outline:none; } .envelope-wrap:focus-visible { outline:2px solid var(--secondary-color); outline-offset:8px; border-radius:8px; } .envelope { position:relative; width:100%; height:235px; margin-top:80px; filter:drop-shadow(0 26px 30px #00000070); transform-style:preserve-3d; } .envelope-back,.envelope-front { position:absolute; inset:0; background:#e6d5b5; } .envelope-back { clip-path:polygon(0 0,50% 47%,100% 0,100% 100%,0 100%); } .envelope-front { z-index:4; clip-path:polygon(0 100%,0 0,50% 48%,100% 0,100% 100%); background:linear-gradient(135deg,#e9dac0,#cdb080); } .envelope-flap { z-index:5; position:absolute; width:100%; height:135px; top:0; background:#efdcc0; clip-path:polygon(0 0,100% 0,50% 100%); transform-origin:top; transition:transform 1s cubic-bezier(.2,.8,.2,1); } .invitation-card { z-index:3; position:absolute; inset:10px 22px 0; padding:22px 14px; display:flex; flex-direction:column; align-items:center; text-align:center; color:#54463a; background:#f8f2e8; border:1px solid #d9bf91; transition:transform 1s cubic-bezier(.2,.8,.2,1),opacity .35s ease; } .invitation-card:before { content:''; position:absolute; inset:7px; border:1px solid #d7b97999; pointer-events:none; } .invitation-card .eyebrow { color:#9b7d4c; font-size:7px; letter-spacing:.12em; margin-top:7px; } .monogram { margin:8px 0 2px; color:#b2925b; font:500 23px var(--serif); }.monogram i,.seal i { font-size:.75em; }.invitation-card h1 { margin:0; font:600 25px/ .88 var(--serif); }.invitation-card h1 span,.invitation-card h1 em { display:block; }.invitation-card h1 em { margin:2px; color:#be9958; font-size:17px; }.invitation-card p { margin:7px 0 6px; font:italic 15px var(--serif); }.card-date { font-size:7px; letter-spacing:.13em; text-transform:uppercase; }.seal { z-index:6; position:absolute; left:50%; top:100px; width:44px; height:44px; display:grid; place-items:center; border-radius:50%; color:#f8edda; background:#b98c52; border:2px solid #d3b170; font:500 13px var(--serif); transform:translateX(-50%); transition:opacity .25s ease .3s; }.envelope-shadow { position:absolute; bottom:10px; left:10%; width:80%; height:18px; border-radius:50%; background:#0907058a; filter:blur(9px); }.open-prompt { position:absolute; bottom:0; font-size:10px; text-transform:uppercase; letter-spacing:.2em; animation:float 2.4s ease-in-out infinite; }.open-prompt b { color:var(--secondary-color); font-size:17px; margin-left:6px; }.opening-screen.opening .envelope-flap { transform:rotateX(180deg); z-index:1; }.opening-screen.opening .seal { opacity:0; }.opening-screen.opening .invitation-card { transform:translateY(-180px); }.invitation-app { position:fixed; inset:0; z-index:1; opacity:0; pointer-events:none; transition:opacity .7s ease .5s; }.invitation-app.is-visible { opacity:1; pointer-events:auto; }.slides { height:100%; display:flex; transition:transform .8s cubic-bezier(.77,0,.18,1); will-change:transform; }.slide { position:relative; flex:0 0 100%; display:grid; place-items:center; overflow-y:auto; overflow-x:hidden; background:var(--charcoal); isolation:isolate; padding:calc(64px + env(safe-area-inset-top)) 24px calc(78px + env(safe-area-inset-bottom)); }.slide:before { content:''; z-index:-2; position:absolute; inset:0; background-image:var(--slide-image); background-position:center; background-size:cover; transform:scale(1.03); transition:transform 6s ease; }.slide:after { content:''; z-index:-1; position:absolute; inset:0; background:linear-gradient(110deg,#171411cc,#1714116e 55%,#1714119c); }.slide.is-active:before { transform:scale(1.12); }.slide-content { width:min(100%,580px); margin:auto; text-align:center; }.eyebrow { display:block; margin-bottom:14px; color:#ead3a6; font-size:9px; font-weight:600; letter-spacing:.25em; text-transform:uppercase; }.slide h2 { margin:0 0 16px; font:600 clamp(45px,12vw,75px)/.82 var(--serif); }.couple-names { display:grid; gap:2px; }.couple-names i { color:#dfbd7d; font-size:.64em; font-weight:400; }.display-line { margin:15px 0 19px; font:italic clamp(20px,5.6vw,28px) var(--serif); color:#f1ddbc; }.intro { max-width:510px; margin:0 auto; font-size:clamp(12px,3.3vw,15px); line-height:1.75; font-weight:400; }.event-details { display:flex; justify-content:center; align-items:stretch; gap:19px; margin:28px auto 14px; font-size:10px; text-transform:uppercase; letter-spacing:.13em; }.event-details div:not(.detail-rule) { display:flex; flex-direction:column; gap:5px; }.event-details b { color:#f0d39b; font-size:10px; }.event-details strong { font:600 42px/.7 var(--serif); }.detail-rule { width:1px; align-self:stretch; background:#e3c38b94; }.swipe-hint { font:500 9px var(--sans); letter-spacing:.16em; text-transform:uppercase; color:#f0d39b; }.swipe-hint b { margin-left:5px; font-size:15px; }.map-card { overflow:hidden; margin:25px auto 17px; max-width:385px; border:1px solid #f7eddd45; background:#f3eadc; color:#392f27; text-align:left; box-shadow:0 15px 34px #0004; }.map-art { position:relative; height:96px; overflow:hidden; background:#d9d1ba; }.map-art:before,.map-art:after { content:''; position:absolute; border-radius:50%; background:#b4c0a2; }.map-art:before { width:150px; height:130px; left:-25px; top:-60px; }.map-art:after { width:110px; height:90px; right:-22px; bottom:-35px; }.road { position:absolute; z-index:1; display:block; height:11px; background:#f0e6d0; transform:rotate(-17deg); }.road-a { width:130%; left:-12%; top:40%; }.road-b { width:95%; left:23%; top:15%; transform:rotate(39deg); }.road-c { width:100%; left:-12%; top:75%; transform:rotate(10deg); }.map-pin { position:absolute; z-index:2; left:52%; top:38%; width:25px; height:25px; display:grid; place-items:center; border-radius:50% 50% 50% 0; transform:rotate(-45deg); background:#a67740; color:#fff; font-size:9px; box-shadow:0 4px 8px #6a4d2e5c; }.map-pin::first-letter { transform:rotate(45deg); }.map-info { padding:13px 17px 10px; }.map-label { color:#a87e4a; font-size:8px; font-weight:700; letter-spacing:.18em; text-transform:uppercase; }.map-info h3 { margin:3px 0; font:600 22px var(--serif); }.map-info p { margin:0; color:#6e6257; font-size:10px; }.location-link { display:block; padding:11px 17px; border-top:1px solid #cbbca739; color:#806033; font-size:9px; font-weight:700; letter-spacing:.12em; text-decoration:none; text-transform:uppercase; }.button { display:inline-flex; justify-content:center; align-items:center; gap:18px; min-height:44px; border:0; padding:0 22px; text-decoration:none; font-size:9px; font-weight:700; letter-spacing:.13em; text-transform:uppercase; transition:transform .2s ease,filter .2s ease; }.button:hover { transform:translateY(-2px); filter:brightness(1.07); }.button-gold { color:#372a1d; background:linear-gradient(110deg,#e8d0a0,#c99e5a); }.button span { font-size:16px; }.story-content blockquote { margin:28px 0 0; color:#f4d9a2; font:italic clamp(23px,6.5vw,34px)/1.1 var(--serif); }.rsvp-content { padding-top:0; }.rsvp-content h2 { font-size:clamp(41px,11vw,66px); }.rsvp-form { width:min(100%,385px); margin:17px auto 0; padding:15px; background:#191714a8; border:1px solid #f6e7ca4a; text-align:left; backdrop-filter:blur(5px); }.attendance-options { display:grid; grid-template-columns:1fr 1fr; gap:7px; }.attendance-button { min-height:39px; border:1px solid #efd3a581; background:#ffffff0e; color:#fffaf0; padding:6px; font-size:8px; font-weight:600; letter-spacing:.07em; text-transform:uppercase; }.attendance-button.is-selected { border-color:#f0c97d; background:#d6ae6745; color:#ffedc7; }.rsvp-feedback { min-height:0; margin:0; color:#f7d895; font:italic 15px var(--serif); text-align:center; }.rsvp-feedback:not(:empty) { margin:10px 0 2px; }.rsvp-form label { display:block; margin-top:9px; }.rsvp-form label span { display:block; margin-bottom:4px; color:#ebd2a2; font-size:8px; letter-spacing:.13em; text-transform:uppercase; }.rsvp-form input,.rsvp-form select,.rsvp-form textarea { width:100%; appearance:none; border:1px solid #f6e4c64a; border-radius:0; outline:none; background:#fffdf40f; color:#fffdf9; padding:8px 9px; font-size:11px; }.rsvp-form select { color:#fffdf9; }.rsvp-form option { color:#222; }.rsvp-form textarea { resize:vertical; min-height:44px; }.rsvp-form input:focus,.rsvp-form select:focus,.rsvp-form textarea:focus { border-color:#ebcc8e; }.confirm-button { width:100%; margin-top:13px; min-height:39px; }.thank-you-content h2 { font-size:clamp(58px,15vw,90px); }.thank-names { margin:0 0 20px; color:#edce96; font:italic 29px var(--serif); }.thank-names i { font-size:21px; }.date-mark { margin:28px 0 9px; color:#f1d49c; font:600 13px var(--sans); letter-spacing:.25em; }.see-you { margin:0; font:italic 21px var(--serif); }.see-you span { color:#e8b766; }.slider-nav { position:fixed; z-index:3; left:0; bottom:max(13px,env(safe-area-inset-bottom)); width:100%; padding:0 18px; display:grid; grid-template-columns:32px 1fr auto 32px; gap:8px; align-items:center; }.nav-arrow { width:31px; height:31px; border:1px solid #f6e7cd75; border-radius:50%; background:#18151245; color:#fff; font-size:17px; line-height:1; transition:background .2s; }.nav-arrow:hover { background:#ffffff30; }.dots { display:flex; gap:7px; justify-content:center; }.dot { width:6px; height:6px; padding:0; border:0; border-radius:50%; background:#fff8e17a; transition:width .3s,background .3s; }.dot.is-active { width:20px; border-radius:6px; background:#f4d294; }.slide-counter { min-width:35px; font-size:10px; letter-spacing:.12em; }.slide-counter b { color:#f4d294; }.music-button { position:fixed; z-index:4; top:max(16px,env(safe-area-inset-top)); right:16px; display:flex; gap:6px; align-items:center; border:1px solid #f5e8d27a; border-radius:20px; padding:7px 11px; background:#211d1985; color:#fff9ef; font:600 8px var(--sans); letter-spacing:.13em; text-transform:uppercase; backdrop-filter:blur(4px); }.music-button.is-playing { border-color:#e9c581; color:#f4d294; }.music-icon { font:17px var(--serif); }.reveal { opacity:0; transform:translateY(18px); }.is-active .reveal { animation:reveal .65s cubic-bezier(.2,.8,.2,1) forwards; }.is-active .reveal:nth-child(2) { animation-delay:.12s; }.is-active .reveal:nth-child(3) { animation-delay:.2s; }.is-active .reveal:nth-child(4) { animation-delay:.28s; }.is-active .reveal:nth-child(5) { animation-delay:.36s; }.is-active .reveal:nth-child(6) { animation-delay:.44s; } @keyframes reveal { to { opacity:1; transform:none; } } @keyframes slowZoom { to { transform:scale(1.13); } } @keyframes float { 50% { transform:translateY(-7px); } }
@media (max-width:380px),(max-height:700px) { .envelope-wrap { height:360px; transform:scale(.88); } .slide { padding-top:55px; padding-bottom:65px; } .intro { line-height:1.55; } .event-details { margin:19px auto 10px; } .rsvp-form { margin-top:10px; padding:11px; } .rsvp-form label { margin-top:6px; } .rsvp-form textarea { min-height:35px; } .thank-you-content h2 { margin-bottom:9px; } }
@media (min-width:700px) { .slide { padding-left:56px; padding-right:56px; }.slide-content { transform:translateY(-10px); }.hero-content .intro { max-width:560px; }.rsvp-form { padding:20px; }.slider-nav { max-width:650px; left:50%; transform:translateX(-50%); }.map-card { max-width:430px; } }
@media (prefers-reduced-motion:reduce) { *,*:before,*:after { animation-duration:.01ms!important; transition-duration:.01ms!important; scroll-behavior:auto!important; } }