/* ========================================================================= Smash Fit Gym - dark mode layer. The theme ships one template tree; dark mode is purely this CSS layer, switched by a `dark-mode` class on (server-rendered from the user's preference / cookie, flipped live by assets/js/theme.js). Scope EVERYTHING to `body.dark-mode` so light mode is untouched. ========================================================================= */ /* ---- Design-token overrides (see site.css §0) --------------------------- */ body.dark-mode { --sf-shadow-sm: 0 1px 2px rgba(0, 0, 0, .4); --sf-shadow-md: 0 8px 28px -14px rgba(0, 0, 0, .6); --sf-shadow-lg: 0 28px 64px -24px rgba(0, 0, 0, .72); /* One black everywhere — matches the site header (#000). */ --sf-surface: #000000; --sf-surface-sunken: #000000; --sf-surface-inverse: #000000; --sf-line: #2a2b31; --sf-line-strong: #3a3b40; --sf-text: #e9ebef; --sf-text-muted: #9a9ca1; --sf-text-subtle: #7f8288; --sf-success-bg: #14261b; --sf-success-fg: #7fd9a1; --sf-success-line: #275238; --sf-warn-bg: #2c2412; --sf-warn-fg: #e6bd77; --sf-warn-line: #4a3c1c; --sf-danger-bg: #2a1613; --sf-danger-fg: #f0a99e; --sf-danger-line: #5a2b23; } body.dark-mode { background: #000000; color: #c2c5c9; } /* ---- Typography ---------------------------------------------------------- */ body.dark-mode h1, body.dark-mode h2, body.dark-mode h3, body.dark-mode h4, body.dark-mode h5, body.dark-mode h6, body.dark-mode .heading h2, body.dark-mode .heading-style-2 .data h2, body.dark-mode .data h2, body.dark-mode .who-we-are h2, body.dark-mode .cta-data h2 { color: #f1f2f4; } body.dark-mode p, body.dark-mode li, body.dark-mode td, body.dark-mode th, body.dark-mode span, body.dark-mode label, body.dark-mode .heading span, body.dark-mode .data span, body.dark-mode blockquote { color: #b0b3b8; } body.dark-mode a { color: #d7d9dc; } /* Homepage "Latest News" cards: the theme hardcodes the title link + date to black, invisible against the dark-mode black card background. */ body.dark-mode .blog-style-three .blog-posts h3 a, body.dark-mode .blog-style-three .blog-posts .date { color: #f1f2f4; } /* Blog listing + detail page cards (.blog-style-one): same issue — the theme hardcodes the title link to black and the "by " line to dark grey, both invisible against the dark-mode black card background (.blog-post is forced to black above). */ body.dark-mode .blog-style-one .blog-post h2 a { color: #f1f2f4; } body.dark-mode .blog-style-one .blog-post .blog-author .details h3 { color: #d7d9dc; } body.dark-mode .blog-style-one .blog-post .blog-author .details h3 span { color: #999; } body.dark-mode a:hover, body.dark-mode .accent, body.dark-mode .nav-bar ul li a.active { color: var(--theme-color); } /* Coaches slider prev/next arrows: the theme hardcodes the arrow icon to black, invisible against the dark-mode black background inside the (already-dark) circle outline. */ body.dark-mode .team-style-one .team-slider-nav button i { color: #f1f2f4; } /* ---- Section backgrounds — all the header black --------------------------- */ body.dark-mode .light-bg-color, body.dark-mode .gap.estimated-price, body.dark-mode .about-how-it-works, body.dark-mode .contact-faqs { background-color: #000000; } /* ---- Generic light "card" surfaces — black, kept legible with a hairline -- */ body.dark-mode .bg-wh, body.dark-mode .est-form, body.dark-mode .fit_bmichart, body.dark-mode .your-bmi, body.dark-mode .boxx, body.dark-mode .boxx .space, body.dark-mode .blog-post, body.dark-mode .blog-data, body.dark-mode .blog-post .blog-image, body.dark-mode .product, body.dark-mode .product .main-data, body.dark-mode .product .data, body.dark-mode .service-data, body.dark-mode .service-two-box, body.dark-mode .plans, body.dark-mode .who-we-are, body.dark-mode .who-we-are.space, body.dark-mode .counter-data, body.dark-mode .info, body.dark-mode .contact-form-2 .data, body.dark-mode .services-nav, body.dark-mode .tab-content, body.dark-mode .project-post .project-data, body.dark-mode .team-info, body.dark-mode .cart-totals, body.dark-mode .cart-table, body.dark-mode table { background-color: #000000 !important; border-color: #2a2b31; color: #c2c5c9; } body.dark-mode .whats-in-table td, body.dark-mode table td, body.dark-mode table th { border-color: #2a2b31 !important; } /* "What's in it for you" table (about page): force a bright, explicit text color instead of relying on inheriting it from .whats-in-table's own — too low-contrast against the black dark-mode background. */ body.dark-mode .whats-in-table td { color: #e9ebef !important; } /* About page "Who We Are?" / "What's in it for you?": the theme hardcodes these h3s to black, invisible against the dark-mode black card. */ body.dark-mode .about-first .who-we-are h3 { color: #f1f2f4 !important; } /* Coach cards: the theme keeps the name black — invisible on the dark card. */ body.dark-mode .team-style-one .team-data .team-info h3, body.dark-mode .team-style-one .team-data .team-info h3 a, body.dark-mode .team-style-one .team-data:hover .team-info h3, body.dark-mode .team-style-one .team-data:hover .team-info h3 a { color: #ffffff !important; } /* ---- Forms -------------------------------------------------------------- */ body.dark-mode input, body.dark-mode textarea, body.dark-mode select, body.dark-mode .form-control, body.dark-mode .nice-select { background-color: #000000 !important; color: #e6e7e9 !important; border-color: #33353c !important; } body.dark-mode input::placeholder, body.dark-mode textarea::placeholder { color: #7f8288 !important; } body.dark-mode .nice-select, body.dark-mode .nice-select .current { background-color: #000000 !important; color: #e6e7e9 !important; border-color: #33353c !important; } body.dark-mode .nice-select::after { border-color: #9a9ca1 !important; } body.dark-mode .nice-select .list { background-color: #000000; box-shadow: 0 0 0 1px #33353c; } body.dark-mode .nice-select .option:hover, body.dark-mode .nice-select .option.focus, body.dark-mode .nice-select .option.selected.focus { background-color: #1c1c22; } /* ---- Accordions (FAQ) -------------------------------------------------- */ body.dark-mode .acc2, body.dark-mode .accordion, body.dark-mode .contact-faqs { background-color: transparent; } body.dark-mode .accordion-item, body.dark-mode .accordion-button, body.dark-mode .accordion-body, body.dark-mode .accordion-collapse, body.dark-mode .accordion-button.collapsed { background-color: #000000 !important; color: #e2e3e6; border-color: #2a2b31; } body.dark-mode .accordion-button:not(.collapsed) { background-color: #000000 !important; color: var(--theme-color); } body.dark-mode .accordion-button::after { filter: invert(1) grayscale(1) brightness(1.4); } /* Decorative "folded corner" shape baked into the theme's .acc2 accordion button (style.css: a border-top:76px solid #fff triangle on the collapsed state) — invisible in light mode against the white card, but a glaring solid white block in dark mode. Shows up on the blog article's FAQ-style accordion (.sf-faq, also an .acc2). Killed here only; light mode keeps the shape, unseen either way. */ body.dark-mode .acc2 .accordion-item button:before { border-top-color: transparent !important; } /* ---- Class timetable -------------------------------------------------- */ body.dark-mode .class-timetable .tt-grid { background-color: #000000; border-color: #2a2b31; } body.dark-mode .class-timetable .tt-cell { background-color: #000000 !important; border-color: #2a2b31 !important; color: #c2c5c9; } body.dark-mode .class-timetable .tt-cell.tt-empty { background-color: #000000 !important; } body.dark-mode .class-timetable .tt-day { background-color: #000000; border-color: #2a2b31; } body.dark-mode .class-timetable .tt-cell span { color: #c9ccd0; } body.dark-mode .tt-cell b { color: var(--theme-color); } body.dark-mode .tt-tab { background: #000000; color: #c2c5c9; border-color: #2a2b31; } body.dark-mode .tt-tab.is-active { background: var(--theme-color); color: #fff; } /* ---- Modals --------------------------------------------------------- Black like everything else; a hairline + the shadow lift it off the page. */ body.dark-mode .modal-content, body.dark-mode .modal-body, body.dark-mode .c-form-2 { background-color: #000000; color: #d7d9dc; } body.dark-mode .modal-content { border: 1px solid #2a2b31; } /* ---- Sticky header when solid ------------------------------------------- Transparent, same as light mode - it sits directly on the header, not as a separate solid block. */ body.dark-mode .header-style-one .top-bar { background: transparent; } /* ---- Nav dropdown (Classes submenu etc.) - hardcoded white in the theme -- */ body.dark-mode .desktop-nav ul.sub-menu { background-color: #000000; box-shadow: 0 0 0 1px #2a2b31; } body.dark-mode .desktop-nav .nav-bar ul > li ul.sub-menu li a { color: #c2c5c9; } /* ---- Pagination ----------------------------------------------------- */ body.dark-mode .gym-pagination .page-link { background: #000000; color: #c2c5c9; border-color: #2a2b31; } body.dark-mode .gym-pagination .page-item.active .page-link { background: var(--theme-color); color: #fff; } /* ---- Shop product cards ------------------------------------------- */ body.dark-mode .product .data h3 a, body.dark-mode .product .data h3 { color: #f1f2f4; } body.dark-mode .product .price-range span { color: var(--theme-color); } /* ---- Auth / dashboard (Breeze pages that opt into this layer) --------- */ body.dark-mode .auth-card, body.dark-mode .dashboard-card { background-color: var(--sf-surface); border-color: var(--sf-line); }