/* ============================================ * JustifyLocal — Themes & Background Patterns * Composable: apply one bg-* class + one theme-* class on * ============================================ */ /* ========== BACKGROUND PATTERNS ========== */ /* 1. Logo Watermark Tile */ .bg-logo-tile::before { content: ''; position: fixed; inset: 0; z-index: 0; background-image: url('/images/JustifyLogoSmall.png'); background-repeat: repeat; background-size: 120px 120px; opacity: 0.035; transform: rotate(-15deg) scale(1.4); pointer-events: none; filter: grayscale(100%) brightness(2); } /* 2. Geometric Grid */ .bg-geometric-grid::before { content: ''; position: fixed; inset: 0; z-index: 0; pointer-events: none; background-image: linear-gradient(rgba(255,255,255,0.03) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,0.03) 1px, transparent 1px), radial-gradient(circle 1.5px, rgba(0,201,167,0.15) 0%, transparent 100%); background-size: 60px 60px, 60px 60px, 60px 60px; background-position: 0 0, 0 0, 30px 30px; } .bg-geometric-grid::after { content: ''; position: fixed; inset: 0; z-index: 0; pointer-events: none; background: radial-gradient(ellipse 80% 60% at 50% 0%, rgba(0,201,167,0.04) 0%, transparent 70%), radial-gradient(ellipse 60% 40% at 80% 100%, rgba(0,201,167,0.02) 0%, transparent 60%); } /* 3. Gradient Mesh (Aurora) */ .bg-gradient-mesh::before { content: ''; position: fixed; inset: 0; z-index: 0; pointer-events: none; background: radial-gradient(ellipse 80% 50% at 20% 10%, rgba(0,201,167,0.08) 0%, transparent 60%), radial-gradient(ellipse 60% 70% at 80% 30%, rgba(0,160,200,0.06) 0%, transparent 50%), radial-gradient(ellipse 50% 50% at 50% 80%, rgba(0,201,167,0.05) 0%, transparent 60%), radial-gradient(ellipse 90% 40% at 10% 60%, rgba(0,100,180,0.04) 0%, transparent 50%); animation: auroraDrift 20s ease-in-out infinite alternate; } .bg-gradient-mesh::after { content: ''; position: fixed; inset: 0; z-index: 0; pointer-events: none; background: radial-gradient(ellipse 40% 80% at 70% 0%, rgba(0,201,167,0.06) 0%, transparent 50%), radial-gradient(ellipse 60% 50% at 30% 90%, rgba(0,80,160,0.05) 0%, transparent 50%); animation: auroraDrift 25s ease-in-out 5s infinite alternate-reverse; } @keyframes auroraDrift { 0% { transform: translate(0, 0) scale(1); opacity: 1; } 50% { transform: translate(-20px, 10px) scale(1.05); opacity: 0.8; } 100% { transform: translate(15px, -15px) scale(0.98); opacity: 1; } } /* 4. Circuit/Tech */ .bg-circuit::before { content: ''; position: fixed; inset: 0; z-index: 0; pointer-events: none; background-image: linear-gradient(0deg, transparent 49.5%, rgba(0,201,167,0.04) 49.5%, rgba(0,201,167,0.04) 50.5%, transparent 50.5%), linear-gradient(90deg, transparent 49.5%, rgba(0,201,167,0.04) 49.5%, rgba(0,201,167,0.04) 50.5%, transparent 50.5%), radial-gradient(circle 2px, rgba(0,201,167,0.12) 0%, transparent 100%), linear-gradient(0deg, transparent 49.8%, rgba(0,201,167,0.02) 49.8%, rgba(0,201,167,0.02) 50.2%, transparent 50.2%), linear-gradient(90deg, transparent 49.8%, rgba(0,201,167,0.02) 49.8%, rgba(0,201,167,0.02) 50.2%, transparent 50.2%); background-size: 200px 200px, 200px 200px, 200px 200px, 50px 50px, 50px 50px; } .bg-circuit::after { content: ''; position: fixed; inset: 0; z-index: 0; pointer-events: none; background-image: linear-gradient(45deg, transparent 48%, rgba(0,201,167,0.025) 48%, rgba(0,201,167,0.025) 52%, transparent 52%), linear-gradient(-45deg, transparent 48%, rgba(0,201,167,0.02) 48%, rgba(0,201,167,0.02) 52%, transparent 52%), radial-gradient(ellipse 70% 70% at 50% 50%, transparent 40%, rgba(5,5,8,0.6) 100%); background-size: 400px 400px, 400px 400px, 100% 100%; } /* ========== COLOR THEMES ========== */ /* Theme: Classic (default — white on near-black, mint accents) */ .theme-classic { --text-primary: #FFFFFF; --text-secondary: rgba(255, 255, 255, 0.50); --text-muted: rgba(255, 255, 255, 0.25); --text-label: rgba(255, 255, 255, 0.4); --accent: #00C9A7; --accent-dim: #00A88A; --accent-glow: rgba(0, 201, 167, 0.15); --bg-dark: #050508; --bg-section: #08080D; --bg-card: rgba(10, 10, 15, 0.7); --bg-card-alt: rgba(12, 12, 18, 0.6); --card-border: rgba(255, 255, 255, 0.06); --card-border-hover: rgba(255, 255, 255, 0.12); --positive: #48BB78; --negative: #FC8181; --warning: #ECC94B; } /* Theme: Warm (cream on navy, gold accents) */ .theme-warm { --text-primary: #F5F0E8; --text-secondary: rgba(245, 240, 232, 0.50); --text-muted: rgba(245, 240, 232, 0.25); --text-label: rgba(245, 240, 232, 0.4); --accent: #D4A843; --accent-dim: #B8922E; --accent-glow: rgba(212, 168, 67, 0.15); --bg-dark: #0A0E1A; --bg-section: #0D1122; --bg-card: rgba(14, 18, 30, 0.75); --bg-card-alt: rgba(18, 22, 36, 0.65); --card-border: rgba(212, 168, 67, 0.08); --card-border-hover: rgba(212, 168, 67, 0.16); --positive: #7BC96B; --negative: #E87C7C; --warning: #D4A843; } /* Theme: Cool (ice white on charcoal, electric blue accents) */ .theme-cool { --text-primary: #E8F0FF; --text-secondary: rgba(232, 240, 255, 0.50); --text-muted: rgba(232, 240, 255, 0.25); --text-label: rgba(232, 240, 255, 0.4); --accent: #4D9EFF; --accent-dim: #3A82DD; --accent-glow: rgba(77, 158, 255, 0.15); --bg-dark: #12141A; --bg-section: #161820; --bg-card: rgba(18, 20, 28, 0.75); --bg-card-alt: rgba(22, 24, 34, 0.65); --card-border: rgba(77, 158, 255, 0.08); --card-border-hover: rgba(77, 158, 255, 0.16); --positive: #4DB8A4; --negative: #FF7B7B; --warning: #FFB84D; } /* Theme: Light (white background, dark text, mint accents) */ .theme-light { --text-primary: #1A1A2E; --text-secondary: rgba(26, 26, 46, 0.78); --text-muted: rgba(26, 26, 46, 0.5); --text-label: rgba(26, 26, 46, 0.65); --accent: #00C9A7; --accent-dim: #00A88A; --accent-glow: rgba(0, 201, 167, 0.12); --bg-dark: #FFFFFF; --bg-section: #F8F9FA; --bg-card: rgba(240, 243, 247, 0.95); --bg-card-alt: rgba(232, 236, 242, 0.9); --card-border: rgba(0, 0, 0, 0.12); --card-border-hover: rgba(0, 0, 0, 0.2); --table-header-bg: rgba(248, 249, 250, 0.95); --table-row-base: rgba(255, 255, 255, 0.5); --table-row-alt: rgba(248, 249, 250, 0.5); --positive: #2D8B57; --negative: #D04848; --warning: #C49000; } /* ========== PRINT MODE — Hide backgrounds ========== */ body.print-mode .bg-logo-tile::before, body.print-mode .bg-geometric-grid::before, body.print-mode .bg-geometric-grid::after, body.print-mode .bg-gradient-mesh::before, body.print-mode .bg-gradient-mesh::after, body.print-mode .bg-circuit::before, body.print-mode .bg-circuit::after { display: none !important; } @media print { .bg-logo-tile::before, .bg-geometric-grid::before, .bg-geometric-grid::after, .bg-gradient-mesh::before, .bg-gradient-mesh::after, .bg-circuit::before, .bg-circuit::after { display: none !important; } }