/* * Theme T&B — Page Atmospheric Backgrounds * * SINGLE SOURCE OF TRUTH for full-page background treatments. * * Rules: * - Driven only by mutually exclusive body classes from ThemeSetup: * .tb-bg-home | .tb-bg-tools | .tb-bg-books | .tb-bg-blog | .tb-bg-resources * - Never targets body.home / body.blog directly (those conflict when both exist). * - No !important — specificity is controlled via exclusive classes. * - Dark mode uses html[data-tb-theme='dark'] (attribute set on ). * - .tb-page stays transparent so the body background shows through. * * @package ThemeTB * @version 2.0.7 */ /* ========================================================= Base canvas ========================================================= */ html { background-color: var(--tb-bg); } body { /* Base solid fill from design tokens (light #FFF / dark #0F172A). */ background-color: var(--tb-bg); background-image: none; } /* Page wrapper must not paint over the body atmospheric layer. */ .tb-page { background: transparent; position: relative; z-index: 1; min-height: 100vh; } /* ========================================================= Decorative radial layer (::before) ========================================================= */ body.tb-bg-home::before, body.tb-bg-tools::before, body.tb-bg-books::before, body.tb-bg-blog::before, body.tb-bg-resources::before { content: ''; position: fixed; inset: 0; pointer-events: none; z-index: 0; } /* ========================================================= Home — Blue / Indigo ========================================================= */ body.tb-bg-home { background-color: #E0E7FF; background-image: radial-gradient(ellipse at 15% 20%, rgba(37, 99, 235, 0.18) 0%, transparent 50%), radial-gradient(ellipse at 85% 80%, rgba(124, 58, 237, 0.12) 0%, transparent 50%), radial-gradient(ellipse at 50% 50%, rgba(99, 102, 241, 0.08) 0%, transparent 60%), linear-gradient(180deg, #E0E7FF 0%, #E8EEFF 30%, #EDE9FE 60%, #FFFFFF 100%); background-attachment: fixed; } body.tb-bg-home::before { background: radial-gradient(ellipse at 15% 20%, rgba(37, 99, 235, 0.20) 0%, transparent 50%), radial-gradient(ellipse at 85% 80%, rgba(124, 58, 237, 0.15) 0%, transparent 50%), radial-gradient(ellipse at 50% 50%, rgba(99, 102, 241, 0.10) 0%, transparent 60%); } /* ========================================================= Tools — Cyan / Teal ========================================================= */ body.tb-bg-tools { background-color: #E0F7FA; background-image: radial-gradient(ellipse at 10% 20%, rgba(6, 182, 212, 0.20) 0%, transparent 50%), radial-gradient(ellipse at 90% 80%, rgba(6, 182, 212, 0.15) 0%, transparent 50%), radial-gradient(ellipse at 50% 50%, rgba(34, 211, 238, 0.08) 0%, transparent 60%), linear-gradient(180deg, #E0F7FA 0%, #E0FCFF 30%, #F0FDFA 60%, #FFFFFF 100%); background-attachment: fixed; } body.tb-bg-tools::before { background: radial-gradient(ellipse at 10% 20%, rgba(6, 182, 212, 0.25) 0%, transparent 50%), radial-gradient(ellipse at 90% 80%, rgba(6, 182, 212, 0.18) 0%, transparent 50%), radial-gradient(ellipse at 50% 50%, rgba(34, 211, 238, 0.12) 0%, transparent 60%); } /* ========================================================= Books — Purple / Violet ========================================================= */ body.tb-bg-books { background-color: #EDE9FE; background-image: radial-gradient(ellipse at 15% 25%, rgba(124, 58, 237, 0.18) 0%, transparent 50%), radial-gradient(ellipse at 85% 75%, rgba(139, 92, 246, 0.12) 0%, transparent 50%), radial-gradient(ellipse at 50% 50%, rgba(167, 139, 250, 0.08) 0%, transparent 60%), linear-gradient(180deg, #EDE9FE 0%, #E8E0FF 30%, #F3F0FF 60%, #FFFFFF 100%); background-attachment: fixed; } body.tb-bg-books::before { background: radial-gradient(ellipse at 15% 25%, rgba(124, 58, 237, 0.22) 0%, transparent 50%), radial-gradient(ellipse at 85% 75%, rgba(139, 92, 246, 0.15) 0%, transparent 50%), radial-gradient(ellipse at 50% 50%, rgba(167, 139, 250, 0.10) 0%, transparent 60%); } /* ========================================================= Blog — Green / Emerald ========================================================= */ body.tb-bg-blog { background-color: #D1FAE5; background-image: radial-gradient(ellipse at 10% 30%, rgba(16, 185, 129, 0.18) 0%, transparent 50%), radial-gradient(ellipse at 90% 70%, rgba(52, 211, 153, 0.12) 0%, transparent 50%), radial-gradient(ellipse at 50% 50%, rgba(110, 231, 183, 0.08) 0%, transparent 60%), linear-gradient(180deg, #D1FAE5 0%, #E0FFF0 30%, #ECFDF5 60%, #FFFFFF 100%); background-attachment: fixed; } body.tb-bg-blog::before { background: radial-gradient(ellipse at 10% 30%, rgba(16, 185, 129, 0.22) 0%, transparent 50%), radial-gradient(ellipse at 90% 70%, rgba(52, 211, 153, 0.15) 0%, transparent 50%), radial-gradient(ellipse at 50% 50%, rgba(110, 231, 183, 0.10) 0%, transparent 60%); } /* ========================================================= Resources — Soft slate (neutral) ========================================================= */ body.tb-bg-resources { background-color: #F1F5F9; background-image: radial-gradient(ellipse at 20% 20%, rgba(100, 116, 139, 0.12) 0%, transparent 50%), radial-gradient(ellipse at 80% 80%, rgba(71, 85, 105, 0.08) 0%, transparent 50%), linear-gradient(180deg, #F1F5F9 0%, #F8FAFC 50%, #FFFFFF 100%); background-attachment: fixed; } body.tb-bg-resources::before { background: radial-gradient(ellipse at 20% 20%, rgba(100, 116, 139, 0.15) 0%, transparent 50%), radial-gradient(ellipse at 80% 80%, rgba(71, 85, 105, 0.10) 0%, transparent 50%); } /* ========================================================= Dark mode — solid token background, no pastel gradients Attribute lives on , so html[data-tb-theme='dark'] is correct. ========================================================= */ html[data-tb-theme='dark'] body, html[data-tb-theme='dark'] body.tb-bg-home, html[data-tb-theme='dark'] body.tb-bg-tools, html[data-tb-theme='dark'] body.tb-bg-books, html[data-tb-theme='dark'] body.tb-bg-blog, html[data-tb-theme='dark'] body.tb-bg-resources { background-color: var(--tb-bg); background-image: none; background-attachment: scroll; } html[data-tb-theme='dark'] body.tb-bg-home::before, html[data-tb-theme='dark'] body.tb-bg-tools::before, html[data-tb-theme='dark'] body.tb-bg-books::before, html[data-tb-theme='dark'] body.tb-bg-blog::before, html[data-tb-theme='dark'] body.tb-bg-resources::before { display: none; } /* * Elementor: do not hardcode .elementor-kit-{id} — kit IDs are site-specific. * Atmospheric fill stays on body.tb-bg-*; .tb-page is transparent. * CustomizerIntegration::preview_css() still hides body::before in the preview iframe. */