From aa1ee480e079dbfbc866cb0ef8c5f4be86a50029 Mon Sep 17 00:00:00 2001
From: Fares Kerkeni <93195495+Fares-Kerkeni@users.noreply.github.com>
Date: Wed, 24 Dec 2025 18:21:06 +0100
Subject: [PATCH] Fix spacing issues below navbar
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- Increased hero padding-top from 80px to 120px for better spacing after fixed navbar
- Added responsive hero padding (100px) for mobile devices (768px and below)
- Fixed page-header, archive-header and product-hero padding for consistency
- Added padding-bottom to hero section

🤖 Generated with [Claude Code](https://claude.com/claude-code)

Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
---
 theme/style.css | 14 ++++++++++----
 1 file changed, 10 insertions(+), 4 deletions(-)

diff --git a/theme/style.css b/theme/style.css
index 5974f11..52e9e54 100644
--- a/theme/style.css
+++ b/theme/style.css
@@ -411,7 +411,8 @@ img {
     min-height: 100vh;
     display: flex;
     align-items: center;
-    padding-top: 80px;
+    padding-top: 120px;
+    padding-bottom: var(--spacing-3xl);
     background: linear-gradient(135deg, var(--navier-gray-100) 0%, var(--navier-white) 50%, rgba(0, 180, 216, 0.05) 100%);
     overflow: hidden;
 }
@@ -1197,7 +1198,7 @@ img {
    Page Templates
    ========================================================================== */
 .page-header {
-    padding: calc(80px + var(--spacing-4xl)) 0 var(--spacing-3xl);
+    padding: calc(100px + var(--spacing-4xl)) 0 var(--spacing-3xl);
     background: linear-gradient(135deg, var(--navier-gray-100) 0%, var(--navier-white) 100%);
     text-align: center;
 }
@@ -1234,7 +1235,7 @@ img {
    Blog / Archive
    ========================================================================== */
 .archive-header {
-    padding: calc(80px + var(--spacing-4xl)) 0 var(--spacing-3xl);
+    padding: calc(100px + var(--spacing-4xl)) 0 var(--spacing-3xl);
     background: var(--navier-gray-100);
     text-align: center;
 }
@@ -1973,6 +1974,11 @@ select.form-input {
         height: 70px;
     }
 
+    .hero {
+        padding-top: 100px;
+        min-height: auto;
+    }
+
     .main-navigation,
     .header-cta {
         display: none;
@@ -2107,7 +2113,7 @@ select.form-input {
 
 /* Product Hero Section */
 .product-hero {
-    padding: calc(80px + var(--spacing-3xl)) 0 var(--spacing-3xl);
+    padding: calc(100px + var(--spacing-3xl)) 0 var(--spacing-3xl);
     background: linear-gradient(135deg, var(--navier-gray-100) 0%, var(--navier-white) 50%, rgba(0, 180, 216, 0.05) 100%);
     overflow: hidden;
 }