/* ============================================================ ELECTRIC NEON THEME · dark + neon "electricity" style Overrides the base K&S design system with a dark, high-voltage look: graphite panels, cyan/electric-blue neon, yellow sparks. Active by default (see header.twig: ). ============================================================ */ :root{ --el-bg:#0a0e14; --el-bg-hi:#0d1520; --el-panel:#111a26; --el-panel-2:#162230; --el-line:rgba(0,229,255,0.16); --el-line-soft:rgba(0,229,255,0.10); --el-cyan:#00e0ff; --el-cyan-hi:#29e6ff; --el-cyan-dim:rgba(0,224,255,0.14); --el-yellow:#ffd60a; --el-yellow-dim:rgba(255,214,10,0.12); --el-ink:#e7f1f7; --el-muted:#8ba1b0; --el-glow:0 0 12px rgba(0,224,255,0.55); --el-glow-strong:0 0 22px rgba(0,224,255,0.75); --el-glow-yellow:0 0 18px rgba(255,214,10,0.6); } /* ---------- global dark base ---------- */ html[data-theme="dark"] body{ background:var(--el-bg); color:var(--el-ink); } html[data-theme="dark"] h1,html[data-theme="dark"] h2,html[data-theme="dark"] h3, html[data-theme="dark"] h4,html[data-theme="dark"] h5,html[data-theme="dark"] h6{color:var(--el-ink)} html[data-theme="dark"] a{color:var(--el-cyan)} html[data-theme="dark"] a:hover{color:var(--el-cyan-hi)} /* ---------- top bar ---------- */ html[data-theme="dark"] #top{background:#060a10;border-bottom:1px solid var(--el-line-soft)} html[data-theme="dark"] #top .list-inline-item>a, html[data-theme="dark"] #top .list-inline-item .dropdown>a, html[data-theme="dark"] #top .list-inline-item .dropdown>span{color:var(--el-muted)} html[data-theme="dark"] #top .list-inline-item>a:hover, html[data-theme="dark"] #top .list-inline-item .dropdown>a:hover{color:var(--el-cyan)} /* ---------- header ---------- */ html[data-theme="dark"] header{ background: radial-gradient(1200px 240px at 20% -40%, rgba(0,224,255,0.10), transparent 60%), var(--el-bg-hi); border-bottom:1px solid var(--el-line); } html[data-theme="dark"] #search .form-control{ background:#0d1622;border:1px solid var(--el-line-soft);color:var(--el-ink); } html[data-theme="dark"] #search .form-control:focus{ border-color:var(--el-cyan);box-shadow:0 0 0 3px var(--el-cyan-dim);background:#0d1622; } html[data-theme="dark"] #search .btn{background:linear-gradient(135deg,var(--el-cyan),#00a0ff);color:#04121a;box-shadow:var(--el-glow)} html[data-theme="dark"] #search .btn:hover{background:linear-gradient(135deg,var(--el-cyan-hi),#00b4ff)} html[data-theme="dark"] #cart .btn{background:var(--el-panel);border:1px solid var(--el-line-soft);color:var(--el-ink)} html[data-theme="dark"] #cart .btn:hover{border-color:var(--el-cyan);color:var(--el-cyan)} html[data-theme="dark"] #cart .btn .badge{background:var(--el-yellow);color:#1a1400} /* ---------- mega menu : neon band ---------- */ html[data-theme="dark"] #menu{ background:linear-gradient(90deg,#04121a 0%,#07232e 55%,#04121a 100%); border-top:1px solid var(--el-line); border-bottom:1px solid var(--el-line); box-shadow:inset 0 1px 0 rgba(0,224,255,0.12), 0 2px 18px rgba(0,0,0,0.6); } html[data-theme="dark"] .ks-mega-link{color:#cfeefb} html[data-theme="dark"] .ks-mega-link:hover{background:var(--el-cyan-dim);color:var(--el-cyan-hi);text-shadow:0 0 8px var(--el-cyan)} html[data-theme="dark"] .ks-mega-panel{background:var(--el-panel);border:1px solid var(--el-line);border-top:2px solid var(--el-cyan);box-shadow:0 14px 40px rgba(0,0,0,0.7)} html[data-theme="dark"] .ks-mega-block-title{color:var(--el-cyan);border-left-color:var(--el-yellow)} html[data-theme="dark"] .ks-mega-block-title:hover{background:var(--el-cyan-dim);color:var(--el-cyan-hi)} html[data-theme="dark"] .ks-mega-sublist li a{color:var(--el-muted)} html[data-theme="dark"] .ks-mega-sublist li a:hover{color:var(--el-cyan-hi);background:var(--el-cyan-dim)} html[data-theme="dark"] .ks-mega-footer a{color:var(--el-cyan)} html[data-theme="dark"] .ks-mega-footer a:hover{color:var(--el-yellow)} html[data-theme="dark"] #menu .navbar-toggler{border-color:var(--el-line);color:#cfeefb} /* ---------- breadcrumb ---------- */ html[data-theme="dark"] .breadcrumb{background:var(--el-panel);border:1px solid var(--el-line-soft)} html[data-theme="dark"] .breadcrumb-item a{color:var(--el-cyan)} html[data-theme="dark"] .breadcrumb-item.active{color:var(--el-muted)} /* ---------- buttons ---------- */ html[data-theme="dark"] .btn-primary, html[data-theme="dark"] .btn-outline-primary{ background:linear-gradient(135deg,var(--el-cyan),#00a0ff); border-color:transparent;color:#04121a; box-shadow:var(--el-glow); } html[data-theme="dark"] .btn-primary:hover, html[data-theme="dark"] .btn-outline-primary:hover{ background:linear-gradient(135deg,var(--el-cyan-hi),#00b4ff); box-shadow:var(--el-glow-strong);color:#04121a;transform:translateY(-1px); } /* ---------- product cards : electricity panels ---------- */ html[data-theme="dark"] .product-thumb{ background:linear-gradient(180deg,var(--el-panel),var(--el-panel-2)); border:1px solid var(--el-line-soft); } html[data-theme="dark"] .product-thumb:hover{ border-color:var(--el-cyan); box-shadow:0 0 0 1px rgba(0,224,255,0.5), 0 0 24px rgba(0,224,255,0.28); transform:translateY(-3px); } html[data-theme="dark"] .product-thumb .image{background:radial-gradient(600px 200px at 50% 0%,rgba(0,224,255,0.10),transparent 65%),#0d1622} html[data-theme="dark"] .product-thumb .description h4{color:var(--el-ink)} html[data-theme="dark"] .product-thumb .description h4 a{color:var(--el-ink)} html[data-theme="dark"] .product-thumb .description h4 a:hover{color:var(--el-cyan)} html[data-theme="dark"] .product-thumb .button button{background:var(--el-panel);color:var(--el-cyan);border-top-color:var(--el-line-soft)} html[data-theme="dark"] .product-thumb .button button+button{border-left-color:var(--el-line-soft)} html[data-theme="dark"] .product-thumb .button button:hover{background:linear-gradient(135deg,var(--el-cyan),#00a0ff);color:#04121a;box-shadow:var(--el-glow)} html[data-theme="dark"] .btn-card-icon,html[data-theme="dark"] .btn-card-cart{background:var(--el-panel);border-color:var(--el-line-soft);color:var(--el-cyan)} html[data-theme="dark"] .btn-card-icon:hover,html[data-theme="dark"] .btn-card-cart:hover{background:var(--el-cyan);color:#04121a;border-color:var(--el-cyan);box-shadow:var(--el-glow)} html[data-theme="dark"] .stock-in{color:var(--el-cyan)} html[data-theme="dark"] .stock-out{color:var(--el-muted)} /* ---------- prices ---------- */ html[data-theme="dark"] .price{color:var(--el-cyan);text-shadow:0 0 14px rgba(0,224,255,0.35)} html[data-theme="dark"] .price-new{color:var(--el-cyan)} html[data-theme="dark"] .price-old{color:var(--el-muted)} html[data-theme="dark"] .price-tax{color:var(--el-muted)} /* ---------- category / sidebar filters ---------- */ html[data-theme="dark"] .card{background:var(--el-panel);border-color:var(--el-line-soft);color:var(--el-ink)} html[data-theme="dark"] .card-body{color:var(--el-ink)} html[data-theme="dark"] .card-body .col-sm-3,html[data-theme="dark"] .card-body .col-md-3{color:var(--el-yellow)} html[data-theme="dark"] .card-body .col-sm-3 strong,html[data-theme="dark"] .card-body .col-md-3 strong{color:var(--el-yellow)} html[data-theme="dark"] .accordion-body{color:var(--el-ink)} html[data-theme="dark"] .accordion-body address{color:var(--el-yellow)} html[data-theme="dark"] .card-header{background:var(--el-panel-2);border-bottom-color:var(--el-line-soft);color:var(--el-ink)} html[data-theme="dark"] .list-group{--bs-list-group-color:var(--el-ink);--bs-list-group-bg:var(--el-panel);--bs-list-group-border-color:var(--el-line-soft)} html[data-theme="dark"] .list-group-item{background:var(--el-panel);border-color:var(--el-line-soft);color:var(--el-ink)} html[data-theme="dark"] .list-group-item:hover{background:var(--el-cyan-dim);color:var(--el-cyan-hi)} html[data-theme="dark"] .list-group-item.active{background:linear-gradient(135deg,var(--el-cyan),#00a0ff);border-color:transparent;color:#04121a} html[data-theme="dark"] .form-check-input:checked{background-color:var(--el-cyan);border-color:var(--el-cyan);box-shadow:0 0 8px rgba(0,224,255,0.6)} /* ---------- hero + brand ---------- */ html[data-theme="dark"] .hero-section{background:linear-gradient(135deg,#07232e 0%,#0a3a4a 60%,#04121a 100%);border:1px solid var(--el-line)} html[data-theme="dark"] .hero-section .btn{background:var(--el-yellow);color:#1a1400;box-shadow:var(--el-glow-yellow)} html[data-theme="dark"] .hero-section .btn:hover{background:#ffe94d} html[data-theme="dark"] .brand-statement{background:var(--el-panel);border:1px solid var(--el-line-soft)} html[data-theme="dark"] .brand-stat .number{color:var(--el-cyan);text-shadow:0 0 16px rgba(0,224,255,0.4)} html[data-theme="dark"] .section-title{border-bottom-color:var(--el-cyan)} /* ---------- pagination ---------- */ html[data-theme="dark"] .pagination .page-link{background:var(--el-panel);border-color:var(--el-line-soft);color:var(--el-cyan)} html[data-theme="dark"] .pagination .page-item.active .page-link{background:var(--el-cyan);border-color:var(--el-cyan);color:#04121a;box-shadow:var(--el-glow)} /* ---------- tables / forms ---------- */ html[data-theme="dark"] .table{border-color:var(--el-line-soft)} html[data-theme="dark"] .table thead th{background:var(--el-panel-2);color:var(--el-ink);border-color:var(--el-line-soft)} html[data-theme="dark"] .table td,html[data-theme="dark"] .table th{border-color:var(--el-line-soft);color:var(--el-ink)} html[data-theme="dark"] .form-control{background:#0d1622;border-color:var(--el-line-soft);color:var(--el-ink)} html[data-theme="dark"] .form-control:focus{border-color:var(--el-cyan);box-shadow:0 0 0 3px var(--el-cyan-dim)} /* ---------- badges ---------- */ html[data-theme="dark"] .badge-discount{background:linear-gradient(135deg,#ff3350,#ff0044)} html[data-theme="dark"] .badge-new{background:var(--el-yellow);color:#1a1400} html[data-theme="dark"] .badge-stock{background:var(--el-cyan);color:#04121a} /* ---------- footer ---------- */ html[data-theme="dark"] footer{background:var(--el-bg)} html[data-theme="dark"] footer .footer-top{background:linear-gradient(90deg,#06141f,#0a2b39);border-top:1px solid var(--el-line)} html[data-theme="dark"] footer .footer-main h5{color:var(--el-ink)} html[data-theme="dark"] footer .footer-main{background:#0a0f16} html[data-theme="dark"] footer .footer-main a{color:var(--el-muted)} html[data-theme="dark"] footer .footer-main a:hover{color:var(--el-cyan)} html[data-theme="dark"] footer .footer-bottom{background:#060a10;border-top-color:var(--el-line-soft)} /* ---------- product page ---------- */ html[data-theme="dark"] .product-info .thumbnails{background:var(--el-panel);border:1px solid var(--el-line-soft);border-radius:10px;padding:16px} html[data-theme="dark"] .nav-tabs .nav-link{color:var(--el-muted)} html[data-theme="dark"] .nav-tabs .nav-link.active{color:var(--el-cyan);border-color:var(--el-line-soft) var(--el-line-soft) transparent} /* ---------- theme toggle (keep in dark, yellow sun) ---------- */ html[data-theme="dark"] .theme-toggle{color:var(--el-yellow);border-color:var(--el-line)} html[data-theme="dark"] .theme-toggle:hover{color:#ffe94d;border-color:var(--el-yellow);box-shadow:var(--el-glow-yellow)} /* ---------- misc links / dropdowns ---------- */ html[data-theme="dark"] .dropdown-menu{background:var(--el-panel);border-color:var(--el-line-soft)} html[data-theme="dark"] .dropdown-menu a{color:var(--el-ink)} html[data-theme="dark"] .dropdown-menu a:hover{background:var(--el-cyan-dim);color:var(--el-cyan-hi)} html[data-theme="dark"] .alert{background:var(--el-panel);border-color:var(--el-line-soft);color:var(--el-ink)} /* ============================================================ ELECTRIC · SCHNEIDER YELLOW ACCENTS + NEON UPGRADES ============================================================ */ /* ---------- hero : neon lightning + yellow spark ---------- */ html[data-theme="dark"] .hero-section{ background: radial-gradient(900px 300px at 85% -20%, rgba(0,224,255,0.18), transparent 55%), radial-gradient(700px 260px at 10% 110%, rgba(255,214,10,0.12), transparent 60%), linear-gradient(135deg,#07232e 0%,#0a3a4a 55%,#03111a 100%); border:1px solid var(--el-line); box-shadow:inset 0 0 60px rgba(0,224,255,0.10); } html[data-theme="dark"] .hero-section h1{ color:#f2fbff; text-shadow:0 0 22px rgba(0,224,255,0.55), 0 0 6px rgba(0,224,255,0.6); } html[data-theme="dark"] .hero-section p{color:#bfe6f5;text-shadow:0 0 10px rgba(0,224,255,0.35)} /* big neon bolt icon */ html[data-theme="dark"] .hero-section .ks-hero-bolt{color:var(--el-yellow)!important;opacity:0.9!important;text-shadow:0 0 28px var(--el-yellow),0 0 60px rgba(255,214,10,0.7)} /* hero CTA - yellow Schneider spark button */ html[data-theme="dark"] .hero-section .btn-primary{ background:linear-gradient(135deg,var(--el-yellow),#ffc400); border-color:transparent;color:#1a1400;font-weight:700; box-shadow:var(--el-glow-yellow); } html[data-theme="dark"] .hero-section .btn-primary:hover{ background:linear-gradient(135deg,#ffe94d,#ffd60a); box-shadow:0 0 26px rgba(255,214,10,0.85);color:#1a1400;transform:translateY(-1px); } /* ---------- TOP carousel : electric dark cards + yellow badge ---------- */ html[data-theme="dark"] .top-section h2{color:var(--el-ink)} html[data-theme="dark"] .top-section h2 i{color:var(--el-yellow);text-shadow:0 0 14px var(--el-yellow)} html[data-theme="dark"] .top-card{ background:linear-gradient(180deg,var(--el-panel),var(--el-panel-2)); border:1px solid var(--el-line-soft);color:inherit; } html[data-theme="dark"] .top-card:hover{ border-color:var(--el-cyan); box-shadow:0 0 0 1px rgba(0,224,255,0.5),0 8px 22px rgba(0,0,0,0.6),0 0 22px rgba(0,224,255,0.22); transform:translateY(-3px); } html[data-theme="dark"] .top-card img{filter:drop-shadow(0 0 6px rgba(0,224,255,0.18))} html[data-theme="dark"] .top-name{color:var(--el-ink)} html[data-theme="dark"] .top-price{color:var(--el-cyan);text-shadow:0 0 12px rgba(0,224,255,0.4)} html[data-theme="dark"] .top-badge{ background:linear-gradient(135deg,var(--el-yellow),#ffb700); color:#1a1400;box-shadow:0 0 12px rgba(255,214,10,0.6); } html[data-theme="dark"] .top-arrow{background:var(--el-panel);border-color:var(--el-line);color:var(--el-cyan);box-shadow:0 2px 10px rgba(0,0,0,0.5)} html[data-theme="dark"] .top-arrow:hover{background:var(--el-cyan-dim);color:var(--el-cyan-hi);border-color:var(--el-cyan)} /* ---------- yellow Schneider accent on menu hover/active ---------- */ html[data-theme="dark"] #menu .ks-mega-link:hover, html[data-theme="dark"] .ks-mega-link:hover{ background:var(--el-yellow-dim); color:var(--el-yellow); text-shadow:0 0 10px rgba(255,214,10,0.6); box-shadow:inset 0 -2px 0 var(--el-yellow); } html[data-theme="dark"] .ks-mega-block-title{border-left-color:var(--el-yellow);color:var(--el-cyan)} html[data-theme="dark"] .ks-mega-block-title:hover{color:var(--el-yellow)} /* ---------- yellow 'in-stock' + section accents ---------- */ html[data-theme="dark"] .stock-in{color:var(--el-yellow)} html[data-theme="dark"] .section-title{border-bottom:2px solid var(--el-yellow)} html[data-theme="dark"] .badge-new, html[data-theme="dark"] .badge-stock{background:var(--el-yellow);color:#1a1400;box-shadow:0 0 10px rgba(255,214,10,0.5)} /* ============================================================ ELECTRIC DISCHARGES ACROSS SECTIONS (animated neon) ============================================================ */ @keyframes ks-discharge{ 0%,100%{filter:drop-shadow(0 0 2px currentColor);opacity:.65} 50%{filter:drop-shadow(0 0 14px currentColor);opacity:1} } @keyframes ks-bolt-run{ 0%{background-position:200% 50%} 100%{background-position:-200% 50%} } @keyframes ks-frame-pulse{ 0%,100%{box-shadow:0 0 8px rgba(0,224,255,.35),inset 0 0 10px rgba(0,224,255,.08)} 50%{box-shadow:0 0 20px rgba(0,224,255,.7),inset 0 0 16px rgba(255,214,10,.12)} } /* ---------- product cards : animated lightning border on hover ---------- */ html[data-theme="dark"] .product-thumb{position:relative;overflow:hidden} html[data-theme="dark"] .product-thumb::before{ content:'';position:absolute;inset:-2px;z-index:0;pointer-events:none;border-radius:inherit; background:linear-gradient(90deg,transparent 0%,rgba(0,224,255,.0) 40%,rgba(0,224,255,.85) 50%,rgba(255,214,10,.85) 52%,rgba(255,214,10,0) 60%,transparent 100%); background-size:200% 100%;background-repeat:no-repeat; opacity:0;transition:opacity .25s ease; } html[data-theme="dark"] .product-thumb:hover::before{ opacity:1;animation:ks-bolt-run 1.4s linear infinite; } html[data-theme="dark"] .product-thumb:hover{ border-color:var(--el-cyan); animation:ks-frame-pulse 1.6s ease-in-out infinite; } html[data-theme="dark"] .product-thumb .image,html[data-theme="dark"] .product-thumb .description,html[data-theme="dark"] .product-thumb .button{position:relative;z-index:1} /* corner lightning bolts on cards */ html[data-theme="dark"] .product-thumb .image::after, html[data-theme="dark"] .top-card .top-name::after{ content:'';position:absolute;right:6px;bottom:6px;width:14px;height:14px;pointer-events:none; background:linear-gradient(135deg,transparent 45%,var(--el-yellow) 46%,var(--el-yellow) 52%,transparent 54%), linear-gradient(225deg,transparent 45%,var(--el-cyan) 46%,var(--el-cyan) 52%,transparent 54%); background-size:100% 100%;background-repeat:no-repeat;opacity:.0;transition:opacity .25s ease; color:var(--el-yellow);animation:ks-discharge 1.8s ease-in-out infinite; } html[data-theme="dark"] .product-thumb:hover .image::after{opacity:.9} /* ---------- section titles : neon underline discharge ---------- */ html[data-theme="dark"] .section-title{position:relative;border-bottom:none;padding-bottom:16px} html[data-theme="dark"] .section-title::after{ content:'';position:absolute;left:0;right:35%;bottom:0;height:3px;border-radius:3px; background:linear-gradient(90deg,var(--el-cyan) 0%,var(--el-yellow) 55%,transparent 80%); background-size:200% 100%;animation:ks-bolt-run 3s linear infinite; box-shadow:0 0 12px rgba(0,224,255,.6);color:var(--el-cyan); } html[data-theme="dark"] .top-section h2:not(.section-title){position:relative;padding-bottom:10px} html[data-theme="dark"] .top-section h2:not(.section-title)::after{ content:'';position:absolute;left:0;width:70px;bottom:0;height:3px;border-radius:3px; background:linear-gradient(90deg,var(--el-yellow),var(--el-yellow),transparent); box-shadow:0 0 12px rgba(255,214,10,.6);animation:ks-discharge 2s ease-in-out infinite;color:var(--el-yellow); } /* ---------- carousels / banners : electric frame ---------- */ html[data-theme="dark"] .carousel{position:relative;border-radius:var(--ks-r-md);overflow:hidden} html[data-theme="dark"] .carousel::before{ content:'';position:absolute;inset:0;z-index:3;pointer-events:none;border-radius:inherit; border:1px solid transparent; background:linear-gradient(90deg,transparent 0%,rgba(0,224,255,.0) 35%,rgba(0,224,255,.7) 45%,rgba(255,214,10,.7) 55%,rgba(255,214,10,0) 65%,transparent 100%); background-size:200% 100%;background-repeat:no-repeat; -webkit-mask:linear-gradient(#000,transparent) border-box,linear-gradient(#000,#000) padding-box; -webkit-mask-composite:xor;mask-composite:exclude; animation:ks-bolt-run 2.6s linear infinite; } html[data-theme="dark"] .carousel:hover{animation:ks-frame-pulse 1.8s ease-in-out infinite} html[data-theme="dark"] .carousel-indicators button{background:var(--el-cyan)} html[data-theme="dark"] .carousel-indicators button.active{background:var(--el-yellow);box-shadow:0 0 10px rgba(255,214,10,.8)} /* ---------- footer : electric discharge top edge ---------- */ html[data-theme="dark"] footer{position:relative} html[data-theme="dark"] footer .footer-top::before{ content:'';position:absolute;top:0;left:0;right:0;height:3px;pointer-events:none; background:linear-gradient(90deg,transparent 0%,rgba(0,224,255,.0) 20%,rgba(0,224,255,.9) 32%,rgba(255,214,10,.9) 40%,rgba(255,214,10,0) 52%,rgba(0,224,255,.0) 70%,rgba(0,224,255,.85) 82%,transparent 95%); background-size:200% 100%;background-repeat:no-repeat; box-shadow:0 0 18px rgba(0,224,255,.6);color:var(--el-cyan); animation:ks-bolt-run 4s linear infinite; } html[data-theme="dark"] footer .footer-top{position:relative} /* repeating corner sparks in footer bottom */ html[data-theme="dark"] footer .footer-bottom::after{ content:'⚡';position:absolute;right:14px;top:50%;transform:translateY(-50%); font-size:16px;color:var(--el-yellow);opacity:.5;animation:ks-discharge 2.4s ease-in-out infinite; } html[data-theme="dark"] footer .footer-bottom{position:relative;color:var(--el-yellow)} /* ============================================================ MOBILE ADAPTATION � full responsive, 320 / 375 / 768 px ============================================================ */ /* ---------- small phones ( < 576px ) ---------- */ @media (max-width: 575.98px){ /* header : stack and tighten */ html[data-theme="dark"] header{padding:10px 0} html[data-theme="dark"] #logo{margin:4px 0;text-align:center} html[data-theme="dark"] #logo img{max-width:150px} html[data-theme="dark"] #top .list-inline-item>a, html[data-theme="dark"] #top .list-inline-item .dropdown>a, html[data-theme="dark"] #top .list-inline-item .dropdown>span{padding:8px 6px 5px 6px;font-size:12px} html[data-theme="dark"] #top .d-none{display:none!important} /* search + cart on one row */ html[data-theme="dark"] #search{margin-bottom:8px} html[data-theme="dark"] #search .form-control{height:42px;font-size:13px} html[data-theme="dark"] #cart .btn{height:42px;font-size:13px;padding:0 12px;width:100%} /* hero */ html[data-theme="dark"] .hero-section{padding:36px 0;margin-bottom:24px;text-align:center} html[data-theme="dark"] .hero-section h1{font-size:26px} html[data-theme="dark"] .hero-section p{font-size:15px} html[data-theme="dark"] .hero-section .btn-lg{width:100%;max-width:360px} /* mega menu links tap-friendly */ html[data-theme="dark"] .ks-mega-link{min-height:44px} /* product cards compact 2-col */ html[data-theme="dark"] .product-thumb .image{padding:10px} html[data-theme="dark"] .product-thumb .image img{max-height:130px} html[data-theme="dark"] .product-thumb .description{padding:10px} html[data-theme="dark"] .product-thumb .description h4{font-size:12.5px;-webkit-line-clamp:2} html[data-theme="dark"] .product-thumb .button button{line-height:38px;font-size:11px;padding:0} html[data-theme="dark"] .card-stock{padding:6px 8px} html[data-theme="dark"] .price{font-size:15px} html[data-theme="dark"] .price-old{font-size:12px} /* TOP carousel : arrows inside, not clipped */ html[data-theme="dark"] .top-arrow{width:34px;height:34px;font-size:15px} html[data-theme="dark"] .top-arrow.prev{left:0} html[data-theme="dark"] .top-arrow.next{right:0} html[data-theme="dark"] .top-card{flex:0 0 150px;padding:10px} html[data-theme="dark"] .top-card img{height:110px} html[data-theme="dark"] .top-name{font-size:12px;height:48px} /* section titles */ html[data-theme="dark"] .section-title{font-size:20px} /* footer */ html[data-theme="dark"] footer .footer-top{padding:24px 0} html[data-theme="dark"] footer .footer-main{padding:24px 0 16px} html[data-theme="dark"] footer .footer-bottom::after{display:none} /* breadcrumb */ html[data-theme="dark"] .breadcrumb{font-size:12px;padding:8px 12px;overflow-x:auto;white-space:nowrap;flex-wrap:nowrap} html[data-theme="dark"] .breadcrumb .breadcrumb-item{padding:0 14px} /* filter sidebar collapsible block headers */ html[data-theme="dark"] #column-left .card-body,.card .list-group{padding:0} /* tables scroll instead of breaking */ html[data-theme="dark"] .table-responsive{overflow-x:auto} html[data-theme="dark"] .table td,html[data-theme="dark"] .table th{white-space:nowrap} } /* ---------- up to 768px : tablets / small ---------- */ @media (max-width: 767.98px){ /* header row : search + cart beside logo */ html[data-theme="dark"] header .row{align-items:center} html[data-theme="dark"] #search{order:1} html[data-theme="dark"] #cart{order:2;margin-left:auto} /* filter column stacked above content with a panel header */ html[data-theme="dark"] #column-left{margin-bottom:16px} /* keep product grid at 2-3 cols */ html[data-theme="dark"] .product-grid{grid-template-columns:repeat(2,1fr);gap:12px} /* footer columns stack cleanly */ html[data-theme="dark"] footer .footer-top [class*="col-"]{margin-bottom:18px} html[data-theme="dark"] footer .footer-bottom [class*="col-"]{text-align:center} } /* ---------- up to 991px : collapse mega menu nicely ---------- */ @media (max-width: 991.98px){ html[data-theme="dark"] #menu .ks-mega-nav{padding:6px 0} html[data-theme="dark"] .ks-mega-link{font-size:14px;padding:12px 16px;border-radius:8px} html[data-theme="dark"] #menu .navbar-toggler{margin:8px 0} /* menu panel full-width background in dark in case needed */ html[data-theme="dark"] #navbar-menu{padding:0} } /* ---------- horizontal scroll guards ---------- */ html,body{overflow-x:hidden;max-width:100%} html[data-theme="dark"] img{max-width:100%;height:auto} /* ---------- product card cart action : full-width on tiny screens ---------- */ @media (max-width: 575.98px){ html[data-theme="dark"] .card-actions{margin-top:8px;padding-top:8px} html[data-theme="dark"] .card-actions form{flex:1} html[data-theme="dark"] .card-actions .btn-card-cart{width:100%;height:40px;justify-content:center} .card-actions .btn-card-cart{border:none} } /* ============================================================ ELECTRIC · LIGHT MODE (data-theme absent) Keeps the same neon cyan / yellow personality on a light, bright canvas so switching isn't jarring or "sad". ============================================================ */ html:not([data-theme="dark"]){ --el-cyan:#0077a8; --el-cyan-hi:#0099d9; --el-yellow:#b8860b; --el-ink:#1c2a33; --el-muted:#5b7280; --el-line:rgba(0,119,168,0.22); --el-line-soft:rgba(0,119,168,0.12); } /* global light base */ html:not([data-theme="dark"]) body{ background:#f4f7fa; color:var(--el-ink); } html:not([data-theme="dark"]) a{color:var(--el-cyan)} html:not([data-theme="dark"]) a:hover{color:var(--el-cyan-hi)} /* top bar */ html:not([data-theme="dark"]) #top{ background:#ffffff; border-bottom:1px solid var(--el-line-soft); } html:not([data-theme="dark"]) #top .list-inline-item>a, html:not([data-theme="dark"]) #top .list-inline-item .dropdown>span{color:var(--el-muted)} html:not([data-theme="dark"]) #top .list-inline-item>a:hover{color:var(--el-cyan)} /* header */ html:not([data-theme="dark"]) header{ background:linear-gradient(180deg,#ffffff,#eef4f8); border-bottom:1px solid var(--el-line-soft); } html:not([data-theme="dark"]) #search .form-control{ border:1px solid var(--el-line);background:#fff;color:var(--el-ink); } html:not([data-theme="dark"]) #search .form-control:focus{ border-color:var(--el-cyan);box-shadow:0 0 0 3px rgba(0,119,168,0.15); } html:not([data-theme="dark"]) #search .btn{ background:linear-gradient(135deg,var(--el-cyan),#005f8c);color:#fff; } html:not([data-theme="dark"]) #search .btn:hover{background:linear-gradient(135deg,var(--el-cyan-hi),var(--el-cyan))} html:not([data-theme="dark"]) #cart .btn{background:#fff;border:1px solid var(--el-line-soft);color:var(--el-ink)} html:not([data-theme="dark"]) #cart .btn:hover{border-color:var(--el-cyan);color:var(--el-cyan)} html:not([data-theme="dark"]) #cart .btn .badge{background:var(--el-yellow);color:#fff} /* menu band */ html:not([data-theme="dark"]) #menu{ background:linear-gradient(90deg,#e6f1f7 0%,#d8eaf5 55%,#e6f1f7 100%); border-top:1px solid var(--el-line-soft); border-bottom:1px solid var(--el-line-soft); } html:not([data-theme="dark"]) .ks-mega-link{color:var(--el-cyan)} html:not([data-theme="dark"]) .ks-mega-link:hover{background:rgba(0,119,168,0.10);color:var(--el-cyan-hi)} html:not([data-theme="dark"]) .ks-mega-panel{background:#fff;border:1px solid var(--el-line-soft);border-top:2px solid var(--el-cyan);box-shadow:0 14px 30px rgba(0,40,70,0.12)} html:not([data-theme="dark"]) .ks-mega-block-title{color:var(--el-cyan)} html:not([data-theme="dark"]) .ks-mega-sublist li a{color:var(--el-muted)} html:not([data-theme="dark"]) .ks-mega-sublist li a:hover{color:var(--el-cyan-hi);background:rgba(0,119,168,0.08)} html:not([data-theme="dark"]) .ks-mega-footer a{color:var(--el-cyan)} /* breadcrumb */ html:not([data-theme="dark"]) .breadcrumb{background:#fff;border:1px solid var(--el-line-soft)} html:not([data-theme="dark"]) .breadcrumb-item a{color:var(--el-cyan)} html:not([data-theme="dark"]) .breadcrumb-item.active{color:var(--el-muted)} /* buttons */ html:not([data-theme="dark"]) .btn-primary, html:not([data-theme="dark"]) .btn-outline-primary{ background:linear-gradient(135deg,var(--el-cyan),#005f8c);border-color:transparent;color:#fff; } html:not([data-theme="dark"]) .btn-primary:hover, html:not([data-theme="dark"]) .btn-outline-primary:hover{ background:linear-gradient(135deg,var(--el-cyan-hi),var(--el-cyan));color:#fff; } /* product cards */ html:not([data-theme="dark"]) .product-thumb{background:#fff;border:1px solid #e3edf3} html:not([data-theme="dark"]) .product-thumb:hover{border-color:var(--el-cyan);box-shadow:0 4px 16px rgba(0,90,130,0.18);transform:translateY(-3px)} html:not([data-theme="dark"]) .product-thumb .description h4 a{color:var(--el-ink)} html:not([data-theme="dark"]) .product-thumb .description h4 a:hover{color:var(--el-cyan)} html:not([data-theme="dark"]) .product-thumb .button button{background:#f4f8fb;color:var(--el-cyan);border-top-color:#e3edf3} html:not([data-theme="dark"]) .product-thumb .button button:hover{background:var(--el-cyan);color:#fff} html:not([data-theme="dark"]) .btn-card-icon,html:not([data-theme="dark"]) .btn-card-cart{background:#f4f8fb;border-color:#e3edf3;color:var(--el-cyan)} html:not([data-theme="dark"]) .btn-card-icon:hover,html:not([data-theme="dark"]) .btn-card-cart:hover{background:var(--el-cyan);color:#fff;border-color:var(--el-cyan)} html:not([data-theme="dark"]) .stock-in{color:#1a9c5c} html:not([data-theme="dark"]) .stock-out{color:var(--el-muted)} /* prices */ html:not([data-theme="dark"]) .price{color:var(--el-cyan)} html:not([data-theme="dark"]) .price-new{color:var(--el-cyan)} html:not([data-theme="dark"]) .price-old,html:not([data-theme="dark"]) .price-tax{color:var(--el-muted)} /* cards / filters */ html:not([data-theme="dark"]) .card{background:#fff;border-color:#e3edf3} html:not([data-theme="dark"]) .card-header{background:#f4f8fb;border-bottom-color:#e3edf3;color:var(--el-ink)} html:not([data-theme="dark"]) .list-group-item{background:#fff;border-color:#e3edf3;color:var(--el-ink)} html:not([data-theme="dark"]) .list-group-item:hover{background:rgba(0,119,168,0.06);color:var(--el-cyan)} html:not([data-theme="dark"]) .list-group-item.active{background:var(--el-cyan);border-color:var(--el-cyan);color:#fff} html:not([data-theme="dark"]) .form-check-input:checked{background-color:var(--el-cyan);border-color:var(--el-cyan)} /* hero + brand */ html:not([data-theme="dark"]) .hero-section{ background:linear-gradient(135deg,#e6f1f7 0%,#cfe6f2 55%,#f7fbfe 100%); border:1px solid var(--el-line-soft); } html:not([data-theme="dark"]) .hero-section .btn.btn-primary{ background:linear-gradient(135deg,var(--el-yellow),#8a6d00);color:#fff;border-color:transparent; } html:not([data-theme="dark"]) .brand-statement{background:#fff;border:1px solid var(--el-line-soft)} html:not([data-theme="dark"]) .brand-stat .number{color:var(--el-cyan)} html:not([data-theme="dark"]) .section-title{border-bottom-color:var(--el-cyan)} /* pagination */ html:not([data-theme="dark"]) .pagination .page-link{background:#fff;border-color:#e3edf3;color:var(--el-cyan)} html:not([data-theme="dark"]) .pagination .page-item.active .page-link{background:var(--el-cyan);border-color:var(--el-cyan);color:#fff} /* tables / forms */ html:not([data-theme="dark"]) .table thead th{background:#f4f8fb;color:var(--el-ink);border-color:#e3edf3} html:not([data-theme="dark"]) .table td,html:not([data-theme="dark"]) .table th{border-color:#e3edf3;color:var(--el-ink)} html:not([data-theme="dark"]) .form-control{border-color:var(--el-line);color:var(--el-ink)} html:not([data-theme="dark"]) .form-control:focus{border-color:var(--el-cyan);box-shadow:0 0 0 3px rgba(0,119,168,0.12)} /* badges */ html:not([data-theme="dark"]) .badge-discount{background:#ff3350} html:not([data-theme="dark"]) .badge-new{background:var(--el-yellow);color:#fff} html:not([data-theme="dark"]) .badge-stock{background:var(--el-cyan);color:#fff} /* footer */ html:not([data-theme="dark"]) footer{background:#eef4f8} html:not([data-theme="dark"]) footer .footer-top{background:linear-gradient(90deg,#e6f1f7,#d8eaf5);border-top:1px solid var(--el-line-soft)} html:not([data-theme="dark"]) footer .footer-main h5{color:var(--el-ink)} html:not([data-theme="dark"]) footer .footer-main{background:#e4edf2} html:not([data-theme="dark"]) footer .footer-main a{color:var(--el-muted)} html:not([data-theme="dark"]) footer .footer-main a:hover{color:var(--el-cyan)} html:not([data-theme="dark"]) footer .footer-bottom{background:#dbe6ec} /* product page */ html:not([data-theme="dark"]) .product-info .thumbnails{background:#fff;border:1px solid var(--el-line-soft);border-radius:10px;padding:16px} html:not([data-theme="dark"]) .nav-tabs .nav-link.active{color:var(--el-cyan);border-color:var(--el-line-soft) var(--el-line-soft) transparent} /* theme toggle (light mode: black moon icon) */ html:not([data-theme="dark"]) .theme-toggle{color:var(--el-ink);border-color:var(--el-line)} html:not([data-theme="dark"]) .theme-toggle:hover{color:var(--el-cyan);border-color:var(--el-cyan)} /* dropdowns / alerts */ html:not([data-theme="dark"]) .dropdown-menu{background:#fff;border-color:#e3edf3} html:not([data-theme="dark"]) .dropdown-menu a{color:var(--el-ink)} html:not([data-theme="dark"]) .dropdown-menu a:hover{background:rgba(0,119,168,0.06);color:var(--el-cyan)} html:not([data-theme="dark"]) .alert{background:#fff;border-color:#e3edf3;color:var(--el-ink)} /* top section (carousel) */ html:not([data-theme="dark"]) .top-section h2{color:var(--el-ink)} html:not([data-theme="dark"]) .top-card{background:#fff;border:1px solid #e3edf3} html:not([data-theme="dark"]) .top-card:hover{border-color:var(--el-cyan);box-shadow:0 4px 16px rgba(0,90,130,0.18);transform:translateY(-3px)} html:not([data-theme="dark"]) .top-name{color:var(--el-ink)} html:not([data-theme="dark"]) .top-price{color:var(--el-cyan)} html:not([data-theme="dark"]) .top-badge{background:linear-gradient(135deg,var(--el-yellow),#8a6d00);color:#fff} html:not([data-theme="dark"]) .top-arrow{background:#fff;border-color:var(--el-line);color:var(--el-cyan)} html:not([data-theme="dark"]) .top-arrow:hover{background:rgba(0,119,168,0.08);color:var(--el-cyan-hi);border-color:var(--el-cyan)}