/* ================================================================
ZERONEX × BOOTSTRAP 5 — DESIGN SYSTEM EXTENSION v1.0
"Zero Today. Next Tomorrow."
Drop-in stylesheet that re-skins native Bootstrap 5.3 components
and utilities with the ZERONEX visual language. It does NOT
replace Bootstrap — load bootstrap.min.css (or bootstrap.rtl.min.css)
BEFORE this file, then this file on top of it:
Theme is driven by Bootstrap's own color-mode attribute:
(ZERONEX brand default)
================================================================ */
/* ============================================================
1. PRIMITIVES — theme-agnostic ramps
============================================================ */
:root{
--zx-teal-50:#EAFBF8; --zx-teal-100:#C9F3ED; --zx-teal-200:#9FEDE4;
--zx-teal-300:#6FDCD1; --zx-teal-400:#45BDB4; --zx-teal-500:#2BA39A;
--zx-teal-600:#1F8A8A; --zx-teal-700:#166C6E; --zx-teal-800:#0F4D52;
--zx-teal-900:#0B2E3B;
--zx-abyss-50:#F4F7F6; --zx-abyss-100:#E4EAE9; --zx-abyss-200:#C6D2D0;
--zx-abyss-300:#93A6A4; --zx-abyss-400:#5F7472; --zx-abyss-500:#3C4F4E;
--zx-abyss-600:#273837; --zx-abyss-700:#1A2928; --zx-abyss-800:#111D1D;
--zx-abyss-900:#0B1414; --zx-abyss-950:#060D0D;
--zx-aurum-200:#F0E2C2; --zx-aurum-300:#DFC894; --zx-aurum-400:#C9A66B;
--zx-aurum-500:#AE8B52; --zx-aurum-600:#8A6C3D;
--zx-success-400:#4FBF86; --zx-success-500:#2FA36B; --zx-success-600:#1F7F51;
--zx-warning-400:#E6B860; --zx-warning-500:#D9A441; --zx-warning-600:#AD7F2B;
--zx-danger-400:#E8736E; --zx-danger-500:#D45B56; --zx-danger-600:#A93E3A;
--zx-font-display:'Jost','Vazirmatn',sans-serif;
--zx-font-body:'Inter','Vazirmatn',sans-serif;
--zx-font-fa:'Vazirmatn',sans-serif;
--zx-font-mono:'JetBrains Mono',ui-monospace,monospace;
--zx-fs-display:clamp(2.6rem,5.2vw,4.25rem);
--zx-fs-h1:clamp(2rem,3.6vw,3rem);
--zx-fs-h2:clamp(1.6rem,2.6vw,2.125rem);
--zx-fs-h3:1.5rem;
--zx-fs-h4:1.25rem;
--zx-fs-lg:1.0625rem;
--zx-fs-base:0.9375rem;
--zx-fs-sm:0.8125rem;
--zx-fs-xs:0.6875rem;
--zx-lh-tight:1.12; --zx-lh-snug:1.32; --zx-lh-base:1.72;
--zx-ls-brand:0.34em; --zx-ls-eyebrow:0.22em;
--zx-ls-display:0.01em; --zx-ls-tight:-0.015em;
--zx-s-1:4px; --zx-s-2:8px; --zx-s-3:12px; --zx-s-4:16px;
--zx-s-5:24px; --zx-s-6:32px; --zx-s-7:48px; --zx-s-8:64px;
--zx-s-9:96px; --zx-s-10:128px;
--zx-r-xs:4px; --zx-r-sm:8px; --zx-r-md:12px; --zx-r-lg:18px;
--zx-r-xl:26px; --zx-r-pill:999px;
--zx-ease:cubic-bezier(.22,.61,.36,1);
--zx-ease-out:cubic-bezier(.16,1,.3,1);
--zx-ease-in-out:cubic-bezier(.65,0,.35,1);
--zx-d-fast:140ms; --zx-d-base:240ms; --zx-d-slow:420ms; --zx-d-ambient:900ms;
}
/* ============================================================
2. SEMANTIC TOKENS — DARK (brand default) + BOOTSTRAP REMAP
============================================================ */
:root,
[data-bs-theme="dark"]{
color-scheme:dark;
/* -- ZERONEX semantic layer -- */
--bg-canvas:#060D0D; --bg-sunken:#040909; --bg-surface:#0C1616; --bg-raised:#111F1F;
--bg-overlay:rgba(4,10,10,.72); --bg-inset:rgba(255,255,255,.028);
--bg-hover:rgba(111,220,209,.07); --bg-active:rgba(111,220,209,.12);
--fg-primary:#EAF2F1; --fg-secondary:#A9BEBC; --fg-muted:#728685;
--fg-disabled:#4A5A59; --fg-inverse:#060D0D;
--fg-brand:var(--zx-teal-300); --fg-on-brand:#03110F;
--border-subtle:rgba(255,255,255,.07);
--border-default:rgba(159,237,228,.16);
--border-strong:rgba(159,237,228,.30);
--border-brand:var(--zx-teal-500);
--accent:var(--zx-teal-400); --accent-hover:var(--zx-teal-300); --accent-press:var(--zx-teal-500);
--accent-soft:rgba(69,189,180,.14);
--aurum:var(--zx-aurum-400); --aurum-soft:rgba(201,166,107,.14);
--success:var(--zx-success-400); --success-soft:rgba(79,191,134,.13);
--warning:var(--zx-warning-400); --warning-soft:rgba(230,184,96,.13);
--danger:var(--zx-danger-400); --danger-soft:rgba(232,115,110,.13);
--grad-brand:linear-gradient(135deg,#0B2E3B 0%,#1F8A8A 46%,#6FDCD1 78%,#C9F3ED 100%);
--grad-surface:linear-gradient(160deg,rgba(159,237,228,.06) 0%,rgba(159,237,228,0) 58%);
--grad-aurum:linear-gradient(120deg,#8A6C3D 0%,#DFC894 50%,#8A6C3D 100%);
--grad-hairline:linear-gradient(90deg,transparent,rgba(159,237,228,.38),transparent);
--shadow-xs:0 1px 2px rgba(0,0,0,.5);
--shadow-sm:0 2px 8px rgba(0,0,0,.45);
--shadow-md:0 10px 28px -8px rgba(0,0,0,.65);
--shadow-lg:0 28px 60px -20px rgba(0,0,0,.8);
--shadow-glow:0 0 0 1px rgba(111,220,209,.22),0 12px 40px -14px rgba(43,163,154,.55);
--ring:0 0 0 3px rgba(69,189,180,.32);
/* -- Bootstrap global remap -- */
--bs-body-bg:var(--bg-canvas); --bs-body-bg-rgb:6,13,13;
--bs-body-color:var(--fg-primary); --bs-body-color-rgb:234,242,241;
--bs-emphasis-color:var(--fg-primary);
--bs-secondary-color:var(--fg-secondary); --bs-secondary-bg:var(--bg-surface);
--bs-tertiary-color:var(--fg-muted); --bs-tertiary-bg:var(--bg-inset);
--bs-heading-color:var(--fg-primary);
--bs-border-color:var(--border-default); --bs-border-color-translucent:var(--border-subtle);
--bs-link-color:var(--fg-brand); --bs-link-color-rgb:111,220,209;
--bs-link-hover-color:var(--accent-hover); --bs-link-hover-color-rgb:111,220,209;
--bs-code-color:var(--zx-aurum-300);
--bs-primary:var(--accent); --bs-primary-rgb:69,189,180;
--bs-secondary:var(--zx-abyss-400); --bs-secondary-rgb:95,116,114;
--bs-success:var(--success); --bs-success-rgb:79,191,134;
--bs-warning:var(--warning); --bs-warning-rgb:230,184,96;
--bs-danger:var(--danger); --bs-danger-rgb:232,115,110;
--bs-info:var(--zx-teal-300); --bs-info-rgb:111,220,209;
--bs-light:var(--bg-raised); --bs-light-rgb:17,31,31;
--bs-dark:var(--bg-sunken); --bs-dark-rgb:4,9,9;
--bs-focus-ring-color:rgba(69,189,180,.32);
--bs-border-radius:var(--zx-r-md); --bs-border-radius-sm:var(--zx-r-sm);
--bs-border-radius-lg:var(--zx-r-lg); --bs-border-radius-xl:var(--zx-r-xl);
--bs-border-radius-xxl:var(--zx-r-xl); --bs-border-radius-pill:var(--zx-r-pill);
--bs-box-shadow:var(--shadow-md); --bs-box-shadow-sm:var(--shadow-sm); --bs-box-shadow-lg:var(--shadow-lg);
}
/* ============================================================
3. SEMANTIC TOKENS — LIGHT + BOOTSTRAP REMAP
============================================================ */
[data-bs-theme="light"]{
color-scheme:light;
--bg-canvas:#F5F8F7; --bg-sunken:#EBF0EF; --bg-surface:#FFFFFF; --bg-raised:#FFFFFF;
--bg-overlay:rgba(11,20,20,.42); --bg-inset:rgba(11,20,20,.035);
--bg-hover:rgba(31,138,138,.06); --bg-active:rgba(31,138,138,.11);
--fg-primary:#0B1414; --fg-secondary:#3C4F4E; --fg-muted:#6B7E7D;
--fg-disabled:#A7B5B4; --fg-inverse:#FFFFFF;
--fg-brand:var(--zx-teal-700); --fg-on-brand:#FFFFFF;
--border-subtle:rgba(11,20,20,.07);
--border-default:rgba(11,20,20,.13);
--border-strong:rgba(22,108,110,.34);
--border-brand:var(--zx-teal-600);
--accent:var(--zx-teal-600); --accent-hover:var(--zx-teal-500); --accent-press:var(--zx-teal-700);
--accent-soft:rgba(31,138,138,.10);
--aurum:var(--zx-aurum-600); --aurum-soft:rgba(174,139,82,.12);
--success:var(--zx-success-600); --success-soft:rgba(47,163,107,.11);
--warning:var(--zx-warning-600); --warning-soft:rgba(217,164,65,.14);
--danger:var(--zx-danger-600); --danger-soft:rgba(212,91,86,.11);
--grad-brand:linear-gradient(135deg,#0B2E3B 0%,#166C6E 42%,#2BA39A 76%,#6FDCD1 100%);
--grad-surface:linear-gradient(160deg,rgba(11,46,59,.035) 0%,rgba(11,46,59,0) 58%);
--grad-aurum:linear-gradient(120deg,#8A6C3D 0%,#C9A66B 50%,#8A6C3D 100%);
--grad-hairline:linear-gradient(90deg,transparent,rgba(22,108,110,.30),transparent);
--shadow-xs:0 1px 2px rgba(11,20,20,.06);
--shadow-sm:0 2px 10px rgba(11,20,20,.07);
--shadow-md:0 12px 28px -10px rgba(11,20,20,.14);
--shadow-lg:0 30px 64px -24px rgba(11,20,20,.22);
--shadow-glow:0 0 0 1px rgba(31,138,138,.22),0 14px 38px -16px rgba(31,138,138,.34);
--ring:0 0 0 3px rgba(31,138,138,.24);
--bs-body-bg:var(--bg-canvas); --bs-body-bg-rgb:245,248,247;
--bs-body-color:var(--fg-primary); --bs-body-color-rgb:11,20,20;
--bs-emphasis-color:var(--fg-primary);
--bs-secondary-color:var(--fg-secondary); --bs-secondary-bg:var(--bg-sunken);
--bs-tertiary-color:var(--fg-muted); --bs-tertiary-bg:var(--bg-inset);
--bs-heading-color:var(--fg-primary);
--bs-border-color:var(--border-default); --bs-border-color-translucent:var(--border-subtle);
--bs-link-color:var(--fg-brand); --bs-link-color-rgb:22,108,110;
--bs-link-hover-color:var(--accent-hover); --bs-link-hover-color-rgb:43,163,154;
--bs-code-color:var(--zx-aurum-600);
--bs-primary:var(--accent); --bs-primary-rgb:31,138,138;
--bs-secondary:var(--zx-abyss-400); --bs-secondary-rgb:95,116,114;
--bs-success:var(--success); --bs-success-rgb:31,127,81;
--bs-warning:var(--warning); --bs-warning-rgb:173,127,43;
--bs-danger:var(--danger); --bs-danger-rgb:169,62,58;
--bs-info:var(--zx-teal-600); --bs-info-rgb:31,138,138;
--bs-light:var(--bg-sunken); --bs-light-rgb:235,240,239;
--bs-dark:var(--zx-abyss-900); --bs-dark-rgb:11,20,20;
--bs-focus-ring-color:rgba(31,138,138,.24);
--bs-border-radius:var(--zx-r-md); --bs-border-radius-sm:var(--zx-r-sm);
--bs-border-radius-lg:var(--zx-r-lg); --bs-border-radius-xl:var(--zx-r-xl);
--bs-border-radius-xxl:var(--zx-r-xl); --bs-border-radius-pill:var(--zx-r-pill);
--bs-box-shadow:var(--shadow-md); --bs-box-shadow-sm:var(--shadow-sm); --bs-box-shadow-lg:var(--shadow-lg);
}
/* ============================================================
4. BASE
============================================================ */
html{scroll-behavior:smooth}
body{
font-family:var(--zx-font-fa);
font-size:var(--zx-fs-base);
line-height:var(--zx-lh-base);
transition:background var(--zx-d-slow) var(--zx-ease),color var(--zx-d-slow) var(--zx-ease);
}
:lang(en),[dir="ltr"]{font-family:var(--zx-font-body)}
h1,h2,h3,h4,h5,h6{font-family:var(--zx-font-display);font-weight:400;line-height:var(--zx-lh-snug)}
a{transition:color var(--zx-d-base) var(--zx-ease)}
code,kbd,pre,.font-monospace{font-family:var(--zx-font-mono)!important;direction:ltr;unicode-bidi:embed}
::selection{background:var(--accent-soft);color:var(--fg-primary)}
:focus-visible{outline:none;box-shadow:var(--ring);border-radius:var(--zx-r-sm)}
/* ============================================================
5. BUTTONS (.btn, .btn-*)
============================================================ */
.btn{
--bs-btn-font-family:var(--zx-font-display);
--bs-btn-font-size:var(--zx-fs-sm);
--bs-btn-font-weight:500;
--bs-btn-border-radius:var(--zx-r-pill);
--bs-btn-padding-x:var(--zx-s-5);
--bs-btn-padding-y:.7rem;
letter-spacing:.08em;text-transform:uppercase;
position:relative;overflow:hidden;white-space:nowrap;
transition:transform var(--zx-d-fast) var(--zx-ease),box-shadow var(--zx-d-base) var(--zx-ease),
background var(--zx-d-base) var(--zx-ease),color var(--zx-d-base) var(--zx-ease),
border-color var(--zx-d-base) var(--zx-ease),opacity var(--zx-d-base) var(--zx-ease);
}
.btn:active{transform:translateY(1px) scale(.995)}
.btn-lg{--bs-btn-font-size:var(--zx-fs-base);--bs-btn-padding-y:.85rem;--bs-btn-padding-x:var(--zx-s-6);letter-spacing:.1em}
.btn-sm{--bs-btn-font-size:var(--zx-fs-xs);--bs-btn-padding-y:.5rem;--bs-btn-padding-x:var(--zx-s-4)}
/* Primary — brand gradient with sheen sweep on hover */
.btn-primary{
--bs-btn-color:var(--fg-on-brand); --bs-btn-hover-color:var(--fg-on-brand); --bs-btn-active-color:var(--fg-on-brand);
--bs-btn-bg:transparent; --bs-btn-hover-bg:transparent; --bs-btn-active-bg:transparent;
--bs-btn-border-color:transparent; --bs-btn-hover-border-color:transparent; --bs-btn-active-border-color:transparent;
--bs-btn-disabled-bg:transparent; --bs-btn-disabled-border-color:transparent;
background:var(--grad-brand);background-size:180% 180%;background-position:12% 50%;
font-weight:600;
box-shadow:0 8px 24px -10px rgba(43,163,154,.7),inset 0 1px 0 rgba(255,255,255,.22);
}
[data-bs-theme="light"] .btn-primary{color:#fff}
.btn-primary::after{
content:'';position:absolute;inset:0;
background:linear-gradient(105deg,transparent 38%,rgba(255,255,255,.34) 50%,transparent 62%);
transform:translateX(-120%);transition:transform var(--zx-d-ambient) var(--zx-ease-out);
}
.btn-primary:hover,.btn-primary:focus{background-position:88% 50%;box-shadow:0 14px 34px -10px rgba(43,163,154,.8),inset 0 1px 0 rgba(255,255,255,.3)}
.btn-primary:hover::after{transform:translateX(120%)}
.btn-primary:disabled,.btn-primary.disabled{opacity:.42;box-shadow:none}
/* Secondary / Outline — hairline, fills on hover */
.btn-secondary,.btn-outline-secondary{
--bs-btn-color:var(--fg-primary); --bs-btn-bg:transparent; --bs-btn-border-color:var(--border-strong);
--bs-btn-hover-color:var(--fg-brand); --bs-btn-hover-bg:var(--accent-soft); --bs-btn-hover-border-color:var(--accent);
--bs-btn-active-color:var(--fg-brand); --bs-btn-active-bg:var(--accent-soft); --bs-btn-active-border-color:var(--accent);
--bs-btn-disabled-color:var(--fg-disabled); --bs-btn-disabled-bg:transparent; --bs-btn-disabled-border-color:var(--border-subtle);
}
/* Ghost / quiet — no equivalent in stock Bootstrap */
.btn-ghost{
--bs-btn-color:var(--fg-secondary); --bs-btn-bg:transparent; --bs-btn-border-color:transparent;
--bs-btn-hover-color:var(--fg-primary); --bs-btn-hover-bg:var(--bg-hover); --bs-btn-hover-border-color:transparent;
--bs-btn-active-color:var(--fg-primary); --bs-btn-active-bg:var(--bg-hover); --bs-btn-active-border-color:transparent;
}
/* Aurum — reserved for one decisive action per screen (custom theme color) */
.btn-aurum{
--bs-btn-color:#1A1408; --bs-btn-hover-color:#1A1408; --bs-btn-active-color:#1A1408;
--bs-btn-bg:transparent; --bs-btn-hover-bg:transparent; --bs-btn-active-bg:transparent;
--bs-btn-border-color:transparent; --bs-btn-hover-border-color:transparent;
background:var(--grad-aurum);background-size:200% 100%;
box-shadow:0 8px 22px -10px rgba(201,166,107,.6),inset 0 1px 0 rgba(255,255,255,.3);
}
[data-bs-theme="light"] .btn-aurum{color:#fff}
.btn-aurum:hover,.btn-aurum:focus{background-position:100% 0;color:inherit}
/* Success / Warning / Danger — soft-fill semantic buttons */
.btn-success{--bs-btn-color:var(--fg-on-brand);--bs-btn-bg:var(--success);--bs-btn-border-color:var(--success);--bs-btn-hover-bg:var(--success);--bs-btn-hover-border-color:var(--success)}
.btn-warning{--bs-btn-color:#1A1408;--bs-btn-bg:var(--warning);--bs-btn-border-color:var(--warning);--bs-btn-hover-color:#1A1408}
.btn-danger,.btn-outline-danger{
--bs-btn-color:var(--danger); --bs-btn-bg:var(--danger-soft); --bs-btn-border-color:color-mix(in srgb,var(--danger) 46%,transparent);
--bs-btn-hover-color:var(--fg-inverse); --bs-btn-hover-bg:var(--danger); --bs-btn-hover-border-color:var(--danger);
}
/* Link */
.btn-link{
--bs-btn-color:var(--fg-brand); --bs-btn-hover-color:var(--accent-hover);
text-transform:none;letter-spacing:.02em;text-decoration:none;
position:relative;
}
.btn-link::before{content:'';position:absolute;bottom:2px;inset-inline:1rem;height:1px;background:currentColor;
transform:scaleX(0);transform-origin:inline-start;transition:transform var(--zx-d-base) var(--zx-ease-out)}
.btn-link:hover::before{transform:scaleX(1)}
/* Round icon button */
.btn-icon{
width:42px;height:42px;padding:0;border-radius:50%;display:inline-flex;align-items:center;justify-content:center;
border:1px solid var(--border-subtle);background:var(--bg-inset);color:var(--fg-secondary);
transition:all var(--zx-d-base) var(--zx-ease);
}
.btn-icon:hover{color:var(--fg-brand);border-color:var(--border-strong);background:var(--bg-hover);transform:rotate(-8deg)}
/* Segmented control — btn-group + btn-check, skinned as a pill track */
.btn-group.zx-segment{padding:4px;gap:2px;background:var(--bg-inset);border:1px solid var(--border-subtle);border-radius:var(--zx-r-pill)}
.zx-segment .btn{
--bs-btn-border-radius:var(--zx-r-pill)!important;
border:0!important;background:transparent;color:var(--fg-muted);
font-size:var(--zx-fs-xs);padding:9px 18px;box-shadow:none!important;
}
.zx-segment .btn-check:checked+.btn,.zx-segment .btn.active{background:var(--bg-raised)!important;color:var(--fg-primary)!important;box-shadow:var(--shadow-xs)!important}
/* Chips — btn-check driven toggle pills */
.zx-chip{
display:inline-flex;align-items:center;gap:8px;padding:8px 14px;border-radius:var(--zx-r-pill);
border:1px solid var(--border-subtle);background:var(--bg-inset);color:var(--fg-secondary);
font-size:var(--zx-fs-sm);cursor:pointer;transition:all var(--zx-d-base) var(--zx-ease);
}
.zx-chip:hover{border-color:var(--border-strong);color:var(--fg-primary)}
.btn-check:checked+.zx-chip,.zx-chip.active{background:var(--accent-soft);border-color:var(--accent);color:var(--fg-brand)}
/* ============================================================
6. FORMS (.form-control, .form-select, .form-check, .form-range …)
============================================================ */
.form-label{font-size:var(--zx-fs-sm);color:var(--fg-secondary);font-weight:500}
.form-label .req,.form-label.required::after{color:var(--accent)}
.form-text{font-size:var(--zx-fs-xs);color:var(--fg-muted)}
.invalid-feedback{font-size:var(--zx-fs-xs);display:flex;align-items:center;gap:6px}
.form-control,.form-select{
height:50px;padding:0 var(--zx-s-4);
font-size:var(--zx-fs-base);color:var(--fg-primary);
background-color:var(--bg-inset);border:1px solid var(--border-subtle);
border-radius:var(--zx-r-md);
transition:border-color var(--zx-d-base) var(--zx-ease),box-shadow var(--zx-d-base) var(--zx-ease),background var(--zx-d-base) var(--zx-ease);
}
textarea.form-control{height:auto;min-height:120px;padding:var(--zx-s-3) var(--zx-s-4);line-height:1.7}
.form-control::placeholder{color:var(--fg-disabled)}
.form-control:hover,.form-select:hover{border-color:var(--border-default)}
.form-control:focus,.form-select:focus{
color:var(--fg-primary);background-color:var(--bg-surface);border-color:var(--accent);box-shadow:var(--ring);
}
.form-control:disabled,.form-control[readonly]{color:var(--fg-disabled);background-color:transparent}
.form-control.is-invalid,.was-validated .form-control:invalid{border-color:var(--danger);box-shadow:0 0 0 3px var(--danger-soft);background-image:none}
.form-control.is-invalid:focus{box-shadow:0 0 0 3px var(--danger-soft)}
.input-group-text{background:var(--bg-inset);border:1px solid var(--border-subtle);color:var(--fg-muted)}
.input-group:focus-within .input-group-text{color:var(--accent)}
.form-select{
background-image:linear-gradient(45deg,transparent 50%,var(--fg-muted) 50%),linear-gradient(135deg,var(--fg-muted) 50%,transparent 50%);
background-position:calc(100% - 20px) center,calc(100% - 15px) center;background-size:5px 5px,5px 5px;background-repeat:no-repeat;
}
[dir="rtl"] .form-select{background-position:left 20px center,left 15px center;padding-inline-start:2.25rem;padding-inline-end:1rem}
/* Native Bootstrap checkbox / radio / switch — light touch only.
Bootstrap draws these as a single using background-image +
background-position, which cannot reproduce design.html's sliding-thumb
switch or drawn checkmark. Left minimal/safe here on purpose — do not
re-add size/radius overrides, they fight Bootstrap's own per-type and
per-.form-switch rules on tied specificity. For exact ZERONEX parity
(as used on design_bootstrap.html) use .zx-check / .zx-radio / .zx-switch
below instead of .form-check. */
.form-check-input{background-color:var(--bg-inset);border-color:var(--border-default)}
.form-check-input:hover{border-color:var(--accent)}
.form-check-input:checked{background-color:var(--accent);border-color:var(--accent)}
.form-check-input:focus{border-color:var(--accent);box-shadow:var(--ring)}
.form-check-label{color:var(--fg-secondary)}
/* ============================================================
6b. EXACT-PARITY CONTROLS — ported verbatim from design.html
Use these (instead of .form-check) wherever the animated switch,
drawn checkmark or dot-fill radio from the original system is required.
============================================================ */
.zx-check{display:inline-flex;align-items:center;gap:var(--zx-s-3);cursor:pointer;font-size:var(--zx-fs-base);color:var(--fg-secondary)}
.zx-check input{position:absolute;opacity:0;width:0;height:0}
.zx-check .box{
width:20px;height:20px;flex:none;border-radius:var(--zx-r-xs);
border:1px solid var(--border-default);background:var(--bg-inset);
display:grid;place-items:center;transition:all var(--zx-d-base) var(--zx-ease-out)
}
.zx-check .box svg{width:12px;height:12px;stroke:var(--fg-on-brand);stroke-width:3;fill:none;
stroke-dasharray:20;stroke-dashoffset:20;transition:stroke-dashoffset var(--zx-d-base) var(--zx-ease-out)}
.zx-check input:checked+.box{background:var(--grad-brand);border-color:transparent}
.zx-check input:checked+.box svg{stroke-dashoffset:0}
.zx-check input:focus-visible+.box{box-shadow:var(--ring)}
.zx-check:hover .box{border-color:var(--accent)}
.zx-radio{display:inline-flex;align-items:center;gap:var(--zx-s-3);cursor:pointer;color:var(--fg-secondary)}
.zx-radio input{position:absolute;opacity:0;width:0;height:0}
.zx-radio .dot{width:20px;height:20px;flex:none;border-radius:50%;border:1px solid var(--border-default);
background:var(--bg-inset);display:grid;place-items:center;transition:all var(--zx-d-base) var(--zx-ease)}
.zx-radio .dot::after{content:'';width:9px;height:9px;border-radius:50%;background:var(--grad-brand);
transform:scale(0);transition:transform var(--zx-d-base) var(--zx-ease-out)}
.zx-radio input:checked+.dot{border-color:var(--accent)}
.zx-radio input:checked+.dot::after{transform:scale(1)}
.zx-radio input:focus-visible+.dot{box-shadow:var(--ring)}
.zx-switch{display:inline-flex;align-items:center;gap:var(--zx-s-3);cursor:pointer;color:var(--fg-secondary)}
.zx-switch input{position:absolute;opacity:0;width:0;height:0}
.zx-switch .track{
width:50px;height:28px;flex:none;border-radius:var(--zx-r-pill);
background:var(--bg-inset);border:1px solid var(--border-default);
position:relative;transition:all var(--zx-d-base) var(--zx-ease)
}
.zx-switch .track::after{
content:'';position:absolute;top:3px;inset-inline-start:3px;width:20px;height:20px;border-radius:50%;
background:var(--fg-muted);transition:all var(--zx-d-base) var(--zx-ease-out)
}
.zx-switch input:checked+.track{background:var(--grad-brand);border-color:transparent}
.zx-switch input:checked+.track::after{inset-inline-start:25px;background:#fff}
.zx-switch input:focus-visible+.track{box-shadow:var(--ring)}
/* Range */
.form-range::-webkit-slider-thumb{background-color:var(--bg-surface);border:2px solid var(--accent);box-shadow:var(--shadow-sm)}
.form-range::-moz-range-thumb{background-color:var(--bg-surface);border:2px solid var(--accent);box-shadow:var(--shadow-sm)}
.form-range::-webkit-slider-runnable-track{background-color:var(--bg-inset)}
.form-range::-moz-range-track{background-color:var(--bg-inset)}
.form-range:focus::-webkit-slider-thumb{box-shadow:var(--ring)}
/* ============================================================
7. BADGES
============================================================ */
.badge{
font-family:var(--zx-font-display);font-weight:500;letter-spacing:.06em;text-transform:uppercase;
padding:.4em .8em;
}
/* Soft brand-style badges — the ZERONEX default look */
.badge.text-bg-brand,.badge-soft-brand{background:var(--accent-soft)!important;color:var(--fg-brand)!important;border:1px solid color-mix(in srgb,var(--accent) 28%,transparent)}
.badge.text-bg-aurum,.badge-soft-aurum{background:var(--aurum-soft)!important;color:var(--aurum)!important;border:1px solid color-mix(in srgb,var(--aurum) 32%,transparent)}
.badge-soft-success,.badge.text-bg-success{background:var(--success-soft)!important;color:var(--success)!important;border-color:transparent}
.badge-soft-warning,.badge.text-bg-warning{background:var(--warning-soft)!important;color:var(--warning)!important;border-color:transparent}
.badge-soft-danger,.badge.text-bg-danger{background:var(--danger-soft)!important;color:var(--danger)!important;border-color:transparent}
.badge-soft-neutral,.badge.text-bg-secondary{background:var(--bg-inset)!important;color:var(--fg-muted)!important;border:1px solid var(--border-subtle)}
.zx-dot{width:6px;height:6px;border-radius:50%;background:currentColor;box-shadow:0 0 8px currentColor;display:inline-block}
/* ============================================================
8. ALERTS
============================================================ */
.alert{border-radius:var(--zx-r-md);border:1px solid transparent;position:relative;overflow:hidden;padding:var(--zx-s-4)}
.alert::before{content:'';position:absolute;inset-block:0;inset-inline-start:0;width:3px;background:currentColor}
.alert .alert-heading{font-weight:600;font-size:var(--zx-fs-base);color:var(--fg-primary);margin-bottom:2px}
.alert-primary,.alert-info{color:var(--accent);background-color:var(--accent-soft);border-color:transparent}
.alert-success{color:var(--success);background-color:var(--success-soft);border-color:transparent}
.alert-warning{color:var(--warning);background-color:var(--warning-soft);border-color:transparent}
.alert-danger{color:var(--danger);background-color:var(--danger-soft);border-color:transparent}
.alert-link{font-weight:600}
/* ============================================================
9. CARDS
============================================================ */
.card{
background-color:var(--bg-surface);background-image:var(--grad-surface);
border:1px solid var(--border-subtle);border-radius:var(--zx-r-lg);
box-shadow:var(--shadow-sm);
transition:transform var(--zx-d-base) var(--zx-ease-out),box-shadow var(--zx-d-base) var(--zx-ease-out),border-color var(--zx-d-base) var(--zx-ease);
}
.card-body{padding:var(--zx-s-5)}
.card-header,.card-footer{background-color:var(--bg-inset);border-color:var(--border-subtle)}
.card.card-hover{cursor:pointer}
.card.card-hover:hover{transform:translateY(-3px);box-shadow:var(--shadow-md);border-color:var(--border-default)}
.card.card-feature{border-color:var(--border-default);box-shadow:var(--shadow-glow)}
.card.card-feature::before{content:'';position:absolute;inset-inline:var(--zx-s-5);top:0;height:1px;background:var(--grad-hairline);z-index:1}
.card-title{font-family:var(--zx-font-display);font-weight:400}
.card-text{color:var(--fg-secondary)}
/* ============================================================
10. NAV / TABS / PILLS
============================================================ */
.nav-tabs{border-bottom:1px solid var(--border-subtle);gap:var(--zx-s-5)}
.nav-tabs .nav-link{
border:0;background:0;padding:14px 2px;color:var(--fg-muted);position:relative;
font-family:var(--zx-font-display);font-size:var(--zx-fs-sm);letter-spacing:.06em;
}
.nav-tabs .nav-link::after{content:'';position:absolute;bottom:-1px;inset-inline:0;height:1px;background:var(--accent);
transform:scaleX(0);transition:transform var(--zx-d-base) var(--zx-ease-out)}
.nav-tabs .nav-link:hover{color:var(--fg-secondary);border-color:transparent}
.nav-tabs .nav-link.active{color:var(--fg-primary);background:transparent;border-color:transparent}
.nav-tabs .nav-link.active::after{transform:scaleX(1)}
.nav-pills .nav-link{color:var(--fg-secondary);border-radius:var(--zx-r-pill);font-size:var(--zx-fs-sm)}
.nav-pills .nav-link.active{background:var(--grad-brand);color:var(--fg-on-brand)}
/* ============================================================
11. TABLE
============================================================ */
.table{--bs-table-color:var(--fg-secondary);--bs-table-bg:transparent;font-size:var(--zx-fs-sm)}
.table>thead{--bs-table-color:var(--fg-muted)}
.table thead th{
font-family:var(--zx-font-display);font-size:var(--zx-fs-xs);letter-spacing:.12em;text-transform:uppercase;font-weight:500;
border-bottom-color:var(--border-default);
}
.table td,.table th{border-color:var(--border-subtle);vertical-align:middle}
.table td:first-child{color:var(--fg-primary);font-weight:500}
.table-hover>tbody>tr:hover>*{--bs-table-accent-bg:var(--bg-hover);color:var(--fg-primary)}
/* ============================================================
12. NAVBAR / DROPDOWN
============================================================ */
.navbar{backdrop-filter:blur(18px) saturate(140%);background-color:color-mix(in srgb,var(--bg-canvas) 78%,transparent)!important;border-bottom:1px solid var(--border-subtle)}
.navbar-brand{font-family:var(--zx-font-display);letter-spacing:var(--zx-ls-brand);color:var(--fg-primary)}
.navbar .nav-link{color:var(--fg-secondary)}
.navbar .nav-link:hover,.navbar .nav-link.active{color:var(--fg-primary)}
.dropdown-menu{
background-color:var(--bg-raised);border:1px solid var(--border-default);border-radius:var(--zx-r-md);
box-shadow:var(--shadow-md);padding:.5rem;
}
.dropdown-item{color:var(--fg-secondary);border-radius:var(--zx-r-sm);font-size:var(--zx-fs-sm)}
.dropdown-item:hover,.dropdown-item:focus{background-color:var(--bg-hover);color:var(--fg-primary)}
.dropdown-item.active,.dropdown-item:active{background-color:var(--accent-soft);color:var(--fg-brand)}
.dropdown-divider{border-color:var(--border-subtle)}
/* ============================================================
13. MODAL / OFFCANVAS / TOAST
============================================================ */
.modal-content{background-color:var(--bg-raised);border:1px solid var(--border-default);border-radius:var(--zx-r-lg);box-shadow:var(--shadow-lg)}
.modal-header,.modal-footer{border-color:var(--border-subtle)}
.modal-backdrop.show{opacity:1;background-color:var(--bg-overlay)}
.offcanvas{background-color:var(--bg-raised);border-color:var(--border-subtle)}
.toast{background-color:var(--bg-raised);border:1px solid var(--border-default);box-shadow:var(--shadow-md)}
.toast-header{background-color:var(--bg-inset);color:var(--fg-secondary);border-color:var(--border-subtle)}
.btn-close{filter:var(--bs-btn-close-white-filter,none)}
[data-bs-theme="dark"] .btn-close{filter:invert(1) grayscale(100%) brightness(200%)}
/* ============================================================
14. PROGRESS / LIST GROUP / PAGINATION / ACCORDION / TOOLTIP
============================================================ */
.progress{height:4px;background-color:var(--bg-inset);border-radius:2px}
.progress-bar{background:var(--grad-brand);border-radius:2px}
.list-group-item{background-color:var(--bg-surface);border-color:var(--border-subtle);color:var(--fg-secondary)}
.list-group-item.active{background-color:var(--accent-soft);border-color:var(--accent);color:var(--fg-brand)}
.list-group-item-action:hover{background-color:var(--bg-hover);color:var(--fg-primary)}
.page-link{background-color:var(--bg-inset);border-color:var(--border-subtle);color:var(--fg-secondary)}
.page-link:hover{background-color:var(--bg-hover);color:var(--fg-primary);border-color:var(--border-default)}
.page-item.active .page-link{background:var(--grad-brand);border-color:transparent;color:var(--fg-on-brand)}
.accordion-item{background-color:var(--bg-surface);border-color:var(--border-subtle)}
.accordion-button{background-color:var(--bg-surface);color:var(--fg-primary);font-family:var(--zx-font-display);font-weight:400}
.accordion-button:not(.collapsed){background-color:var(--accent-soft);color:var(--fg-brand);box-shadow:none}
.accordion-button:focus{box-shadow:var(--ring)}
.accordion-button::after{filter:none}
.tooltip .tooltip-inner{background-color:var(--bg-raised);color:var(--fg-primary);border:1px solid var(--border-default);
font-size:var(--zx-fs-xs);box-shadow:var(--shadow-md);padding:7px 12px}
.tooltip.bs-tooltip-top .tooltip-arrow::before{border-top-color:var(--bg-raised)}
.tooltip.bs-tooltip-bottom .tooltip-arrow::before{border-bottom-color:var(--bg-raised)}
.tooltip.bs-tooltip-start .tooltip-arrow::before{border-left-color:var(--bg-raised)}
.tooltip.bs-tooltip-end .tooltip-arrow::before{border-right-color:var(--bg-raised)}
/* Skeleton loader (Bootstrap's built-in .placeholder) */
.placeholder{background-color:var(--bg-inset);border-radius:var(--zx-r-xs)}
.placeholder-glow .placeholder{animation:zx-shimmer 1.6s infinite linear;
background:linear-gradient(90deg,var(--bg-inset) 0%,var(--bg-hover) 50%,var(--bg-inset) 100%);background-size:200% 100%}
@keyframes zx-shimmer{to{background-position:-200% 0}}
/* ============================================================
15. BRAND UTILITIES
============================================================ */
.zx-eyebrow{
font-family:var(--zx-font-display);font-size:var(--zx-fs-xs);font-weight:500;
letter-spacing:var(--zx-ls-eyebrow);text-transform:uppercase;color:var(--accent);
display:flex;align-items:center;gap:var(--zx-s-3);direction:ltr;
}
.zx-eyebrow::after{content:'';height:1px;flex:1;background:var(--grad-hairline)}
.zx-wordmark{font-family:var(--zx-font-display);letter-spacing:var(--zx-ls-brand);color:var(--fg-primary);direction:ltr}
.zx-lbl{font-size:var(--zx-fs-xs);letter-spacing:.1em;text-transform:uppercase;color:var(--fg-muted);font-family:var(--zx-font-display);direction:ltr}
.zx-grad-text{background:var(--grad-brand);-webkit-background-clip:text;background-clip:text;color:transparent}
.zx-panel{background:var(--bg-inset);border:1px solid var(--border-subtle);border-radius:var(--zx-r-md);padding:var(--zx-s-4)}
.zx-shadow-glow{box-shadow:var(--shadow-glow)!important}
.bg-canvas{background-color:var(--bg-canvas)!important}
.bg-surface{background-color:var(--bg-surface)!important}
.bg-raised{background-color:var(--bg-raised)!important}
.bg-inset{background-color:var(--bg-inset)!important}
.text-brand{color:var(--fg-brand)!important}
.text-aurum{color:var(--aurum)!important}
@media(prefers-reduced-motion:reduce){*{animation:none!important;transition-duration:.01ms!important}}