From 2c729f516de22ff15d04c678a48b539f359c7dd1 Mon Sep 17 00:00:00 2001 From: Brian Smith Date: Wed, 2 Sep 2026 13:53:23 -0700 Subject: [PATCH] fix: compact header and set 1180px responsive breakpoint --- css/styles.css | 50 ++++++++++++++++++++++++++++---------------------- index.html | 2 +- 2 files changed, 29 insertions(+), 23 deletions(-) diff --git a/css/styles.css b/css/styles.css index 56ba5e5..4431fac 100644 --- a/css/styles.css +++ b/css/styles.css @@ -186,32 +186,34 @@ button, input, select, textarea { display: flex; align-items: center; justify-content: space-between; - height: 72px; - max-width: 1400px; + height: 70px; + width: 100%; + max-width: 1380px; margin: 0 auto; - padding: 0 24px; - gap: 20px; + padding: 0 18px; + box-sizing: border-box; + gap: 16px; } /* Brand Logo */ .brand { display: flex; align-items: center; - gap: 12px; + gap: 10px; flex-shrink: 0; text-decoration: none; } .brand-icon { - width: 42px; - height: 42px; + width: 38px; + height: 38px; background: var(--grad-gold); border-radius: var(--radius-sm); display: flex; align-items: center; justify-content: center; color: var(--primary-950); - font-size: 20px; + font-size: 18px; font-weight: 900; box-shadow: var(--shadow-gold); flex-shrink: 0; @@ -225,7 +227,7 @@ button, input, select, textarea { .brand-name { font-family: var(--font-heading); - font-size: 1.12rem; + font-size: 1.05rem; font-weight: 700; color: var(--white); line-height: 1.15; @@ -233,10 +235,10 @@ button, input, select, textarea { } .brand-sub { - font-size: 0.72rem; + font-size: 0.68rem; color: var(--gold-300); text-transform: uppercase; - letter-spacing: 0.06em; + letter-spacing: 0.05em; white-space: nowrap; margin-top: 2px; } @@ -246,13 +248,14 @@ button, input, select, textarea { display: flex; align-items: center; justify-content: center; - gap: 20px; + gap: 16px; margin: 0; padding: 0; + flex-shrink: 1; } .nav-links a { - font-size: 0.88rem; + font-size: 0.84rem; font-weight: 600; color: var(--slate-200); white-space: nowrap; @@ -286,8 +289,9 @@ button, input, select, textarea { .nav-actions { display: flex; align-items: center; - gap: 12px; + gap: 10px; flex-shrink: 0; + margin-left: auto; } /* Bilingual Language Switcher */ @@ -296,15 +300,15 @@ button, input, select, textarea { background: rgba(255, 255, 255, 0.1); border: 1px solid rgba(212, 175, 55, 0.35); border-radius: var(--radius-full); - padding: 3px; + padding: 2px; gap: 2px; flex-shrink: 0; } .lang-btn { - padding: 5px 11px; + padding: 4px 9px; border-radius: var(--radius-full); - font-size: 0.76rem; + font-size: 0.74rem; font-weight: 700; color: var(--slate-200); background: transparent; @@ -323,13 +327,14 @@ button, input, select, textarea { } .nav-cta-btn { - padding: 9px 18px; - font-size: 0.86rem; + padding: 8px 16px; + font-size: 0.82rem; font-weight: 700; white-space: nowrap; flex-shrink: 0; } + /* Buttons */ .btn { display: inline-flex; @@ -1352,13 +1357,13 @@ button, input, select, textarea { } } -@media (max-width: 1024px) { +@media (max-width: 1180px) { .nav-links { position: fixed; - top: 108px; + top: 106px; left: -100%; width: 100%; - height: calc(100vh - 108px); + height: calc(100vh - 106px); background: var(--primary-950); flex-direction: column; padding: 36px 24px; @@ -1367,6 +1372,7 @@ button, input, select, textarea { border-top: 1px solid rgba(255, 255, 255, 0.1); } + .nav-links.open { left: 0; } diff --git a/index.html b/index.html index ece9c1e..0cffc8f 100644 --- a/index.html +++ b/index.html @@ -43,12 +43,12 @@ The Need Pastor VĂ­ctor The Plan - Rebuilding Fund Seminary Location Contact +