/* ============================================================ Somatic with Clara — shared brand system (single source of truth) Fonts: Newsreader (serif display) + Hanken Grotesk (body). Load the font in each page , then this file. ============================================================ */ /* ── Brand: Meadow (soft editorial) ─────────────────── */ :root{ --bg:#F6F1E7; --cream:#FBF5EA; --white:#fff; --panel:#E7DAC9; --sand:#EFE7D8; --clay:#C89574; --clay-dark:#B0774F; --clay-deep:#C08A66; --text:#2A2117; --body:#4A3E2F; --muted:#6E6051; --dark:#2A2117; --line:rgba(42,33,23,.09); } *,*::before,*::after{box-sizing:border-box;margin:0;padding:0;} html{scroll-behavior:smooth;overflow-x:clip;} body{font-family:'Hanken Grotesk',sans-serif;background:var(--bg);color:var(--body);-webkit-font-smoothing:antialiased;overflow-x:clip;line-height:1.6;} /* Layout */ .wide{max-width:1080px;margin:0 auto;padding:0 32px;} .narrow{max-width:720px;margin:0 auto;padding:0 32px;} section{position:relative;} /* Type */ .eyebrow{font-size:11px;font-weight:600;letter-spacing:2.5px;text-transform:uppercase;color:var(--muted);display:block;margin-bottom:18px;} .display{font-family:'Newsreader',serif;font-weight:500;line-height:1.08;letter-spacing:-0.015em;color:var(--text);} .display em{font-style:italic;font-weight:400;} h1.display{font-size:clamp(40px,5.6vw,64px);line-height:1.04;letter-spacing:-0.02em;} h2.display{font-size:clamp(30px,4.4vw,50px);} h3.display{font-size:clamp(22px,2.6vw,30px);} p.lead{font-size:17px;font-weight:300;line-height:1.9;color:var(--body);} /* Buttons */ .btn{display:inline-block;font-size:12px;font-weight:600;letter-spacing:1.2px;text-transform:uppercase; color:#fff;background:var(--clay);padding:15px 34px;border-radius:50px;border:none;text-decoration:none;cursor:pointer; box-shadow:0 2px 10px rgba(176,119,79,.18);transition:background .25s,transform .25s,box-shadow .25s;} .btn:hover{background:var(--clay-dark);transform:translateY(-2px);box-shadow:0 6px 18px rgba(176,119,79,.24);} .btn-cream{background:var(--cream);color:var(--text);} .btn-cream:hover{background:#fff;} .btn-dark{background:var(--dark);color:#fff;} .btn-dark:hover{background:#3a2f22;} .link-caps{font-size:11px;font-weight:700;letter-spacing:1.5px;text-transform:uppercase;color:var(--clay-dark);text-decoration:none;} .link-caps:hover{color:var(--text);} /* Images */ .rounded img{border-radius:16px;} .arch img{border-radius:190px 190px 16px 16px;} /* Legacy: old saturated divider rules are retired brand-wide */ .divider{display:none;} /* Nav */ #nav{position:fixed;top:0;left:0;right:0;z-index:100;padding:22px 0;transition:background .35s,box-shadow .35s;} #nav.scrolled{background:var(--bg);box-shadow:0 1px 0 var(--line);padding:14px 0;} .nav-inner{max-width:1080px;margin:0 auto;padding:0 32px;display:flex;align-items:center;justify-content:space-between;} .nav-link{font-size:11px;font-weight:600;letter-spacing:1.5px;text-transform:uppercase;text-decoration:none;color:var(--text);opacity:.75;transition:opacity .2s,color .2s;} .nav-link:hover{opacity:1;color:var(--clay-dark);} .nav-dropdown{position:relative;display:flex;align-items:center;} .nav-dropdown-toggle{cursor:default;} .nav-dropdown-toggle::after{content:' ▾';font-size:9px;opacity:.6;} .nav-dropdown-menu{display:none;position:absolute;top:100%;left:50%;transform:translateX(-50%);background:var(--white);border:1px solid var(--line);border-radius:14px;padding:8px;min-width:210px;box-shadow:0 12px 40px rgba(42,33,23,.12);z-index:50;} .nav-dropdown:hover .nav-dropdown-menu,.nav-dropdown:focus-within .nav-dropdown-menu{display:block;} .nav-dropdown-menu a{display:block;font-size:10px;font-weight:700;letter-spacing:1.2px;text-transform:uppercase;color:var(--muted);text-decoration:none;padding:9px 12px;border-radius:9px;white-space:nowrap;transition:color .15s,background .15s;} .nav-dropdown-menu a:hover{color:var(--text);background:var(--bg);} /* Hero (full-bleed image) */ .hero{min-height:100vh;display:flex;align-items:center;background:#d8cdbb center/cover no-repeat;position:relative;} .hero::before{content:'';position:absolute;inset:0; background: radial-gradient(ellipse 44% 42% at 70% 22%, rgba(246,241,231,.72), rgba(246,241,231,0) 72%), linear-gradient(90deg, rgba(246,241,231,.86), rgba(246,241,231,.58) 45%, rgba(246,241,231,.34) 74%, rgba(246,241,231,.24));} .hero .wide{position:relative;z-index:2;width:100%;} .hero-inner{max-width:620px;padding:120px 0 60px;} .hero h1{font-family:'Newsreader',serif;font-weight:500;font-size:clamp(44px,6vw,68px);line-height:1.02;letter-spacing:-0.02em;color:var(--text);margin:0 0 22px;} .hero h1 em{font-style:italic;font-weight:400;} .hero p{font-size:17px;line-height:1.75;color:var(--body);max-width:46ch;margin:0 0 30px;} /* Simple page header (interior pages without a photo hero) */ .page-head{padding:150px 0 40px;background:var(--cream);} .page-head h1{font-family:'Newsreader',serif;font-weight:500;font-size:clamp(38px,5vw,58px);line-height:1.05;letter-spacing:-0.02em;color:var(--text);margin:10px 0 0;} .page-head h1 em{font-style:italic;font-weight:400;} /* Section rhythm */ .sec{padding:110px 0;} .sec-sm{padding:88px 0;} .bg-cream{background:var(--cream);} .bg-bg{background:var(--bg);} .bg-panel{background:var(--panel);} .bg-sand{background:var(--sand);} .bg-white{background:var(--white);} /* Integration (two arch images) */ .integration-grid{display:grid;grid-template-columns:1fr 1fr;gap:56px;align-items:start;margin-top:8px;} .integ-item .imgwrap{overflow:hidden;} .integ-item img{width:100%;height:420px;object-fit:cover;display:block;} .integ-item.push{margin-top:80px;} .integ-label{font-size:11px;font-weight:600;letter-spacing:2px;text-transform:uppercase;color:var(--muted);display:block;margin:26px 0 10px;} .integ-item h3{font-family:'Newsreader',serif;font-weight:500;font-size:24px;color:var(--text);margin-bottom:10px;} .integ-close{max-width:640px;margin:64px auto 0;text-align:center;} .integ-close p{font-family:'Newsreader',serif;font-style:italic;font-size:22px;line-height:1.5;color:var(--text);margin-bottom:28px;} /* Photo split (image + text, reusable on interior pages) */ .photo-split{display:grid;grid-template-columns:1fr 1fr;gap:56px;align-items:center;} .photo-split.reverse{direction:rtl;} .photo-split.reverse > *{direction:ltr;} .photo-split img{width:100%;height:100%;max-height:520px;object-fit:cover;border-radius:16px;display:block;} /* Band */ .band{background:var(--panel);padding:104px 0;} .band p{font-family:'Newsreader',serif;font-weight:400;font-size:clamp(23px,2.8vw,31px);line-height:1.5;color:var(--text);text-align:center;} /* Floating card panel */ .glimpse{background:var(--panel);} .glimpse-grid{display:grid;grid-template-columns:1fr 1fr;gap:56px;align-items:center;} .hd-card{background:var(--white);border-radius:20px;padding:36px 34px;box-shadow:0 16px 48px rgba(42,33,23,.09);} .hd-card .step-count{font-size:11px;letter-spacing:1.5px;text-transform:uppercase;color:var(--muted);margin-bottom:16px;} .hd-card h4{font-family:'Newsreader',serif;font-weight:500;font-size:22px;color:var(--text);margin-bottom:6px;} .hd-card .hint{font-size:14px;color:var(--muted);margin-bottom:20px;} .hd-field{width:100%;font-family:inherit;font-size:15px;color:var(--text);background:var(--bg);border:1px solid var(--line);border-radius:12px;padding:14px 16px;margin-bottom:18px;} /* Offerings / numbered list */ .offerings-list{max-width:820px;margin:0 auto;} .offer{display:flex;gap:24px;align-items:flex-start;padding:26px 0;border-top:1px solid var(--line);text-decoration:none;} .offerings-list .offer:last-child{border-bottom:1px solid var(--line);} .offer-num{font-family:'Newsreader',serif;font-style:italic;font-weight:400;font-size:42px;line-height:1;color:var(--clay);flex-shrink:0;min-width:60px;} .offer h3{font-family:'Newsreader',serif;font-weight:500;font-size:22px;color:var(--text);margin-bottom:6px;} .offer p{font-size:14px;font-weight:300;line-height:1.8;color:var(--body);margin-bottom:8px;} /* Reflections / quotes */ .quotes{max-width:760px;margin:0 auto;display:grid;gap:22px;} .quote{display:flex;gap:22px;align-items:center;background:var(--white);border-radius:16px;padding:26px 28px;box-shadow:0 6px 22px rgba(42,33,23,.05);} .quote img{width:84px;height:84px;border-radius:50%;object-fit:cover;flex-shrink:0;} .quote q{font-family:'Newsreader',serif;font-style:italic;font-size:17px;line-height:1.55;color:var(--text);display:block;margin-bottom:10px;quotes:none;} .quote cite{font-size:11px;font-weight:700;letter-spacing:1px;text-transform:uppercase;color:var(--muted);font-style:normal;} /* Booking */ .booking-card{max-width:820px;margin:40px auto 0;background:var(--white);border-radius:20px;padding:20px;box-shadow:0 16px 48px rgba(42,33,23,.09);} #cal-inline{width:100%;min-height:520px;border-radius:14px;overflow:auto;} .booking-fallback{text-align:center;padding:28px 16px;} /* FAQ / accordion-style Q&A */ .faq-item{border-top:1px solid var(--line);padding:28px 0;} .faq-item:last-child{border-bottom:1px solid var(--line);} .faq-item h3{font-family:'Newsreader',serif;font-weight:500;font-size:21px;color:var(--text);margin-bottom:10px;} .faq-item p{font-size:15px;font-weight:300;line-height:1.85;color:var(--body);} /* Prose (article body) */ .prose{max-width:720px;margin:0 auto;} .prose h2{font-family:'Newsreader',serif;font-weight:500;font-size:clamp(26px,3.4vw,36px);line-height:1.15;letter-spacing:-0.01em;color:var(--text);margin:48px 0 16px;} .prose h2 em{font-style:italic;font-weight:400;} .prose h3{font-family:'Newsreader',serif;font-weight:500;font-size:22px;color:var(--text);margin:32px 0 12px;} .prose p{font-size:16px;font-weight:300;line-height:1.85;color:var(--body);margin-bottom:18px;} .prose a{color:var(--clay-dark);text-decoration:underline;text-underline-offset:3px;} .prose ul,.prose ol{margin:0 0 18px 22px;} .prose li{font-size:16px;font-weight:300;line-height:1.8;color:var(--body);margin-bottom:8px;} .prose strong{font-weight:600;color:var(--text);} /* Final exhale (closing clay block) */ .exhale{background:var(--clay-deep);padding:130px 0;text-align:center;} .exhale .eyebrow{color:rgba(255,255,255,.6);} .exhale h2{font-family:'Newsreader',serif;font-weight:400;font-style:italic;font-size:clamp(30px,4.2vw,46px);line-height:1.25;color:var(--cream);max-width:16ch;margin:0 auto 30px;} /* Footer */ .site-footer{background:var(--clay-deep);padding:40px 0;border-top:1px solid rgba(255,255,255,.16);} .footer-inner{max-width:1080px;margin:0 auto;padding:0 32px;display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:18px;} .footer-links{display:flex;gap:24px;flex-wrap:wrap;} .footer-link{font-size:12px;color:rgba(255,255,255,.7);text-decoration:none;transition:color .2s;} .footer-link:hover{color:#fff;} .footer-copy{font-size:11px;color:rgba(255,255,255,.5);} /* Reveal */ .reveal{opacity:0;transform:translateY(20px);transition:opacity .8s cubic-bezier(.16,1,.3,1),transform .8s cubic-bezier(.16,1,.3,1);} .reveal.visible{opacity:1;transform:translateY(0);} .d1{transition-delay:.1s;}.d2{transition-delay:.2s;}.d3{transition-delay:.3s;} /* Mobile nav */ #ham{background:none;border:none;cursor:pointer;padding:8px;display:none;flex-direction:column;gap:5px;} #ham span{display:block;width:22px;height:2px;background:var(--text);opacity:.7;} #mobile-nav{display:none;background:var(--bg);padding:16px 32px 24px;border-top:1px solid var(--line);} #mobile-nav.open{display:block;} #mobile-nav a{display:block;font-size:14px;letter-spacing:.4px;color:var(--text);text-decoration:none;padding:12px 0;border-bottom:1px solid var(--line);} @media (max-width:860px){ .desktop-nav{display:none!important;} #ham{display:flex!important;} .integration-grid,.glimpse-grid,.photo-split{grid-template-columns:1fr;gap:32px;} .photo-split.reverse{direction:ltr;} .integ-item.push{margin-top:0;} .integ-item img{height:360px;} .quote{flex-direction:column;align-items:flex-start;text-align:left;} } @media (max-width:600px){ .wide,.narrow{padding:0 20px;} .sec{padding:80px 0;} .hero-inner{padding:110px 0 50px;} .page-head{padding:120px 0 32px;} }