/* ═══════════════════════════════════════════════════════════ GoFC · Design-System „Career HQ" Vollständige Beschreibung: ../DESIGN.md ═══════════════════════════════════════════════════════════ */ :root{ --neon:#00ff87; --cyan:#00d4ff; --violet:#a855f7; --magenta:#ec4899; --bg-root:#070b14; } /* App-Container */ .d-shell{ background:linear-gradient(165deg,#0b1220 0%,#080d18 55%,#0d0a1c 100%); border:1px solid rgba(255,255,255,.09); box-shadow:0 40px 90px -40px rgba(0,0,0,.95); } /* Standard-Panel / Karte */ .d-panel{ background:linear-gradient(180deg, rgba(255,255,255,.055), rgba(255,255,255,.018)); border:1px solid rgba(255,255,255,.09); box-shadow:inset 0 1px 0 rgba(255,255,255,.07); backdrop-filter:blur(12px); } /* Hervorgehobenes Element */ .d-accent{ background:linear-gradient(135deg, rgba(0,255,135,.16), rgba(168,85,247,.14)); border:1px solid rgba(0,255,135,.28); box-shadow:0 0 34px -8px rgba(0,255,135,.4), inset 0 1px 0 rgba(255,255,255,.1); } .d-accent:hover{ box-shadow:0 0 40px -6px rgba(0,255,135,.55), inset 0 1px 0 rgba(255,255,255,.14); } /* Signatur-Verlauf */ .d-bar{ background:linear-gradient(90deg,#00ff87,#00d4ff 55%,#a855f7); } /* Glow-Ring */ .d-ring{ box-shadow:0 0 0 1px rgba(0,255,135,.35), 0 0 30px -4px rgba(0,255,135,.45); } /* Tabellenzeile */ .d-row{ transition:background .18s, border-color .18s; } .d-row:hover{ background:rgba(0,255,135,.055); } .d-row.is-selected{ background:rgba(0,255,135,.06); } /* Aktiver Navigationspunkt */ .d-nav-active{ background:linear-gradient(90deg, rgba(0,255,135,.18), transparent); border-left:2px solid var(--neon); } /* Hintergrundraster */ .page-grid{ background-image: linear-gradient(rgba(255,255,255,.028) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,.028) 1px, transparent 1px); background-size:64px 64px; } /* Spielfeld */ .d-pitch{ background: radial-gradient(120% 90% at 50% 0%, rgba(0,255,135,.06), transparent 60%), repeating-linear-gradient(90deg,#0c1a2e 0 26px,#0a1728 26px 52px); } /* Aktionsbutton der linken Spalte */ .d-action{ display:flex; align-items:center; gap:.625rem; width:100%; padding:.625rem .75rem; border-radius:.75rem; border:1px solid rgba(255,255,255,.1); background:rgba(255,255,255,.04); font-family:'JetBrains Mono',ui-monospace,monospace; font-size:10px; text-transform:uppercase; letter-spacing:.12em; color:#cbd5e1; transition:background .18s, border-color .18s, color .18s; cursor:pointer; text-align:left; } .d-action:hover{ background:rgba(255,255,255,.08); border-color:rgba(255,255,255,.2); color:#fff; } /* Formularfelder */ .d-input{ width:100%; padding:.5rem .7rem; border-radius:.6rem; background:rgba(0,0,0,.35); border:1px solid rgba(255,255,255,.12); color:#e2e8f0; font-size:14px; transition:border-color .18s, box-shadow .18s; } .d-input:focus{ outline:none; border-color:rgba(0,255,135,.5); box-shadow:0 0 0 3px rgba(0,255,135,.12); } .d-input option{ background:#0b1220; color:#e2e8f0; } .d-label{ display:block; margin-bottom:.3rem; font-family:'JetBrains Mono',ui-monospace,monospace; font-size:9px; text-transform:uppercase; letter-spacing:.18em; color:#64748b; } /* Dialog */ dialog::backdrop{ background:rgba(4,6,10,.8); backdrop-filter:blur(4px); } dialog{ color:inherit; } ::selection{ background:var(--neon); color:#04060a; } /* Schmale Scrollbalken in Datenbereichen */ .d-scroll::-webkit-scrollbar{ height:8px; width:8px; } .d-scroll::-webkit-scrollbar-track{ background:rgba(255,255,255,.03); } .d-scroll::-webkit-scrollbar-thumb{ background:rgba(255,255,255,.14); border-radius:99px; } .d-scroll::-webkit-scrollbar-thumb:hover{ background:rgba(0,255,135,.35); } /* ═══════════════════════════════════════════════════════════ HELLER MODUS Wird über data-theme="light" am aktiviert. Alle Regeln sind mit dem Attribut-Selektor spezifischer als die Tailwind-Utilities und überschreiben sie deshalb ohne !important. Der dunkle Modus bleibt davon unberührt. Grundgedanke: Neon-Grün ist als *Fläche* auch auf Weiß lesbar, als *Textfarbe* aber nicht – deshalb werden nur die Textvarianten in ein dunkles Smaragd übersetzt. ═══════════════════════════════════════════════════════════ */ [data-theme="light"]{ --neon:#00875a; /* dunkles Smaragd – Neon als Text */ --neon-flat:#00d873; /* gedämpftes Neon – Neon als Fläche */ --cyan:#0e7490; --violet:#6d28d9; --ink-1:#0f172a; --ink-2:#1e293b; --ink-3:#334155; --ink-4:#475569; --ink-5:#64748b; --ink-6:#94a3b8; --line:rgba(15,23,42,.10); --line-strong:rgba(15,23,42,.20); --paper:#ffffff; --ground:#f1f4f9; } /* ── Grundflächen ───────────────────────────────────────── */ html[data-theme="light"] { background:var(--ground); } [data-theme="light"] body { background:var(--ground); color:var(--ink-2); } [data-theme="light"] .bg-\[\#070b14\] { background-color:var(--ground); } [data-theme="light"] .bg-\[\#070b14\]\/90 { background-color:rgba(241,244,249,.92); } [data-theme="light"] .bg-\[\#0b1220\] { background-color:var(--paper); } /* ── Text ───────────────────────────────────────────────── */ [data-theme="light"] .text-white { color:var(--ink-1); } [data-theme="light"] .text-slate-200 { color:var(--ink-2); } [data-theme="light"] .text-slate-300 { color:var(--ink-3); } [data-theme="light"] .text-slate-400 { color:var(--ink-4); } [data-theme="light"] .text-slate-500 { color:var(--ink-5); } [data-theme="light"] .text-slate-600 { color:var(--ink-6); } /* ── Akzentfarben als Text ──────────────────────────────── */ [data-theme="light"] .text-\[\#00ff87\] { color:var(--neon); } [data-theme="light"] .text-\[\#00d4ff\] { color:var(--cyan); } [data-theme="light"] .text-\[\#d9ffe9\] { color:#064e3b; } [data-theme="light"] .text-violet-300 { color:var(--violet); } [data-theme="light"] .text-rose-200, [data-theme="light"] .text-rose-300, [data-theme="light"] .text-rose-400 { color:#be123c; } [data-theme="light"] .text-amber-100, [data-theme="light"] .text-amber-200, [data-theme="light"] .text-amber-300 { color:#b45309; } [data-theme="light"] .text-emerald-300 { color:#047857; } [data-theme="light"] .text-sky-300 { color:#0369a1; } [data-theme="light"] .text-fuchsia-300 { color:#a21caf; } /* Akzentfarben als Fläche bleiben kräftig – dunkler Text darauf ist lesbar */ [data-theme="light"] .bg-\[\#00ff87\] { background-color:var(--neon-flat); } [data-theme="light"] .bg-\[\#00d4ff\] { background-color:#22c3e6; } /* ── Getönte Flächen und Rahmen ─────────────────────────── */ [data-theme="light"] .bg-\[\#00ff87\]\/6, [data-theme="light"] .bg-\[\#00ff87\]\/8 { background-color:rgba(0,135,90,.07); } [data-theme="light"] .bg-\[\#00ff87\]\/10, [data-theme="light"] .bg-\[\#00ff87\]\/12 { background-color:rgba(0,135,90,.10); } [data-theme="light"] .bg-\[\#00ff87\]\/15 { background-color:rgba(0,135,90,.13); } [data-theme="light"] .bg-\[\#00d4ff\]\/15 { background-color:rgba(14,116,144,.12); } [data-theme="light"] .border-\[\#00ff87\] { border-color:var(--neon); } [data-theme="light"] .border-\[\#00ff87\]\/25, [data-theme="light"] .border-\[\#00ff87\]\/30 { border-color:rgba(0,135,90,.35); } [data-theme="light"] .bg-rose-400\/6, [data-theme="light"] .bg-rose-400\/8 { background-color:rgba(190,18,60,.07); } [data-theme="light"] .bg-rose-400\/15 { background-color:rgba(190,18,60,.12); } [data-theme="light"] .border-rose-400\/25, [data-theme="light"] .border-rose-400\/30 { border-color:rgba(190,18,60,.30); } [data-theme="light"] .bg-amber-400\/8 { background-color:rgba(180,83,9,.08); } [data-theme="light"] .bg-amber-400\/15 { background-color:rgba(180,83,9,.13); } [data-theme="light"] .border-amber-400\/30{ border-color:rgba(180,83,9,.32); } [data-theme="light"] .bg-emerald-400\/15 { background-color:rgba(4,120,87,.12); } [data-theme="light"] .bg-violet-400\/15 { background-color:rgba(109,40,217,.12); } [data-theme="light"] .bg-sky-400\/15 { background-color:rgba(3,105,161,.12); } /* ── Weiße Transparenzen: Karten werden Papier, Chips werden grau ── */ [data-theme="light"] .bg-white\/3, [data-theme="light"] .bg-white\/4, [data-theme="light"] .bg-white\/5, [data-theme="light"] .bg-white\/6 { background-color:var(--paper); } [data-theme="light"] .bg-white\/8, [data-theme="light"] .bg-white\/10, [data-theme="light"] .bg-white\/12 { background-color:rgba(15,23,42,.06); } [data-theme="light"] .bg-black\/40 { background-color:rgba(15,23,42,.08); } [data-theme="light"] .border-white\/6, [data-theme="light"] .border-white\/8 { border-color:var(--line); } [data-theme="light"] .border-white\/10, [data-theme="light"] .border-white\/12, [data-theme="light"] .border-white\/16 { border-color:rgba(15,23,42,.14); } [data-theme="light"] .border-white\/25, [data-theme="light"] .border-white\/30 { border-color:var(--line-strong); } [data-theme="light"] .bg-white\/8.h-1\.5, [data-theme="light"] .bg-white\/8 { background-color:rgba(15,23,42,.08); } /* Trennlinien innerhalb von Tabellen und Kopfzeilen */ [data-theme="light"] .divide-white\/8 > * + *, [data-theme="light"] .border-b.border-white\/12 { border-color:rgba(15,23,42,.14); } /* ── Eigene Bausteine ───────────────────────────────────── */ [data-theme="light"] .d-shell{ background:linear-gradient(165deg,#ffffff 0%,#fbfcfe 55%,#f7f8fc 100%); border-color:var(--line); box-shadow:0 24px 60px -40px rgba(15,23,42,.35); } [data-theme="light"] .d-panel{ background:var(--paper); border-color:var(--line); box-shadow:inset 0 1px 0 rgba(255,255,255,.9), 0 1px 3px rgba(15,23,42,.05); backdrop-filter:none; } [data-theme="light"] .d-accent{ background:linear-gradient(135deg, rgba(0,135,90,.12), rgba(109,40,217,.10)); border-color:rgba(0,135,90,.30); box-shadow:0 0 22px -10px rgba(0,135,90,.45), inset 0 1px 0 rgba(255,255,255,.8); } [data-theme="light"] .d-accent:hover{ box-shadow:0 0 26px -8px rgba(0,135,90,.55), inset 0 1px 0 rgba(255,255,255,.9); } [data-theme="light"] .d-bar{ background:linear-gradient(90deg,#00875a,#0e7490 55%,#6d28d9); } [data-theme="light"] .d-ring{ box-shadow:0 0 0 1px rgba(0,135,90,.28), 0 4px 14px -4px rgba(0,135,90,.35); } [data-theme="light"] .d-row:hover { background:rgba(0,135,90,.06); } [data-theme="light"] .d-row.is-selected{ background:rgba(0,135,90,.07); } [data-theme="light"] .d-nav-active{ background:linear-gradient(90deg, rgba(0,135,90,.14), transparent); border-left-color:var(--neon); } [data-theme="light"] .d-pitch{ background: radial-gradient(120% 90% at 50% 0%, rgba(0,135,90,.10), transparent 60%), repeating-linear-gradient(90deg,#eef2f7 0 26px,#e7ecf3 26px 52px); } [data-theme="light"] .d-pitch .bg-white\/12, [data-theme="light"] .d-pitch .h-px { background-color:rgba(15,23,42,.18); } [data-theme="light"] .d-pitch .border-white\/12 { border-color:rgba(15,23,42,.18); } [data-theme="light"] .d-action{ background:var(--paper); border-color:var(--line); color:var(--ink-3); } [data-theme="light"] .d-action:hover{ background:#f8fafc; border-color:var(--line-strong); color:var(--ink-1); } [data-theme="light"] .d-input{ background:var(--paper); border-color:rgba(15,23,42,.16); color:var(--ink-1); } [data-theme="light"] .d-input:focus{ border-color:rgba(0,135,90,.55); box-shadow:0 0 0 3px rgba(0,135,90,.12); } [data-theme="light"] .d-input option{ background:#fff; color:var(--ink-1); } [data-theme="light"] .d-label { color:var(--ink-5); } [data-theme="light"] .page-grid{ background-image: linear-gradient(rgba(15,23,42,.045) 1px, transparent 1px), linear-gradient(90deg, rgba(15,23,42,.045) 1px, transparent 1px); } [data-theme="light"] dialog::backdrop{ background:rgba(15,23,42,.45); } [data-theme="light"] ::selection { background:var(--neon); color:#fff; } [data-theme="light"] .d-scroll::-webkit-scrollbar-track{ background:rgba(15,23,42,.04); } [data-theme="light"] .d-scroll::-webkit-scrollbar-thumb{ background:rgba(15,23,42,.20); } [data-theme="light"] .d-scroll::-webkit-scrollbar-thumb:hover{ background:rgba(0,135,90,.45); } /* Sticky Tabellenkopf in der Buchungsliste */ [data-theme="light"] .sticky.bg-\[\#0b1220\]{ background-color:var(--paper); } /* Der Umschalter selbst */ .theme-toggle{ display:flex; align-items:center; justify-content:center; height:2rem; width:2rem; border-radius:.5rem; border:1px solid rgba(255,255,255,.12); background:rgba(255,255,255,.04); font-size:13px; line-height:1; cursor:pointer; transition:background .18s, border-color .18s; } .theme-toggle:hover{ background:rgba(255,255,255,.09); border-color:rgba(255,255,255,.25); } [data-theme="light"] .theme-toggle{ border-color:rgba(15,23,42,.14); background:#fff; color:var(--ink-3); } [data-theme="light"] .theme-toggle:hover{ background:#f1f5f9; border-color:rgba(15,23,42,.25); } /* ── Die vier Kategorien der Transferseite ──────────────── */ :root{ --k-bedarf:#00d4ff; --k-bedarf-soft:rgba(0,212,255,.13); --k-bedarf-line:rgba(0,212,255,.27); --k-verkaufen:#fb7185; --k-verkaufen-soft:rgba(251,113,133,.13); --k-verkaufen-line:rgba(251,113,133,.27); --k-halten:#00ff87; --k-halten-soft:rgba(0,255,135,.13); --k-halten-line:rgba(0,255,135,.27); --k-beobachten:#fbbf24; --k-beobachten-soft:rgba(251,191,36,.13); --k-beobachten-line:rgba(251,191,36,.27); } [data-theme="light"]{ --k-bedarf:#0e7490; --k-bedarf-soft:rgba(14,116,144,.11); --k-bedarf-line:rgba(14,116,144,.30); --k-verkaufen:#be123c; --k-verkaufen-soft:rgba(190,18,60,.10); --k-verkaufen-line:rgba(190,18,60,.28); --k-halten:#00875a; --k-halten-soft:rgba(0,135,90,.11); --k-halten-line:rgba(0,135,90,.30); --k-beobachten:#b45309; --k-beobachten-soft:rgba(180,83,9,.10); --k-beobachten-line:rgba(180,83,9,.28); }