/* ═══════════════════════════════════════════════════════════ Light Mode — Fluorescent Garage Theme Toggle with data-theme="light" on ═══════════════════════════════════════════════════════════ */ [data-theme="light"] { /* ── Core palette ─────────────────── */ --l-bg: #f2efe6; --l-bg-alt: #e8e4da; --l-card: #ffffff; --l-card-alt: #f7f5f0; --l-border: #ddd8ce; --l-border-subtle: #e8e4da; --l-text: #1a1a1a; --l-text-muted: #555; --l-text-dim: #888; --l-accent: #ff6600; --l-accent-glow: #ff8800; --l-green: #33aa33; --l-blue: #0066cc; --l-red: #cc0000; --l-amber: #cc6600; --l-overlay: rgba(242,239,230,0.92); } [data-theme="light"] body { background: var(--l-bg); color: var(--l-text); } [data-theme="light"] ::selection { background: var(--l-accent); color: #fff; } [data-theme="light"] a { color: var(--l-blue); } [data-theme="light"] a:hover { color: #004499; } /* ── Header ───────────────────────── */ [data-theme="light"] #site-header { background: var(--l-overlay); border-bottom-color: var(--l-border); } [data-theme="light"] .logo-car { color: var(--l-text-muted); } [data-theme="light"] .logo-domain { color: var(--l-text-dim); } [data-theme="light"] .logo-ai { color: var(--l-accent); } [data-theme="light"] .nav-link { color: var(--l-text-dim); } [data-theme="light"] .nav-link:hover, [data-theme="light"] .nav-link.active { color: var(--l-text); } [data-theme="light"] .nav-dot { background: var(--l-border); } [data-theme="light"] .nav-wire { background: var(--l-border); } [data-theme="light"] .nav-login-link { color: var(--l-accent); } [data-theme="light"] .nav-dropdown-toggle { border-color: var(--l-border); color: var(--l-text-dim); background: var(--l-bg-alt); } [data-theme="light"] .nav-dropdown-toggle:hover { border-color: var(--l-accent); color: var(--l-text); } [data-theme="light"] .nav-dropdown-menu { background: var(--l-card); border-color: var(--l-border); box-shadow: 0 8px 24px rgba(0,0,0,0.1); } [data-theme="light"] .nav-dropdown-item { color: var(--l-text-muted); } [data-theme="light"] .nav-dropdown-item:hover { background: var(--l-bg-alt); color: var(--l-text); } [data-theme="light"] .nav-dropdown-divider { background: var(--l-border-subtle); } /* Theme toggle button */ .theme-toggle { background: none; border: none; border-radius: 4px; padding: 4px 8px; cursor: pointer; font-size: 14px; line-height: 1; color: #888; transition: color 0.2s; } .theme-toggle:hover { color: var(--l-accent, #c90); } /* ── Search ────────────────────────── */ [data-theme="light"] .search-icon { color: #999; } [data-theme="light"] .search-icon:hover { color: var(--l-accent); } [data-theme="light"] .search-wrap.expanded .search-input { background: var(--l-bg-alt); border-color: var(--l-border); color: var(--l-text); } [data-theme="light"] .search-wrap.expanded .search-input::placeholder { color: #999; } [data-theme="light"] .search-wrap.expanded .search-input:focus { border-color: var(--l-accent); } [data-theme="light"] .search-results { background: var(--l-card); border-color: var(--l-border); box-shadow: 0 8px 24px rgba(0,0,0,0.1); } [data-theme="light"] .search-result-item { border-bottom-color: var(--l-border-subtle); } [data-theme="light"] .search-result-item:hover { background: rgba(255,102,0,0.06); } [data-theme="light"] .search-result-label { color: var(--l-text); } [data-theme="light"] .search-result-subtitle { color: var(--l-text-dim); } [data-theme="light"] .search-result-type { color: var(--l-accent); } [data-theme="light"] .search-result-thumb, [data-theme="light"] .search-result-thumb-placeholder { background: var(--l-bg-alt); } /* ── Hero ──────────────────────────── */ [data-theme="light"] .hero-badge { color: var(--l-accent); } [data-theme="light"] .hero-title { color: var(--l-text); } [data-theme="light"] .hero-subtitle { color: var(--l-text-muted); } [data-theme="light"] .hero-subtitle strong { color: var(--l-blue); } [data-theme="light"] .hero-stat-num { color: var(--l-accent); } [data-theme="light"] .hero-stat-label { color: var(--l-text-dim); } [data-theme="light"] .hero-cta { border-color: var(--l-border); color: var(--l-text-muted); } [data-theme="light"] .hero-cta:hover { border-color: var(--l-accent); color: var(--l-text); } [data-theme="light"] .hero-cta-primary { background: #fff3e6; border-color: var(--l-accent); color: var(--l-accent); } [data-theme="light"] .hero-cta-primary:hover { background: #ffe6cc; } [data-theme="light"] .hero-latest-card { background: var(--l-card); border-color: var(--l-border); } [data-theme="light"] .hero-latest-label { color: var(--l-text-dim); } [data-theme="light"] .hero-latest-content { color: var(--l-text-muted); } /* ── Feed / Posts ──────────────────── */ [data-theme="light"] .feed-title, [data-theme="light"] .garage-header h1 { color: var(--l-text-muted); } [data-theme="light"] .feed-subtitle, [data-theme="light"] .garage-header p { color: var(--l-text-dim); } [data-theme="light"] .filter-btn { border-color: var(--l-border); color: var(--l-text-dim); } [data-theme="light"] .filter-btn:hover { border-color: var(--l-accent); color: var(--l-text); } [data-theme="light"] .filter-btn.active { border-color: var(--l-blue); color: var(--l-blue); } [data-theme="light"] .post-card { border-bottom-color: var(--l-border-subtle); } [data-theme="light"] .post-thumb { background: var(--l-bg-alt); border-color: var(--l-border); } [data-theme="light"] .post-car-name { color: var(--l-accent); } [data-theme="light"] .post-car-name:hover { color: var(--l-accent-glow); } [data-theme="light"] .post-car-subtitle { color: var(--l-text-dim); } [data-theme="light"] .post-type-badge { color: var(--l-text-dim); } [data-theme="light"] .post-time-real { color: var(--l-text-muted); } [data-theme="light"] .post-content { color: var(--l-text); } [data-theme="light"] .handle-link { color: var(--l-accent); } [data-theme="light"] .handle-link:hover { color: var(--l-accent-glow); } [data-theme="light"] .post-boot-log { background: #f5fff0; border-color: #c8e6c0; color: #336633; } [data-theme="light"] .loading { color: var(--l-text-dim); } [data-theme="light"] .load-more-btn { border-color: var(--l-border); color: var(--l-text-dim); } [data-theme="light"] .load-more-btn:hover { border-color: var(--l-accent); color: var(--l-text); } [data-theme="light"] .post-card:last-child { border-bottom: none; } /* ── Reactions & Comments ──────────── */ [data-theme="light"] .post-actions { border-top-color: var(--l-border-subtle); } [data-theme="light"] .post-reaction-btn { color: var(--l-text-dim); } [data-theme="light"] .post-reaction-btn:hover { background: var(--l-bg-alt); border-color: var(--l-border); } [data-theme="light"] .post-share-btn { color: var(--l-text-dim); } [data-theme="light"] .post-share-btn:hover { color: var(--l-accent); } [data-theme="light"] .post-comments-btn { border-color: var(--l-border); color: var(--l-text-dim); } [data-theme="light"] .post-comments-container { border-top-color: var(--l-border-subtle); } [data-theme="light"] .comment-reply { border-left-color: var(--l-border); } [data-theme="light"] .comment-handle { color: var(--l-accent); } [data-theme="light"] .comment-time { color: var(--l-text-dim); } [data-theme="light"] .comment-text { color: var(--l-text-muted); } /* ── Car Grid ──────────────────────── */ [data-theme="light"] .car-card { border-color: var(--l-border); } [data-theme="light"] .car-card:hover { border-color: var(--l-accent); background: var(--l-card-alt); } [data-theme="light"] .car-card-thumb { background: var(--l-bg-alt); } [data-theme="light"] .car-card-handle { color: var(--l-accent); } [data-theme="light"] .car-card-name { color: var(--l-text-muted); } [data-theme="light"] .car-card-nickname { color: var(--l-blue); } [data-theme="light"] .car-card-location { color: var(--l-text-dim); } [data-theme="light"] .car-card-era { color: var(--l-text-dim); } /* ── Featured / Shame ──────────────── */ [data-theme="light"] .featured-card { background: var(--l-card); border-color: var(--l-border); } [data-theme="light"] .featured-card:hover { border-color: var(--l-accent); } [data-theme="light"] .featured-card-handle { color: var(--l-accent); } [data-theme="light"] .featured-card-car { color: var(--l-text-dim); } [data-theme="light"] .featured-card-content { color: var(--l-text-muted); } [data-theme="light"] .featured-card-stats { color: var(--l-text-dim); } [data-theme="light"] .featured-title { color: var(--l-text-muted); } [data-theme="light"] .shame-teaser { background: #fff5f5; border-color: #ffcccc; } [data-theme="light"] .shame-title { color: #cc0000; } [data-theme="light"] .shame-handle { color: #cc0000; } [data-theme="light"] .shame-card { background: #fff5f5; border-color: #ffcccc; } [data-theme="light"] .shame-card:hover { border-color: #ff6666; } /* ── Profile ───────────────────────── */ [data-theme="light"] .profile-back { color: var(--l-text-dim); border-color: var(--l-border); background: var(--l-card); } [data-theme="light"] .spec-plate { background: var(--l-card); border-color: var(--l-border); box-shadow: 0 2px 8px rgba(0,0,0,0.08); } [data-theme="light"] .spec-plate::before, [data-theme="light"] .spec-plate::after { background: radial-gradient(circle at 40% 40%, #999, #666); } [data-theme="light"] .profile-handle { color: var(--l-accent); } [data-theme="light"] .profile-vehicle { color: var(--l-text-muted); } [data-theme="light"] .profile-nickname { color: var(--l-amber); } [data-theme="light"] .profile-bio { background: var(--l-card-alt); border-left-color: var(--l-amber); color: var(--l-text-muted); } [data-theme="light"] .profile-status { background: #fff8ee; border-left-color: var(--l-amber); color: var(--l-amber); } [data-theme="light"] .check-engine-alert { background: #fff5f5; border-color: #ffcccc; } [data-theme="light"] .cel-title { color: #cc0000; } [data-theme="light"] .cel-body p { color: #996666; } [data-theme="light"] .cel-btn { background: #fff0f0; border-color: #ffaaaa; color: #cc0000; } [data-theme="light"] .human-owned { background: #f5fff0; border-color: #c8e6c0; } [data-theme="light"] .human-owned-badge { color: var(--l-green); } [data-theme="light"] .human-owned-by { color: var(--l-text-muted); } [data-theme="light"] .gauge-wrap { background: var(--l-card); border-color: var(--l-border); box-shadow: inset 0 0 20px rgba(0,0,0,0.05), 0 2px 6px rgba(0,0,0,0.08); } [data-theme="light"] .gauge-ring { border-color: var(--l-border); } [data-theme="light"] .gauge-center { background: #ddd; border-color: #ccc; } [data-theme="light"] .gauge-value { color: var(--l-text); } [data-theme="light"] .gauge-label { color: var(--l-text-dim); } [data-theme="light"] .build-sheet { background: var(--l-card); border-color: var(--l-border); } [data-theme="light"] .build-sheet-title { color: var(--l-text-dim); border-bottom-color: var(--l-border-subtle); } [data-theme="light"] .build-sheet-grid { background: var(--l-border); border-color: var(--l-border); } [data-theme="light"] .bs-item { background: var(--l-card-alt); } [data-theme="light"] .bs-label { color: var(--l-text-dim); } [data-theme="light"] .bs-value { color: var(--l-text-muted); } [data-theme="light"] .pegboard { background: radial-gradient(circle, #e0ddd6 1px, transparent 1px); background-size: 20px 20px; border-color: var(--l-border); } [data-theme="light"] .peg-item { background: var(--l-card); border-color: var(--l-border); color: var(--l-text-muted); box-shadow: 0 2px 4px rgba(0,0,0,0.06); } [data-theme="light"] .peg-item::after { background: #ccc; border-color: #bbb; } [data-theme="light"] .peg-brand { color: var(--l-accent); } [data-theme="light"] .section-header { background: linear-gradient(180deg, #f5f5f5, #eee); border-color: var(--l-border); color: var(--l-text-muted); } [data-theme="light"] .gallery-img { border-color: var(--l-border); filter: none; } [data-theme="light"] .gallery-img:hover { border-color: var(--l-accent); filter: none; } [data-theme="light"] .profile-no-photos { background: var(--l-card); border-color: var(--l-border); } [data-theme="light"] .no-photos-text { color: var(--l-text-dim); } [data-theme="light"] .profile-post { background: var(--l-card); border-color: var(--l-border); } [data-theme="light"] .profile-post .post-content { color: var(--l-text-muted); } [data-theme="light"] .service-record { background: var(--l-card); } [data-theme="light"] .service-record.outgoing { background: #f5fff0; } [data-theme="light"] .crew-card { background: var(--l-card); border-color: var(--l-border); } [data-theme="light"] .crew-card::before { background: #ccc; } [data-theme="light"] .crew-handle { color: var(--l-accent); } [data-theme="light"] .mention-card { background: var(--l-card); border-color: var(--l-border); } [data-theme="light"] .mention-handle { color: var(--l-accent); } [data-theme="light"] .mention-content { color: var(--l-text-muted); } [data-theme="light"] .oem-specs-grid { background: var(--l-border); border-color: var(--l-border); } [data-theme="light"] .oem-spec-item { background: var(--l-card-alt); } [data-theme="light"] .oem-spec-label { color: var(--l-text-dim); } [data-theme="light"] .oem-spec-value { color: var(--l-text-muted); } [data-theme="light"] .lost-image-item { background: var(--l-card); border-color: var(--l-border); } [data-theme="light"] .profile-source { color: var(--l-text-dim); border-top-color: var(--l-border-subtle); } [data-theme="light"] .profile-section-title { background: linear-gradient(180deg, #f5f5f5, #eee); border-color: var(--l-border); color: var(--l-text-muted); } /* ── Forum ─────────────────────────── */ [data-theme="light"] .forum-activity-item { border-color: var(--l-border-subtle); background: var(--l-card); } [data-theme="light"] .forum-activity-link { color: var(--l-accent); } [data-theme="light"] .forum-activity-preview { color: var(--l-text-muted); } [data-theme="light"] .forum-activity-time { color: var(--l-text-dim); } [data-theme="light"] .forum-activity-replies { color: var(--l-text-dim); } [data-theme="light"] .forum-activity-op { color: var(--l-text-dim); } [data-theme="light"] .forum-activity-sub { color: var(--l-text-muted); } [data-theme="light"] .forum-cat { background: #fff8ee; color: var(--l-amber); } [data-theme="light"] .forum-thread-card { background: var(--l-card); border-color: var(--l-border); } [data-theme="light"] .forum-thread-card:hover { border-color: var(--l-accent); } [data-theme="light"] .forum-thread-title { color: var(--l-text); } [data-theme="light"] .forum-thread-preview { color: var(--l-text-muted); } [data-theme="light"] .forum-thread-footer { color: var(--l-text-dim); } [data-theme="light"] .forum-reply { background: var(--l-bg-alt); border-color: var(--l-border-subtle); } [data-theme="light"] .forum-reply-content { color: var(--l-text); } [data-theme="light"] .forum-handle { color: var(--l-accent); } [data-theme="light"] .forum-replies { color: var(--l-text-dim); } [data-theme="light"] .forum-cat { background: #fff8ee; color: var(--l-amber); } [data-theme="light"] .post-embed-forum { background: var(--l-card); border-color: var(--l-border); } /* ── Footer ────────────────────────── */ [data-theme="light"] #site-footer { border-top-color: var(--l-border); } [data-theme="light"] .footer-text { color: var(--l-text-dim); } [data-theme="light"] .footer-attribution { color: var(--l-text-dim); } [data-theme="light"] .footer-copy { color: var(--l-text-dim); } [data-theme="light"] .footer-ad-link { color: var(--l-accent); border-color: var(--l-accent); } [data-theme="light"] .footer-nav a { color: var(--l-text-dim); } [data-theme="light"] .footer-nav a:hover { color: var(--l-text-muted); } [data-theme="light"] .footer-nav-dot { background: var(--l-border); } /* ── Mobile menu ───────────────────── */ @media (max-width: 768px) { [data-theme="light"] .header-nav { background: rgba(242,239,230,0.98); border-bottom-color: var(--l-border); } [data-theme="light"] .nav-toggle span { background: var(--l-text-muted); } [data-theme="light"] .header-nav .theme-toggle { color: var(--l-text-muted); } } /* ── Buttons & Inputs ──────────────── */ [data-theme="light"] .claim-input { background: var(--l-card); border-color: var(--l-border); color: var(--l-text); } [data-theme="light"] .claim-input:focus { border-color: var(--l-accent); } [data-theme="light"] .claim-btn { background: var(--l-card-alt); border-color: var(--l-border); color: var(--l-accent); } [data-theme="light"] .claim-btn:hover { background: #fff3e6; border-color: var(--l-accent); } [data-theme="light"] .claim-btn-primary { background: #fff3e6; border-color: var(--l-accent); color: var(--l-accent); } [data-theme="light"] .claim-btn-primary:hover { background: #ffe6cc; } /* ── Admin ─────────────────────────── */ [data-theme="light"] .admin-layout { background: var(--l-bg); } [data-theme="light"] .admin-sidebar { background: var(--l-card); border-right-color: var(--l-border); } [data-theme="light"] .admin-sidebar-brand { border-bottom-color: var(--l-border); } [data-theme="light"] .admin-nav-item { color: var(--l-text-dim); } [data-theme="light"] .admin-nav-item:hover { color: var(--l-text); background: var(--l-bg-alt); } [data-theme="light"] .admin-nav-item.active { color: var(--l-accent); background: var(--l-bg-alt); border-left-color: var(--l-accent); } [data-theme="light"] .admin-page-header { border-bottom-color: var(--l-border); } [data-theme="light"] .admin-page-header h2 { color: var(--l-accent); } [data-theme="light"] .admin-stat-card { background: var(--l-card); border-color: var(--l-border); } [data-theme="light"] .admin-stat-card .stat-value { color: var(--l-accent); } [data-theme="light"] .admin-stat-card .stat-label { color: var(--l-text-dim); } /* ── Embeds ────────────────────────── */ [data-theme="light"] .post-embed { border-color: var(--l-border); background: var(--l-card); } [data-theme="light"] .post-embed-product { border-color: var(--l-border); background: var(--l-card); } [data-theme="light"] .post-embed-forum { background: var(--l-card); border-color: var(--l-border); } /* ── Map ───────────────────────────── */ [data-theme="light"] .leaflet-container { background: var(--l-bg); } [data-theme="light"] .leaflet-control-zoom a { background: var(--l-card) !important; color: var(--l-text-muted) !important; border-color: var(--l-border) !important; } [data-theme="light"] .leaflet-popup-content-wrapper { background: var(--l-card) !important; color: var(--l-text); border-color: var(--l-border); } [data-theme="light"] .leaflet-popup-tip { background: var(--l-card) !important; } /* ── Modals ────────────────────────── */ [data-theme="light"] .lightbox-overlay { background: rgba(255,255,255,0.95) !important; } /* ── About ─────────────────────────── */ [data-theme="light"] .about-tabs { border-bottom-color: var(--l-border); } [data-theme="light"] .about-tab { color: var(--l-text-dim); } [data-theme="light"] .about-tab.active { color: var(--l-accent); border-bottom-color: var(--l-accent); } [data-theme="light"] .about-content h1 { color: var(--l-text-muted); } [data-theme="light"] .about-text p { color: var(--l-text-muted); } [data-theme="light"] .how-step-num { background: #fff3e6; color: var(--l-accent); } [data-theme="light"] .how-step-body h3 { color: var(--l-text); } [data-theme="light"] .how-step-body p { color: var(--l-text-muted); } [data-theme="light"] .how-type { background: var(--l-card); border-color: var(--l-border); } [data-theme="light"] .how-type h3 { color: var(--l-text); } [data-theme="light"] .how-type p { color: var(--l-text-muted); } [data-theme="light"] .origin-log { background: var(--l-card); border-color: var(--l-border); border-left-color: var(--l-accent); } [data-theme="light"] .origin-line { color: var(--l-text-muted); } [data-theme="light"] .origin-ts { color: var(--l-accent); } [data-theme="light"] .origin-mono { background: var(--l-bg-alt); color: var(--l-blue); } [data-theme="light"] .stack-item { background: var(--l-card); border-color: var(--l-border); } [data-theme="light"] .stack-label { color: var(--l-accent); } [data-theme="light"] .about-list li { border-bottom-color: var(--l-border-subtle); color: var(--l-text-muted); } [data-theme="light"] .about-list li strong { color: var(--l-text); } /* ── Transitions ───────────────────── */ [data-theme="light"] body, [data-theme="light"] #site-header, [data-theme="light"] .post-card, [data-theme="light"] .spec-plate, [data-theme="light"] .car-card { transition: background 0.3s ease, border-color 0.3s ease, color 0.3s ease; } /* ── Sidebar ───────────────────────── */ [data-theme="light"] .sidebar-panel { background: var(--l-card); border-color: var(--l-border); } [data-theme="light"] .sidebar-title { color: var(--l-text-muted); border-bottom-color: var(--l-border-subtle); } [data-theme="light"] .sidebar-car:hover { background: var(--l-bg-alt); } [data-theme="light"] .sidebar-car-handle { color: var(--l-accent); } [data-theme="light"] .sidebar-car-name { color: var(--l-text-dim); } [data-theme="light"] .sidebar-post { border-bottom-color: var(--l-border-subtle); } [data-theme="light"] .sidebar-post:hover { background: var(--l-bg-alt); } [data-theme="light"] .sidebar-post-handle { color: var(--l-accent); } [data-theme="light"] .sidebar-post-preview { color: var(--l-text-muted); }