/* ========================================================================== nexdeck — Gestaltungsmerkmale der Projektseite ⚠️ **Fast keine Farbe ist hier erfunden.** Die Werte stehen wörtlich in `nexdeck/frontend/src/styles/app.css` — derselben Datei, aus der die Anwendung ihre Farben nimmt. Wer hier etwas ändert, ändert es dort zuerst; sonst beschreibt die Seite eine Anwendung, die es nicht gibt. ⚠️ **Die Rollennamen kommen von der Nexview-Projektseite** (`--ink-*`, `--mist-*`, `--accent-*`), über die nexmail-Seite hierher. Das sieht auf den ersten Blick falsch aus und ist Absicht: `components.css` und `site.css` sind von dort übernommen und sprechen diese Namen. Nur die Werte sind nexdecks. So bleiben drei Seiten ein Bauwerk, und ein Baustein wandert ohne Umbau von der einen zur anderen. Umrechnung, damit sie nachvollziehbar bleibt: --ink-950 ← --nd-bg Seitenhintergrund --ink-900 ← --nd-bg-elev erhabene Flächen, Eingabefelder --ink-850 ← --nd-surface Karten --ink-800 ← --nd-surface-hover Karte im Hover --ink-700 ← --nd-border Rahmen --ink-600 ← --nd-border-strong Rahmen im Hover --mist-100 ← --nd-text --mist-300 ← --nd-text-muted --mist-500 ← --nd-text-faint --accent-500 ← --nd-accent Hauptakzent --auf-akzent ← die Schriftfarbe von `.btn-accent` ⚠️ **Drei Stellen sind abgeleitet, weil die Anwendung sie nicht kennt**, und stehen unten mit Begründung: `--mist-200`, `--mist-600` und `--accent-400`. nexdeck hat drei Textstufen, die übernommenen Bausteine brauchen fünf. ⚠️ **Die Flächen der Anwendung sind durchscheinend** (`rgba(17,22,31,.64)` über einer Aurora). Auf einer Seite ohne Glaskarten wäre das eine Vortäuschung; hier steht deshalb die Farbe, die dieselbe Fläche über dem Seitengrund ergibt. Gerechnet, nicht geschätzt. ========================================================================== */ :root{ /* --- Flächen ------------------------------------------------------------- */ --ink-950:#0a0d12; --ink-900:#0f131a; --ink-850:#11161f; --ink-800:#181f2b; /* Rahmen: weiß mit 7 % bzw. 16 % über --ink-900, ausgerechnet. */ --ink-700:#20242a; --ink-600:#35393f; /* --- Text ---------------------------------------------------------------- */ --mist-100:#e7eaf0; /* abgeleitet: zwischen Text und gedämpftem Text, für hervorgehobene Wörter in Hinweiskästen. Die Anwendung hat dafür keine eigene Stufe. */ --mist-200:#bfc7d4; --mist-300:#94a0b3; --mist-500:#5d6a7d; /* abgeleitet: eine Stufe unter „faint", für Fußzeile und Etiketten. */ --mist-600:#47525f; /* --- Akzent: nexdecks elektrisches Cyan ---------------------------------- */ /* 400 abgeleitet aus dem hellen Verlaufsende des Symbols (icon.svg). */ --accent-400:#a5f3fc; --accent-500:#22d3ee; --accent-600:#06b6d4; --accent-700:#0e7490; /* ⚠️ **Auf Cyan steht Dunkles.** Wie in der Anwendung: `.btn-accent` setzt dort genau diesen Wert. Weiß wäre auf diesem Cyan nicht zu lesen. */ --auf-akzent:#041016; --ok-500:#34d399; --warn-500:#fbbf24; --bad-500:#fb7185; /* --- Dieselben Farben als RGB-Tripel ------------------------------------- Für alles, was Deckkraft braucht: rgb(var(--ink-950-rgb)/.8). Ohne sie stünden feste Zahlen in der CSS, und im hellen Modus blieben sie dunkel — die Seite zöge dunkle Schleier über hellen Grund. */ --ink-950-rgb:10 13 18; --ink-900-rgb:15 19 26; --ink-850-rgb:17 22 31; --ink-800-rgb:24 31 43; --ink-700-rgb:32 36 42; --ink-600-rgb:53 57 63; --mist-100-rgb:231 234 240; --accent-400-rgb:165 243 252; --accent-500-rgb:34 211 238; --accent-600-rgb:6 182 212; --accent-700-rgb:14 116 144; --schatten-rgb:0 0 0; --warn-500-rgb:251 191 36; --ok-500-rgb:52 211 153; --bad-500-rgb:251 113 133; /* Wie stark Schatten wirken. Im Hellen zurückgenommen: ein schwarzer Schatten auf hellem Grund wirkt wie Schmutz. */ --schatten-staerke:1; /* Zwischentöne, die nur je einmal vorkommen: das Streifenband und der Grund hinter dem Suchfenster. Eigene Variablen statt Rundung auf den nächsten Token — das Band lebt davon, dass seine Stufen dicht beieinanderliegen. */ --band-1:rgb(17 22 31/.85); --band-2:rgb(15 19 26/.6); --band-3:rgb(12 15 21/.75); --band-oben:rgb(32 36 42/.7); --band-unten:rgb(7 9 13/.9); --band-glanz:rgb(255 255 255/.025); --grund-schleier:rgb(5 7 10/.72); --grund-fenster:rgb(5 7 10/.94); --flaeche-hauch:rgb(255 255 255/.03); /* --- Semantische Rollen --------------------------------------------------- */ --surface-page:var(--ink-950); --surface-raised:var(--ink-900); --surface-card:var(--ink-850); --surface-card-hover:var(--ink-800); --border-default:var(--ink-700); --border-strong:var(--ink-600); --text-body:var(--mist-100); --text-secondary:var(--mist-300); --text-dim:var(--mist-500); --text-faint:var(--mist-600); --brand:var(--accent-500); --brand-hover:var(--accent-600); } /* --- Schrift ------------------------------------------------------------- ⚠️ **Selbst mitgeliefert, kein fremder Server.** Dieselbe Regel wie auf den beiden anderen Seiten: Die Datenschutzerklärung sagt, dass die Seite keine Verbindung nach außen aufbaut, und eine Schrift von Google wäre genau das. ⚠️ **Zwei der drei Schriften kommen aus der Anwendung, eine nicht.** Inter und JetBrains Mono stehen in nexdecks `app.css`. Space Grotesk steht dort nicht: Sie ist die Schrift der nexapps-Seiten und trägt hier die Wortmarke und die Überschriften, damit die vierte Seite zu den drei anderen gehört. Wer das anders will, tauscht --font-display gegen Inter — sonst nichts. -------------------------------------------------------------------------- */ @font-face{font-family:'Space Grotesk';font-style:normal;font-weight:400;font-display:swap; src:url(/assets/fonts/space-grotesk-latin-400-normal.woff2) format('woff2')} @font-face{font-family:'Space Grotesk';font-style:normal;font-weight:500;font-display:swap; src:url(/assets/fonts/space-grotesk-latin-500-normal.woff2) format('woff2')} @font-face{font-family:'Space Grotesk';font-style:normal;font-weight:600;font-display:swap; src:url(/assets/fonts/space-grotesk-latin-600-normal.woff2) format('woff2')} @font-face{font-family:'Inter';font-style:normal;font-weight:100 900;font-display:swap; src:url(/assets/fonts/inter-latin-wght-normal.woff2) format('woff2-variations')} @font-face{font-family:'JetBrains Mono';font-style:normal;font-weight:400;font-display:swap; src:url(/assets/fonts/jetbrains-mono-latin-400-normal.woff2) format('woff2')} :root{ --font-display:'Space Grotesk','Helvetica Neue',Helvetica,sans-serif; --font-sans:'Inter',system-ui,-apple-system,'Helvetica Neue',Helvetica,sans-serif; --font-mono:'JetBrains Mono','SFMono-Regular',Consolas,monospace; --text-display:clamp(2.25rem,5vw,3.5rem); /* Held-Überschrift */ --text-h1:2rem; --text-h2:1.5rem; --text-h3:1.125rem; --text-body:1rem; --text-sm:.875rem; --text-xs:.75rem; --text-2xs:.6875rem; /* 11px — Etiketten */ --leading-tight:1.1; --leading-snug:1.35; --leading-relaxed:1.65; --tracking-tight:-0.02em; --tracking-wide:.06em; } /* --- Abstände (4-px-Schritte) -------------------------------------------- */ :root{ --space-1:.25rem;--space-2:.5rem;--space-3:.75rem;--space-4:1rem;--space-6:1.5rem; --space-8:2rem;--space-12:3rem;--space-16:4rem;--space-20:5rem;--space-24:6rem; --page-max:80rem; --page-pad:1rem; --page-pad-sm:1.5rem; } /* --- Radien, Schatten, Fokus, Aurora ------------------------------------- ⚠️ **Die Radien sind nexdecks, nicht nexmails.** Die Anwendung rundet mit 16 px (Karten) und 10 px (Kleinteile); das ist deutlich weicher als die beiden anderen Seiten, und es ist das Erste, was man an nexdeck erkennt. */ :root{ --radius-sm:.375rem; --radius-md:.625rem; /* --nd-radius-sm */ --radius-lg:.75rem; --radius-xl:1rem; /* --nd-radius */ --radius-2xl:1.5rem; --radius-full:9999px; --shadow-card:0 12px 32px rgb(var(--schatten-rgb)/calc(.35 * var(--schatten-staerke))); --shadow-pop:0 25px 50px -12px rgb(var(--schatten-rgb)/calc(.6 * var(--schatten-staerke))); --shadow-accent:0 10px 15px -3px rgb(var(--accent-700-rgb)/.3),0 4px 6px -4px rgb(var(--accent-700-rgb)/.3); --glow-hover:0 25px 50px -12px rgb(var(--accent-700-rgb)/.25); --focus-ring:2px solid var(--accent-500); --focus-offset:2px; /* Die Aurora aus der Anwendung: Cyan, ein Hauch Indigo, ein zweites Cyan. Werte aus --nd-aurora-1..3. */ --glow-page: radial-gradient(45rem 26rem at 18% 0%,rgba(34,211,238,.16),transparent 65%), radial-gradient(40rem 24rem at 82% 4%,rgba(99,102,241,.14),transparent 70%), radial-gradient(52rem 30rem at 55% 18%,rgba(6,182,212,.1),transparent 72%); } /* --- Bewegung ------------------------------------------------------------ */ :root{ --ease-soft:cubic-bezier(.22,1,.36,1); --dur-fast:.2s; --dur-rise:.7s; --dur-fade:1.1s; } @keyframes nv-rise{from{opacity:0;transform:translateY(2rem) scale(.97)}to{opacity:1;transform:none}} @keyframes nv-fade{from{opacity:0;transform:scale(1.04)}to{opacity:1;transform:none}} @keyframes nv-spin{to{transform:rotate(360deg)}} .nv-rise{animation:nv-rise var(--dur-rise) var(--ease-soft) both} .nv-fade{animation:nv-fade var(--dur-fade) var(--ease-soft) both} @media (prefers-reduced-motion:reduce){.nv-rise,.nv-fade{animation:none!important}} /* --- Grundstile ---------------------------------------------------------- */ *,*::before,*::after{box-sizing:border-box} html{-webkit-text-size-adjust:100%} body{margin:0;background:var(--surface-page);color:var(--text-body); font-family:var(--font-sans);font-size:var(--text-body); line-height:var(--leading-relaxed);-webkit-font-smoothing:antialiased;min-height:100dvh} :focus-visible{outline:var(--focus-ring);outline-offset:var(--focus-offset)} ::selection{background:rgb(var(--accent-500-rgb)/.35)} a{color:var(--accent-500);text-decoration:none;transition:color var(--dur-fast)} a:hover{color:var(--mist-100)} /* Marken werden im Fließtext hervorgehoben — in Überschriften nicht. Farbe mitten in einer Überschrift zerreißt sie: Die Überschrift ist selbst schon die Betonung. Dass es ein Verweis ist, zeigt beim Zeigen der Unterstrich. */ h1 a,h2 a,h3 a,h4 a,.nx-kicker a{color:inherit} h1 a:hover,h2 a:hover,h3 a:hover,h4 a:hover,.nx-kicker a:hover{ color:inherit;text-decoration:underline;text-underline-offset:.18em} h1,h2,h3,h4{margin:0;font-family:var(--font-display);font-weight:600; letter-spacing:var(--tracking-tight);line-height:var(--leading-tight);text-wrap:pretty} p{margin:0} img,video,svg{max-width:100%} code,pre{font-family:var(--font-mono)} /* Zahlen richten sich wie in der Anwendung als Tabelle aus. */ .num{font-family:var(--font-mono);font-variant-numeric:tabular-nums;letter-spacing:-.01em} .nv-glow{position:relative} .nv-glow::before{content:'';position:fixed;inset:-20% -10% auto -10%;height:60vh; background:var(--glow-page);pointer-events:none;z-index:0} /* ========================================================================== Heller Modus ⚠️ **Nur die Werte werden getauscht, die Rollen bleiben.** Wörtlich aus `:root[data-theme='light']` in nexdecks app.css — dieselbe Quelle, aus der auch die dunklen Werte stammen. ⚠️ **Dunkel ist die Voreinstellung**, wie in der Anwendung: nexdeck IST dunkel, und die Projektseite soll aussehen wie das Produkt. Hell kommt deshalb nur, wenn jemand es wählt — oder „System" wählt und sein System hell steht. Das löst das Skript im Kopf auf; die CSS kennt nur zwei. ========================================================================== */ :root[data-theme="light"]{ --ink-950:#eef1f5; --ink-900:#ffffff; --ink-850:#ffffff; /* abgeleitet: die Anwendung macht die Karte im Hover weißer als weiß, was auf weißem Grund nichts ist. Hier eine Spur dunkler als der Seitengrund. */ --ink-800:#e4e8ee; --ink-700:#dcdfe4; --ink-600:#cacdd4; --mist-100:#0f172a; --mist-200:#333f55; --mist-300:#55627a; --mist-500:#8a95a8; --mist-600:#a3adbd; --accent-400:#0e7490; --accent-500:#0891b2; --accent-600:#0e7490; --accent-700:#0b5a70; /* Auch im Hellen dunkle Schrift auf Cyan: Weiß auf #0891b2 erreicht die Lesbarkeitsschwelle nicht, dieses Dunkel schon. */ --auf-akzent:#041016; --ok-500:#059669; --warn-500:#d97706; --bad-500:#e11d48; --ink-950-rgb:238 241 245; --ink-900-rgb:255 255 255; --ink-850-rgb:255 255 255; --ink-800-rgb:228 232 238; --ink-700-rgb:220 223 228; --ink-600-rgb:202 205 212; --mist-100-rgb:15 23 42; --accent-400-rgb:14 116 144; --accent-500-rgb:8 145 178; --accent-600-rgb:14 116 144; --accent-700-rgb:11 90 112; --schatten-rgb:15 23 42; --warn-500-rgb:217 119 6; --ok-500-rgb:5 150 105; --bad-500-rgb:225 29 72; --schatten-staerke:.28; /* Im Hellen wird aus dem dunklen Band ein zartes graues — dieselbe Rolle, andere Werte. Der Glanz von oben fällt weg: Weiß auf Weiß ist nichts. */ --band-1:rgb(228 232 238/.9); --band-2:rgb(243 245 248/.7); --band-3:rgb(224 229 236/.85); --band-oben:rgb(220 223 228/.9); --band-unten:rgb(213 218 226/.9); --band-glanz:rgb(255 255 255/0); --grund-schleier:rgb(15 23 42/.35); --grund-fenster:rgb(238 241 245/.98); --flaeche-hauch:rgb(15 23 42/.035); /* Die Aurora im Hellen: dieselben drei Kreise, nexdecks helle Werte. */ --glow-page: radial-gradient(45rem 26rem at 18% 0%,rgba(8,145,178,.14),transparent 65%), radial-gradient(40rem 24rem at 82% 4%,rgba(99,102,241,.1),transparent 70%), radial-gradient(52rem 30rem at 55% 18%,rgba(14,165,233,.1),transparent 72%); } /* ⚠️ **„System" steht hier bewusst NICHT.** Ein Element trägt nur EIN data-theme; ein Selektor `[data-theme="system"]` plus Media Query bräuchte die ganze Farbliste ein zweites Mal — und zwei Listen, die dasselbe wissen müssen, laufen irgendwann auseinander. Das Skript im Kopf löst „system" auf und schreibt „light" oder „dark" ans Wurzelelement. Ohne JavaScript bleibt es dunkel; das ist die Voreinstellung, also richtig und kein Ausfall. */ :root[data-theme="light"]{color-scheme:light} :root:not([data-theme="light"]){color-scheme:dark}