/* ==========================================================================
EVPS-1000X — Component & Layout Stylesheet
Reads from evps-1000x-tokens.css. No hardcoded values.
--------------------------------------------------------------------------
Class naming: BEM-ish — `.evps-{block}__{element}--{modifier}`
Loaded after tokens. ~Lagom-class scope, clean-room original.
SECTION INDEX (use Ctrl/Cmd+G with a "go to line" tool, or Ctrl+F the
section heading to jump directly):
Line ~9 BASE RESETS * box-model, html/body, scrollbar
Line ~37 APP SHELL .evps-app grid, .evps-sidebar, .evps-main,
.evps-topbar, .evps-page
Line ~301 COMPONENTS
~306 Buttons .evps-btn variants
~349 Card .evps-card
~372 Badge .evps-badge
~394 Stat tile .evps-stat
~436 Service card .evps-service-card
~493 Meter .evps-meter
~511 Avatar .evps-avatar
~525 Tabs .evps-tabs
~561 Table .evps-table
~589 Form ctrl .evps-input / .evps-select / .evps-textarea
~619 Switch .evps-switch
~641 Radio card .evps-radio-card (base)
~672 Alert .evps-alert
~695 Skeleton .evps-skel / @keyframes evps-skel-shimmer
~706 Empty state .evps-empty
~725 Spark .evps-spark
~730 Code block .evps-code
~753 Layout util .evps-grid, .evps-row, .evps-stack, helpers
~779 Surface sw. .evps-surface-switcher / .evps-surface-tab
Line ~829 AI ASSISTANT .evps-ai-bubble, .evps-ai-drawer, messages
Line ~1015 COMMAND PALETTE .evps-cmdk__overlay / .evps-cmdk
Line ~1067 TOAST .evps-toast-stack / .evps-toast
Line ~1099 TRUST STRIP .evps-trust-strip
Line ~1114 PROGRESS STEPS .evps-steps / .evps-step
Line ~1134 PRICING TIER .evps-tier
Line ~1174 KBD .evps-kbd
Line ~1187 ORDER FORM .evps-orderform layout + breadcrumb
Line ~1258 PRODUCT GRID .evps-product-grid / .evps-tier addons
Line ~1282 RADIO CARD (full) .evps-radio-card complete ruleset
Line ~1345 OPTION CARD .evps-option-card
Line ~1415 PAYMENT METHOD .evps-payment-method
Line ~1445 TRUST STRIP ext. .evps-trust-strip__item
Line ~1460 ORDER SUMMARY .evps-summary, .evps-order-summary
Line ~1536 STEPS ext. .evps-step__line transition
Line ~1554 CART ROW .evps-cart-row
Line ~1585 DOMAIN .evps-domain-search/result/suggestion/row
Line ~1638 CONFIRM HERO .evps-confirm-hero
Line ~1688 TIMELINE .evps-timeline
Line ~1740 BULLET LIST .evps-bullet-list
Line ~1768 ACCOUNT SUMMARY .evps-account-summary
Line ~1787 CHECKOUT AUTH .evps-checkout-auth
Line ~1803 CHECKOUT SECURITY .evps-checkout-security
Line ~1825 CHECKOUT PLAN .evps-checkout-summary-plan
Line ~1833 CHECKOUT NEXT .evps-checkout-next
Line ~1861 SAVED METHOD .evps-saved-method
Line ~1903 TOS .evps-tos
Line ~1932 SECURITY POLICIES .evps-security-policies
Line ~1979 INPUT PREFIX/GROUP .evps-input-prefix / .evps-input-group
Line ~2000 TOGGLE .evps-toggle
Line ~2022 TEXT UTILITY .evps-text-dim / .evps-text-muted
Line ~2029 TABLE WRAP .evps-table-wrap
Line ~2048 RESPONSIVE (OF) Order-form @media adjustments
Line ~2083 PRINT (OF) Order-form print overrides
---- v1.1.0 APPENDED RULES ----
Line ~2096 SIDEBAR COLLAPSE body.evps-sidebar-collapsed + tooltip
Line ~2173 MOBILE SIDEBAR off-canvas + scrim + hamburger
Line ~2249 DESKTOP OVERRIDES hamburger hide, scrim hide, topbar logo
Line ~2260 DENSITY COMPACT [data-density="compact"] audit fills
Line ~2294 THEME TOGGLE sun/moon/auto icon swap via data-attr
Line ~2313 FOCUS RINGS :focus-visible audit — all interactives
Line ~2356 CARD/STAT HOVER scale + shadow, @media (hover:hover)
Line ~2387 SKELETON MOTION @media prefers-reduced-motion guard
Line ~2410 TOAST STACK slide-in / dismiss animations
Line ~2482 PRINT (GLOBAL) sidebar/topbar hide, full-width main
Line ~2538 ACCOUNT MENU .evps-account-menu details/summary
Line ~2599 SKIP LINK .evps-skip-link (also in critical CSS)
Line ~2622 APP SHELL ANIM .evps-app grid-col transition + motion
========================================================================== */
* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
body {
font-family: var(--evps-font-sans);
font-size: var(--evps-fs-base);
color: var(--evps-text);
background: var(--evps-bg);
line-height: var(--evps-lh-normal);
-webkit-font-smoothing: antialiased;
text-rendering: optimizeLegibility;
}
button { font: inherit; color: inherit; cursor: pointer; }
a { color: inherit; text-decoration: none; }
input, select, textarea { font: inherit; color: inherit; }
img, svg { display: block; max-width: 100%; }
/* ── Scrollbar (subtle, matches theme) ───────────────────────────────── */
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb {
background: var(--evps-border);
border-radius: 999px;
border: 2px solid var(--evps-bg);
}
::-webkit-scrollbar-thumb:hover { background: var(--evps-border-strong); }
/* ============================================================
APP SHELL
============================================================ */
.evps-app {
display: grid;
grid-template-columns: var(--evps-sidebar-w) 1fr;
min-height: 100vh;
transition: grid-template-columns var(--evps-dur-base) var(--evps-ease-out);
}
.evps-app[data-sidebar="collapsed"] {
grid-template-columns: var(--evps-sidebar-w-sm) 1fr;
}
/* ── Sidebar ───────────────────────────────────────────────── */
.evps-sidebar {
background: var(--evps-surface);
border-right: 1px solid var(--evps-border);
display: flex;
flex-direction: column;
position: sticky;
top: 0;
height: 100vh;
overflow: hidden;
}
.evps-sidebar__brand {
display: flex;
align-items: center;
gap: var(--evps-space-3);
padding: var(--evps-space-5) var(--evps-space-5);
border-bottom: 1px solid var(--evps-border-subtle);
height: var(--evps-topbar-h);
min-height: var(--evps-topbar-h);
}
.evps-sidebar__logo {
width: 28px; height: 28px;
border-radius: var(--evps-radius-sm);
background: linear-gradient(135deg, var(--evps-primary), var(--evps-accent));
display: grid;
place-items: center;
color: white;
font-weight: var(--evps-fw-bold);
font-size: 14px;
letter-spacing: -0.02em;
flex-shrink: 0;
position: relative;
overflow: hidden;
}
.evps-sidebar__logo::after {
content: "";
position: absolute;
inset: 0;
background: linear-gradient(135deg, transparent 0%, rgba(255,255,255,0.18) 50%, transparent 100%);
}
.evps-sidebar__brand-text { display: flex; flex-direction: column; line-height: 1.1; }
.evps-sidebar__brand-name { font-weight: var(--evps-fw-semibold); font-size: 14px; letter-spacing: -0.01em; }
.evps-sidebar__brand-sub { font-size: 10px; color: var(--evps-text-dim); text-transform: uppercase; letter-spacing: var(--evps-tracking-caps); margin-top: 2px; }
.evps-app[data-sidebar="collapsed"] .evps-sidebar__brand-text { display: none; }
.evps-sidebar__nav { flex: 1; overflow-y: auto; padding: var(--evps-space-3) var(--evps-space-3); }
.evps-sidebar__group { margin-bottom: var(--evps-space-5); }
.evps-sidebar__group-label {
/* Was --evps-text-dim (#5d667d) which fails WCAG AA on the dark
* sidebar surface. Bumped to --evps-text-muted for contrast >= 4.5:1. */
font-size: 11px;
font-weight: var(--evps-fw-semibold);
text-transform: uppercase;
letter-spacing: var(--evps-tracking-caps);
color: var(--evps-text-muted);
padding: 0 var(--evps-space-3);
margin-bottom: var(--evps-space-2);
}
.evps-app[data-sidebar="collapsed"] .evps-sidebar__group-label { display: none; }
.evps-nav-item {
display: flex;
align-items: center;
gap: var(--evps-space-3);
padding: 8px var(--evps-space-3);
border-radius: var(--evps-radius-md);
color: var(--evps-text-muted);
font-size: 13.5px;
font-weight: var(--evps-fw-medium);
cursor: pointer;
transition: all var(--evps-dur-fast) var(--evps-ease-out);
position: relative;
border: none;
background: transparent;
width: 100%;
text-align: left;
}
.evps-nav-item:hover { background: var(--evps-surface-2); color: var(--evps-text); }
.evps-nav-item--active {
background: var(--evps-primary-soft);
color: var(--evps-text);
}
.evps-nav-item--active::before {
content: "";
position: absolute; left: -8px; top: 6px; bottom: 6px;
width: 3px; border-radius: 2px;
background: var(--evps-primary);
}
.evps-nav-item__icon { width: 18px; flex-shrink: 0; display: grid; place-items: center; color: var(--evps-text-muted); }
.evps-nav-item--active .evps-nav-item__icon { color: var(--evps-primary); }
.evps-nav-item__badge {
margin-left: auto;
font-size: 10px;
font-weight: var(--evps-fw-semibold);
background: var(--evps-surface-3);
color: var(--evps-text-muted);
padding: 2px 6px;
border-radius: var(--evps-radius-pill);
min-width: 18px;
text-align: center;
}
.evps-app[data-sidebar="collapsed"] .evps-nav-item__label,
.evps-app[data-sidebar="collapsed"] .evps-nav-item__badge { display: none; }
.evps-app[data-sidebar="collapsed"] .evps-nav-item { justify-content: center; padding: 10px; }
.evps-sidebar__footer {
border-top: 1px solid var(--evps-border-subtle);
padding: var(--evps-space-3);
display: flex;
align-items: center;
gap: var(--evps-space-3);
}
.evps-app[data-sidebar="collapsed"] .evps-sidebar__user-info { display: none; }
.evps-sidebar__user-info { flex: 1; min-width: 0; }
.evps-sidebar__user-name { font-size: 13px; font-weight: var(--evps-fw-semibold); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.evps-sidebar__user-tier { font-size: 10px; color: var(--evps-secondary); text-transform: uppercase; letter-spacing: var(--evps-tracking-caps); font-weight: var(--evps-fw-semibold); }
/* ── Topbar ───────────────────────────────────────────────── */
.evps-main {
display: flex;
flex-direction: column;
min-width: 0;
}
.evps-topbar {
height: var(--evps-topbar-h);
border-bottom: 1px solid var(--evps-border);
background: var(--evps-bg);
display: flex;
align-items: center;
gap: var(--evps-space-3);
padding: 0 var(--evps-space-6);
position: sticky;
top: 0;
z-index: var(--evps-z-sticky);
backdrop-filter: blur(12px);
}
.evps-topbar__crumbs {
display: flex; align-items: center; gap: 6px;
font-size: 13px; color: var(--evps-text-muted);
}
.evps-topbar__crumbs strong { color: var(--evps-text); font-weight: var(--evps-fw-semibold); }
.evps-topbar__crumbs i { color: var(--evps-text-dim); font-size: 10px; }
.evps-topbar__search {
flex: 1;
max-width: 480px;
margin: 0 var(--evps-space-5);
position: relative;
display: flex;
align-items: center;
}
.evps-topbar__search input {
width: 100%;
height: 34px;
border-radius: var(--evps-radius-md);
border: 1px solid var(--evps-border);
background: var(--evps-surface-inset);
color: var(--evps-text);
padding: 0 var(--evps-space-4) 0 36px;
font-size: 13px;
outline: none;
transition: border-color var(--evps-dur-fast), box-shadow var(--evps-dur-fast);
}
.evps-topbar__search input:focus { border-color: var(--evps-primary); box-shadow: 0 0 0 3px var(--evps-primary-ring); }
.evps-topbar__search input::placeholder { color: var(--evps-text-dim); }
.evps-topbar__search-icon { position: absolute; left: 12px; color: var(--evps-text-dim); pointer-events: none; }
.evps-topbar__search-kbd {
/* a11y: --evps-text-dim is too faint here for AA contrast against
* --evps-surface; promote to --evps-text-muted (4.5:1+). */
position: absolute; right: 8px;
font-family: var(--evps-font-mono);
font-size: 11px;
color: var(--evps-text-muted);
border: 1px solid var(--evps-border);
border-radius: var(--evps-radius-xs);
padding: 2px 6px;
background: var(--evps-surface);
}
.evps-topbar__actions {
margin-left: auto;
display: flex;
align-items: center;
gap: var(--evps-space-2);
}
.evps-iconbtn {
width: 34px; height: 34px;
border-radius: var(--evps-radius-md);
border: 1px solid transparent;
background: transparent;
color: var(--evps-text-muted);
display: grid; place-items: center;
cursor: pointer;
position: relative;
transition: all var(--evps-dur-fast);
}
.evps-iconbtn:hover { background: var(--evps-surface-2); color: var(--evps-text); border-color: var(--evps-border); }
.evps-iconbtn[data-active="true"] { background: var(--evps-primary-soft); color: var(--evps-primary); }
.evps-iconbtn__dot {
position: absolute; top: 6px; right: 6px;
width: 7px; height: 7px;
background: var(--evps-danger);
border-radius: 50%;
border: 2px solid var(--evps-bg);
}
.evps-env-badge {
display: inline-flex;
align-items: center;
gap: 6px;
padding: 4px 10px;
border-radius: var(--evps-radius-pill);
font-size: 11px;
font-weight: var(--evps-fw-semibold);
letter-spacing: var(--evps-tracking-wide);
text-transform: uppercase;
}
.evps-env-badge--live { background: var(--evps-success-soft); color: var(--evps-success); }
.evps-env-badge--dev { background: var(--evps-warning-soft); color: var(--evps-warning); }
.evps-env-badge::before {
content: ""; width: 6px; height: 6px; border-radius: 50%;
background: currentColor;
box-shadow: 0 0 0 3px color-mix(in srgb, currentColor 25%, transparent);
}
/* ── Page container ─────────────────────────────────────── */
.evps-page {
padding: var(--evps-space-7) var(--evps-space-7);
max-width: var(--evps-content-max);
margin: 0 auto;
width: 100%;
}
@media (max-width: 768px) {
.evps-page { padding: var(--evps-space-5) var(--evps-space-4); }
}
.evps-page__header {
display: flex;
align-items: flex-end;
justify-content: space-between;
gap: var(--evps-space-5);
margin-bottom: var(--evps-space-7);
flex-wrap: wrap;
}
.evps-page__title {
font-size: var(--evps-fs-3xl);
font-weight: var(--evps-fw-semibold);
letter-spacing: var(--evps-tracking-tight);
margin: 0 0 4px;
}
.evps-page__subtitle {
font-size: var(--evps-fs-md);
color: var(--evps-text-muted);
margin: 0;
}
/* ============================================================
COMPONENTS
============================================================ */
/* ── Buttons ───────────────────────────────────────────── */
.evps-btn {
display: inline-flex;
align-items: center;
justify-content: center;
gap: var(--evps-space-2);
height: var(--evps-control-h-md);
padding: 0 var(--evps-space-4);
border-radius: var(--evps-radius-md);
font-size: 13px;
font-weight: var(--evps-fw-semibold);
letter-spacing: -0.005em;
border: 1px solid transparent;
background: var(--evps-surface-2);
color: var(--evps-text);
cursor: pointer;
white-space: nowrap;
transition: all var(--evps-dur-fast);
user-select: none;
}
.evps-btn:hover { background: var(--evps-surface-3); }
.evps-btn:focus-visible { outline: none; box-shadow: 0 0 0 3px var(--evps-primary-ring); }
.evps-btn:active { transform: translateY(0.5px); }
.evps-btn--primary {
background: var(--evps-primary);
color: white;
box-shadow: 0 1px 0 rgba(255,255,255,0.12) inset, 0 1px 2px rgba(0,0,0,0.3);
}
.evps-btn--primary:hover { background: var(--evps-primary-hover); }
.evps-btn--primary:active { background: var(--evps-primary-active); }
.evps-btn--ghost { background: transparent; border-color: transparent; color: var(--evps-text-muted); }
.evps-btn--ghost:hover { background: var(--evps-surface-2); color: var(--evps-text); }
.evps-btn--outline { background: transparent; border-color: var(--evps-border); }
.evps-btn--outline:hover { background: var(--evps-surface-2); border-color: var(--evps-border-strong); }
.evps-btn--danger { background: var(--evps-danger); color: white; }
.evps-btn--success { background: var(--evps-success); color: white; }
.evps-btn--sm { height: var(--evps-control-h-sm); padding: 0 var(--evps-space-3); font-size: 12px; }
.evps-btn--lg { height: var(--evps-control-h-lg); padding: 0 var(--evps-space-5); font-size: 14px; }
/* ── Card ───────────────────────────────────────────────── */
.evps-card {
background: var(--evps-surface);
border: 1px solid var(--evps-border);
border-radius: var(--evps-radius-lg);
padding: var(--evps-card-pad);
box-shadow: var(--evps-shadow-sm);
position: relative;
}
.evps-card--bare { padding: 0; overflow: hidden; }
.evps-card__header {
display: flex; align-items: center; justify-content: space-between;
margin-bottom: var(--evps-space-4);
gap: var(--evps-space-3);
}
.evps-card__title {
font-size: 14px; font-weight: var(--evps-fw-semibold);
margin: 0;
letter-spacing: -0.005em;
}
.evps-card__sub { font-size: 12px; color: var(--evps-text-muted); margin-top: 2px; }
.evps-card__actions { display: flex; align-items: center; gap: 6px; }
/* ── Badge ───────────────────────────────────────────────── */
.evps-badge {
display: inline-flex;
align-items: center;
gap: 5px;
padding: 3px 8px;
border-radius: var(--evps-radius-pill);
font-size: 11px;
font-weight: var(--evps-fw-semibold);
letter-spacing: 0;
background: var(--evps-surface-3);
color: var(--evps-text-muted);
border: 1px solid var(--evps-border-subtle);
white-space: nowrap;
}
.evps-badge--success { background: var(--evps-success-soft); color: var(--evps-success-text); border-color: transparent; }
.evps-badge--warning { background: var(--evps-warning-soft); color: var(--evps-warning-text); border-color: transparent; }
.evps-badge--danger { background: var(--evps-danger-soft); color: var(--evps-danger-text); border-color: transparent; }
.evps-badge--info { background: var(--evps-info-soft); color: var(--evps-info-text); border-color: transparent; }
.evps-badge--accent { background: var(--evps-accent-soft); color: var(--evps-accent-text); border-color: transparent; }
.evps-badge__dot { width: 6px; height: 6px; border-radius: 50%; background: currentColor; }
/* ── Stat tile ───────────────────────────────────────────── */
.evps-stat {
display: flex;
flex-direction: column;
gap: var(--evps-space-2);
padding: var(--evps-card-pad);
background: var(--evps-surface);
border: 1px solid var(--evps-border);
border-radius: var(--evps-radius-lg);
position: relative;
overflow: hidden;
}
.evps-stat__label {
font-size: 11px;
font-weight: var(--evps-fw-semibold);
text-transform: uppercase;
letter-spacing: var(--evps-tracking-caps);
color: var(--evps-text-muted);
}
.evps-stat__value {
font-size: var(--evps-fs-2xl);
font-weight: var(--evps-fw-semibold);
letter-spacing: var(--evps-tracking-tight);
font-feature-settings: "tnum" 1;
}
.evps-stat__delta {
display: inline-flex; align-items: center; gap: 4px;
font-size: 11px;
font-weight: var(--evps-fw-semibold);
color: var(--evps-success);
}
.evps-stat__delta--down { color: var(--evps-danger); }
.evps-stat__icon {
position: absolute; top: 14px; right: 14px;
width: 32px; height: 32px;
border-radius: var(--evps-radius-md);
display: grid; place-items: center;
background: var(--evps-primary-soft);
color: var(--evps-primary);
}
/* ── Service card ───────────────────────────────────────── */
.evps-service-card {
background: var(--evps-surface);
border: 1px solid var(--evps-border);
border-radius: var(--evps-radius-lg);
padding: var(--evps-card-pad);
display: flex;
flex-direction: column;
gap: var(--evps-space-3);
cursor: pointer;
transition: all var(--evps-dur-base) var(--evps-ease-out);
position: relative;
overflow: hidden;
}
.evps-service-card:hover {
border-color: var(--evps-border-strong);
background: var(--evps-surface-2);
transform: translateY(-1px);
box-shadow: var(--evps-shadow-md);
}
.evps-service-card::before {
content: "";
position: absolute; top: 0; left: 0; right: 0; height: 2px;
background: linear-gradient(90deg, var(--evps-primary), var(--evps-accent));
opacity: 0;
transition: opacity var(--evps-dur-base);
}
.evps-service-card:hover::before { opacity: 1; }
.evps-service-card__head { display: flex; align-items: flex-start; justify-content: space-between; gap: var(--evps-space-3); }
.evps-service-card__icon {
width: 38px; height: 38px;
border-radius: var(--evps-radius-md);
background: var(--evps-surface-3);
display: grid; place-items: center;
color: var(--evps-primary);
flex-shrink: 0;
}
.evps-service-card__name { font-size: 14px; font-weight: var(--evps-fw-semibold); margin: 0; letter-spacing: -0.005em; }
.evps-service-card__sub { font-size: 12px; color: var(--evps-text-muted); margin-top: 2px; font-family: var(--evps-font-mono); }
.evps-service-card__metrics {
display: grid; grid-template-columns: 1fr 1fr 1fr;
gap: var(--evps-space-2);
padding: var(--evps-space-3) 0;
border-top: 1px solid var(--evps-border-subtle);
border-bottom: 1px solid var(--evps-border-subtle);
}
.evps-service-card__metric { display: flex; flex-direction: column; gap: 4px; }
.evps-service-card__metric-label { font-size: 10px; color: var(--evps-text-dim); text-transform: uppercase; letter-spacing: var(--evps-tracking-caps); }
.evps-service-card__metric-value { font-size: 12.5px; font-weight: var(--evps-fw-semibold); font-family: var(--evps-font-mono); }
.evps-service-card__foot {
display: flex; align-items: center; justify-content: space-between;
font-size: 11px; color: var(--evps-text-muted);
}
/* ── Meter / progress ────────────────────────────────── */
.evps-meter {
position: relative;
height: 4px;
background: var(--evps-surface-3);
border-radius: 999px;
overflow: hidden;
}
.evps-meter__fill {
position: absolute; left: 0; top: 0; bottom: 0;
background: var(--evps-primary);
border-radius: 999px;
transition: width var(--evps-dur-slow) var(--evps-ease-out);
}
.evps-meter__fill--success { background: var(--evps-success); }
.evps-meter__fill--warning { background: var(--evps-warning); }
.evps-meter__fill--danger { background: var(--evps-danger); }
/* ── Avatar ───────────────────────────────────────────── */
.evps-avatar {
width: 32px; height: 32px;
border-radius: 50%;
background: linear-gradient(135deg, var(--evps-primary), var(--evps-accent));
display: grid; place-items: center;
color: white;
font-size: 12px;
font-weight: var(--evps-fw-semibold);
flex-shrink: 0;
}
.evps-avatar--sm { width: 24px; height: 24px; font-size: 10px; }
.evps-avatar--lg { width: 44px; height: 44px; font-size: 14px; }
/* ── Tabs ───────────────────────────────────────────────── */
.evps-tabs {
display: flex;
gap: 0;
border-bottom: 1px solid var(--evps-border);
margin-bottom: var(--evps-space-5);
overflow-x: auto;
}
.evps-tabs__item {
padding: 10px var(--evps-space-4);
font-size: 13px;
font-weight: var(--evps-fw-medium);
color: var(--evps-text-muted);
cursor: pointer;
border: none;
background: transparent;
position: relative;
white-space: nowrap;
transition: color var(--evps-dur-fast);
border-bottom: 2px solid transparent;
margin-bottom: -1px;
}
.evps-tabs__item:hover { color: var(--evps-text); }
.evps-tabs__item--active {
color: var(--evps-text);
border-bottom-color: var(--evps-primary);
}
.evps-tabs__count {
display: inline-block; margin-left: 6px;
background: var(--evps-surface-3);
color: var(--evps-text-muted);
font-size: 10px; font-weight: var(--evps-fw-semibold);
padding: 1px 6px;
border-radius: var(--evps-radius-pill);
}
/* ── Table ───────────────────────────────────────────────── */
.evps-table {
width: 100%;
border-collapse: collapse;
font-size: 13px;
}
.evps-table thead th {
text-align: left;
font-size: 10px;
text-transform: uppercase;
letter-spacing: var(--evps-tracking-caps);
font-weight: var(--evps-fw-semibold);
color: var(--evps-text-muted);
padding: var(--evps-space-3) var(--evps-space-4);
border-bottom: 1px solid var(--evps-border);
background: var(--evps-surface-2);
}
.evps-table tbody td {
padding: var(--evps-row-py) var(--evps-space-4);
border-bottom: 1px solid var(--evps-border-subtle);
color: var(--evps-text);
}
.evps-table tbody tr { transition: background var(--evps-dur-fast); }
.evps-table tbody tr:hover { background: var(--evps-surface-2); }
.evps-table tbody tr:last-child td { border-bottom: 0; }
.evps-table__primary { font-weight: var(--evps-fw-medium); }
.evps-table__mono { font-family: var(--evps-font-mono); font-size: 12px; color: var(--evps-text-muted); }
/* ── Form controls ───────────────────────────────────── */
.evps-input, .evps-select, .evps-textarea {
width: 100%;
height: var(--evps-control-h-md);
padding: 0 var(--evps-control-px);
background: var(--evps-surface-inset);
border: 1px solid var(--evps-border);
border-radius: var(--evps-radius-md);
color: var(--evps-text);
font-size: 13px;
outline: none;
transition: border-color var(--evps-dur-fast), box-shadow var(--evps-dur-fast);
}
.evps-textarea { height: auto; padding: 10px var(--evps-control-px); resize: vertical; min-height: 80px; }
.evps-input:focus, .evps-select:focus, .evps-textarea:focus {
border-color: var(--evps-primary);
box-shadow: 0 0 0 3px var(--evps-primary-ring);
}
.evps-input::placeholder, .evps-textarea::placeholder { color: var(--evps-text-dim); }
.evps-label {
display: block;
font-size: 12px;
font-weight: var(--evps-fw-semibold);
color: var(--evps-text);
margin-bottom: 6px;
}
.evps-help { font-size: 11px; color: var(--evps-text-muted); margin-top: 4px; }
.evps-field { margin-bottom: var(--evps-space-4); }
/* ── Switch ────────────────────────────────────────────── */
.evps-switch {
position: relative;
display: inline-block;
width: 36px; height: 20px;
background: var(--evps-surface-3);
border-radius: 999px;
cursor: pointer;
border: 1px solid var(--evps-border);
transition: background var(--evps-dur-fast);
}
.evps-switch::after {
content: "";
position: absolute; left: 2px; top: 1px;
width: 14px; height: 14px;
background: var(--evps-text);
border-radius: 50%;
transition: all var(--evps-dur-base) var(--evps-ease-spring);
}
.evps-switch[aria-checked="true"] { background: var(--evps-primary); border-color: var(--evps-primary); }
.evps-switch[aria-checked="true"]::after { left: 18px; background: white; }
/* ── Radio card ────────────────────────────────────────── */
.evps-radio-card {
border: 1px solid var(--evps-border);
background: var(--evps-surface);
border-radius: var(--evps-radius-md);
padding: var(--evps-space-4);
cursor: pointer;
position: relative;
transition: all var(--evps-dur-fast);
display: flex;
flex-direction: column;
gap: 4px;
}
.evps-radio-card:hover { border-color: var(--evps-border-strong); background: var(--evps-surface-2); }
.evps-radio-card[data-selected="true"] {
border-color: var(--evps-primary);
background: var(--evps-primary-soft);
box-shadow: 0 0 0 1px var(--evps-primary);
}
.evps-radio-card[data-selected="true"]::after {
content: "✓";
position: absolute; top: 8px; right: 8px;
width: 18px; height: 18px;
background: var(--evps-primary);
color: white;
border-radius: 50%;
display: grid; place-items: center;
font-size: 11px;
font-weight: var(--evps-fw-bold);
}
/* ── Alert ────────────────────────────────────────────── */
.evps-alert {
border: 1px solid var(--evps-border);
background: var(--evps-surface);
border-radius: var(--evps-radius-md);
padding: var(--evps-space-4);
display: flex;
gap: var(--evps-space-3);
align-items: flex-start;
position: relative;
}
.evps-alert--info { background: var(--evps-info-soft); border-color: transparent; }
.evps-alert--success { background: var(--evps-success-soft); border-color: transparent; }
.evps-alert--warning { background: var(--evps-warning-soft); border-color: transparent; }
.evps-alert--danger { background: var(--evps-danger-soft); border-color: transparent; }
.evps-alert__icon { flex-shrink: 0; margin-top: 1px; }
.evps-alert--info .evps-alert__icon { color: var(--evps-info); }
.evps-alert--success .evps-alert__icon { color: var(--evps-success); }
.evps-alert--warning .evps-alert__icon { color: var(--evps-warning); }
.evps-alert--danger .evps-alert__icon { color: var(--evps-danger); }
.evps-alert__title { font-weight: var(--evps-fw-semibold); font-size: 13px; }
.evps-alert__body { font-size: 12.5px; color: var(--evps-text-muted); margin-top: 2px; }
/* ── Skeleton ──────────────────────────────────────────── */
.evps-skel {
background: linear-gradient(90deg, var(--evps-surface-2) 25%, var(--evps-surface-3) 50%, var(--evps-surface-2) 75%);
background-size: 200% 100%;
animation: evps-skel-shimmer 1.4s ease-in-out infinite;
border-radius: var(--evps-radius-sm);
}
@keyframes evps-skel-shimmer {
0% { background-position: 200% 0; }
100% { background-position: -200% 0; }
}
/* ── Empty state ───────────────────────────────────────── */
.evps-empty {
text-align: center;
padding: var(--evps-space-9) var(--evps-space-5);
color: var(--evps-text-muted);
}
.evps-empty__icon {
width: 56px; height: 56px;
margin: 0 auto var(--evps-space-4);
background: var(--evps-surface-2);
border: 1px solid var(--evps-border);
border-radius: var(--evps-radius-lg);
display: grid; place-items: center;
color: var(--evps-text-dim);
}
.evps-empty__title { font-size: 14px; font-weight: var(--evps-fw-semibold); color: var(--evps-text); margin: 0 0 6px; }
.evps-empty__desc { font-size: 12.5px; max-width: 360px; margin: 0 auto var(--evps-space-4); line-height: var(--evps-lh-snug); }
/* ── Spark / mini chart ───────────────────────────────── */
.evps-spark { width: 100%; height: 36px; }
.evps-spark path { fill: none; stroke: var(--evps-primary); stroke-width: 1.5; }
.evps-spark .evps-spark__area { fill: var(--evps-primary-soft); stroke: none; }
/* ── Code block ─────────────────────────────────────── */
.evps-code {
font-family: var(--evps-font-mono);
font-size: 12px;
background: var(--evps-surface-inset);
border: 1px solid var(--evps-border);
border-radius: var(--evps-radius-md);
padding: var(--evps-space-4);
color: var(--evps-text);
line-height: var(--evps-lh-relaxed);
overflow-x: auto;
position: relative;
white-space: pre;
}
.evps-code__lang {
position: absolute; top: 6px; right: 6px;
font-size: 10px; text-transform: uppercase;
color: var(--evps-text-dim);
letter-spacing: var(--evps-tracking-caps);
font-family: var(--evps-font-sans);
font-weight: var(--evps-fw-semibold);
}
/* ── Layout helpers ──────────────────────────────────── */
.evps-grid { display: grid; gap: var(--evps-space-5); }
.evps-grid--2 { grid-template-columns: repeat(2, 1fr); }
.evps-grid--3 { grid-template-columns: repeat(3, 1fr); }
.evps-grid--4 { grid-template-columns: repeat(4, 1fr); }
.evps-grid--12 { grid-template-columns: repeat(12, 1fr); }
.evps-row { display: flex; align-items: center; gap: var(--evps-space-3); }
.evps-row--between { justify-content: space-between; }
.evps-stack { display: flex; flex-direction: column; gap: var(--evps-space-3); }
.evps-stack--lg { gap: var(--evps-space-5); }
.evps-stack--sm { gap: var(--evps-space-2); }
.evps-mono { font-family: var(--evps-font-mono); }
.evps-tnum { font-feature-settings: "tnum" 1; }
.evps-muted { color: var(--evps-text-muted); }
.evps-dim { color: var(--evps-text-dim); }
.evps-truncate { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.evps-divider { height: 1px; background: var(--evps-border-subtle); margin: var(--evps-space-5) 0; }
@media (max-width: 1024px) {
.evps-grid--4 { grid-template-columns: repeat(2, 1fr); }
.evps-grid--3 { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 640px) {
.evps-grid--2, .evps-grid--3, .evps-grid--4 { grid-template-columns: 1fr; }
}
/* ── Surface switcher (top-of-page in this prototype) ── */
.evps-surface-switcher {
position: sticky;
top: 0;
z-index: var(--evps-z-sticky);
background: var(--evps-bg-elevated);
border-bottom: 1px solid var(--evps-border);
padding: var(--evps-space-3) var(--evps-space-6);
display: flex;
align-items: center;
gap: var(--evps-space-3);
flex-wrap: wrap;
}
.evps-surface-switcher__brand {
display: flex; align-items: center; gap: var(--evps-space-2);
font-weight: var(--evps-fw-semibold);
font-size: 13px;
letter-spacing: -0.01em;
margin-right: var(--evps-space-3);
}
.evps-surface-switcher__brand-mark {
width: 22px; height: 22px;
border-radius: var(--evps-radius-xs);
background: linear-gradient(135deg, var(--evps-primary), var(--evps-accent));
display: grid; place-items: center;
color: white;
font-size: 11px;
font-weight: var(--evps-fw-bold);
}
.evps-surface-tab {
padding: 6px var(--evps-space-3);
border-radius: var(--evps-radius-md);
font-size: 12.5px;
font-weight: var(--evps-fw-medium);
color: var(--evps-text-muted);
background: transparent;
border: 1px solid transparent;
cursor: pointer;
display: inline-flex;
align-items: center;
gap: 6px;
transition: all var(--evps-dur-fast);
}
.evps-surface-tab:hover { color: var(--evps-text); background: var(--evps-surface-2); }
.evps-surface-tab--active {
color: var(--evps-text);
background: var(--evps-surface-2);
border-color: var(--evps-border);
}
/* ── AI Assistant — Floating Bubble + Drawer ─────────── */
.evps-ai-bubble {
position: fixed;
z-index: var(--evps-z-ai);
width: 56px; height: 56px;
border-radius: 50%;
background: linear-gradient(135deg, var(--evps-accent), var(--evps-primary));
color: white;
border: none;
cursor: grab;
box-shadow: var(--evps-shadow-lg), 0 0 0 4px var(--evps-bg-elevated), 0 0 24px rgba(139, 92, 246, 0.45);
display: grid; place-items: center;
transition: transform var(--evps-dur-base) var(--evps-ease-spring);
}
.evps-ai-bubble:hover { transform: scale(1.06); }
.evps-ai-bubble:active { cursor: grabbing; }
.evps-ai-bubble[data-dragging="true"] { transition: none; }
.evps-ai-bubble__pulse {
position: absolute; inset: -4px;
border-radius: 50%;
border: 2px solid var(--evps-accent);
animation: evps-ai-pulse 2.4s ease-out infinite;
}
@keyframes evps-ai-pulse {
0% { transform: scale(0.85); opacity: 0.8; }
100% { transform: scale(1.4); opacity: 0; }
}
.evps-ai-drawer {
position: fixed;
z-index: var(--evps-z-ai);
width: 420px;
max-width: calc(100vw - 32px);
max-height: 80vh;
background: var(--evps-bg-elevated);
border: 1px solid var(--evps-border);
border-radius: var(--evps-radius-xl);
box-shadow: var(--evps-shadow-xl);
display: flex;
flex-direction: column;
overflow: hidden;
animation: evps-ai-pop var(--evps-dur-base) var(--evps-ease-spring);
}
@keyframes evps-ai-pop {
from { opacity: 0; transform: translateY(12px) scale(0.96); }
to { opacity: 1; transform: translateY(0) scale(1); }
}
.evps-ai-drawer__head {
padding: var(--evps-space-4);
border-bottom: 1px solid var(--evps-border);
display: flex;
align-items: center;
gap: var(--evps-space-3);
cursor: grab;
background: linear-gradient(180deg, color-mix(in srgb, var(--evps-accent) 12%, transparent) 0%, transparent 100%);
}
.evps-ai-drawer__head:active { cursor: grabbing; }
.evps-ai-drawer__avatar {
width: 32px; height: 32px;
border-radius: var(--evps-radius-md);
background: linear-gradient(135deg, var(--evps-accent), var(--evps-primary));
display: grid; place-items: center;
color: white;
font-size: 14px;
}
.evps-ai-drawer__title { font-size: 13.5px; font-weight: var(--evps-fw-semibold); }
.evps-ai-drawer__sub { font-size: 11px; color: var(--evps-text-muted); display: flex; align-items: center; gap: 5px; }
.evps-ai-drawer__sub::before {
content: ""; width: 6px; height: 6px; background: var(--evps-success); border-radius: 50%;
box-shadow: 0 0 0 3px var(--evps-success-soft);
}
.evps-ai-drawer__close { margin-left: auto; }
.evps-ai-drawer__body { flex: 1; overflow-y: auto; padding: var(--evps-space-4); display: flex; flex-direction: column; gap: var(--evps-space-3); }
.evps-ai-context {
font-size: 11px; color: var(--evps-text-muted);
background: var(--evps-surface-2);
border: 1px dashed var(--evps-border);
border-radius: var(--evps-radius-md);
padding: 8px 10px;
display: flex; align-items: center; gap: 6px;
}
.evps-ai-msg { display: flex; gap: 10px; }
.evps-ai-msg__avatar {
width: 28px; height: 28px;
border-radius: var(--evps-radius-md);
display: grid; place-items: center;
flex-shrink: 0;
font-size: 11px;
font-weight: var(--evps-fw-semibold);
}
.evps-ai-msg--bot .evps-ai-msg__avatar {
background: linear-gradient(135deg, var(--evps-accent), var(--evps-primary));
color: white;
}
.evps-ai-msg--user { flex-direction: row-reverse; }
.evps-ai-msg--user .evps-ai-msg__avatar {
background: var(--evps-surface-3);
color: var(--evps-text);
}
.evps-ai-msg__bubble {
background: var(--evps-surface-2);
border: 1px solid var(--evps-border);
border-radius: var(--evps-radius-md);
padding: 10px 12px;
font-size: 13px;
max-width: 85%;
line-height: var(--evps-lh-snug);
}
.evps-ai-msg--user .evps-ai-msg__bubble {
background: var(--evps-primary);
color: white;
border-color: transparent;
}
.evps-ai-msg__bubble pre {
margin: 8px 0 0;
background: var(--evps-surface-inset);
border: 1px solid var(--evps-border);
border-radius: var(--evps-radius-sm);
padding: 8px 10px;
font-family: var(--evps-font-mono);
font-size: 11.5px;
overflow-x: auto;
position: relative;
}
.evps-ai-typing {
display: inline-flex; gap: 3px;
padding: 10px 14px;
background: var(--evps-surface-2);
border: 1px solid var(--evps-border);
border-radius: var(--evps-radius-md);
}
.evps-ai-typing span {
width: 5px; height: 5px;
background: var(--evps-text-muted);
border-radius: 50%;
animation: evps-ai-dot 1.2s infinite;
}
.evps-ai-typing span:nth-child(2) { animation-delay: 0.2s; }
.evps-ai-typing span:nth-child(3) { animation-delay: 0.4s; }
@keyframes evps-ai-dot {
0%,60%,100% { opacity: 0.3; transform: translateY(0); }
30% { opacity: 1; transform: translateY(-2px); }
}
.evps-ai-prompts { display: flex; flex-wrap: wrap; gap: 6px; }
.evps-ai-prompt {
font-size: 11.5px;
padding: 5px 10px;
background: var(--evps-surface-2);
border: 1px solid var(--evps-border);
border-radius: var(--evps-radius-pill);
cursor: pointer;
color: var(--evps-text-muted);
transition: all var(--evps-dur-fast);
}
.evps-ai-prompt:hover { background: var(--evps-primary-soft); color: var(--evps-primary); border-color: transparent; }
.evps-ai-drawer__input {
border-top: 1px solid var(--evps-border);
padding: var(--evps-space-3);
display: flex;
align-items: flex-end;
gap: var(--evps-space-2);
}
.evps-ai-drawer__input textarea {
flex: 1;
background: var(--evps-surface-inset);
border: 1px solid var(--evps-border);
border-radius: var(--evps-radius-md);
resize: none;
padding: 8px 10px;
font-size: 13px;
color: var(--evps-text);
outline: none;
min-height: 36px;
max-height: 120px;
font-family: var(--evps-font-sans);
}
.evps-ai-drawer__input textarea:focus { border-color: var(--evps-primary); box-shadow: 0 0 0 3px var(--evps-primary-ring); }
@media (max-width: 640px) {
.evps-ai-drawer { width: calc(100vw - 24px); right: 12px !important; left: 12px !important; bottom: 12px !important; top: auto !important; }
}
/* ── Command palette ──────────────────────────────────── */
.evps-cmdk__overlay {
position: fixed; inset: 0;
background: rgba(8, 10, 16, 0.6);
backdrop-filter: blur(6px);
z-index: var(--evps-z-cmdk);
display: grid;
place-items: start center;
padding-top: 12vh;
}
.evps-cmdk {
width: 640px; max-width: calc(100vw - 32px);
background: var(--evps-bg-elevated);
border: 1px solid var(--evps-border);
border-radius: var(--evps-radius-xl);
box-shadow: var(--evps-shadow-xl);
overflow: hidden;
display: flex;
flex-direction: column;
max-height: 70vh;
}
.evps-cmdk__input {
border: none;
background: transparent;
padding: var(--evps-space-5);
font-size: 16px;
color: var(--evps-text);
outline: none;
border-bottom: 1px solid var(--evps-border);
}
.evps-cmdk__list { padding: 6px; overflow-y: auto; flex: 1; }
.evps-cmdk__group {
font-size: 10px;
text-transform: uppercase;
letter-spacing: var(--evps-tracking-caps);
color: var(--evps-text-dim);
padding: 8px 12px 4px;
font-weight: var(--evps-fw-semibold);
}
.evps-cmdk__item {
padding: 8px 10px;
border-radius: var(--evps-radius-md);
display: flex;
align-items: center;
gap: var(--evps-space-3);
cursor: pointer;
font-size: 13px;
}
.evps-cmdk__item:hover, .evps-cmdk__item--active { background: var(--evps-primary-soft); }
.evps-cmdk__item-icon { width: 20px; color: var(--evps-text-muted); display: grid; place-items: center; }
.evps-cmdk__item-shortcut { margin-left: auto; font-family: var(--evps-font-mono); font-size: 11px; color: var(--evps-text-dim); }
/* ── Toast ──────────────────────────────────────────── */
.evps-toast-stack {
position: fixed;
bottom: 16px; right: 16px;
z-index: var(--evps-z-toast);
display: flex;
flex-direction: column-reverse;
gap: 8px;
pointer-events: none;
}
.evps-toast {
pointer-events: auto;
background: var(--evps-surface);
border: 1px solid var(--evps-border);
border-radius: var(--evps-radius-md);
padding: 10px 12px;
font-size: 13px;
display: flex;
align-items: center;
gap: 10px;
min-width: 280px;
box-shadow: var(--evps-shadow-md);
animation: evps-toast-in 240ms var(--evps-ease-spring);
}
@keyframes evps-toast-in {
from { opacity: 0; transform: translateY(8px); }
to { opacity: 1; transform: translateY(0); }
}
.evps-toast__icon { color: var(--evps-success); flex-shrink: 0; }
.evps-toast--info .evps-toast__icon { color: var(--evps-info); }
.evps-toast--danger .evps-toast__icon { color: var(--evps-danger); }
/* ── Trust strip ───────────────────────────────────── */
.evps-trust-strip {
display: flex;
align-items: center;
justify-content: center;
gap: var(--evps-space-7);
padding: var(--evps-space-4) var(--evps-space-5);
border-top: 1px solid var(--evps-border-subtle);
border-bottom: 1px solid var(--evps-border-subtle);
font-size: 11px;
color: var(--evps-text-muted);
flex-wrap: wrap;
}
.evps-trust-strip i { color: var(--evps-success); margin-right: 6px; }
/* ── Progress steps ────────────────────────────────── */
.evps-steps { display: flex; gap: 0; align-items: center; }
.evps-step { display: flex; align-items: center; gap: 8px; flex: 1; }
.evps-step__dot {
width: 24px; height: 24px;
border-radius: 50%;
background: var(--evps-surface-3);
display: grid; place-items: center;
font-size: 11px;
font-weight: var(--evps-fw-semibold);
color: var(--evps-text-muted);
border: 1px solid var(--evps-border);
}
.evps-step--done .evps-step__dot { background: var(--evps-success); color: white; border-color: transparent; }
.evps-step--current .evps-step__dot { background: var(--evps-primary); color: white; border-color: transparent; box-shadow: 0 0 0 4px var(--evps-primary-ring); }
.evps-step__label { font-size: 12px; color: var(--evps-text-muted); }
.evps-step--done .evps-step__label, .evps-step--current .evps-step__label { color: var(--evps-text); font-weight: var(--evps-fw-medium); }
.evps-step__line { flex: 1; height: 1px; background: var(--evps-border); margin: 0 8px; }
.evps-step--done + .evps-step .evps-step__line { background: var(--evps-success); }
/* ── Pricing tier card ───────────────────────────── */
.evps-tier {
position: relative;
background: var(--evps-surface);
border: 1px solid var(--evps-border);
border-radius: var(--evps-radius-xl);
padding: var(--evps-space-6);
display: flex;
flex-direction: column;
gap: var(--evps-space-4);
transition: all var(--evps-dur-base);
}
.evps-tier:hover { border-color: var(--evps-border-strong); box-shadow: var(--evps-shadow-md); }
.evps-tier--featured {
border-color: var(--evps-primary);
background: linear-gradient(180deg, var(--evps-primary-soft) 0%, var(--evps-surface) 35%);
box-shadow: 0 0 0 1px var(--evps-primary), var(--evps-shadow-md);
}
.evps-tier__ribbon {
position: absolute;
top: -10px; right: 18px;
padding: 3px 10px;
background: var(--evps-primary);
color: white;
font-size: 10px;
font-weight: var(--evps-fw-bold);
letter-spacing: var(--evps-tracking-caps);
text-transform: uppercase;
border-radius: var(--evps-radius-pill);
}
.evps-tier__name { font-size: 14px; font-weight: var(--evps-fw-semibold); letter-spacing: -0.005em; margin: 0; }
.evps-tier__desc { font-size: 12px; color: var(--evps-text-muted); }
.evps-tier__price { display: flex; align-items: baseline; gap: 4px; }
.evps-tier__price-amt { font-size: 32px; font-weight: var(--evps-fw-semibold); letter-spacing: var(--evps-tracking-tight); }
.evps-tier__price-cycle { font-size: 12px; color: var(--evps-text-muted); }
.evps-tier__features { display: flex; flex-direction: column; gap: 8px; font-size: 12.5px; }
.evps-tier__feat { display: flex; align-items: center; gap: 8px; color: var(--evps-text-muted); }
.evps-tier__feat i { color: var(--evps-success); font-size: 11px; }
.evps-tier__feat strong { color: var(--evps-text); font-weight: var(--evps-fw-semibold); }
/* ── KBD ───────────────────────────────────────────── */
.evps-kbd {
display: inline-block;
font-family: var(--evps-font-mono);
font-size: 10px;
border: 1px solid var(--evps-border);
border-bottom-width: 2px;
border-radius: var(--evps-radius-xs);
padding: 1px 5px;
color: var(--evps-text-muted);
background: var(--evps-surface-2);
}
/* ── Order Form additions (Phase 5) ── */
/* ============================================================
ORDER FORM PAGE WRAPPER & LAYOUT
============================================================ */
/* Page shell */
.evps-orderform {
padding: var(--evps-space-6) var(--evps-space-4);
}
@media (min-width: 768px) {
.evps-orderform { padding: var(--evps-space-8) var(--evps-space-6); }
}
/* Breadcrumb trail */
.evps-orderform__breadcrumb {
display: flex;
align-items: center;
gap: var(--evps-space-2);
margin-bottom: var(--evps-space-5);
font-size: var(--evps-fs-sm);
color: var(--evps-text-muted);
flex-wrap: wrap;
}
.evps-orderform__crumb-sep { color: var(--evps-text-dim); }
.evps-orderform__crumb { color: var(--evps-text); font-weight: var(--evps-fw-medium); }
/* 2-column layout: main content + sticky sidebar */
.evps-orderform__layout {
display: grid;
grid-template-columns: 1fr;
gap: var(--evps-space-6);
align-items: start;
}
@media (min-width: 992px) {
.evps-orderform__layout { grid-template-columns: 1fr 380px; }
}
/* Product group tabs nav */
.evps-orderform__groups {
margin-bottom: var(--evps-space-6);
}
/* Domain search/configure section */
.evps-orderform__domain-step { margin-bottom: var(--evps-space-5); }
.evps-orderform__domain-input { margin-top: var(--evps-space-4); }
/* Compare / cross-sell block */
.evps-orderform__compare {
margin-top: var(--evps-space-7);
padding: var(--evps-space-6);
background: var(--evps-surface-inset);
border-radius: var(--evps-radius-lg);
border: 1px solid var(--evps-border-subtle);
}
/* Action row (back/forward buttons) */
.evps-orderform__actions {
display: flex;
align-items: center;
gap: var(--evps-space-3);
flex-wrap: wrap;
margin-top: var(--evps-space-6);
}
/* Checkout page centred hero header */
.evps-orderform__checkout-header {
text-align: center;
margin-bottom: var(--evps-space-6);
}
/* ============================================================
EVPS-TIER (product pricing cards inside evps-product-grid)
============================================================ */
/* evps-product-grid: auto-fit responsive grid */
.evps-product-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
gap: var(--evps-space-5);
align-items: start;
}
/* Tier card — base already established in main CSS; these are additive elements */
.evps-tier__head {
display: flex;
flex-direction: column;
gap: var(--evps-space-1);
}
.evps-tier__setup {
font-size: var(--evps-fs-xs);
color: var(--evps-text-dim);
margin-top: calc(-1 * var(--evps-space-2));
}
/* ============================================================
EVPS-RADIO-CARD (cycle picker, domain mode, etc.)
============================================================ */
.evps-radio-card {
position: relative;
display: flex;
align-items: center;
gap: var(--evps-space-3);
padding: var(--evps-space-3) var(--evps-space-4);
background: var(--evps-surface);
border: 1px solid var(--evps-border);
border-radius: var(--evps-radius-md);
cursor: pointer;
transition: border-color var(--evps-dur-fast) var(--evps-ease-out),
box-shadow var(--evps-dur-fast) var(--evps-ease-out),
background var(--evps-dur-fast) var(--evps-ease-out);
user-select: none;
}
@media (prefers-reduced-motion: reduce) {
.evps-radio-card { transition: none; }
}
.evps-radio-card:hover { border-color: var(--evps-border-strong); background: var(--evps-surface-2); }
.evps-radio-card.is-selected,
.evps-radio-card:has(.evps-radio-card__input:checked) {
border-color: var(--evps-primary);
box-shadow: 0 0 0 2px var(--evps-primary-ring);
background: var(--evps-primary-soft);
}
.evps-radio-card.is-disabled,
.evps-radio-card:has(.evps-radio-card__input:disabled) { opacity: 0.45; pointer-events: none; }
/* Visually-hidden input */
.evps-radio-card__input {
position: absolute;
width: 1px; height: 1px;
padding: 0; margin: -1px;
overflow: hidden;
clip: rect(0,0,0,0);
white-space: nowrap;
border: 0;
}
.evps-radio-card__input:focus-visible ~ .evps-radio-card__body { outline: 2px solid var(--evps-primary-ring); outline-offset: 2px; }
.evps-radio-card__icon {
flex-shrink: 0;
width: 28px; height: 28px;
display: grid; place-items: center;
border-radius: var(--evps-radius-sm);
background: var(--evps-surface-3);
color: var(--evps-text-muted);
}
.evps-radio-card.is-selected .evps-radio-card__icon,
.evps-radio-card:has(.evps-radio-card__input:checked) .evps-radio-card__icon {
background: var(--evps-primary-soft);
color: var(--evps-primary);
}
.evps-radio-card__body { flex: 1; min-width: 0; }
.evps-radio-card__label { font-size: var(--evps-fs-base); font-weight: var(--evps-fw-medium); color: var(--evps-text); }
.evps-radio-card__sub { font-size: var(--evps-fs-sm); color: var(--evps-text-muted); margin-top: 2px; }
.evps-radio-card__hint { font-size: var(--evps-fs-xs); color: var(--evps-success); margin-top: 2px; }
/* ============================================================
EVPS-OPTION-CARD (OS, region, add-on picker)
============================================================ */
.evps-option-card {
position: relative;
display: flex;
align-items: flex-start;
gap: var(--evps-space-3);
padding: var(--evps-space-3) var(--evps-space-4);
background: var(--evps-surface);
border: 1px solid var(--evps-border);
border-radius: var(--evps-radius-md);
cursor: pointer;
transition: border-color var(--evps-dur-fast) var(--evps-ease-out),
box-shadow var(--evps-dur-fast) var(--evps-ease-out),
background var(--evps-dur-fast) var(--evps-ease-out);
user-select: none;
}
@media (prefers-reduced-motion: reduce) {
.evps-option-card { transition: none; }
}
.evps-option-card:hover { border-color: var(--evps-border-strong); background: var(--evps-surface-2); }
.evps-option-card.is-selected,
.evps-option-card:has(.evps-option-card__input:checked) {
border-color: var(--evps-primary);
box-shadow: 0 0 0 2px var(--evps-primary-ring);
background: var(--evps-primary-soft);
}
.evps-option-card__input {
position: absolute;
width: 1px; height: 1px;
padding: 0; margin: -1px;
overflow: hidden;
clip: rect(0,0,0,0);
white-space: nowrap;
border: 0;
}
.evps-option-card__input:focus-visible ~ .evps-option-card__body { outline: 2px solid var(--evps-primary-ring); outline-offset: 2px; }
.evps-option-card__icon {
flex-shrink: 0;
width: 32px; height: 32px;
display: grid; place-items: center;
border-radius: var(--evps-radius-sm);
background: var(--evps-surface-3);
color: var(--evps-text-muted);
}
.evps-option-card.is-selected .evps-option-card__icon,
.evps-option-card:has(.evps-option-card__input:checked) .evps-option-card__icon {
background: var(--evps-primary-soft);
color: var(--evps-primary);
}
.evps-option-card__body { flex: 1; min-width: 0; }
.evps-option-card__head { display: flex; align-items: center; gap: var(--evps-space-2); flex-wrap: wrap; }
.evps-option-card__label { font-size: var(--evps-fs-base); font-weight: var(--evps-fw-medium); color: var(--evps-text); }
.evps-option-card__sub { font-size: var(--evps-fs-sm); color: var(--evps-text-muted); margin-top: 2px; }
.evps-option-card__desc { font-size: var(--evps-fs-sm); color: var(--evps-text-muted); margin-top: var(--evps-space-1); line-height: var(--evps-lh-relaxed); }
.evps-option-card__price {
flex-shrink: 0;
font-size: var(--evps-fs-sm);
font-weight: var(--evps-fw-medium);
color: var(--evps-text);
white-space: nowrap;
margin-left: auto;
align-self: center;
}
/* ============================================================
EVPS-PAYMENT-METHOD (gateway picker, extends radio-card)
============================================================ */
.evps-payment-method__badges {
display: flex;
gap: var(--evps-space-1);
flex-shrink: 0;
}
.evps-payment-method__badge {
display: inline-block;
padding: 2px 6px;
border-radius: var(--evps-radius-xs);
background: var(--evps-surface-3);
border: 1px solid var(--evps-border);
font-size: var(--evps-fs-xs);
font-weight: var(--evps-fw-bold);
letter-spacing: var(--evps-tracking-wide);
color: var(--evps-text-muted);
text-transform: uppercase;
}
.evps-payment-method__icon {
flex-shrink: 0;
width: 32px; height: 32px;
display: grid; place-items: center;
border-radius: var(--evps-radius-sm);
background: var(--evps-surface-3);
color: var(--evps-text-muted);
}
/* ============================================================
EVPS-TRUST-STRIP (extend with __item)
============================================================ */
.evps-trust-strip__item {
display: flex;
align-items: center;
gap: var(--evps-space-2);
font-size: var(--evps-fs-xs);
color: var(--evps-text-muted);
white-space: nowrap;
}
.evps-trust-strip__item i,
.evps-trust-strip__item svg { color: var(--evps-success); flex-shrink: 0; }
/* ============================================================
EVPS-SUMMARY (sticky wrapper for order_summary.tpl)
============================================================ */
.evps-summary { width: 100%; }
@media (min-width: 992px) {
.evps-summary--sticky {
position: sticky;
top: var(--evps-space-4);
max-height: calc(100vh - var(--evps-space-8));
overflow-y: auto;
overscroll-behavior: contain;
z-index: var(--evps-z-sticky);
scrollbar-width: thin;
scrollbar-color: var(--evps-border) transparent;
}
}
@media print {
.evps-summary--sticky { position: static; max-height: none; overflow: visible; }
}
/* ============================================================
EVPS-ORDER-SUMMARY (line-item breakdown inside the card)
============================================================ */
.evps-order-summary__intro {
padding-bottom: var(--evps-space-4);
margin-bottom: var(--evps-space-4);
border-bottom: 1px solid var(--evps-border-subtle);
}
.evps-order-summary__lines {
display: flex;
flex-direction: column;
gap: var(--evps-space-2);
margin-bottom: var(--evps-space-3);
}
.evps-order-summary__row {
display: flex;
align-items: baseline;
justify-content: space-between;
gap: var(--evps-space-3);
font-size: var(--evps-fs-sm);
color: var(--evps-text);
}
.evps-order-summary__row.is-muted { color: var(--evps-text-muted); }
.evps-order-summary__row.is-bold { font-weight: var(--evps-fw-semibold); }
.evps-order-summary__label { flex: 1; min-width: 0; }
.evps-order-summary__amt { flex-shrink: 0; }
.evps-order-summary__rule { height: 1px; background: var(--evps-border-subtle); margin: var(--evps-space-3) 0; }
.evps-order-summary__total {
display: flex;
align-items: baseline;
justify-content: space-between;
gap: var(--evps-space-3);
margin-bottom: var(--evps-space-4);
}
.evps-order-summary__total-label { font-size: var(--evps-fs-base); font-weight: var(--evps-fw-semibold); }
.evps-order-summary__total-amt { font-size: var(--evps-fs-xl); font-weight: var(--evps-fw-bold); letter-spacing: var(--evps-tracking-tight); }
.evps-order-summary__promo { margin-top: var(--evps-space-4); }
.evps-order-summary__assurances {
display: flex;
align-items: center;
justify-content: center;
gap: var(--evps-space-4);
margin-top: var(--evps-space-4);
font-size: var(--evps-fs-xs);
color: var(--evps-text-dim);
flex-wrap: wrap;
}
.evps-order-summary__assurances span { display: flex; align-items: center; gap: 4px; }
.evps-order-summary__footer {
margin-top: var(--evps-space-4);
padding-top: var(--evps-space-4);
border-top: 1px solid var(--evps-border-subtle);
}
/* ============================================================
EVPS-STEPS (stepper — already has base rules; add line state)
============================================================ */
/* Connector line — is a sibling between step items */
.evps-step__line {
flex: 1;
height: 1px;
background: var(--evps-border);
margin: 0 var(--evps-space-2);
transition: background var(--evps-dur-base);
}
@media (prefers-reduced-motion: reduce) {
.evps-step__line { transition: none; }
}
/* Done step: colour the following connector */
.evps-step--done ~ .evps-step__line { background: var(--evps-success); }
/* ============================================================
EVPS-CART-ROW (product/domain line item in cart)
============================================================ */
.evps-cart-row {
display: flex;
align-items: center;
gap: var(--evps-space-4);
padding: var(--evps-space-4) 0;
border-bottom: 1px solid var(--evps-border-subtle);
}
.evps-cart-row:last-child { border-bottom: none; }
.evps-cart-row__main { flex: 1; min-width: 0; }
.evps-cart-row__title { font-size: var(--evps-fs-base); font-weight: var(--evps-fw-medium); color: var(--evps-text); }
.evps-cart-row__sub { font-size: var(--evps-fs-sm); color: var(--evps-text-muted); margin-top: 2px; }
.evps-cart-row__meta { font-size: var(--evps-fs-xs); color: var(--evps-text-dim); margin-top: 2px; }
.evps-cart-row__price {
flex-shrink: 0;
font-size: var(--evps-fs-md);
font-weight: var(--evps-fw-semibold);
color: var(--evps-text);
text-align: right;
}
.evps-cart-row__price-aux { font-size: var(--evps-fs-xs); color: var(--evps-text-muted); font-weight: var(--evps-fw-regular); }
.evps-cart-row__actions {
flex-shrink: 0;
display: flex;
align-items: center;
gap: var(--evps-space-2);
}
/* ============================================================
EVPS-DOMAIN-SEARCH / EVPS-DOMAIN-RESULT / EVPS-DOMAIN-SUGGESTION
============================================================ */
/* Domain search form wrapper */
.evps-domain-search { margin-bottom: var(--evps-space-7); }
.evps-domain-search__input-group { width: 100%; }
@media (min-width: 768px) {
.evps-domain-search__input-group { max-width: 720px; margin-inline: auto; }
}
/* Single domain result row */
.evps-domain-result {
display: flex;
align-items: center;
gap: var(--evps-space-4);
padding: var(--evps-space-3) var(--evps-space-4);
border-radius: var(--evps-radius-md);
background: var(--evps-surface-inset);
border: 1px solid var(--evps-border-subtle);
transition: border-color var(--evps-dur-fast);
flex-wrap: wrap;
}
.evps-domain-result.is-available { border-color: var(--evps-success); background: var(--evps-success-soft); }
.evps-domain-result__name { flex: 1; min-width: 0; font-size: var(--evps-fs-md); font-weight: var(--evps-fw-medium); color: var(--evps-text); }
.evps-domain-result__status { flex-shrink: 0; }
.evps-domain-result__price { flex-shrink: 0; font-size: var(--evps-fs-sm); color: var(--evps-text-muted); }
.evps-domain-result__action { flex-shrink: 0; }
/* Suggestion card (grid of alternates) */
.evps-domain-suggestion {
display: flex;
flex-direction: column;
gap: var(--evps-space-2);
padding: var(--evps-space-4);
background: var(--evps-surface);
border: 1px solid var(--evps-border);
border-radius: var(--evps-radius-md);
align-items: flex-start;
}
.evps-domain-suggestion:hover { border-color: var(--evps-border-strong); }
/* Generic domain row (reusable in addons/transfers) */
.evps-domain-row {
display: flex;
align-items: center;
gap: var(--evps-space-3);
padding: var(--evps-space-3) 0;
border-bottom: 1px solid var(--evps-border-subtle);
font-size: var(--evps-fs-sm);
}
.evps-domain-row:last-child { border-bottom: none; }
/* ============================================================
EVPS-CONFIRM-HERO (success / pending / danger states)
============================================================ */
.evps-confirm-hero {
display: flex;
flex-direction: column;
align-items: center;
text-align: center;
gap: var(--evps-space-3);
padding: var(--evps-space-10) var(--evps-space-5);
}
.evps-confirm-hero__icon {
width: 80px; height: 80px;
border-radius: 50%;
display: grid; place-items: center;
background: var(--evps-success-soft);
color: var(--evps-success);
font-size: 0;
}
.evps-confirm-hero--pending .evps-confirm-hero__icon,
.evps-confirm-hero__icon--warning {
background: var(--evps-warning-soft);
color: var(--evps-warning);
}
.evps-confirm-hero--danger .evps-confirm-hero__icon,
.evps-confirm-hero__icon--danger {
background: var(--evps-danger-soft);
color: var(--evps-danger);
}
.evps-confirm-hero__title {
font-size: var(--evps-fs-2xl);
font-weight: var(--evps-fw-bold);
letter-spacing: var(--evps-tracking-tight);
margin: 0;
}
.evps-confirm-hero__subtitle {
font-size: var(--evps-fs-md);
color: var(--evps-text-muted);
max-width: 560px;
line-height: var(--evps-lh-relaxed);
margin: 0;
}
.evps-confirm-hero__amount {
font-size: var(--evps-fs-3xl);
font-weight: var(--evps-fw-bold);
letter-spacing: var(--evps-tracking-tight);
margin-top: var(--evps-space-2);
}
/* ============================================================
EVPS-TIMELINE (provisioning step list on complete.tpl)
============================================================ */
.evps-timeline {
list-style: none;
margin: 0; padding: 0;
display: flex;
flex-direction: column;
gap: 0;
}
.evps-timeline__item {
display: flex;
align-items: flex-start;
gap: var(--evps-space-4);
padding: var(--evps-space-4) 0;
position: relative;
}
/* vertical connector line */
.evps-timeline__item:not(:last-child)::before {
content: '';
position: absolute;
left: 15px; top: 44px;
width: 2px;
bottom: 0;
background: var(--evps-border);
}
.evps-timeline__item--done::before { background: var(--evps-success); }
.evps-timeline__item--current::before { background: var(--evps-primary-soft); }
.evps-timeline__dot {
flex-shrink: 0;
width: 32px; height: 32px;
border-radius: 50%;
display: grid; place-items: center;
background: var(--evps-surface-3);
border: 2px solid var(--evps-border);
color: var(--evps-text-muted);
z-index: 1;
}
.evps-timeline__item--done .evps-timeline__dot { background: var(--evps-success); border-color: transparent; color: var(--evps-text-inverse); }
.evps-timeline__item--current .evps-timeline__dot {
background: var(--evps-primary);
border-color: transparent;
color: var(--evps-text-inverse);
box-shadow: 0 0 0 4px var(--evps-primary-ring);
}
.evps-timeline__body { flex: 1; min-width: 0; padding-top: 5px; }
.evps-timeline__title { font-size: var(--evps-fs-base); font-weight: var(--evps-fw-medium); color: var(--evps-text); }
.evps-timeline__meta { font-size: var(--evps-fs-sm); color: var(--evps-text-muted); margin-top: 2px; line-height: var(--evps-lh-relaxed); }
/* ============================================================
EVPS-BULLET-LIST (custom-dot branded list)
============================================================ */
.evps-bullet-list {
list-style: none;
margin: 0; padding: 0;
display: flex;
flex-direction: column;
gap: var(--evps-space-3);
}
.evps-bullet-list li {
display: flex;
align-items: flex-start;
gap: var(--evps-space-3);
font-size: var(--evps-fs-base);
color: var(--evps-text);
line-height: var(--evps-lh-relaxed);
}
.evps-bullet-list li::before {
content: '';
flex-shrink: 0;
width: 6px; height: 6px;
border-radius: 50%;
background: var(--evps-primary);
margin-top: 7px;
}
/* ============================================================
EVPS-ACCOUNT-SUMMARY (signed-in user row on checkout)
============================================================ */
.evps-account-summary {
display: flex;
align-items: center;
gap: var(--evps-space-4);
padding: var(--evps-space-4) 0;
flex-wrap: wrap;
}
.evps-account-summary__body { flex: 1; min-width: 0; }
.evps-account-summary__name {
font-size: var(--evps-fs-base);
font-weight: var(--evps-fw-medium);
color: var(--evps-text);
}
.evps-account-summary__email { font-size: var(--evps-fs-sm); color: var(--evps-text-muted); margin-top: 1px; }
/* ============================================================
EVPS-CHECKOUT-AUTH (guest sign-in nudge)
============================================================ */
.evps-checkout-auth__intro {
font-size: var(--evps-fs-sm);
color: var(--evps-text-muted);
margin-bottom: var(--evps-space-4);
line-height: var(--evps-lh-relaxed);
}
.evps-checkout-auth__intro a {
color: var(--evps-primary);
text-decoration: underline;
text-underline-offset: 3px;
}
/* ============================================================
EVPS-CHECKOUT-SECURITY (SSL / silent-challenge row)
============================================================ */
.evps-checkout-security {
display: flex;
align-items: center;
gap: var(--evps-space-4);
padding: var(--evps-space-3) 0;
}
.evps-checkout-security__icon {
flex-shrink: 0;
width: 36px; height: 36px;
border-radius: var(--evps-radius-sm);
background: var(--evps-success-soft);
color: var(--evps-success);
display: grid; place-items: center;
}
.evps-checkout-security__body { flex: 1; min-width: 0; }
.evps-checkout-security__title { font-size: var(--evps-fs-base); font-weight: var(--evps-fw-medium); color: var(--evps-text); }
.evps-checkout-security__desc { font-size: var(--evps-fs-sm); color: var(--evps-text-muted); margin-top: 1px; }
/* ============================================================
EVPS-CHECKOUT-SUMMARY-PLAN (plan name+meta in summary intro)
============================================================ */
.evps-checkout-summary-plan { padding: var(--evps-space-2) 0; }
.evps-checkout-summary-plan__name { font-size: var(--evps-fs-base); font-weight: var(--evps-fw-semibold); color: var(--evps-text); margin-bottom: 2px; }
.evps-checkout-summary-plan__meta { font-size: var(--evps-fs-sm); color: var(--evps-text-muted); line-height: var(--evps-lh-relaxed); }
/* ============================================================
EVPS-CHECKOUT-NEXT ("What happens next" footer panel)
============================================================ */
.evps-checkout-next {
background: var(--evps-surface-inset);
border-radius: var(--evps-radius-md);
padding: var(--evps-space-4);
font-size: var(--evps-fs-sm);
}
.evps-checkout-next__title {
display: flex;
align-items: center;
gap: var(--evps-space-2);
font-weight: var(--evps-fw-semibold);
color: var(--evps-text);
margin-bottom: var(--evps-space-3);
}
.evps-checkout-next__steps {
margin: 0;
padding-left: var(--evps-space-5);
display: flex;
flex-direction: column;
gap: var(--evps-space-2);
color: var(--evps-text-muted);
line-height: var(--evps-lh-relaxed);
}
/* ============================================================
EVPS-SAVED-METHOD (saved-card row in checkout)
============================================================ */
.evps-saved-method {
display: flex;
align-items: center;
gap: var(--evps-space-3);
padding: var(--evps-space-3) var(--evps-space-4);
background: var(--evps-surface);
border: 1px solid var(--evps-border);
border-radius: var(--evps-radius-md);
cursor: pointer;
transition: border-color var(--evps-dur-fast) var(--evps-ease-out),
background var(--evps-dur-fast) var(--evps-ease-out);
}
@media (prefers-reduced-motion: reduce) {
.evps-saved-method { transition: none; }
}
.evps-saved-method:hover { border-color: var(--evps-border-strong); background: var(--evps-surface-2); }
.evps-saved-method:has(input[type="radio"]:checked) {
border-color: var(--evps-primary);
box-shadow: 0 0 0 2px var(--evps-primary-ring);
background: var(--evps-primary-soft);
}
.evps-saved-method input[type="radio"] {
flex-shrink: 0;
accent-color: var(--evps-primary);
width: 16px; height: 16px;
}
.evps-saved-method__icon {
flex-shrink: 0;
width: 32px; height: 32px;
border-radius: var(--evps-radius-sm);
background: var(--evps-surface-3);
display: grid; place-items: center;
color: var(--evps-text-muted);
}
.evps-saved-method__body { flex: 1; min-width: 0; }
.evps-saved-method__name { font-size: var(--evps-fs-base); font-weight: var(--evps-fw-medium); color: var(--evps-text); }
.evps-saved-method__exp { font-size: var(--evps-fs-xs); color: var(--evps-text-muted); margin-top: 1px; }
/* ============================================================
EVPS-TOS (Terms of Service acceptance row)
============================================================ */
.evps-tos {
display: flex;
align-items: flex-start;
gap: var(--evps-space-3);
cursor: pointer;
}
.evps-tos input[type="checkbox"] {
flex-shrink: 0;
margin-top: 2px;
accent-color: var(--evps-primary);
width: 16px; height: 16px;
}
.evps-tos input[type="checkbox"]:focus-visible { outline: 2px solid var(--evps-primary-ring); outline-offset: 2px; }
.evps-tos__text {
font-size: var(--evps-fs-sm);
color: var(--evps-text-muted);
line-height: var(--evps-lh-relaxed);
}
.evps-tos__text a {
color: var(--evps-primary);
text-decoration: underline;
text-underline-offset: 3px;
}
.evps-tos__text a:focus-visible { outline: 2px solid var(--evps-primary-ring); outline-offset: 2px; }
/* ============================================================
EVPS-SECURITY-POLICIES (embedded T&C block)
============================================================ */
.evps-security-policies__body {
font-size: var(--evps-fs-sm);
color: var(--evps-text-muted);
line-height: var(--evps-lh-relaxed);
max-height: 240px;
overflow-y: auto;
border: 1px solid var(--evps-border-subtle);
border-radius: var(--evps-radius-sm);
padding: var(--evps-space-4);
background: var(--evps-surface-inset);
scrollbar-width: thin;
scrollbar-color: var(--evps-border) transparent;
}
.evps-security-policies__list {
list-style: none;
margin: 0; padding: 0;
display: flex;
flex-direction: column;
gap: var(--evps-space-3);
}
.evps-security-policies__list li {
display: flex;
align-items: flex-start;
gap: var(--evps-space-3);
font-size: var(--evps-fs-sm);
color: var(--evps-text-muted);
line-height: var(--evps-lh-relaxed);
}
.evps-security-policies__list li svg,
.evps-security-policies__list li i { color: var(--evps-primary); flex-shrink: 0; margin-top: 2px; }
.evps-security-policies__assurances {
display: flex;
align-items: center;
flex-wrap: wrap;
gap: var(--evps-space-4);
margin-top: var(--evps-space-5);
font-size: var(--evps-fs-xs);
color: var(--evps-text-muted);
}
.evps-security-policies__assurances span { display: flex; align-items: center; gap: var(--evps-space-2); }
.evps-security-policies__assurances svg,
.evps-security-policies__assurances i { color: var(--evps-success); }
/* ============================================================
EVPS-INPUT-PREFIX (inline prefix/suffix for input groups)
============================================================ */
.evps-input-prefix {
display: inline-flex;
align-items: center;
padding: 0 var(--evps-space-3);
background: var(--evps-surface-3);
border: 1px solid var(--evps-border);
border-right: none;
border-radius: var(--evps-radius-md) 0 0 var(--evps-radius-md);
font-size: var(--evps-fs-sm);
color: var(--evps-text-dim);
white-space: nowrap;
height: var(--evps-control-h-lg);
flex-shrink: 0;
}
/* Inside an evps-input-group, round left edge of subsequent input */
.evps-input-group > .evps-input-prefix + .evps-input { border-radius: 0; }
/* ============================================================
EVPS-TOGGLE (small inline toggle / show-advanced row)
============================================================ */
.evps-toggle {
display: inline-flex;
align-items: center;
gap: var(--evps-space-2);
cursor: pointer;
user-select: none;
font-size: var(--evps-fs-sm);
color: var(--evps-text-muted);
padding: var(--evps-space-1) 0;
}
.evps-toggle input[type="checkbox"] {
accent-color: var(--evps-primary);
width: 15px; height: 15px;
flex-shrink: 0;
}
.evps-toggle input[type="checkbox"]:focus-visible { outline: 2px solid var(--evps-primary-ring); outline-offset: 2px; }
.evps-toggle:hover { color: var(--evps-text); }
/* ============================================================
EVPS-TEXT-DIM (secondary / muted utility)
============================================================ */
.evps-text-dim { color: var(--evps-text-dim) !important; }
.evps-text-muted { color: var(--evps-text-muted) !important; }
/* ============================================================
EVPS-TABLE-WRAP (horizontal scroll container)
============================================================ */
.evps-table-wrap {
width: 100%;
overflow-x: auto;
-webkit-overflow-scrolling: touch;
border-radius: var(--evps-radius-md);
border: 1px solid var(--evps-border);
scrollbar-width: thin;
scrollbar-color: var(--evps-border) transparent;
}
.evps-table-wrap table {
width: 100%;
min-width: 540px;
border-collapse: collapse;
}
/* ============================================================
RESPONSIVE ADJUSTMENTS
============================================================ */
@media (max-width: 767px) {
/* Stepper: hide labels on tiny viewports */
.evps-step__label { display: none; }
.evps-step { flex: none; }
/* Cart rows: stack meta under title on very narrow screens */
.evps-cart-row { flex-wrap: wrap; }
.evps-cart-row__price { width: 100%; text-align: left; }
/* Domain results: stack vertically */
.evps-domain-result { flex-direction: column; align-items: flex-start; gap: var(--evps-space-3); }
.evps-domain-result__action { width: 100%; }
/* Confirm hero: reduce padding */
.evps-confirm-hero { padding: var(--evps-space-7) var(--evps-space-4); }
.evps-confirm-hero__title { font-size: var(--evps-fs-xl); }
/* Product grid: single column */
.evps-product-grid { grid-template-columns: 1fr; }
}
@media (min-width: 768px) {
/* Cart rows: tighter on tablet+ */
.evps-cart-row { flex-wrap: nowrap; }
/* Domain result: inline row */
.evps-domain-result { flex-direction: row; align-items: center; }
/* Show step labels */
.evps-step__label { display: inline; }
}
/* ============================================================
PRINT OVERRIDES
============================================================ */
@media print {
.evps-orderform__actions,
.evps-confirm-hero .evps-btn,
.evps-summary--sticky { display: none !important; }
.evps-cart-row { page-break-inside: avoid; }
.evps-timeline__item { page-break-inside: avoid; }
}
/* ==========================================================================
VISUAL POLISH + RESPONSIVE PASS — v1.1.0
Appended rules. All colors via var(--evps-*). All transitions guarded by
prefers-reduced-motion. Mobile-first (min-width breakpoints).
========================================================================== */
/* ============================================================
SIDEBAR COLLAPSE — icon-only rail at 64px
Triggered by body.evps-sidebar-collapsed (JS toggles this).
The existing [data-sidebar="collapsed"] approach on .evps-app
remains for server-rendered state; this body-class approach
allows pure-JS toggling without touching data attributes.
============================================================ */
body.evps-sidebar-collapsed .evps-app {
grid-template-columns: var(--evps-sidebar-w-sm) 1fr;
}
body.evps-sidebar-collapsed .evps-sidebar {
width: var(--evps-sidebar-w-sm);
overflow: visible; /* allow tooltip overflow */
}
body.evps-sidebar-collapsed .evps-sidebar__brand-text,
body.evps-sidebar-collapsed .evps-sidebar__group-label,
body.evps-sidebar-collapsed .evps-nav-item__label,
body.evps-sidebar-collapsed .evps-nav-item__badge,
body.evps-sidebar-collapsed .evps-sidebar__user-info {
display: none;
}
body.evps-sidebar-collapsed .evps-nav-item {
justify-content: center;
padding: 10px;
}
body.evps-sidebar-collapsed .evps-sidebar__footer {
justify-content: center;
}
/* Chevron flips when collapsed */
body.evps-sidebar-collapsed [data-evps-sidebar-toggle] i {
transform: rotate(180deg);
}
[data-evps-sidebar-toggle] i {
transition: transform var(--evps-dur-base) var(--evps-ease-out);
}
@media (prefers-reduced-motion: reduce) {
[data-evps-sidebar-toggle] i { transition: none; }
}
/* Tooltip on hover in collapsed state */
body.evps-sidebar-collapsed .evps-nav-item {
position: relative;
}
body.evps-sidebar-collapsed .evps-nav-item::after {
content: attr(data-label);
position: absolute;
left: calc(100% + 10px);
top: 50%;
transform: translateY(-50%);
background: var(--evps-surface-2);
border: 1px solid var(--evps-border);
border-radius: var(--evps-radius-md);
padding: 5px 10px;
font-size: 12px;
font-weight: var(--evps-fw-medium);
color: var(--evps-text);
white-space: nowrap;
box-shadow: var(--evps-shadow-md);
opacity: 0;
pointer-events: none;
z-index: var(--evps-z-tooltip);
transition: opacity var(--evps-dur-fast) var(--evps-ease-out);
}
body.evps-sidebar-collapsed .evps-nav-item:hover::after {
opacity: 1;
}
@media (prefers-reduced-motion: reduce) {
body.evps-sidebar-collapsed .evps-nav-item::after { transition: none; }
}
/* ============================================================
MOBILE SIDEBAR — off-canvas slide + scrim overlay
<768px: sidebar slides off-screen left; hamburger reveals it.
body.evps-sidebar-open shows it; scrim click closes.
============================================================ */
@media (max-width: 767px) {
.evps-app {
grid-template-columns: 1fr !important;
}
.evps-sidebar {
position: fixed;
top: 0; left: 0; bottom: 0;
width: var(--evps-sidebar-w) !important;
z-index: var(--evps-z-drawer);
transform: translateX(-100%);
transition: transform var(--evps-dur-slow) var(--evps-ease-out), visibility var(--evps-dur-slow);
box-shadow: none;
/* Off-canvas AND hidden so the nav links inside are not keyboard-tabbable
or screen-reader-reachable while the drawer is closed (A11Y-006). */
visibility: hidden;
}
body.evps-sidebar-open .evps-sidebar {
transform: translateX(0);
box-shadow: var(--evps-shadow-xl);
visibility: visible;
}
@media (prefers-reduced-motion: reduce) {
.evps-sidebar { transition: none; }
}
/* Scrim overlay */
.evps-sidebar-scrim {
display: block;
position: fixed;
inset: 0;
background: rgba(0,0,0,0.55);
z-index: calc(var(--evps-z-drawer) - 1);
opacity: 0;
pointer-events: none;
transition: opacity var(--evps-dur-base) var(--evps-ease-out);
}
body.evps-sidebar-open .evps-sidebar-scrim {
opacity: 1;
pointer-events: auto;
}
@media (prefers-reduced-motion: reduce) {
.evps-sidebar-scrim { transition: none; }
}
/* Topbar: show hamburger, hide desktop sidebar toggle in footer */
.evps-topbar__hamburger {
display: grid;
place-items: center;
width: 34px; height: 34px;
border-radius: var(--evps-radius-md);
border: 1px solid transparent;
background: transparent;
color: var(--evps-text-muted);
cursor: pointer;
flex-shrink: 0;
transition: background var(--evps-dur-fast);
}
.evps-topbar__hamburger:hover {
background: var(--evps-surface-2);
color: var(--evps-text);
border-color: var(--evps-border);
}
/* Hide desktop collapse toggle inside sidebar footer on mobile */
.evps-sidebar__footer [data-evps-sidebar-toggle] {
display: none;
}
/* Always show labels in mobile sidebar (not collapsed) */
body.evps-sidebar-open .evps-nav-item__label,
body.evps-sidebar-open .evps-sidebar__brand-text,
body.evps-sidebar-open .evps-sidebar__group-label {
display: revert;
}
}
/* Hide hamburger on desktop */
@media (min-width: 768px) {
.evps-topbar__hamburger { display: none; }
.evps-sidebar-scrim { display: none !important; }
}
/* Logo in topbar: hide on desktop where sidebar logo covers it */
@media (min-width: 768px) {
.evps-topbar__logo { display: none; }
}
/* ============================================================
DENSITY COMPACT — audit + gap fills
Tokens already handle --evps-row-py / --evps-card-pad.
These rules catch components that read padding directly.
============================================================ */
[data-density="compact"] .evps-page {
padding: var(--evps-space-5) var(--evps-space-5);
}
[data-density="compact"] .evps-tabs__item {
padding: 7px var(--evps-space-3);
}
[data-density="compact"] .evps-table thead th {
padding: var(--evps-space-2) var(--evps-space-3);
}
[data-density="compact"] .evps-table tbody td {
padding: var(--evps-row-py) var(--evps-space-3);
}
[data-density="compact"] .evps-stat {
padding: var(--evps-card-pad);
}
[data-density="compact"] .evps-service-card {
padding: var(--evps-card-pad);
}
[data-density="compact"] .evps-field {
margin-bottom: var(--evps-space-3);
}
[data-density="compact"] .evps-cart-row {
padding: var(--evps-space-3) 0;
}
[data-density="compact"] .evps-timeline__item {
padding: var(--evps-space-3) 0;
}
/* ============================================================
THEME TOGGLE — sun/moon icon swap
data-current-theme attr is set by applyTheme() in JS.
We swap visibility; aria-label handles screen-reader context.
============================================================ */
/* Dark mode: show moon */
[data-evps-theme-toggle] .evps-theme-icon-moon { display: inline; }
[data-evps-theme-toggle] .evps-theme-icon-sun { display: none; }
[data-evps-theme-toggle] .evps-theme-icon-auto { display: none; }
/* Light mode */
[data-evps-theme-toggle][data-current-theme="light"] .evps-theme-icon-moon { display: none; }
[data-evps-theme-toggle][data-current-theme="light"] .evps-theme-icon-sun { display: inline; }
[data-evps-theme-toggle][data-current-theme="light"] .evps-theme-icon-auto { display: none; }
/* Auto mode */
[data-evps-theme-toggle][data-current-theme="auto"] .evps-theme-icon-moon { display: none; }
[data-evps-theme-toggle][data-current-theme="auto"] .evps-theme-icon-sun { display: none; }
[data-evps-theme-toggle][data-current-theme="auto"] .evps-theme-icon-auto { display: inline; }
/* ── Segmented 3-way switcher (Auto / Light / Dark) — the discoverable
header control. A pill of three icon buttons; the active one is filled. */
.evps-theme-toggle {
display: inline-flex;
align-items: center;
gap: 2px;
padding: 2px;
border-radius: var(--evps-radius-pill, 999px);
background: var(--evps-surface-2, #181d28);
border: 1px solid var(--evps-border, #232a39);
}
.evps-theme-toggle .evps-iconbtn {
width: 28px;
height: 28px;
border-radius: var(--evps-radius-pill, 999px);
border: 0;
background: transparent;
color: var(--evps-text-muted, #9aa3b8);
display: inline-flex;
align-items: center;
justify-content: center;
cursor: pointer;
transition: background var(--evps-dur-fast, .15s), color var(--evps-dur-fast, .15s);
}
.evps-theme-toggle .evps-iconbtn:hover { color: var(--evps-text, #e8ecf5); }
.evps-theme-toggle .evps-iconbtn.is-active {
background: var(--evps-primary, #3b6cf6);
color: #fff;
}
.evps-theme-toggle .evps-iconbtn:focus-visible {
outline: none;
box-shadow: 0 0 0 3px var(--evps-primary-ring, rgba(59,108,246,.4));
}
/* ============================================================
FOCUS RINGS — :focus-visible audit
Every interactive element gets a ring using the primary ring
token. We use outline so it respects border-radius cleanly.
============================================================ */
a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
[tabindex]:not([tabindex="-1"]):focus-visible,
summary:focus-visible {
outline: 2px solid var(--evps-primary);
outline-offset: 2px;
box-shadow: 0 0 0 4px var(--evps-primary-ring);
}
/* Suppress for elements that already manage their own ring */
.evps-btn:focus-visible,
.evps-input:focus-visible,
.evps-select:focus-visible,
.evps-textarea:focus-visible,
.evps-topbar__search input:focus-visible {
outline: none; /* box-shadow ring already applied by component rules */
}
/* Account menu details/summary */
.evps-account-menu > summary:focus-visible {
outline: 2px solid var(--evps-primary);
outline-offset: 3px;
box-shadow: 0 0 0 4px var(--evps-primary-ring);
}
/* Nav items */
.evps-nav-item:focus-visible {
outline: 2px solid var(--evps-primary);
outline-offset: -2px;
}
/* Icon buttons */
.evps-iconbtn:focus-visible {
outline: 2px solid var(--evps-primary);
outline-offset: 2px;
box-shadow: 0 0 0 4px var(--evps-primary-ring);
}
/* ============================================================
CARD + STAT HOVER — scale + shadow (pointer devices only)
============================================================ */
@media (hover: hover) {
.evps-card {
transition: box-shadow var(--evps-dur-base) var(--evps-ease-out),
transform var(--evps-dur-base) var(--evps-ease-out),
border-color var(--evps-dur-base);
}
.evps-card:hover {
box-shadow: var(--evps-shadow-md);
transform: translateY(-1px);
border-color: var(--evps-border-strong);
}
.evps-stat {
transition: box-shadow var(--evps-dur-base) var(--evps-ease-out),
transform var(--evps-dur-base) var(--evps-ease-out);
}
.evps-stat:hover {
box-shadow: var(--evps-shadow-md);
transform: translateY(-1px);
}
@media (prefers-reduced-motion: reduce) {
.evps-card,
.evps-stat { transition: box-shadow var(--evps-dur-base); }
.evps-card:hover,
.evps-stat:hover { transform: none; }
}
}
/* ============================================================
SKELETON SHIMMER — respect prefers-reduced-motion
The global token already zeroes durations, but the
@keyframes animation still plays. Explicitly pause it.
============================================================ */
@media (prefers-reduced-motion: reduce) {
.evps-skel,
.evps-skeleton-line {
animation: none;
background: var(--evps-surface-3);
}
}
/* .evps-skeleton-line alias (referenced in task brief) */
.evps-skeleton-line {
display: block;
height: 14px;
border-radius: var(--evps-radius-sm);
background: linear-gradient(90deg, var(--evps-surface-2) 25%, var(--evps-surface-3) 50%, var(--evps-surface-2) 75%);
background-size: 200% 100%;
animation: evps-skel-shimmer 1.4s ease-in-out infinite;
}
/* ============================================================
TOAST STACK — slide-in animation, max 4 visible, dismiss
#evps-toast-root is the mount point injected by JS.
============================================================ */
#evps-toast-root {
position: fixed;
bottom: var(--evps-space-4);
right: var(--evps-space-4);
z-index: var(--evps-z-toast);
display: flex;
flex-direction: column-reverse;
gap: var(--evps-space-2);
pointer-events: none;
max-width: 380px;
width: calc(100vw - var(--evps-space-8));
}
#evps-toast-root .evps-toast {
pointer-events: auto;
transform: translateX(0);
animation: evps-toast-slide-in var(--evps-dur-base) var(--evps-ease-spring) both;
}
/* Cap to 4 visible — 5th and beyond hidden via :nth-child */
#evps-toast-root .evps-toast:nth-child(n+5) {
display: none;
}
@keyframes evps-toast-slide-in {
from {
opacity: 0;
transform: translateX(calc(100% + var(--evps-space-4)));
}
to {
opacity: 1;
transform: translateX(0);
}
}
@media (prefers-reduced-motion: reduce) {
#evps-toast-root .evps-toast {
animation: none;
}
}
/* Dismiss state */
.evps-toast.is-dismissing {
animation: evps-toast-slide-out var(--evps-dur-base) var(--evps-ease-in-out) forwards;
}
@keyframes evps-toast-slide-out {
from { opacity: 1; transform: translateX(0); max-height: 80px; margin-bottom: 0; }
to { opacity: 0; transform: translateX(calc(100% + var(--evps-space-4))); max-height: 0; margin-bottom: calc(-1 * var(--evps-space-2)); }
}
@media (prefers-reduced-motion: reduce) {
.evps-toast.is-dismissing { animation: none; opacity: 0; }
}
/* Close button inside toast */
.evps-toast__close {
margin-left: auto;
flex-shrink: 0;
background: transparent;
border: none;
color: var(--evps-text-dim);
cursor: pointer;
padding: 2px;
border-radius: var(--evps-radius-xs);
line-height: 1;
}
.evps-toast__close:hover { color: var(--evps-text); }
.evps-toast__close:focus-visible {
outline: 2px solid var(--evps-primary);
outline-offset: 2px;
}
/* ============================================================
PRINT STYLES — invoice / full-page print pass
============================================================ */
@media print {
/* Hide chrome */
.evps-sidebar,
.evps-topbar,
.evps-sidebar-scrim,
#evps-toast-root,
.evps-ai-bubble,
.evps-ai-drawer,
[data-evps-cmdk-trigger],
.evps-topbar__actions,
.evps-topbar__hamburger {
display: none !important;
}
/* Expand main content to full width */
.evps-app {
display: block !important;
}
.evps-main {
display: block !important;
width: 100% !important;
}
.evps-content,
.evps-page {
padding: 0 !important;
max-width: 100% !important;
}
/* Reset sticky/fixed positioning */
.evps-topbar { position: static !important; }
/* Fonts and color */
body {
font-size: 12pt;
color: #000;
background: #fff;
}
.evps-card {
border: 1px solid #ccc !important;
box-shadow: none !important;
break-inside: avoid;
}
a { color: #000 !important; text-decoration: none !important; }
/* Tables: show borders */
.evps-table thead th,
.evps-table tbody td {
border: 1px solid #ccc !important;
color: #000 !important;
}
}
/* ============================================================
ACCOUNT MENU — details/summary polish
============================================================ */
.evps-account-menu {
position: relative;
}
.evps-account-menu > summary {
list-style: none;
cursor: pointer;
}
.evps-account-menu > summary::-webkit-details-marker { display: none; }
.evps-account-menu__panel {
position: absolute;
top: calc(100% + 8px);
right: 0;
min-width: 200px;
background: var(--evps-surface-2);
border: 1px solid var(--evps-border);
border-radius: var(--evps-radius-lg);
box-shadow: var(--evps-shadow-lg);
z-index: var(--evps-z-dropdown);
overflow: hidden;
padding: var(--evps-space-2) 0;
}
.evps-account-menu__header {
padding: var(--evps-space-3) var(--evps-space-4);
border-bottom: 1px solid var(--evps-border-subtle);
margin-bottom: var(--evps-space-1);
}
.evps-account-menu__name {
font-size: 13px;
font-weight: var(--evps-fw-semibold);
color: var(--evps-text);
}
.evps-account-menu__email {
font-size: 11px;
color: var(--evps-text-muted);
margin-top: 1px;
}
.evps-account-menu__item {
display: flex;
align-items: center;
gap: var(--evps-space-3);
padding: var(--evps-space-2) var(--evps-space-4);
font-size: 13px;
color: var(--evps-text-muted);
transition: background var(--evps-dur-fast), color var(--evps-dur-fast);
}
.evps-account-menu__item:hover {
background: var(--evps-surface-3);
color: var(--evps-text);
}
.evps-account-menu__item:focus-visible {
outline: 2px solid var(--evps-primary);
outline-offset: -2px;
}
@media (prefers-reduced-motion: reduce) {
.evps-account-menu__item { transition: none; }
}
/* ============================================================
SKIP LINK
============================================================ */
.evps-skip-link {
position: absolute;
top: -100%;
left: var(--evps-space-4);
z-index: var(--evps-z-cmdk);
background: var(--evps-primary);
color: white;
padding: var(--evps-space-2) var(--evps-space-4);
border-radius: var(--evps-radius-md);
font-size: 13px;
font-weight: var(--evps-fw-semibold);
text-decoration: none;
}
.evps-skip-link:focus-visible {
top: var(--evps-space-4);
outline: 2px solid white;
outline-offset: 2px;
}
/* ============================================================
APP SHELL TRANSITION — grid col change smoothed
============================================================ */
.evps-app {
transition: grid-template-columns var(--evps-dur-base) var(--evps-ease-out);
}
@media (prefers-reduced-motion: reduce) {
.evps-app { transition: none; }
}
/* ==========================================================================
PHASE G — Third-party CSS override defense (1.0.14)
--------------------------------------------------------------------------
Audit on 2026-05-07 found `fps-site-theme.css` (Fraud Prevention Suite
addon) injecting global rules like:
h1, h2, h3, h4, h5, h6,
.section-title, .panel-heading, .modal-title, .package-name {
color: rgb(15, 23, 42);
}
That file loads AFTER our evps-1000x.css so its declarations win the
cascade and force every heading on our dark surface to slate-900 —
invisible. Phase G re-asserts our token-driven values on every EVPS
class with !important, scoped to data-theme so light mode still flips.
========================================================================== */
/* 1. EVPS heading + label colors */
[data-theme="dark"] .evps-card__title,
[data-theme="dark"] .evps-empty__title,
[data-theme="dark"] .evps-stat__label,
[data-theme="dark"] .evps-stat__value,
[data-theme="dark"] .evps-stat__icon,
[data-theme="dark"] .evps-page__title,
[data-theme="dark"] .evps-page__subtitle,
[data-theme="dark"] .evps-section__title,
[data-theme="dark"] .evps-section__subtitle,
[data-theme="dark"] .evps-sidebar__brand-name,
[data-theme="dark"] .evps-sidebar__user-name,
[data-theme="dark"] .evps-topbar__logo,
[data-theme="dark"] .evps-topbar__breadcrumb,
[data-theme="dark"] .evps-account-menu__name,
[data-theme="dark"] .evps-account-menu__header,
[data-theme="dark"] .evps-link__title,
[data-theme="dark"] .evps-ticket-card__title,
[data-theme="dark"] .evps-service-card__title,
[data-theme="dark"] .evps-product-card__title,
[data-theme="dark"] .evps-modal__title,
[data-theme="dark"] .evps-form__legend,
[data-theme="dark"] .evps-app h1,
[data-theme="dark"] .evps-app h2,
[data-theme="dark"] .evps-app h3,
[data-theme="dark"] .evps-app h4,
[data-theme="dark"] .evps-app h5,
[data-theme="dark"] .evps-app h6,
[data-theme="dark"] .evps-page h1,
[data-theme="dark"] .evps-page h2,
[data-theme="dark"] .evps-page h3,
[data-theme="dark"] .evps-page h4 {
color: var(--evps-text) !important;
}
/* 2. Muted secondary text */
[data-theme="dark"] .evps-card__sub,
[data-theme="dark"] .evps-stat__delta,
[data-theme="dark"] .evps-empty__desc,
[data-theme="dark"] .evps-link__sub,
[data-theme="dark"] .evps-form__hint,
[data-theme="dark"] .evps-help,
[data-theme="dark"] .evps-text-muted,
[data-theme="dark"] .evps-account-menu__email,
[data-theme="dark"] .evps-sidebar__brand-sub,
[data-theme="dark"] .evps-sidebar__user-tier {
color: var(--evps-text-muted) !important;
}
/* 3. Card surface defense */
[data-theme="dark"] .evps-card,
[data-theme="dark"] .evps-stat,
[data-theme="dark"] .evps-empty,
[data-theme="dark"] .evps-ticket-card,
[data-theme="dark"] .evps-service-card,
[data-theme="dark"] .evps-product-card,
[data-theme="dark"] .evps-section {
background: var(--evps-surface) !important;
color: var(--evps-text) !important;
border-color: var(--evps-border) !important;
}
/* 4. Sidebar + topbar foundation */
[data-theme="dark"] .evps-sidebar,
[data-theme="dark"] .evps-topbar {
background: var(--evps-bg) !important;
color: var(--evps-text) !important;
border-color: var(--evps-border) !important;
}
/* 5. Theme/density/sidebar toggle bumped visibility */
.evps-iconbtn {
background: var(--evps-surface) !important;
border: 1px solid var(--evps-border) !important;
color: var(--evps-text) !important;
}
.evps-iconbtn:hover {
background: var(--evps-surface-2) !important;
border-color: var(--evps-border-strong) !important;
color: var(--evps-text) !important;
}
.evps-iconbtn:focus-visible {
outline: 2px solid var(--evps-primary) !important;
outline-offset: 2px;
}
.evps-iconbtn[data-active="true"] {
background: var(--evps-primary-soft) !important;
color: var(--evps-primary) !important;
border-color: rgba(59, 108, 246, 0.4) !important;
}
/* 6. Service / invoice / ticket cards body text */
[data-theme="dark"] .evps-service-card__name,
[data-theme="dark"] .evps-invoice-card__number,
[data-theme="dark"] .evps-ticket-card__number,
[data-theme="dark"] .evps-service-card__domain,
[data-theme="dark"] .evps-invoice-card__total {
color: var(--evps-text) !important;
font-weight: var(--evps-fw-semibold);
}
/* 7. Tab nav (filter pills) */
[data-theme="dark"] .evps-tabs .evps-tab,
[data-theme="dark"] .evps-pill-tabs a,
[data-theme="dark"] .evps-tab-list a {
color: var(--evps-text-muted) !important;
}
[data-theme="dark"] .evps-tabs .evps-tab.is-active,
[data-theme="dark"] .evps-tabs .evps-tab[aria-selected="true"],
[data-theme="dark"] .evps-pill-tabs a.is-active,
[data-theme="dark"] .evps-tab-list a.is-active {
color: var(--evps-text) !important;
background: var(--evps-surface-2) !important;
border-color: var(--evps-primary) !important;
}
/* 8. Form labels (Account Details was nearly invisible) */
[data-theme="dark"] .evps-form .evps-label,
[data-theme="dark"] .evps-field label,
[data-theme="dark"] .evps-page form label {
color: var(--evps-text) !important;
font-weight: var(--evps-fw-semibold);
}
[data-theme="dark"] .evps-form input[type="text"],
[data-theme="dark"] .evps-form input[type="email"],
[data-theme="dark"] .evps-form input[type="password"],
[data-theme="dark"] .evps-form input[type="tel"],
[data-theme="dark"] .evps-form input[type="number"],
[data-theme="dark"] .evps-form select,
[data-theme="dark"] .evps-form textarea,
[data-theme="dark"] .evps-page form input[type="text"],
[data-theme="dark"] .evps-page form input[type="email"],
[data-theme="dark"] .evps-page form input[type="tel"],
[data-theme="dark"] .evps-page form input[type="number"],
[data-theme="dark"] .evps-page form select {
background: var(--evps-surface-inset) !important;
color: var(--evps-text) !important;
border-color: var(--evps-border) !important;
}
[data-theme="dark"] .evps-form select option {
background: var(--evps-surface) !important;
color: var(--evps-text) !important;
}
/* 9. Topbar search bar */
[data-theme="dark"] .evps-topbar__search,
[data-theme="dark"] .evps-topbar__search input {
background: var(--evps-surface-inset) !important;
color: var(--evps-text) !important;
border-color: var(--evps-border) !important;
}
[data-theme="dark"] .evps-topbar__search input::placeholder {
color: var(--evps-text-muted) !important;
}
/* 10. Sidebar nav links */
[data-theme="dark"] .evps-sidebar .evps-nav-item,
[data-theme="dark"] .evps-sidebar .evps-nav-item a,
[data-theme="dark"] .evps-sidebar nav a {
color: var(--evps-text-muted) !important;
}
[data-theme="dark"] .evps-sidebar .evps-nav-item:hover,
[data-theme="dark"] .evps-sidebar .evps-nav-item.is-active,
[data-theme="dark"] .evps-sidebar .evps-nav-item.is-active a,
[data-theme="dark"] .evps-sidebar nav a.is-active {
color: var(--evps-text) !important;
}
/* 11. Light theme parity */
[data-theme="light"] .evps-card__title,
[data-theme="light"] .evps-empty__title,
[data-theme="light"] .evps-stat__value,
[data-theme="light"] .evps-page__title,
[data-theme="light"] .evps-section__title,
[data-theme="light"] .evps-app h1,
[data-theme="light"] .evps-app h2,
[data-theme="light"] .evps-app h3,
[data-theme="light"] .evps-app h4 {
color: var(--evps-text) !important;
}
/* 12. Body + main background defense — FPS site theme forces body bg to
#f8fafc (light), defeating our dark surface. Force the body + main
content area to our token bg so light text isn't on light bg. */
[data-theme="dark"] html,
[data-theme="dark"] body,
[data-theme="dark"] body.bodyBg,
[data-theme="dark"] body.body-with-sidebar,
[data-theme="dark"] body.body-without-sidebar {
background: var(--evps-bg) !important;
color: var(--evps-text) !important;
}
[data-theme="dark"] .evps-app,
[data-theme="dark"] .evps-app__main,
[data-theme="dark"] .evps-main,
[data-theme="dark"] .evps-page,
[data-theme="dark"] main,
[data-theme="dark"] .main-body,
[data-theme="dark"] #main-body,
[data-theme="dark"] .container-fluid,
[data-theme="dark"] .row {
background: transparent !important;
color: var(--evps-text) !important;
}
/* 13. Page header subtitle / lead text in dark mode */
[data-theme="dark"] .evps-page__subtitle,
[data-theme="dark"] .evps-page__lead,
[data-theme="dark"] .evps-page p.lead {
color: var(--evps-text-muted) !important;
}
/* 14. Light mode body should be light */
[data-theme="light"] html,
[data-theme="light"] body {
background: var(--evps-bg) !important;
color: var(--evps-text) !important;
}
/* ── 15. Responsive helpers — `.evps-only-desktop` / `.evps-only-mobile`
Used across templates (invoices, tickets, services) to render a
table on desktop and stacked cards on mobile. Without these rules
BOTH render simultaneously. */
.evps-only-mobile { display: none !important; }
.evps-only-desktop { display: block !important; }
@media (max-width: 768px) {
.evps-only-desktop { display: none !important; }
.evps-only-mobile { display: block !important; }
}
/* ── 16. Hide the FPS Fraud-Prevention-Suite colorblind-toggle button on
EVPS-managed pages. FPS still injects this