/* ==========================================================================
TLC SKINCARE — style.css
Warm editorial minimalism on a dusty-blue foundation.
Tokens live in the inline critical CSS in index.html ; they are
repeated here so this file also stands alone.
========================================================================== */
:root{
--bg: #486c91; /* primary dusty blue */
--bg-alt: #eef3f8; /* pale blue wash */
--card: #ffffff;
--cream: #f7f4ec; /* warm neutral section */
--swirl: #3d5570; /* decorative line-work */
--gold: #d4af37;
--gold-deep: #b8912a;
--gold-pale: #ecd792;
/* Small gold TEXT on a light background only. The brighter golds above
sit at ~2.6:1 on pale blue and cream, which fails for 12–20px type.
This one clears 5:1. Rules, numerals-as-ornament, and large display
italic keep using --gold / --gold-deep. */
--gold-ink: #7a611a;
--teal-light:#38d0c0; /* primary action — button fills */
--teal-deep: #2aa495; /* button hover fill */
/* Teal TEXT on a light background. --teal-deep sits at 3.07:1 on white,
which fails for link-sized type — and these are the booking links, so
they are the last thing on the page that should be hard to read. */
--teal-ink: #197066;
--gray: #535656;
--ink: #0e3835; /* darkest, deep teal */
--ink-soft: #3c5b57;
--ink-blue: #1b3857; /* dark blue — footer; carried over from the
previous TLC build, where it closed the page */
--cta-blue: #30547b; /* closing CTA section, above the footer */
/* Teal links on the dark closing section. --teal-light drops to 4.05:1
on --cta-blue; this lighter teal clears 5:1 and stays the same hue. */
--teal-onbg: #5ee8d6;
--onbg-ink: #f7f4ec;
--onbg-soft: #dbe4ea;
/* Small gold TEXT on the dusty blue. Full --gold lands at 2.6:1 there,
so eyebrows and review attributions use this paler gold instead. It
still reads as gold on the deep teal sections, where it measures 10:1. */
--onbg-gold: #f5ebc4;
--line: rgba(14,56,53,0.15);
--radius: 2px;
--font-display: "Fraunces", "Georgia", serif;
--font-body: "Manrope", "Helvetica Neue", sans-serif;
--section-pad: 140px;
/* Floor is the booking button: 49px tall, which is what keeps it over the
48px tap-target minimum. 66px leaves ~8px above and below it. Going
lower means shrinking the button, which fails that minimum. */
--nav-h: 66px;
--tstrip-h: 32px; /* second fixed bar under the nav, homepage only */
}
/* --------------------------------------------------------------------------
BASE
-------------------------------------------------------------------------- */
/* Reset and base typography. These lived only in the inline critical CSS in
index.html, which meant the generated service pages — which link this file
and nothing else — had no reset, no base font, and an unstyled nav row.
They must stay HERE, near the top: a trailing `* { margin: 0 }` would
override every margin set below it. index.html keeps its inline copy for
first paint; edit the two together. */
*, *::before, *::after{ box-sizing: border-box; margin: 0; padding: 0; }
body{
font-family: var(--font-body);
font-size: 17px;
line-height: 1.65;
color: var(--ink-soft);
background: var(--bg);
-webkit-font-smoothing: antialiased;
overflow-x: hidden;
}
.nav-inner{
max-width: 1240px;
height: 100%;
margin: 0 auto;
padding: 0 32px;
display: flex;
align-items: center;
justify-content: space-between;
gap: 24px;
}
::selection{ background: var(--gold-pale); color: var(--ink); }
img, video, canvas{ max-width: 100%; display: block; }
img{ height: auto; } /* keep intrinsic proportions when width is constrained */
h1, h2, h3{
font-family: var(--font-display);
font-weight: 450;
color: var(--ink);
}
h2{
font-size: clamp(2.2rem, 5vw, 4.2rem);
line-height: 1.05;
letter-spacing: -0.01em;
font-weight: 600;
}
h3{
font-size: clamp(1.3rem, 2.2vw, 1.75rem);
line-height: 1.2;
}
p{ max-width: 62ch; }
a{ color: var(--teal-ink); }
/* Visible focus everywhere. Never removed, only replaced. */
a:focus-visible,
button:focus-visible{
outline: 2px solid var(--gold);
outline-offset: 2px;
border-radius: var(--radius);
}
.container{
max-width: 1080px;
margin: 0 auto;
padding-left: 32px;
padding-right: 32px;
}
/* Headline line-mask wrappers. Content is visible by default (no-JS safe);
script.js sets the hidden state before animating.
The padding/negative-margin pair is not decoration. `overflow: hidden` is
what makes the reveal work, but it also clips whatever falls outside the
line box — and with headline line-heights this tight, that means the tails
of y, g, q and p get sliced off. The padding gives those descenders room
inside the mask; the matching negative margin takes the space back out of
the layout, so line spacing is unchanged.
If you increase this padding, increase the yPercent values in script.js to
match (search for yPercent) — the hidden state has to start below a taller
mask, or a sliver of the next line peeks out before it animates. */
.line{
display: block;
overflow: hidden;
padding-bottom: 0.16em;
margin-bottom: -0.16em;
}
.line-inner{ display: inline-block; will-change: auto; }
/* --------------------------------------------------------------------------
FILM GRAIN — static, site-wide, barely there
-------------------------------------------------------------------------- */
body::after{
content: "";
position: fixed;
inset: 0;
z-index: 9999;
pointer-events: none;
opacity: 0.035;
mix-blend-mode: overlay;
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='240' height='240'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}
/* --------------------------------------------------------------------------
SHARED UI — eyebrows, buttons, text links
-------------------------------------------------------------------------- */
.eyebrow{
display: flex;
align-items: center;
gap: 12px;
font-weight: 700;
font-size: 12px;
letter-spacing: 0.16em;
text-transform: uppercase;
color: var(--gold-ink);
margin-bottom: 24px;
}
.eyebrow-onDark{ color: var(--onbg-gold); }
.eyebrow-rule{
display: inline-block;
width: 22px;
height: 1px;
background: currentColor;
flex: none;
}
/* Buttons carry the same treatment as the previous TLC build: uppercase,
tightly set, with a border that matches the fill. */
.btn{
display: inline-flex;
align-items: center;
justify-content: center;
gap: 8px;
min-height: 48px;
padding: 13px 26px;
font-family: var(--font-body);
font-weight: 700;
font-size: 13px;
letter-spacing: 0.03em;
text-transform: uppercase;
text-decoration: none;
border-radius: var(--radius);
border: 1px solid transparent;
cursor: pointer;
transition: background-color 0.25s ease, border-color 0.25s ease,
color 0.25s ease, transform 0.15s ease;
}
.btn:active{ transform: translateY(1px); }
.btn-primary{
background: var(--teal-light);
color: #0c2b29;
border-color: var(--teal-light);
}
.btn-primary:hover{
background: var(--teal-deep);
border-color: var(--teal-deep);
color: #0c2b29;
}
/* Cream outline — used over video, where teal-on-dark would not hold up */
.btn-outline{
background: transparent;
color: var(--cream);
border-color: rgba(247,244,236,0.6);
}
.btn-outline:hover{
background: rgba(56,208,192,0.12);
border-color: var(--cream);
}
.btn-lg{ min-height: 54px; padding: 16px 32px; font-size: 13px; }
.btn-xl{ min-height: 60px; padding: 19px 40px; font-size: 14px; }
/* Text links with a left-origin underline wipe */
.text-link{
position: relative;
display: inline-block;
font-weight: 600;
font-size: 15px;
color: var(--teal-ink);
text-decoration: none;
padding-bottom: 2px;
}
.text-link::after{
content: "";
position: absolute;
left: 0; right: 0; bottom: 0;
height: 1px;
background: currentColor;
transform: scaleX(0);
transform-origin: left center;
transition: transform 0.3s ease;
}
.text-link:hover::after,
.text-link:focus-visible::after{ transform: scaleX(1); }
/* --------------------------------------------------------------------------
1. STICKY NAVIGATION
-------------------------------------------------------------------------- */
.site-header.is-solid{ box-shadow: 0 1px 0 var(--line); }
/* Over the hero the wordmark sits on dark video, where the bright gold is
right. Once the bar turns pale, that gold drops to 2.6:1 — so the italic
half of the wordmark switches to the darker gold in the solid state. */
.is-solid .wordmark em{ color: var(--gold-ink); }
.nav-links{ display: flex; gap: 32px; margin-left: auto; }
.nav-links a{
position: relative;
font-weight: 600;
font-size: 14px;
letter-spacing: 0.02em;
text-decoration: none;
color: var(--onbg-ink);
padding: 6px 0;
transition: color 0.25s ease;
}
/* Nav links pick up the booking button's teal on hover, so the whole bar
reads as one set of actions. */
.nav-links a:hover,
.nav-links a:focus-visible{ color: var(--teal-light); }
.is-solid .nav-links a:hover,
.is-solid .nav-links a:focus-visible{ color: var(--teal-ink); }
.nav-links a::after{
content: "";
position: absolute;
left: 0; right: 0; bottom: 0;
height: 1px;
background: currentColor;
transform: scaleX(0);
transform-origin: left center;
transition: transform 0.3s ease;
}
.nav-links a:hover::after,
.nav-links a:focus-visible::after{ transform: scaleX(1); }
.is-solid .nav-links a{ color: var(--ink); }
.nav-cta{ flex: none; }
/* Hamburger — hidden on desktop */
.nav-toggle{
display: none;
flex-direction: column;
justify-content: center;
gap: 7px;
width: 48px;
height: 48px;
padding: 12px;
background: none;
border: 0;
cursor: pointer;
}
.nav-toggle-bar{
display: block;
width: 24px;
height: 2px;
background: var(--onbg-ink);
transition: transform 0.3s ease, background 0.45s ease;
}
.is-solid .nav-toggle-bar{ background: var(--ink); }
.nav-toggle[aria-expanded="true"] .nav-toggle-bar{ background: var(--onbg-ink); }
.nav-toggle[aria-expanded="true"] .nav-toggle-bar:first-child{
transform: translateY(4.5px) rotate(45deg);
}
.nav-toggle[aria-expanded="true"] .nav-toggle-bar:last-child{
transform: translateY(-4.5px) rotate(-45deg);
}
/* Mobile full-screen menu */
.mobile-menu{
position: fixed;
inset: 0;
z-index: 90;
background: var(--ink);
display: none;
align-items: center;
justify-content: center;
visibility: hidden;
opacity: 0;
transition: opacity 0.4s ease, visibility 0s linear 0.4s;
}
.mobile-menu.is-open{
visibility: visible;
opacity: 1;
transition-delay: 0s;
}
.mobile-menu nav{
display: flex;
flex-direction: column;
align-items: center;
gap: 24px;
}
.mobile-menu nav a{
font-family: var(--font-display);
font-size: 2rem;
font-weight: 450;
color: var(--cream);
text-decoration: none;
opacity: 0;
transform: translateY(20px);
transition: opacity 0.5s ease, transform 0.5s ease;
}
.mobile-menu.is-open nav a{ opacity: 1; transform: translateY(0); }
.mobile-menu nav a:nth-child(1){ transition-delay: 0.06s; }
.mobile-menu nav a:nth-child(2){ transition-delay: 0.12s; }
.mobile-menu nav a:nth-child(3){ transition-delay: 0.18s; }
.mobile-menu nav a:nth-child(4){ transition-delay: 0.24s; }
.mobile-menu nav a:nth-child(5){ transition-delay: 0.30s; }
.mobile-menu nav a.btn{
font-family: var(--font-body);
font-size: 13px;
margin-top: 16px;
transition-delay: 0.36s;
}
/* --------------------------------------------------------------------------
2. HERO
-------------------------------------------------------------------------- */
/* Interim still sitting behind the Scene 1 video. Graded down so headline
type clears it; the video renders on top of it once delivered. */
.hero-media img{
filter: brightness(0.55) saturate(0.7) contrast(1.05);
}
.hero-content{
position: relative;
z-index: 2;
width: 100%;
padding-top: calc(var(--nav-h) + 24px);
/* This — not padding-top — is what sets how high the hero copy sits. The
hero is align-items:flex-end, so the block is anchored to the bottom and
any padding-top is absorbed by the leftover space above it. Raising this
lifts the whole block, which is how the gap under the treatments strip
gets closed; see the min-height rule below. */
padding-bottom: 96px;
}
.hero .eyebrow{ margin-bottom: 32px; }
/* Keeps a phrase together when a line breaks — "in Greenwood, Indiana"
should never split across two lines. */
.nowrap{ white-space: nowrap; }
/* Hero headline break control. The headline sets differently on phones:
desktop Twenty-five+ years / of reading skin.
mobile Twenty-five+ / years of / reading skin.
Desktop is the default below; the mobile shape is switched on in the
720px block near the bottom of this file. */
.brk-mobile{ display: none; } /* the
after "Twenty-five+" */
.txt-mobile{ display: none; } /* the "of" that joins "years" on mobile */
/* Keyword line inside the . It has to sit in the heading for search
engines to weigh it, but it must not compete with the headline for the
eye — hence body font, a fraction of the size, and the softer tone. */
.hero-tagline{
display: inline-block;
margin-top: 20px;
font-family: var(--font-body);
font-weight: 500;
font-size: clamp(0.95rem, 1.5vw, 1.2rem);
line-height: 1.4;
letter-spacing: 0.01em;
color: var(--onbg-soft);
max-width: 46ch; /* same measure as .hero-sub, so the two align */
}
.hero-sub{
margin-top: 32px;
font-size: 18px;
color: var(--onbg-soft);
max-width: 46ch;
}
.hero-ctas{
display: flex;
flex-wrap: wrap;
gap: 16px;
margin-top: 48px;
}
/* Scroll cue — thin gold line + rotated word */
.scroll-cue{
position: absolute;
left: 32px;
bottom: 32px;
z-index: 2;
display: flex;
flex-direction: column;
align-items: center;
gap: 16px;
}
.scroll-cue-line{
width: 1px;
height: 56px;
background: var(--gold);
transform-origin: top center;
animation: cue-pulse 2.6s ease-in-out infinite;
}
.scroll-cue-word{
font-size: 11px;
font-weight: 700;
letter-spacing: 0.2em;
text-transform: uppercase;
color: var(--gold);
writing-mode: vertical-rl;
transform: rotate(180deg);
}
@keyframes cue-pulse{
0%, 100%{ transform: scaleY(1); opacity: 1; }
50% { transform: scaleY(0.55); opacity: 0.6; }
}
/* --------------------------------------------------------------------------
3. ANIMATED STATS STRIP
-------------------------------------------------------------------------- */
.stats{
background: var(--ink);
padding: 64px 0;
}
.stats-grid{
max-width: 1080px;
margin: 0 auto;
padding: 0 32px;
display: grid;
grid-template-columns: repeat(4, 1fr);
}
.stat{
padding: 8px 24px;
border-left: 1px solid rgba(212,175,55,0.2);
}
.stat:first-child{ border-left: 0; padding-left: 0; }
.stat-number{
font-family: var(--font-display);
font-weight: 600;
font-size: clamp(2.5rem, 5vw, 4rem);
line-height: 1;
color: var(--gold);
letter-spacing: -0.01em;
}
.stat-suffix{ font-weight: 450; }
.stat-label{
margin-top: 12px;
font-weight: 500;
font-size: 12px;
letter-spacing: 0.14em;
text-transform: uppercase;
color: var(--onbg-soft);
}
/* --------------------------------------------------------------------------
4. MISSION
-------------------------------------------------------------------------- */
.mission{
background: var(--bg-alt);
padding: var(--section-pad) 0;
}
.mission-grid{
display: grid;
grid-template-columns: 5fr 7fr;
gap: 24px;
align-items: center;
}
.mission-body{ margin-top: 32px; }
.mission-body p{
max-width: 52ch;
color: var(--ink-soft);
}
.mission-body p + p{ margin-top: 16px; }
.mission-art{
display: flex;
justify-content: flex-end;
align-items: center;
padding-right: 32px;
}
.swirl{ width: min(360px, 70%); height: auto; }
/* --------------------------------------------------------------------------
5. THREE PILLARS
-------------------------------------------------------------------------- */
.pillars{
background: var(--bg);
padding: var(--section-pad) 0;
}
.pillars-title{ color: var(--onbg-ink); }
/* Stacked, one treatment per row. The three descriptions run to very
different lengths, and side-by-side columns all stretch to the tallest
— which left the shortest card with 400px of empty white. Stacked,
each card sizes to its own copy. */
.pillar-cards{
display: grid;
grid-template-columns: 1fr;
gap: 24px;
margin-top: 64px;
}
.pillar-card{
/* Sized to the 62ch measure plus padding, so the copy fills the card
instead of stranding half of it empty. Left-aligned rather than
centered — the section reads better off-axis. */
max-width: 740px;
background: var(--card);
border: 1px solid var(--line);
border-radius: var(--radius);
padding: 40px 32px 36px;
display: flex;
flex-direction: column;
align-items: flex-start;
transition: transform 0.3s ease, border-color 0.3s ease;
}
.pillar-card:hover{
transform: translateY(-6px);
border-color: var(--gold);
}
.pillar-numeral{
font-family: var(--font-display);
font-style: italic;
font-weight: 450;
font-size: 1.1rem;
color: var(--gold-ink);
margin-bottom: 24px;
}
.pillar-card h3{
font-weight: 600;
font-size: 24px;
margin-bottom: 16px;
}
.pillar-card p:not(.pillar-numeral){
font-size: 15px;
line-height: 1.6;
color: var(--gray);
margin-bottom: 16px;
max-width: 62ch; /* a full-width card would run the measure far too long */
}
.pillar-card p:not(.pillar-numeral):last-of-type{ margin-bottom: 24px; }
/* Opening line on a card that runs to several paragraphs — states the
promise before the detail arrives. Same size as the body, a step
darker, so it leads without behaving like a second heading. */
.pillar-card p.pillar-lead{
color: var(--ink-soft);
font-weight: 500;
}
.pillar-card .text-link{ margin-top: auto; }
/* --------------------------------------------------------------------------
6. THE CRAFT — pinned scroll-scrub
-------------------------------------------------------------------------- */
.craft{ background: var(--ink); }
/* Default (no JS, mobile, reduced motion): the section is a normal block and
all three beats stack and read as ordinary copy. The pinned scroll-scrub
layout below is opt-in — script.js adds .js-pinned only where it applies. */
.craft-pin{
position: relative;
min-height: 70vh;
overflow: hidden;
display: flex;
align-items: center;
justify-content: center;
padding: 96px 0;
}
.craft-media{ position: absolute; inset: 0; }
.craft-media video,
.craft-media canvas,
.craft-media img{
position: absolute;
inset: 0;
width: 100%;
height: 100%;
object-fit: cover;
}
.craft-canvas[hidden]{ display: none; }
.craft-overlay{
position: absolute;
inset: 0;
background: rgba(14,56,53,0.45);
}
.craft-beats{
position: relative;
z-index: 2;
width: 100%;
padding: 0 32px;
display: flex;
flex-direction: column;
align-items: center;
gap: 64px;
}
.craft-beat{
text-align: center;
display: flex;
flex-direction: column;
align-items: center;
gap: 24px;
}
.craft-beat-text{
font-family: var(--font-display);
font-weight: 450;
font-size: clamp(2rem, 5vw, 4.5rem);
line-height: 1.05;
letter-spacing: -0.01em;
color: var(--cream);
max-width: 18ch;
}
.craft-beat-rule{
display: block;
width: 96px;
height: 1px;
background: var(--gold);
transform-origin: left center;
}
/* Pinned scroll-scrub layout — opt-in, desktop only. The beats stack on top
of one another and cross-fade as the pinned section is scrubbed. */
.craft.js-pinned .craft-pin{
height: 100vh;
height: 100svh;
min-height: 0;
padding: 0;
}
.craft.js-pinned .craft-beats{
display: grid;
gap: 0;
}
.craft.js-pinned .craft-beat{ grid-area: 1 / 1; }
/* --------------------------------------------------------------------------
7. HORMONAL SPECIALTY
-------------------------------------------------------------------------- */
.specialty{
background: var(--cream);
padding: var(--section-pad) 0;
}
.specialty-grid{
display: grid;
grid-template-columns: 1fr 1fr;
gap: 64px;
align-items: center;
}
.specialty-body{ margin-top: 32px; }
.specialty-body p{
max-width: 52ch;
color: var(--ink-soft);
}
.specialty-body p + p{ margin-top: 16px; }
.consult-callout{
margin-top: 48px;
padding: 32px;
border: 1px solid var(--line);
border-left: 3px solid var(--gold);
border-radius: var(--radius);
background: rgba(255,255,255,0.55);
}
.consult-callout h3{
font-weight: 600;
font-size: 1.25rem;
margin-bottom: 8px;
}
.consult-callout p{
font-size: 15px;
color: var(--gray);
margin-bottom: 16px;
}
/* Tall editorial still with an offset gold frame */
.specialty-figure{ display: flex; justify-content: center; }
.framed-still{
position: relative;
max-width: 420px;
}
.framed-still img{
position: relative;
z-index: 1;
border-radius: var(--radius);
}
.frame-offset{
position: absolute;
inset: 0;
transform: translate(12px, 12px);
border: 1px solid var(--gold);
border-radius: var(--radius);
}
/* --------------------------------------------------------------------------
8. STORY
-------------------------------------------------------------------------- */
.story{
position: relative;
overflow: hidden;
background: var(--bg-alt);
padding: var(--section-pad) 0;
}
/* Lori's studio photo, anchored right. The mask carries it from fully
transparent at the left — where it passes behind the copy — to full
strength on the right, so her face reads clearly beside the text and
nothing competes with the reading column. */
.story-bg{
position: absolute;
inset: 0;
z-index: 0;
pointer-events: none;
}
.story-bg img{
position: absolute;
top: 0;
right: 0;
width: 48%;
height: 100%;
object-fit: cover;
object-position: 50% 22%; /* holds her face in frame as the band narrows */
opacity: 1;
-webkit-mask-image: linear-gradient(to right, transparent 0%, rgba(0,0,0,0.45) 38%, #000 68%);
mask-image: linear-gradient(to right, transparent 0%, rgba(0,0,0,0.45) 38%, #000 68%);
}
.story-grid{
position: relative; /* lifts the copy above the background photo */
z-index: 1;
display: grid;
grid-template-columns: 7fr 5fr; /* copy left, photo shows through right */
gap: 24px;
}
.story-body{ margin-top: 48px; }
.story-body p{
max-width: 52ch;
color: var(--ink-soft);
}
.story-body p + p{ margin-top: 16px; }
.pull-quote{
position: relative;
margin: 48px 0 48px -32px; /* breaks the column edge */
padding-left: 64px;
max-width: none;
}
.pull-quote p{
font-family: var(--font-display);
font-style: italic;
font-weight: 450;
font-size: clamp(1.6rem, 3vw, 2.4rem);
line-height: 1.3;
color: var(--ink);
max-width: 24ch;
}
.quote-mark{
position: absolute;
left: 0;
top: -0.18em;
font-family: var(--font-display);
font-size: 4rem;
line-height: 1;
color: var(--gold-deep);
}
/* Closing mark for the pull-quote — same face, size, and gold as the
opening one, but set inline at the end of the last line instead of out
in the margin. It is written with no space before it in the HTML, so
there is no break opportunity and it can never wrap onto its own line.
line-height:0 keeps the oversized glyph from opening up the line box. */
.pull-quote .quote-mark-close{
position: static;
display: inline-block;
font-style: normal;
line-height: 0;
/* The glyph's ink sits high in its em box; at 4rem against ~2.4rem text
it would otherwise float up into the line above. This drops it onto
the last line, level with the text's cap height. */
vertical-align: -0.34em;
margin-left: 0.04em;
}
.signoff{
margin-top: 32px;
font-family: var(--font-display);
font-style: italic;
font-size: 1.2rem;
color: var(--gold-ink);
}
.signoff em{ font-style: italic; }
/* --------------------------------------------------------------------------
9. FULL SERVICE MENU
-------------------------------------------------------------------------- */
.menu{
background: var(--card);
padding: var(--section-pad) 0;
}
.menu-inner{ max-width: 880px; }
.menu-list{
list-style: none;
margin-top: 64px;
border-top: 1px solid var(--line);
}
.menu-row{
padding: 28px 16px;
border-bottom: 1px solid var(--line);
transition: background-color 0.3s ease;
}
.menu-row:hover{ background: rgba(56,208,192,0.06); }
.menu-row-main{
display: flex;
align-items: baseline;
gap: 16px;
}
.menu-name{
font-family: var(--font-display);
font-weight: 500;
font-size: 20px;
color: var(--ink);
flex: none;
transition: transform 0.3s ease;
}
.menu-row:hover .menu-name{ transform: translateX(6px); }
/* Dotted leader line, restaurant-menu style */
.menu-leader{
flex: 1;
border-bottom: 1px dotted rgba(14,56,53,0.35);
transform: translateY(-4px);
}
.menu-book{
flex: none;
font-weight: 600;
font-size: 14px;
letter-spacing: 0.02em;
color: var(--teal-ink);
text-decoration: none;
padding: 8px 0 8px 8px; /* generous tap target */
}
.menu-book:hover{ text-decoration: underline; }
.menu-desc{
margin-top: 6px;
font-size: 15px;
color: var(--gray);
}
.menu-cta{
margin-top: 64px;
text-align: center;
display: flex;
flex-direction: column;
align-items: center;
gap: 24px;
}
.menu-cta p{ color: var(--gray); font-size: 15px; }
/* --------------------------------------------------------------------------
9b. FAQ — accordion
Built on native /, so it opens and closes with no
JavaScript at all and stays keyboard-accessible for free. The only thing
scripted about it is the reveal-on-scroll, and the section works without
that too.
Cream background: it sits between the white menu above and the navy
testimonials below, and needs to read as its own section against both.
-------------------------------------------------------------------------- */
.faq{
background: var(--cream);
padding: var(--section-pad) 0;
}
.faq-inner{ max-width: 880px; }
.faq-list{
margin-top: 64px;
border-top: 1px solid var(--line);
}
.faq-item{
border-bottom: 1px solid var(--line);
}
/* The clickable question row. list-style rules kill the default triangle
in every browser — Safari needs the ::-webkit- one specifically. */
.faq-q{
display: flex;
align-items: flex-start;
justify-content: space-between;
gap: 24px;
padding: 26px 4px;
cursor: pointer;
list-style: none;
font-family: var(--font-display);
font-weight: 500;
font-size: clamp(1.05rem, 1.6vw, 1.3rem);
line-height: 1.35;
color: var(--ink);
transition: color 0.25s ease;
}
.faq-q::-webkit-details-marker{ display: none; }
.faq-q:hover{ color: var(--teal-ink); }
.faq-q:focus-visible{
outline: 2px solid var(--gold);
outline-offset: -2px;
border-radius: var(--radius);
}
/* Plus sign that becomes a minus when open. Two bars, one rotated. */
.faq-icon{
position: relative;
flex: none;
width: 16px;
height: 16px;
margin-top: 6px;
}
.faq-icon::before,
.faq-icon::after{
content: "";
position: absolute;
top: 50%;
left: 0;
width: 100%;
height: 1.5px;
background: var(--gold-deep);
transition: transform 0.3s ease, opacity 0.3s ease;
}
.faq-icon::after{ transform: rotate(90deg); }
.faq-item[open] .faq-icon::after{ transform: rotate(0deg); opacity: 0; }
.faq-a{
padding: 0 4px 28px;
animation: faq-open 0.35s ease;
}
.faq-a p{
font-size: 16px;
color: var(--gray);
max-width: 68ch;
}
.faq-a p + p{ margin-top: 14px; }
@keyframes faq-open{
from{ opacity: 0; transform: translateY(-6px); }
to{ opacity: 1; transform: translateY(0); }
}
.faq-cta{
margin-top: 64px;
text-align: center;
display: flex;
flex-direction: column;
align-items: center;
gap: 24px;
}
.faq-cta p{
color: var(--gray);
font-size: 15px;
max-width: none;
}
@media (max-width: 720px){
.faq-list{ margin-top: 44px; }
.faq-q{ padding: 22px 2px; gap: 16px; }
.faq-a{ padding-bottom: 24px; }
}
/* --------------------------------------------------------------------------
10. TESTIMONIALS — rotator
One review at a time, centered. Arrows and dots step through the set;
it also advances on its own until the visitor interacts with it.
-------------------------------------------------------------------------- */
.testimonials{
background: var(--bg);
padding: var(--section-pad) 0;
}
.rotator{
position: relative;
margin-top: 48px;
display: flex;
flex-direction: column;
align-items: center;
text-align: center;
}
/* Matching open and close marks, set tight against the quote they bracket.
The glyphs carry a lot of empty box above and below, so both are pulled
back with negative margins rather than given real space. */
.rotator-mark{
display: block;
position: static;
font-family: var(--font-display);
font-size: 4rem;
line-height: 0.55;
color: var(--gold);
margin-bottom: -22px; /* closes the gap to the first line of the quote */
}
.rotator-mark-close{
margin-top: 0;
margin-bottom: 0;
}
/* script.js measures the longest review and sets min-height to match, so
advancing never shifts the page. This value is the pre-script floor. */
.rotator-quote{
min-height: 8.5em;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
transition: opacity 0.35s ease;
}
.rotator-quote.is-fading{ opacity: 0; }
.rotator-quote p{
font-family: var(--font-display);
font-style: italic;
font-weight: 450;
font-size: clamp(1.25rem, 2.4vw, 1.75rem);
line-height: 1.5;
color: var(--onbg-ink);
max-width: 52ch;
}
.rotator-quote cite{
display: block;
margin-top: 24px;
font-family: var(--font-body);
font-style: normal;
font-weight: 700;
font-size: 13px;
letter-spacing: 0.14em;
text-transform: uppercase;
color: var(--gold); /* matches the quote marks */
}
/* The controls only exist once script.js has wired them up. Without it the
section still shows one full review — but never a dead arrow. */
.rotator-nav,
.rotator-count{ display: none; }
.rotator.is-live .rotator-nav{
display: flex;
align-items: center;
justify-content: center;
gap: 16px;
margin-top: 40px;
}
.rotator.is-live .rotator-count{ display: block; }
.rotator-arrow{
flex: none;
width: 44px;
height: 44px;
display: flex;
align-items: center;
justify-content: center;
font-size: 22px;
line-height: 1;
color: var(--onbg-ink);
background: transparent;
border: 1px solid rgba(247,244,236,0.45);
border-radius: var(--radius);
cursor: pointer;
transition: background-color 0.25s ease, border-color 0.25s ease;
}
.rotator-arrow:hover{
background: rgba(56,208,192,0.14);
border-color: var(--onbg-ink);
}
/* Wide enough to hold the full set on one row — a wrapped second row of
dots reads as a mistake rather than a control. */
.rotator-dots{
display: flex;
flex-wrap: wrap;
justify-content: center;
gap: 2px;
max-width: 760px;
}
.rotator-dot{
width: 30px;
height: 30px;
padding: 0;
display: flex;
align-items: center;
justify-content: center;
background: none;
border: 0;
cursor: pointer;
}
.rotator-dot::before{
content: "";
width: 15px;
height: 15px;
border-radius: 50%;
background: rgba(247,244,236,0.35);
transition: background-color 0.25s ease, transform 0.25s ease;
}
.rotator-dot:hover::before{ background: rgba(247,244,236,0.7); }
.rotator-dot[aria-current="true"]::before{
background: var(--gold);
transform: scale(1.15);
}
.rotator.is-live .rotator-count{
margin-top: 20px;
font-size: 12px;
letter-spacing: 0.14em;
text-transform: uppercase;
color: var(--onbg-ink); /* --onbg-soft measures 4.26:1 here, just short */
}
@media (max-width: 720px){
.rotator-quote{ min-height: 12em; }
.rotator.is-live .rotator-nav{ gap: 16px; margin-top: 32px; }
/* 21 dots cannot sit on one row at phone width, and four wrapped rows
of them is worse than none. Arrows and the counter carry it here. */
.rotator-dots{ display: none; }
}
/* --------------------------------------------------------------------------
11. FINAL CTA
-------------------------------------------------------------------------- */
.final-cta{
position: relative;
min-height: 100vh;
min-height: 100svh;
display: flex;
align-items: center;
overflow: hidden;
background: var(--cta-blue);
padding: var(--section-pad) 0;
}
.final-media{ position: absolute; inset: 0; }
.final-media video{
position: absolute;
inset: 0;
width: 100%;
height: 100%;
object-fit: cover;
}
/* Tinted to the section's own blue so the closing frame stays consistent
once the Scene 3 video sits behind it. */
.final-overlay{
position: absolute;
inset: 0;
background: rgba(27,56,87,0.62);
}
.final-content{
position: relative;
z-index: 2;
width: 100%;
text-align: center;
display: flex;
flex-direction: column;
align-items: center;
}
.final-content h2{
font-size: clamp(2.8rem, 7vw, 6rem);
line-height: 1.02;
letter-spacing: -0.02em;
color: var(--cream);
}
.final-content .accent{
font-style: italic;
font-weight: 450;
color: var(--gold);
}
.final-sub{
margin-top: 24px;
font-size: 18px;
color: var(--onbg-soft);
}
.final-content .btn-xl{ margin-top: 48px; }
.final-note{
margin-top: 32px;
font-size: 15px;
color: var(--onbg-ink);
}
.final-note .dot{ margin: 0 10px; color: var(--gold); }
.final-note a{
display: inline-block;
color: var(--teal-onbg);
text-decoration: none;
padding: 6px 0; /* tap target on the phone link */
}
.final-note a:hover{ text-decoration: underline; }
.final-note-quiet{
margin-top: 8px;
font-size: 14px;
color: var(--onbg-soft);
}
@media (max-width: 720px){
.final-note .dot{ display: block; height: 0; overflow: hidden; margin: 4px 0; }
}
/* --------------------------------------------------------------------------
12. FOOTER
-------------------------------------------------------------------------- */
.site-footer{
background: var(--ink-blue);
color: var(--onbg-soft);
padding-top: 96px;
/* Keeps the seam crisp where the closing section meets the footer. */
border-top: 1px solid rgba(212,175,55,0.28);
}
.footer-grid{
display: grid;
grid-template-columns: 4fr 2fr 3fr 3fr;
gap: 48px;
padding-bottom: 64px;
}
.footer-col{ display: flex; flex-direction: column; align-items: flex-start; }
.footer-wordmark{
font-size: 24px;
color: var(--onbg-ink);
margin-bottom: 16px;
}
.footer-brand p{
font-size: 15px;
max-width: 32ch;
}
.footer-address{
margin-top: 24px;
font-style: normal;
font-size: 15px;
line-height: 1.7;
}
.footer-address a{
display: inline-block;
color: var(--gold);
text-decoration: none;
padding: 6px 0; /* keeps the phone tap target generous */
}
.footer-address a:hover{ text-decoration: underline; }
.footer-heading-hours{ margin-top: 32px; }
.footer-hours{ font-size: 14px; width: 100%; max-width: 30ch; }
.footer-hours > div{
display: flex;
justify-content: space-between;
gap: 16px;
padding: 5px 0;
border-bottom: 1px solid rgba(212,175,55,0.15);
}
.footer-hours dt{ color: var(--onbg-soft); }
.footer-hours dd{ color: var(--onbg-ink); white-space: nowrap; }
.footer-heading{
font-family: var(--font-body);
font-weight: 700;
font-size: 12px;
letter-spacing: 0.16em;
text-transform: uppercase;
color: var(--gold);
margin-bottom: 20px;
}
.footer-col a:not(.btn){
color: var(--onbg-soft);
text-decoration: none;
font-size: 15px;
padding: 5px 0;
transition: color 0.25s ease;
}
.footer-col a:not(.btn):hover{ color: var(--onbg-ink); }
.footer-cta{ margin-top: 16px; }
.footer-bottom{
border-top: 1px solid rgba(212,175,55,0.35);
padding: 24px 0;
}
.footer-bottom p{
font-size: 13px;
color: var(--onbg-soft);
}
/* --------------------------------------------------------------------------
MOBILE BOOKING BAR
-------------------------------------------------------------------------- */
.mobile-book-bar{
position: fixed;
left: 0; right: 0; bottom: 0;
z-index: 95;
padding: 12px 16px calc(12px + env(safe-area-inset-bottom));
background: rgba(14,56,53,0.92);
backdrop-filter: blur(8px);
-webkit-backdrop-filter: blur(8px);
transform: translateY(110%);
transition: transform 0.4s ease;
display: none;
}
.mobile-book-bar.is-visible{ transform: translateY(0); }
.mobile-book-bar .btn{ width: 100%; min-height: 52px; }
/* --------------------------------------------------------------------------
RESPONSIVE — mobile-first adjustments applied top-down
Breakpoints: 720px and 1024px
-------------------------------------------------------------------------- */
@media (max-width: 1024px){
.mission-grid{ grid-template-columns: 1fr; gap: 48px; }
.mission-art{ justify-content: flex-start; padding-right: 0; }
.swirl{ width: min(280px, 60%); }
/* already single-column at every width — nothing to change here */
.specialty-grid{ grid-template-columns: 1fr; gap: 64px; }
.specialty-figure{ justify-content: flex-start; }
.story-grid{ grid-template-columns: 1fr; }
.pull-quote{ margin-left: 0; }
/* Stacked, the copy spans the full width — so the photo drops back to a
faint wash rather than sitting at full strength under the text. */
.story-bg img{
width: 100%;
opacity: 0.16;
filter: saturate(0.55);
-webkit-mask-image: none;
mask-image: none;
}
.testimonial-grid{ grid-template-columns: 1fr; max-width: 560px; gap: 56px; }
.footer-grid{ grid-template-columns: 1fr 1fr; }
}
@media (max-width: 720px){
:root{
--section-pad: 76px;
--nav-h: 56px; /* the CTA is hidden here, so only the toggle constrains it */
--tstrip-h: 58px; /* two wrapped rows on mobile — see .tstrip-links */
}
.container{ padding-left: 20px; padding-right: 20px; }
/* Nav collapses to hamburger */
.nav-inner{ padding: 0 20px; }
.nav-links, .nav-cta{ display: none; }
.nav-toggle{ display: flex; }
.mobile-menu{ display: flex; }
.hero h1{ font-size: clamp(2.6rem, 11vw, 4rem); }
/* Reset the headline to its three-line mobile shape. The space in the
source before "years" collapses at the start of a line, so the break
lands clean. See the .brk-mobile note in the shared UI section. */
.brk-mobile{ display: inline; }
.txt-mobile{ display: inline; }
.txt-desktop{ display: none; }
.hero-content{ padding-bottom: 76px; }
.hero-ctas .btn{ width: 100%; }
.scroll-cue{ display: none; }
.stats{ padding: 48px 0; }
.stats-grid{
grid-template-columns: 1fr 1fr;
gap: 32px 0;
padding: 0 20px;
}
.stat{ padding: 0 20px; }
.stat:nth-child(odd){ border-left: 0; padding-left: 0; }
.pillar-card{ padding: 32px 24px 28px; }
.consult-callout{ padding: 24px 20px; }
.framed-still{ max-width: 100%; }
.pull-quote{ padding-left: 48px; }
.quote-mark{ font-size: 3rem; }
.menu-row{ padding: 24px 8px; }
.menu-row-main{ flex-wrap: wrap; gap: 8px; }
.menu-leader{ display: none; }
.menu-book{ margin-left: auto; }
.footer-grid{ grid-template-columns: 1fr; gap: 40px; }
.site-footer{ padding-top: 64px; }
.mobile-book-bar{ display: block; }
}
/* --------------------------------------------------------------------------
TOUCH TARGETS
On any touch device every link clears 48px of height. Booking friction is
the enemy here — these are the links that lead to the booking page.
-------------------------------------------------------------------------- */
@media (hover: none), (pointer: coarse), (max-width: 720px){
a.wordmark,
.text-link,
.menu-book,
.nav-links a,
.footer-col a:not(.btn),
.final-note a,
.footer-address a{
display: inline-flex;
align-items: center;
min-height: 48px;
}
/* The underline wipe must hug the text, not the padded box */
.text-link::after{ bottom: 12px; }
}
/* --------------------------------------------------------------------------
REDUCED MOTION — everything lands in its final state
-------------------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce){
*,
*::before,
*::after{
animation-duration: 0.01ms !important;
animation-iteration-count: 1 !important;
transition-duration: 0.01ms !important;
scroll-behavior: auto !important;
}
.scroll-cue-line{ animation: none !important; }
}
/* --------------------------------------------------------------------------
SERVICE AREA
Sits between .story (--bg-alt) and .menu (--card), so it can use neither:
--cream is the remaining light token and keeps the section boundaries
visible. Local proof lands here, just before the menu — the point where
someone is deciding whether the drive is worth it.
-------------------------------------------------------------------------- */
.area{
background: var(--cream);
padding: var(--section-pad) 0;
}
.area-inner{ max-width: 880px; }
/* The hero and closing CTA put .accent in bright --gold, but both sit on dark
grounds. This section is light: on --cream the bright golds stay under the
3:1 large-text floor, while --gold-ink clears 5.38:1. */
.area h2 .accent{
font-style: italic;
font-weight: 450;
color: var(--gold-ink);
}
.area-body{ margin-top: 48px; }
.area-body p{
max-width: 60ch;
color: var(--ink-soft);
font-size: 1.05rem;
}
.area-body p + p{ margin-top: 16px; }
/* The town list reads as ornament, not navigation — these are place names
for a human and for a crawler, not links. */
.area-towns{
list-style: none;
margin: 40px 0 0;
padding: 0;
display: flex;
flex-wrap: wrap;
gap: 10px 12px;
}
.area-towns li{
font-family: var(--font-body);
font-size: 0.85rem;
letter-spacing: 0.06em;
text-transform: uppercase;
color: var(--ink-soft);
padding: 8px 14px;
border: 1px solid var(--line);
border-radius: var(--radius);
background: rgba(255,255,255,0.6);
}
.area-climate{
margin-top: 72px;
padding-top: 56px;
border-top: 1px solid var(--line);
}
.area-climate h3{ color: var(--ink); }
.area-climate-lead{
margin-top: 12px;
max-width: 58ch;
color: var(--ink-soft);
}
.climate-list{ margin: 40px 0 0; }
.climate-item + .climate-item{ margin-top: 32px; }
.climate-item dt{
font-family: var(--font-display);
font-size: 1.15rem;
font-weight: 600;
color: var(--ink);
margin-bottom: 8px;
padding-left: 18px;
position: relative;
}
.climate-item dt::before{
content: "";
position: absolute;
left: 0;
top: 0.55em;
width: 8px;
height: 1px;
background: var(--gold-deep);
}
.climate-item dd{
margin: 0;
padding-left: 18px;
max-width: 62ch;
color: var(--ink-soft);
line-height: 1.7;
}
.area-note{
margin-top: 64px;
font-size: 0.9rem;
color: var(--gray);
}
.area-note a{
color: var(--teal-ink);
text-decoration: underline;
text-underline-offset: 3px;
}
@media (max-width: 720px){
.area-climate{ margin-top: 56px; padding-top: 40px; }
.area-towns{ gap: 8px; }
.area-towns li{ font-size: 0.78rem; padding: 7px 11px; }
}
/* --------------------------------------------------------------------------
SERVICE PAGES
Generated by build.py. These pages reuse every token, button, footer, and
FAQ style above — only the page-specific layout lives here.
-------------------------------------------------------------------------- */
.svc-page{ background: var(--card); }
/* No override here on purpose: the service header uses the same transparent
→ .is-solid treatment as the homepage, floating over .svc-topband. */
.svc-hero{
position: relative; /* containing block for .svc-topband */
background: var(--bg);
padding: calc(var(--nav-h) + var(--tstrip-h) + 88px) 0 88px;
}
.svc-hero-inner{ max-width: 880px; position: relative; z-index: 1; }
/* The strip of hero photograph behind the fixed chrome. It reaches a little
past the treatments strip (98px of chrome) and then dissolves into the
section colour, so there is no hard seam where the image stops. */
.svc-topband{
position: absolute;
top: 0; left: 0; right: 0;
height: 168px;
overflow: hidden;
z-index: 0;
}
.svc-topband img{
width: 100%; height: 100%;
object-fit: cover;
object-position: center 34%;
}
.svc-topband::after{
content: "";
position: absolute;
inset: 0;
background: linear-gradient(to bottom,
rgba(14,56,53,0.42) 0%,
rgba(14,56,53,0.52) 48%,
var(--bg) 100%);
}
@media (max-width: 720px){
.svc-topband{ height: 150px; }
}
.svc-hero h1{
font-size: clamp(2.1rem, 4.6vw, 3.6rem);
line-height: 1.06;
font-weight: 600;
color: var(--onbg-ink);
margin-top: 20px;
}
.svc-lede{
margin-top: 20px;
max-width: 54ch;
font-size: 1.15rem;
color: var(--onbg-soft);
}
.svc-hero .btn{ margin-top: 36px; }
.crumbs{ font-size: 0.85rem; color: var(--onbg-soft); }
.crumbs a{ color: var(--onbg-gold); text-decoration: none; }
.crumbs a:hover{ text-decoration: underline; }
.crumbs span[aria-hidden]{ margin: 0 8px; opacity: 0.5; }
.svc-inner{ max-width: 780px; }
.svc-body{ background: var(--card); padding: 96px 0; }
.svc-body p, .svc-expect p{
max-width: 64ch;
color: var(--ink-soft);
font-size: 1.05rem;
}
.svc-body h2 + p, .svc-expect h2 + p{ margin-top: 28px; }
.svc-body p + p, .svc-expect p + p{ margin-top: 16px; }
.svc-suits{
margin-top: 48px;
padding: 32px;
border: 1px solid var(--line);
border-left: 3px solid var(--gold);
border-radius: var(--radius);
background: var(--bg-alt);
}
.svc-suits h3{ font-size: 1.2rem; }
.svc-suits ul{ margin: 18px 0 0; padding: 0; list-style: none; }
.svc-suits li{
position: relative;
padding-left: 24px;
color: var(--ink-soft);
}
.svc-suits li + li{ margin-top: 10px; }
.svc-suits li::before{
content: "";
position: absolute;
left: 0; top: 0.72em;
width: 10px; height: 1px;
background: var(--gold-deep);
}
.svc-expect{ background: var(--cream); padding: 96px 0; }
.svc-local{ background: var(--bg-alt); padding: 80px 0; }
.svc-local p{ max-width: 64ch; color: var(--ink-soft); }
.svc-local h2 + p{ margin-top: 24px; }
.svc-addr{ margin-top: 20px; font-size: 0.92rem; color: var(--gray); }
.svc-addr a{ color: var(--teal-ink); text-decoration: underline; text-underline-offset: 3px; }
.svc-faq{ padding: 96px 0; }
.svc-related{ background: var(--card); padding: 88px 0; }
.rel-grid{ margin-top: 36px; display: grid; gap: 12px; }
.rel-card{
display: flex;
align-items: center;
justify-content: space-between;
gap: 16px;
padding: 22px 24px;
border: 1px solid var(--line);
border-radius: var(--radius);
text-decoration: none;
color: var(--ink);
transition: background .3s ease, border-color .3s ease, transform .3s ease;
}
.rel-card:hover{
background: var(--bg-alt);
border-color: var(--gold);
transform: translateX(4px);
}
.rel-name{ font-family: var(--font-display); font-size: 1.08rem; font-weight: 450; }
.rel-go{ color: var(--gold-ink); }
/* The closing CTA on service pages has no video behind it, so it needs the
solid ground the homepage gets from .final-overlay. */
.svc-cta{ background: var(--cta-blue); padding: 110px 0; text-align: center; }
.svc-cta h2{ color: var(--onbg-ink); }
.svc-page .mobile-book-bar.is-visible{ transform: none; opacity: 1; }
@media (max-width: 720px){
.svc-hero{ padding: calc(var(--nav-h) + var(--tstrip-h) + 56px) 0 56px; }
.svc-body, .svc-expect, .svc-faq, .svc-related{ padding: 64px 0; }
.svc-local{ padding: 56px 0; }
.svc-suits{ padding: 24px 20px; }
.svc-cta{ padding: 72px 0; }
}
/* Treatment names in the menu are now links to their own pages; the Book
link beside them still goes to Vagaro. Keep them looking like the plain
text they replaced — the whole row already reads as interactive. */
.menu-name a{
color: inherit;
text-decoration: none;
border-bottom: 1px solid transparent;
transition: border-color .3s ease;
}
.menu-name a:hover{ border-bottom-color: var(--gold); }
/* --------------------------------------------------------------------------
HEADER & WORDMARK
These lived only in the inline critical CSS in index.html, which meant the
generated service pages — which link this file and nothing else — rendered
their header and logo unstyled. This file is meant to stand alone (see the
note at the top), so they belong here too. index.html keeps its inline copy
for first paint; the two must be edited together.
-------------------------------------------------------------------------- */
html{ scroll-behavior: smooth; }
.site-header{
position: fixed;
top: 0; left: 0; right: 0;
z-index: 100;
height: var(--nav-h);
background: transparent;
transition: background .45s ease, box-shadow .45s ease;
}
.site-header.is-solid{
background: rgba(238,243,248,0.88);
backdrop-filter: blur(8px);
-webkit-backdrop-filter: blur(8px);
}
.wordmark{
font-family: var(--font-display);
font-weight: 600;
font-size: 22px;
/* Without these the wordmark inherits body line-height 1.65 and is allowed
to wrap; in the flex nav row it was breaking to "TLC / Skincare" with a
36px gap at tablet widths. */
line-height: 1.1;
white-space: nowrap;
flex-shrink: 0;
text-decoration: none;
color: var(--onbg-ink);
letter-spacing: -0.01em;
transition: color .45s ease;
}
/* Pulls "Skincare" back toward "TLC" so the two read as one mark rather than
two words. The word space in the source is doing too much work at 22px. */
.wordmark em{
font-style: italic;
font-weight: 450;
color: var(--gold);
margin-left: -0.09em;
}
.is-solid .wordmark{ color: var(--ink); }
.is-solid .wordmark em{ color: var(--gold-ink); }
/* --------------------------------------------------------------------------
TREATMENTS STRIP
Pinned directly under the header as a second, deliberately shallow bar.
It behaves like the nav rather than like content: translucent over the hero
so the opening image still reads through it, then solid in step with the
header once you scroll. Keep it shallow — every pixel here is taken from
the hero, and the whole page is built around that first image.
z-index sits BELOW .mobile-menu (90) so the open menu covers it, and below
.site-header (100) so the header always stays reachable.
-------------------------------------------------------------------------- */
.tstrip{
position: fixed;
top: var(--nav-h);
left: 0; right: 0;
z-index: 89;
height: var(--tstrip-h);
/* Same tint the header carries over the hero, so the two read as one piece
of chrome rather than two stacked bars. */
background: rgba(14,56,53,0.34);
backdrop-filter: blur(10px);
-webkit-backdrop-filter: blur(10px);
border-bottom: 1px solid rgba(247,244,236,0.10);
transition: background .45s ease, border-color .45s ease;
}
/* Follows the header's solid state. This only works because .tstrip is the
header's immediate next sibling in index.html — keep them adjacent. */
.site-header.is-solid + .tstrip{
background: rgba(238,243,248,0.92);
border-bottom-color: var(--line);
}
.tstrip-inner{
height: 100%;
display: flex;
align-items: center;
gap: 24px;
}
.tstrip-label{
flex-shrink: 0;
font-size: 0.66rem;
letter-spacing: 0.16em;
text-transform: uppercase;
color: var(--onbg-gold);
transition: color .45s ease;
}
.site-header.is-solid + .tstrip .tstrip-label{ color: var(--gold-ink); }
.tstrip-links{
display: flex;
align-items: center;
gap: 24px;
min-width: 0;
}
.tstrip-link{
position: relative;
white-space: nowrap;
font-size: 0.82rem;
font-weight: 500;
text-decoration: none;
color: var(--onbg-soft);
transition: color .3s ease;
}
.tstrip-link::after{
content: "";
position: absolute;
left: 0; right: 100%; bottom: -5px;
height: 1px;
background: var(--gold);
transition: right .3s ease;
}
.tstrip-link:hover{ color: var(--onbg-ink); }
.tstrip-link:hover::after{ right: 0; }
.site-header.is-solid + .tstrip .tstrip-link{ color: var(--ink-soft); }
.site-header.is-solid + .tstrip .tstrip-link:hover{ color: var(--ink); }
/* The hero's content is bottom-aligned, so the strip does not cover the
headline — but the top padding still has to clear both bars. */
/* Short-viewport guard only: on a tall screen the bottom-anchored block never
reaches this, but on a short one it keeps the copy clear of both bars. */
.hero-content{ padding-top: calc(var(--nav-h) + var(--tstrip-h) + 24px); }
/* Lift the hero copy so it sits closer under the treatments strip, roughly
halving the gap. Gated on viewport HEIGHT, not width: on a short screen the
block already fills the hero, and adding bottom padding there pushes the
booking buttons below the fold instead of closing any gap. */
@media (min-height: 800px){
/* Large enough that the copy block overflows the hero and pins to the top.
Once it does, the gap under the treatments strip equals the padding-top
guard's clearance (+24px) and nothing else — so change THAT value to
retune the gap. This one only has to be big enough to keep it pinned. */
.hero-content{ padding-bottom: 340px; }
}
@media (max-width: 720px){
/* Two wrapped rows rather than one scrolling row. The five treatment names
total ~645px, which will not fit any phone on one line; scrolling them
sideways hides two of the five behind a swipe most people never make.
Wrapping costs 29px of depth and keeps all five visible. The label goes —
at this width it costs more room than it earns. */
.tstrip-label{ display: none; }
.tstrip-inner{ gap: 0; align-items: center; }
.tstrip-links{ flex-wrap: wrap; gap: 2px 16px; }
.tstrip-link{ font-size: 0.76rem; }
/* The underline sits tight under each label when they are stacked. */
.tstrip-link::after{ bottom: -1px; }
}
/* The treatments strip appears on the service pages too, where it marks the
page you are on. Homepage links never carry aria-current, so this is inert
there. */
.tstrip-link[aria-current="page"]{ color: var(--onbg-ink); }
.tstrip-link[aria-current="page"]::after{ right: 0; }
.site-header.is-solid + .tstrip .tstrip-link[aria-current="page"]{ color: var(--ink); }