feat:Codonix Mobile Responsiveness & UI Stabilization

Overview

This Merge Request implements a comprehensive mobile-responsiveness audit and optimization for the Codonix platform. The goal was to resolve all visual regressions, ensure fluid cross-device stacking, and improve mobile accessibility without disturbing the premium desktop aesthetic.

Key Changes

1. Responsive Core & Layout

• Dynamic Viewport Stability: Upgraded all 100vh declarations to 100dvh (Dynamic Viewport Height) to prevent content clipping by mobile browser toolbars.
• Mobile-First Grid Stacking: Refined grid systems for the Hero, Hub, and Services sections to stack gracefully on viewports under 768px.
• Viewport Resilience: Implemented overflow-x: hidden globally and added overflow-wrap: anywhere to headings to prevent horizontal scrolling on 320px devices.

2. Accessibility & UX

• Touch Target Optimization: Standardized all interactive elements (navigation links, social icons, carousel controls) to a minimum 48px hit area.
• Typography Scaling: Implemented resilient clamp() functions for all h1 and h2 elements to ensure editorial rhythm on mobile.
• Mobile Navigation: Enhanced the mobile drawer with fixed headers, scrollable content areas, and clear active-state indicators.

3. Footer Restoration & Layering

• Decorative Art Fix: Restored the missing molecule/DNA art by adjusting responsive cutoffs.
• Z-Index Refinement: Moved decorative elements to z-index: -1 to ensure they never overlap text or interactive elements.
• Opacity Tuning: Optimized mobile opacity to 0.25 to maintain a professional "watermark" feel while prioritizing text clarity.

4. Build & Style Stabilization

• CSS Structure Repair: Resolved multiple PostCSS syntax errors and improperly nested media queries.
• Asset Integrity: Verified and corrected asset paths for footer and carousel images.

Verification

• Tested on 320px (iPhone SE)
• Tested on 412px (Pixel 7)
• Tested on 768px (iPad Air)
• Verified desktop layout (1920px) remains undisturbed.