, so it opens with no JavaScript and every option is a real
link. main.js only adds click-outside and Escape. The panel is brand cream and
red: the WhatsApp green stays on the button itself, which is the documented
exception in CLAUDE.md §9 and not a licence to green the whole menu. */
.wa-pick:not(.wa-pick--bar) {
position: fixed; right: clamp(1rem, 3vw, 2rem); bottom: clamp(1rem, 3vw, 2rem); z-index: 60;
}
.wa-pick > summary { list-style: none; cursor: pointer; }
.wa-pick > summary::-webkit-details-marker { display: none; }
/* The ripple is an invitation to tap. Once the panel is open it has done its
job and would only pull the eye away from the three names. */
.wa-pick[open] .fab::before { animation: none; }
.wa-pick__menu {
position: absolute; right: 0; bottom: calc(100% + 0.75rem);
min-width: 15.5rem; display: flex; flex-direction: column; gap: 0.4rem;
padding: 0.8rem; border-radius: 18px;
background: var(--cream); border: 1px solid var(--line);
box-shadow: 0 16px 44px rgba(58, 47, 48, 0.22);
}
.wa-pick__lead {
margin: 0 0 0.15rem; font-size: 0.68rem; letter-spacing: 0.14em;
text-transform: uppercase; color: var(--red-soft);
}
.wa-pick__item {
display: block; padding: 0.62rem 0.8rem; border-radius: 11px;
background: var(--cream-lift); border: 1px solid var(--line);
color: var(--red); text-decoration: none; font-size: 0.95rem; white-space: nowrap;
transition: background .2s var(--ease), border-color .2s var(--ease);
}
.wa-pick__item:hover, .wa-pick__item:focus-visible {
background: var(--blush); border-color: var(--blush);
}
/* On a phone the same picker hangs off the sticky bar instead, full width. */
.wa-pick--bar > summary { width: 100%; }
.wa-pick--bar .wa-pick__menu {
left: var(--gut); right: var(--gut); bottom: calc(100% + 0.4rem); min-width: 0;
}
/* The mobile bar carries the same green, for the same reason. */
.btn--wa {
background: var(--wa-green); border-color: var(--wa-green); color: var(--wa-ink);
}
.btn--wa:hover { background: var(--wa-green-deep); border-color: var(--wa-green-deep); color: var(--wa-ink); }
@media print { .wa-pick, .nav { display: none; } }
/* ------------------------------------------------------------- footer ---- */
.footer { background: var(--red); color: rgba(238,229,220,.8); padding-block: clamp(3.5rem, 6vw, 5rem) 2.5rem; position: relative; overflow: hidden; }
.footer a { color: var(--cream); text-decoration: none; }
.footer a:hover { text-decoration: underline; text-underline-offset: 4px; }
/* The brand sits above the grid rather than in it (owner's rule, 2026-08-14),
which is what frees all four tracks for menu. See FOOTER_TREE in build.mjs. */
.footer__brand {
display: flex; flex-wrap: wrap; align-items: flex-end; gap: 1rem 3rem;
margin-bottom: clamp(2.5rem, 5vw, 3.5rem);
padding-bottom: clamp(2rem, 4vw, 2.75rem);
border-bottom: 1px solid rgba(238,229,220,.2);
position: relative; z-index: 1;
}
.footer__brand .footer__tag { margin-top: 0; }
.footer__brand > div { display: flex; flex-wrap: wrap; gap: 0.35rem 3rem; }
/* Exactly four tracks, owner's rule, 2026-08-08, restated 2026-08-14: one per
nav category. auto-fit used to be in here, which quietly produced a fifth
track at wide widths and threw the lists out of alignment. Every track is an
equal 1fr now, no cell spans two, and each holds two stacked groups so the
four columns come out six to eight rows each. */
.footer__grid { display: grid; gap: 2.5rem; grid-template-columns: repeat(4, minmax(0, 1fr)); position: relative; z-index: 1; }
.footer__col { display: flex; flex-direction: column; }
.footer__grid h4 { color: var(--blush); font-family: var(--sans); font-size: 0.72rem; text-transform: uppercase; letter-spacing: 0.18em; font-weight: 400; margin-bottom: 1rem; }
/* The second group in a column needs clear air above it or the two lists read
as one. Sized like the old social-list gap: about one and a half rows, which
is plainly a new group without leaving a hole. */
.footer__grid h4 + ul + h4 { margin-top: 1.9rem; }
.footer__grid ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.6rem; font-size: 0.95rem; }
/* A group heading that is also its hub page (Keratin, Color, Treatments,
Hairdressers, Wash) carries the underline. Scalp Treatment, Day Hair Habit
and Find us have no single page, so they stay plain. */
.footer__grid h4.footer__h4--link a { color: var(--blush); text-decoration: underline; text-underline-offset: 6px; }
/* Tablet: 2x2, so the four-column rule degrades to a block rather than a
ragged five. Phone: one column, groups in source order. */
@media (max-width: 980px) {
.footer__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 620px) {
.footer__grid { grid-template-columns: 1fr; }
}
/* Glyphs sit on the text baseline row, never wrap away from their label, and
dim slightly so the words stay the thing you read first. */
.footer__grid li a { display: inline-flex; align-items: center; gap: 0.55rem; }
.footer__grid .ico, .footer__grid .wa-icon {
width: 15px; height: 15px; flex: none; fill: currentColor; opacity: .75;
}
.footer__grid li a:hover .ico, .footer__grid li a:hover .wa-icon { opacity: 1; }
/* Socials share the Day Hair Habit column rather than claiming a fifth one,
which was wrapping them onto their own row under the logo. No divider: the
list gap alone separates them, and a rule here cut the column in half. */
/* Must out-specify `.footer__grid ul { margin: 0 }` (0,1,1), or the margin is
silently dropped and the two lists sit flush.
Sizing this off the 0.6rem gap alone is misleading: at 0.95rem/1.7 each row
also carries ~11px of leading, so a normal row already reads as roughly 20px
of space. 1.6rem on top made it ~46px, more than twice a row. 0.7rem lands
near 31px, about one and a half rows: clearly a new group, not a hole. */
.footer__grid ul.footer__social { margin-top: 0.7rem; }
.footer__tag { margin: 1.5rem 0 0; max-width: 26ch; font-size: 0.95rem; }
.footer__base { margin-top: 3rem; padding-top: 1.75rem; border-top: 1px solid rgba(238,229,220,.2); display: flex; flex-wrap: wrap; gap: 1rem; justify-content: space-between; font-size: 0.82rem; position: relative; z-index: 1; }
/* ------------------------------------------------------ needs finder ---- */
/* "What does your hair need today?", the problem in the guest's own words on
the left, the treatment that fixes it on the right. */
.needs { list-style: none; margin: 0; padding: 0; display: grid; gap: 0; border-top: 1px solid var(--line); }
.needs li { border-bottom: 1px solid var(--line); }
.needs a {
display: grid; grid-template-columns: 1fr auto 1fr; align-items: baseline; gap: 1rem;
padding: 1.1rem 0.5rem; text-decoration: none; color: var(--ink);
transition: background .25s var(--ease), padding-inline .25s var(--ease);
}
.needs a:hover { background: var(--blush); padding-inline: 1.25rem 1.25rem; }
.needs__need { font-family: var(--serif); font-size: clamp(1.1rem, 2vw, 1.4rem); }
.needs__arrow { color: var(--red-soft); }
.needs a:hover .needs__arrow { color: var(--red); }
.needs__fix { text-align: right; font-size: 0.9rem; color: var(--ink-soft); }
.needs a:hover .needs__fix { color: var(--red); }
@media (max-width: 640px) {
.needs a { grid-template-columns: 1fr auto; gap: 0.5rem; }
.needs__fix { grid-column: 1 / -1; text-align: left; }
}
/* --------------------------------------------------- treatment variants -- */
/* Several types of one treatment on one page, see CLAUDE.md §2. */
.variant { display: flex; flex-direction: column; }
.variant__tag { font-family: var(--serif); font-style: italic; color: var(--red); margin: 0.35rem 0 0.75rem; }
/* `margin-top: auto` pushes the button to the card floor so all three line up,
but on the TALLEST card auto resolves to zero and the button ends up welded
to the last line of copy. The bottom margin on whatever precedes it sets the
floor, so the gap holds whether the card is short or full. */
.variant > p:last-of-type,
.variant > .ticks:last-of-type { margin-bottom: 1.75rem; }
.variant .btn { margin-top: auto; align-self: flex-start; }
.ticks--sm { font-size: 0.88rem; gap: 0.45rem; }
/* ---------------------------------------------------- contact page rows -- */
/* The booking band answers "pick a room and chat now" with three equal cards.
This page answers "where is it and how do I get there", so it takes the
opposite shape: one salon per row, a wide map, and the details set as a
proper record. Alternating sides stop three rows reading as a table. */
.loc-rows { display: grid; gap: clamp(3rem, 7vw, 5.5rem); }
.loc-row {
display: grid; gap: clamp(1.75rem, 4vw, 3.25rem);
grid-template-columns: 1.15fr 1fr; align-items: center;
}
.loc-row:nth-child(even) .loc-row__map { order: 2; }
@media (max-width: 860px) {
.loc-row { grid-template-columns: 1fr; }
.loc-row:nth-child(even) .loc-row__map { order: 0; }
}
.loc-row__map {
aspect-ratio: 3 / 2; border-radius: 20px; overflow: hidden;
border: 1px solid var(--line); background: var(--blush);
}
.loc-row__map iframe { display: block; width: 100%; height: 100%; border: 0; }
.loc-row__body h2 { font-size: clamp(2rem, 4vw, 2.9rem); margin: 0.15rem 0 0; }
.loc-row__body .eyebrow { margin-bottom: 0; }
.loc-row__blurb {
font-family: var(--serif); font-style: italic;
font-size: clamp(1.1rem, 1.8vw, 1.35rem); line-height: 1.45;
color: var(--ink); margin: 1rem 0 0; max-width: 34ch;
}
/* A definition list, not a paragraph: address, hours and line are facts a guest
scans for rather than reads. */
.loc-row__facts {
margin: 1.75rem 0 0; display: grid; grid-template-columns: auto 1fr;
gap: 0.5rem 1.5rem; font-size: 0.92rem; align-items: start;
}
.loc-row__facts dt {
font-size: 0.68rem; letter-spacing: 0.16em; text-transform: uppercase;
color: var(--red-soft); padding-top: 0.25rem;
}
.loc-row__facts dd { margin: 0; color: var(--ink-soft); }
.loc-row__facts address { font-style: normal; line-height: 1.55; }
.loc-row .btn-row { margin-top: 1.75rem; }
/* --------------------------------------------------------- hero photo --- */
/* Text left, photo right, in the brand arch. Every photo the salon shoots is
portrait 2:3 and the arch was drawn for that ratio, so the two fit without
cropping anything. Pages with no photo keep the single-column hero. */
/* minmax(0, ...) IS LOAD-BEARING. A bare "1fr" is minmax(auto, 1fr), and an
auto minimum means a track cannot shrink below its content's min-content
width. The photo track holds an ![]()
, so it refused to shrink,
took width from the text track, and collapsed the text to ITS min-content:
the longest single word. That is why the h1 was breaking one word per line
("keratin / smoothing / treatment") no matter what the wrapping rules said.
Zero as the minimum lets both tracks share the row properly. */
.hero-split {
display: grid; gap: clamp(2rem, 5vw, 4rem);
grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); align-items: center;
}
@media (max-width: 900px) {
.hero-split { grid-template-columns: 1fr; }
.hero-shot { max-width: 24rem; margin-inline: auto; }
}
.hero-shot {
margin: 0; aspect-ratio: 2 / 3; overflow: hidden;
background: var(--blush);
}
.hero-shot img { width: 100%; height: 100%; object-fit: cover; display: block; }
/* ---- homepage hero ---------------------------------------------------------
The homepage must NOT look like a service page (owner's call, 2026-08-12).
A service page is text beside one arch. This is text beside a fan of three
result photographs at three sizes, overlapping. Everything below still obeys
the one-viewport cap on .hero, because the booking buttons have to stay on
the first screen; the fan is sized in vh as well as vw so it shrinks on a
short laptop instead of pushing them off. */
.hero--home { text-align: left; }
/* The photo column is now the WIDER of the two, owner's call 2026-08-14: the fan
was the smaller half and read as an illustration beside the copy rather than
the thing the hero is showing. The copy column still holds its measure, the
lede is capped at 42ch below and the two headings are short, so giving the
width to the photographs costs the text nothing. The one-viewport cap on
.hero still governs the height: see the max-height on --a. */
.hero-home {
display: grid;
grid-template-columns: minmax(0, 0.98fr) minmax(0, 1.12fr);
gap: clamp(1.25rem, 3.5vw, 3.25rem);
align-items: center;
width: 100%;
}
/* Two lines, broken on the comma by a
in the markup: owner's call, and it is the brand lockup's own line break rather than an accident of the column width. The title keeps the full display size because it no longer has to fit on one line. */ .hero--home .hero__title { margin-inline: 0; max-width: 11ch; } /* The h1 sits under the brand line and stays small: the h2 above it is the thing a guest reads, this is the thing the page is about. Sans, so it does not compete with the two serif lines it sits between. */ .hero__h1 { font-family: var(--sans); font-size: clamp(0.95rem, 1.5vw, 1.15rem); font-weight: 400; letter-spacing: 0.01em; color: var(--ink); margin: clamp(0.9rem, 2vh, 1.4rem) 0 0; } /* `.hero h1` above sets `max-width: 16ch; margin-inline: auto`, and it BEATS .hero__h1 on specificity (0,1,1 against 0,1,0), so the h1 box was centring itself inside the left column while the h2 above it sat flush left. The two lines started at different x. Reset both here, scoped to the homepage so the centred service-page heroes keep their own behaviour. */ .hero--home .hero__h1 { margin-inline: 0; max-width: 30ch; } .hero__h1 .italic { color: var(--red); } .hero--home .lede { margin-inline: 0; text-align: left; max-width: 42ch; } .hero--home .btn-row { justify-content: flex-start; } /* NOTE ON THE RADIUS. --arch is a full four-value shorthand ("50vw 50vw 0 0"), not a single length, so `border-radius: var(--arch) var(--arch) 16px 16px` expands to ten values, is invalid, and the browser throws the whole declaration away. That is why these rendered as plain rectangles. Write the dome out literally instead of composing it from the token. */ /* NOTHING OVERLAPS. An earlier version pulled the right-hand shots over the tall one with negative margins and it read as a pile, not a composition (owner, twice). The rhythm now comes only from a shared gutter, two column widths and one vertical offset, which is calmer and cannot collide at any width. */ .hero-fan { position: relative; display: grid; /* minmax(0, ...) for the same reason as .hero-split below: these tracks hold images with intrinsic widths, and an auto minimum stops them shrinking. */ grid-template-columns: minmax(0, 1.15fr) minmax(0, 0.85fr); gap: clamp(0.75rem, 1.6vw, 1.25rem); align-items: start; } .hero-fan__shot { margin: 0; overflow: hidden; background: var(--blush); border-radius: 50vw 50vw 18px 18px; } .hero-fan__shot img { width: 100%; height: 100%; object-fit: cover; display: block; } /* The tall dome fills the left column. The right column holds the other two, stacked, and the whole column starts lower so the tops do not line up. */ /* The vh term is what keeps the booking button on the first screen on a short laptop, so it stays. It is the rem cap that was holding the fan small on a big monitor, where there is height to spare. Raised together, vh first. */ .hero-fan__shot--a { grid-column: 1; grid-row: 1 / span 2; aspect-ratio: 2 / 3; max-height: min(70vh, 38rem); } .hero-fan__shot--b { grid-column: 2; aspect-ratio: 4 / 5; margin-top: clamp(1.5rem, 5vh, 3.5rem); } .hero-fan__shot--c { grid-column: 2; aspect-ratio: 4 / 5; border-radius: 18px 18px 50vw 50vw; } @media (max-width: 900px) { /* Stack, and drop the third shot: two photographs still carry the idea, and a third would push the booking buttons under the fold on a phone. */ .hero--home { text-align: center; } .hero-home { grid-template-columns: 1fr; } .hero--home .hero__title, .hero--home .lede { margin-inline: auto; text-align: center; } .hero--home .btn-row { justify-content: center; } .hero-fan { grid-template-columns: 1fr 1fr; max-width: 26rem; margin-inline: auto; } .hero-fan__shot--a { grid-column: 1; grid-row: auto; aspect-ratio: 3 / 4; max-height: none; } .hero-fan__shot--b { grid-column: 2; margin-top: 1.5rem; } .hero-fan__shot--c { display: none; } } /* ---- placed photographs ----------------------------------------------------- One picture answering the sentence beside it. NOT a gallery: the owner's brief is that photographs are scattered through the page with intent, so each of these is chosen to evidence a specific claim and lives next to it. */ .band { display: grid; gap: clamp(1.5rem, 4vw, 3.5rem); align-items: center; } .band--figure-right { grid-template-columns: minmax(0, 1.35fr) minmax(0, 0.65fr); } .band--figure-left { grid-template-columns: minmax(0, 0.65fr) minmax(0, 1.35fr); } .band .section-head { margin-bottom: 0; } .spot-shot { margin: 0; overflow: hidden; background: var(--blush); aspect-ratio: 3 / 4; border-radius: 50vw 50vw 16px 16px; } .spot-shot img { width: 100%; height: 100%; object-fit: cover; display: block; } /* ---- a band carrying the stacked pair (see spotStack in build.mjs) --------- The arch with a small cream-mounted print over its bottom-left corner, the same composition as the shower service hero. Two things this band has to do that a single-photo band does not: 1. Give the figure a real share of the width. --figure-right alone leaves it 0.65fr, and the overlap needs the arch to be big enough that a 52% print hanging off it is still small. 2. Leave room UNDERNEATH. The print hangs 9% below the arch, so without extra bottom padding it crosses into whatever section follows. .hero-page--split solves this with :has() for the hero; same idea here. */ .band--stack { grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); align-items: center; /* WIDER GUTTER THAN A NORMAL BAND, and this is load-bearing, not taste. The small print is positioned at left: -12% of the arch, so it hangs OUT of the figure column by that much. If the gap is narrower than the hang, the print lands on the paragraph: that is exactly what happened at the default clamp(1.5rem, 4vw, 3.5rem), where the hang was ~80px and the gap ~56px. Keep this gap larger than the hang below if either is ever retuned. */ gap: clamp(2rem, 6.5vw, 5.5rem); } .band--stack .hero-stack__second { left: -12%; } /* The copy goes LEFT here. .strip centres its text, which is right for a full-width band but wrong beside a photograph: centred lines run out to both edges of their column, so the longest ones reached under the print no matter how wide the gutter got. Left-aligned, the ragged edge falls away from it. */ .band--stack > div:first-child { text-align: left; } .band--stack .quote, .band--stack .caps { margin-inline: 0; } .strip:has(.hero-stack) { padding-bottom: clamp(5rem, 9vw, 7.5rem); } /* The arch itself. .spot-shot is a 3:4 dome by default; inside the stack it goes taller so the composition matches the hero it was taken from. */ .hero-stack > .spot-shot { aspect-ratio: 2 / 2.6; margin: 0; } @media (max-width: 820px) { .band--figure-right, .band--figure-left, .band--stack { grid-template-columns: 1fr; } .band--figure-left .spot-shot { order: 2; } .band .spot-shot { max-width: 20rem; margin-inline: auto; } /* Cap the STACK, not the arch inside it: a max-width on .spot-shot here would shrink the arch while the print stayed a percentage of it, and the overlap would swallow the photo. */ .band--stack .hero-stack { max-width: 20rem; margin-inline: auto; } .band--stack .hero-stack > .spot-shot { max-width: none; } } /* The hub card is not a link itself: the title links to the treatment and the button books it, so the two destinations stay separable. The title still has to look and behave like the primary link on the card. */ .variant__link { color: inherit; text-decoration: none; transition: color 0.3s var(--ease); } .variant__link:hover { color: var(--red); text-decoration: underline; text-underline-offset: 5px; } .card.variant .btn--sm { margin-top: 1.5rem; } /* ---- menu spread ------------------------------------------------------------ The homepage treatment list, set as a spread rather than a row of equal cards (owner, 2026-08-12: the card grid read as a template). Three things do the work, and all three are deliberate: 1. no boxes. The entries sit straight on the blush ground, separated by a hairline that stops short of the column edge, so it reads as a printed menu rather than as UI. 2. unequal widths. Twelve columns, and each of the six entries is placed by hand at a different span. Nothing lines up into a grid. 3. different heights. Each entry is dropped a different distance, so the eye moves down the page diagonally instead of scanning rows. THE PLACEMENT IS PER-POSITION. Six entries, six nth-child rules. Change the length of the list in build.mjs and these have to change with it. */ .menu-spread { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: clamp(2rem, 5vw, 4.5rem); row-gap: 0; margin-bottom: clamp(2.5rem, 5vw, 3.5rem); border-top: 1px solid var(--line); } /* Every entry identical: same width, same type size, same rule above it, aligned on both axes. The one asymmetry left is the duration sitting out to the right of the name, which is how a printed menu sets a price column. */ .menu-item { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: baseline; column-gap: 1.25rem; text-decoration: none; color: inherit; border-bottom: 1px solid var(--line); padding: clamp(1.1rem, 2.2vw, 1.6rem) 0; transition: background 0.3s var(--ease), padding-inline 0.3s var(--ease); } .menu-item:hover { background: rgba(148, 67, 70, 0.045); padding-inline: 1rem; } .menu-item__name { font-size: clamp(1.15rem, 1.9vw, 1.5rem); line-height: 1.2; margin: 0; transition: color 0.3s var(--ease); } .menu-item:hover .menu-item__name { color: var(--red); } .menu-item__meta { grid-column: 2; grid-row: 1; font-family: var(--sans); font-size: 0.68rem; text-transform: uppercase; letter-spacing: 0.16em; color: var(--ink-soft); white-space: nowrap; } .menu-item__kicker { grid-column: 1 / -1; color: var(--ink-soft); font-size: 0.92rem; margin: 0.4rem 0 0; max-width: 42ch; } @media (max-width: 700px) { .menu-spread { grid-template-columns: 1fr; } } /* ---- needs band ------------------------------------------------------------- Owner's layout, 2026-08-12: two photographs stacked down the left, the question and the whole problem-to-treatment list down the right. The list used to run full width under the heading, which pushed the pictures away from the thing they illustrate and made the section very tall. */ .needs-band { display: grid; grid-template-columns: minmax(0, 0.62fr) minmax(0, 1fr); gap: clamp(1.75rem, 4.5vw, 4rem); align-items: start; } .needs-band__art { display: grid; gap: clamp(0.9rem, 2vw, 1.5rem); } /* The first shot takes the arch, the second is a plain rounded frame, so the pair reads as lead and support rather than two of the same thing. */ .needs-band__art .spot-shot:first-child { aspect-ratio: 4 / 5; border-radius: 50vw 50vw 18px 18px; } .needs-band__art .spot-shot:last-child { aspect-ratio: 5 / 4; border-radius: 18px; } .needs-band__copy .section-head { margin-bottom: clamp(1.5rem, 3vw, 2.25rem); } @media (max-width: 900px) { /* Stack, and put the copy first: on a phone the question has to arrive before the pictures or the section opens on an image with no context. */ .needs-band { grid-template-columns: 1fr; } .needs-band__copy { order: 1; } .needs-band__art { order: 2; grid-template-columns: 1fr 1fr; } } /* A proof card carries its evidence at the top: photo bled to the card edge, then the number, then the claim. Equal heights across the row so the three read as one set, which is the whole point of numbering them. */ .grid--proof { align-items: stretch; } .card--proof { padding-top: 0; overflow: hidden; display: flex; flex-direction: column; transition: border-color 0.35s var(--ease), transform 0.35s var(--ease); } .card--proof:hover { border-color: var(--red-soft); transform: translateY(-3px); } .card--proof .spot-shot { aspect-ratio: 4 / 3; border-radius: 0; margin: 0 calc(var(--card-pad, 1.75rem) * -1) clamp(1.25rem, 2.5vw, 1.75rem); width: calc(100% + var(--card-pad, 1.75rem) * 2); } /* The number sits on a hairline that runs to the edge of the card: it reads as an index rather than as a heading competing with the red title under it. Deep ink brown, NOT the washed pink it used to be (owner, 2026-08-12), which sat too close to the title colour to look deliberate. */ .card--proof .card__num { margin: 0 0 0.65rem; color: var(--ink); font-size: 1.35rem; letter-spacing: 0.06em; display: flex; align-items: center; gap: 0.9rem; } .card--proof .card__num::after { content: ""; flex: 1 1 auto; height: 1px; background: var(--line); } .card--proof h3 { margin-bottom: 0.75rem; } .card--proof p:last-child { margin-bottom: 0; } /* ---- photo flow ------------------------------------------------------------ Several photographs in a band, deliberately NOT a grid of squares (owner's brief 2026-08-12). Three things do the work: the arch silhouette, sizes that differ down the row, and every second shot dropped below its neighbour. The stagger is what makes four pictures read as a composition rather than a contact sheet, so do not "tidy" it into equal boxes. */ .photo-flow { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(210px, 44%), 1fr)); gap: clamp(0.9rem, 2.4vw, 2rem); align-items: start; } .photo-flow__shot { margin: 0; position: relative; overflow: hidden; background: var(--blush); aspect-ratio: 2 / 3; border-radius: 50vw 50vw 16px 16px; } .photo-flow__shot img { width: 100%; height: 100%; object-fit: cover; display: block; } /* The stagger. Even children ride lower, and every third is a shallower crop, so the row has three different heights in it rather than one. */ .photo-flow__shot:nth-child(even) { margin-top: clamp(1.25rem, 4.5vw, 3.25rem); } .photo-flow__shot:nth-child(3n) { aspect-ratio: 3 / 4; } .photo-flow__shot:nth-child(4n) { border-radius: 16px 16px 50vw 50vw; } /* BEFORE / AFTER chip, for a strip that is a set of pairs. It sits inside the crop rather than under it, because the frame is an arch and a caption hanging below would break the shape line. The 4n frame is the arch upside down, so its chip moves to the square end instead of the curved one. */ .photo-flow__cap { position: absolute; bottom: 0.9rem; left: 50%; translate: -50% 0; background: var(--cream); color: var(--ink); font-size: 0.65rem; letter-spacing: 0.14em; text-transform: uppercase; padding: 0.3rem 0.75rem; border-radius: 999px; white-space: nowrap; } .photo-flow__shot:nth-child(4n) .photo-flow__cap { bottom: auto; top: 0.9rem; } @media (max-width: 560px) { /* Two up on a phone, still staggered. One up would make a four-photo band a very long scroll for very little. */ .photo-flow { grid-template-columns: repeat(2, 1fr); } .photo-flow__shot:nth-child(even) { margin-top: 1.25rem; } } .section-head--center { max-width: 46ch; margin-inline: auto; text-align: center; } /* ---- inverted page heading ------------------------------------------------ Owner's rule, 2026-08-12: the primary keyword is the h1 and it is SMALL; the menu name is the h2 below it and carries the display size. The usual hierarchy is upside down on purpose, so the type has to do the work the tag names normally do. The keyword reads as an eyebrow, the name reads as the headline, and nothing about the source order changes for a screen reader. */ .page-kw { font-family: var(--sans); font-size: 0.78rem; font-weight: 400; letter-spacing: 0.16em; text-transform: uppercase; color: var(--red); margin: 0 0 0.5rem; max-width: none; /* ONE LINE. The keyword is a single phrase and breaking it mid-phrase ("BALAYAGE HAIR / SALON") reads as a mistake. The longest keyword on the site, "keratin hair straightening treatment near me", is about 340px at this size, which clears the hero column on every desktop width. */ white-space: nowrap; } @media (max-width: 700px) { /* Under this the longest keyword would run off the screen, so let it wrap rather than overflow. Most pages still hold one line. */ .page-kw { white-space: normal; } } .page-name { font-family: var(--serif); font-size: clamp(2.4rem, 5.4vw, 4rem); line-height: 1.04; font-weight: 400; margin: 0 0 1rem; max-width: 18ch; } /* The h1 now opens the block (the category eyebrow above it is gone), so it needs a little air under the breadcrumb rather than a rule joining it to a line that no longer exists. */ .hero-page .crumbs + .page-kw { margin-top: 1.5rem; } /* The same split used mid-page rather than in a hero, which is where the homepage photo sits. The section head inside it must drop its own bottom gap or it double-spaces against whatever the band sits above. */ .split-band { margin-bottom: clamp(2.5rem, 5vw, 4rem); } .split-band .section-head { margin-bottom: 0; } /* The hero already carries its own top padding; the split version needs a little less of it so the arch does not push the fold down. */ .hero-page--split { padding-block: clamp(2.5rem, 5vw, 4rem) clamp(3rem, 6vw, 5rem); } /* ---- style: stack ------------------------------------------------------- A second, smaller photo layered over the corner of the arch. Currently only on Hair Wash & Blow Dry, as a template test. The cream ring is what makes it read as two photographs rather than one collage, so it must match the page background, not the card background. */ .hero-stack { position: relative; } .hero-stack .hero-shot { margin: 0; } .hero-stack__second { position: absolute; left: -14%; bottom: -9%; width: 52%; margin: 0; aspect-ratio: 4 / 5; overflow: hidden; border-radius: 14px; border: 8px solid var(--cream); box-shadow: 0 14px 34px rgba(58, 47, 48, .16); background: var(--blush); } .hero-stack__second img { width: 100%; height: 100%; object-fit: cover; display: block; } /* The overlap hangs below the arch, so the section needs room or it collides with whatever follows. */ .hero-page--split:has(.hero-stack) { padding-bottom: clamp(5rem, 9vw, 8rem); } @media (max-width: 900px) { .hero-stack { max-width: 24rem; margin-inline: auto; } .hero-stack__second { left: auto; right: -8%; bottom: -12%; width: 46%; } } @media (max-width: 460px) { /* Below this the overlap eats the photo it is sitting on. */ .hero-stack__second { display: none; } } /* ---------------------------------------------------------- lead form --- */ /* The only form on the site, on the academy page. Sits on the red band, so the fields are cream and the labels blush. */ .lead-form { margin-top: 2.25rem; display: grid; gap: 1.1rem 1.5rem; grid-template-columns: repeat(2, minmax(0, 1fr)); } @media (max-width: 720px) { .lead-form { grid-template-columns: 1fr; } } .lead-form__row--wide, .lead-form__foot, .lead-form__status { grid-column: 1 / -1; } .lead-form__row { display: flex; flex-direction: column; gap: 0.4rem; } .lead-form label { font-size: 0.72rem; letter-spacing: 0.16em; text-transform: uppercase; color: var(--blush); } .lead-form input, .lead-form textarea { font-family: var(--sans); font-size: 1rem; font-weight: 300; color: var(--ink); background: var(--cream); border: 1px solid var(--cream); border-radius: 12px; padding: 0.8rem 1rem; width: 100%; transition: border-color .2s var(--ease), box-shadow .2s var(--ease); } .lead-form textarea { resize: vertical; min-height: 5.5rem; } .lead-form input::placeholder, .lead-form textarea::placeholder { color: var(--ink-soft); opacity: .7; } .lead-form input:focus-visible, .lead-form textarea:focus-visible { outline: none; border-color: var(--mocha); box-shadow: 0 0 0 3px rgba(178,150,132,.45); } .lead-form input[aria-invalid="true"] { border-color: var(--blush); box-shadow: 0 0 0 3px rgba(245,220,211,.5); } .lead-form__foot { display: flex; flex-wrap: wrap; align-items: center; gap: 1rem 1.5rem; margin-top: 0.35rem; } .lead-form__foot .btn { background: var(--cream); color: var(--red); border-color: var(--cream); } .lead-form__foot .btn:hover { background: var(--blush); border-color: var(--blush); } .lead-form__note { margin: 0; font-size: 0.82rem; color: rgba(238,229,220,.72); max-width: 40ch; } .lead-form__status { margin: 0; font-size: 0.95rem; color: var(--cream); } .lead-form__status:empty { display: none; } .lead-form.is-sent .lead-form__row, .lead-form.is-sent .lead-form__foot { display: none; } .lead-form.is-sent .lead-form__status { font-family: var(--serif); font-size: clamp(1.15rem, 2.2vw, 1.5rem); line-height: 1.45; margin-top: 1rem; } .lead-alt { margin: 1.5rem 0 0; font-size: 0.9rem; color: rgba(238,229,220,.78); } .lead-alt a { color: var(--cream); } /* ------------------------------------------------------------ reviews --- */ /* Real Google reviews, verbatim. Never restyled into a pull quote that implies more than the guest wrote, and never trimmed to make it fit. */ .review { display: flex; flex-direction: column; } .review__stars { color: var(--red-soft); font-size: 1rem; letter-spacing: 0.18em; line-height: 1; } .review blockquote { margin: 1rem 0 0; } .review blockquote p { margin: 0; font-family: var(--serif); font-size: 1.12rem; line-height: 1.5; color: var(--ink); } .review figcaption { margin-top: auto; padding-top: 1.35rem; display: flex; flex-direction: column; gap: 0.1rem; } .review__who { font-size: 0.9rem; color: var(--red); } .review__meta { font-size: 0.76rem; letter-spacing: 0.14em; text-transform: uppercase; color: var(--ink-soft); } /* -------------------------------------------------------------- a11y ---- */ .visually-hidden { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; } .skip-link { position: absolute; left: 50%; translate: -50% -120%; z-index: 100; background: var(--red); color: var(--cream); padding: 0.75rem 1.5rem; border-radius: 0 0 12px 12px; text-decoration: none; font-size: 0.85rem; transition: translate .2s var(--ease); } .skip-link:focus { translate: -50% 0; } :focus-visible { outline: 2px solid var(--red); outline-offset: 3px; border-radius: 4px; } /* ------------------------------------------------------------- reveal ---- */ .reveal { opacity: 0; transform: translateY(18px); transition: opacity .7s var(--ease), transform .7s var(--ease); } .reveal.is-in { opacity: 1; transform: none; } @media (prefers-reduced-motion: reduce) { .reveal { opacity: 1; transform: none; } } /* ---- consent banner, EU visitors only ------------------------------------- Shown only when tools/build.mjs has emitted the analytics script AND the visitor's country came back as EU, EEA, UK or Switzerland. Everyone else never sees it and never gets the markup unhidden. It is a
in the markup: owner's call, and it is the brand lockup's own line break rather than an accident of the column width. The title keeps the full display size because it no longer has to fit on one line. */ .hero--home .hero__title { margin-inline: 0; max-width: 11ch; } /* The h1 sits under the brand line and stays small: the h2 above it is the thing a guest reads, this is the thing the page is about. Sans, so it does not compete with the two serif lines it sits between. */ .hero__h1 { font-family: var(--sans); font-size: clamp(0.95rem, 1.5vw, 1.15rem); font-weight: 400; letter-spacing: 0.01em; color: var(--ink); margin: clamp(0.9rem, 2vh, 1.4rem) 0 0; } /* `.hero h1` above sets `max-width: 16ch; margin-inline: auto`, and it BEATS .hero__h1 on specificity (0,1,1 against 0,1,0), so the h1 box was centring itself inside the left column while the h2 above it sat flush left. The two lines started at different x. Reset both here, scoped to the homepage so the centred service-page heroes keep their own behaviour. */ .hero--home .hero__h1 { margin-inline: 0; max-width: 30ch; } .hero__h1 .italic { color: var(--red); } .hero--home .lede { margin-inline: 0; text-align: left; max-width: 42ch; } .hero--home .btn-row { justify-content: flex-start; } /* NOTE ON THE RADIUS. --arch is a full four-value shorthand ("50vw 50vw 0 0"), not a single length, so `border-radius: var(--arch) var(--arch) 16px 16px` expands to ten values, is invalid, and the browser throws the whole declaration away. That is why these rendered as plain rectangles. Write the dome out literally instead of composing it from the token. */ /* NOTHING OVERLAPS. An earlier version pulled the right-hand shots over the tall one with negative margins and it read as a pile, not a composition (owner, twice). The rhythm now comes only from a shared gutter, two column widths and one vertical offset, which is calmer and cannot collide at any width. */ .hero-fan { position: relative; display: grid; /* minmax(0, ...) for the same reason as .hero-split below: these tracks hold images with intrinsic widths, and an auto minimum stops them shrinking. */ grid-template-columns: minmax(0, 1.15fr) minmax(0, 0.85fr); gap: clamp(0.75rem, 1.6vw, 1.25rem); align-items: start; } .hero-fan__shot { margin: 0; overflow: hidden; background: var(--blush); border-radius: 50vw 50vw 18px 18px; } .hero-fan__shot img { width: 100%; height: 100%; object-fit: cover; display: block; } /* The tall dome fills the left column. The right column holds the other two, stacked, and the whole column starts lower so the tops do not line up. */ /* The vh term is what keeps the booking button on the first screen on a short laptop, so it stays. It is the rem cap that was holding the fan small on a big monitor, where there is height to spare. Raised together, vh first. */ .hero-fan__shot--a { grid-column: 1; grid-row: 1 / span 2; aspect-ratio: 2 / 3; max-height: min(70vh, 38rem); } .hero-fan__shot--b { grid-column: 2; aspect-ratio: 4 / 5; margin-top: clamp(1.5rem, 5vh, 3.5rem); } .hero-fan__shot--c { grid-column: 2; aspect-ratio: 4 / 5; border-radius: 18px 18px 50vw 50vw; } @media (max-width: 900px) { /* Stack, and drop the third shot: two photographs still carry the idea, and a third would push the booking buttons under the fold on a phone. */ .hero--home { text-align: center; } .hero-home { grid-template-columns: 1fr; } .hero--home .hero__title, .hero--home .lede { margin-inline: auto; text-align: center; } .hero--home .btn-row { justify-content: center; } .hero-fan { grid-template-columns: 1fr 1fr; max-width: 26rem; margin-inline: auto; } .hero-fan__shot--a { grid-column: 1; grid-row: auto; aspect-ratio: 3 / 4; max-height: none; } .hero-fan__shot--b { grid-column: 2; margin-top: 1.5rem; } .hero-fan__shot--c { display: none; } } /* ---- placed photographs ----------------------------------------------------- One picture answering the sentence beside it. NOT a gallery: the owner's brief is that photographs are scattered through the page with intent, so each of these is chosen to evidence a specific claim and lives next to it. */ .band { display: grid; gap: clamp(1.5rem, 4vw, 3.5rem); align-items: center; } .band--figure-right { grid-template-columns: minmax(0, 1.35fr) minmax(0, 0.65fr); } .band--figure-left { grid-template-columns: minmax(0, 0.65fr) minmax(0, 1.35fr); } .band .section-head { margin-bottom: 0; } .spot-shot { margin: 0; overflow: hidden; background: var(--blush); aspect-ratio: 3 / 4; border-radius: 50vw 50vw 16px 16px; } .spot-shot img { width: 100%; height: 100%; object-fit: cover; display: block; } /* ---- a band carrying the stacked pair (see spotStack in build.mjs) --------- The arch with a small cream-mounted print over its bottom-left corner, the same composition as the shower service hero. Two things this band has to do that a single-photo band does not: 1. Give the figure a real share of the width. --figure-right alone leaves it 0.65fr, and the overlap needs the arch to be big enough that a 52% print hanging off it is still small. 2. Leave room UNDERNEATH. The print hangs 9% below the arch, so without extra bottom padding it crosses into whatever section follows. .hero-page--split solves this with :has() for the hero; same idea here. */ .band--stack { grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); align-items: center; /* WIDER GUTTER THAN A NORMAL BAND, and this is load-bearing, not taste. The small print is positioned at left: -12% of the arch, so it hangs OUT of the figure column by that much. If the gap is narrower than the hang, the print lands on the paragraph: that is exactly what happened at the default clamp(1.5rem, 4vw, 3.5rem), where the hang was ~80px and the gap ~56px. Keep this gap larger than the hang below if either is ever retuned. */ gap: clamp(2rem, 6.5vw, 5.5rem); } .band--stack .hero-stack__second { left: -12%; } /* The copy goes LEFT here. .strip centres its text, which is right for a full-width band but wrong beside a photograph: centred lines run out to both edges of their column, so the longest ones reached under the print no matter how wide the gutter got. Left-aligned, the ragged edge falls away from it. */ .band--stack > div:first-child { text-align: left; } .band--stack .quote, .band--stack .caps { margin-inline: 0; } .strip:has(.hero-stack) { padding-bottom: clamp(5rem, 9vw, 7.5rem); } /* The arch itself. .spot-shot is a 3:4 dome by default; inside the stack it goes taller so the composition matches the hero it was taken from. */ .hero-stack > .spot-shot { aspect-ratio: 2 / 2.6; margin: 0; } @media (max-width: 820px) { .band--figure-right, .band--figure-left, .band--stack { grid-template-columns: 1fr; } .band--figure-left .spot-shot { order: 2; } .band .spot-shot { max-width: 20rem; margin-inline: auto; } /* Cap the STACK, not the arch inside it: a max-width on .spot-shot here would shrink the arch while the print stayed a percentage of it, and the overlap would swallow the photo. */ .band--stack .hero-stack { max-width: 20rem; margin-inline: auto; } .band--stack .hero-stack > .spot-shot { max-width: none; } } /* The hub card is not a link itself: the title links to the treatment and the button books it, so the two destinations stay separable. The title still has to look and behave like the primary link on the card. */ .variant__link { color: inherit; text-decoration: none; transition: color 0.3s var(--ease); } .variant__link:hover { color: var(--red); text-decoration: underline; text-underline-offset: 5px; } .card.variant .btn--sm { margin-top: 1.5rem; } /* ---- menu spread ------------------------------------------------------------ The homepage treatment list, set as a spread rather than a row of equal cards (owner, 2026-08-12: the card grid read as a template). Three things do the work, and all three are deliberate: 1. no boxes. The entries sit straight on the blush ground, separated by a hairline that stops short of the column edge, so it reads as a printed menu rather than as UI. 2. unequal widths. Twelve columns, and each of the six entries is placed by hand at a different span. Nothing lines up into a grid. 3. different heights. Each entry is dropped a different distance, so the eye moves down the page diagonally instead of scanning rows. THE PLACEMENT IS PER-POSITION. Six entries, six nth-child rules. Change the length of the list in build.mjs and these have to change with it. */ .menu-spread { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: clamp(2rem, 5vw, 4.5rem); row-gap: 0; margin-bottom: clamp(2.5rem, 5vw, 3.5rem); border-top: 1px solid var(--line); } /* Every entry identical: same width, same type size, same rule above it, aligned on both axes. The one asymmetry left is the duration sitting out to the right of the name, which is how a printed menu sets a price column. */ .menu-item { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: baseline; column-gap: 1.25rem; text-decoration: none; color: inherit; border-bottom: 1px solid var(--line); padding: clamp(1.1rem, 2.2vw, 1.6rem) 0; transition: background 0.3s var(--ease), padding-inline 0.3s var(--ease); } .menu-item:hover { background: rgba(148, 67, 70, 0.045); padding-inline: 1rem; } .menu-item__name { font-size: clamp(1.15rem, 1.9vw, 1.5rem); line-height: 1.2; margin: 0; transition: color 0.3s var(--ease); } .menu-item:hover .menu-item__name { color: var(--red); } .menu-item__meta { grid-column: 2; grid-row: 1; font-family: var(--sans); font-size: 0.68rem; text-transform: uppercase; letter-spacing: 0.16em; color: var(--ink-soft); white-space: nowrap; } .menu-item__kicker { grid-column: 1 / -1; color: var(--ink-soft); font-size: 0.92rem; margin: 0.4rem 0 0; max-width: 42ch; } @media (max-width: 700px) { .menu-spread { grid-template-columns: 1fr; } } /* ---- needs band ------------------------------------------------------------- Owner's layout, 2026-08-12: two photographs stacked down the left, the question and the whole problem-to-treatment list down the right. The list used to run full width under the heading, which pushed the pictures away from the thing they illustrate and made the section very tall. */ .needs-band { display: grid; grid-template-columns: minmax(0, 0.62fr) minmax(0, 1fr); gap: clamp(1.75rem, 4.5vw, 4rem); align-items: start; } .needs-band__art { display: grid; gap: clamp(0.9rem, 2vw, 1.5rem); } /* The first shot takes the arch, the second is a plain rounded frame, so the pair reads as lead and support rather than two of the same thing. */ .needs-band__art .spot-shot:first-child { aspect-ratio: 4 / 5; border-radius: 50vw 50vw 18px 18px; } .needs-band__art .spot-shot:last-child { aspect-ratio: 5 / 4; border-radius: 18px; } .needs-band__copy .section-head { margin-bottom: clamp(1.5rem, 3vw, 2.25rem); } @media (max-width: 900px) { /* Stack, and put the copy first: on a phone the question has to arrive before the pictures or the section opens on an image with no context. */ .needs-band { grid-template-columns: 1fr; } .needs-band__copy { order: 1; } .needs-band__art { order: 2; grid-template-columns: 1fr 1fr; } } /* A proof card carries its evidence at the top: photo bled to the card edge, then the number, then the claim. Equal heights across the row so the three read as one set, which is the whole point of numbering them. */ .grid--proof { align-items: stretch; } .card--proof { padding-top: 0; overflow: hidden; display: flex; flex-direction: column; transition: border-color 0.35s var(--ease), transform 0.35s var(--ease); } .card--proof:hover { border-color: var(--red-soft); transform: translateY(-3px); } .card--proof .spot-shot { aspect-ratio: 4 / 3; border-radius: 0; margin: 0 calc(var(--card-pad, 1.75rem) * -1) clamp(1.25rem, 2.5vw, 1.75rem); width: calc(100% + var(--card-pad, 1.75rem) * 2); } /* The number sits on a hairline that runs to the edge of the card: it reads as an index rather than as a heading competing with the red title under it. Deep ink brown, NOT the washed pink it used to be (owner, 2026-08-12), which sat too close to the title colour to look deliberate. */ .card--proof .card__num { margin: 0 0 0.65rem; color: var(--ink); font-size: 1.35rem; letter-spacing: 0.06em; display: flex; align-items: center; gap: 0.9rem; } .card--proof .card__num::after { content: ""; flex: 1 1 auto; height: 1px; background: var(--line); } .card--proof h3 { margin-bottom: 0.75rem; } .card--proof p:last-child { margin-bottom: 0; } /* ---- photo flow ------------------------------------------------------------ Several photographs in a band, deliberately NOT a grid of squares (owner's brief 2026-08-12). Three things do the work: the arch silhouette, sizes that differ down the row, and every second shot dropped below its neighbour. The stagger is what makes four pictures read as a composition rather than a contact sheet, so do not "tidy" it into equal boxes. */ .photo-flow { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(210px, 44%), 1fr)); gap: clamp(0.9rem, 2.4vw, 2rem); align-items: start; } .photo-flow__shot { margin: 0; position: relative; overflow: hidden; background: var(--blush); aspect-ratio: 2 / 3; border-radius: 50vw 50vw 16px 16px; } .photo-flow__shot img { width: 100%; height: 100%; object-fit: cover; display: block; } /* The stagger. Even children ride lower, and every third is a shallower crop, so the row has three different heights in it rather than one. */ .photo-flow__shot:nth-child(even) { margin-top: clamp(1.25rem, 4.5vw, 3.25rem); } .photo-flow__shot:nth-child(3n) { aspect-ratio: 3 / 4; } .photo-flow__shot:nth-child(4n) { border-radius: 16px 16px 50vw 50vw; } /* BEFORE / AFTER chip, for a strip that is a set of pairs. It sits inside the crop rather than under it, because the frame is an arch and a caption hanging below would break the shape line. The 4n frame is the arch upside down, so its chip moves to the square end instead of the curved one. */ .photo-flow__cap { position: absolute; bottom: 0.9rem; left: 50%; translate: -50% 0; background: var(--cream); color: var(--ink); font-size: 0.65rem; letter-spacing: 0.14em; text-transform: uppercase; padding: 0.3rem 0.75rem; border-radius: 999px; white-space: nowrap; } .photo-flow__shot:nth-child(4n) .photo-flow__cap { bottom: auto; top: 0.9rem; } @media (max-width: 560px) { /* Two up on a phone, still staggered. One up would make a four-photo band a very long scroll for very little. */ .photo-flow { grid-template-columns: repeat(2, 1fr); } .photo-flow__shot:nth-child(even) { margin-top: 1.25rem; } } .section-head--center { max-width: 46ch; margin-inline: auto; text-align: center; } /* ---- inverted page heading ------------------------------------------------ Owner's rule, 2026-08-12: the primary keyword is the h1 and it is SMALL; the menu name is the h2 below it and carries the display size. The usual hierarchy is upside down on purpose, so the type has to do the work the tag names normally do. The keyword reads as an eyebrow, the name reads as the headline, and nothing about the source order changes for a screen reader. */ .page-kw { font-family: var(--sans); font-size: 0.78rem; font-weight: 400; letter-spacing: 0.16em; text-transform: uppercase; color: var(--red); margin: 0 0 0.5rem; max-width: none; /* ONE LINE. The keyword is a single phrase and breaking it mid-phrase ("BALAYAGE HAIR / SALON") reads as a mistake. The longest keyword on the site, "keratin hair straightening treatment near me", is about 340px at this size, which clears the hero column on every desktop width. */ white-space: nowrap; } @media (max-width: 700px) { /* Under this the longest keyword would run off the screen, so let it wrap rather than overflow. Most pages still hold one line. */ .page-kw { white-space: normal; } } .page-name { font-family: var(--serif); font-size: clamp(2.4rem, 5.4vw, 4rem); line-height: 1.04; font-weight: 400; margin: 0 0 1rem; max-width: 18ch; } /* The h1 now opens the block (the category eyebrow above it is gone), so it needs a little air under the breadcrumb rather than a rule joining it to a line that no longer exists. */ .hero-page .crumbs + .page-kw { margin-top: 1.5rem; } /* The same split used mid-page rather than in a hero, which is where the homepage photo sits. The section head inside it must drop its own bottom gap or it double-spaces against whatever the band sits above. */ .split-band { margin-bottom: clamp(2.5rem, 5vw, 4rem); } .split-band .section-head { margin-bottom: 0; } /* The hero already carries its own top padding; the split version needs a little less of it so the arch does not push the fold down. */ .hero-page--split { padding-block: clamp(2.5rem, 5vw, 4rem) clamp(3rem, 6vw, 5rem); } /* ---- style: stack ------------------------------------------------------- A second, smaller photo layered over the corner of the arch. Currently only on Hair Wash & Blow Dry, as a template test. The cream ring is what makes it read as two photographs rather than one collage, so it must match the page background, not the card background. */ .hero-stack { position: relative; } .hero-stack .hero-shot { margin: 0; } .hero-stack__second { position: absolute; left: -14%; bottom: -9%; width: 52%; margin: 0; aspect-ratio: 4 / 5; overflow: hidden; border-radius: 14px; border: 8px solid var(--cream); box-shadow: 0 14px 34px rgba(58, 47, 48, .16); background: var(--blush); } .hero-stack__second img { width: 100%; height: 100%; object-fit: cover; display: block; } /* The overlap hangs below the arch, so the section needs room or it collides with whatever follows. */ .hero-page--split:has(.hero-stack) { padding-bottom: clamp(5rem, 9vw, 8rem); } @media (max-width: 900px) { .hero-stack { max-width: 24rem; margin-inline: auto; } .hero-stack__second { left: auto; right: -8%; bottom: -12%; width: 46%; } } @media (max-width: 460px) { /* Below this the overlap eats the photo it is sitting on. */ .hero-stack__second { display: none; } } /* ---------------------------------------------------------- lead form --- */ /* The only form on the site, on the academy page. Sits on the red band, so the fields are cream and the labels blush. */ .lead-form { margin-top: 2.25rem; display: grid; gap: 1.1rem 1.5rem; grid-template-columns: repeat(2, minmax(0, 1fr)); } @media (max-width: 720px) { .lead-form { grid-template-columns: 1fr; } } .lead-form__row--wide, .lead-form__foot, .lead-form__status { grid-column: 1 / -1; } .lead-form__row { display: flex; flex-direction: column; gap: 0.4rem; } .lead-form label { font-size: 0.72rem; letter-spacing: 0.16em; text-transform: uppercase; color: var(--blush); } .lead-form input, .lead-form textarea { font-family: var(--sans); font-size: 1rem; font-weight: 300; color: var(--ink); background: var(--cream); border: 1px solid var(--cream); border-radius: 12px; padding: 0.8rem 1rem; width: 100%; transition: border-color .2s var(--ease), box-shadow .2s var(--ease); } .lead-form textarea { resize: vertical; min-height: 5.5rem; } .lead-form input::placeholder, .lead-form textarea::placeholder { color: var(--ink-soft); opacity: .7; } .lead-form input:focus-visible, .lead-form textarea:focus-visible { outline: none; border-color: var(--mocha); box-shadow: 0 0 0 3px rgba(178,150,132,.45); } .lead-form input[aria-invalid="true"] { border-color: var(--blush); box-shadow: 0 0 0 3px rgba(245,220,211,.5); } .lead-form__foot { display: flex; flex-wrap: wrap; align-items: center; gap: 1rem 1.5rem; margin-top: 0.35rem; } .lead-form__foot .btn { background: var(--cream); color: var(--red); border-color: var(--cream); } .lead-form__foot .btn:hover { background: var(--blush); border-color: var(--blush); } .lead-form__note { margin: 0; font-size: 0.82rem; color: rgba(238,229,220,.72); max-width: 40ch; } .lead-form__status { margin: 0; font-size: 0.95rem; color: var(--cream); } .lead-form__status:empty { display: none; } .lead-form.is-sent .lead-form__row, .lead-form.is-sent .lead-form__foot { display: none; } .lead-form.is-sent .lead-form__status { font-family: var(--serif); font-size: clamp(1.15rem, 2.2vw, 1.5rem); line-height: 1.45; margin-top: 1rem; } .lead-alt { margin: 1.5rem 0 0; font-size: 0.9rem; color: rgba(238,229,220,.78); } .lead-alt a { color: var(--cream); } /* ------------------------------------------------------------ reviews --- */ /* Real Google reviews, verbatim. Never restyled into a pull quote that implies more than the guest wrote, and never trimmed to make it fit. */ .review { display: flex; flex-direction: column; } .review__stars { color: var(--red-soft); font-size: 1rem; letter-spacing: 0.18em; line-height: 1; } .review blockquote { margin: 1rem 0 0; } .review blockquote p { margin: 0; font-family: var(--serif); font-size: 1.12rem; line-height: 1.5; color: var(--ink); } .review figcaption { margin-top: auto; padding-top: 1.35rem; display: flex; flex-direction: column; gap: 0.1rem; } .review__who { font-size: 0.9rem; color: var(--red); } .review__meta { font-size: 0.76rem; letter-spacing: 0.14em; text-transform: uppercase; color: var(--ink-soft); } /* -------------------------------------------------------------- a11y ---- */ .visually-hidden { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; } .skip-link { position: absolute; left: 50%; translate: -50% -120%; z-index: 100; background: var(--red); color: var(--cream); padding: 0.75rem 1.5rem; border-radius: 0 0 12px 12px; text-decoration: none; font-size: 0.85rem; transition: translate .2s var(--ease); } .skip-link:focus { translate: -50% 0; } :focus-visible { outline: 2px solid var(--red); outline-offset: 3px; border-radius: 4px; } /* ------------------------------------------------------------- reveal ---- */ .reveal { opacity: 0; transform: translateY(18px); transition: opacity .7s var(--ease), transform .7s var(--ease); } .reveal.is-in { opacity: 1; transform: none; } @media (prefers-reduced-motion: reduce) { .reveal { opacity: 1; transform: none; } } /* ---- consent banner, EU visitors only ------------------------------------- Shown only when tools/build.mjs has emitted the analytics script AND the visitor's country came back as EU, EEA, UK or Switzerland. Everyone else never sees it and never gets the markup unhidden. It is a
in the
HTML rather than DOM built by JS, so it inherits the palette here rather than
carrying inline styles, the same pattern the nav dropdowns use. */
.consent {
position: fixed; inset: auto 0 0 0; z-index: 60;
background: var(--cream-lift);
border-top: 1px solid var(--line);
padding: 1rem var(--gut) calc(1rem + env(safe-area-inset-bottom));
box-shadow: 0 -2px 24px rgba(94, 68, 65, .1);
}
.consent[hidden] { display: none; }
.consent__inner {
max-width: var(--wrap); margin-inline: auto;
display: flex; flex-wrap: wrap; align-items: center; gap: 1rem 1.5rem;
justify-content: space-between;
}
.consent__text { margin: 0; color: var(--ink); font-size: .9375rem; max-width: 62ch; }
.consent__text a { color: var(--red); }
.consent__actions { display: flex; gap: .625rem; flex: none; }
@media (max-width: 560px) {
.consent__actions { width: 100%; }
.consent__actions .btn { flex: 1; justify-content: center; }
}