fix: redesign desktop header with clean concise nav links, integrated emergency bar, and zero text wrapping

This commit is contained in:
2026-09-02 13:52:34 -07:00
parent 16c17d6ace
commit 32ac98d8a7
3 changed files with 165 additions and 77 deletions
+19 -19
View File
@@ -16,37 +16,36 @@
</head>
<body>
<!-- Emergency Announcement Bar -->
<div class="emergency-bar">
<div class="container">
<span class="pulse-dot"></span>
<strong data-i18n="hero.eyebrow">URGENT RELIEF & REBUILDING INITIATIVE • CARACAS, VENEZUELA</strong>:
<span data-i18n="relief.urgent_alert">Priority Need: Repairing structural wall fissures in the sanctuary and restoring seminary classrooms.</span>
<a href="#rebuilding-fund" style="text-decoration: underline; margin-left: 8px; color: #fff; font-weight: 700;" data-i18n="nav.relief_cta">Earthquake Relief Fund →</a>
</div>
</div>
<!-- Header / Navigation -->
<header class="site-header">
<!-- Emergency Announcement Top Bar -->
<div class="emergency-bar">
<div class="container emergency-container">
<span class="pulse-dot"></span>
<strong data-i18n="hero.eyebrow">URGENT RELIEF & REBUILDING INITIATIVE • CARACAS, VENEZUELA</strong>:
<span data-i18n="relief.urgent_alert">Priority Need: Repairing structural wall fissures in the sanctuary and restoring seminary classrooms.</span>
<a href="#rebuilding-fund" class="emergency-link" data-i18n="nav.relief_cta">Earthquake Relief Fund →</a>
</div>
</div>
<!-- Main Navigation Bar -->
<div class="container nav-container">
<a href="#" class="brand">
<div class="brand-icon"></div>
<div class="brand-text">
<h1 data-i18n="nav.brand_title">Iglesia Bíblica Bautista</h1>
<span data-i18n="nav.brand_subtitle">Vista Alegre • Caracas, Venezuela</span>
<span class="brand-name" data-i18n="nav.brand_title">Iglesia Bíblica Bautista</span>
<span class="brand-sub" data-i18n="nav.brand_subtitle">Vista Alegre • Caracas, Venezuela</span>
</div>
</a>
<!-- Navigation Links -->
<!-- Navigation Links (Concise, single-line, clean) -->
<nav id="nav-links" class="nav-links">
<a href="#crisis-problem" data-i18n="sb7.problem_badge">The Need</a>
<a href="#crisis-problem" data-i18n="nav.need">The Need</a>
<a href="#about-pastor" data-i18n="nav.about">Pastor Víctor</a>
<a href="#how-to-help" data-i18n="sb7.plan_title">The 3-Step Plan</a>
<a href="#rebuilding-fund" data-i18n="nav.relief">Rebuilding Fund</a>
<a href="#how-to-help" data-i18n="nav.plan">The Plan</a>
<a href="#rebuilding-fund" data-i18n="nav.rebuilding">Rebuilding Fund</a>
<a href="#seminary" data-i18n="nav.seminary">Seminary</a>
<a href="#ministries" data-i18n="nav.ministries">Ministries</a>
<a href="#location" data-i18n="nav.location">Location</a>
<a href="#giving" data-i18n="nav.give">Partner</a>
<a href="#contact" data-i18n="nav.contact">Contact</a>
</nav>
@@ -60,12 +59,13 @@
<span>🇻🇪</span> ES
</button>
</div>
<a href="#rebuilding-fund" class="btn btn-relief open-donate-modal" data-i18n="nav.relief_cta">Earthquake Relief</a>
<a href="#rebuilding-fund" class="btn btn-relief nav-cta-btn open-donate-modal" data-i18n="nav.relief_cta">Earthquake Relief</a>
<button id="mobile-toggle" class="mobile-toggle" aria-label="Open Navigation Menu"></button>
</div>
</div>
</header>
<!-- SB7 Element 1: Hero Section (The Character & Their Noble Desire) -->
<section class="hero">
<div class="container">