/* * "Schäfer Live" – Dark-Mode-Scroll-Effekt (Port von der RealEstate-Welt) * Reversibel: zum Zurücknehmen die zugehörigen wp_enqueue-Zeilen * ('fm-align-style' / 'fm-align-script') in functions.php auskommentieren. * * Sobald der Mittelpunkt der Video-Box (#videowall) in den mittleren Viewport- * Bereich scrollt, setzt fm-align.js die Klasse .sre-live-dark auf ; der * Seitenhintergrund blendet dann weich nach Schwarz und wieder zurück. */ /* Weicher Übergang des Seitenhintergrunds. Die transparenten Vorfahren der Video-Box lassen den schwarzen Body durchscheinen. */ html { transition: background-color 0.7s ease; } body { transition: background-color 0.7s ease; } html.sre-live-dark, html.sre-live-dark body { background-color: #0a0a0a !important; } /* Headline "Schäfer Live" (#c273 .front-large) hat inline color:black !important. Der eigentliche Farbwechsel auf Weiß wird deshalb per JS inline erzwungen (nur ein Inline-Wert überschreibt einen Inline-!important). Hier nur der weiche Übergang + im Dark-Mode ein dezenter Schatten als Kanten-Absicherung. Wichtig: der Farbwechsel ist schneller (0.25s) als der Hintergrund (0.7s), damit die Headline hell ist, bevor es dunkel wird – nie schwarz-auf-schwarz. */ #c273 .front-large, #c273 .front-large a { transition: color 0.25s ease 0s; } html.sre-live-dark #c273 .front-large, html.sre-live-dark #c273 .front-large a { text-shadow: 0 1px 6px rgba(0, 0, 0, 0.6); } /* Video-Kacheln haben einen 1px weißen Rahmen (Trennlinien). Auf Schwarz würden sie als weiße Linien stören -> im Dark-Mode auf Schwarz umfärben, damit die Wall nahtlos in den dunklen Hintergrund übergeht. */ #videowall .box { transition: border-color 0.7s ease; } html.sre-live-dark #videowall .box { border-color: #0a0a0a !important; }