Fix spacing issues below navbar

- 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>
This commit is contained in:
Fares Kerkeni 2025-12-24 18:21:06 +01:00
parent a321f022f4
commit aa1ee480e0
1 changed files with 10 additions and 4 deletions

View File

@ -411,7 +411,8 @@ img {
min-height: 100vh; min-height: 100vh;
display: flex; display: flex;
align-items: center; 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%); background: linear-gradient(135deg, var(--navier-gray-100) 0%, var(--navier-white) 50%, rgba(0, 180, 216, 0.05) 100%);
overflow: hidden; overflow: hidden;
} }
@ -1197,7 +1198,7 @@ img {
Page Templates Page Templates
========================================================================== */ ========================================================================== */
.page-header { .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%); background: linear-gradient(135deg, var(--navier-gray-100) 0%, var(--navier-white) 100%);
text-align: center; text-align: center;
} }
@ -1234,7 +1235,7 @@ img {
Blog / Archive Blog / Archive
========================================================================== */ ========================================================================== */
.archive-header { .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); background: var(--navier-gray-100);
text-align: center; text-align: center;
} }
@ -1973,6 +1974,11 @@ select.form-input {
height: 70px; height: 70px;
} }
.hero {
padding-top: 100px;
min-height: auto;
}
.main-navigation, .main-navigation,
.header-cta { .header-cta {
display: none; display: none;
@ -2107,7 +2113,7 @@ select.form-input {
/* Product Hero Section */ /* Product Hero Section */
.product-hero { .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%); background: linear-gradient(135deg, var(--navier-gray-100) 0%, var(--navier-white) 50%, rgba(0, 180, 216, 0.05) 100%);
overflow: hidden; overflow: hidden;
} }