/* ---- Brand webfonts (self-hosted). TODO: add licensed .woff2 files to assets/fonts/. Until then, --font-display falls back to Cormorant Garamond (loaded in ). ---- */ @font-face { font-family: 'Black Mango'; src: url('../assets/fonts/BlackMango-Regular.woff2') format('woff2'); font-weight: 400; font-style: normal; font-display: swap; } @font-face { font-family: 'Body Grotesque Large'; src: url('../assets/fonts/BodyGrotesqueLarge-Regular.woff2') format('woff2'); font-weight: 400; font-style: normal; font-display: swap; } /* ---- Design tokens ---- */ :root { --ssh-ocean: #1E2A2C; /* dark water — primary text + dark sections */ --ssh-gold: #B8893F; /* caustic gold accent (from the hero) — hairlines, rules, gauges, selection only */ --ssh-gold-text: #856630; /* AA text gold: 4.73:1 on cream, 5.11:1 on paper */ --ssh-slate: #64707D; /* brand UI: nav, buttons, announce bar */ --ssh-slate-dark: #4F5A66; --ssh-cream: #F5F1EA; /* accent sections only, never full-page */ --ssh-cedar: #3C4A3F; --ssh-paper: #FBFAF7; /* page base (warmer than white, not a cream wash) */ --ssh-white: #FFFFFF; --ssh-ink: var(--ssh-ocean); --font-display: 'Black Mango', 'Cormorant Garamond', Georgia, serif; --font-body: 'Montserrat', system-ui, -apple-system, sans-serif; --font-accent: 'Body Grotesque Large', 'Montserrat', sans-serif; --maxw: 1200px; --gutter: clamp(1rem, 4vw, 3rem); --radius: 0; /* luxury: square corners everywhere */ --hairline: 1px solid rgba(30,42,44,.12); } /* ---- Reset ---- */ *, *::before, *::after { box-sizing: border-box; } html { scroll-behavior: smooth; } body { margin: 0; font-family: var(--font-body); font-weight: 300; font-size: 15px; color: var(--ssh-ink); background: var(--ssh-paper); line-height: 1.8; /* luxury: air inside the text, not just around it */ -webkit-font-smoothing: antialiased; font-feature-settings: "tnum"; /* tabular figures so menu prices align */ } ::selection { background: var(--ssh-gold); color: var(--ssh-paper); } img { max-width: 100%; display: block; height: auto; filter: sepia(.08) saturate(.85) contrast(.98); } /* one warm grade unifies all photography */ a { color: inherit; } h1, h2, h3 { font-family: var(--font-display); font-weight: 500; line-height: 1.1; margin: 0 0 .5em; } p { max-width: 62ch; } /* ---- Layout helpers ---- */ .container { width: 100%; max-width: var(--maxw); margin-inline: auto; padding-inline: var(--gutter); } .section { padding-block: clamp(5rem, 12vw, 10rem); } /* luxury: space is the loudest signal */ .section__title { font-size: clamp(2.5rem, 6vw, 4.5rem); margin: 0; } .section__eyebrow { display: flex; align-items: center; gap: .9rem; letter-spacing: .3em; text-transform: uppercase; font-size: .7rem; font-weight: 400; color: var(--ssh-gold-text); margin: 0 0 .9rem; } .section__eyebrow::after { content: ''; width: 44px; height: 1px; background: var(--ssh-gold); } /* Asymmetric section header: eyebrow + big left title + supporting note set right */ .section-head { display: grid; grid-template-columns: minmax(0,1.2fr) minmax(0,.8fr); gap: 2rem; align-items: end; margin-bottom: clamp(2rem, 5vw, 3.5rem); } .section-head .section__eyebrow { grid-column: 1 / -1; } .section-head__note { color: #5c6668; font-size: .85rem; margin: 0; } @media (max-width: 640px) { .section-head { grid-template-columns: 1fr; align-items: start; } } /* ---- Footer: end quiet, not heavy ---- */ #site-footer { background: var(--ssh-paper); color: #6E7476; text-align: center; /* 4.55:1 on paper */ padding: 2.5rem 2rem; border-top: 1px solid rgba(184,137,63,.35); font-size: .7rem; letter-spacing: .3em; text-transform: uppercase; } @media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } *, *::before, *::after { animation-duration: .001ms !important; transition-duration: .001ms !important; } } /* Hairline whisper, not a grey slab */ .announce { background: var(--ssh-paper); color: var(--ssh-slate-dark); text-align: center; font-family: var(--font-accent); letter-spacing: .3em; text-transform: uppercase; font-size: .7rem; padding: .55rem 1rem; border-bottom: 1px solid rgba(184,137,63,.4); } #site-header { position: sticky; top: 0; z-index: 50; transition: background .3s, box-shadow .3s; } .nav { display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding-block: .9rem; background: var(--ssh-paper); border-bottom: 1px solid transparent; transition: border-color .4s; } #site-header.is-scrolled .nav { border-bottom-color: rgba(30,42,44,.12); } /* hairline, not shadow */ .nav__menu { display: flex; gap: 1.75rem; list-style: none; margin: 0; padding: 0; align-items: center; } .nav__menu a { text-decoration: none; font-size: .72rem; letter-spacing: .3em; text-transform: uppercase; color: var(--ssh-slate-dark); } .nav__menu a:not(.book-cta):hover { color: var(--ssh-gold); } /* Ghost CTA with slow sweep fill — the only filled CTA on the page is the hero's */ .book-cta { display: inline-block; background: transparent; color: var(--ssh-ink); text-decoration: none; padding: 1.05rem 2.8rem; border: 1px solid var(--ssh-ink); letter-spacing: .28em; text-transform: uppercase; font-size: .72rem; font-weight: 400; transition: background .6s cubic-bezier(.22,1,.36,1), color .6s cubic-bezier(.22,1,.36,1); } .book-cta:hover { background: var(--ssh-ink); color: var(--ssh-cream); } .book-cta--sm { padding: .6rem 1.5rem; } .nav__toggle { display: none; flex-direction: column; gap: 5px; background: none; border: 0; cursor: pointer; padding: .5rem; } .nav__toggle span { width: 26px; height: 2px; background: var(--ssh-ink); display: block; transition: transform .25s, opacity .25s; } @media (max-width: 768px) { .nav__toggle { display: flex; } .nav__menu { position: fixed; inset: 0 0 0 auto; width: min(80vw, 320px); background: var(--ssh-cream); flex-direction: column; align-items: flex-start; padding: 5rem 2rem; gap: 1.5rem; transform: translateX(100%); visibility: hidden; pointer-events: none; transition: transform .3s, visibility 0s .3s; } /* keep visible until slide-out ends */ #nav-menu.is-open { transform: translateX(0); visibility: visible; pointer-events: auto; transition: transform .3s, visibility 0s; } } .hero { position: relative; min-height: 90vh; display: grid; place-items: center; text-align: center; color: var(--ssh-white); /* TODO: hero.jpg is a placeholder — swap for the final licensed hero photo */ background: var(--ssh-slate-dark) url('../assets/img/hero.jpg') center/cover no-repeat; } .hero__overlay { position: absolute; inset: 0; background: linear-gradient(rgba(40,44,52,.35), rgba(40,44,52,.55)); } .hero__content { position: relative; z-index: 1; padding: var(--gutter); display: grid; gap: 1.25rem; justify-items: center; } .hero__monogram { filter: brightness(0) invert(1); opacity: .9; } .hero__title { font-size: clamp(3rem, 12vw, 7rem); text-transform: lowercase; letter-spacing: .02em; margin: 0; } .hero__title span { display: block; font-size: .3em; letter-spacing: .6em; text-transform: uppercase; margin-top: .5em; } .hero__tagline { font-family: var(--font-display); font-style: italic; font-size: clamp(1rem, 3vw, 1.4rem); letter-spacing: .04em; margin: 0; color: rgba(245,241,234,.78); } .hero { border-bottom: 1px solid rgba(184,137,63,.5); } /* the gold waterline */ /* The ONE filled CTA on the page — hierarchy is felt, not shouted */ .hero .book-cta { background: var(--ssh-cream); border-color: var(--ssh-cream); color: var(--ssh-ink); } .hero .book-cta:hover { background: transparent; color: var(--ssh-cream); } .about { background: var(--ssh-paper); } .about__body { max-width: 62ch; margin-block: 0 2.5rem; } .about__body p { margin: 0 0 1rem; } .services { background: var(--ssh-cream); } /* ---- Treatment menu rows ---- */ .menu-row { display: grid; grid-template-columns: 26px minmax(0,1fr) auto; gap: 0 1.25rem; padding: 1.75rem 0; border-top: 1px solid rgba(30,42,44,.12); align-items: start; } .menu-row:last-of-type { border-bottom: 1px solid rgba(30,42,44,.12); } .menu-row__name { font-family: var(--font-display); font-size: clamp(1.35rem, 3vw, 1.7rem); margin: 0; } .menu-row__incl { font-family: var(--font-display); font-style: italic; color: #5c6668; font-size: .95rem; margin: .35rem 0 0; } .menu-row__meta { display: grid; justify-items: end; gap: .15rem; } .menu-row__mins { letter-spacing: .3em; text-transform: uppercase; font-size: .7rem; color: var(--ssh-gold-text); } .menu-row__price { font-family: var(--font-display); font-size: 1.3rem; font-variant-numeric: tabular-nums; white-space: nowrap; } /* ---- Signature: the soak gauge — fill height encodes duration ---- */ .menu-gauge { position: relative; width: 2px; height: 64px; background: rgba(30,42,44,.12); margin-top: .4rem; } .menu-gauge span { position: absolute; bottom: 0; left: 0; width: 2px; height: 0; background: var(--ssh-gold); transition: height 1.1s cubic-bezier(.22,1,.36,1) .2s; } .menu-row.is-visible .menu-gauge span { height: calc(var(--soak, .3) * 100%); } @media (prefers-reduced-motion: reduce) { .menu-gauge span, .menu-row .menu-gauge span { height: calc(var(--soak, .3) * 100%); transition: none; } } /* ---- Add-ons / luxury mini-menus ---- */ .mini-menus { display: grid; grid-template-columns: 1fr 1fr; gap: 0 3rem; margin-top: 3rem; } .mini-menu__label { letter-spacing: .3em; text-transform: uppercase; font-size: .7rem; color: var(--ssh-gold-text); margin: 0 0 .6rem; } .mini-menu__row { display: flex; justify-content: space-between; gap: 1rem; align-items: baseline; padding: .6rem 0; border-top: 1px solid rgba(30,42,44,.1); font-size: .85rem; } .mini-menu__row:last-of-type { border-bottom: 1px solid rgba(30,42,44,.1); } .mini-menu__row em { font-family: var(--font-display); font-style: italic; color: #5c6668; } .mini-menu__row .menu-row__price { font-size: 1rem; } .mini-menu__note { font-family: var(--font-display); font-style: italic; color: #5c6668; font-size: .9rem; margin-top: .75rem; } .svc-cta-row { text-align: center; margin: 3rem 0 0; } @media (max-width: 640px) { .mini-menus { grid-template-columns: 1fr; gap: 2rem; } .menu-row { grid-template-columns: 18px minmax(0,1fr); } .menu-row__meta { grid-column: 2; justify-items: start; grid-auto-flow: column; gap: 1rem; margin-top: .4rem; } } .consultation { background: var(--ssh-ocean); color: var(--ssh-cream); text-align: center; } .consultation__inner { display: grid; justify-items: center; } .consultation__inner p { margin-inline: auto; } .consultation .section__title { color: var(--ssh-cream); } .consultation .section__eyebrow { justify-content: center; color: var(--ssh-gold); } /* bright gold on ocean: 4.70:1 */ .consultation .section__eyebrow::after { display: none; } .consultation__sub { font-family: var(--font-display); font-style: italic; font-size: 1.3rem; color: var(--ssh-gold); margin-top: -.25rem; } .consultation__body { max-width: 62ch; margin-block: 1.5rem 2.25rem; color: rgba(245,241,234,.72); font-size: .9rem; } .consultation__cta { display: flex; gap: 1rem; flex-wrap: wrap; justify-content: center; } /* Light ghost variant for dark sections */ .book-cta--light { border-color: var(--ssh-cream); color: var(--ssh-cream); } .book-cta--light:hover { background: var(--ssh-cream); color: var(--ssh-ocean); } .gallery { background: var(--ssh-paper); } .gallery-spread { display: grid; grid-template-columns: 7fr 5fr; gap: 1rem; } .gallery-spread__portrait { aspect-ratio: 4/5; object-fit: cover; height: 100%; } .gallery-spread__stack { display: grid; gap: 1rem; } .gallery-spread__stack img { aspect-ratio: 5/4; object-fit: cover; } .gallery-wide { margin-top: 1rem; aspect-ratio: 2/1; object-fit: cover; width: 100%; } @media (max-width: 640px) { .gallery-spread { grid-template-columns: 1fr; } } .products__inner { display: grid; justify-items: center; text-align: center; } .products__shots { display: flex; gap: 2rem; justify-content: center; margin: 1.5rem 0; flex-wrap: wrap; } .products__shots img { max-height: 320px; width: auto; } .products__claims { list-style: none; padding: 0; margin: 0 0 1.5rem; display: grid; gap: .4rem; } .products__claims li { letter-spacing: .08em; font-size: .9rem; color: var(--ssh-cedar); } .products__note { max-width: 55ch; } .faq { background: var(--ssh-cream); } .accordion { max-width: 760px; margin-inline: auto; } .accordion__item { border-bottom: 1px solid rgba(0,0,0,.15); } .accordion__trigger { width: 100%; text-align: left; background: none; border: 0; cursor: pointer; font-family: var(--font-display); font-size: 1.25rem; padding: 1.1rem 2rem 1.1rem 0; position: relative; color: var(--ssh-ink); } .accordion__trigger::after { content: '+'; position: absolute; right: .25rem; top: 50%; transform: translateY(-50%); font-size: 1.5rem; } .accordion__trigger[aria-expanded="true"]::after { content: '−'; } .accordion__panel { max-height: 0; overflow: hidden; transition: max-height .3s ease; } .accordion__panel p { margin: 0 0 1rem; } .contact { background: var(--ssh-paper); } .contact__grid { display: grid; grid-template-columns: 1fr 1fr; gap: 3rem; align-items: center; } /* Grade the default cartoon map into the palette */ .contact__map iframe { filter: grayscale(1) sepia(.15) opacity(.9); display: block; } .contact__card { padding: 0; } /* no box — the grid gap is the container */ .contact__title { font-size: clamp(1.9rem, 4vw, 2.6rem); text-align: left; } .contact__label { letter-spacing: .3em; text-transform: uppercase; font-size: .7rem; color: var(--ssh-gold-text); margin: 1.25rem 0 .1rem; } .contact address { font-style: normal; } .contact__social { list-style: none; display: flex; gap: 1.25rem; padding: 0; flex-wrap: wrap; font-size: .85rem; } .contact__vouchers { font-family: var(--font-display); font-style: italic; color: #5c6668; font-size: .95rem; margin: 1rem 0 1.75rem; } @media (max-width: 760px) { .contact__grid { grid-template-columns: 1fr; } } .policies { background: var(--ssh-paper); } /* Slow settle, not app-fast: ceremony pace. Progressive enhancement: hiding is scoped to .js (set by an inline script), so with JS disabled/blocked everything stays visible. */ .reveal { transition: opacity 1s cubic-bezier(.22,1,.36,1), transform 1s cubic-bezier(.22,1,.36,1); transition-delay: calc(var(--stagger, 0) * 80ms); } .js .reveal { opacity: 0; transform: translateY(12px); } .js .reveal.is-visible { opacity: 1; transform: none; } @media (prefers-reduced-motion: reduce) { .js .reveal { opacity: 1; transform: none; } } :focus-visible { outline: 2px solid var(--ssh-gold); outline-offset: 3px; }