/* ================================================================ JIL DESIGN TOKEN SYSTEM Single source of truth for jilsovereign.com + getjil.com ================================================================ Usage: jilsovereign.com - getjil.com - wallet app - ================================================================ */ /* ---------------------------------------------------------------- 1. SHARED BRAND TOKENS These values are identical across every theme. ---------------------------------------------------------------- */ :root { /* -- Gold accent system (the universal JIL signature) ---------- */ --gold: #D4AF37; --gold-soft: #E6C76A; --gold-deep: #A87C1F; --gold-light: #F2D47A; --gold-glow: rgba(212, 175, 55, 0.22); --gold-border: rgba(212, 175, 55, 0.28); --gold-tint: rgba(212, 175, 55, 0.10); --text-on-gold: #0B0F16; /* -- Gold gradient (premium buttons, badges, highlight strokes) */ --gradient-gold: linear-gradient(135deg, #A87C1F 0%, #D4AF37 55%, #E6C76A 100%); /* -- Semantic status colors ------------------------------------ */ --success: #10B981; --success-tint: rgba(16, 185, 129, 0.12); --warning: #F59E0B; --warning-tint: rgba(245, 158, 11, 0.12); --error: #EF4444; --error-tint: rgba(239, 68, 68, 0.12); /* -- Typography ------------------------------------------------ */ --font-sans: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif; --font-mono: 'JetBrains Mono', 'SF Mono', 'Fira Code', monospace; --font-display: 'DM Sans', 'Inter', sans-serif; /* -- Spacing scale --------------------------------------------- */ --space-1: 0.25rem; /* 4px */ --space-2: 0.5rem; /* 8px */ --space-3: 0.75rem; /* 12px */ --space-4: 1rem; /* 16px */ --space-5: 1.5rem; /* 24px */ --space-6: 2rem; /* 32px */ --space-8: 3rem; /* 48px */ --space-10: 4rem; /* 64px */ --space-12: 5rem; /* 80px */ --space-16: 8rem; /* 128px */ /* -- Border radius --------------------------------------------- */ --radius-sm: 8px; --radius-md: 12px; --radius-lg: 16px; --radius-xl: 24px; --radius-2xl: 32px; --radius-full: 9999px; /* -- Transition ------------------------------------------------ */ --transition: 0.25s ease; --transition-fast: 0.15s ease; --transition-slow: 0.4s ease; /* -- Container ------------------------------------------------- */ --container-sm: 640px; --container-md: 800px; --container-lg: 1024px; --container-xl: 1200px; --container-2xl: 1400px; } /* ---------------------------------------------------------------- 2. SOVEREIGN DARK THEME (jilsovereign.com - primary) Deep navy base with blue tech accents + gold premium signals. ---------------------------------------------------------------- */ [data-theme="sovereign-dark"] { color-scheme: dark; /* -- Backgrounds ----------------------------------------------- */ --bg-page: #0A0D14; --bg-surface: #101725; --bg-elevated: #151F31; --bg-soft: #1B263B; --bg-overlay: rgba(10, 13, 20, 0.85); /* -- Text ------------------------------------------------------ */ --text-primary: #F5F7FB; --text-secondary: #B8C2D8; --text-muted: #7F8AA3; --text-inverse: #0F172A; /* -- Blue tech accent (sovereign-only) ------------------------- */ --blue: #2F6BFF; --blue-soft: #6FA6FF; --blue-glow: #CFE9FF; --blue-deep: #173A8A; --blue-hover: #1D4ED8; --blue-tint: rgba(47, 107, 255, 0.12); /* -- Borders --------------------------------------------------- */ --border-subtle: rgba(255, 255, 255, 0.08); --border-strong: rgba(255, 255, 255, 0.14); --divider: rgba(184, 194, 216, 0.16); /* -- Shadows --------------------------------------------------- */ --shadow-sm: 0 2px 8px rgba(0, 0, 0, 0.3); --shadow-md: 0 4px 16px rgba(0, 0, 0, 0.35); --shadow-lg: 0 12px 40px rgba(0, 0, 0, 0.4); --shadow-xl: 0 20px 60px rgba(0, 0, 0, 0.45); --shadow-glow-gold: 0 0 20px rgba(212, 175, 55, 0.15); --shadow-glow-blue: 0 0 30px rgba(47, 107, 255, 0.12); /* -- Card presets ---------------------------------------------- */ --card-bg: rgba(255, 255, 255, 0.03); --card-border: rgba(255, 255, 255, 0.08); --card-blur: blur(10px); --card-shadow: 0 10px 30px rgba(0, 0, 0, 0.24); /* Premium card variant */ --card-premium-bg: linear-gradient(180deg, rgba(255,255,255,0.04) 0%, rgba(255,255,255,0.02) 100%); --card-premium-border: rgba(212, 175, 55, 0.18); --card-premium-shadow: 0 0 0 1px rgba(212,175,55,0.06), 0 16px 40px rgba(0,0,0,0.28); /* -- Page gradients -------------------------------------------- */ --gradient-hero: radial-gradient(circle at 72% 28%, rgba(207, 233, 255, 0.16), transparent 24%), radial-gradient(circle at 22% 18%, rgba(212, 175, 55, 0.10), transparent 20%), linear-gradient(135deg, #0A0D14 0%, #101725 45%, #151F31 100%); --gradient-section: linear-gradient(180deg, #101725 0%, #0E1420 100%); --gradient-blue-glow: radial-gradient(circle, rgba(207, 233, 255, 0.18) 0%, rgba(207, 233, 255, 0) 70%); /* -- Scrollbar ------------------------------------------------- */ --scrollbar-thumb: rgba(47, 107, 255, 0.3); --scrollbar-thumb-hover: rgba(47, 107, 255, 0.5); /* -- Glass ----------------------------------------------------- */ --glass-bg: rgba(16, 23, 37, 0.75); --glass-border: rgba(255, 255, 255, 0.08); --glass-blur: blur(16px); /* -- Cinematic background layers ------------------------------ */ --cinematic-base: radial-gradient(ellipse at 20% 30%, rgba(47, 107, 255, 0.22) 0%, transparent 50%), radial-gradient(ellipse at 80% 70%, rgba(212, 175, 55, 0.14) 0%, transparent 50%), linear-gradient(170deg, #04070D 0%, #0A0F1C 40%, #0A0D14 100%); --cinematic-grid-color: rgba(255, 255, 255, 0.04); --cinematic-grid-size: 60px; --cinematic-overlay: linear-gradient(180deg, rgba(4, 7, 13, 0.55) 0%, rgba(10, 15, 28, 0.65) 50%, rgba(4, 7, 13, 0.70) 100%); --cinematic-hero-glow: radial-gradient(ellipse at 50% 0%, rgba(47, 107, 255, 0.25) 0%, transparent 60%); --cinematic-glass-bg: rgba(255, 255, 255, 0.03); --cinematic-glass-border: rgba(255, 255, 255, 0.06); --cinematic-glass-blur: blur(20px); --cinematic-enabled: 1; /* -- Legacy jil-v14 variable bridges (auto-adapt old pages) --- */ --bg-0: #0A0D14; --bg-1: #0A0D14; --bg-2: #0A0D14; --bg: #0A0D14; --bg-muted: #0A0D14; --bg-graphite: #101725; --surface: #101725; --text: #F5F7FB; --text-heading: #F5F7FB; --dark-gray: #B8C2D8; --muted: #7F8AA3; --white: #151F31; --navy: #101725; --navy-mid: #151F31; --border: rgba(255, 255, 255, 0.08); --border-light: rgba(255, 255, 255, 0.08); --border-0: rgba(255, 255, 255, 0.08); --border-1: rgba(255, 255, 255, 0.14); --line: rgba(255, 255, 255, 0.08); --glass: rgba(16, 23, 37, 0.75); --glass-border: rgba(255, 255, 255, 0.08); --accent: #2F6BFF; --accent-a: #2F6BFF; --accent-b: #2F6BFF; --accent-c: #7F8AA3; --teal: #2F6BFF; --glow: 0 0 40px rgba(47, 107, 255, 0.15); --gold-hover: #A87C1F; --gold-light: rgba(212, 175, 55, 0.25); --blue-light: rgba(47, 107, 255, 0.15); --off-white: #151F31; --gray-100: #151F31; --gray-300: #3B4A63; --gray-500: #7F8AA3; --gray-700: #B8C2D8; --shadow: 0 4px 16px rgba(0, 0, 0, 0.35); --card: #101725; --code-bg: #0D1117; --code-text: #E6EDF3; } /* ---------------------------------------------------------------- 3. SOVEREIGN LIGHT THEME (jilsovereign.com - v2 pages) Clean institutional fintech. Warm off-white with blue + gold. ---------------------------------------------------------------- */ [data-theme="sovereign-light"] { color-scheme: light; /* -- Backgrounds ----------------------------------------------- */ --bg-page: #FAFAF8; --bg-surface: #F8FAFC; --bg-elevated: #FFFFFF; --bg-soft: #F1F5F9; --bg-overlay: rgba(250, 250, 248, 0.92); /* -- Text ------------------------------------------------------ */ --text-primary: #0F172A; --text-secondary: #3B3B3B; --text-muted: #64748B; --text-inverse: #F5F7FB; /* -- Blue accent ----------------------------------------------- */ --blue: #2A6BFF; --blue-soft: #6FA6FF; --blue-glow: #CFE9FF; --blue-deep: #173A8A; --blue-hover: #1D4ED8; --blue-tint: #DBEAFE; /* -- Borders --------------------------------------------------- */ --border-subtle: #E2E8F0; --border-strong: #CBD5E1; --divider: #E2E8F0; /* -- Shadows --------------------------------------------------- */ --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.05); --shadow-md: 0 4px 12px rgba(0, 0, 0, 0.08); --shadow-lg: 0 12px 40px rgba(0, 0, 0, 0.10); --shadow-xl: 0 20px 60px rgba(0, 0, 0, 0.12); --shadow-glow-gold: 0 2px 12px rgba(212, 175, 55, 0.2); --shadow-glow-blue: 0 4px 16px rgba(42, 107, 255, 0.15); /* -- Card presets ---------------------------------------------- */ --card-bg: #FFFFFF; --card-border: #E2E8F0; --card-blur: none; --card-shadow: 0 1px 3px rgba(0, 0, 0, 0.06); --card-premium-bg: linear-gradient(135deg, rgba(212,175,55,0.08) 0%, rgba(212,175,55,0.03) 100%); --card-premium-border: rgba(212, 175, 55, 0.2); --card-premium-shadow: 0 4px 20px rgba(0, 0, 0, 0.06); /* -- Page gradients -------------------------------------------- */ --gradient-hero: radial-gradient(900px 520px at 50% -10%, rgba(207, 233, 255, 0.5) 0%, rgba(207, 233, 255, 0) 60%), #FAFAF8; --gradient-section: linear-gradient(180deg, #F8FAFC 0%, #FAFAF8 100%); --gradient-blue-glow: radial-gradient(circle, rgba(207, 233, 255, 0.35) 0%, rgba(207, 233, 255, 0) 60%); /* -- Scrollbar ------------------------------------------------- */ --scrollbar-thumb: rgba(148, 163, 184, 0.4); --scrollbar-thumb-hover: rgba(148, 163, 184, 0.6); /* -- Glass ----------------------------------------------------- */ --glass-bg: rgba(255, 255, 255, 0.85); --glass-border: rgba(0, 0, 0, 0.06); --glass-blur: blur(20px); /* -- Cinematic background layers (disabled for light theme) --- */ --cinematic-base: none; --cinematic-grid-color: transparent; --cinematic-grid-size: 60px; --cinematic-overlay: none; --cinematic-hero-glow: none; --cinematic-glass-bg: #FFFFFF; --cinematic-glass-border: #E2E8F0; --cinematic-glass-blur: none; --cinematic-enabled: 0; /* -- Light-mode navy sections (footer, dark bands) ------------- */ --navy: #0F172A; --navy-mid: #1E293B; /* -- Legacy jil-v14 variable bridges (auto-adapt old pages) --- */ --bg-0: #FAFAF8; --bg-1: #F8FAFC; --bg-2: #FAFAF8; --bg: #FAFAF8; --bg-muted: #FAFAF8; --bg-graphite: #0F172A; --surface: #F8FAFC; --text: #0F172A; --text-heading: #0F172A; --dark-gray: #3B3B3B; --muted: #64748B; --white: #FFFFFF; --border: #E2E8F0; --border-light: #E2E8F0; --border-0: #E2E8F0; --border-1: #CBD5E1; --line: #E2E8F0; --glass: rgba(255, 255, 255, 0.85); --accent: #2A6BFF; --accent-a: #2A6BFF; --accent-b: #2A6BFF; --accent-c: #64748B; --teal: #2A6BFF; --glow: 0 0 40px rgba(42, 107, 255, 0.15); --gold-hover: #A87C1F; --gold-light: rgba(212, 175, 55, 0.25); --blue-light: rgba(42, 107, 255, 0.15); --off-white: #F0F0EC; --gray-100: #F0F0EC; --gray-300: #D1D1D6; --gray-500: #6E6E73; --gray-700: #3A3A3C; --shadow: 0 4px 12px rgba(0, 0, 0, 0.04); --card: #FFFFFF; --code-bg: #1E1E1E; --code-text: #D4D4D4; } /* ---------------------------------------------------------------- 4. GETJIL DARK THEME (getjil.com + wallet app) Warm charcoal base. Gold-only accents - NO blue. The charcoal warmth separates retail from institutional navy. ---------------------------------------------------------------- */ [data-theme="getjil"] { color-scheme: dark; /* -- Backgrounds (warm charcoal, no blue tint) ----------------- */ --bg-page: #0E1012; --bg-surface: #141618; --bg-elevated: #1A1D21; --bg-soft: #222528; --bg-overlay: rgba(14, 16, 18, 0.88); /* -- Text ------------------------------------------------------ */ --text-primary: #FFFFFF; --text-secondary: #C6C8CC; --text-muted: #7F8490; --text-inverse: #121417; /* -- Blue is intentionally absent. Gold is the sole accent. ---- */ /* Map --blue to gold so shared components still work. */ --blue: #D4AF37; --blue-soft: #E6C76A; --blue-glow: #F2D47A; --blue-deep: #A87C1F; --blue-hover: #B8960C; --blue-tint: rgba(212, 175, 55, 0.12); /* -- Borders --------------------------------------------------- */ --border-subtle: rgba(255, 255, 255, 0.07); --border-strong: rgba(255, 255, 255, 0.12); --divider: rgba(198, 200, 204, 0.14); /* -- Shadows --------------------------------------------------- */ --shadow-sm: 0 2px 8px rgba(0, 0, 0, 0.35); --shadow-md: 0 4px 16px rgba(0, 0, 0, 0.4); --shadow-lg: 0 12px 40px rgba(0, 0, 0, 0.45); --shadow-xl: 0 20px 60px rgba(0, 0, 0, 0.5); --shadow-glow-gold: 0 0 24px rgba(212, 175, 55, 0.18); --shadow-glow-blue: 0 0 24px rgba(212, 175, 55, 0.12); /* -- Card presets ---------------------------------------------- */ --card-bg: rgba(255, 255, 255, 0.04); --card-border: rgba(255, 255, 255, 0.07); --card-blur: blur(18px); --card-shadow: 0 20px 60px rgba(0, 0, 0, 0.30); --card-premium-bg: linear-gradient(180deg, rgba(255,255,255,0.05) 0%, rgba(255,255,255,0.02) 100%); --card-premium-border: rgba(212, 175, 55, 0.18); --card-premium-shadow: 0 0 0 1px rgba(212,175,55,0.06), 0 20px 60px rgba(0,0,0,0.35); /* -- Page gradients -------------------------------------------- */ --gradient-hero: radial-gradient(circle at 50% -5%, rgba(212, 175, 55, 0.10), transparent 26%), radial-gradient(circle at 80% 12%, rgba(255, 255, 255, 0.04), transparent 18%), linear-gradient(180deg, #171a1f 0%, #121417 55%, #101214 100%); --gradient-section: linear-gradient(180deg, #141618 0%, #0E1012 100%); --gradient-blue-glow: radial-gradient(circle, rgba(212, 175, 55, 0.12) 0%, rgba(212, 175, 55, 0) 65%); /* -- Scrollbar ------------------------------------------------- */ --scrollbar-thumb: rgba(212, 175, 55, 0.3); --scrollbar-thumb-hover: rgba(212, 175, 55, 0.5); /* -- Glass ----------------------------------------------------- */ --glass-bg: rgba(26, 29, 33, 0.80); --glass-border: rgba(255, 255, 255, 0.07); --glass-blur: blur(18px); /* -- Grid texture (subtle background lines) -------------------- */ --bg-grid: linear-gradient(rgba(255, 255, 255, 0.035) 1px, transparent 1px), linear-gradient(90deg, rgba(255, 255, 255, 0.035) 1px, transparent 1px); /* -- Cinematic background layers ------------------------------ */ --cinematic-base: radial-gradient(ellipse at 20% 30%, rgba(212, 175, 55, 0.18) 0%, transparent 50%), radial-gradient(ellipse at 80% 70%, rgba(212, 175, 55, 0.12) 0%, transparent 50%), linear-gradient(170deg, #08090C 0%, #0E1012 40%, #0E1012 100%); --cinematic-grid-color: rgba(255, 255, 255, 0.035); --cinematic-grid-size: 60px; --cinematic-overlay: linear-gradient(180deg, rgba(8, 9, 12, 0.55) 0%, rgba(14, 16, 18, 0.65) 50%, rgba(8, 9, 12, 0.70) 100%); --cinematic-hero-glow: radial-gradient(ellipse at 50% 0%, rgba(212, 175, 55, 0.22) 0%, transparent 60%); --cinematic-glass-bg: rgba(255, 255, 255, 0.03); --cinematic-glass-border: rgba(255, 255, 255, 0.06); --cinematic-glass-blur: blur(20px); --cinematic-enabled: 1; /* -- Legacy jil-v14 variable bridges (auto-adapt old pages) --- */ --bg-0: #0E1012; --bg-1: #0E1012; --bg-2: #0E1012; --bg: #0E1012; --bg-muted: #0E1012; --bg-graphite: #141618; --surface: #141618; --text: #FFFFFF; --text-heading: #FFFFFF; --dark-gray: #C6C8CC; --muted: #7F8490; --white: #1A1D21; --navy: #141618; --navy-mid: #1A1D21; --border: rgba(255, 255, 255, 0.07); --border-light: rgba(255, 255, 255, 0.07); --border-0: rgba(255, 255, 255, 0.07); --border-1: rgba(255, 255, 255, 0.12); --line: rgba(255, 255, 255, 0.07); --glass: rgba(26, 29, 33, 0.80); --accent: #D4AF37; --accent-a: #D4AF37; --accent-b: #D4AF37; --accent-c: #7F8490; --teal: #D4AF37; --glow: 0 0 40px rgba(212, 175, 55, 0.15); --gold-hover: #B8960C; --gold-light: rgba(212, 175, 55, 0.25); --blue-light: rgba(212, 175, 55, 0.15); } /* ---------------------------------------------------------------- 5. SHARED COMPONENT CLASSES These use token vars so they adapt to any theme automatically. ---------------------------------------------------------------- */ /* -- Standard card ---------------------------------------------- */ .jil-card { background: var(--card-bg); border: 1px solid var(--card-border); backdrop-filter: var(--card-blur); -webkit-backdrop-filter: var(--card-blur); box-shadow: var(--card-shadow); border-radius: var(--radius-lg); transition: box-shadow var(--transition), border-color var(--transition); } .jil-card:hover { box-shadow: var(--shadow-lg); border-color: var(--border-strong); } /* -- Premium card ----------------------------------------------- */ .jil-card-premium { background: var(--card-premium-bg); border: 1px solid var(--card-premium-border); box-shadow: var(--card-premium-shadow); border-radius: var(--radius-lg); } /* -- Glass panel ------------------------------------------------ */ .jil-glass { background: var(--glass-bg); backdrop-filter: var(--glass-blur); -webkit-backdrop-filter: var(--glass-blur); border: 1px solid var(--glass-border); } /* -- Gold button ------------------------------------------------ */ .jil-btn-gold { display: inline-flex; align-items: center; justify-content: center; gap: var(--space-2); background: var(--gradient-gold); color: var(--text-on-gold); font-weight: 700; padding: var(--space-3) var(--space-5); border-radius: var(--radius-sm); border: none; cursor: pointer; text-decoration: none; transition: all var(--transition); box-shadow: var(--shadow-glow-gold); } .jil-btn-gold:hover { transform: translateY(-1px); box-shadow: 0 6px 24px rgba(212, 175, 55, 0.35); } /* -- Primary button (adapts: blue on sovereign, gold on getjil) - */ .jil-btn-primary { display: inline-flex; align-items: center; justify-content: center; gap: var(--space-2); background: var(--blue); color: var(--text-primary); font-weight: 600; padding: var(--space-3) var(--space-5); border-radius: var(--radius-sm); border: none; cursor: pointer; text-decoration: none; transition: all var(--transition); } [data-theme="getjil"] .jil-btn-primary { color: var(--text-on-gold); } .jil-btn-primary:hover { background: var(--blue-hover); transform: translateY(-1px); } /* -- Outline button --------------------------------------------- */ .jil-btn-outline { display: inline-flex; align-items: center; justify-content: center; gap: var(--space-2); background: transparent; color: var(--text-primary); font-weight: 600; padding: var(--space-3) var(--space-5); border-radius: var(--radius-sm); border: 1.5px solid var(--border-strong); cursor: pointer; text-decoration: none; transition: all var(--transition); } .jil-btn-outline:hover { border-color: var(--blue); color: var(--blue); transform: translateY(-1px); } /* -- Badge ------------------------------------------------------ */ .jil-badge { display: inline-flex; align-items: center; gap: var(--space-1); padding: var(--space-1) var(--space-3); font-size: 0.75rem; font-weight: 600; border-radius: var(--radius-full); background: var(--blue-tint); color: var(--blue); } .jil-badge-gold { background: var(--gold-tint); color: var(--gold); } /* -- Scrollbar -------------------------------------------------- */ ::-webkit-scrollbar { width: 6px; } ::-webkit-scrollbar-track { background: transparent; } ::-webkit-scrollbar-thumb { background: var(--scrollbar-thumb); border-radius: 3px; } ::-webkit-scrollbar-thumb:hover { background: var(--scrollbar-thumb-hover); } /* -- Selection -------------------------------------------------- */ [data-theme="sovereign-dark"] ::selection, [data-theme="sovereign-light"] ::selection { background: rgba(47, 107, 255, 0.18); } [data-theme="getjil"] ::selection { background: rgba(212, 175, 55, 0.18); } /* -- Theme toggle button ---------------------------------------- */ .jil-theme-toggle { display: inline-flex; align-items: center; justify-content: center; width: 36px; height: 36px; background: transparent; border: 1px solid var(--border-subtle); border-radius: var(--radius-sm); cursor: pointer; color: var(--text-secondary); transition: color var(--transition), border-color var(--transition), background var(--transition); padding: 0; flex-shrink: 0; } .jil-theme-toggle:hover { color: var(--gold); border-color: var(--gold-border); background: var(--gold-tint); }