/** * theme_global.css * Universal Pañcabhūta theme overrides for all member/public pages. * Applied ON TOP of each page's existing CSS via data-theme attribute on . * Targets broad selectors common across all pages. */ /* ── Body ─────────────────────────────────────────────────────── */ body { background: var(--pb-bg) fixed !important; color: var(--pb-text) !important; transition: background 0.4s ease, color 0.3s ease !important; } /* ── Common card / panel / surface containers ─────────────────── */ /* Explicitly exclude flash-sale and modal elements that must keep their own branding */ .card:not(.flash-box):not(.flash-item):not(.flash-header):not(.flash-footer):not(.flash-grid), .panel:not([class*="flash"]), .module, .widget, .block, .member-card, .info-card, .stat-card, .detail-card, .form-card, .form-panel, .login-card, .login-box, .cart-summary, .summary-card, .order-card, .glass-card, .glass-panel, [class*="-card"]:not([class*="flash"]):not([class*="btn"]):not(.product-card), [class*="-panel"]:not([class*="flash"]):not([class*="btn"]), [class*="-box"]:not([class*="flash"]):not([class*="btn"]):not(#cartModalBox):not(#comingSoonModal > div) { background: var(--pb-surface) !important; border-color: var(--pb-border) !important; color: var(--pb-text) !important; } /* ── Headers & Navbars ─────────────────────────────────────────── */ .header, .navbar, .nav-bar, .top-nav, .shop-header, .member-header, .page-header, .site-header, header:not(.flash-header) { background: var(--pb-header-bg) !important; color: var(--pb-header-text) !important; border-bottom-color: var(--pb-border) !important; } /* ── Sidebars ──────────────────────────────────────────────────── */ .sidebar, .side-nav, .left-nav, .nav-sidebar, [class*="sidebar"], [class*="sidenav"] { background: var(--pb-surface-solid) !important; border-color: var(--pb-border) !important; } /* ── Tables ────────────────────────────────────────────────────── */ table:not([class*="flash"]) { color: var(--pb-text) !important; } th { background: var(--pb-surface2) !important; color: var(--pb-text-muted) !important; border-color: var(--pb-border) !important; } td { border-color: var(--pb-border) !important; } tr:hover td { background: var(--pb-surface2) !important; } /* ── Headings & Muted text ─────────────────────────────────────── */ h1, h2, h3, h4, h5, h6 { color: var(--pb-text) !important; } .text-muted, .muted, .subtitle, .subtext, .label, [class*="muted"], [class*="secondary-text"] { color: var(--pb-text-muted) !important; } /* ── Form inputs ───────────────────────────────────────────────── */ input:not([type="submit"]):not([type="button"]):not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="file"]), textarea, select { background: var(--pb-input-bg) !important; color: var(--pb-input-text) !important; border-color: var(--pb-input-border) !important; transition: border-color 0.2s, box-shadow 0.2s !important; } input:focus, textarea:focus, select:focus { border-color: var(--pb-input-focus) !important; box-shadow: 0 0 0 3px var(--pb-shimmer) !important; outline: none !important; } input::placeholder, textarea::placeholder { color: var(--pb-input-ph) !important; } label { color: var(--pb-text-muted) !important; } /* ── Links ─────────────────────────────────────────────────────── */ a:not(.btn):not([class*="btn"]):not([class*="badge"]) { color: var(--pb-link) !important; } /* ── Dividers & Borders ────────────────────────────────────────── */ hr { border-color: var(--pb-border) !important; } /* ── online_shop.php specific overrides ─────────────────────────── */ /* Fix product-title which uses --text-dark (a local var, not pb var) */ .product-title { color: var(--pb-text) !important; } .product-card:hover .product-title { color: var(--pb-primary) !important; } /* Header bg is white in online_shop — override to theme header */ header .logo h1 { color: var(--pb-primary) !important; } /* Search bar input uses --border which is a local var */ .search-bar input { background: var(--pb-input-bg) !important; color: var(--pb-input-text) !important; border-color: var(--pb-primary) !important; } /* Nav buttons readable in both light and dark themes */ .nav-btn { color: var(--pb-text) !important; } .nav-btn.primary-btn { color: #fff !important; } /* Category nav */ .cat-nav { background: var(--pb-surface-solid) !important; border-top-color: var(--pb-border) !important; } .cat-nav-btn { color: var(--pb-text-muted) !important; } .cat-nav-btn.active, .cat-nav-btn:hover { color: var(--pb-primary) !important; } /* Promo strip cards */ .promo-card { background: var(--pb-surface) !important; border-color: var(--pb-border) !important; } .promo-text strong { color: var(--pb-text) !important; } .promo-text span { color: var(--pb-text-muted) !important; } /* No products placeholder */ .no-products { background: var(--pb-surface) !important; border-color: var(--pb-border) !important; color: var(--pb-text-muted) !important; } /* ── Product cards — always readable regardless of theme ─────────── */ /* The product card image area keeps a neutral bg, text is always visible */ .product-card { background: var(--pb-surface) !important; border-color: var(--pb-border) !important; color: var(--pb-text) !important; } .product-card .product-title, .product-card .product-name, .product-card [class*="-title"], .product-card [class*="product-name"], .product-card h6, .product-card p { color: var(--pb-text) !important; } .product-card:hover .product-title, .product-card:hover .product-name { color: var(--pb-primary) !important; } .product-card .product-image, .product-card .product-media, .product-card [class*="product-image"] { background: var(--pb-surface2) !important; } /* Price text always uses theme primary, EXCEPT for solid tags like .price-tag */ .product-card .price, .product-card [class*="price"]:not(.price-tag):not(.flash-item-price) { color: var(--pb-primary) !important; } /* Ensure solid price tags have a visible contrasting background */ .price-tag { background: var(--pb-btn-gradient, var(--pb-primary, #6b4dfc)) !important; color: #ffffff !important; text-shadow: 0 1px 3px rgba(0,0,0,0.4) !important; } /* Stock indicators keep semantic colors */ .stock-indicator:not(.stock-out):not(.stock-low) { background: var(--pb-success-bg) !important; color: var(--pb-success) !important; } /* ── Flash Sale Popup — NEVER override, keeps its own branding ─── */ /* Explicitly protect all flash-* classes from theme_global overrides */ #flashPopup, .flash-box, .flash-header, .flash-sub, .flash-grid, .flash-footer, .flash-item, .flash-item-img, .flash-item-body, .flash-item-name, .flash-item-price, .flash-badge, .flash-close, .flash-shop-btn, .flash-dont-show, .flash-oos-badge, .flash-pub-badge { background: revert !important; color: revert !important; border-color: revert !important; } /* Re-apply only the values that matter */ .flash-box { background: #fff !important; } .flash-header { background: linear-gradient(135deg,#ff4747 0%,#ff9000 100%) !important; } .flash-header h2 { color: #fff !important; } .flash-sub { background: rgba(0,0,0,0.18) !important; color: rgba(255,255,255,0.9) !important; } .flash-item { background: #fafafa !important; border-color: #f0f0f0 !important; color: inherit !important; } .flash-item-img { background: #f5f5f5 !important; } .flash-item-name { color: #1a1a1a !important; } .flash-item-price { color: #ff4747 !important; } .flash-footer { background: #fff !important; border-top-color: #f0f0f0 !important; } .flash-shop-btn { background: linear-gradient(135deg,#ff4747,#ff9000) !important; color: #fff !important; } /* ── Visitor bar keeps dark cosmic look ─────────────────────────── */ .visitor-bar { background: linear-gradient(135deg,#1a1a2e,#16213e) !important; color: #fff !important; } .visitor-bar .vs-text strong { color: #fff !important; } .visitor-bar .vs-text span { color: rgba(255,255,255,0.55) !important; } /* ── Coming soon modal keeps its own white card ─────────────────── */ #comingSoonModal > div { background: white !important; color: #1a1a2e !important; } /* ── Modals & Overlays ─────────────────────────────────────────── */ .modal-content, .modal-box, .popup-box, [class*="modal-content"], [class*="dialog"] { background: var(--pb-surface-solid) !important; color: var(--pb-text) !important; border-color: var(--pb-border) !important; } /* ── Badges / Tags ─────────────────────────────────────────────── */ .badge-success, .tag-success, .status-active { background: var(--pb-success-bg) !important; color: var(--pb-success) !important; } .badge-danger, .tag-danger, .status-danger { background: var(--pb-danger-bg) !important; color: var(--pb-danger) !important; } /* ── Scrollbar ─────────────────────────────────────────────────── */ ::-webkit-scrollbar { width: 6px; } ::-webkit-scrollbar-track { background: transparent; } ::-webkit-scrollbar-thumb { border-radius: 3px; } /* ── Page wrappers & main content ──────────────────────────────── */ .page-wrap, .page-content, .main-content, .container, .content-wrap, .inner-wrap, [class*="page-wrap"], [class*="main-content"] { color: var(--pb-text) !important; } /* ── Section headings / dividers ───────────────────────────────── */ .section-title, .section-header, .page-title { color: var(--pb-text) !important; } /* ── Top announcement bar ──────────────────────────────────────── */ .top-bar, .announcement-bar, .promo-bar { background: var(--pb-top-bar) !important; color: #fff !important; } /* ── memberPage specific ───────────────────────────────────────── */ .member-portal, .portal-content, .member-wrap { background: var(--pb-bg) !important; color: var(--pb-text) !important; } .member-nav, .member-sidebar { background: var(--pb-surface-solid) !important; border-color: var(--pb-border) !important; } .member-info-box, .member-stat { background: var(--pb-surface) !important; border-color: var(--pb-border) !important; color: var(--pb-text) !important; } /* ── coop_index / landing specific ─────────────────────────────── */ .hero, .hero-section, .hero-content { color: var(--pb-text) !important; } /* ── Product pages ──────────────────────────────────────────────── */ .product-detail, .product-info, .product-price { color: var(--pb-text) !important; } .price, .product-price { color: var(--pb-primary) !important; } /* ── Toast / Flash messages ─────────────────────────────────────── */ #toast, .toast, [id*="toast"] { background: var(--pb-surface-solid) !important; color: var(--pb-text) !important; border-color: var(--pb-border) !important; } /* ── All themes: themed card shadow ────────────────────────────── */ [data-theme] .card:not(.flash-box):not(.flash-item), [data-theme] .panel:not([class*="flash"]), [data-theme] .member-card, [data-theme] .product-card, [data-theme] .promo-card, [data-theme] .form-card, [data-theme] .login-card { box-shadow: var(--pb-card-shadow, 0 4px 20px rgba(0,0,0,0.4)) !important; } /* ══════════════════════════════════════════════════════════════════ LIGHT MODE — Universal Background & Local-Variable Fix ────────────────────────────────────────────────────────────────── Problem: pages set section backgrounds via local CSS vars like var(--light), var(--dark), var(--bg-page), var(--card) which are overridden by theme_picker_widget to dark hex values in dark mode. In light mode those injections are NOT reverted, so sections stay dark even when --pb-bg is the correct light gradient on . Fix: override the local vars AND directly target the most common section/wrapper patterns with the --pb-* light tokens. ══════════════════════════════════════════════════════════════════ */ /* ── 1. Re-map local page CSS vars to light values ─────────────── This neutralises the dark --light / --dark / --bg-page values injected per-theme by theme_picker_widget.php's style block. */ [data-mode="light"] { /* Local semantic inversions used by many page stylesheets */ --light: var(--pb-bg-solid) !important; --dark: var(--pb-text) !important; --bg-page: var(--pb-bg-solid) !important; --bg-white: var(--pb-surface-solid) !important; --bg-gray: var(--pb-surface2-solid) !important; --card: var(--pb-surface-solid) !important; --ink: var(--pb-text) !important; --muted: var(--pb-text-muted) !important; --text-dark: var(--pb-text) !important; --text-mid: var(--pb-text-muted) !important; --text-light: var(--pb-text-faint) !important; --chip-bg: var(--pb-surface2-solid) !important; --input-bg: var(--pb-input-bg) !important; /* Common Bootstrap / page-level names */ --bs-body-bg: var(--pb-bg-solid) !important; --bs-body-color:var(--pb-text) !important; } /* ── 2. Body ──────────────────────────────────────────────────── */ [data-mode="light"] body { background: var(--pb-bg) fixed !important; color: var(--pb-text) !important; background-color: var(--pb-bg-solid) !important; } /* ── 3. All named page sections ───────────────────────────────── */ [data-mode="light"] section:not([class*="flash"]), [data-mode="light"] .features, [data-mode="light"] .products, [data-mode="light"] .services, [data-mode="light"] .hero, [data-mode="light"] .hero-section, [data-mode="light"] .login-section, [data-mode="light"] .login-container, [data-mode="light"] .contact-section, [data-mode="light"] .member-section, [data-mode="light"] .shop-section, [data-mode="light"] [class*="-section"]:not([class*="flash"]) { background: var(--pb-bg-solid) !important; background-color: var(--pb-bg-solid) !important; color: var(--pb-text) !important; } /* ── 4. Feature / service cards ───────────────────────────────── */ [data-mode="light"] .feature-card, [data-mode="light"] .service-card, [data-mode="light"] .info-card, [data-mode="light"] .stat-card, [data-mode="light"] .promo-card, [data-mode="light"] .login-card, [data-mode="light"] .form-card { background: var(--pb-surface-solid) !important; background-color: var(--pb-surface-solid) !important; color: var(--pb-text) !important; box-shadow: var(--pb-card-shadow) !important; border-color: var(--pb-border) !important; } /* ── 5. Page wrappers that inherit body bg ────────────────────── */ [data-mode="light"] .page-wrap, [data-mode="light"] .page-content, [data-mode="light"] .main-content, [data-mode="light"] .container, [data-mode="light"] main { background: transparent !important; color: var(--pb-text) !important; } /* ── 6. Headings & text ───────────────────────────────────────── */ [data-mode="light"] h1, [data-mode="light"] h2, [data-mode="light"] h3, [data-mode="light"] h4, [data-mode="light"] h5, [data-mode="light"] h6 { color: var(--pb-text) !important; } [data-mode="light"] .text-muted, [data-mode="light"] .muted, [data-mode="light"] .subtitle, [data-mode="light"] [class*="muted"] { color: var(--pb-text-muted) !important; } /* ── 7. Dividers ──────────────────────────────────────────────── */ [data-mode="light"] hr { border-color: var(--pb-border) !important; opacity: 0.5; } /* ── 8. Light-mode card shadow correction ─────────────────────── */ [data-mode="light"][data-theme] .card:not(.flash-box):not(.flash-item), [data-mode="light"][data-theme] .panel:not([class*="flash"]), [data-mode="light"][data-theme] .member-card, [data-mode="light"][data-theme] .product-card, [data-mode="light"][data-theme] .promo-card, [data-mode="light"][data-theme] .form-card, [data-mode="light"][data-theme] .login-card { box-shadow: var(--pb-card-shadow, 0 2px 12px rgba(0,0,0,0.08)) !important; } /* ── 9. coop_index specific ───────────────────────────────────── */ /* The hero gradient overlay must use lighter opacity in light mode */ [data-mode="light"] .hero { background: var(--pb-btn-gradient) !important; opacity: 0.95; } [data-mode="light"] .hero, [data-mode="light"] .hero h2, [data-mode="light"] .hero p, [data-mode="light"] .hero .hero-content { color: #FFFFFF !important; } /* ── 10. Inputs & forms in light mode ─────────────────────────── */ [data-mode="light"] input:not([type="submit"]):not([type="button"]):not([type="checkbox"]):not([type="radio"]), [data-mode="light"] textarea, [data-mode="light"] select { background-color: var(--pb-surface-solid) !important; background: var(--pb-surface-solid) !important; color: var(--pb-input-text) !important; border-color: var(--pb-input-border) !important; } [data-mode="light"] input::placeholder, [data-mode="light"] textarea::placeholder { color: var(--pb-input-ph) !important; } [data-mode="light"] label { color: var(--pb-text-muted) !important; } /* ── 11. Tables in light mode ─────────────────────────────────── */ [data-mode="light"] table:not([class*="flash"]) { color: var(--pb-text) !important; } [data-mode="light"] th { background-color: var(--pb-surface2-solid) !important; color: var(--pb-text-muted) !important; border-color: var(--pb-border) !important; } [data-mode="light"] td { border-color: var(--pb-border) !important; } [data-mode="light"] tr:hover td { background-color: var(--pb-surface2-solid) !important; } /* ── 12. Sidebar / nav in light mode ──────────────────────────── */ [data-mode="light"] .sidebar, [data-mode="light"] .side-nav, [data-mode="light"] [class*="sidebar"], [data-mode="light"] .member-nav, [data-mode="light"] .member-sidebar { background-color: var(--pb-surface-solid) !important; border-color: var(--pb-border) !important; } /* ── 13. Toast / alerts in light mode ─────────────────────────── */ [data-mode="light"] #toast, [data-mode="light"] .toast, [data-mode="light"] [id*="toast"] { background-color: var(--pb-surface-solid) !important; color: var(--pb-text) !important; border-color: var(--pb-border) !important; } /* ════════════════════════════════════════════════════════════════ member_login.php — Input Visibility Fix Overrides Bootstrap .form-control and related elements to use --pb-* tokens so the Service Number, CAPTCHA, and OTP fields always render with readable text on the themed background. ════════════════════════════════════════════════════════════════ */ /* ── Login card surface ─────────────────────────────────────── */ [data-theme] .login-container { background: var(--pb-surface-solid, #ffffff) !important; border: 1px solid var(--pb-border) !important; box-shadow: var(--pb-card-shadow) !important; color: var(--pb-text) !important; } /* ── All inputs on login page ───────────────────────────────── */ [data-theme] .login-container .form-control, [data-theme] .login-container input[type="number"], [data-theme] .login-container input[type="text"], [data-theme] .login-container input[type="password"] { background-color: var(--pb-input-bg, rgba(255,255,255,0.07)) !important; color: var(--pb-input-text, #f1f5f9) !important; border-color: var(--pb-input-border,rgba(255,255,255,0.2)) !important; caret-color: var(--pb-primary) !important; } [data-theme] .login-container .form-control::placeholder, [data-theme] .login-container input::placeholder { color: var(--pb-input-ph, #94a3b8) !important; opacity: 1; } [data-theme] .login-container .form-control:focus, [data-theme] .login-container input:focus { border-color: var(--pb-input-focus) !important; box-shadow: 0 0 0 3px color-mix(in srgb, var(--pb-primary) 20%, transparent), 0 0 0 3px rgba(120,80,220,0.15) !important; background-color: var(--pb-input-bg, rgba(255,255,255,0.10)) !important; color: var(--pb-input-text) !important; } /* ── Input group icon cell ──────────────────────────────────── */ [data-theme] .login-container .input-group-text { background-color: var(--pb-surface2-solid, rgba(255,255,255,0.06)) !important; color: var(--pb-text-muted) !important; border-color: var(--pb-input-border) !important; } /* ── CAPTCHA background strip ───────────────────────────────── */ [data-theme] .login-container .captcha-container { background: var(--pb-surface2-solid, rgba(255,255,255,0.05)) !important; border: 1px solid var(--pb-border) !important; } /* ── OTP note stripe ────────────────────────────────────────── */ [data-theme] .login-container .otp-note { background: var(--pb-surface2-solid) !important; border-color:var(--pb-primary) !important; color: var(--pb-text-muted) !important; } /* ── Labels in login card ───────────────────────────────────── */ [data-theme] .login-container .form-label, [data-theme] .login-container label { color: var(--pb-text-muted) !important; } /* ── LIGHT MODE: white inputs on light surface ──────────────── */ [data-mode="light"] .login-container .form-control, [data-mode="light"] .login-container input[type="number"], [data-mode="light"] .login-container input[type="text"] { background-color: var(--pb-surface-solid, #ffffff) !important; color: var(--pb-input-text) !important; border-color: var(--pb-input-border) !important; } [data-mode="light"] .login-container .input-group-text { background-color: var(--pb-surface2-solid, #f0f0f0) !important; color: var(--pb-text-muted) !important; border-color: var(--pb-input-border) !important; } [data-mode="light"] .login-container .captcha-container { background: var(--pb-surface2-solid, #f8f9fa) !important; border: 1px solid var(--pb-border) !important; } /* ════════════════════════════════════════════════════════════════ Fix for header items on product details and public product pages when light themes are applied. ════════════════════════════════════════════════════════════════ */ [data-theme] header:not(.flash-header) .back-btn, [data-theme] header:not(.flash-header) .hbtn, [data-theme] header:not(.flash-header) #headerCartBtn { background: var(--pb-surface2) !important; color: var(--pb-header-text) !important; border: 1px solid var(--pb-border) !important; } [data-theme] header:not(.flash-header) .back-btn:hover, [data-theme] header:not(.flash-header) .hbtn:hover, [data-theme] header:not(.flash-header) #headerCartBtn:hover { background: var(--pb-surface) !important; color: var(--pb-primary) !important; border-color: var(--pb-primary) !important; } [data-theme] header:not(.flash-header) .logo-text h1, [data-theme] header:not(.flash-header) .logo-text p, [data-theme] header:not(.flash-header) .logo span { color: var(--pb-header-text) !important; }