/* ============================================================ KHUNPON MARTIAL ARTS — dark / rugged / fight-poster One stylesheet, no build step. Brand: charcoal + gold. ============================================================ */ /* ---------- Fonts (self-hosted) ---------- Typography brief (Yok, 2026-09-17): Saira Italic for English, Kanit Italic for Thai, on ALL text including paragraphs. Every face is unicode-range gated, so a page only downloads the scripts it actually contains. - Saira is a variable font: ONE file carries weights 100 to 900. - Oswald has no italic. Cyrillic headings use the upright file and the browser slants it (font-style:italic is inherited from body). PT Sans has a real italic, used for RU body. - Chinese uses system fonts and stays upright, see the I18N block. */ @font-face{font-family:'Saira';font-style:italic;font-weight:100 900;font-display:swap;src:url('/assets/fonts/saira-italic.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:'Kanit';font-style:italic;font-weight:400;font-display:swap;src:url('/assets/fonts/kanit-thai-italic-400.woff2') format('woff2');unicode-range:U+02D7, U+0303, U+0331, U+0E01-0E5B, U+200C-200D, U+25CC;} @font-face{font-family:'Kanit';font-style:italic;font-weight:500;font-display:swap;src:url('/assets/fonts/kanit-thai-italic-500.woff2') format('woff2');unicode-range:U+02D7, U+0303, U+0331, U+0E01-0E5B, U+200C-200D, U+25CC;} @font-face{font-family:'Kanit';font-style:italic;font-weight:600;font-display:swap;src:url('/assets/fonts/kanit-thai-italic-600.woff2') format('woff2');unicode-range:U+02D7, U+0303, U+0331, U+0E01-0E5B, U+200C-200D, U+25CC;} @font-face{font-family:'Kanit';font-style:italic;font-weight:700;font-display:swap;src:url('/assets/fonts/kanit-thai-italic-700.woff2') format('woff2');unicode-range:U+02D7, U+0303, U+0331, U+0E01-0E5B, U+200C-200D, U+25CC;} @font-face{font-family:'Kanit';font-style:italic;font-weight:800;font-display:swap;src:url('/assets/fonts/kanit-thai-italic-800.woff2') format('woff2');unicode-range:U+02D7, U+0303, U+0331, U+0E01-0E5B, U+200C-200D, U+25CC;} @font-face{font-family:'Oswald';font-style:normal;font-weight:200 700;font-display:swap;src:url('/assets/fonts/oswald-cyrillic.woff2') format('woff2');unicode-range:U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;} @font-face{font-family:'PT Sans';font-style:italic;font-weight:400;font-display:swap;src:url('/assets/fonts/pt-sans-cyrillic-italic-400.woff2') format('woff2');unicode-range:U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;} @font-face{font-family:'PT Sans';font-style:italic;font-weight:700;font-display:swap;src:url('/assets/fonts/pt-sans-cyrillic-italic-700.woff2') format('woff2');unicode-range:U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;} /* Stand-ins for the moment before the web fonts arrive. Oswald sets Russian at about 80% of Arial's width, PT Sans at about 88%, Saira between 95% and 106% depending on weight. Without these, a heading that fits on one line in the real font wrapped to two in the system fallback and the page jumped when the real font landed (layout shift 0.27 on /ru/schedule/, 0.40 on /blog/). These are the visitor's LOCAL font scaled to the measured width; nothing is downloaded. Ratios measured in Chromium against real page text, 2026-09-21. Re-measure if a font changes. */ @font-face{font-family:'Saira Fallback';font-style:italic;font-weight:100 400;src:local('Arial Italic'),local('Helvetica Neue Italic'),local('Roboto Italic'),local('Arial');size-adjust:106%;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:'Saira Fallback';font-style:italic;font-weight:500;src:local('Arial Italic'),local('Helvetica Neue Italic'),local('Roboto Italic'),local('Arial');size-adjust:99%;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:'Saira Fallback';font-style:italic;font-weight:600;src:local('Arial Bold Italic'),local('Helvetica Neue Bold Italic'),local('Roboto Bold Italic'),local('Arial Bold');size-adjust:97%;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:'Saira Fallback';font-style:italic;font-weight:700;src:local('Arial Bold Italic'),local('Helvetica Neue Bold Italic'),local('Roboto Bold Italic'),local('Arial Bold');size-adjust:96%;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:'Saira Fallback';font-style:italic;font-weight:800 900;src:local('Arial Bold Italic'),local('Helvetica Neue Bold Italic'),local('Roboto Bold Italic'),local('Arial Bold');size-adjust:95%;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:'Oswald Fallback';font-weight:200 500;src:local('Arial'),local('Helvetica Neue'),local('Roboto');size-adjust:77%;unicode-range:U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;} @font-face{font-family:'Oswald Fallback';font-weight:600;src:local('Arial Bold'),local('Helvetica Neue Bold'),local('Roboto Bold'),local('Arial');size-adjust:78%;unicode-range:U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;} @font-face{font-family:'Oswald Fallback';font-weight:700 900;src:local('Arial Bold'),local('Helvetica Neue Bold'),local('Roboto Bold'),local('Arial');size-adjust:81%;unicode-range:U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;} @font-face{font-family:'PT Sans Fallback';font-style:italic;font-weight:400;src:local('Arial Italic'),local('Helvetica Neue Italic'),local('Roboto Italic'),local('Arial');size-adjust:89%;unicode-range:U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;} @font-face{font-family:'PT Sans Fallback';font-style:italic;font-weight:700;src:local('Arial Bold Italic'),local('Helvetica Neue Bold Italic'),local('Roboto Bold Italic'),local('Arial Bold');size-adjust:85%;unicode-range:U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;} /* ---------- Tokens ---------- */ :root{ --ink:#0b0b0c; --ink-2:#0f0f11; --panel:#141416; --panel-2:#1b1b1f; --panel-3:#222227; --line:rgba(255,255,255,.09); --line-strong:rgba(255,255,255,.16); --gold:#d9b45a; --gold-bright:#f2cd6b; --gold-deep:#a8842f; --bone:#ece8df; --muted:#9a968c; --muted-2:#85827b; --blood:#c0341d; --maxw:1240px; --pad:clamp(1.25rem,5vw,4rem); /* Saira covers Latin in every role. After it: Oswald / PT Sans pick up Cyrillic, Kanit picks up Thai (and the baht sign on every page), then the CJK system fonts. */ --font-display:'Saira','Saira Fallback','Oswald','Oswald Fallback','Kanit','PingFang SC','Microsoft YaHei','Noto Sans SC',sans-serif; --font-head:'Saira','Saira Fallback','Oswald','Oswald Fallback','Kanit','PingFang SC','Microsoft YaHei','Noto Sans SC',sans-serif; --font-body:'Saira','Saira Fallback','PT Sans','PT Sans Fallback','Kanit','PingFang SC','Microsoft YaHei','Noto Sans SC',system-ui,sans-serif; --fw-display:800; /* Anton had one cut and needed no weight; Saira and Kanit need it said */ --notch:22px; --ease:cubic-bezier(.2,.7,.2,1); } /* ---------- Reset ---------- */ /* hidden means hidden, whatever display a component sets for itself (filters toggle this attribute) */ [hidden]{display:none !important} *,*::before,*::after{box-sizing:border-box;margin:0;padding:0} html{scroll-behavior:smooth;-webkit-text-size-adjust:100%} @media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}} body{ font-family:var(--font-body); font-style:italic; /* the brand faces are italics; zh opts out in the I18N block */ background:var(--ink); color:var(--bone); line-height:1.65; font-size:1.0625rem; overflow-x:hidden; -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility; } /* grain overlay */ body::before{ content:"";position:fixed;inset:0;z-index:9999;pointer-events:none;opacity:.05; 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='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E"); mix-blend-mode:overlay; } img{max-width:100%;height:auto;display:block} a{color:inherit;text-decoration:none} ul{list-style:none} button{font:inherit;cursor:pointer;border:0;background:none;color:inherit} :focus-visible{outline:2px solid var(--gold);outline-offset:3px} ::selection{background:var(--gold);color:#000} /* ---------- Helpers ---------- */ .container{max-width:var(--maxw);margin-inline:auto;padding-inline:var(--pad)} .section{padding-block:clamp(4rem,9vw,8rem);position:relative} .visually-hidden{position:absolute!important;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0} .skip-link{position:fixed;top:.5rem;left:.5rem;z-index:10001;background:var(--gold);color:#000;padding:.6rem 1rem;font-family:var(--font-head);font-weight:600;text-transform:uppercase;transform:translateY(-200%);transition:transform .2s} .skip-link:focus{transform:none} /* eyebrow / kicker */ .eyebrow{ display:inline-flex;align-items:center;gap:.6rem; font-family:var(--font-head);font-weight:600;text-transform:uppercase; letter-spacing:.28em;font-size:.78rem;color:var(--gold); } .eyebrow::before{content:"";width:26px;height:2px;background:var(--gold);display:inline-block} .eyebrow.center::after{content:"";width:26px;height:2px;background:var(--gold);display:inline-block} .section-title{ font-family:var(--font-display);text-transform:uppercase; line-height:.92;letter-spacing:.005em; font-size:clamp(2.2rem,6vw,4.4rem); margin-top:1rem; } .section-title .gold{color:var(--gold)} .lede{color:var(--muted);max-width:42rem;margin-top:1.25rem;font-size:1.075rem} .center{text-align:center} .center .eyebrow{justify-content:center} .center .lede{margin-inline:auto} .hero h1,.section-title,.page-hero h1,.cta-band h2,.prose h2,.prose h3{overflow-wrap:anywhere} /* Every display-role element, in one place, so the heavy weight is stated once. */ .section-title,.hero h1,.hero-meta b,.ticker span,.about-figure .badge,.prog .num,.prog h3,.stat b,.coach h4,.legend-item h3,.price-head h2,.price-row .amt,.tst .q,.cta-band h2,.page-hero h1,.prose h2,.sidecard h3{font-weight:var(--fw-display)} /* notched card edge (tactical / fight-card corners) */ .notch{ clip-path:polygon(0 0, calc(100% - var(--notch)) 0, 100% var(--notch), 100% 100%, var(--notch) 100%, 0 calc(100% - var(--notch))); } /* ---------- Buttons ---------- */ .btn{ --b:var(--gold); display:inline-flex;align-items:center;gap:.6rem; font-family:var(--font-head);font-weight:600;text-transform:uppercase;letter-spacing:.12em; font-size:.9rem;line-height:1;padding:1.05rem 1.7rem; background:var(--b);color:#0a0a0a;border:2px solid var(--b); clip-path:polygon(10px 0,100% 0,100% calc(100% - 10px),calc(100% - 10px) 100%,0 100%,0 10px); transition:transform .15s var(--ease),background .2s,color .2s,box-shadow .2s; white-space:nowrap; } .btn:hover{transform:translateY(-2px);box-shadow:0 12px 30px -12px rgba(217,180,90,.6)} /* Icons inside buttons. This rule used to target `.btn .ico`, a class no icon in the markup carries, so the WhatsApp glyph had NO size: 0x0 (invisible) in the header and hero, 50 to 80px in the sidebar card. */ .btn svg{width:1.15em;height:1.15em;fill:currentColor;flex:none} .btn svg[fill="none"]{fill:none} .btn--ghost{background:transparent;color:var(--bone);border-color:var(--line-strong)} .btn--ghost:hover{border-color:var(--gold);color:var(--gold);box-shadow:none} .btn--wa{--b:#25d366} .btn--lg{padding:1.2rem 2.1rem;font-size:1rem} .btn--block{display:flex;justify-content:center;width:100%} /* arrow link */ .arrow-link{ display:inline-flex;align-items:center;gap:.55rem;font-family:var(--font-head); font-weight:600;text-transform:uppercase;letter-spacing:.14em;font-size:.82rem;color:var(--gold); padding-block:.4rem; } .arrow-link svg{width:18px;height:18px;transition:transform .2s var(--ease)} .arrow-link:hover svg{transform:translateX(5px)} /* ============================================================ HEADER ============================================================ */ .site-header{ position:fixed;top:0;left:0;right:0;z-index:1000; transition:background .3s,border-color .3s,padding .3s; border-bottom:1px solid transparent; } .site-header.scrolled{ background:rgba(11,11,12,.82);backdrop-filter:blur(14px); border-bottom-color:var(--line); } .header-inner{ max-width:1360px;margin-inline:auto;padding:1.1rem var(--pad); display:flex;align-items:center;justify-content:space-between;gap:1.5rem; transition:padding .3s; } .scrolled .header-inner{padding-block:.75rem} .brand{display:flex;align-items:center;gap:.7rem;flex:none} .brand img{height:38px;width:auto} .brand-mark{display:none} .scrolled .brand img{height:32px} .nav{display:flex;align-items:center;gap:2rem} .nav-links{display:flex;align-items:center;gap:1.75rem} .nav-links a,.nav-links .drop-toggle{ font-family:var(--font-head);font-weight:500;text-transform:uppercase; letter-spacing:.1em;font-size:.83rem;color:var(--bone);position:relative;padding:.3rem 0; } .nav-links a::after{content:"";position:absolute;left:0;bottom:-2px;width:0;height:2px;background:var(--gold);transition:width .25s var(--ease)} .nav-links a:hover::after,.nav-links a[aria-current="page"]::after{width:100%} .nav-links a[aria-current="page"]{color:var(--gold)} .has-drop{position:relative} .drop-toggle{display:inline-flex;align-items:center;gap:.35rem} .drop-toggle svg{width:11px;height:11px;fill:currentColor;opacity:.7} .drop-menu{ position:absolute;top:calc(100% + 1.1rem);left:50%;transform:translateX(-50%) translateY(8px); background:var(--panel);border:1px solid var(--line);min-width:230px;padding:.5rem; opacity:0;visibility:hidden;transition:.2s var(--ease); } .has-drop:hover .drop-menu,.has-drop:focus-within .drop-menu,.has-drop.open .drop-menu{opacity:1;visibility:visible;transform:translateX(-50%) translateY(0)} .nav-links .drop-toggle[data-active]{color:var(--gold)} .drop-menu a{display:block;padding:.7rem .9rem;font-size:.8rem;border-left:2px solid transparent} .drop-menu a::after{display:none} .drop-menu a:hover{background:var(--panel-2);border-left-color:var(--gold);color:var(--gold)} /* A sub item sits under the item before it (MMA Team Tryouts under MMA): indented, smaller, gold. */ .drop-menu a.sub-item{padding-left:1.9rem;font-size:.72rem;color:var(--gold);position:relative} .drop-menu a.sub-item::before{content:"";position:absolute;left:1rem;top:50%;width:.5rem;height:1px;background:var(--gold);opacity:.7} .drop-menu{min-width:260px} .drop-menu li.sep-before{border-top:1px solid var(--line);margin-top:.4rem;padding-top:.4rem} .header-cta{display:flex;align-items:center;gap:.8rem} .burger{display:none;width:46px;height:46px;border:1px solid var(--line-strong);flex-direction:column;align-items:center;justify-content:center;gap:5px} .burger span{width:22px;height:2px;background:var(--bone);transition:.25s} .burger[aria-expanded="true"] span:nth-child(1){transform:translateY(7px) rotate(45deg)} .burger[aria-expanded="true"] span:nth-child(2){opacity:0} .burger[aria-expanded="true"] span:nth-child(3){transform:translateY(-7px) rotate(-45deg)} /* mobile drawer */ .drawer{ position:fixed;inset:0;z-index:999;background:var(--ink); padding:6rem var(--pad) 2rem;display:flex;flex-direction:column; transform:translateX(100%);transition:transform .35s var(--ease);overflow-y:auto; } .drawer.open{transform:none} .drawer a{font-family:var(--font-head);font-weight:600;text-transform:uppercase;letter-spacing:.06em; font-size:1.5rem;padding:.85rem 0;border-bottom:1px solid var(--line);color:var(--bone)} .drawer a.sub{font-size:1.05rem;padding-left:1rem;color:var(--muted)} .drawer .btn{margin-top:1.5rem} /* the menu's Book now looks like the header's: dark lettering, button size, not a menu row */ .drawer a.btn{font-size:1rem;letter-spacing:.12em;color:#0a0a0a;padding:1.15rem 1.7rem;border-bottom:2px solid var(--b);justify-content:center} /* while the menu is open the header is solid, so rows scrolled up do not show through behind the logo */ .drawer-open .site-header{background:var(--ink);border-bottom-color:var(--line)} .drawer-foot{margin-top:auto;padding-top:2rem;color:var(--muted);font-size:.85rem} /* ============================================================ HERO ============================================================ */ .hero{position:relative;min-height:100svh;display:flex;align-items:flex-end;overflow:hidden;isolation:isolate;padding-top:96px} .hero-media{position:absolute;inset:0;z-index:-2} .hero-media img,.hero-media video{width:100%;height:100%;object-fit:cover;filter:grayscale(.25) contrast(1.05) brightness(.62)} /* The video sits over the still and fades in once it is playing (main.js adds .is-on). */ .hero-media video{position:absolute;inset:0;opacity:0;transition:opacity 1s ease} .hero-media video.is-on{opacity:1} @media (prefers-reduced-motion:reduce){.hero-media video{display:none}} .hero::after{ /* gradient veil */ content:"";position:absolute;inset:0;z-index:-1; background: linear-gradient(180deg,rgba(11,11,12,.55) 0%,rgba(11,11,12,.15) 35%,rgba(11,11,12,.65) 78%,var(--ink) 100%), radial-gradient(120% 80% at 80% 20%,transparent 40%,rgba(11,11,12,.55) 100%); } .hero-inner{max-width:1360px;margin-inline:auto;width:100%;padding:0 var(--pad) clamp(3.5rem,8vw,6rem);position:relative} .hero h1{ font-family:var(--font-display);text-transform:uppercase; line-height:.86;letter-spacing:.005em; font-size:clamp(2.6rem,12.4vw,10rem);margin:1.2rem 0 0; text-shadow:0 4px 40px rgba(0,0,0,.5); } .hero h1 .gold{color:var(--gold);display:block} .hero p.sub{max-width:34rem;margin-top:1.4rem;font-size:1.15rem;color:#d8d4cb} .hero-actions{display:flex;flex-wrap:wrap;gap:1rem;margin-top:2rem} .hero-meta{display:flex;flex-wrap:wrap;gap:1.5rem 2.5rem;margin-top:2.6rem;padding-top:1.8rem;border-top:1px solid var(--line)} .hero-meta div{display:flex;flex-direction:column} .hero-meta b{font-family:var(--font-display);font-size:1.9rem;color:var(--gold);line-height:1} .hero-meta span{font-family:var(--font-head);text-transform:uppercase;letter-spacing:.14em;font-size:.7rem;color:var(--muted);margin-top:.4rem} .scroll-cue{position:absolute;left:var(--pad);bottom:1.4rem;writing-mode:vertical-rl;font-family:var(--font-head); text-transform:uppercase;letter-spacing:.3em;font-size:.65rem;color:var(--muted);display:flex;align-items:center;gap:.8rem} .scroll-cue::after{content:"";width:1px;height:40px;background:linear-gradient(var(--gold),transparent);animation:cue 1.8s var(--ease) infinite} @keyframes cue{0%{opacity:0;transform:scaleY(.2)}50%{opacity:1}100%{opacity:0;transform:scaleY(1) translateY(8px)}} /* ============================================================ MARQUEE TICKER ============================================================ */ .ticker{border-block:1px solid var(--line);background:var(--ink-2);overflow:hidden;padding:.9rem 0} .ticker-track{display:flex;gap:2.5rem;white-space:nowrap;width:max-content;animation:scroll 28s linear infinite} .ticker:hover .ticker-track{animation-play-state:paused} .ticker span{font-family:var(--font-display);text-transform:uppercase;font-size:1.5rem;letter-spacing:.02em;color:transparent;-webkit-text-stroke:1px var(--muted-2);display:flex;align-items:center;gap:2.5rem} .ticker span::after{content:"";width:9px;height:9px;background:var(--gold);transform:rotate(45deg);flex:none} @keyframes scroll{to{transform:translateX(-50%)}} @media (prefers-reduced-motion:reduce){.ticker-track{animation:none}} /* ============================================================ ABOUT / PHILOSOPHY ============================================================ */ .about-grid{display:grid;grid-template-columns:1.05fr .95fr;gap:clamp(2rem,5vw,5rem);align-items:center} .about-figure{position:relative} .about-figure img{width:100%;aspect-ratio:4/5;object-fit:cover} .about-figure .frame{position:absolute;inset:14px;border:1px solid var(--gold);pointer-events:none;mix-blend-mode:screen;opacity:.5} .about-figure .badge{position:absolute;right:-14px;bottom:-14px;background:var(--gold);color:#000;padding:1.1rem 1.3rem;font-family:var(--font-display);text-transform:uppercase;line-height:.9;text-align:center} .about-figure .badge b{display:block;font-size:2rem} .about-figure .badge span{font-size:.72rem;letter-spacing:.1em} .pullquote{font-family:var(--font-head);font-weight:500;font-size:clamp(1.3rem,2.4vw,1.8rem);line-height:1.4;color:var(--bone);border-left:3px solid var(--gold);padding-left:1.3rem;margin:1.8rem 0} .pullquote .thai{color:var(--gold);font-weight:600} .prose-block p{color:var(--muted);margin-top:1rem} .prose-block p:first-child{margin-top:1.5rem} /* ============================================================ PROGRAMS ============================================================ */ /* Five cards: three across, then two wider ones (a six-column grid, each card two columns wide, the last two three). Sunday Shred left the grid 2026-09-22: it is part of S&C. */ .prog-grid{display:grid;grid-template-columns:repeat(6,1fr);gap:1.25rem;margin-top:3rem} .prog-grid .prog{grid-column:span 2} .prog-grid .prog:nth-last-child(-n+2){grid-column:span 3} .prog{ position:relative;min-height:380px;display:flex;flex-direction:column;justify-content:flex-end; padding:1.6rem;overflow:hidden;background:var(--panel);border:1px solid var(--line); isolation:isolate; } .prog img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:-2;filter:grayscale(.4) contrast(1.05) brightness(.55);transition:transform .6s var(--ease),filter .4s} .prog::after{content:"";position:absolute;inset:0;z-index:-1;background:linear-gradient(180deg,rgba(11,11,12,.1) 0%,rgba(11,11,12,.45) 55%,rgba(11,11,12,.92) 100%)} .prog:hover img{transform:scale(1.06);filter:grayscale(.1) contrast(1.05) brightness(.62)} .prog .num{position:absolute;top:1.1rem;right:1.3rem;font-family:var(--font-display);font-size:1.1rem;color:var(--gold);opacity:.8} .prog h3{font-family:var(--font-display);text-transform:uppercase;font-size:1.9rem;line-height:.95} .prog p{color:#cfcbc2;font-size:.95rem;margin-top:.6rem;max-width:30ch} .prog .tag{font-family:var(--font-head);font-weight:600;text-transform:uppercase;letter-spacing:.16em;font-size:.68rem;color:var(--gold)} .prog .go{margin-top:1.1rem;display:inline-flex;align-items:center;gap:.5rem;font-family:var(--font-head);font-weight:600;text-transform:uppercase;letter-spacing:.12em;font-size:.76rem;color:var(--bone)} .prog .go svg{width:16px;height:16px;transition:transform .2s} .prog:hover .go{color:var(--gold)} .prog:hover .go svg{transform:translateX(4px)} .prog-full{grid-column:span 3} .prog .gold-corner{position:absolute;top:0;left:0;width:26px;height:26px;border-top:2px solid var(--gold);border-left:2px solid var(--gold);opacity:.7} /* ============================================================ STATS BAND ============================================================ */ .stats{background:var(--gold);color:#0a0a0a;position:relative;overflow:hidden} .stats .container{display:grid;grid-template-columns:repeat(4,1fr);gap:1rem;padding-block:clamp(2.5rem,5vw,4rem)} .stat{text-align:center;position:relative} .stat+.stat::before{content:"";position:absolute;left:0;top:50%;transform:translateY(-50%);height:60%;width:1px;background:rgba(0,0,0,.18)} .stat b{font-family:var(--font-display);font-size:clamp(2.6rem,6vw,4.2rem);line-height:.9;display:block} .stat span{font-family:var(--font-head);font-weight:600;text-transform:uppercase;letter-spacing:.14em;font-size:.78rem;margin-top:.5rem;display:block} /* ============================================================ COACHES ============================================================ */ /* Coaches are shown in three groups: BJJ / MMA, Muay Thai, Fitness. */ .coach-group{margin-top:3.5rem} .coach-group-title{font-family:var(--font-display);font-weight:var(--fw-display);text-transform:uppercase;font-size:clamp(1.3rem,2.4vw,1.9rem);line-height:1;color:var(--gold);display:flex;align-items:center;gap:1rem} .coach-group-title::after{content:"";flex:1;height:1px;background:var(--line-strong)} .coach-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:1.25rem;margin-top:3rem} .coach-group .coach-grid{margin-top:1.5rem} .coach{background:var(--panel);border:1px solid var(--line);overflow:hidden;display:flex;flex-direction:column;transition:border-color .3s,transform .3s} .coach:hover{border-color:var(--gold);transform:translateY(-4px)} .coach-photo{position:relative;aspect-ratio:3/4;overflow:hidden} .coach-photo img{width:100%;height:100%;object-fit:cover;object-position:top center;transition:transform .6s var(--ease)} .coach:hover .coach-photo img{transform:scale(1.05)} .coach-body{padding:1.4rem} .coach-role{font-family:var(--font-head);font-weight:600;text-transform:uppercase;letter-spacing:.14em;font-size:.7rem;color:var(--gold)} .coach h4{font-family:var(--font-display);text-transform:uppercase;font-size:1.7rem;line-height:.95;margin-top:.3rem} .coach .style{color:var(--muted);font-size:.9rem;margin-top:.2rem} .coach .ig{display:inline-flex;align-items:center;gap:.4rem;font-size:.8rem;color:var(--muted);margin-top:.8rem;overflow-wrap:anywhere} .coach .ig svg{flex:none} .coach .ig svg{width:15px;height:15px;fill:var(--muted)} .coach ul.creds{margin-top:1rem;display:flex;flex-direction:column;gap:.45rem} .coach ul.creds li{position:relative;padding-left:1.1rem;font-size:.9rem;color:#cfcbc2} .coach ul.creds li::before{content:"";position:absolute;left:0;top:.55em;width:7px;height:7px;background:var(--gold);transform:rotate(45deg)} .coach .chips{display:flex;flex-wrap:wrap;gap:.4rem;margin-top:1rem} .coach .chip{font-family:var(--font-head);text-transform:uppercase;letter-spacing:.08em;font-size:.66rem;color:var(--muted);border:1px solid var(--line-strong);padding:.32rem .55rem} /* ============================================================ SCHEDULE ============================================================ */ .table-wrap{overflow-x:auto;margin-top:2.5rem;border:1px solid var(--line)} table.schedule{width:100%;border-collapse:collapse;min-width:760px;font-size:.92rem} table.schedule th,table.schedule td{padding:.85rem .7rem;text-align:center;border:1px solid var(--line)} table.schedule thead th{background:var(--gold);color:#0a0a0a;font-family:var(--font-head);font-weight:700;text-transform:uppercase;letter-spacing:.08em;font-size:.78rem;position:sticky;top:0} table.schedule tbody th{background:var(--panel-2);font-family:var(--font-head);font-weight:600;white-space:nowrap;color:var(--gold);font-size:.82rem} table.schedule td{background:var(--panel);color:#d6d2c9} table.schedule td.cls{font-family:var(--font-head);font-weight:600;text-transform:uppercase;letter-spacing:.03em;font-size:.8rem} table.schedule td.open{background:repeating-linear-gradient(45deg,var(--ink-2),var(--ink-2) 8px,var(--panel) 8px,var(--panel) 16px);color:var(--muted);font-style:italic} /* The screen-reader-only "No class" label is position:absolute. Without a positioned cell to belong to, its containing block is the PAGE, so it escaped .table-wrap's scroll clipping and made phones scroll sideways (caught by qa-fonts.mjs). */ table.schedule td.open{position:relative} /* Phone timetable: one day at a time (client feedback 2026-09-23, after a reference design), with a toggle back to the full table. The list and toggle only exist below 880px; above it the table is the only view. */ .sched-toggle{display:none} .sched-list{display:none} @media (max-width:880px){ .sched-toggle{display:flex;gap:.4rem;margin-bottom:1.4rem} .sched-toggle button{flex:1;font-family:var(--font-head);font-weight:600;text-transform:uppercase;letter-spacing:.1em;font-size:.74rem;color:var(--muted);background:transparent;border:1px solid var(--line-strong);padding:.7rem .6rem;cursor:pointer} .sched-toggle button[aria-pressed="true"]{color:#0a0a0a;background:var(--gold);border-color:var(--gold)} .sched-list{display:block} #timetable .table-wrap{display:none} #timetable.sched-view-table .sched-list{display:none} #timetable.sched-view-table .table-wrap{display:block} } .sched-filters{display:grid;grid-template-columns:1fr 1fr;gap:1rem} .sched-filters label{display:grid;gap:.45rem;color:var(--muted);font-size:.95rem} .sched-filters select{width:100%;appearance:none;-webkit-appearance:none;background:var(--panel) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23ece8df' stroke-width='2'%3E%3Cpath d='M8 9l4-4 4 4M8 15l4 4 4-4'/%3E%3C/svg%3E") no-repeat right .8rem center/16px;color:var(--bone);border:1px solid var(--line-strong);padding:.95rem 2.4rem .95rem 1rem;font:inherit;font-size:1.1rem;font-style:normal} .sched-summary{display:flex;justify-content:space-between;align-items:center;gap:1rem;margin-top:1.4rem;padding-bottom:.9rem;border-bottom:1px solid var(--line-strong);color:var(--muted)} .sched-summary button{background:none;border:0;padding:0;color:var(--gold);font:inherit;cursor:pointer} .sched-day{border-bottom:1px solid var(--line-strong)} .sched-day summary{list-style:none;display:flex;justify-content:space-between;align-items:center;gap:1rem;padding:1.1rem 0;cursor:pointer} .sched-day summary::-webkit-details-marker{display:none} .sched-day-name{font-family:var(--font-head);font-weight:700;font-size:1.25rem;color:var(--gold)} .sched-day-count{color:var(--muted);display:inline-flex;align-items:center;gap:.7rem} .sched-day-count::after{content:"+";color:var(--gold);font-weight:700;font-size:1.2rem;line-height:1} .sched-day[open] .sched-day-count::after{content:"\2212"} .sched-day ul{list-style:none;margin:0 0 1rem;padding:0;display:grid;gap:.5rem} .sched-day li{display:grid;grid-template-columns:8.5rem 1fr;align-items:center;gap:1rem;background:var(--panel);padding:1rem 1.2rem} .sched-day li time{color:var(--gold);font-variant-numeric:tabular-nums;font-size:.95rem} .sched-day li a,.sched-day li span{color:var(--bone);font-size:1.05rem} .sched-day li a:hover{color:var(--gold)} .sched-empty{color:var(--muted);margin-top:1.5rem;text-align:center} table.schedule caption{caption-side:bottom;text-align:left;padding:.8rem .2rem 0;color:var(--muted);font-size:.82rem} table.schedule td.cls a{color:inherit;text-decoration:underline;text-decoration-color:rgba(255,255,255,.22);text-underline-offset:3px} table.schedule td.cls a:hover{text-decoration-color:currentColor} table.schedule abbr{text-decoration:none} .legend{display:grid;grid-template-columns:repeat(2,1fr);gap:1.25rem;margin-top:2.5rem} .legend-item{background:var(--panel);border:1px solid var(--line);padding:1.3rem 1.4rem} .legend-item h3{font-family:var(--font-display);text-transform:uppercase;font-size:1.3rem;color:var(--gold)} .legend-item p{color:var(--muted);font-size:.92rem;margin-top:.5rem} /* ============================================================ PRICING ============================================================ */ .price-grid{display:grid;grid-template-columns:1fr 1fr;gap:1.5rem;margin-top:3rem;align-items:start} .price-card{background:var(--panel);border:1px solid var(--line);padding:clamp(1.6rem,3vw,2.4rem);position:relative} .price-card.feature{border-color:var(--gold);box-shadow:0 0 0 1px var(--gold) inset} .price-card .gold-corner{position:absolute;top:0;right:0;width:30px;height:30px;border-top:2px solid var(--gold);border-right:2px solid var(--gold)} .price-head{display:flex;align-items:baseline;justify-content:space-between;gap:1rem;border-bottom:1px solid var(--line);padding-bottom:1.2rem;margin-bottom:1.2rem} .price-head h2{font-family:var(--font-display);text-transform:uppercase;font-size:2rem;line-height:.95} .price-head .sub{font-family:var(--font-head);text-transform:uppercase;letter-spacing:.12em;font-size:.7rem;color:var(--gold)} .price-rows{display:flex;flex-direction:column} .price-row{display:flex;align-items:baseline;justify-content:space-between;gap:1rem;padding:.85rem 0;border-bottom:1px dashed var(--line)} .price-row:last-child{border-bottom:0} .price-row .what{font-family:var(--font-head);font-weight:600;text-transform:uppercase;letter-spacing:.04em;font-size:.95rem} .price-row .what small{display:block;font-family:var(--font-body);font-weight:400;text-transform:none;letter-spacing:0;color:var(--muted);font-size:.8rem;margin-top:.15rem} .price-row .amt{font-family:var(--font-display);font-size:1.5rem;color:var(--gold);white-space:nowrap} .price-note{color:var(--muted-2);font-size:.85rem;margin-top:2rem;text-align:center} /* Unlimited Access Memberships: three cards, names long enough that the head stacks instead of sitting side by side. The check line says every membership includes open gym access. */ .price-grid--3{grid-template-columns:repeat(3,1fr);align-items:stretch} .price-card--member .price-head{flex-direction:column;align-items:flex-start;gap:.4rem} .price-head h3{font-family:var(--font-display);font-weight:var(--fw-display);text-transform:uppercase;font-size:1.7rem;line-height:.95;min-height:1.9em} .price-card--member .price-head{min-height:5.4rem;align-items:flex-start} .price-card--member .price-what{line-height:1.4;min-height:2.8em} .price-what{font-family:var(--font-head);font-weight:600;text-transform:uppercase;letter-spacing:.06em;font-size:.8rem;color:var(--bone)} .price-incl{display:flex;align-items:center;gap:.5rem;color:var(--muted);font-size:.85rem;margin-top:.55rem;padding-bottom:1.1rem;border-bottom:1px solid var(--line)} .price-incl svg{width:16px;height:16px;color:var(--gold);flex:none} /* ============================================================ TESTIMONIALS ============================================================ */ /* Instagram: six tiles across; on a phone a scroll-snap row that swipes like a slideshow. The tiles are lazy-loaded WebP served with the site and plain links to the posts; nothing loads from Instagram (see fetch-instagram.mjs). */ .ig-section{padding-block:clamp(3rem,6vw,5rem)} .ig-head{display:flex;align-items:flex-end;justify-content:space-between;gap:1.5rem;flex-wrap:wrap} .ig-head .section-title{font-size:clamp(1.6rem,3.4vw,2.6rem)} .ig-head .btn{padding:.8rem 1.1rem;font-size:.78rem} .ig-row{display:grid;grid-template-columns:repeat(6,1fr);gap:.6rem;margin-top:1.8rem} .ig-tile{position:relative;display:block;aspect-ratio:1;overflow:hidden;background:var(--panel);border:1px solid var(--line)} .ig-tile img{width:100%;height:100%;object-fit:cover;display:block;transition:transform .5s var(--ease),filter .3s} .ig-tile:hover img{transform:scale(1.04);filter:brightness(.8)} .ig-play{position:absolute;top:.5rem;right:.5rem;width:26px;height:26px;border-radius:50%;background:rgba(0,0,0,.55);display:flex;align-items:center;justify-content:center} .ig-play svg{width:14px;height:14px;fill:#fff} .ig-date{position:absolute;left:0;right:0;bottom:0;padding:.45rem .6rem;font-family:var(--font-head);font-weight:600;text-transform:uppercase;letter-spacing:.1em;font-size:.6rem;color:var(--bone);background:linear-gradient(transparent,rgba(0,0,0,.75));opacity:0;transition:opacity .25s} .ig-tile:hover .ig-date,.ig-tile:focus-visible .ig-date{opacity:1} @media (max-width:1080px){.ig-row{grid-template-columns:repeat(3,1fr)}} @media (max-width:620px){ .ig-row{display:flex;gap:.6rem;overflow-x:auto;scroll-snap-type:x mandatory;-webkit-overflow-scrolling:touch;scrollbar-width:none;margin-inline:calc(-1 * var(--pad));padding-inline:var(--pad);padding-bottom:.5rem} .ig-row::-webkit-scrollbar{display:none} .ig-tile{flex:0 0 72vw;scroll-snap-align:center} .ig-date{opacity:1} } .tst-grid{columns:3;column-gap:1.25rem;margin-top:3rem} .tst{break-inside:avoid;background:var(--panel);border:1px solid var(--line);padding:1.6rem;margin-bottom:1.25rem;position:relative} .tst .q{font-family:var(--font-display);font-size:3rem;color:var(--gold);line-height:.5;opacity:.35;height:1.1rem;display:block} .tst p{color:#d6d2c9;font-size:.97rem;margin-top:.6rem} /* Homepage reviews are clamped to four lines with a "Read more" that main.js reveals only when the text is actually cut. Without JavaScript (no .js on ) the full review shows. */ .js .tst--clamp p{display:-webkit-box;-webkit-line-clamp:4;-webkit-box-orient:vertical;overflow:hidden} .js .tst--clamp.is-open p{display:block;-webkit-line-clamp:none;overflow:visible} .tst-more{margin-top:.6rem;background:none;border:0;padding:0;font-family:var(--font-head);font-weight:600;text-transform:uppercase;letter-spacing:.12em;font-size:.72rem;color:var(--gold);cursor:pointer} .tst-more:hover{color:var(--gold-bright)} /* Coaches teaser on the homepage */ .coach-teaser{display:grid;grid-template-columns:1fr .9fr;gap:clamp(2rem,5vw,5rem);align-items:center} .coach-teaser-p{color:#cbc7be;margin-top:1.2rem;max-width:40rem} .coach-teaser .btn{margin-top:1.6rem} .coach-teaser-figure{position:relative;margin:0;border:1px solid var(--line)} .coach-teaser-figure img{width:100%;height:100%;aspect-ratio:4/3;object-fit:cover;display:block} .coach-teaser-figure figcaption{position:absolute;left:0;bottom:0;background:var(--gold);color:#0a0a0a;padding:.9rem 1.2rem;display:flex;align-items:baseline;gap:.5rem} .coach-teaser-figure figcaption b{font-family:var(--font-display);font-weight:var(--fw-display);font-size:2rem;line-height:1} .coach-teaser-figure figcaption span{font-family:var(--font-head);font-weight:600;text-transform:uppercase;letter-spacing:.12em;font-size:.7rem} .tst .who{display:flex;align-items:center;gap:.6rem;margin-top:1.1rem;font-family:var(--font-head);text-transform:uppercase;letter-spacing:.1em;font-size:.74rem} .tst .who b{color:var(--gold);font-weight:600} .tst .who span{color:var(--muted)} .tst .stars{color:var(--gold);letter-spacing:.15em;font-size:.8rem} /* ============================================================ CTA / LOCATION ============================================================ */ .cta-band{position:relative;overflow:hidden;isolation:isolate;text-align:center} .cta-band img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:-2;filter:grayscale(.5) brightness(.32)} .cta-band::after{content:"";position:absolute;inset:0;z-index:-1;background:radial-gradient(80% 120% at 50% 0%,rgba(168,132,47,.25),transparent 60%),linear-gradient(180deg,rgba(11,11,12,.7),rgba(11,11,12,.85))} .cta-band h2{font-family:var(--font-display);text-transform:uppercase;font-size:clamp(2.5rem,8vw,6rem);line-height:.9} .cta-band h2 .gold{color:var(--gold)} .cta-band p{color:#d8d4cb;max-width:38rem;margin:1.2rem auto 0} .cta-band .hero-actions{justify-content:center} .loc-grid{display:grid;grid-template-columns:1fr 1fr;gap:0;border:1px solid var(--line);margin-top:3rem} .loc-info{padding:clamp(1.8rem,4vw,3rem);display:flex;flex-direction:column;gap:1.5rem} .loc-row{display:flex;gap:1rem;align-items:flex-start} .loc-row svg{width:22px;height:22px;fill:var(--gold);flex:none;margin-top:.15rem} .loc-row .loc-lbl{font-family:var(--font-head);font-weight:600;text-transform:uppercase;letter-spacing:.1em;font-size:.74rem;color:var(--muted)} .loc-row p,.loc-row a{font-size:1.02rem;margin-top:.2rem;color:var(--bone)} .loc-row a:hover{color:var(--gold)} .loc-map{min-height:340px;position:relative} .loc-map iframe{position:absolute;inset:0;width:100%;height:100%;border:0;filter:grayscale(.6) invert(.92) contrast(.9)} /* ============================================================ PAGE HERO (interior) ============================================================ */ .page-hero{position:relative;padding:clamp(8rem,16vw,11rem) 0 clamp(3rem,6vw,5rem);overflow:hidden;isolation:isolate;border-bottom:1px solid var(--line)} .page-hero img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:-2;filter:grayscale(.4) brightness(.4)} .page-hero::after{content:"";position:absolute;inset:0;z-index:-1;background:linear-gradient(180deg,rgba(11,11,12,.55),rgba(11,11,12,.8))} .page-hero h1{font-family:var(--font-display);text-transform:uppercase;line-height:.9;font-size:clamp(2.8rem,9vw,6.5rem);margin-top:.8rem} .page-hero h1 .gold{color:var(--gold)} .page-hero p{color:#d8d4cb;max-width:40rem;margin-top:1.1rem;font-size:1.1rem} .crumbs{font-family:var(--font-head);text-transform:uppercase;letter-spacing:.16em;font-size:.72rem;color:var(--muted)} .crumbs a:hover{color:var(--gold)} .crumbs span{color:var(--gold)} /* ---------- Prose (article pages) ---------- */ .layout{display:grid;grid-template-columns:1fr 320px;gap:clamp(2rem,5vw,4rem);align-items:start} .layout>*{min-width:0} .prose h2{font-family:var(--font-display);text-transform:uppercase;font-size:clamp(1.8rem,3.6vw,2.6rem);line-height:1;margin:2.6rem 0 0;color:var(--bone)} .prose h2:first-child{margin-top:0} .prose h2 .gold{color:var(--gold)} .prose h3{font-family:var(--font-head);font-weight:600;text-transform:uppercase;letter-spacing:.04em;font-size:1.25rem;margin:1.8rem 0 0;color:var(--gold)} .prose p{margin-top:1.1rem;color:#cbc7be;max-width:42rem} .prose .figure{margin:2rem 0;border:1px solid var(--line)} .prose .figure img{width:100%;aspect-ratio:16/10;object-fit:cover} .subprograms{display:grid;grid-template-columns:repeat(3,1fr);gap:1.25rem;margin-top:1.8rem} .subprog{background:var(--panel);border:1px solid var(--line);padding:1.5rem} .subprog h3{margin-top:0;color:var(--gold)} .subprog p{color:var(--muted);font-size:.92rem;margin-top:.6rem} /* The sidebar: the card and, below it, the Gallery panel (2026-09-25). The pair is pinned while the article scrolls only where the screen is tall enough to show all of it; on a laptop it scrolls with the page, so the gallery's lower edge is never cut off. */ .side-stack{display:flex;flex-direction:column;gap:1.25rem;min-width:0} @media (min-width:1081px) and (min-height:960px){.side-stack{position:sticky;top:90px}} .sidecard{background:var(--panel);border:1px solid var(--line);padding:1.6rem} .sidecard h3{font-family:var(--font-display);text-transform:uppercase;font-size:1.5rem;color:var(--gold)} .sidecard ul{margin:1rem 0;display:flex;flex-direction:column;gap:.6rem} .sidecard li{display:flex;gap:.6rem;font-size:.92rem;color:#cbc7be} .sidecard li svg{width:18px;height:18px;fill:var(--gold);flex:none} /* Personal training: a callout of its own, not a caption over the photos */ .pt-callout{margin-top:1.4rem;padding:1rem 1.1rem 1.05rem;display:flex;gap:.85rem;align-items:flex-start; background:linear-gradient(135deg,rgba(217,180,90,.13),rgba(217,180,90,.04));border:1px solid rgba(217,180,90,.38);border-left:3px solid var(--gold)} .pt-ico{flex:none;width:38px;height:38px;display:grid;place-items:center;background:var(--gold);color:#0a0a0a; clip-path:polygon(7px 0,100% 0,100% calc(100% - 7px),calc(100% - 7px) 100%,0 100%,0 7px)} .pt-ico svg{width:20px;height:20px} .pt-callout p{font-family:var(--font-head);font-weight:700;text-transform:uppercase;letter-spacing:.04em;font-size:1.02rem;line-height:1.2;color:var(--bone)} .pt-callout a{display:inline-block;margin-top:.5rem;color:var(--gold);font-family:var(--font-head);font-weight:600;text-transform:uppercase;letter-spacing:.1em;font-size:.74rem} .pt-callout a svg{width:14px;height:14px;vertical-align:-2px;margin-left:.1rem} .pt-callout a:hover{color:var(--gold-bright)} .nowrap{white-space:nowrap} .coach-group{scroll-margin-top:100px} /* Gallery: a two-up carousel (three-up on a tablet, one and a peek on a phone). Without JavaScript it is a row that scrolls sideways and each photo opens full size; gallery.js adds the arrows, the position bars and the lightbox. */ .side-gallery{background:var(--panel);border:1px solid var(--line);padding:1.4rem 1.6rem 1.5rem;scroll-margin-top:100px} .side-gallery h3{font-family:var(--font-display);font-weight:var(--fw-display);text-transform:uppercase;font-size:1.5rem;color:var(--gold)} .pg{position:relative;margin-top:1rem} .pg-track{display:grid;grid-auto-flow:column;grid-auto-columns:calc((100% - .6rem) / 2);gap:.6rem;overflow-x:auto; scroll-snap-type:x mandatory;scroll-behavior:smooth;scrollbar-width:none;overscroll-behavior-x:contain;list-style:none;margin:0;padding:0} .pg-track::-webkit-scrollbar{display:none} .pg-track li{scroll-snap-align:start;min-width:0} .pg-tile{display:block;overflow:hidden;border:1px solid var(--line);cursor:zoom-in} .pg-tile img{width:100%;height:auto;aspect-ratio:1;object-fit:cover;filter:grayscale(.25);transition:filter .3s,transform .4s var(--ease)} .pg-tile:hover img,.pg-tile:focus-visible img{filter:none;transform:scale(1.04)} .pg-tile:focus-visible{outline:2px solid var(--gold);outline-offset:2px} .pg-arrow{position:absolute;top:50%;transform:translateY(-50%);z-index:2;width:30px;height:30px;display:grid;place-items:center;border:0;cursor:pointer; background:var(--gold);color:#0a0a0a;clip-path:polygon(6px 0,100% 0,100% calc(100% - 6px),calc(100% - 6px) 100%,0 100%,0 6px);transition:opacity .2s} .pg-arrow svg{width:15px;height:15px} .pg-prev{left:-15px}.pg-prev svg{transform:scaleX(-1)}.pg-next{right:-15px} .pg-dots{display:flex;gap:.4rem;justify-content:center;margin-top:.8rem;min-height:3px} .pg-dots i{width:22px;height:3px;background:var(--line-strong);transition:background .2s}.pg-dots i.on{background:var(--gold)} @media (max-width:1080px){.pg-track{grid-auto-columns:calc((100% - 1.2rem) / 3)}.pg-prev{left:-10px}.pg-next{right:-10px}} @media (max-width:600px){.pg-track{grid-auto-columns:78%}} /* Lightbox (gallery.js): a , so focus stays inside and Esc closes it */ .lb{position:fixed;inset:0;width:100%;height:100%;max-width:none;max-height:none;margin:0;border:0;padding:1rem clamp(.75rem,3vw,2rem); background:rgba(8,8,9,.97);color:var(--bone);display:none;grid-template-rows:auto 1fr auto;overscroll-behavior:contain} .lb[open]{display:grid} .lb::backdrop{background:rgba(8,8,9,.6)} .lb-top{display:flex;justify-content:space-between;align-items:center;font-family:var(--font-head);letter-spacing:.14em;font-size:.8rem;text-transform:uppercase;color:var(--muted)} .lb-top b{color:var(--gold);font-weight:700} .lb-x{width:46px;height:46px;border:1px solid var(--line-strong);display:grid;place-items:center;color:var(--bone);background:none;cursor:pointer} .lb-x:hover{border-color:var(--gold);color:var(--gold)} .lb-x svg{width:22px;height:22px} .lb-stage{position:relative;display:grid;place-items:center;min-height:0;touch-action:pan-y} .lb-stage img{max-width:100%;max-height:calc(100vh - 170px);max-height:calc(100dvh - 170px);width:auto;height:auto;object-fit:contain;border:1px solid var(--line);user-select:none;-webkit-user-drag:none} .lb-nav{width:54px;height:54px;display:grid;place-items:center;background:var(--gold);color:#0a0a0a;border:0;cursor:pointer; clip-path:polygon(9px 0,100% 0,100% calc(100% - 9px),calc(100% - 9px) 100%,0 100%,0 9px)} .lb-nav:hover{background:var(--gold-bright)} .lb-nav svg{width:24px;height:24px}.lb-nav.lb-prev svg{transform:scaleX(-1)} .lb-stage .lb-nav{position:absolute;top:50%;transform:translateY(-50%)}.lb-stage .lb-prev{left:0}.lb-stage .lb-next{right:0} .lb-ctrl{display:flex;align-items:center;justify-content:center;gap:1rem;margin-top:1rem}.lb-ctrl .lb-nav{display:none} .lb-dots{display:flex;gap:.5rem}.lb-dots i{width:34px;height:4px;background:var(--line-strong)}.lb-dots i.on{background:var(--gold)} @media (max-width:760px){.lb-stage .lb-nav{display:none}.lb-ctrl .lb-nav{display:grid;width:46px;height:46px}.lb-dots i{width:22px} .lb-stage img{max-height:calc(100vh - 230px);max-height:calc(100dvh - 230px)}} /* ============================================================ FOOTER ============================================================ */ .site-footer{background:var(--ink-2);border-top:1px solid var(--line);padding-block:clamp(3rem,6vw,5rem) 2rem} .foot-grid{display:grid;grid-template-columns:1.4fr 1fr 1fr 1.2fr;gap:2.5rem} .foot-brand img{width:min(100%,300px);height:auto;margin-bottom:1.2rem} .foot-brand p{color:var(--muted);font-size:.92rem;max-width:26rem} .foot-col h3{font-family:var(--font-head);font-weight:600;text-transform:uppercase;letter-spacing:.16em;font-size:.74rem;color:var(--gold);margin-bottom:1.1rem} .foot-col a,.foot-col p{display:block;color:var(--muted);font-size:.93rem;padding:.32rem 0} .foot-col a:hover{color:var(--gold)} .socials{display:flex;gap:.7rem;margin-top:1.3rem} .socials a{width:42px;height:42px;border:1px solid var(--line-strong);display:flex;align-items:center;justify-content:center;transition:.2s} .socials a:hover{border-color:var(--gold);background:var(--gold)} .socials svg{width:18px;height:18px;fill:var(--bone)} .socials a:hover svg{fill:#000} .foot-bottom{max-width:var(--maxw);margin:3rem auto 0;padding:1.5rem var(--pad) 0;border-top:1px solid var(--line);display:flex;flex-wrap:wrap;gap:1rem;justify-content:space-between;align-items:center;color:var(--muted-2);font-size:.82rem} .foot-bottom a:hover{color:var(--gold)} /* ============================================================ COOKIE BANNER ============================================================ */ .cookie{position:fixed;left:1rem;right:1rem;bottom:1rem;z-index:1200;max-width:520px;margin-inline:auto;background:var(--panel);border:1px solid var(--line-strong);padding:1.3rem 1.4rem;transform:translateY(160%);transition:transform .4s var(--ease)} .cookie.show{transform:none} .cookie p{font-size:.88rem;color:var(--muted)} .cookie p a{color:var(--gold);text-decoration:underline} .cookie-actions{display:flex;gap:.7rem;margin-top:1rem} .cookie .btn{padding:.7rem 1.1rem;font-size:.78rem} /* ============================================================ REVEAL ============================================================ */ .reveal{opacity:0;transform:translateY(26px);transition:opacity .7s var(--ease),transform .7s var(--ease)} .reveal.in{opacity:1;transform:none} @media (prefers-reduced-motion:reduce){.reveal{opacity:1;transform:none}} /* ============================================================ I18N — per-script typographic adjustments + language switcher ============================================================ */ /* Display weight per script. Saira and Kanit Italic go to 800. Oswald stops at 700, and the CJK system fonts have no heavier cut than bold. */ html[lang="ru"],html[lang="zh"]{--fw-display:700} /* Chinese stays upright: a slanted CJK glyph is browser-faked and reads as a rendering fault. Latin words and numbers inside still render in Saira Italic, because the family has no upright face for font matching to prefer. */ html[lang="zh"] body{font-style:normal} /* Russian interior titles carry very long single words ("конфиденциальности", 18 letters). */ html[lang="ru"] .page-hero h1{font-size:clamp(2.1rem,8vw,5.6rem)} /* Thai/CJK: relax the tight Latin display tracking and give headings room so tone marks / glyphs don't clip. */ html[lang="th"] .eyebrow,html[lang="th"] .nav-links a,html[lang="th"] .btn,html[lang="th"] .arrow-link,html[lang="th"] .coach-role,html[lang="th"] table.schedule th,html[lang="th"] .price-row .what{letter-spacing:.03em} html[lang="th"] .hero h1,html[lang="th"] .section-title,html[lang="th"] .page-hero h1,html[lang="th"] .cta-band h2,html[lang="th"] .prose h2,html[lang="th"] .prog h3,html[lang="th"] .coach h4{line-height:1.14;letter-spacing:0} html[lang="zh"] .hero h1,html[lang="zh"] .section-title,html[lang="zh"] .page-hero h1,html[lang="zh"] .cta-band h2,html[lang="zh"] .prose h2{line-height:1.12;letter-spacing:.02em} html[lang="zh"]{line-height:1.8} html[lang="zh"] .hero p.sub,html[lang="zh"] .lede,html[lang="zh"] .prose p{line-height:1.95} /* Language switcher (header) */ .lang-switch{position:relative} .lang-switch__btn{display:inline-flex;align-items:center;gap:.45rem;font-family:var(--font-head);font-weight:600;text-transform:uppercase;letter-spacing:.1em;font-size:.8rem;color:var(--bone);border:1px solid var(--line-strong);padding:.6rem .8rem;line-height:1} .lang-switch__btn svg{width:11px;height:11px;fill:currentColor;opacity:.7} .lang-switch__btn:hover{border-color:var(--gold);color:var(--gold)} .lang-switch__menu{position:absolute;top:calc(100% + .6rem);right:0;background:var(--panel);border:1px solid var(--line);min-width:160px;padding:.4rem;opacity:0;visibility:hidden;transform:translateY(8px);transition:.2s var(--ease);z-index:30} .lang-switch.open .lang-switch__menu{opacity:1;visibility:visible;transform:none} .lang-switch__menu a{display:block;padding:.55rem .7rem;font-size:.9rem;color:var(--bone);border-left:2px solid transparent} .lang-switch__menu a:hover{background:var(--panel-2);border-left-color:var(--gold);color:var(--gold)} .lang-switch__menu a[aria-current="true"]{color:var(--gold)} .drawer-langs{display:flex;flex-wrap:wrap;gap:.5rem;margin-top:1.6rem;padding-top:1.4rem;border-top:1px solid var(--line)} .drawer-langs a{font-family:var(--font-head);text-transform:uppercase;letter-spacing:.06em;font-size:.82rem;border:1px solid var(--line-strong);padding:.5rem .8rem;color:var(--bone)} .drawer-langs a[aria-current="true"]{background:var(--gold);color:#0a0a0a;border-color:var(--gold)} /* ============================================================ RESPONSIVE ============================================================ */ /* The scroll cue sits in the gutter left of the content column. Below this width there is no gutter and it lands on top of the hero stats. */ @media (max-width:1399px){.scroll-cue{display:none}} /* Full logo + five nav items + language switch + Book button need about 1240px (Russian is the widest). Below that the header ran off the right edge, so the nav folds into the drawer here, not at 880. The drawer carries the same links and the language chips. */ /* Six nav items (Blog added 2026-09-21) no longer fit beside the full-height logo on a 1280 or 1366 laptop. Rather than fold the menu away on the commonest laptop widths, the header tightens. */ @media (max-width:1400px){ .brand img{height:30px} .nav-links{gap:1.2rem} .nav-links a,.nav-links .drop-toggle{letter-spacing:.06em} } @media (max-width:1240px){ .nav,.header-cta .lang-switch{display:none} .burger{display:flex} } @media (max-width:1080px){ .nav-links{gap:1.25rem} .prog-grid,.coach-grid,.subprograms{grid-template-columns:repeat(2,1fr)} .prog-grid .prog,.prog-grid .prog:nth-last-child(-n+2){grid-column:span 1} .prog-grid .prog:last-child{grid-column:span 2} .price-grid--3{grid-template-columns:1fr} .prog-full{grid-column:span 2} .tst-grid{columns:2} .layout{grid-template-columns:1fr} } @media (max-width:880px){ .nav,.header-cta .btn--ghost,.header-cta .lang-switch,.brand-full{display:none} .brand-mark{display:block} .burger{display:flex} .header-cta .btn{padding:.8rem 1.1rem;font-size:.78rem} .about-grid,.coach-teaser{grid-template-columns:1fr} .about-figure{max-width:420px;margin-inline:auto;order:-1} .stats .container{grid-template-columns:1fr 1fr;gap:2rem} .stat:nth-child(3)::before,.stat:nth-child(2)::before{display:none} .loc-grid{grid-template-columns:1fr} .foot-grid{grid-template-columns:1fr 1fr} } @media (max-width:620px){ .prog-grid,.coach-grid,.subprograms{grid-template-columns:1fr} .prog-grid .prog,.prog-grid .prog:nth-last-child(-n+2),.prog-grid .prog:last-child{grid-column:span 1} .prog-full{grid-column:span 1} .price-grid{grid-template-columns:1fr} .tst-grid{columns:1} .legend{grid-template-columns:1fr} .foot-grid{grid-template-columns:1fr} .hero-meta b{font-size:1.5rem} /* A long label (RU: "Запишитесь на первую тренировку") must wrap, not run off a phone. */ .hero-actions .btn,.btn--lg,.btn--block{white-space:normal;text-align:center;line-height:1.25} .prog{min-height:320px} } /* ============================================================ BLOG: post cards (homepage strip, blog index, related posts) and the article page ============================================================ */ .post-list{margin-top:3rem} .post-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:1.25rem} .post-card{display:flex;flex-direction:column;background:var(--panel);border:1px solid var(--line);overflow:visible;transition:border-color .3s,transform .3s} .post-card:hover{border-color:var(--gold);transform:translateY(-4px)} .post-card-photo{display:block;aspect-ratio:3/2;overflow:hidden} .post-card h2 a,.post-card h3 a,.post-feature h2 a{color:inherit} .post-card h2 a:hover,.post-card h3 a:hover,.post-feature h2 a:hover{color:var(--gold)} .post-card-foot{margin-top:auto;padding-top:.6rem;display:flex;align-items:center;justify-content:space-between;gap:1rem} .post-card-photo img{width:100%;height:100%;object-fit:cover;transition:transform .6s var(--ease)} .post-card:hover .post-card-photo img{transform:scale(1.04)} .post-card-body{padding:1.5rem;display:flex;flex-direction:column;gap:.7rem;min-width:0} .post-card h2,.post-card h3{font-family:var(--font-display);font-weight:var(--fw-display);text-transform:uppercase;font-size:1.35rem;line-height:1.05;overflow-wrap:anywhere} .post-card p{color:var(--muted);font-size:.95rem} .post-card .go{display:inline-flex;align-items:center;gap:.5rem;font-family:var(--font-head);font-weight:600;text-transform:uppercase;letter-spacing:.12em;font-size:.76rem;color:var(--bone)} .post-card .go svg{width:16px;height:16px;transition:transform .2s} .post-card:hover .go{color:var(--gold)} .post-card:hover .go svg{transform:translateX(4px)} .post-meta{font-family:var(--font-head);font-weight:600;text-transform:uppercase;letter-spacing:.12em;font-size:.72rem;color:var(--gold)} /* Blog index: the newest story large, then a filter row, then the grid, then "follow the gym". */ .post-feature{display:grid;grid-template-columns:1.3fr 1fr;background:var(--panel);border:1px solid var(--gold);box-shadow:0 0 0 1px var(--gold) inset} .post-feature-photo{display:block;overflow:hidden;min-height:380px;background:#000} .post-feature-photo img{width:100%;height:100%;object-fit:cover;transition:transform .6s var(--ease)} .post-feature:hover .post-feature-photo img{transform:scale(1.03)} .post-feature-body{padding:clamp(1.6rem,3.5vw,3rem);display:flex;flex-direction:column;gap:.9rem;justify-content:center;min-width:0} .post-feature-body h2{font-family:var(--font-display);font-weight:var(--fw-display);text-transform:uppercase;font-size:clamp(1.6rem,2.8vw,2.5rem);line-height:1;overflow-wrap:anywhere} .post-feature-body p{color:var(--muted);font-size:1rem} .post-feature .post-card-foot{margin-top:.4rem;flex-wrap:wrap} /* When the foot wraps on a phone the share button still sits at the right, so its menu (anchored to the button's right edge) stays on screen. */ .post-feature details.share{margin-left:auto} .blog-filter{display:flex;flex-wrap:wrap;gap:.5rem;margin-top:clamp(2rem,4vw,3rem)} .blog-filter button{font-family:var(--font-head);font-weight:600;text-transform:uppercase;letter-spacing:.1em;font-size:.74rem;color:var(--muted);background:transparent;border:1px solid var(--line-strong);padding:.6rem .9rem;cursor:pointer;transition:color .2s,border-color .2s,background .2s} .blog-filter button small{font-size:.68rem;color:var(--muted-2);margin-left:.15rem} .blog-filter button:hover{color:var(--bone);border-color:var(--gold)} .blog-filter button[aria-pressed="true"]{color:#0a0a0a;background:var(--gold);border-color:var(--gold)} .blog-filter button[aria-pressed="true"] small{color:rgba(0,0,0,.6)} .blog-index .post-list{margin-top:1.5rem} .blog-empty{color:var(--muted);margin-top:2rem;text-align:center} .follow-strip{margin-top:clamp(3rem,6vw,5rem);padding:clamp(1.4rem,3vw,2.2rem);border:1px solid var(--line);background:var(--panel-2);display:flex;align-items:center;justify-content:space-between;gap:1.5rem;flex-wrap:wrap} .follow-strip p{color:var(--muted);margin-top:.5rem;max-width:44rem} .follow-links{display:flex;gap:.6rem;flex-wrap:wrap} .follow-links .btn{padding:.8rem 1.1rem;font-size:.78rem} /* Share. On cards a small button opens a menu (
); on an article a row with a heading. Every item is a plain link to that network's share page; "Copy link" and "More options" are buttons blog.js wires up (the second only appears where the browser has a share sheet). */ details.share{position:relative} details.share summary{list-style:none;display:inline-flex;align-items:center;gap:.4rem;font-family:var(--font-head);font-weight:600;text-transform:uppercase;letter-spacing:.1em;font-size:.72rem;color:var(--muted);border:1px solid var(--line-strong);padding:.5rem .7rem;cursor:pointer;transition:color .2s,border-color .2s} details.share summary::-webkit-details-marker{display:none} details.share summary svg{width:15px;height:15px} details.share summary:hover,details.share[open] summary{color:var(--gold);border-color:var(--gold)} .share-menu{position:absolute;right:0;bottom:calc(100% + .5rem);z-index:20;min-width:190px;background:var(--panel-3);border:1px solid var(--line-strong);box-shadow:0 18px 40px -18px rgba(0,0,0,.8);padding:.4rem;display:grid} .share-menu a,.share-menu button,.share-links a,.share-links button{display:inline-flex;align-items:center;gap:.6rem;font-family:var(--font-head);font-weight:600;text-transform:uppercase;letter-spacing:.08em;font-size:.72rem;color:var(--bone);background:transparent;border:0;padding:.55rem .7rem;cursor:pointer;text-align:left;transition:color .2s,background .2s} .share-menu a:hover,.share-menu button:hover,.share-links a:hover,.share-links button:hover{color:var(--gold);background:rgba(255,255,255,.05)} .share-menu svg,.share-links svg{width:17px;height:17px;fill:currentColor;flex:none} .share-menu svg[fill="none"],.share-links svg[fill="none"]{fill:none} .share-copy.is-done,.share-links .share-copy.is-done{color:var(--gold)} .share-bar{display:flex;align-items:center;gap:1rem;flex-wrap:wrap;margin-bottom:1.6rem} .share-bar-label{font-family:var(--font-head);font-weight:600;text-transform:uppercase;letter-spacing:.14em;font-size:.72rem;color:var(--gold)} .share-links{display:flex;flex-wrap:wrap;gap:.25rem} .share-links a,.share-links button{border:1px solid var(--line-strong);padding:.5rem .7rem} .share-links a:hover,.share-links button:hover{border-color:var(--gold);background:transparent} .post-foot .share-bar{margin-bottom:1.6rem} /* Article page. The title is a sentence, not a two-word page name, so it runs far smaller than the other page heroes; the photo is left a little brighter because it is the story's subject. */ .page-hero--post img{filter:grayscale(.2) brightness(.42)} /* max-width in em, not ch: a ch is the width of the font that painted first, which is the fallback until Saira arrives, and the title wrapped differently between the two (layout shift 0.16). */ .page-hero--post h1{font-size:clamp(1.9rem,4.8vw,3.7rem);line-height:1.02;max-width:13.5em} .page-hero--post .post-meta{margin-top:1.3rem;font-size:.78rem;color:#d8d4cb;max-width:none} .post-body{max-width:760px;margin-inline:auto} .post-body p{max-width:none} .prose .post-lede{font-size:1.22rem;line-height:1.55;color:var(--bone);font-weight:500;margin-top:0} .post-body h2{font-size:clamp(1.5rem,2.8vw,2.1rem);line-height:1.05} .post-body a{color:var(--gold);text-decoration:underline;text-underline-offset:3px} .post-body a:hover{color:var(--gold-bright)} .post-body strong{color:var(--bone)} .post-list li{position:relative;padding-left:1.1rem;margin-top:.5rem;color:#cbc7be} /* an article list (ul.post-list inside .prose; the index uses div.post-list as a wrapper): gold diamond bullets */ .prose ul.post-list{list-style:none;margin:1rem 0 0;padding:0} .prose ul.post-list li::before{content:"";position:absolute;left:.1rem;top:.62em;width:6px;height:6px;background:var(--gold);transform:rotate(45deg)} .post-figure{margin:2.4rem 0} .post-figure img{width:100%;height:auto;border:1px solid var(--line)} .post-figure figcaption{color:var(--muted);font-size:.85rem;margin-top:.6rem} .post-gallery{margin-top:clamp(3rem,6vw,5rem)} .post-gallery .section-title{font-size:clamp(1.6rem,3.4vw,2.4rem);margin-top:0} .post-gallery-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:.75rem;margin-top:1.5rem} .post-gallery-grid img{width:100%;height:100%;aspect-ratio:3/2;object-fit:cover} .post-foot{margin-top:clamp(2.5rem,5vw,4rem);padding-top:1.5rem;border-top:1px solid var(--line)} @media (max-width:1080px){.post-grid{grid-template-columns:repeat(2,1fr)}} @media (max-width:820px){ .post-feature{grid-template-columns:1fr} .post-feature-photo{aspect-ratio:3/2;min-height:0} } @media (max-width:620px){ .post-grid{grid-template-columns:1fr} .post-gallery-grid{grid-template-columns:1fr 1fr} .share-links a span,.share-links button span{display:none} .share-links .share-copy.is-done span{display:inline} .share-links a,.share-links button{padding:.6rem .7rem} } /* ---------- Share row A (Yok, 2026-09-24): "Share", a short rule, then notched icon tiles. The notch is drawn on ::before, not on the button, so the "Link copied" bubble is not clipped. */ .share-row{gap:.7rem 1rem;margin-bottom:0} .share-row .share-bar-label{display:inline-flex;align-items:center;gap:.7rem;font-weight:700;letter-spacing:.16em} .share-row .share-bar-label::after{content:"";width:26px;height:1px;background:var(--gold)} .share-row .share-links{gap:.4rem} .share-row .share-links a,.share-row .share-links button{position:relative;isolation:isolate;display:grid;place-items:center;width:40px;height:40px;padding:0;border:0;background:transparent;color:var(--bone)} .share-row .share-links a::before,.share-row .share-links button::before{content:"";position:absolute;inset:0;z-index:-1;background:rgba(236,232,223,.12);clip-path:polygon(0 0,calc(100% - 9px) 0,100% 9px,100% 100%,9px 100%,0 calc(100% - 9px));transition:background-color .2s} .share-row .share-links a:hover,.share-row .share-links button:hover,.share-row .share-links a:focus-visible,.share-row .share-links button:focus-visible{color:#0b0b0c;background:transparent;border:0} .share-row .share-links a:hover::before,.share-row .share-links button:hover::before,.share-row .share-links a:focus-visible::before,.share-row .share-links button:focus-visible::before{background:var(--gold)} .share-row .share-links svg{width:18px;height:18px} .share-row .share-links a span,.share-row .share-native span{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap} .share-row .share-copy span{display:block;position:absolute;bottom:calc(100% + 8px);left:50%;transform:translateX(-50%);white-space:nowrap;background:var(--gold);color:#0b0b0c;font-family:var(--font-head);font-weight:700;text-transform:uppercase;letter-spacing:.1em;font-size:.62rem;padding:.35rem .6rem;opacity:0;pointer-events:none;transition:opacity .2s} .share-row .share-copy.is-done span{opacity:1} .share-row .share-copy.is-done::before{background:var(--gold)} .share-row .share-copy.is-done{color:#0b0b0c} .page-hero--post .share-row{margin-top:1.5rem} /* the device share sheet is for phones; a mouse-and-keyboard screen gets the six tiles of the approved mock-up */ .share-row .share-links [hidden]{display:none} @media (hover:hover) and (pointer:fine){.share-row .share-links .share-native{display:none}} .guide-main .post-foot{margin-top:clamp(2.5rem,5vw,3.5rem)} .post-foot .share-row{margin-bottom:1.6rem} /* Reading progress: a thin gold line across the top of an article page (blog.js). */ .read-progress{position:fixed;top:0;left:0;right:0;height:3px;z-index:1100;pointer-events:none} .read-progress span{display:block;height:100%;background:var(--gold);transform-origin:0 50%;transform:scaleX(0)} /* ---------- Guides: the article layout with "On this page" beside it ---------- */ .guide-layout{display:grid;grid-template-columns:220px minmax(0,760px);justify-content:center;gap:clamp(2rem,4vw,4rem);align-items:start} .guide-toc{position:sticky;top:100px;max-height:calc(100vh - 130px);overflow:auto;scrollbar-width:thin;padding-bottom:1rem} .guide-toc-title{display:block;font-family:var(--font-head);font-weight:700;text-transform:uppercase;letter-spacing:.14em;font-size:.72rem;color:var(--gold);margin-bottom:.9rem} .guide-toc ol{list-style:none;margin:0;padding:0;border-left:1px solid var(--line-strong)} .guide-toc li a{display:block;margin-left:-1px;padding:.42rem 0 .42rem 1rem;border-left:2px solid transparent;color:var(--muted);font-size:.86rem;line-height:1.35;transition:color .2s,border-color .2s} .guide-toc li a:hover{color:var(--bone)} .guide-toc li a.is-active{color:var(--bone);border-left-color:var(--gold)} .guide-main{min-width:0} .guide-body{margin-inline:0} .guide-toc-m{display:none;margin-bottom:2rem;border:1px solid var(--line-strong);background:var(--panel)} .guide-toc-m summary{list-style:none;cursor:pointer;display:flex;align-items:center;justify-content:space-between;gap:1rem;padding:1rem 1.2rem;font-family:var(--font-head);font-weight:700;text-transform:uppercase;letter-spacing:.14em;font-size:.76rem;color:var(--gold)} .guide-toc-m summary::-webkit-details-marker{display:none} .guide-toc-m summary svg{width:16px;height:16px;transition:transform .2s} .guide-toc-m[open] summary svg{transform:rotate(180deg)} .guide-toc-m ol{list-style:none;margin:0;padding:0 1.2rem 1rem} .guide-toc-m li a{display:block;padding:.6rem 0;border-top:1px solid var(--line);color:#cbc7be;font-size:.95rem;line-height:1.35} .post-body h2,.post-body h3,.post-sources{scroll-margin-top:100px} /* Tables: a clean grid on wide screens; on a phone every row becomes a small labelled card. */ .post-table{margin:1.8rem 0;overflow-x:auto} .post-table table{width:100%;border-collapse:collapse;font-size:.95rem} .post-table th,.post-table td{text-align:left;vertical-align:top;padding:.8rem 1rem;border-bottom:1px solid var(--line);line-height:1.45} .post-table thead th{font-family:var(--font-head);font-weight:700;text-transform:uppercase;letter-spacing:.1em;font-size:.72rem;color:var(--gold);border-bottom:1px solid var(--gold);white-space:nowrap} .post-table tbody th{color:var(--bone);font-weight:600} .post-table td{color:#cbc7be} .post-table tbody tr:nth-child(even){background:rgba(255,255,255,.025)} /* Glossary, sources and the highlighted box */ .post-terms{margin-top:3rem;padding:clamp(1.4rem,3vw,2rem);background:var(--panel);border:1px solid var(--line)} .post-terms h2{margin-top:0} .post-terms dl{margin:1.2rem 0 0;display:grid;grid-template-columns:1fr 1fr;gap:0 2rem} .post-terms dl > div{padding:.8rem 0;border-top:1px solid var(--line)} .post-terms dt{font-family:var(--font-head);font-weight:700;text-transform:uppercase;letter-spacing:.06em;font-size:.85rem;color:var(--gold)} .post-terms dd{margin:.25rem 0 0;color:#cbc7be;font-size:.93rem;line-height:1.5} .post-sources{margin-top:2rem;border:1px solid var(--line)} .post-sources summary{list-style:none;cursor:pointer;display:flex;align-items:center;gap:.8rem;padding:1rem 1.2rem;font-family:var(--font-head);font-weight:700;text-transform:uppercase;letter-spacing:.12em;font-size:.78rem;color:var(--bone)} .post-sources summary::-webkit-details-marker{display:none} .post-sources summary::after{content:"+";margin-left:auto;color:var(--gold);font-size:1.3rem;line-height:1;transition:transform .2s} .post-sources[open] summary::after{transform:rotate(45deg)} .post-sources-count{font-size:.68rem;color:var(--muted);border:1px solid var(--line-strong);padding:.1rem .45rem;letter-spacing:.06em} .post-sources ol{margin:0;padding:0 1.2rem 1.2rem 2.6rem;color:var(--muted);font-size:.88rem;line-height:1.55} .post-sources li{margin-top:.5rem} .post-note{margin:2rem 0;padding:clamp(1.3rem,3vw,1.8rem);border:1px solid var(--gold);background:linear-gradient(135deg,rgba(217,180,90,.09),rgba(217,180,90,.02))} .prose .post-note .post-note-title{margin-top:0;font-size:clamp(1.25rem,2.2vw,1.6rem)} .post-note p{margin-top:.8rem} .post-note .post-list{margin-top:.6rem} /* ---------- Guides on the blog index, and a programme page's guide card ---------- */ .blog-tools{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:1rem;margin-top:clamp(2rem,4vw,3rem)} .blog-tools .blog-filter{margin-top:0} .blog-jump{display:inline-flex;align-items:center;gap:.5rem;font-family:var(--font-head);font-weight:600;text-transform:uppercase;letter-spacing:.1em;font-size:.74rem;color:var(--gold);border:1px solid var(--gold);padding:.6rem .9rem;transition:background-color .2s,color .2s} .blog-jump small{font-size:.68rem;opacity:.8} .blog-jump svg{width:12px;height:12px} .blog-jump:hover{background:var(--gold);color:#0a0a0a} .guides{margin-top:clamp(4rem,8vw,6.5rem);padding-top:clamp(2.5rem,5vw,4rem);border-top:1px solid var(--line);scroll-margin-top:90px} .guides-head{max-width:46rem} .guides-head .lede{margin-top:1rem} .guide-group{margin-top:clamp(2rem,4vw,3rem)} .guide-group-title{display:flex;align-items:center;gap:.8rem;font-family:var(--font-head);font-weight:700;text-transform:uppercase;letter-spacing:.14em;font-size:.8rem;color:var(--gold)} .guide-group-title small{color:var(--muted);font-size:.72rem} .guide-group-title::after{content:"";flex:1;height:1px;background:var(--line)} .guide-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:1.25rem;margin-top:1.2rem} .guide-card{position:relative;display:flex;flex-direction:column;background:var(--panel);border:1px solid var(--line);transition:border-color .3s,transform .3s} .guide-card:hover{border-color:var(--gold);transform:translateY(-3px)} .guide-card-photo{aspect-ratio:16/9;overflow:hidden;background:#000} .guide-card-photo img{width:100%;height:100%;object-fit:cover;transition:transform .6s var(--ease)} .guide-card:hover .guide-card-photo img{transform:scale(1.04)} .guide-card-body{flex:1;display:flex;flex-direction:column;gap:.55rem;padding:1.2rem 1.3rem 1.3rem;min-width:0} .guide-card-topic{font-family:var(--font-head);font-weight:700;text-transform:uppercase;letter-spacing:.14em;font-size:.68rem;color:var(--gold)} .guide-card h2,.guide-card h3,.guide-card h4{font-family:var(--font-display);font-weight:var(--fw-display);text-transform:uppercase;font-size:1.15rem;line-height:1.08;overflow-wrap:anywhere} .guide-card-title{color:inherit} .guide-card-title::after{content:"";position:absolute;inset:0} .guide-card:hover .guide-card-title{color:var(--gold)} .guide-card p{color:var(--muted);font-size:.9rem;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden} .guide-card-meta{margin-top:auto;padding-top:.3rem;display:inline-flex;align-items:center;gap:.45rem;font-family:var(--font-head);font-weight:600;text-transform:uppercase;letter-spacing:.12em;font-size:.7rem;color:var(--bone)} .guide-card-meta svg{width:14px;height:14px;transition:transform .2s} .guide-card:hover .guide-card-meta svg,.guide-strip:hover .guide-card-meta svg{transform:translateX(4px)} .guide-strip{position:relative;display:grid;grid-template-columns:minmax(0,440px) 1fr;background:var(--panel);border:1px solid var(--line);margin-top:1.5rem;transition:border-color .3s} .guide-strip:hover{border-color:var(--gold)} .guide-strip:hover .guide-card-title{color:var(--gold)} .guide-strip-photo{overflow:hidden;min-height:230px;background:#000} .guide-strip-photo img{width:100%;height:100%;object-fit:cover} .guide-strip-body{display:flex;flex-direction:column;justify-content:center;gap:.7rem;padding:clamp(1.4rem,3vw,2.2rem);min-width:0} .guide-strip h2{font-family:var(--font-display);font-weight:var(--fw-display);text-transform:uppercase;font-size:clamp(1.3rem,2.4vw,1.9rem);line-height:1.05;overflow-wrap:anywhere} .guide-strip p{color:var(--muted)} @media (max-width:1080px){ .guide-layout{grid-template-columns:minmax(0,760px)} .guide-toc{display:none} .guide-toc-m{display:block} .guide-grid{grid-template-columns:repeat(2,1fr)} } @media (max-width:820px){ .post-terms dl{grid-template-columns:1fr} .guide-strip{grid-template-columns:1fr} .guide-strip-photo{aspect-ratio:16/9;min-height:0} } @media (max-width:620px){ .guide-grid{grid-template-columns:1fr} .blog-tools{align-items:flex-start} .post-table{overflow:visible} .post-table thead{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)} .post-table table,.post-table tbody,.post-table tr,.post-table th,.post-table td{display:block;width:100%} .post-table tr{border:1px solid var(--line);background:var(--panel);margin-bottom:.7rem;padding:.35rem 0} .post-table tbody tr:nth-child(even){background:var(--panel)} .post-table tbody th{border:0;padding:.65rem 1rem .25rem;font-family:var(--font-head);text-transform:uppercase;letter-spacing:.05em;font-size:.9rem} .post-table tbody th[data-label]:not([data-label=""])::before{content:attr(data-label);display:block;margin-bottom:.2rem;font-weight:600;letter-spacing:.08em;font-size:.64rem;color:var(--muted)} .post-table td{border:0;padding:.3rem 1rem;display:grid;grid-template-columns:minmax(6rem,38%) 1fr;gap:.8rem} .post-table td::before{content:attr(data-label);font-family:var(--font-head);font-weight:600;text-transform:uppercase;letter-spacing:.08em;font-size:.64rem;color:var(--muted);padding-top:.2rem} .post-table tr > :last-child{padding-bottom:.65rem} } /* ============================================================ MMA TEAM TRYOUTS: campaign page, homepage banner, application form ============================================================ */ /* Homepage banner: the client's artwork beside the pitch, one link. */ .tryouts-band{padding-block:clamp(2.5rem,5vw,4rem)} .tryouts-card{display:grid;grid-template-columns:1.25fr 1fr;background:var(--panel);border:1px solid var(--gold);overflow:hidden;transition:transform .3s,box-shadow .3s} .tryouts-card:hover{transform:translateY(-4px);box-shadow:0 24px 60px -30px rgba(217,180,90,.55)} .tryouts-card-art{overflow:hidden;background:#000} .tryouts-card-art img{width:100%;height:100%;object-fit:cover;transition:transform .6s var(--ease)} .tryouts-card:hover .tryouts-card-art img{transform:scale(1.03)} .tryouts-card-body{padding:clamp(1.6rem,3vw,2.6rem);display:flex;flex-direction:column;gap:1rem;justify-content:center;align-items:flex-start;min-width:0} .tryouts-card-body .section-title{font-size:clamp(1.5rem,2.5vw,2.1rem);margin-top:0;line-height:1} .tryouts-card-body p{color:var(--muted);font-size:.98rem} .drawer a.sub--campaign{color:var(--gold)} /* ============================================================ KHUNPON KITCHEN: the menu page, the homepage band, the contact page's booking block ============================================================ */ /* The menu page follows the Kitchen's printed boards: gold page (#D4AF6C, from its menu site), black type, ticket-stub prices, dark step labels, dotted price leaders, no panels. */ .section.k-page{--kgold:#D4AF6C;--kink:#111111;--kbrown:#3b2e14;--kbone:#EFECE5;background:var(--kgold);color:var(--kink);padding-block:clamp(2.5rem,5vw,4rem)} .k-page :focus-visible{outline-color:var(--kink)} /* intro: logo, words and address as one centred stack, in line with the centred category bar */ .k-intro{display:flex;flex-direction:column;align-items:center;text-align:center;gap:1.1rem;max-width:46rem;margin-inline:auto} .k-logo{width:clamp(140px,15vw,190px);height:auto} .k-intro .lede{color:var(--kink);margin:0;max-width:none} .k-meta{color:var(--kbrown);font-size:.88rem} .k-intro .lede,.k-meta{text-wrap:balance} /* category bar: icon tabs on gold, no rules; the section being read gets a black badge and underline, and the bar casts a soft shadow once it sticks under the header (kitchen.js) */ .k-jump{position:sticky;top:78px;z-index:5;background:var(--kgold);margin-top:clamp(2rem,4vw,3rem);transition:box-shadow .25s} .k-jump.is-stuck{box-shadow:0 12px 18px -14px rgba(0,0,0,.55)} .k-jump-in{display:flex;max-width:var(--maxw);margin-inline:auto;padding-inline:var(--pad)} .k-jump a{flex:1 1 0;min-width:0;display:flex;flex-direction:column;align-items:center;gap:.4rem;padding:.8rem .5rem .6rem;border-bottom:4px solid transparent;text-align:center;font-family:var(--font-head);font-weight:700;text-transform:uppercase;letter-spacing:.08em;font-size:.72rem;line-height:1.25;color:rgba(17,17,17,.74);transition:color .2s,border-color .2s} .k-jump a:hover{color:var(--kink)} .k-ico{width:24px;height:24px;flex:none;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round} .k-jump .k-ico{box-sizing:content-box;padding:5px;margin:-5px;border-radius:50%;transition:background-color .2s,color .2s} .k-jump a.is-active{color:var(--kink);border-bottom-color:var(--kink)} .k-jump a.is-active .k-ico{background:var(--kink);color:var(--kgold)} /* sections */ .k-section{padding-block:clamp(2.4rem,5vw,3.4rem);border-bottom:2px solid var(--kink)} .k-section:last-of-type{border-bottom:0} .k-head{display:flex;align-items:center;flex-wrap:wrap;gap:.6rem 1.4rem;margin-bottom:1.6rem} .k-head h2{font-family:var(--font-display);font-weight:900;text-transform:uppercase;font-size:clamp(2.1rem,5vw,3.6rem);line-height:.95;color:var(--kink);scroll-margin-top:190px} .k-sub{font-family:var(--font-head);font-weight:700;text-transform:uppercase;letter-spacing:.14em;font-size:.75rem;color:var(--kbrown)} .k-ticket{display:inline-block;flex:none;filter:drop-shadow(2px 3px 0 rgba(0,0,0,.3));transform:rotate(-5deg)} .k-ticket span{display:block;background:var(--kbone);color:var(--kink);font-family:var(--font-display);font-weight:900;font-size:1.5rem;line-height:1;padding:.45rem 1.15rem .4rem;white-space:nowrap; -webkit-mask:radial-gradient(circle 7px at 0 50%,#0000 98%,#000) left/51% 100% no-repeat,radial-gradient(circle 7px at 100% 50%,#0000 98%,#000) right/51% 100% no-repeat; mask:radial-gradient(circle 7px at 0 50%,#0000 98%,#000) left/51% 100% no-repeat,radial-gradient(circle 7px at 100% 50%,#0000 98%,#000) right/51% 100% no-repeat} .k-ticket--sm span{font-size:1.15rem;padding:.35rem .9rem} .k-cols{display:grid;grid-template-columns:240px 1fr;gap:clamp(1.5rem,3vw,2.6rem);align-items:start} /* the photos are cut-outs on transparent backgrounds, so they sit straight on the gold; pasta is the one framed square */ .k-photo img,.k-dish-photo img,.k-banner img{display:block;width:100%;height:auto} .k-photo--electrolytes img{width:180px;margin-inline:auto} .k-dish-photo img.k-framed,.k-photo--coffee img,.k-banner img{border-radius:18px} .k-banner{margin:-.2rem 0 2rem} .k-desc{color:var(--kbrown);max-width:60ch;margin-bottom:1.2rem} .k-list{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:1fr 1fr;gap:.2rem 2.6rem} .k-list li{display:flex;align-items:baseline;gap:.5rem;padding:.5rem 0} .k-list b{font-family:var(--font-head);font-weight:800;text-transform:uppercase;letter-spacing:.04em;font-size:1.05rem} .k-dots{flex:1;min-width:1rem;border-bottom:2px dotted rgba(0,0,0,.5);transform:translateY(-.3rem)} .k-price{font-family:var(--font-display);font-weight:900;font-size:1.15rem;white-space:nowrap} .k-menu{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:1fr 1fr;gap:1.4rem 3rem} .k-menu b{font-family:var(--font-display);font-weight:900;text-transform:uppercase;font-size:1.3rem;line-height:1.05} .k-th{font-size:.85rem;color:var(--kbrown);margin-left:.4rem;font-weight:600} .k-en{font-size:.78em;font-weight:400;color:var(--muted);margin-left:.35rem;letter-spacing:0;text-transform:none} .k-menu p{color:var(--kbrown);font-size:.92rem;margin-top:.3rem} .k-note{color:var(--kbrown);font-size:.88rem;margin-top:1.2rem} .k-extras{display:flex;flex-wrap:wrap;gap:1.4rem 2.6rem;margin-top:1.8rem;padding-top:1.6rem;border-top:1px dashed rgba(0,0,0,.45)} .k-label{display:inline-flex;max-width:100%;border-radius:999px;overflow:hidden;background:var(--kink);color:var(--kgold);font-family:var(--font-head);font-weight:700;text-transform:uppercase;letter-spacing:.1em;font-size:.74rem;line-height:1.25} .k-label span{padding:.45rem 1rem} .k-label em{flex:none;background:#6e5a33;color:#f3e7c7;padding:.45rem .8rem;font-style:inherit} .k-opt .k-label,.k-steps .k-label{margin-bottom:.6rem} .k-chips{display:flex;flex-wrap:wrap;gap:.4rem} .k-chips span{border:1.5px solid var(--kink);border-radius:999px;padding:.3rem .8rem;font-size:.88rem;font-weight:600} /* food: photo, name and ticket, then numbered steps */ .k-dish{display:grid;grid-template-columns:280px 1fr;gap:clamp(1.5rem,3vw,2.6rem);align-items:start;padding-block:2.2rem;border-top:1px dashed rgba(0,0,0,.45)} .k-head + .k-dish{border-top:0;padding-top:.4rem} .k-dish:last-child{padding-bottom:0} .k-dish-body{min-width:0} .k-dish-head{display:flex;align-items:center;flex-wrap:wrap;gap:.6rem 1.2rem;margin-bottom:1.3rem} .k-dish-head h3{font-family:var(--font-display);font-weight:900;text-transform:uppercase;font-size:clamp(1.8rem,3.4vw,2.6rem);line-height:.95} .k-ing{color:var(--kbrown);margin:-.4rem 0 1.2rem} .k-steps{list-style:none;margin:0;padding:0;display:grid;gap:1.1rem} .k-steps li{display:grid;grid-template-columns:2rem 1fr;gap:.9rem;align-items:start} .k-steps li > div{min-width:0} .k-n{width:2rem;height:2rem;border-radius:50%;background:var(--kink);color:var(--kgold);display:grid;place-items:center;font-family:var(--font-display);font-weight:900} .k-xtra{font-size:.88rem;color:var(--kbrown);margin-top:.5rem} .k-xtra b{color:var(--kink)} .k-dish-body > .k-xtra{margin-left:2.9rem} /* follow line */ .k-follow{display:flex;justify-content:space-between;align-items:center;gap:1rem 2rem;flex-wrap:wrap;padding-top:clamp(1.6rem,3vw,2.2rem);border-top:2px solid var(--kink)} .k-follow p{color:var(--kbrown);margin-top:.6rem} .k-btn{display:inline-flex;align-items:center;gap:.6rem;background:var(--kink);color:var(--kgold);font-family:var(--font-head);font-weight:700;text-transform:uppercase;letter-spacing:.12em;font-size:.8rem;padding:.9rem 1.4rem;border-radius:999px;transition:background-color .2s,color .2s} .k-btn:hover{background:#000;color:#fff} .k-btn svg{width:18px;height:18px;fill:currentColor} @media (max-width:820px){ .k-jump{top:74px} .k-jump-in{overflow-x:auto;scrollbar-width:none;padding-inline:calc(var(--pad) - .6rem)} .k-jump-in::-webkit-scrollbar{display:none} .k-jump a{flex:none;white-space:nowrap;padding-inline:.8rem} .k-cols,.k-dish{grid-template-columns:1fr;gap:1.3rem} .k-photo img{width:min(100%,260px)} .k-photo--electrolytes img{width:150px;margin-inline:0} .k-dish-photo{max-width:280px} .k-list,.k-menu{grid-template-columns:1fr} .k-extras{flex-direction:column} } @media (max-width:620px){ .k-logo{width:140px} } /* homepage band: a 2x2 of dish tiles beside the words */ .kitchen-card-art{display:grid;grid-template-columns:1fr 1fr;gap:2px;background:var(--line)} .kitchen-card-art img{aspect-ratio:1;object-fit:contain;background:#D4AF6C;padding:6%} /* contact: the booking block the header's Book now lands on */ .book-block{max-width:44rem;scroll-margin-top:110px} .book-actions{display:flex;flex-wrap:wrap;gap:.8rem;margin-top:1.8rem} @media (max-width:620px){ .book-actions .btn{width:100%;justify-content:center} } .drawer a.sub--nested{padding-left:2.1rem;font-size:.95rem} /* Page top: the banner is artwork with its own lettering, so it is shown whole and undarkened, and the real

sits under it in text a search engine can read. */ .tryouts-hero{padding-top:78px;border-bottom:1px solid var(--line)} .tryouts-hero-art{background:#000} .tryouts-hero-art img{width:100%;height:auto;max-height:70vh;object-fit:cover} .tryouts-hero .container{padding-block:clamp(2rem,5vw,3.5rem) clamp(3rem,6vw,5rem)} .tryouts-hero .eyebrow{margin-top:1.6rem} .tryouts-hero h1{font-family:var(--font-display);font-weight:var(--fw-display);text-transform:uppercase;line-height:.98;font-size:clamp(2rem,5vw,3.9rem);margin-top:.9rem;max-width:20ch;overflow-wrap:anywhere} .tryouts-hero h1 .gold{color:var(--gold)} .tryouts-hero p{color:#d8d4cb;max-width:48rem;margin-top:1.2rem} .tryouts-facts{display:flex;flex-wrap:wrap;gap:1.5rem 3rem;margin-top:2.2rem;padding-top:1.8rem;border-top:1px solid var(--line)} .tryouts-facts div{display:flex;flex-direction:column} .tryouts-facts b{font-family:var(--font-display);font-weight:var(--fw-display);font-size:clamp(1.7rem,3.2vw,2.4rem);color:var(--gold);line-height:1} .tryouts-facts span{font-family:var(--font-head);text-transform:uppercase;letter-spacing:.12em;font-size:.72rem;color:var(--muted);margin-top:.45rem} .tier-grid{display:grid;grid-template-columns:1fr 1fr;gap:1.5rem;margin-top:3rem;align-items:start} .tier{background:var(--panel);border:1px solid var(--line);padding:clamp(1.6rem,3vw,2.4rem);position:relative} .tier--feature{border-color:var(--gold);box-shadow:0 0 0 1px var(--gold) inset} .tier .gold-corner{position:absolute;top:0;right:0;width:30px;height:30px;border-top:2px solid var(--gold);border-right:2px solid var(--gold)} .tier-head{display:flex;align-items:baseline;justify-content:space-between;gap:1rem;border-bottom:1px solid var(--line);padding-bottom:1.1rem} .tier-head h3{font-family:var(--font-display);font-weight:var(--fw-display);text-transform:uppercase;font-size:1.7rem;line-height:1} .tier-head .sub{font-family:var(--font-head);text-transform:uppercase;letter-spacing:.12em;font-size:.74rem;color:var(--gold);white-space:nowrap} .tier-lede{color:var(--muted);font-size:.95rem;margin-top:1.1rem} .tier-total{margin-top:1.6rem;padding-top:1.3rem;border-top:1px dashed var(--line-strong);display:flex;flex-wrap:wrap;align-items:baseline;gap:.3rem .8rem} .tier-total span{flex:1 1 100%;font-family:var(--font-head);text-transform:uppercase;letter-spacing:.1em;font-size:.72rem;color:var(--muted)} .tier-total b{font-family:var(--font-display);font-weight:var(--fw-display);font-size:2.1rem;color:var(--gold);line-height:1} .tier-total small{color:var(--muted);font-size:.85rem} .tick-list,.cross-list{margin-top:1.2rem;display:flex;flex-direction:column;gap:.85rem} .tick-list li,.cross-list li{position:relative;padding-left:1.5rem;display:flex;flex-direction:column;gap:.1rem} .tick-list li::before{content:"";position:absolute;left:0;top:.5em;width:8px;height:8px;background:var(--gold);transform:rotate(45deg)} .cross-list li::before,.cross-list li::after{content:"";position:absolute;left:0;top:.72em;width:11px;height:2px;background:var(--blood)} .cross-list li::before{transform:rotate(45deg)} .cross-list li::after{transform:rotate(-45deg)} .tick-list b,.cross-list b{font-family:var(--font-head);font-weight:600;text-transform:uppercase;letter-spacing:.04em;font-size:.92rem;color:var(--bone)} .tick-list span,.cross-list span{color:#cbc7be;font-size:.95rem} .req-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:1.25rem;margin-top:3rem} .req{background:var(--panel);border:1px solid var(--line);padding:1.6rem;position:relative} .req .num{font-family:var(--font-display);font-weight:var(--fw-display);color:var(--gold);opacity:.8} .req h3{font-family:var(--font-display);font-weight:var(--fw-display);text-transform:uppercase;font-size:1.35rem;line-height:1;margin-top:.5rem} .req p{color:var(--muted);font-size:.95rem;margin-top:.7rem} .tryouts-photos{display:grid;grid-template-columns:repeat(3,1fr);gap:.75rem;margin-top:1.25rem} .tryouts-photos img{width:100%;height:100%;aspect-ratio:3/2;object-fit:cover;filter:grayscale(.25)} .fit-grid{display:grid;grid-template-columns:1fr 1fr;gap:1.5rem;margin-top:3rem;align-items:start} .fit{background:var(--panel);border:1px solid var(--line);padding:clamp(1.6rem,3vw,2.4rem)} .fit--yes{border-top:3px solid var(--gold)} .fit--no{border-top:3px solid var(--blood)} .fit h3{font-family:var(--font-display);font-weight:var(--fw-display);text-transform:uppercase;font-size:1.5rem;line-height:1.05} .fit>p{color:var(--muted);font-size:.95rem;margin-top:.8rem} .fit-outro{margin-top:2.5rem;font-family:var(--font-head);font-weight:600;font-size:1.2rem;color:var(--gold)} /* ---- The application form ---- */ .form-panel{background:var(--panel);border:1px solid var(--line-strong);padding:clamp(1.4rem,4vw,3rem);max-width:920px;margin:3rem auto 0} .tryouts-form fieldset{border:0;margin:0 0 2.2rem;padding:0;min-width:0} .tryouts-form legend{font-family:var(--font-display);font-weight:var(--fw-display);text-transform:uppercase;font-size:1.25rem;color:var(--gold);padding:0 0 .9rem;margin-bottom:1.3rem;border-bottom:1px solid var(--line);width:100%} .field-grid{display:grid;grid-template-columns:1fr 1fr;gap:1.3rem 1.25rem} .field{grid-column:1 / -1;min-width:0} .field--half{grid-column:span 1} .field label{display:block;font-family:var(--font-head);font-weight:600;text-transform:uppercase;letter-spacing:.08em;font-size:.78rem;color:var(--bone);margin-bottom:.5rem} .req-mark{color:var(--gold)} .field input[type="text"],.field input[type="email"],.field input[type="url"],.field input[type="number"],.field input[type="tel"],.field select,.field textarea{ width:100%;font:inherit;font-style:normal;font-size:1rem;color:var(--bone);background:var(--ink); border:1px solid var(--line-strong);padding:.85rem .95rem;border-radius:0;transition:border-color .15s,box-shadow .15s; } .field textarea{resize:vertical;min-height:5.5rem;line-height:1.55} .field input::placeholder,.field textarea::placeholder{color:var(--muted-2);opacity:1} .field input:hover,.field textarea:hover,.field select:hover{border-color:rgba(255,255,255,.3)} .field input:focus-visible,.field textarea:focus-visible,.field select:focus-visible{outline:none;border-color:var(--gold);box-shadow:0 0 0 3px rgba(217,180,90,.22)} /* Tryouts: choice lists, the phone number with its country code, the weight with its class (2026-09-25) */ .field select{appearance:none;-webkit-appearance:none;cursor:pointer;padding-right:2.4rem; background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M6 9l6 6 6-6' fill='none' stroke='%23d9b45a' stroke-width='2.2'/%3E%3C/svg%3E"); background-repeat:no-repeat;background-position:right .8rem center;background-size:16px} .field select option{background:var(--panel);color:var(--bone)} .phone-row{display:grid;grid-template-columns:7.4rem minmax(0,1fr);gap:.5rem} .cc{position:relative;min-width:0} .cc-face{display:flex;align-items:center;height:100%;padding:0 2rem 0 .85rem;border:1px solid var(--line-strong);background:var(--ink);color:var(--bone); font-size:1rem;white-space:nowrap;font-variant-numeric:tabular-nums;transition:border-color .15s,box-shadow .15s; background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M6 9l6 6 6-6' fill='none' stroke='%23d9b45a' stroke-width='2.2'/%3E%3C/svg%3E"); background-repeat:no-repeat;background-position:right .6rem center;background-size:16px} .cc-face.is-empty{color:var(--muted-2)} .cc-face b{font-family:var(--font-head);font-weight:700;letter-spacing:.06em;margin-right:.45rem;color:var(--gold)} .cc select{position:absolute;inset:0;width:100%;height:100%;opacity:0;cursor:pointer;font-size:16px} .cc:hover .cc-face{border-color:rgba(255,255,255,.3)} .cc:focus-within .cc-face{border-color:var(--gold);box-shadow:0 0 0 3px rgba(217,180,90,.22)} .has-error .cc-face{border-color:#ff8a6b} .label-row{display:flex;align-items:center;justify-content:space-between;gap:.75rem;margin-bottom:.5rem} .label-row label{margin:0} .unit{display:inline-flex;border:1px solid var(--line-strong);flex:none} .unit button{font-family:var(--font-head);font-weight:700;font-size:.7rem;letter-spacing:.1em;text-transform:uppercase;padding:.2rem .6rem;background:none;color:var(--muted);border:0;cursor:pointer} .unit button[aria-pressed="true"]{background:var(--gold);color:#0a0a0a} .unit button:focus-visible{outline:2px solid var(--gold);outline-offset:2px} .wclass{display:flex;align-items:baseline;flex-wrap:wrap;gap:.2rem .7rem;margin-top:.6rem;padding:.65rem .85rem; border:1px solid rgba(217,180,90,.38);border-left:3px solid var(--gold);background:linear-gradient(135deg,rgba(217,180,90,.13),rgba(217,180,90,.04))} .wclass b{font-family:var(--font-display);font-weight:var(--fw-display);text-transform:uppercase;font-size:1.05rem;letter-spacing:.02em;color:var(--gold)} .wclass-limit{color:var(--muted);font-size:.84rem} .other-box{margin-top:.6rem} /* Age is a number field; the spinner arrows are noise on a field nobody steps through. */ .field input[type="number"]{-moz-appearance:textfield;appearance:textfield} .field input[type="number"]::-webkit-outer-spin-button,.field input[type="number"]::-webkit-inner-spin-button{-webkit-appearance:none;margin:0} .field-foot{display:flex;justify-content:space-between;gap:1rem;margin-top:.4rem} .field-help,.field-count{color:var(--muted);font-size:.82rem} .field-count{white-space:nowrap;font-variant-numeric:tabular-nums} .field-error{color:#ff8a6b;font-size:.86rem;margin-top:.35rem;font-weight:500} .field-error:empty{display:none} .field.has-error input,.field.has-error textarea,.field.has-error select{border-color:#ff8a6b;box-shadow:0 0 0 3px rgba(255,138,107,.16)} .hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden} .field--check{margin:.4rem 0 1.8rem} .check{display:flex!important;gap:.8rem;align-items:flex-start;text-transform:none!important;letter-spacing:0!important;font-family:var(--font-body)!important;font-weight:400!important;font-size:.95rem!important;color:#cbc7be!important;cursor:pointer} .check input{flex:none;width:22px;height:22px;margin-top:.15rem;accent-color:var(--gold);cursor:pointer} .check a{color:var(--gold);text-decoration:underline;text-underline-offset:3px} .field--check.has-error .check input{outline:2px solid #ff8a6b;outline-offset:2px} .form-summary{background:rgba(255,138,107,.1);border:1px solid #ff8a6b;color:#ffb7a3;padding:.9rem 1.1rem;margin-bottom:1.8rem;font-size:.95rem} .tryouts-form button[disabled]{opacity:.6;cursor:progress;transform:none} .form-notice{padding:clamp(1.4rem,3vw,2rem);border:1px solid var(--line-strong);margin-bottom:1.8rem} .form-notice[hidden]{display:none} .form-notice:focus{outline:none} .form-notice--ok{border-color:#25d366;background:rgba(37,211,102,.08)} .form-notice--fail{border-color:#ff8a6b;background:rgba(255,138,107,.08)} .form-notice-title{font-family:var(--font-display);font-weight:var(--fw-display);text-transform:uppercase;font-size:1.6rem;line-height:1.05} .form-notice-title .gold{color:var(--gold)} .form-notice-body{color:#d8d4cb;margin-top:.8rem;overflow-wrap:anywhere} .form-notice .btn{margin-top:1.3rem} .form-notice--ok .btn{display:none} @media (max-width:1080px){.tryouts-card{grid-template-columns:1fr}} @media (max-width:820px){ .tier-grid,.fit-grid,.req-grid{grid-template-columns:1fr} .tryouts-hero{padding-top:70px} } @media (max-width:620px){ .field-grid{grid-template-columns:1fr} .field--half{grid-column:1 / -1} .tryouts-photos{grid-template-columns:1fr} .tryouts-form .btn{width:100%;justify-content:center} /* 16px stops iOS zooming the page in when a field is focused */ .field input,.field textarea,.field select,.cc-face{font-size:16px} } /* ============================================================ COACHES, compact (homepage). Eleven full-size cards would be four screens of scrolling on a phone, so the homepage shows smaller cards, four across, and the coaches page keeps the big ones. Last in the file on purpose: it has to beat the responsive .coach-grid rules above. ============================================================ */ .coach-grid--compact{grid-template-columns:repeat(4,1fr);gap:1rem} .coach-grid--compact .coach-body{padding:1rem} .coach-grid--compact .coach h4{font-size:1.25rem} .coach-grid--compact .coach-role{font-size:.62rem;letter-spacing:.1em} .coach-grid--compact .coach .style{font-size:.82rem} .coach-grid--compact .coach .ig{font-size:.74rem;margin-top:.6rem} @media (max-width:1080px){.coach-grid--compact{grid-template-columns:repeat(3,1fr)}} @media (max-width:620px){ .coach-grid--compact{grid-template-columns:repeat(2,1fr);gap:.75rem} .coach-grid--compact .coach-body{padding:.8rem} .coach-grid--compact .coach h4{font-size:1.05rem} .coach-grid--compact .coach .style{display:none} } /* ============================================================ SEO AUDIT 2026-09-30 (SEO-AUDIT.md) ============================================================ */ /* English pages fetched Thai and Cyrillic font files for the language menu's labels and the baht sign: Kanit and PT Sans sit in the stacks for the th/ru pages, so a browser downloaded them for those few glyphs. Off their own pages the labels and the sign use Saira, then the system font. */ html:not([lang="th"]) .lang-switch__menu a[lang="th"],html:not([lang="th"]) .drawer-langs a[lang="th"],html:not([lang="ru"]) .lang-switch__menu a[lang="ru"],html:not([lang="ru"]) .drawer-langs a[lang="ru"]{font-family:'Saira','Saira Fallback',system-ui,sans-serif} html:not([lang="th"]) .price-row .amt{font-family:'Saira','Saira Fallback',system-ui,sans-serif} /* The closed drawer and the hidden cookie dialog are inert (build.mjs, main.js, analytics.js); this is the fallback for a browser without inert: nothing hidden can take focus. */ .drawer:not(.open){visibility:hidden;transition:transform .35s var(--ease),visibility 0s .35s} .drawer.open{visibility:visible;transition-delay:0s} .cookie:not(.show){visibility:hidden;transition:transform .35s var(--ease),visibility 0s .35s} .cookie.show{visibility:visible;transition-delay:0s} /* The programme row at the foot of a discipline page's prose (and the 404 page's links), and the Google reviews links under the testimonials. */ .also-row{margin-top:2rem;color:var(--muted)} .also-row a{color:var(--gold);text-decoration:underline;text-underline-offset:3px} .also-row a:hover{color:var(--gold-bright)} .reviews-links{text-align:center;margin-top:1rem;color:var(--muted)} .reviews-links a{color:var(--gold);text-decoration:underline;text-underline-offset:3px} .reviews-links a:hover{color:var(--gold-bright)} /* The programme page's question-and-answer block (a `faq` block in i18n): plain h3 questions at prose width, not the three-column cards. Prose links are gold like the blog's. */ .faq{margin-top:1.4rem} .faq h3{font-size:1.05rem;text-transform:none;letter-spacing:0;margin-top:1.4rem;color:var(--bone)} .faq p{margin-top:.5rem} .prose p a:not(.btn),.subprog p a{color:var(--gold);text-decoration:underline;text-underline-offset:3px} .prose p a:not(.btn):hover,.subprog p a:hover{color:var(--gold-bright)} .prose p .btn{text-decoration:none} /* The agency credit after the rights line (Gareth, 2026-09-30): small, muted, the name linked. */ .foot-bottom .foot-credit{margin-left:.6rem;color:var(--muted-2)} .foot-bottom .foot-credit a{color:inherit;text-decoration:underline;text-underline-offset:3px} .foot-bottom .foot-credit a:hover{color:var(--gold)} /* Re-versioned 2026-09-30 evening: the edge had pinned the previous copy of this file under the new hash (see NOTES.md, Live on WebOps). */ /* The tryouts form: "Please complete the application in English." under the lede (the gym, 2026-10-02). */ .try-lang-note{color:var(--gold);font-weight:700;font-size:1.075rem;margin-top:.9rem}