/* The Hustle Hub - V7 design system Tokens, layout primitives and components shared by every V7 page. Only --hh-accent is authored as a literal colour; the review tool swaps it and every tint, glow, border and hover state below re-derives from it. */ :root { --hh-accent: #ff5c1a; --hh-accent-soft: color-mix(in srgb, var(--hh-accent) 14%, transparent); --hh-accent-veil: color-mix(in srgb, var(--hh-accent) 7%, transparent); --hh-accent-line: color-mix(in srgb, var(--hh-accent) 45%, transparent); --hh-accent-hi: color-mix(in srgb, var(--hh-accent) 52%, #ffffff); --hh-on-accent: #170d05; --hh-ground: #0d0b09; --hh-ground-2: #100e0b; --hh-surface: #17130f; --hh-surface-2: #1f1a14; --hh-fg: #f4efe7; --hh-fg-2: rgba(244, 239, 231, .74); --hh-fg-3: rgba(244, 239, 231, .5); --hh-fg-4: rgba(244, 239, 231, .34); --hh-line: rgba(244, 239, 231, .1); --hh-line-2: rgba(244, 239, 231, .2); /* unlit dots on the LED board, and the sheen that sweeps a shine label */ --hh-led-off: rgba(244, 239, 231, .07); --hh-shine: var(--hh-accent-hi); --hh-paper: #f2ece2; --hh-paper-fg: #16130f; --hh-paper-fg-2: rgba(22, 19, 15, .72); --hh-paper-line: rgba(22, 19, 15, .16); --hh-shell: 1460px; --hh-gut: clamp(20px, 4.2vw, 56px); --hh-ease: cubic-bezier(.22, .61, .36, 1); --hh-display: Anton, Impact, sans-serif; --hh-cond: "Barlow Condensed", Barlow, sans-serif; --hh-body: Barlow, system-ui, sans-serif; --hh-mono: "IBM Plex Mono", ui-monospace, monospace; } /* ---------- base ---------- */ * { box-sizing: border-box } html { scroll-behavior: smooth; overflow-x: hidden } /* support.js (dc-runtime) injects html,body,#dc-root{height:100%} on every standalone (non-preview) load. That traps our content in a body-height scrollbox instead of the normal document scroll, which anime.js's window-based onScroll reveals never see - so every card/section below the fold stays at its pre-animation opacity:0 forever. Cancel it. */ html, body, #dc-root, #dc-root > .sc-host { height: auto !important; } body { margin: 0; background: var(--hh-ground); color: var(--hh-fg); font-family: var(--hh-body); font-size: 17px; line-height: 1.6; -webkit-font-smoothing: antialiased; overflow-x: hidden; } a { color: var(--hh-accent); text-decoration: none } img { max-width: 100% } ::selection { background: var(--hh-accent); color: var(--hh-on-accent) } /* Broadcast-grid backdrop: five hairlines running the height of the page, plus a single accent bloom anchored to the top right. */ body::before { content: ""; position: fixed; inset: 0; z-index: 0; pointer-events: none; background: radial-gradient(80% 55% at 88% -8%, var(--hh-accent-veil) 0%, transparent 62%), repeating-linear-gradient(90deg, var(--hh-line) 0 1px, transparent 1px calc(100% / 5)); opacity: .55; } /* Film grain. Kept at 3.5% so it reads as texture, not noise. */ body::after { content: ""; position: fixed; inset: 0; z-index: 1; pointer-events: none; opacity: .035; 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)'/%3E%3C/svg%3E"); } .hh-page { position: relative; z-index: 2 } /* ---------- pre-animation state ---------- .hh-js lands on only when the motion engine is present and motion is allowed, so a failed script or a reduced-motion setting shows a static page. */ html.hh-js [data-hh] { opacity: 0 } html.hh-js [data-hh="mask"] { opacity: 1; clip-path: inset(0% 0% 100% 0%) } html.hh-js [data-hh="wipe"] { opacity: 1; clip-path: inset(0 100% 0 0) } html.hh-js [data-hh="lines"] { opacity: 1 } html.hh-js .hh-pre { opacity: 0 } html.hh-js .hh-linemask > * { transform: translateY(102%) } .hh-linemask { display: block; overflow: clip; overflow: hidden } .hh-linemask > * { display: block; will-change: transform } /* ---------- layout ---------- */ .hh-shell { max-width: var(--hh-shell); margin: 0 auto; padding-left: var(--hh-gut); padding-right: var(--hh-gut); } .hh-sec { padding-block: clamp(70px, 9vw, 130px) } .hh-sec--tight { padding-block: clamp(48px, 6vw, 80px) } html.hh-launch-on .hh-nav { top: var(--hh-launch-banner-h, 40px) } .hh-launch-banner { position: fixed; top: 0; left: 0; right: 0; z-index: 500; background: var(--hh-accent); } .hh-launch-banner__row { padding-block: 11px; text-align: center } .hh-launch-banner p { margin: 0; font-family: var(--hh-cond); font-weight: 600; font-size: 14px; letter-spacing: .02em; color: var(--hh-on-accent); } .hh-footer__credit { padding-top: 14px; margin-top: 14px; border-top: 1px solid var(--hh-line); } .hh-footer__credit p { margin: 0; font-size: 13px; color: var(--hh-fg-4) } .hh-footer__credit a { color: var(--hh-fg-3) } .hh-footer__credit a:hover { color: var(--hh-accent) } .hh-grid { display: grid; gap: 22px } .hh-grid--2 { grid-template-columns: repeat(2, 1fr) } .hh-grid--3 { grid-template-columns: repeat(3, 1fr) } .hh-grid--4 { grid-template-columns: repeat(4, 1fr) } .hh-split { display: grid; grid-template-columns: 1.05fr .95fr; gap: clamp(40px, 6vw, 84px); align-items: center } /* ---------- type ---------- */ .hh-display, .hh-h1, .hh-h2, .hh-h3, .hh-h4 { font-family: var(--hh-display); font-weight: 400; text-transform: uppercase; letter-spacing: .01em; margin: 0; } .hh-h1 { font-size: clamp(54px, 8vw, 122px); line-height: .92 } .hh-h2 { font-size: clamp(38px, 4.8vw, 74px); line-height: .98 } .hh-h3 { font-size: clamp(28px, 2.6vw, 40px); line-height: 1.03 } .hh-h4 { font-size: clamp(21px, 1.7vw, 26px); line-height: 1.08 } .hh-accent { color: var(--hh-accent) } .hh-eyebrow { margin: 0; font-family: var(--hh-cond); font-weight: 600; font-size: 15px; letter-spacing: 5px; text-transform: uppercase; color: var(--hh-accent); } .hh-eyebrow--mute { color: var(--hh-fg-3) } .hh-lead { margin: 0; font-size: clamp(17px, 1.35vw, 20px); line-height: 1.62; color: var(--hh-fg-2); max-width: 60ch; text-wrap: pretty; } .hh-body { margin: 0; color: var(--hh-fg-2); max-width: 66ch; text-wrap: pretty } .hh-small { font-size: 14px; color: var(--hh-fg-3) } /* Every price, clock time and count on the site is mono. */ .hh-num { font-family: var(--hh-mono); font-weight: 500; font-variant-numeric: tabular-nums; letter-spacing: -.02em; } .hh-price { font-family: var(--hh-mono); font-weight: 500; font-size: clamp(30px, 2.8vw, 42px); color: var(--hh-accent); letter-spacing: -.03em } .hh-price-unit { font-family: var(--hh-cond); font-weight: 600; font-size: 14px; letter-spacing: 2px; text-transform: uppercase; color: var(--hh-fg-3) } /* ---------- section header: slug, rule, title ---------- */ .hh-head { margin-bottom: clamp(38px, 4vw, 62px) } .hh-slug { display: flex; align-items: center; gap: 16px; font-family: var(--hh-mono); font-size: 12px; letter-spacing: 3px; text-transform: uppercase; color: var(--hh-fg-3); margin: 0 0 20px; } .hh-slug b { color: var(--hh-accent); font-weight: 500 } .hh-rule { flex: 1; height: 1px; background: var(--hh-line-2); transform-origin: left center; } .hh-head-row { display: flex; align-items: flex-end; justify-content: space-between; gap: 28px; flex-wrap: wrap; } /* ---------- buttons ---------- */ .hh-btn { --hh-btn-fg: var(--hh-on-accent); position: relative; display: inline-flex; align-items: center; gap: 12px; padding: 16px 34px; border: 1px solid transparent; background: var(--hh-accent); color: var(--hh-btn-fg); font-family: var(--hh-cond); font-weight: 700; font-size: 17px; letter-spacing: 2.4px; text-transform: uppercase; cursor: pointer; overflow: hidden; isolation: isolate; will-change: transform; transition: color .28s var(--hh-ease), border-color .28s var(--hh-ease); } .hh-btn > span { position: relative; z-index: 1 } /* Accent sweep: wipes in from the left, retreats to the right. */ .hh-btn::before { content: ""; position: absolute; inset: 0; z-index: 0; background: var(--hh-accent-hi); transform: scaleX(0); transform-origin: right center; transition: transform .42s var(--hh-ease); } .hh-btn:hover::before { transform: scaleX(1); transform-origin: left center } .hh-btn--ghost { --hh-btn-fg: var(--hh-fg); background: transparent; border-color: var(--hh-line-2); } .hh-btn--ghost::before { background: var(--hh-accent) } .hh-btn--ghost:hover { --hh-btn-fg: var(--hh-on-accent); border-color: var(--hh-accent) } .hh-btn--ink { --hh-btn-fg: var(--hh-paper); background: var(--hh-paper-fg) } .hh-btn--ink::before { background: var(--hh-accent) } .hh-btn--ink:hover { --hh-btn-fg: var(--hh-on-accent) } .hh-btn--paper-ghost { --hh-btn-fg: var(--hh-paper-fg); background: transparent; border-color: var(--hh-paper-line); } .hh-btn--paper-ghost::before { background: var(--hh-accent) } .hh-btn--paper-ghost:hover { --hh-btn-fg: var(--hh-on-accent); border-color: var(--hh-accent) } .hh-btn--sm { padding: 11px 24px; font-size: 15px; letter-spacing: 2px } .hh-btns { display: flex; gap: 14px; flex-wrap: wrap } /* Arrow link */ .hh-arrow { display: inline-flex; align-items: center; gap: 10px; font-family: var(--hh-cond); font-weight: 700; font-size: 16px; letter-spacing: 3px; text-transform: uppercase; color: var(--hh-accent); } .hh-arrow i { display: block; font-style: normal; transition: transform .3s var(--hh-ease) } .hh-arrow:hover i { transform: translateX(7px) } /* ---------- nav ---------- */ .hh-nav { position: fixed; top: 0; left: 0; right: 0; z-index: 90; display: flex; align-items: center; justify-content: space-between; gap: 22px; padding: 14px var(--hh-gut); background: color-mix(in srgb, var(--hh-ground) 78%, transparent); backdrop-filter: blur(18px); border-bottom: 1px solid var(--hh-line); will-change: transform; } .hh-logo { height: 46px; display: block; will-change: height } .hh-nav-right { display: flex; align-items: center; gap: 22px } .hh-nav-links { display: flex; align-items: center; gap: 30px; font-family: var(--hh-cond); font-weight: 600; font-size: 15px; letter-spacing: 2.5px; text-transform: uppercase; } .hh-nav-links a { position: relative; color: var(--hh-fg); padding: 6px 0; } .hh-nav-links a::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 2px; background: var(--hh-accent); transform: scaleX(0); transform-origin: right center; transition: transform .3s var(--hh-ease); } .hh-nav-links a:hover::after { transform: scaleX(1); transform-origin: left center } .hh-nav-links a[aria-current="page"] { color: var(--hh-accent) } .hh-nav-links a[aria-current="page"]::after { transform: scaleX(1) } /* Scroll progress: one accent hairline pinned under the nav. */ .hh-progress { position: fixed; top: 0; left: 0; height: 2px; width: 100%; z-index: 95; background: var(--hh-accent); transform: scaleX(0); transform-origin: left center; pointer-events: none; } .hh-burger { display: none; appearance: none; border: 0; background: transparent; padding: 0; cursor: pointer; flex-direction: column; justify-content: center; align-items: flex-end; gap: 5px; width: 30px; height: 30px; flex: none; } .hh-burger span { display: block; height: 2px; width: 100%; background: var(--hh-fg); transition: transform .22s var(--hh-ease), opacity .22s var(--hh-ease) } .hh-burger.hh-open span:nth-child(1) { transform: translateY(7px) rotate(45deg) } .hh-burger.hh-open span:nth-child(2) { opacity: 0 } .hh-burger.hh-open span:nth-child(3) { transform: translateY(-7px) rotate(-45deg) } /* ---------- hero ---------- */ .hh-hero { position: relative; display: flex; flex-direction: column; justify-content: flex-end; overflow: hidden; min-height: 100svh; } .hh-hero--short { min-height: 68svh } .hh-hero__media { position: absolute; inset: -14% 0 auto 0; width: 100%; height: 128%; object-fit: cover; filter: saturate(.92) contrast(1.06); will-change: transform; } .hh-hero__veil { position: absolute; inset: 0; background: linear-gradient(180deg, color-mix(in srgb, var(--hh-ground) 62%, transparent) 0%, color-mix(in srgb, var(--hh-ground) 20%, transparent) 42%, var(--hh-ground) 96%); } .hh-hero__key { position: absolute; right: -4%; bottom: 8%; width: min(46vw, 620px); opacity: .5; pointer-events: none; } .hh-hero__inner { position: relative; width: 100%; padding-top: clamp(140px, 18vh, 210px); padding-bottom: clamp(48px, 6vh, 76px); } /* ---------- marquee ---------- */ .hh-marquee { position: relative; border-top: 1px solid var(--hh-line); border-bottom: 1px solid var(--hh-line); background: color-mix(in srgb, var(--hh-ground) 70%, transparent); overflow: hidden; padding: 15px 0; white-space: nowrap; } .hh-marquee__track { display: inline-flex; gap: 46px; font-family: var(--hh-cond); font-weight: 600; font-size: 16px; letter-spacing: 4px; text-transform: uppercase; color: var(--hh-fg-3); will-change: transform; } .hh-marquee__track b { color: var(--hh-accent); font-weight: 600 } /* ---------- LED board (Originkit "Pixel LED Display", see hh-led.js) ---------- */ .hh-led { position: relative; height: 74px; border-top: 1px solid var(--hh-line); border-bottom: 1px solid var(--hh-line); background: color-mix(in srgb, var(--hh-ground) 70%, transparent); overflow: hidden; } /* Fade the board into the page edges so the strip reads as a continuous scroll rather than a panel that starts and stops. */ .hh-led::after { content: ""; position: absolute; inset: 0; pointer-events: none; background: linear-gradient(90deg, var(--hh-ground), transparent 9%, transparent 91%, var(--hh-ground)); } @media (max-width: 720px) { .hh-led { height: 58px } } /* ---------- courtside scoreboard (built by hh-scoreboard.js) ---------- Kept in the board's own colours rather than the accent: it is a picture of a piece of hardware, not a brand surface. */ .hh-board { max-width: 940px; margin: 0 auto; overflow: hidden; } .hh-board__panel { display: block } .hh-board__cap { margin: 18px 0 0; text-align: center; font-family: var(--hh-mono); font-size: 12px; letter-spacing: 3px; text-transform: uppercase; color: var(--hh-fg-3); } /* ---------- shine label (Originkit "Shiny Pill") ---------- */ .hh-shine { position: relative; display: inline-flex; align-items: center; white-space: nowrap; } /* The bright copy sits over the base text and is masked by a gradient band that travels across it, so only a narrow sheen is ever visible. */ .hh-shine::after { content: attr(data-shine); position: absolute; inset: 0; display: flex; align-items: center; color: var(--hh-shine); pointer-events: none; -webkit-mask-image: linear-gradient(to right, transparent 30%, #000 50%, transparent 70%); mask-image: linear-gradient(to right, transparent 30%, #000 50%, transparent 70%); -webkit-mask-size: 150% auto; mask-size: 150% auto; animation: hhShineSweep 3.2s ease-in-out infinite; } @keyframes hhShineSweep { 0% { -webkit-mask-position: 200%; mask-position: 200% } 100% { -webkit-mask-position: -100%; mask-position: -100% } } /* ---------- cards ---------- */ .hh-card { position: relative; display: flex; flex-direction: column; background: var(--hh-surface); border: 1px solid var(--hh-line); color: var(--hh-fg); overflow: hidden; isolation: isolate; will-change: transform; } .hh-card__media { position: relative; overflow: hidden; display: block } .hh-card__media img { width: 100%; aspect-ratio: 16 / 10; object-fit: cover; display: block; will-change: transform } /* Accent bar that wipes across the top edge on hover. */ .hh-card__edge { position: absolute; top: 0; left: 0; right: 0; height: 3px; background: var(--hh-accent); transform: scaleX(0); transform-origin: left center; z-index: 3; } .hh-card__body { padding: 24px 26px 28px; display: flex; flex-direction: column; gap: 10px; flex: 1 } .hh-card__top { display: flex; justify-content: space-between; align-items: baseline; gap: 12px } .hh-card__note { margin: 0; font-size: 15px; line-height: 1.55; color: var(--hh-fg-3) } .hh-card__foot { margin-top: auto; display: flex; align-items: baseline; gap: 10px; padding-top: 8px } .hh-tag { display: inline-block; background: var(--hh-accent-soft); color: var(--hh-accent); font-family: var(--hh-cond); font-weight: 700; font-size: 13px; letter-spacing: 2px; text-transform: uppercase; padding: 6px 12px; } .hh-chip { display: inline-block; border: 1px solid var(--hh-line-2); font-family: var(--hh-mono); font-size: 12.5px; letter-spacing: 1px; text-transform: uppercase; padding: 7px 13px; color: var(--hh-fg-2); } .hh-chips { display: flex; gap: 10px; flex-wrap: wrap } .hh-chip--toggle { cursor: pointer; background: transparent; transition: border-color .15s, color .15s, background-color .15s; } .hh-chip--toggle:hover { border-color: var(--hh-accent) } .hh-chip--toggle.hh-chip--active { border-color: var(--hh-accent); color: var(--hh-accent); background: color-mix(in srgb, var(--hh-accent) 14%, transparent); } /* ---------- wide row (academy / program listing) ---------- */ .hh-row { display: grid; grid-template-columns: 360px 1fr auto; align-items: stretch } .hh-row__media { position: relative; min-height: 250px; overflow: hidden } .hh-row__media img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; will-change: transform } .hh-row__main { padding: 34px 38px; display: flex; flex-direction: column; justify-content: center; gap: 13px } .hh-row__price { border-left: 1px solid var(--hh-line); padding: 34px 38px; display: flex; flex-direction: column; justify-content: center; align-items: center; gap: 6px; min-width: 200px; text-align: center; } /* ---------- coach rows ---------- */ .hh-coach { display: grid; grid-template-columns: 440px 1fr; gap: clamp(32px, 4.5vw, 64px); align-items: center } .hh-coach--flip { grid-template-columns: 1fr 440px } /* ---------- plain bordered note row ---------- */ .hh-note { display: flex; gap: 18px; align-items: baseline; border: 1px solid var(--hh-line); background: var(--hh-surface); padding: 20px 24px } .hh-note p { margin: 0; font-size: 17.5px; color: var(--hh-fg-2) } .hh-note span { font-family: var(--hh-mono); font-size: 14px; color: var(--hh-accent) } /* ---------- lane (numbered service block) ---------- */ .hh-lane { display: grid; grid-template-columns: 230px 1fr; gap: clamp(24px, 3vw, 44px); margin-bottom: clamp(48px, 6vw, 82px) } .hh-lane__label { position: sticky; top: 110px; align-self: start } .hh-lane__num { font-family: var(--hh-mono); font-size: 13px; letter-spacing: 3px; color: var(--hh-accent) } /* ---------- paper (inverted) sections ---------- */ .hh-paper { position: relative; background: var(--hh-paper); color: var(--hh-paper-fg); overflow: hidden; } .hh-paper::before { content: ""; position: absolute; inset: 0; pointer-events: none; background: repeating-linear-gradient(115deg, var(--hh-accent-soft) 0 2px, transparent 2px 30px); opacity: .5; } .hh-paper .hh-lead, .hh-paper .hh-body { color: var(--hh-paper-fg-2) } .hh-paper .hh-eyebrow--mute { color: rgba(22, 19, 15, .5) } .hh-cta { position: relative; text-align: center; padding-block: clamp(64px, 8vw, 100px) } .hh-cta .hh-lead { margin-left: auto; margin-right: auto } .hh-cta .hh-btns { justify-content: center } /* ---------- stats strip ---------- */ .hh-stats { display: grid; grid-template-columns: repeat(4, 1fr); border-top: 1px solid var(--hh-line); border-bottom: 1px solid var(--hh-line) } .hh-stat { padding: 30px 26px; border-right: 1px solid var(--hh-line) } .hh-stat:last-child { border-right: 0 } .hh-stat__v { font-family: var(--hh-mono); font-weight: 500; font-size: clamp(32px, 3.4vw, 48px); color: var(--hh-fg); letter-spacing: -.03em; display: block } .hh-stat__k { font-family: var(--hh-cond); font-weight: 600; font-size: 13px; letter-spacing: 2.6px; text-transform: uppercase; color: var(--hh-fg-3); margin-top: 6px; display: block } /* ---------- forms ---------- */ .hh-field { width: 100%; background: var(--hh-ground); border: 1px solid var(--hh-line-2); color: var(--hh-fg); font-family: var(--hh-body); font-size: 16px; padding: 15px 17px; outline: none; } .hh-field::placeholder { color: var(--hh-fg-4) } .hh-field:focus { border-color: var(--hh-accent) } .hh-form--invalid .hh-field:invalid { border-color: #e5484d } .hh-form--invalid .hh-field:invalid:focus { border-color: #e5484d } textarea.hh-field { resize: vertical } .hh-form { background: var(--hh-surface); border: 1px solid var(--hh-line); padding: clamp(28px, 3vw, 44px) } /* ---------- legal / long-form text (Terms.dc.html) ---------- */ .hh-legal { max-width: 74ch; margin: 0 auto } .hh-legal h2.hh-h3 { margin: 48px 0 16px; padding-top: 28px; border-top: 1px solid var(--hh-line) } .hh-legal h2.hh-h3:first-child { margin-top: 0; padding-top: 0; border-top: 0 } .hh-legal ul { margin: 0; padding-left: 22px; display: grid; gap: 10px; color: var(--hh-fg-2); font-size: 16px; line-height: 1.65; } .hh-legal li::marker { color: var(--hh-fg-4) } .hh-legal b { color: var(--hh-fg); font-weight: 600 } /* ---------- date/time picker ---------- */ .hh-datepicker { position: relative } .hh-datepicker__toggle { display: flex; align-items: center; justify-content: space-between; gap: 12px; cursor: pointer; text-align: left; } .hh-datepicker__value { color: var(--hh-fg-4) } .hh-datepicker__toggle--set .hh-datepicker__value { color: var(--hh-fg) } .hh-datepicker__icon { flex: none; color: var(--hh-fg-3) } .hh-datepicker__toggle:hover .hh-datepicker__icon, .hh-datepicker__toggle--open .hh-datepicker__icon { color: var(--hh-accent) } .hh-datepicker__backdrop { position: fixed; inset: 0; z-index: 19 } .hh-datepicker__pop { position: absolute; top: calc(100% + 8px); left: 0; z-index: 20; width: 50%; min-width: 280px; background: var(--hh-surface-2); border: 1px solid var(--hh-line-2); padding: 14px; box-shadow: 0 24px 48px rgba(0, 0, 0, .45); max-height: min(72vh, 520px); overflow-y: auto; } .hh-datepicker__head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 14px } .hh-datepicker__label { font-family: var(--hh-mono); font-size: 13px; letter-spacing: 2px; text-transform: uppercase; color: var(--hh-fg); } .hh-datepicker__nav { width: 30px; height: 30px; background: transparent; border: 1px solid var(--hh-line-2); color: var(--hh-fg-2); font-family: var(--hh-mono); font-size: 15px; line-height: 1; cursor: pointer; } .hh-datepicker__nav:hover:not(:disabled) { border-color: var(--hh-accent); color: var(--hh-accent) } .hh-datepicker__nav:disabled { opacity: .3; cursor: not-allowed } .hh-datepicker__weekdays { display: grid; grid-template-columns: repeat(7, 1fr); gap: 4px; margin-bottom: 6px } .hh-datepicker__weekdays span { display: block; text-align: center; font-family: var(--hh-cond); font-weight: 600; font-size: 11px; letter-spacing: 1.5px; text-transform: uppercase; color: var(--hh-fg-4); } .hh-datepicker__grid { display: grid; grid-template-columns: repeat(7, 1fr); gap: 4px } .hh-datepicker__cell { aspect-ratio: 1; display: flex; align-items: center; justify-content: center; background: transparent; border: 1px solid transparent; color: var(--hh-fg-2); font-family: var(--hh-mono); font-size: 13px; cursor: pointer; } .hh-datepicker__cell:hover:not(:disabled) { border-color: var(--hh-line-2); color: var(--hh-fg) } .hh-datepicker__cell--empty { visibility: hidden; cursor: default } .hh-datepicker__cell--today { border-color: var(--hh-line-2); color: var(--hh-fg) } .hh-datepicker__cell--selected, .hh-datepicker__cell--selected:hover { background: var(--hh-accent); border-color: var(--hh-accent); color: var(--hh-on-accent) } .hh-datepicker__cell:disabled { color: var(--hh-fg-4); cursor: not-allowed; opacity: .35 } .hh-datepicker__times { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; margin-top: 14px; max-height: 168px; overflow-y: auto; } .hh-datepicker__time { background: transparent; border: 1px solid var(--hh-line-2); color: var(--hh-fg-2); font-family: var(--hh-mono); font-size: 13px; letter-spacing: -.02em; padding: 9px 4px; text-align: center; cursor: pointer; } .hh-datepicker__time:hover { border-color: var(--hh-accent); color: var(--hh-fg) } .hh-datepicker__time--selected, .hh-datepicker__time--selected:hover { background: var(--hh-accent); border-color: var(--hh-accent); color: var(--hh-on-accent) } .hh-datepicker__note { font-size: 13px; color: var(--hh-fg-3); margin: 10px 0 0 } .hh-datepicker__done { width: 100%; justify-content: center; margin-top: 16px } /* ---------- live dot ---------- */ .hh-live { display: inline-flex; align-items: center; gap: 9px; font-family: var(--hh-mono); font-size: 12px; letter-spacing: 2.4px; text-transform: uppercase; color: var(--hh-fg-3) } .hh-live__dot { width: 8px; height: 8px; border-radius: 50%; background: #e03131; flex: none } /* ---------- AAU push widget (built by hh-aau-push.js) ---------- */ html.hh-aau-banner-on .hh-nav { top: var(--hh-aau-banner-h, 54px) } .hh-aau-banner { position: fixed; top: 0; left: 0; right: 0; z-index: 500; background: var(--hh-accent); color: var(--hh-on-accent); } .hh-aau-banner__inner { max-width: 1180px; margin: 0 auto; padding: 10px var(--hh-gut); display: flex; align-items: center; flex-wrap: wrap; gap: 10px 16px; position: relative; } .hh-aau-banner__msg { margin: 0; font-size: 14px; line-height: 1.4; flex: 1 1 320px } .hh-aau-banner__cta { flex: 0 0 auto } .hh-aau-float { position: fixed; right: 20px; bottom: 20px; z-index: 500; width: min(280px, calc(100vw - 40px)); background: var(--hh-surface); border: 1px solid var(--hh-line); box-shadow: 0 16px 40px rgba(0,0,0,.35); padding: 16px 34px 16px 20px; } .hh-aau-float__link { display: grid; gap: 6px; text-decoration: none; color: inherit; } .hh-aau-float__eyebrow { font-family: var(--hh-mono); font-size: 11px; letter-spacing: 1.8px; text-transform: uppercase; color: var(--hh-accent) } .hh-aau-float__title { font-family: var(--hh-display); text-transform: uppercase; letter-spacing: .02em; font-size: 20px; line-height: 1.15 } .hh-aau-float__cta { font-family: var(--hh-mono); font-size: 13px; color: var(--hh-accent) } .hh-aau-float__link:hover .hh-aau-float__cta { text-decoration: underline } .hh-aau-close { position: absolute; top: 6px; right: 6px; appearance: none; border: 0; background: transparent; color: inherit; font-size: 20px; line-height: 1; cursor: pointer; padding: 6px 8px; opacity: .75; } .hh-aau-close:hover { opacity: 1 } .hh-aau-banner__inner .hh-aau-close { top: 50%; transform: translateY(-50%) } @media (max-width: 720px) { .hh-aau-banner__inner { padding-right: 34px } .hh-aau-float { left: 12px; right: 12px; bottom: 12px; width: auto } } /* ---------- intro curtain (built by hh-fx.js, lives outside the app root) ---------- */ .hh-curtain { position: fixed; inset: 0; z-index: 9999; display: grid; place-items: center; overflow: hidden; } /* Five panels do the covering, so wiping them up reveals the live page underneath rather than another flat colour. */ .hh-curtain__panel { position: absolute; top: 0; bottom: 0; width: 20.05%; z-index: 1; background: var(--hh-ground); transform-origin: top center; will-change: transform; } .hh-curtain__panel:nth-child(even) { background: var(--hh-ground-2) } .hh-curtain__word { position: relative; z-index: 2; display: flex; font-family: var(--hh-display); text-transform: uppercase; font-size: clamp(28px, 6.6vw, 84px); line-height: 1; letter-spacing: .02em; color: var(--hh-fg); } .hh-curtain__word span { display: block; will-change: transform, opacity } .hh-curtain__word span.is-accent { color: var(--hh-accent) } .hh-curtain__word span.is-gap { width: .3em } .hh-curtain__bar { position: absolute; left: 0; bottom: 0; z-index: 2; height: 3px; width: 100%; background: var(--hh-accent); transform: scaleX(0); transform-origin: left center; } /* ---------- footer ---------- */ .hh-footer { border-top: 1px solid var(--hh-line); background: var(--hh-ground-2) } .hh-footer__row { display: flex; align-items: center; justify-content: space-between; gap: 22px; flex-wrap: wrap; padding-block: 34px } .hh-footer__links { display: flex; gap: 24px; font-family: var(--hh-cond); font-weight: 600; font-size: 14px; letter-spacing: 2px; text-transform: uppercase } .hh-footer__links a { color: var(--hh-fg-3) } .hh-footer__links a:hover { color: var(--hh-accent) } .hh-footer__links a.hh-admin { color: var(--hh-fg-4); font-size: 12px; letter-spacing: 1px } /* ---------- responsive ---------- */ @media (max-width: 1080px) { .hh-row { grid-template-columns: 1fr } .hh-row__media { min-height: 220px } .hh-row__price { border-left: 0; border-top: 1px solid var(--hh-line); flex-direction: row; justify-content: flex-start; gap: 12px; padding: 22px 38px; text-align: left } .hh-coach, .hh-coach--flip { grid-template-columns: 1fr } .hh-coach--flip [data-hh="right"] { order: -1 } .hh-grid--4 { grid-template-columns: repeat(2, 1fr) } .hh-grid--3 { grid-template-columns: repeat(2, 1fr) } .hh-lane { grid-template-columns: 1fr } .hh-lane__label { position: static } .hh-stats { grid-template-columns: repeat(2, 1fr) } .hh-stat:nth-child(2n) { border-right: 0 } .hh-stat:nth-child(-n+2) { border-bottom: 1px solid var(--hh-line) } } @media (max-width: 860px) { body::before { background: radial-gradient(90% 50% at 90% -6%, var(--hh-accent-veil) 0%, transparent 62%) } .hh-split, .hh-grid--2, .hh-grid--3, .hh-grid--4 { grid-template-columns: 1fr } .hh-hero__key { display: none } .hh-nav { padding: 10px 20px } .hh-logo { height: 36px } .hh-burger { display: flex } .hh-nav-links { position: absolute; top: 100%; left: 0; right: 0; flex-direction: column; align-items: stretch; gap: 0; background: var(--hh-ground); border-bottom: 1px solid var(--hh-line); padding: 4px 20px 18px; max-height: 70vh; overflow-y: auto; transform: translateY(-8px); opacity: 0; pointer-events: none; transition: opacity .18s var(--hh-ease), transform .18s var(--hh-ease); } .hh-nav-links.hh-open { transform: translateY(0); opacity: 1; pointer-events: auto } .hh-nav-links a { padding: 15px 2px; border-bottom: 1px solid var(--hh-line) } .hh-nav-links a::after { display: none } }