diff --git a/css/styles.css b/css/styles.css
index cda9d76..6a0633e 100644
--- a/css/styles.css
+++ b/css/styles.css
@@ -147,34 +147,25 @@ button, input, select, textarea {
/* Emergency Announcement Bar */
.emergency-bar {
- background: linear-gradient(90deg, #991b1b 0%, #dc2626 50%, #991b1b 100%);
+ background: linear-gradient(90deg, #881337 0%, #b91c1c 50%, #881337 100%);
color: var(--white);
- padding: 6px 16px;
- font-size: 0.79rem;
+ padding: 7px 16px;
+ font-size: 0.8rem;
font-weight: 600;
text-align: center;
border-bottom: 1px solid rgba(255, 255, 255, 0.15);
+ box-shadow: 0 1px 4px rgba(0, 0, 0, 0.25);
}
.emergency-container {
display: flex;
align-items: center;
justify-content: center;
- gap: 8px;
- flex-wrap: wrap;
+ gap: 10px;
+ max-width: 1400px;
+ margin: 0 auto;
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;
+ white-space: nowrap;
}
.emergency-bar span.pulse-dot {
@@ -183,9 +174,9 @@ button, input, select, textarea {
height: 8px;
border-radius: 50%;
background-color: #fff;
- margin-right: 4px;
animation: pulseDot 1.4s infinite;
vertical-align: middle;
+ flex-shrink: 0;
}
@keyframes pulseDot {
@@ -194,39 +185,78 @@ button, input, select, textarea {
100% { transform: scale(0.9); opacity: 0.8; }
}
+.emergency-badge {
+ background: rgba(255, 255, 255, 0.22);
+ padding: 2px 8px;
+ border-radius: 4px;
+ font-size: 0.72rem;
+ font-weight: 800;
+ letter-spacing: 0.05em;
+ text-transform: uppercase;
+ color: #fff;
+ flex-shrink: 0;
+}
+
+.emergency-divider {
+ opacity: 0.45;
+ font-size: 0.75rem;
+ flex-shrink: 0;
+}
+
+.emergency-text {
+ font-size: 0.82rem;
+ color: #f1f5f9;
+ font-weight: 500;
+}
+
+.emergency-link {
+ color: #fef08a;
+ text-decoration: underline;
+ font-weight: 700;
+ font-size: 0.82rem;
+ margin-left: 2px;
+ transition: var(--transition);
+ flex-shrink: 0;
+}
+
+.emergency-link:hover {
+ color: #ffffff;
+ text-shadow: 0 0 8px rgba(254, 240, 138, 0.6);
+}
+
/* Main Navigation Container */
.nav-container {
display: flex;
align-items: center;
justify-content: space-between;
- height: 70px;
+ height: 72px;
width: 100%;
- max-width: 1380px;
+ max-width: 1400px;
margin: 0 auto;
- padding: 0 18px;
+ padding: 0 24px;
box-sizing: border-box;
- gap: 16px;
+ gap: 20px;
}
/* Brand Logo */
.brand {
display: flex;
align-items: center;
- gap: 10px;
+ gap: 12px;
flex-shrink: 0;
text-decoration: none;
}
.brand-icon {
- width: 38px;
- height: 38px;
+ width: 40px;
+ height: 40px;
background: var(--grad-gold);
border-radius: var(--radius-sm);
display: flex;
align-items: center;
justify-content: center;
color: var(--primary-950);
- font-size: 18px;
+ font-size: 19px;
font-weight: 900;
box-shadow: var(--shadow-gold);
flex-shrink: 0;
@@ -240,7 +270,7 @@ button, input, select, textarea {
.brand-name {
font-family: var(--font-heading);
- font-size: 1.05rem;
+ font-size: 1.08rem;
font-weight: 700;
color: var(--white);
line-height: 1.15;
@@ -256,24 +286,26 @@ button, input, select, textarea {
margin-top: 2px;
}
-/* Nav Links */
+/* Nav Links - Desktop */
.nav-links {
display: flex;
align-items: center;
justify-content: center;
- gap: 16px;
+ gap: 22px;
margin: 0;
padding: 0;
- flex-shrink: 1;
+ flex-shrink: 0;
}
.nav-links a {
- font-size: 0.84rem;
+ font-size: 0.88rem;
font-weight: 600;
- color: var(--slate-200);
+ color: #cbd5e1;
white-space: nowrap;
position: relative;
- padding: 6px 2px;
+ padding: 8px 4px;
+ flex-shrink: 0;
+ text-decoration: none;
transition: color 0.2s ease;
}
@@ -298,11 +330,15 @@ button, input, select, textarea {
width: 100%;
}
+.mobile-drawer-footer {
+ display: none !important;
+}
+
/* Nav Actions */
.nav-actions {
display: flex;
align-items: center;
- gap: 10px;
+ gap: 14px;
flex-shrink: 0;
margin-left: auto;
}
@@ -310,7 +346,7 @@ button, input, select, textarea {
/* Bilingual Language Switcher */
.lang-switch {
display: inline-flex;
- background: rgba(255, 255, 255, 0.1);
+ background: rgba(255, 255, 255, 0.08);
border: 1px solid rgba(212, 175, 55, 0.35);
border-radius: var(--radius-full);
padding: 2px;
@@ -319,12 +355,13 @@ button, input, select, textarea {
}
.lang-btn {
- padding: 4px 9px;
+ padding: 5px 10px;
border-radius: var(--radius-full);
font-size: 0.74rem;
font-weight: 700;
color: var(--slate-200);
background: transparent;
+ border: none;
cursor: pointer;
transition: var(--transition);
display: flex;
@@ -340,15 +377,23 @@ button, input, select, textarea {
}
.nav-cta-btn {
- padding: 8px 16px;
- font-size: 0.82rem;
+ padding: 9px 18px;
+ font-size: 0.84rem;
font-weight: 700;
white-space: nowrap;
flex-shrink: 0;
+ border-radius: var(--radius-full);
}
-.mobile-drawer-cta {
+.mobile-toggle {
display: none;
+ background: none;
+ border: none;
+ color: var(--white);
+ font-size: 26px;
+ cursor: pointer;
+ padding: 4px 6px;
+ line-height: 1;
}
.modal-btn-row {
@@ -2380,18 +2425,18 @@ button, input, select, textarea {
========================================================================== */
/* --------------------------------------------------------------------------
- Desktop & Tablet Large (max-width: 1180px)
+ Tablet & Mobile Navigation Drawer (max-width: 1100px)
-------------------------------------------------------------------------- */
-@media (max-width: 1180px) {
+@media (max-width: 1100px) {
.nav-links {
position: fixed;
- top: 96px;
+ top: 104px;
left: -100%;
width: 100%;
- height: calc(100vh - 96px);
+ height: calc(100vh - 104px);
background: rgba(6, 13, 31, 0.98);
- backdrop-filter: blur(20px);
- -webkit-backdrop-filter: blur(20px);
+ backdrop-filter: blur(24px);
+ -webkit-backdrop-filter: blur(24px);
flex-direction: column;
align-items: stretch;
justify-content: flex-start;
@@ -2430,9 +2475,13 @@ button, input, select, textarea {
display: none;
}
- .mobile-drawer-cta {
- display: flex !important;
- margin-top: 14px;
+ .mobile-drawer-footer {
+ display: block !important;
+ margin-top: 16px;
+ width: 100%;
+ }
+
+ .mobile-drawer-footer .btn {
width: 100%;
justify-content: center;
padding: 14px 20px;
@@ -2538,9 +2587,21 @@ button, input, select, textarea {
.emergency-container {
gap: 6px;
+ white-space: normal;
+ flex-wrap: wrap;
+ line-height: 1.3;
+ }
+
+ .emergency-divider {
+ display: none;
}
/* Navigation Bar */
+ .nav-links {
+ top: 98px;
+ height: calc(100vh - 98px);
+ }
+
.nav-container {
height: 64px;
padding: 0 14px;
diff --git a/index.html b/index.html
index b1e3b16..3f4cda4 100644
--- a/index.html
+++ b/index.html
@@ -160,54 +160,56 @@
Skip to main content
+
diff --git a/js/translations.js b/js/translations.js
index 2c1f6c7..5cadd90 100644
--- a/js/translations.js
+++ b/js/translations.js
@@ -10,12 +10,18 @@ const translations = {
"nav.rebuilding": "Rebuilding Fund",
"nav.relief": "Rebuilding Fund",
"nav.seminary": "Seminary",
+ "nav.faq": "FAQ",
"nav.ministries": "Ministries",
"nav.location": "Location",
"nav.give": "Partner",
"nav.contact": "Contact",
"nav.relief_cta": "Earthquake Relief",
+ // Emergency Top Bar
+ "emergency.badge": "URGENT RELIEF",
+ "emergency.text": "Caracas Earthquake Initiative: Urgent Sanctuary & Seminary Rebuilding",
+ "emergency.cta": "Give Relief →",
+
// Hero Section
"hero.eyebrow": "URGENT RELIEF & REBUILDING INITIATIVE • CARACAS, VENEZUELA",
"hero.title": "Rebuilding Hope, Preaching Christ in Venezuela",
@@ -359,12 +365,18 @@ const translations = {
"nav.rebuilding": "Reconstrucción",
"nav.relief": "Fondo de Reconstrucción",
"nav.seminary": "Seminario",
+ "nav.faq": "Preguntas",
"nav.ministries": "Ministerios",
"nav.location": "Ubicación",
"nav.give": "Ofrendar",
"nav.contact": "Contacto",
"nav.relief_cta": "Fondo Terremoto",
+ // Emergency Top Bar
+ "emergency.badge": "AUXILIO URGENTE",
+ "emergency.text": "Iniciativa por Terremotos en Caracas: Reconstrucción de Templo y Seminario",
+ "emergency.cta": "Apoyar Aquí →",
+
// Hero Section
"hero.eyebrow": "INICIATIVA DE EMERGENCIA Y RECONSTRUCCIÓN • CARACAS, VENEZUELA",
"hero.title": "Reconstruyendo Esperanza, Predicando a Cristo en Venezuela",