From 98dfa6d8b6c064d86f957bd5f2004c12649816b8 Mon Sep 17 00:00:00 2001 From: "j.foucher" Date: Fri, 15 May 2026 08:22:48 +0200 Subject: [PATCH] style(home): full-viewport-height video hero (100vh) with vertical centering MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit 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) --- tools/av-generate-home.php | 18 ++++++++++-------- 1 file changed, 10 insertions(+), 8 deletions(-) diff --git a/tools/av-generate-home.php b/tools/av-generate-home.php index 81ba111..c0d6cb2 100644 --- a/tools/av-generate-home.php +++ b/tools/av-generate-home.php @@ -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'), - '_background' => $section_background, - '_position' => 'relative', - '_overflow' => 'hidden', + '_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; }', ], ];