/* THE WEBSITE'S LOOK ON A CUSTOMER PAGE (2026-09-29). See site-chrome.js and lib/site-look.js. server.js adds this file, with , to the pages that are not the website itself: the account page, the booking steps (/book/now), a booking's own page and its invoice, check-in, a term's pay page. ⚠ ONLY COLOURS, TYPE, CORNERS AND BUTTON SHAPE. Every page keeps its own layout and every step. The customer pages share one family of colour names (--bg --card --ink --ink-2 --ink-3 --ink-4 --line --soft --accent --accent-ink --accent-fill --on-accent), so one block per look covers all. `html[data-site-theme]` outranks the pages' own :root, INCLUDING their dark-mode block, so the website's look wins whatever the phone is set to. The colours are the templates' own: coach site.css, forge.css, learn site.css. Change a colour there, change it here. The F&B template has its own skin (fnb/public/customer/skin.css). */ /* ── Personal Coach: White, Black ────────────────────────────────────── */ html[data-site="coach"][data-site-theme="white"] { --bg: #FFFFFF; --card: #FFFFFF; --ink: #0B0B0B; --ink-2: #2B2B2B; --ink-3: #6B6B6B; --ink-4: #9A9A9A; --line: #E6E6E4; --accent: #0B0B0B; --accent-ink: #0B0B0B; --accent-fill: #0B0B0B; --on-accent: #FFFFFF; --soft: #F5F5F3; --star: #0B0B0B; } html[data-site="coach"][data-site-theme="black"] { --bg: #0A0A0A; --card: #0A0A0A; --ink: #F4F4F2; --ink-2: #D6D6D3; --ink-3: #9B9B98; --ink-4: #6E6E6B; --line: #2A2A2A; --accent: #F4F4F2; --accent-ink: #F4F4F2; --accent-fill: #F4F4F2; --on-accent: #0A0A0A; --soft: #151515; --star: #F4F4F2; --green: #5AD08A; --red: #FF8A80; --amber: #F0A44B; } /* ── Fitness Studio's Forge: Black, Ember, Bone ──────────────────────── */ html[data-site="forge"][data-site-theme="black"] { --bg: #111111; --card: #1A1A1A; --ink: #FEFDF8; --ink-2: #D9D8D2; --ink-3: #A5A49F; --ink-4: #75746F; --line: #2E2E2C; --accent: #7D7456; --accent-ink: #D2C8A4; --accent-fill: #7D7456; --on-accent: #FFFFFF; --soft: #232323; --star: #D2C8A4; --green: #8FBF7A; --red: #FF8A80; --amber: #F0A44B; } html[data-site="forge"][data-site-theme="ember"] { --bg: #0E0E0E; --card: #181716; --ink: #FAF7F2; --ink-2: #D8D5CF; --ink-3: #A3A09B; --ink-4: #73706B; --line: #2E2B28; --accent: #B8431F; --accent-ink: #F0906C; --accent-fill: #B8431F; --on-accent: #FFFFFF; --soft: #22201E; --star: #F0906C; --green: #8FBF7A; --red: #FF8A80; --amber: #F0A44B; } html[data-site="forge"][data-site-theme="bone"] { --bg: #F2EFE8; --card: #FAF8F3; --ink: #141414; --ink-2: #333333; --ink-3: #5E5B55; --ink-4: #8A867E; --line: #DDD8CC; --accent: #1A1A1A; --accent-ink: #141414; --accent-fill: #1A1A1A; --on-accent: #FFFFFF; --soft: #E8E4DA; --star: #141414; } /* ── Learning Centre: Blue, Green, Red (one layout, one colour) ──────── */ html[data-site="learn"] { --bg: #F4F3EF; --card: #FFFFFF; --ink: #0B0F1A; --ink-2: #2A3044; --ink-3: #596073; --ink-4: #8A90A0; --line: #E3E1DA; --soft: #EDECE6; --on-accent: #FFFFFF; } html[data-site="learn"][data-site-theme="blue"] { --accent: #2152FF; --accent-fill: #2152FF; --accent-ink: #1439C4; --star: #1439C4; } html[data-site="learn"][data-site-theme="green"] { --accent: #127A49; --accent-fill: #127A49; --accent-ink: #0C5C36; --star: #0C5C36; } html[data-site="learn"][data-site-theme="red"] { --accent: #C2361B; --accent-fill: #C2361B; --accent-ink: #962913; --star: #962913; } /* ── Everything below is shared, then tuned per look ─────────────────── */ html[data-site] body { background: var(--bg); color: var(--ink-2); } html[data-site="coach"] body, html[data-site="forge"] body { font-family: 'Inter', system-ui, -apple-system, sans-serif; } html[data-site="learn"] body { font-family: 'Archivo', system-ui, -apple-system, sans-serif; } html[data-site] input, html[data-site] select, html[data-site] textarea, html[data-site] button { font-family: inherit; } html[data-site] input, html[data-site] select, html[data-site] textarea { background: var(--card); color: var(--ink); } /* Grey bits the pages paint with fixed colours (and repaint for a dark phone). */ :where(html[data-site]) .badge { background: var(--soft); color: var(--ink-3); } :where(html[data-site]) .note, :where(html[data-site]) .policy, :where(html[data-site]) .phone-p { background: var(--soft); } html[data-site] .card, html[data-site] .box { background: var(--card); border-color: var(--line); } html[data-site] .kind { background: var(--soft); color: var(--ink-2); } html[data-site] .pick.on { background: var(--soft); box-shadow: inset 0 0 0 1px var(--accent-fill); } /* The check-in page centres one box in the whole screen; with a header and footer round it, it sits in the page instead. */ html[data-site] body:has(> #box) { display: block; min-height: 0; padding: 0; } html[data-site] body > #box { margin: 56px auto; } /* Square corners: Personal Coach and Forge are both hard-edged. */ html[data-site="coach"] body *:not(.spin):not(.step-n):not(.sb-site-chrome), html[data-site="forge"] body *:not(.spin):not(.step-n):not(.sb-site-chrome) { border-radius: 0 !important; } /* Headings and the business's name in each template's type. */ html[data-site="coach"] .biz, html[data-site="coach"] .card-t, html[data-site="coach"] h1 { font-weight: 800; letter-spacing: -.03em; color: var(--ink); } html[data-site="coach"] .biz { text-transform: uppercase; } html[data-site="forge"] .biz, html[data-site="forge"] h1, html[data-site="forge"] .card-t { font-weight: 700; letter-spacing: .02em; text-transform: uppercase; color: var(--ink); } html[data-site="learn"] .biz, html[data-site="learn"] h1, html[data-site="learn"] .card-t { font-weight: 800; font-stretch: 118%; text-transform: uppercase; letter-spacing: -.01em; color: var(--ink); } html[data-site="forge"] .card-h, html[data-site="learn"] .card-h { text-transform: uppercase; letter-spacing: .08em; font-size: 12.5px; } /* Buttons as each website's. Their colours already come from the variables above (.cta.danger and .cta.ghost keep their own). */ html[data-site="coach"] .cta, html[data-site="coach"] .btn { font-weight: 600; letter-spacing: 0; } html[data-site="forge"] .cta, html[data-site="forge"] .btn { font-weight: 500; letter-spacing: .05em; text-transform: uppercase; } html[data-site="learn"] .cta, html[data-site="learn"] .btn { font-weight: 800; letter-spacing: .06em; text-transform: uppercase; border-radius: 999px; } html[data-site="learn"] .card, html[data-site="learn"] .box { border-radius: 14px; } html[data-site] .cta:hover, html[data-site] .btn:hover { opacity: .88; } /* The booking steps (/book/now): the name, photo and intro are the website's header's job now. */ html[data-site] #top .hero, html[data-site] #top .biz, html[data-site] #top .intro { display: none; } html[data-site] #top .head { padding-top: 28px; } /* An invoice or receipt prints as the document alone. */ @media print { .sb-site-chrome { display: none !important; } }