Bernt
bae705aa97
- Add NFC ePassport roadmap (ICAO 9303, eIDAS) - Add TensorFlow.js edge face detection (BlazeFace) - Add structured audit logger (GDPR-compliant) - Risk scoring support Part of KYC Apple Native UX v1.1.0
155 lines
6.5 KiB
CSS
155 lines
6.5 KiB
CSS
/**
|
|
* quiXzoom Design Tokens
|
|
* Sport-Tech / Nike-vibes
|
|
* Dark energy, neon precision, kinetic motion
|
|
*
|
|
* Usage: Import this file first, then apply tokens in component CSS.
|
|
* All values are CSS custom properties — never hardcode raw values.
|
|
*/
|
|
|
|
:root {
|
|
|
|
/* ─── GRAYSCALE ──────────────────────────────────────────────────────────── */
|
|
/* Light → Deep Carbon (dark-first palette) */
|
|
--qx-white: #FFFFFF;
|
|
--qx-gray-100: #F0F0F0; /* Near-white surface */
|
|
--qx-gray-400: #888888; /* Muted text, placeholders */
|
|
--qx-gray-700: #2A2A2A; /* Secondary surfaces */
|
|
--qx-deep-carbon: #0D0D0D; /* Primary background */
|
|
|
|
/* ─── ACCENT COLORS ──────────────────────────────────────────────────────── */
|
|
--qx-neon-primary: #00FF87; /* Electric green — primary CTA, highlights */
|
|
--qx-neon-secondary: #00D1FF; /* Cyan — links, hover states, secondary actions */
|
|
|
|
/* Accent with alpha for glows/overlays */
|
|
--qx-neon-primary-20: rgba(0, 255, 135, 0.20);
|
|
--qx-neon-primary-10: rgba(0, 255, 135, 0.10);
|
|
--qx-neon-secondary-20: rgba(0, 209, 255, 0.20);
|
|
|
|
/* ─── SEMANTIC COLORS ────────────────────────────────────────────────────── */
|
|
--qx-bg: var(--qx-deep-carbon);
|
|
--qx-bg-surface: var(--qx-gray-700);
|
|
--qx-text-primary: var(--qx-white);
|
|
--qx-text-muted: var(--qx-gray-400);
|
|
--qx-border: rgba(255, 255, 255, 0.08);
|
|
--qx-border-accent: var(--qx-neon-primary);
|
|
|
|
/* ─── SPACING (8px base grid) ────────────────────────────────────────────── */
|
|
--qx-space-xs: 4px;
|
|
--qx-space-sm: 8px;
|
|
--qx-space-md: 16px;
|
|
--qx-space-lg: 32px;
|
|
--qx-space-xl: 64px;
|
|
--qx-space-2xl: 96px;
|
|
--qx-space-3xl: 128px;
|
|
|
|
/* ─── TYPOGRAPHY ─────────────────────────────────────────────────────────── */
|
|
/* Font stack */
|
|
--qx-font-sans: 'Inter', 'Helvetica Neue', Helvetica, Arial, sans-serif;
|
|
--qx-font-display: 'Inter', 'Helvetica Neue', Helvetica, Arial, sans-serif;
|
|
--qx-font-mono: 'JetBrains Mono', 'Fira Code', 'Courier New', monospace;
|
|
|
|
/* Type scale — LOCKED, do not interpolate between these */
|
|
--qx-text-xs: 12px;
|
|
--qx-text-sm: 16px;
|
|
--qx-text-md: 24px;
|
|
--qx-text-lg: 48px;
|
|
--qx-text-xl: 64px;
|
|
|
|
/* Font weights */
|
|
--qx-weight-regular: 400;
|
|
--qx-weight-medium: 500;
|
|
--qx-weight-bold: 700;
|
|
--qx-weight-black: 900;
|
|
|
|
/* Line heights */
|
|
--qx-leading-tight: 1.0; /* Display / hero headlines */
|
|
--qx-leading-snug: 1.2; /* Subheadings */
|
|
--qx-leading-base: 1.5; /* Body text */
|
|
|
|
/* Letter spacing */
|
|
--qx-tracking-tight: -0.03em; /* Large display text */
|
|
--qx-tracking-normal: 0em;
|
|
--qx-tracking-wide: 0.08em; /* Caps labels, badges */
|
|
--qx-tracking-widest: 0.15em; /* Eyebrow text */
|
|
|
|
/* ─── EASING ──────────────────────────────────────────────────────────────── */
|
|
/* Signature quiXzoom spring — fast out, sharp entry */
|
|
--qx-ease-snap: cubic-bezier(0.16, 1, 0.3, 1);
|
|
/* Standard ease for UI micro-interactions */
|
|
--qx-ease-out: cubic-bezier(0.0, 0.0, 0.2, 1);
|
|
/* Dramatic enter for hero elements */
|
|
--qx-ease-enter: cubic-bezier(0.22, 1, 0.36, 1);
|
|
/* Subtle ease for hover states */
|
|
--qx-ease-hover: cubic-bezier(0.4, 0, 0.2, 1);
|
|
|
|
/* Duration */
|
|
--qx-duration-fast: 150ms;
|
|
--qx-duration-base: 300ms;
|
|
--qx-duration-slow: 600ms;
|
|
--qx-duration-hero: 900ms;
|
|
|
|
/* ─── BORDER RADIUS ──────────────────────────────────────────────────────── */
|
|
--qx-radius-none: 0px;
|
|
--qx-radius-sm: 4px;
|
|
--qx-radius-md: 8px;
|
|
--qx-radius-lg: 16px;
|
|
--qx-radius-pill: 9999px;
|
|
|
|
/* ─── SHADOW SYSTEM ──────────────────────────────────────────────────────── */
|
|
/* Dark-theme shadows use colored glows, not black opacity */
|
|
--qx-shadow-sm:
|
|
0 1px 2px rgba(0, 0, 0, 0.4);
|
|
|
|
--qx-shadow-md:
|
|
0 4px 16px rgba(0, 0, 0, 0.5),
|
|
0 1px 4px rgba(0, 0, 0, 0.3);
|
|
|
|
--qx-shadow-lg:
|
|
0 8px 32px rgba(0, 0, 0, 0.6),
|
|
0 2px 8px rgba(0, 0, 0, 0.4);
|
|
|
|
/* Neon glow — apply to CTAs and accent elements */
|
|
--qx-shadow-neon-primary:
|
|
0 0 0 1px var(--qx-neon-primary-20),
|
|
0 0 16px var(--qx-neon-primary-20),
|
|
0 0 32px var(--qx-neon-primary-10);
|
|
|
|
--qx-shadow-neon-secondary:
|
|
0 0 0 1px var(--qx-neon-secondary-20),
|
|
0 0 16px var(--qx-neon-secondary-20);
|
|
|
|
/* Inset glow — active states */
|
|
--qx-shadow-inset-neon:
|
|
inset 0 0 0 1px var(--qx-neon-primary-20);
|
|
|
|
/* ─── Z-INDEX SCALE ──────────────────────────────────────────────────────── */
|
|
--qx-z-base: 0;
|
|
--qx-z-raised: 10;
|
|
--qx-z-overlay: 100;
|
|
--qx-z-modal: 200;
|
|
--qx-z-toast: 300;
|
|
|
|
/* ─── TRANSITIONS (shorthand helpers) ───────────────────────────────────── */
|
|
--qx-transition-color:
|
|
color var(--qx-duration-fast) var(--qx-ease-hover),
|
|
background var(--qx-duration-fast) var(--qx-ease-hover),
|
|
border-color var(--qx-duration-fast) var(--qx-ease-hover);
|
|
|
|
--qx-transition-transform:
|
|
transform var(--qx-duration-base) var(--qx-ease-snap);
|
|
|
|
--qx-transition-all:
|
|
all var(--qx-duration-base) var(--qx-ease-snap);
|
|
|
|
}
|
|
|
|
/* ─── UTILITY: APPLY DARK BG ─────────────────────────────────────────────── */
|
|
.qx-theme {
|
|
background-color: var(--qx-bg);
|
|
color: var(--qx-text-primary);
|
|
font-family: var(--qx-font-sans);
|
|
-webkit-font-smoothing: antialiased;
|
|
-moz-osx-font-smoothing: grayscale;
|
|
}
|