/* ============================================================================ QUANTUM DEFENSE OS — premium visual layer for NeoShield Security Quantum X. Visual-only. Loaded LAST, so it retunes design tokens and refines materials on the EXISTING markup. No content, structure, routes, or logic are changed. Every value derives from the design system below (§ Design tokens). ========================================================================== */ /* ── § Design tokens ──────────────────────────────────────────────────────── */ :root{ /* Foundation — deep-space environment */ --qz-space:#02040A; /* absolute space */ --qz-command:#040812; /* command black */ --qz-navy:#071321; /* deep navy */ --bg:#040812; --panel:#0A1928; /* panel navy */ --panel-2:#0D2133; /* elevated surface */ --panel-3:#0F2740; /* raised control */ --line:rgba(115,190,230,.18); --line-soft:rgba(115,190,230,.10); --line-bright:rgba(115,190,230,.34); /* Accents — semantic */ --accent:#16D9FF; /* quantum cyan — info / scan / interactive */ --accent-azure:#278CFF; /* electric azure — platform / navigation */ --accent-2:#9D74FF; /* intelligence violet — AI / Pro */ --accent-3:#53F28D; /* defense green — safe / verified / free */ --ok:#53F28D; --warn:#FFBD4A; --crit:#FF657A; /* Text tiers */ --ink:#F3F8FC; --muted:#B6C4D3; --faint:#7F93A8; --disabled:#536578; /* Gradients */ --grad-accent:linear-gradient(118deg,#16D9FF 0%,#3FB4FF 42%,#9D74FF 100%); --grad-primary:linear-gradient(135deg,#22E0FF 0%,#278CFF 100%); --grad-panel:linear-gradient(180deg,rgba(255,255,255,.028),rgba(255,255,255,0) 42%); /* Glows & shadows (restrained — emphasis reflects importance, not decoration) */ --glow:rgba(22,217,255,.30); --glow-2:rgba(157,116,255,.26); --glow-ok:rgba(83,242,141,.28); --shadow-1:0 1px 0 rgba(255,255,255,.04) inset, 0 14px 34px -22px rgba(0,0,0,.9); --shadow-2:0 1px 0 rgba(255,255,255,.06) inset, 0 24px 60px -26px rgba(0,4,10,.95); --shadow-lift:0 1px 0 rgba(255,255,255,.08) inset, 0 30px 70px -28px rgba(0,0,0,.95), 0 0 0 1px var(--line-bright); /* Radii */ --r:14px; --r-sm:10px; --r-lg:18px; /* Spacing scale (4·8·12·16·24·32·48·64) */ --s1:4px; --s2:8px; --s3:12px; --s4:16px; --s6:24px; --s8:32px; --s12:48px; --s16:64px; /* Motion */ --ease:cubic-bezier(.22,.61,.36,1); --ease-out:cubic-bezier(.16,1,.3,1); --t-fast:150ms; --t:200ms; --t-slow:240ms; /* Type */ --sans:"Inter var","Inter",system-ui,-apple-system,"Segoe UI",Roboto,Helvetica,Arial,sans-serif; /* Z layers */ --z-env:0; --z-base:1; --z-raised:5; --z-nav:50; --z-overlay:100; } /* Deeper accent glows on capable browsers */ @supports (color:color-mix(in oklab,#000,#fff)){ :root{ --glow:color-mix(in oklab,var(--accent) 34%,transparent); --glow-2:color-mix(in oklab,var(--accent-2) 28%,transparent); --line:color-mix(in oklab,var(--accent) 15%,transparent); --line-bright:color-mix(in oklab,var(--accent) 32%,transparent); } } /* ── § Level 0 — Environment ──────────────────────────────────────────────── */ html{background:var(--qz-space)} body{ background: radial-gradient(1200px 620px at 82% -12%, rgba(157,116,255,.13), transparent 60%), radial-gradient(1000px 560px at -6% -4%, rgba(22,217,255,.11), transparent 58%), radial-gradient(1400px 900px at 50% 118%, rgba(39,140,255,.08), transparent 60%), linear-gradient(180deg,var(--qz-command),var(--qz-space) 140vh) fixed; color:var(--ink); } /* extremely faint world-grid, fixed, behind everything, never over text contrast */ body::before{ content:"";position:fixed;inset:0;z-index:var(--z-env);pointer-events:none; background-image: linear-gradient(rgba(115,190,230,.05) 1px,transparent 1px), linear-gradient(90deg,rgba(115,190,230,.05) 1px,transparent 1px); background-size:52px 52px,52px 52px; -webkit-mask-image:radial-gradient(140% 100% at 50% 0%,#000 0%,transparent 72%); mask-image:radial-gradient(140% 100% at 50% 0%,#000 0%,transparent 72%); opacity:.5; } /* Keep real content above the fixed environment grid. IMPORTANT: the topbar must stay ABOVE .wrap or the nav dropdown gets covered by page content — so it keeps its own high layer rather than being flattened to the base layer. */ .wrap,.footer{position:relative;z-index:var(--z-base)} .topbar{position:sticky;top:0;z-index:var(--z-nav)} .nd-menu{z-index:calc(var(--z-nav) + 10)} /* ── § Level 1 — Structural surfaces (mineral glass) ──────────────────────── */ .panel,.neon-panel{ background:linear-gradient(180deg,var(--panel),var(--panel-2)) ,var(--grad-panel); border:1px solid var(--line);border-radius:var(--r-lg); box-shadow:var(--shadow-1); } .seo-prose{background:linear-gradient(180deg,var(--panel),var(--panel-2))} /* ── § Level 2 — Interactive modules (cards) ──────────────────────────────── */ .card{ background:linear-gradient(180deg,var(--panel-2),var(--panel)); border:1px solid var(--line);border-radius:var(--r); box-shadow:var(--shadow-1); transition:transform var(--t) var(--ease), border-color var(--t) var(--ease), box-shadow var(--t) var(--ease), background var(--t) var(--ease); } .card::before{ /* top inner highlight — subtle machined edge */ content:"";position:absolute;inset:0 0 auto 0;height:1px;border-radius:var(--r) var(--r) 0 0; background:linear-gradient(90deg,transparent,rgba(255,255,255,.10),transparent);pointer-events:none} .card{position:relative} /* Level 3 — hover elevation (2–4px, brighter border, edge trace). Reduced-motion off. */ .card:hover{ transform:translateY(-3px); border-color:var(--line-bright); box-shadow:var(--shadow-lift); } a.card:hover,.suite-card:hover{ box-shadow:var(--shadow-lift), 0 0 22px -6px var(--glow); } a.card::after{ /* one-edge accent trace that appears on hover, no layout shift */ content:"";position:absolute;left:0;top:14px;bottom:14px;width:2px;border-radius:2px; background:linear-gradient(180deg,var(--accent),var(--accent-2)); opacity:0;transition:opacity var(--t) var(--ease);pointer-events:none} a.card:hover::after{opacity:.9} /* keep the semantic left-accent on trust/threat cards */ .nx-trust .card{border-left:3px solid var(--ok)} .threat-card{border-left:3px solid var(--warn)} /* ── § Hero — command environment + ambient defensive core ────────────────── */ /* Hero: clean glass panel. No decorative overlay — the shield artwork and the concentric rings were removed because they overlapped the hero content and the navigation. Content legibility outranks ornament. */ .hero,.nx-hero{ background:linear-gradient(180deg,var(--panel),var(--panel-2)); border:1px solid var(--line);border-radius:var(--r-lg); box-shadow:var(--shadow-2); position:relative; } .nx-hero h1{letter-spacing:-.02em;line-height:1.08} .nx-grad,.nx-trust .metric{background:var(--grad-accent);-webkit-background-clip:text;background-clip:text;color:transparent} .nx-lede{color:var(--muted)} /* self-verifying boot log — align to new palette */ .nx-boot{border-color:color-mix(in oklab,var(--accent) 26%,transparent); background:rgba(2,6,14,.66);box-shadow:var(--shadow-1)} /* ── § Typography scale ───────────────────────────────────────────────────── */ body{font-family:var(--sans);letter-spacing:.001em} h1{letter-spacing:-.02em} h2.sec,.sec{letter-spacing:.005em} .metric{font-variant-numeric:tabular-nums;font-feature-settings:"tnum" 1} .eyebrow{color:var(--accent);text-shadow:0 0 18px var(--glow)} code,pre,.mono,.kv{font-variant-ligatures:none} /* ── § Buttons & controls ─────────────────────────────────────────────────── */ .btn{ border-radius:var(--r-sm);font-weight:650;letter-spacing:.01em; background:var(--grad-primary);color:#04141b;border:1px solid transparent; box-shadow:0 0 0 1px rgba(34,224,255,.35) inset, 0 10px 26px -14px var(--glow); transition:transform var(--t-fast) var(--ease), filter var(--t) var(--ease), box-shadow var(--t) var(--ease); min-height:42px; } .btn:hover{filter:brightness(1.06);box-shadow:0 0 0 1px rgba(34,224,255,.5) inset, 0 14px 30px -12px var(--glow);transform:translateY(-1px)} .btn:active{transform:translateY(0)} .btn.secondary{ background:linear-gradient(180deg,var(--panel-3),var(--panel-2));color:var(--ink); border:1px solid var(--line);box-shadow:var(--shadow-1)} .btn.secondary:hover{border-color:var(--line-bright);filter:none;background:linear-gradient(180deg,var(--panel-3),var(--panel-3))} .btn.danger,.btn.crit{background:transparent;border:1px solid var(--crit);color:var(--crit);box-shadow:none} .btn.danger:hover{background:color-mix(in oklab,var(--crit) 12%,transparent);filter:none} /* keyboard-visible focus ring on every interactive element */ a:focus-visible,button:focus-visible,.btn:focus-visible,input:focus-visible, select:focus-visible,textarea:focus-visible,summary:focus-visible,[tabindex]:focus-visible{ outline:2px solid var(--accent);outline-offset:2px;border-radius:6px; box-shadow:0 0 0 4px rgba(22,217,255,.22)} /* form controls — glass fields */ input,select,textarea{ background:var(--panel-2);border:1px solid var(--line);color:var(--ink);border-radius:var(--r-sm)} input:focus,select:focus,textarea:focus{border-color:var(--accent);outline:none; box-shadow:0 0 0 3px rgba(22,217,255,.18)} /* ── § Badges / pills / tags ──────────────────────────────────────────────── */ .badge,.pill,.tag,.suite-tag{ border-radius:999px;font-family:var(--mono);letter-spacing:.05em; background:color-mix(in oklab,var(--accent) 9%,transparent); border:1px solid color-mix(in oklab,var(--accent) 42%,transparent);color:var(--accent)} .b-ok,.badge-ok{color:var(--ok);border-color:color-mix(in oklab,var(--ok) 48%,transparent); background:color-mix(in oklab,var(--ok) 10%,transparent)} .b-warn,.badge-warn{color:var(--warn);border-color:color-mix(in oklab,var(--warn) 48%,transparent); background:color-mix(in oklab,var(--warn) 10%,transparent)} .b-crit,.badge-crit{color:var(--crit);border-color:color-mix(in oklab,var(--crit) 48%,transparent); background:color-mix(in oklab,var(--crit) 10%,transparent)} .b-info{color:var(--accent-azure);border-color:color-mix(in oklab,var(--accent-azure) 48%,transparent); background:color-mix(in oklab,var(--accent-azure) 10%,transparent)} /* ── § Navigation ─────────────────────────────────────────────────────────── */ .topbar{background:linear-gradient(180deg,rgba(4,8,18,.86),rgba(4,8,18,.6)); border-bottom:1px solid var(--line);backdrop-filter:blur(8px)} .nav a:hover{color:var(--ink)} .nd-menu{background:linear-gradient(180deg,var(--panel),var(--panel-2)); border:1px solid var(--line);border-radius:var(--r);box-shadow:var(--shadow-2)} /* ── § Tables ─────────────────────────────────────────────────────────────── */ th{color:var(--muted)} tr:hover td{background:rgba(115,190,230,.03)} /* ── § Pricing — transparent emphasis (no dark patterns) ──────────────────── */ .price-row .card,.price-card{position:relative} .price-row .card.popular,.price-card.popular,.price-row .card.featured{ border-color:color-mix(in oklab,var(--accent-2) 55%,transparent); box-shadow:var(--shadow-2),0 0 30px -10px var(--glow-2)} /* ── § Section rhythm & dividers ──────────────────────────────────────────── */ .sec{position:relative;padding-left:14px} .sec::before{content:"";position:absolute;left:0;top:.18em;bottom:.18em;width:3px;border-radius:3px; background:linear-gradient(180deg,var(--accent),var(--accent-2))} .footer{border-top:1px solid var(--line);background:linear-gradient(180deg,transparent,rgba(2,6,14,.6))} /* ── § Trust layer (from trust.css users, kept consistent) ────────────────── */ .trust-bar,.trust-card,.trust-operator{border-color:var(--line)} /* ── § Accessibility & performance ────────────────────────────────────────── */ @media (prefers-reduced-motion: reduce){ .card,.btn,a.card::after{transition:none} *{scroll-behavior:auto} } @media (prefers-contrast: more){ :root{--muted:#D3DEEA;--faint:#A7B7C8;--line:rgba(150,210,245,.4);--line-bright:rgba(150,210,245,.6)} .card,.panel{border-color:var(--line-bright)} } /* honor light-mode users minimally without abandoning the command aesthetic */ @media print{ body::before{display:none} } /* ============================================================================ § Tool-card icon system + hero shield — visual-only, keyed by href so NO markup changes (content stays byte-identical). Geometric line icons, one consistent 2px stroke, category-colored chips (DEFEND=green · SCAN=cyan · BUILD=violet · TEAM=azure). ========================================================================== */ .suite-card{padding-top:66px} .suite-card::before{ content:"";position:absolute;left:18px;top:16px;width:42px;height:42px;border-radius:11px; background-repeat:no-repeat;background-position:center;background-size:23px 23px; background-color:color-mix(in oklab,var(--ic,#16D9FF) 14%,transparent); border:1px solid color-mix(in oklab,var(--ic,#16D9FF) 42%,transparent); box-shadow:0 0 16px -6px var(--ic,#16D9FF); } .suite-card:hover::before{box-shadow:0 0 22px -4px var(--ic,#16D9FF)} .suite-card .suite-tag{top:26px} /* category accent bar echoes the icon color */ .suite-card{border-top:2px solid color-mix(in oklab,var(--ic,#16D9FF) 55%,transparent)} /* --- per-tool icon + category color (baked stroke color in each SVG) --- */ a.suite-card[href="/scam_inspector"]{--ic:#53F28D} a.suite-card[href="/scam_inspector"]::before{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2353F28D' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 5h16v10H9l-4 4z'/%3E%3Cpath d='M12 8v3'/%3E%3Cpath d='M12 13.5v.01'/%3E%3C/svg%3E")} a.suite-card[href="/vuln_scanner"]{--ic:#16D9FF} a.suite-card[href="/vuln_scanner"]::before{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2316D9FF' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='9'/%3E%3Cpath d='M3 12h18M12 3a15 15 0 0 1 0 18M12 3a15 15 0 0 0 0 18'/%3E%3C/svg%3E")} a.suite-card[href="/zero_day_detector"]{--ic:#16D9FF} a.suite-card[href="/zero_day_detector"]::before{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2316D9FF' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='6' cy='7' r='2'/%3E%3Ccircle cx='18' cy='9' r='2'/%3E%3Ccircle cx='9' cy='17' r='2'/%3E%3Ccircle cx='17' cy='17' r='2'/%3E%3Cpath d='M8 8l8 1M8 9l1 6M11 17h4'/%3E%3C/svg%3E")} a.suite-card[href="/pqc_analyzer"]{--ic:#16D9FF} a.suite-card[href="/pqc_analyzer"]::before{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2316D9FF' stroke-width='2'%3E%3Ccircle cx='12' cy='12' r='2'/%3E%3Cellipse cx='12' cy='12' rx='10' ry='4.5'/%3E%3Cellipse cx='12' cy='12' rx='10' ry='4.5' transform='rotate(60 12 12)'/%3E%3Cellipse cx='12' cy='12' rx='10' ry='4.5' transform='rotate(120 12 12)'/%3E%3C/svg%3E")} a.suite-card[href="/pqc_suite"]{--ic:#16D9FF} a.suite-card[href="/pqc_suite"]::before{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2316D9FF' stroke-width='2' stroke-linejoin='round'%3E%3Cpath d='M12 3l8 4.5v9L12 21l-8-4.5v-9z'/%3E%3Cpath d='M12 3v18M4 7.5l8 4.5 8-4.5'/%3E%3C/svg%3E")} a.suite-card[href="/exposure_check"]{--ic:#16D9FF} a.suite-card[href="/exposure_check"]::before{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2316D9FF' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='10' cy='8' r='3.5'/%3E%3Cpath d='M4 20a6 6 0 0 1 12 0'/%3E%3Cpath d='M17 10l4 4M21 10l-4 4'/%3E%3C/svg%3E")} a.suite-card[href="/soc_copilot"]{--ic:#53F28D} a.suite-card[href="/soc_copilot"]::before{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2353F28D' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='5' y='8' width='14' height='10' rx='2'/%3E%3Cpath d='M12 4v4M9 13v.01M15 13v.01M3 12v3M21 12v3'/%3E%3C/svg%3E")} a.suite-card[href="/ai_consultant"]{--ic:#53F28D} a.suite-card[href="/ai_consultant"]::before{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2353F28D' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 20V10M10 20V4M16 20v-7M22 20H2'/%3E%3C/svg%3E")} a.suite-card[href="/incident_response"]{--ic:#53F28D} a.suite-card[href="/incident_response"]::before{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2353F28D' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='4' y='5' width='16' height='14' rx='3'/%3E%3Cpath d='M12 9v6M9 12h6'/%3E%3C/svg%3E")} a.suite-card[href="/phish_email_ai"]{--ic:#53F28D} a.suite-card[href="/phish_email_ai"]::before{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2353F28D' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='6' width='18' height='12' rx='2'/%3E%3Cpath d='M3 8l9 5 9-5'/%3E%3Cpath d='M17 3c0 2-2 2-2 4a2 2 0 0 0 4 0'/%3E%3C/svg%3E")} a.suite-card[href="/ai_code_review"]{--ic:#9D74FF} a.suite-card[href="/ai_code_review"]::before{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%239D74FF' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M8 8l-4 4 4 4M16 8l4 4-4 4M13 6l-2 12'/%3E%3C/svg%3E")} a.suite-card[href="/patch_generator"]{--ic:#9D74FF} a.suite-card[href="/patch_generator"]::before{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%239D74FF' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M14 6l4 4M4 20l9-9M13 5l3-3 5 5-3 3-2-2-3 3'/%3E%3C/svg%3E")} a.suite-card[href="/reverse_engineering"]{--ic:#9D74FF} a.suite-card[href="/reverse_engineering"]::before{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%239D74FF' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='5' width='18' height='14' rx='2'/%3E%3Cpath d='M7 10l2 2-2 2M12 14h4'/%3E%3C/svg%3E")} a.suite-card[href="/devsecops"]{--ic:#9D74FF} a.suite-card[href="/devsecops"]::before{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%239D74FF' stroke-width='2' stroke-linecap='round'%3E%3Cpath d='M7 12a3 3 0 1 0 3 3c0-3 4-6 7-3a3 3 0 1 1-3-3c-3 0-4 3-7 3z'/%3E%3C/svg%3E")} a.suite-card[href="/soc_console"]{--ic:#278CFF} a.suite-card[href="/soc_console"]::before{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23278CFF' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='4' width='18' height='12' rx='2'/%3E%3Cpath d='M8 20h8M12 16v4M7 8l2 2-2 2M12 12h4'/%3E%3C/svg%3E")} a.suite-card[href="/factory_studio"]{--ic:#9D74FF} a.suite-card[href="/factory_studio"]::before{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%239D74FF' stroke-width='2' stroke-linejoin='round'%3E%3Cpath d='M3 20h18M4 20v-8l5 3V12l5 3V9l6 3v8'/%3E%3C/svg%3E")} a.suite-card[href="/quantum_vault"]{--ic:#53F28D} a.suite-card[href="/quantum_vault"]::before{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2353F28D' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='5' y='10' width='14' height='10' rx='2'/%3E%3Cpath d='M8 10V7a4 4 0 0 1 8 0v3M12 14v2'/%3E%3C/svg%3E")} /* Hero shield artwork removed — it overlapped the hero content and navigation. The hero stays a clean glass panel; all other visual treatment is unchanged. */ @media(max-width:860px){.suite-card{padding-top:60px}} /* ============================================================================ § Touch targets + Learn hub icons (visual-only, href-keyed) — completes the screenshot's iconography and meets the 44px touch-target guideline. ========================================================================== */ .btn{min-height:44px} a.badge,button,summary{min-height:auto} /* Learn / Train / Compare — compact icon chips per known href */ .nx-learn a.card{padding-top:58px;position:relative} .nx-learn a.card::before{ content:"";position:absolute;left:18px;top:16px;width:34px;height:34px;border-radius:9px; background-repeat:no-repeat;background-position:center;background-size:19px 19px; background-color:color-mix(in oklab,var(--ic,#16D9FF) 14%,transparent); border:1px solid color-mix(in oklab,var(--ic,#16D9FF) 40%,transparent); box-shadow:0 0 14px -6px var(--ic,#16D9FF); } .nx-learn a.card[href="/academy"]{--ic:#53F28D} .nx-learn a.card[href="/academy"]::before{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2353F28D' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M2 8l10-4 10 4-10 4z'/%3E%3Cpath d='M6 10v5c0 1 3 2.5 6 2.5s6-1.5 6-2.5v-5M22 8v5'/%3E%3C/svg%3E")} .nx-learn a.card[href="/pentest_path"]{--ic:#16D9FF} .nx-learn a.card[href="/pentest_path"]::before{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2316D9FF' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='8'/%3E%3Ccircle cx='12' cy='12' r='3'/%3E%3Cpath d='M12 1v3M12 20v3M1 12h3M20 12h3'/%3E%3C/svg%3E")} .nx-learn a.card[href="/compare"]{--ic:#278CFF} .nx-learn a.card[href="/compare"]::before{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23278CFF' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 3v18M6 7l-4 6h8zM18 7l-4 6h8z'/%3E%3Cpath d='M4 21h16'/%3E%3C/svg%3E")} .nx-learn a.card[href="/blog"]{--ic:#9D74FF} .nx-learn a.card[href="/blog"]::before{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%239D74FF' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='4' y='3' width='16' height='18' rx='2'/%3E%3Cpath d='M8 8h8M8 12h8M8 16h5'/%3E%3C/svg%3E")} .nx-learn a.card[href="/quantum"]{--ic:#16D9FF} .nx-learn a.card[href="/quantum"]::before{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2316D9FF' stroke-width='2'%3E%3Ccircle cx='12' cy='12' r='2'/%3E%3Cellipse cx='12' cy='12' rx='10' ry='4.5'/%3E%3Cellipse cx='12' cy='12' rx='10' ry='4.5' transform='rotate(60 12 12)'/%3E%3Cellipse cx='12' cy='12' rx='10' ry='4.5' transform='rotate(120 12 12)'/%3E%3C/svg%3E")} .nx-learn a.card[href="/trust"]{--ic:#53F28D} .nx-learn a.card[href="/trust"]::before{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2353F28D' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 3l7 3v6c0 5-3.5 7.5-7 9-3.5-1.5-7-4-7-9V6z'/%3E%3Cpath d='M9 12l2 2 4-4'/%3E%3C/svg%3E")} /* ============================================================================ § Inline-style compatibility layer Some pages carry an inline