/* =========================================================================== * v4 — ClearPath-inspired light layout, Trance Ritual content * * Design prototype. Content is lifted from the live site so the layout can be * judged on real words and real photographs; none of it is new copy. * * PHOTOGRAPHY IS PLACEHOLDER. Every image is graded for the current near-black * site and is desaturated here to sit on a white page. One variable does it — * --photo-filter below. Delete that one line when the real photographs exist. * * FONTS - self-hosted, not Google's CDN. Same reasoning as the live site: a * Munich court ruled CDN font loading a GDPR breach in 2022 and German tourists * are a named audience. Both families are OFL so self-hosting is permitted. * latin-ext is not optional: Polish needs it. * =========================================================================== */ @font-face { font-family: 'Inter'; font-style: normal; font-weight: 100 900; font-display: swap; src: url('../fonts/inter-latin.woff2') format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; } @font-face { font-family: 'Inter'; font-style: normal; font-weight: 100 900; font-display: swap; src: url('../fonts/inter-latin-ext.woff2') format('woff2'); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; } @font-face { font-family: 'Crimson Text'; font-style: normal; font-weight: 400; font-display: swap; src: url('../fonts/crimson-latin.woff2') format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; } @font-face { font-family: 'Crimson Text'; font-style: normal; font-weight: 400; font-display: swap; src: url('../fonts/crimson-latin-ext.woff2') format('woff2'); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; } @font-face { font-family: 'Crimson Text'; font-style: italic; font-weight: 400; font-display: swap; src: url('../fonts/crimson-italic-latin.woff2') format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; } @font-face { font-family: 'Crimson Text'; font-style: italic; font-weight: 400; font-display: swap; src: url('../fonts/crimson-italic-latin-ext.woff2') format('woff2'); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; } /* Italiana — the wordmark only. One weight exists, which is why GRAN CANARIA in the lockup is enlarged and tracked rather than bolded: there is no bold to reach for. latin is enough here; the mark is pure ASCII and this site is English only (BUILD-BRIEF.md), so latin-ext would be dead weight. */ @font-face { font-family: 'Italiana'; font-style: normal; font-weight: 400; font-display: swap; src: url('../fonts/italiana-latin.woff2') format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2122, U+2212, U+FEFF, U+FFFD; } /* --- tokens ------------------------------------------------------------- */ :root { /* palette — GCGM v5, 2026-08-21. Replaces the sage taken from the Framer template. These are the three colours from the logo that is live on the server today, so the site keeps the brand it already has instead of inventing a new one. White ground is deliberate: Bodhi Center and Trance Ritual are both dark, and this site is meant to read as a different place. THREE ACCENTS, THREE JOBS. Keeping them separate is what stops the page looking busy — colour appears in every section without any section carrying more than one warm note. teal structure. Links, buttons, the main line stroke, form focus. saffron warmth. The ghost line, decorative numerals, rules, washes. red emphasis. One word per section, and active states. Rare. Contrast on white, measured not estimated: ink 16.78:1 body 9.00:1 muted 5.27:1 teal 6.82:1 brown 8.05:1 red 6.58:1 saffron 2.02:1 <- FAILS as text. Strokes, fills and rules only. saffron-ink 4.87:1 <- use this one when the warm accent must be READ. */ --white: #FFFFFF; --surface: #FAF8F5; --teal: #00637D; --teal-rgb: 0, 99, 125; --teal-wash: rgba(0, 99, 125, 0.14); --teal-hair: rgba(0, 99, 125, 0.30); /* Teal lifted 55% toward white, and it is the exact mirror of --saffron-ink below: saffron is darkened until it can be READ on white, teal is lifted until it can be SEEN on a dark photograph. Raw --teal measures 1.56:1 against the scrimmed band on coaching.php and 1.26:1 at the p90 -- a dark line on a dark picture. This one measures 4.98:1 / 4.05:1, which is saffron's own 5.25:1 / 4.26:1 on the same ground, and matching them is what makes the two read as a pair rather than as a line and its shadow. Use --teal on white, --teal-lift on a photograph. */ --teal-lift: #8CB9C4; --saffron: #F2A809; --saffron-rgb: 242, 168, 9; --saffron-wash: rgba(242, 168, 9, 0.16); --saffron-hair: rgba(242, 168, 9, 0.42); /* Saffron darkened until it passes as text — 4.87:1. Use this whenever the warm accent has to be READ; use --saffron when it is a stroke or a fill. */ --saffron-ink: #9C6604; /* The sarong red, sampled from Greg's own photograph — the same accent as palette C in PALETTES.html. 6.58:1 on white, so unlike saffron it is safe as text. It is the RARE accent: roughly one appearance per section, on the word that matters most. Spend it and it stops working. */ --red: #A23A33; --red-rgb: 162, 58, 51; --red-wash: rgba(162, 58, 51, 0.12); --red-hair: rgba(162, 58, 51, 0.34); --brown: #7D4009; /* --teal taken down to roughly half its lightness. Tried on the hero band and rejected — Greg, 2026-08-21, the blue was wrong there and the band is the beige --surface instead. Kept because the measurement is worth having if a dark ground is ever wanted: white 13.7:1 on it, saffron 6.8:1. Nothing uses it today. */ --teal-deep: #04323E; --ink: #2A1A0C; /* The dark ground behind the #ceiling proof row. Greg asked for black; this is #14100B, which is --ink taken most of the way down rather than pure #000. Every dark surface on this site is warm -- the band scrims, the photographs, the saffron -- and a true black beside them reads as a hole cut in the page rather than as part of it. It is 1.5% off black by luminance, so it is black to the eye and warm against the cream. */ --proof-ground: #14100B; --body: #574636; --muted: #7A6957; --hairline: rgba(42, 26, 12, 0.10); --serif: 'Crimson Text', Georgia, 'Times New Roman', serif; --sans: 'Inter', system-ui, -apple-system, sans-serif; /* Logo only. Single weight, display sizes — never body copy. */ --display: 'Italiana', 'Cormorant Garamond', Georgia, serif; --ease-out: cubic-bezier(0.16, 1, 0.3, 1); --ease-soft: cubic-bezier(0.4, 0, 0.2, 1); --header-h: 76px; --gutter: clamp(1.25rem, 5vw, 5rem); --max: 1280px; /* ONE READING SIZE FOR THE PAGE'S PROSE. Greg, 2026-08-22: #what-this-is and About must be the same font, so they share a knob rather than two numbers that drift. 18.24px floor / 2.34vw / 25.6px cap — the cap binds from about 1094px up, the floor below 779. Monotonic by construction: it only ever grows with the window. */ --read-size: clamp(1.14rem, 2.34vw, 1.6rem); /* PLACEHOLDER PHOTOGRAPHY — delete this line once real images exist */ /* THE GREYSCALE IS ITS OWN VARIABLE so the gallery can animate it. Greg, 2026-08-25: the photographs are black and white and reveal their colour on hover. A second hardcoded filter on the hover rule would be two places to keep the contrast and brightness in step; one knob is one place. --photo-filter still reads exactly as it did, so every other picture on the site is unaffected. Both lines go when the real photographs land. */ --photo-gray: 1; --photo-filter: grayscale(var(--photo-gray)) contrast(1.06) brightness(1.04); } *, *::before, *::after { box-sizing: border-box; } html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; } body { margin: 0; background: var(--white); color: var(--body); font-family: var(--sans); font-size: 16px; line-height: 1.7; -webkit-font-smoothing: antialiased; overflow-x: hidden; } img { max-width: 100%; display: block; } a { color: inherit; text-decoration: none; } button { font: inherit; color: inherit; background: none; border: 0; cursor: pointer; } .container { width: 100%; max-width: var(--max); margin-inline: auto; padding-inline: var(--gutter); } .container--narrow { max-width: 860px; } /* TIGHTER, PAGE-WIDE. Greg, 2026-08-22: every section carried too much air. This was clamp(5rem, 11vw, 10rem) — 158px top AND bottom at 1440, so 316px of nothing between one section's last line and the next one's first. Now 94px a side, 188 between: a 41% cut that is felt everywhere at once rather than tuned section by section. Greg took the middle term to 3vw in DevTools on 2026-08-22 and kept it, and it is worth knowing what that does: 3vw is 43px at 1440, which is BELOW the 3rem floor, so from 0 to about 1600px the FLOOR is the live branch and the padding is a flat 48px. The vw term only starts doing anything past 1600. That is a deliberate flat value on every screen Greg reviews on, not a fluid one — and if it should come down further, the number to change is the floor, not the middle. (The struck-through terms DevTools shows on a clamp are not an override. It strikes the two branches you are NOT getting and leaves the live one.) */ .section { padding-block: clamp(3rem, 3vw, 6.5rem); } .section--surface { background: var(--surface); } /* the header is fixed, so an in-page anchor must stop clear of it */ [id] { scroll-margin-top: calc(var(--header-h) + 1.5rem); } /* --- type scale — measured from the template ---------------------------- */ .eyebrow { font-size: 12px; font-weight: 600; line-height: 1.4; letter-spacing: 0.11em; text-transform: uppercase; color: var(--teal); margin: 0; } .eyebrow--muted { color: var(--muted); } /* Section eyebrows rotate through the three accents rather than all sitting on teal. It is the cheapest way to get colour into every section: the eyebrow is already the first thing in each one, it is small, and rotating it means no single section reads as "the blue one". --saffron-ink, never --saffron: this is type. */ .eyebrow--red { color: var(--red); } .eyebrow--warm { color: var(--saffron-ink); } /* --- the slogan ---------------------------------------------------------- "Professional massage. Man to man." It is carrying two jobs at once and the second one is invisible if you are not looking for it. Job one: say what the service is, plainly. Not "sensual", not "intimate" - the FAQ does the filtering on this site (BUILD-BRIEF.md), so the front of the house can just be professional. Job two: say nothing whatsoever about the therapist's sexuality, because on this site it is not information the client needs. "Man to man" describes the room - one man working on another - and describes nothing else. That is deliberate: plenty of clients do not care who the therapist goes home to, and the ones who do are not owed an answer by a headline. The idiom helps rather than hurts. "Man to man" already means direct, no games, no performance, which is exactly the register the rest of the copy wants. Set in the display face, so it reads as part of the mark rather than as body copy - and the second half is red, which is the emphasis accent spent here on the half that does the real work. */ .slogan { font-family: var(--display); font-size: clamp(1.05rem, 1.9vw, 1.5rem); letter-spacing: 0.14em; text-transform: uppercase; line-height: 1.3; color: var(--ink); margin: 0.85rem 0 0; } /* nowrap so the phrase never splits across a line break - at 390px it was breaking as "MAN TO / MAN.", which reads as a mistake. Below 620px the two sentences stack instead, which is the only break the line should ever take. */ .slogan em { font-style: normal; color: var(--red); white-space: nowrap; } @media (max-width: 620px) { .slogan em { display: block; } } .footer-slogan { font-family: var(--display); font-size: clamp(0.85rem, 1.4vw, 1.05rem); letter-spacing: 0.22em; text-transform: uppercase; color: var(--saffron); margin: -0.4rem 0 0; } .display-xl { font-family: var(--serif); font-weight: 400; font-size: clamp(3.25rem, 9.4vw, 8.5rem); line-height: 0.84; letter-spacing: -0.04em; color: var(--ink); margin: 0; } .display-lg { font-family: var(--serif); font-weight: 400; font-size: clamp(2.5rem, 5vw, 4.5rem); line-height: 1; letter-spacing: -0.03em; color: var(--ink); margin: 0; } .display-sm { font-family: var(--serif); font-weight: 400; font-size: clamp(1.65rem, 2.4vw, 2.25rem); line-height: 1.05; letter-spacing: -0.03em; color: var(--ink); margin: 0; } .statement { font-family: var(--sans); font-weight: 500; font-size: clamp(1.6rem, 3.1vw, 2.75rem); line-height: 1.2; letter-spacing: -0.03em; color: var(--ink); margin: 0; } .sub { font-weight: 500; font-size: clamp(1.15rem, 1.8vw, 1.625rem); line-height: 1.4; letter-spacing: -0.03em; color: var(--ink); margin: 0; } /* Was 16px, then 18px, now the shared --read-size. Greg, 2026-08-22: About and #what-this-is must be the same font, so both read one knob and cannot drift. 18.24px on a phone, 25.6px on the desktop. REM/vw rather than px on purpose — a reader who has raised their browser's default font size gets the increase, which a px value ignores. The rest of the page is still px-based; converting it is a separate job before upload. .body-text appears in TWO places on this page, both of them About. */ .body-text { font-size: var(--read-size); line-height: 1.32; margin: 0 0 1.25rem; } .body-sm { font-size: 14px; line-height: 1.8; color: var(--body); margin: 0; } .italic { font-style: italic; } /* --- buttons ------------------------------------------------------------ */ .btn { display: inline-flex; align-items: center; gap: 0.65rem; font-size: 12px; font-weight: 600; letter-spacing: 0.11em; text-transform: uppercase; /* THE LABEL SITS LOW ON PURPOSE. Greg, 2026-08-26, and it came out of a bug: while the gallery's underline rule was wrongly selecting this button it stripped the bottom padding to 2px, the words dropped into the lower half, and he liked it enough to want it kept. His words -- "I don't want it centred, I want it in the bottom half rather than in the centre", about twenty percent up from the bottom edge. THE HEIGHT DOES NOT CHANGE, which is the difference between this and the bug. The two paddings still sum to 2rem, so every button stays the 54px it is everywhere else and only the split moves. The accident made the button SHORTER as well as the label lower; only the second half was wanted. --btn-drop IS THE ONE NUMBER TO TURN. It is how far below centre the label sits, so 0 restores a centred button and nothing else has to be worked out. --btn-pad-y IS THE HEIGHT. The two paddings are it plus and minus the drop, so they always sum to twice it and the height is 2 x pad-y + the line box. 17px against a 12px line gives 46px, which is the 15% off the old 54 that Greg asked for in the same breath as this. The floor is 4px rather than 0: the label is uppercase and has no descenders, but a 1px optical touch on the border would read as a mistake rather than as a placement. */ --btn-pad-y: 16px; --btn-drop: 13px; padding: calc(var(--btn-pad-y) + var(--btn-drop)) 1.9rem calc(var(--btn-pad-y) - var(--btn-drop)); /* line-height 1 IS WHAT MAKES THE 20% REACHABLE, and it is not a tidy-up. The label's own line box was 22px tall on 12px type -- inherited 1.6 from the body. Half of that is 11px, so the LOWEST the label's middle can sit is 11px off the foot however the padding is split, and on a button shortened to 46px that floor is 24%. Greg asked for about twenty. Collapsing the line box to the glyphs takes the half-height to 6px and puts 20% in range. Safe here because the button is inline-flex with align-items: center: the dot and the arrow are flex items and centre on the line whatever it is. */ line-height: 1; /* MINIMUM WIDTH, for Send. Greg: the other labels are long enough to carry themselves -- "Ask about this session" is 264px, "Back to the start" 232 -- but Send is four letters and came out 125px, which read as a different, smaller button rather than as the same one with less to say. 170 is chosen off the measurements rather than picked: the next narrowest button on the site is "Write to me" at 172, so this lifts Send into the family and leaves every other button untouched. min() RATHER THAN A BARE 170px. Greg flagged he could not tell how it would behave on a phone, and this is the answer: on any container narrower than the minimum the button takes the container instead and cannot push the page sideways. Nothing on the desktop is affected by it. */ min-width: min(170px, 100%); /* 4px, NOT the pill it was. Greg, 2026-08-26, looking at "Write to me" on the gallery: rectangular with the corners only just taken off. Colour, fill and the drawn ring are untouched -- this is the radius and nothing else. 4 AND NOT THE 2px THE MAP FRAME USES, because a radius reads relative to the thing it is rounding. This button is ~47px tall against that frame's several hundred, so the same number would look sharper here than there, not matching. 4 sits it in the same family as .contact-map's 2 and .map-shot's 3 rather than starting a new one. .btn--solid::before TAKES CARE OF ITSELF -- it is border-radius: inherit, so the self-drawing ring follows this number and there is no second value to keep in step. THIS IS THE SITE'S BUTTON AND IT LANDS ON TWELVE OF THEM: eight on treatments, one each on the home page, the gallery, contact and the 404. */ border-radius: 4px; transition: background-color 0.4s var(--ease-soft), color 0.4s var(--ease-soft), border-color 0.4s var(--ease-soft), transform 0.4s var(--ease-out); } .btn:hover { transform: translateY(-2px); } /* * THE RING DRAWS ITSELF. Second attempt at #8, and the first one was wrong for * a reason worth writing down. * * Trance Ritual's travelling border light is a bright arc rotating behind the * button. It works there because that site is dark: a glow is ADDITIVE light, * so the arc is lighter than its surround and the eye reads emission. On a * white page nothing can be lighter than the ground, so the same arc stops * being a glow and becomes a yellow segment. Greg saw it immediately. * * So: no glow. The hairline DRAWS ITSELF round the pill instead, clockwise * from the top, and un-draws when the pointer leaves. That is the same idiom * as the rest of the page — this site's decoration is one traced line drawn on * scroll, and a button that draws its own outline is speaking it too. * * The mechanism is a conic gradient used as a REVEAL rather than as a light: * teal up to --btn-sweep, transparent after it, and the whole thing masked to * a 1px ring. Animating the angle therefore paints the border on. It is a * TRANSITION, not an animation, so leaving un-draws from wherever it reached * instead of snapping — the same lesson as the awards row. * * @property is what makes an angle interpolate at all. Where it is * unsupported the sweep jumps straight to full and the button simply has a * teal border on hover, which is a fine place to land. */ @property --btn-sweep { syntax: ''; initial-value: 0deg; inherits: false; } /* AT REST THE BUTTON IS BLUE AND STILL A BUTTON. Greg, 2026-08-22: the ported version had gone fully transparent, and a call to action with no ground stops looking pressable. So the teal fill comes back at a tenth of its strength — present, not solid — under a teal border at full readable weight. The RED is what the hover brings. The drawn ring sits exactly on the border, so the blue line does not disappear and get replaced: it TURNS RED as the stroke travels round it. That is the whole gesture, and it only works because the two lines occupy the same pixel. */ .btn--solid { position: relative; background: rgba(var(--teal-rgb), 0.10); /* THE ONE PLACE THE LABEL'S COLOUR IS SET. Greg, 2026-08-26: the gallery's button is the reference for the whole site, and its words are this warm brown while every other button's were teal. IT WAS NOT A CHOICE THERE, IT WAS A LEAK -- `.gal-close-in a` is (0,2,0) and beat this rule's (0,1,0), and `.tr-close-in a` was doing the same to one button on treatments. So two of twelve had it by accident. Greg wants it on all twelve, so it is declared HERE and both leaking selectors now say :not(.btn), which leaves exactly one declaration deciding the colour. The fill and the border stay teal. That is what the gallery button is, and the gallery button is the sample. .btn-dot IS background: currentColor, so the dot follows this line and is never set anywhere. One value, twelve buttons, mark included. */ color: var(--saffron-ink); border: 1px solid rgba(var(--teal-rgb), 0.55); } .btn--solid::before { content: ''; position: absolute; /* -1px, ON the border and not inside it. An absolutely positioned pseudo is laid out against the PADDING box, so `inset: 0` puts the red stroke one pixel in from the blue line and you see two lines instead of one changing colour. Measured: teal at y=20, the stroke at y=21. At -1px they are the same pixel and the border changes colour as the stroke passes. (Written when the stroke was red; it follows the label now.) */ inset: -1px; padding: 1px; border-radius: inherit; pointer-events: none; /* From the top, clockwise. The second stop at 0 is not a mistake: a stop smaller than the one before it collapses to a hard edge, which is what gives the line a head rather than a fade. */ /* currentColor, WAS var(--red). Greg, 2026-08-26: with the label now warm brown the red arc read as a third colour arriving on hover. currentColor makes the ring the same value as the words and the dot, so the button is one colour throughout and there is still only ONE declaration to change -- .btn--solid's `color`. Nothing here needs editing again if it moves. A 1px arc is not text, so the 4.5:1 floor does not bind it -- the same reason the map's underline may be brighter than a label. */ background: conic-gradient(from -90deg, currentColor var(--btn-sweep), transparent 0); /* `linear-gradient(#000 0 0)` is the shorthand usually quoted for this and it does not work: both stops land at 0px, the mask computes to a zero-length gradient and the whole pseudo-element disappears instead of a ring being cut from it. Two explicit stops paint solid. */ -webkit-mask: linear-gradient(#000, #000) content-box, linear-gradient(#000, #000); mask: linear-gradient(#000, #000) content-box, linear-gradient(#000, #000); -webkit-mask-composite: xor; mask-composite: exclude; transition: --btn-sweep 0.75s var(--ease-out); } .btn--solid:hover, .btn--solid:focus-visible { /* A shade deeper, and no more. The ring is the event; a solid ground would swallow the line it is drawing. */ background: rgba(var(--teal-rgb), 0.14); color: var(--ink); } .btn--solid:hover::before, .btn--solid:focus-visible::before { --btn-sweep: 360deg; } /* The dot travels the last of the way with the line — it already sits at the end of the label, so it reads as the head of the stroke arriving. */ .btn--solid .btn-dot { transition: transform 0.75s var(--ease-out), background-color 0.4s; } .btn--solid:hover .btn-dot { transform: translateX(4px); } @media (prefers-reduced-motion: reduce) { .btn--solid::before { transition: none; } } .btn--ghost { border: 1px solid var(--teal-hair); color: var(--ink); } .btn--ghost:hover { border-color: var(--saffron); background: var(--saffron-wash); } .btn--light { background: var(--white); color: var(--ink); } .btn--light:hover { background: var(--teal); color: var(--white); } .link-arrow { display: inline-flex; align-items: center; gap: 0.5rem; font-size: 12px; font-weight: 600; letter-spacing: 0.11em; text-transform: uppercase; color: var(--teal); } .link-arrow svg { transition: transform 0.4s var(--ease-out); } .link-arrow:hover svg { transform: translateX(5px); } /* --- header ------------------------------------------------------------- */ .header { position: fixed; inset: 0 0 auto; z-index: 100; height: var(--header-h); display: flex; align-items: center; background: rgba(255, 255, 255, 0.82); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); border-bottom: 1px solid transparent; transition: transform 0.5s var(--ease-out), border-color 0.5s var(--ease-soft); /* The bar is a moving element with a backdrop-filter on it, which is the one combination browsers re-rasterise every frame. Promoting it keeps the blur on its own layer while it slides. */ will-change: transform; } .header.is-stuck { border-bottom-color: var(--hairline); } .header.is-hidden { transform: translateY(-100%); } .header-inner { width: 100%; max-width: var(--max); margin-inline: auto; padding-inline: var(--gutter); display: flex; align-items: center; justify-content: space-between; gap: 1.5rem; } /* The wordmark — two stacked lines, Italiana, all caps. GRAN CANARIA is tracked out to roughly the width of GAY MASSAGE rather than being stretched to it. Optical, not forced: the four-word stack on the old logo was force-justified, and that is exactly what made GAY the biggest word on the mark, which fights the positioning. Regrouped to 12 characters over 11, the two lines are near enough the same width naturally. The 0.34em tracking is doing the legibility work that a bold weight would normally do. Italiana ships in one weight, so there is no bold available. */ .wordmark { display: inline-flex; flex-direction: column; align-items: center; gap: 0.18em; font-family: var(--display); line-height: 1; color: var(--ink); white-space: nowrap; } /* Size and tracking are tuned by measurement, not by eye: at 0.73rem with 0.60em tracking this line renders 169px against GAY MASSAGE's 168px, so the two edges line up without either being stretched. Re-measure if the big line's size changes — the match is not automatic. */ .wordmark-sm { font-size: 0.73rem; letter-spacing: 0.60em; /* tracking adds a trailing space after the last glyph; pull it back so the line stays optically centred over the one below */ text-indent: 0.60em; color: var(--brown); text-transform: uppercase; } .wordmark-lg { font-size: 1.62rem; letter-spacing: 0.02em; color: var(--teal); text-transform: uppercase; } /* Saffron measures 2.02:1 on white, which fails WCAG for text. It is allowed here and nowhere else: WCAG 1.4.3 exempts logotypes, and this is the brand colour that is live on the server today. Do not reuse it for type. */ .wordmark-lg em { font-style: normal; color: var(--saffron); } .nav { display: flex; align-items: center; gap: 2.1rem; } .nav a { font-size: 12px; font-weight: 600; letter-spacing: 0.11em; text-transform: uppercase; color: var(--body); position: relative; padding-block: 0.35rem; transition: color 0.35s var(--ease-soft); } .nav a::after { content: ''; position: absolute; left: 0; bottom: 0; width: 100%; height: 1px; background: var(--saffron); transform: scaleX(0); transform-origin: left; transition: transform 0.45s var(--ease-out); } .nav a:hover { color: var(--ink); } .nav a:hover::after { transform: scaleX(1); } /* --- the Services submenu ------------------------------------------------- */ /* Added 2026-08-27 when coaching.php earned a place in the bar. THE BAR STAYS SIX WORDS -- the submenu grows downward, where width is free, which is also why the third item is written out in full rather than abbreviated. NO JAVASCRIPT, AND NO BUTTON. :hover for the pointer, :focus-within for the keyboard -- tabbing into the parent link opens the panel and tabbing out of the last child closes it, which is the whole behaviour a menu of three static links needs. A button with aria-expanded would be the right answer if the panel held anything other than links, and it would need JS to be honest. NO GAP BETWEEN THE LINK AND THE PANEL, and it is load-bearing rather than cosmetic: `top: 100%` on a group whose height already includes .nav a's 0.35rem padding-block means the panel starts on the link's own bottom edge. Open a gap there and the pointer crosses dead space on the way down, the :hover drops, and the menu closes under the cursor. IT ESCAPES THE HEADER BY DEFAULT. .header is a fixed bar with a set height and no overflow rule, and its backdrop-filter makes it a containing block only for FIXED descendants -- this panel is absolute against .nav-group, so it paints outside the bar without anything being loosened to let it. BELOW 900px THE WHOLE NAV IS HIDDEN and the hamburger takes over, so there is deliberately no small-screen behaviour here. The submenu becomes the phone design's problem on the day that menu is built, and the markup it will need -- a nested list inside the item -- is already what is in the HTML. ===== REWORKED TWICE ON 2026-08-27, and the second pass is the one to read. Greg on the first: "subtle, okay, but somehow missing something", the box wider than its contents, and a beige fill where the rest of the bar draws a line. On the second: the rule spanned the ROW instead of the WORD, which is not what .nav a does -- his catch, and he was right. Where it landed: 1. IT IS THE BAR, CONTINUED, NOT A CARD. Same translucent white and the same 14px backdrop blur as .header, and NO border and NO shadow. Those two were the whole of the card feeling; the surface was never the problem. The fill stays because 11px type over whatever the page happens to be showing is not readable, and the blur is what makes it legible without a hard edge. 2. A VERTICAL RULE DOWN THE LEFT, which is Greg's idea and it is already the site's idiom -- .tr-note, .faq-notice and .tp-out all hang their contents off a rule on that side. It gives the three items a spine to sit against now that there is no box around them. 3. THE SAFFRON LINE IS THE WIDTH OF THE WORD. .nav a::after is left:0 / width:100% on an anchor whose box IS the word, so the rule only stays honest here if the anchor is sized to its text: the LI carries the padding and the A is inline-block. The row is still comfortable to hit, the gaps between words are inside the panel so :hover on .nav-group never drops, and the ::after needs no override at all beyond its offset. 4. THE ITEMS ARRIVE IN SEQUENCE, 60ms apart, the same delay chain the Services index uses on its four bands. The delays live only in the OPEN state, so closing is immediate -- a staggered close reads as lag. */ /* THE ANCHOR MUST BLOCKIFY. Every other item in the bar is a direct flex child of .nav and is therefore blockified; wrapping Services in a DIV left its as an INLINE box, which ignores padding-block for layout -- measured 25.19px tall against its neighbours' 31.58, sitting 2.47px higher. .nav a::after hangs off bottom:0 of that box, so the saffron rule under SERVICES was drawing 2.47px above every other one. Making the group a flex container makes the a flex item again and the box matches. .nav-sub is absolutely positioned, so it is not a flex item and is unaffected. */ .nav-group { position: relative; display: flex; align-items: center; } .nav-sub { position: absolute; top: 100%; /* the word lands under the parent label: the panel is pulled left by its own padding plus the rule's inset */ left: -1.6rem; margin: 0; padding: 0.55rem 1.1rem 0.7rem 1.6rem; list-style: none; width: max-content; /* 0.96, NOT THE HEADER'S 0.82, AND IT IS A LEGIBILITY FIX RATHER THAN A STYLE CHOICE. The bar sits over whatever happens to be at the top of the scroll and the blur carries it; this panel sits over the page-head's own lede, and at 0.82 the sentence underneath read straight through the menu. Measured on screen, not guessed. The blur stays -- it is what keeps the edgeless panel from looking like a floating rectangle. */ background: rgba(255, 255, 255, 0.96); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); opacity: 0; visibility: hidden; transform: translateY(4px); transition: opacity 0.28s var(--ease-soft), transform 0.28s var(--ease-out), visibility 0.28s; z-index: 5; } /* the spine. Inset from the panel edge rather than sitting on it, so it reads as a mark beside the words and not as the border that was just removed. */ .nav-sub::before { content: ''; position: absolute; left: 0.7rem; top: 0.7rem; bottom: 0.85rem; width: 1px; /* saffron, not the grey hairline: the spine and the animated rule under each word are the same mark in two directions, and at --saffron-hair's 0.42 it is a warm line rather than a border */ background: var(--saffron-hair); } .nav-group:hover .nav-sub, .nav-group:focus-within .nav-sub { opacity: 1; visibility: visible; transform: translateY(0); } /* the padding is on the LI so the A can be the width of its own word */ .nav-sub li { margin: 0; padding: 0.42rem 0; opacity: 0; transform: translateY(-3px); transition: opacity 0.3s var(--ease-soft), transform 0.3s var(--ease-out); } .nav-group:hover .nav-sub li, .nav-group:focus-within .nav-sub li { opacity: 1; transform: none; } .nav-group:hover .nav-sub li:nth-child(2), .nav-group:focus-within .nav-sub li:nth-child(2) { transition-delay: 0.06s; } .nav-group:hover .nav-sub li:nth-child(3), .nav-group:focus-within .nav-sub li:nth-child(3) { transition-delay: 0.12s; } .nav-sub a { display: inline-block; font-size: 11px; letter-spacing: 0.1em; color: var(--body); } .nav-sub a:hover { color: var(--ink); } /* the browser default is a dotted underline, which would read as a second rule under a word that already gets the saffron one on hover */ .nav-sub abbr { text-decoration: none; border-bottom: 0; cursor: inherit; } .header-right { display: flex; align-items: center; gap: 1rem; } .header-phone { font-size: 14px; font-weight: 500; color: var(--ink); white-space: nowrap; } /* Two lines at the right end of the bar: the number, and the flags under it. The stack is centred in the bar as a block, which is why the number sits higher than it used to — it is no longer the only thing on that side. The flags are centred on the number rather than hung off the bar's right edge: they are a set of three and they belong to the number above them, so the two lines read as one block. */ .header-contact { display: flex; flex-direction: column; align-items: center; gap: 0.32rem; line-height: 1; } .header-langs { display: flex; align-items: center; gap: 0.4rem; } /* Full colour, all three. The flags are 30px files shown at 20px — drawn down rather than up, so they stay crisp on a retina screen. NOT LINKS, and they never were meant to be — Greg, 2026-08-21. They used to be anchors pointing at "#", which is a link to nowhere on every page of the site. This site ships in English only and always will, so there is no translation to switch to: the flags are an indicator that a caller may speak any of these three fluently. The alt text carries that, each in its own language, which is also the only part a screen reader gets. Same treatment as the footer's row, which was built this way from the start. */ .header-langs img { display: block; width: 20px; height: 20px; } /* M3 FIXED 2026-08-22. The BUTTON is 44x44, the ICON is still 28x20. It was 28x20 all through, against the 44x44 minimum, and it is the only control in the header on a phone — the one that has to be easy to hit. The bars are centred inside the larger box rather than the icon being grown: growing it would have changed the header's look to fix a hit area nobody can see. margin-right -8px pulls the extra width back out of the layout so the bar's spacing is exactly where it was. The three tops are 12/21/30 rather than 0/9/18 — the same 9px apart, shifted down by (44-20)/2 = 12 to sit in the middle of the taller box. The 9px translate in the open state is untouched and still lands on the centre bar. */ .menu-toggle { display: none; width: 44px; height: 44px; margin-right: -8px; position: relative; } .menu-toggle span { position: absolute; left: 8px; width: 28px; height: 1.5px; background: var(--ink); transition: transform 0.45s var(--ease-out), opacity 0.3s; } .menu-toggle span:nth-child(1) { top: 12px; } .menu-toggle span:nth-child(2) { top: 21px; } .menu-toggle span:nth-child(3) { top: 30px; } .menu-toggle[aria-expanded="true"] span:nth-child(1) { transform: translateY(9px) rotate(45deg); } .menu-toggle[aria-expanded="true"] span:nth-child(2) { opacity: 0; } .menu-toggle[aria-expanded="true"] span:nth-child(3) { transform: translateY(-9px) rotate(-45deg); } .mobile-menu { position: fixed; inset: var(--header-h) 0 0; z-index: 99; background: var(--white); padding: 2.5rem var(--gutter) 3rem; display: flex; flex-direction: column; gap: 0.35rem; transform: translateY(-12px); opacity: 0; pointer-events: none; overflow-y: auto; transition: opacity 0.4s var(--ease-soft), transform 0.5s var(--ease-out); } .mobile-menu.is-open { opacity: 1; transform: none; pointer-events: auto; } .mobile-menu a { font-family: var(--serif); font-size: clamp(1.9rem, 8vw, 2.75rem); line-height: 1.35; color: var(--ink); border-bottom: 1px solid var(--hairline); padding-block: 0.5rem; } .mobile-menu .mobile-menu-foot { margin-top: auto; padding-top: 2rem; display: flex; flex-direction: column; gap: 0.75rem; } .mobile-menu .mobile-menu-foot a { font-family: var(--sans); font-size: 1rem; border: 0; padding: 0; color: var(--body); } /* The number and its icons on one row. The flags moved here from the header, where they sat beside the burger and qualified nothing — this site is English only, so they are not a language switcher; they say which languages a caller may use, and that only means something next to the number. Wraps rather than squeezes: at 320px the icon group drops under the number instead of the row overflowing. */ .mobile-menu .mm-reach { display: flex; align-items: center; flex-wrap: wrap; gap: 0.5rem 0.85rem; } .mobile-menu .mm-icons { display: flex; align-items: center; gap: 0.45rem; } .mobile-menu .mm-icons img { display: block; width: 20px; height: 20px; } /* Same divider and the same extra 2px the footer gives it — a round mark reads smaller than a rectangle beside it at the same height. The rule above sets padding: 0 and border: 0 on every anchor in this block, so both are restated here rather than inherited. */ .mobile-menu .mobile-menu-foot .mm-wa { display: block; line-height: 0; margin-left: 0.2rem; padding: 0 0 0 0.7rem; border-left: 1px solid var(--hairline); } .mobile-menu .mobile-menu-foot .mm-wa img { display: block; width: 22px; height: 22px; } /* --- scroll odometer (right edge) --------------------------------------- */ /* Sized to fit inside the page gutter — max-width is 1280px, so at 1440 there are 80px each side. A numeral wider than that lands on top of the content; it did, over the studio images, before this was clamped. */ .odometer { position: fixed; right: clamp(0.5rem, 1.5vw, 1.25rem); top: 50%; transform: translateY(-50%); z-index: 40; display: flex; align-items: center; gap: 0.1rem; pointer-events: none; mix-blend-mode: multiply; } .odometer-window { height: 1.05em; overflow: hidden; font-size: clamp(2rem, 3.4vw, 3.5rem); font-weight: 500; line-height: 1.05; letter-spacing: -0.04em; color: var(--saffron-wash); } .odometer-reel { display: flex; flex-direction: column; transition: transform 0.75s var(--ease-out); } .odometer-reel span { height: 1.05em; display: block; } /* --- hero --------------------------------------------------------------- */ /* --- hero plate: one photograph across a two-tone ground ------------------ Everything is derived from one number. --shot-w sets the picture's width, its height follows from 16:9, and the band's depth is the header, plus the gap above the picture, plus two thirds of the picture. Change --shot-w and the whole arrangement stays in proportion; change --shot-share to move the join up or down the photograph. */ .hero-plate { --shot-w: min(1040px, calc(100vw - 2 * var(--gutter))); --shot-h: calc(var(--shot-w) * 9 / 16); --shot-top: clamp(2rem, 4vw, 3.5rem); --shot-share: 0.667; /* how much of the picture sits on the dark */ position: relative; padding: calc(var(--header-h) + var(--shot-top)) 0 clamp(4rem, 8vw, 7rem); } /* The band. Starts below the fixed header rather than at the top of the page. */ .hero-plate::before { content: ''; position: absolute; left: 0; right: 0; top: var(--header-h); height: calc(var(--shot-top) + var(--shot-h) * var(--shot-share)); background: var(--surface); } /* The white card of the SHADOW frame — section 02 in FRAMES.html. It is a plain white rectangle with the photograph inset 6px, so it is written as a background and a padding rather than cut out of the PNG: there is nothing in it to reproduce. The shadow is the part that cannot be faked, and that stays the PNG below. Above the join the card reads as a white frame against the beige. Below it, card and body are both white and the frame disappears, leaving the shadow to do the work — which is exactly what the old site did. */ .hero-shot { position: relative; z-index: 1; width: var(--shot-w); margin: 0 auto; background: var(--white); padding: 6px; } .hero-shot img { display: block; width: 100%; height: auto; aspect-ratio: 16 / 9; object-fit: cover; filter: grayscale(1) contrast(1.05); } /* Bottom edge only — see the note in index.php. Same border-image approach as .duo-frame::after, and the same reason: the picture is fluid and the PNG is not, so the shadow keeps its 25px and only its soft middle stretches. */ .hero-shot::after { content: ''; position: absolute; left: 0; right: 0; top: 0; bottom: -25px; border-style: solid; border-color: transparent; border-width: 0 0 25px 0; border-image: url(../frames/shadow-only-landscape.png) 0 0 25 0 / 0 0 25px 0 stretch; pointer-events: none; } .hero { position: relative; min-height: 100svh; display: flex; align-items: flex-end; padding-block: calc(var(--header-h) + 3rem) clamp(3rem, 7vw, 6rem); overflow: hidden; } .hero-slider { position: absolute; inset: 0; } .hero-slide { position: absolute; inset: 0; background-size: cover; background-position: center; filter: var(--photo-filter); opacity: 0; transform: scale(1.06); transition: opacity 1.6s var(--ease-soft), transform 7s linear; } .hero-slide.is-active { opacity: 1; transform: scale(1); } /* Three layers, not one. The single bottom-up gradient left the headline sitting on bare photograph in landscape, where the text block rides higher — measured at 844x390 and it was unreadable over slider-3. The flat wash is the floor that makes it independent of which photograph is showing; the left-to-right pass buys back contrast under the text column specifically. */ .hero-scrim { position: absolute; inset: 0; background: linear-gradient(to right, rgba(255,255,255,0.82) 0%, rgba(255,255,255,0.45) 45%, rgba(255,255,255,0.15) 100%), linear-gradient(to top, rgba(255,255,255,0.97) 0%, rgba(255,255,255,0.7) 40%, rgba(255,255,255,0.35) 72%, rgba(255,255,255,0.5) 100%), rgba(255, 255, 255, 0.3); } /* the two animated path lines — drawn as the page scrolls */ .hero-paths { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; } .hero-paths path { fill: none; stroke: var(--teal); stroke-width: 1.25; opacity: 0.55; stroke-dasharray: 1; stroke-dashoffset: 1; } /* The lower of the two runs warm. Putting the saffron in the hero means the warm accent is on screen before the visitor scrolls at all — which was the whole problem with the first pass: orange existed only in the logo. */ .hero-paths path#path-b { stroke: var(--saffron); opacity: 0.7; } /* --- section lines — the hero technique, reused further down the page ---- Two non-adjacent sections only. Non-adjacent means no two lines ever meet, so nothing has to align across a section boundary when the text reflows in ES / DE / PL. Each SVG is sized to its own section and never larger, so the repaint area stays one screen rather than the whole document. Scroll-linked since 2026-08-17, like the band and the statement lines: the draw is a function of the section's scroll position, so it runs backwards when you scroll back up. It used to draw once on entry via .is-in and then stay drawn forever, which is why it read as the one static set on the page. The .is-in observer still runs — the .reveal content animations need it. */ .section--lined { position: relative; overflow: hidden; } .section--lined > .container { position: relative; z-index: 1; } .section-lines { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; z-index: 0; } /* --- THE SPINE: two copies of the drawing, joined ----------------------- The home page's .band-lines brought onto a white page, and then doubled. THE WRAPPER IS WHAT MAKES THE JOIN FREE. Both svgs are ordinary blocks inside .spine at width 100%, so the second stacks directly under the first with no arithmetic -- no `top` to keep in step with a width that is a clamp. Sized by WIDTH, height derived from aspect-ratio, because the first version was sized by height like the home page's and a 3,303px section gave back a drawing 1,057px wide straight through the text. It starts at the top edge of the WHITE section, not the beige one, and runs behind the letters -- .section--lined puts .container at z-index 1, so text always wins. Kept at every width: it lives in the space the column leaves, which exists on a phone too. COLOUR AND WEIGHT are the two things a white ground changes. The band's line is white with a dark drop-shadow because it lies on a photograph; here it takes teal with the saffron ghost, and drops from 2px to 1.4px -- 2px on a photograph is a hairline, 2px on paper is a rope. */ /* WHERE IT STARTS IS NOT A CHOICE ANY MORE -- Greg, 2026-08-24. The chain is the masthead line continuing, so it begins at the x where the masthead line leaves the beige band, and it has to hold that at every viewport width. MEASURED, NOT EYEBALLED, and the measurement corrects the number in the brief. The mirrored practitioner path's DATA ends at x 760, but that point is at y 912 in a 900-tall viewBox -- 4px below the band, clipped by .section--lined's overflow. Where the stroke actually crosses the band's bottom edge is x 818.3, which is 56.83% of the 1440 viewBox. Both svgs span the full page width with preserveAspectRatio="none", so a percentage of the section is the same x on both. The drawing's own top point is at x 191.5 of its 880 viewBox -- 0.2176 of the box -- so the box is pushed left by that much of its own width and the line, rather than the box, lands on the origin. */ .spine { --spine-w: clamp(150px, 19vw, 260px); --spine-origin: 56.83%; position: absolute; top: 0; left: calc(var(--spine-origin) - var(--spine-w) * 0.2176); width: var(--spine-w); pointer-events: none; z-index: 0; } .spine-lines { display: block; width: 100%; height: auto; aspect-ratio: 880 / 2256; overflow: visible; } /* EVERY OTHER COPY IS UPSIDE DOWN. Its top point is the previous copy's end point, so consecutive copies touch at x 500 and x 191.5 alternately and the whole chain reads as one line. The copies are generated by main.js, which also puts this class on the odd-numbered ones. See the note in the markup. */ .spine-lines--flip { transform: scaleY(-1); } .spine-lines path { fill: none; stroke: var(--teal); stroke-width: 1.4; stroke-linecap: round; opacity: 0.5; /* NEVER vector-effect: non-scaling-stroke -- it breaks pathLength and the dash silently stops meaning "the whole path". */ stroke-dasharray: 1; stroke-dashoffset: 1; } .spine-lines path.is-ghost { stroke: var(--saffron); stroke-width: 1; opacity: 0.42; } /* A BAND, NOT THE WHOLE SECTION. .section-lines is inset:0, which is right for a section around 1000px tall -- the height .section--lined was built against. The testimonials list is 3,303px, so the 900-unit viewBox stretched 3.7x and the curve came out as a near-vertical smear drifting down three screens: not a line crossing the page, which is what it is for. Measured; at page scale it read as nothing at all. Pinned to the top at a fixed height instead, so the drawing keeps roughly the proportions it was drawn at however long the section below it runs. */ .section-lines--band { bottom: auto; height: clamp(240px, 30vw, 420px); } /* The third pair, dropped into the middle of the list. A line at the top of a 3,300px section leaves three screens of letters with nothing in them, which is the monotony the whole exercise is about -- and unlike the top two this one is genuinely below the fold, so it is the pair that actually draws itself in front of the reader as they scroll. */ .section-lines--mid { top: 42%; } .section-lines path { fill: none; stroke: var(--teal); stroke-width: 1.25; /* vector-effect: non-scaling-stroke REMOVED 2026-08-17. It was here to stop the stroke distorting with the stretched viewBox, and it was silently truncating both lines instead: it makes the dash pattern measure in screen pixels, which breaks pathLength="1" normalisation, so the single full-length dash no longer matches the path's rendered length and the tail of every line fell into the gap. Measured at 1440x900 — the lines stopped around 60% of the way along and had never once drawn to their own end. This is OPEN-BUGS.md #1, which was fixed on .band-lines and missed here. What it cost to remove: the section box is 1425x982 for a 1440x900 viewBox, so the axes scale 0.989 and 1.091 — the stroke renders between 1.24px and 1.36px depending on which way the curve runs. A 10% variation on a 1.25px hairline is not visible. A line that stops two thirds of the way across is. */ opacity: 0.5; stroke-dasharray: 1; stroke-dashoffset: 1; /* No transition here on purpose, same as .band-lines: JS writes stroke-dashoffset every frame and a transition on top of that fights the lerp — the line would chase a value that is itself already easing. */ } /* The second line was staggered with transition-delay: .35s. That delay went with the transition; the equivalent lag is now SECTION_LINE_LAG in main.js. */ .section-lines path:nth-child(2) { stroke: var(--saffron); opacity: 0.6; } /* --- THE SECOND LINE, WHERE IT IS ITS OWN SVG --------------------------- The rule above pairs two paths inside ONE drawing. The services index needs the pair split across two svgs instead, because they are driven differently: the blue one draws once on arrival and stays, the saffron one is scroll-linked in both directions. Same colours, same relationship, two independent sets in main.js. Greg, 2026-08-26: "a second line, yellow or orange, the same colour that we have on the home page in the hero section, animated up and down upon scroll." A HAIR LIGHTER THAN THE BLUE ONE, on purpose. Both lines cross the same words; at equal weight the pair reads as a rail rather than as one line following another. 1.1px against the blue 1.25px is the smallest difference that separates them without making the saffron look broken. */ .section-lines--follow { /* THE LINE LEAVES ITS OWN BOX AT THE TOP, on purpose. It runs to the LEFT of the blue curve, and the blue curve starts at x 0 -- the divider's own left corner -- so its companion has to start at a negative x or the two would touch at the one place the design most wants them separated. An svg clips to its viewBox by default and the first 16px would just be gone. */ overflow: visible; } .section-lines--follow path { stroke: var(--saffron); stroke-width: 1.1; opacity: 0.6; } .hero-inner { position: relative; z-index: 2; width: 100%; } .hero-title { margin: 1.75rem 0 0; } .hero-title .line { display: block; overflow: hidden; } .hero-title .line > span { display: block; transform: translateY(105%); transition: transform 1.15s var(--ease-out); } .hero.is-ready .hero-title .line > span { transform: none; } /* The single red word on the first screen. Red is the emphasis accent and it is spent about once per section — here, on the word the whole hero is built around. */ .hero-title em { font-style: italic; color: var(--red); } .hero-foot { margin-top: clamp(2rem, 4vw, 3.25rem); display: flex; align-items: flex-end; justify-content: space-between; gap: 2rem; flex-wrap: wrap; } .hero-lead { max-width: 34ch; font-size: 1.0625rem; line-height: 1.7; margin: 0; } .hero-anim { opacity: 0; transform: translateY(22px); transition: opacity 0.9s var(--ease-soft), transform 0.9s var(--ease-out); } .hero.is-ready .hero-anim { opacity: 1; transform: none; } .hero.is-ready .hero-anim--1 { transition-delay: 0.15s; } .hero.is-ready .hero-anim--2 { transition-delay: 0.75s; } .hero.is-ready .hero-anim--3 { transition-delay: 0.9s; } .hero-dots { display: flex; gap: 0.55rem; } .hero-dot { width: 34px; height: 2px; background: var(--teal-wash); border-radius: 2px; position: relative; overflow: hidden; } .hero-dot::after { content: ''; position: absolute; inset: 0; background: var(--teal); transform: scaleX(0); transform-origin: left; } .hero-dot.is-active::after { animation: dotFill 6s linear forwards; } @keyframes dotFill { to { transform: scaleX(1); } } /* --- reveal primitives -------------------------------------------------- */ .reveal { opacity: 0; transform: translateY(28px); transition: opacity 0.9s var(--ease-soft), transform 1s var(--ease-out); } .reveal.is-in { opacity: 1; transform: none; } .reveal--left { transform: translateX(-34px); } .reveal--right { transform: translateX(34px); } .reveal--left.is-in, .reveal--right.is-in { transform: none; } /* --- DISTINCT REVEALS, not one direction for the whole page ------------- Greg, 2026-08-24: everything arrived from below, so the page had one gesture and repeated it. Three now, and each one is chosen for what the element is rather than for variety's sake. .reveal--wipe -- UNVEILED, NOT MOVED. clip-path opens from the bottom edge while the type stays exactly where it will end up, so nothing slides under the reader's eye. That is what a masthead wants: the h1 is the first thing read and movement in the glyphs themselves fights the reading. The 6px lift is there only so it does not look mechanically flat -- it is a fifth of what the default .reveal travels. Two things clip-path needs and neither is optional. The transition has to name clip-path explicitly or it snaps. And a clipped element cannot paint outside its box, so descenders and the italic's overhang need the inset to open past 100% -- hence -10% on the closed state's sides, which gives the glyphs room rather than shaving them. .reveal--rise -- THE STATEMENT'S OWN RULE DRAWS ITSELF. The blockquote already carries a 2px saffron border-left; here it scales from nothing to full height first, and the words follow it. The element's existing design is the animation, which is why this one belongs to the statement and to nothing else: it draws the eye down the rule to the paragraph the page exists to deliver. The border is transform-scaled on a pseudo-element rather than animating height -- height animates layout, transform does not. The left/right pair below is the old primitive and is unchanged; it is what the four service blocks now alternate on. */ /* THE SERVICE BLOCKS THROW FURTHER THAN THE PRIMITIVE. .reveal--left is 34px, which is right for a heading or a caption and invisible on a block 1080px wide -- the alternation Greg asked for only reads if the movement is a real fraction of the thing moving. 72px is about a fifteenth of the block and lands as a direction rather than a twitch. The overshoot is clipped, not scrolled: body carries overflow-x:hidden, so a block sitting 72px past the right edge mid-flight adds no scrollbar. Verified rather than assumed -- a horizontal scrollbar appearing for one second on arrival is exactly the kind of thing that is never noticed in review and always noticed by a visitor. Slower than the primitive too, 1.25s against 1s. A bigger object covering a longer distance at the same speed reads as flung; the extra quarter-second is what keeps four of them in a column calm. */ .svc.reveal--left { transform: translateX(-72px); } .svc.reveal--right { transform: translateX(72px); } .svc.reveal--left, .svc.reveal--right { transition: opacity 1.1s var(--ease-soft), transform 1.25s var(--ease-out); } .svc.reveal--left.is-in, .svc.reveal--right.is-in { transform: none; } .reveal--wipe { opacity: 0; transform: translateY(6px); transition: opacity 0.7s var(--ease-soft), transform 0.9s var(--ease-out); } .reveal--wipe.is-in { opacity: 1; transform: none; } /* THE CLIP IS ON THE INNER SPAN AND THAT IS NOT TIDINESS, IT IS THE BUG. Put on the observed element itself, inset(... 100% ...) leaves it with zero visible area -- so intersectionRatio is 0, it never reaches the observer's 0.15 threshold in main.js, and the element can never trigger the animation that would open it. The start state deadlocks its own trigger, silently: the markup and the CSS both read as correct and the heading simply never appears. Found by measuring is-in, not by reading this file. The outer element keeps .reveal and stays unclipped, so it is what the observer sees; the span does the wiping and is observed by nobody. */ .reveal--wipe > span { display: inline-block; clip-path: inset(0 -10% 100% -10%); transition: clip-path 1.1s var(--ease-out); } .reveal--wipe.is-in > span { clip-path: inset(0 -10% 0 -10%); } .reveal--rise { opacity: 0; transform: none; transition: opacity 0.8s var(--ease-soft) 0.35s; } .reveal--rise.is-in { opacity: 1; } /* The rule is the border, moved onto a pseudo so it can be scaled. The blockquote's own border-left is dropped here rather than in .statement-turn, so that class stays correct anywhere else it is used. */ .reveal--rise.statement-turn { border-left: 0; position: relative; } .reveal--rise.statement-turn::before { content: ''; position: absolute; left: 0; top: 0; bottom: 0; width: 2px; background: var(--saffron); transform: scaleY(0); transform-origin: top; transition: transform 0.9s var(--ease-out); } .reveal--rise.statement-turn.is-in::before { transform: scaleY(1); } .reveal-d1 { transition-delay: 0.1s; } .reveal-d2 { transition-delay: 0.2s; } .reveal-d3 { transition-delay: 0.3s; } @media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } *, *::before, *::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; } .reveal, .hero-anim, .hero-title .line > span { opacity: 1 !important; transform: none !important; } /* clip-path and the drawn rule are not transforms, so the blanket rule above does not reach them -- they have to be named or the statement keeps a rule that never draws and the masthead stays clipped shut. */ .reveal--wipe > span { clip-path: none !important; } .reveal--rise.statement-turn::before { transform: none !important; } } /* --- statement ---------------------------------------------------------- */ .statement-block { display: grid; grid-template-columns: minmax(0, 1fr); gap: 2rem; } .statement-block .eyebrow { margin-bottom: 0.5rem; } .statement-body { max-width: 22ch; } /* --- statement lines — the band's drawing, on its side ------------------- Same pair and same scroll-linked draw as .band-lines; see the note in index.php and the statementFrame block in main.js. Two things differ: Colour. The band is white because it sits on a dark photograph. This is on the light background, where white is invisible, so it takes --teal, the colour the hero and section lines already use on light. Stroke. .band-lines deliberately has no vector-effect, because that breaks pathLength="1" normalisation and the dash stops meaning "the whole path". Same applies here — the box is scaled uniformly (no preserveAspectRatio override), so the stroke needs no correcting anyway. The block is wider than the paragraph it sits under and is allowed to bleed past the container on both sides, because the drawing's interest is in its loops and cropping them to a text column wastes them. */ .statement-lines { display: block; width: 100%; height: auto; margin-top: clamp(1.5rem, 4vw, 3rem); pointer-events: none; overflow: visible; } /* Heavier than .band-lines, and deliberately. That box renders 421px wide for 880 units, so its 2px stroke lands at ~1px on screen — enough, because white on a dark photograph is high contrast. This box is 1136px wide for 2256 units, almost exactly the same 0.5 scale, but sage on white is a fraction of that contrast and 1px vanished. Measured at 1440x900: 3 units = 1.5px. */ .statement-lines path { fill: none; stroke: var(--teal); stroke-width: 3; stroke-linecap: round; opacity: 0.7; stroke-dasharray: 1; stroke-dashoffset: 1; } .statement-lines path.is-ghost { /* Saffron, not a dimmer teal. The ghost is the one place the warm accent can sit at full chroma without competing with type, and it is what stops the page reading as blue-and-white. Slightly stronger opacity than the old mono ghost because saffron is lighter in value than teal — at 0.3 it disappeared on white. */ stroke: var(--saffron); opacity: 0.62; stroke-width: 1.9; } /* --- the flattened second pair ------------------------------------------- Same drawing, same viewBox, box 40% as tall. preserveAspectRatio="none" in the markup compresses the 880-unit height into it. The cost: that is a non-uniform scale, so the stroke is squashed with the geometry — full weight where the curve runs vertically, 40% where it runs horizontally. vector-effect: non-scaling-stroke is the textbook fix and is NOT usable here: it measures the dash pattern in screen pixels, which breaks pathLength="1" so stroke-dasharray:1 stops meaning "the whole path" and becomes a 1px dash. That bug already cost a debugging session once — see OPEN-BUGS.md and the note on .band-lines path. So the stroke is thickened instead. The rendered width at tangent angle t is w * 0.4 / sqrt(cos²t + 0.16sin²t), i.e. 40% of w where the curve runs horizontally and 100% where it runs vertically. This drawing, on its side, is mostly horizontal running — so the horizontal case is the one to match to the pair above, and the loop sides are allowed to come out heavier. At 6.2 units the long runs land at 1.25px against that pair's uniform 1.51px, and the loop sides peak at 3.12px. Deliberately not matched exactly: pushing the runs to a full 1.51 would take the peaks past 3.7px and the weight variation starts reading as a mistake rather than as a flattened line. */ /* Mirrored top to bottom, so the flattened pair is not just a smaller repeat of the one above but its reflection — the two curve away from each other instead of running the same way twice. Done here rather than in the transform in main.js on purpose: that is shared by every .statement-lines box, and this is the only one that flips. A CSS transform on the box also leaves the draw untouched — the flip is on the horizontal axis, so left to right stays left to right, and stroke-dashoffset does not care about it either way. */ .statement-lines--low { aspect-ratio: 2256 / 352; /* 352 = 880 * 0.4 */ height: auto; margin-top: clamp(1rem, 2.5vw, 1.75rem); transform: scaleY(-1); transform-origin: center; } .statement-lines--low path { stroke-width: 6.2; } .statement-lines--low path.is-ghost { stroke-width: 3.5; } /* word-by-word reveal (philosophy + statement) */ /* The what-this-is paragraph. Sans and sentence case, bigger than body copy and smaller than a display line, JUSTIFIED so both edges are flush and only the last line runs short. 62ch is the measure and it is doing real work: justified text sets its word spaces to fill the line, so a long measure at a large size opens rivers through the paragraph. `hyphens: auto` is the other half of that and needs the lang attribute on , which this page has. */ .statement-set { font-family: var(--sans); /* WAS calc(clamp(1.9rem, 3.9vw, 3.45rem) * 0.6) — a copy of the H1's own clamp taken to 60%, which once made the paragraph exactly as wide as the headline. That relationship died when the measure went 31em -> 38em: the paragraph is now deliberately WIDER than the headline, so the tie to the H1's numbers was doing nothing but hiding the real size. Written as its own clamp now. Floor and slope are unchanged; only the CEILING moved. Greg, 2026-08-22: too big on the desktop. 33.1px -> 25.6px, which is the halfway point between where it was and .body-text's 18px. floor 1.14rem = 18.24px, binding below 779px slope 2.34vw cap 1.6rem = 25.6px, binding above ~1094px THE PHONE IS UNTOUCHED and that is the point: lowering a ceiling only affects wide screens, so nothing gets smaller as the window grows. A flat reduction would have broken the monotonic rule outright. The paragraph is also never smaller than .body-text — 18.24 against 18 at its narrowest. One knock-on, and it is an improvement: max-width is 38em, so the measure narrows with the type — 1259px at the old size, 973px now. Same character count, less window. Leading 1.32, down from 1.6. Justified text at a long measure wants tight leading: the eye returns on the vertical, and loose lines at 76 characters lose the row. */ font-size: var(--read-size); line-height: 1.32; /* THE WIDTH IS NO LONGER TIED TO THE FONT. Greg, 2026-08-22, and he is right: shrinking the type must not shrink the column. `38em` did exactly that — the measure fell 1259px -> 973px the moment the size came down, because an em IS the font size. This clamp reproduces the width curve the paragraph had BEFORE the type changed, in viewport units, so it scales with the window instead: 38 x 1.14rem = 43.32rem = 693px (floor, below 779px) 38 x 2.34vw = 88.92vw (slope) 38 x 2.07rem = 78.66rem = 1258.6px (cap, above 1415px) Measured against the old effective widths, container included: 910px at 1024, 1138 at 1280, 1136 at 1440, 1120 at 1920 — identical at all four. The .container's own 1280 less gutters is what binds from about 1300 up, which is why the last two do not reach the cap. */ max-width: clamp(43.32rem, 88.92vw, 78.66rem); margin-inline: auto; text-align: justify; hyphens: auto; color: var(--ink); margin-block: 0; } /* Centred as a block, eyebrow included. The paragraph keeps its own justify — a parent's text-align does not reach into a child that sets its own. */ #what-this-is .statement-block { text-align: center; } .words span { opacity: 0.16; transition: opacity 0.5s var(--ease-soft); } .words span.is-lit { opacity: 1; } /* --- treatment cards ---------------------------------------------------- */ .cards { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: clamp(1rem, 1.6vw, 1.5rem); margin-top: clamp(2.5rem, 5vw, 4rem); } .card { position: relative; display: flex; flex-direction: column; background: var(--white); border: 1px solid var(--hairline); border-radius: 20px; overflow: hidden; isolation: isolate; transition: border-color 0.6s var(--ease-soft), transform 0.7s var(--ease-out); } .card::before { content: ''; position: absolute; inset: 0; z-index: -1; background: var(--teal-wash); transform: translateY(101%); transition: transform 0.75s var(--ease-out); } .card:hover { border-color: var(--saffron-hair); transform: translateY(-8px); } .card:hover::before { transform: none; } /* --- cards, layout B — full-bleed photo, copy over it -------------------- The neighbour-ripple section (#treatments-b). Base height is --tch; the hovered card goes to 120% of it and its immediate neighbours to 110%. Two things make the growth behave: align-items:center — a taller item in a centred grid expands equally above and below its own centre line, which is what "10% up and 10% down" means. With the default stretch it would only ever grow downward. grid-auto-rows at the LARGEST a card can reach — the row is pre-sized to 120%, so a card growing inside it changes nothing about the row. Without this the row tracks its tallest item, and every hover would shove the whole rest of the page down by up to 92px and back. The cost is dead space above and below the resting row, which is why the resting cards sit at 100% of a height chosen to look right, not at the row height. */ /* Eyebrow left, "All services" right, on one baseline. flex-end rather than center: the two have different cap heights and centring them left the link sitting visibly low against a 12px uppercase eyebrow. */ .section-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 1.5rem; } .section-head-link { display: inline-flex; align-items: center; gap: .5rem; font-size: 12px; font-weight: 600; letter-spacing: .11em; text-transform: uppercase; color: var(--teal); white-space: nowrap; transition: color .35s var(--ease-soft), gap .35s var(--ease-out); } .section-head-link:hover { color: var(--red); gap: .85rem; } .cards-tall { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); /* 1.1, was 1.2 — Greg, 2026-08-22: "when the images shrink, the gap is super huge". He is describing the reserve, and the reserve IS the growth. The row is held at the tallest a card can ever be so that nothing below it moves when the pointer arrives. The cost is that at rest, with every card at 1.0, the difference is dead space split above and below by align-items:center — at 1.2 that was 44px top and 44px bottom on a 440px card, 88px of nothing. At 1.1 it is 22px a side. There is no third option that keeps both: either the row reserves the growth and carries the gap at rest, or it sizes to the cards and the whole page below jumps every time the pointer crosses the row. Halving the growth halves the gap and keeps the ripple legible. */ grid-auto-rows: calc(var(--tch) * 1.1); align-items: center; gap: clamp(1rem, 1.6vw, 1.5rem); /* 1.25rem, was clamp(2.5rem, 5vw, 4rem) — Greg, 2026-08-22: the same gap About puts between its eyebrow and the "I am Greg" paragraph, which is .duo-text > * + *. The two sections now open on identical spacing. */ margin-top: 1.25rem; /* The reserve above already leaves .05 of --tch of clear space at the top of the row, so the measured gap to the eyebrow is 1.25rem PLUS that. Left as is deliberately: the two sections match on the number Greg asked them to match on, and the ripple's reserve is a separate decision. */ --tch: clamp(300px, 32vw, 440px); /* One number for the whole effect. 2.5s was tried first and was too slow to complete during a normal pointer sweep — 300ms in, a card had moved only 28% of the way. 1s, Greg's call. */ --tcard-speed: 1s; } /* Square corners. No border-radius anywhere on this variant — the rounded corners belong to the card set above, and the two sections exist to be told apart. */ .tcard { position: relative; height: var(--tch); overflow: hidden; isolation: isolate; transition: height var(--tcard-speed) var(--ease-out); } /* THE IMAGE NEVER RESIZES. It is fixed at the tallest the card can ever be, so at rest the card is cropping 44px off the top and 44px off the bottom of it, and growing on hover opens that crop until the whole photograph is showing. The card is a window that widens; the picture behind it does not move and does not scale. This is why the height is tied to --tch * 1.2 and not to 100%: at 100% the image is the card's own height, so it would stretch and re-crop with every hover, which is the thing being avoided. Centring it with top:50% and a -50% translate keeps the reveal symmetrical, matching the 10%-up-10%-down growth. --photo-filter is tuned for photographs on the light page; under a dark wash it crushed these to near-black panels. Same grayscale to keep the set consistent, lifted and flattened rather than contrasted. */ .tcard-img { position: absolute; left: 0; right: 0; top: 50%; transform: translateY(-50%); width: 100%; /* 1.1, tracking the reserve. This is the THIRD place the growth number lives and the one that fails silently: the image is fixed at the tallest the card can ever be, so if it stays at 1.2 while the card stops at 1.1, the crop never fully opens and the reveal quietly stops finishing. */ height: calc(var(--tch) * 1.1); object-fit: cover; filter: grayscale(1) brightness(1.22) contrast(0.94); transition: filter 0.55s var(--ease-soft); } /* COLOUR UNDER THE POINTER, Greg 2026-08-22. The same behaviour the hero, the About frames and Sanctuary already have, so the page has one rule for photographs rather than four. ONLY the grayscale is dropped. brightness(1.22) and contrast(0.94) stay, because they are not a grade — they are what keeps these readable under the dark wash, and taking them off would darken the card at the same moment it gains colour, which reads as two things happening instead of one. Bound to .is-active, NOT to :hover alone. This row is driven by main.js from the pointer's X position, so a card can be growing while the pointer is above or below the row — and a card that grows but stays grey looks broken. :hover is kept beside it as the fallback for a pointer on the card with the script not running. 0.55s, the page's photograph timing. */ .cards-tall .tcard.is-active .tcard-img, .tcard:hover .tcard-img { filter: grayscale(0) brightness(1.22) contrast(0.94); } /* Two separate washes, and the split matters. This one is atmosphere only — a light, whole-card tint that settles the photograph into the page. It is NOT what makes the type readable. */ .tcard::after { content: ''; position: absolute; inset: 0; background: linear-gradient(to top, rgba(46,50,49,.42) 0%, rgba(46,50,49,.20) 45%, rgba(46,50,49,.06) 100%); } /* This one is legibility, and it is anchored to the TEXT rather than to the card. A card-anchored gradient fails the moment the two change proportion: on a 300px phone card the copy block is two thirds of the height, so it rode up into the thin part of the wash and the Couples Massage title landed on a bright patch of grass. Anchored to the body, the backing travels with the text and holds at any card height — 300px on a phone, 528px hovered. The generous padding-top is the gradient's fade-in room, not spacing. */ .tcard-body { position: absolute; left: 0; right: 0; bottom: 0; z-index: 1; padding: 3.25rem 1.4rem 1.5rem; color: #fff; background: linear-gradient(to top, rgba(46,50,49,.93) 0%, rgba(46,50,49,.88) 42%, rgba(46,50,49,.62) 74%, rgba(46,50,49,0) 100%); } /* 12px, not 11 — Greg, 2026-08-22, on phone readability. Raised at EVERY width rather than under a media query: a font may never be smaller on a wider screen, so a phone-only bump would have to be undone on the desktop. */ .tcard-eyebrow { margin: 0; font-size: 12px; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; color: rgba(255,255,255,.72); } /* SIZED BY MEASUREMENT, Greg 2026-08-22 — the titles must each hold ONE line. Widths taken from fonts/crimson-latin.woff2 itself, letter-spacing -0.03em included, against the card's text column (card width minus 1.4rem a side): A Body That Works 7.51em needs <= 29.6px at 1440, <= 23.1px at 1024 Relaxation Massage 7.21em needs <= 30.8px -> RENAMED "Relax Massage", 5.34em, which clears every width easily Tantra Massage 5.82em fine at any size the row uses Coaching 3.52em fine .display-sm ran 2.4vw capped at 36px — 34.6px at 1440 — so two of the four wrapped, and the wrap is what threw the price rows out of line with each other. A Body That Works is the binding one and everything here is set by it. Why the cap is 28 and not 29.6: above 1280 the CONTAINER stops growing but the gutter does not, so the cards get slightly NARROWER as the window widens — 227px of text at 1280, 222 at 1440, 217 at 1600. 28px clears the tightest of those. And the floor is 20px so the type still only ever grows with the screen, never shrinks — Greg's standing rule. Only the size is overridden. Family, weight, line-height and letter-spacing still come from .display-sm. margin-top is 0 now: the duration eyebrow above it is gone, so the h3 is the first thing in the card body. */ .tcard-body h3 { margin: 0 0 .6rem; color: #fff; font-size: clamp(1.25rem, 2.15vw, 1.75rem); } /* 15px, same reasoning. This is the card's only body copy and it was the smallest running text on the page. */ .tcard-copy { margin: 0 0 1.1rem; font-size: 15px; line-height: 1.7; color: rgba(255,255,255,.86); } /* ONE ACCENT PER CARD, and it is carried by the rule and the arrow only — Greg, 2026-08-22. The cards themselves stay as they are: four coloured cards read as four brands, and the photographs are already doing the separating. The palette is the closed one — teal, saffron, red, brown. Blue and green were on the table and are not in it. 2px, not 1px, and the accent at .55 alpha over the dark wash. At 1px and full opacity a hue this saturated reads as a border someone drew; at 2px and half-lit it reads as the card having a colour. The arrow takes the same hue solid, because a 14px stroke at .55 disappears. --tcard-accent defaults to white so a card with no modifier still works. */ .tcard-foot { display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding-top: .9rem; /* 1px, halved from 2px — Greg, 2026-08-22. Alpha raised .55 -> .75 with it: a half-lit hairline at 1px is most of the way to invisible on a grey photograph, and thinning is only free if the ink stays. 0.75 is the next step up if 1px turns out too quiet. */ border-top: 1px solid rgba(var(--tcard-accent, 255, 255, 255), .75); transition: border-color .55s var(--ease-soft); } .tcard-price { font-size: 14px; font-weight: 600; } /* "Read more" is gone — Greg, 2026-08-22: the arrow says it, and four cards repeating the same two words was the noisiest thing in the row. .tcard-arrow is the visual only; the hit area is .tcard-link below. */ .tcard-arrow { display: inline-flex; align-items: center; color: rgb(var(--tcard-accent, 255, 255, 255)); transition: transform .35s var(--ease-out); } .tcard.is-active .tcard-arrow { transform: translateX(4px); } /* THE WHOLE CARD IS THE TARGET, and this is the second attempt at it. The first put a stretched ::after on the arrow, which sat inside .tcard-body — and .tcard-body is position:absolute, so inset:0 measured against the CAPTION BLOCK instead of the card. Only the bottom strip took a click and the photograph did nothing. It reads as correct in the CSS, which is exactly why it survived: it was found by hit-testing four points on each card, not by looking at the rule. So the anchor is now an empty element and a DIRECT CHILD of .tcard, which is position:relative — the containing block it was supposed to have all along. No pseudo, no nesting, nothing to resolve against the wrong ancestor. z-index 3 clears .tcard-body's 1 and the wash on ::after. .tcard sets isolation:isolate, so this stacks inside the card and cannot reach a neighbour. */ .tcard-link { position: absolute; inset: 0; z-index: 3; } .tcard-link:focus-visible { outline: 2px solid rgb(var(--tcard-accent, 255, 255, 255)); outline-offset: -4px; } .tcard--saffron { --tcard-accent: var(--saffron-rgb); } .tcard--red { --tcard-accent: 219, 124, 113; } /* --red #A23A33 lifted, and it needed it most of the four: raw it measures 2.0:1 on the card's wash, so the arrow all but vanished. 4.4:1 lifted. Same hue, lightness only. */ .tcard--teal { --tcard-accent: 77, 166, 190; } /* --teal lifted: #00637D is too dark to read against the card's own wash. Same hue, raised in lightness until the rule is visible on a grey photograph. */ .tcard--brown { --tcard-accent: 198, 124, 58; } /* --brown #7D4009 lifted for the same reason, and it lands beside saffron rather than under it. */ .tcard-num { position: absolute; top: 1rem; right: 1.15rem; z-index: 1; font-family: var(--serif); font-size: 13px; letter-spacing: .1em; color: rgba(255,255,255,.75); } /* The ripple. Driven by CLASSES, not :hover — main.js decides which card is active from the pointer's X position alone, so the cards respond while the pointer is above or below the row and not only when it is on top of a card. An earlier version used :hover with :has() to reach the previous sibling; that could not see a pointer sitting outside the row, which is the whole point of this version. .is-near last would lose to nothing, so .is-active is declared after it — the two are mutually exclusive in JS anyway, this just makes it explicit. */ /* Halved with the reserve above, 2026-08-22: active 1.2 -> 1.1, near 1.1 -> 1.05. These two and grid-auto-rows are one decision — the largest value here must equal the reserve, or the row either jumps or carries dead space. */ .cards-tall .tcard.is-near { height: calc(var(--tch) * 1.05); } .cards-tall .tcard.is-active { height: calc(var(--tch) * 1.1); } .card-media { position: relative; aspect-ratio: 4 / 3.4; overflow: hidden; margin: 0.75rem 0.75rem 0; border-radius: 14px; } .card-media img { width: 100%; height: 100%; object-fit: cover; filter: var(--photo-filter); transition: transform 1.1s var(--ease-out); } .card:hover .card-media img { transform: scale(1.07); } .card-num { position: absolute; top: 0.75rem; left: 0.9rem; font-family: var(--serif); font-size: 1.5rem; color: var(--white); mix-blend-mode: difference; } .card-body { padding: 1.4rem 1.4rem 1.6rem; display: flex; flex-direction: column; flex: 1; } .card-body h3 { margin: 0.6rem 0 0.75rem; } .card-body p { font-size: 14px; line-height: 1.75; margin: 0 0 1.5rem; } .card-foot { margin-top: auto; display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding-top: 1rem; border-top: 1px solid var(--saffron-hair); } .card-price { font-size: 14px; font-weight: 600; color: var(--red); letter-spacing: 0.01em; } /* --- split (philosophy / founder / story) ------------------------------- */ .split { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(2rem, 5vw, 5rem); align-items: center; } .split--reverse .split-media { order: 2; } .split-media img { width: 100%; aspect-ratio: 4 / 5; object-fit: cover; border-radius: 20px; filter: var(--photo-filter); } .split-text > * + * { margin-top: 1.25rem; } /* --- story feature ------------------------------------------------------ */ .story { display: grid; grid-template-columns: 1.05fr 1fr; gap: clamp(2rem, 5vw, 4.5rem); align-items: center; } .story-media { position: relative; } .story-media img { width: 100%; aspect-ratio: 5 / 4; object-fit: cover; border-radius: 20px; filter: var(--photo-filter); } .story-media::after { content: ''; position: absolute; inset: auto auto -22px -22px; width: 46%; height: 46%; border: 1px solid var(--teal-hair); border-radius: 20px; z-index: -1; } .story blockquote { margin: 0; } .story cite { display: block; font-style: normal; font-size: 12px; font-weight: 600; letter-spacing: 0.11em; text-transform: uppercase; color: var(--muted); margin-top: 1.5rem; } /* --- story feature B: the stacked pair (Screenshot_5.png) ---------------- */ .duo { display: grid; grid-template-columns: 0.92fr 1fr; gap: clamp(2rem, 5vw, 5rem); align-items: center; } .duo-text > * + * { margin-top: 1.25rem; } .duo-text .btn { margin-top: 2.25rem; } /* The dot after the label in the screenshot's pill. currentColor, so it follows the button through its hover swap without a second rule. */ .btn-dot { width: 5px; height: 5px; border-radius: 50%; background: currentColor; flex: none; } /* Near-square on purpose: it is what makes both frames resolve to 2:3 from width percentages alone. Measured off the screenshot — 834 wide, 833 tall. */ .duo-media { position: relative; aspect-ratio: 834 / 833; } .duo-frame { position: absolute; margin: 0; } /* The clipping the figure used to do itself. It had to hand it over: a figure with overflow:hidden cannot let its own shadow hang outside it. */ .duo-clip { position: absolute; inset: 0; overflow: hidden; /* the inner parallax slides the img inside this */ } /* The shadow, and it is the real one — frames/image-frame-portrait-shadow.png with its white card knocked transparent by tools/make-shadow-only.py. Square corners now, because the shadow was drawn for a square-cornered picture and a 20px radius left the two disagreeing at every corner. border-image rather than a background: these frames are percentages of a fluid column, and border-image holds the shadow's true thickness at the edges (6px right, 25px bottom) while stretching only the soft middle. Stretching a soft shadow is invisible; stretching the frame's 1px hairline would not be, which is why only the shadow travels this way. It is on ::after with negative insets so it costs the layout nothing — a real border would eat into the photograph and break the 2:3 the column depends on. border-style must be set or border-image is never painted. */ .duo-frame::after { content: ''; position: absolute; top: 0; left: 0; right: -6px; bottom: -25px; border-style: solid; border-color: transparent; border-width: 0 6px 25px 0; border-image: url(../frames/shadow-only-portrait.png) 0 6 25 0 / 0 6px 25px 0 stretch; pointer-events: none; } /* RESTORED from GCGM-v5/css/style.css, 2026-08-22. Greg: v5 is the source and the original, and the geometry had drifted here. The -49.8%/149.8% overhang that reached up into #what-this-is is gone. Back: high right, the larger of the two. 61% x 90.9% of a square column gives 2:3. */ .duo-frame--back { top: 0; right: 0; width: 61%; height: 90.9%; } /* Front: low left, 49% wide. It stays pinned to the column's bottom edge, so it hangs 9.1% below the back frame, and the 10% horizontal overlap is what 61 + 49 = 110 buys. HEIGHT RAISED 20% TWICE, Greg 2026-08-22: 74.2% -> 89.04% -> 106.85%. bottom:0 is the anchor both times, so the whole increase is taken upward and the bottom edge has not moved. Width unchanged throughout. PAST 100% NOW, and that is the thing to know: the frame is taller than the column it sits in, so its top edge stands 6.85% — about 57px at 1440 — ABOVE .duo-media's box. Nothing clips it: .duo and .duo-media both leave overflow visible, so it simply hangs into the gap above the section. This is the same direction as the old -49.8%/149.8% overhang that was removed on 08-22, at a twelfth of the distance. It is also no longer 2:3 — 49 x 106.85 of a square column is 0.46:1 — while the back frame is untouched at 2:3, so the pair are deliberately different shapes. */ .duo-frame--front { bottom: 0; left: 0; width: 49%; height: 106.85%; } /* RESTORED from v5. 126% leaves 26% of headroom for the inner parallax to travel through. The img is anchored to the top and JS moves it up from there, so the frame is never uncovered at either end of the scroll — the travel is bounded well inside the headroom. See duoFrame() in main.js for the arithmetic. */ .duo-frame img { position: absolute; top: -13%; /* centred: 13% of headroom above and below */ left: 0; width: 100%; height: 126%; object-fit: cover; filter: var(--photo-filter); will-change: transform; transition: filter 0.55s var(--ease-soft); } /* Black and white, colour on hover — the same treatment as the sample frames in FRAMES.html, and the same 0.55s. Per photograph, not per section: the hover is on .duo-frame, so hovering one leaves the other in black and white. The two figures are siblings rather than nested, so the overlap resolves on its own — the front one is painted last and takes the pointer there, and the back one does not light up with it. The shadow does not change. It belongs to the PNG on ::after, which carries pointer-events:none, so it neither animates nor widens the area that counts as the photograph. */ .duo-frame:hover img { filter: none; } /* --- "How" heading with the background line ----------------------------- */ /* The background line runs the full width behind the heading and draws itself left to right — the template's version of this is horizontal, not vertical. The heading sits on top with a background plate so the rule breaks around it. */ .how-head { position: relative; text-align: center; padding-block: clamp(2rem, 6vw, 5rem); } .how-head .how-line { position: absolute; left: 0; right: 0; top: 50%; height: 1px; background: linear-gradient(to right, transparent, var(--teal-hair) 12%, var(--saffron-hair) 50%, var(--teal-hair) 88%, transparent); transform: scaleX(0); transform-origin: left; transition: transform 1.6s var(--ease-out); } .how-head.is-in .how-line { transform: scaleX(1); } .how-head .eyebrow, .how-head .display-xl { position: relative; background: var(--white); } .how-head .display-xl { display: inline-block; padding-inline: clamp(1rem, 3vw, 2.5rem); } .how-head em { font-style: italic; color: var(--red); } /* --- numbered steps ----------------------------------------------------- */ .steps { margin-top: clamp(2rem, 5vw, 4rem); } .step { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(1.5rem, 5vw, 5rem); align-items: center; padding-block: clamp(3rem, 7vw, 6rem); border-top: 1px solid var(--hairline); } .step:last-child { border-bottom: 1px solid var(--hairline); } .step--flip .step-media { order: -1; } .step-num { display: block; font-size: clamp(5.5rem, 13vw, 12rem); font-weight: 500; line-height: 0.8; letter-spacing: -0.05em; color: var(--saffron-wash); margin-bottom: clamp(0.5rem, 1.5vw, 1.25rem); transition: color 0.9s var(--ease-soft); } .step.is-in .step-num { color: rgba(var(--saffron-rgb), 0.72); } .step-body p { max-width: 42ch; margin-top: 1.25rem; } .step-media img { width: 100%; aspect-ratio: 5 / 4; object-fit: cover; border-radius: 20px; filter: var(--photo-filter); } /* --- quote band --------------------------------------------------------- */ .band { position: relative; /* Brought in with everything else, though on the tall variant it changes nothing: that band's height comes from `min-height: 120vh` below, which is the room the scroll-drawn lines need to complete. THE BAND IS THE ONE SECTION THE PAGE-WIDE CUT DOES NOT REACH, and shortening it is a decision about the lines rather than about spacing. */ padding-block: clamp(3rem, 7vw, 6.5rem); overflow: hidden; } /* Tall variant — the extra height is what gives the lines room to draw. 1.2 viewports, measured off the ClearPath section. */ .band--tall { min-height: 120vh; display: flex; flex-direction: column; justify-content: center; } .band-media { position: absolute; inset: 0; } .band-media img { width: 100%; height: 100%; object-fit: cover; filter: var(--photo-filter); } /* The image is 135% of the section and sits 17.5% high, so it has 35% of travel to parallax through and still covers the section at both ends. JS moves it between +17.5% and -17.5%. The JPG is never stretched. */ .band--tall .band-media { overflow: hidden; } .band--tall .band-media img { position: absolute; top: -17.5%; left: 0; height: 135%; will-change: transform; } /* --- the two scroll-linked lines --------------------------------------- No CSS transition here on purpose: JS writes stroke-dashoffset every frame, and a transition on top of that would fight the lerp. */ /* Sized to the section itself, not to a fixed 2000px box. The earlier version was 2000px tall and centred, so the section clipped it to the middle rows and the line's start and end were never on screen. The whole point is that the draw runs from the image's top edge to its bottom edge. */ .band-lines { position: absolute; top: 0; right: 3vw; /* The box takes its width from its height, so the drawing keeps line.jpg's own 880 x 2256 proportions at every window size. The fixed 421px width it replaced was correct at exactly one section height (1080px, i.e. a 900px viewport) and stretched everywhere else — measured 20% too tall at 1920x1080, which is enough to visibly open out the loops. */ height: 100%; width: auto; aspect-ratio: 880 / 2256; pointer-events: none; overflow: visible; z-index: 1; /* The reference photograph is uniformly dark blue, so a white line reads everywhere on it. This one has a near-white sheet across the lower half and the stroke vanished into it. A soft dark halo keeps the line legible over the light areas without darkening the whole photograph. */ filter: drop-shadow(0 0 5px rgba(0, 0, 0, 0.5)); } .band-lines path { fill: none; stroke: #fff; stroke-width: 2; stroke-linecap: round; /* No vector-effect here on purpose. non-scaling-stroke measures the dash pattern in screen pixels, which breaks pathLength="1" normalisation — dasharray:1 stops meaning "the whole path" and becomes a 1px dash, so the line renders as an invisible dotted hairline. This SVG is drawn at its natural 680x2000, scale 1:1, so nothing needs correcting. */ stroke-dasharray: 1; stroke-dashoffset: 1; } /* The ghost is dimmer AND thinner — both, not just dimmer. Dropping the opacity alone leaves a 2px stroke that still reads as a second line of equal weight; the reference's second stroke is visibly finer, which is what makes it read as an echo of the first rather than as a pair. Targeted by class, not by nth-child: the ghost is inserted before the source path (so the bright line wins every crossing), so position is the wrong thing to key off, and a positional rule silently dims the wrong line the moment the order changes — which is exactly what happened to the previous version of this rule. */ .band-lines path { opacity: 0.85; } .band-lines path.is-ghost { opacity: 0.32; stroke-width: 1.1; } .band-scrim { position: absolute; inset: 0; background: rgba(46, 50, 49, 0.55); } .band .container { position: relative; z-index: 2; text-align: center; } .band blockquote { margin: 0 auto; /* THE FULL REVIEW IN FOUR LINES — Greg, 2026-08-22, and it is one instruction with two halves: keep every word, and make the block wide and short rather than narrow and tall. Both halves fall out of one sum. The review is 269 characters, which is 105.8 em of Crimson at this weight. Four lines means each line is 26.4 em, and the widest the band can go is the container's 1136px at 1440 — so the type is 1136 / 26.4 = 43px. There is no second answer: the width is capped by the container and the line count is Greg's, so the size is determined. Measured, so the neighbours are on record: 52px 4.8 lines · 48px 4.5 · 44px 4.1 · 43px 4.0 · 42px 3.9 · 38px 3.5 max-width is gone rather than raised. A ch-based measure was fighting the font size — every change to one silently moved the other — so the block simply takes the container and the size does the work. line-height 1.02 -> 1.2 and letter-spacing -0.03em -> -0.015em: both are display settings, and at 43px over four lines this is running text being read, not a headline being looked at. */ max-width: none; font-family: var(--serif); font-weight: 400; /* Cap 2.7rem -> 2rem, Greg 2026-08-22 on screen. 32px, and the 43px above was the arithmetic answer rather than the judged one — at 32px the block runs about 5.4 lines instead of 4 and reads as a person talking rather than as a statement. The 3vw middle is untouched, so the cap binds from 1067px up. */ font-size: clamp(1.5rem, 3vw, 2rem); line-height: 1.2; letter-spacing: -0.015em; color: var(--white); } .band cite { display: block; font-style: normal; font-size: 12px; font-weight: 600; letter-spacing: 0.11em; text-transform: uppercase; color: rgba(255, 255, 255, 0.65); margin-top: 2rem; } /* TWO REVIEWS IN THE BAND, 2026-08-22. Stacked rather than side by side: 269 characters beside 47 is not two columns, it is one column and a caption, and the short one loses every time. BOTH QUOTES ARE THE SAME SIZE — Greg, 2026-08-22, after hearing the case for making the second smaller and calling it weak. He is right. The argument was that hierarchy tells the eye where to start; the answer is that these are two people who each wrote something true, and the ratio proposed for shrinking one of them was picked rather than measured, which is the tell. The rule and the spacing do all the separating, and they are enough. The CITES keep their own treatment and are untouched — 12px uppercase, which is the page's caption setting everywhere. Only the reviews match. The margin-top on .band cite is 2rem, which is right under a three-line quote and too much under a one-line one, so the second figure takes it back. */ .band-quote { margin: 0; } .band-quote--second { margin-top: clamp(2.5rem, 5vw, 4rem); padding-top: clamp(2.5rem, 5vw, 4rem); border-top: 1px solid rgba(255, 255, 255, 0.22); } .band-quote--second cite { margin-top: 1.1rem; } /* the vertical animated line */ .band-line { width: 1px; height: clamp(3rem, 7vw, 6rem); margin: 0 auto clamp(2rem, 4vw, 3.5rem); background: rgba(255, 255, 255, 0.65); transform: scaleY(0); transform-origin: top; transition: transform 1.5s var(--ease-out); } .band.is-in .band-line { transform: scaleY(1); } /* --- studio: irregular shaped reveals -------------------------------- */ .shapes { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(1.25rem, 3vw, 2.75rem); margin-top: clamp(2.5rem, 5vw, 4rem); } .shape { display: block; } .shape-media { position: relative; aspect-ratio: 1 / 1.12; overflow: hidden; /* not a square, not an oval — the irregular organic mask */ border-radius: 62% 38% 54% 46% / 48% 58% 42% 52%; transition: border-radius 1.2s var(--ease-out); } .shape:nth-child(2) .shape-media { border-radius: 44% 56% 38% 62% / 56% 44% 60% 40%; } .shape:nth-child(3) .shape-media { border-radius: 55% 45% 62% 38% / 40% 55% 45% 60%; } .shape:hover .shape-media { border-radius: 30% 70% 46% 54% / 62% 36% 64% 38%; } .shape-media img { width: 100%; height: 100%; object-fit: cover; filter: var(--photo-filter); transform: scale(1.18); transition: transform 1.4s var(--ease-out); } .shape.is-in .shape-media img { transform: scale(1); } .shape:hover .shape-media img { transform: scale(1.06); } .shape-cap { margin-top: 1.25rem; } .shape-cap h3 { margin: 0.4rem 0 0.5rem; } /* "See more" is gone from all three — Greg, 2026-08-22, the same call he made on the service cards: the arrow says it, and three cards repeating two words was noise. The arrow sits ON THE TITLE LINE, pushed to the right — Greg, 2026-08-22. Title left, arrow right, one row. It is NOT on a row of its own under the caption, which is what a first pass did. No accent colour on these. #treatments earns four hues by having four different services in it; this is one room photographed three times, so it stays teal like every other link on the page. */ .shape-title { display: flex; align-items: baseline; justify-content: space-between; gap: 1rem; margin: 0.4rem 0 0.5rem; } /* The h3's own margin moves to .shape-title so the two sides share one baseline; leaving it on the h3 pushed the arrow down with it. */ .shape-title h3 { margin: 0; } .shape-cap .link-arrow { flex: none; } /* --- FAQ ---------------------------------------------------------------- */ .faq { max-width: 800px; margin-inline: auto; margin-top: clamp(2rem, 4vw, 3.5rem); } .faq-item { border-top: 1px solid var(--hairline); } .faq-item:last-child { border-bottom: 1px solid var(--hairline); } .faq-q { width: 100%; display: flex; align-items: center; justify-content: space-between; gap: 2rem; padding-block: 1.6rem; text-align: left; font-family: var(--serif); font-size: clamp(1.2rem, 2vw, 1.65rem); line-height: 1.25; letter-spacing: -0.02em; color: var(--ink); } .faq-icon { flex: none; width: 20px; height: 20px; position: relative; } .faq-icon::before, .faq-icon::after { content: ''; position: absolute; inset: 50% 0 auto; height: 1.5px; background: var(--teal); transition: transform 0.5s var(--ease-out); } .faq-icon::after { transform: rotate(90deg); } .faq-item.is-open .faq-icon::after { transform: rotate(0deg); } .faq-a { display: grid; grid-template-rows: 0fr; transition: grid-template-rows 0.6s var(--ease-out); } .faq-item.is-open .faq-a { grid-template-rows: 1fr; } .faq-a > div { overflow: hidden; } .faq-a p { margin: 0 0 1.6rem; max-width: 60ch; font-size: 15px; } /* --- contact ------------------------------------------------------------ */ .contact-grid { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(2rem, 5vw, 5rem); align-items: start; } .field { margin-bottom: 1.5rem; } .field label { display: block; font-size: 12px; font-weight: 600; letter-spacing: 0.11em; text-transform: uppercase; color: var(--muted); margin-bottom: 0.6rem; } .field input, .field textarea, .field select { width: 100%; font: inherit; font-size: 1rem; color: var(--ink); background: var(--white); border: 1px solid var(--hairline); border-radius: 12px; padding: 0.95rem 1.1rem; transition: border-color 0.35s var(--ease-soft), box-shadow 0.35s var(--ease-soft); } .field textarea { min-height: 140px; resize: vertical; } .field input:focus, .field textarea:focus, .field select:focus { outline: none; border-color: var(--teal); box-shadow: 0 0 0 3px var(--teal-wash); } .contact-aside > * + * { margin-top: 2rem; } .contact-row { display: flex; flex-direction: column; gap: 0.3rem; } .contact-row a { font-size: 1.125rem; color: var(--ink); } .contact-row a:hover { color: var(--teal); } .contact-map { width: 100%; aspect-ratio: 16 / 11; border: 0; border-radius: 18px; filter: grayscale(1) contrast(1.05); } /* --- footer ------------------------------------------------------------- */ .footer { position: relative; color: var(--white); overflow: hidden; padding-block: clamp(5rem, 11vw, 9rem) 2rem; } .footer-media { position: absolute; inset: 0; } .footer-media img { width: 100%; height: 100%; object-fit: cover; filter: var(--photo-filter); } .footer-scrim { position: absolute; inset: 0; background: rgba(46, 50, 49, 0.78); } .footer .container { position: relative; z-index: 2; } .footer-word { font-family: var(--serif); font-size: clamp(3rem, 13vw, 12rem); line-height: 0.85; letter-spacing: -0.04em; color: var(--white); margin: 0 0 clamp(2.5rem, 6vw, 5rem); } .footer-word em { font-style: italic; color: var(--saffron); } .footer-cols { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 2rem; padding-top: 2.5rem; border-top: 1px solid rgba(255, 255, 255, 0.18); } .footer-cols h4 { font-size: 12px; font-weight: 600; letter-spacing: 0.11em; text-transform: uppercase; color: rgba(255, 255, 255, 0.55); margin: 0 0 1rem; } .footer-cols ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 0.6rem; } .footer-cols a, .footer-cols li { color: rgba(255, 255, 255, 0.85); font-size: 15px; } .footer-cols a:hover { color: var(--teal); } .footer-legal { margin-top: clamp(3rem, 6vw, 5rem); padding-top: 1.75rem; border-top: 1px solid rgba(255, 255, 255, 0.18); display: flex; flex-wrap: wrap; gap: 0.75rem 1.75rem; align-items: center; font-size: 13px; color: rgba(255, 255, 255, 0.65); } .footer-legal a { text-decoration: underline; text-underline-offset: 3px; } /* --- responsive --------------------------------------------------------- */ @media (max-width: 1280px) { /* below this the gutter is too narrow to hold the numeral clear of content */ .odometer { display: none; } } @media (max-width: 1080px) { .cards { grid-template-columns: repeat(2, minmax(0, 1fr)); } .cards-tall { grid-template-columns: repeat(2, minmax(0, 1fr)); } /* The ripple is a row effect and only reads as one while all four cards are in a single row. On two columns the neighbours are still the DOM siblings, so the card next to the active one can be the bottom-LEFT one — diagonally opposite, which looks like a bug rather than a wave. The active card still grows; only the neighbour step is cancelled. */ .cards-tall .tcard.is-near { height: var(--tch); } .shapes { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1.25rem; } } @media (max-width: 900px) { /* The CTA goes too. At 375px it wrapped to three lines and pushed the header to 100px tall — the hamburger already carries "Reserve" in the menu. */ .nav, .header-phone, .header-right .btn { display: none; } /* The whole contact block, not just the number. Greg, 2026-08-22: the flags were the only thing left in it, sitting next to the burger and qualifying nothing. They move into the menu beside the number. */ .header-contact { display: none; } .menu-toggle { display: block; } .odometer { display: none; } .split, .story, .duo, .contact-grid, .step { grid-template-columns: minmax(0, 1fr); } /* The pair itself is percentage-based, so it scales down intact rather than breaking — the parallax stands down via the 901px guard in main.js. This is survival, not a mobile design: that happens once the element is chosen. */ .duo-text .btn { margin-top: 1.75rem; } .split--reverse .split-media { order: 0; } /* the alternating image side is a desktop rhythm; stacked, it just looks inconsistent, so every row goes back to text-then-image */ .step--flip .step-media { order: 0; } .story-media::after { display: none; } .step { gap: 1.75rem; padding-block: 3rem; } .split-media img, .story-media img, .step-media img { aspect-ratio: 4 / 3; } .statement-body { max-width: none; } /* Section lines are routed through the empty space of the desktop grid. Stacked, that space is gone — the content fills the column — and the studio line ran straight through the heading and behind a photo. Hidden rather than distorted. The hero lines stay: the hero is a full-bleed image and has room for them at every width. Fixable with a second mobile-specific path per section if wanted. ONE EXEMPTION, ADDED 2026-08-26, AND IT IS DIRECTLY BELOW THIS BLOCK. The reason above is "stacked, that space is gone" -- and the services index is not stacked at 900 any more. It holds its two columns down to 760, so the empty column the line runs in still exists and the labels are still measured onto the curve. Hiding it there was throwing the drawing away in a layout that still had room for it, which is exactly what Greg reported: "the animated line already disappears at around 1024." */ .section-lines { display: none; } /* Same call for the band lines, and Greg's own: there is no spare screen on mobile for them. Desktop is being judged first; if it is kept, mobile gets designed rather than squeezed. */ .band-lines { display: none; } /* The ripple is a pointer effect and there is no pointer here. On a touch screen :hover latches on tap and sticks until you tap elsewhere, so the cards would sit at odd heights with no way to clear them. The row also stops needing its 120% reservation once nothing grows, and reclaiming it removes 20% of dead space from every card in a stacked column. */ .cards-tall { grid-auto-rows: auto; } .tcard { transition: none; } .cards-tall .tcard.is-active, .cards-tall .tcard.is-near { height: var(--tch); } /* And the statement lines, for a reason of their own: that box is 2256 units wide, so at a 390px screen the 3-unit stroke resolves to about half a pixel and the drawing renders as a grey smudge 152px tall. It is in normal flow rather than absolutely positioned, so unlike the two above it costs vertical space to show badly. Mobile wants a short excerpt of the drawing rather than the whole thing shrunk — designed, not squeezed. */ .statement-lines { display: none; } .band--tall { min-height: 0; } .band--tall .band-media img { position: static; height: 100%; top: auto; transform: none; } } @media (max-width: 640px) { :root { --header-h: 64px; } .cards { grid-template-columns: minmax(0, 1fr); } .cards-tall { grid-template-columns: minmax(0, 1fr); } .shapes { grid-template-columns: minmax(0, 1fr); gap: 2.5rem; } .footer-cols { grid-template-columns: minmax(0, 1fr); gap: 2.25rem; } .hero-foot { flex-direction: column; align-items: flex-start; } .hero-lead { max-width: none; } .band blockquote { max-width: none; } } /* Landscape phones: the hero must not lock to a viewport that is 380px tall */ @media (max-height: 520px) and (orientation: landscape) { .hero { min-height: auto; padding-block: calc(var(--header-h) + 2rem) 2.5rem; } .display-xl { font-size: clamp(2.25rem, 7vw, 3.5rem); } .mobile-menu a { font-size: 1.35rem; padding-block: 0.3rem; } } /* =========================================================================== * INNER PAGES — treatments · gallery · testimonials · faq · contact * * The six pages are the live site's own six, kept because every URL that ranks * today survives the rebuild. Everything below is the furniture those five * inner pages need and the home page did not. * * Emitted markup lives in tools/make-pages.py. * =========================================================================== */ /* The current page, marked in the bar. */ .nav a.is-current { color: var(--teal); } /* --- the band every inner page opens with ------------------------------- */ /* Beige under the navigation, the same join the hero uses, so an inner page starts the way the home page does rather than with a bare heading on white. */ .page-head { background: var(--surface); padding-block: calc(var(--header-h) + clamp(2.5rem, 5vw, 4rem)) clamp(2.5rem, 5vw, 4rem); } .page-head h1 { margin: 0.75rem 0 0; max-width: 18ch; } .page-intro { margin: 1.5rem 0 0; max-width: 62ch; color: var(--body); line-height: 1.62; } /* A size between display-lg and display-sm, for the treatment names. */ .display-md { font-family: var(--serif); font-size: clamp(1.6rem, 3vw, 2.4rem); line-height: 1.1; color: var(--ink); margin: 0.4rem 0 0; } /* --- the shadow, shared ------------------------------------------------- */ /* The 2014 PNG cut loose from its frame by tools/make-shadow-only.py, applied with border-image so it keeps its true 25px at the edge and stretches only its soft middle. .shot-clip exists because a box that clips itself cuts its own shadow off — the figure stays visible, the clip does the clipping. */ .shot-clip { position: absolute; inset: 0; overflow: hidden; } .treatment-shot, .gal-shot { position: relative; margin: 0; } .treatment-shot::after, .gal-shot::after { content: ''; position: absolute; left: 0; right: 0; top: 0; bottom: -25px; border-style: solid; border-color: transparent; border-width: 0 0 25px 0; border-image: url(../frames/shadow-only-landscape.png) 0 0 25 0 / 0 0 25px 0 stretch; pointer-events: none; } .treatment-shot img, .gal-shot img { width: 100%; height: 100%; object-fit: cover; filter: grayscale(1) contrast(1.05); transition: filter 0.55s var(--ease-soft); } .treatment-shot:hover img, .gal-shot:hover img { filter: none; } /* --- treatments --------------------------------------------------------- */ /* Picture and words side by side, alternating sides down the page. The copy is deliberately long here — that length is what separates this site from Trance Ritual — so the column is held to a readable measure rather than filling the half it is given. */ .treatment { display: grid; grid-template-columns: 0.85fr 1fr; gap: clamp(2rem, 5vw, 4.5rem); align-items: start; padding-block: clamp(3rem, 6vw, 5rem); border-top: 1px solid var(--hairline); } .treatment:first-child { border-top: 0; padding-top: 0; } .treatment--flip .treatment-shot { order: 2; } .treatment-shot { aspect-ratio: 4 / 5; position: sticky; top: calc(var(--header-h) + 2rem); } .treatment-copy > p { max-width: 60ch; color: var(--body); line-height: 1.68; margin: 1rem 0 0; } .treatment-n { font-family: var(--sans); font-size: 0.72rem; letter-spacing: 0.18em; color: var(--saffron-ink); margin: 0; } .treatment-meta { display: flex; flex-wrap: wrap; gap: 0.6rem 1.25rem; align-items: baseline; margin: 0.9rem 0 1.5rem !important; font-family: var(--sans); font-size: 0.85rem; letter-spacing: 0.06em; text-transform: uppercase; color: var(--muted); } .treatment-price { color: var(--red); font-weight: 600; } .treatment-lead { font-size: 1.12rem; color: var(--ink) !important; } /* --- gallery ------------------------------------------------------------ */ .gallery { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(2rem, 4vw, 3.5rem) clamp(1.5rem, 3vw, 2.5rem); } .gal-shot { aspect-ratio: 4 / 3; } .gal-shot figcaption { position: absolute; top: 100%; left: 0; padding-top: 1.1rem; font-family: var(--sans); font-size: 0.74rem; letter-spacing: 0.14em; text-transform: uppercase; color: var(--muted); } /* --- the turn-it-around statement --------------------------------------- */ /* The paragraph that catches people who arrived on an erotic search term. It has to stand out and it must not read as a telling-off — the reason it works is that it does not judge anyone for looking. So: larger type, a rule, and the warm accent. No red, which reads as a warning. */ .turnaround { border-left: 3px solid var(--saffron); padding: 0.25rem 0 0.25rem clamp(1.25rem, 3vw, 2rem); margin-bottom: clamp(3rem, 6vw, 5rem); } .turnaround p { font-family: var(--serif); font-size: clamp(1.05rem, 1.6vw, 1.3rem); line-height: 1.55; color: var(--ink); margin: 0 0 1rem; max-width: 56ch; } .turnaround p:last-child { margin-bottom: 0; } /* --- faq ---------------------------------------------------------------- */ .faq-group { font-family: var(--sans); font-size: 0.75rem; letter-spacing: 0.18em; text-transform: uppercase; color: var(--saffron-ink); margin: clamp(3rem, 6vw, 4.5rem) 0 1.25rem; } .faq-group:first-of-type { margin-top: 0; } .faq-a p + p { margin-top: 0.9rem; } /* --- testimonials ------------------------------------------------------- */ .quote--lead { margin: 0 0 clamp(2.5rem, 5vw, 4rem); padding: 0; } .quote--lead p { font-family: var(--serif); font-style: italic; font-size: clamp(1.4rem, 2.8vw, 2rem); line-height: 1.3; color: var(--ink); margin: 0; } .quote--lead cite { display: block; margin-top: 1.25rem; font-family: var(--sans); font-style: normal; font-size: 0.78rem; letter-spacing: 0.14em; text-transform: uppercase; color: var(--muted); } .note-block { background: var(--surface); border-radius: 14px; padding: clamp(1.25rem, 3vw, 2rem); color: var(--body); line-height: 1.62; } .note-block p { margin: 0; } .awards { margin-top: clamp(3rem, 6vw, 4.5rem); } .awards-years { display: flex; gap: 1.5rem; margin: 0.75rem 0 0; font-family: var(--serif); font-size: clamp(1.6rem, 3vw, 2.2rem); color: var(--teal); } /* --- contact ------------------------------------------------------------ */ .contact-details h2 { margin-top: 2.5rem; } .contact-details h2:first-child { margin-top: 0; } .contact-details p { color: var(--body); line-height: 1.68; margin: 0.75rem 0 0; max-width: 46ch; } .contact-details a { color: var(--teal); } .contact-form .field { margin-bottom: 1.25rem; } .contact-form label { display: block; margin-bottom: 0.4rem; font-family: var(--sans); font-size: 0.74rem; letter-spacing: 0.12em; text-transform: uppercase; color: var(--muted); } /* --- inner pages, narrower screens -------------------------------------- */ /* Desktop is the design on this site and the phone is a separate job, but a two-column grid that never collapses is broken rather than unfinished, so these three fold at the tablet width and get revisited properly later. */ @media (max-width: 900px) { .treatment { grid-template-columns: 1fr; } .treatment--flip .treatment-shot { order: 0; } .treatment-shot { position: static; aspect-ratio: 16 / 10; } .gallery { grid-template-columns: repeat(2, minmax(0, 1fr)); } } @media (max-width: 560px) { .gallery { grid-template-columns: 1fr; } } /* --- #9 back to top ------------------------------------------------------- Greg, 2026-08-22. Appears on the way down, returns to the top. TEAL DISC, and that is not a free choice: the page already has one round teal control — the pulsing phone disc in the header — so a second round control in a different colour would read as a different KIND of thing. It does not pulse. The phone number is asking to be called; this is not asking for anything, it is just there when it is wanted. Bottom right, clear of the footer's legal strip at rest because it is fixed to the viewport rather than to the page. Hidden by visibility, not display: display:none cannot transition, and the fade is the whole reason it does not feel like something appearing suddenly in the corner. pointer-events goes with it so it cannot be clicked while invisible. */ .to-top { position: fixed; right: clamp(1rem, 2.5vw, 2rem); bottom: clamp(1rem, 2.5vw, 2rem); z-index: 90; /* under the header's 100, over everything else */ width: 44px; height: 44px; display: grid; place-items: center; border-radius: 50%; background: var(--teal); color: #FFFFFF; box-shadow: 0 6px 20px rgba(var(--teal-rgb), 0.28); opacity: 0; visibility: hidden; transform: translateY(10px); pointer-events: none; transition: opacity .45s var(--ease-soft), transform .45s var(--ease-out), visibility 0s linear .45s, background .35s var(--ease-soft); } .to-top.is-on { opacity: 1; visibility: visible; transform: none; pointer-events: auto; transition-delay: 0s; /* visibility flips in immediately on the way in */ } .to-top:hover { background: var(--red); } .to-top:focus-visible { outline: 2px solid var(--teal); outline-offset: 3px; } /* One drawing, transformed. The arrow is the page's own right-pointing one, turned to face up rather than a second SVG being drawn. */ .to-top svg { transform: rotate(-90deg); } /* --- the section divider -------------------------------------------------- Greg, 2026-08-22, between #what-this-is and About. A hairline that fades at both ends rather than a hard rule: a solid line stopping dead at the text's edge draws attention to where it stops, and this is meant to separate two blocks, not to be looked at. Same gradient treatment as .hero-rule. --hairline is the page's own ink at 10%, so it sits in the palette rather than being a new grey. */ .rule-soft { border: 0; height: 1px; /* 2rem, was clamp(2.5rem, 5vw, 4rem) — Greg, 2026-08-22: the rule arrived with too much air around it. And nothing below it: #what-this-is gives up its bottom padding so this sits on the boundary with #story-duo, which is where the About line now terminates. The gap under the rule is that section's own padding and nothing is added to it. */ margin: 2rem 0 0; background: linear-gradient(to right, transparent 0%, var(--hairline) 12%, var(--hairline) 88%, transparent 100%); } /* The statement's bottom padding goes to zero so .rule-soft lands exactly on the border between it and #story-duo — the y=0 the About line now ends at. Scoped to this section: .section's padding is right everywhere else. */ #what-this-is { padding-bottom: 0; } /* =========================================================================== TAP TARGETS — added 2026-08-22 after a hit-test sweep across 320 to 1920. Everything here was under the 44x44 minimum: footer links measured 16px tall, the section-head links 20, the WhatsApp marks 22-25, the nav home icon 15x26. None of them broke anything — they are thumb-accuracy, and they were invisible until they were measured. THE PATTERN IS THE SAME EVERY TIME and it is why none of this changes the design: padding grows the hit area, a negative margin of the same size takes it back out of the layout, so every element stays exactly where it was drawn. Nothing moves. Only the area that answers a finger changes. These live at the end of the file on purpose — they are a layer over the design rather than part of it, and they must win against the rules above. THIS APPLIES TO THE OTHER FIVE PAGES TOO. The header, the footer and the section-head link are shared furniture; when treatments, gallery, testimonials, faq and contact come across, they inherit this file and are already fixed. Do not re-solve it per page. ======================================================================== */ /* Footer navigation and the address/email row. 13px text in a 16px box. */ .site-footer .f-inline a, .site-footer .f-where a, .site-footer .f-legal a { display: inline-block; padding-block: 0.85rem; margin-block: -0.85rem; } /* "All services" and "Gallery". The row uses align-items:flex-end, so the padding is split unevenly — more below, so the link's baseline stays put against the eyebrow beside it. */ .section-head-link { padding: 0.7rem 0.25rem 0.75rem; margin: -0.7rem -0.25rem -0.75rem; } /* The three WhatsApp marks — header, mobile menu, footer. The images stay 24.6px and 22px; only the box around them grows. */ .header-wa, .mobile-menu .mobile-menu-foot .mm-wa, .site-footer .f-wa { padding: 0.6rem; margin: -0.6rem; } /* The menu one keeps its divider, so its left padding is the rule's spacing and must not be overwritten by the shorthand above. */ .mobile-menu .mobile-menu-foot .mm-wa { padding-left: 0.7rem; margin-left: -0.1rem; } /* The home icon in the nav. 15x15 of artwork in a 15x26 box — the smallest control on the desktop header. `.nav a` — NOT `.nav-home`. The first attempt used the class alone and did nothing: .nav a is (0,1,1) and .nav-home is (0,1,0), so the 0.35rem padding on the general rule won and the box never grew. Measured, not assumed. Horizontal padding too, because 15px of artwork is narrow whatever its height. .nav a::after draws on this box, so the underline widens with it — which is right: the underline should match what is clickable. */ .nav a.nav-home { padding-block: 0.85rem; padding-inline: 0.7rem; margin-block: -0.85rem; margin-inline: -0.7rem; } /* The header phone link: 141x20. The teal disc beside it is already large, but the number itself is the thing people aim at. */ .header-phone { padding-block: 0.7rem; margin-block: -0.7rem; } /* The footer phone number, 107x29. Its own rule rather than the group above, because .site-footer .f-phone is (0,2,0) and the group's selectors do not reach it — it is not inside .f-inline, .f-where or .f-legal. */ .site-footer .f-phone { display: inline-block; padding-block: 0.5rem; margin-block: -0.5rem; } /* The mobile menu's phone and email, 22px tall in the one place on the site that is ONLY ever touched — the menu does not exist on a desktop. `.mobile-menu .mobile-menu-foot a` is (0,2,1) and sets `padding: 0` explicitly, so this restates the same specificity to beat it. Same trick as everywhere else: padding out, margin back, nothing moves. .mm-wa is excluded — it has its own rule above with the divider's left padding, and the group here would flatten it. */ .mobile-menu .mobile-menu-foot a:not(.mm-wa) { padding-block: 0.65rem; margin-block: -0.65rem; } /* 44 wide, up from 37. The home icon is 15px of artwork and the last control still short of the minimum. */ .nav a.nav-home { padding-inline: 0.95rem; margin-inline: -0.95rem; } /* =========================================================================== THE SHELL — moved out of index.php's