/* ═══════════════════════════════════════════════════════════════════════════ JOLLYAI · BRUTALIST TECH — SITE-WIDE OVERRIDE ═══════════════════════════════════════════════════════════════════════════ Loaded LAST in . Re-defines CSS variables + overrides common patterns with high specificity so header / footer / index / all tools pages inherit a consistent brutalist look. Palette: #0a0a0a page background #a3ff12 primary accent (lime) #0f0f0f surface #ff3d00 fire / urgency #141414 surface-2 #ffb300 warning / gold #2a2a2a hard line #00d97e success #f2f2f2 ink #ff3b3b error #9a9a9a ink-2 Typography: Space Grotesk (sans) · JetBrains Mono (mono) Edges: sharp (border-radius 0) Decoration: hard borders, no soft shadows, no rounded glow ═══════════════════════════════════════════════════════════════════════════ */ @import url('https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@400;500;600;700&family=JetBrains+Mono:wght@400;500;600;700&display=swap'); /* ─── Re-define theme variables (this cascades to EVERY component) ─── */ :root { --bg-color: #0a0a0a !important; --secondary-bg: #0f0f0f !important; --card-bg: #0f0f0f !important; --text-color: #f2f2f2 !important; --text-primary: #f2f2f2 !important; --text-secondary: #9a9a9a !important; --gray-light: #9a9a9a !important; --gray: #9a9a9a !important; --border-color: #2a2a2a !important; --border: #2a2a2a !important; --glass: rgba(255,255,255,0.03) !important; --glass-border: #2a2a2a !important; --accent-color: #a3ff12 !important; --accent: #a3ff12 !important; --accent-rgb: 163,255,18 !important; --primary: #a3ff12 !important; --primary-dark: #6a9e22 !important; --secondary: #6a9e22 !important; --secondary-rgb: 106,158,34 !important; --success: #00d97e !important; --error: #ff3b3b !important; --warning: #ffb300 !important; /* Local design tokens */ --bz-mono: 'JetBrains Mono', ui-monospace, 'SF Mono', Menlo, Consolas, monospace; --bz-sans: 'Space Grotesk', system-ui, -apple-system, sans-serif; --bz-line: #1f1f1f; --bz-line-2: #2a2a2a; --bz-ink-3: #5e5e5e; } /* ─── Page baseline ─── */ html, body { background: #0a0a0a !important; color: #f2f2f2 !important; } body { font-family: var(--bz-sans) !important; background-image: linear-gradient(rgba(255,255,255,0.018) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,0.018) 1px, transparent 1px) !important; background-size: 32px 32px !important; background-attachment: fixed !important; -webkit-font-smoothing: antialiased; } /* ─── Typography ─── */ h1, h2, h3, h4, h5, h6 { font-family: var(--bz-sans) !important; color: #f2f2f2 !important; letter-spacing: -0.025em !important; background: none !important; -webkit-text-fill-color: currentColor !important; } h1 { font-weight: 700 !important; line-height: 1.05 !important; } h2 { font-weight: 700 !important; line-height: 1.1 !important; } h3 { font-weight: 700 !important; line-height: 1.15 !important; } .highlight, .logo-link:hover .logo-text { background: none !important; -webkit-text-fill-color: currentColor !important; color: #a3ff12 !important; } p { color: #f2f2f2; } a { color: #a3ff12; } a:hover { color: #f2f2f2; } /* ═══════════════════════════════════════════════════════════════════════════ 1. HEADER / NAV ═══════════════════════════════════════════════════════════════════════════ */ .header { background: rgba(10,10,10,0.92) !important; backdrop-filter: blur(8px) !important; -webkit-backdrop-filter: blur(8px) !important; border-bottom: 1px solid #2a2a2a !important; box-shadow: none !important; } .header.scrolled { background: rgba(10,10,10,0.96) !important; } .logo-link { text-decoration: none !important; } .logo-text, .logo-link .logo-text { background: none !important; -webkit-background-clip: initial !important; -webkit-text-fill-color: #f2f2f2 !important; color: #f2f2f2 !important; font-family: var(--bz-sans) !important; font-weight: 700 !important; letter-spacing: -0.02em !important; } .logo-link:hover .logo-text { color: #a3ff12 !important; -webkit-text-fill-color: #a3ff12 !important; } /* Nav links */ .nav-link { color: #f2f2f2 !important; font-family: var(--bz-mono) !important; font-weight: 600 !important; font-size: 12px !important; letter-spacing: 0.1em !important; text-transform: uppercase !important; transition: color .18s !important; border-radius: 0 !important; } .nav-link:hover { color: #a3ff12 !important; } .nav-link::after { background: #a3ff12 !important; height: 2px !important; } .nav-link.active { color: #a3ff12 !important; } /* User greeting */ .user-greeting { font-family: var(--bz-mono); font-size: 12px !important; letter-spacing: 0.04em; color: #f2f2f2 !important; } .user-greeting i { color: #a3ff12 !important; } /* Tools dropdown button */ .tools-dropdown-btn { font-family: var(--bz-mono) !important; font-weight: 600 !important; font-size: 12px !important; letter-spacing: 0.1em !important; text-transform: uppercase !important; color: #f2f2f2 !important; margin-top: 12px; } .tools-dropdown-btn:hover { color: #a3ff12 !important; } /* Tools dropdown menu */ .tools-dropdown-menu { background: #0f0f0f !important; border: 1px solid #2a2a2a !important; border-radius: 0 !important; box-shadow: 0 12px 36px -8px rgba(0,0,0,0.6) !important; backdrop-filter: none !important; } .tools-dropdown-item { border-radius: 0 !important; color: #f2f2f2 !important; font-family: var(--bz-sans) !important; transition: background .15s, color .15s !important; } .tools-dropdown-item:hover { background: #141414 !important; color: #a3ff12 !important; } .tools-item-icon { background: rgba(163,255,18,0.10) !important; color: #a3ff12 !important; border-radius: 0 !important; } /* Mobile menu button */ .mobile-menu-btn { color: #f2f2f2 !important; border-radius: 0 !important; } .mobile-menu-btn:hover { color: #a3ff12 !important; } /* ═══════════════════════════════════════════════════════════════════════════ 2. MODALS (auth, settings, generic) ═══════════════════════════════════════════════════════════════════════════ */ .modal { background: rgba(0,0,0,0.85) !important; backdrop-filter: blur(8px) !important; -webkit-backdrop-filter: blur(8px) !important; } .modal-content { background: #0a0a0a !important; border: 1px solid #a3ff12 !important; border-radius: 0 !important; box-shadow: 0 24px 60px rgba(0,0,0,0.7) !important; } .modal-header { background: transparent !important; border-bottom: 1px solid #2a2a2a !important; border-radius: 0 !important; } .modal-header::after { display: none !important; } .modal-header h3 { color: #a3ff12 !important; font-family: var(--bz-mono) !important; font-size: 13px !important; font-weight: 700 !important; letter-spacing: 0.14em !important; text-transform: uppercase !important; } .modal-header h3 i { background: none !important; -webkit-text-fill-color: currentColor !important; color: #a3ff12 !important; } .modal-body::-webkit-scrollbar-thumb { background: #a3ff12 !important; border-radius: 0 !important; } .modal-close { background: transparent !important; border: 1px solid #2a2a2a !important; color: #f2f2f2 !important; border-radius: 0 !important; transition: all .18s; } .modal-close:hover { background: #ff3d00 !important; border-color: #ff3d00 !important; color: #fff !important; transform: none !important; } /* ═══════════════════════════════════════════════════════════════════════════ 3. AUTH TABS & FORMS ═══════════════════════════════════════════════════════════════════════════ */ .auth-tab { font-family: var(--bz-mono) !important; font-weight: 600 !important; font-size: 12px !important; letter-spacing: 0.12em !important; text-transform: uppercase !important; color: #9a9a9a !important; border-radius: 0 !important; background: transparent !important; border-bottom: 2px solid transparent !important; } .auth-tab:hover:not(.active) { color: #f2f2f2 !important; background: #141414 !important; } .auth-tab.active { color: #a3ff12 !important; border-bottom-color: #a3ff12 !important; background: transparent !important; } .form-label, .form-input + label, label { color: #f2f2f2 !important; font-family: var(--bz-mono) !important; font-size: 11px !important; font-weight: 600 !important; letter-spacing: 0.08em; text-transform: uppercase; } .form-input, .form-control, input[type="text"]:not([class*="cc-"]), input[type="email"], input[type="password"], input[type="number"], input[type="search"], textarea, select { background: #0f0f0f !important; border: 1px solid #2a2a2a !important; border-radius: 0 !important; color: #f2f2f2 !important; font-family: var(--bz-sans) !important; transition: border-color .18s !important; box-shadow: none !important; } .form-input:hover, .form-control:hover { border-color: #3a3a3a !important; } .form-input:focus, .form-control:focus, input:focus, textarea:focus, select:focus { outline: none !important; border-color: #a3ff12 !important; background: #0a0a0a !important; box-shadow: 0 0 0 2px rgba(163,255,18,0.18) !important; } .input-with-icon i { color: #5e5e5e !important; } .input-with-icon .form-input:focus + i, .input-with-icon:hover i { color: #a3ff12 !important; } select.form-input option, select.form-control option { background: #0f0f0f !important; color: #f2f2f2 !important; } select.form-control optgroup { background: #0a0a0a !important; color: #a3ff12 !important; font-weight: 700; } .forgot-password-link { color: #a3ff12 !important; } .forgot-password-link:hover { color: #f2f2f2 !important; } /* ═══════════════════════════════════════════════════════════════════════════ 4. BUTTONS (primary, secondary, generic) ═══════════════════════════════════════════════════════════════════════════ */ .btn, .btn-primary, .auth-primary-btn, button.primary, .cta-button { background: #a3ff12 !important; border: 1px solid #a3ff12 !important; color: #000 !important; border-radius: 0 !important; font-family: var(--bz-sans) !important; font-weight: 700 !important; letter-spacing: 0.08em !important; text-transform: uppercase !important; box-shadow: none !important; transition: background .18s, color .18s, border-color .18s; } .btn:hover, .btn-primary:hover, .auth-primary-btn:hover, button.primary:hover, .cta-button:hover { background: #f2f2f2 !important; border-color: #f2f2f2 !important; color: #000 !important; transform: none !important; box-shadow: none !important; } .btn-secondary, .auth-secondary-btn, button.secondary { background: transparent !important; border: 1px solid #2a2a2a !important; color: #f2f2f2 !important; border-radius: 0 !important; font-family: var(--bz-sans) !important; font-weight: 700 !important; letter-spacing: 0.08em !important; text-transform: uppercase !important; box-shadow: none !important; transition: border-color .18s, color .18s, background .18s; } .btn-secondary:hover, .auth-secondary-btn:hover, button.secondary:hover { background: #141414 !important; border-color: #a3ff12 !important; color: #a3ff12 !important; transform: none !important; box-shadow: none !important; } /* ═══════════════════════════════════════════════════════════════════════════ 5. CARDS, FEATURE CARDS, STATS ═══════════════════════════════════════════════════════════════════════════ */ .feature-card, .card, .glass-card { background: #0f0f0f !important; border: 1px solid #2a2a2a !important; border-radius: 0 !important; box-shadow: none !important; backdrop-filter: none !important; -webkit-backdrop-filter: none !important; transition: background .25s, border-color .25s !important; } .feature-card:hover, .card:hover, .glass-card:hover { background: #141414 !important; border-color: #a3ff12 !important; transform: none !important; box-shadow: none !important; } .feature-icon { background: none !important; -webkit-background-clip: initial !important; -webkit-text-fill-color: #a3ff12 !important; color: #a3ff12 !important; } .stats-bar { background: #0f0f0f !important; border: 1px solid #2a2a2a !important; border-radius: 0 !important; } .stat-icon { color: #a3ff12 !important; } .stat-value { color: #a3ff12 !important; font-family: var(--bz-mono); font-weight: 700; letter-spacing: 0.02em; } /* Generation section */ .generation-section { background: #0a0a0a !important; border: 1px solid #2a2a2a !important; border-radius: 0 !important; } /* Quick-start onboarding */ .quick-start-title { color: #a3ff12 !important; font-family: var(--bz-mono); } .step-number { background: #a3ff12 !important; color: #000 !important; border-radius: 0 !important; font-family: var(--bz-mono); font-weight: 700; } /* ═══════════════════════════════════════════════════════════════════════════ 6. FOOTER ═══════════════════════════════════════════════════════════════════════════ */ .footer { background: #0a0a0a !important; border-top: 1px solid #2a2a2a !important; padding-top: 64px !important; padding-bottom: 48px !important; } .footer-grid { gap: 48px !important; } .footer-column h3 { color: #a3ff12 !important; font-family: var(--bz-mono) !important; font-size: 11px !important; font-weight: 700 !important; letter-spacing: 0.16em !important; text-transform: uppercase !important; margin-bottom: 18px !important; padding-bottom: 8px !important; border-bottom: 1px solid #2a2a2a !important; } .footer-column h3::before { content: "// "; color: #5e5e5e; } .footer-column p { color: #9a9a9a !important; font-family: var(--bz-mono); font-size: 12px; letter-spacing: 0.02em; line-height: 1.7; } .footer-links a { color: #9a9a9a !important; font-family: var(--bz-sans) !important; font-size: 13px !important; text-decoration: none !important; transition: color .15s, padding-left .15s !important; display: inline-block; } .footer-links a:hover { color: #a3ff12 !important; padding-left: 6px; } .footer-links a:hover::before { content: "➜ "; position: absolute; margin-left: -16px; color: #a3ff12; } .footer-links li { position: relative; } .footer-bottom { border-top: 1px solid #2a2a2a !important; padding-top: 24px !important; color: #5e5e5e !important; font-family: var(--bz-mono); font-size: 11px !important; letter-spacing: 0.04em; } .footer-bottom p { color: #5e5e5e !important; } .footer-bottom a { color: #9a9a9a !important; } .footer-bottom a:hover { color: #a3ff12 !important; } .social-links { gap: 8px !important; } .social-link { background: transparent !important; border: 1px solid #2a2a2a !important; border-radius: 0 !important; color: #f2f2f2 !important; width: 38px !important; height: 38px !important; transition: all .18s !important; } .social-link:hover { background: #a3ff12 !important; border-color: #a3ff12 !important; color: #000 !important; transform: none !important; } /* SEO link blocks at bottom of footer */ .footer-bottom > div[style] { background: transparent !important; border: 1px solid #2a2a2a !important; border-radius: 0 !important; text-align: left !important; } .footer-bottom > div[style] strong { color: #a3ff12 !important; font-family: var(--bz-mono); font-size: 11px; letter-spacing: 0.1em; text-transform: uppercase; } .footer-bottom > div[style] a[style] { color: #9a9a9a !important; text-decoration: none; font-size: 12px; transition: color .15s; } .footer-bottom > div[style] a[style]:hover { color: #a3ff12 !important; } /* ═══════════════════════════════════════════════════════════════════════════ 7. MAINTENANCE / NOTIFICATIONS ═══════════════════════════════════════════════════════════════════════════ */ .maintenance-notification { background: #0f0f0f !important; border: 1px solid #ffb300 !important; border-left-width: 4px !important; border-radius: 0 !important; color: #ffb300 !important; font-family: var(--bz-mono) !important; box-shadow: none !important; } /* ═══════════════════════════════════════════════════════════════════════════ 8. INDEX PAGE — HERO / GENERATION SHELL / GALLERY (Catch-all rules for elements likely used across index.php) ═══════════════════════════════════════════════════════════════════════════ */ .hero, .hero-section, section.hero { background: transparent !important; } .hero h1 { background: none !important; -webkit-text-fill-color: #f2f2f2 !important; color: #f2f2f2 !important; font-weight: 700 !important; letter-spacing: -0.04em !important; text-transform: uppercase; } /* Generic section title */ .section-title { color: #f2f2f2 !important; font-weight: 700 !important; letter-spacing: -0.02em !important; background: none !important; -webkit-text-fill-color: currentColor !important; } /* Generic CTA / pill / chip */ .chip, .pill, .tag, .badge { border-radius: 0 !important; font-family: var(--bz-mono); letter-spacing: 0.06em; text-transform: uppercase; } /* Gallery / image cards */ .gallery-item, .image-card, .job-card { background: #0f0f0f !important; border: 1px solid #2a2a2a !important; border-radius: 0 !important; box-shadow: none !important; transition: border-color .2s !important; } .gallery-item:hover, .image-card:hover, .job-card:hover { border-color: #a3ff12 !important; transform: none !important; } /* Tabs (generic) */ .tab, .tabs button { border-radius: 0 !important; font-family: var(--bz-mono); letter-spacing: 0.1em; text-transform: uppercase; } .tab.active, .tabs button.active { background: #a3ff12 !important; color: #000 !important; border-color: #a3ff12 !important; } /* FAQ */ .faq-item { background: #0f0f0f !important; border: 1px solid #2a2a2a !important; border-radius: 0 !important; } .faq-question { color: #f2f2f2 !important; font-weight: 700; } .faq-answer { color: #9a9a9a !important; font-family: var(--bz-mono); font-size: 13px; line-height: 1.7; } /* Progress / loaders */ .spinner, .loader { border-radius: 50% !important; /* keep circle */ border-color: #2a2a2a !important; border-top-color: #a3ff12 !important; } /* Scrollbar */ ::-webkit-scrollbar { width: 10px; height: 10px; } ::-webkit-scrollbar-track { background: #0a0a0a; } ::-webkit-scrollbar-thumb { background: #2a2a2a; border-radius: 0; } ::-webkit-scrollbar-thumb:hover { background: #a3ff12; } /* Selection */ ::selection { background: #a3ff12; color: #000; } /* ═══════════════════════════════════════════════════════════════════════════ 9. RESET ALL ROUND-CORNERS ON COMMON CHROME (last-resort sweep — overrides any inline border-radius on cards, modals and panels that we missed) ═══════════════════════════════════════════════════════════════════════════ */ .glass-card, .card, .feature-card, .modal-content, .tools-dropdown-menu, .faq-item, .stats-bar, .gallery-item, .image-card, .job-card, .maintenance-notification { border-radius: 0 !important; }