/* * Velocity Section — Automatic Flush Spacing * * When two adjacent sections share the same background color (detected via * matching data-vel-bg attributes), the second section's vertical padding * is automatically collapsed to "flush" tier values. * * Author-controlled override: if [data-vel-spacing-override] has a non-empty * value, auto-flush is skipped. The selector [data-vel-spacing-override=""] * matches only when the attribute is empty (no author override). * * Figma flush values: Small 32px / Medium 48px / Large 64px * * Uses CSS custom properties to set responsive values once, avoiding * triple-repetition of the selector list. */ /* Default flush values (mobile-first) */ :root { --vel-flush-py: 2rem; /* 32px — Small */ } @media (min-width: 768px) { :root { --vel-flush-py: 3rem; } /* 48px — Medium */ } @media (min-width: 1024px) { :root { --vel-flush-py: 4rem; } /* 64px — Large */ } /* ── AEM Editor: reset full-bleed escape, overlap margin, and z-index * so section edit overlays never cover adjacent components. * * .cq-wcm-edit-mode is added to by AEM in edit mode only. * !important overrides both utility classes and inline styles. * ─────────────────────────────────────────────────────────────────── */ .cq-wcm-edit-mode [data-vel-section] { width: 100% !important; /* neutralise w-screen (full-bleed) */ margin-left: 0 !important; /* neutralise ml-[calc(-50vw+50%)] */ transform: none !important; /* neutralise translateY overlap */ z-index: auto !important; /* neutralise z-10 (overlap stacking) */ } /* Shield — single divider between columns (2-column split layout ONLY). * Mobile: horizontal border-bottom on the first stacked column, with * padding-bottom above the line and padding-top on the second column. * Tablet+: absolute ::before pseudo-element spans full shield card height * (with top/bottom inset), centered between the two columns. * Columns get lateral padding so content doesn't crowd the line. * NOTE: 3-column "Cards" layout has NO divider per Figma spec. */ [data-vel-shield-card] { position: relative; } .cq-wcm-edit-mode [data-vel-shield-card] { min-height: 5rem; } /* Mobile: horizontal divider — border-bottom on first column, padding-top on second */ [data-vel-shield-card][data-vel-shield-divide] [data-vel-shield-grid] > *:first-child { padding-bottom: 2rem; border-bottom: 1px solid #BEBFBF; } [data-vel-shield-card][data-vel-shield-divide] [data-vel-shield-grid] > *:last-child { padding-top: 2rem; } @media (min-width: 768px) { /* Reset mobile horizontal divider styles at tablet+ */ [data-vel-shield-card][data-vel-shield-divide] [data-vel-shield-grid] > *:first-child { padding-bottom: 0; border-bottom: none; } [data-vel-shield-card][data-vel-shield-divide] [data-vel-shield-grid] > *:last-child { padding-top: 0; } /* Vertical divider: lateral column padding + ::before line */ [data-vel-shield-card][data-vel-shield-divide] [data-vel-shield-grid] > *:nth-child(odd) { padding-right: 2.5rem; } [data-vel-shield-card][data-vel-shield-divide] [data-vel-shield-grid] > *:nth-child(even) { padding-left: 2.5rem; } [data-vel-shield-card][data-vel-shield-divide]::before { content: ''; position: absolute; left: 50%; top: 1.25rem; bottom: 1.25rem; width: 1px; background-color: #BEBFBF; transform: translateX(-0.5px); } } /* ── Overlap — responsive negative-margin tiers ────────────────────── * Mobile-first: smaller overlap so the taller stacked shield card * doesn't cover the hero CTA. At md (768px+) the full desktop value kicks in. */ [data-vel-overlap="sm"] { --vel-overlap: -40px; } [data-vel-overlap="md"] { --vel-overlap: -80px; } [data-vel-overlap="md-lg"] { --vel-overlap: -100px; } [data-vel-overlap="lg"] { --vel-overlap: -120px; } [data-vel-overlap="xl"] { --vel-overlap: -160px; } [data-vel-overlap="hero-shield"] { --vel-overlap: -170px; } @media (min-width: 768px) { [data-vel-overlap="sm"] { --vel-overlap: -80px; } [data-vel-overlap="md"] { --vel-overlap: -160px; } [data-vel-overlap="md-lg"] { --vel-overlap: -200px; } [data-vel-overlap="lg"] { --vel-overlap: -240px; } [data-vel-overlap="xl"] { --vel-overlap: -320px; } [data-vel-overlap="hero-shield"] { --vel-overlap: -345px; } } /* Auto-flush: adjacent same-bg sections, no author spacing override */ [data-vel-bg="bg-vel-white"] + [data-vel-bg="bg-vel-white"][data-vel-spacing-override=""], [data-vel-bg="bg-white"] + [data-vel-bg="bg-white"][data-vel-spacing-override=""], [data-vel-bg="bg-vel-surface-secondary"] + [data-vel-bg="bg-vel-surface-secondary"][data-vel-spacing-override=""], [data-vel-bg="bg-vel-surface-light"] + [data-vel-bg="bg-vel-surface-light"][data-vel-spacing-override=""], [data-vel-bg="bg-vel-gray-bg"] + [data-vel-bg="bg-vel-gray-bg"][data-vel-spacing-override=""], [data-vel-bg="bg-vel-navy"] + [data-vel-bg="bg-vel-navy"][data-vel-spacing-override=""], [data-vel-bg="bg-vel-lapis"] + [data-vel-bg="bg-vel-lapis"][data-vel-spacing-override=""], [data-vel-bg="bg-vel-opal"] + [data-vel-bg="bg-vel-opal"][data-vel-spacing-override=""], [data-vel-bg="bg-vel-brand-subtle"] + [data-vel-bg="bg-vel-brand-subtle"][data-vel-spacing-override=""], [data-vel-bg="bg-vel-banner-blue"] + [data-vel-bg="bg-vel-banner-blue"][data-vel-spacing-override=""], [data-vel-bg="bg-vel-azurite"] + [data-vel-bg="bg-vel-azurite"][data-vel-spacing-override=""], [data-vel-bg="bg-vel-pearl"] + [data-vel-bg="bg-vel-pearl"][data-vel-spacing-override=""] { padding-top: var(--vel-flush-py); padding-bottom: var(--vel-flush-py); } /* ── Section column containers: full width at every breakpoint ─────── * Each section/column sub-container is decorated by AEM's core container * with `container responsivegrid` classes, which impose a max-width * (768px at the tablet breakpoint). Force the column wrappers to fill * their grid track at all sizes so single-column sections span 100%. */ [data-vel-section] [data-vel-shield-grid] > .responsivegrid { max-width: none !important; width: 100% !important; } /* ── Match Content Height ──────────────────────────────────────────── * When the author enables "Match Content Height", section.js adds * `items-stretch` to the grid so each column wrapper (grid item) grows to * the tallest column's height. The column wrapper is a flex column, but * the nested AEM wrappers (.card → .velocity-ui → [data-vel-card]) have no * intrinsic height, so a single component never fills the stretched * column. These rules cascade growth + full height down the chain so the * component (e.g. a card) matches the column height, adding empty space at * the bottom as needed. `:not(.new)` excludes the edit-mode drop zone. * Handles both the direct child layout and the per-column gap wrapper. */ [data-vel-match-height="true"] > *:not(.new) > *:not(.new), [data-vel-match-height="true"] > *:not(.new) > *:not(.new) > *:not(.new) { flex: 1 1 auto; } [data-vel-match-height="true"] .velocity-ui { height: 100%; } [data-vel-match-height="true"] .velocity-ui > [data-vel-card] { height: 100%; }