/* ============================================================ NetVault shared theme - SOURCE OF RECORD Owner: NVT-NXS-01 (THEME-1). LEO and Fax REQUEST changes; do not edit a copy. Published: nexus-shared-assets.git RECONCILED 2026-08-05 across all three copies. normalised md5 fcc03c5c66457f255ce40c9687ce772d 23764 B 266 braces The whole divergence was ONE rule: .pager-label, present only on NVT-FAX01 and used live three times there. It was ADDED here, not removed there. There was NO drift inside shared rules - that finding was an artefact of subtracting the wrong rule, and is withdrawn. .cover-wrap is shared by all three copies and never was the difference. ⚠️ Had this been reconciled by DELETION - which the block count and the first localisation both pointed at - three labels would have rendered unstyled while the count reported convergence. ADDED 2026-08-06: .pill.info (requested by LEO-01 for the scheduled/pending state). Their proposed light ink was adopted unchanged; the DARK override was added here — see the note at the rule. NVT-FAX01 and LEO must pull this. ADDED 2026-08-06: .rail-links — the foot-of-rail container for outbound product links (Nexus -> LEO / Fax), sibling of .nav and .rail-user. It is STANDALONE, so bare use is correct. Available to LEO and Fax for their Return-to-Nexus item, which sits in the same position. 40 of the 137 classes here are CONTEXT-ONLY - styled only inside a parent or beside a co-class. Using one bare renders unstyled with NO console error. .ok / .bad / .warn / .active / .info look general and are not. Full list: theme-context-classes.json in the same repo. The dangerous case is a class already working correctly twenty lines away - the reader's evidence is real but does not bear on the question. .pager-label is STANDALONE, so bare use of it is correct. ============================================================ */ /* ============================================================ NetVault shared design system — theme.css COPIED VERBATIM from the Fax2Email portal (/opt/faxportal/theme.css on NVT-FAX01) on 2026-08-01. Keep the two in sync: if you change a token or component here, mirror it there, and vice versa. Do not fork the design system per-app. ------------------------------------------------------------ Originally: NetVault Fax2Email Portal — theme.css Design system derived from NetVault Brand Guide v1.0 Vault Charcoal #1D252D · Sky Blue #009CDE · Kanit + Public Sans Single source of truth for colour + type across the SPA. ============================================================ */ /* ---- self-hosted fonts (TTF; swap to WOFF2 later if desired) ---- */ @font-face{font-family:'Kanit'; font-style:normal; font-weight:500; font-display:swap; src:url('/assets/fonts/Kanit-Medium.ttf') format('truetype')} @font-face{font-family:'Kanit'; font-style:normal; font-weight:600; font-display:swap; src:url('/assets/fonts/Kanit-SemiBold.ttf') format('truetype')} @font-face{font-family:'Kanit'; font-style:normal; font-weight:700; font-display:swap; src:url('/assets/fonts/Kanit-Bold.ttf') format('truetype')} @font-face{font-family:'Public Sans'; font-style:normal; font-weight:400; font-display:swap; src:url('/assets/fonts/PublicSans-Regular.ttf') format('truetype')} @font-face{font-family:'Public Sans'; font-style:normal; font-weight:500; font-display:swap; src:url('/assets/fonts/PublicSans-Medium.ttf') format('truetype')} @font-face{font-family:'Public Sans'; font-style:normal; font-weight:600; font-display:swap; src:url('/assets/fonts/PublicSans-SemiBold.ttf') format('truetype')} @font-face{font-family:'Public Sans'; font-style:normal; font-weight:700; font-display:swap; src:url('/assets/fonts/PublicSans-Bold.ttf') format('truetype')} @font-face{font-family:'Public Sans'; font-style:italic; font-weight:400; font-display:swap; src:url('/assets/fonts/PublicSans-Italic.ttf') format('truetype')} /* ---- LIGHT (default) ---- */ :root{ --nv-blue:#009CDE; --nv-blue-600:#0089c4; --nv-blue-700:#0076ab; --nv-blue-tint:#e7f5fc; --charcoal:#1D252D; --canvas:#eef3f6; --paper:#ffffff; --input-bg:#ffffff; --input-alt:#fafcfd; --line:#dce4e9; --line-strong:#c6d1d8; --ink:#1D252D; --muted:#5e6e79; --muted-2:#8a97a0; --ok:#1E9E6A; --ok-tint:#DDF3EA; --warn:#E0A100; --warn-tint:#FBF0D2; --bad:#D0342C; --bad-tint:#FBE3E1; --rail-top:#28323b; --rail-bot:#1D252D; --topbar-bg:rgba(255,255,255,.85); --shadow:0 1px 2px rgba(29,37,45,.06), 0 8px 26px -12px rgba(29,37,45,.22); --shadow-lg:0 1px 2px rgba(29,37,45,.06), 0 24px 60px -20px rgba(29,37,45,.35); --r:6px; --r-sm:4px; --rail-w:248px; --font-display:'Kanit',system-ui,-apple-system,sans-serif; --font-body:'Public Sans',system-ui,-apple-system,sans-serif; } /* ---- DARK ---- */ [data-theme="dark"]{ --nv-blue-tint:rgba(0,156,222,.16); --canvas:#12171c; --paper:#1b232a; --input-bg:#232d35; --input-alt:#202932; --line:#2a343d; --line-strong:#3a4650; --ink:#e9eef2; --muted:#9aa8b2; --muted-2:#6f7d87; --ok-tint:rgba(30,158,106,.18); --warn-tint:rgba(224,161,0,.20); --bad-tint:rgba(208,52,44,.20); --rail-top:#141b21; --rail-bot:#0d1216; --topbar-bg:rgba(18,23,28,.85); --shadow:0 1px 2px rgba(29,37,45,.4), 0 8px 26px -14px rgba(29,37,45,.7); --shadow-lg:0 24px 60px -20px rgba(29,37,45,.75); } *{box-sizing:border-box} html,body{margin:0; height:100%} body{font-family:var(--font-body); color:var(--ink); background:var(--canvas); font-size:14px; line-height:1.5; -webkit-font-smoothing:antialiased; font-variant-numeric:tabular-nums; transition:background .2s, color .2s} h1,h2,h3,h4{font-family:var(--font-display); font-weight:600; margin:0; letter-spacing:-.01em} button{font-family:var(--font-body); cursor:pointer} a{color:var(--nv-blue)} :focus-visible{outline:2px solid var(--nv-blue); outline-offset:2px; border-radius:4px} .mono{font-variant-numeric:tabular-nums; letter-spacing:.01em} .hide{display:none !important} /* logo: two provided colourways. .logo-white forces white file; .logo-auto swaps by theme */ img.logo{display:block; width:100%; height:auto} /* ---------- controls ---------- */ .label{display:block; font-size:11.5px; font-weight:600; letter-spacing:.04em; text-transform:uppercase; color:var(--muted); margin:0 0 7px} .field{width:100%; height:44px; padding:0 14px; border:1px solid var(--line-strong); border-radius:var(--r-sm); background:var(--input-bg); font-size:14.5px; color:var(--ink); font-family:var(--font-body); transition:border-color .15s, box-shadow .15s} .field::placeholder{color:var(--muted-2)} .field:focus{outline:none; border-color:var(--nv-blue); box-shadow:0 0 0 3px var(--nv-blue-tint)} textarea.field{height:auto; padding:12px 14px; resize:vertical; min-height:110px; line-height:1.55} select.field{appearance:none; background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath fill='%235e6e79' d='M6 8 0 0h12z'/%3E%3C/svg%3E"); background-repeat:no-repeat; background-position:right 14px center; padding-right:34px} .btn{height:44px; padding:0 20px; border:1px solid transparent; border-radius:var(--r-sm); font-size:14px; font-weight:600; display:inline-flex; align-items:center; gap:9px; justify-content:center; transition:background .15s, box-shadow .15s, transform .05s} .btn:active{transform:translateY(1px)} .btn svg{width:17px; height:17px} .btn-primary{background:var(--nv-blue); color:#fff; box-shadow:0 6px 16px -8px rgba(0,156,222,.8)} .btn-primary:hover{background:var(--nv-blue-600)} .btn-danger{background:var(--bad); color:#fff; box-shadow:0 6px 16px -8px rgba(208,52,44,.8)} .btn-danger:hover{background:#b8302b} .health-pill{display:inline-flex; align-items:center; gap:8px; background:none; border:none; cursor:pointer; padding:6px 10px; border-radius:20px; font-size:13px; font-weight:600; color:var(--muted); font-family:inherit} button.health-pill{cursor:pointer} .health-pill:not(button){cursor:default} .health-dot{width:8px; height:8px; border-radius:50%; background:var(--muted); flex-shrink:0} .health-dot.ok{background:var(--ok)} .health-dot.bad{background:var(--bad)} .health-label{white-space:nowrap} .health-pill-wrap{position:relative} .health-detail{position:absolute; top:100%; right:0; margin-top:8px; background:var(--paper); border:1px solid var(--line); border-radius:var(--r); box-shadow:var(--shadow); padding:12px 16px; z-index:50; min-width:240px} .health-row{display:flex; align-items:center; gap:8px; padding:5px 0; font-size:13px} .health-sub{color:var(--muted); font-size:11px; margin-left:auto; white-space:nowrap} .btn-ghost{background:var(--input-bg); color:var(--ink); border-color:var(--line-strong)} .btn-ghost:hover{border-color:var(--muted-2)} .btn:disabled{opacity:.55; cursor:not-allowed} .btn-sm{height:34px; padding:0 13px; font-size:13px; border-radius:7px} .pill{display:inline-flex; align-items:center; gap:6px; height:24px; padding:0 10px 0 8px; border-radius:999px; font-size:12px; font-weight:600} .pill .dot{width:7px; height:7px; border-radius:50%} .pill.ok{background:var(--ok-tint); color:#1c7742} .pill.ok .dot{background:var(--ok)} .pill.warn{background:var(--warn-tint); color:#975E09} .pill.warn .dot{background:var(--warn)} .pill.bad{background:var(--bad-tint); color:#ab3733} .pill.bad .dot{background:var(--bad)} .pill.info{background:var(--nv-blue-tint); color:#0a6a92} .pill.info .dot{background:var(--nv-blue)} [data-theme="dark"] .pill.ok{color:#6fd79a} [data-theme="dark"] .pill.warn{color:#f0b45a} [data-theme="dark"] .pill.bad{color:#f08a85} /* ⚠️ REQUIRED, not decorative. --nv-blue-tint is TRANSLUCENT in dark mode (rgba(0,156,222,.16)), so it composites to #173647 over --paper. The light ink #0a6a92 on that is 2.11:1 — below even the 3:1 large-text floor, while the other three tiers sit at 5.46-7.03. #80c7ea gives 6.81:1. Derived by applying the mean toward-white fraction of the ok/warn/bad dark inks to --nv-blue, not chosen by eye. A new tier added WITHOUT its dark override looks correct in light mode and is unreadable in dark. */ [data-theme="dark"] .pill.info{color:#80c7ea} .err{background:var(--bad-tint); color:#ab3733; border:1px solid rgba(208,52,44,.3); border-radius:var(--r-sm); padding:11px 13px; font-size:13px; font-weight:500; margin:0 0 16px} [data-theme="dark"] .err{color:#f08a85} .notice-ok{background:var(--ok-tint); color:#1c7742; border:1px solid rgba(30,158,106,.3); border-radius:var(--r-sm); padding:11px 13px; font-size:13px; font-weight:500; margin:0 0 16px} [data-theme="dark"] .notice-ok{color:#6fd79a} .notice-warn{background:var(--warn-tint); color:#975E09; border:1px solid rgba(224,161,0,.3); border-radius:var(--r-sm); padding:11px 13px; font-size:13px; font-weight:500; margin:0 0 16px} [data-theme="dark"] .notice-warn{color:#f0b45a} .spinner{width:18px; height:18px; border:2.5px solid rgba(255,255,255,.35); border-top-color:#fff; border-radius:50%; animation:spin .7s linear infinite; display:inline-block} @keyframes spin{to{transform:rotate(360deg)}} .center-load{min-height:100vh; display:grid; place-items:center; color:var(--muted)} /* ---------- AUTH ---------- */ .auth{position:fixed; inset:0; display:grid; place-items:center; padding:24px; overflow:hidden; background:radial-gradient(1100px 700px at 82% -12%, color-mix(in srgb, var(--nv-blue) 8%, var(--canvas)) 0%, rgba(0,0,0,0) 60%), var(--canvas)} .auth::before{content:""; position:absolute; width:780px; height:780px; right:-260px; bottom:-320px; border-radius:50%; border:1.5px solid rgba(0,156,222,.16); box-shadow:inset 0 0 0 34px rgba(0,156,222,.05); pointer-events:none} .auth::after{content:""; position:absolute; width:440px; height:440px; left:-180px; top:-200px; border-radius:50%; border:1.5px dashed rgba(120,140,155,.14); pointer-events:none} .auth-card{position:relative; width:100%; max-width:404px; background:var(--paper); border:1px solid var(--line); border-radius:16px; box-shadow:var(--shadow-lg); padding:36px 34px 30px} .auth-logo{margin:0 auto 26px; display:flex; justify-content:center} .auth-logo img.logo{width:88%} .auth-eyebrow{font-size:11.5px; font-weight:600; letter-spacing:.14em; text-transform:uppercase; color:var(--nv-blue); margin:0 0 6px} .auth-title{font-size:23px; color:var(--ink); margin:0 0 4px} .auth-sub{color:var(--muted); font-size:13.5px; margin:0 0 24px} .auth-card .field + .label{margin-top:16px} .auth-actions{margin-top:22px} .auth-actions .btn{width:100%} .auth-foot{margin-top:20px; padding-top:16px; border-top:1px solid var(--line); display:flex; justify-content:space-between; align-items:center; font-size:12.5px; color:var(--muted-2)} .auth-foot a{color:var(--muted); text-decoration:none} .auth-foot a:hover{color:var(--nv-blue)} .tagline{color:var(--muted-2); font-size:11px; letter-spacing:.16em; text-transform:uppercase} .totp-row{display:flex; gap:9px} .totp-row input{flex:1; width:100%; height:54px; text-align:center; font-size:22px; font-weight:600; font-family:var(--font-display); border:1px solid var(--line-strong); border-radius:var(--r-sm); background:var(--input-bg); color:var(--ink)} .totp-row input:focus{outline:none; border-color:var(--nv-blue); box-shadow:0 0 0 3px var(--nv-blue-tint)} .back-link{background:none; border:none; color:var(--muted); font-size:13px; font-weight:600; padding:0; margin-top:16px; display:inline-flex; align-items:center; gap:6px} .back-link:hover{color:var(--nv-blue)} .enroll-secret{font-family:var(--font-body); font-size:15px; font-weight:600; letter-spacing:.08em; background:var(--input-alt); border:1px solid var(--line); border-radius:var(--r-sm); padding:11px 13px; word-break:break-all; margin:4px 0 8px} .enroll-secret-small{font-family:var(--font-body); font-size:11px; font-weight:600; letter-spacing:.06em; color:var(--muted); text-align:center; word-break:break-all; margin:10px 0 4px} .qr-code{display:flex; justify-content:center; margin:10px 0} .qr-code svg{width:180px; height:180px; background:#fff; border-radius:var(--r-sm); padding:10px; border:1px solid var(--line)} .codes{display:grid; grid-template-columns:1fr 1fr; gap:8px; margin:8px 0 4px} .codes span{font-family:var(--font-body); font-size:13.5px; font-weight:600; background:var(--input-alt); border:1px solid var(--line); border-radius:6px; padding:8px 10px; text-align:center} /* ---------- SHELL ---------- */ .app{display:grid; grid-template-columns:var(--rail-w) 1fr; min-height:100vh} .rail{background:linear-gradient(180deg, var(--rail-top) 0%, var(--rail-bot) 62%); color:#cfd8de; display:flex; flex-direction:column; position:sticky; top:0; height:100vh} .rail-logo{padding:22px 0 18px; display:flex; justify-content:center} .rail-logo img.logo{width:86%} .nav{padding:6px 12px; flex:1; overflow:auto} .nav-item{display:flex; align-items:center; gap:12px; padding:10px 12px; border-radius:9px; color:#c2ccd3; font-size:14px; font-weight:500; text-decoration:none; margin:2px 0; border:1px solid transparent; cursor:pointer; transition:background .13s, color .13s; width:100%; background:none; text-align:left} .nav-item svg{width:18px; height:18px; flex:none; opacity:.85} .nav-item:hover{background:rgba(255,255,255,.06); color:#fff} .nav-item.active{background:rgba(0,156,222,.16); color:#fff; border-color:rgba(0,156,222,.4)} .nav-item.active svg{opacity:1; color:var(--nv-blue)} .nav-section{padding:16px 12px 6px; font-size:11px; font-weight:700; letter-spacing:.06em; text-transform:uppercase; color:#5f6b74} .nav-section:first-child{padding-top:6px} /* Outbound product links, pinned at the foot of the rail above the account block. Its children are .nav-item, which is styled by CLASS and not scoped to .nav — so only .nav's horizontal padding needed restoring here. These must sit OUTSIDE