/* ========================================================================== Jayqora Design System — Colors & Type -------------------------------------------------------------------------- Pull these tokens into any Jayqora artifact. The palette is anchored on a deep black canvas with electric cyan + violet accents (the "neural glow"), chromed silvers (from the logo metalwork), and clean off-whites for text. Type uses three Google Fonts: - Space Grotesk — display / headlines (geometric, futuristic, slightly humanist) - Inter — UI + body (workhorse, neutral, excellent at small sizes) - JetBrains Mono — code, data, technical labels ========================================================================== */ /* Google Fonts are loaded non-blocking from the page (was a render-blocking @import here) */ :root { /* ------------------------------------------------------------------ COLOR — Brand core ------------------------------------------------------------------ */ /* Neural Cyan — primary accent (from the brain-mesh glow) */ --jq-cyan-50: #E6FBFF; --jq-cyan-100: #B8F4FF; --jq-cyan-200: #7DEAFF; --jq-cyan-300: #3FDCFF; --jq-cyan-400: #22D3FF; /* primary */ --jq-cyan-500: #06B6E4; --jq-cyan-600: #0891B2; --jq-cyan-700: #0E7490; /* Quantum Violet — secondary accent (from the logo's purple highlights) */ --jq-violet-50: #F3EEFF; --jq-violet-100: #E0D2FF; --jq-violet-200: #C4A8FF; --jq-violet-300: #A77DFF; --jq-violet-400: #8B5CF6; /* secondary */ --jq-violet-500: #7C3AED; --jq-violet-600: #6D28D9; --jq-violet-700: #5B21B6; /* Chrome — silver edge (from logo's metallic outline) */ --jq-chrome-50: #F4F7FA; --jq-chrome-100: #E2E8F0; --jq-chrome-200: #C8D2DE; --jq-chrome-300: #A4B0C0; --jq-chrome-400: #7B8898; /* Ink — deep canvas (the void behind the logo) */ --jq-ink-0: #000000; /* pure black, brand canvas */ --jq-ink-50: #07090C; --jq-ink-100: #0B0F14; /* default app bg */ --jq-ink-200: #11161E; /* surface 1 */ --jq-ink-300: #1A2230; /* surface 2 */ --jq-ink-400: #232D3F; /* surface 3 / hover */ --jq-ink-500: #2E3A4F; /* borders */ --jq-ink-600: #44516A; /* dim text */ --jq-ink-700: #6B7891; --jq-ink-800: #98A3B8; --jq-ink-900: #C8D0DD; /* Off-whites (foreground on dark) */ --jq-white: #FFFFFF; --jq-fog: #F2F5FA; /* primary text on dark */ --jq-mist: #C8D0DD; /* secondary text on dark */ /* ------------------------------------------------------------------ COLOR — Semantic (dark-mode-first; the brand IS dark) ------------------------------------------------------------------ */ --bg-canvas: var(--jq-ink-0); /* page bg */ --bg-surface-1: var(--jq-ink-100); /* cards */ --bg-surface-2: var(--jq-ink-200); /* nested cards, inputs */ --bg-surface-3: var(--jq-ink-300); /* hovered surface */ --bg-overlay: rgba(7, 9, 12, 0.72); --fg-1: var(--jq-fog); /* primary text */ --fg-2: var(--jq-mist); /* secondary text */ --fg-3: var(--jq-ink-700); /* tertiary / metadata */ --fg-disabled: var(--jq-ink-600); --border-1: rgba(200, 208, 221, 0.08); /* hairline */ --border-2: rgba(200, 208, 221, 0.14); /* card edge */ --border-3: rgba(34, 211, 255, 0.40); /* focused / glowing */ --accent: var(--jq-cyan-400); --accent-hover: var(--jq-cyan-300); --accent-press: var(--jq-cyan-500); --accent-on: #001821; /* fg on accent surfaces */ --accent-2: var(--jq-violet-400); --accent-2-hover: var(--jq-violet-300); /* Status */ --status-success: #34D399; --status-warning: #FBBF24; --status-danger: #F87171; --status-info: var(--jq-cyan-400); /* ------------------------------------------------------------------ SIGNATURE GRADIENTS — use sparingly, on hero surfaces, CTAs, glows ------------------------------------------------------------------ */ --grad-aurora: linear-gradient(135deg, #22D3FF 0%, #8B5CF6 60%, #5B21B6 100%); --grad-spark: linear-gradient(90deg, #22D3FF 0%, #8B5CF6 100%); --grad-chrome: linear-gradient(180deg, #E2E8F0 0%, #7B8898 50%, #C8D2DE 100%); --grad-canvas: radial-gradient(ellipse at 50% -10%, rgba(34,211,255,0.18) 0%, rgba(139,92,246,0.10) 35%, rgba(0,0,0,0) 70%); --grad-vignette: radial-gradient(ellipse at center, rgba(0,0,0,0) 40%, rgba(0,0,0,0.6) 100%); /* Glows (for buttons, focus rings, hero halos) */ --glow-cyan: 0 0 0 1px rgba(34,211,255,0.45), 0 0 24px rgba(34,211,255,0.35); --glow-violet: 0 0 0 1px rgba(139,92,246,0.45), 0 0 28px rgba(139,92,246,0.30); --glow-soft: 0 0 32px rgba(34,211,255,0.18); /* ------------------------------------------------------------------ TYPE — families ------------------------------------------------------------------ */ --font-display: 'Space Grotesk', 'Inter', system-ui, -apple-system, Segoe UI, sans-serif; --font-body: 'Inter', system-ui, -apple-system, Segoe UI, Roboto, sans-serif; --font-mono: 'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; /* ------------------------------------------------------------------ TYPE — scale (rem-based, 16px root) ------------------------------------------------------------------ */ --text-xs: 0.75rem; /* 12 */ --text-sm: 0.875rem; /* 14 */ --text-base: 1rem; /* 16 */ --text-md: 1.125rem; /* 18 */ --text-lg: 1.25rem; /* 20 */ --text-xl: 1.5rem; /* 24 */ --text-2xl: 2rem; /* 32 */ --text-3xl: 2.75rem; /* 44 */ --text-4xl: 3.75rem; /* 60 */ --text-5xl: 5rem; /* 80 */ --text-6xl: 6.5rem; /* 104 — hero */ /* Weights */ --weight-light: 300; --weight-regular: 400; --weight-medium: 500; --weight-semibold: 600; --weight-bold: 700; /* Line-height & tracking */ --lh-tight: 1.05; --lh-snug: 1.2; --lh-normal: 1.5; --lh-relaxed: 1.65; --track-tightest: -0.04em; --track-tight: -0.02em; --track-normal: 0; --track-wide: 0.04em; --track-widest: 0.18em; /* eyebrow / overline */ /* ------------------------------------------------------------------ SPACING (4-pt grid) ------------------------------------------------------------------ */ --space-0: 0; --space-1: 4px; --space-2: 8px; --space-3: 12px; --space-4: 16px; --space-5: 20px; --space-6: 24px; --space-8: 32px; --space-10: 40px; --space-12: 48px; --space-16: 64px; --space-20: 80px; --space-24: 96px; --space-32: 128px; /* ------------------------------------------------------------------ RADIUS ------------------------------------------------------------------ */ --radius-xs: 4px; --radius-sm: 8px; --radius-md: 12px; --radius-lg: 16px; --radius-xl: 24px; --radius-2xl: 32px; --radius-pill: 999px; /* ------------------------------------------------------------------ SHADOW / ELEVATION (dark-first) ------------------------------------------------------------------ */ --shadow-1: 0 1px 0 0 rgba(255,255,255,0.04) inset, 0 1px 2px rgba(0,0,0,0.6); --shadow-2: 0 1px 0 0 rgba(255,255,255,0.04) inset, 0 8px 24px rgba(0,0,0,0.55); --shadow-3: 0 1px 0 0 rgba(255,255,255,0.05) inset, 0 24px 64px rgba(0,0,0,0.65); --shadow-glow-cyan: var(--glow-cyan); --shadow-glow-violet: var(--glow-violet); /* ------------------------------------------------------------------ MOTION ------------------------------------------------------------------ */ --ease-standard: cubic-bezier(0.4, 0, 0.2, 1); --ease-emphatic: cubic-bezier(0.2, 0.8, 0.2, 1); --ease-out-soft: cubic-bezier(0.22, 1, 0.36, 1); --duration-fast: 140ms; --duration-base: 220ms; --duration-slow: 420ms; --duration-hero: 900ms; } /* ========================================================================== SEMANTIC TYPE STYLES ========================================================================== */ html { color-scheme: dark; } body { font-family: var(--font-body); font-size: var(--text-base); line-height: var(--lh-normal); color: var(--fg-1); background: var(--bg-canvas); -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; text-rendering: optimizeLegibility; } .jq-eyebrow, .eyebrow { font-family: var(--font-mono); font-size: var(--text-xs); font-weight: var(--weight-medium); letter-spacing: var(--track-widest); text-transform: uppercase; color: var(--accent); } h1, .h1, .display-1 { font-family: var(--font-display); font-size: clamp(2.75rem, 6vw + 1rem, 6.5rem); font-weight: var(--weight-medium); line-height: var(--lh-tight); letter-spacing: var(--track-tightest); color: var(--fg-1); } h2, .h2 { font-family: var(--font-display); font-size: clamp(2rem, 3vw + 1rem, 3.75rem); font-weight: var(--weight-medium); line-height: var(--lh-snug); letter-spacing: var(--track-tight); color: var(--fg-1); } h3, .h3 { font-family: var(--font-display); font-size: var(--text-2xl); font-weight: var(--weight-semibold); line-height: var(--lh-snug); letter-spacing: var(--track-tight); color: var(--fg-1); } h4, .h4 { font-family: var(--font-display); font-size: var(--text-xl); font-weight: var(--weight-semibold); line-height: var(--lh-snug); color: var(--fg-1); } h5, .h5 { font-family: var(--font-body); font-size: var(--text-lg); font-weight: var(--weight-semibold); line-height: var(--lh-snug); color: var(--fg-1); } p, .body { font-family: var(--font-body); font-size: var(--text-base); line-height: var(--lh-relaxed); color: var(--fg-2); } .body-lg, .lead { font-size: var(--text-md); line-height: var(--lh-relaxed); color: var(--fg-2); } .body-sm { font-size: var(--text-sm); line-height: var(--lh-normal); color: var(--fg-2); } .caption { font-family: var(--font-body); font-size: var(--text-xs); line-height: var(--lh-normal); letter-spacing: var(--track-wide); color: var(--fg-3); } code, .code, kbd { font-family: var(--font-mono); font-size: 0.92em; background: var(--bg-surface-2); color: var(--accent); padding: 0.12em 0.4em; border-radius: var(--radius-xs); border: 1px solid var(--border-1); } a { color: var(--accent); text-decoration: none; transition: color var(--duration-fast) var(--ease-standard); } a:hover { color: var(--accent-hover); } ::selection { background: rgba(34, 211, 255, 0.35); color: var(--fg-1); } /* ========================================================================== ATMOSPHERE — utility classes for branded backgrounds ========================================================================== */ .jq-bg-canvas { background: var(--jq-ink-0); background-image: var(--grad-canvas), radial-gradient(circle at 20% 80%, rgba(139,92,246,0.10) 0%, rgba(0,0,0,0) 45%), radial-gradient(circle at 80% 20%, rgba(34,211,255,0.10) 0%, rgba(0,0,0,0) 45%); } .jq-grid-overlay { background-image: linear-gradient(rgba(34,211,255,0.05) 1px, transparent 1px), linear-gradient(90deg, rgba(34,211,255,0.05) 1px, transparent 1px); background-size: 48px 48px; } .jq-text-aurora { background: var(--grad-spark); -webkit-background-clip: text; background-clip: text; color: transparent; }