:root { --ink:#064598; --green:#007d76; --cream:#f4f8fc; --paper:#ffffff; --gold:#ffdf00; --clay:#0750a5; --line:#d8e4ec; --serif:"Fraunces", Georgia, serif; --sans:"DM Sans", Arial, sans-serif; }
* { box-sizing:border-box; } html { scroll-behavior:smooth; } body { margin:0; color:var(--ink); background:var(--paper); font-family:var(--sans); line-height:1.55; } a { color:inherit; } .skip-link { position:absolute; left:-999px; top:0; } .skip-link:focus { left:1rem; z-index:99; padding:.6rem 1rem; background:white; }
.site-header { min-height:82px; display:flex; align-items:center; justify-content:space-between; padding:14px 6vw; border-bottom:1px solid rgba(33,77,67,.11); background:rgba(255,253,248,.94); position:sticky; top:0; z-index:20; backdrop-filter:blur(10px); }
.brand { display:inline-flex; align-items:center; text-decoration:none; } .brand img { display:block; width:auto; height:52px; max-width:min(380px,62vw); object-fit:contain; }
.main-nav { display:flex; align-items:center; gap:1.65rem; font-size:.93rem; } .main-nav a { text-decoration:none; } .main-nav > a:not(.button):hover,.text-link:hover { color:var(--clay); } .button { display:inline-flex; align-items:center; justify-content:center; padding:.82rem 1.25rem; border-radius:999px; color:white; background:var(--green); border:1px solid var(--green); font-weight:700; text-decoration:none; transition:transform .2s, background .2s; } .button:hover { transform:translateY(-2px); background:#255a4b; } .button-small { padding:.55rem 1rem; } .menu-toggle { display:none; }
.hero { min-height:620px; display:grid; grid-template-columns:1.06fr .94fr; overflow:hidden; background:var(--cream); } .hero-copy { padding:clamp(4rem,10vw,8.5rem) 7vw 5rem; align-self:center; } .eyebrow { margin:0 0 1rem; color:var(--clay); font-size:.74rem; font-weight:700; text-transform:uppercase; letter-spacing:.16em; } h1,h2,h3,p { margin-top:0; } h1,h2 { font-family:var(--serif); letter-spacing:-.045em; line-height:1.03; } h1 { max-width:650px; font-size:clamp(3.4rem,6vw,6.1rem); margin-bottom:1.45rem; } h1 em { color:var(--green); font-style:italic; } .hero-text { max-width:510px; font-size:1.13rem; } .hero-actions { display:flex; flex-wrap:wrap; gap:1.3rem; align-items:center; margin-top:2.25rem; } .text-link { text-decoration:none; font-weight:700; border-bottom:1px solid currentColor; padding-bottom:3px; }
.hero-art { position:relative; min-height:550px; background:var(--gold); overflow:hidden; } .sun { position:absolute; width:360px; height:360px; border-radius:50%; top:11%; left:15%; background:#fff4a3; } .arch { position:absolute; border-radius:200px 200px 0 0; bottom:-40px; } .arch-back { width:64%; height:76%; background:#0b8d84; right:8%; } .arch-front { width:43%; height:57%; background:var(--ink); right:22%; } .hero-art p { position:absolute; z-index:2; right:12%; bottom:10%; color:#fff; font:italic 1.35rem var(--serif); transform:rotate(-6deg); } .leaf { position:absolute; z-index:3; height:250px; width:90px; border-radius:100% 0 100% 0; background:#006c70; transform-origin:bottom center; } .leaf-one { left:8%; bottom:-30px; transform:rotate(35deg); } .leaf-two { left:21%; bottom:2px; height:160px; width:55px; background:#51afa1; transform:rotate(-20deg); }
.promise-band { display:flex; justify-content:center; align-items:center; gap:2rem; padding:1.25rem 6vw; color:#fffaf0; background:var(--green); font:1.08rem var(--serif); text-align:center; } .promise-band p { margin:0; } .promise-band span { color:var(--gold); }
.section { padding:clamp(4.6rem,9vw,8rem) 7vw; } .about { display:grid; grid-template-columns:.73fr 1.27fr; gap:8vw; } h2 { font-size:clamp(2.5rem,4vw,4.35rem); margin-bottom:1.2rem; } .lead { font:1.45rem/1.5 var(--serif); max-width:750px; } .about-cards { display:grid; grid-template-columns:repeat(3,1fr); gap:1rem; margin-top:3.2rem; } .about-cards article { min-height:210px; padding:1.3rem; border:1px solid var(--line); border-radius:7px; background:white; } .number { color:var(--gold); font:700 .78rem var(--sans); } h3 { margin:2rem 0 .5rem; font:700 1.05rem var(--serif); font-size:1.3rem; } .about-cards p { font-size:.9rem; color:#527167; }
.help-section { display:grid; grid-template-columns:1.1fr .9fr; gap:0; padding:0; background:var(--ink); color:white; } .help-card { padding:clamp(4rem,7vw,6.5rem) 9vw; } .help-card .eyebrow { color:var(--gold); } .help-card h2 { color:#fff; } .help-card p:not(.eyebrow) { max-width:520px; color:#dce9f7; } .button-light { color:var(--ink); background:#fff; border-color:#fff; margin-top:1rem; } .meeting-info { display:flex; flex-direction:column; justify-content:center; padding:4rem 8vw 4rem 4vw; background:var(--green); } .info-row { display:flex; gap:1rem; padding:1.5rem 0; border-bottom:1px solid rgba(255,255,255,.25); } .info-row strong { font-size:1.06rem; } .info-row p { margin:3px 0 0; color:#e5f3f0; font-size:.9rem; } .info-icon { color:var(--gold); font-size:1.7rem; } .info-note { margin-top:1.4rem; color:#d6eeea; font-size:.78rem; } .map-actions { display:flex; flex-wrap:wrap; gap:.55rem; margin-top:.9rem; } .map-actions a { padding:.4rem .68rem; border:1px solid rgba(255,255,255,.55); border-radius:999px; color:#fff; font-weight:700; text-decoration:none; } .map-actions a:hover { color:var(--ink); background:var(--gold); border-color:var(--gold); }
.gift-section { display:grid; grid-template-columns:.9fr 1.1fr; align-items:center; gap:9vw; background:#edf7f6; } .gift-copy { max-width:610px; } .gift-copy p:not(.eyebrow) { font-size:1.08rem; } .gift-illustration { position:relative; width:min(310px,70vw); height:300px; margin:auto; } .gift-bag { position:absolute; inset:95px 35px 0; display:grid; place-items:center; color:#fff; font-size:3.5rem; background:var(--ink); border-radius:11px 11px 35px 35px; box-shadow:14px 15px 0 rgba(6,69,152,.12); } .gift-handle { position:absolute; z-index:2; width:130px; height:100px; left:90px; top:32px; border:15px solid var(--green); border-bottom:0; border-radius:90px 90px 0 0; } .gift-sprig { position:absolute; top:20px; width:55px; height:100px; border-radius:100% 0; background:var(--green); } .sprig-left { left:0; transform:rotate(-41deg); } .sprig-right { right:0; transform:rotate(41deg); }
.instagram-section { display:grid; grid-template-columns:1fr 1fr; gap:7vw; align-items:center; padding:clamp(4.6rem,9vw,8rem) 7vw; } .instagram-section > div:first-child > p:not(.eyebrow) { max-width:460px; } .button-outline { margin-top:1rem; color:var(--green); background:transparent; } .button-outline:hover { color:white; } .instagram-grid { display:grid; grid-template-columns:repeat(2,1fr); gap:12px; max-width:450px; } .insta-post { aspect-ratio:1; display:flex; align-items:center; justify-content:center; padding:1.2rem; text-align:center; font:600 clamp(1.2rem,2.3vw,1.9rem)/1.1 var(--serif); overflow:hidden; } .post-one { color:white; background:var(--green); } .post-two { color:var(--ink); background:var(--gold); font-size:4rem; } .post-three { color:var(--ink); background:#dfeef8; } .post-four { color:white; background:var(--clay); font-size:4rem; } .live-post { padding:0; background:#eef1ec; } .live-post img { width:100%; height:100%; object-fit:cover; transition:transform .25s ease; } .live-post:hover img { transform:scale(1.04); }
.contact-section { display:grid; grid-template-columns:1fr 1fr; gap:6vw; padding:clamp(4.5rem,8vw,7rem) 7vw; color:white; background:var(--ink); } .contact-section .eyebrow { color:var(--gold); } .contact-section h2 { color:#fff; } .contact-links { align-self:center; } .contact-links a { position:relative; display:grid; grid-template-columns:1fr auto; gap:.2rem; padding:1.15rem 2.2rem 1.15rem 0; border-top:1px solid rgba(255,255,255,.45); text-decoration:none; } .contact-links a:last-child { border-bottom:1px solid rgba(255,255,255,.45); } .contact-links span { font-size:.78rem; text-transform:uppercase; letter-spacing:.1em; } .contact-links strong { grid-column:1; font-size:1.1rem; } .contact-links b { position:absolute; right:0; top:50%; font-size:1.3rem; transform:translateY(-50%); }
.site-footer { display:grid; grid-template-columns:1fr auto 1fr; gap:1rem; align-items:center; padding:2rem 7vw; color:#e5f1f8; background:#003b81; font-size:.76rem; } .site-footer > p { margin:0; } .site-footer > p:last-child { text-align:right; } .footer-brand { padding:.28rem .42rem; background:white; border-radius:3px; } .footer-brand img { height:39px; }
@media (max-width:800px) { .site-header { padding:13px 5vw; } .menu-toggle { display:block; width:42px; height:42px; padding:9px; border:0; background:none; } .menu-toggle span:not(.sr-only) { display:block; height:2px; margin:5px 0; background:var(--ink); transition:.2s; } .main-nav { display:none; position:absolute; top:100%; left:0; right:0; flex-direction:column; align-items:stretch; gap:0; padding:1rem 5vw 1.5rem; background:var(--paper); border-bottom:1px solid var(--line); } .main-nav.open { display:flex; } .main-nav a { padding:.85rem 0; } .main-nav .button { margin-top:.5rem; } .hero,.about,.help-section,.gift-section,.instagram-section,.contact-section { grid-template-columns:1fr; } .hero-copy { padding:4.5rem 7vw; } .hero-art { min-height:380px; } .sun { width:270px; height:270px; } .promise-band { gap:.65rem; flex-direction:column; padding:1.3rem 7vw; } .promise-band span { display:none; } .about { gap:2rem; } .about-cards { grid-template-columns:1fr; margin-top:2rem; } .about-cards article { min-height:0; } .about-cards h3 { margin-top:1rem; } .meeting-info { padding:3rem 9vw; } .gift-section { gap:3rem; } .instagram-grid { margin:auto; } .site-footer { grid-template-columns:1fr; text-align:left; } .site-footer > p:last-child { text-align:left; } }
@media (max-width:430px) { h1 { font-size:3.3rem; } .hero-actions { align-items:flex-start; flex-direction:column; } .instagram-grid { gap:7px; } }
.sr-only { position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0; }