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/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;
             }