/* ========================================================================== Altus Aesthetics — med spa demo · Altus Digital Plain CSS, no build step. Espresso + cream + gold. Display: Cormorant Garamond · Body: Jost House rules shared with the other Altus demos: token block up top, .rv scroll reveals, overflow-x clip on , AA contrast throughout. Reduced motion uses transition:none (not a ~0s duration — that can leave a property pinned at its start value and silently break the accordion). ========================================================================== */ :root{ /* Ground */ --ink:#1F1A16; /* warm near-black */ --espresso:#2A231D; --espresso-2:#3A3129; --cream:#FBF8F4; --cream-2:#F2EBE1; --paper:#FFFFFF; /* Accent — warm gold */ --gold:#A87F4C; /* DECORATIVE ONLY — 3.42:1 on cream, fine for rules, icons and borders, fails for text */ --gold-text:#856035; /* small text on any light ground: 5.33 cream, 4.77 cream-2, 4.91 tint, 5.64 paper */ --gold-deep:#70502C; /* hover / pressed */ --gold-light:#D6B586; /* small text on espresso (7.97:1) */ --blush:#E9D7CC; --gold-tint:#F6EEE3; /* Text */ --text:#241E19; --body:#4C443C; --muted:#665C52; /* AA on cream and cream-2 */ --on-dark:#F0EAE3; --on-dark-dim:#BCB0A3; /* AA on espresso */ /* Type */ --f-display:"Cormorant Garamond",Georgia,"Times New Roman",serif; --f-body:"Jost","Segoe UI",system-ui,sans-serif; /* Space */ --s1:.25rem; --s2:.5rem; --s3:.75rem; --s4:1rem; --s5:1.5rem; --s6:2rem; --s7:2.75rem;--s8:3.5rem; --s9:5.5rem;--s10:8rem; --wrap:1220px; --wrap-narrow:840px; --r:2px; --r-lg:3px; --r-pill:999px; /* near-square: reads couture, not app */ --line:#E4DACE; --line-dark:rgba(255,255,255,.14); --sh:0 1px 2px rgba(31,26,22,.04), 0 10px 30px -14px rgba(31,26,22,.18); --sh-2:0 30px 60px -28px rgba(31,26,22,.42); --ease:cubic-bezier(.4,0,.2,1); } /* ---------- Reset ---------- */ *,*::before,*::after{ box-sizing:border-box; } html{ -webkit-text-size-adjust:100%; scroll-behavior:smooth; overflow-x:clip; } [id]{ scroll-margin-top:92px; } body{ margin:0; background:var(--cream); color:var(--body); font-family:var(--f-body); font-size:16px; font-weight:300; line-height:1.7; -webkit-font-smoothing:antialiased; overflow-x:hidden; } img,svg,picture{ display:block; max-width:100%; } img{ height:auto; } a{ color:inherit; text-decoration:none; } ul{ margin:0; padding:0; list-style:none; } p{ margin:0; } button{ font:inherit; color:inherit; background:none; border:0; cursor:pointer; } input,select,textarea,button{ font-family:inherit; font-size:inherit; } h1,h2,h3,h4{ margin:0; font-family:var(--f-display); color:var(--text); font-weight:500; line-height:1.06; letter-spacing:-.012em; } :focus-visible{ outline:2px solid var(--gold); outline-offset:4px; } @media (prefers-reduced-motion:reduce){ html{ scroll-behavior:auto; } *,*::before,*::after{ animation:none!important; transition:none!important; } } .wrap{ width:100%; max-width:var(--wrap); margin:0 auto; padding:0 var(--s5); } .wrap-narrow{ max-width:var(--wrap-narrow); } .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; } .skip{ position:absolute; left:1rem; top:-4rem; z-index:200; background:var(--espresso); color:#fff; padding:.7rem 1.1rem; font-size:.9rem; transition:top .2s var(--ease); } .skip:focus{ top:1rem; } /* ---------- Scroll reveal ---------- */ /* Fail-safe: only hide reveal blocks once the script has actually run and stamped . If assets/js/main.js is missing or blocked, nothing is hidden and the page still reads — a missing JS file used to leave the whole page blank at opacity:0. */ .js .rv{ opacity:0; transform:translateY(20px); transition:opacity .8s var(--ease), transform .8s var(--ease); } .js .rv.in{ opacity:1; transform:none; } .js .rv[data-d="1"]{ transition-delay:.1s; } .js .rv[data-d="2"]{ transition-delay:.2s; } .js .rv[data-d="3"]{ transition-delay:.3s; } .js .rv[data-d="4"]{ transition-delay:.4s; } .js .rv[data-d="5"]{ transition-delay:.5s; } @media (prefers-reduced-motion:reduce){ .rv{ opacity:1; transform:none; } } /* ---------- Buttons ---------- */ .btn{ display:inline-flex; align-items:center; justify-content:center; gap:.6rem; min-height:54px; padding:.95rem 2rem; font-family:var(--f-body); font-size:.82rem; font-weight:500; letter-spacing:.14em; text-transform:uppercase; border:1px solid transparent; text-align:center; transition:background .25s var(--ease), color .25s var(--ease), border-color .25s var(--ease); } .btn svg{ width:15px; height:15px; fill:currentColor; flex:none; } .btn--gold{ background:var(--gold-text); color:#fff; border-color:var(--gold-text); } .btn--gold:hover{ background:var(--gold-deep); border-color:var(--gold-deep); } .btn--dark{ background:var(--espresso); color:#fff; border-color:var(--espresso); } .btn--dark:hover{ background:var(--ink); border-color:var(--ink); } .btn--line{ background:transparent; color:var(--text); border-color:var(--text); } .btn--line:hover{ background:var(--text); color:var(--cream); } .btn--light{ background:transparent; color:#fff; border-color:rgba(255,255,255,.6); } .btn--light:hover{ background:#fff; color:var(--espresso); border-color:#fff; } .btn--block{ width:100%; } .btns{ display:flex; flex-wrap:wrap; gap:var(--s3); margin-top:var(--s7); } /* ---------- Eyebrow / section head ---------- */ .eyebrow{ display:block; font-family:var(--f-body); font-size:.7rem; font-weight:500; letter-spacing:.28em; text-transform:uppercase; color:var(--gold-text); } .sec-head{ max-width:640px; margin-bottom:var(--s8); } .sec-head.center{ margin-left:auto; margin-right:auto; text-align:center; } .sec-head h2{ margin-top:var(--s4); font-size:clamp(2.2rem,5vw,3.6rem); } .sec-head p{ margin-top:var(--s5); font-size:1.02rem; color:var(--muted); } .rule{ width:44px; height:1px; background:var(--gold); margin:var(--s5) 0 0; } .sec-head.center .rule{ margin-left:auto; margin-right:auto; } /* ---------- Sections ---------- */ .sec{ padding:var(--s10) 0; } .sec--sm{ padding:var(--s9) 0; } .sec--cream2{ background:var(--cream-2); } .sec--dark{ background:var(--espresso); color:var(--on-dark); } .sec--dark h2,.sec--dark h3,.sec--dark h4{ color:#fff; } .sec--dark .sec-head p{ color:var(--on-dark-dim); } .sec--dark .eyebrow{ color:var(--gold-light); } .sec--dark .rule{ background:var(--gold-light); } /* ========================================================================== HEADER ========================================================================== */ .hdr{ position:sticky; top:0; z-index:100; background:rgba(251,248,244,.92); backdrop-filter:saturate(180%) blur(14px); -webkit-backdrop-filter:saturate(180%) blur(14px); border-bottom:1px solid var(--line); } .hdr-bar{ display:flex; align-items:center; justify-content:space-between; gap:var(--s5); height:84px; } .brand{ flex:none; text-align:left; } .brand b{ display:block; font-family:var(--f-display); font-weight:600; font-size:1.5rem; letter-spacing:.02em; color:var(--text); line-height:1; } .brand b em{ font-style:italic; color:var(--gold); } .brand i{ display:block; font-style:normal; font-size:.56rem; letter-spacing:.3em; text-transform:uppercase; color:var(--muted); font-weight:400; margin-top:6px; } .nav{ display:flex; align-items:center; gap:var(--s7); } .nav a{ font-size:.78rem; font-weight:400; letter-spacing:.16em; text-transform:uppercase; color:var(--body); white-space:nowrap; transition:color .2s var(--ease); } .nav a:hover,.nav a[aria-current="page"]{ color:var(--gold-text); } .nav > .btn{ display:none; } /* drawer-only; desktop has its own CTA */ .hdr-cta{ display:flex; align-items:center; gap:var(--s5); flex:none; } .hdr-tel{ font-size:.82rem; letter-spacing:.06em; color:var(--text); white-space:nowrap; } .hdr-cta .btn{ min-height:46px; padding:.65rem 1.4rem; font-size:.72rem; } .burger{ display:none; width:46px; height:46px; border:1px solid var(--line); align-items:center; justify-content:center; } .burger span{ display:block; width:20px; height:1px; background:var(--text); position:relative; transition:.2s var(--ease); } .burger span::before,.burger span::after{ content:""; position:absolute; left:0; width:20px; height:1px; background:var(--text); transition:.2s var(--ease); } .burger span::before{ top:-6px; } .burger span::after{ top:6px; } .burger[aria-expanded="true"] span{ background:transparent; } .burger[aria-expanded="true"] span::before{ top:0; transform:rotate(45deg); } .burger[aria-expanded="true"] span::after{ top:0; transform:rotate(-45deg); } /* ========================================================================== HERO — full bleed, slow drift ========================================================================== */ .hero{ position:relative; min-height:min(88vh,820px); display:flex; align-items:flex-end; overflow:hidden; background:var(--espresso); } .hero-img{ position:absolute; inset:0; } .hero-img img{ width:100%; height:100%; object-fit:cover; animation:drift 26s var(--ease) infinite alternate; } /* gentle — a bigger scale magnified the crop until the subject read as blur */ @keyframes drift{ from{ transform:scale(1.02) translate3d(0,0,0);} to{ transform:scale(1.06) translate3d(-1%,-.6%,0);} } .hero-img::after{ content:""; position:absolute; inset:0; background:linear-gradient(180deg, rgba(31,26,22,.62) 0%, rgba(31,26,22,.30) 34%, rgba(31,26,22,.86) 100%); } .hero-in{ position:relative; width:100%; padding:var(--s10) 0 var(--s9); } .hero h1{ margin-top:var(--s5); color:#fff; max-width:16ch; font-size:clamp(3rem,8vw,6rem); line-height:.98; letter-spacing:-.02em; font-weight:400; } .hero h1 em{ font-style:italic; color:var(--gold-light); } .hero .eyebrow{ color:var(--gold-light); } .hero-lede{ margin-top:var(--s5); font-size:1.06rem; color:#E7E0D8; max-width:44ch; } .hero-note{ margin-top:var(--s6); padding-top:var(--s5); border-top:1px solid var(--line-dark); display:flex; flex-wrap:wrap; gap:var(--s6); font-size:.74rem; letter-spacing:.2em; text-transform:uppercase; color:#DCD3C9; } /* page hero */ .phero{ position:relative; background:var(--espresso); color:var(--on-dark); padding:var(--s9) 0 var(--s8); overflow:hidden; } .phero-bg{ position:absolute; inset:0; } .phero-bg img{ width:100%; height:100%; object-fit:cover; } .phero-bg::after{ content:""; position:absolute; inset:0; background:linear-gradient(180deg,rgba(31,26,22,.72),rgba(31,26,22,.90)); } .phero-in{ position:relative; max-width:700px; } .phero h1{ margin-top:var(--s4); color:#fff; font-size:clamp(2.4rem,6vw,4rem); font-weight:400; } .phero p{ margin-top:var(--s5); color:#E7E0D8; font-size:1.02rem; max-width:52ch; } .phero .eyebrow{ color:var(--gold-light); } .crumbs{ font-size:.72rem; letter-spacing:.18em; text-transform:uppercase; color:var(--on-dark-dim); margin-bottom:var(--s4); } .crumbs a:hover{ color:#fff; } /* ========================================================================== MARQUEE STRIP ========================================================================== */ .strip{ background:var(--ink); color:var(--on-dark); padding:var(--s5) 0; } .strip-grid{ display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:var(--s5); text-align:center; } .strip-item{ font-size:.72rem; letter-spacing:.2em; text-transform:uppercase; color:#E0D8CE; } .strip-item b{ display:block; font-family:var(--f-display); font-size:1.7rem; font-weight:500; letter-spacing:0; text-transform:none; color:var(--gold-light); margin-bottom:.3rem; } /* ========================================================================== TREATMENT CARDS — 4:5 editorial ========================================================================== */ .grid{ display:grid; gap:var(--s5); } .grid-2{ grid-template-columns:repeat(2,minmax(0,1fr)); } .grid-3{ grid-template-columns:repeat(3,minmax(0,1fr)); } .grid-4{ grid-template-columns:repeat(4,minmax(0,1fr)); } .tx{ position:relative; display:block; overflow:hidden; background:var(--espresso); } .tx-img{ aspect-ratio:4/5; overflow:hidden; } .tx-img img{ width:100%; height:100%; object-fit:cover; transition:transform .9s var(--ease), opacity .4s var(--ease); } .tx:hover .tx-img img{ transform:scale(1.06); } .tx-body{ position:absolute; left:0; right:0; bottom:0; padding:var(--s8) var(--s5) var(--s5); background:linear-gradient(transparent, rgba(31,26,22,.90) 62%); color:#fff; } .tx-body h3{ color:#fff; font-size:1.6rem; font-weight:500; } .tx-body p{ margin-top:.35rem; font-size:.86rem; color:#DFD7CD; } .tx-price{ margin-top:var(--s3); display:inline-block; font-size:.72rem; letter-spacing:.18em; text-transform:uppercase; color:var(--gold-light); } .tx-go{ margin-top:var(--s4); display:inline-flex; align-items:center; gap:.5rem; font-size:.7rem; letter-spacing:.2em; text-transform:uppercase; color:#fff; border-bottom:1px solid rgba(255,255,255,.45); padding-bottom:.3rem; transition:border-color .25s var(--ease); } .tx:hover .tx-go{ border-color:var(--gold-light); } /* ========================================================================== SPLIT ========================================================================== */ .split{ display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:var(--s9); align-items:center; } .split--offset{ grid-template-columns:1.05fr .95fr; } .split-media img{ width:100%; } .split h2{ margin-top:var(--s4); font-size:clamp(2rem,4.2vw,3.1rem); } .split .lede{ margin-top:var(--s5); font-size:1.02rem; color:var(--muted); } .sec--dark .split .lede{ color:var(--on-dark-dim); } .marks{ margin-top:var(--s7); display:flex; flex-direction:column; } .marks li{ display:flex; gap:var(--s4); padding:var(--s4) 0; border-top:1px solid var(--line); } .marks li:last-child{ border-bottom:1px solid var(--line); } .marks .n{ font-family:var(--f-display); font-size:1.05rem; color:var(--gold-text); flex:none; width:2rem; } .marks b{ display:block; font-family:var(--f-display); font-size:1.28rem; font-weight:500; color:var(--text); } .marks span{ display:block; margin-top:.2rem; font-size:.92rem; color:var(--muted); } .sec--dark .marks li{ border-color:var(--line-dark); } .sec--dark .marks b{ color:#fff; } .sec--dark .marks span{ color:var(--on-dark-dim); } .sec--dark .marks .n{ color:var(--gold-light); } /* ========================================================================== THE SPACE — asymmetric trio ========================================================================== */ .space-grid{ display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:var(--s5); align-items:end; } .space-grid figure{ margin:0; } .space-grid img{ width:100%; } .space-grid figcaption{ margin-top:var(--s3); font-size:.72rem; letter-spacing:.2em; text-transform:uppercase; color:var(--muted); } .space-grid figure:nth-child(2){ transform:translateY(var(--s7)); } /* ========================================================================== MEMBERSHIP BAND ========================================================================== */ .member{ position:relative; overflow:hidden; background:var(--espresso); color:var(--on-dark); } .member-bg{ position:absolute; inset:0; } .member-bg img{ width:100%; height:100%; object-fit:cover; } .member-bg::after{ content:""; position:absolute; inset:0; background:linear-gradient(100deg,rgba(31,26,22,.95),rgba(31,26,22,.72)); } .member-in{ position:relative; padding:var(--s10) 0; max-width:620px; } .member h2{ color:#fff; margin-top:var(--s4); font-size:clamp(2.1rem,4.6vw,3.3rem); } .member .lede{ margin-top:var(--s5); color:#E4DCD3; font-size:1.02rem; } .member .eyebrow{ color:var(--gold-light); } .member-tiers{ margin-top:var(--s7); display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:var(--s4); } .member-tier{ border:1px solid var(--line-dark); padding:var(--s5); } .member-tier b{ display:block; font-family:var(--f-display); font-size:1.5rem; font-weight:500; color:#fff; } .member-tier .amt{ display:block; margin-top:.35rem; font-size:.74rem; letter-spacing:.18em; text-transform:uppercase; color:var(--gold-light); } .member-tier span{ display:block; margin-top:var(--s3); font-size:.88rem; color:var(--on-dark-dim); } /* ========================================================================== FACES / VOICES ========================================================================== */ .faces{ display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:var(--s4); } .faces figure{ margin:0; overflow:hidden; } .faces img{ width:100%; transition:transform .9s var(--ease); } .faces figure:hover img{ transform:scale(1.05); } .voices{ display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:var(--s5); margin-top:var(--s8); } .voice{ border-top:1px solid var(--line); padding-top:var(--s5); } .sec--dark .voice{ border-color:var(--line-dark); } .voice blockquote{ margin:0; font-family:var(--f-display); font-size:1.32rem; line-height:1.36; color:var(--text); font-weight:500; } .sec--dark .voice blockquote{ color:#fff; } .voice footer{ margin-top:var(--s4); font-size:.72rem; letter-spacing:.2em; text-transform:uppercase; color:var(--muted); } .sec--dark .voice footer{ color:var(--on-dark-dim); } .stars{ display:flex; gap:3px; margin-bottom:var(--s4); } .stars svg{ width:13px; height:13px; fill:var(--gold-text); } .sec--dark .stars svg{ fill:var(--gold-light); } /* ========================================================================== STEPS ========================================================================== */ .steps{ display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:var(--s7); } .step .n{ font-family:var(--f-display); font-size:3rem; font-weight:400; color:var(--gold-text); line-height:1; display:block; } .sec--dark .step .n{ color:var(--gold-light); } .step h3{ margin-top:var(--s4); font-size:1.42rem; } .step p{ margin-top:var(--s3); font-size:.94rem; color:var(--muted); } .sec--dark .step p{ color:var(--on-dark-dim); } /* ========================================================================== PRICE LIST (treatments page) ========================================================================== */ .menu{ border-top:1px solid var(--line); } .menu-row{ display:grid; grid-template-columns:1fr auto; gap:var(--s5); align-items:baseline; padding:var(--s5) 0; border-bottom:1px solid var(--line); } .menu-row h3{ font-size:1.42rem; } .menu-row p{ margin-top:.3rem; font-size:.92rem; color:var(--muted); max-width:56ch; } .menu-price{ font-family:var(--f-display); font-size:1.32rem; color:var(--gold-text); white-space:nowrap; } .menu-note{ margin-top:var(--s6); font-size:.84rem; color:var(--muted); } /* ========================================================================== FORM ========================================================================== */ .form-card{ background:var(--paper); border:1px solid var(--line); padding:var(--s8); } .field{ margin-bottom:var(--s5); } .field label{ display:block; font-size:.7rem; font-weight:500; letter-spacing:.18em; text-transform:uppercase; color:var(--text); margin-bottom:.55rem; } .field .req{ color:var(--gold-text); } .field input,.field select,.field textarea{ width:100%; padding:.9rem 1rem; min-height:52px; border:1px solid var(--line); background:var(--cream); color:var(--text); font-weight:300; transition:border-color .2s var(--ease), background .2s var(--ease); } .field textarea{ min-height:130px; resize:vertical; } .field input:focus,.field select:focus,.field textarea:focus{ outline:none; border-color:var(--gold); background:var(--paper); } .field .err{ display:none; margin-top:.4rem; font-size:.8rem; color:#96341F; } .field.bad input,.field.bad select,.field.bad textarea{ border-color:#96341F; } .field.bad .err{ display:block; } .form-row{ display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:var(--s5); } .form-note{ margin-top:var(--s5); font-size:.8rem; color:var(--muted); } .form-ok{ display:none; padding:var(--s8); background:var(--gold-tint); border:1px solid var(--blush); } .form-ok.on{ display:block; } .form-ok b{ display:block; font-family:var(--f-display); font-size:1.7rem; font-weight:500; color:var(--text); margin-bottom:var(--s3); } .chips{ display:flex; flex-wrap:wrap; gap:.5rem; } .chips input{ position:absolute; opacity:0; width:1px; height:1px; } .chips label{ display:inline-flex; align-items:center; min-height:44px; padding:.6rem 1.1rem; margin:0; border:1px solid var(--line); cursor:pointer; background:var(--cream); font-size:.76rem; letter-spacing:.1em; text-transform:uppercase; color:var(--body); transition:.2s var(--ease); } .chips label:hover{ border-color:var(--gold); color:var(--gold-text); } .chips input:checked + label{ background:var(--espresso); border-color:var(--espresso); color:#fff; } .chips input:focus-visible + label{ outline:2px solid var(--gold); outline-offset:2px; } /* ========================================================================== FAQ ========================================================================== */ .faq{ max-width:var(--wrap-narrow); margin:0 auto; border-top:1px solid var(--line); } .faq-item{ border-bottom:1px solid var(--line); } .faq-q{ width:100%; display:flex; align-items:center; justify-content:space-between; gap:var(--s5); padding:var(--s5) 0; text-align:left; font-family:var(--f-display); font-weight:500; font-size:1.32rem; color:var(--text); } .faq-ico{ width:20px; height:20px; flex:none; position:relative; } .faq-ico::before,.faq-ico::after{ content:""; position:absolute; top:50%; left:50%; transform:translate(-50%,-50%); background:var(--gold); transition:transform .25s var(--ease), opacity .25s var(--ease); } .faq-ico::before{ width:13px; height:1px; } .faq-ico::after{ width:1px; height:13px; } .faq-q[aria-expanded="true"] .faq-ico::after{ transform:translate(-50%,-50%) rotate(90deg); opacity:0; } .faq-a{ overflow:hidden; max-height:0; transition:max-height .38s var(--ease); } .faq-q[aria-expanded="true"] + .faq-a{ max-height:30rem; } .faq-a p{ padding-bottom:var(--s5); font-size:.96rem; color:var(--muted); max-width:66ch; } /* ========================================================================== CTA + FOOTER + MOBILE BAR ========================================================================== */ .cta{ background:var(--cream-2); padding:var(--s10) 0; text-align:center; } .cta h2{ font-size:clamp(2.2rem,5vw,3.6rem); max-width:18ch; margin:0 auto; } .cta p{ margin:var(--s5) auto 0; max-width:46ch; color:var(--muted); font-size:1.02rem; } .cta .btns{ justify-content:center; } .ftr{ background:var(--ink); color:var(--on-dark-dim); padding:var(--s9) 0 var(--s6); } .ftr-grid{ display:grid; grid-template-columns:1.6fr 1fr 1fr 1fr; gap:var(--s7); } .ftr .brand b{ color:#fff; } .ftr .brand i{ color:var(--on-dark-dim); } .ftr-blurb{ margin-top:var(--s5); font-size:.9rem; max-width:32ch; } .ftr h4{ font-family:var(--f-body); font-size:.68rem; font-weight:500; letter-spacing:.24em; text-transform:uppercase; color:#fff; margin-bottom:var(--s5); } .ftr-col{ display:flex; flex-direction:column; gap:.85rem; font-size:.92rem; } .ftr-col a:hover{ color:#fff; } .ftr-btm{ margin-top:var(--s8); padding-top:var(--s5); border-top:1px solid var(--line-dark); display:flex; flex-wrap:wrap; gap:var(--s4); justify-content:space-between; font-size:.8rem; } .demo-note{ color:#A79B8D; max-width:74ch; line-height:1.6; } .demo-note b{ color:#D6CCC0; } .demo-note a{ text-decoration:underline; } .mbar{ display:none; } /* ========================================================================== RESPONSIVE ========================================================================== */ @media (max-width:1080px){ .split,.split--offset{ grid-template-columns:minmax(0,1fr); gap:var(--s7); } .faces{ grid-template-columns:repeat(2,minmax(0,1fr)); } .ftr-grid{ grid-template-columns:1fr 1fr; gap:var(--s6); } .ftr-brand{ grid-column:1 / -1; } .member-in{ max-width:none; } } @media (max-width:900px){ .nav,.hdr-cta .btn,.hdr-tel{ display:none; } .burger{ display:flex; } .nav{ position:absolute; left:0; right:0; top:84px; flex-direction:column; align-items:stretch; gap:0; background:var(--cream); border-bottom:1px solid var(--line); padding:var(--s4) var(--s5) var(--s6); box-shadow:var(--sh-2); } .nav.open{ display:flex; } .nav a{ padding:1rem 0; border-bottom:1px solid var(--line); font-size:.86rem; } .nav > .btn{ display:inline-flex; margin-top:var(--s5); width:100%; border-bottom:0; } .grid-3,.grid-4,.steps,.voices,.space-grid{ grid-template-columns:repeat(2,minmax(0,1fr)); } .space-grid figure:nth-child(2){ transform:none; } .sec{ padding:var(--s9) 0; } .strip-grid{ grid-template-columns:repeat(2,minmax(0,1fr)); gap:var(--s6); } } @media (max-width:640px){ .wrap{ padding:0 var(--s4); } .grid-2,.grid-3,.grid-4,.steps,.voices,.space-grid,.faces, .member-tiers,.form-row{ grid-template-columns:minmax(0,1fr); } .strip-grid{ grid-template-columns:repeat(2,minmax(0,1fr)); gap:var(--s5); } .btns{ flex-direction:column; align-items:stretch; } .btns .btn{ width:100%; } .sec{ padding:var(--s8) 0; } .sec-head{ margin-bottom:var(--s7); } .form-card{ padding:var(--s5); } .hero{ min-height:auto; } .hero-in{ padding:var(--s9) 0 var(--s8); } .hero-note{ gap:var(--s4); flex-direction:column; } .menu-row{ grid-template-columns:minmax(0,1fr); gap:var(--s2); } body{ padding-bottom:70px; } .mbar{ display:grid; grid-template-columns:1fr 1fr; position:fixed; left:0; right:0; bottom:0; z-index:120; background:var(--espresso); border-top:1px solid var(--line-dark); } .mbar a{ display:flex; align-items:center; justify-content:center; gap:.5rem; min-height:62px; font-size:.72rem; letter-spacing:.18em; text-transform:uppercase; color:#fff; } .mbar a + a{ background:var(--gold-text); } .mbar svg{ width:15px; height:15px; fill:currentColor; } } @media (max-width:380px){ .strip-grid{ grid-template-columns:minmax(0,1fr); } .hero h1{ font-size:2.6rem; } }