/* ================================================================ mistwolf.tech — "warm" theme overrides Gated behind Unleash flag "warm-theme". Applied by setting `data-theme="warm"` on from script.js. Additive — load AFTER style.css. No changes to base theme. ================================================================= */ html[data-theme="warm"] { /* Surfaces: warmer navy — shifts hue toward plum/indigo */ --navy-deepest: #0d0a14; --navy-deeper: #17111f; --navy-darkest: #1d1628; --navy-darker: #261d33; --navy-dark: #33263f; --navy: #3a2c45; --navy-light: #4e3a5c; --navy-lighter: #624a73; /* Primary accent: amber (was cyan) */ --cyan-edge: #ffb347; --cyan: #ff9e3d; --cyan-soft: #ffc98a; --cyan-dim: #cc6f1a; --cyan-rgb: 255 158 61; /* Secondary accent: coral/rose (was green) */ --green-edge: #ff8a80; --green: #ff6b6b; --green-soft: #ffa5a5; --green-dim: #cc3838; --green-rgb: 255 107 107; } /* Hero gradient + orb tint: use warm values instead of cyan ones */ html[data-theme="warm"] .hero { background: radial-gradient(ellipse 900px 600px at 85% 20%, rgb(var(--cyan-rgb) / 14%), transparent 60%), radial-gradient(ellipse 700px 500px at 10% 80%, rgb(var(--green-rgb) / 8%), transparent 60%), linear-gradient(180deg, var(--navy-deepest) 0%, var(--navy-darker) 100%); } html[data-theme="warm"] .hero-orb { background: radial-gradient(circle, rgb(var(--cyan-rgb) / 18%) 0%, transparent 60%); } /* Nav CTA glow */ html[data-theme="warm"] .nav-cta { color: var(--navy-deepest) !important; } html[data-theme="warm"] .btn-primary:hover { box-shadow: 0 8px 24px rgb(var(--cyan-rgb) / 40%); } html[data-theme="warm"] .btn-green:hover { box-shadow: 0 8px 24px rgb(var(--green-rgb) / 40%); } /* Hero panel */ html[data-theme="warm"] .hero-panel { box-shadow: 0 40px 100px rgb(0 0 0 / 60%), 0 0 0 1px rgb(var(--cyan-rgb) / 15%); } html[data-theme="warm"] .hero-wolf { background: radial-gradient(circle at 50% 45%, rgb(var(--cyan-rgb) / 20%), transparent 55%), radial-gradient(circle at 50% 75%, rgb(var(--green-rgb) / 10%), transparent 60%); } html[data-theme="warm"] .hero-wolf img { filter: drop-shadow(0 0 30px rgb(var(--cyan-rgb) / 35%)); } /* Eyebrow + service icons */ html[data-theme="warm"] .eyebrow { border-color: rgb(var(--cyan-rgb) / 35%); background: rgb(var(--cyan-rgb) / 5%); } html[data-theme="warm"] .svc-icon { background: rgb(var(--cyan-rgb) / 10%); border-color: rgb(var(--cyan-rgb) / 25%); } html[data-theme="warm"] .svc-card:hover { border-color: rgb(var(--cyan-rgb) / 35%); } html[data-theme="warm"] .svc-card::before { background: linear-gradient(90deg, transparent, var(--cyan), transparent); } /* Tech tag hover */ html[data-theme="warm"] .tech-tag:hover { color: var(--cyan); border-color: rgb(var(--cyan-rgb) / 35%); } /* drift-warden section — coral/rose replaces green */ html[data-theme="warm"] .dw::before { background: radial-gradient(circle, rgb(var(--green-rgb) / 8%), transparent 60%); } html[data-theme="warm"] .dw-badge { border-color: rgb(var(--green-rgb) / 35%); background: rgb(var(--green-rgb) / 6%); } html[data-theme="warm"] .dw-stack-item:hover { border-color: rgb(var(--green-rgb) / 25%); background: rgb(var(--green-rgb) / 3%); } html[data-theme="warm"] .dw-stack-icon { background: rgb(var(--green-rgb) / 10%); border-color: rgb(var(--green-rgb) / 30%); } html[data-theme="warm"] .dw-cloud--active { border-color: rgb(var(--green-rgb) / 40%); background: rgb(var(--green-rgb) / 5%); } html[data-theme="warm"] .dw-tab.active { background: rgb(var(--green-rgb) / 6%); box-shadow: inset 0 -1px 0 var(--green); } html[data-theme="warm"] .dw-code .prompt { color: var(--green); } html[data-theme="warm"] .dw-code .cmd { color: var(--cyan); } html[data-theme="warm"] .dw-code .ok { color: var(--green); } html[data-theme="warm"] .dw-code .arrow { color: var(--cyan); } html[data-theme="warm"] .dw-quickstart { border-color: rgb(var(--green-rgb) / 25%); background: rgb(var(--green-rgb) / 4%); } html[data-theme="warm"] .dw-qs-text code { color: var(--green); } /* Credibility numbers */ html[data-theme="warm"] .cred-num { color: var(--cyan); } html[data-theme="warm"] .cred-num .suffix { color: var(--cyan-soft); } html[data-theme="warm"] .cred-item:hover { border-color: rgb(var(--cyan-rgb) / 30%); } /* Contact block */ html[data-theme="warm"] .cicon { background: rgb(var(--cyan-rgb) / 10%); border-color: rgb(var(--cyan-rgb) / 25%); } html[data-theme="warm"] .cv a { color: var(--cyan); } html[data-theme="warm"] .field input:focus, html[data-theme="warm"] .field select:focus, html[data-theme="warm"] .field textarea:focus { border-color: var(--cyan); background: rgb(var(--cyan-rgb) / 3%); } /* Footer */ html[data-theme="warm"] .footer-col h4 { color: var(--cyan); } html[data-theme="warm"] .footer-links a:hover { color: var(--cyan); } html[data-theme="warm"] .footer-status { color: var(--green); } /* Logo sub-label */ html[data-theme="warm"] .logo .sub { color: var(--cyan); }