*/
.shelf-placeholder {
display: flex;
align-items: center;
justify-content: center;
text-align: center;
background: linear-gradient(150deg, var(--green-deep) 0%, var(--green) 70%, #1B4A38 100%);
position: relative;
}
.shelf-placeholder::before {
content: "";
position: absolute;
inset: 12px;
border: 1px solid rgba(196, 160, 82, 0.4);
border-radius: 6px;
}
.shelf-placeholder span {
position: relative;
font-family: var(--font-display);
font-size: 1.35rem;
line-height: 1.25;
color: var(--gold);
padding: 0 18px;
}
/* ---------- Nav: fits on one line now that there are more items ---------- */
.nav-links { gap: 20px; }
.nav-links > li > a:not(.btn) { font-size: 0.86rem; white-space: nowrap; }
.nav-links .btn { padding: 11px 18px; font-size: 0.82rem; white-space: nowrap; }
@media (max-width: 1240px) and (min-width: 1080px) {
.nav-links { gap: 14px; }
.nav-links > li > a:not(.btn) { font-size: 0.8rem; }
.nav-links .btn { padding: 10px 14px; font-size: 0.78rem; }
}
/* The menu bar carries eight items now, and even squeezed it needs a little
over 1000px to sit on one line. Below that it becomes the drop-down menu.
This used to switch at 720px, which left every width from a tablet up to a
small laptop showing a desktop nav that ran off the side of the screen and
dragged a horizontal scrollbar onto every page. */
@media (max-width: 1079px) {
.nav-toggle { display: block; }
.nav-links {
display: none;
position: absolute;
top: 100%;
left: 0;
right: 0;
background: var(--green-deep);
flex-direction: column;
align-items: flex-start;
padding: 24px;
gap: 18px;
border-bottom: 1px solid rgba(196, 160, 82, 0.25);
}
.nav-links.open { display: flex; }
}
/* ---------- Empty photo slot ----------
Holds the space a photo will fill, so the layout is correct before the
photo exists. To use a real photo, replace the whole
...
with:
Keep the size class (wide or tall) so the shape stays the same. */
.photo-slot {
display: flex;
align-items: center;
justify-content: center;
text-align: center;
background: linear-gradient(150deg, var(--green-deep) 0%, var(--green) 70%, #1B4A38 100%);
box-shadow: var(--shadow-soft);
}
.photo-slot::before {
content: "";
position: absolute;
inset: 14px;
border: 1px solid rgba(196, 160, 82, 0.35);
border-radius: 6px;
}
.photo-slot > span {
position: relative;
font-family: var(--font-display);
font-size: 1.15rem;
color: var(--gold);
padding: 0 20px;
}
.photo-slot small {
display: block;
margin-top: 8px;
font-family: var(--font-body);
font-size: 0.68rem;
font-weight: 700;
letter-spacing: 0.2em;
text-transform: uppercase;
color: rgba(255, 255, 255, 0.55);
}
/* ==========================================================================
PRICING TIERS
========================================================================== */
.pricing-grid { display: grid; gap: 24px; }
@media (min-width: 1000px) {
.pricing-grid { grid-template-columns: repeat(3, 1fr); gap: 32px; align-items: stretch; }
}
.tier {
display: flex;
flex-direction: column;
background: var(--white);
border: 1px solid rgba(20, 57, 43, 0.12);
border-radius: 14px;
padding: 32px 30px;
transition: transform 260ms cubic-bezier(0.16, 1, 0.3, 1), box-shadow 260ms ease;
}
.tier:hover { transform: translateY(-6px); box-shadow: var(--shadow); }
/* The featured card sits slightly proud of the other two. */
.tier-featured {
border-color: var(--gold);
box-shadow: var(--shadow);
position: relative;
}
@media (min-width: 1000px) {
.tier-featured { transform: translateY(-14px); }
.tier-featured:hover { transform: translateY(-20px); }
}
.tier-head { padding-bottom: 4px; }
.tier-title {
display: flex;
align-items: flex-start;
justify-content: space-between;
gap: 14px;
margin-bottom: 10px;
}
.tier-title h3 { font-size: 1.25rem; line-height: 1.25; margin: 0; }
.tier-badge {
flex: 0 0 auto;
font-family: var(--font-body);
font-size: 0.64rem;
font-weight: 700;
letter-spacing: 0.14em;
text-transform: uppercase;
color: var(--green);
border: 1px solid rgba(20, 57, 43, 0.25);
border-radius: 999px;
padding: 5px 12px;
white-space: nowrap;
}
.tier-badge.solid { background: var(--gold); border-color: var(--gold); color: var(--green); }
.tier-desc { color: var(--body-muted); font-size: 0.9rem; margin: 0; }
/* Grows so every card's button lines up along the bottom. */
.tier-body { display: flex; flex-direction: column; flex: 1; padding-top: 26px; }
.tier-price { display: flex; align-items: baseline; gap: 10px; }
.tier-price .amount {
font-family: var(--font-display);
font-size: clamp(2.4rem, 4vw, 3rem);
line-height: 1;
color: var(--green);
}
.tier-price .amount-word { font-size: clamp(1.9rem, 3vw, 2.3rem); }
.tier-price .freq { font-size: 0.85rem; color: var(--body-muted); }
.tier-note {
margin-top: 12px;
font-size: 0.8rem;
color: var(--body-muted);
border-left: 2px solid var(--gold);
padding-left: 12px;
}
.tier-note strong { color: var(--green); }
.tier-features { list-style: none; margin: 26px 0 0; padding: 0; display: flex; flex-direction: column; gap: 13px; }
.tier-features li {
display: flex;
align-items: flex-start;
gap: 10px;
font-size: 0.88rem;
color: var(--body-muted);
line-height: 1.45;
}
.tier-features svg {
flex: 0 0 auto;
width: 17px;
height: 17px;
margin-top: 2px;
fill: none;
stroke: var(--gold);
stroke-width: 2.5;
stroke-linecap: round;
stroke-linejoin: round;
}
.tier-foot { padding-top: 28px; }
/* The arrow slides right on hover. */
.tier-foot .btn span { display: inline-block; transition: transform 180ms ease; margin-left: 4px; }
.tier-foot .btn:hover span { transform: translateX(4px); }
.pricing-grid > .reveal:nth-child(2) { transition-delay: 90ms; }
.pricing-grid > .reveal:nth-child(3) { transition-delay: 180ms; }
@media (prefers-reduced-motion: reduce) {
.tier, .tier-foot .btn span { transition: none; }
.tier:hover, .tier-featured, .tier-featured:hover { transform: none; }
.tier-foot .btn:hover span { transform: none; }
}
/* ---------- Hero left column, corrected ----------
The page sets border-box globally, so the left gutter was being subtracted
from the column's max-width and squeezing the headline onto five lines.
content-box makes the max-width mean the text area itself, with the gutter
sitting outside it. */
.hero-inner {
box-sizing: content-box;
max-width: 880px;
padding-top: 104px;
padding-bottom: 104px;
}
/* A little smaller, so each written line fits on one line. */
.hero h1 { font-size: clamp(2.2rem, 4.4vw, 3.55rem); line-height: 1.16; }
.hero .hero-sub { max-width: 660px; margin-top: 28px; line-height: 1.75; }
.hero .btn-row { margin-top: 40px; }
.hero .hero-verse { margin-top: 44px; padding-top: 26px; }
@media (min-width: 1600px) {
.hero-inner { max-width: 960px; }
.hero h1 { font-size: 3.9rem; }
}
@media (max-width: 900px) {
.hero-inner { box-sizing: border-box; max-width: none; padding-top: 88px; padding-bottom: 80px; }
.hero .hero-verse { margin-top: 36px; }
}
/* Below the split breakpoint the columns stack, so a sideways reveal has
nowhere to come from and its offset pushes the page 36px wider than the
screen. Fall back to the vertical reveal. */
@media (max-width: 880px) {
.reveal-left, .reveal-right { transform: translateY(28px); }
}
/* ---------- Section headings ----------
720px was forcing "Find The Right Way To Work With Us" onto two lines with
one word stranded. Centred heads get room to sit on one line. */
.section-head.center { max-width: 1000px; }
.section-head.center h2 { text-wrap: balance; }
.section-head.center .lead { max-width: 660px; }
/* A page with no hero puts its h1 in the first section head instead. It is
still the page title, but it is sitting where an h2 normally sits, so it
takes the h2's size and spacing rather than hero-sized type. */
.section-head h1 { font-size: clamp(1.9rem, 3.6vw, 2.7rem); margin-bottom: 16px; }
.section-head.center h1 { text-wrap: balance; }
.section-head.center .lead { margin-left: auto; margin-right: auto; }
@media (max-width: 720px) {
.section-head.center { max-width: none; }
}
/* ---------- Stop sideways reveals from widening the page ----------
A .reveal-right sits 36px to the right until it becomes visible. In a two
column split the right column is already flush to the container edge, so
that offset pushed the document wider than the screen and produced a
horizontal scrollbar. Clip it at the body.
overflow-x: clip rather than hidden, because hidden would turn the body
into a scroll container and break sticky positioning.
It has to go on the root as well as the body. Overflow set on the body
alone gets propagated up to the viewport, and in that hand-off the body's
own used value goes back to visible, so the clip never actually happened
and the page still scrolled sideways a few pixels. Clip is safe on the
root here because, unlike hidden, it does not create a scroll container,
so the sticky header still sticks. */
html, body { overflow-x: hidden; overflow-x: clip; }
/* The founding rate is the headline number, so it gets the big type and the
line directly under it names what it is. */
.tier-founding {
margin-top: 10px;
font-size: 0.82rem;
font-weight: 700;
letter-spacing: 0.1em;
text-transform: uppercase;
color: var(--gold);
}
.tier-founding + .tier-note { margin-top: 10px; }
/* ---------- Portrait photo that holds its shape ----------
2:3, the standard portrait ratio image generators produce, so a generated
photo drops in without being cropped. */
.photo.portrait { aspect-ratio: 2 / 3; }
/* On wide screens it stays put while the column beside it scrolls, rather
than stretching to match a much taller column. */
@media (min-width: 880px) {
.photo-sticky { position: sticky; top: 104px; align-self: start; }
}
@media (max-width: 879px) {
.photo.portrait { aspect-ratio: 4 / 3; }
}
/* ---------- Who We Serve: give the copy the wider column ----------
An even split left the heading 76px short of fitting on one line. The
photo holds its 2:3 shape either way, so the width is better spent on
the text. A small cap on the heading keeps it on one line at the
narrower desktop sizes too. */
@media (min-width: 880px) {
#who .split { grid-template-columns: 0.82fr 1.18fr; }
}
#who h2 { font-size: clamp(1.7rem, 3vw, 2.7rem); }
.photo.square { aspect-ratio: 1 / 1; }
@media (max-width: 879px) { .photo.square { aspect-ratio: 4 / 3; } }
.on-dark .cred-list li { color: var(--light-muted); }
.on-dark .about-close { color: var(--gold); }
/* ---------- About Me section ---------- */
#about h2 { margin-bottom: 20px; }
#about p { margin-bottom: 18px; line-height: 1.75; }
#about .cred-list { margin-top: 30px; }
#about .about-close { margin-top: 30px; margin-bottom: 0; }
/* ---------- Arch photo ----------
The shape used on the Beauty Academy landing page: a full半 round top and
Beauty Academy landing page. */
.photo.arch { border-radius: 999px 999px 12px 12px; }
.photo.tall-arch { aspect-ratio: 4 / 5; }
@media (max-width: 879px) {
.photo.tall-arch { aspect-ratio: 4 / 5; max-width: 340px; margin-inline: auto; }
}
/* ---------- A photo that runs the full height of the column beside it ----
No aspect ratio of its own: it takes the height of the text next to it so
the two columns finish level. */
@media (min-width: 880px) {
.photo-fill { aspect-ratio: auto; align-self: stretch; height: 100%; }
.photo-fill img { position: absolute; inset: 0; }
}
@media (max-width: 879px) {
.photo-fill { aspect-ratio: 4 / 5; max-width: 360px; margin-inline: auto; }
}
/* ---------- Uniform tier cards ----------
The three product names run to different lengths, so the title block was
two lines in one card and three in another, which pushed the price, the
list and the button out of line across the row. Reserving the height of
the longest title lines all three up. */
@media (min-width: 1000px) {
.tier-title { min-height: 82px; align-items: flex-start; }
.tier-desc { min-height: 66px; }
.tier-price { min-height: 58px; align-items: center; }
.tier-founding, .tier-note { min-height: 20px; }
}
/* Four across on a wide screen, two on a laptop. */
@media (min-width: 1000px) { .store-grid { grid-template-columns: repeat(4, 1fr); gap: 24px; } }
@media (min-width: 700px) and (max-width: 999px) { .store-grid { grid-template-columns: repeat(2, 1fr); } }
.store-grid .tier { padding: 28px 24px 26px; }
.store-grid .tier h3 { font-size: 1.12rem; }
.store-grid .tier-title { min-height: 60px; }
.store-grid .tier-desc { min-height: 60px; }
.store-grid > .reveal:nth-child(4) { transition-delay: 270ms; }
/* A wide banner photo above the store grid. */
.photo.banner { aspect-ratio: 21 / 9; margin-bottom: 48px; }
@media (max-width: 760px) { .photo.banner { aspect-ratio: 16 / 9; margin-bottom: 36px; } }
/* Six store cards: three across on a wide screen, two on a laptop. */
@media (min-width: 1100px) { .store-grid { grid-template-columns: repeat(3, 1fr); gap: 28px; } }
@media (min-width: 700px) and (max-width: 1099px) { .store-grid { grid-template-columns: repeat(2, 1fr); } }
.store-grid > .reveal:nth-child(5) { transition-delay: 360ms; }
.store-grid > .reveal:nth-child(6) { transition-delay: 450ms; }
/* ---------- Final call to action ---------- */
/* The buttons were sitting right under the sentence. */
.cta-row { margin-top: 44px; gap: 16px; }
/* Long headline, kept on one line on a desktop. */
.final-cta h2 { font-size: clamp(1.6rem, 3.2vw, 2.7rem); }
@media (min-width: 900px) { .final-cta h2 { white-space: nowrap; } }
/* ==========================================================================
STORE SHELF
========================================================================== */
.shelf-card {
flex: 0 0 330px;
scroll-snap-align: start;
padding: 0 0 26px;
overflow: hidden;
}
@media (max-width: 480px) { .shelf-card { flex-basis: 280px; } }
.shelf-card .tier-head,
.shelf-card .tier-body,
.shelf-card .tier-foot { padding-inline: 24px; }
.shelf-card .tier-head { padding-top: 22px; }
.shelf-card:hover { transform: none; }
/* Product cover. Replace the .cover-slot div with an when there is a
real cover to show. */
.cover {
aspect-ratio: 4 / 3;
overflow: hidden;
background: var(--mint-tint);
}
.cover img { width: 100%; height: 100%; object-fit: cover; display: block;
transition: transform 900ms cubic-bezier(0.16, 1, 0.3, 1); }
.shelf-card:hover .cover img { transform: scale(1.05); }
.cover-slot {
display: flex;
align-items: center;
justify-content: center;
text-align: center;
background: linear-gradient(150deg, var(--green-deep) 0%, var(--green) 70%, #1B4A38 100%);
position: relative;
}
.cover-slot::before {
content: "";
position: absolute;
inset: 10px;
border: 1px solid rgba(196, 160, 82, 0.4);
border-radius: 4px;
}
.cover-slot span {
position: relative;
font-family: var(--font-display);
font-size: 1.15rem;
line-height: 1.3;
color: var(--gold);
padding: 0 16px;
}
/* Buttons alternate down the row: outline, gold, outline, gold. Driven by
position, so adding or removing a card keeps the pattern. */
.shelf-card:nth-child(odd) .tier-foot .btn { border-color: var(--green); color: var(--green); background: transparent; }
.shelf-card:nth-child(odd) .tier-foot .btn:hover { background: var(--green); color: var(--white); }
.shelf-card:nth-child(even) .tier-foot .btn { background: var(--gold); color: var(--green); border-color: var(--gold); }
.shelf-card:nth-child(even) .tier-foot .btn:hover { background: var(--gold-soft); border-color: var(--gold-soft); }
/* ---------- Final call to action ----------
The 720px cap plus nowrap made the text overflow its own box, which is why
it sat off to the right. */
.final-cta h2 { max-width: none; }
/* ---------- The contact form inside the FAQ column ---------- */
.faq-form { margin-top: 26px; }
/* The badge runs opposite to the button on the same card, so no card shows
two gold elements and the row alternates cleanly in both directions.
Position driven, so it survives adding or removing a product. */
.shelf-card:nth-child(odd) .tier-badge {
background: var(--gold);
border-color: var(--gold);
color: var(--green);
}
.shelf-card:nth-child(even) .tier-badge {
background: transparent;
border-color: rgba(20, 57, 43, 0.28);
color: var(--green);
}
/* A longer hero headline that has to hold one line. */
.hero h1.h1-fit { font-size: clamp(1.5rem, 2.9vw, 2.45rem); }
@media (min-width: 1000px) { .hero h1.h1-fit { white-space: nowrap; } }
/* ---------- Hero with a photo behind it ----------
Add class "hero-photo" to the hero section once assets/img/hero.jpg
exists. The photo sits under a Kingdom Green wash whose strength is one
variable, so it can be dialled up or down without regenerating anything.
The plain hero already uses ::before and ::after for two decorative rings.
Those set a border-radius and a fixed 560px box, and a later rule only
overrides the properties it names, so the wash inherited the circle unless
every one of them is reset here. */
.hero-photo {
--hero-tint: 0.94; /* how solid the green is over the copy */
background-image: url("../img/hero.jpg");
background-size: cover;
background-position: right center;
background-repeat: no-repeat;
position: relative;
}
/* The rings are clutter over a photograph. */
.hero-photo::before { display: none; }
.hero-photo::after {
content: "";
position: absolute;
inset: 0;
width: auto;
height: auto;
border: 0;
border-radius: 0;
z-index: 1;
pointer-events: none;
/* Heavy where the words are, clearing to almost nothing over her and the
panel on the right. */
background: linear-gradient(97deg,
rgba(14, 42, 32, var(--hero-tint)) 0%,
rgba(14, 42, 32, calc(var(--hero-tint) - 0.06)) 34%,
rgba(14, 42, 32, calc(var(--hero-tint) - 0.34)) 56%,
rgba(20, 57, 43, 0.30) 76%,
rgba(20, 57, 43, 0.16) 100%);
}
.hero-photo .hero-inner { position: relative; z-index: 2; }
@media (max-width: 900px) {
/* Stacked, so the copy covers the frame and the wash goes flat and heavy. */
.hero-photo { --hero-tint: 0.9; background-position: 72% center; }
.hero-photo::after {
background: linear-gradient(180deg,
rgba(14, 42, 32, 0.86) 0%,
rgba(14, 42, 32, 0.92) 100%);
}
}
/* A longer hero headline that has to hold one line. */
.hero h1.h1-fit { font-size: clamp(1.5rem, 2.9vw, 2.45rem); }
@media (min-width: 1000px) { .hero h1.h1-fit { white-space: nowrap; } }
/* ---------- Hero with a photo behind it ----------
Add class "hero-photo" to the hero section once assets/img/hero.jpg
exists. The photo sits under a Kingdom Green wash whose strength is one
variable, so it can be dialled up or down without regenerating anything.
The photo is composed with its subject on the right, so it is anchored
right and the empty left side carries the copy. */
.hero-photo {
--hero-tint: 0.72; /* 0 is the bare photo, 1 is solid green */
background-image: url("../img/hero.jpg");
background-size: cover;
background-position: right center;
position: relative;
}
.hero-photo::after {
content: "";
position: absolute;
inset: 0;
z-index: 1;
background:
linear-gradient(90deg,
rgba(14, 42, 32, calc(var(--hero-tint) + 0.2)) 0%,
rgba(14, 42, 32, var(--hero-tint)) 45%,
rgba(20, 57, 43, calc(var(--hero-tint) - 0.25)) 100%);
}
.hero-photo .hero-inner { position: relative; z-index: 2; }
@media (max-width: 760px) {
/* On a phone the copy covers most of the frame, so the wash goes heavier. */
.hero-photo { --hero-tint: 0.82; background-position: 70% center; }
}
/* ---------- Step number beside its title ---------- */
.step h3 { display: flex; align-items: baseline; gap: 12px; }
.step h3 .step-num { flex: 0 0 auto; }
.step .step-num { font-size: 1.9rem; }
/* ---------- Cancellation terms, as a readable table ----------
This was one long run-on line of Title Case. Four rows read in a glance. */
.terms-block { margin-top: 30px; }
.terms-block h3 { font-size: 1.1rem; margin-bottom: 14px; }
.terms-list { list-style: none; margin: 0; padding: 0; }
.terms-list li {
display: flex;
align-items: baseline;
justify-content: space-between;
gap: 18px;
padding: 13px 0;
border-top: 1px solid rgba(20, 57, 43, 0.14);
font-size: 0.94rem;
}
.terms-list li:last-child { border-bottom: 1px solid rgba(20, 57, 43, 0.14); }
.terms-list span { color: var(--body-muted); }
.terms-list strong { color: var(--green); font-weight: 600; white-space: nowrap; }
/* A section built around one tall embed does not need the full breathing room
above and below, because the embed is already mostly white space. Trimming
it is what gets the whole form onto a laptop screen at once. */
.section-compact { padding-top: 56px; padding-bottom: 56px; }
/* The inquiry form does not need half the page, and the photos beside it do.
An even split capped the circles at roughly half the column, which is why
they kept coming out small. Giving the photo side the larger share is what
lets them be properly sized. */
@media (min-width: 880px) {
#form .split { grid-template-columns: 1.15fr 0.85fr; }
}
@media (max-width: 720px) {
.section-compact { padding-top: 52px; padding-bottom: 52px; }
}
.form-thanks { margin: 22px; border: 0; }
.form-thanks {
background: var(--mint-tint);
border: 1px solid var(--mint);
border-radius: var(--radius-sm);
padding: 40px 32px;
text-align: center;
}
.form-thanks h3 { font-size: 1.35rem; margin-bottom: 12px; color: var(--green); }
.form-thanks p { margin: 0; color: var(--body-muted); }
.embed-fallback {
margin-top: 12px;
font-size: 0.86rem;
color: var(--body-muted);
}
.embed-fallback a { color: var(--green); font-weight: 600; }
.terms-note {
margin-top: 14px;
font-size: 0.92rem;
color: var(--body-muted);
}
/* ---------- Two overlapping circular photos ----------
A vertical cascade: one high and right, the second below it and left,
overlapping so the pair reads as one falling shape. Taller than it is
wide, which is the whole point of the arrangement.
Sized as a share of the column rather than in fixed pixels, so the photos
fill whatever width they are given instead of being tuned for one screen
and coming out small on the rest. The pair holds a fixed ratio, so its
height always follows its width. */
.circle-pair {
position: relative;
margin-top: 36px;
width: 100%;
max-width: 560px;
aspect-ratio: 560 / 760;
}
.circle {
position: absolute;
margin: 0;
aspect-ratio: 1 / 1;
border-radius: 50%;
overflow: hidden;
box-shadow: var(--shadow);
background: var(--mint-tint);
}
.circle img { width: 100%; height: 100%; object-fit: cover; display: block; }
/* Upper, set to the right. It sits behind. */
.circle-a {
width: 66%;
left: 34%;
top: 0;
z-index: 1;
}
/* Lower, set to the left, and in front. The ring belongs on the one in
front so the overlap reads as deliberate rather than two photos running
into each other. */
.circle-b {
width: 76%;
left: 0;
top: 43.5%;
z-index: 2;
border: 8px solid var(--mint-tint);
}
/* A thinner ring once the photos are small, so it does not eat the picture. */
@media (max-width: 620px) {
.circle-b { border-width: 6px; }
}
.circle-slot {
width: 100%;
height: 100%;
display: flex;
align-items: center;
justify-content: center;
text-align: center;
background: linear-gradient(150deg, var(--green-deep) 0%, var(--green) 70%, #1B4A38 100%);
}
.circle-slot span {
font-family: var(--font-display);
font-size: 0.95rem;
color: var(--gold);
padding: 0 14px;
}
/* ---------- Where an anchor link lands ----------
The header is sticky, so jumping to #who or #programs used to put the top
of that section directly underneath the menu bar and hide the heading you
clicked to reach. This holds the landing point clear of it. */
section[id], [id][data-anchor] { scroll-margin-top: 104px; }
@media (max-width: 720px) {
section[id], [id][data-anchor] { scroll-margin-top: 84px; }
}
