Revert "fix: restructure layout to allow video extension into iOS safe area"

This reverts commit c53ac80779.

apps/website/assets/css/main.css

@@ -7,8 +7,8 @@
 html, body {
   margin: 0;
   padding: 0;
-  /* Background color for areas not covered by video */
-  background: #000; /* Black background as fallback */
+  /* Transparent background to allow video in safe area */
+  background: transparent;
 }
 
 /* Smooth Scroll Behavior and iOS Overscroll Prevention */

apps/website/assets/css/voyage-layout.css

@@ -1729,7 +1729,7 @@ html {
         min-height: 100dvh;
         /* Video will extend under notch - no padding-top here */
         padding-bottom: env(safe-area-inset-bottom);
-        overflow: visible; /* Allow video to extend into safe area */
+        overflow: clip; /* Allow video to extend while preventing scrollbars */
         max-width: 100vw !important;
     }
 

apps/website/components/HeroSection.vue

@@ -172,19 +172,20 @@ onMounted(() => {
 </script>
 
 <style scoped>
-/* Hero video container using fixed positioning for iOS Safari safe area */
+/* Hero video container using standard safe-area-inset-top for iOS Safari */
 .hero-video-container {
-  position: fixed !important; /* Fixed to extend beyond layout constraints */
+  position: absolute;
   left: 0;
   right: 0;
   width: 100vw;
+  /* Use standard safe-area-inset-top */
   /* Pull up by the safe area to extend under notch */
   top: calc(-1 * env(safe-area-inset-top, 0px));
   /* Extend height to compensate */
   height: calc(100vh + env(safe-area-inset-top, 0px));
-  z-index: -1; /* Behind all content */
+  z-index: 0;
   pointer-events: none;
-  /* No background color to allow video visibility */
+  /* Removed white background to allow transparency */
 }
 
 /* iOS Safari portrait bug workaround - env() returns 0 in portrait */
@@ -266,7 +267,6 @@ onMounted(() => {
   min-height: 100vh;
   /* Allow video to extend into safe area */
   overflow: visible;
-  z-index: 1; /* Above fixed video background */
 }
 
 .hero-main {

apps/website/layouts/hero.vue

@@ -1,12 +0,0 @@
-<template>
-  <!-- Custom layout for hero page without constraining wrapper div -->
-  <!-- This allows the hero video to extend into iOS safe area -->
-  <AppNavbar />
-  <slot />
-  <AppFooter />
-</template>
-
-<script setup lang="ts">
-// Custom layout for pages with hero sections that need to extend into safe areas
-// No wrapper div means no flex constraints blocking video extension
-</script>

apps/website/pages/index.vue

@@ -24,10 +24,6 @@
 </template>
 
 <script setup lang="ts">
-// Use custom hero layout without constraining wrapper
-definePageMeta({
-  layout: 'hero'
-})
 // SEO meta tags aligned with static mockup
 useHead({
   title: 'Harbor Smith - Personalized Service Maintenance For Your Boat',