Layout
Section Overlap
A Section-level display setting that pulls the section up into the one above it via negative margin-top — seams that interlock rather than bands that stack flush. The section's background intrudes upward; content inside stays padded as authored. Requires the overlapping section to have its own background.
Setting: sectionOverlap on OT_LandingSection display template
Dependency: set backgroundColor on the overlapping section. A transparent section produces no visible seam.
Mobile: overlap zeroes out below 640px — sections stack flush on narrow viewports.
01
Shallow overlap
Shallow — --ot-space-md (16px)
The preceding section ends here
Barely a tuck — the seam clips together. Works best when a subtle shift in background is enough to signal depth.
02
Mid overlap
Mid — --ot-space-lg (32px)
The preceding section ends here
The primary editorial choice. Clear interlock without drama — the upper section's background is visibly encroached.
03
Deep overlap
Deep — --ot-space-xl (64px)
The preceding section ends here
Dramatic fold-over. Use for immersive hero-to-content transitions where the lower section asserts strong presence.
04
Full overlap
Full — --ot-space-2xl (128px)
The preceding section ends here
Maximum pull. The lower section consumes a full 128px of the one above. Reserve for poster-scale moments.
05
Column bleed
A Column-level variant controlled by columnBleed on OT_LandingColumn. Extends one column's content area 32px into its neighbor's space via negative margin. The bleeding column sits on top (z-index 1). Use for image-to-text pairings, stat panels asserting dominance, or any moment where a column should break its own boundary.
Column bleed right — --ot-space-lg (32px)
This column bleeds 32px into the right neighbor
The brand column's background overlaps 32px into this column's left edge. Use for image-to-text pairings where the visual panel dominates.
06
Token reference
Overlap amounts
Column bleed
Stacking: position relative + z-index 1 on the overlapping element. Multiple overlapping sections resolve via DOM order — later in DOM = higher stack.