/* WeddingSentry microsite base styles. Palette comes from a theme class on . */ /* ---------- THEMES (per-event, set via body class theme-) ---------- */ .theme-agave{ --sand:#f4ede0; --sand-deep:#e9dcc6; --primary:#2f4a3c; --primary-light:#436653; --accent:#c96a44; --accent-soft:#d98a68; --ink:#26221c; --ink-soft:#5c554a; --cream:#fbf7ef; --line:rgba(47,74,60,.16); } .theme-dusk{ --sand:#efeaf0; --sand-deep:#ddd3e2; --primary:#3d3357; --primary-light:#574a76; --accent:#b8607f; --accent-soft:#cd7f99; --ink:#241f2b; --ink-soft:#5a5266; --cream:#faf7fb; --line:rgba(61,51,87,.15); } .theme-coast{ --sand:#eef2f1; --sand-deep:#d6e2df; --primary:#1f4f57; --primary-light:#33707a; --accent:#d98a4e; --accent-soft:#e5a674; --ink:#1e2a2b; --ink-soft:#4d5c5d; --cream:#f9fbfb; --line:rgba(31,79,87,.15); } .theme-rose{ --sand:#f6ece8; --sand-deep:#eed6cd; --primary:#7a3b46; --primary-light:#99555f; --accent:#c98a3f; --accent-soft:#dba763; --ink:#2b1f22; --ink-soft:#645257; --cream:#fdf6f3; --line:rgba(122,59,70,.15); } *{box-sizing:border-box; margin:0; padding:0;} html{scroll-behavior:smooth;} body{ font-family:'Outfit',sans-serif; background:var(--sand); color:var(--ink); line-height:1.6; -webkit-font-smoothing:antialiased; } h1,h2,h3,.display{font-family:'Fraunces',serif; font-weight:500; line-height:1.1;} .serif-italic{font-style:italic; font-weight:400;} a{color:inherit;} img{max-width:100%; display:block;} /* NAV */ nav{position:fixed; top:0; left:0; right:0; z-index:100; display:flex; align-items:center; justify-content:space-between; padding:16px 28px; background:rgba(244,237,224,.82); backdrop-filter:blur(12px); border-bottom:1px solid var(--line);} .nav-mono{font-family:'Fraunces',serif; font-weight:600; font-size:19px; color:var(--primary);} .nav-mono span{color:var(--accent);} .nav-links{display:flex; gap:22px; align-items:center;} .nav-links a{font-size:13.5px; font-weight:500; text-decoration:none; color:var(--ink-soft); transition:color .18s ease; white-space:nowrap;} .nav-links a:hover{color:var(--accent);} .lang-toggle{display:flex; border:1px solid var(--primary); border-radius:20px; overflow:hidden; font-size:11.5px; font-weight:600;} .lang-toggle button{border:none; background:transparent; padding:5px 11px; cursor:pointer; color:var(--primary); font-family:inherit; font-weight:600;} .lang-toggle button.active{background:var(--primary); color:var(--cream);} .nav-toggle{display:none; background:none; border:none; cursor:pointer; color:var(--primary);} @media(max-width:900px){ .nav-links{position:fixed; inset:0 0 0 auto; width:min(78vw,320px); flex-direction:column; align-items:flex-start; justify-content:center; gap:26px; background:var(--cream); padding:40px; transform:translateX(100%); transition:transform .3s ease; box-shadow:0 18px 50px -20px rgba(38,34,28,.35);} .nav-links.open{transform:translateX(0);} .nav-links a{font-size:18px;} .nav-toggle{display:block;} } /* HERO */ header.hero{min-height:100vh; position:relative; overflow:hidden; display:flex; flex-direction:column; align-items:center; justify-content:center; text-align:center; padding:120px 24px 60px;} header.hero.has-photo::before{content:''; position:absolute; inset:0; background-size:cover; background-position:center; background-image:var(--hero-img); filter:brightness(.55); z-index:0;} header.hero.has-photo > *{position:relative; z-index:1; color:var(--cream);} header.hero:not(.has-photo){background:radial-gradient(120% 90% at 50% -10%, var(--accent-soft), transparent 55%), linear-gradient(180deg,var(--sand),var(--sand-deep));} .hero-eyebrow{font-size:13px; letter-spacing:.32em; text-transform:uppercase; color:var(--accent); font-weight:600; margin-bottom:26px;} header.hero.has-photo .hero-eyebrow{color:var(--accent-soft);} .hero-names{font-size:clamp(52px,13vw,138px); color:var(--primary); letter-spacing:-.01em;} header.hero.has-photo .hero-names{color:var(--cream);} .hero-amp{display:block; font-size:.42em; color:var(--accent); font-style:italic; margin:2px 0;} .hero-meta{margin-top:30px; font-size:clamp(15px,2.4vw,19px); color:var(--ink-soft);} header.hero.has-photo .hero-meta{color:rgba(251,247,239,.9);} .hero-meta strong{color:var(--ink); font-weight:600;} header.hero.has-photo .hero-meta strong{color:var(--cream);} .hero-divider{width:60px; height:1px; background:var(--accent); margin:22px auto;} .hero-cta{display:inline-block; margin-top:34px; background:var(--primary); color:var(--cream); text-decoration:none; font-weight:600; font-size:15px; padding:15px 40px; border-radius:40px; transition:transform .18s ease, background .18s ease;} .hero-cta:hover{background:var(--primary-light); transform:translateY(-2px);} .countdown{display:flex; gap:clamp(14px,4vw,38px); margin-top:52px; justify-content:center;} .cd-unit{text-align:center;} .cd-num{font-family:'Fraunces',serif; font-size:clamp(30px,6vw,46px); color:var(--primary); line-height:1;} header.hero.has-photo .cd-num{color:var(--cream);} .cd-label{font-size:11px; letter-spacing:.18em; text-transform:uppercase; color:var(--ink-soft); margin-top:8px;} header.hero.has-photo .cd-label{color:rgba(251,247,239,.8);} /* SECTIONS */ section{padding:clamp(64px,10vw,120px) 24px; position:relative;} .wrap{max-width:1080px; margin:0 auto;} .wrap-narrow{max-width:720px; margin:0 auto;} .sec-eyebrow{font-size:12px; letter-spacing:.28em; text-transform:uppercase; color:var(--accent); font-weight:600; margin-bottom:14px; text-align:center;} .sec-title{font-size:clamp(30px,5.5vw,52px); color:var(--primary); text-align:center; margin-bottom:14px;} .sec-intro{text-align:center; color:var(--ink-soft); max-width:600px; margin:0 auto 52px; font-size:16.5px;} .bg-cream{background:var(--cream);} .bg-primary{background:var(--primary); color:var(--cream);} .bg-primary .sec-title{color:var(--cream);} .bg-primary .sec-intro{color:rgba(251,247,239,.78);} /* story */ .story{display:grid; grid-template-columns:1fr 1fr; gap:56px; align-items:center;} .story-photo{aspect-ratio:4/5; border-radius:6px; background: linear-gradient(135deg,var(--primary-light),var(--primary)); box-shadow:0 18px 50px -20px rgba(38,34,28,.35); overflow:hidden; display:flex; align-items:flex-end; padding:22px;} .story-photo img{width:100%; height:100%; object-fit:cover; position:absolute; inset:0;} .story-photo span{color:rgba(251,247,239,.5); font-size:12px; letter-spacing:.14em; text-transform:uppercase; position:relative;} .story-text h3{font-size:clamp(24px,4vw,34px); color:var(--primary); margin-bottom:18px;} .story-text p{color:var(--ink-soft); margin-bottom:16px;} @media(max-width:820px){.story{grid-template-columns:1fr; gap:32px;}} /* schedule */ .day-tab-row{display:flex; gap:10px; justify-content:center; margin-bottom:44px; flex-wrap:wrap;} .day-tab{border:1px solid var(--line); background:transparent; cursor:pointer; font-family:'Fraunces',serif; font-size:16px; color:var(--ink-soft); padding:12px 26px; border-radius:30px; transition:all .18s ease;} .day-tab.active{background:var(--primary); color:var(--cream); border-color:var(--primary);} .day-panel{display:none;} .day-panel.active{display:block; animation:fade .4s ease;} @keyframes fade{from{opacity:0; transform:translateY(8px);}to{opacity:1; transform:none;}} .event-row{display:grid; grid-template-columns:120px 1fr; gap:28px; padding:26px 0; border-top:1px solid var(--line);} .event-row:last-child{border-bottom:1px solid var(--line);} .event-time{font-family:'Fraunces',serif; font-size:19px; color:var(--accent);} .event-body h4{font-family:'Fraunces',serif; font-size:22px; color:var(--primary); margin-bottom:4px;} .event-tag{display:inline-block; font-size:11px; letter-spacing:.08em; text-transform:uppercase; color:var(--ink-soft); background:var(--sand-deep); padding:3px 10px; border-radius:12px; margin:8px 8px 8px 0;} .event-body p{color:var(--ink-soft); font-size:15px; margin-top:4px;} @media(max-width:640px){.event-row{grid-template-columns:1fr; gap:6px;}} /* CAMERA / QR */ .camera-block{display:grid; grid-template-columns:1.1fr .9fr; gap:48px; align-items:center; background:var(--cream); border-radius:14px; padding:clamp(28px,5vw,56px); box-shadow:0 18px 50px -20px rgba(38,34,28,.35); border:1px solid var(--line);} .camera-copy h3{font-size:clamp(26px,4.5vw,40px); color:var(--primary); margin-bottom:16px;} .camera-copy p{color:var(--ink-soft); margin-bottom:14px;} .camera-steps{list-style:none; margin-top:18px;} .camera-steps li{display:flex; align-items:flex-start; gap:12px; margin-bottom:12px; color:var(--ink); font-size:15px;} .camera-steps .num{flex-shrink:0; width:26px; height:26px; border-radius:50%; background:var(--accent); color:var(--cream); font-family:'Fraunces',serif; font-size:14px; display:flex; align-items:center; justify-content:center; margin-top:1px;} .qr-card{background:var(--primary); border-radius:12px; padding:32px; text-align:center; color:var(--cream);} .qr-code{width:180px; height:180px; margin:0 auto 18px; background:var(--cream); border-radius:8px; padding:14px; display:flex; align-items:center; justify-content:center;} .qr-code svg, .qr-code img{width:100%; height:100%;} .qr-card .cam-label{font-family:'Fraunces',serif; font-size:20px; margin-bottom:4px;} .qr-card .cam-sub{font-size:13px; color:rgba(251,247,239,.7);} .qr-card .shots{display:inline-block; margin-top:14px; font-size:12px; letter-spacing:.1em; text-transform:uppercase; background:var(--accent); padding:5px 14px; border-radius:16px;} @media(max-width:760px){.camera-block{grid-template-columns:1fr; gap:32px;}} /* cards */ .card-grid{display:grid; grid-template-columns:repeat(auto-fit,minmax(240px,1fr)); gap:22px;} .card{background:var(--cream); border:1px solid var(--line); border-radius:10px; padding:28px; transition:transform .18s ease;} .card:hover{transform:translateY(-3px);} .card h4{font-family:'Fraunces',serif; font-size:21px; color:var(--primary); margin-bottom:8px;} .card p{color:var(--ink-soft); font-size:14.5px; margin-bottom:6px;} .card .meta{font-size:12.5px; color:var(--accent); font-weight:600; letter-spacing:.04em;} .card-link{display:inline-block; margin-top:12px; font-size:13px; font-weight:600; color:var(--primary); text-decoration:none; border-bottom:1px solid var(--accent); padding-bottom:2px;} .swatch-row{display:flex; gap:10px; margin-top:14px;} .swatch{width:34px; height:34px; border-radius:50%; border:2px solid var(--cream); box-shadow:0 2px 6px rgba(0,0,0,.15);} /* gallery */ .gallery-grid{display:grid; grid-template-columns:repeat(auto-fill,minmax(200px,1fr)); gap:12px;} .gallery-grid img{aspect-ratio:1; object-fit:cover; border-radius:6px; width:100%;} /* FAQ */ .faq-item{border-bottom:1px solid var(--line);} .faq-q{width:100%; text-align:left; background:none; border:none; cursor:pointer; padding:22px 0; font-family:'Fraunces',serif; font-size:18.5px; color:var(--primary); display:flex; justify-content:space-between; align-items:center; gap:16px;} .faq-q .plus{font-size:22px; color:var(--accent); transition:transform .2s ease; flex-shrink:0;} .faq-q.open .plus{transform:rotate(45deg);} .faq-a{max-height:0; overflow:hidden; transition:max-height .3s ease; color:var(--ink-soft);} .faq-a p{padding-bottom:22px; font-size:15px;} /* RSVP */ .rsvp-card{background:var(--cream); border-radius:14px; padding:clamp(28px,5vw,48px); box-shadow:0 18px 50px -20px rgba(38,34,28,.35); border:1px solid var(--line);} .field{margin-bottom:20px;} .field label{display:block; font-size:13px; font-weight:600; color:var(--ink); margin-bottom:7px;} .field input, .field select, .field textarea{width:100%; padding:12px 14px; border:1px solid var(--line); border-radius:8px; font-family:inherit; font-size:15px; background:var(--sand); color:var(--ink);} .field input:focus, .field select:focus, .field textarea:focus{outline:2px solid var(--accent); outline-offset:1px; border-color:transparent;} .radio-row{display:flex; gap:12px;} .radio-pill{flex:1;} .radio-pill input{position:absolute; opacity:0;} .radio-pill label{display:block; text-align:center; padding:13px; border:1px solid var(--line); border-radius:8px; cursor:pointer; font-weight:600; color:var(--ink-soft); transition:all .15s ease; margin:0;} .radio-pill input:checked + label{background:var(--primary); color:var(--cream); border-color:var(--primary);} .events-check{display:grid; grid-template-columns:1fr 1fr; gap:10px;} .check-item{display:flex; align-items:center; gap:9px; font-size:14.5px; color:var(--ink);} .check-item input{width:18px; height:18px; accent-color:var(--primary);} .rsvp-submit{width:100%; background:var(--accent); color:var(--cream); border:none; cursor:pointer; font-family:'Fraunces',serif; font-size:18px; padding:16px; border-radius:8px; transition:background .18s ease;} .rsvp-submit:hover{background:var(--accent-soft);} .rsvp-note{text-align:center; font-size:13px; color:var(--ink-soft); margin-top:14px;} .rsvp-msg{padding:14px; border-radius:8px; margin-bottom:18px; font-size:14.5px; text-align:center;} .rsvp-msg.ok{background:#e3f0e6; color:#245b34;} .rsvp-msg.err{background:#f6e0dc; color:#8a3423;} .rsvp-seats{background:var(--sand-deep); border-radius:8px; padding:12px 14px; font-size:13.5px; color:var(--ink-soft); margin-bottom:18px;} @media(max-width:520px){.events-check{grid-template-columns:1fr;}} /* footer */ footer{background:var(--primary); color:rgba(251,247,239,.8); padding:64px 24px 40px; text-align:center;} .footer-names{font-family:'Fraunces',serif; font-size:34px; color:var(--cream); margin-bottom:8px;} .footer-amp{color:var(--accent-soft); font-style:italic;} .footer-date{font-size:14px; letter-spacing:.1em; margin-bottom:26px;} .footer-links{display:flex; gap:20px; justify-content:center; flex-wrap:wrap; margin-bottom:28px;} .footer-links a{font-size:13px; text-decoration:none; color:rgba(251,247,239,.75);} .footer-links a:hover{color:var(--accent-soft);} .footer-mark{font-size:12px; color:rgba(251,247,239,.45);} .footer-mark a{color:rgba(251,247,239,.6);} /* language visibility */ [data-es]{display:none;} html[lang="es"] [data-en]{display:none;} html[lang="es"] [data-es]{display:inline;} html[lang="es"] [data-es].block{display:block;} /* labels are block-level: toggle them as blocks, not inline */ label[data-en],label[data-es]{display:block;} label[data-es]{display:none;} html[lang="es"] label[data-en]{display:none;} html[lang="es"] label[data-es]{display:block;}