/* Gym Wizards — Dark/Light mode theme system Uses CSS variables + data-theme attribute on . Preference stored in localStorage; respects system preference if no choice. Token philosophy: - --gw-* tokens are the SINGLE source of truth for adaptive surfaces. - Brand constants (purple/orange/aqua) stay fixed where they are meant to be invariant (header bar, stat band, CTA gradient, motion lab). - Adaptive surfaces (page/section/card/elevated/form/input/footer/text/ button/outline/link/focus) read --gw-* tokens so they flip with the theme. - marketing.css components bind to --gw-* tokens via the overrides below. */ :root{ /* page + surfaces */ --gw-bg:#f7f3ff; /* page background */ --gw-section:#ffffff; /* default section background */ --gw-panel:#ffffff; /* elevated card background */ --gw-elevated:#ffffff; /* elevated panel (modals/dropdowns) */ --gw-header-bg:#341c77; /* public header bar (brand, constant) */ --gw-footer-bg:#221056; /* public footer (brand-dark, constant) */ --gw-soft:#fff8f2; /* soft warm surface */ --gw-aqua-soft:#e7f8f9; /* light aqua band (light only) */ --gw-cream:#fff6e9; /* cream band (light only) */ --gw-line:#e7ddff; /* hairline borders */ /* text */ --gw-ink:#19162a; /* primary text */ --gw-muted:#5d5870; /* muted text */ --gw-inverse:#ffffff; /* inverse text on dark/brand */ --gw-link:#341c77; /* link text */ --gw-link-hover:#fd5c37; /* link hover */ --gw-eyebrow:#c2410c; /* eyebrow label (light) — orange-700 for contrast */ --gw-on-brand-muted:rgba(255,255,255,.82); /* text on brand-purple */ --gw-on-brand-faint:rgba(255,255,255,.62); /* faint text on brand-purple */ /* buttons */ --gw-btn-bg:#fd5c37; /* primary button bg (brand orange, constant) */ --gw-btn-ink:#ffffff; /* primary button text */ --gw-btn-bg-hover:#ff6f4f; /* primary button hover */ --gw-outline-border:rgba(255,255,255,.55); /* outline button border (on brand) */ --gw-outline-ink:#ffffff; /* outline button text (on brand) */ --gw-outline-bg:rgba(255,255,255,.16); /* outline button bg (on brand) */ --gw-outline-bg-hover:rgba(255,255,255,.26); /* forms */ --gw-form-bg:#ffffff; --gw-form-ink:#19162a; --gw-input-bg:#ffffff; --gw-input-ink:#19162a; --gw-input-border:#d8cef1; --gw-input-placeholder:#8b85a3; --gw-focus-ring:0 0 0 3px rgba(108,76,196,.32); /* cta */ --gw-cta-bg:linear-gradient(120deg,#341c77,#221056); --gw-cta-ink:#ffffff; /* logo */ --gw-logo-on-brand-filter:brightness(0) invert(1); /* white-logo effect on dark/brand */ --gw-logo-on-light-filter:none; /* z-index scale (kept here for clarity) */ --gw-z-header:50; --gw-z-mobile-nav:60; /* mobile dropdown above header content */ --gw-z-toggle:55; /* toggle: below mobile nav dropdown, above page */ --gw-z-whatsapp:90; } [data-theme="dark"]{ --gw-bg:#14112a; --gw-section:#181530; --gw-panel:#1e1b38; --gw-elevated:#25224a; --gw-header-bg:#1e1b38; /* keep header brand-readable in dark */ --gw-footer-bg:#100c24; --gw-soft:#231f42; --gw-aqua-soft:#16143a; --gw-cream:#1c1a3e; --gw-line:#2e2a52; --gw-ink:#e8e4f5; --gw-muted:#9a93b8; --gw-inverse:#14112a; --gw-link:#9a7ee0; --gw-link-hover:#ff9c7a; --gw-eyebrow:#ff9c7a; --gw-on-brand-muted:rgba(255,255,255,.82); --gw-on-brand-faint:rgba(255,255,255,.6); --gw-btn-bg:#fd5c37; --gw-btn-ink:#ffffff; --gw-btn-bg-hover:#ff7250; --gw-outline-border:rgba(255,255,255,.5); --gw-outline-ink:#ffffff; --gw-outline-bg:rgba(255,255,255,.14); --gw-outline-bg-hover:rgba(255,255,255,.24); --gw-form-bg:#1e1b38; --gw-form-ink:#e8e4f5; --gw-input-bg:#25224a; --gw-input-ink:#e8e4f5; --gw-input-border:#3a3666; --gw-input-placeholder:#7c77a0; --gw-focus-ring:0 0 0 3px rgba(138,111,214,.4); --gw-cta-bg:linear-gradient(120deg,#1e1b38,#14112a); --gw-cta-ink:#ffffff; --gw-logo-on-brand-filter:brightness(0) invert(1); --gw-logo-on-light-filter:brightness(0) invert(1); /* dark mode: invert purple logo to white */ } /* ---------- Marketing body theming ---------- */ .marketing-body{ background:var(--gw-bg); color:var(--gw-ink); } .marketing-body h1,.marketing-body h2,.marketing-body h3,.marketing-body h4{ color:var(--gw-ink); } .marketing-body a{color:var(--gw-link)} .marketing-body a:hover{color:var(--gw-link-hover)} .marketing-body .eyebrow{color:var(--gw-eyebrow)} .marketing-body .muted,.marketing-body .mini{color:var(--gw-muted)} /* Adaptive surfaces (bind marketing.css components to tokens) */ .marketing-body .content-band{background:var(--gw-bg)} .marketing-body .site-card{background:var(--gw-panel);box-shadow:0 6px 20px rgba(0,0,0,.10)} .marketing-body .testimonial-card{background:var(--gw-panel)} .marketing-body .news-card{background:var(--gw-panel)} .marketing-body .video-card{background:var(--gw-panel)} .marketing-body .contact-panel{background:var(--gw-soft)} .marketing-body .schedule-table{background:var(--gw-line);border-color:var(--gw-line)} .marketing-body .schedule-table>div{background:var(--gw-section)} .marketing-body .schedule-table strong{color:var(--gw-brand)} .marketing-body .schedule-table span{color:var(--gw-ink)} .marketing-body .testimonial-quote{color:var(--gw-ink)} .marketing-body .testimonial-name{color:var(--gw-brand)} .marketing-body .news-body{color:var(--gw-ink)} .marketing-body .breadcrumb{background:var(--gw-section);color:var(--gw-muted)} .marketing-body .breadcrumb a{color:var(--gw-eyebrow)} .marketing-body .breadcrumb span[aria-current]{color:var(--gw-ink)} /* Bands that should adapt their background */ .marketing-body .video-band{background:var(--gw-aqua-soft)} .marketing-body .testimonials-band{background:var(--gw-cream)} /* Hero panel — always on a dark image, keep inverse text */ .marketing-body .hero-panel{color:var(--gw-inverse)} .marketing-body .hero-panel h1{color:#fff;text-shadow:0 4px 30px rgba(0,0,0,.3)} .marketing-body .hero-panel p{color:rgba(255,255,255,.92)} .marketing-body .hero-panel .eyebrow{color:var(--gw-aqua,#b2eaee)} /* Brand-constant bands (do not flip background, just ensure text) */ .marketing-body .stat-band{background:var(--gw-brand,#341c77);color:#fff} .marketing-body .stat-band>div{color:#fff} .marketing-body .cta-band{background:var(--gw-cta-bg);color:var(--gw-cta-ink)} .marketing-body .cta-band h2{color:#fff} .marketing-body .cta-band p{color:var(--gw-on-brand-muted)} .marketing-body .cta-band .eyebrow{color:var(--gw-aqua,#b2eaee)} .marketing-body .motion-lab{background:var(--gw-brand-dark,#221056);color:#fff} .marketing-body .motion-copy h2{color:#fff} .marketing-body .motion-copy p{color:var(--gw-on-brand-muted)} /* Nav dropdown menu — theme-aware */ .marketing-body .nav-dropdown-menu{background:var(--gw-elevated);box-shadow:0 18px 44px rgba(0,0,0,.18)} .marketing-body .nav-dropdown-menu a{color:var(--gw-ink)} .marketing-body .nav-dropdown-menu a:hover{background:var(--gw-soft);color:var(--gw-eyebrow)} /* ---------- Footer (public) ---------- */ .marketing-body .marketing-footer{background:var(--gw-footer-bg);color:var(--gw-on-brand-muted)} .marketing-body .marketing-footer p{color:var(--gw-on-brand-muted)} .marketing-body .marketing-footer nav a{color:var(--gw-on-brand-muted)} .marketing-body .marketing-footer nav a:hover{color:#fff} .marketing-body .marketing-footer address a{color:#fff} .marketing-body .marketing-footer::after{color:var(--gw-on-brand-faint);border-top-color:rgba(255,255,255,.12)} .marketing-body .footer-social a{color:var(--gw-on-brand-muted);border-color:rgba(255,255,255,.2)} .marketing-body .footer-social a:hover{background:var(--gw-outline-bg);color:#fff} .marketing-body .footer-hours h3{color:#fff} .marketing-body .footer-hours>div{color:var(--gw-on-brand-muted)} .marketing-body .footer-staff-login{color:var(--gw-on-brand-faint)} .marketing-body .footer-staff-login:hover{color:#fff} /* Footer + header logo — use the white-logo effect on brand/dark surfaces */ .marketing-body .marketing-footer img, .marketing-body .marketing-footer .footer-logo-img{ filter:var(--gw-logo-on-brand-filter); } /* ---------- Buttons ---------- */ .marketing-body .site-button{ background:var(--gw-btn-bg);color:var(--gw-btn-ink); box-shadow:0 12px 28px rgba(253,92,55,.32); } .marketing-body .site-button:hover{background:var(--gw-btn-bg-hover);color:var(--gw-btn-ink)} .marketing-body .site-button.secondary{ background:var(--gw-outline-bg);color:var(--gw-outline-ink); box-shadow:0 0 0 1.5px var(--gw-outline-border) inset; } .marketing-body .site-button.secondary:hover{background:var(--gw-outline-bg-hover);color:var(--gw-outline-ink)} .marketing-body .cta-band .site-button:not(.secondary), .marketing-body .marketing-hero .site-button:not(.secondary){color:var(--gw-btn-ink)} .marketing-body a.site-button:not(.secondary){color:var(--gw-btn-ink)} /* Secondary/outline button on a LIGHT surface (content-band) must NOT be white-on-translucent — give it a brand border + brand text instead. */ .marketing-body .content-band .site-button.secondary{ background:transparent;color:var(--gw-link); box-shadow:0 0 0 1.5px var(--gw-line) inset; } .marketing-body .content-band .site-button.secondary:hover{ background:var(--gw-soft);color:var(--gw-link-hover); box-shadow:0 0 0 1.5px var(--gw-brand) inset; } /* ---------- Forms ---------- */ .marketing-body .form-stack label, .marketing-body .form-grid label, .marketing-body form label{color:var(--gw-ink)} .marketing-body input, .marketing-body select, .marketing-body textarea{ background:var(--gw-input-bg);color:var(--gw-input-ink); border:1px solid var(--gw-input-border); } .marketing-body input::placeholder, .marketing-body textarea::placeholder{color:var(--gw-input-placeholder)} .marketing-body input:focus, .marketing-body select:focus, .marketing-body textarea:focus{ outline:none;border-color:var(--gw-brand); box-shadow:var(--gw-focus-ring); } .marketing-body .login-card{background:var(--gw-panel);border-color:var(--gw-line);color:var(--gw-ink)} .marketing-body .login-card h1{color:var(--gw-ink)} .marketing-body .login-card .muted{color:var(--gw-muted)} .marketing-body .login-card button{background:var(--gw-btn-bg);color:var(--gw-btn-ink)} .marketing-body .login-card button:hover{background:var(--gw-btn-bg-hover)} .marketing-body .hero-card{background:linear-gradient(135deg,var(--gw-panel) 0%,var(--gw-soft) 100%);border-color:var(--gw-line);color:var(--gw-ink)} .marketing-body .hero-card p{color:var(--gw-muted)} .marketing-body .choice-card{background:var(--gw-panel);border-color:var(--gw-line);color:var(--gw-ink)} .marketing-body .choice-card strong{color:var(--gw-brand)} .marketing-body .choice-card span{color:var(--gw-muted)} .marketing-body .gw-button{background:var(--gw-btn-bg);color:var(--gw-btn-ink)!important} .marketing-body .gw-button:hover{background:var(--gw-btn-bg-hover)} /* ---------- Theme toggle button ---------- */ .gw-theme-toggle{ position:fixed;top:14px;right:14px;z-index:var(--gw-z-toggle); width:40px;height:40px;border-radius:50%; background:rgba(255,255,255,.18);border:1px solid rgba(255,255,255,.35); color:#fff;font-size:18px;cursor:pointer; display:flex;align-items:center;justify-content:center; transition:background .2s,transform .2s,opacity .3s,visibility .3s; } .gw-theme-toggle:hover{background:rgba(255,255,255,.28);transform:scale(1.08)} .gw-theme-toggle:focus-visible{outline:2px solid #fff;outline-offset:2px;box-shadow:var(--gw-focus-ring)} [data-theme="dark"] .gw-theme-toggle{background:rgba(255,255,255,.12);border-color:rgba(255,255,255,.3)} /* Hidden by default; only shown on marketing pages */ .gw-theme-toggle{display:none!important} .marketing-body .gw-theme-toggle{display:flex!important} /* Mobile: move toggle to bottom-right so it never collides with the header/hamburger/mobile-nav dropdown. It sits above the WhatsApp FAB (which is bottom:24px right:24px z-index 90) by stacking vertically. */ @media(max-width:900px){ .gw-theme-toggle{ top:auto;bottom:84px;right:16px; width:38px;height:38px;font-size:16px; } /* When the mobile nav is open, drop the toggle below the dropdown panel so it can never cover menu items. The dropdown is position:absolute top:100% of the header; moving the toggle to bottom-right already avoids it, but we also ensure it stays below the dropdown's z-index. */ .marketing-nav.mobile-open ~ .gw-theme-toggle, .gw-theme-toggle.is-below-menu{z-index:calc(var(--gw-z-mobile-nav) - 1)} } @media(max-width:560px){ .gw-theme-toggle{bottom:76px;right:12px;width:36px;height:36px;font-size:15px} } /* ---------- WhatsApp floating button ---------- */ .gw-whatsapp-fab{ position:fixed;bottom:24px;right:24px;z-index:var(--gw-z-whatsapp); width:56px;height:56px;border-radius:14px; background:#25D366;color:#fff; display:flex;align-items:center;justify-content:center; box-shadow:0 6px 20px rgba(37,211,102,.4); transition:opacity .3s,transform .3s,box-shadow .3s; text-decoration:none; } .gw-whatsapp-fab:hover{transform:scale(1.08);box-shadow:0 8px 28px rgba(37,211,102,.5)} .gw-whatsapp-fab svg{width:28px;height:28px} @media(max-width:560px){ .gw-whatsapp-fab{width:48px;height:48px;bottom:16px;right:16px;border-radius:12px} .gw-whatsapp-fab svg{width:24px;height:24px} } /* ---------- Mobile nav ---------- */ .mobile-nav-toggle{ display:none;background:none;border:0;cursor:pointer;padding:8px; position:relative;z-index:var(--gw-z-toggle); } .mobile-nav-toggle span{ display:block;width:24px;height:3px;margin:4px 0;background:#fff;border-radius:2px; transition:transform .3s,opacity .3s; } .mobile-nav-toggle.is-open span:nth-child(1){transform:rotate(45deg)translate(5px,5px)} .mobile-nav-toggle.is-open span:nth-child(2){opacity:0} .mobile-nav-toggle.is-open span:nth-child(3){transform:rotate(-45deg)translate(5px,-5px)} @media(max-width:900px){ .mobile-nav-toggle{display:block} .marketing-nav{ display:none;position:absolute;top:100%;left:0;right:0; background:var(--gw-header-bg); flex-direction:column;padding:16px;gap:4px; z-index:var(--gw-z-mobile-nav); box-shadow:0 18px 36px rgba(0,0,0,.25); } .marketing-nav.mobile-open{display:flex} .nav-dropdown{position:static} .nav-dropdown-menu{ position:static;display:block;box-shadow:none; background:transparent;padding-left:16px; } .nav-dropdown-menu a{color:#fff} .nav-dropdown-menu a:hover{background:rgba(255,255,255,.14);color:#fff} } /* ---------- Public form/auth page layout ---------- These layout primitives are needed on public_base.html pages, which do NOT load backend styles.css. Values mirror styles.css but use theme tokens. */ .marketing-body .gw-public-main{ max-width:var(--maxw,1260px); margin:0 auto; padding:clamp(32px,5vw,64px) clamp(18px,5vw,70px); min-height:60vh; } .marketing-body .login-card{ background:var(--gw-panel); border:1px solid var(--gw-line); border-radius:var(--radius,20px); box-shadow:0 12px 30px rgba(0,0,0,.10); padding:clamp(24px,4vw,40px); width:min(480px,92vw); margin:0 auto; } .marketing-body .login-card h1{ margin:0 0 16px; font-family:var(--font-head,"Roboto Slab",Georgia,serif); font-size:clamp(1.6rem,3vw,2.2rem); color:var(--gw-ink); } .marketing-body .form-stack{display:grid;gap:14px} .marketing-body .form-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px} .marketing-body .form-grid .wide{grid-column:1/-1} .marketing-body .grid2{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px} .marketing-body form label{ display:grid;gap:6px;font-weight:700;color:var(--gw-ink); font-size:.95rem; } .marketing-body input, .marketing-body select, .marketing-body textarea{ border:1px solid var(--gw-input-border); border-radius:12px; padding:12px 13px; background:var(--gw-input-bg); color:var(--gw-input-ink); font:inherit; font-size:15px; } .marketing-body textarea{min-height:92px} .marketing-body .button-row{display:flex;gap:10px;flex-wrap:wrap;margin-top:12px} .marketing-body .gw-button, .marketing-body .login-card button, .marketing-body .form-stack button, .marketing-body .form-grid button{ border:0;border-radius:999px; background:var(--gw-btn-bg);color:var(--gw-btn-ink)!important; padding:12px 18px;font-weight:800;cursor:pointer; text-decoration:none;display:inline-flex;align-items:center;justify-content:center;gap:8px; transition:background .18s,transform .18s; } .marketing-body .gw-button:hover, .marketing-body .login-card button:hover, .marketing-body .form-stack button:hover, .marketing-body .form-grid button:hover{ background:var(--gw-btn-bg-hover);transform:translateY(-1px); } .marketing-body .hero-card{ background:linear-gradient(135deg,var(--gw-panel) 0%,var(--gw-soft) 100%); border:1px solid var(--gw-line); border-radius:var(--radius,20px); box-shadow:0 12px 30px rgba(0,0,0,.10); padding:clamp(24px,5vw,54px); margin:0 auto 24px; max-width:920px; } .marketing-body .hero-card h1{color:var(--gw-ink)} .marketing-body .public-form{max-width:920px} .marketing-body .success-panel{max-width:860px;margin:0 auto} .marketing-body .choice-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:16px;max-width:920px;margin:24px auto 0} .marketing-body .choice-card{ display:block;text-decoration:none; background:var(--gw-panel);border:1px solid var(--gw-line); border-radius:var(--radius,20px);padding:22px; box-shadow:0 8px 22px rgba(0,0,0,.08); transition:transform .18s,box-shadow .18s; } .marketing-body .choice-card:hover{transform:translateY(-2px);box-shadow:0 14px 34px rgba(0,0,0,.12)} .marketing-body .choice-card strong{display:block;color:var(--gw-brand);font-size:18px;margin-bottom:6px} .marketing-body .choice-card span{color:var(--gw-muted);font-weight:600} .marketing-body .flash{ background:#fff8e6;border:1px solid #ffd557;border-radius:14px; padding:14px 16px;margin-bottom:18px;color:#4d3510;font-weight:700; max-width:920px;margin:0 auto 18px; } .marketing-body .muted{color:var(--gw-muted)} .marketing-body .mini{font-size:.85rem;color:var(--gw-muted)} @media(max-width:700px){ .marketing-body .form-grid,.marketing-body .grid2{grid-template-columns:1fr} .marketing-body .button-row{display:grid} }