/* ============================================================ Shared light/dark theme variables for car-data.ir. Loaded by index.html (SPA shell) and by the standalone pages that don't share its DOM: templates/fusebox_index.html, templates/pinout_index.html, templates/pinout_viewer.html. Fragments injected into index.html's #app_content (static/maps.html, dumps.html, admin_users.html, etc.) inherit these variables through normal CSS cascade -- they don't need to link this file themselves, they just need to use var(--xxx) instead of hardcoded colors. Usage: set data-theme="light" or data-theme="dark" on . Default (no attribute, or data-theme="dark") is the original dark theme -- every existing hardcoded color this replaces was a dark- theme value, so "dark" had to stay the zero-config default. ============================================================ */ :root, html[data-theme="dark"] { /* Every dark-theme surface (html/body, .app, #page_content, footer, the standalone fusebox/pinout pages' , ...) paints itself with `background:var(--bg)`, so swapping this one value from flat #000 to a radial navy glow re-skins the whole dark theme at once -- no per-page edits needed. Center sits a bit above middle (32%) to sit behind hero/header content; the color ramps down to solid black by 85% so it still reads as "black" at the edges/corners instead of tinting everything blue. */ --bg: radial-gradient(ellipse 100% 80% at 50% 25%, #1e3162 0%, #0e1730 45%, #05070d 75%, #000000 100%); --bg-elevated: #0a0a14; --gold: #D4AF37; --gold-light: #F0D060; /* Raw R,G,B triplet (no alpha) so call sites can build their own rgba(var(--gold-rgb), X) instead of hardcoding rgba(212,175,55,X). That hardcoding was why every gold glow/border/hover-tint across the site stayed the DARK theme's gold even under data-theme="light" -- var(--gold) itself was theme-aware, but ~70 rgba(212,175,55,...) call sites were not, so light mode showed the same washed-out dark-gold tint everywhere. */ --gold-rgb: 212,175,55; --text: #f0f0f0; --dim: #999; /* Card / surface overlays -- "slightly lighter than the page background" in dark mode. Numbered by opacity step so call sites read the same as the rgba(255,255,255,.0X) they replace. */ --ov-02: rgba(255,255,255,.02); --ov-03: rgba(255,255,255,.03); --ov-04: rgba(255,255,255,.04); --ov-05: rgba(255,255,255,.05); --ov-06: rgba(255,255,255,.06); --ov-08: rgba(255,255,255,.08); --ov-10: rgba(255,255,255,.10); --ov-12: rgba(255,255,255,.12); --ov-15: rgba(255,255,255,.15); /* Text at reduced opacity (nav links, hints, placeholders) */ --text-70: rgba(255,255,255,.7); --text-50: rgba(255,255,255,.5); --text-40: rgba(255,255,255,.4); --text-35: rgba(255,255,255,.35); --text-25: rgba(255,255,255,.25); --text-20: rgba(255,255,255,.2); --modal-bg: linear-gradient(160deg,#1a1a28,#0a0a14); --modal-overlay: rgba(0,0,0,.75); --input-bg: rgba(255,255,255,.04); --input-text: #fff; --shadow-strength: .4; /* Used only by the 3 standalone gold/navy pages that don't share index.html's DOM: fusebox_index.html, pinout_index.html, pinout_viewer.html. Their header/search-box "frosted glass" look is a translucent overlay of the OPPOSITE color from the page background (dark glass on dark bg), so it needs its own variable rather than reusing --ov-XX (which is always "lighter than bg" regardless of theme). --amber-XX mirrors --text-XX but for their gold/cream secondary-text color family instead of white/black. */ --glass-bg: rgba(0,0,0,.5); --panel-grad: linear-gradient(180deg,rgba(20,25,40,.8),rgba(8,12,22,.9)); --amber-85: rgba(255,226,122,.85); --amber-70: rgba(255,226,122,.7); --amber-60: rgba(255,226,122,.6); --amber-50: rgba(255,226,122,.5); --amber-40: rgba(255,226,122,.4); } html[data-theme="light"] { --bg: radial-gradient(ellipse 110% 85% at 50% 15%, #eef3f8 0%, #d8e2ed 45%, #bcc9d8 80%, #aab7c7 100%); --bg-elevated: #ffffff; --gold: #b37400; --gold-light: #8f5c00; --gold-rgb: 179, 116, 0; --text: #0b1320; --dim: #475569; --ov-02: rgba(15, 23, 42, 0.03); --ov-03: rgba(15, 23, 42, 0.05); --ov-04: rgba(15, 23, 42, 0.07); --ov-05: rgba(15, 23, 42, 0.10); --ov-06: rgba(15, 23, 42, 0.13); --ov-08: rgba(15, 23, 42, 0.17); --ov-10: rgba(15, 23, 42, 0.22); --ov-12: rgba(15, 23, 42, 0.26); --ov-15: rgba(15, 23, 42, 0.32); --text-70: #0b1320; --text-50: #1e293b; --text-40: #334155; --text-35: #475569; --text-25: #64748b; --text-20: #94a3b8; --modal-bg: linear-gradient(160deg, #ffffff 0%, #e2e8f0 100%); --modal-overlay: rgba(15, 23, 42, 0.55); --input-bg: rgba(255, 255, 255, 0.9); --input-text: #0b1320; --shadow-strength: .22; --glass-bg: rgba(240, 244, 249, 0.88); --panel-grad: linear-gradient(180deg, #ffffff, #e2e8f0); --amber-85: rgba(179, 116, 0, 0.95); --amber-70: rgba(179, 116, 0, 0.85); --amber-60: rgba(179, 116, 0, 0.75); --amber-50: rgba(179, 116, 0, 0.65); --amber-40: rgba(179, 116, 0, 0.55); } /* Applied to as early as possible */ html[data-theme] { background: var(--bg); } /* Technical Blueprint Grid Pattern for Light Theme */ html[data-theme="light"] body, html[data-theme="light"] .app, html[data-theme="light"] #page_content { background-color: #d2dbe5; background-image: radial-gradient(ellipse 110% 85% at 50% 15%, rgba(245, 248, 252, 0.92) 0%, rgba(220, 230, 242, 0.85) 45%, rgba(188, 202, 218, 0.9) 100%), linear-gradient(rgba(71, 85, 105, 0.11) 1px, transparent 1px), linear-gradient(90deg, rgba(71, 85, 105, 0.11) 1px, transparent 1px), linear-gradient(rgba(71, 85, 105, 0.04) 1px, transparent 1px), linear-gradient(90deg, rgba(71, 85, 105, 0.04) 1px, transparent 1px); background-size: 100% 100%, 100px 100px, 100px 100px, 20px 20px, 20px 20px; background-attachment: fixed; } /* Light Theme Navigation */ html[data-theme="light"] nav { background: linear-gradient(180deg, rgba(235, 240, 248, 0.94), rgba(218, 226, 236, 0.88)); border-bottom: 1px solid rgba(100, 116, 139, 0.25); box-shadow: 0 4px 20px rgba(15, 23, 42, 0.06); } html[data-theme="light"] .nav-brand { color: #0b1320; font-weight: 900; } html[data-theme="light"] .nav-links a, html[data-theme="light"] .nav-links button { color: #1e293b; font-weight: 700; } html[data-theme="light"] .nav-search { background: rgba(255, 255, 255, 0.7); border: 1px solid rgba(100, 116, 139, 0.3); } /* Light Mode 3D Floating Gallery Cards */ html[data-theme="light"] .gallery-item { background: #0d121d; border: 2px solid rgba(212, 175, 55, 0.4); box-shadow: 0 14px 35px rgba(15, 23, 42, 0.28), 0 0 20px rgba(var(--gold-rgb), 0.2); } /* Light Mode Category / Services Cards & High-Contrast Typography */ html[data-theme="light"] .svc { background: linear-gradient(160deg, #ffffff 0%, #e2e8f0 100%); border: 1px solid rgba(148, 163, 184, 0.65); box-shadow: 0 4px 15px rgba(15, 23, 42, 0.08), inset 0 1px 0 rgba(255, 255, 255, 0.9); } html[data-theme="light"] .svc:hover { border-color: var(--gold); box-shadow: 0 6px 20px rgba(var(--gold-rgb), 0.3), 0 0 14px rgba(var(--gold-rgb), 0.25); transform: translateY(-4px); } html[data-theme="light"] .svc.active { border-color: var(--gold); background: linear-gradient(160deg, #ffffff 0%, #fef3c7 100%); box-shadow: 0 0 18px rgba(var(--gold-rgb), 0.35); } html[data-theme="light"] .svc-icon { background: #0d131f; border: 1px solid rgba(148, 163, 184, 0.35); box-shadow: 0 4px 10px rgba(0, 0, 0, 0.15); } html[data-theme="light"] .svc h3 { color: #0b1320 !important; font-weight: 800 !important; font-size: clamp(.65rem, 1.15vw, .85rem); letter-spacing: -0.01em; } /* Hero Typography in Light Mode */ html[data-theme="light"] .hero-title { background: linear-gradient(135deg, #0b1320 0%, #784a00 55%, #b37400 100%); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; filter: drop-shadow(0 1px 2px rgba(0, 0, 0, 0.1)); } html[data-theme="light"] .hero-sub { color: #334155; font-weight: 700; } html[data-theme="light"] .stat-val { background: linear-gradient(135deg, #8a5a00 0%, #c48000 100%); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; filter: drop-shadow(0 2px 4px rgba(179, 116, 0, 0.25)); } html[data-theme="light"] .stat-lbl { color: #1e293b; font-weight: 800; } /* Selection Cards across Inner Pages */ html[data-theme="light"] .sm-card { background: linear-gradient(160deg, #ffffff 0%, #edf2f7 100%); border: 1px solid rgba(148, 163, 184, 0.55); box-shadow: 0 4px 14px rgba(15, 23, 42, 0.06), inset 0 1px 0 rgba(255, 255, 255, 0.8); } html[data-theme="light"] .sm-card:hover { border-color: var(--gold); box-shadow: 0 8px 24px rgba(var(--gold-rgb), 0.25); } html[data-theme="light"] .sm-card-name { color: #0b1320 !important; font-weight: 800 !important; } html[data-theme="light"] .sm-card-icon { background: #0d131f; border: 1px solid rgba(148, 163, 184, 0.35); } html[data-theme="light"] .sm-file { background: linear-gradient(160deg, #ffffff 0%, #f1f5f9 100%); border: 1px solid rgba(148, 163, 184, 0.45); box-shadow: 0 2px 8px rgba(15, 23, 42, 0.04); } html[data-theme="light"] .sm-file-name { color: #0b1320; font-weight: 700; } /* FIX (2026-09-05): .card تا الان فقط همین override بالا رو برای حالت روشن داشت -- هیچ قانون پایه‌ای براش تعریف نشده بود (نه اینجا، نه style.css)، پس توی حالت تاریک (پیش‌فرض) هر جای سایت که ازش استفاده می‌کرد (static/profile.html, static/downloads.html) کاملاً بی‌استایل می‌موند -- نه پس‌زمینه، نه border، نه padding، فقط متن خام روی پس‌زمینه‌ی صفحه. همون دلیلی که صفحه‌ی پروفایل با وجود استایل‌های داخلیش هنوز "قشنگ نشده" به نظر می‌رسید. این قانون پایه (با var() که خودش بین تاریک/روشن سوییچ می‌شه) رو اضافه می‌کنیم؛ override روشن بالا فقط background/border/box-shadow رو عوض می‌کنه، بقیه (border-radius/padding) از همین‌جا میاد.*/ .card { background: linear-gradient(160deg, var(--bg-elevated) 0%, rgba(255,255,255,.02) 100%); border: 1px solid var(--ov-08); border-radius: 16px; padding: 20px; box-shadow: 0 4px 20px rgba(0,0,0,.25); } html[data-theme="light"] .card { background: linear-gradient(160deg, #ffffff 0%, #edf2f7 100%); border: 1px solid rgba(148, 163, 184, 0.55); box-shadow: 0 4px 14px rgba(15, 23, 42, 0.06); } html[data-theme="light"] .card-name { color: #0b1320 !important; font-weight: 800 !important; } html[data-theme="light"] .card-icon { background: #0d131f; border: 1px solid rgba(148, 163, 184, 0.35); } /* Light Theme Footer */ html[data-theme="light"] footer { background: linear-gradient(180deg, rgba(215, 225, 236, 0.85), rgba(230, 238, 246, 0.95)); border-top: 1px solid rgba(100, 116, 139, 0.22); } html[data-theme="light"] footer .brand, html[data-theme="light"] footer .links a { color: #334155; font-weight: 700; } /* Light Theme Standalone Pages (Pinout & Fusebox) */ html[data-theme="light"] .gold { background: linear-gradient(135deg, #0b1320 0%, #784a00 50%, #b37400 100%) !important; -webkit-background-clip: text !important; background-clip: text !important; color: transparent !important; filter: drop-shadow(0 1px 2px rgba(0, 0, 0, 0.1)) !important; } html[data-theme="light"] .gold-shadow { filter: none !important; } html[data-theme="light"] .hdr { background: linear-gradient(180deg, rgba(235, 240, 248, 0.95), rgba(218, 226, 236, 0.9)) !important; border-bottom: 1px solid rgba(100, 116, 139, 0.25) !important; } html[data-theme="light"] .ecu-name { color: #0b1320 !important; font-weight: 800 !important; } html[data-theme="light"] .ecu-icon { background: #0d131f !important; border: 1px solid rgba(148, 163, 184, 0.35) !important; } html[data-theme="light"] .search-box { background: rgba(255, 255, 255, 0.85) !important; color: #0b1320 !important; border: 1px solid rgba(100, 116, 139, 0.35) !important; } html[data-theme="light"] .search-box::placeholder { color: #64748b !important; } html[data-theme="light"] .conn-title { color: #0b1320 !important; } html[data-theme="light"] .breadcrumb span { color: #475569 !important; font-weight: 600; } html[data-theme="light"] .breadcrumb button { color: #8f5c00 !important; font-weight: 800 !important; } html[data-theme="light"] #spotlightCanvas { opacity: 0.45; mix-blend-mode: multiply; }