- Removed CSS contain properties that were preventing video from extending into safe area
- Implemented Vue 3 Teleport to bypass DOM containment for iOS video extension
- Video now renders at body level to properly utilize safe area insets
- Kept Safari fallbacks for env() bug workaround
🤖 Generated with Claude Code
Co-Authored-By: Claude <noreply@anthropic.com>
- Add hardcoded fallbacks using max() function per Apple's recommendation
- Support both constant() and env() for legacy compatibility
- Use 59px fallback for Dynamic Island devices
- Add iOS-specific detection with @supports(-webkit-touch-callout)
- Create improved test page with device detection
- Update hero-content padding with same fallback approach
This works around the known Safari bug where env(safe-area-inset-top)
returns 0px in portrait mode. The video will now extend 59px above the
viewport on Dynamic Island iPhones, ensuring it covers the notch area.
- Remove overflow-x: hidden from HeroSection.vue that was clipping video
- Delete duplicate .hero-video-container styles from voyage-layout.css
- Fix navigation to use env() directly instead of CSS variables
- Remove deprecated constant() syntax
- Add safe-area-test.html for testing safe area extension
The video should now properly extend under the iOS notch/Dynamic Island
while keeping content within safe areas.
- Remove overflow:clip from .hero-voyage that was blocking video extension
- Replace hardcoded -50px with proper env(safe-area-inset-top) calculations
- Update hero-content to use env() values directly instead of CSS variables
- Video now properly extends under notch/Dynamic Island on all iOS devices
- Works with Chrome mobile's dynamic address bar using lvh units
- Content stays within safe areas for proper usability
- Fix hero video not displaying in notch safe area by changing z-index from -1 to 1
- Fix lucide icons not showing by installing and configuring nuxt-icon module
- Fix navigation bar bobbing by removing hysteresis thresholds and simplifying scroll handler
🤖 Generated with [Claude Code](https://claude.ai/code)
Co-Authored-By: Claude <noreply@anthropic.com>
- Changed body background from black to white for clean fallback
- Added iOS-specific CSS to extend video 50px beyond safe area
- Used @supports (-webkit-touch-callout: none) to target only iOS Safari
- Added hardware acceleration to prevent header bobbing on iOS
- Non-iOS mobile devices maintain normal video positioning
- Ensures white background shows if video doesn't load/extend properly
- Added html/body reset styles (margin:0, padding:0, background:#000)
- Removed ALL overflow:hidden from html, body, hero-voyage, and hero-video-container
- Changed hero-voyage to use overflow:clip (prevents scrollbars while allowing extension)
- Fixed video container positioning:
- Changed from absolute to fixed positioning
- Added top: calc(-1 * env(safe-area-inset-top)) to pull video into notch
- Height: calc(100lvh + env(safe-area-inset-top)) with 100vh fallback
- Set z-index: -1 to place behind all content
- Updated mobile styles to match desktop implementation
- Removed overflow-x:hidden from all parent elements
This follows GPT's exact checklist for iOS notch video extension.
- Created VideoBackdrop component as global sibling layer
- Video now sits at app level behind all content (z-index: 0)
- Hero section made transparent to reveal video backdrop
- Video extends into notch with negative top positioning
- Content remains in safe areas with proper padding
- Removed video container from HeroSection component
- Added app.vue to manage global layout structure
This separation allows the video to truly extend edge-to-edge
including under the iOS notch/Dynamic Island while keeping
all interactive content within safe areas.
- Replace broken fixed positioning with absolute + negative top
- Video now extends calc(-1 * env(safe-area-inset-top)) above container
- Height compensated with calc(100dvh + env(safe-area-inset-top))
- Container uses position: relative with overflow: visible
- Fixes iOS Safari bug where fixed positioning doesn't work properly
This approach allows the video to extend under the iOS notch/Dynamic Island
while keeping interactive content in safe areas.
- Removed incorrect height calculation that added safe areas to video height
- Removed conflicting absolute positioning from main.css
- Video container now properly uses fixed positioning on mobile
- Desktop layout preserved with absolute positioning
The video now correctly extends edge-to-edge under the iOS notch/Dynamic Island
- Video now uses fixed positioning on mobile to fill entire viewport
- Hero content respects safe-area-inset on all sides (top, left, right, bottom)
- Navigation bar includes safe area padding to stay below notch
- Removed padding-top from hero-voyage to allow video under notch
- Maintains smooth scroll transitions and navbar background changes
This allows the hero video to create an immersive edge-to-edge experience
on iOS devices while keeping all interactive elements accessible.
Optimizations implemented:
- Added hardware acceleration for smooth animations (will-change, transform3d)
- Optimized touch targets for mobile (minimum 48x48px)
- Added explicit image dimensions to prevent CLS
- Implemented comprehensive SEO meta tags and Open Graph
- Added structured data for LocalBusiness and Service schemas
- Configured resource hints (preconnect, dns-prefetch, preload)
- Added lazy loading to non-critical images
- Improved button accessibility with touch-action: manipulation
These optimizations improve Core Web Vitals, mobile UX, and SEO visibility.
🤖 Generated with [Claude Code](https://claude.ai/code)
Co-Authored-By: Claude <noreply@anthropic.com>
Hero Section Viewport Fix:
- Changed body from min-height to height:100% for proper iOS inheritance
- Updated layout wrapper from min-h-screen to h-full
- Created app.vue with explicit height wrapper for Nuxt root
- Maintains complete height inheritance chain: html > body > #__nuxt > layout
Mobile Footer Fix:
- Fixed CSS conflict: removed grid-template-columns from flex container
- Added proper flex column layout for mobile stacking
- Removed margin-left:auto that was causing horizontal overflow
- Added word-wrap and padding for proper text wrapping
- Centered all footer content on mobile devices
These changes ensure the hero section fills the entire iPhone Safari viewport
including the URL bar area, and the footer displays correctly without cutoff.
- Removed safe area padding from .hero-voyage container (was reducing height)
- Simplified video container positioning to fill parent (top:0, bottom:0)
- Applied safe area padding only to .hero-content to protect text/buttons
- Container now uses full viewport height without reduction
The issue was that adding safe area padding to the container itself was
reducing the available height instead of extending it. Safe areas should
only protect content from being obscured, not shrink containers.
- Add viewport-fit=cover to meta tag for safe area extension
- Implement iOS-specific height handling with -webkit-fill-available
- Use dynamic viewport height (100dvh) for proper mobile behavior
- Extend video container beyond safe areas with negative positioning
- Add safe area padding with env() variables for content positioning
- Include mobile-specific @supports queries for better compatibility
This ensures the hero section fills the entire iPhone viewport from top to bottom, extending behind the status bar and home indicator while keeping content readable within safe areas.
- Change video preload from metadata to auto for faster loading
- Add fade-in transition for smooth video appearance
- Remove transform scale(1.1) that caused horizontal overflow
- Add comprehensive overflow-x: hidden to html, body, and hero containers
- Add max-width: 100vw constraints at multiple levels
- Add contain: layout to hero section for better overflow control
- Implement proper loading states to prevent fallback image flash
- Implement dynamic viewport units (dvh) for proper mobile scaling
- Add fluid typography using clamp() functions
- Fix iOS-specific viewport issues with -webkit-fill-available
- Add scroll-margin-top to prevent section overlaps
- Improve touch targets to 50px minimum for mobile UX
- Add CSS custom properties for consistent responsive spacing
- Fix hero section to properly fill mobile viewport
- Update service cards for better mobile layout
- Increase hero content size for better mobile visibility
- Expand buttons and touch targets to recommended sizes
- Fix section padding and container widths for mobile
- Ensure all cards and grids use full width on mobile
- Update typography scaling for better readability
- Set proper viewport base font size (16px)
- Add comprehensive mobile layout fixes
🤖 Generated with [Claude Code](https://claude.ai/code)
Co-Authored-By: Claude <noreply@anthropic.com>
- Update viewport meta to prevent zoom-out issues
- Add video preload and smooth fallback transitions
- Implement iOS overscroll bounce prevention
- Center service offering buttons properly
- Add mobile-specific padding and touch target sizing
- Optimize video loading with canplaythrough event
- Add fade-out transition for fallback image
🤖 Generated with [Claude Code](https://claude.ai/code)
Co-Authored-By: Claude <noreply@anthropic.com>
- Fix testimonial stars to display horizontally
- Make booking section buttons always visible
- Align footer Get in Touch section to the right
- Add proper video overlay gradients for text visibility
- Fix booking card visibility with white backgrounds
- Improve mobile responsiveness with smaller buttons
- Create 2x2 stats grid for mobile view
- Add Harbor Smith logo as favicon
- Remove scroll indicator from hero section
- Add animated counter for seafarers (0 to 100+)
- Center and resize mobile buttons properly
🤖 Generated with [Claude Code](https://claude.ai/code)
Co-Authored-By: Claude <noreply@anthropic.com>
