/* ── AFW Life Compass — Blue Theme ─────────────────────────────────────────── Applied when is set by PHP from site_settings. All three pages (index.php, dashboard.php, admin.php) link this file. To add a new theme later, just add a new block here. ──────────────────────────────────────────────────────────────────────────── */ body.theme-blue, body.theme-blue .app-content { background: radial-gradient(ellipse at top right, #1A2468 0%, #0D1535 50%, #060B1E 100%) !important; background-attachment: fixed !important; } /* Nav */ body.theme-blue nav, body.theme-blue .topnav { background: #060B1E !important; border-bottom: 1px solid rgba(42,58,158,0.4) !important; } body.theme-blue .nav-brand, body.theme-blue .topnav-brand { color: #fff !important; } body.theme-blue .topnav-badge { background: #2A3A9E !important; } body.theme-blue .nav-links a, body.theme-blue .topnav-right a { color: #9BA8E8 !important; } body.theme-blue .nav-cta, body.theme-blue .btn-primary { background: #2A3A9E !important; color: #fff !important; } body.theme-blue .nav-cta:hover, body.theme-blue .btn-primary:hover { background: #3A4ABE !important; } /* Hero & sections */ body.theme-blue .hero { background: radial-gradient(ellipse at 70% 40%, #1A2468 0%, #0D1535 45%, #060B1E 100%) !important; } body.theme-blue .section-forest { background: radial-gradient(ellipse at 30% 70%, #1A2468 0%, #0D1535 60%, #060B1E 100%) !important; } body.theme-blue .section-dark { background: #060B1E !important; } body.theme-blue .cta-section { background: radial-gradient(ellipse at 50% 0%, #1A2468 0%, #060B1E 70%) !important; } body.theme-blue .proof-strip { background: #2A3A9E !important; } /* Text colours */ body.theme-blue .hero h1, body.theme-blue .hero p, body.theme-blue .section-forest h2, body.theme-blue .section-forest h3, body.theme-blue .section-forest p, body.theme-blue .section-dark h2, body.theme-blue .section-dark h3, body.theme-blue .section-dark p, body.theme-blue .section-dark li, body.theme-blue .cta-section h2, body.theme-blue .cta-section p, body.theme-blue .compass-card h3, body.theme-blue .compass-card p { color: #E8EAF6 !important; } body.theme-blue h1 span, body.theme-blue .hero-eyebrow, body.theme-blue .eyebrow, body.theme-blue .hero-proof .num, body.theme-blue .price-amt { color: #7A8FE8 !important; } body.theme-blue .hero-sub, body.theme-blue .compass-card p, body.theme-blue .feature-card p, body.theme-blue .muted, body.theme-blue .nav-greeting { color: #9BA8E8 !important; } /* Cards */ body.theme-blue .card, body.theme-blue .accordion-row, body.theme-blue .task-row, body.theme-blue .morning-banner, body.theme-blue .compass-card, body.theme-blue .feature-card, body.theme-blue .price-card, body.theme-blue .stat-card, body.theme-blue .problem-card, body.theme-blue .coach-card { background: rgba(10,15,50,0.7) !important; border-color: rgba(42,58,158,0.35) !important; color: #E8EAF6 !important; } body.theme-blue .stat-card .num { color: #7A8FE8 !important; } body.theme-blue .stat-card .lbl { color: #9BA8E8 !important; } body.theme-blue .card-header h2 { color: #E8EAF6 !important; } body.theme-blue table th { background: rgba(10,15,50,0.5) !important; color: #9BA8E8 !important; } body.theme-blue table td { color: #E8EAF6 !important; border-bottom-color: rgba(42,58,158,0.2) !important; } body.theme-blue tr:hover td { background: rgba(42,58,158,0.1) !important; } /* Compass cards */ body.theme-blue .compass-card h3 { color: #E8EAF6 !important; } body.theme-blue .compass-card:hover { background: rgba(42,58,158,0.2) !important; border-color: rgba(42,58,158,0.8) !important; } body.theme-blue .c-num { background: #2A3A9E !important; color: #fff !important; } /* Pricing */ body.theme-blue .price-card.featured { background: #2A3A9E !important; border-color: #2A3A9E !important; } body.theme-blue .price-card.featured h3, body.theme-blue .price-card.featured p, body.theme-blue .price-card.featured li { color: #fff !important; } body.theme-blue .price-btn { border-color: #7A8FE8 !important; color: #7A8FE8 !important; } body.theme-blue .price-card.featured .price-btn { background: #060B1E !important; color: #7A8FE8 !important; border-color: #060B1E !important; } /* Dashboard specific */ body.theme-blue #pts-strip { background: #060B1E !important; border-bottom-color: rgba(42,58,158,0.4) !important; } body.theme-blue .tab-btn { color: #9BA8E8 !important; } body.theme-blue .tab-btn.active { color: #7A8FE8 !important; border-bottom-color: #7A8FE8 !important; } body.theme-blue .btn-add { background: rgba(10,15,50,0.7) !important; border-color: #2A3A9E !important; color: #7A8FE8 !important; } body.theme-blue .btn-sm { border-color: #2A3A9E !important; color: #7A8FE8 !important; background: rgba(10,15,50,0.5) !important; } body.theme-blue .start-cta button:not(:disabled) { background: #2A3A9E !important; } body.theme-blue .done-btn { background: #2A3A9E !important; } body.theme-blue .pts-reset { background: rgba(10,15,50,0.5) !important; } body.theme-blue .chip { background: rgba(10,15,50,0.5) !important; border-color: rgba(42,58,158,0.3) !important; color: #9BA8E8 !important; } /* Badges */ body.theme-blue .badge-admin { color: #7A8FE8 !important; background: rgba(42,58,158,0.2) !important; } body.theme-blue .badge-active { color: #6BB8FF !important; background: rgba(42,58,158,0.2) !important; } body.theme-blue .points { color: #7A8FE8 !important; } /* Footer */ body.theme-blue footer { background: rgba(0,0,5,0.7) !important; } body.theme-blue footer p, body.theme-blue footer a { color: #9BA8E8 !important; } /* ── Parchment sections stay light in blue theme — force dark readable text ── */ body.theme-blue .section-parch { background: #F0EDE4 !important; } body.theme-blue .section-parch h1, body.theme-blue .section-parch h2, body.theme-blue .section-parch h3, body.theme-blue .section-parch h4 { color: #0D1F0F !important; } body.theme-blue .section-parch > .section-inner p, body.theme-blue .section-parch p { color: #2B3A2B !important; } body.theme-blue .section-parch li { color: #2B3A2B !important; } body.theme-blue .section-parch strong { color: #0D1F0F !important; } body.theme-blue .section-parch em { color: #2B3A2B !important; } body.theme-blue .section-parch div { color: #2B3A2B !important; } body.theme-blue .section-parch span { color: #2B3A2B !important; } body.theme-blue .section-parch .eyebrow { color: #2A3A9E !important; } body.theme-blue .section-parch .achieve-text { color: #2B2A24 !important; } body.theme-blue .section-parch .story-content p { color: #3A4A3A !important; } body.theme-blue .section-parch .story-year { color: #C8C0B0 !important; opacity: 0.4 !important; } body.theme-blue .section-parch .problem-card h3 { color: #0D1F0F !important; } body.theme-blue .section-parch .problem-card p { color: #5A6A5A !important; } body.theme-blue .section-parch .coach-card h3 { color: #1A4023 !important; } body.theme-blue .section-parch .coach-card p { color: #5A6A5A !important; } body.theme-blue .section-parch .feature-card h3 { color: #1A4023 !important; } body.theme-blue .section-parch .feature-card p { color: #5A6A5A !important; } /* ── Fix grey card text — white in blue theme ── */ body.theme-blue .coach-card, body.theme-blue .feature-card { background: rgba(30,40,100,0.7) !important; border-color: rgba(42,58,158,0.4) !important; } body.theme-blue .coaches-grid .coach-card { background: rgba(20,30,90,0.8) !important; box-shadow: 0 4px 20px rgba(0,0,5,0.4) !important; } body.theme-blue .coaches-grid .coach-card h3 { color: #7A8FE8 !important; } body.theme-blue .coaches-grid .coach-card p { color: #C8D0F0 !important; } /* ── Fix proof strip quote — white text on blue background ── */ body.theme-blue .proof-strip .big-quote { color: #fff !important; } body.theme-blue .proof-strip .attrib { color: rgba(255,255,255,0.7) !important; } /* ── Fix feature cards text in blue theme ── */ body.theme-blue .features-grid .feature-card { background: rgba(20,30,90,0.7) !important; border-color: rgba(42,58,158,0.3) !important; } body.theme-blue .features-grid .feature-card h3 { color: #7A8FE8 !important; } body.theme-blue .features-grid .feature-card p { color: #C8D0F0 !important; } /* ── Fix problem cards text in blue theme ── */ body.theme-blue .problem-grid .problem-card { background: rgba(20,30,90,0.7) !important; border-color: rgba(42,58,158,0.3) !important; } body.theme-blue .problem-grid .problem-card h3 { color: #7A8FE8 !important; } body.theme-blue .problem-grid .problem-card p { color: #C8D0F0 !important; } /* ── Fix task library rows in blue theme ── */ body.theme-blue .task-row, body.theme-blue .accordion-row, body.theme-blue .card, body.theme-blue .morning-banner { background: #0D1A4A !important; border-color: rgba(122,143,232,0.3) !important; } body.theme-blue .task-row input[type="number"] { background: #162060 !important; border-color: rgba(122,143,232,0.4) !important; color: #E8EAF6 !important; } body.theme-blue .edit-span, body.theme-blue .task-row span, body.theme-blue .task-row div { color: #E8EAF6 !important; } body.theme-blue .section-lbl { color: #9BA8E8 !important; } body.theme-blue .section-sub { color: #9BA8E8 !important; } /* Info banner */ body.theme-blue div[style*="background:#F5F0E8"], body.theme-blue div[style*="background:#F5F0E"], body.theme-blue div[style*="F5F0E8"] { background: #0D1A4A !important; border-color: rgba(122,143,232,0.3) !important; color: #E8EAF6 !important; } /* ── Fix React-rendered inline style task rows in blue theme ── */ body.theme-blue div.app-content div[style*="border: 1px solid"], body.theme-blue div.app-content div[style*="border:1px solid"] { background: #0D1A4A !important; border-color: rgba(122,143,232,0.3) !important; } body.theme-blue div.app-content div[style*="border: 1px solid"] span, body.theme-blue div.app-content div[style*="border: 1px solid"] div { color: #E8EAF6 !important; } body.theme-blue div.app-content input[type="number"] { background: #162060 !important; border-color: rgba(122,143,232,0.4) !important; color: #E8EAF6 !important; } body.theme-blue div.app-content span[style*="color"] { color: #9BA8E8 !important; } body.theme-blue div.app-content button[style*="background: none"] { color: rgba(122,143,232,0.6) !important; }