/* ===================================================== THEME MODES (SITE COLOR SKIN) Controlled from: Customizer -> Theme Mode (Color Skin) Applies via NOTE ON SCOPE: this theme's CSS was written across ~20 separate files, mostly with fixed hex colors rather than variables, so a mode switch here re-skins every major, repeated surface (header, footer, top bar, body, cards, sidebar widgets, forms, filters, section backgrounds) - but a few one-off decorative accents deep inside specific pages may keep their original color. Buttons/links that already have their OWN dedicated Customizer color control (Header Button, Hero buttons, Footer links, etc.) are left alone here so a saved custom choice there is respected. ===================================================== */ /* ========================= LIGHT (default) - no overrides needed, this is how the theme already looks out of the box. ========================= */ /* ========================= SHARED RULES (apply to every non-light mode) ========================= */ html[data-theme="dark"], html[data-theme="blue"], html[data-theme="red"], html[data-theme="green"] { --mode-bg: #ffffff; --mode-surface: #ffffff; --mode-text: #334155; --mode-heading: #0f172a; --mode-muted: #64748b; --mode-border: #e2e8f0; --mode-header-bg: #ffffff; --mode-footer-bg: #0f172a; --mode-accent: #14b8a6; } html[data-theme="dark"] { --mode-bg: #0f172a; --mode-surface: #1e293b; --mode-text: #cbd5e1; --mode-heading: #f8fafc; --mode-muted: #94a3b8; --mode-border: #334155; --mode-header-bg: #0f172a; --mode-header-bg-rgb: 15, 23, 42; --mode-footer-bg: #000000; --mode-accent: #14b8a6; } html[data-theme="blue"] { --mode-bg: #eef5fb; --mode-surface: #ffffff; --mode-text: #33475b; --mode-heading: #0b2545; --mode-muted: #5b7186; --mode-border: #d3e3f0; --mode-header-bg: #0f5776; --mode-header-bg-rgb: 15, 87, 118; --mode-footer-bg: #0b2545; --mode-accent: #148ab8; } html[data-theme="red"] { --mode-bg: #fdf3f3; --mode-surface: #ffffff; --mode-text: #57302f; --mode-heading: #450a0a; --mode-muted: #8a5b59; --mode-border: #f3d9d8; --mode-header-bg: #7f1d1d; --mode-header-bg-rgb: 127, 29, 29; --mode-footer-bg: #450a0a; --mode-accent: #dc2626; } html[data-theme="green"] { --mode-bg: #f1f9f3; --mode-surface: #ffffff; --mode-text: #2f4a37; --mode-heading: #0f2e18; --mode-muted: #5f7d68; --mode-border: #d6ecdb; --mode-header-bg: #14532d; --mode-header-bg-rgb: 20, 83, 45; --mode-footer-bg: #0f2e18; --mode-accent: #16a34a; } /* --------------------------------------------------- Re-point the theme's own design-system variables at the active mode. Anything already written with var(--dark)/var(--text)/var(--white)/var(--primary) etc. (home page cards, design-system buttons/badges) re-skins automatically from this alone. --------------------------------------------------- */ html[data-theme="dark"] { --dark: var(--mode-heading); --text: var(--mode-text); --light: var(--mode-surface); --white: var(--mode-surface); --primary: var(--mode-accent); } html[data-theme="blue"] { --dark: var(--mode-heading); --text: var(--mode-text); --light: var(--mode-surface); --white: var(--mode-surface); --primary: var(--mode-accent); } html[data-theme="red"] { --dark: var(--mode-heading); --text: var(--mode-text); --light: var(--mode-surface); --white: var(--mode-surface); --primary: var(--mode-accent); } html[data-theme="green"] { --dark: var(--mode-heading); --text: var(--mode-text); --light: var(--mode-surface); --white: var(--mode-surface); --primary: var(--mode-accent); } /* ========================= BODY / BASE TEXT ========================= */ html[data-theme="dark"] body, html[data-theme="blue"] body, html[data-theme="red"] body, html[data-theme="green"] body { background: var(--mode-bg) !important; color: var(--mode-text) !important; } html[data-theme="dark"] h1, html[data-theme="dark"] h2, html[data-theme="dark"] h3, html[data-theme="dark"] h4, html[data-theme="blue"] h1, html[data-theme="blue"] h2, html[data-theme="blue"] h3, html[data-theme="blue"] h4, html[data-theme="red"] h1, html[data-theme="red"] h2, html[data-theme="red"] h3, html[data-theme="red"] h4, html[data-theme="green"] h1, html[data-theme="green"] h2, html[data-theme="green"] h3, html[data-theme="green"] h4 { color: var(--mode-heading) !important; } /* ========================= HEADER / TOP BAR (mode wins over the header_style/header_bg customizer choice, since picking a mode is a deliberate global skin switch) ========================= */ html[data-theme="dark"] .site-header.solid, html[data-theme="blue"] .site-header.solid, html[data-theme="red"] .site-header.solid, html[data-theme="green"] .site-header.solid { background: var(--mode-header-bg) !important; border-color: transparent !important; } /* Transparent header style must stay fully see-through in every mode - no fill color at all, so the hero behind it shows through. */ html[data-theme="dark"] .site-header.transparent, html[data-theme="blue"] .site-header.transparent, html[data-theme="red"] .site-header.transparent, html[data-theme="green"] .site-header.transparent { background: transparent !important; backdrop-filter: none !important; -webkit-backdrop-filter: none !important; border-color: transparent !important; box-shadow: none !important; } /* Glass header style stays translucent + blurred, just tinted with the active mode's color instead of plain white. */ html[data-theme="dark"] .site-header.glass, html[data-theme="blue"] .site-header.glass, html[data-theme="red"] .site-header.glass, html[data-theme="green"] .site-header.glass { background: rgba(var(--mode-header-bg-rgb), .45) !important; border-color: rgba(255, 255, 255, .18) !important; } /* Logo, search icon, mobile toggle, and top-level nav link text color are now handled automatically by the JS-driven contrast system (assets/js/main.js + assets/css/header-contrast.css), which reads the header's ACTUAL rendered background (including the mode colors set above) and picks readable text itself - so no separate hardcoded color rule is needed here for them. */ /* Desktop dropdown submenu: always re-skinned to match the mode's surface/text colors instead of staying a plain white box. */ html[data-theme="dark"] .nav-menu .sub-menu, html[data-theme="blue"] .nav-menu .sub-menu, html[data-theme="red"] .nav-menu .sub-menu, html[data-theme="green"] .nav-menu .sub-menu { background: var(--mode-surface) !important; border: 1px solid var(--mode-border); } html[data-theme="dark"] .nav-menu .sub-menu li a, html[data-theme="blue"] .nav-menu .sub-menu li a, html[data-theme="red"] .nav-menu .sub-menu li a, html[data-theme="green"] .nav-menu .sub-menu li a { color: var(--mode-text) !important; } /* Mobile slide-out panel stays a solid surface with readable text */ html[data-theme="dark"] .nav-menu, html[data-theme="blue"] .nav-menu, html[data-theme="red"] .nav-menu, html[data-theme="green"] .nav-menu { background: var(--mode-surface) !important; } @media (max-width: 768px) { html[data-theme="dark"] .nav-menu li a, html[data-theme="blue"] .nav-menu li a, html[data-theme="red"] .nav-menu li a, html[data-theme="green"] .nav-menu li a { color: var(--mode-heading) !important; } } /* Top-bar text color is now handled automatically by the JS-driven contrast system (assets/js/main.js), which applies the same header-on-light/header-on-dark class to .top-bar as it does to .site-header (see header-contrast.css). */ /* ========================= FOOTER ========================= */ html[data-theme="dark"] .site-footer, html[data-theme="blue"] .site-footer, html[data-theme="red"] .site-footer, html[data-theme="green"] .site-footer { background: var(--mode-footer-bg) !important; } /* ========================= CARDS (matches every *-card class in the theme: post-card, featured-card, doctor-card, hospital-card, treatment-card, service-card, team-card, benefit-card, why-card, directory-card, plus the generic .card) ========================= */ html[data-theme="dark"] .card, html[data-theme="dark"] [class*="-card"], html[data-theme="blue"] .card, html[data-theme="blue"] [class*="-card"], html[data-theme="red"] .card, html[data-theme="red"] [class*="-card"], html[data-theme="green"] .card, html[data-theme="green"] [class*="-card"] { background: var(--mode-surface) !important; color: var(--mode-text) !important; border-color: var(--mode-border) !important; } html[data-theme="dark"] [class*="-card"] h1, html[data-theme="dark"] [class*="-card"] h2, html[data-theme="dark"] [class*="-card"] h3, html[data-theme="dark"] [class*="-card"] h4, html[data-theme="blue"] [class*="-card"] h1, html[data-theme="blue"] [class*="-card"] h2, html[data-theme="blue"] [class*="-card"] h3, html[data-theme="blue"] [class*="-card"] h4, html[data-theme="red"] [class*="-card"] h1, html[data-theme="red"] [class*="-card"] h2, html[data-theme="red"] [class*="-card"] h3, html[data-theme="red"] [class*="-card"] h4, html[data-theme="green"] [class*="-card"] h1, html[data-theme="green"] [class*="-card"] h2, html[data-theme="green"] [class*="-card"] h3, html[data-theme="green"] [class*="-card"] h4 { color: var(--mode-heading) !important; } /* ========================= SIDEBAR / WIDGETS / FORMS / FILTERS / MISC SURFACES ========================= */ html[data-theme="dark"] .sidebar-widget, html[data-theme="dark"] .newsletter-box, html[data-theme="dark"] .contact-form-box, html[data-theme="dark"] .hospital-filter-form, html[data-theme="dark"] .blog-single, html[data-theme="dark"] .treatment-text-box, html[data-theme="dark"] .hospital-detail, html[data-theme="dark"] .hospital-info, html[data-theme="dark"] .info-box, html[data-theme="dark"] .about-services, html[data-theme="dark"] .faq-item, html[data-theme="dark"] .treatment-faq-item, html[data-theme="dark"] .blog-main, html[data-theme="dark"] .latest-posts, html[data-theme="dark"] .blog-posts-section, html[data-theme="blue"] .sidebar-widget, html[data-theme="blue"] .newsletter-box, html[data-theme="blue"] .contact-form-box, html[data-theme="blue"] .hospital-filter-form, html[data-theme="blue"] .blog-single, html[data-theme="blue"] .treatment-text-box, html[data-theme="blue"] .hospital-detail, html[data-theme="blue"] .hospital-info, html[data-theme="blue"] .info-box, html[data-theme="blue"] .about-services, html[data-theme="blue"] .faq-item, html[data-theme="blue"] .treatment-faq-item, html[data-theme="blue"] .blog-main, html[data-theme="blue"] .latest-posts, html[data-theme="blue"] .blog-posts-section, html[data-theme="red"] .sidebar-widget, html[data-theme="red"] .newsletter-box, html[data-theme="red"] .contact-form-box, html[data-theme="red"] .hospital-filter-form, html[data-theme="red"] .blog-single, html[data-theme="red"] .treatment-text-box, html[data-theme="red"] .hospital-detail, html[data-theme="red"] .hospital-info, html[data-theme="red"] .info-box, html[data-theme="red"] .about-services, html[data-theme="red"] .faq-item, html[data-theme="red"] .treatment-faq-item, html[data-theme="red"] .blog-main, html[data-theme="red"] .latest-posts, html[data-theme="red"] .blog-posts-section, html[data-theme="green"] .sidebar-widget, html[data-theme="green"] .newsletter-box, html[data-theme="green"] .contact-form-box, html[data-theme="green"] .hospital-filter-form, html[data-theme="green"] .blog-single, html[data-theme="green"] .treatment-text-box, html[data-theme="green"] .hospital-detail, html[data-theme="green"] .hospital-info, html[data-theme="green"] .info-box, html[data-theme="green"] .about-services, html[data-theme="green"] .faq-item, html[data-theme="green"] .treatment-faq-item, html[data-theme="green"] .blog-main, html[data-theme="green"] .latest-posts, html[data-theme="green"] .blog-posts-section { background: var(--mode-bg) !important; color: var(--mode-text) !important; } html[data-theme="dark"] .sidebar-widget, html[data-theme="dark"] .newsletter-box, html[data-theme="dark"] .contact-form-box, html[data-theme="blue"] .sidebar-widget, html[data-theme="blue"] .newsletter-box, html[data-theme="blue"] .contact-form-box, html[data-theme="red"] .sidebar-widget, html[data-theme="red"] .newsletter-box, html[data-theme="red"] .contact-form-box, html[data-theme="green"] .sidebar-widget, html[data-theme="green"] .newsletter-box, html[data-theme="green"] .contact-form-box { background: var(--mode-surface) !important; border: 1px solid var(--mode-border); } html[data-theme="dark"] input, html[data-theme="dark"] select, html[data-theme="dark"] textarea, html[data-theme="blue"] input, html[data-theme="blue"] select, html[data-theme="blue"] textarea, html[data-theme="red"] input, html[data-theme="red"] select, html[data-theme="red"] textarea, html[data-theme="green"] input, html[data-theme="green"] select, html[data-theme="green"] textarea { background: var(--mode-surface) !important; color: var(--mode-text) !important; border-color: var(--mode-border) !important; } /* ========================= FAQ (home page) .faq-question/.faq-item had their own hardcoded white background, more specific than the general surface rule above, so it kept showing white - while the question text (no color of its own) inherited the mode's light body text color, making it invisible on that leftover white box. ========================= */ html[data-theme="dark"] .faq-item, html[data-theme="dark"] .faq-question, html[data-theme="blue"] .faq-item, html[data-theme="blue"] .faq-question, html[data-theme="red"] .faq-item, html[data-theme="red"] .faq-question, html[data-theme="green"] .faq-item, html[data-theme="green"] .faq-question { background: var(--mode-surface) !important; border-color: var(--mode-border) !important; } html[data-theme="dark"] .faq-question, html[data-theme="blue"] .faq-question, html[data-theme="red"] .faq-question, html[data-theme="green"] .faq-question { color: var(--mode-heading) !important; } html[data-theme="dark"] .faq-answer, html[data-theme="blue"] .faq-answer, html[data-theme="red"] .faq-answer, html[data-theme="green"] .faq-answer { color: var(--mode-text) !important; } /* ========================= HERO SECTIONS - TEXT STAYS FIXED IN EVERY MODE Every hero (home, About, Contact, Blog) always sits on its OWN dark image/gradient overlay regardless of Theme Mode, so its title/description/badge must always stay white/light for readability - never follow the mode's heading/text color (that's what was turning hero text green/red/blue and hard to read). These selectors are more specific than the plain "h1,h2,h3,h4" rule above, so they always win over it. ========================= */ html[data-theme="dark"] .hero-content h1, html[data-theme="dark"] .about-hero h1, html[data-theme="dark"] .contact-hero h1, html[data-theme="dark"] .blog-hero h1, html[data-theme="blue"] .hero-content h1, html[data-theme="blue"] .about-hero h1, html[data-theme="blue"] .contact-hero h1, html[data-theme="blue"] .blog-hero h1, html[data-theme="red"] .hero-content h1, html[data-theme="red"] .about-hero h1, html[data-theme="red"] .contact-hero h1, html[data-theme="red"] .blog-hero h1, html[data-theme="green"] .hero-content h1, html[data-theme="green"] .about-hero h1, html[data-theme="green"] .contact-hero h1, html[data-theme="green"] .blog-hero h1 { color: #ffffff !important; } html[data-theme="dark"] .hero-content p, html[data-theme="dark"] .about-hero p, html[data-theme="dark"] .contact-hero p, html[data-theme="dark"] .blog-hero p, html[data-theme="blue"] .hero-content p, html[data-theme="blue"] .about-hero p, html[data-theme="blue"] .contact-hero p, html[data-theme="blue"] .blog-hero p, html[data-theme="red"] .hero-content p, html[data-theme="red"] .about-hero p, html[data-theme="red"] .contact-hero p, html[data-theme="red"] .blog-hero p, html[data-theme="green"] .hero-content p, html[data-theme="green"] .about-hero p, html[data-theme="green"] .contact-hero p, html[data-theme="green"] .blog-hero p { color: rgba(255, 255, 255, .88) !important; } html[data-theme="dark"] .hero-subtitle, html[data-theme="dark"] .about-hero .badge, html[data-theme="dark"] .contact-hero .badge, html[data-theme="dark"] .blog-hero-badge, html[data-theme="blue"] .hero-subtitle, html[data-theme="blue"] .about-hero .badge, html[data-theme="blue"] .contact-hero .badge, html[data-theme="blue"] .blog-hero-badge, html[data-theme="red"] .hero-subtitle, html[data-theme="red"] .about-hero .badge, html[data-theme="red"] .contact-hero .badge, html[data-theme="red"] .blog-hero-badge, html[data-theme="green"] .hero-subtitle, html[data-theme="green"] .about-hero .badge, html[data-theme="green"] .contact-hero .badge, html[data-theme="green"] .blog-hero-badge { color: #ffffff !important; background: rgba(255, 255, 255, .15) !important; } /* ========================= CTA BOX & FOOTER NEWSLETTER BOX Both always sit on their own colored gradient background (CTA = fixed blue gradient, Newsletter = brand/primary gradient) in every mode, so - exactly like the hero sections above - their text must stay white and NOT follow the mode's heading/text color. ========================= */ html[data-theme="dark"] .cta-content h2, html[data-theme="dark"] .footer-newsletter h2, html[data-theme="blue"] .cta-content h2, html[data-theme="blue"] .footer-newsletter h2, html[data-theme="red"] .cta-content h2, html[data-theme="red"] .footer-newsletter h2, html[data-theme="green"] .cta-content h2, html[data-theme="green"] .footer-newsletter h2 { color: #ffffff !important; } html[data-theme="dark"] .cta-content p, html[data-theme="dark"] .footer-newsletter p, html[data-theme="blue"] .cta-content p, html[data-theme="blue"] .footer-newsletter p, html[data-theme="red"] .cta-content p, html[data-theme="red"] .footer-newsletter p, html[data-theme="green"] .cta-content p, html[data-theme="green"] .footer-newsletter p { color: rgba(255, 255, 255, .9) !important; } /* The newsletter's white pill button used var(--dark) for its text, but that variable gets repointed per mode (e.g. becomes near-white in Dark mode), making the text invisible on the button's white background. Lock it to a fixed dark color. */ html[data-theme="dark"] .footer-newsletter-form .btn-primary, html[data-theme="blue"] .footer-newsletter-form .btn-primary, html[data-theme="red"] .footer-newsletter-form .btn-primary, html[data-theme="green"] .footer-newsletter-form .btn-primary { color: #0f172a !important; }