/* ============================================ ECHO PACK — Theme System Default: data-theme="light" (hardcoded on ) Dark: data-theme="dark" (applied by JS) ============================================ */ /* ---- Light Theme (default) ---- */ html[data-theme="light"] { --bg-deep: #F2F5F9; --bg-surface: #FFFFFF; --bg-card: #F8FAFC; --border: #D5DDE8; --border-glow: #B8C8DC; --cyan: #0098C8; --cyan-dim: rgba(0,152,200,0.10); --cyan-glow: rgba(0,152,200,0.25); --amber: #E07800; --amber-dim: rgba(224,120,0,0.08); --text: #1A2A3C; --text-dim: #4A6078; --text-muted: #8898AC; --white: #0C1A2C; --grid-color: rgba(0,152,200,0.05); } html[data-theme="light"] .topbar { background: rgba(242,245,249,0.94); } html[data-theme="light"] .btn-cyan { color: #FFFFFF; } html[data-theme="light"] .btn-cyan:hover { background: #0088B0; } html[data-theme="light"] .btn-video { border-color: rgba(0,0,0,0.2); } html[data-theme="light"] .comp-item img { filter: grayscale(30%) brightness(0.95); } html[data-theme="light"] .comp-item .overlay { background: linear-gradient(transparent, rgba(242,245,249,0.9)); } html[data-theme="light"] .product-tile .img-wrap img { filter: grayscale(20%) contrast(1.05); } html[data-theme="light"] .product-tile .img-wrap .tag { color: #FFFFFF; } html[data-theme="light"] .product-tile:hover { box-shadow: 0 20px 60px rgba(0,152,200,0.08); } html[data-theme="light"] .video-overlay { background: rgba(255,255,255,0.96); } html[data-theme="light"] .video-overlay .close-btn { color: var(--text); border-color: rgba(0,0,0,0.2); } html[data-theme="light"] .gallery-item img { filter: grayscale(15%) brightness(0.95); } html[data-theme="light"] .gallery-item .cap { background: linear-gradient(transparent, rgba(242,245,249,0.92)); } /* ---- Dark Theme ---- */ html[data-theme="dark"] { --bg-deep: #060D1A; --bg-surface: #0A1225; --bg-card: #0E1830; --border: #142040; --border-glow: #1A3060; --cyan: #00C8FF; --cyan-dim: rgba(0,200,255,0.15); --cyan-glow: rgba(0,200,255,0.35); --amber: #FF8C00; --amber-dim: rgba(255,140,0,0.12); --text: #E0E8F0; --text-dim: #607090; --text-muted: #304060; --white: #F0F4FF; --grid-color: rgba(0,200,255,0.06); } html[data-theme="dark"] .topbar { background: rgba(6,13,26,0.92); } html[data-theme="dark"] .btn-cyan { color: var(--bg-deep); } html[data-theme="dark"] .btn-cyan:hover { background: #00B8EE; } html[data-theme="dark"] .btn-video { border-color: rgba(255,255,255,0.3); } html[data-theme="dark"] .comp-item img { filter: grayscale(40%) brightness(0.8); } html[data-theme="dark"] .comp-item .overlay { background: linear-gradient(transparent, rgba(6,13,26,0.9)); } html[data-theme="dark"] .product-tile .img-wrap img { filter: grayscale(30%) contrast(1.1); } html[data-theme="dark"] .product-tile .img-wrap .tag { color: var(--bg-deep); } html[data-theme="dark"] .product-tile:hover { box-shadow: 0 20px 60px rgba(0,200,255,0.1); } html[data-theme="dark"] .adv-card:hover { background: var(--bg-deep); } html[data-theme="dark"] .video-overlay { background: rgba(0,0,0,0.92); } html[data-theme="dark"] .video-overlay .close-btn { color: var(--white); border-color: rgba(255,255,255,0.3); } html[data-theme="dark"] .gallery-item img { filter: grayscale(20%) brightness(0.9); } html[data-theme="dark"] .gallery-item .cap { background: linear-gradient(transparent, rgba(6,13,26,0.92)); } /* ============ THEME TOGGLE BUTTON ============ */ .theme-toggle { position: relative; width: 44px; height: 44px; background: transparent; border: 1px solid var(--border); cursor: pointer; display: flex; align-items: center; justify-content: center; transition: all 0.3s; border-radius: 4px; margin-left: 0; flex-shrink: 0; color: var(--text-dim); } .theme-toggle:hover { border-color: var(--cyan); color: var(--cyan); } .theme-toggle svg { width: 18px; height: 18px; transition: transform 0.4s; } .theme-toggle .icon-sun, .theme-toggle .icon-moon { position: absolute; transition: opacity 0.3s, transform 0.4s; } /* Light mode: show moon */ html[data-theme="light"] .theme-toggle .icon-sun { opacity: 0; transform: rotate(-90deg); } html[data-theme="light"] .theme-toggle .icon-moon { opacity: 1; transform: rotate(0); } /* Dark mode: show sun */ html[data-theme="dark"] .theme-toggle .icon-sun { opacity: 1; transform: rotate(0); } html[data-theme="dark"] .theme-toggle .icon-moon { opacity: 0; transform: rotate(90deg); }