/* ================================================================ SAMAAN THEME BASE | theme-base.css ---------------------------------------------------------------- Lean theme layer enqueued on EVERY request — cinematic or not. Carries just enough to make the dark/light system work on the LMS, dashboard, account, WooCommerce and other non-cinematic surfaces: • the [data-theme] CSS variables (so the choice persists across the whole site, not only the cinematic templates) • a soft crossfade transition between palettes on • theme bg + text colour piped into the parent-theme content wrappers (#wrapper, #main, .site-content, …) — NOT body, NOT header, NOT footer Full cinematic styling (navbar, sections, GSAP-driven motion) still lives in main.css and only loads where it's wanted. Crucially this file MUST NOT recolour the cinematic header / footer markup. Those widgets carry their own intentional palettes (e.g. .footer-wordmark-text, .nav-link, navbar logos). We scope every theme override to the parent-theme content container so cinematic chrome is left untouched. ================================================================ */ :root, [data-theme="light"] { --bg: #F9F6F7; --bg-card: rgba(255,255,255,1); --text-primary: #471C2F; --text-muted: rgba(71,28,47,0.50); --text-faint: rgba(71,28,47,0.25); --border: rgba(71,28,47,0.08); --border-hover: rgba(187,38,73,0.20); --crimson: #BB2649; --plum: #471C2F; --ivory: #F9F6F7; } [data-theme="dark"] { --bg: #1A0D14; --bg-card: rgba(38,25,32,1); --text-primary: #F9F6F7; --text-muted: rgba(249,246,247,0.50); --text-faint: rgba(249,246,247,0.20); --border: rgba(249,246,247,0.08); --border-hover: rgba(187,38,73,0.35); } /* ── Crossfade between palettes only — DO NOT set body bg here. main.css owns body bg on cinematic pages; the parent-theme chrome owns it everywhere else (and the wrapper rule below paints the visible background). ──────────────────────── */ body.sm-theme-base { transition: background-color 0.6s cubic-bezier(0.76,0,0.24,1), color 0.6s cubic-bezier(0.76,0,0.24,1); } /* ── PARENT-THEME CONTENT WRAPPERS — bound to the theme ─────── These are the visible "page surface" containers MasterStudy / WooCommerce / the parent theme paint white. Override them to the theme's --bg variable so dark mode actually reads dark on the LMS / dashboard / blog. Selector targets the WRAPPER level only — never , never header/footer/chrome. */ body.sm-theme-base:not(.cinematic-page) #wrapper, body.sm-theme-base:not(.cinematic-page) #main, body.sm-theme-base:not(.cinematic-page) #content, body.sm-theme-base:not(.cinematic-page) #primary, body.sm-theme-base:not(.cinematic-page) .site-content, body.sm-theme-base:not(.cinematic-page) .site-main, body.sm-theme-base:not(.cinematic-page) .stm-lms-wrapper, body.sm-theme-base:not(.cinematic-page) .stm-lms-page-wrapper, body.sm-theme-base:not(.cinematic-page) .masterstudy-single-course-default, body.sm-theme-base:not(.cinematic-page) .stm_lms-courses, body.sm-theme-base:not(.cinematic-page) .stm_lms-course-wrapper, body.sm-theme-base:not(.cinematic-page) .stm_lms-courses__single--info, body.sm-theme-base:not(.cinematic-page) .stm-lms-user_acount__wrapper { background-color: var(--bg) !important; color: var(--text-primary) !important; transition: background-color 0.6s cubic-bezier(0.76,0,0.24,1), color 0.6s cubic-bezier(0.76,0,0.24,1); } /* ── Foreground text inside content wrappers ─────────────────── Scoped under the same parent-theme containers so the cinematic header / footer keep their own typographic palette intact. We inherit instead of pinning so admin-set custom colours still win. */ body.sm-theme-base:not(.cinematic-page) #wrapper h1, body.sm-theme-base:not(.cinematic-page) #wrapper h2, body.sm-theme-base:not(.cinematic-page) #wrapper h3, body.sm-theme-base:not(.cinematic-page) #wrapper h4, body.sm-theme-base:not(.cinematic-page) #wrapper h5, body.sm-theme-base:not(.cinematic-page) #wrapper h6, body.sm-theme-base:not(.cinematic-page) #wrapper p, body.sm-theme-base:not(.cinematic-page) #wrapper li, body.sm-theme-base:not(.cinematic-page) #wrapper th, body.sm-theme-base:not(.cinematic-page) #wrapper td, body.sm-theme-base:not(.cinematic-page) #wrapper blockquote, body.sm-theme-base:not(.cinematic-page) #wrapper label, body.sm-theme-base:not(.cinematic-page) #main h1, body.sm-theme-base:not(.cinematic-page) #main h2, body.sm-theme-base:not(.cinematic-page) #main h3, body.sm-theme-base:not(.cinematic-page) #main h4, body.sm-theme-base:not(.cinematic-page) #main h5, body.sm-theme-base:not(.cinematic-page) #main h6, body.sm-theme-base:not(.cinematic-page) #main p, body.sm-theme-base:not(.cinematic-page) #main li, body.sm-theme-base:not(.cinematic-page) #main th, body.sm-theme-base:not(.cinematic-page) #main td, body.sm-theme-base:not(.cinematic-page) #main blockquote, body.sm-theme-base:not(.cinematic-page) #main label, body.sm-theme-base:not(.cinematic-page) .stm-lms-wrapper h1, body.sm-theme-base:not(.cinematic-page) .stm-lms-wrapper h2, body.sm-theme-base:not(.cinematic-page) .stm-lms-wrapper h3, body.sm-theme-base:not(.cinematic-page) .stm-lms-wrapper p, body.sm-theme-base:not(.cinematic-page) .stm-lms-wrapper li, body.sm-theme-base:not(.cinematic-page) .stm-lms-wrapper td, body.sm-theme-base:not(.cinematic-page) .stm-lms-wrapper label { color: var(--text-primary) !important; } body.sm-theme-base:not(.cinematic-page) #wrapper small, body.sm-theme-base:not(.cinematic-page) #main small, body.sm-theme-base:not(.cinematic-page) .stm-lms-wrapper small, body.sm-theme-base:not(.cinematic-page) #wrapper .description, body.sm-theme-base:not(.cinematic-page) #main .description, body.sm-theme-base:not(.cinematic-page) .stm-lms-wrapper .description { color: var(--text-muted) !important; }