diff --git a/css/styles.css b/css/styles.css index ee081c3..56ba5e5 100644 --- a/css/styles.css +++ b/css/styles.css @@ -124,76 +124,170 @@ button, input, select, textarea { left: 0; width: 100%; z-index: 1000; - background: rgba(6, 13, 31, 0.88); - backdrop-filter: blur(14px); - -webkit-backdrop-filter: blur(14px); + background: rgba(6, 13, 31, 0.95); + backdrop-filter: blur(16px); + -webkit-backdrop-filter: blur(16px); border-bottom: 1px solid rgba(255, 255, 255, 0.08); + box-shadow: 0 4px 20px rgba(0, 0, 0, 0.35); transition: var(--transition); } +/* Emergency Announcement Bar */ +.emergency-bar { + background: linear-gradient(90deg, #991b1b 0%, #dc2626 50%, #991b1b 100%); + color: var(--white); + padding: 6px 16px; + font-size: 0.79rem; + font-weight: 600; + text-align: center; + border-bottom: 1px solid rgba(255, 255, 255, 0.15); +} + +.emergency-container { + display: flex; + align-items: center; + justify-content: center; + gap: 8px; + flex-wrap: wrap; + line-height: 1.35; +} + +.emergency-link { + color: #fef08a; + text-decoration: underline; + font-weight: 700; + margin-left: 6px; + transition: var(--transition); +} + +.emergency-link:hover { + color: #ffffff; +} + +.emergency-bar span.pulse-dot { + display: inline-block; + width: 8px; + height: 8px; + border-radius: 50%; + background-color: #fff; + margin-right: 4px; + animation: pulseDot 1.4s infinite; + vertical-align: middle; +} + +@keyframes pulseDot { + 0% { transform: scale(0.9); opacity: 0.8; box-shadow: 0 0 0 0 rgba(255,255,255,0.7); } + 70% { transform: scale(1.2); opacity: 1; box-shadow: 0 0 0 7px rgba(255,255,255,0); } + 100% { transform: scale(0.9); opacity: 0.8; } +} + +/* Main Navigation Container */ .nav-container { display: flex; align-items: center; justify-content: space-between; - height: 80px; + height: 72px; + max-width: 1400px; + margin: 0 auto; + padding: 0 24px; + gap: 20px; } +/* Brand Logo */ .brand { display: flex; align-items: center; - gap: 14px; + gap: 12px; + flex-shrink: 0; + text-decoration: none; } .brand-icon { - width: 44px; - height: 44px; + width: 42px; + height: 42px; background: var(--grad-gold); border-radius: var(--radius-sm); display: flex; align-items: center; justify-content: center; color: var(--primary-950); - font-size: 22px; + font-size: 20px; font-weight: 900; box-shadow: var(--shadow-gold); + flex-shrink: 0; } -.brand-text h1 { +.brand-text { + display: flex; + flex-direction: column; + justify-content: center; +} + +.brand-name { font-family: var(--font-heading); - font-size: 1.15rem; + font-size: 1.12rem; font-weight: 700; color: var(--white); - line-height: 1.2; + line-height: 1.15; + white-space: nowrap; } -.brand-text span { - font-size: 0.75rem; +.brand-sub { + font-size: 0.72rem; color: var(--gold-300); text-transform: uppercase; letter-spacing: 0.06em; - display: block; + white-space: nowrap; + margin-top: 2px; } +/* Nav Links */ .nav-links { display: flex; align-items: center; - gap: 26px; + justify-content: center; + gap: 20px; + margin: 0; + padding: 0; } .nav-links a { - font-size: 0.92rem; - font-weight: 500; + font-size: 0.88rem; + font-weight: 600; color: var(--slate-200); + white-space: nowrap; + position: relative; + padding: 6px 2px; + transition: color 0.2s ease; } .nav-links a:hover { - color: var(--gold-400); + color: #ffffff; } +.nav-links a::after { + content: ''; + position: absolute; + bottom: 0; + left: 50%; + width: 0; + height: 2px; + background: var(--gold-400); + transition: all 0.2s ease; + transform: translateX(-50%); + border-radius: 2px; +} + +.nav-links a:hover::after { + width: 100%; +} + +/* Nav Actions */ .nav-actions { display: flex; align-items: center; - gap: 16px; + gap: 12px; + flex-shrink: 0; } /* Bilingual Language Switcher */ @@ -204,12 +298,13 @@ button, input, select, textarea { border-radius: var(--radius-full); padding: 3px; gap: 2px; + flex-shrink: 0; } .lang-btn { - padding: 6px 13px; + padding: 5px 11px; border-radius: var(--radius-full); - font-size: 0.78rem; + font-size: 0.76rem; font-weight: 700; color: var(--slate-200); background: transparent; @@ -217,7 +312,8 @@ button, input, select, textarea { transition: var(--transition); display: flex; align-items: center; - gap: 5px; + gap: 4px; + white-space: nowrap; } .lang-btn.active { @@ -226,6 +322,14 @@ button, input, select, textarea { box-shadow: 0 2px 8px rgba(0, 0, 0, 0.25); } +.nav-cta-btn { + padding: 9px 18px; + font-size: 0.86rem; + font-weight: 700; + white-space: nowrap; + flex-shrink: 0; +} + /* Buttons */ .btn { display: inline-flex; @@ -289,33 +393,6 @@ button, input, select, textarea { cursor: pointer; } -/* Emergency Alert Bar */ -.emergency-bar { - background: linear-gradient(90deg, #b70914 0%, #e63946 50%, #b70914 100%); - color: var(--white); - padding: 10px 0; - font-size: 0.88rem; - font-weight: 600; - text-align: center; - border-bottom: 1px solid rgba(255, 255, 255, 0.2); -} - -.emergency-bar span.pulse-dot { - display: inline-block; - width: 9px; - height: 9px; - border-radius: 50%; - background-color: #fff; - margin-right: 8px; - animation: pulseDot 1.4s infinite; -} - -@keyframes pulseDot { - 0% { transform: scale(0.9); opacity: 0.8; box-shadow: 0 0 0 0 rgba(255,255,255,0.7); } - 70% { transform: scale(1.15); opacity: 1; box-shadow: 0 0 0 8px rgba(255,255,255,0); } - 100% { transform: scale(0.9); opacity: 0.8; } -} - /* Hero Section */ .hero { position: relative; @@ -327,10 +404,11 @@ button, input, select, textarea { background-position: center; background-attachment: fixed; color: var(--white); - padding-top: 140px; + padding-top: 155px; padding-bottom: 80px; } + .hero-content { max-width: 820px; } @@ -1274,13 +1352,13 @@ button, input, select, textarea { } } -@media (max-width: 768px) { +@media (max-width: 1024px) { .nav-links { position: fixed; - top: 80px; + top: 108px; left: -100%; width: 100%; - height: calc(100vh - 80px); + height: calc(100vh - 108px); background: var(--primary-950); flex-direction: column; padding: 36px 24px; @@ -1300,6 +1378,10 @@ button, input, select, textarea { .nav-actions .btn-relief { display: none; } +} + +@media (max-width: 768px) { + .section { padding: 64px 0; diff --git a/index.html b/index.html index f2da05c..ece9c1e 100644 --- a/index.html +++ b/index.html @@ -16,37 +16,36 @@ - -
-
- - URGENT RELIEF & REBUILDING INITIATIVE • CARACAS, VENEZUELA: - Priority Need: Repairing structural wall fissures in the sanctuary and restoring seminary classrooms. - Earthquake Relief Fund → -
-
- +
diff --git a/js/translations.js b/js/translations.js index 0bb85df..ca49728 100644 --- a/js/translations.js +++ b/js/translations.js @@ -4,14 +4,17 @@ const translations = { // Header & Nav "nav.brand_title": "Iglesia Bíblica Bautista", "nav.brand_subtitle": "Vista Alegre • Caracas, Venezuela", - "nav.about": "About Pastor Víctor", + "nav.need": "The Need", + "nav.about": "Pastor Víctor", + "nav.plan": "The Plan", + "nav.rebuilding": "Rebuilding Fund", "nav.relief": "Rebuilding Fund", "nav.seminary": "Seminary", - "nav.ministries": "Ministries & Media", + "nav.ministries": "Ministries", "nav.location": "Location", - "nav.give": "Support Mission", + "nav.give": "Partner", "nav.contact": "Contact", - "nav.relief_cta": "Earthquake Relief Fund", + "nav.relief_cta": "Earthquake Relief", // Hero Section "hero.eyebrow": "URGENT RELIEF & REBUILDING INITIATIVE • CARACAS, VENEZUELA", @@ -217,10 +220,13 @@ const translations = { // Header & Nav "nav.brand_title": "Iglesia Bíblica Bautista", "nav.brand_subtitle": "Vista Alegre • Caracas, Venezuela", + "nav.need": "La Necesidad", "nav.about": "Pastor Víctor", + "nav.plan": "El Plan", + "nav.rebuilding": "Reconstrucción", "nav.relief": "Fondo de Reconstrucción", "nav.seminary": "Seminario", - "nav.ministries": "Ministerios y Medios", + "nav.ministries": "Ministerios", "nav.location": "Ubicación", "nav.give": "Ofrendar", "nav.contact": "Contacto",