/* ============================================================
THE COACH GYM · v13 · ARTICLES, green system
Dark, cinematic, motion-first. Layered green palette.
Type: Bricolage Grotesque (monumental display)
Host Grotesk (UI/body) · Fragment Mono (indices/labels)
Noto Sans Thai (Thai, html[lang="th"])
Palette tokens aligned to css/home.css so the article pages
read as the same site as index.html / coach-house.html.
Fonts are self-hosted below (no Google Fonts CDN, CSP font-src 'self').
============================================================ */
/* ============================================================================
SELF-HOSTED FONTS (@font-face)
Mirrors css/home.css. Replaces the Google Fonts CDN formerly in every
article (offline + security: CSP font-src 'self').
Paths are relative to THIS file (css/style.css), which sits in /css/, so they
climb one level: ../assets/fonts/.woff2 (font files live in
v13/assets/fonts/). font-display: swap on every face.
============================================================================ */
/* ---------- Bricolage Grotesque (display), variable 200..800 ---------- */
@font-face {
font-family: "Bricolage Grotesque";
font-style: normal;
font-weight: 200 800;
font-stretch: 100%;
font-display: swap;
src: url("../assets/fonts/bricolage-grotesque-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: "Bricolage Grotesque";
font-style: normal;
font-weight: 200 800;
font-stretch: 100%;
font-display: swap;
src: url("../assets/fonts/bricolage-grotesque-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: "Bricolage Grotesque";
font-style: normal;
font-weight: 200 800;
font-stretch: 100%;
font-display: swap;
src: url("../assets/fonts/bricolage-grotesque-vietnamese.woff2") format("woff2");
unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB;
}
/* ---------- Host Grotesk (UI), variable 300..700, normal ---------- */
@font-face {
font-family: "Host Grotesk";
font-style: normal;
font-weight: 300 700;
font-display: swap;
src: url("../assets/fonts/host-grotesk-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: "Host Grotesk";
font-style: normal;
font-weight: 300 700;
font-display: swap;
src: url("../assets/fonts/host-grotesk-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;
}
/* ---------- Host Grotesk (UI), italic 400 ---------- */
@font-face {
font-family: "Host Grotesk";
font-style: italic;
font-weight: 400;
font-display: swap;
src: url("../assets/fonts/host-grotesk-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: "Host Grotesk";
font-style: italic;
font-weight: 400;
font-display: swap;
src: url("../assets/fonts/host-grotesk-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;
}
/* ---------- Fragment Mono (mono), normal 400 ---------- */
@font-face {
font-family: "Fragment Mono";
font-style: normal;
font-weight: 400;
font-display: swap;
src: url("../assets/fonts/fragment-mono-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: "Fragment Mono";
font-style: normal;
font-weight: 400;
font-display: swap;
src: url("../assets/fonts/fragment-mono-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;
}
/* ---------- Fragment Mono (mono), italic 400 ---------- */
@font-face {
font-family: "Fragment Mono";
font-style: italic;
font-weight: 400;
font-display: swap;
src: url("../assets/fonts/fragment-mono-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: "Fragment Mono";
font-style: italic;
font-weight: 400;
font-display: swap;
src: url("../assets/fonts/fragment-mono-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;
}
/* ---------- Noto Sans Thai (Thai script + Latin fallback), 400/500/600/700 ----------
One variable file per subset, reused across all four weights. */
@font-face {
font-family: "Noto Sans Thai"; font-style: normal; font-weight: 400; font-stretch: 100%; font-display: swap;
src: url("../assets/fonts/noto-sans-thai-thai.woff2") format("woff2");
unicode-range: U+02D7, U+0303, U+0331, U+0E01-0E5B, U+200C-200D, U+25CC;
}
@font-face {
font-family: "Noto Sans Thai"; font-style: normal; font-weight: 400; font-stretch: 100%; font-display: swap;
src: url("../assets/fonts/noto-sans-thai-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: "Noto Sans Thai"; font-style: normal; font-weight: 400; font-stretch: 100%; font-display: swap;
src: url("../assets/fonts/noto-sans-thai-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: "Noto Sans Thai"; font-style: normal; font-weight: 500; font-stretch: 100%; font-display: swap;
src: url("../assets/fonts/noto-sans-thai-thai.woff2") format("woff2");
unicode-range: U+02D7, U+0303, U+0331, U+0E01-0E5B, U+200C-200D, U+25CC;
}
@font-face {
font-family: "Noto Sans Thai"; font-style: normal; font-weight: 500; font-stretch: 100%; font-display: swap;
src: url("../assets/fonts/noto-sans-thai-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: "Noto Sans Thai"; font-style: normal; font-weight: 500; font-stretch: 100%; font-display: swap;
src: url("../assets/fonts/noto-sans-thai-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: "Noto Sans Thai"; font-style: normal; font-weight: 600; font-stretch: 100%; font-display: swap;
src: url("../assets/fonts/noto-sans-thai-thai.woff2") format("woff2");
unicode-range: U+02D7, U+0303, U+0331, U+0E01-0E5B, U+200C-200D, U+25CC;
}
@font-face {
font-family: "Noto Sans Thai"; font-style: normal; font-weight: 600; font-stretch: 100%; font-display: swap;
src: url("../assets/fonts/noto-sans-thai-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: "Noto Sans Thai"; font-style: normal; font-weight: 600; font-stretch: 100%; font-display: swap;
src: url("../assets/fonts/noto-sans-thai-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: "Noto Sans Thai"; font-style: normal; font-weight: 700; font-stretch: 100%; font-display: swap;
src: url("../assets/fonts/noto-sans-thai-thai.woff2") format("woff2");
unicode-range: U+02D7, U+0303, U+0331, U+0E01-0E5B, U+200C-200D, U+25CC;
}
@font-face {
font-family: "Noto Sans Thai"; font-style: normal; font-weight: 700; font-stretch: 100%; font-display: swap;
src: url("../assets/fonts/noto-sans-thai-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: "Noto Sans Thai"; font-style: normal; font-weight: 700; font-stretch: 100%; font-display: swap;
src: url("../assets/fonts/noto-sans-thai-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;
}
/* ---------- TOKENS (aligned to css/home.css :root) ---------- */
:root {
/* layered ground tones, faint green cast, never flat black */
--black: #080a06;
--ink: #0c0f08; /* section lift (home.css value) */
--ink-2: #10140c;
--card: #141a0e;
--forest: #15240d; /* deep forest flood section */
--forest-2: #1f3614; /* forest gradient partner */
/* electric lime accent + range */
--lime: #a6f035;
--lime-hi: #c2ff5e;
--lime-deep: #34520f;
--lime-glow: rgba(166,240,53,.14);
/* neutrals, warm (home.css scale) */
--bone: #eceee0; /* monumental display, brightest */
--white: #d6dcc9; /* body text bright (articles-local) */
--grey: #9aa492; /* body text muted (home --mut) */
--dim: #828c74; /* labels, meta (home --mut-2) */
--line: rgba(236,238,224,.10);
--line-2: rgba(236,238,224,.20);
--line-lime: rgba(166,240,53,.22);
--font-disp: "Bricolage Grotesque", "Noto Sans Thai", "Host Grotesk", sans-serif;
--font-ui: "Host Grotesk", "Noto Sans Thai", system-ui, sans-serif;
--font-mono: "Fragment Mono", ui-monospace, monospace;
--wrap: 1480px;
--pad: clamp(1.15rem, 5vw, 5rem);
--sec: clamp(5.5rem, 13vh, 11rem);
--ease: cubic-bezier(.16,1,.3,1);
--ease-2: cubic-bezier(.65,.05,.36,1);
--mega-hero: clamp(2.5rem, 7.6vw, 8rem);
--mega-sec: clamp(2.1rem, 5.7vw, 6rem);
--mega-cine: clamp(1.9rem, 4.7vw, 4.9rem);
--prog-name: clamp(2.4rem, 6.6vw, 7.4rem);
}
/* ---------- RESET ---------- */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }
body {
background: var(--black);
color: var(--white);
font-family: var(--font-ui);
font-size: clamp(1rem, .55vw + .85rem, 1.18rem);
line-height: 1.62;
font-weight: 400;
font-optical-sizing: auto;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
overflow-x: clip;
}
img, video { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; cursor: pointer; background: none; border: 0; }
ul, ol { list-style: none; }
:focus-visible { outline: 2px solid var(--lime); outline-offset: 3px; border-radius: 2px; }
::selection { background: var(--lime); color: var(--black); }
.skip {
position: fixed; top: -100px; left: 1rem; z-index: 200;
background: var(--lime); color: var(--black);
padding: .7rem 1.2rem; font: 600 .85rem var(--font-ui);
border-radius: 6px; transition: top .25s var(--ease);
}
.skip:focus { top: 1rem; }
/* ---------- LAYOUT ---------- */
.wrap { width: 100%; max-width: var(--wrap); margin-inline: auto; padding-inline: var(--pad); }
/* ---------- TYPE: MONUMENTAL ---------- */
.mega {
font-family: var(--font-disp);
font-weight: 800;
text-transform: uppercase;
letter-spacing: -.018em;
line-height: .96;
color: var(--bone);
}
.mega--hero { font-size: var(--mega-hero); }
.mega--sec { font-size: var(--mega-sec); }
.mega--cine { font-size: var(--mega-cine); line-height: 1.02; }
.acc { color: var(--lime); }
.mega em, em.acc { font-style: normal; }
/* masked line reveal */
.line { display: block; overflow: hidden; padding-block: .14em; margin-block: -.14em; }
.line > span { display: block; will-change: transform; }
.js [data-lines] .line > span { transform: translateY(118%); }
.js [data-lines].is-in .line > span {
transform: translateY(0);
transition: transform 1s var(--ease);
}
.js [data-lines].is-in .line:nth-child(2) > span { transition-delay: .08s; }
.js [data-lines].is-in .line:nth-child(3) > span { transition-delay: .16s; }
.js [data-lines].is-in .line:nth-child(4) > span { transition-delay: .24s; }
/* generic reveal */
.js [data-reveal] {
opacity: 0; transform: translateY(30px);
transition: opacity .9s var(--ease), transform .9s var(--ease);
}
.js [data-reveal].is-in { opacity: 1; transform: none; }
/* ---------- KICKER ---------- */
.kick {
display: inline-flex; align-items: center; gap: .7rem;
font-family: var(--font-mono);
font-size: .78rem; letter-spacing: .13em; text-transform: uppercase;
color: var(--dim);
}
.kick i { font-style: normal; color: var(--lime); }
.kick::before { content: ""; width: 2.4rem; height: 1px; background: var(--lime); opacity: .55; }
/* ---------- SECTION HEADS ---------- */
.sec__head { margin-bottom: clamp(2.8rem, 6vw, 5.5rem); max-width: 62rem; }
.sec__head .kick { margin-bottom: 1.6rem; }
.sec__head .mega { margin-bottom: 1.6rem; }
.sec__lead, .show__lead { color: var(--grey); max-width: 38rem; font-size: 1.05rem; }
/* ============================================================
PRELOADER
============================================================ */
.load {
position: fixed; inset: 0; z-index: 160;
background: var(--black);
display: grid; place-items: center;
transition: transform 1s var(--ease) .15s, opacity .6s ease .6s;
}
.load.is-done { transform: translateY(-101%); opacity: 0; pointer-events: none; }
.load__inner { display: flex; flex-direction: column; align-items: center; gap: 1.6rem; }
.load__logo { width: clamp(108px, 17vw, 168px); opacity: .96; }
.load__bar { width: clamp(150px, 26vw, 250px); height: 2px; background: var(--line-2); overflow: hidden; }
.load__bar i {
display: block; height: 100%; width: 100%;
background: var(--lime);
transform: scaleX(0); transform-origin: left;
transition: transform 1.15s var(--ease-2);
}
.load.is-fill .load__bar i { transform: scaleX(1); }
.load__tag {
font-family: var(--font-mono); font-size: .72rem;
letter-spacing: .26em; text-transform: uppercase; color: var(--dim);
}
/* ============================================================
NAV
============================================================ */
.nav {
position: fixed; inset: 0 0 auto; z-index: 120;
padding: clamp(1rem, 2vw, 1.7rem) 0;
transform: translateY(0); opacity: 1; pointer-events: auto;
transition:
background .5s var(--ease),
backdrop-filter .5s var(--ease),
padding .5s var(--ease),
transform .65s var(--ease),
opacity .5s var(--ease),
border-color .5s var(--ease);
}
/* Glass state — appears once hero is past. */
.nav.is-stuck {
background: rgba(8,10,6,.55);
backdrop-filter: blur(22px) saturate(1.25);
-webkit-backdrop-filter: blur(22px) saturate(1.25);
padding-block: .8rem;
border-bottom: 1px solid rgba(236,238,224,.06);
box-shadow: 0 12px 32px -22px rgba(0,0,0,.7);
}
/* Floating state — hidden over hero. JS adds this initially when a hero exists. */
.nav.is-float {
transform: translateY(-110%);
opacity: 0;
pointer-events: none;
background: transparent;
backdrop-filter: none; -webkit-backdrop-filter: none;
border-bottom-color: transparent; box-shadow: none;
}
/* Scroll-down hide overrides — keeps the slide-up feel after nav has revealed. */
.nav.is-hide { transform: translateY(-110%); opacity: 0; pointer-events: none; }
.nav__row {
position: relative;
width: 100%; max-width: var(--wrap); margin-inline: auto;
padding-inline: var(--pad);
display: grid;
grid-template-columns: 1fr auto 1fr;
align-items: center;
gap: clamp(1rem, 2.5vw, 2.5rem);
}
.nav__brand {
justify-self: center;
display: inline-flex; align-items: center;
}
.nav__brand img {
height: clamp(40px, 4.4vw, 52px); width: auto;
transition: transform .4s var(--ease);
}
.nav__brand:hover img { transform: scale(1.05); }
.nav__set { display: flex; gap: clamp(1.1rem, 2.4vw, 2.4rem); }
.nav__set--l { justify-self: start; }
.nav__end {
justify-self: end;
display: flex; align-items: center;
gap: clamp(1rem, 2vw, 2rem);
}
.nav__set a {
font-size: .92rem; font-weight: 500; color: var(--white);
display: inline-flex; align-items: flex-start; gap: .15rem;
transition: color .25s var(--ease);
}
.nav__set sup { font-family: var(--font-mono); font-size: .58rem; color: var(--lime); font-weight: 400; }
.nav__set a:hover { color: var(--lime); }
.nav__cta {
font-size: .86rem; font-weight: 600; letter-spacing: .01em; color: var(--bone);
padding: .62rem 1.25rem;
border: 1px solid var(--line-2); border-radius: 100px;
transition: background .3s var(--ease), color .3s var(--ease), border-color .3s var(--ease);
}
.nav__cta:hover { background: var(--lime); border-color: var(--lime); color: var(--black); }
/* ---------- LANG TOGGLE (EN / TH) : mirrors home.css .nav__lang ---------- */
.nav__lang {
display: inline-flex; align-items: center;
border: 1px solid var(--line-lime); border-radius: 100px; overflow: hidden;
}
.nav__lang button {
font-family: var(--font-ui); font-size: .72rem; font-weight: 600; letter-spacing: .02em;
color: var(--grey); padding: .34rem .72rem; border: 0; background: transparent;
transition: background .2s var(--ease), color .2s var(--ease);
}
.nav__lang button:hover { color: var(--bone); }
.nav__lang button.is-on { background: var(--lime); color: var(--black); }
.nav__burger { display: none; }
/* ---------- MOBILE MENU ---------- */
.menu {
position: fixed; inset: 0; z-index: 115;
background: var(--forest);
padding: clamp(5.5rem,16vw,8rem) var(--pad) clamp(2rem,6vw,3rem);
display: flex; flex-direction: column; justify-content: space-between;
clip-path: inset(0 0 100% 0);
transition: clip-path .7s var(--ease);
pointer-events: none;
}
.menu.is-open { clip-path: inset(0 0 0% 0); pointer-events: auto; }
.menu__nav { display: flex; flex-direction: column; }
.menu__nav a {
font-family: var(--font-disp); font-weight: 800; text-transform: uppercase;
font-size: clamp(1.9rem, 8vw, 3.1rem); line-height: 1.2; letter-spacing: -.02em;
color: var(--bone);
display: flex; align-items: baseline; gap: 1rem;
border-bottom: 1px solid var(--line);
padding: .42em 0;
transition: color .25s var(--ease), padding-left .35s var(--ease);
}
.menu__nav a:hover { color: var(--lime); padding-left: .6rem; }
.menu__i { font-family: var(--font-mono); font-size: .8rem; color: var(--lime); }
.menu__foot { display: flex; flex-direction: column; gap: 1rem; }
.menu__foot p { font-family: var(--font-mono); font-size: .8rem; color: var(--grey); }
/* ============================================================
BUTTONS
============================================================ */
.btn {
display: inline-flex; align-items: center; gap: .6rem;
font-weight: 600; font-size: .95rem; letter-spacing: .01em;
padding: 1.05rem 1.7rem;
border-radius: 100px;
border: 1px solid transparent;
transition: background .3s var(--ease), color .3s var(--ease),
border-color .3s var(--ease), transform .3s var(--ease);
}
.btn__a { width: 1.05em; height: 1.05em; position: relative; display: inline-block; }
.btn__a::after {
content: "\2192"; position: absolute; inset: 0;
display: grid; place-items: center; font-size: 1.15em; line-height: 1;
transition: transform .35s var(--ease);
}
.btn:hover .btn__a::after { transform: translateX(.22em); }
.btn--lime { background: var(--lime); color: var(--black); }
.btn--lime:hover { background: var(--lime-hi); transform: translateY(-2px); }
.btn--ghost { border-color: var(--line-2); color: var(--bone); }
.btn--ghost:hover { background: var(--bone); color: var(--black); border-color: var(--bone); }
.btn--dark { background: var(--black); color: var(--lime); }
.btn--dark:hover { background: #000; transform: translateY(-2px); }
.btn--block { width: 100%; justify-content: center; }
/* ---------- CUSTOM CURSOR ---------- */
.cur {
position: fixed; top: 0; left: 0;
width: 22px; height: 22px;
border: 1px solid var(--lime); border-radius: 50%;
pointer-events: none; z-index: 200; opacity: 0;
transition: width .25s var(--ease), height .25s var(--ease),
background .25s var(--ease), border-color .25s var(--ease),
opacity .25s var(--ease);
will-change: transform;
}
.cur.is-on { opacity: 1; }
.cur.is-link {
width: 54px; height: 54px;
background: var(--lime); border-color: var(--lime);
mix-blend-mode: difference;
}
body.has-cur, body.has-cur a, body.has-cur button, body.has-cur [role="button"] { cursor: none; }
body.has-cur input, body.has-cur textarea, body.has-cur select { cursor: text; }
@media (hover: none), (max-width: 920px) { .cur { display: none !important; } body.has-cur { cursor: auto; } }
@media (prefers-reduced-motion: reduce) { .cur { display: none !important; } }
.arrowlink {
font-family: var(--font-mono); font-size: .82rem;
letter-spacing: .04em; color: var(--white);
display: inline-flex; align-items: center; gap: .45rem;
padding-bottom: 3px;
border-bottom: 1px solid var(--line-2);
transition: color .25s var(--ease), border-color .25s var(--ease);
}
.arrowlink::after { content: "\2197"; transition: transform .3s var(--ease); }
.arrowlink:hover { color: var(--lime); border-color: var(--lime); }
.arrowlink:hover::after { transform: translate(2px,-2px); }
/* ============================================================
HERO (type-led, no video cover)
============================================================ */
.hero {
position: relative;
min-height: 100svh;
display: flex; flex-direction: column;
padding: clamp(6rem,12vh,8.5rem) 0 clamp(1.6rem,4vh,2.4rem);
overflow: hidden;
background: var(--black);
}
.hero__atmos { position: absolute; inset: 0; z-index: 0; overflow: hidden; }
.hero__bed {
position: absolute; inset: -6% 0; width: 100%; height: 112%;
object-fit: cover; object-position: center 38%;
filter: grayscale(.25) contrast(1.05) brightness(.78);
}
.hero__veil {
position: absolute; inset: 0;
background:
radial-gradient(140% 100% at 50% 50%, rgba(8,10,6,.18) 0%, rgba(8,10,6,.7) 60%, rgba(8,10,6,.92) 100%),
linear-gradient(180deg, rgba(8,10,6,.86) 0%, rgba(8,10,6,.32) 30%, rgba(8,10,6,.36) 64%, rgba(8,10,6,.94) 100%),
radial-gradient(130% 95% at 12% 108%, rgba(31,54,20,.78) 0%, transparent 58%);
}
.hero__glow {
position: absolute; width: 92vw; height: 92vw;
max-width: 1180px; max-height: 1180px;
right: -18vw; top: -26vw;
background: radial-gradient(circle, var(--lime-glow) 0%, transparent 64%);
mix-blend-mode: screen; opacity: .85;
}
.hero__grain {
position: absolute; inset: 0; opacity: .42; mix-blend-mode: overlay;
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='3'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.5'/%3E%3C/svg%3E");
pointer-events: none;
}
.hero > .wrap { position: relative; z-index: 2; }
.hero__top { display: flex; justify-content: space-between; gap: 1rem; }
.tag {
font-family: var(--font-mono); font-size: .74rem;
letter-spacing: .1em; text-transform: uppercase; color: var(--grey);
}
.tag--acc { color: var(--lime); }
.hero__core {
flex: 1; display: flex; flex-direction: column;
justify-content: center; align-items: center; text-align: center;
padding-block: 3vh;
}
.hero__kick {
font-family: var(--font-mono); font-size: .82rem;
letter-spacing: .2em; text-transform: uppercase; color: var(--lime);
margin-bottom: clamp(1rem,2vw,1.6rem);
display: flex; align-items: center; gap: .8rem;
}
.hero__kick::before { content: ""; width: 2.6rem; height: 1px; background: var(--lime); }
.mega--hero { letter-spacing: -.022em; text-align: center; max-width: 22ch; }
.hero__base {
display: flex; flex-direction: column; align-items: center;
gap: 1.4rem;
margin-top: clamp(1.8rem,3.5vw,2.8rem);
}
.hero__sub { max-width: 38rem; color: var(--grey); font-size: 1.05rem; text-align: center; }
.hero__act { display: flex; gap: .8rem; flex-wrap: wrap; justify-content: center; }
.hero__foot {
position: relative; z-index: 2;
display: flex; align-items: flex-end; justify-content: space-between;
gap: 2rem; padding-top: 1.6rem;
border-top: 1px solid var(--line);
}
.hero__facts { display: flex; gap: clamp(1.6rem,4vw,4rem); flex-wrap: wrap; }
.hero__facts li { display: flex; flex-direction: column; gap: .25rem; }
.hero__facts b {
font-family: var(--font-disp); font-weight: 800; font-size: clamp(1.7rem,2.4vw,2.3rem);
color: var(--lime); line-height: 1; letter-spacing: -.02em;
}
.hero__facts span {
font-family: var(--font-mono); font-size: .73rem;
letter-spacing: .04em; color: var(--dim);
}
.hero__scroll { display: flex; flex-direction: column; align-items: center; gap: .55rem; }
.hero__scroll span {
font-family: var(--font-mono); font-size: .66rem;
letter-spacing: .2em; text-transform: uppercase; color: var(--dim);
}
.hero__scroll i { width: 1px; height: 40px; background: var(--line-2); position: relative; overflow: hidden; }
.hero__scroll i::after {
content: ""; position: absolute; inset: 0; background: var(--lime);
animation: scrolldrop 2s var(--ease) infinite;
}
@keyframes scrolldrop {
0% { transform: translateY(-100%); }
60%,100% { transform: translateY(100%); }
}
/* ============================================================
TICKER
============================================================ */
.ticker {
border-block: 1px solid var(--line);
padding: clamp(.9rem,1.6vw,1.3rem) 0;
overflow: hidden;
background: var(--ink);
}
.ticker__track { display: flex; align-items: center; gap: 2rem; width: max-content; will-change: transform; }
.ticker__track span {
font-family: var(--font-mono); font-size: clamp(.82rem,1.3vw,1rem);
letter-spacing: .04em; text-transform: uppercase; color: var(--white);
white-space: nowrap;
}
.ticker__track .dot { color: var(--lime); }
/* ============================================================
MANIFESTO (deep forest flood)
============================================================ */
.manifesto {
padding-block: var(--sec);
background: var(--forest);
position: relative; overflow: hidden;
}
.manifesto::before {
content: ""; position: absolute; width: 70vw; height: 70vw;
max-width: 800px; max-height: 800px;
left: 50%; top: -30%; transform: translateX(-50%);
background: radial-gradient(circle, var(--lime-glow) 0%, transparent 66%);
}
.manifesto::after {
content: ""; position: absolute; inset: 0; pointer-events: none; opacity: .22;
mix-blend-mode: overlay;
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='3'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.45'/%3E%3C/svg%3E");
}
/* Reusable section chip — small floating glass indicator. */
.chip {
display: inline-flex; align-items: center; gap: .65rem;
padding: .5rem .9rem; border-radius: 100px;
background: rgba(8,10,6,.4);
backdrop-filter: blur(18px) saturate(1.4);
-webkit-backdrop-filter: blur(18px) saturate(1.4);
border: 1px solid rgba(236,238,224,.12);
box-shadow: 0 8px 24px -12px rgba(0,0,0,.55), inset 0 1px 0 rgba(255,255,255,.06);
font-family: var(--font-mono); font-size: .72rem;
letter-spacing: .1em; text-transform: uppercase;
}
.chip__dot {
width: 6px; height: 6px; border-radius: 50%;
background: var(--lime);
box-shadow: 0 0 8px rgba(166,240,53,.7);
animation: chipPulse 2.4s var(--ease) infinite;
}
@keyframes chipPulse {
0%, 100% { opacity: 1; transform: scale(1); }
50% { opacity: .55; transform: scale(.78); }
}
.chip__n { color: var(--lime); }
.chip__l { color: var(--bone); }
.chip--corner {
position: absolute; top: clamp(1.6rem, 4vh, 3rem); right: clamp(1.6rem, 4vw, 3rem);
z-index: 3;
}
.manifesto__ghost {
position: absolute; right: -.06em; bottom: -.30em;
font-family: var(--font-disp); font-weight: 800;
font-size: clamp(18rem, 40vw, 36rem); line-height: .8;
letter-spacing: -.05em;
-webkit-text-stroke: 1.5px rgba(236,238,224,.16);
color: transparent;
pointer-events: none; user-select: none;
z-index: 1;
}
.manifesto .wrap {
position: relative; z-index: 2;
display: flex; flex-direction: column; align-items: center; text-align: center;
}
.manifesto .kick { margin-bottom: 2.4rem; }
.manifesto__line {
font-family: var(--font-disp); font-weight: 800; text-transform: uppercase;
font-size: clamp(1.8rem,4.6vw,4.4rem); line-height: 1.06; letter-spacing: -.02em;
color: var(--bone); max-width: 22ch;
}
.manifesto__line em { font-style: normal; }
.manifesto__note { margin-top: 2.4rem; max-width: 44rem; color: var(--white); font-size: 1.08rem; }
/* ============================================================
THE BRAND + STATS
============================================================ */
.brand { padding-block: var(--sec); background: var(--black); }
.brand__grid {
display: grid; grid-template-columns: 1.05fr .95fr;
gap: clamp(2.5rem,5vw,6rem); align-items: center;
margin-bottom: clamp(3.5rem,7vw,6rem);
}
.brand__text .kick { margin-bottom: 1.6rem; }
.brand__text .mega { margin-bottom: 1.8rem; }
.brand__body { display: flex; flex-direction: column; gap: 1.1rem; color: var(--grey); }
.brand__media { position: relative; border-radius: 10px; overflow: hidden; }
.brand__media img {
width: 100%; aspect-ratio: 4/3.4; object-fit: cover;
transition: transform 1.2s var(--ease);
}
.brand__media:hover img { transform: scale(1.04); }
.brand__cap {
position: absolute; left: 1rem; bottom: 1rem;
font-family: var(--font-mono); font-size: .72rem; letter-spacing: .05em;
color: var(--bone); background: rgba(8,10,6,.62);
backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px);
padding: .4rem .7rem; border-radius: 5px;
}
.stats { display: grid; grid-template-columns: repeat(4,1fr); border-top: 1px solid var(--line-2); }
.stats li {
padding: clamp(1.6rem,3vw,2.6rem) clamp(1.1rem,1.8vw,1.9rem) 0;
border-right: 1px solid var(--line);
}
.stats li:first-child { padding-left: 0; }
.stats li:last-child { border-right: 0; padding-right: 0; }
.stats__n {
display: block; font-family: var(--font-disp); font-weight: 800;
font-size: clamp(2.4rem,5vw,4.4rem); line-height: 1; color: var(--bone);
letter-spacing: -.03em;
}
.stats__l { display: block; margin-top: .7rem; font-size: .92rem; color: var(--dim); max-width: 14rem; }
/* ============================================================
THE METHOD
============================================================ */
.method { padding-block: var(--sec); background: var(--ink); }
.method__grid {
display: grid; grid-template-columns: minmax(280px, .7fr) 1fr;
gap: clamp(2rem, 4vw, 4.5rem); align-items: start;
}
.method__media {
position: sticky; top: clamp(6rem, 12vh, 10rem);
border-radius: 12px; overflow: hidden;
aspect-ratio: 3/4; background: var(--card);
}
.method__media img {
width: 100%; height: 100%; object-fit: cover;
filter: grayscale(.3) contrast(1.05) brightness(.92);
transition: transform 1.4s var(--ease);
}
.method__media:hover img { transform: scale(1.04); }
.method__cap {
position: absolute; left: 1rem; bottom: 1rem; right: 1rem;
font-family: var(--font-mono); font-size: .72rem;
letter-spacing: .12em; text-transform: uppercase; color: var(--bone);
background: linear-gradient(0deg, rgba(8,10,6,.78), transparent);
padding: 2.2rem .4rem .2rem; pointer-events: none;
}
@media (max-width: 880px) {
.method__grid { grid-template-columns: 1fr; }
.method__media { position: static; aspect-ratio: 16/10; max-height: 380px; }
}
.steps { border-top: 1px solid var(--line-2); }
.step {
display: grid; grid-template-columns: auto 1fr;
gap: clamp(1.5rem,5vw,5rem);
padding: clamp(1.8rem,3.4vw,3rem) 0;
border-bottom: 1px solid var(--line);
align-items: baseline;
transition: padding-left .4s var(--ease);
}
.step:hover { padding-left: clamp(0px,1.5vw,1.4rem); }
.step__n {
font-family: var(--font-disp); font-weight: 800;
font-size: clamp(1.9rem,3.6vw,3rem); color: var(--lime); line-height: 1;
letter-spacing: -.03em;
}
.step__c { display: grid; grid-template-columns: 1fr 1.5fr; gap: clamp(1rem,3vw,4rem); align-items: baseline; }
.step__c h3 { font-size: clamp(1.3rem,2vw,1.85rem); font-weight: 600; color: var(--bone); letter-spacing: -.01em; }
.step__c p { color: var(--grey); }
/* ============================================================
PROGRAMS SHOWCASE (pinned, scroll-driven)
============================================================ */
.show { padding-top: var(--sec); background: var(--black); position: relative; }
.show__head { margin-bottom: clamp(2.5rem,5vw,4.5rem); max-width: 62rem; position: relative; z-index: 2; }
.show__head .kick { margin-bottom: 1.6rem; }
.show__head .mega { margin-bottom: 1.6rem; }
.show::before {
content: ""; position: absolute; width: 60vw; height: 60vw;
max-width: 760px; max-height: 760px; right: -12vw; top: 4vh;
background: radial-gradient(circle, var(--lime-glow) 0%, transparent 66%);
z-index: 0;
}
.show__scroll { position: relative; height: 560vh; }
.show__stage { position: sticky; top: 0; height: 100svh; overflow: hidden; }
.show__track { position: absolute; inset: 0; }
.prog { position: absolute; inset: 0; opacity: 0; pointer-events: none; }
.prog.is-active { opacity: 1; pointer-events: auto; }
.prog__media { position: absolute; inset: 0; overflow: hidden; }
.prog__media img {
width: 100%; height: 100%; object-fit: cover;
transform: scale(1.18); transition: transform 8s var(--ease), filter .8s var(--ease);
filter: grayscale(.22) contrast(1.08) brightness(.78) saturate(.92);
}
.prog.is-active .prog__media img { transform: scale(1.04); }
.prog__veil {
position: absolute; inset: 0;
background:
linear-gradient(180deg, rgba(8,10,6,.92) 0%, rgba(8,10,6,.32) 14%, rgba(8,10,6,.0) 34%, rgba(8,10,6,.18) 56%, rgba(8,10,6,.86) 82%, var(--black) 100%),
linear-gradient(90deg, rgba(8,10,6,.55) 0%, rgba(8,10,6,.0) 28%, rgba(8,10,6,.0) 72%, rgba(8,10,6,.45) 100%),
radial-gradient(120% 90% at 50% 100%, rgba(21,36,13,.5) 0%, transparent 60%);
}
.prog__veil::after {
content: ""; position: absolute; inset: 0; pointer-events: none;
opacity: .18; mix-blend-mode: overlay;
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='3'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.5'/%3E%3C/svg%3E");
}
.prog__veil::before {
content: ""; position: absolute; left: 0; right: 0; top: 0; height: 4px;
background: linear-gradient(90deg, transparent 0%, rgba(166,240,53,.42) 50%, transparent 100%);
opacity: .6;
}
.prog__inner {
position: absolute; left: 50%; bottom: clamp(5rem,12vh,9rem);
transform: translateX(-50%); width: 100%;
}
.prog__cat {
display: inline-block;
font-family: var(--font-mono); font-size: .78rem;
letter-spacing: .14em; text-transform: uppercase; color: var(--lime);
margin-bottom: .9rem;
}
.prog__name {
font-family: var(--font-disp); font-weight: 800; text-transform: uppercase;
font-size: var(--prog-name); line-height: .94; color: var(--bone);
letter-spacing: -.025em; max-width: 16ch;
}
.prog__desc { margin-top: 1.3rem; max-width: 34rem; color: var(--white); font-size: 1.04rem; }
.prog__meta {
display: inline-block; margin-top: 1.1rem;
font-family: var(--font-mono); font-size: .76rem; letter-spacing: .04em;
color: var(--grey);
border-top: 1px solid var(--line-2); padding-top: .7rem;
}
.prog__cat, .prog__name, .prog__desc, .prog__meta { opacity: 0; transform: translateY(34px); }
.prog.is-active .prog__cat { opacity: 1; transform: none; transition: opacity .7s var(--ease) .1s, transform .8s var(--ease) .1s; }
.prog.is-active .prog__name { opacity: 1; transform: none; transition: opacity .8s var(--ease) .18s, transform .9s var(--ease) .18s; }
.prog.is-active .prog__desc { opacity: 1; transform: none; transition: opacity .8s var(--ease) .28s, transform .9s var(--ease) .28s; }
.prog.is-active .prog__meta { opacity: 1; transform: none; transition: opacity .8s var(--ease) .36s, transform .9s var(--ease) .36s; }
/* HUD */
.show__hud {
position: absolute; left: 50%; bottom: clamp(1.6rem,4vh,2.6rem);
transform: translateX(-50%);
width: 100%; max-width: var(--wrap); padding-inline: var(--pad);
display: flex; align-items: center; gap: 1.4rem;
}
.show__idx { font-family: var(--font-mono); font-size: .82rem; color: var(--grey); display: inline-flex; gap: .35rem; align-items: baseline; }
.show__idx b { color: var(--bone); font-weight: 400; font-size: 1rem; }
.show__idx i { font-style: normal; color: var(--dim); }
.show__bar { flex: 1; display: flex; gap: 6px; }
.show__bar i { flex: 1; height: 2px; background: var(--line-2); position: relative; overflow: hidden; }
.show__bar i::after {
content: ""; position: absolute; inset: 0; background: var(--lime);
transform: scaleX(0); transform-origin: left;
transition: transform .4s var(--ease);
}
.show__bar i.is-full::after { transform: scaleX(1); }
.show__bar i.is-on::after { transform: scaleX(var(--fill,0)); transition: none; }
.show__cat {
font-family: var(--font-mono); font-size: .8rem;
letter-spacing: .1em; text-transform: uppercase; color: var(--lime);
min-width: 9rem; text-align: right;
}
/* disciplines */
.disc { margin-top: clamp(3rem,6vw,5.5rem); position: relative; z-index: 2; }
.disc__kick {
font-family: var(--font-mono); font-size: .78rem;
letter-spacing: .14em; text-transform: uppercase; color: var(--dim);
display: block; margin-bottom: 1.6rem;
}
.disc__grid { display: grid; grid-template-columns: repeat(4,1fr); border-top: 1px solid var(--line-2); }
.disc__grid li { padding: 1.8rem clamp(1.1rem,1.8vw,1.9rem); border-right: 1px solid var(--line); }
.disc__grid li:first-child { padding-left: 0; }
.disc__grid li:last-child { border-right: 0; padding-right: 0; }
.disc__n { display: block; font-size: 1.3rem; font-weight: 600; color: var(--bone); margin-bottom: .5rem; }
.disc__t { display: block; font-size: .92rem; color: var(--dim); }
/* ============================================================
MEMBERSHIP
============================================================ */
.member { padding-block: var(--sec); background: var(--ink); }
.member__strip {
position: relative; overflow: hidden;
border-radius: 14px;
aspect-ratio: 21/9;
margin: clamp(2rem, 4vw, 3.4rem) 0 clamp(2rem, 4vw, 3rem);
background: var(--black);
}
.member__strip img {
width: 100%; height: 100%; object-fit: cover;
filter: grayscale(.15) contrast(1.05) brightness(.84);
transition: transform 1.5s var(--ease);
}
.member__strip:hover img { transform: scale(1.04); }
.member__strip::after {
content: ""; position: absolute; inset: 0;
background:
linear-gradient(90deg, rgba(8,10,6,.86) 0%, rgba(8,10,6,.18) 48%, rgba(8,10,6,.0) 70%, rgba(8,10,6,.55) 100%);
}
.member__strip-cap {
position: absolute; left: clamp(1.5rem, 3.4vw, 3rem); bottom: clamp(1.3rem, 3vw, 2.4rem);
z-index: 2; max-width: 28rem;
}
.member__strip-lab {
display: block; font-family: var(--font-mono); font-size: .74rem;
letter-spacing: .14em; text-transform: uppercase; color: var(--lime);
margin-bottom: .8rem;
}
.member__strip-line {
display: block; font-family: var(--font-disp); font-weight: 800;
font-size: clamp(1.6rem, 3.2vw, 2.6rem); line-height: 1.05;
color: var(--bone); letter-spacing: -.02em; text-transform: uppercase;
}
@media (max-width: 720px) {
.member__strip { aspect-ratio: 4/5; }
}
.plans { display: grid; grid-template-columns: 1fr 1.7fr; gap: clamp(1rem,2vw,1.6rem); margin-bottom: 1.6rem; }
.plan {
background: rgba(26,32,18,.55);
backdrop-filter: blur(14px) saturate(1.1);
-webkit-backdrop-filter: blur(14px) saturate(1.1);
border: 1px solid var(--line);
border-radius: 14px; padding: clamp(1.6rem,2.6vw,2.4rem);
display: flex; flex-direction: column;
transition: border-color .35s var(--ease), transform .35s var(--ease), background .35s var(--ease);
position: relative;
}
.plan::before {
content: ""; position: absolute; inset: 0; border-radius: inherit; pointer-events: none;
background: linear-gradient(135deg, rgba(255,255,255,.04) 0%, transparent 36%, transparent 64%, rgba(255,255,255,.02) 100%);
}
/* Hover lift for plain plans only — keep the lime gradient untouched on .plan--feature */
.plan:hover { border-color: var(--line-2); transform: translateY(-3px); }
.plan:not(.plan--feature):hover { background: rgba(26,32,18,.7); }
.plan--feature:hover {
/* Re-assert the lime gradient and brighten subtly on hover */
background:
radial-gradient(120% 130% at 100% 0%, var(--lime-hi) 0%, transparent 58%),
linear-gradient(158deg, var(--lime) 0%, var(--lime-deep) 132%);
border-color: transparent;
filter: brightness(1.04) saturate(1.06);
box-shadow: 0 20px 50px -22px rgba(166,240,53,.35);
}
.plan__col { display: grid; grid-template-columns: repeat(3,1fr); gap: clamp(1rem,2vw,1.6rem); }
.plan--feature {
background:
radial-gradient(120% 130% at 100% 0%, var(--lime-hi) 0%, transparent 58%),
linear-gradient(158deg, var(--lime) 0%, var(--lime-deep) 132%);
border-color: transparent; justify-content: space-between;
color: var(--black);
}
.plan__top { margin-bottom: 1.4rem; }
.plan__flag {
display: inline-block; margin-bottom: 1.1rem;
font-family: var(--font-mono); font-size: .68rem;
letter-spacing: .12em; text-transform: uppercase;
color: var(--lime); background: var(--black);
padding: .36rem .72rem; border-radius: 100px;
}
.plan__name { font-size: clamp(1.4rem,2.2vw,2rem); font-weight: 600; color: var(--bone); letter-spacing: -.015em; line-height: 1.1; }
.plan--feature .plan__name { font-size: clamp(1.7rem,2.6vw,2.4rem); color: var(--black); }
.plan__kind { display: block; margin-top: .4rem; font-family: var(--font-mono); font-size: .78rem; color: var(--dim); }
.plan--feature .plan__kind { color: rgba(8,10,6,.7); }
.plan__price {
font-family: var(--font-disp); font-weight: 800; font-size: clamp(2.6rem,4.6vw,3.9rem);
color: var(--black); line-height: 1; margin: .5rem 0 1rem; letter-spacing: -.03em;
}
.plan__desc { color: rgba(8,10,6,.82); font-size: .98rem; margin-bottom: 1.6rem; }
.plan__tiers { margin-top: auto; }
.plan__tiers li {
display: flex; justify-content: space-between; align-items: baseline;
padding: .72rem 0; border-bottom: 1px solid var(--line); font-size: .96rem;
gap: .8rem;
}
.plan__tiers li:last-child { border-bottom: 0; }
.plan__tiers span { color: var(--grey); white-space: nowrap; }
.plan__tiers b { font-family: var(--font-mono); font-weight: 400; color: var(--bone); font-size: 1rem; white-space: nowrap; }
.plan__col .plan { align-self: start; }
.plan__note { display: block; margin-top: .9rem; font-family: var(--font-mono); font-size: .74rem; color: var(--dim); }
.member__foot {
display: grid; grid-template-columns: 1fr 1fr; gap: clamp(1.4rem,3vw,3rem);
align-items: start; border-top: 1px solid var(--line-2); padding-top: 1.8rem;
}
.addon__l {
display: block; font-family: var(--font-mono); font-size: .8rem;
letter-spacing: .04em; color: var(--lime); margin-bottom: 1rem; text-transform: uppercase;
}
.addon__t { display: flex; flex-wrap: wrap; gap: 1.4rem; }
.addon__t span { display: flex; flex-direction: column; font-size: .82rem; color: var(--dim); }
.addon__t b { font-family: var(--font-disp); font-weight: 800; font-size: 1.5rem; color: var(--bone); letter-spacing: -.02em; }
.member__note { color: var(--dim); font-size: .9rem; line-height: 1.7; }
/* ============================================================
CINEMATIC BREAK (relocated hero film)
============================================================ */
.cine {
position: relative; min-height: 92svh;
display: grid; place-items: center; overflow: hidden; text-align: center;
}
.cine__video {
position: absolute; inset: -8% 0; width: 100%; height: 116%; object-fit: cover;
}
.cine__veil {
position: absolute; inset: 0;
background:
linear-gradient(180deg, var(--black) 0%, rgba(8,10,6,.42) 28%, rgba(8,10,6,.5) 70%, var(--black) 100%),
rgba(21,36,13,.4);
}
.cine__inner { position: relative; z-index: 2; display: flex; flex-direction: column; align-items: center; }
.cine__kick {
font-family: var(--font-mono); font-size: .76rem;
letter-spacing: .18em; text-transform: uppercase; color: var(--lime);
margin-bottom: 1.5rem;
}
.mega--cine { max-width: 20ch; margin-inline: auto; }
/* ============================================================
BRANCHES
============================================================ */
.branches { padding-block: var(--sec); background: var(--black); }
.branch__grid { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(1.2rem,2.5vw,2rem); }
.branch {
border: 1px solid var(--line); border-radius: 14px; overflow: hidden;
background: rgba(16,20,12,.62);
backdrop-filter: blur(12px) saturate(1.1);
-webkit-backdrop-filter: blur(12px) saturate(1.1);
transition: border-color .35s var(--ease), background .35s var(--ease), transform .35s var(--ease);
position: relative;
}
.branch::before {
content: ""; position: absolute; inset: 0; border-radius: inherit; pointer-events: none; z-index: 1;
background: linear-gradient(135deg, rgba(255,255,255,.045) 0%, transparent 38%, transparent 62%, rgba(255,255,255,.02) 100%);
}
.branch:hover { border-color: var(--line-2); background: rgba(16,20,12,.78); transform: translateY(-3px); }
.branch__media { overflow: hidden; aspect-ratio: 16/10; }
.branch__media img { width: 100%; height: 100%; object-fit: cover; transition: transform 1.3s var(--ease); }
.branch:hover .branch__media img { transform: scale(1.05); }
.branch__body { padding: clamp(1.5rem,2.6vw,2.4rem); }
.branch__tag { font-family: var(--font-mono); font-size: .74rem; letter-spacing: .1em; text-transform: uppercase; color: var(--lime); }
.branch__name {
font-family: var(--font-disp); font-weight: 800; text-transform: uppercase;
font-size: clamp(1.9rem,3.3vw,2.9rem); color: var(--bone); line-height: 1;
margin: .7rem 0 .6rem; letter-spacing: -.025em;
}
.branch__addr { color: var(--grey); font-size: .96rem; }
.branch__spec { margin: 1.3rem 0; border-top: 1px solid var(--line); }
.branch__spec li {
display: flex; justify-content: space-between; gap: 1rem;
padding: .62rem 0; border-bottom: 1px solid var(--line); font-size: .9rem;
}
.branch__spec span { color: var(--dim); font-family: var(--font-mono); font-size: .78rem; text-transform: uppercase; letter-spacing: .05em; }
.branch__spec b { color: var(--white); font-weight: 500; }
.branch__act { display: flex; gap: 1.4rem; }
/* ============================================================
COACHES
============================================================ */
.coaches { padding-block: var(--sec); background: var(--ink); }
.coach__grid { display: grid; grid-template-columns: repeat(3,1fr); gap: clamp(1.2rem,2.5vw,2rem); }
.coach { display: flex; flex-direction: column; }
.coach__media { position: relative; border-radius: 12px; overflow: hidden; aspect-ratio: 4/5; background: var(--card); }
.coach__media img {
width: 100%; height: 100%; object-fit: cover;
filter: grayscale(.4) contrast(1.05);
transition: transform 1.2s var(--ease), filter .5s var(--ease);
}
.coach:hover .coach__media img { transform: scale(1.05); filter: grayscale(0) contrast(1); }
.coach__badge {
position: absolute; top: 1rem; left: 1rem;
font-family: var(--font-mono); font-size: .72rem;
letter-spacing: .1em; text-transform: uppercase; color: var(--lime);
background: rgba(8,10,6,.42);
backdrop-filter: blur(18px) saturate(1.4);
-webkit-backdrop-filter: blur(18px) saturate(1.4);
border: 1px solid rgba(236,238,224,.14);
padding: .44rem .8rem; border-radius: 100px;
box-shadow: 0 6px 20px -10px rgba(0,0,0,.6), inset 0 1px 0 rgba(255,255,255,.07);
display: inline-flex; align-items: center; gap: .5rem;
}
.coach__badge::before {
content: ""; width: 6px; height: 6px; border-radius: 50%;
background: var(--lime);
box-shadow: 0 0 8px rgba(166,240,53,.65);
}
.coach__cap { padding-top: 1.2rem; }
.coach__cap h3 { font-size: 1.4rem; font-weight: 600; color: var(--bone); letter-spacing: -.01em; }
.coach__cap span { display: block; margin-top: .25rem; font-family: var(--font-mono); font-size: .8rem; color: var(--dim); }
.coach__note { margin-top: 2.4rem; text-align: center; font-family: var(--font-mono); font-size: .82rem; color: var(--dim); letter-spacing: .03em; }
/* ============================================================
OUR STORY (timeline)
============================================================ */
.story { padding-block: var(--sec); background: var(--black); }
.story__grid {
display: grid; grid-template-columns: minmax(280px, .85fr) 1fr;
gap: clamp(2rem, 4.5vw, 5rem); align-items: start;
}
.story__media {
position: sticky; top: clamp(6rem, 12vh, 10rem);
border-radius: 12px; overflow: hidden;
aspect-ratio: 4/5; background: var(--card);
}
.story__media img {
width: 100%; height: 100%; object-fit: cover;
filter: grayscale(.28) contrast(1.05) brightness(.88);
transition: transform 1.4s var(--ease);
}
.story__media:hover img { transform: scale(1.04); }
.story__cap {
position: absolute; left: 1rem; bottom: 1rem; right: 1rem;
font-family: var(--font-mono); font-size: .72rem;
letter-spacing: .14em; text-transform: uppercase; color: var(--bone);
background: linear-gradient(0deg, rgba(8,10,6,.82), transparent);
padding: 2.2rem .4rem .2rem; pointer-events: none;
}
@media (max-width: 880px) {
.story__grid { grid-template-columns: 1fr; }
.story__media { position: static; aspect-ratio: 16/10; max-height: 420px; }
}
.timeline { border-top: 1px solid var(--line-2); }
.tl {
display: grid; grid-template-columns: auto 1fr; gap: clamp(1.5rem,6vw,7rem);
padding: clamp(1.8rem,3.4vw,3.2rem) 0;
border-bottom: 1px solid var(--line);
align-items: baseline; transition: padding-left .4s var(--ease);
}
.tl:hover { padding-left: clamp(0px,1.5vw,1.4rem); }
.tl__yr {
font-family: var(--font-disp); font-weight: 800;
font-size: clamp(2.2rem,4.6vw,4rem); color: var(--lime); line-height: 1; letter-spacing: -.03em;
}
.tl__c { display: grid; grid-template-columns: 1fr 1.6fr; gap: clamp(1rem,3vw,4rem); align-items: baseline; }
.tl__c h3 { font-size: clamp(1.3rem,2vw,1.85rem); font-weight: 600; color: var(--bone); letter-spacing: -.01em; }
.tl__c p { color: var(--grey); }
/* ============================================================
TESTIMONIALS
============================================================ */
.voices { padding-block: var(--sec); background: var(--ink); position: relative; overflow: hidden; }
.voices__bg { position: absolute; inset: 0; z-index: 0; pointer-events: none; }
.voices__bg img {
width: 100%; height: 100%; object-fit: cover; object-position: right center;
filter: grayscale(.5) contrast(1.1) brightness(.62);
opacity: .5;
}
.voices__veil {
position: absolute; inset: 0;
background:
linear-gradient(180deg, var(--ink) 0%, rgba(16,20,12,.48) 22%, rgba(16,20,12,.48) 78%, var(--ink) 100%),
linear-gradient(90deg, rgba(16,20,12,.85) 0%, rgba(16,20,12,.25) 45%, rgba(16,20,12,.55) 100%),
radial-gradient(80% 60% at 30% 50%, rgba(166,240,53,.07) 0%, transparent 65%);
}
.voices > .wrap { position: relative; z-index: 2; }
.voice__grid { display: grid; grid-template-columns: repeat(3,1fr); gap: clamp(1.2rem,2.5vw,2rem); }
.voice {
border: 1px solid var(--line); border-radius: 14px;
padding: clamp(1.7rem,2.6vw,2.5rem);
background: rgba(26,32,18,.5);
backdrop-filter: blur(20px) saturate(1.2); -webkit-backdrop-filter: blur(20px) saturate(1.2);
display: flex; flex-direction: column; gap: 1.8rem;
transition: transform .35s var(--ease), border-color .35s var(--ease), background .35s var(--ease);
position: relative;
}
.voice::before {
content: ""; position: absolute; inset: 0; border-radius: inherit; pointer-events: none; z-index: 1;
background: linear-gradient(135deg, rgba(255,255,255,.05) 0%, transparent 38%, transparent 62%, rgba(255,255,255,.02) 100%);
}
.voice > * { position: relative; z-index: 2; }
.voice:hover { transform: translateY(-4px); border-color: var(--line-2); }
.voice--lime {
background:
radial-gradient(130% 120% at 0% 0%, var(--lime-hi) 0%, transparent 56%),
linear-gradient(158deg, var(--lime) 0%, var(--lime-deep) 134%);
border-color: transparent;
}
.voice blockquote {
font-size: clamp(1.1rem,1.5vw,1.3rem); line-height: 1.5;
color: var(--bone); font-weight: 500; letter-spacing: -.01em;
}
.voice--lime blockquote { color: var(--black); }
.voice figcaption { margin-top: auto; }
.voice__n {
display: block; font-family: var(--font-disp); font-weight: 800; text-transform: uppercase;
font-size: 1.45rem; color: var(--bone); letter-spacing: -.02em;
}
.voice--lime .voice__n { color: var(--black); }
.voice__m { display: block; margin-top: .2rem; font-family: var(--font-mono); font-size: .78rem; color: var(--dim); }
.voice--lime .voice__m { color: rgba(8,10,6,.72); }
/* ============================================================
COACH HOUSE TEASER
============================================================ */
.house { position: relative; overflow: hidden; }
.house__img { position: absolute; inset: -8% 0; width: 100%; height: 116%; object-fit: cover; }
.house__veil {
position: absolute; inset: 0;
background: linear-gradient(108deg, var(--black) 8%, rgba(8,10,6,.8) 42%, rgba(8,10,6,.24) 100%);
}
.house__inner { position: relative; z-index: 2; padding-block: clamp(6rem,14vh,11rem); }
.house__text { max-width: 40rem; display: flex; flex-direction: column; }
.house__text .kick { margin-bottom: 1.6rem; }
.house__text .mega { margin-bottom: 1.4rem; }
.house__text p { color: var(--grey); margin-bottom: 1.8rem; }
.house__text .btn { align-self: flex-start; }
/* ============================================================
TRIAL (deep forest flood)
============================================================ */
.trial { padding-block: var(--sec); background: var(--forest); position: relative; overflow: hidden; }
.trial__bg { position: absolute; inset: 0; z-index: 0; pointer-events: none; }
.trial__bg img {
width: 100%; height: 100%; object-fit: cover; object-position: 70% center;
filter: grayscale(.55) contrast(1.05) brightness(.6);
opacity: .38;
}
.trial__veil {
position: absolute; inset: 0;
background:
linear-gradient(96deg, var(--forest) 0%, rgba(21,36,13,.85) 38%, rgba(21,36,13,.55) 72%, rgba(21,36,13,.78) 100%),
radial-gradient(80% 70% at 10% 90%, rgba(166,240,53,.1) 0%, transparent 60%);
}
.trial::before {
content: ""; position: absolute; width: 64vw; height: 64vw;
max-width: 720px; max-height: 720px; left: -14vw; bottom: -20vh;
background: radial-gradient(circle, var(--lime-glow) 0%, transparent 66%);
z-index: 1;
}
.trial__grid {
position: relative; z-index: 2;
display: grid; grid-template-columns: 1fr 1fr; gap: clamp(2rem,5vw,6rem); align-items: start;
}
.trial__text .kick { margin-bottom: 1.6rem; }
.trial__text .mega { margin-bottom: 1.4rem; }
.trial__text > p { color: var(--white); margin-bottom: 1.8rem; }
.trial__inc { display: flex; flex-direction: column; gap: .7rem; margin-bottom: 2rem; }
.trial__inc li { display: flex; align-items: baseline; gap: .7rem; color: var(--bone); font-size: .98rem; }
.trial__inc li::before { content: "\2192"; color: var(--lime); flex: none; }
.trial__contact { display: flex; flex-direction: column; gap: .7rem; border-top: 1px solid var(--line-2); padding-top: 1.6rem; }
.trial__contact a { display: flex; align-items: baseline; gap: .8rem; font-size: 1.05rem; color: var(--bone); transition: color .25s var(--ease); }
.trial__contact a:hover { color: var(--lime); }
.trial__contact span {
font-family: var(--font-mono); font-size: .72rem; letter-spacing: .1em;
text-transform: uppercase; color: var(--dim); min-width: 3.4rem;
}
/* form — frosted glass surface + glass field inputs */
.form {
position: relative;
background: rgba(8,10,6,.4);
backdrop-filter: blur(28px) saturate(1.4);
-webkit-backdrop-filter: blur(28px) saturate(1.4);
border: 1px solid rgba(236,238,224,.12);
border-radius: 16px;
padding: clamp(1.6rem,3vw,2.8rem);
box-shadow: 0 24px 70px -30px rgba(0,0,0,.75), inset 0 1px 0 rgba(255,255,255,.05);
}
.form::before {
content: ""; position: absolute; inset: 0; border-radius: inherit; pointer-events: none;
background: linear-gradient(135deg, rgba(255,255,255,.06) 0%, transparent 32%, transparent 68%, rgba(255,255,255,.03) 100%);
}
.form > * { position: relative; z-index: 1; }
.form__title { font-size: 1.3rem; font-weight: 600; color: var(--bone); margin-bottom: 1.5rem; letter-spacing: -.01em; }
.field { margin-bottom: 1.05rem; }
.field label {
display: block; margin-bottom: .45rem;
font-family: var(--font-mono); font-size: .72rem;
letter-spacing: .08em; text-transform: uppercase; color: var(--dim);
}
.field input, .field select {
width: 100%;
background: rgba(16,20,12,.5);
backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px);
border: 1px solid rgba(236,238,224,.1);
border-radius: 10px;
padding: .92rem 1rem; color: var(--bone); font: inherit; font-size: .98rem;
box-shadow: inset 0 1px 0 rgba(255,255,255,.04), inset 0 -1px 0 rgba(0,0,0,.2);
transition: border-color .25s var(--ease), background .25s var(--ease), box-shadow .25s var(--ease);
}
.field input::placeholder { color: var(--dim); }
.field input:focus, .field select:focus {
outline: none;
border-color: var(--lime);
background: rgba(16,20,12,.72);
box-shadow: 0 0 0 3px rgba(166,240,53,.18), inset 0 1px 0 rgba(255,255,255,.05);
}
.field select {
appearance: none; cursor: pointer;
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' fill='none'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%23a6f035' stroke-width='1.6'/%3E%3C/svg%3E");
background-repeat: no-repeat; background-position: right 1rem center; padding-right: 2.4rem;
}
.form .btn { margin-top: .6rem; }
.form__legal { margin-top: .9rem; text-align: center; font-family: var(--font-mono); font-size: .72rem; color: var(--dim); }
.form.is-sent .btn--lime { background: var(--lime-deep); color: var(--lime-hi); pointer-events: none; }
/* ============================================================
FOOTER
============================================================ */
.foot { padding-top: clamp(3.5rem,7vw,6rem); padding-bottom: 2.2rem; border-top: 1px solid var(--line); background: var(--black); }
.foot__mega { margin-bottom: clamp(2.5rem,5vw,4rem); }
.foot__mega .line > span {
display: block;
font-family: var(--font-disp); font-weight: 800; text-transform: uppercase;
font-size: clamp(2.2rem,10vw,10.4rem); line-height: .96;
color: transparent; -webkit-text-stroke: 1px var(--line-2);
letter-spacing: -.03em;
}
.foot__grid {
display: grid; grid-template-columns: 1.6fr 1fr 1fr 1.2fr;
gap: clamp(1.6rem,3vw,3rem);
padding-bottom: clamp(2.5rem,5vw,4rem);
border-bottom: 1px solid var(--line);
}
.foot__logo { height: 54px; width: auto; margin-bottom: 1.2rem; }
.foot__hash { font-family: var(--font-mono); font-size: .82rem; letter-spacing: .08em; color: var(--lime); margin-bottom: .8rem; }
.foot__line { color: var(--dim); font-size: .92rem; max-width: 26rem; }
.foot__col h4 {
font-family: var(--font-mono); font-size: .74rem; font-weight: 400;
letter-spacing: .1em; text-transform: uppercase; color: var(--dim); margin-bottom: 1.1rem;
}
.foot__col a {
display: block; padding: .32rem 0; color: var(--white); font-size: .95rem;
transition: color .2s var(--ease), padding-left .25s var(--ease);
}
.foot__col a:hover { color: var(--lime); padding-left: .3rem; }
.foot__base {
display: flex; justify-content: space-between; flex-wrap: wrap; gap: 1rem;
padding-top: 1.8rem; font-family: var(--font-mono); font-size: .78rem; color: var(--dim);
}
.foot__legal { display: flex; gap: 1.4rem; align-items: center; }
.foot__legal a:hover { color: var(--lime); }
/* footer language pill (mirrors the nav toggle, footer scale) */
.foot__lang {
display: inline-flex; align-items: center;
border: 1px solid var(--line-lime); border-radius: 100px; overflow: hidden;
}
.foot__lang button {
font-family: var(--font-mono); font-size: .72rem; font-weight: 400; letter-spacing: .04em;
color: var(--dim); padding: .26rem .62rem; border: 0; background: transparent;
transition: background .2s var(--ease), color .2s var(--ease);
}
.foot__lang button:hover { color: var(--bone); }
.foot__lang button.is-on { background: var(--lime); color: var(--black); }
/* ---------- MOBILE-MENU LANG ROW ---------- */
.menu__lang {
display: inline-flex; align-items: center; margin-top: 1.1rem;
border: 1px solid var(--line-lime); border-radius: 100px; overflow: hidden; align-self: flex-start;
}
.menu__lang button {
font-family: var(--font-mono); font-size: .82rem; font-weight: 400; letter-spacing: .04em;
color: var(--grey); padding: .42rem 1.05rem; border: 0; background: transparent;
transition: background .2s var(--ease), color .2s var(--ease);
}
.menu__lang button:hover { color: var(--bone); }
.menu__lang button.is-on { background: var(--lime); color: var(--black); }
/* ============================================================
RESPONSIVE
============================================================ */
@media (max-width: 1180px) {
.plan__col { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 1080px) {
.step__c { grid-template-columns: 1fr; gap: .6rem; }
.tl__c { grid-template-columns: 1fr; gap: .6rem; }
.foot__grid { grid-template-columns: 1fr 1fr; }
.foot__brand { grid-column: 1 / -1; }
}
@media (max-width: 920px) {
.nav__row { display: flex; justify-content: space-between; }
.nav__set--l, .nav__end { display: none; }
.nav__brand { justify-self: auto; }
.nav__burger { display: flex; flex-direction: column; gap: 5px; padding: .5rem; }
.nav__burger span {
width: 26px; height: 2px; background: var(--bone);
transition: transform .3s var(--ease), opacity .3s var(--ease);
}
body.menu-open .nav__burger span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
body.menu-open .nav__burger span:nth-child(2) { transform: translateY(-7px) rotate(-45deg); }
.brand__grid { grid-template-columns: 1fr; }
.brand__media img { aspect-ratio: 16/11; }
.plans { grid-template-columns: 1fr; }
.trial__grid { grid-template-columns: 1fr; }
.coach__grid { grid-template-columns: 1fr 1fr; }
.voice__grid { grid-template-columns: 1fr; }
.member__foot { grid-template-columns: 1fr; }
.hero__base { flex-direction: column; align-items: flex-start; }
}
@media (max-width: 860px) {
:root { --sec: clamp(4rem,11vh,6.5rem); }
.show__scroll { height: auto; }
.show__stage { position: static; height: auto; overflow: visible; }
.show__track { position: static; }
.prog {
position: relative; inset: auto; opacity: 1; pointer-events: auto;
min-height: 78svh; display: flex;
}
.prog__media { position: absolute; inset: 0; }
.prog__media img { transform: none; }
.prog__cat, .prog__name, .prog__desc, .prog__meta { opacity: 1; transform: none; }
.prog__inner { position: relative; bottom: auto; align-self: flex-end; padding-block: 2.5rem; }
.show__hud { display: none; }
.branch__grid { grid-template-columns: 1fr; }
.stats { grid-template-columns: 1fr 1fr; }
.stats li:nth-child(2) { border-right: 0; }
.stats li:nth-child(1), .stats li:nth-child(2) { border-bottom: 1px solid var(--line); }
.disc__grid { grid-template-columns: 1fr 1fr; }
.disc__grid li:nth-child(2) { border-right: 0; }
.plan__col { grid-template-columns: 1fr; }
.hero__foot { flex-direction: column; align-items: flex-start; gap: 1.6rem; }
.hero__scroll { flex-direction: row; align-self: flex-start; }
.hero__scroll i { width: 34px; height: 1px; }
.hero__scroll i::after { animation: scrollx 2s var(--ease) infinite; }
@keyframes scrollx { 0%{transform:translateX(-100%);} 60%,100%{transform:translateX(100%);} }
}
@media (max-width: 560px) {
.coach__grid { grid-template-columns: 1fr; }
.stats { grid-template-columns: 1fr; }
.stats li { border-right: 0; border-bottom: 1px solid var(--line); }
.disc__grid { grid-template-columns: 1fr; }
.disc__grid li { border-right: 0; border-bottom: 1px solid var(--line); }
.step { grid-template-columns: 1fr; gap: .5rem; }
.tl { grid-template-columns: 1fr; gap: .4rem; }
.foot__grid { grid-template-columns: 1fr; }
.foot__base { flex-direction: column; }
.btn { width: 100%; justify-content: center; }
.hero__act { width: 100%; flex-direction: column; }
}
/* ============================================================
REDUCED MOTION
============================================================ */
@media (prefers-reduced-motion: reduce) {
*, *::before, *::after {
animation-duration: .001ms !important;
animation-iteration-count: 1 !important;
transition-duration: .001ms !important;
}
.js [data-lines] .line > span { transform: none !important; }
.js [data-reveal] { opacity: 1 !important; transform: none !important; }
.load { display: none; }
.show__scroll { height: auto; }
.show__stage { position: static; height: auto; overflow: visible; }
.show__track { position: static; }
.prog {
position: relative; inset: auto; opacity: 1; pointer-events: auto;
min-height: 80svh; display: flex;
}
.prog__media { position: absolute; inset: 0; }
.prog__media img { transform: none; }
.prog__cat, .prog__name, .prog__desc, .prog__meta { opacity: 1; transform: none; }
.prog__inner { position: relative; bottom: auto; align-self: flex-end; padding-block: 2.5rem; }
.show__hud { display: none; }
.hero__scroll i::after { display: none; }
}
/* ============================================================
COACH HOUSE PAGE / v10 unified shell, food/cafe content
============================================================ */
/* Hero veil variant: food shot sits well back so type leads. */
.hero--ch .hero__bed {
object-position: center 58%;
filter: grayscale(.32) contrast(1.08) brightness(.5) saturate(.85);
transform: scale(1.06);
}
.hero__veil--ch {
position: absolute; inset: 0;
background:
linear-gradient(180deg, rgba(8,10,6,.94) 0%, rgba(8,10,6,.62) 22%, rgba(8,10,6,.55) 56%, rgba(8,10,6,.96) 100%),
radial-gradient(140% 110% at 50% 55%, rgba(8,10,6,.18) 0%, rgba(8,10,6,.72) 55%, rgba(8,10,6,.95) 100%),
radial-gradient(120% 90% at 12% 108%, rgba(31,54,20,.65) 0%, transparent 58%),
linear-gradient(90deg, rgba(8,10,6,.45) 0%, rgba(8,10,6,0) 30%, rgba(8,10,6,0) 70%, rgba(8,10,6,.45) 100%);
}
/* Nav current-page marker (reusable) */
.nav__set--r a.is-current,
.menu__nav a.is-current { color: var(--lime); }
.nav__set--r a.is-current::after {
content: ""; display: block; height: 1px; width: 1.6rem; background: var(--lime);
margin-top: .3rem;
}
/* Split section head (Coach House gallery uses this) */
.sec__head--split {
display: grid; grid-template-columns: 1fr auto; gap: clamp(1.4rem,4vw,4rem);
align-items: end; margin-bottom: clamp(2.4rem,5vw,4rem);
}
.sec__lead--right { max-width: 32rem; color: var(--grey); font-size: 1rem; text-align: right; }
@media (max-width: 880px) {
.sec__head--split { grid-template-columns: 1fr; }
.sec__lead--right { text-align: left; }
}
/* ----------- DISHES grid (6 signature cards) ----------- */
.dishes { padding-block: var(--sec); background: var(--ink); position: relative; overflow: hidden; }
.dishes::before {
content: ""; position: absolute; width: 60vw; height: 60vw;
max-width: 760px; max-height: 760px; right: -16vw; top: 8vh;
background: radial-gradient(circle, var(--lime-glow) 0%, transparent 66%);
z-index: 0; pointer-events: none;
}
.dishes > .wrap { position: relative; z-index: 2; }
.dishes__note {
margin-top: clamp(2rem,4vw,3rem); text-align: center;
font-family: var(--font-mono); font-size: .78rem;
letter-spacing: .14em; text-transform: uppercase; color: var(--dim);
}
.dish__grid {
display: grid; grid-template-columns: repeat(3, 1fr);
gap: clamp(1.2rem, 2.4vw, 2rem);
}
.dish {
display: flex; flex-direction: column;
border: 1px solid var(--line); border-radius: 14px;
background: rgba(16,20,12,.55);
backdrop-filter: blur(16px) saturate(1.15);
-webkit-backdrop-filter: blur(16px) saturate(1.15);
overflow: hidden;
transition: transform .45s var(--ease), border-color .35s var(--ease), background .35s var(--ease);
position: relative;
}
.dish::before {
content: ""; position: absolute; inset: 0; border-radius: inherit; pointer-events: none; z-index: 2;
background: linear-gradient(135deg, rgba(255,255,255,.05) 0%, transparent 30%, transparent 70%, rgba(255,255,255,.02) 100%);
}
.dish:hover { transform: translateY(-5px); border-color: var(--line-2); background: rgba(16,20,12,.7); }
.dish__media { position: relative; overflow: hidden; aspect-ratio: 4/3; background: var(--black); }
.dish__media img {
width: 100%; height: 100%; object-fit: cover;
filter: grayscale(.05) contrast(1.06) brightness(.95);
transition: transform 1.4s var(--ease), filter .4s var(--ease);
}
.dish:hover .dish__media img { transform: scale(1.06); filter: grayscale(0) contrast(1.05) brightness(1); }
.dish__body { padding: clamp(1.4rem, 2.2vw, 1.9rem); display: flex; flex-direction: column; gap: .9rem; flex: 1; }
.dish__cat {
font-family: var(--font-mono); font-size: .72rem;
letter-spacing: .14em; text-transform: uppercase; color: var(--lime);
}
.dish__name {
font-family: var(--font-disp); font-weight: 800; text-transform: uppercase;
font-size: clamp(1.3rem, 2vw, 1.7rem); line-height: 1.05;
color: var(--bone); letter-spacing: -.02em;
}
.dish__desc { color: var(--grey); font-size: .98rem; line-height: 1.55; flex: 1; }
.dish__macro {
margin-top: .4rem; padding-top: .9rem;
border-top: 1px solid var(--line);
font-family: var(--font-mono); font-size: .72rem;
letter-spacing: .08em; color: var(--dim); text-transform: uppercase;
}
@media (max-width: 1080px) {
.dish__grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 640px) {
.dish__grid { grid-template-columns: 1fr; }
}
/* ----------- CGRID gallery (Coach House space) ----------- */
.cgrid { padding-block: var(--sec); background: var(--black); }
.cgrid__masonry {
display: grid; grid-template-columns: repeat(12, 1fr);
grid-auto-rows: clamp(150px, 16vw, 210px);
gap: clamp(.7rem, 1.4vw, 1.2rem);
}
.cgrid__c {
position: relative; overflow: hidden; border-radius: 14px;
background: var(--card);
border: 1px solid rgba(236,238,224,.04);
}
.cgrid__c img {
width: 100%; height: 100%; object-fit: cover;
filter: contrast(1.04) saturate(.95);
transition: transform 1.5s var(--ease), filter .5s var(--ease);
}
.cgrid__c:hover img { transform: scale(1.05); filter: contrast(1.06) saturate(1.02); }
.cgrid__c::after {
content: ""; position: absolute; inset: 0; pointer-events: none;
background: linear-gradient(180deg, transparent 60%, rgba(8,10,6,.45) 100%);
}
/* Designed masonry: a=hero plate, b=wide, c=tall, d=wide, e=tall, f=hero plate */
.cgrid__c--a { grid-column: span 7; grid-row: span 2; }
.cgrid__c--b { grid-column: span 5; grid-row: span 1; }
.cgrid__c--c { grid-column: span 5; grid-row: span 1; }
.cgrid__c--d { grid-column: span 4; grid-row: span 2; }
.cgrid__c--e { grid-column: span 4; grid-row: span 2; }
.cgrid__c--f { grid-column: span 4; grid-row: span 2; }
@media (max-width: 980px) {
.cgrid__masonry { grid-template-columns: repeat(6, 1fr); grid-auto-rows: clamp(150px, 22vw, 200px); }
.cgrid__c--a, .cgrid__c--f { grid-column: span 6; grid-row: span 2; }
.cgrid__c--b, .cgrid__c--c, .cgrid__c--d, .cgrid__c--e { grid-column: span 3; grid-row: span 1; }
}
/* ----------- VISIT card (right column of visit section) ----------- */
.visit__card {
position: relative;
border-radius: 16px;
padding: clamp(1.8rem, 3.2vw, 2.6rem);
background: rgba(8,10,6,.45);
backdrop-filter: blur(24px) saturate(1.3);
-webkit-backdrop-filter: blur(24px) saturate(1.3);
border: 1px solid rgba(236,238,224,.1);
display: flex; flex-direction: column; gap: 1.4rem;
box-shadow: 0 20px 60px -28px rgba(0,0,0,.7);
}
.visit__card::before {
content: ""; position: absolute; inset: 0; border-radius: inherit; pointer-events: none;
background: linear-gradient(135deg, rgba(255,255,255,.06) 0%, transparent 32%, transparent 68%, rgba(255,255,255,.03) 100%);
}
.visit__card > * { position: relative; z-index: 1; }
.visit__lab {
font-family: var(--font-mono); font-size: .74rem;
letter-spacing: .14em; text-transform: uppercase; color: var(--lime);
}
.visit__addr {
font-family: var(--font-disp); font-weight: 600; font-size: clamp(1.2rem, 1.7vw, 1.5rem);
line-height: 1.3; color: var(--bone); letter-spacing: -.01em;
}
.visit__rows { display: flex; flex-direction: column; gap: 0; border-top: 1px solid var(--line); }
.visit__rows > div {
display: flex; justify-content: space-between; align-items: baseline;
padding: .8rem 0; border-bottom: 1px solid var(--line); font-size: .94rem;
gap: 1rem;
}
.visit__rows span {
color: var(--dim); font-family: var(--font-mono); font-size: .76rem;
letter-spacing: .04em; text-transform: uppercase;
}
.visit__rows b { color: var(--white); font-weight: 500; font-family: var(--font-mono); }
.visit__card .btn--block { width: 100%; }
/* ============================================================
CINEMATIC WARM GRADE — gym side only (body.is-gym)
Unified filmic treatment across all gym-side photography:
warmer (sepia), slightly desaturated/faded, deeper darks, +contrast.
NOT applied to body.is-gym .foot__logo or brand marks.
Coach House (no .is-gym on body) keeps food-shot color fidelity.
============================================================ */
/* HERO: warm GOLDEN cinematic — rich color + strong warm gel overlay. */
body.is-gym .hero__bed {
filter: sepia(.22) saturate(1.55) contrast(1.22) brightness(.6) hue-rotate(-14deg);
}
/* Strong golden gel overlay on hero bed. Multiply preserves skin tones. */
body.is-gym .hero__atmos::before {
content: ""; position: absolute; inset: 0; z-index: 1; pointer-events: none;
background:
radial-gradient(75% 60% at 50% 42%, rgba(232,148,52,.42) 0%, rgba(180,90,30,.18) 55%, transparent 78%),
radial-gradient(120% 95% at 50% 100%, rgba(8,10,6,.55) 0%, transparent 60%);
mix-blend-mode: multiply;
}
body.is-gym .hero__atmos::after {
/* Soft warm-light highlight roll (overlay blend so it brightens warm not whitens). */
content: ""; position: absolute; inset: 0; z-index: 1; pointer-events: none;
background: radial-gradient(60% 50% at 50% 36%, rgba(255,180,90,.18) 0%, transparent 70%);
mix-blend-mode: overlay;
}
body.is-gym .hero__grain { opacity: .5; }
/* Other gym sections — golden warmth, rich saturation (no pale skin). */
body.is-gym .brand__media img {
filter: sepia(.16) saturate(1.4) contrast(1.12) brightness(.82) hue-rotate(-12deg);
}
body.is-gym .method__media img {
filter: sepia(.18) saturate(1.4) contrast(1.12) brightness(.8) hue-rotate(-12deg);
}
body.is-gym .story__media img {
filter: sepia(.18) saturate(1.4) contrast(1.12) brightness(.78) hue-rotate(-12deg);
}
/* Programs showcase: monochrome cinematic — high-contrast B&W with a faint warm tone,
so the section reads as a "film still" moment but still anchored to the gold theme. */
body.is-gym .prog__media img {
filter: grayscale(1) sepia(.18) contrast(1.22) brightness(.68);
}
body.is-gym .prog.is-active .prog__media img {
filter: grayscale(1) sepia(.18) contrast(1.22) brightness(.68);
}
body.is-gym .member__strip img {
filter: sepia(.16) saturate(1.4) contrast(1.12) brightness(.76) hue-rotate(-12deg);
}
body.is-gym .branch__media img {
filter: sepia(.2) saturate(1.4) contrast(1.12) brightness(.82) hue-rotate(-12deg);
}
body.is-gym .coach__media img {
filter: sepia(.24) saturate(1.3) contrast(1.12) brightness(.84) hue-rotate(-12deg);
}
body.is-gym .coach:hover .coach__media img {
filter: sepia(.14) saturate(1.45) contrast(1.08) brightness(.95) hue-rotate(-12deg);
}
body.is-gym .voices__bg img {
filter: sepia(.26) saturate(1.25) contrast(1.18) brightness(.5) hue-rotate(-12deg);
}
body.is-gym .trial__bg img {
filter: sepia(.26) saturate(1.22) contrast(1.16) brightness(.5) hue-rotate(-12deg);
}
body.is-gym .house__img {
/* Coach House teaser embedded inside the gym page — keep food less filmic */
filter: sepia(.1) saturate(1.1) contrast(1.06) brightness(.86);
}
body.is-gym .cine__video {
filter: sepia(.18) saturate(1.4) contrast(1.14) brightness(.72) hue-rotate(-12deg);
}
/* ---------- THAI TYPOGRAPHY (locked Rule 25) ----------
When html[lang="th"], font stacks include "Noto Sans Thai" and Thai
display/heading letter-spacing is capped at <= .02em (override the
tracking the EN faces carry). Never split a single Thai word across spans. */
html[lang="th"] { word-break:normal; overflow-wrap:normal; line-break:normal;
--font-disp: "Bricolage Grotesque", "Noto Sans Thai", "Host Grotesk", sans-serif;
--font-ui: "Host Grotesk", "Noto Sans Thai", system-ui, sans-serif;
--font-mono: "Fragment Mono", "Noto Sans Thai", ui-monospace, monospace;
}
html[lang="th"] body { font-family: var(--font-ui); }
/* cap tracking on Thai display + headings (EN tracking is negative / wide) */
html[lang="th"] .mega,
html[lang="th"] .art__title,
html[lang="th"] .art__cta-h,
html[lang="th"] .post__title,
html[lang="th"] .art__content h2 { letter-spacing: normal; line-height: 1.18; }
html[lang="th"] .kick,
html[lang="th"] .art__cat,
html[lang="th"] .post__cat,
html[lang="th"] .art__card-h,
html[lang="th"] .nav__set a,
html[lang="th"] .foot__col h4 { letter-spacing: normal; }
/* Thai body copy reads better a touch looser */
html[lang="th"] .art__lead,
html[lang="th"] .art__content p,
html[lang="th"] .art__dek,
html[lang="th"] .sec__lead { line-height: 1.85; }
/* legacy :lang(th) safety net (kept for any nested lang attr) */
:lang(th) { letter-spacing: 0; }
/* ============================================================
v11 ADDITIONS — icon system, icon-led sections, classes,
nutrition coach-house, blog, lighter (greener, less B&W) grade.
============================================================ */
/* ---------- ICON BASE (lime line-icons) ---------- */
.ic {
width: 1.2em; height: 1.2em; flex: none; display: inline-block; vertical-align: middle;
color: var(--lime); fill: none; stroke: currentColor;
stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round;
}
.ic--lg { width: 2.1em; height: 2.1em; stroke-width: 1.45; }
/* A reusable lime icon "tile" — glass disc behind a line-icon. */
.ictile {
display: inline-grid; place-items: center;
width: 3.4rem; height: 3.4rem; border-radius: 14px;
background: rgba(166,240,53,.08);
border: 1px solid rgba(166,240,53,.22);
box-shadow: inset 0 1px 0 rgba(255,255,255,.05);
}
.ictile .ic { width: 1.7rem; height: 1.7rem; }
/* ---------- HERO FEATURE STRIP ---------- */
.hifeat { background: var(--ink); border-block: 1px solid var(--line); }
.hifeat__grid {
display: grid; grid-template-columns: repeat(4, 1fr);
gap: clamp(1rem, 2.4vw, 2.4rem);
padding-block: clamp(1.6rem, 3vw, 2.4rem);
}
.hifeat__i { display: flex; align-items: center; gap: .95rem; }
.hifeat__i + .hifeat__i { position: relative; }
.hifeat__grid .hifeat__i:not(:first-child)::before {
content: ""; position: absolute; left: calc(-1 * clamp(.5rem,1.2vw,1.2rem)); top: 50%;
transform: translateY(-50%); width: 1px; height: 2.4rem; background: var(--line);
}
.hifeat__i .ic { color: var(--lime); }
.hifeat__i b { display: block; font-size: 1.02rem; font-weight: 600; color: var(--bone); letter-spacing: -.01em; }
.hifeat__i span { display: block; font-size: .82rem; color: var(--dim); margin-top: .15rem; }
@media (max-width: 980px) {
.hifeat__grid { grid-template-columns: 1fr 1fr; gap: 1.4rem 1.6rem; }
.hifeat__grid .hifeat__i:not(:first-child)::before { display: none; }
}
@media (max-width: 520px) { .hifeat__grid { grid-template-columns: 1fr; } }
/* ---------- MISSION + VALUES (About) ---------- */
.mission {
margin: clamp(3rem,6vw,5rem) 0 clamp(2rem,4vw,3rem);
padding: clamp(1.8rem,3vw,2.8rem) clamp(1.8rem,3.5vw,3rem);
border-radius: 16px; border: 1px solid rgba(166,240,53,.18);
background:
radial-gradient(120% 140% at 0% 0%, rgba(166,240,53,.10) 0%, transparent 55%),
rgba(26,32,18,.5);
backdrop-filter: blur(14px) saturate(1.15); -webkit-backdrop-filter: blur(14px) saturate(1.15);
}
.mission__lab {
display: inline-flex; align-items: center; gap: .55rem;
font-family: var(--font-mono); font-size: .76rem; letter-spacing: .14em;
text-transform: uppercase; color: var(--lime); margin-bottom: 1rem;
}
.mission__lab .ic { width: 1.2rem; height: 1.2rem; }
.mission__line {
font-family: var(--font-disp); font-weight: 700;
font-size: clamp(1.3rem, 2.6vw, 2.1rem); line-height: 1.2;
color: var(--bone); letter-spacing: -.015em; max-width: 36ch;
}
.values { display: grid; grid-template-columns: repeat(4, 1fr); gap: clamp(1rem,2vw,1.6rem); }
.value {
padding: clamp(1.4rem,2.4vw,2rem);
border: 1px solid var(--line); border-radius: 14px;
background: rgba(26,32,18,.42);
backdrop-filter: blur(12px) saturate(1.1); -webkit-backdrop-filter: blur(12px) saturate(1.1);
transition: transform .35s var(--ease), border-color .35s var(--ease), background .35s var(--ease);
}
.value:hover { transform: translateY(-4px); border-color: rgba(166,240,53,.3); background: rgba(26,32,18,.62); }
.value__ic {
display: inline-grid; place-items: center; width: 3.2rem; height: 3.2rem; border-radius: 12px;
background: rgba(166,240,53,.08); border: 1px solid rgba(166,240,53,.2); margin-bottom: 1.1rem;
}
.value__ic .ic { width: 1.7rem; height: 1.7rem; }
.value h3 { font-size: 1.15rem; font-weight: 600; color: var(--bone); margin-bottom: .5rem; letter-spacing: -.01em; }
.value p { font-size: .92rem; color: var(--grey); line-height: 1.55; }
@media (max-width: 920px) { .values { grid-template-columns: 1fr 1fr; } }
@media (max-width: 520px) { .values { grid-template-columns: 1fr; } }
/* ---------- METHOD: step icons + benefits strip ---------- */
/* Icon sits in a lime tile ABOVE the big number, as a clean step marker. */
.step { align-items: start; }
.step__n { display: inline-flex; flex-direction: column; align-items: flex-start; gap: .65rem; line-height: 1; }
.step__ic {
display: inline-grid; place-items: center; width: 2.7rem; height: 2.7rem;
border-radius: 12px; background: rgba(166,240,53,.08); border: 1px solid rgba(166,240,53,.22);
}
.step__ic .ic { width: 1.45rem; height: 1.45rem; }
.benefits {
display: grid; grid-template-columns: repeat(5, 1fr); gap: clamp(1rem,2vw,1.6rem);
margin-top: clamp(2.4rem,4.5vw,3.4rem); padding-top: clamp(2rem,3.5vw,2.6rem);
border-top: 1px solid var(--line-2);
}
.benefit { display: flex; flex-direction: column; gap: .5rem; }
.benefit .ic { width: 1.9rem; height: 1.9rem; margin-bottom: .3rem; }
.benefit b { font-size: 1.02rem; font-weight: 600; color: var(--bone); letter-spacing: -.01em; }
.benefit span { font-size: .85rem; color: var(--dim); line-height: 1.45; }
@media (max-width: 900px) { .benefits { grid-template-columns: 1fr 1fr 1fr; } }
@media (max-width: 520px) { .benefits { grid-template-columns: 1fr 1fr; } }
/* ---------- MEMBERSHIP: tier icons, call-card, benefits ---------- */
.plan__icn {
display: inline-grid; place-items: center; width: 3rem; height: 3rem; border-radius: 12px;
background: rgba(166,240,53,.08); border: 1px solid rgba(166,240,53,.22); margin-bottom: 1.1rem;
}
.plan__icn .ic { width: 1.6rem; height: 1.6rem; }
.plan--feature .plan__icn { background: rgba(8,10,6,.16); border-color: rgba(8,10,6,.28); }
.plan--feature .plan__icn .ic { color: var(--black); }
.plan__call {
font-family: var(--font-disp); font-weight: 700; font-size: clamp(1.2rem,1.8vw,1.55rem);
line-height: 1.25; color: var(--black); margin: .3rem 0 1rem; letter-spacing: -.01em;
}
.plan__enq { color: var(--lime) !important; font-family: var(--font-mono); font-size: .92rem !important; }
.mbenefits {
margin-top: 1.6rem; padding: clamp(1.5rem,2.6vw,2.2rem) clamp(1.6rem,3vw,2.6rem);
border: 1px solid var(--line); border-radius: 16px;
background: rgba(26,32,18,.4);
backdrop-filter: blur(14px) saturate(1.1); -webkit-backdrop-filter: blur(14px) saturate(1.1);
}
.mbenefits__h {
display: flex; align-items: center; gap: .6rem; margin-bottom: 1.2rem;
font-size: 1.05rem; font-weight: 600; color: var(--bone); letter-spacing: -.01em;
}
.mbenefits__h .ic { width: 1.3rem; height: 1.3rem; }
.mbenefits__list { display: grid; grid-template-columns: repeat(3, 1fr); gap: .9rem 1.6rem; }
.mbenefits__list li { display: flex; align-items: flex-start; gap: .65rem; font-size: .95rem; color: var(--white); }
.mbenefits__list .ic { width: 1.25rem; height: 1.25rem; margin-top: .12rem; }
@media (max-width: 860px) { .mbenefits__list { grid-template-columns: 1fr 1fr; } }
@media (max-width: 520px) { .mbenefits__list { grid-template-columns: 1fr; } }
/* ---------- OUR CLASSES ---------- */
.classes { padding-block: var(--sec); background: var(--black); position: relative; overflow: hidden; }
.classes::before {
content: ""; position: absolute; width: 56vw; height: 56vw; max-width: 720px; max-height: 720px;
left: -14vw; top: 10vh; background: radial-gradient(circle, var(--lime-glow) 0%, transparent 66%);
z-index: 0; pointer-events: none;
}
.classes > .wrap { position: relative; z-index: 2; }
.class__grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(1.1rem,2.2vw,1.8rem); }
.cls {
border: 1px solid var(--line); border-radius: 16px; overflow: hidden;
background: rgba(16,20,12,.55);
backdrop-filter: blur(14px) saturate(1.1); -webkit-backdrop-filter: blur(14px) saturate(1.1);
display: flex; flex-direction: column;
transition: transform .4s var(--ease), border-color .35s var(--ease), background .35s var(--ease);
}
.cls:hover { transform: translateY(-5px); border-color: rgba(166,240,53,.28); background: rgba(16,20,12,.72); }
.cls__media { overflow: hidden; aspect-ratio: 16/10; background: var(--card); }
.cls__media img {
width: 100%; height: 100%; object-fit: cover;
filter: contrast(1.05) saturate(1.05) brightness(.9);
transition: transform 1.3s var(--ease), filter .5s var(--ease);
}
.cls:hover .cls__media img { transform: scale(1.06); filter: contrast(1.04) saturate(1.12) brightness(1); }
.cls__body { padding: clamp(1.3rem,2.2vw,1.8rem); display: flex; flex-direction: column; gap: .65rem; position: relative; }
.cls__ic {
position: absolute; top: -1.9rem; right: 1.3rem;
display: inline-grid; place-items: center; width: 3.2rem; height: 3.2rem; border-radius: 12px;
background: rgba(8,10,6,.62); border: 1px solid rgba(166,240,53,.3);
backdrop-filter: blur(16px) saturate(1.3); -webkit-backdrop-filter: blur(16px) saturate(1.3);
box-shadow: 0 8px 22px -10px rgba(0,0,0,.6);
}
.cls__ic .ic { width: 1.7rem; height: 1.7rem; }
.cls__body h3 { font-size: 1.28rem; font-weight: 600; color: var(--bone); letter-spacing: -.01em; }
.cls__body p { font-size: .94rem; color: var(--grey); line-height: 1.5; flex: 1; }
.cls__tag {
font-family: var(--font-mono); font-size: .74rem; letter-spacing: .04em; color: var(--lime);
padding-top: .7rem; border-top: 1px solid var(--line);
}
.class__foot {
display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(1rem,2vw,1.8rem);
margin-top: clamp(2.4rem,4.5vw,3.4rem); padding-top: clamp(1.8rem,3.5vw,2.4rem);
border-top: 1px solid var(--line-2);
}
.class__foot-i { display: flex; align-items: center; gap: .8rem; color: var(--white); font-size: .95rem; }
.class__foot-i .ic { width: 1.5rem; height: 1.5rem; }
@media (max-width: 920px) { .class__grid { grid-template-columns: 1fr 1fr; } .class__foot { grid-template-columns: 1fr; gap: 1rem; } }
@media (max-width: 560px) { .class__grid { grid-template-columns: 1fr; } }
/* ---------- COACH HOUSE (nutrition partner) ---------- */
.house { padding-block: var(--sec); background: var(--ink); }
.house__bg { position: absolute; inset: 0; z-index: 0; pointer-events: none; }
.house__bg img { width: 100%; height: 100%; object-fit: cover; object-position: center 35%; opacity: .26; filter: saturate(1.05) contrast(1.04); }
.house__veil {
position: absolute; inset: 0;
background:
linear-gradient(180deg, var(--ink) 0%, rgba(16,20,12,.7) 30%, rgba(16,20,12,.72) 70%, var(--ink) 100%),
radial-gradient(70% 60% at 85% 12%, rgba(166,240,53,.07) 0%, transparent 60%);
}
.house > .wrap { position: relative; z-index: 2; }
.house__layout { display: flex; flex-direction: column; gap: clamp(1.6rem,3vw,2.4rem); }
.dish__tags { display: flex; flex-wrap: wrap; gap: .5rem; }
.dish__tags span {
display: inline-flex; align-items: center; gap: .35rem;
font-family: var(--font-mono); font-size: .7rem; letter-spacing: .04em; color: var(--lime);
padding: .3rem .6rem; border-radius: 100px;
background: rgba(166,240,53,.08); border: 1px solid rgba(166,240,53,.2);
}
.dish__tags .ic { width: 1rem; height: 1rem; }
.dish__note { color: var(--grey); font-size: .92rem; line-height: 1.5; flex: 1; }
.dish__macros { display: flex; gap: 1.6rem; margin-top: .4rem; padding-top: .9rem; border-top: 1px solid var(--line); }
.dish__macros li { display: flex; flex-direction: column; }
.dish__macros b { font-family: var(--font-disp); font-weight: 800; font-size: 1.4rem; color: var(--bone); letter-spacing: -.02em; line-height: 1; }
.dish__macros span { font-family: var(--font-mono); font-size: .68rem; letter-spacing: .1em; text-transform: uppercase; color: var(--dim); margin-top: .25rem; }
.house__why {
display: grid; grid-template-columns: 1.4fr 1fr; gap: clamp(1.6rem,3.5vw,3rem); align-items: center;
padding: clamp(1.6rem,3vw,2.4rem) clamp(1.8rem,3.5vw,2.8rem);
border: 1px solid var(--line); border-radius: 16px;
background: rgba(26,32,18,.45);
backdrop-filter: blur(16px) saturate(1.15); -webkit-backdrop-filter: blur(16px) saturate(1.15);
}
.house__why-h { font-size: 1.1rem; font-weight: 600; color: var(--bone); letter-spacing: -.01em; grid-column: 1 / -1; }
.house__why-list { display: grid; grid-template-columns: 1fr 1fr; gap: 1.1rem 1.6rem; }
.house__why-list li { display: flex; align-items: flex-start; gap: .7rem; }
.house__why-list .ic { width: 1.5rem; height: 1.5rem; margin-top: .15rem; }
.house__why-list b { display: block; font-size: .98rem; font-weight: 600; color: var(--bone); }
.house__why-list span { display: block; font-size: .85rem; color: var(--dim); margin-top: .1rem; }
.house__store { display: flex; flex-direction: column; gap: 1.1rem; }
.house__store p { display: flex; align-items: center; gap: .6rem; color: var(--white); font-size: .96rem; }
.house__store .ic { width: 1.4rem; height: 1.4rem; }
.house__act { display: flex; align-items: center; gap: 1.4rem; flex-wrap: wrap; }
@media (max-width: 880px) {
.house__why { grid-template-columns: 1fr; }
.house__why-list { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 560px) { .house__why-list { grid-template-columns: 1fr; } }
/* ---------- BLOG / HEALTH ARTICLES ---------- */
.blog { padding-block: var(--sec); background: var(--black); }
.blog__top { display: grid; grid-template-columns: 1.7fr 1fr; gap: clamp(1.4rem,2.6vw,2.2rem); margin-bottom: clamp(1.6rem,3vw,2.2rem); }
.post {
border: 1px solid var(--line); border-radius: 16px; overflow: hidden;
background: rgba(16,20,12,.5);
display: flex; flex-direction: column;
transition: transform .4s var(--ease), border-color .35s var(--ease), background .35s var(--ease);
}
.post:hover { transform: translateY(-4px); border-color: rgba(166,240,53,.26); background: rgba(16,20,12,.68); }
.post--feat { flex-direction: row; }
.post--feat .post__media { flex: 1.1; min-height: 100%; }
.post--feat .post__body { flex: 1; }
.post__media { position: relative; overflow: hidden; aspect-ratio: 16/10; display: block; background: var(--card); }
.post--feat .post__media { aspect-ratio: auto; }
.post__media img { width: 100%; height: 100%; object-fit: cover; filter: contrast(1.04) saturate(1.04) brightness(.92); transition: transform 1.3s var(--ease); }
.post:hover .post__media img { transform: scale(1.05); }
.post__flag {
position: absolute; top: 1rem; left: 1rem;
font-family: var(--font-mono); font-size: .68rem; letter-spacing: .1em; text-transform: uppercase;
color: var(--black); background: var(--lime); padding: .34rem .7rem; border-radius: 100px;
}
.post__body { padding: clamp(1.2rem,2.2vw,1.7rem); display: flex; flex-direction: column; gap: .7rem; }
.post__cat { font-family: var(--font-mono); font-size: .72rem; letter-spacing: .12em; text-transform: uppercase; color: var(--lime); }
.post__title { font-size: clamp(1.1rem,1.5vw,1.45rem); font-weight: 600; color: var(--bone); letter-spacing: -.01em; line-height: 1.25; }
.post__title a:hover { color: var(--lime); }
.post__ex { color: var(--grey); font-size: .96rem; line-height: 1.55; }
.post__meta { display: flex; flex-wrap: wrap; gap: 1.1rem; margin-top: auto; font-family: var(--font-mono); font-size: .76rem; color: var(--dim); }
.post__meta > span { display: inline-flex; align-items: center; gap: .4rem; }
.post__meta .ic { width: 1.1rem; height: 1.1rem; }
.blog__cats {
padding: clamp(1.4rem,2.4vw,2rem); border: 1px solid var(--line); border-radius: 16px;
background: rgba(26,32,18,.4);
backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px);
}
.blog__search {
display: flex; align-items: center; gap: .6rem; margin-bottom: 1.4rem;
background: rgba(16,20,12,.6); border: 1px solid var(--line-2); border-radius: 10px; padding: .7rem .9rem;
}
.blog__search .ic { width: 1.2rem; height: 1.2rem; color: var(--dim); }
.blog__search input { flex: 1; background: none; border: 0; outline: none; color: var(--bone); font: inherit; font-size: .92rem; }
.blog__search input::placeholder { color: var(--dim); }
.blog__cats-h { font-family: var(--font-mono); font-size: .74rem; font-weight: 400; letter-spacing: .1em; text-transform: uppercase; color: var(--dim); margin-bottom: .9rem; }
.catlist li { border-bottom: 1px solid var(--line); }
.catlist li:last-child { border-bottom: 0; }
.catlist a { display: flex; align-items: center; gap: .7rem; padding: .72rem 0; color: var(--white); font-size: .96rem; transition: color .2s var(--ease), padding-left .25s var(--ease); }
.catlist a:hover { color: var(--lime); padding-left: .3rem; }
.catlist .ic { width: 1.3rem; height: 1.3rem; }
.catlist b { margin-left: auto; font-family: var(--font-mono); font-weight: 400; font-size: .82rem; color: var(--dim); }
.post__grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: clamp(1.1rem,2.2vw,1.6rem); }
.post__grid .post__title { font-size: 1.05rem; }
.blog__more { margin-top: clamp(2rem,4vw,3rem); display: flex; justify-content: center; }
@media (max-width: 980px) {
.blog__top { grid-template-columns: 1fr; }
.post--feat { flex-direction: column; }
.post--feat .post__media { aspect-ratio: 16/9; }
.post__grid { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 560px) { .post__grid { grid-template-columns: 1fr; } }
/* ============================================================
v11 GRADE — greener / less black-and-white (Ake's direction)
Lighter, more natural color; lime UI carries the "green".
These override the warm-gold block above (later source wins).
============================================================ */
/* HERO COVER — CINEMATIC graded-film grade (replaces the earlier sepia-gold, which
read too yellow). No sepia / no hue shift: crushed blacks + lifted contrast for a
filmic look, a whisper of warm key on the subjects so skin stays alive (not pale,
not orange), and a cool-neutral ambient + top/bottom crush for depth. Not yellow,
not green. Other section photos stay natural. */
body.is-gym .hero__bed { filter: saturate(1.06) contrast(1.22) brightness(.64); }
body.is-gym .hero__atmos::before {
background:
radial-gradient(56% 46% at 52% 40%, rgba(255,188,134,.11) 0%, transparent 60%),
radial-gradient(130% 98% at 50% 110%, rgba(6,10,16,.58) 0%, transparent 60%),
linear-gradient(180deg, rgba(8,11,16,.58) 0%, transparent 26%, transparent 56%, rgba(8,11,16,.72) 100%);
mix-blend-mode: normal;
}
body.is-gym .hero__atmos::after {
background: radial-gradient(60% 50% at 50% 38%, rgba(186,206,226,.10) 0%, transparent 70%);
mix-blend-mode: soft-light;
}
/* Faint cool-neutral bloom (no amber, no green) so the cover reads as a graded film still. */
body.is-gym .hero__glow {
background: radial-gradient(circle, rgba(150,176,202,.10) 0%, transparent 64%);
opacity: .5;
}
body.is-gym .brand__media img { filter: saturate(1.12) contrast(1.06) brightness(.92); }
body.is-gym .method__media img { filter: saturate(1.12) contrast(1.06) brightness(.9); }
body.is-gym .story__media img { filter: saturate(1.12) contrast(1.06) brightness(.9); }
/* Programs: from full B&W to natural color film grade (less black-and-white). */
body.is-gym .prog__media img,
body.is-gym .prog.is-active .prog__media img { filter: saturate(1.1) contrast(1.08) brightness(.8); }
body.is-gym .member__strip img { filter: saturate(1.12) contrast(1.06) brightness(.82); }
body.is-gym .branch__media img { filter: saturate(1.12) contrast(1.05) brightness(.92); }
body.is-gym .coach__media img { filter: saturate(1.1) contrast(1.06) brightness(.92); }
body.is-gym .coach:hover .coach__media img { filter: saturate(1.18) contrast(1.04) brightness(1); }
body.is-gym .voices__bg img { filter: saturate(1.1) contrast(1.1) brightness(.58); }
body.is-gym .trial__bg img { filter: saturate(1.1) contrast(1.08) brightness(.55); }
body.is-gym .cine__video { filter: saturate(1.15) contrast(1.08) brightness(.8); }
/* ============================================================
GYM-SIDE AMBIENT LIME GLOW — bigger + spread across more sections (Lucky 2026-05-28)
All new glows scoped to body.is-gym so the Coach House section (.house) and
coach-house.html are left untouched. Sides alternate for visual rhythm.
============================================================ */
/* Enlarge the existing glows the section already had. */
.classes::before { width: 78vw; height: 78vw; max-width: 1120px; max-height: 1120px; left: -18vw; }
.show::before { width: 78vw; height: 78vw; max-width: 1120px; max-height: 1120px; right: -16vw; }
.manifesto::before { width: 92vw; height: 92vw; max-width: 1120px; max-height: 1120px; }
/* Add the glow to the gym sections that lacked it. No overflow change (keeps .method/.story sticky media working); soft bleed between sections is intentional ("more across"). */
body.is-gym .brand, body.is-gym .method, body.is-gym .member,
body.is-gym .branches, body.is-gym .coaches, body.is-gym .story { position: relative; }
body.is-gym .brand::before, body.is-gym .method::before, body.is-gym .member::before,
body.is-gym .branches::before, body.is-gym .coaches::before, body.is-gym .story::before {
content: ""; position: absolute; z-index: 0; pointer-events: none;
width: 78vw; height: 78vw; max-width: 1120px; max-height: 1120px;
background: radial-gradient(circle, var(--lime-glow) 0%, transparent 64%);
}
body.is-gym .brand > *, body.is-gym .method > *, body.is-gym .member > *,
body.is-gym .branches > *, body.is-gym .coaches > *, body.is-gym .story > * { position: relative; z-index: 1; }
body.is-gym .brand::before { left: -20vw; top: -10vh; }
body.is-gym .method::before { right: -18vw; top: 22vh; }
body.is-gym .member::before { left: -20vw; top: 26vh; }
body.is-gym .branches::before { right: -18vw; top: 6vh; }
body.is-gym .coaches::before { left: -18vw; top: 16vh; }
body.is-gym .story::before { right: -18vw; bottom: -12vh; }
/* ============================================================
v11 ROUND 2 — client comment deck (P Ake, 2026-05-28)
Coach House keywords (#5), Hybrid/HYROX (#9), Article page (#7)
============================================================ */
/* ---------- #5 Coach House keyword chips ---------- */
.house__kw {
display: flex; flex-wrap: wrap; gap: .7rem;
margin: 0 0 clamp(2rem,4vw,3rem);
}
.house__kw li {
display: inline-flex; align-items: center; gap: .5rem;
font-family: var(--font-mono); font-size: .82rem; letter-spacing: .06em;
color: var(--bone); text-transform: uppercase;
padding: .6rem 1rem; border-radius: 100px;
background: rgba(166,240,53,.08); border: 1px solid rgba(166,240,53,.25);
}
.house__kw .ic { width: 1.2rem; height: 1.2rem; }
/* ---------- #9 Hybrid / HYROX discipline ---------- */
.disc__grid--5 { grid-template-columns: repeat(5, 1fr); }
.disc__tagx {
font-style: normal; font-family: var(--font-mono); font-size: .58rem;
letter-spacing: .12em; color: var(--black); background: var(--lime);
padding: .12rem .4rem; border-radius: 4px; margin-left: .5rem; vertical-align: middle;
}
@media (max-width: 980px) { .disc__grid--5 { grid-template-columns: 1fr 1fr; } .disc__grid--5 li { border-right: 0; border-bottom: 1px solid var(--line); } }
/* ============================================================
#7 ARTICLE PAGE
============================================================ */
.art { padding-top: clamp(7rem, 12vh, 9.5rem); padding-bottom: clamp(3rem,6vw,5rem); background: var(--black); }
.art__head { max-width: 60rem; }
.art__back {
display: inline-flex; align-items: center; gap: .5rem;
font-family: var(--font-mono); font-size: .8rem; letter-spacing: .06em;
text-transform: uppercase; color: var(--dim); margin-bottom: 2rem;
transition: color .25s var(--ease);
}
.art__back .ic { width: 1.1rem; height: 1.1rem; transform: rotate(180deg); }
.art__back:hover { color: var(--lime); }
.art__cat {
display: inline-block; font-family: var(--font-mono); font-size: .76rem;
letter-spacing: .14em; text-transform: uppercase; color: var(--lime); margin-bottom: 1.2rem;
}
.art__title { font-size: clamp(2.2rem, 5.2vw, 4.6rem); margin-bottom: 1.5rem; }
.art__dek { font-size: clamp(1.1rem, 1.6vw, 1.35rem); color: var(--grey); max-width: 44rem; line-height: 1.5; margin-bottom: 2rem; }
.art__meta {
display: flex; flex-wrap: wrap; align-items: center; gap: 1.6rem;
padding-top: 1.6rem; border-top: 1px solid var(--line);
font-family: var(--font-mono); font-size: .82rem; color: var(--dim);
}
.art__meta > span { display: inline-flex; align-items: center; gap: .5rem; }
.art__meta .ic { width: 1.2rem; height: 1.2rem; }
.art__author { color: var(--bone) !important; font-family: var(--font-ui); font-weight: 500; }
.art__reviewed { color: var(--lime) !important; }
.art__reviewed .ic { width: 1.2rem; height: 1.2rem; color: var(--lime); }
.art__avatar {
display: inline-grid; place-items: center; width: 2rem; height: 2rem; border-radius: 50%;
background: var(--lime); color: var(--black); font-family: var(--font-disp); font-weight: 800;
font-size: .92rem; margin-right: .6rem;
}
.art__hero { margin: clamp(2.4rem,5vw,3.6rem) auto; border-radius: 16px; overflow: hidden; max-width: var(--wrap); }
.art__hero img { width: 100%; aspect-ratio: 16/8; object-fit: cover; }
.art__body {
display: grid; grid-template-columns: minmax(0,1fr) 19rem;
gap: clamp(2rem, 5vw, 5rem); align-items: start;
}
.art__content { max-width: 44rem; }
.art__content > * { margin-bottom: 1.5rem; }
.art__lead { font-size: 1.2rem; color: var(--bone); line-height: 1.65; }
.art__content h2 {
font-family: var(--font-disp); font-weight: 700; color: var(--bone);
font-size: clamp(1.5rem, 2.6vw, 2.1rem); letter-spacing: -.015em; line-height: 1.15;
margin-top: 2.8rem;
}
.art__content p { color: var(--white); line-height: 1.75; font-size: 1.06rem; }
.art__fig { margin: 2.4rem 0; border-radius: 14px; overflow: hidden; }
.art__fig img { width: 100%; aspect-ratio: 16/9; object-fit: cover; }
.art__fig figcaption {
margin-top: .8rem; font-family: var(--font-mono); font-size: .8rem;
color: var(--dim); letter-spacing: .02em;
}
.art__list { display: flex; flex-direction: column; gap: 1rem; }
.art__list li { display: flex; align-items: flex-start; gap: .8rem; color: var(--white); line-height: 1.6; }
.art__list .ic { width: 1.4rem; height: 1.4rem; margin-top: .15rem; flex: none; }
.art__list b { color: var(--bone); }
.art__quote {
position: relative; margin: 2.8rem 0; padding: 1.8rem 0 1.8rem 2rem;
border-left: 3px solid var(--lime);
font-family: var(--font-disp); font-weight: 700; font-size: clamp(1.3rem,2.2vw,1.9rem);
line-height: 1.3; color: var(--bone); letter-spacing: -.01em;
}
.art__quote-mark { position: absolute; left: -.2rem; top: -1.6rem; width: 2.2rem; height: 2.2rem; color: var(--lime-deep); }
.art__cta {
display: flex; align-items: center; justify-content: space-between; gap: 1.5rem; flex-wrap: wrap;
margin-top: 3rem; padding: clamp(1.6rem,3vw,2.2rem);
border-radius: 16px; border: 1px solid rgba(166,240,53,.2);
background: radial-gradient(120% 140% at 0% 0%, rgba(166,240,53,.1) 0%, transparent 55%), rgba(26,32,18,.5);
}
.art__cta-h { font-family: var(--font-disp); font-weight: 700; font-size: 1.4rem; color: var(--bone); margin-top: .5rem; letter-spacing: -.01em; }
.art__cta .kick { color: var(--lime); }
/* aside */
.art__aside { position: sticky; top: 6.5rem; display: flex; flex-direction: column; gap: 1.2rem; }
.art__card {
padding: 1.5rem; border: 1px solid var(--line); border-radius: 14px;
background: rgba(26,32,18,.42);
backdrop-filter: blur(12px) saturate(1.1); -webkit-backdrop-filter: blur(12px) saturate(1.1);
}
.art__card-h {
display: flex; align-items: center; gap: .5rem;
font-family: var(--font-mono); font-size: .76rem; letter-spacing: .1em;
text-transform: uppercase; color: var(--lime); margin-bottom: 1rem;
}
.art__card-h .ic { width: 1.2rem; height: 1.2rem; }
.art__share-row { display: flex; flex-wrap: wrap; gap: .6rem; }
.art__share-row a {
font-family: var(--font-mono); font-size: .8rem; color: var(--white);
padding: .45rem .8rem; border: 1px solid var(--line-2); border-radius: 100px;
transition: color .2s var(--ease), border-color .2s var(--ease);
}
.art__share-row a:hover { color: var(--lime); border-color: var(--lime); }
.art__key { display: flex; flex-direction: column; gap: .8rem; }
.art__key li { display: flex; align-items: flex-start; gap: .6rem; font-size: .92rem; color: var(--white); line-height: 1.45; }
.art__key .ic { width: 1.2rem; height: 1.2rem; margin-top: .1rem; flex: none; }
.art__authorcard { display: flex; gap: 1rem; align-items: flex-start; }
.art__avatar--lg { width: 3rem; height: 3rem; font-size: 1.3rem; margin: 0; flex: none; }
.art__bio { font-size: .9rem; color: var(--grey); line-height: 1.55; margin-top: .5rem; }
.related { padding-block: var(--sec); background: var(--ink); border-top: 1px solid var(--line); }
@media (max-width: 920px) {
.art__body { grid-template-columns: 1fr; }
.art__aside { position: static; flex-direction: row; flex-wrap: wrap; }
.art__aside .art__card { flex: 1; min-width: 220px; }
}
@media (max-width: 560px) { .art__aside { flex-direction: column; } }
/* ---------- Coach House page v11 (icons, lighter food hero) ---------- */
/* #2 lighter, more natural/appetising food hero (was too dark) */
.hero--ch .hero__bed {
object-position: center 55%;
filter: saturate(1.12) contrast(1.05) brightness(.74);
transform: scale(1.04);
}
.dishes__note .ic { width: 1.3rem; height: 1.3rem; vertical-align: -.3em; margin-right: .2rem; }
.dishes__note-sub { display: inline-block; margin-top: .5rem; text-transform: none; letter-spacing: 0; color: var(--dim); opacity: .8; font-size: .72rem; }
.visit__lab { display: inline-flex; align-items: center; gap: .45rem; }
.visit__lab .ic { width: 1.2rem; height: 1.2rem; }
.visit__rows span { display: inline-flex; align-items: center; gap: .45rem; }
.visit__rows span .ic { width: 1.1rem; height: 1.1rem; color: var(--lime); }
/* Coach House dish category icon + nutrition/order block (PDF p.6) */
.dish__cat { display: inline-flex; align-items: center; gap: .4rem; }
.dish__cat .ic { width: 1rem; height: 1rem; }
.nutri { margin-top: clamp(2.4rem,5vw,4rem); display: grid; grid-template-columns: 1.3fr 1fr; gap: clamp(2rem,4vw,4rem); align-items: start; }
.nutri__h { display: flex; align-items: center; gap: .55rem; font-size: 1.1rem; font-weight: 600; color: var(--bone); margin-bottom: 1.4rem; letter-spacing: -.01em; }
.nutri__h .ic { width: 1.3rem; height: 1.3rem; }
.nutri__order-h { display: block; font-family: var(--font-mono); font-size: .78rem; letter-spacing: .12em; text-transform: uppercase; color: var(--dim); margin-bottom: 1.4rem; }
.nutri__order .class__foot { margin-top: 0; border-top: 0; padding-top: 0; grid-template-columns: 1fr; gap: 1rem; }
@media (max-width: 880px) { .nutri { grid-template-columns: 1fr; gap: 2rem; } }
/* ---------- Article breadcrumb + blog listing page ---------- */
.art__crumb {
font-family: var(--font-mono); font-size: .76rem; letter-spacing: .04em;
color: var(--dim); margin-bottom: 1.4rem;
}
.art__crumb a { color: var(--grey); transition: color .2s var(--ease); }
.art__crumb a:hover { color: var(--lime); }
.art__crumb span { color: var(--bone); }
/* Programs showcase category icon + Branches spec icons (icon-consistency pass) */
.prog__cat { display: inline-flex; align-items: center; gap: .5rem; }
.prog__cat .ic { width: 1.1rem; height: 1.1rem; }
.branch__spec span { display: inline-flex; align-items: center; gap: .45rem; }
.branch__spec span .ic { width: 1.05rem; height: 1.05rem; color: var(--lime); }
/* Blog used as a full standalone page (articles/index.html) needs to clear the fixed nav */
.blog--page { padding-top: clamp(7rem, 12vh, 9.5rem); }
.blog--page .sec__head { max-width: 62rem; }
.post__grid--page { margin-top: clamp(1.4rem,2.6vw,2.2rem); }
.blog__soon {
margin-top: clamp(2rem,4vw,3rem); padding-top: clamp(1.6rem,3vw,2.2rem);
border-top: 1px solid var(--line); text-align: center;
font-family: var(--font-mono); font-size: .9rem; letter-spacing: .02em; color: var(--dim);
}
/* ---------- #section blocking: snap each section to the top of the screen ----------
Gentle "proximity" snap so sections present as blocks (no half-section landings),
without trapping the user. Desktop + motion-OK only. The pinned Programs showcase
(.show) is deliberately NOT a snap target so its scroll-driven sequence still works.
scroll-padding-top offsets the fixed nav so section tops are never hidden under it
(also fixes in-page anchor jumps landing under the nav). */
html { scroll-padding-top: 5rem; }
@media (min-width: 921px) and (prefers-reduced-motion: no-preference) {
html { scroll-snap-type: y proximity; }
.hero, .manifesto, .brand, .method, .classes, .member, .cine,
.branches, .coaches, .story, .voices, .house, .blog, .trial, .art, .related {
scroll-snap-align: start;
scroll-snap-stop: normal;
}
/* Tall sections: snap to their top, never force-trap mid-section. */
.member, .brand, .method, .house, .blog, .art { scroll-snap-stop: normal; }
}
/* v15: Thai dictionary-true line breaking (see _thai_zwsp.py + tcgThaiFlow in main.js).
Transparent wrapper: immune to descendant-span styling by design. */
span.thw{
display:inline !important;
font:inherit !important;
color:inherit !important;
letter-spacing:inherit !important;
margin:0 !important;
padding:0 !important;
white-space:nowrap !important;
}
/* v15.1 READABILITY BUMP (2026-07-10) — client-specific (see home.css note).
Article-page small tiers lifted for P Ake's 40-60+ audience. */
.kick{ font-size:clamp(.85rem,1.15vw,.92rem); }
.art__cat{ font-size:clamp(.85rem,1.15vw,.92rem); }
.art__crumb{ font-size:clamp(.85rem,1.15vw,.92rem); }
.art__meta{ font-size:clamp(.88rem,1.2vw,.95rem); }
.art__fig figcaption{ font-size:clamp(.88rem,1.2vw,.95rem); }
.post__cat{ font-size:clamp(.8rem,1.1vw,.86rem); }
.post__meta{ font-size:clamp(.85rem,1.15vw,.92rem); }
.art__share-row a{ font-size:clamp(.88rem,1.2vw,.95rem); }