/* LevelBot Dashboard — Akzent-Variablen + Politur. * * Der Akzent ist CSS-variablen-gestuetzt, damit der Pro-Branding-Farb-Picker * die Farbe pro Server setzen kann (diese :root-Werte serverseitig ueberschreiben). * Werte sind space-separated RGB (fuer Tailwinds in tailwind-theme.js). * Default = CAT-Orange (Branding-Richtung „Community Agent", s. Vault Branding.md). */ :root { /* Holo-Cyan „Agent HUD" (aus der CAT-Branding-Spez): gedeckte Fuellung fuer Buttons/Toggles, helles Cyan fuer Icons/Links/aktive Eintraege. DaemonX-Entscheid 2026-07-02. */ --accent-600: 14 116 144; /* #0e7490 Primaer (Fuellung) */ --accent-500: 13 138 168; /* #0d8aa8 Hover */ --accent-300: 103 232 249; /* #67e8f9 heller Akzent-Text/Icons */ --accent-fg: 255 255 255; /* Schrift AUF dem Akzent — weiss (Kontrast ~5.4:1 auf #0e7490). Der Picker setzt das je nach Helligkeit der gewaehlten Farbe. */ /* Neutrale Skala — DARK (Default). Rollen: 950 App-BG · 900 Karte · 800 Input/Border · 700 Raender · 600/500 Labels · 400 tertiaer · 300 sekundaer · 100 Text (space-sep RGB). */ --s-950: 13 14 18; --s-900: 20 22 28; --s-800: 29 32 39; --s-700: 43 47 58; --s-600: 91 99 115; --s-500: 115 124 140; --s-400: 152 161 179; --s-300: 197 203 216; --s-200: 216 220 229; --s-100: 242 244 248; --tint-900: 12 58 71; --tint-950: 7 36 45; /* dezenter Akzent-Rand/BG (Add-Form) */ --sidebar-bg: 17 19 25; /* Sidebar-Grund (#111319) */ --scroll-thumb: 58 58 60; --scroll-thumb-hover: 90 90 94; color-scheme: dark; } /* Neutrale Skala — LIGHT (Tailwind-slate, Rollen invertiert: BG hell, Text dunkel). Greift automatisch bei System-Hell (solange keine explizite theme-dark-Wahl)… */ @media (prefers-color-scheme: light) { :root:not(.theme-dark) { --s-950: 248 250 252; --s-900: 255 255 255; --s-800: 241 245 249; --s-700: 226 232 240; --s-600: 148 163 184; --s-500: 100 116 139; --s-400: 71 85 105; --s-300: 51 65 85; --s-200: 30 41 59; --s-100: 15 23 42; --tint-900: 186 230 253; --tint-950: 224 242 254; --sidebar-bg: 248 250 252; --scroll-thumb: 203 213 225; --scroll-thumb-hover: 148 163 184; color-scheme: light; } } /* …ODER wenn der Nutzer im Umschalter explizit „hell" gewaehlt hat (schlaegt die Media-Query). */ :root.theme-light { --s-950: 248 250 252; --s-900: 255 255 255; --s-800: 241 245 249; --s-700: 226 232 240; --s-600: 148 163 184; --s-500: 100 116 139; --s-400: 71 85 105; --s-300: 51 65 85; --s-200: 30 41 59; --s-100: 15 23 42; --tint-900: 186 230 253; --tint-950: 224 242 254; --sidebar-bg: 248 250 252; --scroll-thumb: 203 213 225; --scroll-thumb-hover: 148 163 184; color-scheme: light; } /* Umschalter-Icons: im Dunkel-Modus die Sonne (Klick -> hell), im Hell-Modus den Mond. */ .theme-show-light { display: none; } @media (prefers-color-scheme: light) { :root:not(.theme-dark) .theme-show-dark { display: none; } :root:not(.theme-dark) .theme-show-light { display: inline-flex; } } :root.theme-light .theme-show-dark { display: none; } :root.theme-light .theme-show-light { display: inline-flex; } :root.theme-dark .theme-show-dark { display: inline-flex; } :root.theme-dark .theme-show-light { display: none; } /* Hexagon-Branding: hauchzarte Waben-Textur + Akzent-Glow fuer grosse Hero-Flaechen (Login-Karte, Leaderboard-Kopf). Wabenlinien neutral-weiss, damit jede Picker-Akzentfarbe dazu passt; der Glow nimmt den Akzent. */ .hex-hero { background-image: radial-gradient(560px 260px at 50% -80px, rgb(var(--accent-600) / 0.16), transparent 70%), url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20width='17.32'%20height='30'%3E%3Cg%20fill='none'%20stroke='rgba(255,255,255,0.05)'%20stroke-width='1'%3E%3Cpolygon%20points='8.66,0%2017.32,5%2017.32,15%208.66,20%200,15%200,5'/%3E%3Cpolygon%20points='0,15%208.66,20%208.66,30%200,35%20-8.66,30%20-8.66,20'/%3E%3Cpolygon%20points='17.32,15%2025.98,20%2025.98,30%2017.32,35%208.66,30%208.66,20'/%3E%3Cpolygon%20points='0,-15%208.66,-10%208.66,0%200,5%20-8.66,0%20-8.66,-10'/%3E%3Cpolygon%20points='17.32,-15%2025.98,-10%2025.98,0%2017.32,5%208.66,0%208.66,-10'/%3E%3C/g%3E%3C/svg%3E"); } /* Sidebar-Variante: noch feinere Waben nur im Kopfbereich (hinter Logo/Serverwahl), per Farbverlauf nach unten ausgeblendet — nie hinter dichtem Menue-Text. */ .hex-side { background-color: rgb(var(--sidebar-bg)); background-image: linear-gradient(to bottom, rgb(var(--sidebar-bg) / 0) 0, rgb(var(--sidebar-bg) / 0) 90px, rgb(var(--sidebar-bg)) 280px), url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20width='17.32'%20height='30'%3E%3Cg%20fill='none'%20stroke='rgba(255,255,255,0.04)'%20stroke-width='1'%3E%3Cpolygon%20points='8.66,0%2017.32,5%2017.32,15%208.66,20%200,15%200,5'/%3E%3Cpolygon%20points='0,15%208.66,20%208.66,30%200,35%20-8.66,30%20-8.66,20'/%3E%3Cpolygon%20points='17.32,15%2025.98,20%2025.98,30%2017.32,35%208.66,30%208.66,20'/%3E%3Cpolygon%20points='0,-15%208.66,-10%208.66,0%200,5%20-8.66,0%20-8.66,-10'/%3E%3Cpolygon%20points='17.32,-15%2025.98,-10%2025.98,0%2017.32,5%208.66,0%208.66,-10'/%3E%3C/g%3E%3C/svg%3E"); } /* Hex-Cat-Logo: Blinzeln (Visier klappt alle ~7s kurz zu — „wachsamer Agent") + Ohren-Zucken bei Hover. transform-box: fill-box, damit transform-origin am SVG-Teilelement greift. Bei „Bewegung reduzieren" komplett statisch. */ .hexcat-visor { transform-box: fill-box; transform-origin: center; animation: hexcat-blink 7s ease-in-out infinite; } @keyframes hexcat-blink { 0%, 94% { transform: scaleY(1); } 96% { transform: scaleY(0.12); } 98%, 100% { transform: scaleY(1); } } .hexcat-ear { transform-box: fill-box; transform-origin: bottom center; } a:hover .hexcat-ear-l, .hexcat:hover .hexcat-ear-l { animation: hexcat-ear-l 0.35s ease-in-out; } a:hover .hexcat-ear-r, .hexcat:hover .hexcat-ear-r { animation: hexcat-ear-r 0.35s ease-in-out; } @keyframes hexcat-ear-l { 50% { transform: rotate(-9deg); } } @keyframes hexcat-ear-r { 50% { transform: rotate(9deg); } } @media (prefers-reduced-motion: reduce) { .hexcat-visor, .hexcat-ear { animation: none !important; } } /* Headline-/Brand-Schrift: Plus Jakarta Sans (Variable-Font, latin), lokal gehostet — kein Google-CDN (Privacy/CSP). Genutzt via Tailwind-Utility `font-display`. */ @font-face { font-family: "Plus Jakarta Sans"; font-style: normal; font-weight: 200 800; font-display: swap; src: url("/static/fonts/plus-jakarta-sans-latin.woff2") format("woff2"); } /* Akzent-gefuellte Flaechen (Buttons/Links) bekommen die adaptive Akzent-Schrift. element+class schlaegt Tailwinds .text-white ohne !important. Toggles (divs) bleiben unberuehrt. */ a.bg-indigo-600, button.bg-indigo-600, a.bg-indigo-500, button.bg-indigo-500 { color: rgb(var(--accent-fg)); } /* Sichtbarer, on-brand Fokus-Ring (Accessibility). */ :focus-visible { outline: 2px solid rgb(var(--accent-600)); outline-offset: 2px; border-radius: 4px; } /* Dezente, dunkle Scrollbar (Sidebar + Seite). */ * { scrollbar-width: thin; scrollbar-color: rgb(var(--scroll-thumb)) transparent; } *::-webkit-scrollbar { width: 10px; height: 10px; } *::-webkit-scrollbar-thumb { background: rgb(var(--scroll-thumb)); border-radius: 8px; border: 2px solid transparent; background-clip: content-box; } *::-webkit-scrollbar-thumb:hover { background: rgb(var(--scroll-thumb-hover)); background-clip: content-box; } /* Native Controls (Selects/Scrollbars) folgen dem Theme via color-scheme am :root (oben gesetzt). */ /* Einklappbare Sidebar-Kategorien (
): Default-Marker weg, Chevron dreht beim Aufklappen. */ details > summary { list-style: none; } details > summary::-webkit-details-marker { display: none; } details[open] .chev { transform: rotate(90deg); } /* ── Community Map ─────────────────────────────────────────────── */ .map-land { fill: rgb(30 41 59); } /* slate-800 Landflächen auf dunklem Karten-Grund */ .map-dot { fill: rgb(var(--accent-300) / 0.85); filter: drop-shadow(0 0 4px rgb(var(--accent-300) / 0.8)); } .map-dot-label { fill: rgb(2 6 23); /* slate-950 — dunkle Zahl auf hellem Punkt */ font-size: 9px; font-weight: 700; text-anchor: middle; dominant-baseline: central; pointer-events: none; } .map-dot-country { fill: rgb(var(--accent-300) / 0.55); /* hell genug für das dunkle Zahlen-Label */ stroke: rgb(var(--accent-300) / 0.9); stroke-width: 1.5; stroke-dasharray: 3 2; }