/* ============================================================================ JULES COMPUTER — GLOBAL CSS VARIABLES & BASE THEME ============================================================================ This file MUST be loaded in BEFORE any page-specific styles. Include in header.php: ============================================================================ */ /* ============================================================ CSS CUSTOM PROPERTIES (Dark Theme) ============================================================ */ :root { /* ---- Core Palette ---- */ --accent: #4f8fff; --accent-hover: #3b7dff; --accent-glow: rgba(79, 143, 255, 0.08); --green: #22c55e; --green-hover: #16a34a; --red: #ef4444; --red-hover: #dc2626; --orange: #f59e0b; --orange-hover: #d97706; --purple: #a855f7; --purple-hover: #9333ea; --yellow: #eab308; --cyan: #06b6d4; /* ---- Backgrounds ---- */ --bg: #0a0c10; --bg-card: #12141a; --bg-card-hover: #1a1d26; --bg-elevated: #1e2130; /* ---- Text ---- */ --text-primary: #e8eaee; --text-secondary: #a0a6b4; --text-muted: #5e6578; --text-inverse: #0a0c10; /* ---- Borders ---- */ --border: #222636; --border-light: #2a2e3e; --border-focus: var(--accent); /* ---- Typography ---- */ --font: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, sans-serif; --font-mono: 'JetBrains Mono', 'Fira Code', 'Cascadia Code', monospace; /* ---- Radius ---- */ --radius: 12px; --radius-sm: 8px; --radius-lg: 16px; --radius-pill: 9999px; /* ---- Shadows ---- */ --shadow-sm: 0 2px 8px rgba(0, 0, 0, 0.2); --shadow-md: 0 8px 24px rgba(0, 0, 0, 0.3); --shadow-lg: 0 16px 48px rgba(0, 0, 0, 0.4); --shadow-glow: 0 0 20px rgba(79, 143, 255, 0.15); /* ---- Transitions ---- */ --transition: all 0.2s ease; --transition-slow: all 0.4s ease; /* ---- Z-Index Layers ---- */ --z-dropdown: 100; --z-sticky: 200; --z-overlay: 500; --z-modal: 1000; --z-toast: 5000; --z-loader: 9999; /* ---- Spacing Scale ---- */ --space-xs: 4px; --space-sm: 8px; --space-md: 16px; --space-lg: 24px; --space-xl: 32px; --space-2xl: 48px; --space-3xl: 64px; /* ---- Header ---- */ --header-height: 64px; } /* ============================================================ BASE RESET & DEFAULTS ============================================================ */ *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; } html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } body { font-family: var(--font); font-size: 14px; line-height: 1.6; color: var(--text-primary); background: var(--bg); min-height: 100vh; overflow-x: hidden; } /* ---- Links ---- */ a { color: var(--accent); text-decoration: none; transition: color 0.2s; } a:hover { color: var(--accent-hover); } /* ---- Images ---- */ img, video { max-width: 100%; height: auto; display: block; } /* ---- Lists ---- */ ul, ol { list-style: none; } /* ---- Buttons ---- */ button, input, select, textarea { font-family: var(--font); font-size: inherit; color: inherit; } button { cursor: pointer; border: none; background: none; } /* ---- Scrollbar (Webkit) ---- */ ::-webkit-scrollbar { width: 6px; height: 6px; } ::-webkit-scrollbar-track { background: transparent; } ::-webkit-scrollbar-thumb { background: var(--border); border-radius: 3px; } ::-webkit-scrollbar-thumb:hover { background: var(--text-muted); } /* Firefox scrollbar */ * { scrollbar-width: thin; scrollbar-color: var(--border) transparent; } /* ---- Selection ---- */ ::selection { background: rgba(79, 143, 255, 0.25); color: var(--text-primary); } /* ---- Focus visible (accessibility) ---- */ :focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; } /* ---- Utilities ---- */ .sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; } /* ---- Container ---- */ .container { width: 100%; max-width: 1440px; margin: 0 auto; padding: 0 24px; } @media (max-width: 640px) { .container { padding: 0 16px; } } /* ============================================================ REDUCED MOTION ============================================================ */ @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; } html { scroll-behavior: auto; } }