/* ======================================== DESIGN TOKENS ======================================== */ :root { --bg-0: #0a0a0c; --bg-1: #0d0d0d; --bg-2: #141418; --bg-3: #1c1c22; --line: rgba(255,255,255,0.08); --text: #e9e9ee; --text-dim: #a4a4ad; --text-mute: #6c6c75; --brand: #ff6b35; --brand-2: #ff8c5a; --brand-glow: rgba(255,107,53,0.35); --radius-sm: 10px; --radius: 18px; --radius-lg: 28px; --shadow-soft: 0 10px 40px rgba(0,0,0,0.45); --shadow-brand: 0 10px 40px var(--brand-glow); --ease: cubic-bezier(.22,.61,.36,1); } /* ======================================== RESET AND BASE STYLES ======================================== */ * { margin: 0; padding: 0; box-sizing: border-box; } html { scroll-behavior: smooth; /* Account for fixed header when jumping to anchors */ scroll-padding-top: 80px; /* Prevent pull-to-refresh without blocking scroll chaining. "contain" is safer than "none" on Android Chrome/WebView — "none" can disable scroll chaining and cause pages to feel stuck. */ overscroll-behavior-y: contain; } body { font-family: 'Inter', sans-serif; line-height: 1.55; color: var(--text); background-color: var(--bg-1); /* "clip" instead of "hidden": clip does NOT create a scroll container. overflow-x: hidden on is a known Android Chrome bug trigger — Chrome treats the body as the scroll container, which combined with overscroll-behavior-y causes the page to feel stuck or refuse to scroll. */ overflow-x: clip; /* Prevent iOS Safari pull-to-refresh / rubber-band on the body */ overscroll-behavior-y: contain; -webkit-font-smoothing: antialiased; background-image: radial-gradient(1200px 600px at 85% -10%, rgba(255,107,53,0.09), transparent 60%), radial-gradient(900px 500px at -5% 30%, rgba(255,107,53,0.05), transparent 60%), radial-gradient(800px 500px at 50% 110%, rgba(255,140,90,0.07), transparent 60%); } /* ======================================== REFERENCE DESIGN UTILITIES Glass cards, tilt, reveal, eyebrow, lead ======================================== */ /* Eyebrow label */ .eyebrow { display: inline-block; font-size: 0.78rem; letter-spacing: 0.2em; text-transform: uppercase; color: var(--brand); font-weight: 700; margin-bottom: 0.75rem; } /* Lead paragraph */ .lead { font-size: 1.125rem; color: var(--text-dim); max-width: 60ch; } /* Ghost button variant */ .btn-ghost { display: inline-flex; align-items: center; gap: 10px; padding: 14px 26px; border-radius: 5px; font-weight: 700; font-size: 0.9rem; text-transform: uppercase; letter-spacing: 0.5px; background: transparent; color: var(--text); border: 1px solid var(--line); text-decoration: none; transition: background .25s var(--ease), border-color .25s var(--ease), color .25s var(--ease), transform .25s var(--ease); cursor: pointer; } .btn-ghost:hover { background: rgba(255,107,53,0.08); border-color: var(--brand); color: var(--brand); transform: translateY(-2px); } /* Glass card */ .glass { position: relative; padding: 28px; border-radius: var(--radius); background: linear-gradient(180deg, rgba(255,255,255,0.045), rgba(255,255,255,0.015)); border: 1px solid var(--line); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); box-shadow: var(--shadow-soft); transition: transform .5s var(--ease), box-shadow .5s var(--ease), border-color .5s var(--ease); overflow: hidden; } .glass::before { content: ""; position: absolute; inset: 0; border-radius: inherit; background: linear-gradient(180deg, rgba(255,255,255,0.08), transparent 30%); pointer-events: none; } .glass:hover { border-color: rgba(255,107,53,0.35); box-shadow: 0 20px 60px rgba(0,0,0,0.55), 0 0 0 1px rgba(255,107,53,0.2); } /* Tilt effect — JS sets --rx, --ry, --mx, --my */ .tilt { transform: perspective(900px) rotateX(var(--rx,0deg)) rotateY(var(--ry,0deg)) translateZ(0); transition: transform .2s var(--ease); will-change: transform; } .tilt-shine { position: absolute; inset: 0; pointer-events: none; background: radial-gradient(400px circle at var(--mx,50%) var(--my,50%), rgba(255,107,53,0.22), transparent 45%); opacity: 0; transition: opacity .3s var(--ease); border-radius: inherit; } .tilt:hover .tilt-shine { opacity: 1; } /* Scroll-reveal — JS adds .in when element enters viewport */ .reveal { opacity: 0; transform: translateY(28px); transition: opacity .9s var(--ease), transform .9s var(--ease); } .reveal.in { opacity: 1; transform: none; } .reveal.delay-1 { transition-delay: .08s; } .reveal.delay-2 { transition-delay: .16s; } .reveal.delay-3 { transition-delay: .24s; } .reveal.delay-4 { transition-delay: .32s; } @media (prefers-reduced-motion: reduce) { .reveal { opacity: 1; transform: none; transition: none; } .tilt { transform: none !important; } } /* ======================================== REFERENCE LAYOUT SYSTEM ======================================== */ /* Grid system */ .grid { display: grid; gap: 28px; } .grid-2 { grid-template-columns: repeat(2, 1fr); } .grid-3 { grid-template-columns: repeat(3, 1fr); } .grid-4 { grid-template-columns: repeat(4, 1fr); } @media (max-width: 900px) { .grid-2, .grid-3, .grid-4 { grid-template-columns: 1fr; } } /* Section spacing */ .section-tight { padding: clamp(40px, 6vh, 80px) 0; } /* Stats row */ .stat-row { display: grid; grid-template-columns: repeat(4, 1fr); gap: 24px; } @media (max-width: 900px) { .stat-row { grid-template-columns: repeat(2, 1fr); } } .stat .num { font-size: clamp(2rem, 5vw, 3.25rem); font-weight: 900; background: linear-gradient(135deg, #fff, var(--brand)); -webkit-background-clip: text; background-clip: text; color: transparent; letter-spacing: -0.02em; } .stat .lbl { color: var(--text-mute); text-transform: uppercase; letter-spacing: 0.15em; font-size: 0.75rem; } /* Testimonials */ .testimonial { font-size: 1.05rem; color: var(--text); } .testimonial::before { content: "\201C"; font-size: 4rem; color: var(--brand); line-height: 0.5; display: block; margin-bottom: 14px; } .testimonial-meta { display: flex; align-items: center; gap: 10px; margin-top: 16px; color: var(--text-mute); font-size: 0.875rem; } .avatar { width: 36px; height: 36px; border-radius: 50%; background: linear-gradient(135deg, var(--brand), var(--brand-2)); color:#fff; display:grid; place-items:center; font-weight:700; font-size:0.85rem; flex-shrink:0; } /* Parallax */ .parallax-scene { position: relative; min-height: 60vh; display: grid; place-items: center; isolation: isolate; overflow: hidden; padding: clamp(64px, 10vh, 120px) 0; } .parallax-layer { position: absolute; inset: -10%; will-change: transform; } .parallax-blob { position: absolute; width: 560px; height: 560px; border-radius: 50%; filter: blur(80px); opacity: 0.55; pointer-events: none; } .parallax-blob.a { background: rgba(255,107,53,0.45); top: 10%; left: -10%; } .parallax-blob.b { background: rgba(255,140,90,0.35); bottom: 0; right: -10%; } /* Page head (subpages - needs top padding because nav is fixed) */ .page-head { position: relative; padding: 160px 0 60px; text-align: center; overflow: hidden; } .page-head::before { content: ""; position: absolute; inset: 0; background: radial-gradient(600px 300px at 50% 0%, rgba(255,107,53,0.18), transparent 60%); pointer-events: none; } .page-head h1 { font-size: clamp(2.25rem, 5vw, 4rem); font-weight: 900; letter-spacing: -0.02em; margin: 0 auto 1rem; max-width: 18ch; } .page-head .lead { max-width: 52ch; margin: 0 auto; } /* Badge ribbon (price cards) */ .badge-ribbon { position: absolute; top: 16px; right: 16px; font-size: 0.7rem; letter-spacing: 0.15em; padding: 6px 10px; border-radius: 999px; background: var(--brand); color: #fff; text-transform: uppercase; font-weight: 800; } /* CTA band (global) */ .cta-band { position: relative; overflow: hidden; border-radius: var(--radius-lg); padding: 64px 48px; background: radial-gradient(600px 300px at 10% 0%, rgba(255,107,53,0.22), transparent 60%), radial-gradient(500px 300px at 100% 100%, rgba(255,140,90,0.18), transparent 60%), linear-gradient(180deg, rgba(255,255,255,0.04), rgba(255,255,255,0.01)); border: 1px solid var(--line); text-align: center; } .cta-band h2 { max-width: 20ch; margin-inline: auto; } @media (max-width: 768px) { .cta-band { padding: 3rem 1.5rem; } } /* Footer */ /* ── Pre-footer CTA ── */ .prefooter-cta { background: linear-gradient(135deg, #1a0a00 0%, #0d0d0d 40%, #1a0800 100%); border-top: 1px solid rgba(255, 107, 53, 0.2); border-bottom: 1px solid rgba(255, 107, 53, 0.2); padding: 3.5rem 5%; text-align: center; position: relative; overflow: hidden; } .prefooter-cta::before { content: ''; position: absolute; inset: 0; background: radial-gradient(ellipse 70% 120% at 50% 50%, rgba(255,107,53,0.12) 0%, transparent 70%); pointer-events: none; } .prefooter-cta__inner { position: relative; display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 1.25rem 2.5rem; max-width: 900px; margin: 0 auto; } .prefooter-cta__headline { margin: 0; color: #fff; font-size: 1.25rem; font-weight: 700; letter-spacing: -0.01em; line-height: 1.4; } .prefooter-cta__headline span { color: var(--brand); } .prefooter-cta__btn { display: inline-flex; align-items: center; gap: 0.4em; background: var(--brand); color: #fff; font-weight: 700; font-size: 0.95rem; padding: 0.8rem 2rem; border-radius: 8px; text-decoration: none; text-transform: uppercase; letter-spacing: 0.06em; box-shadow: 0 4px 20px rgba(255,107,53,0.45); transition: background 0.2s, box-shadow 0.2s, transform 0.15s; white-space: nowrap; flex-shrink: 0; } .prefooter-cta__btn:hover { background: #e55a25; box-shadow: 0 6px 28px rgba(255,107,53,0.6); transform: translateY(-1px); } @media (max-width: 600px) { .prefooter-cta { padding: 2.5rem 1.25rem; } .prefooter-cta__headline { font-size: 1.05rem; } .prefooter-cta__btn { width: 100%; justify-content: center; } } .footer { margin-top: 0; padding: 50px 0 30px; border-top: 1px solid var(--line); background: rgba(10,10,12,0.6); } .footer-grid { display: grid; grid-template-columns: 1.2fr 1fr 1fr 1fr; gap: 28px; } @media (max-width: 800px) { .footer-grid { grid-template-columns: 1fr 1fr; } } .footer h4 { text-transform: uppercase; font-size: 0.8rem; letter-spacing: 0.18em; color: var(--text); margin-bottom: 12px; } .footer a { display: block; padding: 6px 0; color: var(--text-dim); } .footer a:hover { color: var(--brand); } .footer-btm { margin-top: 40px; padding-top: 20px; border-top: 1px solid var(--line); display: flex; justify-content: space-between; gap: 20px; flex-wrap: wrap; color: var(--text-mute); font-size: 0.85rem; } /* Utilities */ .center { text-align: center; } .muted { color: var(--text-mute); } .mt-0 { margin-top: 0; } .btn-row { display: flex; flex-wrap: wrap; gap: 14px; } /* ======================================== NAVIGATION — transparent → frosted glass ======================================== */ .header-sticky { position: fixed; top: 0; left: 0; right: 0; width: 100%; z-index: 1000; background: transparent; } .header-sticky .promo-banner.is-visible { position: relative; z-index: 1; } .nav { position: relative; width: 100%; z-index: 2; padding: 16px 0; border-bottom: 1px solid transparent; transition: background .4s ease, backdrop-filter .4s ease, border-color .4s ease, padding .4s ease; } .nav.scrolled { background: rgba(13, 13, 13, 0.88); -webkit-backdrop-filter: saturate(180%) blur(16px); backdrop-filter: saturate(180%) blur(16px); border-bottom-color: rgba(255, 255, 255, 0.08); padding: 12px 0; } .nav-row { display: flex; align-items: center; justify-content: space-between; gap: 24px; width: min(1400px, 92%); margin: 0 auto; } .logo { display: flex; align-items: center; gap: 10px; font-weight: 900; letter-spacing: 0.02em; font-size: 1.05rem; text-decoration: none; color: #e5e5e5; flex-shrink: 0; } .logo-mark { width: 42px; height: 42px; display: grid; place-items: center; flex-shrink: 0; } .logo-mark img { width: 100%; height: 100%; object-fit: contain; filter: drop-shadow(0 4px 12px rgba(255, 107, 53, 0.25)); } .logo-name { font-weight: 900; font-size: 1.05rem; letter-spacing: 0.02em; color: #e5e5e5; } .nav-links { display: flex; gap: 4px; align-items: center; list-style: none; margin: 0; padding: 0; flex: 1; justify-content: flex-end; } .nav-links a { padding: 9px 11px; border-radius: 5px; font-size: 0.82rem; font-weight: 600; color: #e5e5e5; text-decoration: none; text-transform: uppercase; letter-spacing: 0.5px; transition: color .25s ease; white-space: nowrap; } .nav-links a:hover, .nav-links a.active { color: #ff6b35; } /* Wellness sub-brand: nav link uses the teal accent (#2dd4bf) of the wellness storefront so visitors see the wellness offering as a separate, branded service alongside the gym. */ .nav-links a[href="/wellness"], .nav-links a[href="/wellness/"], .nav-links a[href^="/wellness/"] { color: #2dd4bf; font-weight: 700; } .nav-links a[href="/wellness"]:hover, .nav-links a[href="/wellness/"]:hover, .nav-links a[href^="/wellness/"]:hover { color: #5eead4; } .nav-cta { display: inline-flex; align-items: center; gap: 6px; padding: 0.68rem 1.35rem; border-radius: 5px; background: #ff6b35; color: #fff !important; font-weight: 700; font-size: 0.85rem; text-transform: uppercase; letter-spacing: 0.5px; white-space: nowrap; text-decoration: none !important; flex-shrink: 0; transition: background .25s ease, transform .25s ease, box-shadow .25s ease; } .nav-cta:hover { background: #ff8c5a; transform: translateY(-2px); box-shadow: 0 4px 12px rgba(255, 107, 53, 0.3); } /* Mobile: tighten scroll-padding to match shorter nav */ @media (max-width: 768px) { html { scroll-padding-top: 64px; } } /* Tablet / phone: hamburger dropdown */ @media (max-width: 1024px) { .nav { padding: 12px 0; } .nav-links { display: none !important; } .nav-toggle { display: flex !important; } /* Keep CTA always visible in mobile header — compact size */ .nav-cta { display: inline-flex !important; padding: 8px 14px !important; font-size: 0.75rem !important; } .nav.open .nav-links { display: flex !important; flex-direction: column; gap: 4px; position: absolute; top: 100%; left: 0; right: 0; background: rgba(13, 13, 13, 0.96); -webkit-backdrop-filter: blur(18px); backdrop-filter: blur(18px); padding: 16px; border-bottom: 1px solid rgba(255, 255, 255, 0.08); box-shadow: 0 12px 24px rgba(0, 0, 0, 0.4); z-index: 10; justify-content: flex-start; } .nav.open .nav-links a { padding: 12px 14px; font-size: 0.9rem; border-radius: 6px; display: block; } .nav.open .nav-links a:hover { background: rgba(255, 107, 53, 0.1); } /* .nav.open .nav-cta — removed; CTA is always visible in header */ /* Fallback: pages whose JS toggles .active on ul.nav-links instead of .open on .nav */ .nav-links.active { display: flex !important; flex-direction: column; gap: 4px; position: absolute; top: 100%; left: 0; right: 0; background: rgba(13, 13, 13, 0.96); -webkit-backdrop-filter: blur(18px); backdrop-filter: blur(18px); padding: 16px; border-bottom: 1px solid rgba(255, 255, 255, 0.08); box-shadow: 0 12px 24px rgba(0, 0, 0, 0.4); z-index: 10; justify-content: flex-start; } .nav-links.active li a { padding: 12px 14px; font-size: 0.9rem; border-radius: 6px; display: block; } .nav-links.active li a:hover { background: rgba(255, 107, 53, 0.1); } } /* Small desktop / narrow laptop hardening (pre-tablet): keep comfortable spacing and avoid condensed typography/layout. */ @media (max-width: 1600px) and (min-width: 901px) { .section { padding: 5rem 3.5%; } .section-header { margin-bottom: 3rem; } .section-label { font-size: 1.2rem; letter-spacing: 2px; } .section-title { font-size: clamp(2rem, 4.4vw, 2.6rem); line-height: 1.14; } .section-subtitle { font-size: 1.06rem; max-width: 52rem; } .hero { min-height: 92vh; padding-top: 0; } .hero-content { max-width: 900px; padding: 0 1.5rem; } .hero-logo img { height: 190px; } .hero-subtitle { font-size: clamp(1.35rem, 2.8vw, 1.65rem); letter-spacing: 2px; } .hero-title { font-size: clamp(3rem, 6.4vw, 4.1rem); letter-spacing: -1px; margin-bottom: 1.4rem; } .hero-description { font-size: 1.03rem; max-width: 33rem; margin-bottom: 1.1rem; } .hero-buttons { gap: 0.9rem; } .btn { padding: 1rem 1.9rem; font-size: 0.94rem; letter-spacing: 0.75px; } .pricing-grid { grid-template-columns: repeat(auto-fit, minmax(270px, 1fr)); gap: 1.5rem; } .pricing-card { padding: 2.2rem 1.35rem; } .pricing-features { margin-bottom: 1.35rem; } .pricing-features li { padding: 0.62rem 0; font-size: 0.95rem; } .stats-grid { gap: 1.8rem; } .stat-item { padding: 1.4rem 0.7rem; } .stat-number { font-size: 3.15rem; } .contact-grid { grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 1.8rem; } .contact-card { padding: 2.1rem 1.45rem; } .contact-card h3 { font-size: 1.55rem; margin-bottom: 1.2rem; } .map-container { height: 400px; } .testimonial-slider { max-width: 820px; padding: 0 3rem; } .testimonial-text { font-size: 1.15rem; line-height: 1.65; } .access-highlight { padding: 2.5rem 3.5%; } } .nav-toggle { display: none; min-width: 44px; min-height: 44px; width: 44px; height: 44px; border-radius: 8px; background: rgba(255, 255, 255, 0.06); border: none; cursor: pointer; flex-direction: column; align-items: center; justify-content: center; gap: 5px; touch-action: manipulation; flex-shrink: 0; } .nav-toggle span { display: block; width: 18px; height: 2px; background: #e5e5e5; border-radius: 2px; transition: transform .3s ease, opacity .3s ease; pointer-events: none; } /* Hide hamburger on desktop; show logo name */ @media (min-width: 1025px) { .nav-toggle { display: none !important; } .logo-name { display: inline; } } @media (max-width: 1024px) { .logo-name { display: none; } } /* ======================================== FEATURE CARDS (glass card grid) ======================================== */ .feature-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px; margin-top: 40px; } @media (max-width: 960px) { .feature-grid { grid-template-columns: repeat(2, 1fr); } } @media (max-width: 600px) { .feature-grid { grid-template-columns: 1fr; } } .feature-card { position: relative; padding: 28px 26px; border-radius: 18px; background: linear-gradient(180deg, rgba(255, 255, 255, 0.045), rgba(255, 255, 255, 0.015)); border: 1px solid rgba(255, 255, 255, 0.08); transition: border-color .4s ease, box-shadow .4s ease, transform .3s ease; overflow: hidden; } .feature-card::before { content: ""; position: absolute; inset: 0; border-radius: inherit; background: linear-gradient(180deg, rgba(255, 255, 255, 0.07), transparent 30%); pointer-events: none; } .feature-card:hover { border-color: rgba(255, 107, 53, 0.4); box-shadow: 0 20px 50px rgba(0, 0, 0, 0.5), 0 0 0 1px rgba(255, 107, 53, 0.15); transform: translateY(-3px); } .feature-card h3 { font-size: 1.1rem; font-weight: 700; color: #e9e9ee; margin: 0 0 0.5rem; letter-spacing: -0.01em; } .feature-card p { font-size: 0.88rem; color: #a4a4ad; margin: 0; line-height: 1.6; } .feature-icon { width: 50px; height: 50px; border-radius: 12px; display: grid; place-items: center; background: rgba(255, 107, 53, 0.12); color: #ff6b35; margin-bottom: 18px; flex-shrink: 0; } .feature-icon svg { width: 24px; height: 24px; } /* ======================================== PRICE CARDS (homepage teaser + membership page) ======================================== */ .price-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 1.5rem; margin-top: 2rem; align-items: start; } .price-card { position: relative; padding: 2rem; border-radius: var(--radius); background: linear-gradient(180deg, rgba(255,255,255,0.045), rgba(255,255,255,0.015)); border: 1px solid var(--line); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); box-shadow: var(--shadow-soft); transition: transform .4s var(--ease), box-shadow .4s var(--ease), border-color .4s var(--ease); overflow: hidden; } .price-card::before { content: ""; position: absolute; inset: 0; border-radius: inherit; background: linear-gradient(180deg, rgba(255,255,255,0.08), transparent 30%); pointer-events: none; } .price-card:hover { border-color: rgba(255,107,53,0.35); box-shadow: 0 20px 56px rgba(0,0,0,0.55), 0 0 0 1px rgba(255,107,53,0.18); } .price-card.featured { border-color: rgba(255,107,53,0.42); background: linear-gradient(180deg, rgba(255,107,53,0.10), rgba(255,255,255,0.015)); box-shadow: 0 20px 56px rgba(255,107,53,0.18); } .price-ribbon { position: absolute; top: 16px; right: 16px; font-size: 0.68rem; font-weight: 800; letter-spacing: 0.14em; text-transform: uppercase; padding: 5px 11px; border-radius: 999px; background: var(--brand); color: #fff; } .price-eyebrow { font-size: 0.7rem; font-weight: 700; letter-spacing: 0.17em; text-transform: uppercase; color: var(--brand); margin-bottom: 0.4rem; } .price-tag { display: flex; align-items: baseline; gap: 4px; font-weight: 900; font-size: clamp(2.25rem, 4vw, 3rem); line-height: 1; margin: 0.5rem 0 0.25rem; } .price-tag .per { font-size: 0.88rem; font-weight: 600; color: var(--text-mute); } .price-tagline { font-size: 0.88rem; color: var(--text-dim); margin-bottom: 1.25rem; line-height: 1.45; } .price-features { list-style: none; padding: 0; margin: 0 0 1.5rem; } .price-features li { padding: 7px 0; color: var(--text-dim); display: flex; gap: 10px; align-items: flex-start; font-size: 0.88rem; line-height: 1.4; border-bottom: 1px solid var(--line); } .price-features li:last-child { border-bottom: none; } .price-features li::before { content: "✓"; color: var(--brand); font-weight: 900; flex-shrink: 0; margin-top: 1px; } .price-cta { display: block; width: 100%; padding: 0.85rem 1.5rem; border-radius: 8px; font-weight: 700; font-size: 0.88rem; text-align: center; text-decoration: none; transition: background .2s var(--ease), transform .2s var(--ease), box-shadow .2s var(--ease); cursor: pointer; } .price-cta-primary { background: var(--brand); color: #fff; box-shadow: 0 4px 14px var(--brand-glow); } .price-cta-primary:hover { background: var(--brand-2); transform: translateY(-2px); box-shadow: 0 8px 24px rgba(255,107,53,0.45); } .price-cta-ghost { background: transparent; color: var(--text); border: 1px solid var(--line); } .price-cta-ghost:hover { border-color: rgba(255,107,53,0.45); color: var(--brand); transform: translateY(-2px); } /* ======================================== HERO SECTION — cinematic single image ======================================== */ .hero { position: relative; min-height: 92vh; padding: 140px 0 80px; display: flex; align-items: center; overflow: hidden; isolation: isolate; scroll-margin-top: 0; } /* Dark gradient overlay — image comes from .slideshow-container below */ .hero::before { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(180deg, rgba(10,10,12,0.52) 0%, rgba(10,10,12,0.72) 55%, rgba(10,10,12,0.92) 100%); pointer-events: none; } /* Slideshow background — Cloudinary images injected by media-loader.js */ .slideshow-container { position: absolute; inset: 0; z-index: -2; overflow: hidden; background: url('https://images.unsplash.com/photo-1534438327276-14e5300c3a48?w=1920&q=80') center/cover no-repeat; transform: scale(1.05); animation: hero-zoom 20s ease-in-out infinite alternate; } .slideshow-container .slide { position: absolute; inset: 0; background-size: cover; background-position: center; opacity: 0; transition: opacity 2s ease; } .slideshow-container .slide.active { opacity: 1; } .slideshow-container .video-slide { opacity: 0; transition: opacity 2s ease; } .slideshow-container .video-slide.active { opacity: 1; } .slideshow-container .slide-video { width: 100%; height: 100%; object-fit: cover; filter: grayscale(30%) brightness(0.8); } @keyframes hero-zoom { from { transform: scale(1.05) translate(0, 0); } to { transform: scale(1.12) translate(-1%, -1%); } } /* Brand color glow over the photo */ .hero::after { content: ""; position: absolute; inset: 0; z-index: -1; background: radial-gradient(700px 400px at 15% 40%, rgba(255,107,53,0.20), transparent 60%), radial-gradient(500px 350px at 90% 85%, rgba(255,140,90,0.13), transparent 60%); pointer-events: none; } /* Centered content column */ .hero-inner { max-width: 760px; width: 100%; position: relative; z-index: 1; margin: 0 auto; text-align: center; } /* Large logo above hero heading */ .hero-logo { margin-bottom: 16px; } .hero-logo img { height: 220px; width: auto; display: block; margin: 0 auto; } /* Trust chips row */ .hero-chips { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 28px; justify-content: center; } .hero-chip { display: inline-flex; align-items: center; gap: 8px; padding: 8px 14px; border-radius: 999px; background: rgba(20,20,24,0.65); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); border: 1px solid var(--line); font-size: 0.85rem; font-weight: 600; color: var(--text); } .hero-chip .dot { width: 8px; height: 8px; border-radius: 50%; background: var(--brand); box-shadow: 0 0 8px var(--brand); flex-shrink: 0; } /* Scroll hint */ .scroll-hint { position: absolute; bottom: 28px; left: 50%; transform: translateX(-50%); color: var(--text-mute); font-size: 0.72rem; letter-spacing: 0.2em; text-transform: uppercase; text-align: center; } .scroll-hint::before { content: ""; display: block; width: 1px; height: 36px; background: linear-gradient(to bottom, transparent, var(--brand)); margin: 0 auto 8px; } /* Hero title accent */ .hero-title .accent { background: linear-gradient(135deg, var(--brand), var(--brand-2)); -webkit-background-clip: text; background-clip: text; color: transparent; } @media (max-width: 768px) { .hero { padding: 100px 0 60px; min-height: 100svh; } .hero-chips { gap: 8px; } .hero-chip { font-size: 0.78rem; padding: 7px 12px; } } @media (prefers-reduced-motion: reduce) { .hero::before { animation: none; } } /* Hero title — responsive, natural case, tight tracking */ .hero-title { font-size: clamp(2.5rem, 6vw, 5rem); font-weight: 900; line-height: 1.05; letter-spacing: -0.02em; margin-bottom: 0; } .hero-inline-link { color: #ffb899; text-decoration: underline; text-underline-offset: 2px; } .hero-inline-link:hover { color: #ffd4c4; } .hero-buttons { display: flex; gap: 12px; flex-wrap: wrap; } .btn { display: inline-flex; align-items: center; gap: 8px; padding: 14px 26px; border-radius: 5px; text-decoration: none; font-weight: 700; font-size: 0.9rem; text-transform: uppercase; letter-spacing: 0.5px; transition: transform .25s var(--ease), box-shadow .25s var(--ease), background .25s var(--ease); cursor: pointer; border: none; } .btn-primary { background: var(--brand); color: #fff; box-shadow: 0 6px 18px rgba(255,107,53,0.25); } .btn-primary:hover { background: var(--brand-2); transform: translateY(-2px); box-shadow: 0 10px 28px rgba(255,107,53,0.35); } .btn-secondary { background: transparent; color: var(--text); border: 1px solid var(--line); } /* Gradient "Call us" CTA — used next to a solid .btn-primary in community-discount and free-day-pass bands. Reads as a tappable button at a glance (gradient wash + warm border) without competing with the primary action for visual weight. Same hover lift/shadow rhythm as .btn-primary so the pair feels intentional. */ .btn-call { color: #fff; background: linear-gradient(135deg, rgba(255, 107, 53, 0.22), rgba(255, 140, 90, 0.06)); border: 1px solid rgba(255, 107, 53, 0.45); box-shadow: 0 4px 16px rgba(255, 107, 53, 0.15), inset 0 1px 0 rgba(255, 255, 255, 0.06); transition: transform .25s var(--ease), box-shadow .25s var(--ease), background .25s var(--ease), border-color .25s var(--ease); } .btn-call:hover { background: linear-gradient(135deg, rgba(255, 107, 53, 0.34), rgba(255, 140, 90, 0.14)); border-color: rgba(255, 107, 53, 0.7); box-shadow: 0 8px 26px rgba(255, 107, 53, 0.25), inset 0 1px 0 rgba(255, 255, 255, 0.1); transform: translateY(-2px); } .btn-secondary:hover { background: rgba(255,107,53,0.08); border-color: var(--brand); color: var(--brand); transform: translateY(-2px); } /* Outline button — orange border + text, transparent bg */ .btn-outline { display: inline-flex; align-items: center; gap: 8px; padding: 14px 26px; border-radius: 5px; text-decoration: none; font-weight: 700; font-size: 0.9rem; text-transform: uppercase; letter-spacing: 0.5px; background: transparent; color: var(--brand); border: 2px solid var(--brand); transition: background .25s var(--ease), color .25s var(--ease), transform .25s var(--ease), box-shadow .25s var(--ease); cursor: pointer; } .btn-outline:hover { background: var(--brand); color: #fff; transform: translateY(-2px); box-shadow: 0 8px 22px rgba(255,107,53,0.3); } /* ======================================== SECTION STYLES ======================================== */ .section { padding: 6rem 5%; position: relative; /* Offset for fixed header when landing on an anchor link */ scroll-margin-top: 80px; } .section-alt { background: rgba(255,255,255,0.015); border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); } .section-header { text-align: center; margin-bottom: 4rem; } .section-label { font-size: 1.5rem; font-weight: 700; color: #ff6b35; text-transform: uppercase; letter-spacing: 3px; margin-bottom: 1rem; } .section-title { font-size: 3rem; font-weight: 900; margin-bottom: 1rem; text-transform: uppercase; letter-spacing: -1px; } .section-subtitle { font-size: 1.2rem; color: #a0a0a0; max-width: 700px; margin: 0 auto; } .container { max-width: 1400px; width: 100%; margin: 0 auto; } /* ======================================== 24/7 ACCESS HIGHLIGHT ======================================== */ .access-highlight { padding: 3rem 5%; position: relative; overflow: hidden; background: rgba(13, 13, 13, 0.95); margin-top: 2rem; transition: all 0.3s ease; cursor: pointer; } .access-highlight:hover { background: rgba(255, 107, 53, 0.1); transform: translateY(-5px); box-shadow: 0 10px 30px rgba(255, 107, 53, 0.2); } .access-banner { display: flex; align-items: center; justify-content: center; gap: 2rem; position: relative; z-index: 10; text-align: center; max-width: 800px; margin: 0 auto; padding: 2rem; } .access-icon { font-size: 3.5rem; line-height: 1; animation: pulse 2s infinite; transition: all 0.3s ease; } .access-highlight:hover .access-icon { transform: scale(1.1) rotate(5deg); animation: none; color: #ff6b35; } .access-content h3 { font-size: 2.2rem; font-weight: 900; color: #ff6b35; text-transform: uppercase; letter-spacing: 2px; margin-bottom: 1rem; line-height: 1.1; transition: all 0.3s ease; } .access-content p { font-size: 1.2rem; color: #e5e5e5; line-height: 1.6; max-width: 600px; margin: 0 auto; transition: all 0.3s ease; } .access-highlight:hover .access-content h3 { color: #ff8c5a; transform: translateY(-2px); } .access-highlight:hover .access-content p { color: #ffffff; transform: translateY(-1px); } @keyframes pulse { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.05); } } /* ======================================== WELCOME / WHY CHOOSE SECTION ======================================== */ .welcome-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); gap: 2.5rem; margin-top: 3rem; } .welcome-card { text-align: center; padding: 2rem; } .welcome-card h3 { font-size: 1.5rem; font-weight: 800; color: #ff6b35; margin-bottom: 1.5rem; text-transform: uppercase; } .welcome-card p { font-size: 1.05rem; line-height: 1.8; color: #d1d1d1; } /* ======================================== STATS SECTION ======================================== */ .stats-section { background: linear-gradient(135deg, rgba(255, 107, 53, 0.1) 0%, rgba(13, 13, 13, 0.95) 100%); border-top: 1px solid #333333; border-bottom: 1px solid #333333; } .stats-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 3rem; text-align: center; } .stat-item { padding: 2rem 1rem; } .stat-number { font-size: 4rem; font-weight: 900; color: #ff6b35; line-height: 1; margin-bottom: 0.5rem; } .stat-label { font-size: 1rem; font-weight: 600; color: #a0a0a0; text-transform: uppercase; letter-spacing: 1px; } /* ======================================== MEMBER TESTIMONIALS ======================================== */ .testimonials-section { background: #0d0d0d; } .testimonial-slider { position: relative; max-width: 900px; margin: 3rem auto 0; padding: 0 4rem; } .testimonial-track { overflow: hidden; } .testimonial-item { display: none; text-align: center; padding: 3rem 2rem; } .testimonial-item.active { display: block; animation: fadeIn 0.5s; } @keyframes fadeIn { from { opacity: 0; transform: translateY(20px); } to { opacity: 1; transform: translateY(0); } } .testimonial-text { font-size: 1.3rem; line-height: 1.8; margin-bottom: 2rem; color: #e5e5e5; font-style: italic; } .testimonial-author { display: flex; align-items: center; justify-content: center; gap: 1rem; } .author-image { width: 60px; height: 60px; border-radius: 50%; background: #1a1a1a; border: 3px solid #ff6b35; background-size: cover; background-position: center; } .author-info h4 { font-weight: 700; font-size: 1.1rem; margin-bottom: 0.25rem; } .author-info p { color: #a0a0a0; font-size: 0.9rem; } .testimonial-rating { color: #ff6b35; font-size: 1.5rem; margin-bottom: 1rem; } .slider-nav { position: absolute; top: 50%; transform: translateY(-50%); background: rgba(255, 107, 53, 0.2); border: 2px solid #ff6b35; color: #ff6b35; width: 50px; height: 50px; border-radius: 50%; display: flex; align-items: center; justify-content: center; cursor: pointer; font-size: 1.5rem; transition: all 0.3s; } .slider-nav:hover { background: #ff6b35; color: white; } .slider-prev { left: 0; } .slider-next { right: 0; } .slider-dots { display: flex; justify-content: center; gap: 1rem; margin-top: 2rem; } .dot { width: 12px; height: 12px; border-radius: 50%; background: #333333; cursor: pointer; transition: all 0.3s; } .dot.active { background: #ff6b35; transform: scale(1.2); } /* ======================================== PRICING SECTION ======================================== */ .pricing-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 2.5rem; margin-top: 3rem; } .pricing-card { background: #1a1a1a; border: 2px solid #333333; border-radius: 10px; padding: 3rem 2rem; text-align: center; transition: all 0.3s; position: relative; } .pricing-card:hover { transform: translateY(-10px); border-color: #ff6b35; box-shadow: 0 20px 40px rgba(255, 107, 53, 0.2); } .pricing-badge { position: absolute; top: -15px; left: 50%; transform: translateX(-50%); background: #ff6b35; color: white; padding: 0.5rem 1.5rem; border-radius: 20px; font-weight: 700; font-size: 0.85rem; text-transform: uppercase; } .pricing-card h3 { font-size: 1.8rem; font-weight: 800; margin-bottom: 1rem; color: #ff6b35; text-transform: uppercase; } .pricing-price { font-size: 3rem; font-weight: 900; margin-bottom: 0.5rem; } .pricing-period { color: #a0a0a0; margin-bottom: 0.75rem; } /* Value framing: per-day + annual savings (homepage Helcim cards) */ .pricing-savings-anchor { position: relative; overflow: hidden; text-align: center; background: linear-gradient(155deg, rgba(255, 107, 53, 0.35) 0%, rgba(255, 140, 90, 0.12) 45%, rgba(20, 20, 24, 0.85) 100%); border: 2px solid rgba(255, 107, 53, 0.95); border-radius: 14px; padding: 1.15rem 1.15rem 1.05rem; margin: 0.65rem 0 1.15rem; line-height: 1.35; box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.06) inset, 0 12px 32px rgba(255, 107, 53, 0.22), 0 4px 14px rgba(0, 0, 0, 0.35); } .pricing-savings-anchor::before { content: ""; position: absolute; inset: 0; background: linear-gradient(120deg, transparent 0%, rgba(255, 255, 255, 0.07) 50%, transparent 100%); pointer-events: none; } .pricing-savings-anchor > span { position: relative; z-index: 1; } /* Monthly card: strong daily-value read */ .pricing-savings-anchor--monthly .pricing-savings-amount { font-size: clamp(1.35rem, 4.2vw, 1.85rem); } .pricing-savings-anchor--monthly .pricing-savings-rest { font-size: clamp(0.95rem, 2.8vw, 1.05rem); margin-top: 0.35rem; } /* Annual card: hero savings + sub-line (more prominent “deal”) */ .pricing-savings-anchor--annual { border-width: 3px; padding: 1.25rem 1.2rem 1.15rem; margin-top: 0.5rem; margin-bottom: 1.25rem; box-shadow: 0 0 0 1px rgba(255, 214, 120, 0.35) inset, 0 0 28px rgba(255, 107, 53, 0.35), 0 14px 36px rgba(0, 0, 0, 0.4); } .pricing-savings-anchor--annual .pricing-savings-hero { display: block; font-size: clamp(1.5rem, 4.8vw, 2.05rem); font-weight: 900; color: #ffffff; letter-spacing: -0.03em; line-height: 1.15; text-shadow: 0 2px 14px rgba(255, 107, 53, 0.45); } .pricing-savings-anchor--annual .pricing-savings-subhero { display: block; font-size: clamp(1.05rem, 3.2vw, 1.28rem); font-weight: 800; color: #fff4e8; margin-top: 0.45rem; letter-spacing: -0.02em; } .pricing-savings-anchor--annual .pricing-savings-rest { font-size: clamp(0.9rem, 2.6vw, 1rem); font-weight: 600; color: #ffd6c4; margin-top: 0.5rem; max-width: 22rem; margin-left: auto; margin-right: auto; line-height: 1.45; } .pricing-savings-amount { display: block; font-size: 1.45rem; font-weight: 900; color: #ffffff; letter-spacing: -0.02em; } .pricing-savings-rest { display: block; font-size: 0.95rem; font-weight: 700; color: #ffc5b1; margin-top: 0.2rem; } @media (max-width: 400px) { .pricing-savings-anchor--monthly .pricing-savings-amount, .pricing-savings-amount { font-size: 1.28rem; } .pricing-savings-anchor--annual .pricing-savings-hero { font-size: 1.42rem; } } .pricing-features { list-style: none; margin-bottom: 2rem; text-align: left; } .pricing-features li { padding: 0.75rem 0; border-bottom: 1px solid #333333; display: flex; align-items: center; gap: 0.75rem; } .pricing-features li:last-child { border-bottom: none; } .pricing-features li::before { content: "✓"; color: #ff6b35; font-weight: bold; font-size: 1.2rem; } /* ======================================== CONTACT / LOCATION SECTION ======================================== */ .contact-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(350px, 1fr)); gap: 3rem; margin-top: 3rem; } .contact-card { background: #1a1a1a; padding: 3rem; border-radius: 10px; border: 1px solid #333333; } .contact-card h3 { font-size: 2rem; font-weight: 800; color: #ff6b35; margin-bottom: 2rem; text-transform: uppercase; } .contact-item { display: flex; align-items: flex-start; gap: 1.5rem; margin-bottom: 2rem; padding-bottom: 2rem; border-bottom: 1px solid #333333; } .contact-item:last-child { border-bottom: none; margin-bottom: 0; padding-bottom: 0; } .contact-icon { font-size: 2rem; color: #ff6b35; min-width: 40px; } .contact-info strong { display: block; font-weight: 700; margin-bottom: 0.5rem; font-size: 1.1rem; } .map-container { width: 100%; height: 500px; background: #0d0d0d; border-radius: 12px; margin-top: 2rem; overflow: hidden; box-shadow: 0 4px 20px rgba(0, 0, 0, 0.3); border: 1px solid rgba(255, 107, 53, 0.2); } .map-iframe { width: 100%; height: 100%; border: 0; border-radius: 12px; } /* ======================================== GYMMASTERS SECTION ======================================== */ .gymmasters-container { background: #1a1a1a; border: 1px solid #333333; border-radius: 10px; padding: 3rem; margin-top: 3rem; } .gymmasters-embed { background: #0d0d0d; border-radius: 8px; padding: 3rem; min-height: 500px; border: 2px dashed rgba(255, 107, 53, 0.3); display: flex; align-items: center; justify-content: center; text-align: center; } .embed-placeholder h3 { color: #ff6b35; font-size: 2rem; margin-bottom: 1rem; font-weight: 800; } /* ======================================== MODAL / POPUP ======================================== */ .modal { display: none; position: fixed; top: 0; left: 0; width: 100%; height: 100%; background: rgba(0, 0, 0, 0.9); z-index: 2000; align-items: center; justify-content: center; padding: 2rem; } .modal.active { display: flex; } .modal-content { background: #1a1a1a; border: 2px solid #333333; border-radius: 15px; max-width: 600px; width: 100%; max-height: 90vh; overflow-y: auto; position: relative; padding: 3rem; } .modal-close { position: absolute; top: 1rem; right: 1rem; background: none; border: none; color: #e5e5e5; font-size: 2rem; cursor: pointer; width: 40px; height: 40px; display: flex; align-items: center; justify-content: center; border-radius: 50%; transition: all 0.3s; } .modal-close:hover { background: #ff6b35; color: white; } .modal-header { text-align: center; margin-bottom: 2rem; } .modal-header h2 { font-size: 2rem; font-weight: 900; color: #ff6b35; margin-bottom: 1rem; text-transform: uppercase; } .modal-header p { color: #a0a0a0; } .form-group { margin-bottom: 1.5rem; } .form-group label { display: block; margin-bottom: 0.5rem; font-weight: 600; color: #e5e5e5; } .form-group input, .form-group textarea { width: 100%; padding: 1rem; background: #0d0d0d; border: 1px solid #333333; border-radius: 5px; color: #e5e5e5; font-family: inherit; font-size: 1rem; } .form-group input:focus, .form-group textarea:focus { outline: none; border-color: #ff6b35; } .form-group textarea { resize: vertical; min-height: 120px; } /* ======================================== CHAT WIDGET ======================================== */ .chat-widget { position: fixed; bottom: 30px; right: 30px; z-index: 999; } .chat-button { width: 65px; height: 65px; border-radius: 50%; background: #ff6b35; border: none; color: white; font-size: 2rem; cursor: pointer; box-shadow: 0 5px 25px rgba(255, 107, 53, 0.5); transition: all 0.3s; display: flex; align-items: center; justify-content: center; } .chat-button:hover { transform: scale(1.1); background: #ff8c5a; } .chat-window { display: none; position: fixed; bottom: 110px; right: 30px; width: 380px; height: 550px; background: #1a1a1a; border-radius: 15px; box-shadow: 0 10px 50px rgba(0, 0, 0, 0.7); border: 1px solid #333333; overflow: hidden; } .chat-window.active { display: flex; flex-direction: column; } .chat-header { background: #ff6b35; padding: 1.5rem; display: flex; justify-content: space-between; align-items: center; } .chat-header h4 { color: white; font-weight: 700; font-size: 1.1rem; } .chat-controls { display: flex; gap: 0.5rem; } .chat-clear, .chat-close { background: none; border: none; color: white; font-size: 1.2rem; cursor: pointer; padding: 0.25rem; border-radius: 3px; transition: background-color 0.2s; } .chat-clear:hover, .chat-close:hover { background: rgba(255, 255, 255, 0.2); } .chat-messages { flex: 1; padding: 1rem; overflow-y: auto; max-height: 400px; display: flex; flex-direction: column; gap: 1rem; } .message { display: flex; margin-bottom: 0.5rem; } .message-content { max-width: 80%; padding: 0.75rem 1rem; border-radius: 15px; word-wrap: break-word; line-height: 1.4; } .bot-message { justify-content: flex-start; } .bot-message .message-content { background: #1a1a1a; color: #d1d1d1; border: 1px solid #333333; } .user-message { justify-content: flex-end; } .user-message .message-content { background: #ff6b35; color: white; } .typing-indicator { padding: 0.5rem 1rem; display: flex; align-items: center; gap: 0.5rem; } .typing-indicator p { color: #a0a0a0; font-size: 0.9rem; margin: 0; } .typing-dots { display: flex; gap: 4px; } .typing-dots span { width: 6px; height: 6px; border-radius: 50%; background: #ff6b35; animation: typing 1.4s infinite; } .typing-dots span:nth-child(2) { animation-delay: 0.2s; } .typing-dots span:nth-child(3) { animation-delay: 0.4s; } @keyframes typing { 0%, 60%, 100% { transform: translateY(0); opacity: 0.4; } 30% { transform: translateY(-10px); opacity: 1; } } .chat-input-area { border-top: 1px solid #333333; padding: 1rem; background: #1a1a1a; } .chat-input-container { display: flex; gap: 0.5rem; align-items: center; } .chat-input-container input { flex: 1; padding: 0.75rem 1rem; background: #0d0d0d; border: 1px solid #333333; border-radius: 20px; color: #e5e5e5; font-family: inherit; font-size: 0.9rem; outline: none; } .chat-input-container input:focus { border-color: #ff6b35; } .send-button { padding: 0.75rem 1.5rem; background: #ff6b35; color: white; border: none; border-radius: 20px; cursor: pointer; font-weight: 600; transition: all 0.3s; } .send-button:hover { background: #ff8c5a; transform: translateY(-1px); } .send-button:disabled { background: #666; cursor: not-allowed; transform: none; } /* ======================================== FOOTER ======================================== */ footer { background: #0d0d0d; border-top: 1px solid #333333; padding: 4rem 5% 2rem; } .footer-content { max-width: 1400px; margin: 0 auto; display: grid; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); gap: 3rem; margin-bottom: 3rem; } .footer-section h4 { color: #ff6b35; font-weight: 800; font-size: 1.2rem; margin-bottom: 1.5rem; text-transform: uppercase; } .footer-section p, .footer-section a { color: #a0a0a0; text-decoration: none; display: block; margin-bottom: 0.75rem; transition: color 0.3s; } .footer-section a:hover { color: #ff6b35; } .footer-bottom { text-align: center; padding-top: 2rem; border-top: 1px solid #333333; color: #a0a0a0; font-size: 0.9rem; } /* ======================================== RESPONSIVE DESIGN ======================================== */ @media (max-width: 968px) { .hero-title { font-size: 3rem; } .hero-logo img { height: 180px; } .hero-subtitle { font-size: 1.5rem; } .section-title { font-size: 2.2rem; } .testimonial-slider { padding: 0 3rem; } .slider-nav { width: 40px; height: 40px; font-size: 1.2rem; } .chat-window { width: calc(100% - 40px); right: 20px; } } @media (max-width: 600px) { html, body { max-width: 100%; /* clip instead of hidden: avoids creating a scroll container on body, which is a known cause of "page won't scroll" on Android Chrome */ overflow-x: clip; } /* Prevent iOS Safari zoom on focus and improve touch accessibility */ input, select, textarea, button { font-size: 16px; min-height: 44px; } a, button, .btn, .nav-cta, .nav-toggle { min-height: 44px; touch-action: manipulation; } .chat-widget { right: max(16px, env(safe-area-inset-right)); bottom: max(16px, env(safe-area-inset-bottom)); } .chat-window { right: max(10px, env(safe-area-inset-right)); left: max(10px, env(safe-area-inset-left)); width: auto; max-width: none; height: min(70vh, 560px); bottom: calc(max(16px, env(safe-area-inset-bottom)) + 72px); } .hero-logo img { height: 150px; } .hero-title { font-size: 2.2rem; } .hero-description { font-size: 1.02rem; line-height: 1.5; margin-bottom: 1.1rem; } .hero-seo-copy { margin-top: 1.35rem; padding: 0.9rem 1rem; font-size: 0.92rem; } .section-label { font-size: 1.2rem; letter-spacing: 2px; } .section { padding: 4rem 5%; } .section-title { font-size: 1.8rem; } .stat-number { font-size: 2.5rem; } .testimonial-text { font-size: 1.1rem; } .testimonial-slider { padding: 0 2.5rem; } .access-highlight { padding: 2rem 5%; } .access-banner { flex-direction: column; gap: 1.5rem; padding: 1.5rem; } .access-icon { font-size: 2.5rem; } .access-content h3 { font-size: 1.5rem; letter-spacing: 1px; } .access-content p { font-size: 1rem; } .pricing-grid, .contact-grid { grid-template-columns: 1fr; } .modal-content { padding: 2rem; } } /* ======================================== PROMO BANNER (shared: homepage + guide pages) Mirror of the inline block in index.html so SEO blog/guide pages render the same redesigned banner. Layout: [icon] [LABEL · message] [details] [CTA pill]; teaser flows below as a centered second row. ======================================== */ .promo-banner { background: linear-gradient(135deg, #d8521b 0%, #ff6b35 45%, #ff8c5a 100%); color: #fff; font-size: 0.92rem; font-weight: 600; letter-spacing: 0.005em; box-shadow: inset 0 -1px 0 rgba(0,0,0,0.18), 0 2px 10px rgba(0,0,0,0.18); display: none !important; align-items: center; justify-content: center; gap: 0.55rem 0.75rem; flex-wrap: wrap; max-height: 0; overflow: hidden; padding: 0 1.25rem; opacity: 0; transition: max-height 0.35s ease, padding 0.35s ease, opacity 0.35s ease; } .promo-banner.is-visible { display: flex !important; max-height: 96px; padding: 0.6rem 1.25rem; opacity: 1; } .promo-icon { font-size: 1.15rem; line-height: 1; filter: drop-shadow(0 1px 1px rgba(0,0,0,0.25)); flex-shrink: 0; } .promo-text { display: inline-flex; align-items: baseline; gap: 0.4rem; } .promo-text strong { font-weight: 800; text-transform: uppercase; letter-spacing: 0.04em; font-size: 0.8rem; background: rgba(255,255,255,0.18); border: 1px solid rgba(255,255,255,0.35); padding: 0.12rem 0.5rem; border-radius: 999px; white-space: nowrap; } .promo-details { font-size: 0.85rem; font-weight: 500; opacity: 0.92; position: relative; padding-left: 0.85rem; } .promo-details::before { content: ''; position: absolute; left: 0; top: 50%; transform: translateY(-50%); width: 4px; height: 4px; border-radius: 50%; background: rgba(255,255,255,0.7); } .promo-checkout-teaser { font-size: 0.78rem; font-weight: 500; opacity: 0.85; line-height: 1.35; flex: 1 1 100%; text-align: center; margin-top: 0.05rem; } .promo-cta { display: inline-flex; align-items: center; gap: 0.35rem; margin-left: 0.25rem; padding: 0.32rem 0.85rem; background: #fff; color: #c0431a; font-weight: 700; font-size: 0.82rem; letter-spacing: 0.02em; border-radius: 999px; text-decoration: none; box-shadow: 0 1px 2px rgba(0,0,0,0.12); transition: transform 0.15s ease, box-shadow 0.15s ease, background 0.15s ease; white-space: nowrap; flex-shrink: 0; } .promo-cta:hover, .promo-cta:focus-visible { transform: translateY(-1px); box-shadow: 0 4px 10px rgba(0,0,0,0.18); background: #fff7f2; color: #a4391a; } .promo-cta:focus-visible { outline: 2px solid #fff; outline-offset: 2px; } .promo-cta__arrow { transition: transform 0.15s ease; } .promo-cta:hover .promo-cta__arrow { transform: translateX(2px); } @media (max-width: 768px) { .promo-banner { font-size: 0.85rem; gap: 0.35rem 0.5rem; text-align: center; } .promo-banner.is-visible { padding: 0.55rem 0.85rem; max-height: 140px; } .promo-text { flex: 1 1 100%; justify-content: center; flex-wrap: wrap; } .promo-text strong { font-size: 0.72rem; white-space: normal; } .promo-details { font-size: 0.78rem; flex: 1 1 100%; padding-left: 0; } .promo-details::before { display: none; } .promo-checkout-teaser { font-size: 0.72rem; } .promo-cta { margin-left: 0; margin-top: 0.15rem; padding: 0.28rem 0.75rem; font-size: 0.78rem; } } /* ======================================== Legacy standalone pages (why-legacy + family guides): shell & content Aligns with why-legacy-health-and-fitness.html ======================================== */ body.page-why-legacy, body.page-legacy-guide { font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif; background: #0d0d0d; color: #e5e5e5; } body.page-why-legacy .nav, body.page-legacy-guide .nav { /* SEO blog pages use a fixed standalone nav (no .header-sticky wrapper) */ position: fixed; top: 0; left: 0; right: 0; z-index: 1000; } body.page-why-legacy .logo, body.page-legacy-guide .logo { flex-shrink: 0; min-width: max-content; } body.page-why-legacy .logo-mark img, body.page-legacy-guide .logo-mark img { height: 44px; width: auto; display: block; opacity: 1; visibility: visible; object-fit: contain; } @media (max-width: 1220px) { body.page-why-legacy .logo-name, body.page-legacy-guide .logo-name { display: none; } } .legacy-guide-wrap, .why-wrap { max-width: 920px; margin: 0 auto 4rem; padding: 1.5rem 1rem 0; } /* With fixed global navbar, ensure content doesn't sit under it */ body.page-why-legacy .why-wrap, body.page-legacy-guide .legacy-guide-wrap, body.blog-post-page.page-legacy-guide .blog-wrap { padding-top: calc(100px + 1.5rem); } /* Mobile nav/header stack is taller; keep guide/article headings visible below it */ @media (max-width: 768px) { body.page-why-legacy .why-wrap, body.page-legacy-guide .legacy-guide-wrap, body.blog-post-page.page-legacy-guide .blog-wrap { padding-top: calc(132px + 1rem); } } .legacy-guide-hero { text-align: center; margin-bottom: 1.75rem; } .legacy-guide-hero h1 { color: #ff6b35; font-size: clamp(1.8rem, 4vw, 2.4rem); margin-bottom: 0.65rem; line-height: 1.2; font-weight: 800; } .legacy-guide-hero .meta { color: #888; font-size: 0.875rem; margin-bottom: 0.75rem; } .legacy-guide-hero .section-label { color: #ff6b35; font-size: 0.75rem; font-weight: 800; letter-spacing: 0.08em; text-transform: uppercase; margin-bottom: 0.35rem; } .legacy-guide-hero .section-subtitle { color: #d5d5d5; max-width: 760px; margin: 0 auto; line-height: 1.65; font-size: 1rem; } .legacy-guide-card { background: #171717; border: 1px solid #2f2f2f; border-radius: 12px; padding: 1.2rem 1.25rem; margin-bottom: 1rem; } .legacy-guide-body { color: #ddd; line-height: 1.6; font-size: 1.05rem; } .legacy-guide-body h2 { color: #ff6b35; font-size: 1.15rem; font-weight: 700; margin: 2rem 0 0.75rem; line-height: 1.3; } .legacy-guide-body h2:first-child { margin-top: 0; } .legacy-guide-body p { margin: 0 0 1rem; } .legacy-guide-body a { color: #ff6b35; } .legacy-guide-body ul, .legacy-guide-body ol { padding-left: 1.25rem; margin: 0 0 1rem; } .legacy-guide-cluster { margin-top: 2rem; border-top: 1px solid #2f2f2f; padding-top: 1.5rem; } .legacy-guide-cluster a { display: block; margin: 0.45rem 0; color: #ff6b35; font-weight: 600; } body.page-legacy-guide .legacy-faq-item h2.faq-q { font-size: 1.08rem; font-weight: 800; color: #ff6b35; margin: 0 0 0.6rem; line-height: 1.35; text-transform: none; letter-spacing: 0; text-align: center; } body.page-legacy-guide .legacy-faq-item p:last-child { margin-bottom: 0; } body.page-legacy-guide .wrap { max-width: 920px; margin: 0 auto; padding: 1.5rem 1rem 3rem; } body.page-legacy-guide .wrap .card { background: #171717; border: 1px solid #2f2f2f; border-radius: 12px; } /* Blog post when used as a family-guide sibling page */ body.blog-post-page.page-legacy-guide .blog-wrap { background: #171717; border: 1px solid #2f2f2f; border-radius: 12px; box-shadow: none; max-width: 920px; } body.blog-post-page.page-legacy-guide .blog-article h1 { color: #ff6b35 !important; } body.blog-post-page.page-legacy-guide .blog-article .meta { color: #888 !important; } body.blog-post-page.page-legacy-guide .blog-article .blog-body, body.blog-post-page.page-legacy-guide .blog-article .blog-body p, body.blog-post-page.page-legacy-guide .blog-article .blog-body li { color: #ddd !important; } body.blog-post-page.page-legacy-guide .blog-article .blog-body strong { color: #e5e5e5 !important; } body.blog-post-page.page-legacy-guide .blog-article h2 { color: #ff6b35 !important; } body.blog-post-page.page-legacy-guide .blog-related h2 { color: #ff6b35 !important; } body.blog-post-page.page-legacy-guide .blog-faq h2 { color: #ff6b35 !important; } body.blog-post-page.page-legacy-guide .blog-faq .blog-faq-item { background: #171717 !important; border-color: #2f2f2f !important; } body.blog-post-page.page-legacy-guide .program-card { background: #171717; border-color: #2f2f2f; } body.blog-post-page.page-legacy-guide .program-card p { color: #ccc !important; } /* ======================================== MOBILE WEB BASELINE (iOS / Android) Safe areas, text sizing, media, motion ======================================== */ html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; } @media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } } img, svg, video, canvas { max-width: 100%; height: auto; } @media (max-width: 768px) { .nav-row { padding-left: max(0px, env(safe-area-inset-left)); padding-right: max(0px, env(safe-area-inset-right)); } .nav-links a, .nav-cta, .nav-toggle { touch-action: manipulation; -webkit-tap-highlight-color: rgba(255, 107, 53, 0.12); } } /* ======================================== BACKWARD COMPAT — old .navbar nav structure (free-day-pass, blog posts, SEO landing pages) ======================================== */ .navbar { display: flex; align-items: center; justify-content: space-between; padding: 0.9rem 5%; width: 100%; position: relative; z-index: 2; } .nav-with-centered-cta { gap: 1rem 1.25rem; } .nav-with-centered-cta .logo { flex-shrink: 0; } .nav-with-centered-cta .nav-cta-centered { display: none !important; } .nav-with-centered-cta .nav-trailing { flex: 1; display: flex; align-items: center; justify-content: flex-end; gap: 0.75rem; } .nav-menu { display: flex; align-items: center; gap: 1.25rem; list-style: none; margin: 0; padding: 0; } .nav-menu a { color: #e5e5e5; text-decoration: none; font-weight: 600; font-size: 0.82rem; text-transform: uppercase; letter-spacing: 0.5px; transition: color 0.25s; } .nav-menu a:hover { color: #ff6b35; } .mobile-toggle { display: none; background: rgba(255,255,255,0.06); border: none; color: #e5e5e5; font-size: 1.3rem; cursor: pointer; width: 44px; height: 44px; border-radius: 8px; align-items: center; justify-content: center; flex-shrink: 0; } .nav-with-centered-cta .nav-cta-compact-bar { display: none; flex-shrink: 0; align-items: center; justify-content: center; padding: 0.55rem 1rem; font-size: 0.8rem; letter-spacing: 0.4px; min-height: 44px; } @media (min-width: 1025px) { .nav-cta-in-menu { display: list-item !important; } } @media (max-width: 1024px) { .navbar { padding: 0.9rem 4%; } .nav-menu { display: none; position: absolute; top: 100%; left: 0; right: 0; background: rgba(13,13,13,0.96); backdrop-filter: blur(18px); -webkit-backdrop-filter: blur(18px); flex-direction: column; padding: 1.25rem; gap: 0.9rem; border-bottom: 1px solid rgba(255,255,255,0.08); box-shadow: 0 12px 24px rgba(0,0,0,0.4); z-index: 1002; align-items: flex-start; } .nav-menu.active { display: flex; } .mobile-toggle { display: flex !important; } .nav-cta-in-menu { display: none !important; } .nav-with-centered-cta .nav-cta-compact-bar { display: inline-flex !important; } .nav-with-centered-cta .nav-trailing { gap: 0.5rem; } } /* Ensure .wrap on legacy-guide pages clears the fixed navbar */ body.page-legacy-guide .wrap { padding-top: calc(100px + 1.5rem); } @media (max-width: 768px) { body.page-legacy-guide .wrap { padding-top: calc(72px + 1rem); } }