Give the header scrolled colours and equal card heights in 1.11.1

Cards, quotes and call-to-action bands side by side in a row are equal in
height again: the stacking margin meant for a column no longer applies inside
a row. The header can carry a second set of colours for the scrolled page,
the Flatsome transparent header: a "scrolled" state next to "hover", limited
to colours, shadow and opacity, marked by a small script only where it is
used, plus a setting that lets the header float over the first section.

Co-Authored-By: Claude Fable 5.1 <noreply@anthropic.com>

src/Content/SiteSettings.php

@@ -29,6 +29,10 @@ final class SiteSettings
         // Der Kopfbereich bleibt beim Scrollen oben stehen. Eine Eigenschaft der Website und
         // nicht des Dokuments: kleben kann nur das Element, das den Bereich umschliesst.
         'stickyHeader' => false,
+        // Der Kopfbereich liegt über dem Inhalt statt darüber zu stehen - der Flatsome-Aufbau mit
+        // transparentem Kopf über dem Hero. Welche Farben er beim Scrollen bekommt, bestimmt die
+        // Gestaltung des Kopfbereichs selbst („beim Scrollen" unter Hintergrund).
+        'headerOverlay' => false,
         // Einblendungen und Hover-Bewegungen. „always" spielt sie wie Flatsome bei jedem
         // Besucher ab; „respect" hält sich an die Browservorgabe „Bewegung reduzieren", die
         // manche Systeme melden, ohne dass jemand sie bewusst eingestellt hat.
@@ -135,6 +139,7 @@ final class SiteSettings
         }
         $values['llmsTxt'] = (bool) ($input['llmsTxt'] ?? false);
         $values['stickyHeader'] = (bool) ($input['stickyHeader'] ?? false);
+        $values['headerOverlay'] = (bool) ($input['headerOverlay'] ?? false);
         $favicon = trim((string) ($input['faviconMediaId'] ?? ''));
         if ('' !== $favicon) {
             if (1 !== preg_match('/^[a-f0-9]{32}$/D', $favicon) || null === $this->media->find($favicon)) {

src/Content/StyleCompiler.php

@@ -49,6 +49,14 @@ final class StyleCompiler
                     }
                     continue;
                 }
+                if ('scrolled' === $key) {
+                    $this->require(is_array($value), 'Scrolled styles must be an object.');
+                    foreach ($value as $scrolledKey => $scrolledValue) {
+                        $this->require(in_array($scrolledKey, StyleSchema::scrollable(), true), sprintf('The property "%s" has no scrolled value.', (string) $scrolledKey));
+                        $this->value($properties[$scrolledKey], $scrolledValue, (string) $scrolledKey);
+                    }
+                    continue;
+                }
                 $this->require(is_string($key) && isset($properties[$key]), sprintf('Unknown style property "%s".', (string) $key));
                 $this->value($properties[$key], $value, $key);
             }
@@ -181,6 +189,12 @@ final class StyleCompiler
             if ('' !== $hover) {
                 $rules .= sprintf('#%s:hover,#%s:focus-within{%s}', $id, $id, $hover);
             }
+            // The scrolled state: scrolled.js puts `is-scrolled` on <html> once the page has moved.
+            // The change eases in, so a header does not snap from glass to solid.
+            $scrolled = is_array($values['scrolled'] ?? null) ? $this->declarations($values['scrolled'], 'self', $device) : '';
+            if ('' !== $scrolled) {
+                $rules .= sprintf('#%s{transition:background-color .3s,color .3s,border-color .3s,box-shadow .3s,opacity .3s}html.is-scrolled #%s{%s}', $id, $id, $scrolled);
+            }
             if ('' === $rules) {
                 continue;
             }

src/Content/StyleSchema.php

@@ -219,6 +219,16 @@ final class StyleSchema
         return array_keys(array_filter(self::properties(), static fn (array $p): bool => $p['hover'] ?? false));
     }
 
+    /**
+     * Properties that may also carry a value for the scrolled page - the Flatsome transparent
+     * header that turns solid once the reader has scrolled. Colours, shadow and opacity only:
+     * a header that changes size while scrolling would push the page around under the finger.
+     */
+    public static function scrollable(): array
+    {
+        return ['backgroundColor', 'color', 'borderColor', 'shadowColor', 'opacity'];
+    }
+
     public static function sides(): array
     {
         return ['top' => 'Oben', 'right' => 'Rechts', 'bottom' => 'Unten', 'left' => 'Links'];