style(home): full-viewport-height video hero (100vh) with vertical centering
Hero section now min-height: 100vh — fills the entire viewport, content vertically centered via flex-column + justify-content: center. Scrolling reveals the rest of the page below (3-pillars cards, industries, etc.). Replaces the previous fixed-padding approach (9rem top, 8rem bottom) which left visible space below the hero on tall monitors and forced the hero shorter on mobile. Padding kept minimal (2rem top/bottom) for breathing room when content gets close to the viewport edges on very short displays. Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
This commit is contained in:
@@ -263,17 +263,19 @@ function av_build_home_video_hero() {
|
||||
|
||||
$els = [];
|
||||
|
||||
// SECTION — full bleed, large vertical padding, video bg or navy
|
||||
// SECTION — full-bleed, 100vh tall, content vertically centered.
|
||||
// Using min-height (not fixed height) so content can still extend if needed.
|
||||
// 100dvh fallback handles mobile address bar collapse correctly (newer browsers).
|
||||
$els[] = [
|
||||
'id' => $sid, 'name' => 'section', 'parent' => 0, 'children' => [$oct],
|
||||
'settings' => [
|
||||
'_padding' => av_sp('9rem', '0', '8rem', '0'),
|
||||
'_padding:tablet_portrait' => av_sp('7rem', '0', '6rem', '0'),
|
||||
'_padding:mobile_landscape' => av_sp('5rem', '0', '4rem', '0'),
|
||||
'_padding:mobile_portrait' => av_sp('4rem', '0', '3.5rem', '0'),
|
||||
'_padding' => av_sp('2rem', '0', '2rem', '0'), // breathing room at top/bottom
|
||||
'_heightMin' => '100vh', // full viewport height
|
||||
'_justifyContent' => 'center', // vertical centering (flex-column)
|
||||
'_background' => $section_background,
|
||||
'_position' => 'relative',
|
||||
'_overflow' => 'hidden',
|
||||
'_cssCustom' => '%root% { min-height: 100vh; min-height: 100dvh; }',
|
||||
],
|
||||
];
|
||||
|
||||
|
||||
Reference in New Issue
Block a user