/* ───────────────────────────────────────────────────────────────────────── WG-Watch.com — Designsprache der Artikelseite (/article/) Praefix `art-`, durchgaengig. Bewusst KEINE Wiederverwendung von `card-premium`/`stat-card`/`section-chip`: die stehen seitenlokal in player.php bzw. online.php und wuerden hier schlicht nichts tun (sie sind nicht im Tailwind-Build). Ein eigener, praefixierter Satz vermeidet zusaetzlich die Namenskollision, die `stat-card` zwischen player.php und session.php bereits hat. Eingebunden ueber $pageStylesheet in article.php — also im , mit filemtime()-Cache-Buster. NICHT per unterhalb des header-includes: ein Stylesheet im blockiert das Rendern trotzdem, es wird nur spaeter entdeckt (FOUC + Layoutsprung). Leitfarbe ist das Marken-Orange (--color-wgOrange, #f57c00) mit Bernstein als Zweitton — dieselbe Familie wie Blog-Listing und Hero. ───────────────────────────────────────────────────────────────────────── */ /* ── Tokens ─────────────────────────────────────────────────────────────── Auf .art-scope statt :root, damit nichts in fremde Seiten leckt. Die Dark-Fassung definiert nur die Token um; keine Regel weiter unten muss dafuer verdoppelt werden. */ .art-scope { --art-accent: #f57c00; --art-accent-2: #fbbf24; --art-accent-soft: rgba(245, 124, 0, 0.10); --art-surface: #ffffff; --art-surface-2: #fbfbfc; --art-line: rgba(17, 24, 39, 0.07); --art-line-strong: rgba(17, 24, 39, 0.12); --art-ink: #111827; --art-ink-2: #374151; --art-ink-3: #6b7280; --art-shadow: 0 1px 2px rgba(16, 24, 40, 0.04), 0 12px 32px -12px rgba(16, 24, 40, 0.14); --art-shadow-lift: 0 1px 2px rgba(16, 24, 40, 0.05), 0 26px 56px -20px rgba(16, 24, 40, 0.26); } .dark .art-scope { --art-accent-soft: rgba(245, 124, 0, 0.14); --art-surface: #1f2937; --art-surface-2: rgba(17, 24, 39, 0.55); --art-line: rgba(255, 255, 255, 0.08); --art-line-strong: rgba(255, 255, 255, 0.14); --art-ink: #f9fafb; --art-ink-2: #d1d5db; --art-ink-3: #9ca3af; --art-shadow: 0 1px 2px rgba(0, 0, 0, 0.3), 0 12px 32px -12px rgba(0, 0, 0, 0.55); --art-shadow-lift: 0 1px 2px rgba(0, 0, 0, 0.35), 0 26px 56px -20px rgba(0, 0, 0, 0.7); } /* ── Flaechen ──────────────────────────────────────────────────────────── */ .art-card { position: relative; background: var(--art-surface); border: 1px solid var(--art-line); border-radius: 1.5rem; box-shadow: var(--art-shadow); } /* Haarfeine Lichtkante oben — der Unterschied zwischen "Box" und "Panel". ::before statt eines eigenen
, damit das Markup schlank bleibt. */ .art-card::before { content: ''; position: absolute; inset: 0 0 auto 0; height: 1px; border-radius: inherit; background: linear-gradient(90deg, transparent, rgba(245, 124, 0, 0.55) 22%, rgba(251, 191, 36, 0.55) 55%, transparent); opacity: 0.7; pointer-events: none; } /* Die grosse Artikelkarte: gleiche Sprache, nur tiefer gesetzt — sie ragt ueber das Hero-Bild und braucht dafuer mehr Schatten als ein Panel im Fluss. ⚠️ Bewusst hier und nicht als Tailwind-`shadow-2xl` im Markup: article.css ist unlayered, Tailwind-Utilities liegen in @layer utilities — die unlayered Regel gewinnt, eine Utility waere wirkungslos. */ .art-card--flush { border-radius: 2rem; box-shadow: 0 1px 2px rgba(16, 24, 40, 0.05), 0 40px 80px -32px rgba(16, 24, 40, 0.4); } .dark .art-card--flush { box-shadow: 0 1px 2px rgba(0, 0, 0, 0.4), 0 40px 80px -30px rgba(0, 0, 0, 0.85); } .art-lift { transition: transform 0.28s cubic-bezier(0.4, 0, 0.2, 1), box-shadow 0.28s ease, border-color 0.28s ease; } .art-lift:hover { transform: translateY(-3px); box-shadow: var(--art-shadow-lift); border-color: rgba(245, 124, 0, 0.35); } /* Licht-Sweep beim Hover. Der Traeger braucht overflow:hidden — die Karten unten setzen es selbst, damit die Regel hier nichts erzwingt, was auf anderen Traegern Glows abschneiden wuerde. */ .art-sheen::after { content: ''; position: absolute; top: 0; bottom: 0; left: -60%; width: 45%; background: linear-gradient(100deg, transparent, rgba(255, 255, 255, 0.55), transparent); transform: skewX(-18deg); opacity: 0; pointer-events: none; transition: none; } .dark .art-sheen::after { background: linear-gradient(100deg, transparent, rgba(255, 255, 255, 0.09), transparent); } .art-sheen:hover::after { opacity: 1; animation: art-sweep-x 0.85s cubic-bezier(0.4, 0, 0.2, 1); } /* ── Kleinteile ───────────────────────────────────────────────────────── */ .art-chip { display: inline-flex; align-items: center; gap: 0.375rem; padding: 0.3125rem 0.6875rem; border-radius: 999px; font-size: 0.6875rem; font-weight: 800; letter-spacing: 0.06em; text-transform: uppercase; color: #b45309; background: var(--art-accent-soft); border: 1px solid rgba(245, 124, 0, 0.22); white-space: nowrap; } .dark .art-chip { color: #fbbf24; border-color: rgba(245, 124, 0, 0.3); } .art-hairline { height: 1px; border: 0; background: linear-gradient(90deg, transparent, var(--art-line-strong) 20%, var(--art-line-strong) 80%, transparent); } /* Diagonale Panzerungsschraffur — dieselbe Idee wie wotc-plate auf der Klanseite, hier nur als sehr leise Textur hinter Panels. */ .art-plate { background-image: repeating-linear-gradient(135deg, rgba(245, 124, 0, 0.055) 0 1px, transparent 1px 9px); } .art-dots { background-image: radial-gradient(circle, currentColor 1px, transparent 1px); background-size: 22px 22px; } /* ── Kopfzeilen-Icon (Panel-Marke) ────────────────────────────────────── */ .art-badge { position: relative; display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0; width: 2.75rem; height: 2.75rem; border-radius: 0.875rem; color: var(--art-accent); background: var(--art-accent-soft); border: 1px solid rgba(245, 124, 0, 0.22); } .art-badge::after { content: ''; position: absolute; inset: -6px; border-radius: inherit; background: radial-gradient(circle at 50% 50%, rgba(245, 124, 0, 0.22), transparent 70%); opacity: 0.55; pointer-events: none; filter: blur(6px); } /* ── Inhaltsverzeichnis ───────────────────────────────────────────────── ⚠️ Die Schiene liegt in einem WRAPPER um die