/* ╔══════════════════════════════════════════════════════════════════════════════╗
║ P R I M E L O O P X · neomorph-pure.css ║
║ PURE WHITE NEUMORPHISM — BEYOND HUMAN LEVEL ║
║ Override chain: main.css → enchanted.css → neomorph-pure.css (THIS FILE) ║
║ ║
║ Design philosophy: ║
║ · Single-hue white palette — zero blue, zero grey tints ║
║ · All depth from pure light/shadow geometry only ║
║ · Shadows cast from top-left at 145° — unwavering discipline ║
║ · High-contrast crisp typography on luminous white ║
║ · Every surface has 3 layers: base · raised · inset ║
║ · Micro-precision: 0.5px borders, sub-pixel rendering ║
║ · Responsive — collapses gracefully, never ugly ║
║ ║
║ STATUS: Part 1 of 2 (50%) — covers: tokens, base, navbar, ║
║ buttons, cards, forms, alerts, tables, dashboard stats, ║
║ hero, sections, auth, footer, scrollbar, responsive base ║
║ Part 2: landing features, pricing, step visuals, animations, polish ║
╚══════════════════════════════════════════════════════════════════════════════╝ */
/* ─── FONT: Sharp display + clean mono ──────────────────────────────────────── */
@import url('https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:ital,wght@0,300;0,400;0,500;0,600;0,700;0,800;1,400&family=Geist+Mono:wght@400;500;600&display=swap');
/* ══════════════════════════════════════════════════════════════════════════════
§1 DESIGN TOKENS — THE SINGLE WHITE SOURCE OF TRUTH
══════════════════════════════════════════════════════════════════════════════
Rule: ONLY pure white tonal range. #ffffff down to #e8e8e8.
Shadow dark side: rgba(0,0,0,x) — no colour cast.
Shadow light side: rgba(255,255,255,x) — pure white bounce.
═══════════════════════════════════════════════════════════════════════════ */
:root {
/* ── Typography ─────────────────────────────────────────────────────────── */
--font: 'Plus Jakarta Sans', 'DM Sans', system-ui, sans-serif;
--font-mono: 'Geist Mono', 'DM Mono', 'JetBrains Mono', monospace;
/* ── White palette — pure tonal only ────────────────────────────────────── */
/* The math: each step is exactly -4 luminosity units. No hue drift. */
--w-0: #ffffff; /* absolute white — specular highlights, top faces */
--w-1: #f8f8f8; /* near-white — dominant surface */
--w-2: #f2f2f2; /* base background — the "room" the UI sits in */
--w-3: #ebebeb; /* recessed / inset background */
--w-4: #e4e4e4; /* deep inset / recessed wells */
--w-5: #dcdcdc; /* shadow mid tone */
--w-6: #d0d0d0; /* shadow outer edge */
/* ── Background tokens → override all previous --bg vars ───────────────── */
--bg: var(--w-2); /* #f2f2f2 */
--bg-2: var(--w-3);
--surface: var(--w-1); /* #f8f8f8 */
--surface-raised: var(--w-0); /* #ffffff ← brightest: cards, buttons */
--surface-card: var(--w-0);
--surface-input: var(--w-3); /* #ebebeb ← recessed inputs */
/* ── Text — pure black scale, zero blue ─────────────────────────────────── */
--text-primary: #0a0a0a; /* near-black — max legibility */
--text-secondary: #2e2e2e; /* secondary — still strong */
--text-muted: #787878; /* muted — balanced mid grey */
--text-faint: #b0b0b0; /* very faint — decorative only */
--text-invert: #ffffff;
/* ── Brand — pure jet black, no tint ───────────────────────────────────── */
--brand: #0a0a0a;
--brand-light: #1f1f1f;
--brand-dark: #000000;
--brand-bg: rgba(10,10,10,0.05);
/* ── Semantic — vivid pops on white (same as enchanted, kept for compat) ── */
--success: #16a34a;
--success-bg: rgba(22,163,74,0.08);
--warning: #b45309;
--warning-bg: rgba(180,83,9,0.08);
--danger: #dc2626;
--danger-bg: rgba(220,38,38,0.08);
--info: #0369a1;
--info-bg: rgba(3,105,161,0.08);
/* ── THE NEUMORPHISM SYSTEM ─────────────────────────────────────────────── */
/*
All shadows obey the same 145° directional light source.
Dark shadow: bottom-right, rgba(0,0,0,x) — object blocks light
Light shadow: top-left, rgba(255,255,255,x) — specular bounce
Inset: inverted — light at top-left pushes surface DOWN
Intensity tiers:
--nm-xs → micro details (badges, dividers)
--nm-sm → interactive pills, small buttons
--nm-md → standard cards, form fields
--nm-lg → hero cards, major surfaces
--nm-xl → large panels, overlapping elements
*/
/* Raised (extruded) surfaces */
--nm-xs: 2px 2px 5px rgba(0,0,0,0.10),
-1px -1px 4px rgba(255,255,255,0.95);
--nm-sm: 4px 4px 10px rgba(0,0,0,0.12),
-3px -3px 8px rgba(255,255,255,0.95);
--nm-md: 7px 7px 18px rgba(0,0,0,0.13),
-5px -5px 14px rgba(255,255,255,0.98);
--nm-lg: 10px 10px 28px rgba(0,0,0,0.14),
-7px -7px 20px rgba(255,255,255,1.0);
--nm-xl: 14px 14px 38px rgba(0,0,0,0.15),
-10px -10px 28px rgba(255,255,255,1.0);
/* Inset (pressed) surfaces */
--nm-in-xs: inset 2px 2px 5px rgba(0,0,0,0.10),
inset -1px -1px 4px rgba(255,255,255,0.95);
--nm-in-sm: inset 3px 3px 8px rgba(0,0,0,0.11),
inset -2px -2px 6px rgba(255,255,255,0.97);
--nm-in-md: inset 5px 5px 13px rgba(0,0,0,0.12),
inset -4px -4px 10px rgba(255,255,255,0.98);
--nm-in-lg: inset 7px 7px 18px rgba(0,0,0,0.13),
inset -5px -5px 14px rgba(255,255,255,1.0);
/* Brand button (dark surface — reversed shadow physics) */
--nm-brand: 5px 5px 15px rgba(0,0,0,0.30),
-2px -2px 8px rgba(255,255,255,0.25),
inset 1px 1px 1px rgba(255,255,255,0.08);
--nm-brand-hover: 7px 7px 22px rgba(0,0,0,0.38),
-2px -2px 10px rgba(255,255,255,0.20);
/* Active state (button depressed) */
--nm-active: inset 3px 3px 8px rgba(0,0,0,0.18),
inset -2px -2px 6px rgba(255,255,255,0.80);
/* Legacy aliases — keep existing code from breaking */
--nm-shadow-out: var(--nm-md);
--nm-shadow-in: var(--nm-in-md);
--nm-shadow-card: var(--nm-lg);
--nm-shadow-sm: var(--nm-sm);
--nm-shadow-btn: var(--nm-sm);
--nm-shadow-btn-active: var(--nm-active);
--nm-shadow-brand: var(--nm-brand);
--nm-shadow-logo: var(--nm-lg);
/* ── Borders — hairline, pure white or pure dark ────────────────────────── */
--border: rgba(0,0,0,0.06);
--border-subtle: rgba(0,0,0,0.03);
--border-strong: rgba(0,0,0,0.11);
--border-white: rgba(255,255,255,0.98);
/* ── Geometry ────────────────────────────────────────────────────────────── */
--r-xs: 4px;
--r-sm: 8px;
--r-md: 14px;
--r-lg: 20px;
--r-xl: 28px;
--r-2xl: 36px;
--r-pill: 999px;
/* ── Transitions ─────────────────────────────────────────────────────────── */
--t-micro: 0.08s ease;
--t-fast: 0.14s ease;
--t-base: 0.22s ease;
--t-slow: 0.38s cubic-bezier(0.4, 0, 0.2, 1);
--t-spring: 0.45s cubic-bezier(0.34, 1.56, 0.64, 1);
/* ── Theme colour for browser chrome ─────────────────────────────────────── */
color-scheme: light;
}
/* ══════════════════════════════════════════════════════════════════════════════
§2 BASE LAYER — HTML / BODY
══════════════════════════════════════════════════════════════════════════════ */
html {
font-size: 15px;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
text-rendering: optimizeLegibility;
/* Force sub-pixel sharpness */
font-feature-settings: 'kern' 1, 'liga' 1, 'calt' 1;
}
body {
font-family: var(--font) !important;
background: var(--bg) !important;
color: var(--text-primary) !important;
line-height: 1.6;
overflow-x: hidden;
letter-spacing: -0.008em;
}
/* ── Ambient background — pure geometry, no colour ──────────────────────────
A single centrally-lit white room: bright overhead, dark corners.
No gradients with tints. No blue. No warm. Just white light. */
body::before {
content: '';
position: fixed;
inset: 0;
/* Overhead dome light — Lambertian fall-off */
background:
radial-gradient(ellipse 180% 120% at 50% -20%,
rgba(255,255,255,0.98) 0%,
rgba(255,255,255,0.60) 30%,
transparent 65%),
/* Subtle corner darkening — ambient occlusion approximation */
radial-gradient(ellipse 80% 80% at 0% 0%,
rgba(0,0,0,0.025) 0%,
transparent 50%),
radial-gradient(ellipse 80% 80% at 100% 100%,
rgba(0,0,0,0.025) 0%,
transparent 50%);
pointer-events: none;
z-index: 0;
}
/* Remove any blue/indigo ambient from enchanted.css */
body::after { display: none; }
/* ══════════════════════════════════════════════════════════════════════════════
§3 NAVBAR — Floating glass-white bar
══════════════════════════════════════════════════════════════════════════════ */
.navbar {
display: flex !important;
align-items: center !important;
gap: 1rem !important;
padding: 0.85rem 2rem !important;
/* Pure white frosted glass — no blue tint */
background: rgba(248,248,248,0.82) !important;
/* Triple-layer border: soft dark edge + white specular top + gap */
border-bottom: none !important;
box-shadow:
0 0 0 1px rgba(0,0,0,0.07),
0 1px 0 0 rgba(255,255,255,0.98),
0 4px 24px rgba(0,0,0,0.07),
0 1px 3px rgba(0,0,0,0.04) !important;
backdrop-filter: blur(28px) saturate(180%) !important;
-webkit-backdrop-filter: blur(28px) saturate(180%) !important;
position: sticky !important;
top: 0;
z-index: 200;
}
.nav-brand a {
font-size: 0.88rem !important;
font-weight: 800 !important;
letter-spacing: -0.04em !important;
color: var(--text-primary) !important;
font-family: var(--font) !important;
}
/* Nav links — pure pill neumorphism */
.nav-link {
font-size: 0.80rem !important;
font-weight: 500 !important;
color: var(--text-muted) !important;
letter-spacing: -0.01em !important;
padding: 0.38rem 0.80rem !important;
border-radius: var(--r-pill) !important;
transition: all var(--t-fast) !important;
border: none !important;
background: transparent !important;
box-shadow: none !important;
}
.nav-link:hover {
color: var(--text-primary) !important;
background: var(--surface-raised) !important;
box-shadow: var(--nm-sm) !important;
}
.nav-link.active {
color: var(--text-primary) !important;
background: var(--surface-raised) !important;
box-shadow: var(--nm-sm) !important;
font-weight: 600 !important;
}
/* Logo sphere */
.plx-logo-icon,
.hero-logo-icon {
background: linear-gradient(145deg, #1c1c1c, #000000) !important;
box-shadow:
6px 6px 18px rgba(0,0,0,0.28),
-4px -4px 12px rgba(255,255,255,0.95),
inset 1px 1px 4px rgba(255,255,255,0.12),
inset -1px -1px 3px rgba(0,0,0,0.5) !important;
}
/* Mobile toggle */
.nav-toggle {
background: var(--surface-raised) !important;
border: 1px solid rgba(0,0,0,0.08) !important;
box-shadow: var(--nm-sm) !important;
border-radius: var(--r-sm) !important;
color: var(--text-primary) !important;
}
/* ══════════════════════════════════════════════════════════════════════════════
§4 BUTTON SYSTEM — Full neumorphic hierarchy
══════════════════════════════════════════════════════════════════════════════ */
/* Base button — reset dark hover artifacts first */
.btn {
font-family: var(--font) !important;
font-size: 0.835rem !important;
font-weight: 600 !important;
letter-spacing: -0.015em !important;
border-radius: var(--r-pill) !important;
padding: 0.58rem 1.3rem !important;
transition: all var(--t-fast) !important;
position: relative !important;
overflow: hidden !important;
/* Prevent text blur on transform */
-webkit-font-smoothing: subpixel-antialiased !important;
backface-visibility: hidden !important;
}
/* ─ Primary: pure black extruded pill ──── */
.btn-primary {
background: var(--brand) !important;
color: var(--w-0) !important;
border: none !important;
box-shadow: var(--nm-brand) !important;
}
.btn-primary::before {
content: '';
position: absolute;
inset: 0;
background: linear-gradient(145deg,
rgba(255,255,255,0.07) 0%,
transparent 50%,
rgba(0,0,0,0.12) 100%);
pointer-events: none;
border-radius: inherit;
}
.btn-primary:hover {
background: var(--brand-light) !important;
color: var(--w-0) !important;
transform: translateY(-2px) !important;
box-shadow: var(--nm-brand-hover) !important;
}
.btn-primary:active {
transform: translateY(0) !important;
box-shadow: var(--nm-active) !important;
background: #000 !important;
}
/* ─ Outline: white extruded pill ──── */
.btn-outline {
background: var(--surface-raised) !important;
border: 1px solid rgba(0,0,0,0.09) !important;
color: var(--text-secondary) !important;
box-shadow: var(--nm-sm) !important;
}
.btn-outline:hover {
background: var(--w-0) !important;
color: var(--text-primary) !important;
border-color: rgba(0,0,0,0.13) !important;
box-shadow: var(--nm-md) !important;
transform: translateY(-1px) !important;
}
.btn-outline:active {
transform: translateY(0) !important;
box-shadow: var(--nm-active) !important;
}
/* ─ Danger ──── */
.btn-danger {
background: var(--surface-raised) !important;
border: 1px solid rgba(220,38,38,0.18) !important;
color: var(--danger) !important;
box-shadow: var(--nm-sm) !important;
}
.btn-danger:hover {
background: var(--danger) !important;
color: #fff !important;
border-color: var(--danger) !important;
box-shadow: 5px 5px 15px rgba(220,38,38,0.28),
-2px -2px 8px rgba(255,255,255,0.8) !important;
}
/* Size modifiers */
.btn-sm {
padding: 0.32rem 0.85rem !important;
font-size: 0.775rem !important;
}
.btn-lg {
padding: 0.78rem 1.85rem !important;
font-size: 0.90rem !important;
letter-spacing: -0.02em !important;
}
.btn-block { width: 100% !important; }
/* ─ Hero CTA buttons ──── */
.btn-hero-primary {
font-family: var(--font) !important;
font-size: 0.875rem !important;
font-weight: 700 !important;
letter-spacing: -0.025em !important;
padding: 0.74rem 1.85rem !important;
background: var(--brand) !important;
color: var(--w-0) !important;
border-radius: var(--r-pill) !important;
border: none !important;
box-shadow: var(--nm-brand) !important;
transition: all var(--t-fast) !important;
display: inline-flex !important;
align-items: center !important;
gap: 0.45rem !important;
text-decoration: none !important;
position: relative !important;
overflow: hidden !important;
}
.btn-hero-primary::before {
content: '';
position: absolute;
inset: 0;
background: linear-gradient(145deg,
rgba(255,255,255,0.08) 0%,
transparent 50%);
border-radius: inherit;
pointer-events: none;
}
.btn-hero-primary:hover {
background: var(--brand-light) !important;
color: var(--w-0) !important;
transform: translateY(-2px) !important;
box-shadow: var(--nm-brand-hover) !important;
}
.btn-hero-primary:active {
transform: translateY(0) !important;
box-shadow: var(--nm-active) !important;
}
.btn-hero-outline {
font-family: var(--font) !important;
font-size: 0.875rem !important;
font-weight: 600 !important;
letter-spacing: -0.015em !important;
padding: 0.72rem 1.85rem !important;
background: var(--surface-raised) !important;
color: var(--text-secondary) !important;
border-radius: var(--r-pill) !important;
border: 1.5px solid rgba(0,0,0,0.09) !important;
box-shadow: var(--nm-sm) !important;
transition: all var(--t-fast) !important;
display: inline-flex !important;
align-items: center !important;
gap: 0.45rem !important;
text-decoration: none !important;
}
.btn-hero-outline:hover {
box-shadow: var(--nm-md) !important;
color: var(--text-primary) !important;
border-color: rgba(0,0,0,0.13) !important;
transform: translateY(-1px) !important;
}
/* Copy button */
.btn-copy {
background: var(--surface-raised) !important;
border: 1px solid rgba(0,0,0,0.08) !important;
color: var(--text-muted) !important;
font-size: 0.69rem !important;
padding: 0.2rem 0.55rem !important;
border-radius: var(--r-sm) !important;
cursor: pointer !important;
font-family: var(--font) !important;
box-shadow: var(--nm-xs) !important;
transition: all var(--t-fast) !important;
}
.btn-copy:hover {
color: var(--text-primary) !important;
box-shadow: var(--nm-sm) !important;
border-color: rgba(0,0,0,0.12) !important;
}
/* ══════════════════════════════════════════════════════════════════════════════
§5 CARD SYSTEM — Three-surface depth hierarchy
══════════════════════════════════════════════════════════════════════════════ */
/* Base card — #ffffff extruded on #f2f2f2 background */
.card {
background: var(--surface-raised) !important;
/* Pure white — no tints */
border: 1px solid rgba(0,0,0,0.055) !important;
/* White specular rim — the top-left edge catches the light */
outline: 1px solid rgba(255,255,255,0.98) !important;
outline-offset: -1px !important;
border-radius: var(--r-lg) !important;
box-shadow: var(--nm-lg) !important;
padding: 1.5rem !important;
transition: box-shadow var(--t-base), transform var(--t-base) !important;
position: relative;
}
.card:hover {
box-shadow: var(--nm-xl) !important;
transform: translateY(-2px) !important;
}
/* Inner surface — recessed well inside a card */
.card .inner-surface {
background: var(--surface-input);
border-radius: var(--r-md);
box-shadow: var(--nm-in-md);
border: 1px solid rgba(255,255,255,0.9);
padding: 1rem;
}
/* Hero card */
.hero-code {
background: var(--surface-raised) !important;
border: 1px solid rgba(0,0,0,0.06) !important;
outline: 1px solid rgba(255,255,255,0.98) !important;
outline-offset: -1px !important;
border-radius: var(--r-xl) !important;
box-shadow: var(--nm-xl) !important;
width: 100% !important;
box-sizing: border-box !important;
overflow: hidden !important;
}
.hero-code pre {
padding: 1.35rem 1.55rem !important;
font-family: var(--font-mono) !important;
font-size: 0.775rem !important;
color: var(--text-secondary) !important;
line-height: 1.9 !important;
overflow-x: auto !important;
-webkit-overflow-scrolling: touch !important;
white-space: pre !important;
word-break: normal !important;
}
/* ══════════════════════════════════════════════════════════════════════════════
§6 FORM SYSTEM — Deep inset wells
══════════════════════════════════════════════════════════════════════════════ */
/* Input wells: recessed into the white surface */
.form-group input,
.form-group select,
.form-input,
.form-select,
textarea {
background: var(--surface-input) !important; /* #ebebeb — darker = recessed */
box-shadow: var(--nm-in-md) !important;
border: 1px solid rgba(255,255,255,0.92) !important;
border-radius: var(--r-md) !important;
color: var(--text-primary) !important;
padding: 0.65rem 1rem !important;
font-family: var(--font) !important;
font-size: 0.875rem !important;
font-weight: 400 !important;
letter-spacing: -0.005em !important;
transition:
border-color var(--t-fast),
box-shadow var(--t-fast) !important;
width: 100% !important;
}
.form-group input:focus,
.form-group select:focus,
.form-input:focus,
.form-select:focus,
textarea:focus {
outline: none !important;
/* Focus: brighter highlight on inner edge */
border-color: rgba(0,0,0,0.16) !important;
box-shadow:
var(--nm-in-md),
0 0 0 3px rgba(10,10,10,0.07) !important;
}
.form-group input::placeholder,
.form-input::placeholder,
textarea::placeholder {
color: var(--text-faint) !important;
font-weight: 400 !important;
}
.form-group label {
display: block !important;
font-size: 0.80rem !important;
font-weight: 600 !important;
color: var(--text-secondary) !important;
margin-bottom: 0.4rem !important;
letter-spacing: -0.005em !important;
}
.form-hint {
font-size: 0.76rem !important;
color: var(--text-faint) !important;
margin-top: 0.3rem !important;
}
/* Password toggle */
.toggle-pw { color: var(--text-muted) !important; }
.toggle-pw:hover { color: var(--text-primary) !important; }
/* Small select */
.form-select-sm {
padding: 0.30rem 0.65rem !important;
font-size: 0.79rem !important;
border-radius: var(--r-sm) !important;
width: auto !important;
background: var(--surface-input) !important;
box-shadow: var(--nm-in-sm) !important;
border: 1px solid rgba(255,255,255,0.88) !important;
color: var(--text-primary) !important;
font-family: var(--font) !important;
}
/* Dropzone */
#dropZone,
.dropzone {
background: var(--surface-input) !important;
border: 2px dashed rgba(0,0,0,0.11) !important;
border-radius: var(--r-lg) !important;
padding: 2.5rem !important;
box-shadow: var(--nm-in-lg) !important;
transition: all var(--t-base) !important;
text-align: center !important;
cursor: pointer !important;
}
#dropZone:hover,
#dropZone.drag-over,
.dropzone:hover,
.dropzone.drag-over {
border-color: rgba(0,0,0,0.22) !important;
background: var(--w-3) !important;
box-shadow: var(--nm-in-md), 0 0 0 4px rgba(0,0,0,0.03) !important;
color: var(--text-primary) !important;
}
.dropzone-label {
font-size: 0.84rem !important;
color: var(--text-muted) !important;
}
.dropzone-label strong {
color: var(--text-primary) !important;
font-weight: 700 !important;
}
/* ══════════════════════════════════════════════════════════════════════════════
§7 ALERTS — Inset signal strips
══════════════════════════════════════════════════════════════════════════════ */
.alert {
display: flex !important;
align-items: flex-start !important;
gap: 0.75rem !important;
padding: 0.9rem 1.1rem !important;
border-radius: var(--r-md) !important;
font-size: 0.84rem !important;
font-family: var(--font) !important;
margin-bottom: 1.1rem !important;
border: 1px solid transparent !important;
line-height: 1.55 !important;
box-shadow: var(--nm-in-sm) !important;
}
.alert-success {
background: rgba(22,163,74,0.06) !important;
border-color: rgba(22,163,74,0.16) !important;
color: #14532d !important;
}
.alert-error {
background: rgba(220,38,38,0.06) !important;
border-color: rgba(220,38,38,0.16) !important;
color: #991b1b !important;
}
.alert-info {
background: rgba(3,105,161,0.06) !important;
border-color: rgba(3,105,161,0.16) !important;
color: #0c4a6e !important;
}
/* ══════════════════════════════════════════════════════════════════════════════
§8 TAGS & BADGES
══════════════════════════════════════════════════════════════════════════════ */
.tag {
display: inline-flex !important;
align-items: center !important;
gap: 0.3rem !important;
padding: 0.18rem 0.62rem !important;
border-radius: var(--r-pill) !important;
font-size: 0.69rem !important;
font-weight: 700 !important;
letter-spacing: 0.04em !important;
text-transform: uppercase !important;
box-shadow: var(--nm-xs) !important;
}
.tag-green { background: rgba(22,163,74,0.08) !important; color: #14532d !important; border: 1px solid rgba(22,163,74,0.14) !important; }
.tag-red { background: rgba(220,38,38,0.08) !important; color: #991b1b !important; border: 1px solid rgba(220,38,38,0.14) !important; }
.tag-grey { background: var(--w-3) !important; color: var(--text-muted) !important; border: 1px solid rgba(0,0,0,0.06) !important; }
.tag-blue { background: rgba(3,105,161,0.08) !important; color: #0c4a6e !important; border: 1px solid rgba(3,105,161,0.14) !important; }
.tag-yellow { background: rgba(180,83,9,0.08) !important; color: #78350f !important; border: 1px solid rgba(180,83,9,0.14) !important; }
/* Status dot */
.status-dot.active { background: var(--success) !important; box-shadow: 0 0 5px rgba(22,163,74,0.55) !important; }
.status-dot.revoked { background: var(--danger) !important; box-shadow: 0 0 5px rgba(220,38,38,0.50) !important; }
.status-dot.none { background: var(--text-faint) !important; box-shadow: none !important; }
/* ══════════════════════════════════════════════════════════════════════════════
§9 CODE BLOCK
══════════════════════════════════════════════════════════════════════════════ */
.code-block {
background: var(--surface-raised) !important;
border: 1px solid rgba(0,0,0,0.06) !important;
outline: 1px solid rgba(255,255,255,0.96) !important;
outline-offset: -1px !important;
border-radius: var(--r-lg) !important;
box-shadow: var(--nm-in-md) !important;
overflow: hidden !important;
margin-bottom: 1.25rem !important;
}
.code-header {
background: var(--surface) !important;
border-bottom: 1px solid rgba(0,0,0,0.055) !important;
padding: 0.52rem 1rem !important;
font-size: 0.73rem !important;
color: var(--text-muted) !important;
font-family: var(--font) !important;
display: flex !important;
align-items: center !important;
justify-content: space-between !important;
}
.code-block pre {
padding: 1rem 1.15rem !important;
overflow-x: auto !important;
font-family: var(--font-mono) !important;
font-size: 0.775rem !important;
color: var(--text-secondary) !important;
line-height: 1.75 !important;
-webkit-overflow-scrolling: touch !important;
}
/* ══════════════════════════════════════════════════════════════════════════════
§10 DATA TABLES — Pure white with ghost rows
══════════════════════════════════════════════════════════════════════════════ */
.table-wrap {
overflow-x: auto !important;
border-radius: var(--r-lg) !important;
background: var(--surface-raised) !important;
border: 1px solid rgba(0,0,0,0.06) !important;
outline: 1px solid rgba(255,255,255,0.97) !important;
outline-offset: -1px !important;
box-shadow: var(--nm-lg) !important;
margin-bottom: 1.25rem !important;
-webkit-overflow-scrolling: touch !important;
}
.data-table {
width: 100% !important;
border-collapse: collapse !important;
font-size: 0.84rem !important;
font-family: var(--font) !important;
}
.data-table th {
background: var(--surface) !important; /* slightly recessed header */
color: var(--text-muted) !important;
font-weight: 700 !important;
font-size: 0.70rem !important;
text-transform: uppercase !important;
letter-spacing: 0.07em !important;
padding: 0.68rem 1rem !important;
border-bottom: 1px solid rgba(0,0,0,0.06) !important;
white-space: nowrap !important;
}
.data-table td {
padding: 0.68rem 1rem !important;
border-bottom: 1px solid rgba(0,0,0,0.04) !important;
color: var(--text-secondary) !important;
vertical-align: middle !important;
}
.data-table tr:last-child td {
border-bottom: none !important;
}
.data-table tbody tr {
transition: background var(--t-micro) !important;
}
.data-table tbody tr:hover {
background: rgba(0,0,0,0.018) !important;
}
.td-id { color: var(--text-faint) !important; font-family: var(--font-mono) !important; font-size: 0.75rem !important; }
.td-email { color: var(--text-muted) !important; font-size: 0.80rem !important; }
.td-date { color: var(--text-muted) !important; font-size: 0.79rem !important; white-space: nowrap !important; font-family: var(--font-mono) !important; }
/* Pagination */
.pagination {
display: flex !important;
align-items: center !important;
gap: 0.5rem !important;
padding: 0.5rem 0 !important;
}
.page-btn {
min-width: 34px !important;
height: 34px !important;
display: grid !important;
place-items: center !important;
border-radius: var(--r-sm) !important;
font-size: 0.81rem !important;
font-weight: 600 !important;
color: var(--text-secondary) !important;
background: var(--surface-raised) !important;
box-shadow: var(--nm-sm) !important;
border: 1px solid rgba(0,0,0,0.06) !important;
cursor: pointer !important;
transition: all var(--t-fast) !important;
font-family: var(--font) !important;
padding: 0 0.5rem !important;
}
.page-btn:hover {
color: var(--text-primary) !important;
box-shadow: var(--nm-md) !important;
transform: translateY(-1px) !important;
}
.page-btn.active {
background: var(--brand) !important;
color: var(--w-0) !important;
box-shadow: var(--nm-brand) !important;
border-color: transparent !important;
}
.page-btn:disabled {
opacity: 0.35 !important;
cursor: not-allowed !important;
pointer-events: none !important;
}
.page-info {
font-size: 0.80rem !important;
color: var(--text-muted) !important;
font-family: var(--font) !important;
}
/* ══════════════════════════════════════════════════════════════════════════════
§11 PROGRESS BARS & RINGS — Pure white depth
══════════════════════════════════════════════════════════════════════════════ */
.progress-bar,
.mini-bar {
background: var(--w-4) !important;
box-shadow: var(--nm-in-xs) !important;
border-radius: 99px !important;
overflow: hidden !important;
}
.progress-bar { height: 6px !important; }
.mini-bar { height: 5px !important; width: 70px !important; }
.progress-bar-fill,
.mini-bar-fill,
.sub-progress-fill {
height: 100% !important;
background: var(--brand) !important;
border-radius: 99px !important;
transition: width 0.5s var(--t-slow) !important;
box-shadow: none !important;
}
.sub-progress-fill.warn { background: var(--warning) !important; }
.sub-progress-fill.danger { background: var(--danger) !important; }
.sub-progress-bar {
height: 6px !important;
background: var(--w-4) !important;
box-shadow: var(--nm-in-xs) !important;
border-radius: 99px !important;
overflow: hidden !important;
}
.sub-progress-label {
font-size: 0.74rem !important;
color: var(--text-muted) !important;
margin-top: 0.32rem !important;
display: block !important;
font-family: var(--font) !important;
}
/* Usage ring */
.ring-bg { stroke: rgba(0,0,0,0.08) !important; }
.ring-fill {
stroke: var(--brand) !important;
filter: none !important; /* no glow on pure white */
}
/* ══════════════════════════════════════════════════════════════════════════════
§12 DASHBOARD — All dark overrides from dashboard.css → NUKED → pure white
══════════════════════════════════════════════════════════════════════════════ */
/* Stat cards */
.stat-card {
background: var(--surface-raised) !important;
border: 1px solid rgba(0,0,0,0.06) !important;
outline: 1px solid rgba(255,255,255,0.97) !important;
outline-offset: -1px !important;
border-radius: var(--r-lg) !important;
box-shadow: var(--nm-lg) !important;
padding: 1.35rem 1.4rem !important;
transition: all var(--t-base) !important;
color: var(--text-primary) !important;
}
.stat-card:hover {
box-shadow: var(--nm-xl) !important;
transform: translateY(-2px) !important;
border-color: rgba(0,0,0,0.09) !important;
}
.stat-card h3,
.stat-card .stat-label {
font-size: 0.71rem !important;
font-weight: 700 !important;
text-transform: uppercase !important;
letter-spacing: 0.07em !important;
color: var(--text-muted) !important;
}
.stat-card .stat-value {
font-size: 1.55rem !important;
font-weight: 800 !important;
letter-spacing: -0.045em !important;
color: var(--text-primary) !important;
}
.stat-card .stat-hint { color: var(--text-muted) !important; font-size: 0.78rem !important; }
.stat-card .stat-green { color: var(--success) !important; }
.stat-card .stat-grey { color: var(--text-muted) !important; }
.stat-card .stat-red { color: var(--danger) !important; }
.stat-card .ring-used { color: var(--text-primary) !important; font-size: 1rem !important; font-weight: 700 !important; }
.stat-card .ring-total { color: var(--text-muted) !important; }
.stat-card .ring-sep { color: var(--border-strong) !important; }
/* Quick-start card */
.quickstart-card {
background: var(--surface-raised) !important;
border: 1px solid rgba(0,0,0,0.06) !important;
outline: 1px solid rgba(255,255,255,0.97) !important;
outline-offset: -1px !important;
border-radius: var(--r-lg) !important;
box-shadow: var(--nm-lg) !important;
padding: 1.4rem 1.6rem !important;
color: var(--text-primary) !important;
}
.quickstart-card h3 {
color: var(--text-primary) !important;
font-size: 0.93rem !important;
font-weight: 700 !important;
letter-spacing: -0.02em !important;
}
.quickstart-steps { padding-left: 1.25rem !important; }
.quickstart-steps li { font-size: 0.84rem !important; color: var(--text-secondary) !important; }
.quickstart-steps li.done { color: var(--success) !important; }
.quickstart-steps a { color: var(--text-primary) !important; font-weight: 600 !important; }
/* Sub detail rows */
.sub-detail-row {
display: flex !important;
justify-content: space-between !important;
padding: 0.44rem 0 !important;
border-bottom: 1px solid rgba(0,0,0,0.04) !important;
font-size: 0.83rem !important;
font-family: var(--font) !important;
}
.sub-detail-row:last-child { border-bottom: none !important; }
.sub-detail-row span:first-child { color: var(--text-muted) !important; }
/* Sub plan badge */
.sub-plan-badge {
display: inline-block !important;
font-size: 1rem !important;
font-weight: 800 !important;
letter-spacing: -0.03em !important;
color: var(--text-primary) !important;
padding: 0.45rem 1rem !important;
background: var(--surface-raised) !important;
border: 1.5px solid rgba(0,0,0,0.09) !important;
border-radius: var(--r-md) !important;
box-shadow: var(--nm-sm) !important;
margin-bottom: 1rem !important;
}
.sub-badge-grey {
border-color: rgba(0,0,0,0.055) !important;
color: var(--text-muted) !important;
}
/* API Key status */
.key-status {
display: flex !important;
align-items: center !important;
gap: 0.6rem !important;
font-size: 0.875rem !important;
font-weight: 600 !important;
margin-bottom: 0.75rem !important;
padding: 0.58rem 0.95rem !important;
border-radius: var(--r-md) !important;
box-shadow: var(--nm-in-sm) !important;
font-family: var(--font) !important;
}
.key-status-active { background: rgba(22,163,74,0.07) !important; color: #14532d !important; border: 1px solid rgba(22,163,74,0.15) !important; }
.key-status-revoked { background: rgba(220,38,38,0.07) !important; color: #991b1b !important; border: 1px solid rgba(220,38,38,0.15) !important; }
.key-status-none { background: var(--surface-input) !important; color: var(--text-muted) !important; border: 1px solid rgba(0,0,0,0.05) !important; }
.key-meta {
display: flex !important;
gap: 1rem !important;
font-size: 0.78rem !important;
color: var(--text-muted) !important;
margin-bottom: 1rem !important;
flex-wrap: wrap !important;
font-family: var(--font) !important;
}
/* Key reveal card — nuke dark background */
.key-reveal-card {
background: var(--surface-raised) !important;
border-color: rgba(180,83,9,0.18) !important;
box-shadow: var(--nm-lg) !important;
}
.key-reveal-warning {
font-size: 0.83rem !important;
color: var(--text-muted) !important;
margin-bottom: 0.9rem !important;
line-height: 1.65 !important;
font-family: var(--font) !important;
}
.key-display {
display: flex !important;
align-items: center !important;
gap: 0.75rem !important;
background: var(--w-3) !important;
border: 1px solid rgba(22,163,74,0.18) !important;
border-radius: var(--r-md) !important;
padding: 0.72rem 1rem !important;
box-shadow: var(--nm-in-md) !important;
overflow-x: auto !important;
}
.key-display code {
color: var(--success) !important;
font-family: var(--font-mono) !important;
font-size: 0.84rem !important;
word-break: break-all !important;
flex: 1 !important;
font-weight: 500 !important;
}
/* Old key-reveal row */
.key-reveal {
background: var(--w-3) !important;
border: 1px solid rgba(22,163,74,0.18) !important;
border-radius: var(--r-md) !important;
color: var(--success) !important;
box-shadow: var(--nm-in-sm) !important;
}
/* Plan cards in dashboard */
.plan-card-dash {
background: var(--surface-raised) !important;
border: 1px solid rgba(0,0,0,0.06) !important;
border-radius: var(--r-md) !important;
box-shadow: var(--nm-sm) !important;
padding: 1.1rem !important;
transition: all var(--t-base) !important;
}
.plan-card-dash.plan-current {
border-color: rgba(0,0,0,0.14) !important;
box-shadow: var(--nm-md) !important;
}
.section-heading {
font-size: 0.70rem !important;
font-weight: 700 !important;
text-transform: uppercase !important;
letter-spacing: 0.08em !important;
color: var(--text-muted) !important;
margin-bottom: 0.85rem !important;
font-family: var(--font) !important;
}
.dash-header { margin-bottom: 1.6rem !important; }
.dash-title { font-size: 1.3rem !important; font-weight: 800 !important; letter-spacing: -0.04em !important; color: var(--text-primary) !important; }
.dash-sub { font-size: 0.83rem !important; color: var(--text-muted) !important; margin-top: 0.12rem !important; }
/* ══════════════════════════════════════════════════════════════════════════════
§13 AUTH PAGES — Deep-shadow card on white
══════════════════════════════════════════════════════════════════════════════ */
.auth-card {
background: var(--surface-raised) !important;
border: 1px solid rgba(0,0,0,0.06) !important;
outline: 1px solid rgba(255,255,255,0.98) !important;
outline-offset: -1px !important;
border-radius: var(--r-xl) !important;
/* Dramatic depth — this card really floats */
box-shadow:
var(--nm-xl),
0 32px 72px rgba(0,0,0,0.09),
0 8px 20px rgba(0,0,0,0.05) !important;
padding: 2.5rem !important;
width: 100% !important;
max-width: 420px !important;
transition: box-shadow var(--t-base) !important;
}
.auth-title {
font-size: 1.3rem !important;
font-weight: 800 !important;
letter-spacing: -0.045em !important;
color: var(--text-primary) !important;
}
.auth-sub {
font-size: 0.83rem !important;
color: var(--text-muted) !important;
line-height: 1.65 !important;
}
.auth-logo-link {
color: var(--text-primary) !important;
font-weight: 700 !important;
font-size: 1.0rem !important;
letter-spacing: -0.03em !important;
font-family: var(--font) !important;
}
.auth-footer-link {
font-size: 0.82rem !important;
color: var(--text-muted) !important;
text-align: center !important;
margin-top: 1.3rem !important;
}
.auth-footer-link a {
color: var(--text-primary) !important;
font-weight: 600 !important;
}
/* ══════════════════════════════════════════════════════════════════════════════
§14 SECTION LEVEL — Pills, labels, headings
══════════════════════════════════════════════════════════════════════════════ */
.section-label {
display: inline-flex !important;
align-items: center !important;
gap: 0.4rem !important;
padding: 0.26rem 0.90rem !important;
background: var(--surface-raised) !important;
border: 1px solid rgba(0,0,0,0.06) !important;
box-shadow: var(--nm-sm) !important;
border-radius: var(--r-pill) !important;
font-size: 0.70rem !important;
font-weight: 700 !important;
letter-spacing: 0.08em !important;
text-transform: uppercase !important;
color: var(--text-muted) !important;
margin-bottom: 1.4rem !important;
font-family: var(--font) !important;
}
.section-title {
font-size: clamp(1.8rem, 4vw, 2.6rem) !important;
font-weight: 800 !important;
text-align: center !important;
letter-spacing: -0.04em !important;
line-height: 1.08 !important;
color: var(--text-primary) !important;
font-family: var(--font) !important;
}
.section-sub {
text-align: center !important;
color: var(--text-muted) !important;
font-size: 0.88rem !important;
line-height: 1.75 !important;
margin-bottom: 3rem !important;
font-family: var(--font) !important;
}
/* ── Nav badge pill ── */
.nav-badge-pill {
display: inline-flex !important;
align-items: center !important;
gap: 0.4rem !important;
padding: 0.22rem 0.85rem !important;
background: var(--surface-raised) !important;
border: 1px solid rgba(0,0,0,0.07) !important;
border-radius: var(--r-pill) !important;
box-shadow: var(--nm-xs) !important;
color: var(--text-secondary) !important;
font-size: 0.74rem !important;
font-weight: 500 !important;
font-family: var(--font) !important;
}
/* Hero pills */
.hero-nav-pill {
font-size: 0.78rem !important;
font-weight: 500 !important;
padding: 0.37rem 0.95rem !important;
background: var(--surface-raised) !important;
border: 1px solid rgba(0,0,0,0.06) !important;
box-shadow: var(--nm-sm) !important;
border-radius: var(--r-pill) !important;
color: var(--text-secondary) !important;
text-decoration: none !important;
transition: all var(--t-fast) !important;
font-family: var(--font) !important;
}
.hero-nav-pill:hover {
box-shadow: var(--nm-md) !important;
color: var(--text-primary) !important;
transform: translateY(-1px) !important;
}
/* Benefit pills */
.benefit-pill {
font-size: 0.76rem !important;
font-weight: 500 !important;
padding: 0.35rem 0.88rem !important;
background: var(--surface-raised) !important;
border: 1px solid rgba(0,0,0,0.06) !important;
box-shadow: var(--nm-sm) !important;
border-radius: var(--r-pill) !important;
color: var(--text-secondary) !important;
font-family: var(--font) !important;
}
/* Newsletter pill */
.newsletter-pill {
font-size: 0.78rem !important;
background: var(--surface-raised) !important;
border: 1px solid rgba(0,0,0,0.06) !important;
box-shadow: var(--nm-sm) !important;
padding: 0.3rem 0.3rem 0.3rem 0.92rem !important;
border-radius: var(--r-pill) !important;
font-family: var(--font) !important;
color: var(--text-secondary) !important;
}
.newsletter-pill .btn-notify {
font-family: var(--font) !important;
font-size: 0.76rem !important;
font-weight: 700 !important;
padding: 0.34rem 0.88rem !important;
background: var(--brand) !important;
color: var(--w-0) !important;
border: none !important;
border-radius: var(--r-pill) !important;
box-shadow: var(--nm-brand) !important;
cursor: pointer !important;
transition: all var(--t-fast) !important;
}
.newsletter-pill .btn-notify:hover {
background: var(--brand-light) !important;
transform: translateY(-1px) !important;
}
/* ══════════════════════════════════════════════════════════════════════════════
§15 HERO — Concentric neumorphic orb
══════════════════════════════════════════════════════════════════════════════ */
.hero {
background: transparent !important;
min-height: 95vh !important;
padding: 6rem 1.5rem 4.5rem !important;
display: flex !important;
align-items: center !important;
justify-content: center !important;
text-align: center !important;
position: relative !important;
overflow: hidden !important;
}
/* Nuke enchanted.css ::after blue gradient */
.hero::after {
display: none !important;
}
/* Orb rings — pure white neumorphic */
.hero-orb-bg .ring-1 {
background:
radial-gradient(circle,
rgba(255,255,255,1.0) 20%,
rgba(242,242,242,0.65) 50%,
transparent 80%) !important;
box-shadow:
0 0 120px rgba(255,255,255,1.0),
0 0 250px rgba(220,220,220,0.45) !important;
}
.hero-orb-bg .ring-2 {
border: 1px solid rgba(0,0,0,0.05) !important;
box-shadow:
inset 4px 4px 24px rgba(255,255,255,0.9),
inset -4px -4px 24px rgba(0,0,0,0.04) !important;
}
.hero-orb-bg .ring-3 { border: 1px solid rgba(0,0,0,0.035) !important; }
.hero-orb-bg .ring-4 { border: 1px solid rgba(0,0,0,0.022) !important; }
.hero-orb-bg .ring-5 { border: 1px solid rgba(0,0,0,0.012) !important; }
/* Hero update badge */
.hero-update-badge {
background: var(--surface-raised) !important;
border: 1px solid rgba(0,0,0,0.07) !important;
box-shadow: var(--nm-sm) !important;
color: var(--text-secondary) !important;
font-size: 0.74rem !important;
font-weight: 500 !important;
padding: 0.28rem 1rem !important;
border-radius: var(--r-pill) !important;
font-family: var(--font) !important;
transition: all var(--t-fast) !important;
text-decoration: none !important;
display: inline-flex !important;
align-items: center !important;
gap: 0.4rem !important;
margin-bottom: 2rem !important;
}
.hero-update-badge:hover {
box-shadow: var(--nm-md) !important;
transform: translateY(-1px) !important;
}
/* Hero title */
.hero-title {
font-size: clamp(2.8rem, 7.5vw, 5.5rem) !important;
font-weight: 800 !important;
letter-spacing: -0.055em !important;
line-height: 0.95 !important;
color: var(--text-primary) !important;
font-family: var(--font) !important;
}
/* Title accent — no blue, just black-on-white contrast enhancement */
.hero-title-accent {
/* Remove indigo gradient from enchanted.css */
background: none !important;
-webkit-background-clip: unset !important;
-webkit-text-fill-color: unset !important;
background-clip: unset !important;
color: var(--text-primary) !important;
/* Instead: slightly embossed via text-shadow */
text-shadow:
1px 1px 0 rgba(255,255,255,0.6),
-1px -1px 0 rgba(0,0,0,0.08) !important;
}
.hero-sub {
font-size: 0.95rem !important;
color: var(--text-muted) !important;
line-height: 1.78 !important;
max-width: 510px !important;
margin: 1.25rem auto 2rem !important;
font-family: var(--font) !important;
}
/* ══════════════════════════════════════════════════════════════════════════════
§16 FOOTER
══════════════════════════════════════════════════════════════════════════════ */
.site-footer {
background: var(--surface-raised) !important;
border-top: none !important;
box-shadow:
0 0 0 1px rgba(0,0,0,0.055),
0 -1px 0 rgba(255,255,255,0.98),
0 -4px 24px rgba(0,0,0,0.05) !important;
padding: 1.75rem !important;
margin-top: auto !important;
position: relative !important;
z-index: 1 !important;
}
.footer-inner {
max-width: 1100px !important;
margin: 0 auto !important;
display: flex !important;
flex-wrap: wrap !important;
gap: 1.5rem !important;
align-items: center !important;
}
.footer-name { font-weight: 700 !important; font-size: 0.87rem !important; letter-spacing: -0.025em !important; color: var(--text-primary) !important; font-family: var(--font) !important; }
.footer-tagline { font-size: 0.70rem !important; color: var(--text-muted) !important; font-family: var(--font) !important; }
.footer-nav a { font-size: 0.78rem !important; color: var(--text-muted) !important; font-family: var(--font) !important; transition: color var(--t-fast) !important; }
.footer-nav a:hover { color: var(--text-primary) !important; }
.footer-copy { font-size: 0.70rem !important; color: var(--text-muted) !important; margin-left: auto !important; font-family: var(--font) !important; }
/* ══════════════════════════════════════════════════════════════════════════════
§17 BENEFIT CARDS — Raised white tiles
══════════════════════════════════════════════════════════════════════════════ */
.benefit-card {
background: var(--surface-raised) !important;
border: 1px solid rgba(0,0,0,0.055) !important;
outline: 1px solid rgba(255,255,255,0.97) !important;
outline-offset: -1px !important;
border-radius: var(--r-xl) !important;
padding: 1.65rem !important;
box-shadow: var(--nm-lg) !important;
transition: all var(--t-base) !important;
}
.benefit-card:hover {
box-shadow: var(--nm-xl) !important;
transform: translateY(-3px) !important;
}
/* Visual wells inside benefit cards */
.benefit-visual {
background: var(--w-3) !important;
border: 1px solid rgba(255,255,255,0.90) !important;
border-radius: var(--r-lg) !important;
box-shadow: var(--nm-in-lg) !important;
padding: 1.4rem !important;
margin-bottom: 1.15rem !important;
min-height: 135px !important;
display: flex !important;
align-items: center !important;
justify-content: center !important;
position: relative !important;
overflow: hidden !important;
}
.benefit-card h3 {
font-size: 0.95rem !important;
font-weight: 700 !important;
letter-spacing: -0.025em !important;
color: var(--text-primary) !important;
font-family: var(--font) !important;
}
.benefit-card p {
font-size: 0.83rem !important;
color: var(--text-muted) !important;
line-height: 1.72 !important;
margin-top: 0.32rem !important;
font-family: var(--font) !important;
}
/* Clock visual */
.benefit-clock {
background: var(--surface-raised) !important;
border: 1px solid rgba(0,0,0,0.06) !important;
box-shadow: var(--nm-md) !important;
}
.benefit-clock::before {
background: var(--w-3) !important;
box-shadow: var(--nm-in-sm) !important;
}
.clock-hand-h,
.clock-hand-m { background: var(--text-primary) !important; }
/* Bars visual */
.benefit-bar {
background: var(--surface-raised) !important;
border: 1px solid rgba(0,0,0,0.06) !important;
box-shadow: var(--nm-sm) !important;
}
.bar-label {
background: var(--surface-raised) !important;
border: 1px solid rgba(0,0,0,0.06) !important;
box-shadow: var(--nm-xs) !important;
color: var(--text-muted) !important;
font-family: var(--font-mono) !important;
}
/* Team visual */
.team-avatar {
background: var(--surface-raised) !important;
border: 1px solid rgba(0,0,0,0.07) !important;
box-shadow: var(--nm-sm) !important;
}
.team-center-icon {
background: linear-gradient(145deg, var(--brand-light), var(--brand-dark)) !important;
border: 1px solid rgba(255,255,255,0.08) !important;
box-shadow: var(--nm-brand) !important;
}
/* ══════════════════════════════════════════════════════════════════════════════
§18 PRICING CARDS
══════════════════════════════════════════════════════════════════════════════ */
.plan-card {
background: var(--surface-raised) !important;
border: 1px solid rgba(0,0,0,0.06) !important;
outline: 1px solid rgba(255,255,255,0.96) !important;
outline-offset: -1px !important;
border-radius: var(--r-xl) !important;
padding: 1.75rem !important;
box-shadow: var(--nm-lg) !important;
transition: all var(--t-base) !important;
}
.plan-card:hover {
box-shadow: var(--nm-xl) !important;
transform: translateY(-2px) !important;
}
.plan-card.plan-popular {
border-color: rgba(0,0,0,0.11) !important;
box-shadow: var(--nm-xl) !important;
margin-top: -8px !important;
padding-top: 2rem !important;
}
.plan-badge {
background: var(--brand) !important;
color: var(--w-0) !important;
font-size: 0.67rem !important;
font-weight: 700 !important;
letter-spacing: 0.04em !important;
padding: 0.19rem 0.68rem !important;
border-radius: var(--r-pill) !important;
font-family: var(--font) !important;
}
.plan-name { font-size: 0.95rem !important; font-weight: 700 !important; letter-spacing: -0.025em !important; font-family: var(--font) !important; }
.plan-price-num { font-size: 2.4rem !important; font-weight: 800 !important; letter-spacing: -0.055em !important; color: var(--text-primary) !important; font-family: var(--font) !important; }
.plan-desc { font-size: 0.82rem !important; color: var(--text-muted) !important; line-height: 1.65 !important; font-family: var(--font) !important; }
.plan-features { font-size: 0.83rem !important; color: var(--text-secondary) !important; font-family: var(--font) !important; }
.plan-features li::before { color: var(--text-primary) !important; font-weight: 800 !important; }
.plan-cta-hint { font-size: 0.77rem !important; color: var(--text-muted) !important; text-align: center !important; margin-top: 0.75rem !important; }
/* Toggle buttons */
.toggle-btn {
padding: 0.44rem 1.1rem !important;
border-radius: var(--r-pill) !important;
font-size: 0.84rem !important;
font-weight: 600 !important;
font-family: var(--font) !important;
cursor: pointer !important;
border: none !important;
background: transparent !important;
color: var(--text-muted) !important;
transition: all var(--t-fast) !important;
}
.toggle-btn.active {
background: var(--surface-raised) !important;
color: var(--text-primary) !important;
box-shadow: var(--nm-sm) !important;
border: 1px solid rgba(0,0,0,0.07) !important;
}
/* ══════════════════════════════════════════════════════════════════════════════
§19 STEPS / HOW IT WORKS
══════════════════════════════════════════════════════════════════════════════ */
.step-num {
background: var(--brand) !important;
color: var(--w-0) !important;
width: 46px !important;
height: 46px !important;
font-size: 0.79rem !important;
font-weight: 700 !important;
box-shadow: var(--nm-brand) !important;
border-radius: 50% !important;
font-family: var(--font) !important;
}
.step h3 {
font-size: 0.88rem !important;
font-weight: 700 !important;
letter-spacing: -0.025em !important;
font-family: var(--font) !important;
}
.step p {
font-size: 0.80rem !important;
color: var(--text-muted) !important;
line-height: 1.65 !important;
font-family: var(--font) !important;
}
.step-arrow {
color: rgba(0,0,0,0.18) !important;
font-size: 1.3rem !important;
}
/* ══════════════════════════════════════════════════════════════════════════════
§20 STATS STRIP, TRUST CHIPS, FAQ, BRAIN CARDS
══════════════════════════════════════════════════════════════════════════════ */
/* Stats strip */
.stats-strip {
background: var(--surface-raised) !important;
border: 1px solid rgba(0,0,0,0.06) !important;
outline: 1px solid rgba(255,255,255,0.96) !important;
outline-offset: -1px !important;
border-radius: var(--r-xl) !important;
box-shadow: var(--nm-lg) !important;
}
.stats-num {
font-size: 2rem !important;
font-weight: 800 !important;
letter-spacing: -0.055em !important;
color: var(--text-primary) !important;
font-family: var(--font) !important;
}
.stats-desc { font-size: 0.77rem !important; color: var(--text-muted) !important; font-family: var(--font) !important; }
/* Trust strip */
.trust-strip {
background: var(--surface-raised) !important;
border-top: 1px solid rgba(0,0,0,0.05) !important;
border-bottom: 1px solid rgba(0,0,0,0.05) !important;
box-shadow:
0 1px 0 rgba(255,255,255,0.96),
0 -1px 0 rgba(255,255,255,0.96) !important;
}
.trust-chip {
background: var(--surface) !important;
border: 1px solid rgba(0,0,0,0.06) !important;
box-shadow: var(--nm-sm) !important;
color: var(--text-secondary) !important;
font-family: var(--font) !important;
border-radius: var(--r-pill) !important;
font-size: 0.74rem !important;
font-weight: 600 !important;
}
.trust-label {
font-size: 0.70rem !important;
font-weight: 700 !important;
letter-spacing: 0.07em !important;
text-transform: uppercase !important;
color: var(--text-muted) !important;
font-family: var(--font) !important;
}
/* FAQ */
.faq-item {
background: var(--surface-raised) !important;
border: 1px solid rgba(0,0,0,0.06) !important;
outline: 1px solid rgba(255,255,255,0.96) !important;
outline-offset: -1px !important;
border-radius: var(--r-lg) !important;
box-shadow: var(--nm-sm) !important;
overflow: hidden !important;
transition: box-shadow var(--t-base) !important;
}
.faq-item.open,
.faq-item:focus-within {
box-shadow: var(--nm-md) !important;
}
.faq-q {
font-size: 0.88rem !important;
font-weight: 600 !important;
color: var(--text-primary) !important;
padding: 1rem 1.3rem !important;
font-family: var(--font) !important;
letter-spacing: -0.015em !important;
transition: background var(--t-fast) !important;
}
.faq-q:hover { background: var(--surface) !important; }
.faq-chevron { color: var(--text-muted) !important; }
.faq-a {
padding: 0 1.3rem 1rem !important;
font-size: 0.84rem !important;
color: var(--text-muted) !important;
line-height: 1.78 !important;
font-family: var(--font) !important;
}
/* Brain cards */
.brain-card {
background: var(--surface-raised) !important;
border: 1px solid rgba(0,0,0,0.06) !important;
outline: 1px solid rgba(255,255,255,0.96) !important;
outline-offset: -1px !important;
border-radius: var(--r-xl) !important;
box-shadow: var(--nm-lg) !important;
transition: all var(--t-base) !important;
}
.brain-card:hover {
box-shadow: var(--nm-xl) !important;
transform: translateY(-2px) !important;
}
.brain-card-num {
background: var(--brand) !important;
color: var(--w-0) !important;
border-radius: var(--r-md) !important;
box-shadow: var(--nm-brand) !important;
font-family: var(--font) !important;
font-weight: 800 !important;
}
.brain-card h3 {
font-size: 0.95rem !important;
font-weight: 700 !important;
letter-spacing: -0.03em !important;
font-family: var(--font) !important;
}
.brain-card p {
font-size: 0.82rem !important;
color: var(--text-muted) !important;
line-height: 1.72 !important;
font-family: var(--font) !important;
}
/* CTA section */
.cta h2 {
font-size: clamp(1.55rem, 3vw, 2.2rem) !important;
font-weight: 800 !important;
letter-spacing: -0.045em !important;
font-family: var(--font) !important;
}
.cta p {
color: var(--text-muted) !important;
font-size: 0.88rem !important;
font-family: var(--font) !important;
}
/* ══════════════════════════════════════════════════════════════════════════════
§21 CHROME DETAILS — Scrollbar, selection, focus, misc
══════════════════════════════════════════════════════════════════════════════ */
/* Scrollbar — pure white themed */
::-webkit-scrollbar { width: 5px; height: 5px; }
::-webkit-scrollbar-track { background: var(--w-3); }
::-webkit-scrollbar-thumb {
background: rgba(0,0,0,0.18);
border-radius: 99px;
}
::-webkit-scrollbar-thumb:hover { background: rgba(0,0,0,0.28); }
/* Selection — minimal, no colour cast */
::selection {
background: rgba(0,0,0,0.10) !important;
color: var(--text-primary) !important;
}
/* Focus ring — accessible but pure black */
*:focus-visible {
outline: 2px solid rgba(10,10,10,0.4) !important;
outline-offset: 2px !important;
}
/* Empty state */
.empty-state {
color: var(--text-muted) !important;
font-family: var(--font) !important;
}
.empty-state span { font-size: 2.5rem !important; opacity: 0.5; }
/* Back link */
.back-link {
font-size: 0.79rem !important;
color: var(--text-muted) !important;
font-family: var(--font) !important;
transition: color var(--t-fast) !important;
}
.back-link:hover { color: var(--text-primary) !important; }
/* Search bar */
.search-bar {
display: flex !important;
gap: 0.6rem !important;
align-items: center !important;
margin-bottom: 1.25rem !important;
flex-wrap: wrap !important;
}
.search-bar .form-input { flex: 1 !important; min-width: 200px !important; }
/* Mini progress bar */
.mini-bar {
height: 5px !important;
background: var(--w-4) !important;
border-radius: 99px !important;
overflow: hidden !important;
width: 70px !important;
box-shadow: var(--nm-in-xs) !important;
}
/* ══════════════════════════════════════════════════════════════════════════════
§22 MICRO-ANIMATIONS — Entrance, hover spring, pulse
══════════════════════════════════════════════════════════════════════════════ */
@keyframes nmFadeUp {
from { opacity: 0; transform: translateY(18px); }
to { opacity: 1; transform: translateY(0); }
}
@keyframes nmFadeIn {
from { opacity: 0; }
to { opacity: 1; }
}
@keyframes nmPop {
0% { transform: scale(0.97); opacity: 0.6; }
60% { transform: scale(1.01); opacity: 1; }
100% { transform: scale(1); }
}
@keyframes nmPulse {
0%, 100% { opacity: 1; box-shadow: 0 0 0 0 rgba(22,163,74,0.4); }
50% { opacity: 0.7; box-shadow: 0 0 0 4px rgba(22,163,74,0); }
}
/* Apply animations */
.hero-inner { animation: nmFadeUp 0.55s cubic-bezier(0.4,0,0.2,1) both; }
.hero-update-badge { animation: nmFadeUp 0.40s cubic-bezier(0.4,0,0.2,1) both; }
.hero-code { animation: nmFadeUp 0.65s 0.10s cubic-bezier(0.4,0,0.2,1) both; }
.hero-nav-pills { animation: nmFadeIn 0.50s 0.20s ease both; }
/* Stagger cards in grids */
.stat-grid .stat-card:nth-child(1) { animation: nmFadeUp 0.4s 0.05s ease both; }
.stat-grid .stat-card:nth-child(2) { animation: nmFadeUp 0.4s 0.10s ease both; }
.stat-grid .stat-card:nth-child(3) { animation: nmFadeUp 0.4s 0.15s ease both; }
.stat-grid .stat-card:nth-child(4) { animation: nmFadeUp 0.4s 0.20s ease both; }
.benefits-grid .benefit-card:nth-child(1) { animation: nmFadeUp 0.45s 0.05s ease both; }
.benefits-grid .benefit-card:nth-child(2) { animation: nmFadeUp 0.45s 0.12s ease both; }
.benefits-grid .benefit-card:nth-child(3) { animation: nmFadeUp 0.45s 0.19s ease both; }
/* Status dot pulse — no colour, pure geometric */
.status-dot.active { animation: nmPulse 2.5s ease-in-out infinite; }
/* ══════════════════════════════════════════════════════════════════════════════
§23 RESPONSIVE — Mobile-first adjustments
══════════════════════════════════════════════════════════════════════════════ */
/* ── ≤900px: 2-col grid ─── */
@media (max-width: 900px) {
.benefits-grid { grid-template-columns: 1fr 1fr !important; }
.stats-strip { grid-template-columns: repeat(2,1fr) !important; }
.brain-grid { grid-template-columns: 1fr !important; }
.pricing-grid { grid-template-columns: 1fr !important; }
.plan-card.plan-popular { margin-top: 0 !important; }
}
/* ── ≤768px: tighter ─── */
@media (max-width: 768px) {
.benefits-grid { grid-template-columns: 1fr 1fr !important; }
.brain-grid { grid-template-columns: 1fr !important; }
/* Nav — collapse */
.nav-toggle { display: flex !important; }
.nav-links {
display: none !important;
flex-direction: column !important;
align-items: flex-start !important;
width: 100% !important;
padding: 0.5rem 0 !important;
background: var(--surface-raised) !important;
border-top: 1px solid rgba(0,0,0,0.055) !important;
margin-top: 0.5rem !important;
box-shadow: 0 8px 24px rgba(0,0,0,0.06) !important;
border-radius: 0 0 var(--r-lg) var(--r-lg) !important;
}
.nav-links.open { display: flex !important; }
.nav-links li { width: 100% !important; }
.nav-link {
display: block !important;
padding: 0.55rem 0.85rem !important;
width: 100% !important;
border-radius: 0 !important;
}
.navbar { flex-wrap: wrap !important; }
.nav-brand { flex: 1 !important; }
}
/* ── ≤640px: single col ─── */
@media (max-width: 640px) {
/* Hero */
.hero {
padding: 4.5rem 1rem 3rem !important;
min-height: auto !important;
}
.hero-title { font-size: clamp(2.2rem, 10vw, 2.9rem) !important; }
.hero-inner { padding: 0 0.25rem !important; }
.hero-code { margin: 2rem 0 0 !important; border-radius: var(--r-lg) !important; }
.hero-code pre { font-size: 0.70rem !important; padding: 1rem !important; }
/* Steps */
.steps { flex-direction: column !important; align-items: center !important; gap: 0 !important; width: 100% !important; }
.step { min-width: unset !important; max-width: 100% !important; width: 100% !important; padding: 0 0.25rem !important; }
.step-arrow { transform: rotate(90deg) !important; padding: 0.15rem 0 !important; font-size: 1.2rem !important; }
/* Grids */
.benefits-grid { grid-template-columns: 1fr !important; }
.brain-grid { grid-template-columns: 1fr !important; }
.stats-strip {
grid-template-columns: repeat(2,1fr) !important;
padding: 1.25rem !important;
}
.stats-num { font-size: 1.6rem !important; }
/* Auth */
.auth-card { padding: 1.75rem 1.2rem !important; }
/* Content */
.main-content { padding: 1.3rem 0.9rem !important; }
.section { padding: 3rem 1rem !important; }
/* Stat grid */
.stat-grid { grid-template-columns: 1fr 1fr !important; }
/* Hero actions stacked */
.hero-actions {
flex-direction: column !important;
align-items: center !important;
}
.btn-hero-primary,
.btn-hero-outline {
width: 100% !important;
justify-content: center !important;
max-width: 320px !important;
}
/* Nav pills wrap tightly */
.hero-nav-pills { padding: 1rem 1rem 2rem !important; }
/* Trust strip */
.trust-strip { padding: 1rem !important; gap: 0.5rem !important; }
/* Pricing */
.plan-card.plan-popular { margin-top: 0 !important; }
}
/* ── ≤480px: smallest screens ─── */
@media (max-width: 480px) {
.stat-grid { grid-template-columns: 1fr !important; }
.stats-strip { gap: 0.75rem !important; }
:root { --r-xl: 20px; --r-2xl: 26px; } /* tighter radius at small sizes */
/* Slightly smaller neumorphic depth — less dramatic on small screens */
:root {
--nm-lg: 8px 8px 22px rgba(0,0,0,0.12), -6px -6px 16px rgba(255,255,255,1.0);
--nm-xl: 10px 10px 28px rgba(0,0,0,0.13), -7px -7px 20px rgba(255,255,255,1.0);
}
}
/* ── ≥1280px: max desktop polish ─── */
@media (min-width: 1280px) {
/* Even more dramatic depth on large screens */
:root {
--nm-xl: 16px 16px 44px rgba(0,0,0,0.14), -12px -12px 32px rgba(255,255,255,1.0);
}
.hero { min-height: 94vh !important; }
.hero-title { font-size: 5.8rem !important; }
}
/* ══════════════════════════════════════════════════════════════════════════════
§24 PRINT — Flatten neumorphism (no shadows on paper)
══════════════════════════════════════════════════════════════════════════════ */
@media print {
* { box-shadow: none !important; }
.navbar { position: static !important; }
body::before { display: none !important; }
.hero-orb-bg { display: none !important; }
}
/* ══════════════════════════════════════════════════════════════════════════════
END OF neomorph-pure.css · Part 1 of 2 — below: Part 2-A begins
══════════════════════════════════════════════════════════════════════════════ */
/* ╔══════════════════════════════════════════════════════════════════════════════╗
║ P A R T 2 - A · neomorph-pure.css §25 – §40 ║
║ Depth refinements · Indigo purge · Landing polish · Dashboard extras ║
║ Advanced NM effects · Interaction polish · Component states ║
╚══════════════════════════════════════════════════════════════════════════════╝ */
/* ══════════════════════════════════════════════════════════════════════════════
§25 COMPLETE INDIGO / BLUE PURGE
══════════════════════════════════════════════════════════════════════════════
Kill every rgba(91,94,244,x) and rgba(41,121,255,x) that escaped Part 1.
Enchanted.css line refs: 208,209,267,303,304,538,539,622,716-718,724-725,
737-738,981,984. Dashboard.css: 198,199,206,213,237,262,264.
Body::before ambient tints: lines 91-92, 287.
Hero gradient accent: line 324.
═══════════════════════════════════════════════════════════════════════════ */
/* ── body::before ambient — nuke ALL tinted gradients unconditionally ── */
body::before {
background:
radial-gradient(ellipse 180% 120% at 50% -20%,
rgba(255,255,255,0.98) 0%,
rgba(255,255,255,0.60) 30%,
transparent 65%),
radial-gradient(ellipse 80% 80% at 0% 0%,
rgba(0,0,0,0.022) 0%,
transparent 50%),
radial-gradient(ellipse 80% 80% at 100% 100%,
rgba(0,0,0,0.022) 0%,
transparent 50%) !important;
}
/* ── hero::after indigo circle — kill it ── */
.hero::after {
background: none !important;
display: none !important;
}
/* ── hero-title-accent indigo gradient text — replace with pure black emboss ── */
.hero-title-accent {
background: none !important;
-webkit-background-clip: unset !important;
background-clip: unset !important;
-webkit-text-fill-color: var(--text-primary) !important;
color: var(--text-primary) !important;
/* Crisp emboss: 1px white highlight top-left, 1px dark shadow bottom-right */
text-shadow:
1px 1px 0 rgba(255,255,255,0.70),
-1px -1px 0 rgba(0,0,0,0.10) !important;
}
/* ── --brand-accent variable — repoint to black so any accidental use is safe ── */
:root { --brand-accent: #0a0a0a !important; }
/* ── form focus ring — was indigo, now pure black halo ── */
.form-group input:focus,
.form-group select:focus,
.form-input:focus,
.form-select:focus,
textarea:focus {
border-color: rgba(0,0,0,0.18) !important;
box-shadow:
inset 5px 5px 13px rgba(0,0,0,0.12),
inset -4px -4px 10px rgba(255,255,255,0.98),
0 0 0 3px rgba(10,10,10,0.06) !important;
}
/* ── hero update badge — was indigo border ── */
.hero-update-badge {
border: 1px solid rgba(0,0,0,0.07) !important;
box-shadow:
4px 4px 10px rgba(0,0,0,0.12),
-3px -3px 8px rgba(255,255,255,0.95) !important;
}
/* ── data-table hover — was indigo tint ── */
.data-table tbody tr:hover {
background: rgba(0,0,0,0.018) !important;
}
/* ── stat-card hover border — was indigo ── */
.stat-card:hover {
border-color: rgba(0,0,0,0.10) !important;
}
/* ── plan-card popular accent — was indigo ring ── */
.plan-card.plan-popular {
border-color: rgba(0,0,0,0.12) !important;
box-shadow:
14px 14px 38px rgba(0,0,0,0.15),
-10px -10px 28px rgba(255,255,255,1.0) !important;
outline: none !important;
}
/* ── dropzone hover — was indigo ── */
#dropZone:hover,
#dropZone.drag-over,
.dropzone:hover,
.dropzone.drag-over {
border-color: rgba(0,0,0,0.22) !important;
background: var(--w-3) !important;
box-shadow:
inset 7px 7px 18px rgba(0,0,0,0.13),
inset -5px -5px 14px rgba(255,255,255,1.0) !important;
}
/* ── plan-card-dash current — was indigo ── */
.plan-card-dash.plan-current {
border-color: rgba(0,0,0,0.14) !important;
box-shadow:
7px 7px 18px rgba(0,0,0,0.13),
-5px -5px 14px rgba(255,255,255,0.98) !important;
}
/* ── ::selection — was indigo ── */
::selection {
background: rgba(0,0,0,0.10) !important;
color: var(--text-primary) !important;
}
/* ── *:focus-visible — was indigo ── */
*:focus-visible {
outline: 2px solid rgba(10,10,10,0.35) !important;
outline-offset: 2px !important;
}
/* ── SVG ring fill glow — was blue drop-shadow ── */
.ring-fill {
stroke: var(--brand) !important;
filter: none !important;
stroke-linecap: round !important;
}
/* ── sub-progress-fill — was blue gradient ── */
.sub-progress-fill {
background: var(--brand) !important;
box-shadow: none !important;
}
.sub-progress-fill.warn { background: var(--warning) !important; }
.sub-progress-fill.danger { background: var(--danger) !important; }
/* ══════════════════════════════════════════════════════════════════════════════
§26 DEPTH REFINEMENTS — Surface micro-geometry
══════════════════════════════════════════════════════════════════════════════
Every raised surface in neumorphism has three physical layers:
1. The shadow field (box-shadow — done in Part 1)
2. A specular top-left rim (::before — bright 1px stripe)
3. A shadow bottom-right bleed (::after — dark corner fade)
This is what separates "looks nice" from "feels three-dimensional".
═══════════════════════════════════════════════════════════════════════════ */
/* ── Card specular rim (top-left highlight) ── */
.card::before {
content: '' !important;
position: absolute !important;
inset: 0 !important;
border-radius: inherit !important;
/* Top-left specular — catches the 145° directional light */
background: linear-gradient(145deg,
rgba(255,255,255,0.90) 0%,
rgba(255,255,255,0.30) 12%,
transparent 40%) !important;
pointer-events: none !important;
z-index: 0 !important;
}
/* All card content must sit above the rim layer */
.card > * { position: relative; z-index: 1; }
/* ── Stat card top emboss line ── */
.stat-card {
/* Add inner top border highlight to the existing box-shadow */
box-shadow:
10px 10px 28px rgba(0,0,0,0.14),
-7px -7px 20px rgba(255,255,255,1.0),
inset 0 1px 0 rgba(255,255,255,0.92),
inset 0 -1px 0 rgba(0,0,0,0.04) !important;
}
.stat-card::before {
content: '' !important;
position: absolute !important;
inset: 0 !important;
border-radius: inherit !important;
background: linear-gradient(160deg,
rgba(255,255,255,0.88) 0%,
rgba(255,255,255,0.25) 10%,
transparent 35%) !important;
pointer-events: none !important;
z-index: 0 !important;
}
.stat-card > * { position: relative; z-index: 1; }
/* Auth card specular rim */
.auth-card::before {
content: '' !important;
position: absolute !important;
inset: 0 !important;
border-radius: inherit !important;
background: linear-gradient(145deg,
rgba(255,255,255,0.95) 0%,
rgba(255,255,255,0.40) 10%,
transparent 40%) !important;
pointer-events: none !important;
z-index: 0 !important;
}
.auth-card > * { position: relative; z-index: 1; }
/* Benefit card specular */
.benefit-card::before {
content: '' !important;
position: absolute !important;
inset: 0 !important;
border-radius: inherit !important;
background: linear-gradient(145deg,
rgba(255,255,255,0.88) 0%,
rgba(255,255,255,0.20) 14%,
transparent 40%) !important;
pointer-events: none !important;
z-index: 0 !important;
}
.benefit-card > * { position: relative; z-index: 1; }
/* Plan card specular */
.plan-card::before {
content: '' !important;
position: absolute !important;
inset: 0 !important;
border-radius: inherit !important;
background: linear-gradient(145deg,
rgba(255,255,255,0.88) 0%,
rgba(255,255,255,0.18) 12%,
transparent 38%) !important;
pointer-events: none !important;
z-index: 0 !important;
}
.plan-card > * { position: relative; z-index: 1; }
/* Brain card specular */
.brain-card::before {
content: '' !important;
position: absolute !important;
inset: 0 !important;
border-radius: inherit !important;
background: linear-gradient(145deg,
rgba(255,255,255,0.86) 0%,
rgba(255,255,255,0.18) 12%,
transparent 36%) !important;
pointer-events: none !important;
z-index: 0 !important;
}
.brain-card > * { position: relative; z-index: 1; }
/* ── SVG filter: micro-grain noise on body surfaces ──────────────────────────
Pure white has zero texture — feels plasticky on screen.
A sub-1% monochrome noise layer breaks the monotony without adding hue.
Achieved with an SVG feTurbulence filter applied via body::after.
─────────────────────────────────────────────────────────────────────────── */
body::after {
content: '' !important;
display: block !important;
position: fixed !important;
inset: 0 !important;
pointer-events: none !important;
z-index: 0 !important;
opacity: 0.028 !important;
/* Monochrome Perlin noise encoded as inline SVG data-URI */
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='300' height='300'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.80' numOctaves='4' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='300' height='300' filter='url(%23n)'/%3E%3C/svg%3E") !important;
background-repeat: repeat !important;
background-size: 300px 300px !important;
mix-blend-mode: multiply !important;
}
/* ══════════════════════════════════════════════════════════════════════════════
§27 LANDING PAGE POLISH — Hero brand row, logo sphere, orb refinements
══════════════════════════════════════════════════════════════════════════════ */
/* Hero brand row */
.hero-brand-row {
display: flex !important;
align-items: center !important;
justify-content: center !important;
gap: 1.2rem !important;
margin-bottom: 1.25rem !important;
flex-wrap: wrap !important;
}
/* 72px logo sphere — physically correct dark ball on white surface */
.hero-logo-icon {
width: 72px !important;
height: 72px !important;
border-radius: 50% !important;
/* Multi-layer sphere illusion: dark base + specular highlight + inner depth */
background:
radial-gradient(circle at 35% 28%,
rgba(70,70,70,0.85) 0%,
rgba(20,20,20,0.95) 45%,
rgba(0,0,0,1.0) 100%) !important;
box-shadow:
/* Main neumorphic lift */
8px 8px 24px rgba(0,0,0,0.28),
-5px -5px 18px rgba(255,255,255,0.95),
/* Inner rim — sphere self-shadow */
inset 2px 2px 8px rgba(255,255,255,0.14),
inset -3px -3px 8px rgba(0,0,0,0.55) !important;
display: flex !important;
align-items: center !important;
justify-content: center !important;
flex-shrink: 0 !important;
position: relative !important;
overflow: hidden !important;
transition: box-shadow var(--t-base), transform var(--t-base) !important;
}
.hero-logo-icon:hover {
transform: translateY(-2px) !important;
box-shadow:
10px 10px 30px rgba(0,0,0,0.32),
-6px -6px 22px rgba(255,255,255,0.98),
inset 2px 2px 8px rgba(255,255,255,0.16),
inset -3px -3px 8px rgba(0,0,0,0.55) !important;
}
/* Specular glint on sphere — top-left catch light */
.hero-logo-icon::before {
content: '' !important;
position: absolute !important;
top: 12% !important;
left: 14% !important;
width: 28% !important;
height: 22% !important;
background: radial-gradient(ellipse,
rgba(255,255,255,0.55) 0%,
transparent 80%) !important;
border-radius: 50% !important;
pointer-events: none !important;
z-index: 1 !important;
}
/* SVG icon inside sphere */
.hero-logo-icon svg {
position: relative !important;
z-index: 2 !important;
width: 34px !important;
height: 34px !important;
fill: rgba(255,255,255,0.95) !important;
filter: drop-shadow(0 1px 2px rgba(0,0,0,0.5)) !important;
}
/* Small navbar logo sphere */
.plx-logo-icon {
width: 38px !important;
height: 38px !important;
border-radius: 50% !important;
background:
radial-gradient(circle at 35% 28%,
rgba(65,65,65,0.9) 0%,
rgba(15,15,15,0.98) 50%,
rgba(0,0,0,1.0) 100%) !important;
box-shadow:
5px 5px 14px rgba(0,0,0,0.26),
-3px -3px 10px rgba(255,255,255,0.95),
inset 1px 1px 5px rgba(255,255,255,0.12),
inset -2px -2px 5px rgba(0,0,0,0.5) !important;
display: flex !important;
align-items: center !important;
justify-content: center !important;
position: relative !important;
overflow: hidden !important;
}
.plx-logo-icon::before {
content: '' !important;
position: absolute !important;
top: 10% !important;
left: 12% !important;
width: 30% !important;
height: 24% !important;
background: radial-gradient(ellipse,
rgba(255,255,255,0.45) 0%,
transparent 80%) !important;
border-radius: 50% !important;
pointer-events: none !important;
z-index: 1 !important;
}
.plx-logo-icon svg {
position: relative !important;
z-index: 2 !important;
width: 18px !important;
height: 18px !important;
fill: rgba(255,255,255,0.95) !important;
}
/* Orb ring refinement — tighter specular on ring-2 */
.hero-orb-bg .ring-2 {
border: 1px solid rgba(0,0,0,0.045) !important;
box-shadow:
inset 3px 3px 18px rgba(255,255,255,0.95),
inset -3px -3px 18px rgba(0,0,0,0.03),
2px 2px 10px rgba(255,255,255,0.60),
-2px -2px 10px rgba(0,0,0,0.02) !important;
}
/* ══════════════════════════════════════════════════════════════════════════════
§28 BENEFIT ANIMATIONS — Clock hands rotate, bar chart enters on load
══════════════════════════════════════════════════════════════════════════════ */
/* ── Clock hand rotation ── */
@keyframes clockHourRotate {
from { transform: rotate(-30deg); }
to { transform: rotate(330deg); }
}
@keyframes clockMinRotate {
from { transform: rotate(150deg); }
to { transform: rotate(510deg); }
}
.clock-hand-h {
animation: clockHourRotate 12s linear infinite !important;
transform-origin: bottom center !important;
}
.clock-hand-m {
animation: clockMinRotate 2s linear infinite !important;
transform-origin: bottom center !important;
}
/* Clock center dot */
.clock-center {
background: var(--text-primary) !important;
width: 5px !important;
height: 5px !important;
border-radius: 50% !important;
position: absolute !important;
box-shadow: 0 0 0 2px rgba(255,255,255,0.8) !important;
z-index: 2 !important;
}
/* ── Bar chart enter animation ── */
@keyframes barRise {
from { transform: scaleY(0); opacity: 0.3; }
to { transform: scaleY(1); opacity: 1; }
}
.benefit-bar {
transform-origin: bottom center !important;
animation: barRise 0.65s cubic-bezier(0.34,1.56,0.64,1) both !important;
}
.benefit-bar:nth-child(1) { animation-delay: 0.05s !important; }
.benefit-bar:nth-child(2) { animation-delay: 0.12s !important; }
.benefit-bar:nth-child(3) { animation-delay: 0.19s !important; }
.benefit-bar:nth-child(4) { animation-delay: 0.26s !important; }
/* ── Team node pulse ── */
@keyframes teamPulse {
0%, 100% { transform: scale(1); }
50% { transform: scale(1.04); }
}
.team-node:nth-child(1) .team-avatar { animation: teamPulse 3.2s ease-in-out 0.0s infinite; }
.team-node:nth-child(2) .team-avatar { animation: teamPulse 3.2s ease-in-out 0.8s infinite; }
.team-node:nth-child(3) .team-avatar { animation: teamPulse 3.2s ease-in-out 1.6s infinite; }
/* ══════════════════════════════════════════════════════════════════════════════
§29 PLAN DONATE + PLAN QUERIES
══════════════════════════════════════════════════════════════════════════════ */
.plan-queries {
font-size: 0.875rem !important;
color: var(--text-muted) !important;
margin-bottom: 1.1rem !important;
font-family: var(--font) !important;
line-height: 1.5 !important;
}
.plan-num {
font-size: 1.6rem !important;
font-weight: 800 !important;
letter-spacing: -0.05em !important;
color: var(--text-primary) !important;
font-family: var(--font) !important;
display: inline-block !important;
vertical-align: middle !important;
/* Subtle emboss on the big number */
text-shadow:
1px 1px 0 rgba(255,255,255,0.65),
-1px -1px 0 rgba(0,0,0,0.07) !important;
}
.plan-donate {
display: flex !important;
align-items: center !important;
gap: 0.5rem !important;
justify-content: center !important;
margin-top: 2rem !important;
font-size: 0.78rem !important;
color: var(--text-muted) !important;
font-family: var(--font) !important;
padding-top: 1.25rem !important;
/* Divider line — inset ruled line */
border-top: 1px solid rgba(0,0,0,0.055) !important;
box-shadow: 0 -1px 0 rgba(255,255,255,0.9) !important;
}
.plan-price-per {
font-size: 0.82rem !important;
color: var(--text-muted) !important;
font-family: var(--font) !important;
align-self: flex-end !important;
padding-bottom: 0.35rem !important;
}
.plan-price {
display: flex !important;
align-items: baseline !important;
gap: 0.2rem !important;
margin-bottom: 0.4rem !important;
}
/* Toggle pill discount badge */
.toggle-pill-discount {
display: inline-flex !important;
align-items: center !important;
padding: 0.19rem 0.65rem !important;
background: var(--surface-input) !important;
border: 1px solid rgba(0,0,0,0.07) !important;
border-radius: var(--r-pill) !important;
box-shadow: var(--nm-in-xs) !important;
font-size: 0.71rem !important;
font-weight: 700 !important;
color: var(--text-muted) !important;
font-family: var(--font) !important;
}
/* ══════════════════════════════════════════════════════════════════════════════
§30 DASHBOARD EXTRAS — Upload, file rows, info card, key reveal header
══════════════════════════════════════════════════════════════════════════════ */
/* ── Usage ring wrapper ── */
.usage-ring {
position: relative !important;
width: 90px !important;
height: 90px !important;
margin: 0.5rem auto !important;
}
.ring-svg {
width: 100% !important;
height: 100% !important;
transform: rotate(-90deg) !important;
overflow: visible !important;
}
.ring-label {
position: absolute !important;
inset: 0 !important;
display: flex !important;
align-items: center !important;
justify-content: center !important;
flex-direction: row !important;
gap: 0 !important;
}
.ring-used {
font-size: 1.05rem !important;
font-weight: 800 !important;
color: var(--text-primary) !important;
font-family: var(--font) !important;
letter-spacing: -0.04em !important;
}
.ring-sep {
font-size: 0.72rem !important;
color: var(--text-faint) !important;
margin: 0 0.05rem !important;
}
.ring-total {
font-size: 0.72rem !important;
color: var(--text-muted) !important;
font-family: var(--font) !important;
align-self: flex-end !important;
padding-bottom: 0.1rem !important;
}
/* ── Upload card ── */
.upload-card {
margin-bottom: 1.5rem !important;
}
.upload-form {
display: flex !important;
flex-direction: column !important;
gap: 0.75rem !important;
}
/* ── File row actions — button group ── */
.file-row-actions {
display: flex !important;
gap: 0.35rem !important;
align-items: center !important;
}
/* Tighten action buttons inside tables */
.file-row-actions .btn {
padding: 0.28rem 0.65rem !important;
font-size: 0.745rem !important;
border-radius: var(--r-sm) !important;
box-shadow: var(--nm-xs) !important;
}
.file-row-actions .btn:hover {
box-shadow: var(--nm-sm) !important;
transform: translateY(-1px) !important;
}
/* ── File name cell ── */
.file-name {
display: flex !important;
align-items: center !important;
gap: 0.5rem !important;
font-size: 0.845rem !important;
font-family: var(--font) !important;
color: var(--text-secondary) !important;
font-weight: 500 !important;
}
.file-icon {
flex-shrink: 0 !important;
width: 28px !important;
height: 28px !important;
display: flex !important;
align-items: center !important;
justify-content: center !important;
background: var(--surface) !important;
border: 1px solid rgba(0,0,0,0.07) !important;
border-radius: var(--r-sm) !important;
box-shadow: var(--nm-xs) !important;
font-size: 0.9rem !important;
/* Slight specular on file icon badge */
position: relative !important;
overflow: hidden !important;
}
.file-icon::before {
content: '' !important;
position: absolute !important;
inset: 0 !important;
background: linear-gradient(145deg,
rgba(255,255,255,0.75) 0%,
transparent 55%) !important;
border-radius: inherit !important;
pointer-events: none !important;
}
/* ── Info card ── */
.info-card {
margin-top: 1.5rem !important;
background: var(--surface-raised) !important;
border: 1px solid rgba(0,0,0,0.06) !important;
outline: 1px solid rgba(255,255,255,0.97) !important;
outline-offset: -1px !important;
border-radius: var(--r-lg) !important;
box-shadow: var(--nm-md) !important;
padding: 1.25rem 1.4rem !important;
position: relative !important;
overflow: hidden !important;
}
.info-card::before {
content: '' !important;
position: absolute !important;
inset: 0 !important;
border-radius: inherit !important;
background: linear-gradient(145deg,
rgba(255,255,255,0.85) 0%,
transparent 35%) !important;
pointer-events: none !important;
z-index: 0 !important;
}
.info-card > * { position: relative; z-index: 1; }
.info-card h4 {
font-size: 0.90rem !important;
font-weight: 700 !important;
letter-spacing: -0.02em !important;
margin-bottom: 0.5rem !important;
color: var(--text-primary) !important;
font-family: var(--font) !important;
}
.info-card p {
font-size: 0.845rem !important;
color: var(--text-muted) !important;
line-height: 1.68 !important;
font-family: var(--font) !important;
}
/* ── Key reveal header layout ── */
.key-reveal-header {
display: flex !important;
align-items: center !important;
gap: 0.6rem !important;
margin-bottom: 0.65rem !important;
}
.key-reveal-header h3 {
margin: 0 !important;
font-size: 0.95rem !important;
font-weight: 700 !important;
letter-spacing: -0.025em !important;
color: var(--text-primary) !important;
font-family: var(--font) !important;
}
/* Key rules list */
.key-rules { margin-top: 1rem !important; }
.key-rules h4 {
font-size: 0.84rem !important;
font-weight: 700 !important;
margin-bottom: 0.5rem !important;
color: var(--text-secondary) !important;
font-family: var(--font) !important;
letter-spacing: -0.01em !important;
}
.key-rules ul {
display: flex !important;
flex-direction: column !important;
gap: 0.32rem !important;
}
.key-rules li {
font-size: 0.82rem !important;
color: var(--text-muted) !important;
padding-left: 0.2rem !important;
font-family: var(--font) !important;
line-height: 1.6 !important;
}
/* Stat ring card layout */
.stat-ring-card {
display: flex !important;
flex-direction: column !important;
align-items: center !important;
text-align: center !important;
}
/* ══════════════════════════════════════════════════════════════════════════════
§31 ADVANCED NEUMORPHIC EFFECTS — Toggle, Checkbox, Radio
══════════════════════════════════════════════════════════════════════════════
These use CSS-only: a hidden + a styled