/* ========================================================================= nostream_new_n_design.css — "nostream new n" design language Used by: index, blog, cmf-clip-pro-review, impressum, privacy_policy, 404 und news/*.html (paarweise mit nostream_new_n_design.js im ). Klassen- und Token-Praefix: nnd-. Nicht benutzt von: dot-hub.*, nclock.*, adservice/* (stylesheet.css) und developers/dothub_json_format (docs.css). Self-contained: this file replaces stylesheet.css on pages that use it. Warm paper light theme / pure black dark theme, red #d71920 accent, pill buttons, rounded card chassis, dot-grid hover, corner screws. ========================================================================= */ /* --- LOKALE SCHRIFTARTEN (keine CDN-Links, vgl. stylesheet.css) --- */ @font-face { font-family: 'Space Mono'; src: url('fonts/SpaceMono-Regular.ttf') format('truetype'); font-weight: 400; font-style: normal; font-display: swap; } @font-face { font-family: 'Space Mono'; src: url('fonts/SpaceMono-Bold.ttf') format('truetype'); font-weight: 700; font-style: normal; font-display: swap; } @font-face { font-family: 'Space Mono'; src: url('fonts/SpaceMono-Italic.ttf') format('truetype'); font-weight: 400; font-style: italic; font-display: swap; } /* --- TOKENS: Light (paper) --- */ :root { --nnd-red: #d71920; --nnd-red-dark: #b6151a; --nnd-yellow: #ffc700; --nnd-bg: #f5f5f0; --nnd-surface: #ffffff; --nnd-surface-alt: #eeeee9; --nnd-fg: #1a1a1a; --nnd-muted: #5c5c58; --nnd-soft: #8a8a85; --nnd-border: rgba(0, 0, 0, 0.10); --nnd-border-strong: rgba(0, 0, 0, 0.18); --nnd-hover-bg: #e4e4e2; --nnd-dot: rgba(0, 0, 0, 0.07); --nnd-tint: rgba(215, 25, 32, 0.08); --screw-metal-light: #ffffff; --screw-metal-mid: #e1e1dd; --screw-metal-dark: #b8b8b3; --screw-stroke: rgba(0, 0, 0, 0.14); --screw-slot: rgba(0, 0, 0, 0.28); --nnd-sans: system-ui, -apple-system, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif; --nnd-mono: 'Space Mono', ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; --nnd-r-card: 24px; --nnd-r-panel: 16px; --nnd-r-pill: 999px; --nnd-ease: cubic-bezier(0.25, 0.8, 0.4, 1); color-scheme: light dark; /* Aliasse auf die Tokens aus stylesheet.css. Die bestehenden Seiten referenzieren diese Namen in Inline-Styles (z. B. var(--accent-color)), deshalb bleiben sie hier gueltig und zeigen auf die neue Palette. Sie stehen auf demselben Element wie die --nnd-* Tokens, loesen also im Dark Mode automatisch mit auf. */ --accent-color: var(--nnd-red); --on-accent: #ffffff; --bg-color: var(--nnd-bg); --fg-color: var(--nnd-fg); --surface: var(--nnd-surface); --dot-color: var(--nnd-surface-alt); --border-muted: var(--nnd-border-strong); --text-muted: var(--nnd-muted); --text-soft: var(--nnd-soft); --panel-bg: var(--nnd-surface); --placeholder-bg: var(--nnd-surface-alt); --font-main: var(--nnd-mono); } /* --- TOKENS: Dark (pure black) --- */ @media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) { --nnd-bg: #000000; --nnd-surface: #1a1a1a; --nnd-surface-alt: #121212; --nnd-fg: #e3e3e3; --nnd-muted: #a5a5a2; --nnd-soft: #6f6f6c; --nnd-border: rgba(255, 255, 255, 0.08); --nnd-border-strong: rgba(255, 255, 255, 0.16); --nnd-hover-bg: #383838; --nnd-dot: rgba(255, 255, 255, 0.06); --nnd-tint: rgba(215, 25, 32, 0.14); --screw-metal-light: #525252; --screw-metal-mid: #383838; --screw-metal-dark: #222222; --screw-stroke: rgba(255, 255, 255, 0.08); --screw-slot: rgba(0, 0, 0, 0.6); } } :root[data-theme="dark"] { --nnd-bg: #000000; --nnd-surface: #1a1a1a; --nnd-surface-alt: #121212; --nnd-fg: #e3e3e3; --nnd-muted: #a5a5a2; --nnd-soft: #6f6f6c; --nnd-border: rgba(255, 255, 255, 0.08); --nnd-border-strong: rgba(255, 255, 255, 0.16); --nnd-hover-bg: #383838; --nnd-dot: rgba(255, 255, 255, 0.06); --nnd-tint: rgba(215, 25, 32, 0.14); --screw-metal-light: #525252; --screw-metal-mid: #383838; --screw-metal-dark: #222222; --screw-stroke: rgba(255, 255, 255, 0.08); --screw-slot: rgba(0, 0, 0, 0.6); } * { box-sizing: border-box; margin: 0; padding: 0; } html { scroll-behavior: smooth; scroll-padding-top: 100px; } body { background-color: var(--nnd-bg); background-image: radial-gradient(circle at 1px 1px, var(--nnd-dot) 1px, transparent 0); background-size: 22px 22px; color: var(--nnd-fg); font-family: var(--nnd-sans); font-size: 1rem; line-height: 1.7; -webkit-font-smoothing: antialiased; transition: background-color 0.3s var(--nnd-ease), color 0.3s var(--nnd-ease); } .container { max-width: 900px; margin: 0 auto; padding: 0 1.5rem 4rem; } ::selection { background: var(--nnd-red); color: #ffffff; } /* --- Header & Nav (Markup identisch zu den anderen Seiten) --- */ header { position: sticky; top: 0; z-index: 50; display: flex; flex-wrap: wrap; align-items: center; gap: 1rem; padding: 0.9rem 0; margin-bottom: 2.5rem; background-color: var(--nnd-bg); border-bottom: 1px solid var(--nnd-border); } .logo { margin-right: auto; font-family: var(--nnd-sans); font-size: 1rem; font-weight: 700; letter-spacing: -0.03em; } .logo span { color: var(--nnd-red); } nav { display: flex; flex-wrap: wrap; gap: 0.35rem; } nav a { display: inline-block; padding: 0.35rem 0.85rem; border-radius: var(--nnd-r-pill); color: var(--nnd-muted); font-size: 0.85rem; font-weight: 500; letter-spacing: -0.01em; text-decoration: none; transition: background-color 0.2s var(--nnd-ease), color 0.2s var(--nnd-ease); } nav a:hover { background-color: var(--nnd-hover-bg); color: var(--nnd-fg); } nav a.accent { background-color: var(--nnd-tint); color: var(--nnd-red); } /* Theme-Umschalter — bewusst ausserhalb von