/* Theme Name: Schachbrett Portfolio Theme Author: Una Preuß Description: Portfolio-Theme mit isometrischem Kachel-Grid, Totem-System und tag-basierter Sichtbarkeitssteuerung für priorisierte Case Studies. Version: 0.1.0 Requires PHP: 7.4 Text Domain: schachbrett-portfolio */ /* * Globaler Reset — geladen auf jeder Seite (inc/enqueue.php), bevor * grid.css/case-study.css/fonts.css dazukommen. box-sizing: border-box * ist der Grund, warum das Suchfeld im Header sein eigenes Padding zur * width:100% addiert hat statt es einzurechnen (2026-08-07 gefunden) — * ohne diesen Reset kann derselbe Fehler an jeder anderen Stelle mit * width:100% + padding erneut auftreten. */ *, *::before, *::after { box-sizing: border-box; } /* Una-Wunsch 2026-08-18 (Codebase-Aufräumrunde): Farb-Tokens waren bisher doppelt gepflegt — grid.css definierte sie auf .portfolio-grid-page, case-study.css (mit teils abweichender Teilmenge) auf .case-study-page/ .schachbrett-page. Schon im ursprünglichen Phase-3b-Plan als "sauberer Aufräum-Punkt für später" vermerkt. Jetzt eine einzige Quelle auf :root (dieses Stylesheet lädt themeweit als Erstes, vor allen anderen) — jede Seite/jeder Kontext (inkl. das Slide-in-Panel, das sich .case-study-page zusätzlich aufsetzt) erbt dieselben Werte, ohne sie erneut zu deklarieren. Enthält jetzt auch die vorher nur in jeweils EINER Datei vorhandenen Tokens (--color-petrol/--color-anthracite/ --color-accent-apricot nur in grid.css, --color-box-bg/ --color-box-border nur in case-study.css) — ein einziges, vollständiges Farbsystem statt zweier sich teils überschneidender. */ :root { --color-navy: #0a1622; --color-petrol: #0f3436; --color-forest: #12251c; --color-anthracite: #202325; --color-text: #e9f3f1; --color-text-dim: #a9bdb9; --color-accent-magenta: #ff3fb4; --color-accent-apricot: #ffb37b; --color-accent-turquoise: #2ff2d0; --color-box-bg: rgba( 255, 255, 255, 0.05 ); --color-box-border: rgba( 233, 243, 241, 0.15 ); } /* Una-Wunsch 2026-08-11: markiert der Seite/dem Browser gegenüber, dass bereits ein eigenes, durchgängiges Dunkel-Theme läuft — der Standard- Signalweg dafür, den u. a. Browser-Erweiterungen wie Dark Reader auswerten, um eine Seite von ihrer eigenen (dann farbverfälschenden) Nachbearbeitung auszunehmen. Ergänzt das -Tag in den -Bereichen der Templates (wirkt schon vor dem Laden dieses Stylesheets); hier zusätzlich als CSS-Eigenschaft, u. a. damit native Formularelemente/Scrollbars passend dunkel gerendert werden. */ html { color-scheme: dark; } body { margin: 0; } /* Una-Fund 2026-08-18: "Auf mobil gibt es Fokusringe um alle Elemente, die ich antippe [...] Tastaturnavigation am Handy gibt es ja nicht." Sämtliche eigenen Fokus-Stile im Theme sind bereits bewusst auf :focus-visible beschränkt (nie das breitere :focus) — das ALLEIN reicht aber nicht: ohne dieses globale Reset bleibt der native Browser-Standardring für den :focus-Fall (also außerhalb von :focus-visible) weiterhin aktiv, und manche mobilen Browser/Versionen werten einen Tap uneinheitlich als "focus-visible-würdig". Global statt nur an den bereits mit :focus-visible gestylten Stellen, weil sonst Elemente OHNE eigene :focus-visible-Regel (z. B. der native Ring auf einem einfachen Link ohne Sonderbehandlung) weiterhin den Browser-Standard zeigen würden — betrifft ausschließlich den Fall, in dem der Browser selbst :focus-visible NICHT für zutreffend hält, Tastaturfokus bleibt davon unberührt sichtbar. */ :focus:not( :focus-visible ) { outline: none; } /* Una-Fund 2026-08-19: obige Regel reichte auf einem echten iPhone nicht — Fokusringe waren weiterhin da. Grund liegt tiefer als angenommen: nicht nur die EIGENEN, farbig gestylten :focus-visible-Regeln (dafür inzwischen per (hover:hover)/(pointer:fine) in grid.css/case-study.css entschärft, siehe dort) waren betroffen, sondern genau DIESE Regel hier selbst — sie hängt komplett an :focus-visible, und WebKits eigene Heuristik dafür stuft einen Touch-Tap auf iOS fälschlich als "focus-visible" ein. ":not(:focus-visible)" trifft für einen Tap dort also NIE zu, der native Standardring bleibt folglich ungehindert sichtbar — unabhängig von allen eigenen Stilen. Zusätzliche, von dieser Heuristik komplett unabhängige Absicherung: auf einem Gerät ohne feinen Zeiger (kein Maus-/Trackpad-Zeiger verfügbar) grundsätzlich JEDEN Fokusring unterdrücken, ganz gleich was :focus-visible dort meint — Tastaturnavigation ist auf einem reinen Touchscreen ohnehin nicht der Normalfall. (pointer:coarse) ODER (hover:none) statt einer einzelnen kombinierten Bedingung, weil Geräte unterschiedlich unvollständige Angaben machen können; beides zusammen deckt zuverlässig jeden "kein echter Zeiger vorhanden"-Fall ab. */ @media ( pointer: coarse ), ( hover: none ) { :focus { outline: none; } }