/* ============================================================ TheAdminStack — theme-v2.css · "Frosted Aura" layer ------------------------------------------------------------ Site-wide recolor to the Frosted Aura light design system. LOAD THIS AFTER each section's own style.css (it overrides the shared design-system tokens). The flag is removed at the source, so this simply re-hues the light default into the Frosted Aura palette. Core palette: #5C7E8F Aura · #A2A2A2 Silver #D4DDE2 Frost · #FFFFFF White Ink (replaces black): #1F2F38 Every value here is a token — name it, don't eyeball it. ============================================================ */ /* ---- 1. Pin the Frosted Aura light palette on every token, in both the default (:root) and (defensive) .dark states so the palette is identical regardless of any stray flag. */ :root, html, html.dark, html:not(.dark){ color-scheme:light; /* legacy aliases (unused today; kept cool for safety) */ --navy:#1F2F38; --navy-2:#2C414C; --paper:#FFFFFF; /* Backgrounds — White is the dominant surface (~70% of any view) */ --bg:#FFFFFF; /* page */ --bg-1:#FFFFFF; /* cards / surface */ --bg-2:#EFF3F6; /* subtle sections, table stripes, code (aura-50) */ --bg-3:#D4DDE2; /* frost fill (aura-100) */ /* Text — Ink replaces pure black; all steps sit in the cool ramp */ --text:#1F2F38; /* primary (aura-900) 13.7:1 on white */ --text-2:#3C5563; /* secondary (aura-700) 7.9:1 on white */ --text-3:#6E7478; /* muted / captions */ /* Borders */ --border:#D4DDE2; /* frost hairline (aura-100) */ --border-2:#BCCBD3; /* strong border (aura-200) */ /* Surfaces */ --surface:#FFFFFF; --nav-bg:rgba(255,255,255,.72); /* frosted sticky header */ /* Accent system (all derived from Aura #5C7E8F) */ --accent:#5C7E8F; /* brand — large text, icons, fills, focus */ --accent-2:#3C5563; /* links / small accent text (AA 7.9:1) */ --accent-inv:#ffffff; --accent-subtle:#EFF3F6; /* aura-50 tint */ --accent-glow:rgba(92,126,143,.16); --accent-btn:#4C6B7A; /* aura-600 — AA 5.7:1 under white text */ --accent-btn-hover:#3C5563; /* aura-700 pressed */ /* Status — desaturated to sit inside the palette temperature */ --green:#3F7057; --red:#9E4F4F; --orange:#A97F3C; /* Elevation — two cool, ink-tinted shadows only (never grey-black) */ --shadow-sm:0 1px 2px rgba(31,47,56,.06); --shadow:0 8px 24px rgba(31,47,56,.10); --shadow-md:0 8px 24px rgba(31,47,56,.10); --shadow-lg:0 18px 48px rgba(31,47,56,.14); /* Shape — bump the large radius to the panel value (16px) */ --r-lg:16px; } /* Page background: the signature cool "aura" wash over white */ body{ background: radial-gradient(1200px 500px at 80% -10%, rgba(92,126,143,.14), transparent 60%), radial-gradient(900px 400px at 10% 10%, rgba(212,221,226,.55), transparent 55%), var(--bg); color:var(--text); background-attachment:fixed; } /* Links / small accent text use aura-700 (AA 7.9:1 on white) */ a{color:var(--accent-2)} .eyebrow,.nav-brand-sub{color:var(--accent)} /* Focus ring — aura-600 */ :focus-visible{outline:2px solid var(--accent-btn);outline-offset:2px;border-radius:4px} /* ---- 2. Single theme: hide every theme toggle ---- */ .theme-toggle, .theme-toggle-mobile, #themeToggle, #themeToggleMobile{display:none!important} /* ---- 3. Brand marks ---- */ /* On the light nav the black shield reads as-is — no invert. */ .nav-brand-logo{filter:none!important} /* Section text badges (GRC / OPS / SEC / OSI) get the aura chip look */ .nav-brand-icon{ background:linear-gradient(135deg,var(--accent),var(--accent-btn-hover))!important; color:#fff!important; box-shadow:0 0 0 1px rgba(92,126,143,.35),0 4px 14px rgba(92,126,143,.28)} /* ---- 4. Primary buttons: AA-safe aura-600 fill under white text ---- */ .btn-primary,.btn--primary{ background:var(--accent-btn)!important; border-color:var(--accent-btn)!important; color:#fff!important} .btn-primary:hover,.btn--primary:hover{ background:var(--accent-btn-hover)!important; border-color:var(--accent-btn-hover)!important} /* ---- 4b. Signature: frosted sticky navigation ---- */ .nav,.topnav,header nav,nav.topnav{ background:var(--nav-bg); -webkit-backdrop-filter:saturate(140%) blur(14px); backdrop-filter:saturate(140%) blur(14px); border-bottom:1px solid var(--border)} /* Reusable frost panel utility (header/hero/deck-title parity) */ .frost{ background:rgba(255,255,255,.55); -webkit-backdrop-filter:blur(14px); backdrop-filter:blur(14px); border:1px solid rgba(255,255,255,.7); box-shadow:var(--shadow-md)} /* ---- 4c. Status chips & alerts, desaturated to the palette ---- */ .badge-green {color:var(--green); background:#F0F6F3;border-color:#CBDDD3} .badge-red {color:var(--red); background:#F9F0F0;border-color:#E3C9C9} .badge-orange {color:var(--orange); background:#FAF5EC;border-color:#E5D6BC} .badge-blue, .badge-indigo, .badge-purple, .badge-cyan {color:var(--accent-2);background:var(--accent-subtle);border-color:var(--border-2)} .alert-success {color:var(--green)} .alert-danger {color:var(--red)} .alert-warning {color:var(--orange)} .alert-info {color:var(--accent-2)} /* ---- 5. Interactive polish (GPU-only: transform / box-shadow) ---- */ .card,.tool-card,.cat-card,.feature-card,.panel-card{ transition:transform var(--t-mid,.22s ease),box-shadow var(--t-mid,.22s ease),border-color var(--t-mid,.22s ease)} .card:hover,.tool-card:hover,.cat-card:hover,.feature-card:hover{ transform:translateY(-4px); box-shadow:var(--shadow-lg); border-color:var(--accent)} .btn,.btn-primary,.btn-secondary,.btn-outline,.btn-ghost{ transition:transform var(--t-fast,.12s ease),box-shadow var(--t-mid,.22s ease),background var(--t-fast,.12s ease),border-color var(--t-fast,.12s ease)} .btn:hover,.btn-primary:hover{transform:translateY(-2px)} .btn:active,.btn-primary:active{transform:translateY(0)} /* Sticky-nav subtle depth on scroll (class toggled by theme-v2.js) */ .nav.tas-scrolled,.topnav.tas-scrolled,nav.tas-scrolled{box-shadow:var(--shadow)} /* ---- 6. Scroll-reveal utility (JS adds .tas-reveal, then .tas-in) ---- */ .tas-reveal{opacity:0;transform:translateY(16px); transition:opacity .5s cubic-bezier(.2,.7,.3,1),transform .5s cubic-bezier(.2,.7,.3,1)} .tas-reveal.tas-in{opacity:1;transform:none} /* ---- 6b. Apex homepage: trust-strip + trust band ---- */ .tas-trust-strip{display:inline-flex;align-items:center;gap:.5rem;padding:.35rem .8rem; border:1px solid var(--border);border-radius:9999px;background:var(--surface); font-size:.75rem;color:var(--text-2);margin-bottom:1rem;font-family:var(--font-mono,monospace)} .tas-dot{width:7px;height:7px;border-radius:50%;background:var(--green); box-shadow:0 0 0 3px rgba(63,112,87,.18);animation:tasPulse 2.4s ease-in-out infinite} @keyframes tasPulse{50%{box-shadow:0 0 0 6px rgba(63,112,87,0)}} .tas-trustband{border-top:1px solid var(--border);border-bottom:1px solid var(--border);background:var(--bg-2)} .tas-trustband .container{display:flex;flex-wrap:wrap;gap:2rem;justify-content:space-between; padding-top:1.25rem;padding-bottom:1.25rem} .tas-tb-item{display:flex;align-items:center;gap:.6rem;font-size:.86rem;color:var(--text-2)} .tas-tb-item svg{color:var(--accent);flex-shrink:0} /* ---- 7. Accessibility: honor reduced-motion everywhere ---- */ @media (prefers-reduced-motion:reduce){ *{animation:none!important;transition:none!important} .tas-reveal{opacity:1!important;transform:none!important} }