/* ============================================================
AuraScan — public website.
Loaded only on the marketing pages; app.css covers the shared
primitives (buttons, panels, colour variables).
============================================================ */
/* ---- palette ----
Nature in sunlight, not nature in a museum. The previous set was muted on
purpose and the result was dusty — beige surfaces, olive-grey text, a hero
under a heavy dark veil. Daylight is the brightest thing there is, and a
wellness centre should look like a room with the windows open.
Every hue comes in two strengths, and which one to use is not a matter of
taste:
--c-* the bright one. Fills, rules, marks, underlines, glows —
anything where the colour is a shape rather than a word.
--c-*-ink the same hue taken deep enough to be read as text on white.
Every one of these clears 4.5:1, checked rather than eyeballed.
That pairing is what lets the page be genuinely bright without failing
anybody: marigold #f5a623 is beautiful as a rule under a heading and unusable
as 14px type, and one token cannot be both.
The overrides below re-point app.css's tokens for the public site only. This
file is not loaded in the admin, so the staff screens keep their own colours
and nothing behind the sign-in changes. */
:root {
--c-sun: #f6a93b; /* the sun itself, just clear of the trees */
--c-care: #f2794a; /* dawn coral — the first warmth on the horizon */
--c-rose: #e98a7d; /* the flush above it */
--c-move: #4aa96c; /* leaf, still in shadow */
--c-mind: #3fa9a0; /* mist over water */
--c-assess: #4fa3cf; /* the cool half of the sky */
--c-astro: #9b7ae0; /* the last of the night */
--c-sun-ink: #8f6209;
--c-care-ink: #b4451a; /* 5.3:1 on the page, 5.5:1 under white */
--c-rose-ink: #a8443c;
--c-move-ink: #1d7a4a;
--c-mind-ink: #0b7d77;
--c-assess-ink: #1b6f97;
--c-astro-ink: #6f47c4;
/* Kept under the old name so the six menu and band mappings still resolve. */
--c-energy: var(--c-sun);
--c-energy-ink: var(--c-sun-ink);
/* Sunrise over a forest: warm light on cool shadow. All green was one note
held too long — calm, and inert with it. Dawn is the same calm with
something happening in it, and it gives the page two voices instead of
one: warm for anything that invites, green for anything that grounds. */
--accent: var(--c-care-ink); /* white sits on it, so it is the deep one */
--accent-lit: var(--c-care); /* and this is it with the sun on it */
--accent-warm: var(--c-sun); /* the light itself */
--forest: #14382a; /* the trees, still dark */
--forest-deep: #0d2a1f;
--ink: #14382a; /* forest before the sun reaches it — 12.4:1 */
--muted: #5f6b60;
--line: #ecdfd0; /* a warm hairline; a grey one killed the warmth */
--bg: #fffaf2; /* the light before the sun is over the horizon */
/* Surfaces. Unbroken white is clinical, but so is beige — these are lit:
morning cream, sunlight on paper, and the green of light coming through
a leaf.
A tint has to be far enough from the page to register. The previous set
sat within two points of white — beautifully judged, and completely
invisible, so every band looked the same and the page read as one long
white scroll. These are still soft; they are simply far enough apart to
do the job a tint is for. */
--sand: #fdf0e2; /* the sky ten minutes before */
--linen: #fdeede; /* first light on a wall */
--moss: #eef4ee; /* the cool side of the clearing */
/* A serif for headings. The body face is a UI sans, which is right for
reading but has no warmth in it at display size; an old-style serif does
the thing a wellness brand needs a heading to do. All system faces, so
there is no webfont to download, no layout shift while it loads and
nothing to ask the CSP about. */
--font-display: 'Iowan Old Style', 'Palatino Linotype', Palatino, 'Book Antiqua',
Georgia, 'Times New Roman', serif;
/* Shadows, as one scale. Soft, wide and barely there — a tight dark shadow
reads as a control panel, not as a room with light in it. */
--shadow-soft: 0 1px 2px rgba(24, 46, 34, .05), 0 6px 18px rgba(24, 46, 34, .06);
--shadow-lift: 0 2px 6px rgba(24, 46, 34, .06), 0 18px 44px rgba(24, 46, 34, .12);
--radius: 14px;
}
/* Headings carry the serif; everything else stays on the sans. */
.site h1, .site h2, .site h3,
.site .price, .site .brand-word {
font-family: var(--font-display);
font-weight: 600;
letter-spacing: -.012em;
}
/* Body copy, given room. 1.7 rather than 1.55, and a measure that stops long
paragraphs running the full 1160px — both are the difference between text you
read and text you skim past. */
.site { line-height: 1.7; }
.site p { max-width: 68ch; }
/* Warm white, not clinical white. The difference is small and it is the
difference between a room and a waiting room. */
.site { background: var(--bg); }
.wrap { max-width: 1160px; margin: 0 auto; padding: 0 1.25rem; }
/* ---- info strip + header ---- */
.topbar-info { background: var(--ink); color: #cdd2c7; font-size: .8rem; }
.topbar-info .wrap { display: flex; gap: 1.5rem; padding-top: .45rem; padding-bottom: .45rem; flex-wrap: wrap; }
.topbar-info a { color: #cdd2c7; text-decoration: none; }
.topbar-info a:hover { color: #fff; }
.site-header { position: sticky; top: 0; z-index: 50; background: #fff; border-bottom: 1px solid var(--line); }
/* Direct child. As a descendant selector this also hit .mega-inner inside the
panels and, at (0,2,0), overrode their own layout. */
.site-header > .wrap { display: flex; align-items: center; gap: 1.5rem; padding-top: .75rem; padding-bottom: .75rem; }
/* ---- brand lockup ----
The logo is the wordmark alone. "Aura" in ink and "Scan" in the brand red is
the whole of the styling: at header size a two-tone word reads as one shape,
which a three-word name never did. */
.brand { display: flex; align-items: center; gap: .7rem; text-decoration: none; color: var(--ink); }
.brand-mark { flex: none; width: 40px; height: 40px; border-radius: 11px; }
.brand-text { display: inline-block; line-height: 1.1; }
.brand-word {
display: block; font-size: 1.32rem; font-weight: 800;
letter-spacing: -.035em; color: var(--ink);
}
.brand-word span { color: var(--accent); }
.brand-tagline {
display: block; margin-top: .18rem;
font-size: .5rem; font-weight: 700; letter-spacing: 0;
text-transform: uppercase;
/* The lockup: both tagline lines stretch to end exactly where the
wordmark ends. width:0 + min-width:100% keeps the tagline from
widening the column — the wordmark alone sets its width — and each
line justifies itself across it. Tracking is kept small so the
longest line's natural width stays INSIDE the wordmark; justify can
stretch a short line but never shrink a long one. */
width: 0; min-width: 100%;
}
.brand-tagline .tagline-line {
display: block;
text-align: justify; text-align-last: justify;
}
/* The brand's own two colours, in the wordmark's order: Aura green over
Scan orange — the tagline carries the same optimism as the name. */
.brand-tagline .tagline-line:first-child { color: var(--ink); }
.brand-tagline .tagline-line:last-child { color: var(--accent); }
.brand:hover .brand-word span { color: var(--accent-lit); }
/* ---- mega menu ----
Panels span the full header width rather than hanging off their own , so
two panels can never sit side by side and none of this depends on measuring
where a menu falls in the bar.
Visibility is deliberately NOT `display`. Every selector below is scoped with
`>` and the open state is a class on the ; an earlier build hid panels
with `display:none` and a stray `.site-nav ul` descendant rule outranked it,
which pinned every panel open. Toggling visibility/opacity instead means a
stray `display` rule cannot resurrect a panel. */
.site-nav { margin-left: auto; }
.site-nav > .nav-list { list-style: none; margin: 0; display: flex; align-items: center; gap: .25rem; }
.site-nav > .nav-list > li { position: static; }
/* Each menu carries its own colour, and it is the same colour that section uses
further down the page. Set as a variable on the so the label, the rule
beneath it and the open panel all read it from one place. Cycled by position
rather than by name: the menu is built from the database, so a new page picks
up a colour without anyone editing this file. */
/* Two per item: the bright one draws the rule, the ink one writes the label. */
.site-nav > .nav-list > li { --nav-accent: var(--c-care); --nav-ink: var(--c-care-ink); }
.site-nav > .nav-list > li:nth-child(2) { --nav-accent: var(--c-assess); --nav-ink: var(--c-assess-ink); }
.site-nav > .nav-list > li:nth-child(3) { --nav-accent: var(--c-mind); --nav-ink: var(--c-mind-ink); }
.site-nav > .nav-list > li:nth-child(4) { --nav-accent: var(--c-move); --nav-ink: var(--c-move-ink); }
.site-nav > .nav-list > li:nth-child(5) { --nav-accent: var(--c-astro); --nav-ink: var(--c-astro-ink); }
.site-nav > .nav-list > li:nth-child(6) { --nav-accent: var(--c-sun); --nav-ink: var(--c-sun-ink); }
/* The catalogue added an entry to the bar and the cycle ran out at six —
everything past it fell back to the first colour, so Contact wore the same
coral as Home. */
.site-nav > .nav-list > li:nth-child(7) { --nav-accent: var(--c-rose); --nav-ink: var(--c-rose-ink); }
.site-nav > .nav-list > li > a,
.site-nav .nav-parent {
position: relative;
display: flex; align-items: center; gap: .3rem;
padding: .55rem .7rem; font-size: .88rem; font-weight: 600;
color: #454b45; text-decoration: none; border-radius: 6px;
background: none; border: 0; font-family: inherit; cursor: pointer;
transition: color .16s ease, background-color .16s ease;
}
/* The rule that grows under a menu item. A pseudo-element rather than a real
border so nothing in the bar shifts by a pixel when it appears. */
.site-nav > .nav-list > li > a::after,
.site-nav .nav-parent::after {
content: ""; position: absolute; left: .7rem; right: .7rem; bottom: .28rem; height: 2px;
background: var(--nav-accent); border-radius: 2px;
transform: scaleX(0); transform-origin: left; transition: transform .18s ease;
}
.site-nav > .nav-list > li > a:hover::after,
.site-nav .nav-parent:hover::after,
.site-nav .has-mega.open > .nav-parent::after { transform: scaleX(1); }
.site-nav > .nav-list > li > a:hover,
.site-nav .nav-parent:hover {
color: var(--nav-ink);
background: color-mix(in srgb, var(--nav-accent) 10%, white);
}
.site-nav .nav-parent:focus-visible { outline: 2px solid var(--nav-accent); outline-offset: -2px; }
.caret {
width: 0; height: 0; margin-top: 1px;
border-left: 4px solid transparent; border-right: 4px solid transparent;
border-top: 5px solid currentColor; opacity: .55;
transition: transform .18s ease;
}
.site-nav .has-mega.open > .nav-parent {
color: var(--nav-ink);
background: color-mix(in srgb, var(--nav-accent) 10%, white);
}
.site-nav .has-mega.open > .nav-parent .caret { transform: rotate(180deg); opacity: 1; }
/* 70% of the viewport, centred. Insets rather than a width keep the centring
out of `transform`, which the open/close slide already owns. */
.mega {
position: absolute; top: 100%; left: 15%; right: 15%; z-index: 60;
background: #fff; border: 1px solid var(--line); border-top: 0;
/* The panel wears the menu's colour along its bottom edge, so the tie
between the label and the panel it opened survives the mouse leaving it. */
border-bottom: 3px solid var(--nav-accent);
border-radius: 0 0 12px 12px;
box-shadow: 0 18px 40px rgba(16, 24, 40, .13);
opacity: 0; visibility: hidden; transform: translateY(-8px);
transition: opacity .18s ease, transform .18s ease, visibility .18s;
}
.site-nav .has-mega.open > .mega { opacity: 1; visibility: visible; transform: none; }
/* No JS means no .open, so the pointer still gets a working menu. */
html:not(.js) .site-nav .has-mega:hover > .mega,
html:not(.js) .site-nav .has-mega:focus-within > .mega { opacity: 1; visibility: visible; transform: none; }
/* Carries its own centring rather than borrowing .wrap — sharing that class
with the header put two competing layout rules on the same element. */
.mega-inner {
max-width: 1160px; margin: 0 auto; padding: 2rem 1.25rem;
display: grid; grid-template-columns: minmax(0, 300px) minmax(0, 1fr);
gap: 2.5rem; align-items: start;
}
/* A tinted well behind the intro, in the menu's own colour. */
.mega-intro {
padding: 1.15rem 1.25rem; border-radius: 10px;
background: color-mix(in srgb, var(--nav-accent) 6%, white);
border-left: 3px solid var(--nav-accent);
}
.mega-intro h2 { font-size: 1.05rem; letter-spacing: -.01em; margin-bottom: .5rem; color: var(--nav-ink); }
.mega-intro p { color: var(--muted); font-size: .86rem; line-height: 1.6; }
/* This used to be a bare text link and set its own accent colour. It is a
button now, so the colour has to come from .btn-primary — accent text on an
accent background rendered the label invisible. */
.mega-cta { margin-top: .9rem; text-decoration: none; }
.mega-links { list-style: none; margin: 0; display: grid; gap: .15rem; align-content: start; }
.mega-links.cols-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 1.5rem; }
.mega-links > li > a {
display: block; padding: .55rem .7rem; border-radius: 6px;
font-size: .88rem; font-weight: 500; color: #454b45; text-decoration: none;
border-left: 2px solid transparent;
}
.mega-links > li > a:hover {
color: var(--nav-ink);
background: color-mix(in srgb, var(--nav-accent) 10%, white);
border-left-color: var(--nav-accent);
}
/* ---- a panel with groups in it ----
The catalogue is one menu but two different things — a month of care, or a
single appointment. Listed as one run of names they read as an unordered
price list, so each group keeps its own column under its own heading, and
the heading is the link to that list. */
.mega-groups { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 2rem; }
.mega-group h3 { font-size: .78rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; margin-bottom: .3rem; }
.mega-group h3 a { display: inline-flex; align-items: center; gap: .45rem; color: var(--nav-ink); text-decoration: none; }
.mega-group h3 a:hover { text-decoration: underline; }
/* ---- the marks ----
One per entry, drawn from what the plan is rather than picked by hand — see
PlanIcon. They carry the menu's own colour, so the panel reads as one thing
and not as a row of borrowed pictograms.
In a tinted disc rather than bare on the white: at 18px a stroked outline
against a page of text is noise, and the disc gives every mark the same
footprint however busy its drawing is. */
.mega-icon { width: 18px; height: 18px; flex: none; }
.mega-group h3 .mega-icon { width: 15px; height: 15px; }
.mega-links.has-icons > li > a {
display: flex; align-items: center; gap: .7rem;
padding: .5rem .7rem;
}
.mega-links.has-icons .mega-icon {
padding: 6px; width: 30px; height: 30px; border-radius: 8px;
background: color-mix(in srgb, var(--nav-accent) 12%, white);
color: var(--nav-ink);
transition: background-color .16s ease;
}
.mega-links.has-icons > li > a:hover .mega-icon { background: color-mix(in srgb, var(--nav-accent) 24%, white); }
/* Name over price. On one line they read as a price list; stacked, the eye
takes the name first and the price answers the question it was about to
ask. */
.mega-link-text { display: flex; flex-direction: column; line-height: 1.3; }
.mega-link-text strong { font-weight: 600; }
.mega-link-text small { color: var(--muted); font-size: .78rem; }
.mega-links.has-icons > li > a:hover .mega-link-text small { color: inherit; opacity: .75; }
.mega-group-note { color: var(--muted); font-size: .8rem; line-height: 1.5; margin-bottom: .6rem; }
.mega-group-all { display: inline-block; margin-top: .5rem; padding: 0 .7rem; font-size: .8rem; font-weight: 600; color: var(--nav-ink); text-decoration: none; }
.mega-group-all:hover { text-decoration: underline; }
/* Scoped to outrank the base link rule above, which is now specific enough
(0,2,2) to have swallowed a bare `.nav-cta a`. */
.site-nav > .nav-list > li.nav-cta > a { background: var(--accent); color: #fff; padding: .55rem 1rem; }
.site-nav > .nav-list > li.nav-cta > a:hover { background: var(--accent); color: #fff; filter: brightness(.94); }
.navtoggle, .navburger { display: none; }
@media (prefers-reduced-motion: reduce) {
.mega, .caret { transition: none; }
}
/* ---- sign-in / registration inside the website ----
The client's sign-in and registration are pages of the site, not a separate
application, so they render between the header and the footer. The card
markup is shared with the staff gates, which still use the bare auth shell;
this only supplies the room around it. */
.auth-band { background: var(--bg); padding: 3.5rem 1.25rem; display: flex; justify-content: center; }
.auth-band > .card { width: 100%; max-width: 460px; margin: 0; }
@media (max-width: 560px) {
.auth-band { padding: 2rem 1rem; }
}
/* ---- hero + page banners ----
One veil, not three. The tri-colour diagonal wash that was here fought the
photograph underneath it and turned every hero muddy-brown at the right-hand
end; a single deep forest scrim lets the picture stay a picture. The radial
layer on top is a vignette — darker at the edges, clearer in the middle —
which is what holds the eye in the centre where the words are. */
/* Sunlight, in three layers over the photograph:
1. a warm glow off the top-right corner — the sun in the room;
2. a scrim that is light at the top and gathers toward the bottom, so the
picture keeps its brightness where there is nothing written on it and
only darkens under the words;
3. the photograph.
The scrim it replaced was a flat 78% dark green over the whole frame. That is
what made the hero look overcast: a bright studio full of daylight, painted
out. The text-shadow is what buys the reduction — white on the lightest part
of this measures well past 4.5:1 with it, and the shadow costs nothing. */
.hero {
position: relative; isolation: isolate; overflow: hidden;
color: #fff; text-align: center; padding: 5rem 0;
/* Shows through before the first photograph decodes, and is the whole hero
if the admin has no slides showing. */
background: linear-gradient(180deg, #14382a 0%, #1b4a35 100%);
text-shadow: 0 1px 16px rgba(10, 22, 14, .55);
}
/* ---- the slides ----
Stacked, all in the same place, and cross-faded by opacity alone. Opacity is
the one property a browser can animate on the compositor without touching
layout or paint, which is why five full-bleed photographs can fade on a phone
without the page stuttering. */
.hero-slides { position: absolute; inset: 0; z-index: 0; }
.hero-slide {
position: absolute; inset: 0;
width: 100%; height: 100%; object-fit: cover; object-position: center;
opacity: 0; transition: opacity 1.6s ease-in-out;
}
.hero-slide.is-current { opacity: 1; }
/* ---- the words ----
Every block sits in the same grid cell, so the container is as tall as the
longest caption and the buttons below it never jump as the text changes.
The copy fades faster than the picture and with a slight delay, so the old
words are gone before the new ones arrive. Cross-fading text at the same
rate as the image leaves both legible at once, and half a second of two
overlapping headlines is the thing that makes a hero look broken. */
.hero-copy { display: grid; }
.hero-words {
grid-area: 1 / 1;
opacity: 0; visibility: hidden;
transform: translateY(6px);
transition: opacity .5s ease, transform .5s ease, visibility .5s;
}
.hero-words.is-current {
opacity: 1; visibility: visible; transform: none;
transition-delay: .35s;
}
/* A heading that is not a heading — the second slide onward. Matches the h1
exactly; it simply is not one, so the page keeps a single top-level heading. */
.hero .as-h1 {
font-family: var(--font-display); font-weight: 600;
font-size: clamp(2.1rem, 4.2vw, 3.15rem); line-height: 1.16;
letter-spacing: -.018em; margin-bottom: 1.15rem;
max-width: none; color: #fff;
}
@media (prefers-reduced-motion: reduce) {
.hero-words { transition: none; }
}
.hero-inner { max-width: 720px; margin: 0 auto; position: relative; z-index: 2; }
.hero h1 {
font-size: clamp(2.1rem, 4.2vw, 3.15rem); line-height: 1.16;
letter-spacing: -.018em; margin-bottom: 1.15rem;
}
.hero p { font-size: 1.06rem; line-height: 1.75; opacity: .9; margin: 0 auto; }
.hero-actions { display: flex; gap: .8rem; justify-content: center; flex-wrap: wrap; margin-top: 1.5rem; }
.hero-actions .btn { width: auto; margin: 0; }
/* ---- the dots ----
Deliberately understated. They are there so a visitor can go back to the
picture they liked, not to advertise that this is a carousel. */
.hero-dots { display: flex; gap: .5rem; justify-content: center; margin-top: 1.5rem; }
.hero-dot {
width: 30px; height: 4px; padding: 0; border: 0; border-radius: 999px;
background: rgba(255, 255, 255, .38); cursor: pointer;
transition: background-color .3s ease, width .3s ease;
}
.hero-dot:hover { background: rgba(255, 255, 255, .62); }
.hero-dot.is-current { background: var(--c-sun); width: 46px; }
/* The dots are the one focusable thing over a photograph, so the ring has to
read against whatever the photograph is doing. */
.hero-dot:focus-visible { outline: 2px solid #fff; outline-offset: 3px; }
@media (prefers-reduced-motion: reduce) {
/* The script already declines to advance; this covers the fade itself, in
case a slide is changed by hand from a dot. */
.hero-slide { transition: none; }
}
.page-banner {
position: relative; color: #fff; text-align: center; padding: 3.25rem 0;
background-color: #1d3324;
background-image:
radial-gradient(60% 60% at 80% 8%, rgba(255, 205, 110, .40) 0%, rgba(255, 205, 110, 0) 65%),
linear-gradient(180deg, rgba(20, 40, 26, .30) 0%, rgba(16, 32, 21, .56) 62%, rgba(14, 28, 19, .68) 100%),
var(--hero-image);
background-size: cover; background-position: center;
text-shadow: 0 1px 16px rgba(10, 22, 14, .55);
}
.page-banner h1 { font-size: clamp(1.75rem, 3.4vw, 2.5rem); letter-spacing: -.018em; }
.page-banner p { opacity: .88; margin: .6rem auto 0; font-size: 1.02rem; }
/* ---- content bands ----
A band may name its own colour with --band-accent; the eyebrow, the heading
rule and anything else inside pick it up. Bands that say nothing stay on the
brand red, so this is additive — no existing page changes by having been
written before the palette existed. */
/* 5.5rem rather than 4rem. Space is the cheapest thing on the page and the one
that most decides whether it feels calm or crowded. */
.band { padding: 3.5rem 0; --band-accent: var(--c-care); --band-ink: var(--c-care-ink); }
.band { background: #fff; }
.band.alt { background: var(--moss); }
.band.warm { background: var(--sand); }
.band.astro { --band-accent: var(--c-astro); --band-ink: var(--c-astro-ink); background: var(--sand); }
.band.c-mind { --band-accent: var(--c-mind); --band-ink: var(--c-mind-ink); }
.band.c-move { --band-accent: var(--c-move); --band-ink: var(--c-move-ink); }
.band.c-energy { --band-accent: var(--c-sun); --band-ink: var(--c-sun-ink); }
.band.c-assess { --band-accent: var(--c-assess); --band-ink: var(--c-assess-ink); }
/* Flat warm neutrals, not tinted gradients. Six sections each washed in a
different colour is a swatch book; the colour belongs on the small marks
inside a section, and the section itself should just be a quiet surface. */
.band.tinted { background: var(--moss); }
.band-head { text-align: center; max-width: 640px; margin: 0 auto 2rem; }
.band-head h2 { font-size: clamp(1.65rem, 2.9vw, 2.25rem); margin-bottom: .7rem; }
.band-head p { color: var(--muted); font-size: 1rem; margin-inline: auto; }
/* A short rule and letter-spaced small caps, rather than a filled pill. The
pill was a badge — it shouted, and six of them down a page shouted six times.
This says the same thing at a conversational volume. */
.eyebrow {
display: inline-flex; align-items: center; gap: .6rem;
font-size: .72rem; font-weight: 700; letter-spacing: .18em;
text-transform: uppercase; margin-bottom: .85rem;
color: var(--band-ink, var(--accent)); background: none; padding: 0;
}
/* The rules take the bright colour even though the words take the deep one —
3px of marigold beside marigold-brown type is exactly the sort of place the
bright half of the palette earns its keep. */
.eyebrow::before {
content: ""; width: 28px; height: 2px; background: var(--band-accent, var(--accent-lit));
}
/* Centred headings put the rule on both sides, so the mark stays symmetrical. */
.band-head .eyebrow::after {
content: ""; width: 28px; height: 2px; background: var(--band-accent, var(--accent-lit));
}
.split { display: grid; grid-template-columns: 1fr 1fr; gap: 2.5rem; align-items: center; }
.split.reverse .split-media { order: 2; }
/* A section the office left without a picture has nothing to sit beside. */
.split.solo { grid-template-columns: 1fr; max-width: 760px; }
/* `contain`, not `cover`. Several of these pictures are tall infographics —
the eleven chakras, the sapta dhatus — where the whole point is the labels
down the side. `cover` filled the box neatly and sliced the top and bottom
off the diagram. A photograph in a contain box simply sits inside it; a
diagram with its edges cut off is useless. */
.split-media img {
width: 100%;
max-height: 560px;
object-fit: contain;
object-position: center;
border-radius: var(--radius);
display: block;
}
.split-body h2 { font-size: clamp(1.55rem, 2.7vw, 2.05rem); margin-bottom: .9rem; }
.split-body p { color: #4f554e; margin-bottom: 1rem; line-height: 1.75; }
.split-body .btn { width: auto; margin-top: 1rem; }
/* ---- the four pillars, under the hero ----
Each tile carries its own colour through --pillar-accent, set on the element
because the strip is content: the view decides which idea gets which colour,
not the position it happens to sit in. */
.pillars-band { padding: 2.75rem 0; }
.pillar-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 2.25rem 2rem; }
/* No card around them. Four bordered boxes on a tinted band was three surfaces
stacked on each other; the ideas read better standing on the band itself with
a hairline above each, the way a printed page would set them. */
.pillar { position: relative; padding-top: 1.35rem; border-top: 1px solid var(--line); }
.pillar-mark {
position: absolute; top: -1px; left: 0; display: block; width: 42px; height: 2px;
background: var(--pillar-accent);
}
.pillar h3 { font-size: 1.04rem; margin-bottom: .45rem; color: var(--ink); }
.pillar p { color: var(--muted); font-size: .89rem; line-height: 1.7; }
/* ---- cards ---- */
.card-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(290px, 1fr)); gap: 1.5rem; }
/* Each card still has its own colour from the palette, but it is now spent on
the one word that is actually a link, and on a thin line that draws itself
along the top on hover. It was a permanent 3px band across every card, which
put six colours on screen at once before a visitor had read anything. */
.service-card {
--card-accent: var(--c-care); --card-ink: var(--c-care-ink);
position: relative; background: #fff; border: 1px solid var(--line);
border-radius: var(--radius); overflow: hidden; box-shadow: var(--shadow-soft);
transition: transform .25s ease, box-shadow .25s ease, border-color .25s ease;
}
.card-grid > .service-card:nth-child(6n+2) { --card-accent: var(--c-assess); --card-ink: var(--c-assess-ink); }
.card-grid > .service-card:nth-child(6n+3) { --card-accent: var(--c-mind); --card-ink: var(--c-mind-ink); }
.card-grid > .service-card:nth-child(6n+4) { --card-accent: var(--c-astro); --card-ink: var(--c-astro-ink); }
.card-grid > .service-card:nth-child(6n+5) { --card-accent: var(--c-move); --card-ink: var(--c-move-ink); }
.card-grid > .service-card:nth-child(6n) { --card-accent: var(--c-sun); --card-ink: var(--c-sun-ink); }
.service-card::before {
content: ""; position: absolute; top: 0; left: 0; right: 0; height: 2px;
background: var(--card-accent); transform: scaleX(0); transform-origin: left;
transition: transform .3s ease; z-index: 1;
}
.service-card:hover::before { transform: scaleX(1); }
.service-card:hover {
transform: translateY(-4px);
box-shadow: var(--shadow-lift);
border-color: color-mix(in srgb, var(--card-accent) 22%, var(--line));
}
/* A slow, small zoom on the photograph. Restful rather than snappy — the whole
page is trying to lower somebody's pulse, not demonstrate responsiveness. */
.service-card figure { overflow: hidden; }
.service-card img {
width: 100%; height: 200px; object-fit: cover; display: block;
transition: transform .7s cubic-bezier(.2, .6, .2, 1);
}
.service-card:hover img { transform: scale(1.045); }
.service-card-body { padding: 1.4rem 1.5rem 1.55rem; }
.service-card h3 { font-size: 1.14rem; margin-bottom: .5rem; }
.service-card p { color: var(--muted); font-size: .9rem; margin-bottom: 1rem; line-height: 1.65; }
.service-card a {
font-size: .82rem; font-weight: 700; letter-spacing: .04em; text-decoration: none;
color: var(--card-ink);
}
/* One course per card (Trainings), picture on top the way v1's tiles had it.
Flex, so the button sits on the floor of the card and a short course and a
long one still line their calls to action up across the row. */
.topic-card {
display: flex; flex-direction: column; overflow: hidden;
background: #fff; border: 1px solid var(--line); border-radius: var(--radius);
box-shadow: var(--shadow-soft);
transition: transform .25s ease, box-shadow .25s ease;
}
.topic-card:hover { transform: translateY(-4px); box-shadow: var(--shadow-lift); }
/* `cover` here, unlike .split-media: these are photographs at a fixed tile
height, not the labelled diagrams the service pages carry. */
.topic-card img { width: 100%; height: 180px; object-fit: cover; display: block; }
.topic-card-body { display: flex; flex-direction: column; flex: 1; padding: 1.35rem 1.5rem 1.25rem; }
.topic-card h2 { font-size: 1.05rem; letter-spacing: -.01em; margin-bottom: .5rem; }
.topic-card p { color: var(--muted); font-size: .9rem; margin-bottom: .7rem; }
.topic-card p:last-of-type { margin-bottom: 1.1rem; }
.topic-card .btn { margin-top: auto; align-self: flex-start; }
.team-card { background: #fff; border: 1px solid var(--line); border-radius: var(--radius); padding: 1.5rem; text-align: center; }
.team-card img { width: 110px; height: 110px; border-radius: 50%; object-fit: cover; margin: 0 auto 1rem; display: block; }
.team-initials {
width: 110px; height: 110px; border-radius: 50%; margin: 0 auto 1rem;
display: grid; place-items: center; font-size: 2rem; font-weight: 800;
background: color-mix(in srgb, var(--accent) 14%, white); color: var(--accent);
}
.team-card .role { color: var(--accent); font-weight: 600; font-size: .85rem; }
/* ---- pricing ---- */
.price-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 1.5rem; max-width: 940px; margin: 0 auto; }
.price-card {
position: relative; background: #fff; border: 1px solid var(--line);
border-radius: var(--radius); padding: 2.15rem 1.75rem; text-align: center;
box-shadow: var(--shadow-soft);
}
.price-card.featured { border-color: color-mix(in srgb, var(--accent) 45%, var(--line)); box-shadow: var(--shadow-lift); }
.ribbon {
position: absolute; top: -.7rem; left: 50%; transform: translateX(-50%);
background: var(--accent); color: #fff; font-size: .68rem; font-weight: 700;
letter-spacing: .06em; text-transform: uppercase; padding: .25rem .7rem; border-radius: 999px;
}
.price-card h3 { font-size: 1.05rem; margin-bottom: .5rem; }
.price { font-size: 2.2rem; font-weight: 800; letter-spacing: -.03em; margin-bottom: 1rem; }
.price small { font-size: .8rem; font-weight: 500; color: var(--muted); letter-spacing: 0; }
.price-card ul { margin-bottom: 1.25rem; text-align: left; }
.price-card ul li { padding: .4rem 0; font-size: .88rem; border-bottom: 1px solid var(--line); }
.price-card .btn { width: 100%; margin: 0; }
.ticks { list-style: none; margin: 1rem 0 1.5rem; }
.ticks li { padding: .35rem 0 .35rem 1.6rem; position: relative; font-size: .92rem; }
/* The tick is a mark, not a word, so it takes the bright green — a page full of
sunlit ticks is the cheapest life on it. */
.ticks li::before { content: "\2713"; position: absolute; left: 0; color: var(--c-move); font-weight: 700; }
.empty { text-align: center; max-width: 560px; margin: 0 auto; padding: 2rem 0; }
.empty h2 { font-size: 1.2rem; margin-bottom: .5rem; }
.empty .btn { width: auto; }
/* ---- call to action ----
Deep forest, with the faintest lift toward the middle so it reads as depth
rather than as a printed block of ink. */
.cta {
position: relative; color: #fff; text-align: center; padding: 3.5rem 0;
/* Forest with the sun coming over its shoulder, rather than a black slab. */
background:
radial-gradient(55% 70% at 82% 0%, rgba(245, 166, 35, .30) 0%, rgba(245, 166, 35, 0) 70%),
radial-gradient(120% 150% at 30% 0%, #2b4a33 0%, #16281c 100%);
}
.cta .wrap { position: relative; z-index: 1; }
.cta h2 { font-size: clamp(1.6rem, 2.8vw, 2.1rem); margin-bottom: .7rem; }
.cta p { opacity: .82; max-width: 560px; margin: 0 auto; line-height: 1.75; }
/* ---- buttons on the public site ----
Taller, rounder and calmer than the app's. The admin needs compact controls;
a website asks somebody to do one thing, and the button should look like an
invitation rather than a form control. */
.site .btn {
padding: .8rem 1.6rem; border-radius: 999px;
font-size: .88rem; font-weight: 600; letter-spacing: .01em;
transition: background-color .2s ease, color .2s ease, box-shadow .2s ease, transform .2s ease;
}
/* The fill stays the deep clay, because white type sits on it and that is the
half of the pair that can carry it. The warmth comes from the glow underneath
— marigold, so the button looks lit rather than merely coloured. */
.site .btn-primary { box-shadow: 0 6px 20px color-mix(in srgb, var(--c-sun) 42%, transparent); }
/* Hover brightens the glow, not the fill. Lightening the fill to --accent-lit
was the obvious move and it drops white label text to 3.3:1, which fails —
a hover state is not exempt from being readable. */
.site .btn-primary:hover {
transform: translateY(-1px);
box-shadow: 0 10px 28px color-mix(in srgb, var(--c-sun) 60%, transparent);
}
/* The app's .btn:hover dims everything with a brightness filter; on a rounded
outline button that just makes the border grey. */
.site .btn:hover { filter: none; }
.btn-outline { background: transparent; border-color: color-mix(in srgb, var(--accent) 55%, white); color: var(--accent); width: auto; margin: 0; }
.btn-outline.light { border-color: rgba(255, 255, 255, .45); color: #fff; }
.btn-outline:hover { background: var(--accent); border-color: var(--accent); color: #fff; }
.btn-outline.light:hover { background: #fff; border-color: #fff; color: var(--ink); }
.site .btn-small { padding: .5rem 1.1rem; font-size: .82rem; width: auto; }
/* ---- footer ---- */
/* The six-colour strip that ran along here is gone. Three of them on one page —
under the hero, above the call to action, above the footer — read as a
government banner, and a rainbow rule is the opposite of restful. */
.site-footer { background: #1a221c; color: #a3a89f; padding-top: 4rem; }
/* The mark beside the trading name, so the footer opens the way the header does. */
.footer-brand { display: flex; align-items: center; gap: .7rem; margin-bottom: .9rem; }
.footer-brand h3 { margin-bottom: 0; }
.footer-brand small {
display: block; font-size: .62rem; font-weight: 600; letter-spacing: .16em;
text-transform: uppercase; color: #6f756c; margin-top: .15rem;
}
.footer-grid { display: grid; grid-template-columns: 2fr 1fr 1.4fr 1.6fr; gap: 2.5rem; padding-bottom: 2.5rem; }
.site-footer h3 { color: #fff; font-size: .95rem; margin-bottom: .9rem; }
.site-footer p { font-size: .87rem; line-height: 1.7; }
.site-footer a { color: #a3a89f; text-decoration: none; font-size: .87rem; }
.site-footer a:hover { color: #fff; }
.site-footer .clean li { border-bottom: 0; padding: .3rem 0; font-size: .87rem; }
.social { display: flex; gap: .75rem; margin-top: 1rem; flex-wrap: wrap; }
.social a { border: 1px solid #454b45; border-radius: 6px; padding: .3rem .7rem; font-size: .78rem; }
/* Darker than the footer above it, so the bottom bar reads as a separate strip
rather than the last line of the sitemap. */
.footer-base { background: #121812; border-top: 1px solid #2a322b; padding: 1rem 0; }
/* Copyright left, credit right; they stack and centre on a narrow screen. */
.footer-base-inner {
display: flex; align-items: center; justify-content: space-between;
gap: .5rem 1.5rem; flex-wrap: wrap;
}
.footer-base p { font-size: .8rem; margin: 0; }
/* The WhatsApp button is fixed to the bottom-right corner and sits on top of
whatever is under it, which was the credit. Keep clear of it. */
.footer-base .credit { color: #6f756c; }
.footer-base .credit a { font-size: .8rem; color: #cdd2c7; font-weight: 600; }
.footer-base .credit a:hover { color: #fff; text-decoration: underline; }
@media (max-width: 560px) {
/* Stacked, so the credit is no longer beside the WhatsApp button; it sits
above it instead and the reserved space would only look like a mistake. */
.footer-base-inner { justify-content: center; text-align: center; }
.footer-base .credit { padding-right: 0; padding-bottom: 3rem; }
}
.whatsapp {
position: fixed; right: 1.1rem; bottom: 1.1rem; z-index: 60;
background: #25d366; color: #fff; text-decoration: none; font-weight: 700; font-size: .82rem;
padding: .7rem 1.1rem; border-radius: 999px; box-shadow: 0 6px 18px rgba(37, 211, 102, .4);
}
/* ---- responsive ---- */
/* Narrower than this, a 70% panel squeezes the two link columns badly, so it
reclaims most of the margin. Still an overlay, not yet the accordion. */
@media (max-width: 1180px) {
.mega { left: 3%; right: 3%; }
}
@media (max-width: 900px) {
.split { grid-template-columns: 1fr; }
.split.reverse .split-media { order: 0; }
.footer-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 760px) {
.navburger { display: flex; flex-direction: column; gap: 5px; margin-left: auto; cursor: pointer; padding: .5rem; }
.navburger span { width: 22px; height: 2px; background: var(--ink); border-radius: 2px; }
.site-nav { display: none; width: 100%; margin-left: 0; }
.navtoggle:checked ~ .site-nav { display: block; }
.site-header .wrap { flex-wrap: wrap; }
.site-nav > .nav-list { flex-direction: column; align-items: stretch; gap: 0; padding-bottom: .5rem; }
.site-nav .nav-parent { width: 100%; justify-content: space-between; }
/* Stacked inside the burger the panel is an accordion, so it collapses to
nothing rather than floating over the page. Same .open state as desktop. */
/* opacity is reset here; visibility still carries the open/closed state, so
a collapsed panel stays out of the tab order and the screen reader. */
.mega {
position: static; box-shadow: none; border-top: 0;
opacity: 1; transform: none; transition: none;
display: grid; grid-template-rows: 0fr;
}
.site-nav .has-mega.open > .mega { grid-template-rows: 1fr; }
.mega-inner { display: block; overflow: hidden; min-height: 0; max-width: none; margin: 0; padding: 0 0 0 1rem; }
.site-nav .has-mega.open > .mega > .mega-inner { padding-bottom: .75rem; }
.mega-intro { display: none; }
.mega-links.cols-2 { grid-template-columns: 1fr; }
.topbar-info .hide-sm { display: none; }
.footer-grid { grid-template-columns: 1fr; }
.hero { padding: 4.5rem 0; }
/* The desktop rhythm is built for a wide column; kept at 5.5rem on a phone
it becomes a lot of scrolling past nothing. */
.band { padding: 3.5rem 0; }
.pillars-band { padding: 2.75rem 0; }
.cta { padding: 3.5rem 0; }
.band-head { margin-bottom: 2.25rem; }
.split { gap: 2.5rem; }
}
/* Struck-through "was" price and the saving badge on a discounted plan. */
.price-was { margin: -.6rem 0 .8rem; font-size: .85rem; }
.price-was .was { color: var(--muted); text-decoration: line-through; margin-right: .5rem; }
.price-was .save {
display: inline-block; background: #dcfce7; color: #166534;
font-weight: 700; font-size: .72rem; padding: .1rem .45rem; border-radius: 999px;
}
.price-card .small { margin-bottom: .9rem; }
/* ── Enquiry form ───────────────────────────────────────────────────────── */
.wrap.narrow { max-width: 680px; }
.enquiry-form label { display: block; margin-bottom: 1rem; font-weight: 600; font-size: .9rem; }
.enquiry-form input,
.enquiry-form select,
.enquiry-form textarea {
width: 100%;
margin-top: .35rem;
padding: .65rem .8rem;
border: 1px solid #ddd9cf;
border-radius: 8px;
font: inherit;
font-weight: 400;
background: #fff;
}
.enquiry-form input:focus,
.enquiry-form select:focus,
.enquiry-form textarea:focus {
outline: 0;
border-color: var(--accent);
box-shadow: 0 0 0 3px rgba(169, 79, 53, .14);
}
.enquiry-form textarea { resize: vertical; min-height: 7rem; }
.field-pair { display: grid; grid-template-columns: 1fr 1fr; gap: 0 1rem; }
@media (max-width: 560px) { .field-pair { grid-template-columns: 1fr; } }
.field-error { display: block; margin-top: .25rem; color: #9c3a24; font-weight: 600; font-size: .8rem; }
/* At the centre, or at home. Two options, so radios rather than a select — the
choice is worth seeing without opening anything. */
.choice-set { border: 0; padding: 0; margin: 0 0 1.1rem; }
.choice-set legend { font-weight: 600; font-size: .9rem; margin-bottom: .5rem; padding: 0; }
.choice-set .muted { margin-top: .5rem; }
.choice {
display: inline-flex; align-items: center; gap: .5rem; margin-right: 1.25rem;
font-weight: 500; cursor: pointer;
}
.choice input { width: auto; margin: 0; }
/* The honeypot. Moved off-screen rather than display:none, because some bots
skip hidden fields but happily fill in one that is merely out of view. */
.trap { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
/* ---- form guard ----
The honeypot must be invisible to people but present and fillable to a
script, so it is moved out of view rather than display:none — some bots skip
hidden inputs, and skipping is the behaviour we are trying to catch. */
.hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.guard { margin: .25rem 0 1rem; }
.guard label { display: block; font-weight: 600; margin-bottom: .3rem; }
.guard input { max-width: 8rem; }
/* The header is sticky, so an anchor landing flush with the top of the viewport
puts the heading underneath it. Reserve its height plus a little air. */
.band[id^="section-"],
.topic-card[id^="section-"] { scroll-margin-top: 5.5rem; }
/* The panel's one action. A button rather than another link in a list of
links — everything else in the panel goes somewhere, this one starts
something. */
.mega-cta { margin-top: 1rem; }
.mega-cta-note { display: block; margin-top: .5rem; font-size: .78rem; }
/* ---- headings ------------------------------------------------------------
Solid ink, set in the serif.
These were gradient-clipped — ink easing into the accent, with a second
gradient over photographs and a two-colour rule beneath. Clipped text is a
styling trend, and it costs more than it looks: no real `color` for a
contrast checker to measure, cropped descenders to patch, a print override to
stop it coming out blank, and a fallback branch to maintain. A serif heading
in one confident colour is the more assured thing on the page, and the one a
visitor's eye rests on rather than notices. */
.hero h1,
.page-banner h1,
.cta h2 { color: #fff; }
.band-head h2,
.split-body h2,
.auth-band .card h1 { color: var(--ink); }
/* A hairline under a centred section heading, in the band's own colour. The
palette still shows here — it is simply the width of a hair rather than the
width of the words. */
.band-head h2::after {
content: "";
display: block;
width: 48px; height: 2px;
margin: 1rem auto 0;
background: var(--band-accent, var(--accent));
opacity: .75;
}
/* ── Social icons in the top bar ────────────────────────────────────────────
The strip is the brand colour, so the icons are white and carry no fill of
their own — they inherit whatever the bar is set to. */
.topbar-social {
display: flex;
align-items: center;
gap: .15rem;
margin: 0 0 0 auto; /* pushed to the right, whatever is beside them */
padding: 0;
list-style: none;
}
.topbar-social a {
display: grid;
place-items: center;
width: 28px;
height: 28px;
border-radius: 50%;
color: #fff;
opacity: .85;
transition: opacity .15s, background .15s;
}
.topbar-social a:hover,
.topbar-social a:focus-visible { opacity: 1; background: rgba(255, 255, 255, .18); }
.topbar-social svg { width: 15px; height: 15px; display: block; }
@media (max-width: 620px) {
/* On a phone the strip is already tight; the icons repeat in the footer. */
.topbar-social { display: none; }
}
/* ============================================================
Sunrise — the light, and what it falls on.
The brief was early morning in a forest: calm, but with something
happening in it. That is one idea repeated at every scale — warm light
arriving from above onto cool green shadow — and it is done with
gradients rather than pictures, so it costs nothing to load and cannot
go stale the way a stock photograph does.
============================================================ */
/* ---- the eyebrow above a heading ----
A short rule in the band's bright hue, then the words in its deep one.
Landmarks down a long page: the eye finds the colour before it reads. */
.eyebrow {
display: inline-flex; align-items: center; gap: .55rem;
color: var(--band-ink, var(--accent));
font-size: .74rem; font-weight: 700;
letter-spacing: .12em; text-transform: uppercase;
}
.eyebrow::before {
content: ""; width: 26px; height: 2px; border-radius: 2px;
background: linear-gradient(90deg, var(--band-accent, var(--accent-lit)), var(--c-sun));
}
.band-head { margin-bottom: 2.5rem; max-width: 62ch; }
.band-head h2 { margin: .6rem 0 .5rem; font-size: clamp(1.6rem, 3vw, 2.15rem); }
.band-head p { color: var(--muted); font-size: 1.02rem; }
/* ---- the horizon ----
Warm at the top of a band, fading into the page. It is what makes the
scroll feel like light arriving rather than sections stacking. */
.band { background: #fff; position: relative; }
.band.alt { background: linear-gradient(180deg, var(--linen) 0%, #fffdfa 70%); }
.band.warm { background: linear-gradient(180deg, var(--sand) 0%, #fffdfa 78%); }
.band.cool { background: linear-gradient(180deg, var(--moss) 0%, #fbfdfb 72%); }
/* ---- the sun ----
Sunlight over the photographs: two soft discs of warm light, and a scrim that
is barely there at the top and gathers toward the bottom where the words sit.
This layer used to end in an *opaque* forest gradient, which meant it painted
straight over the hero photograph — the pictures were being loaded, decoded
and then completely hidden. Every stop here is now translucent, so the light
falls on the photograph instead of replacing it. */
.hero::before {
content: "";
position: absolute; inset: 0; z-index: 1; pointer-events: none;
background:
radial-gradient(80% 55% at 50% 8%, rgba(246, 169, 59, .30) 0%, rgba(246, 169, 59, 0) 62%),
radial-gradient(60% 45% at 78% 22%, rgba(242, 121, 74, .20) 0%, rgba(242, 121, 74, 0) 60%),
linear-gradient(180deg, rgba(13, 42, 31, .30) 0%, rgba(16, 46, 34, .50) 60%, rgba(13, 42, 31, .64) 100%);
}
/* ---- cards ---- */
.service-card, .team-card, .topic-card, .price-card {
background: #fff;
border: 1px solid var(--line);
border-radius: var(--radius);
box-shadow: var(--shadow-soft);
transition: transform .2s ease, box-shadow .2s ease;
}
.service-card:hover, .team-card:hover, .price-card:hover {
transform: translateY(-4px);
box-shadow: var(--shadow-lift);
}
/* A sliver of sunrise along the top edge. Enough to tie a white box to the
brand; a coloured border all the way round is a highlighter, not a brand. */
.service-card, .price-card, .topic-card {
border-top: 3px solid transparent;
border-image: linear-gradient(90deg, var(--c-care), var(--c-sun)) 1;
}
.service-card:nth-child(3n+2) { border-image: linear-gradient(90deg, var(--c-sun), var(--c-move)) 1; }
.service-card:nth-child(3n+3) { border-image: linear-gradient(90deg, var(--c-rose), var(--c-care)) 1; }
.topic-card { padding: 1.6rem 1.5rem; }
.topic-card h2 { font-size: 1.15rem; margin-bottom: .6rem; }
/* ---- the team ---- */
.team-card { padding: 2rem 1.4rem; text-align: center; }
.team-card h3 { margin: 0 0 .25rem; font-size: 1.15rem; }
.team-card .role { color: var(--accent); font-weight: 600; font-size: .88rem; margin-bottom: .3rem; }
.team-card .muted { font-size: .85rem; }
/* Light falling on each portrait from the same direction as the sun. */
.team-card img, .team-initials {
box-shadow: 0 0 0 3px #fff, 0 0 0 5px var(--c-sun), 0 8px 22px rgba(180, 69, 26, .18);
}
.team-initials {
width: 110px; height: 110px; margin: 0 auto 1rem;
display: grid; place-items: center; border-radius: 50%;
background: linear-gradient(160deg, var(--sand), var(--linen));
color: var(--accent);
font-family: var(--font-display); font-size: 1.9rem; font-weight: 600;
}
/* ---- the closing band ----
The forest floor with the sun coming over it — the page ends on the same
image it opened with. */
.cta {
position: relative; isolation: isolate;
padding: 4.75rem 0; text-align: center; color: #fff;
background:
radial-gradient(70% 120% at 50% -10%, rgba(246, 169, 59, .34) 0%, rgba(246, 169, 59, 0) 60%),
linear-gradient(135deg, #0d2a1f 0%, #14382a 50%, #1d4b36 100%);
}
.cta h2 { color: #fff; margin-bottom: .6rem; }
.cta p { color: rgba(255, 255, 255, .9); margin: 0 auto 1.6rem; }
.cta .btn-primary {
background: linear-gradient(135deg, var(--c-sun), var(--c-care));
color: #2b1704; border-color: transparent; font-weight: 700;
box-shadow: 0 6px 20px rgba(246, 169, 59, .32);
}
.cta .btn-primary:hover { filter: brightness(1.05); }
.cta .btn-outline.light { border-color: rgba(255, 255, 255, .5); color: #fff; }
.cta .btn-outline.light:hover { background: rgba(255, 255, 255, .12); }
/* ---- page banner ----
A forest veil warmed from above, instead of the flat black wash every
template uses over a photograph. */
.page-banner::after {
background:
radial-gradient(60% 90% at 70% 0%, rgba(246, 169, 59, .3) 0%, rgba(246, 169, 59, 0) 65%),
linear-gradient(180deg, rgba(13, 42, 31, .74) 0%, rgba(20, 56, 42, .62) 100%);
}
/* ---- member login ---- */
.nav-cta a {
background: linear-gradient(135deg, var(--c-care), var(--c-care-ink));
color: #fff; border-radius: 999px; padding: .6rem 1.3rem; font-weight: 600;
box-shadow: 0 3px 14px rgba(180, 69, 26, .3);
transition: transform .16s, box-shadow .16s, filter .16s;
}
.nav-cta a:hover {
filter: brightness(1.06); transform: translateY(-1px);
box-shadow: 0 6px 20px rgba(180, 69, 26, .4);
}
/* ---- the strip above the header ----
Night on the left, the first of the sun on the right. */
.topbar-info {
background: linear-gradient(90deg, #0d2a1f 0%, #14382a 55%, #6b3a1d 100%);
color: #e9ded1;
}
.topbar-info a { color: #e9ded1; }
.topbar-info a:hover { color: #fff; }
.site-header { box-shadow: 0 1px 0 var(--line), 0 8px 24px rgba(20, 56, 42, .06); }
@media (prefers-reduced-motion: reduce) {
.service-card, .team-card, .price-card, .nav-cta a { transition: none; }
.service-card:hover, .team-card:hover, .price-card:hover, .nav-cta a:hover { transform: none; }
}
/* ============================================================
Images — the sunrise falls on them too.
One treatment everywhere a photograph appears: a warm wash from the top
corner in the same direction as the light on the rest of the page, and
the picture eases forward when you point at it. The wash is the reason a
dozen photographs from a dozen sources still look like one site.
The overlay lives on the container, never the ![]()
— a replaced element
has no ::after to put it in.
============================================================ */
.media,
.split-media,
.service-card .media {
position: relative;
overflow: hidden;
border-radius: var(--radius);
isolation: isolate;
background: linear-gradient(160deg, var(--sand), var(--moss)); /* while it loads */
}
.media img,
.split-media img {
display: block;
width: 100%;
transition: transform .6s cubic-bezier(.2, .7, .3, 1), filter .6s ease;
will-change: transform;
}
/* ---- the frame hugs the picture ----
A portrait photograph in the About band was rendering with a band of the
container's gradient down either side, which read as unexplained padding.
The cause was two rules pulling opposite ways: the image was told to fill the
column (width:100%) and also to stay inside a 560px height cap without being
cropped (object-fit:contain). A tall photograph cannot do both — it shrank to
meet the height, and the container stayed full width with its own background
showing through the gap.
`contain` has to stay: several of these pictures are tall infographics — the
eleven chakras, the sapta dhatus — and cropping their labels off makes them
useless. So the box gives way instead. It is now sized to its contents, which
means the gradient, the rounded corners and the hover wash all end exactly
where the photograph does, whatever shape it is. Wide pictures are unchanged:
max-width still holds them to the column. */
.split-media {
width: fit-content;
max-width: 100%;
margin-inline: auto;
}
.split-media img {
width: auto;
max-width: 100%;
max-height: 560px;
}
/* The wash. Warm where the sun is, clearing as it crosses the frame, with a
little forest gathering in the bottom corner — the same light, at the scale
of a photograph. */
.media::after,
.split-media::after {
content: "";
position: absolute; inset: 0; z-index: 1;
pointer-events: none;
background:
linear-gradient(155deg,
rgba(246, 169, 59, .26) 0%,
rgba(242, 121, 74, .12) 34%,
rgba(255, 255, 255, 0) 62%),
linear-gradient(0deg,
rgba(13, 42, 31, .30) 0%,
rgba(13, 42, 31, 0) 55%);
opacity: 1;
transition: opacity .5s ease;
}
/* Pointing at it lifts the veil and eases the picture forward: the photograph
clears as you approach it, which is the whole of the effect. */
.media:hover::after,
.split-media:hover::after,
.service-card:hover .media::after { opacity: .45; }
.media:hover img,
.split-media:hover img,
.service-card:hover .media img { transform: scale(1.055); }
/* Card thumbnails keep a fixed height so the grid stays even. */
.service-card .media { border-radius: 0; }
.service-card .media img { height: 200px; object-fit: cover; }
/* Section pictures show the whole frame — several are tall diagrams whose
labels are the content. */
.split-media img { max-height: 560px; object-fit: contain; }
/* A diagram must not be tinted: the wash would sit over the very labels the
picture exists for. Only photographs take the overlay. */
.split-media:has(img[src*="/v1/"])::after { opacity: .18; }
.split-media:has(img[src*="/v1/"]):hover::after { opacity: 0; }
/* ---- portraits ---- */
.media-round { border-radius: 50%; width: 110px; height: 110px; margin: 0 auto 1rem; }
.media-round img { width: 110px; height: 110px; object-fit: cover; }
.media-round::after { background: linear-gradient(160deg, rgba(246, 169, 59, .22), rgba(13, 42, 31, .16)); }
/* The ring belongs to the container now that one wraps the picture. */
.team-card .media-round {
box-shadow: 0 0 0 3px #fff, 0 0 0 5px var(--c-sun), 0 8px 22px rgba(180, 69, 26, .18);
}
.team-card img { box-shadow: none; }
@media (prefers-reduced-motion: reduce) {
.media img, .split-media img,
.media::after, .split-media::after { transition: none; }
.media:hover img, .split-media:hover img,
.service-card:hover .media img { transform: none; }
}
/* ============================================================
Headings — the sunrise runs through the words.
The bright tokens cannot do this. Measured on the lightest surface,
marigold #f6a93b lands at 1.90:1 and coral #f2794a at 2.66:1 — both fail
even the 3:1 allowed for large text, so a heading painted in them is
decoration somebody has to squint at. The gradient therefore runs between
the deep halves of the same hues: rose into coral into amber. It reads as
the same sunrise and every point along it clears 4.7:1.
Only the display sizes take it. A gradient on every h3 in a card grid is
not a brand, it is a page that will not sit still.
============================================================ */
.site h1,
.site h2 {
/* Set first and unconditionally: if the clip does not paint — an old
browser, a printer, forced-colours — the words are still there in a
colour that passes. Transparent text with no fallback is how a heading
disappears entirely. */
color: var(--c-care-ink);
}
@supports (background-clip: text) or (-webkit-background-clip: text) {
.site .band h1,
.site .band h2,
.site .band-head h2,
.site .list-head h1 {
background: linear-gradient(100deg,
var(--c-rose-ink) 0%,
var(--c-care-ink) 45%,
var(--c-sun-ink) 100%);
-webkit-background-clip: text;
background-clip: text;
color: transparent;
/* Without this the descenders of g and y are clipped by the box the
gradient is painted into. */
padding-bottom: .08em;
}
/* A section in a discipline's own colour takes that hue instead, so the
heading agrees with the rule above it. */
.site .band.astro h2 { background-image: linear-gradient(100deg, var(--c-astro-ink), var(--c-care-ink)); }
.site .band.cool h2 { background-image: linear-gradient(100deg, var(--c-move-ink), var(--c-mind-ink)); }
}
/* Headings that sit on the forest — the hero, the closing band, a page banner —
stay white. A gradient there would be unreadable and is the one place the
rule above must not reach. */
.site .hero h1,
.site .hero h2,
.site .cta h1,
.site .cta h2,
.site .page-banner h1,
.site .page-banner h2 {
background: none;
-webkit-text-fill-color: #fff;
color: #fff;
padding-bottom: 0;
}
/* Card and panel headings keep the forest ink. They are read at body size and
sit in groups, where colour is repetition rather than emphasis. */
.site h3,
.site .service-card h3,
.site .team-card h3,
.site .topic-card h2,
.site .price-card h3 {
background: none;
-webkit-text-fill-color: currentColor;
color: var(--ink);
padding-bottom: 0;
}
@media print {
.site h1, .site h2 { background: none; -webkit-text-fill-color: #000; color: #000; }
}
/* ---- privacy policy and terms ----
Long prose. A narrow measure, generous leading, and headings that are easy to
scan down — somebody arrives at one of these pages with a single question and
should be able to find it without reading the rest. */
.legal { max-width: 760px; }
.legal-updated { color: var(--muted); font-size: .85rem; margin-bottom: 2rem; }
.legal-toc {
background: var(--moss); border-radius: var(--radius);
padding: 1.4rem 1.6rem; margin-bottom: 3rem;
}
.legal-toc h2 {
font-size: .72rem; font-weight: 700; letter-spacing: .16em; text-transform: uppercase;
color: var(--muted); margin-bottom: .8rem; font-family: var(--font);
}
.legal-toc ol { margin: 0; padding-left: 1.2rem; }
.legal-toc li { margin-bottom: .35rem; font-size: .92rem; }
.legal-toc a { color: var(--accent); text-decoration: none; }
.legal-toc a:hover { text-decoration: underline; }
.legal-section { margin-bottom: 2.75rem; scroll-margin-top: 6rem; }
.legal-section h2 { font-size: 1.3rem; margin-bottom: .9rem; }
.legal-section p { margin-bottom: 1rem; color: #414a42; }
.legal-section p:last-child { margin-bottom: 0; }
.footer-legal { display: flex; gap: .5rem; align-items: center; flex-wrap: wrap; }
.footer-legal span { opacity: .4; }
/* Two actions per training card — read about it, or apply straight away. */
.topic-card-actions { display: flex; gap: .5rem; flex-wrap: wrap; margin-top: auto; }
.topic-card h2 a { color: inherit; text-decoration: none; }
.topic-card h2 a:hover { color: var(--accent); }
/* ---- breadcrumb ----
Somebody arriving from a search result has no history to go back through, so
a deep page has to say where it sits. */
.crumbs { background: var(--linen); border-bottom: 1px solid var(--line); font-size: .85rem; }
.crumbs .wrap { padding-top: .8rem; padding-bottom: .8rem; display: flex; gap: .5rem; flex-wrap: wrap; }
.crumbs a { color: var(--accent); text-decoration: none; }
.crumbs a:hover { text-decoration: underline; }
.crumbs span[aria-hidden] { opacity: .4; }
.crumbs [aria-current] { color: var(--muted); }
/* ---- the standing health notice ----
Calm, not alarming. This is the boundary of what the centre claims, and a box
that shouts it undermines the practitioner as much as one that hides it. */
.wellness-notice {
border-left: 3px solid var(--c-mind);
background: var(--moss);
border-radius: 0 var(--radius) var(--radius) 0;
padding: 1.25rem 1.5rem;
}
.wellness-notice p { font-size: .9rem; line-height: 1.75; color: #414a42; margin: 0; max-width: none; }
.wellness-notice strong { color: var(--ink); }
/* The acknowledgement on the application form — a checkbox with a sentence
beside it, not a legal wall. */
.choice.consent { display: flex; align-items: flex-start; gap: .65rem; margin: .25rem 0 1.25rem; font-weight: 400; }
.choice.consent input { margin-top: .35rem; flex: none; }
.choice.consent span { font-size: .88rem; line-height: 1.6; color: #414a42; }
/* ============================================================
The catalogue in public — /packages, /therapies, and a page
for every entry in them.
The pricing card was the only public description of a package: a
name, a price and three bullets, with everything else behind the
portal sign-in. Nobody buys a month of care from three bullets, so
these pages exist to carry the rest — and they are laid out in the
order the decision is made rather than in the order the columns
happen to sit in the table.
============================================================ */
/* A card whose only way in is the button at the bottom makes people click
the title and wonder why nothing happened. The title is a link. */
.plan-link { color: inherit; text-decoration: none; }
.plan-link:hover { color: var(--accent); }
/* Cards in a row are as tall as the tallest, but their contents were not: a
package with three bullets left its button floating half-way up the card
while the one beside it sat at the bottom. The list takes the slack, so
every button in the row lands on the same line. */
.price-grid .price-card { display: flex; flex-direction: column; }
.price-grid .price-card > ul { flex: 1; }
/* The slack goes above the first button only — the second is its pair and sits
directly beneath it, not at the other end of the card. */
.price-grid .price-card > .btn:not(.card-buy) { margin-top: auto; }
/* Quota and duration, under the price. Two facts, not a sentence. */
.plan-meta {
display: flex; justify-content: center; flex-wrap: wrap; gap: .4rem;
font-size: .82rem; color: var(--muted); margin-bottom: .9rem;
}
.plan-meta span[aria-hidden] { opacity: .45; }
/* The way across to the other list. Somebody on the wrong one should not
have to go up to the menu to find that out. */
.catalogue-switch { text-align: center; margin-top: 2.5rem; }
.catalogue-switch a { color: var(--accent); font-weight: 600; text-decoration: none; }
.catalogue-switch a:hover { text-decoration: underline; }
/* ---- the facts strip ----
What it costs, what you get, how long it lasts, what happens to the
results. Above everything else because it is what the visitor came for;
the prose only gets read if these four answers are acceptable. */
.plan-facts {
display: grid; gap: 1px; margin: 0;
grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
background: var(--line); border: 1px solid var(--line);
border-radius: var(--radius); overflow: hidden;
}
.plan-facts > div { background: #fff; padding: 1.35rem 1.5rem; }
.plan-facts dt {
font-size: .72rem; font-weight: 700; letter-spacing: .1em;
text-transform: uppercase; color: var(--muted); margin-bottom: .45rem;
}
.plan-facts dd { margin: 0; font-size: 1.05rem; font-weight: 600; color: var(--ink); }
.plan-facts-price { font-size: 1.7rem; font-weight: 800; letter-spacing: -.02em; }
.plan-facts-price small { font-size: .78rem; font-weight: 500; color: var(--muted); }
.plan-facts .price-was { display: block; margin-top: .3rem; }
/* ---- benefits ----
Kept apart from the feature list on purpose: a feature is what is in the
box, a benefit is what changes for the person who buys it. Run together
as one list of bullets, the second always loses to the first. */
.benefit-grid {
list-style: none; margin: 0; display: grid; gap: 1rem;
grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
}
.benefit-grid li {
position: relative; background: #fff; border: 1px solid var(--line);
border-left: 3px solid var(--c-move); border-radius: var(--radius);
padding: 1.1rem 1.25rem 1.1rem 2.9rem;
font-size: .95rem; line-height: 1.6; color: #414a42;
box-shadow: var(--shadow-soft);
}
.benefit-grid li::before {
content: "\2713"; position: absolute; left: 1.2rem; top: 1.05rem;
color: var(--c-move); font-weight: 700;
}
/* ---- what is included ---- */
.plan-columns {
display: grid; gap: 2.5rem;
grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
}
.plan-columns h3 { font-size: 1.05rem; margin-bottom: .4rem; }
.plan-columns .ticks { margin-bottom: 0; }
/* "4 sessions" never said four sessions of what. This is the answer. */
.plan-disciplines li { padding: .55rem 0; border-bottom: 1px solid var(--line); font-size: .92rem; }
.plan-disciplines li:last-child { border-bottom: 0; }
.plan-disciplines strong { display: block; }
.plan-disciplines .muted { font-size: .84rem; }
/* ---- how it works ----
Numbered because the order is the information. The counter is drawn
rather than left to the browser so the numeral can carry the brand. */
.steps { list-style: none; counter-reset: step; margin: 0; display: grid; gap: 1.25rem; }
.steps li { counter-increment: step; position: relative; padding-left: 3.1rem; line-height: 1.7; color: #414a42; }
.steps li::before {
content: counter(step);
position: absolute; left: 0; top: -.1rem;
width: 2.1rem; height: 2.1rem; display: grid; place-items: center;
border-radius: 50%; background: linear-gradient(150deg, var(--c-sun), var(--c-care));
color: #2b1704; font-weight: 700; font-size: .9rem;
}
.steps strong { display: block; color: var(--ink); }
/* The line under the closing buttons — an aside, not a third action. */
.cta-note { font-size: .88rem; color: rgba(255, 255, 255, .78); margin-top: 1.4rem; }
.cta-note a { color: #fff; text-decoration: underline; }
/* ---- taking it ----
Subscribe, and the two ways to reach a person instead. The telephone is not
a fallback here: a good share of the people reading a page about a month of
care will not buy it from a form on a first visit, and the centre would
rather have the call than the abandoned basket. */
.buy-actions { display: flex; flex-wrap: wrap; gap: .75rem; margin-top: 1.75rem; justify-content: center; }
/* The base button is full width for forms; in a row of three it has to size to
its own label, the same override .hero-actions already makes. */
.buy-actions .btn { width: auto; margin: 0; }
/* The sentence that stops "Subscribe" from being a button that silently opens
a password form. Centred under the actions, quiet enough to read as a note
and close enough that it is read before the press, not after it. */
.buy-note {
max-width: 54ch; margin: .9rem auto 0; text-align: center;
font-size: .85rem; line-height: 1.6; color: var(--muted);
}
.buy-note.on-dark { color: rgba(255, 255, 255, .78); }
/* The second action on a pricing card. Full width like the first, so the two
read as a pair rather than as a button with an afterthought beside it. */
.price-grid .price-card > .card-buy { margin-top: .6rem; width: 100%; }
/* ---- Telugu ----
Neither of the site's font stacks has Telugu glyphs — Segoe UI doesn't, and
the Palatino/Georgia heading serif certainly doesn't — so without this a
Telugu page renders in whatever each device falls back to, different on
every phone. Noto Sans Telugu is self-hosted (the CSP is font-src 'self')
and weighs ~36KB a weight.
Declared once and scoped by the html[lang]: an English page never downloads
it, because a @font-face is only fetched when something matches it.
The serif heading treatment does not apply in Telugu — there is no Telugu
Palatino, and faking one is worse than a clean sans. Headings share the one
family at its heavier weight, which is normal Telugu typesetting. Telugu
script is also taller than Latin (stacked vowel signs above and below the
base), so the language gets more line-height rather than clipped headlines. */
@font-face {
font-family: 'Noto Sans Telugu';
src: url('/assets/fonts/noto-sans-telugu-400.woff2') format('woff2');
font-weight: 400;
font-display: swap;
unicode-range: U+0C00-0C7F;
}
@font-face {
font-family: 'Noto Sans Telugu';
src: url('/assets/fonts/noto-sans-telugu-600.woff2') format('woff2');
font-weight: 600 800;
font-display: swap;
unicode-range: U+0C00-0C7F;
}
html[lang="te"] .site {
font-family: 'Noto Sans Telugu', 'Segoe UI', system-ui, sans-serif;
line-height: 1.85;
}
html[lang="te"] .site h1,
html[lang="te"] .site h2,
html[lang="te"] .site h3,
html[lang="te"] .site .brand-word {
font-family: 'Noto Sans Telugu', 'Segoe UI', system-ui, sans-serif;
font-weight: 700;
letter-spacing: 0;
line-height: 1.45;
}
html[lang="te"] .hero h1 { font-size: clamp(1.8rem, 3.6vw, 2.6rem); }
html[lang="te"] .eyebrow { letter-spacing: .04em; }
/* ---- language switcher ---- */
/* One link — the language you are NOT reading — dressed as a proper button so
it reads as an action beside Member Login, not as a stray word in the bar. */
.lang-switch { display: flex; align-items: center; margin-left: .35rem; }
.lang-switch a {
display: inline-block; padding: .5rem .95rem; border-radius: 999px;
border: 1.5px solid color-mix(in srgb, var(--accent) 45%, white);
text-decoration: none; font-size: .82rem; font-weight: 700;
color: var(--accent); background: #fff;
transition: background-color .18s ease, color .18s ease, border-color .18s ease;
}
.lang-switch a:hover { background: var(--accent); border-color: var(--accent); color: #fff; }
/* The research motto band: one claim, centred, under the four pillars. */
.research-band { text-align: center; }
.research-band h2 { margin-bottom: .4rem; }
.research-band p { max-width: 46rem; margin: 0 auto 1.1rem; }
/* Footer lockup: the tagline lines end exactly where the legal name ends. */
.footer-brand > div { display: inline-block; }
.footer-brand small {
display: block; width: 0; min-width: 100%;
text-align: justify; text-align-last: justify; white-space: nowrap;
}
/* Footer lockup: the tagline lines end exactly where the legal name ends. */
.footer-brand > div { display: inline-block; }
.footer-brand small.brand-tagline { margin-top: .3rem; width: auto; min-width: 0; }
.footer-brand small.brand-tagline .tagline-line { text-align: left; text-align-last: left; }
/* The footer sits on the dark ground, and the late `.site h3` ink rule was
winning over its white headings — they rendered forest-on-forest. These
carry higher specificity on purpose. */
.site .site-footer h3 { color: #fff; -webkit-text-fill-color: #fff; }
.site-footer .brand-tagline .tagline-line:first-child { color: #9fc7a8; }
.site-footer .brand-tagline .tagline-line:last-child { color: var(--accent-lit); }
/* Why AuraScan: four commitments in a quiet grid under the motto. */
.why-grid {
display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
gap: 1rem; margin: 1.4rem 0 1.4rem; text-align: left;
}
.why-card { background: var(--card, #fff); border: 1px solid var(--rule, #d9e2d6); border-radius: 10px; padding: 1rem 1.1rem; }
.why-card h3 { font-size: 1rem; margin-bottom: .3rem; }
.why-card p { font-size: .92rem; color: var(--muted); margin: 0; }
/* How it works: a real sequence, so the numbers carry meaning. */
.how-band { text-align: center; }
.how-steps {
list-style: none; padding: 0; margin: 1.4rem auto 1.4rem; max-width: 40rem;
display: grid; gap: .65rem; text-align: left;
}
.how-steps li { display: flex; align-items: center; gap: .8rem; background: var(--card, #fff); border-radius: 10px; padding: .8rem 1rem; }
.how-no {
flex: none; width: 2rem; height: 2rem; border-radius: 50%;
display: grid; place-items: center; font-weight: 700;
background: var(--accent); color: #fff;
}
/* FAQ on the contact page. */
.faq-wrap { max-width: 46rem; }
.faq-item { border-bottom: 1px solid var(--rule, #d9e2d6); padding: .6rem 0; }
.faq-item summary { cursor: pointer; font-weight: 600; }
.faq-item p { color: var(--muted); margin: .5rem 0 .2rem; }
/* Footer brand statement and the standing disclaimer. */
.site-footer .footer-statement { color: #d9e2d6; font-weight: 600; }
.footer-disclaimer { font-size: .78rem; opacity: .75; max-width: 40rem; }
/* The maintainer credit hugs the right edge — even when the base bar wraps
onto two lines, auto-margin keeps it pinned right rather than drifting. */
.footer-base-inner .credit { margin-left: auto; text-align: right; }
/* The base bar as three true parts: (c) left, disclaimer centred, credit right. */
.footer-base-inner .footer-disclaimer { flex: 1; text-align: center; margin: 0 1.5rem; }