/* ============================================================================
NX-PRO — PROFESSIONAL REFINEMENT LAYER
NeoShield Security QUANTUM X
----------------------------------------------------------------------------
WHAT THIS IS
A single, final-cascade stylesheet that retunes the platform from a neon
"cyberpunk console" look to a calm, enterprise-grade instrument panel that
Japanese SMB buyers read as trustworthy.
DESIGN THESIS — "colour means risk"
In a security product the only thing allowed to shout is a finding.
Everything else — chrome, cards, buttons, tables — is neutral graphite.
Saturated colour is reserved exclusively for severity states, so a red on
screen always carries information and never decoration.
HOW IT WORKS (this is why nothing breaks)
· Additive only. No class is renamed, removed, or restructured.
· Loads LAST, after nx-mobile.css and BEFORE any per-page $PAGE_CSS,
so page-specific stylesheets still win where they need to.
· Most of the change happens at TOKEN level (:root), so every one of the
14 existing stylesheets inherits the new palette automatically.
· !important is used only on ~20 purely decorative rules (glow, grid
textures, gradient text) where an earlier layer has equal specificity.
No token and no layout property uses it.
REVERT
Delete this file and its in partials/meta_seo.php. Nothing else
references it.
========================================================================= */
/* ==========================================================================
1. TOKENS — palette retune
Every value below is contrast-checked against the surface it sits on.
Ratios are noted inline; all body text meets WCAG 2.1 AA (4.5:1) and all
interactive borders meet 1.4.11 (3:1).
========================================================================== */
:root{
/* ---- Surfaces: near-neutral graphite. The old base carried a purple and
cyan radial wash that tinted every page; this is quiet by design. -- */
--bg: #0B0E14; /* page base */
--panel: #131924; /* raised surface — panels, header, dropdowns */
--panel-2: #0F141D; /* recessed surface — cards, inputs, code */
--panel-3: #171E2B; /* elevated surface — hover, sticky table head */
/* ---- Rules & hairlines ------------------------------------------------ */
--line: #232C3A; /* structural hairline */
--line-soft: #1B2330; /* internal divider */
--line-strong:#334054; /* emphasised edge */
--line-input: #5C6B85; /* form controls — 3.42:1, meets 1.4.11 */
/* ---- Text ------------------------------------------------------------- */
--ink: #E8ECF3; /* 16.3:1 on bg */
--ink-2: #B3BECD; /* 10.3:1 — secondary copy */
--muted: #8B97A8; /* 6.5:1 — labels, captions */
--faint: #7A8698; /* 4.8:1 on the LIGHTEST surface it lands on —
lifted from #5a6680, which measured 3.9:1 and
failed AA wherever it carried real copy. */
/* ---- Action & brand ---------------------------------------------------
Two tones, because one blue cannot serve both roles on a dark UI:
--accent light azure for text, links, icons (7.9:1)
--accent-strong solid fill behind white button text (4.7:1) */
--accent: #5AA9FF;
--accent-strong: #2E6FE0;
--accent-hover: #3D7FEC;
--accent-fg: #FFFFFF;
--accent-2: #8FA6D8; /* muted steel — structural, not decorative */
--accent-3: #6FD3C7; /* rare third tone, data series only */
/* ---- Severity: the only saturated colours in the system --------------- */
--ok: #3FB950; /* 7.6:1 */
--warn: #E3A008; /* 8.6:1 */
--crit: #F0616D; /* 6.1:1 */
--high: #F0883E; /* 7.6:1 */
--info: #6CB6FF; /* 9.0:1 */
/* ---- Tinted fills for status chips and notice bodies ------------------ */
--ok-bg: rgba(63,185,80,.12);
--warn-bg: rgba(227,160,8,.12);
--crit-bg: rgba(240,97,109,.12);
--high-bg: rgba(240,136,62,.12);
--info-bg: rgba(108,182,255,.11);
--accent-bg: rgba(90,169,255,.10);
/* ---- Glow tokens neutralised. Kept as variables (other sheets read them)
but reduced to near-transparent so inherited glows fade out. ------ */
--glow: rgba(90,169,255,.14);
--glow-2: rgba(143,166,216,.10);
--edge: rgba(90,169,255,.18);
/* ---- Typography -------------------------------------------------------
FIX: the legacy --sans had no Japanese faces, so JP copy fell back to
whatever the browser chose and rendered inconsistently across the
Japanese locale. The JP stack is now explicit and ordered. */
--sans: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
"Helvetica Neue", Arial,
"Hiragino Kaku Gothic ProN", "Hiragino Sans", "Yu Gothic UI",
"Yu Gothic", "Noto Sans JP", Meiryo, sans-serif;
--mono: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas,
"Liberation Mono", "Roboto Mono",
"Yu Gothic", "Noto Sans JP", monospace;
/* ---- Shape ------------------------------------------------------------
One radius family instead of the four that had accumulated (10/12/14/20). */
--r: 10px;
--r-sm: 7px;
--r-lg: 14px;
--r-pill: 999px;
/* ---- Elevation: shadows carry depth, not colour ----------------------- */
--sh-1: 0 1px 2px rgba(0,0,0,.30);
--sh-2: 0 1px 3px rgba(0,0,0,.34), 0 8px 20px -8px rgba(0,0,0,.42);
--sh-3: 0 2px 6px rgba(0,0,0,.38), 0 20px 44px -16px rgba(0,0,0,.52);
--shadow-1: var(--sh-2);
--shadow-2: var(--sh-3);
--shadow-card: var(--sh-2);
--shadow-raised: var(--sh-3);
/* ---- Focus ------------------------------------------------------------ */
--ring-color: #7FC0FF; /* 10.0:1 on bg */
--ring: 0 0 0 3px rgba(127,192,255,.38);
/* ---- Motion ----------------------------------------------------------- */
--ease: cubic-bezier(.4,0,.2,1);
--t: 160ms;
/* ---- Measure ---------------------------------------------------------- */
--maxw: 1200px;
}
/* Remap the nx-system semantic tokens that were hard-coded to old hexes.
The var()-based ones inherit the block above automatically. */
:root{
--color-surface-elevated: var(--panel-3);
--color-border-strong: var(--line-strong);
--color-text-secondary: var(--ink-2);
--color-text-muted: var(--muted);
--color-action-fg: var(--accent-fg);
--color-info: var(--info);
--color-risk-low: var(--ok);
--color-risk-medium: var(--warn);
--color-risk-high: var(--high);
--color-risk-critical: var(--crit);
--focus-ring: 2px solid var(--ring-color);
}
/* ==========================================================================
2. TYPOGRAPHY
A real scale replaces the ad-hoc sizes. Headings drop from weight 800 to
600 — heavy display weights are the single loudest "consumer app" signal.
========================================================================== */
body{
font-family:var(--sans);
font-size:16px;
line-height:1.62;
letter-spacing:normal;
color:var(--ink);
-webkit-font-smoothing:antialiased;
-moz-osx-font-smoothing:grayscale;
text-rendering:optimizeLegibility;
}
/* The base background carried two coloured radial gradients. Removed: the
page is now a flat, even field so content reads as the foreground. */
body{ background:var(--bg) !important; }
h1,h2,h3,h4,h5,h6{
font-family:var(--sans);
font-weight:600;
color:var(--ink);
letter-spacing:-.012em;
line-height:1.25;
text-wrap:balance;
}
h1{ font-size:clamp(1.75rem,3.4vw,2.5rem); line-height:1.15; margin:0 0 .5rem; }
h2{ font-size:clamp(1.35rem,2.4vw,1.75rem); margin:0 0 .5rem; }
h3{ font-size:1.125rem; margin:0 0 .4rem; }
h4{ font-size:1rem; }
h2.sec,.sec{
font-size:1.0625rem;
font-weight:600;
letter-spacing:.004em;
color:var(--ink);
margin:2rem 0 .75rem;
padding-bottom:.5rem;
border-bottom:1px solid var(--line-soft);
}
p{ margin:0 0 1rem; }
p:last-child{ margin-bottom:0; }
/* Long-form prose gets a proper measure so lines stay readable. */
.seo-prose p,.nx-measure p,.nx-reading p{ max-width:72ch; }
/* ---- Eyebrows -----------------------------------------------------------
Was: monospace, 0.28em tracking, accent-coloured, with an 18px glow.
Now: sans, restrained tracking, muted. This one change does more for
perceived professionalism than any other rule in the file. */
.eyebrow,.nx-eyebrow{
font-family:var(--sans) !important;
font-size:.6875rem;
font-weight:600;
letter-spacing:.13em;
text-transform:uppercase;
color:var(--muted) !important;
text-shadow:none !important;
margin:0 0 .625rem;
}
/* Hero headline sizes were shouting at 4rem. Brought into a business range. */
.nx-h1{ font-size:clamp(1.9rem,3.6vw,2.9rem); line-height:1.12; letter-spacing:-.022em; }
.nx-h2{ font-size:clamp(1.4rem,2.4vw,2rem); line-height:1.2; letter-spacing:-.016em; }
.nx-lede-lg,.nx-hero-v2 .nx-lede-v2{
font-size:clamp(1rem,1.15vw,1.125rem);
line-height:1.65;
color:var(--ink-2);
font-weight:400;
}
/* Gradient-filled text is removed everywhere. It fails contrast checks,
breaks in high-contrast mode, and reads as a consumer flourish. */
.hero h1,.metric,.nx-h1,.qx-hero h1{
background:none !important;
-webkit-background-clip:border-box !important;
background-clip:border-box !important;
-webkit-text-fill-color:currentColor !important;
color:var(--ink) !important;
}
/* Numerals in data contexts align in columns. */
.metric,.num,.val,.k,.nx-price,table,.tbl,.meter-val,.stat,.kpi,
td,th,time,.mono{ font-variant-numeric:tabular-nums; font-feature-settings:"tnum" 1; }
code,pre,.mono,.nx-mono{
font-family:var(--mono);
font-variant-ligatures:none;
font-size:.875em;
}
code:not(pre code){
background:var(--panel-2);
border:1px solid var(--line-soft);
border-radius:5px;
padding:.1em .38em;
color:var(--ink-2);
}
pre{
background:var(--panel-2);
border:1px solid var(--line);
border-radius:var(--r);
padding:14px 16px;
overflow:auto;
line-height:1.55;
}
/* ==========================================================================
3. AMBIENT DE-NOISE
Four separate layers had each added their own background texture, glowing
hairline, or scanline. Stacked, they read as visual static. All are
switched off here rather than edited out of their source files, so every
original stylesheet stays intact and revertible.
========================================================================== */
/* Full-page blueprint grids (style.css defined two of them). */
body::before,body::after{
content:none !important;
background-image:none !important;
opacity:0 !important;
}
/* Glowing gradient hairlines under the header and above the footer. */
.topbar::after{
background:var(--line) !important;
box-shadow:none !important;
opacity:1 !important;
height:1px;
}
.foot::before{
background:var(--line) !important;
box-shadow:none !important;
opacity:1 !important;
}
/* Hero grid overlay — kept at a whisper so the surface isn't dead flat. */
.hero::before{ opacity:.02 !important; }
/* Decorative HUD corner brackets and blueprint textures. */
.hud::before,.hud::after{ background:none !important; }
.blueprint{ background-image:none !important; }
/* Threat-card diagonal colour wash. */
.threat-card:before{ background:none !important; }
/* Scrollbars: neutral, not cyan-glowing. */
*{ scrollbar-color:var(--line-strong) transparent !important; scrollbar-width:thin; }
*::-webkit-scrollbar{ width:10px; height:10px; }
*::-webkit-scrollbar-track{ background:transparent; }
*::-webkit-scrollbar-thumb{
background-color:var(--line-strong) !important;
background-clip:content-box;
border:2px solid transparent;
border-radius:var(--r-pill);
box-shadow:none !important;
}
*::-webkit-scrollbar-thumb:hover{ background-color:#455471 !important; }
/* Scroll-reveal animation: the 28px rise on every card made long pages feel
unsettled. Reduced to a short fade — still alive, no longer restless. */
@keyframes fxRise{
from{ opacity:0; transform:translateY(6px); }
to { opacity:1; transform:none; }
}
/* ==========================================================================
4. LAYOUT & RHYTHM
========================================================================== */
.wrap,.nx-container{
max-width:var(--maxw);
margin-inline:auto;
padding:32px 24px 72px;
}
@media(max-width:640px){ .wrap,.nx-container{ padding:20px 16px 56px; } }
.nx-section{ margin-top:56px; }
.nx-section:first-child{ margin-top:0; }
.grid,.nx-grid{ gap:16px; }
/* ==========================================================================
5. CHROME — header, navigation, footer
========================================================================== */
.topbar{
padding:0 24px;
min-height:58px;
background:rgba(19,25,36,.86);
border-bottom:1px solid var(--line);
backdrop-filter:saturate(140%) blur(12px);
-webkit-backdrop-filter:saturate(140%) blur(12px);
box-shadow:none;
}
@media(max-width:640px){ .topbar{ padding:0 16px; } }
.brand{
display:flex; align-items:center; gap:10px;
color:var(--ink); font-weight:600; letter-spacing:-.01em; font-size:.9375rem;
}
.brand:hover{ text-decoration:none; }
.brand b{ font-weight:600; color:var(--muted); }
.brand img{ border-radius:6px; }
.nav{ gap:2px; font-size:.875rem; }
.nav a,.nd-label{
color:var(--ink-2);
padding:7px 11px;
border-radius:var(--r-sm);
font-weight:500;
transition:background var(--t) var(--ease), color var(--t) var(--ease);
}
.nav a:hover,.nd-label:hover{
color:var(--ink);
background:rgba(255,255,255,.055);
text-decoration:none;
}
/* The animated underline slider on every nav item was busy. Removed. */
.nav a::after{ content:none !important; }
.nav .ghost{
border:1px solid var(--line-strong);
border-radius:var(--r-sm);
color:var(--ink);
background:transparent;
}
.nav .ghost:hover{ background:rgba(255,255,255,.06); border-color:var(--line-input); }
/* ---- Dropdown menus ---------------------------------------------------- */
.nd-menu{
background:var(--panel);
border:1px solid var(--line);
border-radius:var(--r);
box-shadow:var(--sh-3);
padding:6px;
}
.nd-menu a{
display:block;
padding:7px 10px;
border-radius:var(--r-sm);
color:var(--ink-2);
font-size:.875rem;
font-weight:450;
}
.nd-menu a:hover{ background:rgba(255,255,255,.06); color:var(--ink); text-decoration:none; }
.nd-group{
font-size:.625rem; font-weight:700; letter-spacing:.13em; text-transform:uppercase;
color:var(--faint); margin:10px 10px 4px; padding-top:8px;
border-top:1px solid var(--line-soft);
}
.nd-menu > .nd-group:first-of-type{ border-top:0; padding-top:0; margin-top:6px; }
/* Tier pills: quiet by default, colour only where it distinguishes a plan. */
.nd-tier{
float:right; margin-left:10px;
font-family:var(--sans); font-size:.625rem; font-weight:600;
letter-spacing:.06em; text-transform:uppercase;
padding:2px 7px; border-radius:var(--r-pill);
border:1px solid var(--line-strong); color:var(--faint);
}
.nd-tier.free{ color:var(--ok); border-color:rgba(63,185,80,.4); background:var(--ok-bg); }
.nd-tier.pro { color:var(--accent); border-color:rgba(90,169,255,.4); background:var(--accent-bg); }
.nd-tier.team{ color:var(--accent-2);border-color:rgba(143,166,216,.4); }
/* ---- Footer ------------------------------------------------------------ */
.foot,.site-foot{
border-top:1px solid var(--line);
background:var(--panel-2);
color:var(--muted);
font-size:.8125rem;
padding:40px 24px 28px;
text-align:left;
}
.foot a{ color:var(--ink-2); }
.foot a:hover{ color:var(--ink); }
.foot-h,.nx-foot-col > b,.nx-foot-col h4{
font-size:.6875rem; font-weight:700; letter-spacing:.12em; text-transform:uppercase;
color:var(--faint); margin:0 0 10px;
}
.nx-foot-cols{ gap:32px 24px; }
.nx-legal-bar,.nx-foot-bottom,.foot-bottom{
border-top:1px solid var(--line-soft);
margin-top:28px; padding-top:18px;
color:var(--faint); font-size:.75rem;
}
.foot-status-dot{ box-shadow:none; }
/* ==========================================================================
6. SURFACES
Flat fills replace the vertical gradients each surface carried. Depth now
comes from a single hairline plus a neutral shadow.
========================================================================== */
.panel,.neon-panel,.nx-card,.seo-prose{
background:var(--panel) !important;
border:1px solid var(--line);
border-radius:var(--r-lg);
box-shadow:var(--sh-2);
padding:24px;
}
.card{
background:var(--panel-2) !important;
border:1px solid var(--line);
border-left:2px solid var(--accent-2);
border-radius:var(--r);
box-shadow:var(--sh-1);
padding:18px;
transition:border-color var(--t) var(--ease),
transform var(--t) var(--ease),
box-shadow var(--t) var(--ease);
}
/* Hover: a 1px lift, not a 3px hop with a coloured halo. */
.card:hover,a.nx-card:hover,.nx-tile:hover{
transform:translateY(-1px);
border-color:var(--line-input);
box-shadow:var(--sh-2);
}
.card h3,.nx-card h3{ font-size:1rem; font-weight:600; margin:0 0 .35rem; }
.card p,.nx-card p{ color:var(--ink-2); font-size:.875rem; margin:0; }
.hero,.nx-hero-v2,.compact-hero{
background:var(--panel-2) !important;
border:1px solid var(--line);
border-radius:var(--r-lg);
box-shadow:none;
padding:40px 32px;
margin-bottom:28px;
}
@media(max-width:640px){ .hero,.nx-hero-v2,.compact-hero{ padding:26px 20px; } }
.hero p,.nx-hero-v2 p{ color:var(--ink-2); }
.nx-tile{
background:var(--panel-2);
border:1px solid var(--line);
border-radius:var(--r);
box-shadow:var(--sh-1);
}
.nx-preview,.nx-aud-card{
background:var(--panel-2);
border:1px solid var(--line);
border-radius:var(--r);
}
.nx-preview-bar{ background:var(--panel-3); border-bottom:1px solid var(--line); }
/* Numbered step markers: neutral counters, not accent-coloured badges. */
.nx-steps > li,.nx-flow > li{ border-top:1px solid var(--line); }
.nx-steps > li::before,.nx-flow > li::before{
color:var(--faint); font-family:var(--mono); font-weight:600;
background:none; border:0; box-shadow:none;
}
/* ==========================================================================
7. ACTIONS
========================================================================== */
.btn{
display:inline-flex; align-items:center; justify-content:center; gap:8px;
background:var(--accent-strong);
color:var(--accent-fg);
border:1px solid var(--accent-strong);
border-radius:var(--r-sm);
padding:9px 17px;
font-family:var(--sans);
font-size:.875rem;
font-weight:600;
letter-spacing:0;
line-height:1.4;
cursor:pointer;
box-shadow:none !important; /* was a 28px cyan halo */
text-shadow:none;
transition:background var(--t) var(--ease), border-color var(--t) var(--ease);
}
.btn:hover{
background:var(--accent-hover);
border-color:var(--accent-hover);
filter:none;
transform:none; /* the 1px jump on every button is gone */
text-decoration:none;
}
.btn:active{ background:var(--accent-strong); transform:none; }
.btn:disabled,.btn[aria-disabled="true"]{ opacity:.45; cursor:not-allowed; }
.btn.secondary,.nx-cap-secondary{
background:transparent;
color:var(--ink);
border:1px solid var(--line-input);
font-weight:550;
}
.btn.secondary:hover{ background:rgba(255,255,255,.055); border-color:#6E7C96; }
.btn.danger{
background:transparent; color:var(--crit); border:1px solid rgba(240,97,109,.55);
}
.btn.danger:hover{ background:var(--crit-bg); border-color:var(--crit); }
.btn.ghost,.btn.link{
background:transparent; border-color:transparent; color:var(--accent); font-weight:550;
}
.btn.ghost:hover,.btn.link:hover{ background:var(--accent-bg); }
.btn.sm{ padding:6px 12px; font-size:.8125rem; }
.btn.lg{ padding:12px 24px; font-size:.9375rem; }
/* ---- Links -------------------------------------------------------------
The animated background-size underline sweep is replaced by a plain
underline with proper offset — quieter and easier to read. */
a{ color:var(--accent); text-decoration:none; }
a:hover{ text-decoration:underline; text-underline-offset:3px; }
.wrap a:not(.btn):not(.chip):not(.mod):not(.path):not(.card):not(.blog-card){
background-image:none !important;
text-decoration-thickness:1px;
}
.chip{
display:inline-flex; align-items:center; gap:6px;
background:var(--panel-3); border:1px solid var(--line);
border-radius:var(--r-pill); padding:4px 11px;
font-size:.8125rem; color:var(--ink-2);
}
.chip:hover{ border-color:var(--line-input); text-decoration:none; color:var(--ink); }
/* ==========================================================================
8. FORMS
Input boundaries were nearly invisible (1.9:1). They now meet 1.4.11 at
3.4:1, which is the most consequential accessibility fix in this pass.
========================================================================== */
label{
display:block; font-size:.8125rem; font-weight:500;
color:var(--ink-2); letter-spacing:0; margin:0 0 6px;
}
input[type=text],input[type=email],input[type=url],input[type=number],
input[type=password],input[type=search],input[type=tel],input[type=date],
textarea,select{
width:100%;
background:var(--panel-2);
border:1px solid var(--line-input);
color:var(--ink);
border-radius:var(--r-sm);
padding:9px 12px;
font-family:var(--sans);
font-size:.9375rem;
line-height:1.5;
transition:border-color var(--t) var(--ease), box-shadow var(--t) var(--ease);
}
input::placeholder,textarea::placeholder{ color:var(--faint); }
input:hover,textarea:hover,select:hover{ border-color:#6E7C96; }
input:focus,textarea:focus,select:focus{
outline:none;
border-color:var(--ring-color);
box-shadow:var(--ring);
}
textarea{ min-height:130px; resize:vertical; font-family:var(--mono); font-size:.875rem; }
select{
appearance:none;
padding-right:34px;
background-image:linear-gradient(45deg,transparent 50%,var(--muted) 50%),
linear-gradient(135deg,var(--muted) 50%,transparent 50%);
background-position:calc(100% - 17px) 51%, calc(100% - 12px) 51%;
background-size:5px 5px, 5px 5px;
background-repeat:no-repeat;
}
input[type=checkbox],input[type=radio]{
accent-color:var(--accent-strong); width:16px; height:16px; cursor:pointer;
}
.otp input{ width:46px; height:54px; text-align:center; font-size:1.3rem; }
/* iOS Safari zooms the viewport when a focused field is under 16px.
seo-responsive.css guards against this; restate it here so the tighter
desktop size above cannot undo that fix on phones and tablets. */
@media(max-width:900px){
input[type=text],input[type=email],input[type=url],input[type=number],
input[type=password],input[type=search],input[type=tel],input[type=date],
textarea,select{ font-size:16px; }
}
/* ==========================================================================
9. DATA — tables, meters, metrics
========================================================================== */
table,.tbl{
width:100%;
border-collapse:separate;
border-spacing:0;
font-size:.875rem;
}
th{
text-align:left;
font-size:.6875rem;
font-weight:600;
letter-spacing:.09em;
text-transform:uppercase;
color:var(--muted);
background:var(--panel-3);
padding:9px 12px;
border-bottom:1px solid var(--line);
/* Deliberately NOT white-space:nowrap — nx-mobile.css exists to stop
horizontal overflow, and a nowrap header would undo that work. */
}
td{
padding:10px 12px;
border-bottom:1px solid var(--line-soft);
color:var(--ink-2);
vertical-align:top;
}
tbody tr:last-child td{ border-bottom:0; }
tbody tr:hover td{ background:rgba(255,255,255,.022); }
.panel table,.panel .tbl{ border:1px solid var(--line); border-radius:var(--r); overflow:hidden; }
.metric{
display:block;
font-size:1.875rem;
font-weight:600;
line-height:1.1;
letter-spacing:-.02em;
color:var(--ink);
}
.metric + .muted,.metric + .sub{ font-size:.8125rem; }
.meter{
height:6px; border-radius:var(--r-pill);
background:var(--panel-2); border:1px solid var(--line); overflow:hidden;
}
/* The tri-colour gradient bar implied a risk reading that wasn't there.
A single neutral fill; severity is expressed by the adjacent badge. */
.meter > i{ display:block; height:100%; background:var(--accent-strong); }
.meter.is-ok > i{ background:var(--ok); }
.meter.is-warn > i{ background:var(--warn); }
.meter.is-crit > i{ background:var(--crit); }
.kv,.nx-kv dt{
font-size:.6875rem; font-weight:600; letter-spacing:.09em;
text-transform:uppercase; color:var(--muted);
}
.nx-kv dd{ color:var(--ink-2); font-size:.875rem; }
/* ==========================================================================
10. STATUS — the signature
Everything above is neutral so that this section can carry all the colour.
Severity reads three ways at once: a left rail, a tinted field, and a
labelled chip — so it survives greyscale printing and colour-blindness.
========================================================================== */
.badge,.nx-tag{
display:inline-block;
font-family:var(--sans);
font-size:.6875rem;
font-weight:600;
letter-spacing:.05em;
text-transform:uppercase;
padding:2px 8px;
border-radius:var(--r-pill);
border:1px solid var(--line-strong);
color:var(--muted);
background:transparent;
white-space:nowrap;
vertical-align:middle;
}
.b-ok, .nx-tag.plan-free{ color:var(--ok); border-color:rgba(63,185,80,.45); background:var(--ok-bg); }
.b-warn { color:var(--warn); border-color:rgba(227,160,8,.45); background:var(--warn-bg); }
.b-crit { color:var(--crit); border-color:rgba(240,97,109,.45); background:var(--crit-bg); }
.b-info,.nx-tag.plan-pro { color:var(--accent); border-color:rgba(90,169,255,.45); background:var(--accent-bg); }
.nx-tag.plan-team { color:var(--accent-2);border-color:rgba(143,166,216,.45); }
.nx-sev{
font-size:.6875rem; font-weight:700; letter-spacing:.07em; text-transform:uppercase;
padding:2px 8px; border-radius:var(--r-pill); border:1px solid currentColor;
}
.nx-sev.low { color:var(--ok); background:var(--ok-bg); }
.nx-sev.medium { color:var(--warn); background:var(--warn-bg); }
.nx-sev.high { color:var(--high); background:var(--high-bg); }
.nx-sev.critical{ color:var(--crit); background:var(--crit-bg); }
/* ---- Severity rail: the one place the design is allowed to be emphatic -- */
.notice{
position:relative;
border:1px solid var(--line);
border-left:3px solid var(--line-strong);
border-radius:var(--r-sm);
background:var(--panel-2);
color:var(--ink-2);
padding:12px 16px;
font-size:.9375rem;
margin:0 0 18px;
}
.notice.info{ border-left-color:var(--info); background:var(--info-bg); border-color:rgba(108,182,255,.28); }
.notice.ok { border-left-color:var(--ok); background:var(--ok-bg); border-color:rgba(63,185,80,.28); }
.notice.warn{ border-left-color:var(--warn); background:var(--warn-bg); border-color:rgba(227,160,8,.28); }
.notice.err { border-left-color:var(--crit); background:var(--crit-bg); border-color:rgba(240,97,109,.28); color:#FFD9DD; }
.notice strong,.notice b{ color:var(--ink); }
.nx-finding{ border-left:3px solid var(--line-strong); padding-left:14px; }
.nx-finding:has(.nx-sev.low) { border-left-color:var(--ok); }
.nx-finding:has(.nx-sev.medium) { border-left-color:var(--warn); }
.nx-finding:has(.nx-sev.high) { border-left-color:var(--high); }
.nx-finding:has(.nx-sev.critical){ border-left-color:var(--crit); }
.nx-proof li{ border-left:2px solid var(--line-strong); color:var(--ink-2); }
.mitigation{
border:1px solid var(--line);
border-left:3px solid var(--ok);
border-radius:var(--r-sm);
background:var(--ok-bg);
color:var(--ink-2);
padding:12px 14px;
}
/* ==========================================================================
11. PRICING
========================================================================== */
.nx-plan{
background:var(--panel-2);
border:1px solid var(--line);
border-radius:var(--r-lg);
box-shadow:var(--sh-1);
}
.nx-plan.is-recommended{
border-color:var(--accent-strong);
box-shadow:0 0 0 1px var(--accent-strong), var(--sh-2);
}
.nx-price{
font-size:1.875rem; font-weight:600; letter-spacing:-.02em; color:var(--ink);
}
.nx-price-sub{ color:var(--muted); font-size:.8125rem; }
/* ==========================================================================
12. ACCESSIBILITY
========================================================================== */
:focus-visible{
outline:2px solid var(--ring-color);
outline-offset:2px;
border-radius:3px;
}
:focus:not(:focus-visible){ outline:none; }
a:focus-visible,.btn:focus-visible,.chip:focus-visible,
.nd-label:focus-visible,summary:focus-visible,
[tabindex]:focus-visible,[role="button"]:focus-visible{
outline:2px solid var(--ring-color);
outline-offset:2px;
}
.skip:focus{
left:12px; top:12px;
background:var(--panel); color:var(--ink);
border:1px solid var(--line-input);
padding:10px 16px; border-radius:var(--r-sm);
z-index:100; box-shadow:var(--sh-3);
}
.sr-only{
position:absolute; width:1px; height:1px; padding:0; margin:-1px;
overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; border:0;
}
::selection{ background:rgba(46,111,224,.45); color:#fff; }
hr{ border:0; border-top:1px solid var(--line); margin:24px 0; }
@media (prefers-reduced-motion:reduce){
*,*::before,*::after{
animation-duration:.001ms !important;
animation-iteration-count:1 !important;
transition-duration:.001ms !important;
scroll-behavior:auto !important;
}
}
@media (prefers-contrast:more){
:root{
--line:#4A5870; --line-soft:#3A4658; --line-strong:#6E7C96;
--muted:#B3BECD; --faint:#9AA6B8; --ink-2:#DCE3EC;
}
.badge,.nx-tag,.nx-sev{ border-width:2px; }
}
@media (forced-colors:active){
.btn,.card,.panel,.badge,.notice{ border:1px solid ButtonBorder; }
.metric,.hero h1,.nx-h1{ color:CanvasText !important; }
}
/* ==========================================================================
13. PRINT
Reports and audit findings are printed and attached to email in this
market, so the print sheet is a product surface, not an afterthought.
========================================================================== */
@media print{
:root{
--bg:#fff; --panel:#fff; --panel-2:#fff; --panel-3:#f6f7f9;
--ink:#111; --ink-2:#333; --muted:#555; --faint:#666;
--line:#ccc; --line-soft:#e2e2e2; --line-strong:#999; --line-input:#999;
}
body{ background:#fff !important; color:#111; font-size:11pt; }
.topbar,.nav,.nd-menu,.foot,.skip,.pwa-install,
.btn,.chips,[data-no-print],.ad-slot,ins.adsbygoogle{ display:none !important; }
.wrap,.nx-container{ max-width:none; padding:0; }
.panel,.card,.hero,.nx-card,.nx-preview{
border:1px solid #ccc !important; box-shadow:none !important;
background:#fff !important; break-inside:avoid; page-break-inside:avoid;
}
h1,h2,h3{ break-after:avoid; page-break-after:avoid; color:#111 !important; }
table{ break-inside:auto; }
tr,.nx-finding,.notice{ break-inside:avoid; page-break-inside:avoid; }
th{ background:#f0f1f3 !important; color:#333 !important; }
a{ color:#111; text-decoration:underline; }
/* Print the destination of content links so a paper report stays useful. */
.seo-prose a[href^="http"]::after,
.nx-measure a[href^="http"]::after{
content:" (" attr(href) ")"; font-size:9pt; color:#555; word-break:break-all;
}
.badge,.nx-sev,.notice{ border:1px solid #999 !important; background:#fff !important; color:#111 !important; }
.nx-sev.critical::before{ content:"■ "; }
.nx-sev.high::before { content:"▲ "; }
.nx-sev.medium::before { content:"◆ "; }
.nx-sev.low::before { content:"● "; }
}
/* ==========================================================================
14. MOBILE
Loads before nx-mobile.css's own media queries in specificity terms only
where selectors match exactly, so structural mobile fixes there still win.
========================================================================== */
@media(max-width:768px){
body{ font-size:15.5px; }
h1{ font-size:1.625rem; }
.nx-h1{ font-size:1.75rem; }
.metric,.nx-price{ font-size:1.625rem; }
.panel,.neon-panel,.nx-card{ padding:18px; }
.card{ padding:15px; }
.btn{ padding:10px 16px; } /* comfortable 40px tap target */
.nav a,.nd-label{ padding:9px 12px; }
.foot,.site-foot{ padding:28px 16px 22px; text-align:left; }
th,td{ padding:8px 10px; }
}
/* Tap highlight and overscroll polish on touch devices. */
@media (hover:none){
.card:hover,a.nx-card:hover,.nx-tile:hover{ transform:none; }
*{ -webkit-tap-highlight-color:rgba(90,169,255,.18); }
}
/* ==========================================================================
15. iOS SAFE AREA — installed PWA
----------------------------------------------------------------------------
THE BUG THIS FIXES
partials/meta_seo.php ships two settings that must be paired with CSS work:
Together these tell iOS "draw my page edge to edge, and make the status bar a
transparent overlay rather than a reserved strip." That is the right choice —
it is what makes an installed app look like an app instead of a web page. But
it hands the browser NO responsibility for keeping content clear of the clock,
signal bars and battery. The page must inset itself.
nx-system.css and seo-responsive.css already handle left, right and bottom.
Nothing anywhere handled TOP. So in the installed PWA the sticky header sat at
y=0, underneath the status bar: the logo was clipped, the brand text collided
with the clock, and the menu button was half off-screen — which is exactly
what a user means by "the menu and logo can't be seen."
This was never visible in a normal browser tab, because Safari's own chrome
occupies that space. It only appears once someone installs the app, which is
the moment the product is meant to look most finished.
WHY CUSTOM PROPERTIES INSTEAD OF env() INLINE
env() cannot be overridden, which makes a safe-area layout impossible to test:
headless browsers always report 0. Routing every inset through a variable
means the layout can be exercised at a real notch height by setting --safe-t
in a test, and it gives one obvious place to reason about the insets.
========================================================================== */
:root{
--safe-t: env(safe-area-inset-top, 0px);
--safe-r: env(safe-area-inset-right, 0px);
--safe-b: env(safe-area-inset-bottom, 0px);
--safe-l: env(safe-area-inset-left, 0px);
--topbar-h: 58px;
}
/* The header pads itself down by the inset. Because .topbar is position:sticky
with its own background, the padding box paints UNDER the status bar — so the
bar gets a solid dark backing and its white text stays legible, instead of
floating over whatever content happens to scroll past. */
.topbar{
box-sizing:border-box;
padding-top:var(--safe-t);
padding-left:max(24px, var(--safe-l));
padding-right:max(24px, var(--safe-r));
min-height:calc(var(--topbar-h) + var(--safe-t));
}
@media(max-width:640px){
.topbar{
padding-left:max(16px, var(--safe-l));
padding-right:max(16px, var(--safe-r));
}
}
/* Landscape: the notch moves to a side, so body content needs the horizontal
inset too or text runs under the sensor housing. */
.wrap,.nx-container{
padding-left:max(24px, var(--safe-l));
padding-right:max(24px, var(--safe-r));
}
@media(max-width:640px){
.wrap,.nx-container{
padding-left:max(16px, var(--safe-l));
padding-right:max(16px, var(--safe-r));
}
}
/* Home-indicator clearance, so the last footer row is not sitting under the
swipe bar. */
.foot,.site-foot{ padding-bottom:max(28px, var(--safe-b)); }
/* The open drawer measures from below the header, which is now taller. Without
this the menu runs past the bottom of the screen and the last few links
become unreachable. */
@media(max-width:980px){
.nav-toggle:checked ~ .nav,
.topbar.nav-open .nav{
max-height:calc(100dvh - var(--topbar-h) - var(--safe-t) - var(--safe-b));
overflow:auto;
overscroll-behavior:contain;
padding-bottom:var(--safe-b);
}
}
/* ==========================================================================
16. HEADER AT PHONE WIDTH
The brand lockup is "NeoShield Security Quantum X" — long enough at 390px to
push the menu button off the edge. It needs to yield before the control does:
a truncated wordmark is a minor loss, an unreachable menu is a broken app.
========================================================================== */
.brand{ min-width:0; flex:0 1 auto; }
.brand span{
min-width:0;
overflow:hidden;
text-overflow:ellipsis;
white-space:nowrap;
}
.brand img{ flex:0 0 auto; filter:none; }
@media(max-width:640px){
.brand{ font-size:.875rem; gap:8px; }
/* "Quantum X" is the sub-lockup: first to go when space is short. */
.brand b{ font-weight:500; color:var(--muted); }
}
@media(max-width:380px){
.brand b{ display:none; }
}
/* ---- Menu button --------------------------------------------------------
Must read unambiguously as a control. The previous border used --line, which
at the new palette is a structural hairline (1.4:1) and effectively invisible
against the header — the button looked like a stray rectangle rather than
something tappable. --line-strong gives it a real edge. */
/* NOTE ON `display` — this rule sets everything about the button EXCEPT whether
it is visible. seo-responsive.css:7 hides .nav-burger by default and reveals
it under 980px; nx-pro.css loads last, so declaring `display` here at any
width would beat that rule and strand the burger on desktop beside the full
navigation. Visibility is set in the scoped block below and nowhere else. */
.nav-burger{
flex:0 0 auto;
width:42px; height:38px;
min-width:44px; min-height:44px;
padding:10px;
flex-direction:column; justify-content:center;
gap:5px;
background:var(--panel-3);
/* --line-input, not --line-strong. Measured against the header background,
--line-strong gives 1.68:1 — below the 3:1 WCAG 1.4.11 requires for the
boundary of a control, and in practice the button read as a stray shape
rather than something tappable. --line-input measures 3.27:1. The bars
themselves are 14.1:1, so the icon was never the problem; the container
edge was. */
border:1px solid var(--line-input);
border-radius:var(--r-sm);
cursor:pointer;
touch-action:manipulation;
-webkit-tap-highlight-color:transparent;
transition:background var(--t) var(--ease), border-color var(--t) var(--ease);
}
.nav-burger span{
display:block; height:2px; width:100%;
background:var(--ink);
border-radius:2px;
transition:transform var(--t) var(--ease), opacity var(--t) var(--ease);
}
.nav-burger:hover{ background:var(--line); border-color:var(--line-input); }
.nav-burger:active{ background:var(--line-soft); }
.nav-burger:focus-visible{ outline:2px solid var(--ring-color); outline-offset:2px; }
/* ---- Drawer -------------------------------------------------------------
Once open, the menu is a surface in its own right rather than a list bleeding
into the page behind it. */
@media(max-width:980px){
.nav-toggle:checked ~ .nav,
.topbar.nav-open .nav{
background:var(--panel);
border-top:1px solid var(--line);
margin-top:10px;
padding-inline:0;
}
.nav a,.nd-label{
padding:12px 4px;
border-bottom:1px solid var(--line-soft);
border-radius:0;
font-size:.9375rem;
}
.nav a:last-child{ border-bottom:0; }
.nav .ghost{
margin-top:12px;
border-radius:var(--r-sm);
justify-content:center;
border:1px solid var(--line-input);
}
}
/* ==========================================================================
17. HEADER ARRANGEMENT — mobile
----------------------------------------------------------------------------
Three faults were stacking to produce a 124px header with only ~91px of
content in it, and nothing lining up inside that:
1. DEAD BAND UNDER THE LOGO.
nx-system.css:528 gives .nav `padding-bottom: max(--space-4, safe-b)`.
When the drawer is closed it is collapsed with `max-height:0` — but
max-height limits the CONTENT box, not padding. So the collapsed menu
still occupied 16px, plus the 10px row-gap from the wrapped flex row.
26px of empty header that looked like a rendering fault.
2. BRAND AND BUTTON NOT ALIGNED.
style.css:144 sets `align-items:flex-start` below 720px. The wordmark is
30px tall and the menu button 44px, so they hung from a shared top edge
instead of sharing a centre line — subtly wrong in a way that reads as
"unfinished" without being obvious enough to name.
3. NO BOTTOM PADDING.
The bar had a safe-area inset on top and nothing beneath, so its contents
sat against the lower border.
Fixed together, because fixing any one alone leaves the bar looking broken.
========================================================================== */
@media(max-width:980px){
.topbar{
align-items:center;
row-gap:0;
padding-top:calc(var(--safe-t) + 9px);
padding-bottom:9px;
flex-wrap:wrap;
}
/* A closed drawer must take up exactly nothing. Padding and border are reset
here and reinstated on the open state below, rather than relying on
max-height to hide them — which it cannot. */
.topbar .nav{
max-height:0;
overflow:hidden;
opacity:0;
margin:0;
padding:0;
border:0;
flex-basis:100%;
}
.nav-toggle:checked ~ .nav,
.topbar.nav-open .nav{
max-height:calc(100dvh - var(--topbar-h) - var(--safe-t) - var(--safe-b));
opacity:1;
overflow-y:auto;
overscroll-behavior:contain;
-webkit-overflow-scrolling:touch;
margin-top:9px;
padding-top:6px;
padding-bottom:max(16px, var(--safe-b));
padding-left:max(0px, var(--safe-l));
padding-right:max(0px, var(--safe-r));
border-top:1px solid var(--line);
}
}
/* ==========================================================================
18. HERO ARRANGEMENT
----------------------------------------------------------------------------
The homepage hero ran: eyebrow -> product definition -> H1 -> lede. Two
paragraphs of description sandwiching the headline, both set at nearly the
same size and colour. On a phone that puts roughly 35 words of prose in front
of the sentence the page exists to deliver, so the headline arrives already
buried — the single biggest reason the page reads as unarranged.
index.php now runs eyebrow -> H1 -> lede -> definition, and the definition is
demoted here to a quiet one-line descriptor. Nothing is deleted: the sentence
still carries real weight for a first-time visitor and for search, it just
stops competing with the headline for the top of the screen.
========================================================================== */
.nx-qx-def{
font-size:.875rem;
line-height:1.55;
color:var(--muted);
max-width:58ch;
margin:0 0 22px;
padding-left:12px;
border-left:2px solid var(--line-strong);
}
/* Tighten the vertical rhythm so the first screen carries the headline, the
lede and both calls to action instead of just the headline. */
.nx-hero-grid > div > .nx-eyebrow{ margin-bottom:10px; }
@media(max-width:640px){
.nx-h1{ font-size:1.6875rem; line-height:1.18; }
.nx-lede-lg{ font-size:1rem; line-height:1.6; }
.nx-hero-grid{ margin-top:8px; }
/* Stacked full-width buttons with a clear primary. The tertiary link is not a
button and should not pretend to be one. */
.nx-hero-actions{
display:flex;
flex-direction:column;
align-items:stretch;
gap:10px;
}
.nx-hero-actions .btn{ width:100%; }
.nx-hero-actions .nx-tertiary{
align-self:flex-start;
padding:4px 0;
margin-top:2px;
}
.nx-trust-row{ margin-top:22px; }
.nx-trust-row li{ font-size:.875rem; line-height:1.5; }
}
/* ==========================================================================
19. FINAL POLISH
========================================================================== */
/* ---- Trust row ----------------------------------------------------------
nx-system.css:346 gives each claim `border-left:2px solid var(--color-success)`.
Green is severity green in this system — it means a check PASSED. Spending it
on marketing copy breaks the one rule the whole palette rests on, and on a
dark page three floating green bars read as status indicators for something
that has no status.
A check glyph says "verified" without borrowing the severity channel, and it
survives greyscale. Two of these claims link to the page that substantiates
them, so the mark is earned rather than decorative. */
.nx-trust-row li{
position:relative;
border-left:0;
padding:3px 0 3px 26px;
color:var(--ink-2);
font-size:.9375rem;
line-height:1.55;
}
.nx-trust-row li::before{
content:"";
position:absolute;
left:2px; top:.62em;
width:11px; height:6px;
border-left:1.5px solid var(--muted);
border-bottom:1.5px solid var(--muted);
transform:rotate(-45deg);
}
.nx-trust-row a{
color:var(--ink-2);
text-decoration-color:var(--line-input);
text-underline-offset:3px;
}
.nx-trust-row a:hover{ color:var(--ink); text-decoration-color:var(--muted); }
/* ---- Header alignment ---------------------------------------------------
The wordmark carried a 0.3px letter-spacing and a baseline offset that left
its optical centre ~3px above the menu button's. Small, but a header is the
one component on every page, so a misalignment there is paid for everywhere. */
.topbar > .brand{ align-self:center; margin:0; }
.brand{ letter-spacing:-.005em; line-height:1.2; }
/* ---- Section rhythm -----------------------------------------------------
Headings were floating at the same distance from the block above them as from
their own content, so the page read as one long column rather than as
sections. Space belongs above a heading, not below it. */
.nx-section + .nx-section{ margin-top:48px; }
@media(max-width:640px){
.nx-section{ margin-top:40px; }
.nx-section + .nx-section{ margin-top:40px; }
}
/* ---- Hero close ---------------------------------------------------------
A hairline gives the hero a bottom edge, so the first section below it starts
somewhere rather than simply continuing. */
.nx-hero-grid{ padding-bottom:32px; border-bottom:1px solid var(--line-soft); }
@media(max-width:640px){ .nx-hero-grid{ padding-bottom:26px; } }
/* ---- Tertiary link ------------------------------------------------------
Was rendering at full link blue and the same weight as the buttons beside it,
so three actions competed at equal volume. A primary, a secondary and a text
link should look like three different levels of commitment. */
.nx-tertiary{
font-size:.9375rem;
font-weight:500;
color:var(--accent);
text-decoration:none;
}
.nx-tertiary:hover{ text-decoration:underline; text-underline-offset:3px; }
/* ==========================================================================
20. BURGER VISIBILITY — the single place `display` is set on .nav-burger
----------------------------------------------------------------------------
Regression fixed here: §16 styled the button with an unscoped
`display:inline-flex`. Because nx-pro.css is the last stylesheet loaded, that
one declaration outranked `seo-responsive.css:7 .nav-burger{display:none}` at
EVERY width, so the desktop header rendered a hamburger next to the full
navigation — two navigation affordances for one menu.
Styling and visibility are separated deliberately: §16 owns how the button
looks, this block owns when it exists. Any future rule that needs to restyle
the burger can do so without accidentally revealing it.
========================================================================== */
.nav-burger{ display:none; }
@media(max-width:980px){
.nav-burger{ display:inline-flex; }
}
/* ==========================================================================
21. INSTRUMENT LAYER
----------------------------------------------------------------------------
"Futuristic" for a security console is not neon. The 2.0.0 pass removed the
glow precisely because it read as a game to the buyer this product is sold
to, and nothing here reintroduces it.
What actually reads as advanced in an operational tool is PRECISION: the
visual language of measurement equipment. Hairline rules rather than heavy
borders. Numerals that align in columns. Severity carried by a structural
rail instead of a coloured box. Density that says the instrument has more to
show than the screen can hold.
The rule from §10 still governs: colour means risk. Everything below is
neutral except severity.
========================================================================== */
/* ---- Homepage plan label -------------------------------------------------
Added in 2.10.0 with no CSS. It sits between the description and the CTA and
must read as a quiet qualifier — a plan label that outshouts the call to
action inverts the card. */
.nx-tile-plan{
display:inline-flex;
align-items:center;
gap:6px;
align-self:flex-start;
margin:2px 0 10px;
padding:3px 9px;
border:1px solid var(--line);
border-radius:var(--r-pill);
background:var(--panel-3);
color:var(--muted);
font-size:.6875rem;
font-weight:600;
letter-spacing:.04em;
font-variant-numeric:tabular-nums;
white-space:nowrap;
}
.nx-tile-plan::before{
content:"";
width:5px; height:5px;
border-radius:50%;
background:var(--accent-2);
flex:0 0 auto;
}
.nx-tile:hover .nx-tile-plan{ border-color:var(--line-strong); }
/* ---- Attention list ------------------------------------------------------
The answer to "what needs attention", so it is the densest, most scannable
block on the page: two columns on desktop, one on narrow screens, severity
on a left rail rather than a filled panel. A filled severity block draws the
eye to the container; a rail draws it to the text. */
.tsc-attn{
display:grid;
grid-template-columns:1fr;
gap:12px;
margin-top:4px;
}
@media(min-width:900px){
.tsc-attn{ grid-template-columns:repeat(2, minmax(0, 1fr)); }
}
.tsc-attn-item{
position:relative;
display:flex;
flex-direction:column;
padding:16px 18px 16px 20px;
border-left:0; /* the rail below replaces it */
overflow:hidden;
}
/* The rail. A pseudo-element so it hugs the full card height regardless of
content length, and so severity never depends on a border shorthand that a
later rule might overwrite. */
.tsc-attn-item::before{
content:"";
position:absolute;
left:0; top:0; bottom:0;
width:3px;
background:var(--line-strong);
}
/* Severity is set by the badge the markup already emits, so the rail and the
label can never disagree — there is one source of truth. */
.tsc-attn-item:has(.b-crit)::before{ background:var(--crit); }
.tsc-attn-item:has(.b-warn)::before{ background:var(--warn); }
.tsc-attn-item:has(.b-info)::before{ background:var(--accent); }
.tsc-attn-item:has(.b-ok)::before { background:var(--ok); }
.tsc-attn-item strong{
font-size:1rem;
font-weight:600;
letter-spacing:-.008em;
color:var(--ink);
}
.tsc-attn-item p{ margin:0 0 6px; }
.tsc-attn-item .btn{
align-self:flex-start;
margin-top:auto;
padding-top:8px;
padding-bottom:8px;
}
.tsc-attn-item .badge{
font-variant-numeric:tabular-nums;
letter-spacing:.07em;
}
/* ---- Measurement typography ---------------------------------------------
Any figure an operator compares against another figure gets tabular numerals
and a slight negative tracking, so columns of numbers line up and read as
readings rather than prose. */
.tsc-card .metric,
.tsc-num,
.tsc-attn-item .badge,
.ps-gauge b,
.nx-price,
.metric{
font-variant-numeric:tabular-nums;
font-feature-settings:"tnum" 1, "ss01" 1;
letter-spacing:-.015em;
}
/* Provenance and source strings: monospace at a size that signals "reference
detail", never competing with the value it describes. */
.tsc-src,
.tsc-why{
font-family:var(--mono);
font-size:.72rem;
line-height:1.45;
color:var(--faint);
letter-spacing:0;
}
/* Unavailable is a first-class state, visually distinct from zero. A dashed
edge reads as "no reading", which is exactly what it means. */
.tsc-unavail{
display:inline-block;
padding:1px 8px;
border:1px dashed var(--line-strong);
border-radius:var(--r-sm);
color:var(--muted);
font-size:.8125rem;
}
/* ---- Section rhythm inside the console ----------------------------------- */
.tsc-attn + .sec,
.tsc-attn ~ h2.sec{ margin-top:32px; }
/* ---- Focus, honoured everywhere in this layer ---------------------------- */
.tsc-attn-item .btn:focus-visible,
.nx-tile:focus-visible{
outline:2px solid var(--ring-color);
outline-offset:2px;
}
/* Motion: there is none here by design, but guard anyway so a future addition
inherits the constraint rather than having to remember it. */
@media (prefers-reduced-motion:reduce){
.tsc-attn-item,
.nx-tile-plan{ transition:none !important; }
}
/* ==========================================================================
22. TYPE SCALE AND READABILITY FLOOR
----------------------------------------------------------------------------
Two measured problems, not stylistic preferences.
1. SIXTY-SEVEN DISTINCT FONT SIZES across the sixteen stylesheets
(.62 / .66 / .68 / .7 / .72 / .76 / .78 / .8 / .82 / .85 / .86 / .88 /
.9 / .92 / .95 rem and more). Values that close together are not design
decisions — they are accumulated guesses. The reader cannot perceive the
difference between .86rem and .88rem, but the page still looks unresolved,
because nothing lines up on a shared rhythm.
2. THE SMALLEST RENDERED TEXT IS 11px, and the stylesheets contain values
down to .62rem — 9.9px. Measured on every page harness at 320px and 390px.
WHY 11px IS WORSE HERE THAN IT LOOKS
This product is sold to Japanese SMBs, and the interface ships a Japanese
locale. Kanji carry far more strokes per em than Latin letters: 明朝 and
ゴシック glyphs that are legible at 15px become a grey smudge at 11px, on
exactly the metadata an operator needs to read — timestamps, severity labels,
source provenance. A size that is merely tight in English is unusable in
Japanese.
So: a floor of 12px everywhere, 13px for Japanese, and the loose cluster
collapsed onto a scale. Sizes are only ever raised, never lowered, so no
text becomes harder to read than it is today.
========================================================================== */
:root{
/* Seven steps. Each is distinguishable from its neighbour at arm's length. */
--fs-3xs: .75rem; /* 12px — hard floor, provenance and micro-labels */
--fs-2xs: .8125rem; /* 13px — badges, captions, table meta */
--fs-xs: .875rem; /* 14px — secondary copy, dense tables */
--fs-sm: .9375rem; /* 15px — UI default, controls */
--fs-md: 1rem; /* 16px — body */
--fs-lg: 1.125rem; /* 18px — section leads */
--fs-xl: 1.375rem; /* 22px — card and panel headings */
}
/* ---- The floor -----------------------------------------------------------
Every class currently rendering below 12px, raised to the 12px step. These
are enumerated rather than applied with a blanket selector, because a global
`font-size` override would also hit elements that inherit deliberately and
would fight every page-level rule in the codebase. */
.eyebrow, .nx-eyebrow,
.badge, .nx-tag, .nx-sev,
.foot-h, .nx-foot-col > b, .nx-foot-col h4,
.nd-group, .nd-tier,
.ps-step, .ps-kv dt,
.kv, .nx-kv dt,
th,
.tsc-src, .tsc-why,
.nx-tile-plan,
.nx-legal-bar, .nx-foot-bottom, .foot-bottom,
.ps-expiry, .ps-hint,
.mono.faint, .faint.mono{
font-size:var(--fs-3xs);
}
/* Slightly larger for anything carrying a reading, since digits at 12px in a
dense table are the most-squinted-at text in the product. */
.tsc-attn-item .badge,
.nx-sev,
td.mono, .ps-url{
font-size:var(--fs-2xs);
}
/* ---- Japanese floor ------------------------------------------------------
Applies wherever the document or a subtree is marked Japanese, so an English
page with a Japanese excerpt gets it too. Kanji need the extra pixel. */
:lang(ja) .eyebrow, :lang(ja) .nx-eyebrow,
:lang(ja) .badge, :lang(ja) .nx-tag, :lang(ja) .nx-sev,
:lang(ja) .foot-h, :lang(ja) .nd-group,
:lang(ja) .ps-step, :lang(ja) .kv, :lang(ja) .nx-kv dt,
:lang(ja) th, :lang(ja) .tsc-src,
:lang(ja) .nx-legal-bar, :lang(ja) .nx-foot-bottom{
font-size:var(--fs-2xs);
}
:lang(ja) body,
:lang(ja) p,
:lang(ja) li{
/* Japanese sets denser than Latin at the same size and needs more leading to
stay scannable. */
line-height:1.75;
}
:lang(ja) .muted,
:lang(ja) .nx-tile-d,
:lang(ja) .ps-lede{ font-size:var(--fs-sm); }
/* ---- Collapse the cluster ------------------------------------------------
The .76–.82rem band and the .85–.92rem band each become one step. Nothing is
reduced: every value in a band maps to the top of that band. */
.muted, .nx-lede, .list, .chip,
.nx-tile-d, .card p, .nx-card p,
.ps-note, .ps-hint, .ps-what li,
.notice, .nx-proof li{
font-size:var(--fs-xs);
}
.btn, input, select, textarea,
.nav a, .nd-label, .nd-menu a,
.ps-os > summary, .tsc-attn-item p{
font-size:var(--fs-sm);
}
/* ---- Headings on the same scale ------------------------------------------ */
.card h3, .nx-card h3, .tsc-attn-item strong{ font-size:var(--fs-md); }
h2.sec, .sec{ font-size:var(--fs-lg); }
/* ---- Line length ---------------------------------------------------------
Text that runs the full width of a 1440px container is measurably harder to
read. Applies only to prose blocks, never to tables or controls. */
.notice p, .ps-note, .tsc-attn-item p, .nx-tile-d{ max-width:68ch; }
/* ---- Respect the user's browser font size --------------------------------
The four remaining px-based font sizes in the codebase ignore browser zoom
settings. The 16px inputs are deliberate (iOS focus-zoom guard) and stay. */
.eyebrow, .badge, .foot-h, .nd-group{ font-size:var(--fs-3xs); }
@media(max-width:640px){
/* One step down on the largest headings only. Body and metadata keep their
floor — small screens are where readability matters most, which is the
opposite of how responsive type is usually done. */
h2.sec, .sec{ font-size:var(--fs-md); }
}
/* ==========================================================================
23. HOMEPAGE COMMUNITY ACTIVITY
Additive social proof based on actual platform data. No testimonial or
endorsement is implied, and missing data simply removes the affected card.
========================================================================== */
.nx-community-proof{ text-align:center; }
.nx-community-heading{ max-width:760px; margin-inline:auto; }
.nx-community-heading .nx-sub{ margin-inline:auto; }
.nx-community-stats{
display:grid;
grid-template-columns:repeat(4,minmax(0,1fr));
gap:16px;
margin:28px 0 0;
}
.nx-community-stat{
min-width:0;
padding:22px 18px;
border:1px solid var(--line);
border-radius:var(--r);
background:var(--panel-2);
box-shadow:var(--sh-1);
}
.nx-community-stat dt{
margin:0;
color:var(--ink);
font-size:clamp(1.5rem,3vw,2.25rem);
font-weight:600;
line-height:1.1;
letter-spacing:-.02em;
font-variant-numeric:tabular-nums;
font-feature-settings:"tnum" 1;
}
.nx-community-stat dd{
margin:9px 0 0;
color:var(--muted);
font-size:var(--fs-xs,.875rem);
line-height:1.45;
}
.nx-community-note{
max-width:720px;
margin:16px auto 0;
font-size:var(--fs-2xs,.8125rem);
}
@media(max-width:900px){
.nx-community-stats{ grid-template-columns:repeat(2,minmax(0,1fr)); }
}
@media(max-width:520px){
.nx-community-stats{ grid-template-columns:1fr; }
.nx-community-stat{ padding:18px 16px; }
}
@media print{
.nx-community-stat{ box-shadow:none; background:#fff; break-inside:avoid; }
}
/* ==========================================================================
24. HOMEPAGE RECENT TOOL USAGE
Compact aggregate activity. Bars use the neutral action blue because these
values describe volume, not risk or severity.
========================================================================== */
.nx-usage-proof{
padding:28px;
border:1px solid var(--line);
border-radius:var(--r-lg);
background:var(--panel-2);
}
.nx-usage-heading{ max-width:760px; }
.nx-usage-summary{
display:grid;
grid-template-columns:repeat(4,minmax(0,1fr));
gap:12px;
margin:24px 0;
}
.nx-usage-kpi{
min-width:0;
padding:16px;
border:1px solid var(--line-soft);
border-radius:var(--r);
background:var(--panel);
}
.nx-usage-kpi dt{
color:var(--ink);
font-size:1.5rem;
font-weight:600;
line-height:1.15;
font-variant-numeric:tabular-nums;
}
.nx-usage-kpi dd{
margin:6px 0 0;
color:var(--muted);
font-size:var(--fs-xs,.875rem);
line-height:1.4;
overflow-wrap:anywhere;
}
.nx-usage-list{ display:grid; gap:10px; }
.nx-usage-row{
display:grid;
grid-template-columns:minmax(180px,1fr) auto;
gap:7px 16px;
padding:10px 12px;
border:1px solid transparent;
border-radius:var(--r-sm);
color:var(--ink-2);
text-decoration:none;
}
.nx-usage-row:hover{
border-color:var(--line);
background:var(--panel-3);
text-decoration:none;
}
.nx-usage-name{ min-width:0; font-weight:550; }
.nx-usage-value{
color:var(--ink);
font-variant-numeric:tabular-nums;
white-space:nowrap;
}
.nx-usage-track{
grid-column:1/-1;
display:block;
height:6px;
overflow:hidden;
border:1px solid var(--line);
border-radius:var(--r-pill);
background:var(--bg);
}
.nx-usage-track > span{
display:block;
height:100%;
border-radius:inherit;
background:var(--accent-strong);
}
.nx-usage-note{
max-width:760px;
margin:18px 0 0;
font-size:var(--fs-2xs,.8125rem);
}
@media(max-width:800px){
.nx-usage-summary{ grid-template-columns:repeat(2,minmax(0,1fr)); }
}
@media(max-width:520px){
.nx-usage-proof{ padding:20px 16px; }
.nx-usage-summary{ grid-template-columns:1fr 1fr; }
.nx-usage-row{ grid-template-columns:minmax(0,1fr) auto; padding-inline:8px; }
}
@media print{
.nx-usage-proof,.nx-usage-kpi{ background:#fff; box-shadow:none; }
.nx-usage-track > span{ background:#555; }
}
/* ==========================================================================
25. ADVANCED TELEMETRY CONSOLE
A futuristic instrument-panel treatment without canvas, JavaScript, external
assets, or fabricated time-series data. Motion is decorative and disabled for
reduced-motion users. Blue represents volume, never severity.
========================================================================== */
.nx-usage-console{
position:relative;
isolation:isolate;
overflow:hidden;
padding:28px;
border:1px solid var(--line-strong);
border-radius:var(--r-lg);
background:
linear-gradient(180deg,rgba(90,169,255,.035),transparent 42%),
var(--panel-2);
box-shadow:var(--sh-2);
}
.nx-usage-console::before{
content:"";
position:absolute;
inset:0;
z-index:-1;
pointer-events:none;
opacity:.16;
background-image:
linear-gradient(rgba(90,169,255,.12) 1px,transparent 1px),
linear-gradient(90deg,rgba(90,169,255,.12) 1px,transparent 1px);
background-size:32px 32px;
mask-image:linear-gradient(to bottom,black,transparent 78%);
}
.nx-console-head{
display:flex;
justify-content:space-between;
align-items:flex-start;
gap:24px;
padding-bottom:20px;
border-bottom:1px solid var(--line);
}
.nx-console-head > div:first-child{ max-width:760px; }
.nx-console-status{
display:inline-flex;
align-items:center;
gap:8px;
flex:0 0 auto;
padding:7px 11px;
border:1px solid var(--line-strong);
border-radius:var(--r-pill);
background:rgba(15,20,29,.78);
color:var(--ink-2);
font-family:var(--mono);
font-size:var(--fs-3xs,.75rem);
letter-spacing:.035em;
}
.nx-console-pulse{
width:7px;
height:7px;
border-radius:50%;
background:var(--accent);
box-shadow:0 0 0 4px rgba(90,169,255,.1);
animation:nxTelemetryPulse 2.4s ease-in-out infinite;
}
@keyframes nxTelemetryPulse{
0%,100%{ opacity:.55; transform:scale(.9); }
50%{ opacity:1; transform:scale(1.1); }
}
.nx-telemetry-grid{
display:grid;
grid-template-columns:minmax(280px,.72fr) minmax(420px,1.28fr);
gap:20px;
margin-top:20px;
}
.nx-telemetry-overview,
.nx-tool-spectrum{
border:1px solid var(--line);
border-radius:var(--r);
background:rgba(11,14,20,.72);
}
.nx-telemetry-overview{
display:grid;
grid-template-columns:minmax(150px,.9fr) minmax(150px,1.1fr);
gap:18px;
align-items:center;
padding:22px;
}
.nx-radial-wrap{ text-align:center; }
.nx-radial{
--usage-pct:0;
position:relative;
display:grid;
place-items:center;
width:min(190px,100%);
aspect-ratio:1;
margin-inline:auto;
border-radius:50%;
background:
radial-gradient(circle at center,var(--panel-2) 0 55%,transparent 56%),
conic-gradient(var(--accent-strong) calc(var(--usage-pct) * 1%),rgba(90,169,255,.1) 0);
box-shadow:inset 0 0 0 1px var(--line),0 0 32px rgba(46,111,224,.09);
}
.nx-radial::before,
.nx-radial::after{
content:"";
position:absolute;
border-radius:50%;
border:1px solid var(--line);
}
.nx-radial::before{ inset:9%; }
.nx-radial::after{ inset:22%; border-style:dashed; opacity:.7; }
.nx-radial-core{ position:relative; z-index:1; display:grid; line-height:1; }
.nx-radial-core strong{
color:var(--ink);
font-size:clamp(1.7rem,4vw,2.5rem);
font-weight:600;
font-variant-numeric:tabular-nums;
}
.nx-radial-core span{
margin-top:7px;
color:var(--muted);
font-family:var(--mono);
font-size:var(--fs-3xs,.75rem);
text-transform:uppercase;
letter-spacing:.09em;
}
.nx-radial-caption{
margin:14px 0 0;
color:var(--muted);
font-size:var(--fs-2xs,.8125rem);
line-height:1.5;
}
.nx-radial-caption strong{ color:var(--ink-2); font-weight:600; }
.nx-telemetry-kpis{ display:grid; gap:10px; }
.nx-telemetry-kpis > div{
padding:12px 14px;
border-left:2px solid var(--line-strong);
background:linear-gradient(90deg,rgba(90,169,255,.055),transparent);
}
.nx-telemetry-kpis dt{
color:var(--ink);
font-size:1.35rem;
font-weight:600;
line-height:1.1;
font-variant-numeric:tabular-nums;
}
.nx-telemetry-kpis dd{
margin:5px 0 0;
color:var(--muted);
font-size:var(--fs-3xs,.75rem);
line-height:1.35;
}
.nx-tool-spectrum{ overflow:hidden; }
.nx-spectrum-head{
display:flex;
justify-content:space-between;
gap:16px;
padding:12px 16px;
border-bottom:1px solid var(--line);
background:var(--panel-3);
color:var(--muted);
font-family:var(--mono);
font-size:var(--fs-3xs,.75rem);
letter-spacing:.06em;
text-transform:uppercase;
}
.nx-spectrum-list{ list-style:none; margin:0; padding:8px; }
.nx-spectrum-list li{ margin:0; }
.nx-spectrum-row{
display:grid;
grid-template-columns:30px minmax(150px,1fr) auto;
gap:7px 12px;
align-items:center;
padding:9px 8px;
border:1px solid transparent;
border-radius:var(--r-sm);
color:var(--ink-2);
text-decoration:none;
}
.nx-spectrum-row:hover{
border-color:var(--line);
background:rgba(90,169,255,.045);
text-decoration:none;
}
.nx-spectrum-rank{
color:var(--faint);
font-family:var(--mono);
font-size:var(--fs-3xs,.75rem);
}
.nx-spectrum-name{ min-width:0; font-size:var(--fs-xs,.875rem); font-weight:550; }
.nx-spectrum-value{
color:var(--ink);
font-family:var(--mono);
font-size:var(--fs-xs,.875rem);
font-variant-numeric:tabular-nums;
white-space:nowrap;
}
.nx-spectrum-value small{ color:var(--muted); font-size:var(--fs-3xs,.75rem); }
.nx-spectrum-track{
grid-column:2/-1;
height:7px;
overflow:hidden;
border:1px solid var(--line);
border-radius:2px;
background:var(--bg);
}
.nx-spectrum-track > span{
display:block;
width:var(--bar);
height:100%;
background:linear-gradient(90deg,var(--accent-strong),var(--accent));
box-shadow:0 0 12px rgba(90,169,255,.2);
transform-origin:left;
animation:nxBarReveal .75s var(--ease) both;
}
@keyframes nxBarReveal{ from{ transform:scaleX(0); } to{ transform:scaleX(1); } }
.nx-console-foot{
display:flex;
flex-wrap:wrap;
gap:12px 22px;
align-items:center;
margin-top:18px;
padding-top:15px;
border-top:1px solid var(--line);
color:var(--faint);
font-family:var(--mono);
font-size:var(--fs-3xs,.75rem);
}
.nx-console-foot a{ margin-left:auto; }
@media(max-width:980px){
.nx-telemetry-grid{ grid-template-columns:1fr; }
}
@media(max-width:680px){
.nx-usage-console{ padding:20px 16px; }
.nx-console-head{ flex-direction:column; gap:14px; }
.nx-telemetry-overview{ grid-template-columns:1fr; }
.nx-radial{ width:170px; }
.nx-console-status{ white-space:normal; }
}
@media(max-width:440px){
.nx-spectrum-row{ grid-template-columns:25px minmax(0,1fr) auto; gap-inline:8px; }
.nx-spectrum-name{ overflow-wrap:anywhere; }
.nx-console-foot a{ width:100%; margin-left:0; }
}
@media(prefers-reduced-motion:reduce){
.nx-console-pulse,.nx-spectrum-track > span{ animation:none !important; }
}
@media print{
.nx-usage-console,.nx-telemetry-overview,.nx-tool-spectrum{ background:#fff !important; box-shadow:none; }
.nx-usage-console::before,.nx-console-pulse{ display:none; }
.nx-spectrum-track > span{ background:#555; box-shadow:none; }
}
/* ==========================================================================
§21 — INSTANT CHECK (X69)
Hero-adjacent security-headers check. Uses only tokens already defined in
this stylesheet, so it inherits light/dark and any future palette change for
free. Appended rather than merged so it can be reverted by deleting this
block alone.
Layout intent: on a cold homepage visit this must read as an invitation, not
a form to fill in. The input is wide and the button is the only accent, so
the eye lands on the action. Once a result exists the grade takes over as the
heaviest element on the page, because the grade IS the pitch.
========================================================================== */
.nx-hq{
padding:0 var(--safe-r, 20px) 0 var(--safe-l, 20px);
margin:clamp(28px, 5vw, 56px) 0 0;
}
.nx-hq-inner{
max-width:var(--maxw, 1140px);
margin-inline:auto;
padding:clamp(22px, 3vw, 34px);
border:1px solid var(--line-strong);
border-radius:var(--r-lg, 16px);
background:var(--panel-2);
box-shadow:var(--sh-2);
}
.nx-hq-h{
margin:0;
color:var(--ink);
font-size:clamp(1.25rem, 2.4vw, 1.75rem);
font-weight:650;
letter-spacing:-.02em;
line-height:1.2;
}
.nx-hq-sub{
margin:8px 0 0;
max-width:64ch;
color:var(--muted);
font-size:var(--fs-sm, .9375rem);
line-height:1.55;
}
/* ------------------------------- the form ------------------------------- */
.nx-hq-form{
display:flex;
flex-wrap:wrap;
gap:10px;
align-items:stretch;
margin:18px 0 0;
}
/* Visually hidden but kept for screen readers: the placeholder is not a label. */
.nx-hq-label{
position:absolute;
width:1px; height:1px;
margin:-1px; padding:0; border:0;
clip-path:inset(50%);
overflow:hidden; white-space:nowrap;
}
.nx-hq-input{
flex:1 1 320px;
min-width:0;
padding:13px 15px;
border:1px solid var(--line-input);
border-radius:var(--r-sm, 8px);
background:var(--panel);
color:var(--ink);
font-family:var(--mono);
font-size:var(--fs-sm, .9375rem);
transition:border-color var(--t, .18s) var(--ease, ease), box-shadow var(--t, .18s) var(--ease, ease);
}
.nx-hq-input::placeholder{ color:var(--faint); }
.nx-hq-input:focus-visible{
outline:none;
border-color:var(--accent-strong);
box-shadow:var(--ring, 0 0 0 3px) var(--ring-color, rgba(0,0,0,.15));
}
.nx-hq-btn{ flex:0 0 auto; }
.nx-hq-note{
margin:14px 0 0;
max-width:72ch;
color:var(--muted);
font-size:var(--fs-2xs, .8125rem);
line-height:1.5;
}
.nx-hq-error{
margin:14px 0 0;
padding:11px 14px;
border:1px solid var(--warn);
border-radius:var(--r-sm, 8px);
background:var(--warn-bg);
color:var(--ink);
font-size:var(--fs-xs, .875rem);
}
/* ------------------------------- the result ------------------------------ */
.nx-hq-result{
display:grid;
grid-template-columns:auto minmax(0, 1fr);
gap:clamp(16px, 3vw, 26px);
align-items:start;
margin:20px 0 0;
padding:20px;
border:1px solid var(--line);
border-radius:var(--r, 12px);
background:var(--panel);
}
.nx-hq-gradewrap{
display:flex;
flex-direction:column;
align-items:center;
justify-content:center;
gap:2px;
min-width:96px;
padding:16px 14px;
border:1px solid var(--line);
border-radius:var(--r, 12px);
background:var(--panel-3, var(--panel-2));
}
.nx-hq-grade{
color:var(--ink);
font-size:clamp(2.25rem, 6vw, 3.25rem);
font-weight:700;
line-height:1;
letter-spacing:-.03em;
}
.nx-hq-score{
color:var(--muted);
font-family:var(--mono);
font-size:var(--fs-2xs, .8125rem);
font-variant-numeric:tabular-nums;
}
/* Grade drives the colour. Keyed off the letter so an A+ and an A agree. */
.nx-hq-gradewrap[data-grade="a"]{ border-color:var(--ok); background:var(--ok-bg); }
.nx-hq-gradewrap[data-grade="a"] .nx-hq-grade{ color:var(--ok); }
.nx-hq-gradewrap[data-grade="b"]{ border-color:var(--info); background:var(--info-bg); }
.nx-hq-gradewrap[data-grade="b"] .nx-hq-grade{ color:var(--info); }
.nx-hq-gradewrap[data-grade="c"]{ border-color:var(--warn); background:var(--warn-bg); }
.nx-hq-gradewrap[data-grade="c"] .nx-hq-grade{ color:var(--warn); }
.nx-hq-gradewrap[data-grade="d"]{ border-color:var(--high); background:var(--high-bg); }
.nx-hq-gradewrap[data-grade="d"] .nx-hq-grade{ color:var(--high); }
.nx-hq-gradewrap[data-grade="e"],
.nx-hq-gradewrap[data-grade="f"]{ border-color:var(--crit); background:var(--crit-bg); }
.nx-hq-gradewrap[data-grade="e"] .nx-hq-grade,
.nx-hq-gradewrap[data-grade="f"] .nx-hq-grade{ color:var(--crit); }
.nx-hq-body{ min-width:0; }
.nx-hq-domain{
margin:0;
color:var(--ink);
font-family:var(--mono);
font-size:var(--fs-sm, .9375rem);
overflow-wrap:anywhere;
}
.nx-hq-summary,
.nx-hq-clean{
margin:8px 0 0;
color:var(--ink-2);
font-size:var(--fs-xs, .875rem);
line-height:1.55;
}
.nx-hq-issues{
list-style:none;
margin:14px 0 0;
padding:0;
display:grid;
gap:8px;
}
.nx-hq-issues li{
display:grid;
grid-template-columns:auto minmax(0, 1fr);
gap:4px 10px;
align-items:baseline;
padding:10px 12px;
border:1px solid var(--line-soft, var(--line));
border-radius:var(--r-sm, 8px);
background:var(--panel-2);
}
.nx-hq-sev{
grid-row:span 2;
align-self:start;
padding:2px 8px;
border-radius:var(--r-pill, 999px);
font-family:var(--mono);
font-size:var(--fs-3xs, .75rem);
font-weight:600;
letter-spacing:.04em;
white-space:nowrap;
}
.nx-hq-sev-warn{ background:var(--warn-bg); color:var(--warn); }
.nx-hq-sev-bad,
.nx-hq-sev-crit{ background:var(--crit-bg); color:var(--crit); }
.nx-hq-issue-name{
color:var(--ink);
font-size:var(--fs-xs, .875rem);
font-weight:600;
overflow-wrap:anywhere;
}
.nx-hq-issue-detail{
grid-column:2;
color:var(--muted);
font-size:var(--fs-2xs, .8125rem);
line-height:1.5;
}
.nx-hq-more{
margin:10px 0 0;
color:var(--muted);
font-size:var(--fs-2xs, .8125rem);
}
.nx-hq-actions{
display:flex;
flex-wrap:wrap;
gap:10px;
margin:18px 0 0;
}
/* ------------------------------- the badge ------------------------------- */
.nx-hq-badge{
margin:16px 0 0;
padding:12px 14px;
border:1px solid var(--line);
border-radius:var(--r-sm, 8px);
background:var(--panel-2);
}
.nx-hq-badge > summary{
cursor:pointer;
color:var(--ink);
font-size:var(--fs-xs, .875rem);
font-weight:600;
}
.nx-hq-badge > summary:focus-visible{
outline:none;
box-shadow:var(--ring, 0 0 0 3px) var(--ring-color, rgba(0,0,0,.15));
border-radius:var(--r-sm, 8px);
}
.nx-hq-badge-note{
margin:10px 0 0;
color:var(--muted);
font-size:var(--fs-2xs, .8125rem);
}
.nx-hq-badge-prev{ margin:10px 0 0; }
.nx-hq-embed{
width:100%;
margin:6px 0 0;
padding:10px 12px;
border:1px solid var(--line-input);
border-radius:var(--r-sm, 8px);
background:var(--panel);
color:var(--ink-2);
font-family:var(--mono);
font-size:var(--fs-3xs, .75rem);
line-height:1.5;
resize:vertical;
}
/* ------------------------------- responsive ------------------------------ */
@media (max-width: 640px){
.nx-hq-result{ grid-template-columns:1fr; }
.nx-hq-gradewrap{
flex-direction:row;
gap:10px;
min-width:0;
justify-content:flex-start;
padding:12px 16px;
}
.nx-hq-grade{ font-size:2.25rem; }
.nx-hq-btn{ width:100%; }
}
@media print{
.nx-hq-form,
.nx-hq-actions,
.nx-hq-badge{ display:none; }
.nx-hq-inner{ background:#fff !important; box-shadow:none; }
}
/* ==========================================================================
§22 — COMMUNITY STATS: variable card count (X69b)
.nx-community-stats was grid-template-columns:repeat(4,minmax(0,1fr)) — a
fixed 4-column track. The panel renders between 1 and 4 cards depending on
which figures resolve, and "countries" can never resolve on this host (no
geo header source), so the live page renders 3 cards into a 4-column grid:
they occupy the left 75% and sit visibly off-centre beneath a centred
heading, with dead space on the right.
Flex with wrap + centred justification lays out any count correctly. The
flex-basis keeps cards at a comparable width to the old 4-up track, and
max-width stops a single surviving card from stretching across the section.
========================================================================== */
.nx-community-stats{
display:flex;
flex-wrap:wrap;
justify-content:center;
gap:16px;
margin:28px 0 0;
/* Reset the grid tracks in case this file loads before the §-block above. */
grid-template-columns:none;
}
.nx-community-stat{
flex:1 1 220px;
max-width:320px;
}
@media (max-width: 520px){
.nx-community-stat{ flex:1 1 100%; max-width:none; }
}
/* ==========================================================================
§23 — TRUST BAND (X70)
Replaces §22's community-stats layout, which had nothing left to lay out
once the counters were removed. Six cards, the first spanning two columns as
the lead action ("run our scanner on us") because that is the single claim
most likely to convert a sceptic — it is the only one that costs them nothing
and disproves nothing if we fail it.
========================================================================== */
.nx-trust2-grid{
display:grid;
grid-template-columns:repeat(auto-fit, minmax(260px, 1fr));
gap:16px;
margin:26px 0 0;
}
.nx-trust2-card{
display:flex;
flex-direction:column;
align-items:flex-start;
gap:8px;
min-width:0;
padding:20px;
border:1px solid var(--line);
border-radius:var(--r);
background:var(--panel-2);
transition:border-color var(--t,.18s) var(--ease,ease), transform var(--t,.18s) var(--ease,ease);
}
.nx-trust2-card:hover{ border-color:var(--line-strong); }
/* Lead card carries the action, so it gets the accent edge and the width. */
.nx-trust2-card--lead{
grid-column:span 2;
border-color:var(--accent-strong);
background:var(--panel-3, var(--panel-2));
}
.nx-trust2-h{
margin:0;
color:var(--ink);
font-size:var(--fs-md, 1.0625rem);
font-weight:650;
letter-spacing:-.01em;
line-height:1.3;
}
.nx-trust2-d{
margin:0;
color:var(--ink-2);
font-size:var(--fs-xs, .875rem);
line-height:1.6;
}
.nx-trust2-card .btn{ margin-top:6px; }
.nx-trust2-link{
color:var(--accent-strong);
font-size:var(--fs-xs, .875rem);
font-weight:600;
text-decoration:none;
}
.nx-trust2-link:hover{ text-decoration:underline; }
.nx-trust2-link + .nx-trust2-link{ margin-top:2px; }
.nx-trust2-note{
margin:22px 0 0;
max-width:78ch;
font-size:var(--fs-2xs, .8125rem);
line-height:1.55;
}
@media (max-width: 760px){
/* One column: a "span 2" lead would overflow the single track. */
.nx-trust2-card--lead{ grid-column:auto; }
}
@media print{
.nx-trust2-card{ background:#fff !important; box-shadow:none; break-inside:avoid; }
}
/* ==========================================================================
§24 — TRUST SCORECARD · DATA TABLE · AI OVERSIGHT (X71)
========================================================================== */
/* ----------------------------- scorecard -------------------------------- */
.nx-score-card{
display:grid;
grid-template-columns:auto minmax(0,1fr);
gap:clamp(18px,3vw,28px);
align-items:start;
margin:22px 0 0;
padding:clamp(20px,3vw,28px);
border:1px solid var(--line-strong);
border-radius:var(--r-lg,16px);
background:var(--panel-2);
}
.nx-score-figure{
display:flex;
flex-direction:column;
align-items:center;
gap:4px;
min-width:150px;
padding:20px 18px;
border:1px solid var(--line);
border-radius:var(--r,12px);
background:var(--panel);
}
.nx-score-num{
color:var(--ink);
font-size:clamp(2.5rem,6vw,3.5rem);
font-weight:700;
line-height:1;
letter-spacing:-.03em;
font-variant-numeric:tabular-nums;
}
.nx-score-den{ color:var(--muted); font-size:1rem; font-weight:500; letter-spacing:0; }
.nx-score-grade{
color:var(--muted);
font-family:var(--mono);
font-size:var(--fs-2xs,.8125rem);
letter-spacing:.06em;
text-transform:uppercase;
}
.nx-score-figure[data-grade="a"]{ border-color:var(--ok); background:var(--ok-bg); }
.nx-score-figure[data-grade="a"] .nx-score-num{ color:var(--ok); }
.nx-score-figure[data-grade="b"]{ border-color:var(--info); background:var(--info-bg); }
.nx-score-figure[data-grade="b"] .nx-score-num{ color:var(--info); }
.nx-score-figure[data-grade="c"]{ border-color:var(--warn); background:var(--warn-bg); }
.nx-score-figure[data-grade="c"] .nx-score-num{ color:var(--warn); }
.nx-score-figure[data-grade="d"],
.nx-score-figure[data-grade="e"],
.nx-score-figure[data-grade="f"]{ border-color:var(--crit); background:var(--crit-bg); }
.nx-score-figure[data-grade="d"] .nx-score-num,
.nx-score-figure[data-grade="e"] .nx-score-num,
.nx-score-figure[data-grade="f"] .nx-score-num{ color:var(--crit); }
.nx-score-body{ min-width:0; }
.nx-score-lede{ margin:0; color:var(--ink-2); font-size:var(--fs-sm,.9375rem); line-height:1.6; }
.nx-score-split{
list-style:none;
display:flex;
flex-wrap:wrap;
gap:8px;
margin:14px 0 0;
padding:0;
}
.nx-score-split li{
padding:6px 12px;
border:1px solid var(--line);
border-radius:var(--r-pill,999px);
background:var(--panel);
color:var(--ink-2);
font-size:var(--fs-2xs,.8125rem);
}
.nx-score-split strong{ font-variant-numeric:tabular-nums; }
.nx-score-pass strong{ color:var(--ok); }
.nx-score-warn strong{ color:var(--warn); }
.nx-score-fail strong{ color:var(--crit); }
.nx-score-honest{ margin:12px 0 0; color:var(--ink-2); font-size:var(--fs-xs,.875rem); line-height:1.55; }
.nx-score-date{ margin:12px 0 0; color:var(--ink-2); font-size:var(--fs-xs,.875rem); line-height:1.55; }
.nx-score-limit{
margin:12px 0 0;
padding:11px 14px;
border-left:3px solid var(--line-strong);
color:var(--muted);
font-size:var(--fs-2xs,.8125rem);
line-height:1.55;
}
.nx-score-actions{ margin:14px 0 0; }
/* ---------------------------- data table -------------------------------- */
.nx-dht-wrap{ margin:22px 0 0; overflow-x:auto; -webkit-overflow-scrolling:touch; }
.nx-dht-table{
width:100%;
min-width:560px; /* below this, horizontal scroll beats squashing */
border-collapse:collapse;
font-size:var(--fs-xs,.875rem);
}
.nx-dht-cap{
caption-side:top;
padding:0 0 10px;
color:var(--muted);
font-size:var(--fs-2xs,.8125rem);
text-align:left;
}
.nx-dht-table th,
.nx-dht-table td{
padding:12px 14px;
border:1px solid var(--line);
text-align:left;
vertical-align:top;
line-height:1.55;
}
.nx-dht-table thead th{
background:var(--panel-2);
color:var(--ink);
font-size:var(--fs-2xs,.8125rem);
font-weight:650;
letter-spacing:.04em;
text-transform:uppercase;
}
.nx-dht-table tbody th{ background:var(--panel-2); color:var(--ink); font-weight:650; white-space:nowrap; }
.nx-dht-table tbody td{ background:var(--panel); color:var(--ink-2); }
.nx-dht-where{ font-family:var(--mono); font-size:var(--fs-2xs,.8125rem); white-space:nowrap; }
.nx-dht-foot{ margin:16px 0 0; max-width:78ch; color:var(--ink-2); font-size:var(--fs-xs,.875rem); line-height:1.6; }
.nx-dht-links{ display:flex; flex-wrap:wrap; gap:16px; margin:12px 0 0; }
/* --------------------------- AI oversight ------------------------------- */
.nx-aio-list{
list-style:none;
display:grid;
grid-template-columns:repeat(auto-fit,minmax(280px,1fr));
gap:14px;
margin:22px 0 0;
padding:0;
}
.nx-aio-list li{
padding:16px 18px;
border:1px solid var(--line);
border-left:3px solid var(--accent-strong);
border-radius:var(--r-sm,8px);
background:var(--panel-2);
color:var(--ink-2);
font-size:var(--fs-xs,.875rem);
line-height:1.6;
}
.nx-aio-list strong{ display:block; margin-bottom:4px; color:var(--ink); font-weight:650; }
@media (max-width:640px){
.nx-score-card{ grid-template-columns:1fr; }
.nx-score-figure{ flex-direction:row; justify-content:flex-start; gap:12px; min-width:0; }
.nx-score-num{ font-size:2.5rem; }
}
@media print{
.nx-score-card,.nx-dht-table td,.nx-dht-table th,.nx-aio-list li{ background:#fff !important; }
.nx-dht-wrap{ overflow:visible; }
.nx-dht-table{ min-width:0; }
}