/* ===================================================== TEMPLE OF HORUS EDFU Dark Mode Styles File: assets/css/dark-mode.css ===================================================== */ /* Add to via JS or PHP: body.dark-mode or [data-theme="dark"] */ /* ===================================================== ROOT COLORS ===================================================== */ body.dark-mode, [data-theme="dark"] { --dark-bg: #121212; --dark-surface: #1c1c1c; --dark-card: #242424; --dark-border: #353535; --dark-text: #f5f2e8; --dark-muted: #d6d1c5; --dark-gold: #d4b549; --dark-blue: #5ca0d3; background: var(--dark-bg); color: var(--dark-text); } /* ===================================================== BODY ===================================================== */ body.dark-mode, [data-theme="dark"] body { background: var(--dark-bg); color: var(--dark-text); } /* ===================================================== TYPOGRAPHY ===================================================== */ body.dark-mode h1, body.dark-mode h2, body.dark-mode h3, body.dark-mode h4, body.dark-mode h5, body.dark-mode h6, [data-theme="dark"] h1, [data-theme="dark"] h2, [data-theme="dark"] h3, [data-theme="dark"] h4, [data-theme="dark"] h5, [data-theme="dark"] h6 { color: var(--dark-text); } body.dark-mode p, body.dark-mode li, [data-theme="dark"] p, [data-theme="dark"] li { color: var(--dark-muted); } /* ===================================================== LINKS ===================================================== */ body.dark-mode a, [data-theme="dark"] a { color: var(--dark-blue); } body.dark-mode a:hover, [data-theme="dark"] a:hover { color: var(--dark-gold); } /* ===================================================== HEADER ===================================================== */ body.dark-mode .site-header, [data-theme="dark"] .site-header { background: var(--dark-surface); border-bottom-color: var(--dark-gold); } body.dark-mode .site-title, body.dark-mode .main-navigation a, [data-theme="dark"] .site-title, [data-theme="dark"] .main-navigation a { color: var(--dark-text); } /* ===================================================== TOP BAR ===================================================== */ body.dark-mode .top-bar, [data-theme="dark"] .top-bar { background: #000; } /* ===================================================== TEMPLE CARDS ===================================================== */ body.dark-mode .archive-card, body.dark-mode .offering-card, body.dark-mode .temple-space, body.dark-mode .sidebar-card, body.dark-mode .benefit-card, body.dark-mode .detail-card, body.dark-mode .category-card, [data-theme="dark"] .archive-card, [data-theme="dark"] .offering-card, [data-theme="dark"] .temple-space, [data-theme="dark"] .sidebar-card, [data-theme="dark"] .benefit-card, [data-theme="dark"] .detail-card, [data-theme="dark"] .category-card { background: var(--dark-card); border-color: var(--dark-border); box-shadow: none; } /* ===================================================== CONTENT AREAS ===================================================== */ body.dark-mode .single-content-section, body.dark-mode .archive-content-section, body.dark-mode .marketplace-section, body.dark-mode .festival-section, body.dark-mode .daily-service, [data-theme="dark"] .single-content-section, [data-theme="dark"] .archive-content-section, [data-theme="dark"] .marketplace-section, [data-theme="dark"] .festival-section, [data-theme="dark"] .daily-service { background: var(--dark-bg); } /* ===================================================== PAGE HEADERS ===================================================== */ body.dark-mode .page-header-section, body.dark-mode .archive-hero, body.dark-mode .search-hero, [data-theme="dark"] .page-header-section, [data-theme="dark"] .archive-hero, [data-theme="dark"] .search-hero { background: var(--dark-surface); } /* ===================================================== BREADCRUMBS ===================================================== */ body.dark-mode .breadcrumb-bar, [data-theme="dark"] .breadcrumb-bar { background: var(--dark-surface); } /* ===================================================== BUTTONS ===================================================== */ body.dark-mode .button, body.dark-mode .woocommerce a.button, body.dark-mode .woocommerce button.button, [data-theme="dark"] .button, [data-theme="dark"] .woocommerce a.button, [data-theme="dark"] .woocommerce button.button { background: var(--dark-gold); color: #000 !important; } body.dark-mode .button:hover, body.dark-mode .woocommerce a.button:hover, [data-theme="dark"] .button:hover, [data-theme="dark"] .woocommerce a.button:hover { background: var(--dark-blue); color: #fff !important; } /* ===================================================== SEARCH FORM ===================================================== */ body.dark-mode input, body.dark-mode textarea, body.dark-mode select, [data-theme="dark"] input, [data-theme="dark"] textarea, [data-theme="dark"] select { background: var(--dark-card); color: var(--dark-text); border: 1px solid var(--dark-border); } /* ===================================================== WOOCOMMERCE ===================================================== */ body.dark-mode .woocommerce div.product, body.dark-mode .woocommerce-cart table.cart, body.dark-mode .woocommerce-checkout-review-order, [data-theme="dark"] .woocommerce div.product, [data-theme="dark"] .woocommerce-cart table.cart, [data-theme="dark"] .woocommerce-checkout-review-order { background: var(--dark-card); color: var(--dark-text); } body.dark-mode .woocommerce ul.products li.product, [data-theme="dark"] .woocommerce ul.products li.product { background: var(--dark-card); } body.dark-mode .woocommerce .price, [data-theme="dark"] .woocommerce .price { color: var(--dark-gold); } /* ===================================================== TABLES ===================================================== */ body.dark-mode table, [data-theme="dark"] table { border-color: var(--dark-border); } body.dark-mode th, [data-theme="dark"] th { background: #000; color: var(--dark-text); } body.dark-mode td, [data-theme="dark"] td { border-color: var(--dark-border); } /* ===================================================== QUOTES ===================================================== */ body.dark-mode blockquote, body.dark-mode .house-quote, [data-theme="dark"] blockquote, [data-theme="dark"] .house-quote { background: rgba(255,255,255,.03); border-left: 4px solid var(--dark-gold); } /* ===================================================== LOCATION / BADGES ===================================================== */ body.dark-mode .temple-location-badge, body.dark-mode .offering-badge, [data-theme="dark"] .temple-location-badge, [data-theme="dark"] .offering-badge { background: var(--dark-gold); color: #000; } body.dark-mode .term-badge, [data-theme="dark"] .term-badge { background: var(--dark-blue); } /* ===================================================== FOOTER ===================================================== */ body.dark-mode .site-footer, [data-theme="dark"] .site-footer { background: #080808; } body.dark-mode .footer-divider, [data-theme="dark"] .footer-divider { border-color: rgba(255,255,255,.08); } /* ===================================================== HERO OVERLAY ===================================================== */ body.dark-mode .temple-hero, [data-theme="dark"] .temple-hero { background-blend-mode: multiply; } /* ===================================================== IMAGE TREATMENT ===================================================== */ body.dark-mode img, [data-theme="dark"] img { opacity: .95; } /* ===================================================== DARK MODE TOGGLE BUTTON ===================================================== */ .dark-mode-toggle { position: fixed; bottom: 20px; right: 20px; z-index: 9999; width: 50px; height: 50px; border-radius: 50%; border: none; background: var(--horus-gold); color: #000; cursor: pointer; box-shadow: 0 5px 20px rgba(0,0,0,.3); } .dark-mode-toggle:hover { background: var(--lapis-blue); color: #fff; }