/* ============================================================ OVERLAND OUTFITTERS — ZENTRALE THEME-DATEI ============================================================ Diese Datei definiert die gemeinsamen Farb- und Schrift- variablen für alle individuell gebauten Seiten-Abschnitte (Startseite, FAQ, Front Runner, Rhino Rack, weitere Marken-Seiten). WICHTIG: Diese Datei ersetzt NICHT das CSS in den einzelnen Widgets. Sie ist die gemeinsame Quelle, auf die neue und nach und nach umgestellte Widgets verweisen sollen, statt ihre eigenen Farben lokal neu zu definieren. EINBINDUNG: Diese Datei muss einmal im gemeinsamen Header (Template-Einstellung "Header: OOF") verlinkt werden, z.B.: Danach steht sie auf jeder Seite zur Verfügung. ============================================================ */ :root { /* --- Dunkel-Modus: Standardwerte --- */ --oo-bg-black: #111111; --oo-bg-dark: #1c1c1c; --oo-bg-charcoal: #242424; --oo-bg-card: #151515; --oo-border: rgba(255, 255, 255, 0.12); --oo-border-soft: rgba(255, 255, 255, 0.08); --oo-text: #ffffff; --oo-text-mid: rgba(255, 255, 255, 0.72); --oo-text-soft: rgba(255, 255, 255, 0.55); --oo-accent-gold: #a0925f; --oo-accent-gold-light: #c2ae6e; --oo-accent-red: #dd3526; --oo-accent-red-light: #e76e63; --oo-font-body: Arial, Helvetica, sans-serif; --oo-font-heading: "Barlow Condensed", Arial, sans-serif; --oo-font-mono: "IBM Plex Mono", monospace; } /* --- Hell-Modus: wird aktiv, wenn gesetzt ist --- */ [data-theme="light"] { --oo-bg-black: #ffffff; --oo-bg-dark: #f6f5f2; --oo-bg-charcoal: #eeece7; --oo-bg-card: #ffffff; --oo-border: rgba(0, 0, 0, 0.12); --oo-border-soft: rgba(0, 0, 0, 0.08); --oo-text: #161616; --oo-text-mid: rgba(0, 0, 0, 0.68); --oo-text-soft: rgba(0, 0, 0, 0.5); --oo-accent-gold: #8a7a4a; --oo-accent-gold-light: #a0925f; --oo-accent-red: #c22e21; --oo-accent-red-light: #dd3526; } /* Sanfter Übergang beim Umschalten, statt hartem Farbsprung */ body, body * { transition: background-color 0.2s ease, border-color 0.2s ease, color 0.2s ease; } /* ============================================================ HELL/DUNKEL-UMSCHALTER (Design) Optischer Stil des Umschalt-Buttons, den wir in den Header einbauen. Die eigentliche Umschalt-Logik (JavaScript) folgt separat, sobald diese Datei live ist. ============================================================ */ .oo-theme-toggle { display: inline-flex; align-items: center; justify-content: center; width: 34px; height: 34px; border: 1px solid var(--oo-border); border-radius: 50%; background: transparent; cursor: pointer; color: var(--oo-text); } .oo-theme-toggle:hover { border-color: var(--oo-accent-gold); color: var(--oo-accent-gold); }