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>

public/assets/design-panel.js

@@ -5,7 +5,7 @@
  * what the server accepts – nothing more, nothing less. Adding a property on the server makes it
  * appear here without touching this file.
  */
-import { devices, effectiveStyle, hoverStyle, setStyle, resetStyleDevice, clearStyle, isContainer, relevantProperty } from './editor-model.js';
+import { devices, effectiveStyle, hoverStyle, scrolledStyle, setStyle, resetStyleDevice, clearStyle, isContainer, relevantProperty } from './editor-model.js';
 import { openMedia, createMediaPreview } from './media.js';
 import { createColorControl } from './color-control.js';
 
@@ -104,7 +104,7 @@ function element(tag, className, text) {
   return node;
 }
 
-export function createDesignPanel({ schema, onChange, onSavePreset, getBlock, getDevice, onDevice, getSelection, getHistory }) {
+export function createDesignPanel({ schema, onChange, onSavePreset, getBlock, getDevice, onDevice, getSelection, getHistory, getAreaKind = () => 'page' }) {
   /**
    * The merge key lets a drag collapse into a single undo entry instead of one per pixel.
    *
@@ -149,7 +149,7 @@ export function createDesignPanel({ schema, onChange, onSavePreset, getBlock, ge
 
   /** Does this device carry an own value for this property - as a plain value or per side? */
   const hasOwn = (block, deviceName, key, hover) => {
-    const bucket = hover ? block?.style?.[deviceName]?.hover : block?.style?.[deviceName];
+    const bucket = hover === 'scrolled' ? block?.style?.[deviceName]?.scrolled : hover ? block?.style?.[deviceName]?.hover : block?.style?.[deviceName];
     const value = bucket?.[key];
     if (value === undefined) return false;
     // A per-side property stores an object; an empty one is a leftover, not a value.
@@ -554,6 +554,27 @@ export function createDesignPanel({ schema, onChange, onSavePreset, getBlock, ge
             chips: deviceChips(block, key, `${property.label} beim Überfahren`, true),
           }));
         }
+
+        // The scrolled page - only in the header, the one area that changes with scrolling.
+        if (getAreaKind() === 'header' && (schema.scrollable ?? []).includes(key)) {
+          const scrolledId = `${id}-scrolled`;
+          const scrolledValue = scrolledStyle(block, deviceName, key);
+          let scrolledInherited = current.value || '';
+          for (const name of Object.keys(devices)) {
+            if (name === deviceName) break;
+            scrolledInherited = scrolledStyle(block, name, key) ?? scrolledInherited;
+          }
+          const scrolledApply = (value, mergeKey) => change(doc => setStyle(doc, getSelection(), deviceName, key, value, { scrolled: true }), mergeKey, Boolean(mergeKey));
+          const scrolledControl = property.type === 'color'
+            ? colorControl(scrolledId, scrolledValue ?? '', scrolledApply, `${property.label} beim Scrollen`, scrolledInherited)
+            : numberControl(scrolledId, scrolledValue ?? '', property, scrolledApply);
+          body.append(row(scrolledId, `${property.label} beim Scrollen`, scrolledControl, {
+            own: scrolledValue !== undefined,
+            inherited: 'Gilt, sobald die Seite um mehr als 40 px gescrollt ist. Vorher gilt der normale Wert - für einen transparenten Kopf dort #ffffff00 eintragen.',
+            onReset: () => scrolledApply(''),
+            chips: deviceChips(block, key, `${property.label} beim Scrollen`, 'scrolled'),
+          }));
+        }
       }
       if (group === 'text') {
         const notice = contrastNotice(block, deviceName);