/* ============================================================ KISCO Digital — Light mode variation Loads after kisco-v2.css; active when ============================================================ */ /* ---------- theme toggle button (both themes) ---------- */ .theme-toggle { width: 44px; height: 44px; border-radius: 50%; border: 1px solid var(--line-strong); background: transparent; color: var(--ink); cursor: pointer; display: grid; place-items: center; flex: none; transition: border-color 0.3s, background 0.3s, transform 0.3s var(--ease); } .theme-toggle:hover { border-color: var(--electric); transform: translateY(-1px); } .theme-toggle svg { width: 18px; height: 18px; } /* ---------- tokens ---------- */ html[data-theme="light"] { --bg: #F6F6FA; --bg-2: #EDEEF6; --panel: rgba(11,10,28,0.035); --panel-solid: #FFFFFF; --line: rgba(11,10,28,0.10); --line-strong: rgba(11,10,28,0.20); --ink: #0B0A1C; --ink-soft: #3C4062; --ink-faint: #6D719A; --electric-bright: #2B41D9; } html[data-theme="light"] body { background: var(--bg); color: var(--ink); } html[data-theme="light"] ::selection { background: var(--royal); color: #fff; } /* ---------- atmosphere ---------- */ html[data-theme="light"] .atmos { background: radial-gradient(52% 44% at 82% -6%, rgba(21,0,214,0.10), transparent 70%), radial-gradient(40% 34% at -8% 32%, rgba(21,0,214,0.06), transparent 70%), radial-gradient(30% 26% at 88% 88%, rgba(240,168,0,0.06), transparent 70%); } html[data-theme="light"] .grain { opacity: 0.05; mix-blend-mode: multiply; } /* ---------- type accents ---------- */ html[data-theme="light"] .grad-text { background: linear-gradient(92deg, #2B41D9, #5163E8 55%, #B87F00); -webkit-background-clip: text; background-clip: text; color: transparent; } html[data-theme="light"] .eyebrow.gold { color: #8F6600; } html[data-theme="light"] .eyebrow.gold::before { background: #8F6600; } html[data-theme="light"] .value .num { color: #8F6600; } /* ---------- nav + mobile menu ---------- */ html[data-theme="light"] .nav { background: rgba(246,246,250,0.88); border-color: var(--line-strong); box-shadow: 0 20px 54px -26px rgba(11,10,28,0.35); } html[data-theme="light"] .nav-links a:hover { color: var(--ink); background: rgba(11,10,28,0.05); } html[data-theme="light"] .mobile-menu { background: rgba(246,246,250,0.96); } html[data-theme="light"] .mobile-menu a.active { color: var(--electric-bright); } /* ---------- buttons / panels ---------- */ html[data-theme="light"] .btn-ghost:hover { border-color: rgba(11,10,28,0.38); background: rgba(11,10,28,0.04); } html[data-theme="light"] .hover-lift:hover { background: rgba(11,10,28,0.055); } html[data-theme="light"] .panel { background: var(--panel); } html[data-theme="light"] .marquee .logo-chip { border: 1px solid var(--line); } /* ---------- page heroes (index + inner pages) ---------- */ html[data-theme="light"] .hero-bg img { opacity: 0.5; filter: saturate(0.9); } html[data-theme="light"] .hero-bg::after { background: linear-gradient(180deg, rgba(246,246,250,0.62) 0%, rgba(246,246,250,0.28) 40%, rgba(246,246,250,0.93) 82%, #F6F6FA 100%); } html[data-theme="light"] .hero-bg::before { background: radial-gradient(70% 60% at 24% 68%, rgba(21,0,214,0.12), transparent 70%); } html[data-theme="light"] .page-hero .ph-bg img { opacity: 0.42; } html[data-theme="light"] .page-hero .ph-bg::after { background: linear-gradient(180deg, rgba(246,246,250,0.55), rgba(246,246,250,0.94) 88%, #F6F6FA); } /* ---------- rows / lists ---------- */ html[data-theme="light"] .svc-row:hover { background: rgba(11,10,28,0.035); } html[data-theme="light"] .svc-row .ic { background: rgba(43,65,217,0.08); border-color: rgba(43,65,217,0.3); } html[data-theme="light"] .svc-row:hover .ic { background: var(--royal); border-color: var(--royal); color: #fff; } /* ---------- CTA glow ---------- */ html[data-theme="light"] .cta-final::before { background: radial-gradient(60% 90% at 50% 110%, rgba(21,0,214,0.14), transparent 70%); } /* ---------- forms (contact) ---------- */ html[data-theme="light"] .field input, html[data-theme="light"] .field textarea { background: #FFFFFF; } html[data-theme="light"] .field input:focus, html[data-theme="light"] .field textarea:focus { background: #FFFFFF; box-shadow: 0 0 0 4px rgba(43,65,217,0.14); } /* ---------- WhatsApp card ---------- */ html[data-theme="light"] .wa-card { box-shadow: 0 30px 80px -20px rgba(11,10,28,0.3); } html[data-theme="light"] .wa-msg { background: rgba(11,10,28,0.04); } /* ---------- footer / social ---------- */ html[data-theme="light"] .social a:hover { background: rgba(43,65,217,0.08); }