:root{ --bg: #0c0c0d; --bg-alt: #151517; --card: #1b1b1e; --line: #2a2a2e; --line-strong: #4a4a4e; --text: #f3f2ef; --muted: #a8a6a1; --accent: #9e1b34; --accent-dim: #711427; --radius: 3px; --container: 1140px; --pad: 24px; --section-pad: 76px; --font-display: 'LEMONMILK', 'Oswald', Impact, 'Arial Narrow', sans-serif; --font-body: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif; } @media (max-width:700px){ :root{ --section-pad: 52px; } } /* ============================================================ LIGHT SECTIONS — add class="light" to any
. Because every component below is built with var(--bg), var(--card), var(--text), var(--muted), var(--line) rather than hardcoded colors, redefining those custom properties on a section flips every child component to the light palette automatically. Nothing outside that section is affected — nav, footer, and dark sections stay as they are. ============================================================ */ section.light{ --bg: #ffffff; --bg-alt: #f4f4f2; --card: #ffffff; --line: #e4e2dd; --line-strong: #cfccc4; --text: #171614; --muted: #656158; background:var(--bg); color:var(--text); } section.light .photo-slot{ background:repeating-linear-gradient(135deg, var(--card), var(--card) 10px, #f4f4f2 10px, #f4f4f2 20px); } section.light .hero-badge{ background:var(--card); } section.light [class*="-card"]{ box-shadow:0 4px 24px rgba(0,0,0,0.06); border-color:var(--line); } section.light .why-item{ box-shadow:0 4px 24px rgba(0,0,0,0.06); } /* ============================================================ LEMON MILK is a licensed font, so it can't be bundled here. Once you have the font files, drop them in /fonts and add: @font-face{ font-family:'LEMONMILK'; font-weight:400; src: url('../fonts/LEMONMILK-Regular.woff2') format('woff2'), url('../fonts/LEMONMILK-Regular.otf') format('opentype'); font-display:swap; } @font-face{ font-family:'LEMONMILK'; font-weight:700; src: url('../fonts/LEMONMILK-Bold.woff2') format('woff2'), url('../fonts/LEMONMILK-Bold.otf') format('opentype'); font-display:swap; } Until then, headings fall back to Oswald (loaded via Google Fonts in each page's ). ============================================================ */ *{ box-sizing:border-box; margin:0; padding:0; } html{ scroll-behavior:smooth; } body{ background:var(--bg); color:var(--text); font-family:var(--font-body); line-height:1.6; -webkit-font-smoothing:antialiased; } img{ max-width:100%; display:block; } a{ color:inherit; text-decoration:none; } .container{ max-width:var(--container); margin:0 auto; padding:0 var(--pad); } h1,h2,h3{ font-family:var(--font-display); text-transform:uppercase; letter-spacing:0.02em; line-height:1.1; } .section-label{ display:flex; align-items:center; gap:10px; font-family:var(--font-display); font-size:13px; letter-spacing:0.16em; text-transform:uppercase; color:var(--accent); margin-bottom:14px; } .section-label::before{ content:''; width:24px; height:2px; background:var(--accent); } .section-title{ font-size:clamp(28px,4vw,44px); margin-bottom:36px; } .section-title em{ font-style:normal; color:var(--accent); } .btn{ display:inline-flex; align-items:center; justify-content:center; padding:15px 30px; border-radius:var(--radius); font-family:var(--font-display); font-size:14px; letter-spacing:0.08em; text-transform:uppercase; cursor:pointer; border:1px solid transparent; transition:transform .15s ease, background .15s ease; } .btn-primary{ background:var(--accent); color:#fff; } .btn-primary:hover{ background:var(--accent-dim); transform:translateY(-1px); } .btn-ghost{ background:transparent; border-color:var(--line); color:var(--text); } .btn-ghost:hover{ border-color:var(--accent); color:var(--accent); } .btn-lg{ padding:18px 38px; font-size:15px; } .btn-sm{ padding:11px 22px; font-size:13px; } /* ===== NAV ===== */ .site-nav{ position:sticky; top:0; z-index:200; background:rgba(12,12,13,0.92); backdrop-filter:blur(8px); border-bottom:1px solid var(--line); } .nav-inner{ max-width:var(--container); margin:0 auto; padding:14px var(--pad); display:flex; align-items:center; justify-content:space-between; gap:20px; } .nav-logo img{ height:38px; width:auto; } .nav-links{ display:flex; gap:22px; font-family:var(--font-display); font-size:12.5px; letter-spacing:0.06em; text-transform:uppercase; } .nav-links a:hover{ color:var(--accent); } .nav-right{ display:flex; align-items:center; gap:16px; } .nav-phone{ font-size:14px; color:var(--muted); } /* ===== NAV DROPDOWNS ===== */ .nav-dropdown{ position:relative; } .nav-dropdown-trigger{ display:inline-flex; align-items:center; gap:5px; cursor:pointer; } .nav-dropdown-trigger::after{ content:'\25BE'; font-size:9px; opacity:.65; position:relative; top:1px; } .nav-dropdown-menu{ display:none; position:absolute; top:100%; left:0; padding-top:14px; z-index:60; } .nav-dropdown-menu-inner{ background:var(--card); border:1px solid var(--line); border-radius:var(--radius); min-width:190px; padding:8px 0; box-shadow:0 12px 30px rgba(0,0,0,0.35); } .nav-dropdown:hover .nav-dropdown-menu, .nav-dropdown.open .nav-dropdown-menu{ display:block; } .nav-dropdown-menu a{ display:block; padding:11px 20px; font-family:var(--font-body); font-size:13.5px; letter-spacing:0; text-transform:none; color:var(--text); white-space:nowrap; } .nav-dropdown-menu a:hover{ background:var(--bg-alt); color:var(--accent); } @media (max-width:900px){ .nav-dropdown-menu{ display:block; position:static; padding-top:0; margin-top:6px; } .nav-dropdown-menu-inner{ background:none; border:none; box-shadow:none; padding:4px 0 4px 16px; } .nav-dropdown-trigger::after{ display:none; } } /* ===== KIDS PHOTO GALLERY ===== */ .kids-gallery{ padding:var(--section-pad) 0; overflow:hidden; } .kids-gallery-wrap{ overflow:hidden; width:100%; } .kids-gallery-track{ display:flex; gap:12px; width:max-content; animation:kids-gallery-scroll 36s linear infinite; } .kids-gallery-wrap:hover .kids-gallery-track{ animation-play-state:paused; } @keyframes kids-gallery-scroll{ from{ transform:translateX(0); } to{ transform:translateX(-50%); } } .kids-gallery-track img{ width:240px; height:300px; object-fit:cover; border-radius:var(--radius); cursor:pointer; flex:0 0 auto; transition:transform .3s ease; } .kids-gallery-track img:hover{ transform:scale(1.03); } @media (max-width:600px){ .kids-gallery-track img{ width:170px; height:220px; } } /* ===== LOCATION MODAL ===== */ .location-modal{ display:none; position:fixed; inset:0; z-index:500; background:rgba(8,8,9,0.75); align-items:center; justify-content:center; padding:20px; } .location-modal.open{ display:flex; } .location-modal-card{ position:relative; background:var(--card); border:1px solid var(--line); border-radius:var(--radius); max-width:420px; width:100%; padding:36px 30px; text-align:center; } .location-modal-card h3{ font-size:20px; margin-bottom:8px; } .location-modal-card p{ color:var(--muted); font-size:14px; margin-bottom:26px; } .location-modal-close{ position:absolute; top:16px; right:16px; width:32px; height:32px; border-radius:50%; background:var(--bg-alt); border:1px solid var(--line); color:var(--muted); font-size:14px; display:flex; align-items:center; justify-content:center; cursor:pointer; } .location-modal-options{ display:flex; flex-direction:column; gap:12px; } .location-modal-option{ display:flex; flex-direction:column; align-items:center; gap:4px; padding:18px 20px; background:var(--bg-alt); border:1px solid var(--line); border-radius:var(--radius); cursor:pointer; transition:border-color .15s ease, background .15s ease; } .location-modal-option:hover{ border-color:var(--accent); background:rgba(158,27,52,0.08); } .location-modal-option-name{ font-family:var(--font-display); font-size:16px; letter-spacing:0.03em; text-transform:uppercase; color:var(--text); } .location-modal-option-address{ font-size:12.5px; color:var(--muted); } /* ===== BOOKING MODAL (class-row click opens the Clubworx widget in a popup) ===== */ .booking-modal{ display:none; position:fixed; inset:0; z-index:500; background:rgba(8,8,9,0.75); align-items:flex-start; justify-content:center; padding:24px 20px; overflow-y:auto; } .booking-modal.open{ display:flex; } .booking-modal-card{ position:relative; max-width:480px; width:100%; margin:auto 0; } .booking-modal-close{ position:absolute; top:-14px; right:-14px; width:32px; height:32px; border-radius:50%; background:var(--card); border:1px solid var(--line); color:var(--muted); font-size:14px; display:flex; align-items:center; justify-content:center; cursor:pointer; z-index:1; } .booking-modal .booking-card{ max-width:none; } .booking-modal .booking-card-body iframe{ height:70vh; min-height:520px; } /* ===== GALLERY LIGHTBOX ===== */ .gallery-lightbox{ display:none; position:fixed; inset:0; z-index:500; background:rgba(8,8,9,0.94); align-items:center; justify-content:center; padding:30px; } .gallery-lightbox.open{ display:flex; } .gallery-lightbox img{ max-width:min(900px, 90vw); max-height:85vh; border-radius:var(--radius); object-fit:contain; } .gallery-lightbox-close{ position:absolute; top:24px; right:24px; width:44px; height:44px; border-radius:50%; background:rgba(255,255,255,0.1); border:1px solid rgba(255,255,255,0.3); color:#fff; font-size:20px; display:flex; align-items:center; justify-content:center; cursor:pointer; } /* ===== MEMBER STORY (Xavier feature) ===== */ .member-story{ padding:var(--section-pad) 0; } .member-story .container{ max-width:820px; } .member-story-header{ text-align:center; margin-bottom:48px; } .member-story-photos{ display:grid; grid-template-columns:1fr 1fr; gap:14px; margin-bottom:44px; } .member-story-photos img{ width:100%; aspect-ratio:3/4; object-fit:cover; border-radius:var(--radius); } .member-story-photos.single-photo{ grid-template-columns:1fr; max-width:420px; margin-left:auto; margin-right:auto; margin-bottom:12px; } .member-story-photos.single-photo img{ aspect-ratio:4/5; } .member-story-caption{ text-align:center; color:var(--muted); font-size:13px; margin-bottom:44px; } .member-story-body p{ color:var(--muted); font-size:16.5px; line-height:1.8; margin-bottom:20px; } .member-story-body p.story-pull{ color:var(--text); font-size:19px; font-weight:600; line-height:1.6; margin:34px 0; padding-left:20px; border-left:3px solid var(--accent); } .member-story-signoff{ color:var(--muted); font-size:14px; margin-top:10px; font-style:italic; } /* ===== PARENT LETTER ===== */ .parent-letter{ padding:var(--section-pad) 0; } .parent-letter .container{ max-width:720px; } .letter-card{ background:#f3f1ec; border:1px solid #e4e0d5; border-radius:var(--radius); padding:44px 40px; position:relative; } .letter-card .quote-mark{ font-family:var(--font-display); font-size:50px; color:var(--accent); line-height:1; margin-bottom:10px; opacity:.9; } .letter-card p{ color:#4a463e; font-size:16px; line-height:1.8; margin-bottom:16px; } .letter-card .letter-signoff{ color:#17151b; font-family:var(--font-display); font-size:13px; letter-spacing:0.05em; text-transform:uppercase; margin-top:20px; } /* ===== VIDEO SPOTLIGHT ===== */ .video-spotlight{ padding:var(--section-pad) 0; } .video-grid{ display:grid; grid-template-columns:1fr 1fr; gap:24px; } @media (max-width:700px){ .video-grid{ grid-template-columns:1fr; } } .video-frame{ position:relative; width:100%; aspect-ratio:16/9; border-radius:var(--radius); overflow:hidden; background:#000; } .video-frame iframe{ position:absolute; inset:0; width:100%; height:100%; border:0; } /* ===== EVENTS LISTING ===== */ .events-section{ padding:var(--section-pad) 0; } .events-grid{ display:grid; grid-template-columns:repeat(3, 1fr); gap:28px; } @media (max-width:900px){ .events-grid{ grid-template-columns:1fr 1fr; } } @media (max-width:600px){ .events-grid{ grid-template-columns:1fr; } } .event-card{ display:block; background:var(--card); border:1px solid var(--line); border-radius:var(--radius); overflow:hidden; transition:border-color .15s ease, transform .15s ease; } .event-card:hover{ border-color:var(--accent); transform:translateY(-2px); } .event-card .photo-slot{ aspect-ratio:4/3; border:none; border-radius:0; } .event-card img{ width:100%; aspect-ratio:4/3; object-fit:cover; display:block; } .event-card-body{ padding:22px 22px 26px; } .event-card-date{ font-family:var(--font-display); font-size:12px; letter-spacing:0.06em; text-transform:uppercase; color:var(--accent); margin-bottom:10px; } .event-card-title{ font-size:18px; margin-bottom:10px; text-transform:none; letter-spacing:0; } .event-card-excerpt{ color:var(--muted); font-size:14px; line-height:1.6; margin-bottom:16px; } .event-card-link{ font-family:var(--font-display); font-size:12.5px; letter-spacing:0.06em; text-transform:uppercase; color:var(--accent); } /* ===== EVENT DETAIL PAGE ===== */ .event-detail-header{ position:relative; padding:70px 0 50px; text-align:center; border-bottom:1px solid var(--line); overflow:hidden; } .event-detail-header .photo-slot{ position:absolute; inset:0; border:none; border-radius:0; } .event-detail-header img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; } .event-detail-header-overlay{ position:absolute; inset:0; background:linear-gradient(180deg, rgba(12,12,13,0.55), rgba(12,12,13,0.92) 85%); } .event-detail-header .container{ position:relative; z-index:1; max-width:720px; } .event-detail-date{ font-family:var(--font-display); font-size:13px; letter-spacing:0.1em; text-transform:uppercase; color:var(--accent); margin-bottom:14px; } .event-detail-body{ padding:var(--section-pad) 0; } .event-detail-body .container{ max-width:720px; } .event-detail-body p{ color:var(--muted); font-size:16px; line-height:1.8; margin-bottom:20px; } .event-detail-gallery{ display:grid; grid-template-columns:repeat(3, 1fr); gap:12px; margin:36px 0; } @media (max-width:600px){ .event-detail-gallery{ grid-template-columns:1fr 1fr; } } .event-detail-gallery .photo-slot{ aspect-ratio:1/1; } .event-detail-gallery img{ width:100%; aspect-ratio:1/1; object-fit:cover; border-radius:var(--radius); } .pronounce-section{ padding:var(--section-pad) 0; } .pronounce-grid{ display:grid; grid-template-columns:repeat(2, 1fr); gap:20px; max-width:680px; margin:0 auto; } @media (max-width:600px){ .pronounce-grid{ grid-template-columns:1fr; } } .pronounce-card{ background:var(--card); border:1px solid var(--line); border-radius:var(--radius); padding:28px 24px; text-align:center; } .pronounce-word{ font-family:var(--font-display); font-size:24px; text-transform:uppercase; margin-bottom:6px; } .pronounce-phonetic{ color:var(--accent); font-size:15px; margin-bottom:10px; font-style:italic; } .pronounce-card p{ color:var(--muted); font-size:13.5px; line-height:1.6; } /* ===== UNIFORM REQUIREMENTS ===== */ .requirements-section{ padding:var(--section-pad) 0; } .requirements-grid{ display:grid; grid-template-columns:repeat(2, 1fr); gap:24px; } @media (max-width:700px){ .requirements-grid{ grid-template-columns:1fr; } } .requirement-card{ background:var(--card); border:1px solid var(--line); border-radius:var(--radius); padding:32px 28px; } .requirement-card .req-tag{ font-family:var(--font-display); font-size:12px; letter-spacing:0.06em; text-transform:uppercase; color:var(--accent); margin-bottom:14px; } .requirement-card h3{ font-size:19px; margin-bottom:14px; text-transform:none; letter-spacing:0; } .requirement-card ul{ list-style:none; } .requirement-card li{ padding:8px 0; border-bottom:1px solid var(--line); font-size:14.5px; color:var(--muted); display:flex; gap:10px; } .requirement-card li:last-child{ border-bottom:none; } .requirement-card li::before{ content:'\2713'; color:var(--accent); flex-shrink:0; } .pain-points{ padding:var(--section-pad) 0; background:var(--bg-alt); border-top:1px solid var(--line); border-bottom:1px solid var(--line); } .pain-lede{ color:var(--muted); font-size:17px; max-width:680px; margin-bottom:40px; } .pain-grid{ display:grid; grid-template-columns:repeat(2,1fr); gap:16px; } @media (max-width:700px){ .pain-grid{ display:none; } } .pain-card{ background:var(--card); border:1px solid var(--line); border-radius:var(--radius); padding:22px 24px; font-size:15px; line-height:1.6; } .pain-card strong{ color:var(--accent); display:block; font-family:var(--font-display); font-size:12px; letter-spacing:0.06em; text-transform:uppercase; margin-bottom:8px; } /* Mobile only: swipeable carousel instead of a tall stacked grid */ .pain-carousel-wrap{ display:none; position:relative; } @media (max-width:700px){ .pain-carousel-wrap{ display:block; } } .pain-track{ display:flex; align-items:center; gap:14px; overflow-x:auto; scroll-snap-type:x mandatory; padding:10px 12vw 30px; -webkit-overflow-scrolling:touch; scrollbar-width:none; } .pain-track::-webkit-scrollbar{ display:none; } .pain-slide{ flex:0 0 78vw; max-width:340px; scroll-snap-align:center; background:var(--card); border:1px solid var(--line); border-radius:var(--radius); padding:22px 24px; font-size:15px; line-height:1.6; opacity:.55; transform:scale(0.92); transition:transform .3s ease, opacity .3s ease; } .pain-slide.active{ opacity:1; transform:scale(1); border-color:var(--accent); } .pain-slide strong{ color:var(--accent); display:block; font-family:var(--font-display); font-size:12px; letter-spacing:0.06em; text-transform:uppercase; margin-bottom:8px; } .pain-nav{ position:absolute; top:50%; transform:translateY(-50%); z-index:6; width:36px; height:36px; border-radius:50%; background:rgba(12,12,13,0.7); border:1px solid rgba(255,255,255,0.2); color:#fff; font-size:16px; display:flex; align-items:center; justify-content:center; } .pain-nav.prev{ left:2px; } .pain-nav.next{ right:2px; } .pain-dots{ display:flex; justify-content:center; gap:7px; margin-top:4px; } .pain-dots span{ width:6px; height:6px; border-radius:50%; background:var(--line); transition:background .2s ease; } .pain-dots span.active{ background:var(--accent); } /* ===== PARENT JOURNEY (vertical timeline) ===== */ .journey-timeline{ padding:var(--section-pad) 0; } .timeline-track{ position:relative; max-width:720px; margin:0 auto; } .timeline-track::before{ content:''; position:absolute; left:19px; top:8px; bottom:8px; width:2px; background:var(--line); } .timeline-item{ position:relative; padding:0 0 44px 60px; } .timeline-item:last-child{ padding-bottom:0; } .timeline-dot{ position:absolute; left:11px; top:2px; width:18px; height:18px; border-radius:50%; background:var(--accent); border:3px solid var(--bg); box-shadow:0 0 0 2px var(--accent); } .timeline-item h3{ font-size:12.5px; font-family:var(--font-display); letter-spacing:0.06em; text-transform:uppercase; color:var(--accent); margin-bottom:8px; } .timeline-item h4{ font-size:19px; margin-bottom:8px; text-transform:none; letter-spacing:0; } .timeline-item p{ color:var(--muted); font-size:15px; } /* ===== EMOTIONAL BENEFITS ===== */ .gains{ padding:var(--section-pad) 0; background:var(--bg-alt); border-top:1px solid var(--line); border-bottom:1px solid var(--line); } .gains-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:20px; } @media (max-width:820px){ .gains-grid{ grid-template-columns:1fr 1fr; } } @media (max-width:520px){ .gains-grid{ grid-template-columns:1fr; } } .gain-card{ text-align:center; padding:26px 18px; } .gain-icon{ width:44px; height:44px; margin:0 auto 14px; color:var(--accent); } .gain-card h4{ font-size:15.5px; margin-bottom:8px; text-transform:none; letter-spacing:0; } .gain-card p{ color:var(--muted); font-size:13.5px; } /* ===== PROGRAMS PAGE HERO ===== */ .programs-hero{ position:relative; padding:90px 0 70px; text-align:center; overflow:hidden; border-bottom:1px solid var(--line); background: radial-gradient(circle at 20% 20%, rgba(158,27,52,0.22), transparent 45%), radial-gradient(circle at 80% 80%, rgba(158,27,52,0.12), transparent 40%), var(--bg); } .programs-hero .container{ max-width:760px; } .programs-hero h1{ font-size:clamp(32px,5.5vw,54px); margin-bottom:18px; } .programs-hero p{ color:var(--muted); font-size:17px; } .jump-links{ display:flex; gap:10px; justify-content:center; flex-wrap:wrap; margin-top:30px; } .jump-links a{ font-family:var(--font-display); font-size:12px; letter-spacing:0.06em; text-transform:uppercase; border:1px solid var(--line); border-radius:100px; padding:9px 16px; color:var(--muted); } .jump-links a:hover{ border-color:var(--accent); color:var(--accent); } /* ===== AGE SELECTOR (kids programs, interactive) ===== */ .age-selector{ padding:var(--section-pad) 0; } .age-tabs{ display:grid; grid-template-columns:repeat(4,1fr); gap:10px; margin-bottom:36px; } @media (max-width:700px){ .age-tabs{ grid-template-columns:repeat(2,1fr); } } .age-tab{ background:var(--card); border:1px solid var(--line); border-radius:var(--radius); padding:20px 14px; text-align:center; cursor:pointer; transition:all .15s ease; } .age-tab:hover{ border-color:var(--accent); } .age-tab.active{ border-color:var(--accent); background:linear-gradient(160deg, rgba(158,27,52,0.18), var(--card)); } .age-tab .age-range{ font-family:var(--font-display); font-size:22px; color:var(--text); } .age-tab.active .age-range{ color:var(--accent); } .age-tab .age-name{ font-size:11.5px; color:var(--muted); text-transform:uppercase; letter-spacing:0.05em; margin-top:4px; } .age-panel{ display:none; } .age-panel.active{ display:grid; grid-template-columns:1fr 1fr; gap:36px; align-items:center; } @media (max-width:820px){ .age-panel.active{ grid-template-columns:1fr; } } .age-panel img{ border-radius:var(--radius); width:100%; aspect-ratio:4/3; object-fit:cover; } .age-panel-body .age-name-lg{ font-size:24px; margin-bottom:6px; } .age-panel-body .age-tagline{ color:var(--accent); font-family:var(--font-display); font-size:12.5px; letter-spacing:0.06em; text-transform:uppercase; margin-bottom:16px; } .age-panel-body p{ color:var(--muted); font-size:15px; margin-bottom:16px; } .age-focus-list{ list-style:none; margin-top:16px; } .age-focus-list li{ padding:9px 0; border-bottom:1px solid var(--line); font-size:14px; display:flex; gap:10px; } .age-focus-list li:last-child{ border-bottom:none; } .age-focus-list li::before{ content:'\2713'; color:var(--accent); flex-shrink:0; } /* ===== GI / NO GI TOGGLE ===== */ .gi-toggle-section{ padding:var(--section-pad) 0; background:var(--bg-alt); border-top:1px solid var(--line); border-bottom:1px solid var(--line); text-align:center; } .gi-toggle{ display:inline-flex; background:var(--card); border:1px solid var(--line); border-radius:100px; padding:5px; margin-bottom:40px; } .gi-toggle button{ font-family:var(--font-display); font-size:13px; letter-spacing:0.06em; text-transform:uppercase; padding:12px 30px; border-radius:100px; border:none; background:none; color:var(--muted); cursor:pointer; transition:all .15s ease; } .gi-toggle button.active{ background:var(--accent); color:#fff; } .gi-panels{ max-width:640px; margin:0 auto; text-align:left; } .gi-panel{ display:none; background:var(--card); border:1px solid var(--line); border-radius:var(--radius); padding:34px; } .gi-panel.active{ display:block; } .gi-panel h3{ font-size:20px; margin-bottom:14px; text-transform:none; letter-spacing:0; } .gi-panel p{ color:var(--muted); font-size:15px; margin-bottom:14px; } .gi-panel ul{ list-style:none; } .gi-panel li{ padding:8px 0; border-bottom:1px solid var(--line); font-size:14px; display:flex; gap:10px; } .gi-panel li:last-child{ border-bottom:none; } .gi-panel li::before{ content:'\2713'; color:var(--accent); flex-shrink:0; } /* ===== LIFESTYLE COMPARISON ===== */ .lifestyle{ padding:var(--section-pad) 0; } .lifestyle .container{ max-width:800px; text-align:center; } .lifestyle-lede{ color:var(--muted); font-size:17px; margin-bottom:44px; } /* ===== BELT TIMELINE ===== */ .belt-section{ padding:var(--section-pad) 0; background:var(--bg-alt); border-top:1px solid var(--line); border-bottom:1px solid var(--line); } .belt-lede{ color:var(--muted); font-size:16px; max-width:680px; margin-bottom:44px; } .belt-timeline{ display:flex; gap:0; overflow-x:auto; padding-bottom:10px; -webkit-overflow-scrolling:touch; } .belt-step{ flex:1 0 140px; text-align:center; position:relative; padding:0 8px; } .belt-chip{ width:52px; height:14px; border-radius:3px; margin:0 auto 14px; border:1px solid rgba(255,255,255,0.15); } .belt-step::before{ content:''; position:absolute; top:7px; left:-50%; width:100%; height:2px; background:var(--line); z-index:0; } .belt-step:first-child::before{ display:none; } .belt-name{ font-family:var(--font-display); font-size:13px; letter-spacing:0.04em; text-transform:uppercase; margin-bottom:6px; } .belt-desc{ color:var(--muted); font-size:12.5px; line-height:1.5; } .belt-callout{ margin-top:44px; background:var(--card); border:1px solid var(--accent); border-radius:var(--radius); padding:28px 30px; max-width:680px; } .belt-callout p{ color:var(--text); font-size:15px; } .belt-callout strong{ color:var(--accent); } .gym-select{ padding:var(--section-pad) 0; } .gym-select-intro{ color:var(--muted); font-size:16px; margin-bottom:36px; max-width:560px; } .gym-grid{ display:grid; grid-template-columns:1fr 1fr; gap:24px; } @media (max-width:700px){ .gym-grid{ grid-template-columns:1fr; } } .gym-card{ background:var(--card); border:1px solid var(--line); border-radius:var(--radius); padding:38px 34px; transition:border-color .15s ease, transform .15s ease; display:block; } .gym-card:hover{ border-color:var(--accent); transform:translateY(-2px); } .gym-card h3{ font-size:22px; margin-bottom:8px; text-transform:none; letter-spacing:0; } .gym-card .gym-address{ color:var(--muted); font-size:14px; margin-bottom:18px; } .gym-card .btn{ background:none; border:none; padding:0; color:var(--accent); font-family:var(--font-display); font-size:13px; letter-spacing:0.06em; text-transform:uppercase; } .gym-card .btn .arrow{ display:inline-block; transition:transform .2s ease; margin-left:4px; } .gym-card:hover .btn .arrow{ transform:translateX(5px); } /* ===== STANDALONE TIMETABLE PAGE HEADER ===== */ /* ===== MEMBERSHIP HERO + OFFER ===== */ .membership-hero{ position:relative; padding:80px 0 70px; text-align:center; overflow:hidden; border-bottom:1px solid var(--line); background: radial-gradient(circle at 15% 15%, rgba(158,27,52,0.2), transparent 45%), radial-gradient(circle at 85% 85%, rgba(158,27,52,0.12), transparent 40%), var(--bg); } .membership-hero .back-link{ display:inline-block; margin-bottom:20px; font-size:13px; color:var(--muted); } .membership-hero .back-link:hover{ color:var(--accent); } .membership-hero h1{ font-size:clamp(30px,5vw,42px); margin-bottom:10px; } .membership-hero > .container > p{ color:var(--muted); font-size:16px; margin-bottom:0; } .offer-section{ padding:var(--section-pad) 0; background:var(--bg-alt); border-top:2px solid var(--accent); border-bottom:1px solid var(--line); } .offer-strip{ max-width:var(--container); margin:0 auto; display:flex; align-items:center; justify-content:space-between; gap:32px; flex-wrap:wrap; text-align:left; } .offer-strip-label{ display:inline-flex; align-items:center; gap:8px; color:var(--accent); font-family:var(--font-display); font-size:11px; letter-spacing:0.1em; text-transform:uppercase; margin-bottom:12px; } .offer-strip-label::before{ content:''; width:5px; height:5px; border-radius:50%; background:var(--accent); flex-shrink:0; } .offer-strip h2{ color:var(--text); font-size:25px; margin-bottom:8px; text-transform:none; letter-spacing:-0.01em; line-height:1.15; } .offer-strip p{ color:var(--muted); font-size:14.5px; line-height:1.6; margin:0; max-width:420px; } .offer-strip strong{ color:var(--text); } .offer-strip .btn{ background:var(--accent); color:#fff; flex-shrink:0; white-space:nowrap; } .offer-strip .btn:hover{ background:var(--accent-dim); transform:translateY(-1px); } @media (max-width:600px){ .offer-strip{ flex-direction:column; align-items:flex-start; gap:22px; } .offer-strip p{ max-width:none; } .offer-strip .btn{ width:100%; text-align:center; } } .page-header{ position:relative; padding:70px 0 50px; text-align:center; border-bottom:1px solid var(--line); overflow:hidden; min-height:380px; display:flex; align-items:center; justify-content:center; } .page-header .container{ width:100%; } .page-header-bg{ position:absolute; inset:0; z-index:0; } .page-header-bg .photo-slot{ position:absolute; inset:0; border:none; border-radius:0; } .page-header-overlay{ position:absolute; inset:0; background:linear-gradient(180deg, rgba(12,12,13,0.6), rgba(12,12,13,0.92) 80%); } .page-header .container{ position:relative; z-index:1; } .page-header .back-link{ display:inline-block; margin-bottom:20px; font-size:13px; color:var(--muted); } .page-header .back-link:hover{ color:var(--accent); } .page-header h1{ font-size:clamp(28px,5vw,44px); margin-bottom:10px; } .page-header p{ color:var(--muted); font-size:15px; } .page-header .switch-note{ margin-top:18px; font-size:13px; } .page-header .switch-note a{ color:var(--accent); } .hamburger{ display:none; background:none; border:none; color:var(--text); font-size:24px; cursor:pointer; } @media (max-width:900px){ .nav-links{ display:none; } .nav-phone{ display:none; } .hamburger{ display:block; } } /* ===== HERO ===== */ .hero{ position:relative; min-height:100vh; display:flex; align-items:center; padding:120px 0 60px; overflow:hidden; background: radial-gradient(circle at 15% 20%, rgba(158,27,52,0.25), transparent 45%), radial-gradient(circle at 85% 80%, rgba(158,27,52,0.12), transparent 40%), var(--bg); border-bottom:1px solid var(--line); } .hero-media{ position:absolute; inset:0; z-index:0; } .hero-media video{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; z-index:1; } .hero-media .hero-poster-img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; z-index:0; } .hero-media-overlay{ position:absolute; inset:0; z-index:2; background:linear-gradient(180deg, rgba(12,12,13,0.55), rgba(12,12,13,0.88) 70%); } .hero-media-overlay.video-overlay{ background:linear-gradient(180deg, rgba(8,8,9,0.55), rgba(8,8,9,0.8) 60%, rgba(8,8,9,0.88) 100%); } .hero-inner{ position:relative; z-index:3; max-width:760px; margin:0 auto; padding:0 var(--pad); text-align:center; } .hero-eyebrow{ font-family:var(--font-display); letter-spacing:0.18em; text-transform:uppercase; color:var(--accent); font-size:13px; margin-bottom:18px; } .hero h1{ font-size:clamp(34px,5.5vw,58px); margin-bottom:22px; } .hero-sub{ color:var(--muted); font-size:17px; max-width:600px; margin:0 auto 34px; } .hero-ctas{ display:flex; gap:16px; justify-content:center; flex-wrap:wrap; } .scroll-cue{ position:absolute; bottom:34px; left:0; right:0; margin:0 auto; width:fit-content; z-index:1; display:flex; flex-direction:column; align-items:center; gap:6px; color:var(--muted); font-size:11px; letter-spacing:0.12em; text-transform:uppercase; font-family:var(--font-display); } .scroll-cue .arrow{ width:16px; height:16px; color:var(--accent); animation:scrollbounce 1.6s ease infinite; } @keyframes scrollbounce{ 0%,100%{ transform:translateY(0); opacity:.5; } 50%{ transform:translateY(6px); opacity:1; } } /* ===== PHILOSOPHY STATEMENT ===== */ .philosophy-statement{ padding:calc(var(--section-pad) + 30px) 0; text-align:center; } .philosophy-statement .container{ max-width:820px; } .philosophy-statement .quote-mark{ font-family:var(--font-display); font-size:60px; color:var(--accent); line-height:1; margin-bottom:6px; opacity:.8; } .philosophy-statement h2{ font-size:clamp(30px,4.8vw,50px); line-height:1.25; margin-bottom:26px; } .philosophy-statement p{ color:var(--muted); font-size:16px; line-height:1.75; max-width:600px; margin:0 auto; } .philosophy-statement .philosophy-closing{ color:var(--text); font-weight:600; margin-top:14px; } /* ===== PROGRAM CARDS (interactive image hover, Kids / Adults) ===== */ .program-select{ padding:var(--section-pad) 0; } .program-cards-grid{ display:grid; grid-template-columns:1fr 1fr; gap:16px; } @media (max-width:700px){ .program-cards-grid{ grid-template-columns:1fr; } } .program-card-hover{ position:relative; aspect-ratio:3/4; overflow:hidden; border-radius:var(--radius); cursor:pointer; display:block; } .program-card-hover img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; transition:transform .5s ease; transform:scale(1.02); } .program-card-hover:hover img, .program-card-hover.active img{ transform:scale(1.08); } .program-card-hover::after{ content:''; position:absolute; inset:0; z-index:1; background:linear-gradient(180deg, rgba(12,12,13,0) 30%, rgba(12,12,13,0.94) 100%); transition:background .35s ease; } .program-card-hover:hover::after, .program-card-hover.active::after{ background:linear-gradient(180deg, rgba(12,12,13,0.15) 0%, rgba(12,12,13,0.96) 65%); } .program-card-content{ position:absolute; left:0; right:0; bottom:0; z-index:2; padding:32px; color:#fff; } .program-card-eyebrow{ font-family:var(--font-display); font-size:12px; letter-spacing:0.12em; text-transform:uppercase; color:var(--accent); margin-bottom:8px; } .program-card-title{ font-family:var(--font-display); font-size:28px; text-transform:uppercase; letter-spacing:0.02em; margin-bottom:0; transition:margin-bottom .35s ease; } .program-card-hover:hover .program-card-title, .program-card-hover.active .program-card-title{ margin-bottom:12px; } .program-card-more{ max-height:0; opacity:0; overflow:hidden; transition:max-height .4s ease, opacity .3s ease; } .program-card-hover:hover .program-card-more, .program-card-hover.active .program-card-more{ max-height:180px; opacity:1; } .program-card-more p{ color:rgba(255,255,255,0.85); font-size:14.5px; line-height:1.6; margin-bottom:16px; } .program-card-more .btn{ background:#fff; color:var(--accent); } /* ===== FOUR PILLARS ===== */ /* ===== PHILOSOPHY BANNER (photo card, quote + two CTAs) ===== */ .lineage{ padding:var(--section-pad) 0; } .lineage-inner{ max-width:680px; margin:0 auto; text-align:center; } .lineage-inner p{ color:var(--muted); font-size:16px; line-height:1.8; margin-bottom:18px; } .lineage-emphasis{ color:var(--text) !important; font-weight:600; font-size:17px !important; } .philosophy-banner{ padding:var(--section-pad) 0; } .philosophy-banner-card{ position:relative; border-radius:var(--radius); overflow:hidden; min-height:460px; display:flex; align-items:center; justify-content:flex-end; } .philosophy-banner-card.compact{ min-height:220px; } @media (max-width:600px){ .philosophy-banner-card.compact{ min-height:200px; } } .philosophy-banner-card img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; } .philosophy-banner-overlay{ position:absolute; inset:0; background:linear-gradient(100deg, rgba(12,12,13,0.15) 0%, rgba(12,12,13,0.55) 45%, rgba(12,12,13,0.9) 75%); } .philosophy-banner-card.compact .philosophy-banner-overlay{ background:linear-gradient(100deg, rgba(158,27,52,0.25) 0%, rgba(158,27,52,0.75) 40%, rgba(90,15,30,0.95) 80%); } .philosophy-banner-content{ position:relative; z-index:1; max-width:480px; padding:40px; text-align:right; } .philosophy-banner-card.compact .philosophy-banner-content{ padding:28px 32px; max-width:420px; } .philosophy-banner-card.compact .philosophy-banner-headline{ font-size:clamp(20px,2.6vw,28px); margin-bottom:8px; } .philosophy-banner-card.compact blockquote{ font-size:14px; margin-bottom:16px; } .philosophy-banner-headline{ font-size:clamp(24px,3.2vw,34px); color:#fff; margin-bottom:18px; line-height:1.2; } .philosophy-banner-content blockquote{ font-family:Georgia, 'Times New Roman', serif; font-style:italic; font-weight:400; font-size:clamp(16px,1.7vw,19px); line-height:1.6; color:rgba(255,255,255,0.9); margin-bottom:28px; } .philosophy-banner-ctas{ display:flex; gap:12px; justify-content:flex-end; flex-wrap:wrap; } .philosophy-banner-ctas .btn{ background:#fff; color:#141414; border:none; border-radius:100px; } .philosophy-banner-ctas .btn:hover{ background:var(--accent); color:#fff; } .philosophy-banner-ctas .btn.btn-outline{ background:transparent; color:#fff; border:1px solid rgba(255,255,255,0.5); border-radius:100px; } .philosophy-banner-ctas .btn.btn-outline:hover{ border-color:#fff; background:rgba(255,255,255,0.1); } @media (max-width:700px){ .philosophy-banner-card{ justify-content:center; min-height:auto; padding:60px 0; } .philosophy-banner-content{ text-align:center; padding:20px; } .philosophy-banner-ctas{ justify-content:center; } } /* ===== FOUR PILLARS ===== */ .pillars{ padding:var(--section-pad) 0; } .pillars-intro{ max-width:620px; margin-bottom:64px; } .pillars-intro p{ color:var(--muted); font-size:17px; margin-top:16px; } .pillars-grid{ display:grid; grid-template-columns:1fr 1fr; gap:56px 60px; } @media (max-width:700px){ .pillars-grid{ grid-template-columns:1fr; gap:44px; } } .pillar-num{ font-family:var(--font-display); font-size:13px; color:var(--accent); letter-spacing:0.1em; text-transform:uppercase; margin-bottom:14px; } .pillar h3{ font-size:25px; margin-bottom:14px; text-transform:none; letter-spacing:0; } .pillar p{ color:var(--muted); font-size:16px; line-height:1.75; } /* ===== CHOOSE YOUR JOURNEY ===== */ .journey{ padding:var(--section-pad) 0 0; } .journey-grid{ display:grid; grid-template-columns:1fr 1fr; gap:24px; } @media (max-width:820px){ .journey-grid{ grid-template-columns:1fr; } } .journey-card{ background:var(--card); border:1px solid var(--line); border-radius:var(--radius); padding:40px 34px; text-align:center; display:flex; flex-direction:column; align-items:center; transition:border-color .15s ease; } .journey-card:hover{ border-color:var(--accent); } .journey-icon{ font-size:40px; margin-bottom:16px; } .journey-card h3{ font-size:22px; margin-bottom:10px; text-transform:none; letter-spacing:0; } .journey-card p{ color:var(--muted); font-size:15px; margin-bottom:24px; } /* ===== WHY LEGACY CHECKLIST ===== */ .why{ padding:var(--section-pad) 0; background:var(--bg-alt); border-top:1px solid var(--line); border-bottom:1px solid var(--line); } .why-list{ display:grid; grid-template-columns:repeat(3,1fr); gap:20px; } @media (max-width:700px){ .why-list{ grid-template-columns:1fr; } } .why-item{ display:flex; align-items:center; gap:12px; font-size:15.5px; padding:16px 18px; background:var(--card); border:1px solid var(--line); border-radius:var(--radius); } .why-item .check{ color:var(--accent); font-size:18px; flex-shrink:0; } /* ===== BELONGING ===== */ .belonging{ padding:calc(var(--section-pad) + 20px) 0; text-align:center; } .belonging .container{ max-width:720px; } .belonging .quote-mark{ font-family:var(--font-display); font-size:60px; color:var(--accent); line-height:1; margin-bottom:10px; opacity:.8; } .belonging h2{ font-size:clamp(28px,4.5vw,42px); margin-bottom:22px; } .belonging p{ color:var(--muted); font-size:18px; line-height:1.7; } .inline-cta{ text-align:center; padding:56px var(--pad); } .inline-cta p{ margin-top:14px; color:var(--muted); font-size:13px; } /* ===== TIMETABLE (day-tab list, easy to scan) ===== */ .timetable{ padding:var(--section-pad) 0; } .verify-flag{ background:rgba(158,27,52,0.1); border:1px dashed var(--accent); border-radius:var(--radius); padding:14px 18px; font-size:13px; color:var(--accent); margin-bottom:32px; } .day-tabs{ display:flex; gap:8px; overflow-x:auto; padding-bottom:4px; margin-bottom:28px; -webkit-overflow-scrolling:touch; scrollbar-width:none; } .day-tabs::-webkit-scrollbar{ display:none; } .day-tab{ flex:0 0 auto; font-family:var(--font-display); font-size:13px; letter-spacing:0.06em; text-transform:uppercase; background:var(--card); border:1px solid var(--line); color:var(--muted); padding:12px 20px; border-radius:100px; cursor:pointer; transition:all .15s ease; white-space:nowrap; } .day-tab .day-tab-count{ display:block; font-family:var(--font-body); font-size:10.5px; letter-spacing:0; text-transform:none; margin-top:2px; opacity:.7; } .day-tab.active{ background:var(--accent); border-color:var(--accent); color:#fff; } .day-tab:hover:not(.active){ border-color:var(--accent); color:var(--text); } .day-panel{ display:none; } .day-panel.active{ display:block; } .empty-day{ text-align:center; padding:50px 20px; color:var(--muted); font-size:14px; background:var(--card); border:1px solid var(--line); border-radius:var(--radius); } .class-list-empty{ text-align:center; padding:40px 20px; color:var(--muted); font-size:14px; background:var(--card); border:1px dashed var(--line); border-radius:var(--radius); } .class-list{ display:flex; flex-direction:column; gap:10px; } .class-row{ display:flex; align-items:center; gap:18px; background:var(--card); border:1px solid var(--line); border-radius:var(--radius); padding:16px 20px; transition:border-color .15s ease, transform .15s ease; cursor:pointer; } .class-row:hover{ border-color:var(--accent); transform:translateX(2px); } .class-time{ font-family:var(--font-display); font-size:15px; color:var(--text); min-width:92px; flex-shrink:0; } .class-time small{ display:block; font-family:var(--font-body); font-size:11px; color:var(--muted); margin-top:2px; } .class-info{ flex:1; min-width:0; } .class-name{ font-size:15.5px; font-weight:600; margin-bottom:4px; } .class-row.kids-row{ border-left:4px solid var(--accent); background:rgba(158,27,52,0.16); } .class-row.kids-row .class-name{ color:#ff5c74; font-weight:700; } .timetable-note{ display:none; margin:32px auto 0; padding:24px 28px; background:var(--card); border-left:3px solid var(--accent); border-radius:var(--radius); max-width:640px; text-align:left; } .timetable-note.active{ display:block; } .timetable-note p{ color:var(--muted); font-size:14px; line-height:1.7; margin:0; } .timetable-note strong{ color:var(--text); } /* ===== ABOUT THIS LOCATION ===== */ .location-info{ padding:var(--section-pad) 0; background:var(--bg-alt); border-top:1px solid var(--line); border-bottom:1px solid var(--line); } .location-info-grid{ display:grid; grid-template-columns:repeat(4,1fr); gap:24px; } @media (max-width:820px){ .location-info-grid{ grid-template-columns:1fr 1fr; } } @media (max-width:520px){ .location-info-grid{ grid-template-columns:1fr; } } .location-info-grid.cols-3{ grid-template-columns:repeat(3,1fr); } @media (max-width:820px){ .location-info-grid.cols-3{ grid-template-columns:1fr 1fr; } } @media (max-width:520px){ .location-info-grid.cols-3{ grid-template-columns:1fr; } } .location-info-item h4{ font-family:var(--font-display); text-transform:uppercase; letter-spacing:0.06em; font-size:13px; color:var(--accent); margin-bottom:10px; } .location-info-item p, .location-info-item a{ color:var(--muted); font-size:14px; line-height:1.6; display:block; } .location-info-item a:hover{ color:var(--text); } /* ===== BOOKING CARD (wraps the Clubworx iframe) ===== */ .booking{ padding:var(--section-pad) 0; text-align:center; } .booking-card{ background:var(--card); border:1px solid var(--line); border-radius:var(--radius); overflow:hidden; max-width:640px; margin:0 auto; text-align:left; } .booking-card-header{ padding:24px 26px; border-bottom:1px solid var(--line); text-align:center; } .booking-card-header h3{ font-size:18px; text-transform:none; letter-spacing:0; margin-bottom:6px; } .booking-card-header p{ color:var(--muted); font-size:13.5px; } .booking-card-body{ position:relative; background:#fff; } .booking-card-body iframe{ display:block; width:100%; border:0; } .booking-loading{ position:absolute; inset:0; display:flex; align-items:center; justify-content:center; background:var(--card); color:var(--muted); font-size:13px; gap:10px; } .booking-spinner{ width:16px; height:16px; border:2px solid var(--line); border-top-color:var(--accent); border-radius:50%; animation:spin 0.8s linear infinite; } @keyframes spin{ to{ transform:rotate(360deg); } } .booking-powered{ text-align:center; padding:10px; font-size:11px; color:var(--muted); background:var(--bg-alt); } .booking-powered img{ height:14px; display:inline-block; vertical-align:middle; margin-left:4px; opacity:.6; } /* ===== TRAIN GI + NO GI ===== */ .traingi{ padding:var(--section-pad) 0; background:var(--bg-alt); border-top:1px solid var(--line); border-bottom:1px solid var(--line); } .traingi .container{ max-width:700px; text-align:center; } .traingi p{ color:var(--muted); font-size:16px; margin-bottom:14px; } /* ===== REDESIGNED COMPARISON (vs-table) ===== */ .vs-table{ border:1px solid var(--line); border-radius:var(--radius); overflow:hidden; } .vs-table-head{ display:grid; grid-template-columns:1fr 1fr; } .vs-table-head div{ padding:20px 24px; font-family:var(--font-display); text-transform:uppercase; letter-spacing:0.06em; font-size:13px; } .vs-table-head .neg{ color:var(--muted); background:var(--bg-alt); } .vs-table-head .pos{ color:#fff; background:var(--accent); } .vs-row{ display:grid; grid-template-columns:1fr 1fr; } .vs-row:nth-child(even){ background:var(--bg-alt); } .vs-cell{ padding:18px 24px; display:flex; gap:12px; align-items:flex-start; font-size:14.5px; line-height:1.55; } .vs-cell.neg{ color:var(--muted); border-right:1px solid var(--line); } .vs-cell.pos{ color:var(--text); } .vs-badge{ flex-shrink:0; width:22px; height:22px; border-radius:50%; display:flex; align-items:center; justify-content:center; font-size:12px; margin-top:1px; } .vs-badge.neg{ background:var(--line); color:var(--muted); } .vs-badge.pos{ background:var(--accent); color:#fff; } @media (max-width:700px){ .vs-table-head{ grid-template-columns:1fr; } .vs-table-head .neg{ display:none; } .vs-row{ grid-template-columns:1fr; } .vs-row .vs-cell.neg{ display:none; } } /* ===== BEGINNER PATH (two step explainer) ===== */ .path-section{ padding:var(--section-pad) 0; } .path-grid{ display:flex; align-items:stretch; gap:0; max-width:900px; margin:0 auto; } @media (max-width:760px){ .path-grid{ flex-direction:column; } } .path-card{ flex:1; background:var(--card); border:1px solid var(--line); border-radius:var(--radius); padding:34px 30px; position:relative; } .path-card.step-2{ border-color:var(--accent); } .path-step-badge{ display:inline-flex; align-items:center; justify-content:center; width:32px; height:32px; border-radius:50%; background:var(--bg-alt); color:var(--muted); font-family:var(--font-display); font-size:14px; margin-bottom:18px; } .path-card.step-2 .path-step-badge{ background:var(--accent); color:#fff; } .path-card h3{ font-size:20px; margin-bottom:12px; } .path-card p{ color:var(--muted); font-size:14.5px; line-height:1.7; } .path-arrow{ flex-shrink:0; display:flex; align-items:center; justify-content:center; width:60px; color:var(--accent); } @media (max-width:760px){ .path-arrow{ width:auto; height:44px; transform:rotate(90deg); margin:0 auto; } } /* ===== EVERY BELT STARTED HERE ===== */ .mixed-level{ padding:var(--section-pad) 0; text-align:center; } .mixed-level .container{ max-width:680px; } .mixed-level h2{ margin-bottom:20px; } .mixed-level p{ color:var(--muted); font-size:16px; line-height:1.8; margin-bottom:16px; } .mixed-level .mixed-level-emphasis{ color:var(--text); font-weight:600; font-size:17px; } /* ===== DIFFERENCE ===== */ .difference{ padding:var(--section-pad) 0; } .diff-grid{ display:grid; grid-template-columns:1fr 1fr; gap:1px; background:var(--line); border:1px solid var(--line); border-radius:var(--radius); overflow:hidden; } @media (max-width:700px){ .diff-grid{ grid-template-columns:1fr; } } .diff-col{ background:var(--card); padding:26px; } .diff-col h4{ font-family:var(--font-display); text-transform:uppercase; letter-spacing:0.06em; font-size:14px; margin-bottom:18px; } .diff-col.neg h4{ color:var(--muted); } .diff-col.pos h4{ color:var(--accent); } .diff-row{ display:flex; gap:10px; align-items:flex-start; font-size:14.5px; padding:10px 0; border-bottom:1px solid var(--line); } .diff-row:last-child{ border-bottom:none; } .diff-col.neg .diff-row{ color:var(--muted); } .diff-icon{ flex-shrink:0; font-size:14px; margin-top:2px; } .diff-col.neg .diff-icon{ color:#6b6963; } .diff-col.pos .diff-icon{ color:var(--accent); } /* ===== COACHES ===== */ .coaches{ padding:var(--section-pad) 0; } .coaches-carousel-wrap{ position:relative; } .coaches-track{ display:flex; align-items:center; gap:16px; overflow-x:auto; scroll-snap-type:x mandatory; padding:44px calc(50% - 100px) 54px; -webkit-overflow-scrolling:touch; scrollbar-width:none; } .coaches-track::-webkit-scrollbar{ display:none; } .coach-slide{ flex:0 0 200px; scroll-snap-align:center; position:relative; aspect-ratio:3/4; border-radius:var(--radius); overflow:hidden; background:var(--card); border:1px solid var(--line); opacity:.45; transform:scale(0.78); transition:transform .35s ease, opacity .35s ease; z-index:1; } .coach-slide.active{ opacity:1; transform:scale(1.25); z-index:5; border-color:var(--accent); } .coach-slide .photo-slot{ position:absolute; inset:0; border:none; border-radius:0; } .coach-slide img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; } .coach-slide-overlay{ position:absolute; inset:0; z-index:1; background:linear-gradient(180deg, rgba(12,12,13,0) 45%, rgba(12,12,13,0.92) 100%); } .coach-slide-info{ position:absolute; left:0; right:0; bottom:0; z-index:2; padding:18px; color:#fff; } .coach-slide-info h4{ font-size:15.5px; margin-bottom:4px; } .coach-slide-info .role{ color:var(--accent); font-size:11px; letter-spacing:0.05em; text-transform:uppercase; } .coach-nav{ position:absolute; top:50%; transform:translateY(-50%); z-index:6; width:40px; height:40px; border-radius:50%; background:rgba(12,12,13,0.7); border:1px solid rgba(255,255,255,0.2); color:#fff; font-size:18px; display:flex; align-items:center; justify-content:center; cursor:pointer; } .coach-nav.prev{ left:-6px; } .coach-nav.next{ right:-6px; } @media (max-width:700px){ .coach-nav{ width:34px; height:34px; font-size:16px; } .coach-nav.prev{ left:2px; } .coach-nav.next{ right:2px; } } .coaches-cta{ text-align:center; margin-top:20px; } /* ===== COACH BIOS (coaches.html) ===== */ .coach-bio{ padding:64px 0; } .coach-bio-inner{ display:grid; grid-template-columns:280px 1fr; gap:48px; align-items:start; } @media (max-width:700px){ .coach-bio-inner{ grid-template-columns:1fr; } } .coach-bio-inner .photo-slot{ aspect-ratio:3/4; } .coach-bio-name{ font-size:26px; margin-bottom:4px; text-transform:none; letter-spacing:0; } .coach-bio-role{ color:var(--accent); font-family:var(--font-display); font-size:13px; letter-spacing:0.06em; text-transform:uppercase; margin-bottom:20px; } .coach-bio-text p{ color:var(--muted); font-size:15.5px; line-height:1.75; margin-bottom:14px; } .coach-bio-text .bio-placeholder{ color:var(--accent); font-style:normal; } /* ===== PRICING ===== */ .pricing{ padding:var(--section-pad) 0; text-align:center; } .pricing .container{ max-width:480px; } .price-card{ background:var(--card); border:1px solid var(--accent); border-radius:var(--radius); padding:44px 34px; } .price-card .name{ font-family:var(--font-display); letter-spacing:0.08em; text-transform:uppercase; color:var(--accent); font-size:14px; margin-bottom:18px; } .price-card .amount{ font-family:var(--font-display); font-size:52px; } .price-card .freq{ color:var(--muted); font-size:14px; margin-bottom:24px; display:block; } .price-features{ list-style:none; text-align:left; margin:24px 0; } .price-features li{ padding:8px 0; font-size:14px; color:var(--muted); border-bottom:1px solid var(--line); } .price-features li:last-child{ border-bottom:none; } /* ===== PLANS GRID (membership.html) ===== */ .plans-section{ padding:var(--section-pad) 0; } .plans-section .container{ max-width:var(--container); text-align:left; } .frequency-note{ margin-top:24px; padding:24px 26px; background:var(--card); border-left:3px solid var(--accent); border-radius:var(--radius); max-width:640px; } .frequency-note h4{ font-size:16px; margin-bottom:10px; } .frequency-note p{ color:var(--muted); font-size:14px; line-height:1.7; margin:0; } .private-addon{ margin-top:40px; background:var(--card); border:1px solid var(--accent); border-radius:var(--radius); padding:32px 30px; text-align:center; } .private-addon h3{ font-size:17px; margin-bottom:8px; font-family:var(--font-display); text-transform:uppercase; letter-spacing:0.04em; color:var(--accent); } .private-addon .addon-price{ font-family:var(--font-display); font-size:28px; color:var(--text); margin-bottom:12px; } .private-addon p{ color:var(--muted); font-size:13.5px; max-width:480px; margin:0 auto; line-height:1.6; } .plans-includes{ display:flex; gap:24px; align-items:flex-start; max-width:520px; margin:0 auto 60px; border-left:2px solid var(--accent); padding-left:24px; } .plans-includes h3{ font-size:18px; margin-bottom:14px; text-transform:none; letter-spacing:0; } .plans-includes ul{ list-style:none; } .plans-includes li{ display:flex; gap:10px; padding:6px 0; font-size:14.5px; color:var(--muted); } .plans-includes li::before{ content:'\2713'; color:var(--accent); flex-shrink:0; } .location-toggle{ display:flex; align-items:center; justify-content:center; gap:10px; flex-wrap:wrap; margin-bottom:48px; } .location-toggle-label{ font-size:13px; color:var(--muted); margin-right:4px; } .location-toggle button{ font-family:var(--font-display); font-size:12.5px; letter-spacing:0.06em; text-transform:uppercase; padding:10px 20px; border-radius:100px; border:1px solid var(--line); background:var(--card); color:var(--muted); cursor:pointer; transition:all .15s ease; } .location-toggle button.active{ background:var(--accent); border-color:var(--accent); color:#fff; } .location-toggle button:hover:not(.active){ border-color:var(--accent); color:var(--text); } .plan-tabs{ display:flex; justify-content:center; gap:10px; flex-wrap:wrap; margin-bottom:48px; } .plan-tab{ font-family:var(--font-display); font-size:13px; letter-spacing:0.06em; text-transform:uppercase; padding:12px 28px; border-radius:100px; border:1px solid var(--line); background:var(--card); color:var(--muted); cursor:pointer; transition:all .15s ease; } .plan-tab.active{ background:var(--accent); border-color:var(--accent); color:#fff; } .plan-tab:hover:not(.active){ border-color:var(--accent); color:var(--text); } .plan-panel{ display:none; } .plan-panel.active{ display:block; } .plans-category{ margin-bottom:64px; } .plans-category:last-child{ margin-bottom:0; } .plans-category-header{ text-align:center; margin-bottom:32px; padding-top:8px; border-top:1px solid var(--line); } .plans-category:first-child .plans-category-header{ border-top:none; padding-top:0; } .plans-category-title{ font-family:var(--font-display); text-transform:none; letter-spacing:0; font-size:28px; color:var(--text); margin-top:24px; margin-bottom:8px; text-align:center; } .plans-category-subtitle{ color:var(--muted); font-size:14px; } .plans-grid{ display:grid; grid-template-columns:repeat(auto-fit, minmax(240px, 1fr)); gap:24px; align-items:start; } .plan-card{ background:var(--card); border:1px solid var(--line); border-radius:var(--radius); padding:32px 28px; text-align:left; display:flex; flex-direction:column; position:relative; } .plan-card.featured{ border-color:var(--accent); border-width:2px; padding-top:40px; } .plan-card-badge{ position:absolute; top:-13px; left:50%; transform:translateX(-50%); background:var(--accent); color:#fff; font-family:var(--font-display); font-size:11px; letter-spacing:0.06em; text-transform:uppercase; padding:6px 16px; border-radius:100px; white-space:nowrap; } .plan-card .plan-name{ font-family:var(--font-display); font-size:26px; text-transform:none; letter-spacing:0; color:var(--text); margin-bottom:20px; line-height:1.1; } .plan-card .plan-price{ font-family:var(--font-display); font-size:38px; color:var(--text); } .plan-card .plan-price .plan-freq-inline{ font-family:var(--font-body); font-size:14px; color:var(--muted); font-weight:400; } .plan-billing-note{ display:block; color:var(--muted); font-size:11.5px; margin-top:2px; } .plan-card .plan-freq{ color:var(--muted); font-size:12.5px; margin-bottom:22px; display:block; } .plan-card .plan-note{ font-size:12.5px; color:var(--muted); margin-bottom:22px; line-height:1.6; } .plan-includes-list{ list-style:none; margin-top:22px; } .plan-includes-list li{ display:flex; align-items:flex-start; gap:10px; font-size:14px; color:var(--text); padding:7px 0; } .plan-includes-list li::before{ content:'\2713'; color:var(--accent); flex-shrink:0; font-weight:700; margin-top:2px; } .plan-family-note{ margin-top:18px; padding-top:16px; border-top:1px solid var(--line); font-size:13px; color:var(--muted); } .plan-family-note a{ color:var(--accent); font-weight:600; white-space:nowrap; } .plan-family-note a:hover{ text-decoration:underline; } .plan-card .btn{ width:100%; } .plan-card .btn + .btn{ margin-top:10px; } .plan-card.featured .btn{ background:var(--accent); color:#fff; border-color:var(--accent); } .plan-card .plan-trial-btn, .plan-card.featured .plan-trial-btn{ background:transparent; color:var(--text); border-color:var(--line); } .plan-card .plan-trial-btn:hover{ border-color:var(--accent); color:var(--accent); } .plans-trust-line{ display:flex; gap:28px; justify-content:center; flex-wrap:wrap; margin-top:44px; font-size:13.5px; color:var(--muted); } .plans-trust-line span::before{ content:'\2713'; color:var(--accent); margin-right:6px; } /* ===== FAMILY PLANS TABLE (membership.html, Families tab) ===== */ .family-plans-intro{ color:var(--muted); font-size:14.5px; max-width:640px; margin:0 auto 40px; text-align:center; line-height:1.7; } .family-group{ margin-bottom:44px; } .family-group:last-child{ margin-bottom:0; } .family-group-title{ font-family:var(--font-display); font-size:19px; text-transform:none; letter-spacing:0; color:var(--text); margin-bottom:4px; } .family-group-subtitle{ color:var(--muted); font-size:13px; margin-bottom:18px; } .family-table-wrap{ overflow-x:auto; border:1px solid var(--line); border-radius:var(--radius); } .family-table{ width:100%; border-collapse:collapse; min-width:420px; } .family-table th, .family-table td{ padding:14px 20px; border-bottom:1px solid var(--line); font-size:14px; } .family-table th{ font-family:var(--font-display); font-size:11px; text-transform:uppercase; letter-spacing:0.05em; color:var(--muted); font-weight:400; background:var(--bg-alt); text-align:center; } .family-table th:first-child{ text-align:left; } .family-table td{ text-align:center; color:var(--text); } .family-table td:first-child{ text-align:left; font-weight:600; color:var(--text); } .family-table td.price{ font-family:var(--font-display); font-size:16px; } .family-table tbody tr:last-child td{ border-bottom:none; } .family-table tbody tr:hover td{ background:var(--bg-alt); } .family-note-card{ margin-top:8px; background:var(--card); border:1px solid var(--accent); border-radius:var(--radius); padding:24px 28px; text-align:center; } .family-note-card p{ color:var(--text); font-size:14.5px; line-height:1.7; margin:0; } .family-note-card a{ color:var(--accent); font-weight:600; } .family-note-card a:hover{ text-decoration:underline; } .family-cta{ text-align:center; margin-top:48px; } .family-cta .btn{ margin:0 6px 10px; } .family-cta p{ color:var(--muted); font-size:13px; margin-top:14px; } /* ===== BOOKING ===== */ .booking{ padding:var(--section-pad) 0; text-align:center; background:var(--bg-alt); border-top:1px solid var(--line); border-bottom:1px solid var(--line); } .booking-slot{ background:var(--card); border:1px dashed var(--line); border-radius:var(--radius); padding:60px 30px; color:var(--muted); font-size:14px; } .booking-slot strong{ display:block; color:var(--text); font-size:16px; margin-bottom:10px; } /* ===== FAQ ===== */ .faq{ padding:var(--section-pad) 0; } .faq .container{ max-width:760px; } .faq-item{ border-bottom:1px solid var(--line); } .faq-q{ width:100%; background:none; border:none; color:var(--text); text-align:left; padding:20px 0; font-size:16px; font-weight:600; display:flex; justify-content:space-between; cursor:pointer; gap:20px; } .faq-q .plus{ color:var(--accent); font-family:var(--font-display); flex-shrink:0; } .faq-a{ max-height:0; overflow:hidden; transition:max-height .25s ease; } .faq-a-inner{ padding-bottom:20px; color:var(--muted); font-size:14.5px; } .faq-item.open .faq-a{ max-height:300px; } .faq-item.open .plus{ transform:rotate(45deg); display:inline-block; } /* ===== FOOTER ===== */ .site-footer{ background:var(--bg-alt); border-top:1px solid var(--line); padding:60px 0 30px; } .footer-top{ display:grid; grid-template-columns:1.2fr 1fr 1fr 1fr; gap:36px; margin-bottom:40px; } @media (max-width:820px){ .footer-top{ grid-template-columns:1fr 1fr; } } @media (max-width:520px){ .footer-top{ grid-template-columns:1fr; } } .footer-brand img{ height:36px; margin-bottom:14px; } .footer-brand p{ color:var(--muted); font-size:13.5px; max-width:260px; } .footer-col h5{ font-family:var(--font-display); letter-spacing:0.08em; text-transform:uppercase; font-size:12.5px; color:var(--accent); margin-bottom:14px; } .footer-col a, .footer-col span{ display:block; color:var(--muted); font-size:14px; padding:5px 0; } .footer-col a:hover{ color:var(--text); } .footer-bottom{ display:flex; justify-content:space-between; gap:16px; flex-wrap:wrap; padding-top:26px; border-top:1px solid var(--line); font-size:12.5px; color:var(--muted); } /* ===== MOBILE CTA BAR ===== */ .mobile-cta-bar{ display:none; position:fixed; bottom:0; left:0; right:0; z-index:300; background:var(--bg); border-top:1px solid var(--line); padding:12px 16px; gap:10px; } .mobile-cta-bar .btn{ flex:1; } @media (max-width:700px){ .mobile-cta-bar{ display:flex; } body{ padding-bottom:70px; } } .reveal{ opacity:0; transform:translateY(16px); transition:opacity .5s ease, transform .5s ease; } .reveal.visible{ opacity:1; transform:none; } /* ===== PHOTO PLACEHOLDER ===== */ .photo-slot{ aspect-ratio:4/3; border-radius:var(--radius); border:1px dashed var(--line-strong); background:repeating-linear-gradient(135deg, var(--card), var(--card) 10px, #201f21 10px, #201f21 20px); display:flex; align-items:center; justify-content:center; text-align:center; padding:16px; color:var(--muted); font-size:12.5px; line-height:1.4; } .photo-slot span{ display:block; } .photo-slot .slot-label{ color:var(--accent); font-family:var(--font-display); font-size:11px; letter-spacing:0.06em; text-transform:uppercase; margin-bottom:6px; } /* ===== REAL PHOTOS (replace placeholder tiles) ===== */ .gallery-grid img{ width:100%; height:100%; aspect-ratio:4/3; object-fit:cover; border-radius:var(--radius); display:block; } .gallery-grid img:first-child{ grid-column:span 2; grid-row:span 2; aspect-ratio:auto; } @media (max-width:820px){ .gallery-grid img:first-child{ grid-column:span 2; aspect-ratio:4/3; } } .amenity-card img.amenity-photo{ width:100%; aspect-ratio:16/10; object-fit:cover; display:block; } .hero-poster-img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; } .page-header-img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; } /* ===== GALLERY ===== */ .gallery{ padding:var(--section-pad) 0; background:var(--bg-alt); border-top:1px solid var(--line); border-bottom:1px solid var(--line); } .gallery-grid{ display:grid; grid-template-columns:repeat(4,1fr); gap:14px; } @media (max-width:820px){ .gallery-grid{ grid-template-columns:repeat(2,1fr); } } .gallery-grid .photo-slot:nth-child(1){ grid-column:span 2; grid-row:span 2; aspect-ratio:auto; } @media (max-width:820px){ .gallery-grid .photo-slot:nth-child(1){ grid-column:span 2; aspect-ratio:4/3; } } /* ===== AMENITIES ===== */ .amenities{ padding:var(--section-pad) 0; } .amenities-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:24px; } @media (max-width:820px){ .amenities-grid{ grid-template-columns:1fr; } } .amenity-card{ background:var(--card); border:1px solid var(--line); border-radius:var(--radius); overflow:hidden; } .amenity-card .photo-slot{ border:none; border-radius:0; aspect-ratio:16/10; } .amenity-card-body{ padding:26px 24px; } .amenity-card h3{ font-size:19px; margin-bottom:10px; text-transform:none; letter-spacing:0; } .amenity-card p{ color:var(--muted); font-size:14px; margin-bottom:18px; } /* ===== TESTIMONIALS ===== */ .testimonials{ padding:var(--section-pad) 0; background:var(--bg-alt); border-top:1px solid var(--line); border-bottom:1px solid var(--line); } .testimonials-carousel-wrap{ position:relative; } .testimonials-track{ display:flex; align-items:center; gap:16px; overflow-x:auto; scroll-snap-type:x mandatory; padding:24px calc(50% - 150px) 34px; -webkit-overflow-scrolling:touch; scrollbar-width:none; } .testimonials-track::-webkit-scrollbar{ display:none; } .testimonial-slide{ flex:0 0 300px; scroll-snap-align:center; background:var(--card); border:1px solid var(--line); border-radius:var(--radius); padding:30px 26px; opacity:.5; transform:scale(0.88); transition:transform .35s ease, opacity .35s ease; z-index:1; } .testimonial-slide.active{ opacity:1; transform:scale(1.08); z-index:5; border-color:var(--accent); } .testimonial-stars{ color:var(--accent); font-size:14px; margin-bottom:14px; letter-spacing:2px; } .testimonial-quote{ font-size:15px; color:var(--text); margin-bottom:18px; line-height:1.6; } .testimonial-name{ font-family:var(--font-display); font-size:12.5px; letter-spacing:0.06em; text-transform:uppercase; color:var(--muted); } .testimonial-nav{ position:absolute; top:50%; transform:translateY(-50%); z-index:6; width:40px; height:40px; border-radius:50%; background:rgba(12,12,13,0.7); border:1px solid rgba(255,255,255,0.2); color:#fff; font-size:18px; display:flex; align-items:center; justify-content:center; cursor:pointer; } .testimonial-nav.prev{ left:-6px; } .testimonial-nav.next{ right:-6px; } @media (max-width:700px){ .testimonial-nav{ width:34px; height:34px; font-size:16px; } .testimonial-nav.prev{ left:2px; } .testimonial-nav.next{ right:2px; } } /* ===== NEWSLETTER ===== */ .newsletter{ padding:var(--section-pad) 0; text-align:center; } .newsletter .container{ max-width:520px; } .newsletter p{ color:var(--muted); font-size:15px; margin-bottom:28px; } .newsletter-form{ display:flex; gap:10px; flex-wrap:wrap; justify-content:center; } .newsletter-form input[type="email"]{ flex:1; min-width:220px; background:var(--card); border:1px solid var(--line); color:var(--text); padding:14px 16px; border-radius:var(--radius); font-size:14px; } .newsletter-form input[type="email"]:focus{ outline:none; border-color:var(--accent); } .newsletter-note{ font-size:12px; color:var(--muted); margin-top:14px; } .picker-hero{ min-height:100vh; display:flex; flex-direction:column; align-items:center; justify-content:center; text-align:center; padding:60px var(--pad); background: radial-gradient(circle at 20% 20%, rgba(158,27,52,0.22), transparent 45%), radial-gradient(circle at 80% 80%, rgba(158,27,52,0.14), transparent 40%), var(--bg); } .picker-hero img{ height:64px; margin-bottom:34px; } .picker-hero h1{ font-size:clamp(28px,5vw,44px); margin-bottom:16px; } .picker-hero p{ color:var(--muted); font-size:16px; margin-bottom:46px; } .picker-grid{ display:grid; grid-template-columns:1fr 1fr; gap:24px; max-width:760px; width:100%; } @media (max-width:640px){ .picker-grid{ grid-template-columns:1fr; } } .picker-card{ background:var(--card); border:1px solid var(--line); border-radius:var(--radius); padding:44px 30px; transition:border-color .15s ease, transform .15s ease; } .picker-card:hover{ border-color:var(--accent); transform:translateY(-2px); } .picker-card h3{ font-size:22px; margin-bottom:8px; text-transform:none; letter-spacing:0; } .picker-card p{ color:var(--muted); font-size:14px; margin-bottom:26px; } @media (prefers-reduced-motion: reduce){ .reveal{ opacity:1; transform:none; transition:none; } html{ scroll-behavior:auto; } } /* ===== EVENT DETAIL EXTRAS (quick facts strip, inline callout, in-article headings) ===== */ .event-quickfacts{ display:grid; grid-template-columns:repeat(4,1fr); background:var(--line); gap:1px; border:1px solid var(--line); border-radius:var(--radius); overflow:hidden; margin:8px 0 40px; } .event-quickfacts-item{ background:var(--card); padding:20px 18px; } .event-quickfacts-item h4{ font-family:var(--font-display); font-size:11px; letter-spacing:0.08em; text-transform:uppercase; color:var(--accent); margin-bottom:8px; } .event-quickfacts-item p{ font-size:14px; color:var(--text); line-height:1.4; margin:0; } @media (max-width:700px){ .event-quickfacts{ grid-template-columns:1fr 1fr; } } .event-detail-body p.callout{ color:var(--text); font-size:18px; font-weight:600; line-height:1.6; margin:34px 0; padding-left:20px; border-left:3px solid var(--accent); } .event-detail-body .section-eyebrow{ font-family:var(--font-display); font-size:12px; letter-spacing:0.1em; text-transform:uppercase; color:var(--accent); margin-bottom:10px; } .event-detail-body h2{ font-size:clamp(22px,3vw,30px); margin:0 0 18px; } /* ===== AI CHAT WIDGET ===== */ .chat-launcher{ position:fixed; right:22px; bottom:22px; z-index:400; width:58px; height:58px; border-radius:50%; background:var(--accent); border:none; cursor:pointer; display:flex; align-items:center; justify-content:center; color:#fff; box-shadow:0 10px 28px rgba(0,0,0,0.35); transition:transform .15s ease, background .15s ease; } .chat-launcher:hover{ background:var(--accent-dim); transform:translateY(-2px); } .chat-launcher svg{ width:26px; height:26px; } .chat-launcher .chat-launcher-close{ display:none; } .chat-launcher.open .chat-launcher-chat{ display:none; } .chat-launcher.open .chat-launcher-close{ display:block; } @media (max-width:700px){ .chat-launcher{ bottom:88px; right:16px; } } .chat-panel{ position:fixed; right:22px; bottom:92px; z-index:400; width:360px; max-width:calc(100vw - 32px); height:min(560px, calc(100vh - 140px)); background:var(--card); border:1px solid var(--line); border-radius:16px; overflow:hidden; display:flex; flex-direction:column; box-shadow:0 24px 60px rgba(0,0,0,0.45); opacity:0; transform:translateY(12px) scale(0.98); pointer-events:none; transition:opacity .18s ease, transform .18s ease; } .chat-panel.open{ opacity:1; transform:none; pointer-events:auto; } @media (max-width:700px){ .chat-panel{ right:16px; bottom:154px; } } .chat-panel-header{ padding:16px 18px; border-bottom:1px solid var(--line); display:flex; align-items:center; justify-content:space-between; gap:10px; } .chat-panel-header-title{ font-family:var(--font-display); font-size:13px; letter-spacing:0.05em; text-transform:uppercase; color:var(--text); } .chat-panel-header-sub{ font-size:12px; color:var(--muted); margin-top:2px; } .chat-panel-close{ background:none; border:none; color:var(--muted); font-size:16px; cursor:pointer; padding:4px; line-height:1; } .chat-panel-close:hover{ color:var(--text); } .chat-messages{ flex:1; overflow-y:auto; padding:16px 18px; display:flex; flex-direction:column; gap:12px; } .chat-msg{ max-width:88%; font-size:14px; line-height:1.55; padding:10px 14px; border-radius:14px; white-space:pre-wrap; } .chat-msg.assistant{ align-self:flex-start; background:var(--bg-alt); border:1px solid var(--line); color:var(--text); border-bottom-left-radius:4px; } .chat-msg.user{ align-self:flex-end; background:var(--accent); color:#fff; border-bottom-right-radius:4px; } .chat-msg.typing{ display:flex; gap:4px; align-items:center; padding:12px 16px; } .chat-msg.typing span{ width:6px; height:6px; border-radius:50%; background:var(--muted); opacity:.6; animation:chat-typing 1s ease infinite; } .chat-msg.typing span:nth-child(2){ animation-delay:.15s; } .chat-msg.typing span:nth-child(3){ animation-delay:.3s; } @keyframes chat-typing{ 0%,60%,100%{ transform:translateY(0); opacity:.4; } 30%{ transform:translateY(-3px); opacity:1; } } .chat-suggestions{ display:flex; flex-wrap:wrap; gap:8px; padding:0 18px 14px; } .chat-suggestion{ font-size:12.5px; color:var(--muted); background:var(--bg-alt); border:1px solid var(--line); border-radius:100px; padding:8px 14px; cursor:pointer; transition:border-color .15s ease, color .15s ease; } .chat-suggestion:hover{ border-color:var(--accent); color:var(--text); } .chat-panel-footer{ border-top:1px solid var(--line); padding:12px; } .chat-form{ display:flex; gap:8px; align-items:flex-end; } .chat-input{ flex:1; resize:none; max-height:90px; background:var(--bg-alt); border:1px solid var(--line); color:var(--text); border-radius:12px; padding:11px 14px; font-family:var(--font-body); font-size:14px; line-height:1.4; } .chat-input:focus{ outline:none; border-color:var(--accent); } .chat-send{ flex-shrink:0; width:40px; height:40px; border-radius:50%; background:var(--accent); border:none; color:#fff; display:flex; align-items:center; justify-content:center; cursor:pointer; transition:background .15s ease; } .chat-send:hover{ background:var(--accent-dim); } .chat-send:disabled{ opacity:.5; cursor:not-allowed; } .chat-send svg{ width:16px; height:16px; } .chat-panel-note{ text-align:center; font-size:11px; color:var(--muted); margin-top:10px; } .chat-panel-note a{ color:var(--accent); } .chat-lead-link{ align-self:flex-start; font-size:12.5px; color:var(--accent); background:none; border:none; cursor:pointer; padding:2px 0; text-decoration:underline; } .chat-lead-card{ align-self:stretch; background:var(--bg-alt); border:1px solid var(--line); border-radius:14px; padding:14px; display:flex; flex-direction:column; gap:8px; max-width:100%; } .chat-lead-title{ font-size:13px; font-weight:600; color:var(--text); margin-bottom:2px; } .chat-lead-card input, .chat-lead-card textarea{ background:var(--card); border:1px solid var(--line); color:var(--text); border-radius:10px; padding:9px 12px; font-family:var(--font-body); font-size:13.5px; resize:none; } .chat-lead-card input:focus, .chat-lead-card textarea:focus{ outline:none; border-color:var(--accent); } .chat-lead-actions{ display:flex; gap:8px; align-items:center; margin-top:2px; } .chat-lead-submit{ flex:1; } .chat-lead-cancel{ background:none; border:none; color:var(--muted); font-size:12.5px; cursor:pointer; padding:8px; } .chat-lead-error{ font-size:12px; color:var(--accent); display:none; } .chat-lead-error.visible{ display:block; } .chat-lead-success{ align-self:flex-start; font-size:13.5px; color:var(--muted); background:var(--bg-alt); border:1px solid var(--line); border-radius:14px; padding:10px 14px; }