/* =========================================================================== King's Sports Centre / Powerhouse Gym ONE theme, committed. An earlier build split light and dark across the site and it read as an accident rather than a decision — mixing background tones mid-journey is the single fastest way to look unfinished. Palette is sampled from kingssportscentre.com, not invented: #2F2E2E charcoal (their section background) #606060 mid grey (their most-used surface) #A8A8A8 light grey (their body text) #F4A111 logo gold, with #CC8908 as the deep tone Off-black grounds rather than #000, so photography and shadows have somewhere to sit. Type pairing is swappable — see src/lib/fonts.js and /fontlab. Default is Oswald over Public Sans. Weights sit at 600 with 700 reserved for the few places that genuinely need to shout; heavy weight plus uppercase compounds fast, and reads as shouting rather than confident. =========================================================================== */ /* Brand constants — identical in both themes. */ :root { --gold: #f4a111; --gold-deep: #cc8908; --gold-bright: #ffbe45; --red: #e03a3e; /* Powerhouse franchise red, used sparingly */ --radius: 4px; --radius-lg: 8px; /* Overridden inline on by lib/fonts.js. These are the fallbacks. */ --display: "Oswald", "Arial Narrow", Impact, sans-serif; --sans: "Public Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif; --display-tracking: .01em; --maxw: 1180px; --z-bar: 40; --z-tab: 50; --z-install: 60; } /* --------------------------------------------------------------------------- Two themes, assigned per page rather than per section. `.theme-dark` — Powerhouse Gym: the gym page, the rates, the timetable and every signed-in surface. Gold on off-black. `.theme-light` — King's Sports Centre: the front door, King's Kids, trainers, contact. Warm and welcoming, because the people landing there are families deciding whether to visit at all. A whole page commits to one, with the header and footer constant either way. The exception is `.zone-dark`, which drops the dark token set onto a single band: the front page is light, but the membership block and the photo wall belong to the gym, and they carry the gym's colours down with them. Both selectors share one token list, so a palette change cannot land on half the site. --------------------------------------------------------------------------- */ .theme-dark, .zone-dark { --ground: #131211; --ground-2: #191817; --surface: #1d1c1a; --surface-2: #262421; --surface-3: #322f2b; --line: #2c2a27; --line-strong: #423e39; --ink: #f5f2ee; --ink-2: #c3bdb4; --ink-3: #a8a8a8; /* their light grey, verbatim */ --muted: #7d766d; --accent: var(--gold); --on-accent: #16120a; --ok: #4fbf82; --ok-soft: #16261d; --warn: #e0a33c; --warn-soft: #2a2113; --bad: #e5695c; --bad-soft: #2b1715; --track: #2a2724; --shadow-sm: 0 1px 2px rgba(8, 6, 4, .5); --shadow: 0 4px 10px rgba(8, 6, 4, .45), 0 16px 40px rgba(8, 6, 4, .4); --shadow-lg: 0 12px 30px rgba(8, 6, 4, .55), 0 40px 80px rgba(8, 6, 4, .5); --glow: 0 0 0 1px rgba(244, 161, 17, .35), 0 8px 30px rgba(244, 161, 17, .12); --scrim: linear-gradient(90deg, rgba(12, 11, 10, .96) 0%, rgba(12, 11, 10, .84) 42%, rgba(12, 11, 10, .38) 100%), linear-gradient(0deg, rgba(12, 11, 10, .9) 0%, transparent 45%); } .theme-light { --ground: #faf7f2; --ground-2: #f3ece1; --surface: #ffffff; --surface-2: #faf6f0; --surface-3: #efe7db; --line: #e7dece; --line-strong: #d0c3ad; --ink: #1c1a18; --ink-2: #4c4740; --ink-3: #6d675e; --muted: #8d867b; /* Logo gold is too pale for text on white; the deep tone carries it. */ --accent: #a86e07; --on-accent: #16120a; --ok: #2e8f5c; --ok-soft: #e7f4ec; --warn: #9a6a12; --warn-soft: #fdf3e0; --bad: #b8382c; --bad-soft: #fceceb; --track: #e7ded0; --shadow-sm: 0 1px 2px rgba(60, 45, 25, .06); --shadow: 0 2px 6px rgba(60, 45, 25, .07), 0 14px 34px rgba(60, 45, 25, .08); --shadow-lg: 0 10px 26px rgba(60, 45, 25, .1), 0 34px 70px rgba(60, 45, 25, .12); --glow: 0 0 0 1px rgba(244, 161, 17, .55), 0 8px 26px rgba(244, 161, 17, .18); /* Lighter scrim: the hero photo should feel open, not sealed off. */ --scrim: linear-gradient(90deg, rgba(20, 16, 12, .82) 0%, rgba(20, 16, 12, .6) 45%, rgba(20, 16, 12, .18) 100%), linear-gradient(0deg, rgba(20, 16, 12, .7) 0%, transparent 50%); } * { box-sizing: border-box; } html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; } body { margin: 0; font-family: var(--sans); font-size: 16.5px; line-height: 1.62; color: var(--ink); background: var(--ground); padding-bottom: env(safe-area-inset-bottom); -webkit-font-smoothing: antialiased; position: relative; } /* Fine grain over the whole page. Flat dark UI looks like a slab of plastic; a little noise gives it a surface. */ .theme-dark body::after, body.theme-dark::after { content: ""; position: fixed; inset: 0; z-index: 1; pointer-events: none; opacity: .16; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23n)' opacity='.55'/%3E%3C/svg%3E"); } main, header, footer, section { position: relative; z-index: 2; } /* --- Type ----------------------------------------------------------------- */ h1, h2, h3, h4 { font-family: var(--display); font-weight: 600; text-transform: uppercase; line-height: .98; /* Each pairing carries its own tracking — condensed faces need a little positive tracking in caps, heavy grotesques need negative. */ letter-spacing: var(--display-tracking); margin: 0 0 .6rem; color: var(--ink); text-wrap: balance; } h1 { font-size: clamp(2.6rem, 7vw, 5.2rem); font-weight: 700; } h2 { font-size: clamp(1.9rem, 4vw, 3rem); } /* Card and panel titles drop the caps — uppercase everywhere flattens the hierarchy, and sentence case here makes h1/h2 read as the loud ones. */ h3 { font-size: 1.3rem; letter-spacing: 0; text-transform: none; } h4 { font-size: 1.05rem; letter-spacing: .01em; text-transform: none; } p { margin: 0 0 1rem; max-width: 68ch; text-wrap: pretty; } a { color: var(--accent); text-underline-offset: 3px; } small { font-size: .82rem; } strong { font-weight: 600; } ::selection { background: var(--gold); color: var(--on-accent); } :focus-visible { outline: 2px solid var(--gold); outline-offset: 2px; } /* Data should never wobble as it updates. */ .num, .stat .v, .plan .price, .classcard .time, td, th, .meter-row { font-variant-numeric: tabular-nums; } .wrap { width: 100%; max-width: var(--maxw); margin: 0 auto; padding: 0 1.2rem; } .wrap-narrow { max-width: 680px; } /* Section label. Tracked-out gold caps, no decorative rule. */ .kicker { font-family: var(--sans); font-size: .68rem; font-weight: 600; letter-spacing: .24em; text-transform: uppercase; color: var(--gold); margin-bottom: .7rem; } .lede { font-size: 1.1rem; color: var(--ink-2); } /* --- Header --------------------------------------------------------------- */ .topbar { background: rgba(13, 12, 11, .92); backdrop-filter: blur(10px); position: sticky; top: 0; z-index: var(--z-bar); border-bottom: 1px solid var(--line); } .topbar-inner { display: flex; align-items: center; gap: 1rem; min-height: 68px; } .brand { display: flex; align-items: center; gap: .65rem; text-decoration: none; color: #fff; } .brand img { height: 40px; width: auto; display: block; } .brand-text { display: flex; flex-direction: column; line-height: 1; } .brand-text b { font-family: var(--display); font-size: 1.3rem; font-weight: 600; text-transform: uppercase; letter-spacing: .02em; } .brand-text span { font-size: .54rem; letter-spacing: .26em; text-transform: uppercase; color: var(--gold); margin-top: .25rem; font-weight: 600; } /* No wrapping: a second row of links inside a 68px bar overflows it. The burger takes over before the items would ever need to fold. */ .nav { margin-left: auto; display: flex; gap: 0; align-items: center; flex-wrap: nowrap; } .nav a { color: var(--bar-ink); text-decoration: none; white-space: nowrap; padding: .5rem .6rem; font-size: .78rem; font-weight: 600; text-transform: uppercase; letter-spacing: .1em; border-bottom: 2px solid transparent; transition: color .15s, border-color .15s; } .nav a:hover { color: var(--bar-ink-strong); border-bottom-color: var(--bar-line); } .nav a.on { color: var(--gold); border-bottom-color: var(--gold); } .nav a.cta { background: var(--gold); color: var(--on-accent); border-bottom-color: var(--gold); margin-left: .4rem; } .nav a.cta:hover { background: var(--gold-bright); color: var(--on-accent); } @media (max-width: 1180px) { .nav a, .menu-top { font-size: .7rem; padding: .4rem .42rem; letter-spacing: .05em; } } @media (max-width: 820px) { .nav a { font-size: .7rem; padding: .4rem .5rem; letter-spacing: .06em; } .brand-text span { display: none; } .brand img { height: 32px; } } /* --- Hero ----------------------------------------------------------------- */ .hero { position: relative; overflow: hidden; isolation: isolate; padding: clamp(3.5rem, 10vw, 7.5rem) 0; } .hero-media { position: absolute; inset: 0; z-index: -2; } .hero-media img { width: 100%; height: 100%; object-fit: cover; object-position: center 38%; } /* Scrim: dark enough to hold type, angled so the photo still reads. */ .hero::before { content: ""; position: absolute; inset: 0; z-index: -1; background: var(--scrim); } .hero h1 { color: #fff; } .hero h1 em { font-style: normal; color: var(--gold); display: block; } .hero .kicker { color: var(--gold-bright); } .hero .lede { color: rgba(255, 255, 255, .84); } /* Hero copy is hardcoded white because the scrim behind it is always dark, whatever theme the page is in. The ghost button was still reaching for --ink, which on a light page is near-black on a dark photograph - the secondary action was effectively invisible. Give it the same fixed treatment as the headline. The gold panel variant overrides this below with higher specificity, because there the background is light. */ .hero .btn.ghost { color: #fff; border-color: rgba(255, 255, 255, .55); background: rgba(12, 11, 10, .28); backdrop-filter: blur(2px); } .hero .btn.ghost:hover { color: var(--gold); border-color: var(--gold); background: rgba(12, 11, 10, .5); } .hero p { color: rgba(255, 255, 255, .84); max-width: 46ch; font-size: 1.08rem; } /* Left edge lines up with .wrap; only the measure is constrained. */ .hero-inner { max-width: 40rem; margin-left: 0; } .hero-stats { display: flex; gap: 2.4rem; flex-wrap: wrap; margin-top: 2.2rem; } .hero-stats div span { display: block; font-family: var(--display); font-weight: 700; font-size: 2.6rem; line-height: 1; color: var(--gold); } .hero-stats div small { text-transform: uppercase; letter-spacing: .16em; font-size: .62rem; color: var(--muted); font-weight: 600; } /* Compact hero for interior pages. */ .hero.slim { padding: clamp(2.5rem, 6vw, 4rem) 0; } .hero.slim h1 { font-size: clamp(2.2rem, 5vw, 3.6rem); } /* --- Sections ------------------------------------------------------------- */ /* Deliberately NOT alternating light/dark. Depth comes from surface steps. */ section.band { padding: clamp(2.5rem, 6vw, 4.5rem) 0; } section.band.alt { background: var(--ground-2); border-block: 1px solid var(--line); } /* Redeclaring the tokens changes what descendants resolve to; the band still has to paint its own ground, and the seam needs a line so two stacked zones do not merge into one slab. */ section.band.zone-dark { background: var(--ground); color: var(--ink); border-block: 1px solid var(--line); } section.band.zone-dark + section.band.zone-dark { border-top: 0; padding-top: 0; } .section-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 1rem; margin-bottom: 1.6rem; flex-wrap: wrap; } .section-head h2 { margin-bottom: 0; } .section-head a { font-size: .74rem; font-weight: 600; text-transform: uppercase; letter-spacing: .14em; white-space: nowrap; text-decoration: none; border-bottom: 1px solid var(--line-strong); padding-bottom: .15rem; } .section-head a:hover { border-bottom-color: var(--gold); } .grid { display: grid; gap: 1.1rem; } .g2 { grid-template-columns: repeat(auto-fit, minmax(290px, 1fr)); } .g3 { grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); } .g4 { grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); } /* Pricing cards need width. At ~180px the blurbs wrap to four or five lines, heights diverge, and margin-top:auto turns the difference into dead space above the shorter cards' buttons. */ .planrow { grid-template-columns: repeat(auto-fit, minmax(252px, 1fr)); } /* Asymmetric split — avoids the three-equal-columns default. */ .split { display: grid; gap: 1.6rem; grid-template-columns: 1.35fr .65fr; align-items: start; } @media (max-width: 900px) { .split { grid-template-columns: 1fr; } } /* --- Cards ---------------------------------------------------------------- */ .card { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); padding: 1.3rem; } .card.tight { padding: .95rem; } .card.raised { box-shadow: var(--shadow); } .card.feature { border-color: var(--gold); box-shadow: var(--glow); } .card h3 { margin-top: 0; } .card-head { display: flex; align-items: center; justify-content: space-between; gap: .75rem; margin-bottom: .8rem; } /* Photo-topped card. */ .photocard { padding: 0; overflow: hidden; display: flex; flex-direction: column; } .photocard .shot { position: relative; aspect-ratio: 4 / 3; overflow: hidden; background: var(--surface-2); } .photocard .shot img { width: 100%; height: 100%; object-fit: cover; transition: transform .5s cubic-bezier(.2,.7,.3,1); } .photocard:hover .shot img { transform: scale(1.045); } .photocard .shot::after { content: ""; position: absolute; inset: 0; background: linear-gradient(0deg, rgba(15, 13, 12, .82), transparent 58%); } .photocard .body { padding: 1rem 1.15rem 1.2rem; flex: 1; display: flex; flex-direction: column; } .photocard .body .btn { margin-top: auto; } .photocard .label { position: absolute; left: 0; bottom: 0; z-index: 2; padding: .7rem .9rem; font-family: var(--display); font-weight: 600; font-size: 1.25rem; text-transform: uppercase; color: #fff; letter-spacing: .01em; } /* --- Buttons -------------------------------------------------------------- */ .btn { display: inline-flex; align-items: center; justify-content: center; gap: .5rem; background: var(--gold); color: var(--on-accent); border: 1px solid var(--gold); padding: .72rem 1.4rem; border-radius: var(--radius); font-family: var(--sans); font-weight: 600; font-size: .82rem; text-transform: uppercase; letter-spacing: .12em; text-decoration: none; cursor: pointer; transition: background .16s, transform .1s, border-color .16s, color .16s; } .btn:hover { background: var(--gold-bright); border-color: var(--gold-bright); } .btn:active { transform: translateY(1px); } .btn.ghost { background: transparent; color: var(--ink); border-color: var(--line-strong); } .btn.ghost:hover { background: transparent; border-color: var(--gold); color: var(--gold); } .btn.dark { background: var(--surface-2); color: var(--ink); border-color: var(--line-strong); } .btn.dark:hover { background: var(--surface-3); border-color: var(--gold); } .btn.danger { background: transparent; color: var(--bad); border-color: rgba(229, 105, 92, .45); } .btn.danger:hover { background: var(--bad-soft); border-color: var(--bad); } .btn.sm { padding: .4rem .8rem; font-size: .7rem; letter-spacing: .1em; } .btn.lg { padding: .95rem 1.9rem; font-size: .9rem; } .btn.block { width: 100%; } .btn[disabled], .btn.disabled { opacity: .4; pointer-events: none; } .btnrow { display: flex; gap: .7rem; flex-wrap: wrap; align-items: center; } /* --- Forms ---------------------------------------------------------------- */ label { display: block; font-size: .68rem; font-weight: 600; color: var(--ink-3); margin-bottom: .35rem; text-transform: uppercase; letter-spacing: .12em; } input[type=text], input[type=email], input[type=password], input[type=tel], input[type=date], input[type=time], input[type=number], input[type=search], select, textarea { width: 100%; padding: .78rem .85rem; border: 1px solid var(--line-strong); border-radius: var(--radius); font: inherit; font-size: 16px; background: var(--ground-2); color: var(--ink); transition: border-color .15s, box-shadow .15s; } input::placeholder, textarea::placeholder { color: var(--muted); } input:focus, select:focus, textarea:focus { outline: none; border-color: var(--gold); box-shadow: 0 0 0 3px rgba(244, 161, 17, .18); } .field { margin-bottom: 1.1rem; } .field-row { display: grid; gap: .85rem; grid-template-columns: 1fr 1fr; } @media (max-width: 540px) { .field-row { grid-template-columns: 1fr; } } .check { display: flex; gap: .65rem; align-items: flex-start; font-size: .88rem; font-weight: 400; color: var(--ink-2); text-transform: none; letter-spacing: 0; } .check input { margin-top: .3rem; width: auto; flex: none; accent-color: var(--gold); } /* --- Pills and alerts ----------------------------------------------------- */ .pill { display: inline-block; padding: .22rem .55rem; border-radius: 2px; font-size: .62rem; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; vertical-align: middle; border: 1px solid transparent; } .pill.gold { background: rgba(244, 161, 17, .13); color: var(--gold); border-color: rgba(244, 161, 17, .35); } .pill.ok { background: var(--ok-soft); color: var(--ok); } .pill.warn { background: var(--warn-soft); color: var(--warn); } .pill.bad { background: var(--bad-soft); color: var(--bad); } .pill.grey { background: var(--surface-2); color: var(--ink-3); } .pill.tier1 { background: var(--surface-2); color: var(--ink-3); } .pill.tier2 { background: rgba(244, 161, 17, .12); color: var(--gold); } .pill.tier3 { background: var(--gold); color: var(--on-accent); } .alert { padding: .9rem 1.1rem; border-radius: var(--radius); border-left: 3px solid; margin-bottom: 1.2rem; font-size: .9rem; background: var(--surface-2); color: var(--ink-2); } .alert.success { border-color: var(--ok); background: var(--ok-soft); } .alert.error { border-color: var(--bad); background: var(--bad-soft); } .alert.info { border-color: var(--gold); background: var(--warn-soft); } .alert.warn { border-color: var(--warn); background: var(--warn-soft); } .notice { font-size: .84rem; color: var(--ink-3); background: var(--ground-2); border: 1px solid var(--line); border-radius: var(--radius); padding: .8rem .95rem; } .wireflag { font-size: .8rem; color: var(--warn); background: var(--warn-soft); border: 1px dashed rgba(224, 163, 60, .45); border-radius: var(--radius); padding: .7rem .9rem; } /* --- Meters --------------------------------------------------------------- */ .meter { height: 6px; border-radius: 99px; background: var(--track); overflow: hidden; } .meter > span { display: block; height: 100%; border-radius: 99px; transition: width .6s cubic-bezier(.4, 0, .2, 1); } /* Scope the fill to .meter specifically. `.lvl-quiet > span` on its own also matches the label spans inside .meter-row, which carries the same lvl-* class — that paints solid colour blocks behind the text instead of filling a bar. */ .meter.lvl-quiet > span, .meter.lvl-low > span { background: var(--ok); } .meter.lvl-medium > span { background: var(--gold); } .meter.lvl-high > span { background: #e08a3c; } .meter.lvl-full > span { background: var(--bad); } .lvl-quiet .lbl, .lvl-low .lbl { color: var(--ok); } .lvl-medium .lbl { color: var(--gold); } .lvl-high .lbl { color: #e08a3c; } .lvl-full .lbl { color: var(--bad); } .meter-row { display: flex; justify-content: space-between; align-items: baseline; font-size: .68rem; margin-bottom: .35rem; gap: .5rem; text-transform: uppercase; letter-spacing: .1em; } .meter-row .lbl { font-weight: 600; } /* --- Class rows ----------------------------------------------------------- */ .daygroup { margin-bottom: 1.9rem; } .dayhead { position: sticky; top: 68px; z-index: 5; background: var(--ground); padding: .75rem 0 .55rem; font-family: var(--display); font-size: 1.3rem; font-weight: 600; text-transform: uppercase; letter-spacing: .02em; border-bottom: 2px solid var(--gold); margin-bottom: .8rem; } .dayhead .today { color: var(--gold); font-family: var(--sans); font-size: .6rem; letter-spacing: .2em; margin-left: .7rem; font-weight: 600; } .slot { display: grid; grid-template-columns: 92px 1fr auto; gap: 1rem; align-items: center; background: var(--surface); border: 1px solid var(--line); border-left: 3px solid transparent; border-radius: var(--radius); padding: .9rem 1.1rem; margin-bottom: .5rem; transition: border-color .16s, background .16s; } .slot:hover { border-left-color: var(--gold); background: var(--surface-2); } .slot.cancelled { opacity: .45; } .slot .when { font-family: var(--display); font-weight: 600; font-size: 1.5rem; color: var(--ink); line-height: 1; } .slot .when small { display: block; font-family: var(--sans); font-weight: 400; color: var(--muted); font-size: .68rem; margin-top: .2rem; text-transform: uppercase; letter-spacing: .08em; } .slot .what strong { display: block; font-family: var(--display); font-size: 1.28rem; font-weight: 600; text-transform: uppercase; letter-spacing: .01em; line-height: 1.1; } .slot .what .meta { color: var(--ink-3); font-size: .8rem; } .slot .act { text-align: right; min-width: 150px; } @media (max-width: 680px) { .slot { grid-template-columns: 72px 1fr; } .slot .when { font-size: 1.25rem; } .slot .act { grid-column: 1 / -1; text-align: left; } .slot .act .meter { margin-top: .4rem; } } /* --- Tables --------------------------------------------------------------- */ .tablewrap { overflow-x: auto; -webkit-overflow-scrolling: touch; border: 1px solid var(--line); border-radius: var(--radius); background: var(--surface); } table { width: 100%; border-collapse: collapse; font-size: .88rem; } th, td { text-align: left; padding: .72rem .85rem; border-bottom: 1px solid var(--line); white-space: nowrap; } th { background: var(--ground-2); font-size: .62rem; text-transform: uppercase; letter-spacing: .16em; color: var(--muted); font-weight: 600; } tbody tr:last-child td { border-bottom: 0; } tbody tr:hover { background: var(--surface-2); } td.wrap-cell, th.wrap-cell { white-space: normal; } td.price { font-family: var(--display); font-size: 1.15rem; font-weight: 600; color: var(--gold); } /* Rate card, styled after the printed sheet. */ .ratecard .group td { border-bottom: 2px solid var(--line-strong); } .ratecard .duration { font-family: var(--display); text-transform: uppercase; font-size: 1.05rem; font-weight: 600; color: var(--ink); letter-spacing: .04em; } /* --- Stats ---------------------------------------------------------------- */ .stat { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); padding: 1.1rem 1.15rem; border-top: 2px solid var(--gold); } .stat .k { font-size: .6rem; text-transform: uppercase; letter-spacing: .18em; color: var(--muted); font-weight: 600; } .stat .v { font-family: var(--display); font-size: 2.3rem; font-weight: 700; line-height: 1.05; color: var(--ink); } .stat .s { font-size: .74rem; color: var(--ink-3); } /* --- Pricing -------------------------------------------------------------- */ /* Spacing is deliberate: the tier pill, the name and the price were reading as one clump, while the stretched .foot left a hole above the button. Give the top of the card room and even the rhythm out. */ .plan { display: flex; flex-direction: column; position: relative; padding: 1.6rem 1.5rem 1.5rem; } .plan.featured { border-color: var(--gold); box-shadow: var(--glow); } .plan .badge { position: absolute; top: -1px; right: -1px; background: var(--gold); color: var(--on-accent); font-size: .58rem; font-weight: 600; letter-spacing: .16em; text-transform: uppercase; padding: .3rem .75rem; } .plan > .pill { align-self: flex-start; margin-bottom: 1rem; } .plan h3 { margin: 0 0 .2rem; line-height: 1.15; } .plan .price { font-family: var(--display); font-size: 3rem; font-weight: 700; line-height: 1; margin: .7rem 0 .3rem; color: #fff; } .plan > p { margin-bottom: 1.4rem; line-height: 1.55; } .plan .price span { font-family: var(--sans); font-size: .72rem; font-weight: 600; color: var(--muted); text-transform: uppercase; letter-spacing: .12em; } .plan ul { list-style: none; padding: 0; margin: 1rem 0; font-size: .85rem; } /* A small dot carries "included / not included" without a glyph shouting it. Gold means included, grey means extra — no arrows, ticks or crosses. */ .plan ul li { padding: .34rem 0 .34rem 1.15rem; position: relative; color: var(--ink-2); border-bottom: 1px solid var(--line); } .plan ul li:last-child { border-bottom: 0; } .plan ul li::before { content: ""; position: absolute; left: 0; top: 1.05em; width: 5px; height: 5px; border-radius: 50%; background: var(--gold); } /* Excluded lines get a cross rather than a dimmer dot — a grey dot reads as a quieter bullet, not as "you do not get this". The text stays, so the steam room line still says what it costs. */ .plan ul li.no { color: var(--muted); } .plan ul li.no::before { content: "\00d7"; /* multiplication sign — present in every font */ width: auto; height: auto; border-radius: 0; background: none; color: var(--bad); font-size: 1.05em; font-weight: 700; line-height: 1; top: .78em; left: -1px; } /* Pin CTAs to a common baseline across a row of cards. margin-top:auto does the aligning; padding-top guarantees a gap even when a card is the tall one and auto collapses to nothing. */ .plan .foot { margin-top: auto; padding-top: 1.4rem; } /* --- Member app ----------------------------------------------------------- */ .appbar { background: rgba(13, 12, 11, .94); backdrop-filter: blur(10px); padding: .85rem 0; position: sticky; top: 0; z-index: var(--z-bar); border-bottom: 1px solid var(--line); } .appbar-inner { display: flex; align-items: center; gap: .85rem; } .appbar img.mark { height: 32px; width: auto; } .appbar h1 { font-size: 1.35rem; color: #fff; margin: 0; } .appbar .who { margin-left: auto; font-size: .72rem; color: var(--muted); text-align: right; line-height: 1.4; } .appbar .who a { color: var(--gold); font-weight: 600; } .appmain { padding: 1.4rem 0 6rem; } .tabbar { position: fixed; bottom: 0; left: 0; right: 0; z-index: var(--z-tab); background: rgba(18, 17, 16, .97); backdrop-filter: blur(12px); border-top: 1px solid var(--line); display: flex; padding-bottom: env(safe-area-inset-bottom); } .tabbar a { flex: 1; text-align: center; padding: .6rem .2rem .65rem; text-decoration: none; color: var(--muted); font-size: .58rem; font-weight: 600; text-transform: uppercase; letter-spacing: .1em; border-top: 2px solid transparent; transition: color .15s; } .tabbar a .ic { display: block; font-size: 1.3rem; line-height: 1.35; } .tabbar a.on { color: var(--gold); border-top-color: var(--gold); } /* --- Install prompt ------------------------------------------------------- */ .install { position: fixed; left: .85rem; right: .85rem; z-index: var(--z-install); bottom: calc(72px + env(safe-area-inset-bottom)); background: var(--surface-2); color: var(--ink); border: 1px solid var(--line-strong); border-left: 3px solid var(--gold); border-radius: var(--radius); padding: .95rem 1.05rem; box-shadow: var(--shadow-lg); display: none; } .install.show { display: flex; gap: .85rem; align-items: center; } .install .txt { flex: 1; font-size: .82rem; line-height: 1.45; color: var(--ink-3); } .install .txt strong { display: block; font-family: var(--display); font-size: 1.15rem; text-transform: uppercase; color: #fff; letter-spacing: .01em; } .install button { flex: none; } .install .x { background: none; border: 0; color: var(--muted); font-size: 1.4rem; cursor: pointer; padding: 0 .2rem; line-height: 1; } /* --- Footer --------------------------------------------------------------- */ .footer { background: #0d0c0b; color: var(--muted); padding: 3rem 0 2rem; font-size: .86rem; margin-top: 3rem; border-top: 2px solid var(--gold); } .footer a { color: var(--ink-3); text-decoration: none; } .footer a:hover { color: var(--gold); } .footer h4 { color: #fff; font-size: .8rem; letter-spacing: .16em; margin-bottom: .8rem; } .footer .tagline { font-family: var(--display); text-transform: uppercase; letter-spacing: .18em; color: var(--gold); font-size: .85rem; margin-top: .5rem; } /* --- Utilities ------------------------------------------------------------ */ .kv { display: grid; grid-template-columns: auto 1fr; gap: .5rem 1.2rem; font-size: .88rem; align-items: baseline; } .kv dt { color: var(--muted); text-transform: uppercase; font-size: .68rem; letter-spacing: .1em; font-weight: 600; } .kv dd { margin: 0; font-weight: 600; text-align: right; } .muted { color: var(--muted); } .right { text-align: right; } .center { text-align: center; } .mt0 { margin-top: 0; } .mt1 { margin-top: .85rem; } .mt2 { margin-top: 1.7rem; } .mb0 { margin-bottom: 0; } .mb1 { margin-bottom: .85rem; } .mb2 { margin-bottom: 1.7rem; } .hr { height: 1px; background: var(--line); border: 0; margin: 1.3rem 0; } .stack > * + * { margin-top: .85rem; } .mono { font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-size: .85em; } .skiplink { position: absolute; left: -9999px; top: 0; z-index: 100; background: var(--gold); color: var(--on-accent); padding: .6rem 1rem; font-weight: 600; } .skiplink:focus { left: .5rem; top: .5rem; } /* --- Payment -------------------------------------------------------------- */ .payshell { min-height: 100dvh; display: flex; align-items: center; justify-content: center; background: var(--ground); padding: 1.5rem 1rem; } .paycard { max-width: 510px; width: 100%; } .gatewaychrome { background: #0b3d91; color: #fff; padding: .85rem 1rem; border-radius: var(--radius) var(--radius) 0 0; font-size: .84rem; display: flex; align-items: center; gap: .5rem; } /* --- Motion / print ------------------------------------------------------- */ @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: .001ms !important; transition-duration: .001ms !important; } html { scroll-behavior: auto; } } @media print { .topbar, .tabbar, .footer, .install, .btnrow, .nav, body::after { display: none !important; } body { background: #fff; color: #000; } .card, .slot { border-color: #ccc; background: #fff; } } /* =========================================================================== Mural --------------------------------------------------------------------------- Modelled on the Gold's Gym "wood wall": a grid of uniform square tiles where photographs are interleaved with plain texture tiles, so it reads as a physical wall of framed pictures rather than a gallery widget. Theirs alternates photos with wood panelling. Ours alternates photos with brand tiles — charcoal carrying the crown, gold carrying a short line of copy — which keeps the identity in the wall instead of borrowing a texture that means nothing to King's. =========================================================================== */ .mural { display: grid; grid-template-columns: repeat(6, 1fr); gap: 6px; background: var(--line); padding: 6px; border-radius: var(--radius); } .mural .tile { position: relative; aspect-ratio: 1; overflow: hidden; background: var(--surface-2); } .mural .tile img { width: 100%; height: 100%; object-fit: cover; display: block; filter: grayscale(.35) contrast(1.05); transition: transform .6s cubic-bezier(.2,.7,.3,1), filter .4s; } .mural .tile:hover img { transform: scale(1.06); filter: grayscale(0) contrast(1); } /* A couple of tiles break the grid so the wall is not a perfect checkerboard. */ .mural .tile.wide { grid-column: span 2; aspect-ratio: 2 / 1; } .mural .tile.big { grid-column: span 2; grid-row: span 2; aspect-ratio: 1; } /* Brand tiles — the equivalent of their wood panels. */ .mural .tile.brand { display: flex; align-items: center; justify-content: center; background: var(--ground-2); border: 1px solid var(--line); } .mural .tile.brand img { width: 52%; height: auto; object-fit: contain; filter: none; opacity: .85; } .mural .tile.brand:hover img { transform: none; } .mural .tile.gold { background: var(--gold); color: var(--on-accent); font-family: var(--display); text-transform: uppercase; font-size: clamp(.85rem, 1.6vw, 1.5rem); font-weight: 600; letter-spacing: .06em; line-height: 1; text-align: center; padding: .5rem; flex-direction: column; gap: .2rem; } .mural .tile.gold small { font-family: var(--sans); font-size: .5rem; letter-spacing: .22em; font-weight: 500; opacity: .75; } .mural .tile.dark { background: var(--surface); color: var(--ink-3); font-family: var(--display); text-transform: uppercase; font-size: clamp(.8rem, 1.5vw, 1.35rem); letter-spacing: .06em; text-align: center; padding: .5rem; line-height: 1.05; } .mural .tile.dark b { color: var(--gold); display: block; font-weight: 600; } @media (max-width: 900px) { .mural { grid-template-columns: repeat(4, 1fr); } } @media (max-width: 560px) { .mural { grid-template-columns: repeat(3, 1fr); gap: 4px; padding: 4px; } .mural .tile.big { grid-column: span 2; grid-row: span 2; } } /* --- Heritage timeline ---------------------------------------------------- */ .timeline { list-style: none; padding: 0; margin: 0; } .timeline li { position: relative; padding: 0 0 1.4rem 1.9rem; border-left: 1px solid var(--line-strong); } .timeline li:last-child { border-left-color: transparent; padding-bottom: 0; } .timeline li::before { content: ""; position: absolute; left: -4px; top: .45rem; width: 7px; height: 7px; border-radius: 50%; background: var(--gold); } .timeline .yr { font-family: var(--display); font-size: 1.45rem; font-weight: 600; color: var(--gold); line-height: 1; display: block; margin-bottom: .2rem; } .timeline p { margin: 0; color: var(--ink-2); font-size: .92rem; max-width: 46ch; } .pullquote { border-left: 2px solid var(--gold); padding: .3rem 0 .3rem 1.2rem; margin: 1.6rem 0 0; } .pullquote p { font-family: var(--display); text-transform: none; font-size: 1.3rem; line-height: 1.3; color: var(--ink); margin: 0 0 .5rem; } .pullquote cite { font-style: normal; font-size: .66rem; letter-spacing: .2em; text-transform: uppercase; color: var(--muted); font-weight: 500; } /* Standing alone in the narrow column of a split, the quote has to carry the column on its own - a hairline rule and body-sized type read as an orphan. */ .pullquote.feature { border-left: 0; border-top: 2px solid var(--gold); padding: 1.2rem 0 0; margin: 0; } .pullquote.feature p { font-size: clamp(1.35rem, 2.2vw, 1.85rem); } @media (max-width: 900px) { .pullquote.feature { margin-top: 1.6rem; } } /* =========================================================================== Class cards --------------------------------------------------------------------------- Same anatomy as the pricing card, because it works: a pill, a title, one big display number, a dotted list of details, and a full-width action pinned to the bottom. For a class the big number is the start time rather than a price. The dense .slot row is kept for staff views, where scanning forty sessions matters more than presence. =========================================================================== */ .classgrid { display: grid; gap: 1rem; grid-template-columns: repeat(auto-fill, minmax(255px, 1fr)); } .classcard { display: flex; flex-direction: column; position: relative; background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); padding: 1.2rem; transition: border-color .16s, background .16s; } .classcard:hover { border-color: var(--line-strong); background: var(--surface-2); } .classcard.is-booked { border-color: var(--gold); box-shadow: var(--glow); } .classcard.is-cancelled { opacity: .5; } .classcard .badge { position: absolute; top: -1px; right: -1px; background: var(--gold); color: var(--on-accent); font-size: .58rem; font-weight: 600; letter-spacing: .16em; text-transform: uppercase; padding: .28rem .7rem; } .classcard .badge.quiet { background: var(--surface-3); color: var(--ink-3); } .classcard h3 { font-size: 1.2rem; margin: .55rem 0 0; } .classcard .time { font-family: var(--display); font-size: 2.7rem; font-weight: 700; line-height: 1; color: #fff; margin: .35rem 0 .1rem; font-variant-numeric: tabular-nums; } .classcard .time span { font-family: var(--sans); font-size: .7rem; font-weight: 500; color: var(--muted); text-transform: uppercase; letter-spacing: .12em; } .classcard ul { list-style: none; padding: 0; margin: .9rem 0 .8rem; font-size: .84rem; } .classcard ul li { padding: .3rem 0 .3rem 1.15rem; position: relative; color: var(--ink-2); border-bottom: 1px solid var(--line); } .classcard ul li:last-child { border-bottom: 0; } .classcard ul li::before { content: ""; position: absolute; left: 0; top: 1em; width: 5px; height: 5px; border-radius: 50%; background: var(--gold); } .classcard ul li.dim { color: var(--muted); } .classcard ul li.dim::before { content: "\00d7"; width: auto; height: auto; border-radius: 0; background: none; color: var(--bad); font-size: 1.05em; font-weight: 700; line-height: 1; top: .72em; left: -1px; } .classcard .foot { margin-top: auto; padding-top: .9rem; } .classcard .foot .meter { margin-bottom: .7rem; } /* =========================================================================== Membership finder --------------------------------------------------------------------------- Sixteen plans laid out flat is a wall, not a choice. Four questions narrow it to one or two. The full rate tables stay above as the reference — the finder is a way in, not a replacement for the card. Radios inside a real GET form, so it works with JavaScript off; app.js just auto-submits on change. Matching lives on the server only, so there is one implementation rather than two that can disagree. =========================================================================== */ .finder { background: var(--ground-2); border: 1px solid var(--line); border-left: 3px solid var(--gold); border-radius: var(--radius); padding: 1.4rem 1.5rem; display: grid; gap: 1.3rem; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); } .finder fieldset { border: 0; padding: 0; margin: 0; min-width: 0; } .finder legend { padding: 0; margin-bottom: .7rem; font-family: var(--sans); font-size: .68rem; font-weight: 600; letter-spacing: .18em; text-transform: uppercase; color: var(--gold); } .finder .chips { display: flex; flex-wrap: wrap; gap: .4rem; } .chip { display: inline-flex; margin: 0; cursor: pointer; } .chip input { position: absolute; opacity: 0; width: 0; height: 0; } .chip span { display: inline-block; padding: .42rem .8rem; border: 1px solid var(--line-strong); border-radius: 99px; font-size: .8rem; font-weight: 500; color: var(--ink-2); transition: background .14s, border-color .14s, color .14s; } .chip:hover span { border-color: var(--gold); color: var(--gold); } .chip input:checked + span { background: var(--gold); border-color: var(--gold); color: var(--on-accent); font-weight: 600; } .chip input:focus-visible + span { outline: 2px solid var(--gold); outline-offset: 2px; } .finder-actions { display: flex; gap: .6rem; align-items: flex-end; flex-wrap: wrap; } .finder-result { margin-top: 1.6rem; } .finder-result .found { font-family: var(--display); text-transform: uppercase; font-size: 1.15rem; letter-spacing: .02em; color: var(--ink); border-left: 3px solid var(--gold); padding-left: .85rem; margin-bottom: 1.1rem; } .finder-result .found strong { color: var(--gold); font-size: 1.5rem; } /* --- More gold across the pricing cards ----------------------------------- */ .plan .price { color: var(--gold); } .plan .price-sub { font-size: .76rem; color: var(--muted); text-transform: uppercase; letter-spacing: .1em; font-weight: 500; margin-bottom: .9rem; min-height: 1em; } .plan { border-top: 2px solid transparent; transition: border-color .16s, background .16s; } .plan:hover { border-top-color: var(--gold); background: var(--surface-2); } .plan.is-best { border-color: var(--gold); border-top-color: var(--gold); background: linear-gradient(180deg, rgba(244, 161, 17, .07), transparent 40%), var(--surface); box-shadow: var(--glow); } .plan.is-best .btn { box-shadow: 0 0 0 3px rgba(244, 161, 17, .16); } /* Gold rule under every section heading, so the colour recurs down the page. */ .section-head h2::after { content: ""; display: block; width: 42px; height: 3px; background: var(--gold); margin-top: .6rem; } @media (max-width: 620px) { .finder { padding: 1.1rem 1.15rem; gap: 1.1rem; } } /* =========================================================================== Week agenda --------------------------------------------------------------------------- Seven day columns that scroll horizontally with snap points, so a phone shows two or three days and a desktop shows the whole week without a media query guessing at breakpoints. Arrows page a week at a time. Included vs premium is carried on the left edge: gold means it comes with the membership, outlined grey means pay per session. One accent colour still — introducing a second hue here would fight the fullness meters. =========================================================================== */ .agenda-bar { display: flex; align-items: center; gap: .8rem; margin-bottom: .9rem; flex-wrap: wrap; } .agenda-nav { display: inline-flex; align-items: center; justify-content: center; width: 40px; height: 40px; flex: none; border: 1px solid var(--line-strong); border-radius: var(--radius); color: var(--ink); text-decoration: none; font-size: 1.5rem; line-height: 1; transition: border-color .14s, color .14s, background .14s; } .agenda-nav:hover { border-color: var(--gold); color: var(--gold); background: var(--surface-2); } .agenda-when { display: flex; flex-direction: column; line-height: 1.2; } .agenda-when strong { font-family: var(--display); text-transform: uppercase; font-size: 1.15rem; letter-spacing: .02em; color: var(--ink); font-weight: 600; } .agenda-when small { color: var(--muted); font-size: .72rem; letter-spacing: .1em; text-transform: uppercase; } .agenda-today { margin-left: auto; } .legend { display: flex; gap: 1.4rem; flex-wrap: wrap; list-style: none; padding: 0; margin: 0 0 1rem; font-size: .78rem; color: var(--ink-3); } .legend li { display: flex; align-items: center; gap: .5rem; } .legend .swatch { width: 14px; height: 14px; border-radius: 2px; flex: none; } .legend .swatch.included { background: var(--gold); } .legend .swatch.premium { background: transparent; border: 2px dashed var(--line-strong); } /* A fixed number of columns is visible per breakpoint and the track is paged by transform. No side-scrolling: the arrows and a drag are the only way through, which keeps the day columns aligned to the frame every time. */ .agenda-viewport { --cols: 5; /* Mon-Fri by default; the week is two pages */ --agenda-gap: 8px; overflow: hidden; touch-action: pan-y; /* let the page scroll vertically through it */ cursor: grab; } .agenda-viewport.is-dragging { cursor: grabbing; } .agenda-viewport.is-dragging .agenda { transition: none; } @media (min-width: 1400px) { .agenda-viewport { --cols: 7; } } @media (max-width: 1024px) { .agenda-viewport { --cols: 4; } } @media (max-width: 620px) { .agenda-viewport { --cols: 2; --agenda-gap: 6px; } } .agenda { display: grid; grid-auto-flow: column; grid-auto-columns: calc((100% - (var(--cols) - 1) * var(--agenda-gap)) / var(--cols)); gap: var(--agenda-gap); transition: transform .34s cubic-bezier(.3, .7, .3, 1); will-change: transform; } /* Page indicator, only meaningful once the week does not fit in one frame. */ .agenda-dots { display: flex; gap: .35rem; justify-content: center; margin-top: .9rem; } .agenda-dots button { width: 26px; height: 4px; border: 0; padding: 0; border-radius: 99px; background: var(--line-strong); cursor: pointer; transition: background .15s; } .agenda-dots button.on { background: var(--gold); } .agenda-dots[hidden] { display: none; } .agenda-day { background: var(--ground-2); border: 1px solid var(--line); border-radius: var(--radius); padding: .6rem; min-width: 0; } .agenda-day.is-today { border-color: var(--gold); background: var(--surface); } .agenda-day.is-past { opacity: .48; } .agenda-day header { display: flex; align-items: baseline; gap: .35rem; padding: .2rem .3rem .6rem; border-bottom: 1px solid var(--line); margin-bottom: .6rem; } .agenda-day header .dow { font-size: .64rem; letter-spacing: .16em; text-transform: uppercase; color: var(--muted); font-weight: 600; } .agenda-day header .dnum { font-family: var(--display); font-size: 1.35rem; font-weight: 600; color: var(--ink); line-height: 1; } .agenda-day header .mon { font-size: .64rem; color: var(--muted); text-transform: uppercase; letter-spacing: .1em; } .agenda-day.is-today header .dnum { color: var(--gold); } .badge-today { margin-left: auto; background: var(--gold); color: var(--on-accent); font-size: .52rem; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; padding: .16rem .4rem; border-radius: 2px; } .agenda-empty { color: var(--muted); font-size: .76rem; text-align: center; padding: 1.2rem .3rem; margin: 0; font-style: italic; } .agenda-item { background: var(--surface); border: 1px solid var(--line); border-left: 3px solid var(--gold); border-radius: 3px; padding: .6rem .65rem; margin-bottom: .5rem; transition: border-color .14s, background .14s; } .agenda-item:last-child { margin-bottom: 0; } .agenda-item:hover { background: var(--surface-2); } .agenda-item.premium { border-left-style: dashed; border-left-color: var(--line-strong); } .agenda-item.is-booked { border-color: var(--gold); box-shadow: inset 0 0 0 1px rgba(244, 161, 17, .35); } .agenda-item.is-cancelled { opacity: .5; } .agenda-item .ai-time { font-family: var(--display); font-size: 1.15rem; font-weight: 600; color: var(--gold); line-height: 1; font-variant-numeric: tabular-nums; } .agenda-item.premium .ai-time { color: var(--ink-3); } .agenda-item h4 { font-size: .95rem; margin: .3rem 0 .1rem; line-height: 1.15; text-transform: none; color: var(--ink); } .agenda-item .ai-meta { font-size: .74rem; color: var(--muted); margin-bottom: .5rem; } .agenda-item .ai-note { font-size: .72rem; line-height: 1.4; color: var(--ink-3); background: var(--ground-2); border-radius: 3px; padding: .4rem .5rem; margin: 0 0 .5rem; } .agenda-item .ai-note strong { color: var(--gold); } .agenda-item .meter-row { font-size: .6rem; margin-bottom: .25rem; } .agenda-item .meter { margin-bottom: .5rem; } .agenda-item form { margin: 0; } @media (max-width: 640px) { .agenda-when strong { font-size: 1rem; } .agenda-day { padding: .45rem; } .agenda-item { padding: .5rem .55rem; } .agenda-item h4 { font-size: .88rem; } .agenda-item .ai-meta { font-size: .68rem; } } /* =========================================================================== Toggle card — two ways to buy the same thing --------------------------------------------------------------------------- Radios plus `:has()` do the switching, so it works with no JavaScript. Where `:has()` is unsupported both options simply render stacked: still usable and still accurate, just not toggled. =========================================================================== */ .togglecard { position: relative; } .togglecard .tc-radio { position: absolute; opacity: 0; width: 0; height: 0; } .tc-toggle { display: grid; grid-auto-flow: column; grid-auto-columns: 1fr; gap: 3px; background: var(--ground-2); border: 1px solid var(--line); border-radius: 99px; padding: 3px; margin: .85rem 0 1.05rem; } .tc-toggle label { text-align: center; cursor: pointer; margin: 0; padding: .45rem .4rem; border-radius: 99px; font-size: .68rem; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: var(--ink-3); transition: background .16s, color .16s; white-space: nowrap; } .tc-toggle label:hover { color: var(--gold); } .tc-opt { display: flex; flex-direction: column; flex: 1; } @supports selector(:has(*)) { .togglecard .tc-opt { display: none; } .togglecard:has(.tc-radio[data-i="0"]:checked) .tc-opt[data-i="0"], .togglecard:has(.tc-radio[data-i="1"]:checked) .tc-opt[data-i="1"], .togglecard:has(.tc-radio[data-i="2"]:checked) .tc-opt[data-i="2"] { display: flex; } .togglecard:has(.tc-radio[data-i="0"]:checked) .tc-toggle label[data-i="0"], .togglecard:has(.tc-radio[data-i="1"]:checked) .tc-toggle label[data-i="1"], .togglecard:has(.tc-radio[data-i="2"]:checked) .tc-toggle label[data-i="2"] { background: var(--gold); color: var(--on-accent); } } /* The input is visually hidden, so focus has to show on its label. */ .togglecard:has(.tc-radio[data-i="0"]:focus-visible) .tc-toggle label[data-i="0"], .togglecard:has(.tc-radio[data-i="1"]:focus-visible) .tc-toggle label[data-i="1"], .togglecard:has(.tc-radio[data-i="2"]:focus-visible) .tc-toggle label[data-i="2"] { outline: 2px solid var(--gold); outline-offset: 2px; } .tc-saving { background: rgba(79, 191, 130, .1); border: 1px solid rgba(79, 191, 130, .32); border-radius: var(--radius); color: var(--ok); font-size: .8rem; line-height: 1.4; padding: .5rem .65rem; margin-bottom: .85rem; } .tc-saving strong { color: var(--ok); font-weight: 700; } .tc-note { font-size: .74rem; color: var(--muted); margin: .9rem 0 0; padding-top: .8rem; border-top: 1px solid var(--line); } .tc-note strong { color: var(--ink-2); } /* --- The finder as a third card ------------------------------------------- */ /* Dashed edge so it reads as the alternative to the two priced cards rather than a third thing to buy. */ .findercard { border-style: dashed; border-color: var(--line-strong); background: transparent; text-decoration: none; text-align: center; } .findercard:hover { border-color: var(--gold); border-style: solid; background: var(--surface); } .findercard:hover .btn { background: var(--gold); border-color: var(--gold); color: var(--on-accent); } /* Only a title and a button live in here, so centre the pair as a group. The inherited .foot { margin-top: auto } would otherwise pin the button to the bottom and strand the title a third of the way down an empty column. */ .findercard { justify-content: center; } .findercard h3 { margin: 0 auto; max-width: 15ch; font-size: 1.5rem; line-height: 1.15; } .findercard .foot { margin-top: 1.15rem; padding-top: 0; } /* --- Plan cards on tablet and phone --------------------------------------- */ /* auto-fit collapses to a single column on a phone, which turns three plans into a very long scroll. Force two columns and shrink the type to suit. */ /* Two cards stretched across the full container read as slabs; cap them. */ .planrow.pair { grid-template-columns: repeat(2, minmax(0, 1fr)); max-width: 820px; } .planrow.trio { grid-template-columns: repeat(3, minmax(0, 1fr)); } @media (max-width: 1024px) { .planrow { grid-template-columns: repeat(2, minmax(0, 1fr)); } .planrow.trio { grid-template-columns: repeat(2, minmax(0, 1fr)); } .planrow.trio .findercard { grid-column: 1 / -1; flex-direction: row; align-items: center; justify-content: space-between; gap: 1rem; text-align: left; } .planrow.trio .findercard h3 { margin: 0; max-width: none; } .planrow.trio .findercard .foot { margin: 0; padding: 0; border: 0; flex: 0 0 auto; } .planrow.trio .findercard .btn { display: inline-flex; } } @media (max-width: 600px) { .planrow { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .7rem; } /* Plan cards go to one column on a phone. Two of them side by side left each card 163px wide - a price, a toggle and a button crushed into half a screen. Stacking full width is what every gym and subscription site does at this size, and it lets the type come back up to a readable scale. */ .planrow.trio { grid-template-columns: 1fr; gap: .9rem; } .planrow.trio > .plan { padding: 1.3rem 1.15rem 1.15rem; } .planrow.trio .plan h3 { font-size: 1.25rem; } .planrow.trio .plan .price { font-size: 2.4rem; } .planrow.trio .plan .price span { font-size: .68rem; } .planrow.trio .plan .price-sub { font-size: .72rem; } .planrow.trio .plan > p { font-size: .84rem; } .planrow.trio .plan ul { font-size: .8rem; } .planrow.trio .plan .btn { padding: .7rem .8rem; font-size: .74rem; } .planrow.trio .tc-toggle label { font-size: .68rem; padding: .5rem .3rem; } .planrow.trio .tc-saving { font-size: .76rem; } .planrow.trio .tc-note { font-size: .74rem; } .planrow.trio .findercard { flex-direction: column; align-items: stretch; text-align: center; gap: .85rem; } .planrow.trio .findercard h3 { font-size: 1.15rem; } .planrow.trio .findercard .btn { display: block; } .plan { padding: 1rem .85rem .9rem; } .plan h3 { font-size: 1rem; } .plan .price { font-size: 1.9rem; margin: .45rem 0 .2rem; } .plan .price span { font-size: .6rem; letter-spacing: .08em; } .plan .price-sub { font-size: .64rem; letter-spacing: .06em; margin-bottom: .6rem; } .plan > p { font-size: .76rem; margin-bottom: .8rem; } .plan ul { font-size: .72rem; margin: .6rem 0; } .plan ul li { padding: .24rem 0 .24rem .95rem; } .plan ul li::before { width: 4px; height: 4px; top: .95em; } .plan .foot { padding-top: .9rem; } .plan .btn { padding: .55rem .6rem; font-size: .66rem; letter-spacing: .06em; } .plan .badge { font-size: .5rem; padding: .22rem .45rem; letter-spacing: .1em; } .plan .notice { padding: .45rem .55rem; } .tc-toggle { margin: .7rem 0 .85rem; padding: 2px; } .tc-toggle label { font-size: .58rem; padding: .38rem .25rem; letter-spacing: .04em; } .tc-saving { font-size: .68rem; padding: .4rem .5rem; } .tc-note { font-size: .66rem; } } /* =========================================================================== Amenity tiles --------------------------------------------------------------------------- Colour, a name, one line, a way through. Three per row. These carried photographs until it turned out the pictures did not match the labels. Colour blocks say exactly as much as we can actually stand behind, and read as a deliberate graphic panel rather than a stock-image grid. =========================================================================== */ .amenities { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; } /* An odd tile count leaves the last one alone on its row. Let it run the full width instead - a deliberate banner rather than a gap. Which tile is orphaned depends on the column count, so the test has to change with the breakpoint. */ .amenities > :last-child:nth-child(3n + 1) { grid-column: 1 / -1; aspect-ratio: 3 / 1; } .amenity-tile { position: relative; aspect-ratio: 1; display: flex; align-items: flex-end; padding: 1.1rem; border-radius: var(--radius); overflow: hidden; text-decoration: none; transition: transform .18s cubic-bezier(.2,.7,.3,1), box-shadow .18s, filter .18s; } a.amenity-tile:hover { transform: translateY(-3px); box-shadow: var(--shadow); } a.amenity-tile:focus-visible { outline: 2px solid var(--gold); outline-offset: 3px; } .amenity-tile .body { position: relative; z-index: 2; display: flex; flex-direction: column; gap: .15rem; } .amenity-tile b { font-family: var(--display); font-weight: 600; font-size: clamp(1.3rem, 2.5vw, 1.95rem); text-transform: uppercase; letter-spacing: .01em; line-height: 1.02; } .amenity-tile small { font-size: .78rem; letter-spacing: .04em; } .amenity-tile .cta { margin-top: .6rem; font-size: .64rem; font-weight: 700; letter-spacing: .16em; text-transform: uppercase; } /* The crown, oversized and faint, gives the flat colour some texture. */ .amenity-tile .crest { position: absolute; z-index: 1; right: -14%; top: -12%; width: 78%; aspect-ratio: 109 / 150; background: currentColor; -webkit-mask: url("/img/kings-logo-gold.svg") no-repeat center / contain; mask: url("/img/kings-logo-gold.svg") no-repeat center / contain; opacity: .07; pointer-events: none; } .amenity-tile.tone-dark { background: linear-gradient(160deg, #2f2e2e, #1b1a19); color: #fff; } .amenity-tile.tone-dark b { color: #fff; } .amenity-tile.tone-dark small { color: rgba(255, 255, 255, .62); } .amenity-tile.tone-dark .cta { color: var(--gold); } .amenity-tile.tone-gold { background: linear-gradient(160deg, var(--gold-bright), var(--gold-deep)); color: #16120a; } .amenity-tile.tone-gold b { color: #16120a; } .amenity-tile.tone-gold small { color: rgba(22, 18, 10, .68); } .amenity-tile.tone-gold .cta { color: #16120a; } .amenity-tile.tone-outline { background: var(--surface); border: 1px solid var(--line-strong); color: var(--ink); } .amenity-tile.tone-outline b { color: var(--ink); } .amenity-tile.tone-outline small { color: var(--muted); } .amenity-tile.tone-outline .cta { color: var(--accent); } .amenity-tile.tone-outline .crest { opacity: .09; } @media (max-width: 760px) { .amenities { grid-template-columns: repeat(2, 1fr); gap: 7px; } /* Two columns now, so the three-column test no longer picks the right tile. */ .amenities > :last-child:nth-child(3n + 1) { grid-column: auto; aspect-ratio: 1; } .amenities > :last-child:nth-child(odd) { grid-column: 1 / -1; aspect-ratio: 2 / 1; } .amenity-tile { padding: .8rem; } .amenity-tile small { font-size: .66rem; } .amenity-tile .cta { font-size: .58rem; letter-spacing: .12em; margin-top: .45rem; } } /* =========================================================================== Drop-down navigation --------------------------------------------------------------------------- King's own menu groups the sports under one heading and the gym under another. Opening is CSS-only - hover for pointers, :focus-within for keyboards - so the menu works before any script runs. On a phone the whole thing becomes a stacked panel behind a checkbox. =========================================================================== */ /* The topbar keeps its own fixed palette. It is dark on every page, so anything inside it that reached for a theme token came out near-black on near-black the moment a light page rendered. */ .topbar { --bar-ink: #a8a29a; --bar-ink-strong: #ffffff; --bar-surface: #1d1c1a; --bar-surface-2: #2a2724; --bar-line: #423e39; } .menu { position: relative; display: inline-flex; align-items: stretch; } /* Buttons and links have to compute the same height, or the active underline sits on two different lines across one bar. */ .nav > a, .menu-top { line-height: 1.5; } /* A