:root{
--blue:#0d47a1;
--blue-2:#1565d8;
--blue-dark:#08264d;
--teal:#00a884;
--teal-dark:#087562;
--gold:#f6c445;
--gold-2:#ffe08a;
--navy:#10213f;
--charcoal:#253245;
--muted:#667085;
--line:rgba(13,71,161,.12);
--soft-blue:#eaf4ff;
--soft-green:#ecfff8;
--soft-gold:#fff7df;
--white:#fff;
--glass:rgba(255,255,255,.82);
--shadow-sm:0 10px 24px rgba(10,36,83,.08);
--shadow:0 20px 55px rgba(10,36,83,.13);
--shadow-lg:0 28px 80px rgba(8,38,77,.22);
--radius:26px;
--radius-md:20px;
--radius-sm:14px;
--container:1180px;
}
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth;text-size-adjust:100%;-webkit-text-size-adjust:100%}
body{
font-family:Inter,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
color:var(--charcoal);
line-height:1.68;
overflow-x:hidden;
background:
radial-gradient(circle at 10% 4%,rgba(21,101,216,.13),transparent 32rem),
radial-gradient(circle at 96% 16%,rgba(0,168,132,.14),transparent 28rem),
radial-gradient(circle at 40% 96%,rgba(246,196,69,.16),transparent 25rem),
linear-gradient(180deg,#f4faff 0%,#ffffff 43%,#f8fffb 100%);
}
a{text-decoration:none;color:inherit}
img{max-width:100%;display:block}
button,input,textarea{font:inherit}
.container{width:min(var(--container),calc(100% - 40px));margin-inline:auto}
.section-pad{padding:88px 0;position:relative}
.section-pad-sm{padding:66px 0;position:relative}
.center{align-items:center}
.soft-bg{background:linear-gradient(135deg,rgba(234,244,255,.84),rgba(236,255,248,.9));position:relative;overflow:hidden}
.soft-bg:before,.section-pad:before{content:"";position:absolute;pointer-events:none;border-radius:999px;filter:blur(.2px)}
.soft-bg:before{width:280px;height:280px;right:-100px;top:34px;background:rgba(246,196,69,.14)}
.section-pad > .container{position:relative;z-index:1}
.eyebrow{display:inline-flex;align-items:center;gap:8px;color:var(--gold);text-transform:uppercase;letter-spacing:.14em;font-size:.78rem;font-weight:900;margin-bottom:12px}
.eyebrow:before{content:"";width:26px;height:3px;border-radius:999px;background:currentColor}
/* Header */
.site-header{position:sticky;top:0;z-index:1000;background:rgba(255,255,255,.82);backdrop-filter:blur(18px);box-shadow:0 10px 30px rgba(8,38,77,.08);border-bottom:1px solid rgba(255,255,255,.65);transition:.25s ease}
.site-header.scrolled{background:rgba(255,255,255,.94);box-shadow:0 18px 45px rgba(8,38,77,.14)}
.navbar{display:flex;align-items:center;justify-content:space-between;gap:18px;min-height:82px}
.brand{display:flex;align-items:center;gap:13px;color:var(--blue-dark);min-width:max-content}
.brand img{width:58px;height:58px;border-radius:18px;filter:drop-shadow(0 10px 18px rgba(13,71,161,.16))}
.brand strong{display:block;font-size:1.08rem;letter-spacing:-.02em;line-height:1.05}
.brand small{display:block;color:var(--teal-dark);font-size:.78rem;font-weight:800;margin-top:3px}
.nav-menu{display:flex;align-items:center;justify-content:flex-end;gap:3px;flex-wrap:wrap}
.nav-link{padding:9px 10px;border-radius:999px;font-size:.87rem;font-weight:800;color:#27405f;transition:.22s ease;white-space:nowrap}
.nav-link:hover,.nav-link.active{background:linear-gradient(135deg,var(--blue-2),var(--teal));color:white;box-shadow:0 10px 22px rgba(21,101,216,.24)}
.menu-toggle{display:none;border:0;background:linear-gradient(135deg,var(--blue-2),var(--teal));width:46px;height:46px;border-radius:15px;align-items:center;justify-content:center;flex-direction:column;gap:5px;cursor:pointer;box-shadow:0 14px 24px rgba(21,101,216,.22)}
.menu-toggle span{width:22px;height:2px;background:white;border-radius:999px;transition:.25s ease}
.menu-toggle.open span:nth-child(1){transform:translateY(7px) rotate(45deg)}
.menu-toggle.open span:nth-child(2){opacity:0}
.menu-toggle.open span:nth-child(3){transform:translateY(-7px) rotate(-45deg)}
/* Hero */
.hero{position:relative;min-height:720px;background:url('../images/hero-bg.jpg') center/cover no-repeat;color:white;display:grid;align-items:center;overflow:hidden;isolation:isolate}
.hero-overlay{position:absolute;inset:0;background:linear-gradient(110deg,rgba(7,32,70,.93) 0%,rgba(13,71,161,.84) 47%,rgba(0,168,132,.68) 100%);z-index:0}
.hero:before{content:"";position:absolute;inset:0;background:radial-gradient(circle at 80% 18%,rgba(246,196,69,.34),transparent 15rem),radial-gradient(circle at 18% 82%,rgba(255,255,255,.13),transparent 18rem);z-index:1}
.hero:after{content:"";position:absolute;right:-130px;bottom:-150px;width:520px;height:520px;border-radius:50%;background:rgba(255,255,255,.13);border:1px solid rgba(255,255,255,.18);z-index:1}
.hero-content{position:relative;z-index:2;max-width:840px;padding:70px 0}
.hero h1,.page-hero h1{font-size:clamp(2.45rem,6vw,5.2rem);line-height:.98;margin-bottom:20px;letter-spacing:-.06em;text-wrap:balance}
.hero p,.page-hero p{font-size:clamp(1rem,2.1vw,1.24rem);max-width:780px;color:rgba(255,255,255,.9)}
.hero-actions{display:flex;gap:14px;flex-wrap:wrap;margin-top:32px}
.btn{display:inline-flex;align-items:center;justify-content:center;border:0;border-radius:999px;padding:13px 22px;font-weight:900;transition:.25s ease;cursor:pointer;gap:8px;line-height:1.1}
.btn-primary{background:linear-gradient(135deg,var(--gold),var(--gold-2));color:#17233b;box-shadow:0 16px 34px rgba(246,196,69,.35)}
.btn-outline{border:1px solid rgba(255,255,255,.58);color:white;background:rgba(255,255,255,.11);backdrop-filter:blur(8px)}
.btn-soft{background:rgba(255,255,255,.17);color:white;border:1px solid rgba(255,255,255,.22)}
.btn-small{padding:10px 16px;font-size:.9rem}
.btn:hover{transform:translateY(-3px);filter:saturate(1.05)}
.hero-card{position:absolute;right:7%;bottom:66px;z-index:3;background:rgba(255,255,255,.92);color:var(--navy);padding:24px;border-radius:var(--radius);box-shadow:var(--shadow-lg);width:min(330px,calc(100% - 40px));border:1px solid rgba(255,255,255,.75);backdrop-filter:blur(18px)}
.hero-card:before{content:"24/7";position:absolute;top:-14px;right:20px;background:linear-gradient(135deg,var(--gold),var(--gold-2));color:#1f2a44;border-radius:999px;padding:6px 12px;font-weight:900;font-size:.8rem;box-shadow:var(--shadow-sm)}
.hero-card strong,.hero-card span{display:block}.hero-card strong{color:var(--blue-dark)}.hero-card span{font-size:1.68rem;color:var(--blue-2);font-weight:900;line-height:1.1;margin:8px 0}.hero-card small{color:var(--muted)}
/* Sections */
.gradient-band{padding:34px 0;background:linear-gradient(90deg,var(--blue-dark),var(--blue-2),var(--teal));position:relative;overflow:hidden}
.gradient-band:after{content:"";position:absolute;inset:auto -10% -90px auto;width:360px;height:180px;background:rgba(255,255,255,.14);border-radius:360px 360px 0 0}
.stats-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:16px;position:relative;z-index:1}
.stats-grid div{background:rgba(255,255,255,.13);border:1px solid rgba(255,255,255,.2);padding:20px;border-radius:20px;color:white;box-shadow:inset 0 1px 0 rgba(255,255,255,.16)}
.stats-grid strong{display:block;font-size:1.06rem;letter-spacing:-.01em}.stats-grid span{color:#e9f6ff;font-size:.9rem}
.section-heading{text-align:center;max-width:760px;margin:0 auto 42px}.section-heading h2,.split-layout h2,.pledge h2{font-size:clamp(1.8rem,3.2vw,2.75rem);line-height:1.1;color:var(--blue-dark);letter-spacing:-.045em;margin-bottom:12px;text-wrap:balance}.section-heading p{color:var(--muted)}
.card-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:22px}.card-grid.three{grid-template-columns:repeat(3,1fr)}.card-grid.two{grid-template-columns:repeat(2,1fr)}
.view-all{text-align:center;margin-top:32px}
.info-card,.official-card,.contact-card,.contact-form,.pledge,.download-card{background:rgba(255,255,255,.9);border:1px solid rgba(13,71,161,.1);border-radius:var(--radius);padding:27px;box-shadow:var(--shadow-sm);transition:transform .25s ease,box-shadow .25s ease,border-color .25s ease;position:relative;overflow:hidden}
.info-card:before,.official-card:before,.download-card:before,.contact-card:before,.pledge:before{content:"";position:absolute;inset:0 0 auto 0;height:4px;background:linear-gradient(90deg,var(--blue-2),var(--teal),var(--gold));opacity:.95}
.info-card:hover,.image-card:hover,.official-card:hover,.download-card:hover,.profile-item:hover,.doc-row:hover{transform:translateY(-7px);box-shadow:var(--shadow);border-color:rgba(21,101,216,.18)}
.icon{font-size:2.05rem;display:inline-grid;place-items:center;margin-bottom:14px;width:52px;height:52px;border-radius:17px;background:linear-gradient(135deg,var(--soft-blue),var(--soft-green));box-shadow:inset 0 0 0 1px rgba(13,71,161,.08)}
.info-card h3,.image-card h3,.official-card h3,.download-card h3{color:var(--blue-dark);line-height:1.18;margin-bottom:8px;letter-spacing:-.02em}.info-card p,.image-card p,.official-card p,.download-card p{color:var(--muted)}
.split-layout{display:grid;grid-template-columns:1fr 1.05fr;gap:44px;align-items:start}.mini-list{display:grid;gap:16px}.mini-list article{background:white;padding:23px;border-left:5px solid var(--teal);border-radius:20px;box-shadow:var(--shadow-sm);transition:.22s ease}.mini-list article:hover{transform:translateX(4px);box-shadow:var(--shadow)}.mini-list span,.date{color:var(--teal-dark);font-weight:900;font-size:.86rem}.text-link{color:var(--blue-2);font-weight:900;display:inline-flex;margin-top:16px}.text-link:hover{color:var(--teal-dark)}
.image-card{background:white;border-radius:var(--radius);overflow:hidden;box-shadow:var(--shadow-sm);transition:.25s ease;border:1px solid rgba(13,71,161,.09)}.image-card img{height:220px;width:100%;object-fit:cover;transition:.5s ease;border-radius:10px 10px 12px 12px}.image-card:hover img{transform:scale(1.06)}.image-card div{padding:23px}.status{display:inline-flex;padding:6px 11px;border-radius:999px;font-size:.75rem;font-weight:900;margin-bottom:11px}.ongoing{background:#e6f1ff;color:var(--blue-2)}.completed{background:#e2fff5;color:var(--teal-dark)}.upcoming{background:#fff3c4;color:#8b6400}
.official-strip{background:linear-gradient(135deg,#eaf4ff 0%,#f1fff8 52%,#fff6dc 100%);position:relative;overflow:hidden}.official-strip:before{content:"";position:absolute;left:-90px;bottom:-110px;width:320px;height:320px;border-radius:50%;background:rgba(21,101,216,.1)}.official-mini{display:flex;gap:22px;align-items:center;background:rgba(255,255,255,.92);border:1px solid rgba(255,255,255,.85);border-radius:var(--radius);padding:24px;box-shadow:var(--shadow)}.official-mini img{width:154px;height:154px;border-radius:26px;object-fit:cover}.official-mini strong{display:block;font-size:1.35rem;color:var(--blue-dark);letter-spacing:-.03em}.official-mini span{color:var(--teal-dark);font-weight:900}
/* Page heroes */
.page-hero{background:linear-gradient(135deg,var(--blue-dark) 0%,var(--blue-2) 58%,var(--teal) 100%);color:white;position:relative;overflow:hidden;isolation:isolate}.page-hero:before{content:"";position:absolute;inset:0;background:radial-gradient(circle at 85% 30%,rgba(246,196,69,.3),transparent 16rem),radial-gradient(circle at 12% 90%,rgba(255,255,255,.13),transparent 18rem)}.page-hero:after{content:"";position:absolute;right:5%;top:18%;width:260px;height:260px;border-radius:50%;background:rgba(255,255,255,.1);border:1px solid rgba(255,255,255,.14)}.page-hero .container{position:relative;z-index:1}.page-hero .eyebrow{color:var(--gold-2)}
.rounded-img{border-radius:var(--radius);box-shadow:var(--shadow);min-height:340px;object-fit:cover;border:7px solid rgba(255,255,255,.82)}
.profile-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:18px}.profile-item{background:white;border-radius:20px;padding:23px;box-shadow:var(--shadow-sm);transition:.25s ease;border:1px solid rgba(13,71,161,.08)}.profile-item strong{display:block;color:var(--blue-dark);font-size:1.05rem}.profile-item span{color:var(--muted)}
.gradient-panel{background:linear-gradient(135deg,var(--blue-dark),var(--blue-2),var(--teal));color:white;position:relative;overflow:hidden}.gradient-panel:before{content:"";position:absolute;right:-80px;top:-80px;width:300px;height:300px;border-radius:50%;background:rgba(246,196,69,.18)}.gradient-panel h2{color:white}.gradient-panel p{color:rgba(255,255,255,.9)}
.map-placeholder,.map-embed{min-height:320px;background:rgba(255,255,255,.16);border:1px solid rgba(255,255,255,.26);border-radius:var(--radius);display:grid;place-items:center;text-align:center;color:white;padding:28px;box-shadow:0 20px 50px rgba(0,0,0,.08)}.map-placeholder small{color:#eaffff}.map-embed{padding:0;overflow:hidden;background:white}.map-embed iframe{width:100%;height:420px;border:0}
/* Officials */
.officials-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:22px}.official-card{text-align:center}.official-card img{width:150px;height:150px;border-radius:50%;object-fit:cover;margin:0 auto 16px;border:7px solid #e8f3ff;box-shadow:0 12px 22px rgba(13,71,161,.14)}.official-card span{display:block;color:var(--teal-dark);font-weight:900;margin-bottom:8px}.official-card p{font-size:.94rem}
/* Accordions */
.accordion{display:grid;gap:15px}.accordion-item{background:white;border-radius:20px;box-shadow:var(--shadow-sm);overflow:hidden;border:1px solid rgba(13,71,161,.1)}.accordion-trigger{width:100%;border:0;background:linear-gradient(90deg,#fff,#f6fbff);color:var(--blue-dark);padding:21px 24px;display:flex;justify-content:space-between;align-items:center;font-weight:900;font-size:1rem;cursor:pointer;text-align:left}.accordion-trigger b{font-size:1.45rem;color:var(--teal-dark);line-height:1}.accordion-content{max-height:0;overflow:hidden;transition:max-height .32s ease}.accordion-content.open{max-height:650px}.accordion-content p{padding:0 24px 16px;color:var(--muted)}.service-meta{display:grid;grid-template-columns:repeat(2,1fr);gap:12px;padding:0 24px 24px}.service-meta span{background:linear-gradient(135deg,#f4f9ff,#f5fffb);padding:14px;border-radius:15px;color:#3d4a5c;border:1px solid rgba(13,71,161,.07)}
/* Tables / documents */
.table-wrap{overflow-x:auto;background:white;border-radius:var(--radius);box-shadow:var(--shadow-sm);border:1px solid rgba(13,71,161,.09)}table{width:100%;border-collapse:collapse;min-width:760px}th{background:linear-gradient(135deg,var(--blue),var(--blue-2));color:white;text-align:left}th,td{padding:17px;border-bottom:1px solid #e7eef7}td{color:#45556a}tr:hover td{background:#f7fbff}
.document-list{display:grid;gap:15px}.doc-row{display:flex;align-items:center;justify-content:space-between;gap:18px;background:rgba(255,255,255,.92);border-radius:20px;padding:21px 23px;box-shadow:var(--shadow-sm);border:1px solid rgba(13,71,161,.09);transition:.25s ease}.doc-row strong{display:block;color:var(--blue-dark);font-size:1.04rem}.doc-row span{display:block;color:var(--muted);font-size:.94rem}.downloads-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:18px}.download-card{display:grid;grid-template-columns:auto 1fr auto;align-items:center;gap:16px}.download-card .icon{margin-bottom:0}
/* Contact */
.contact-grid{display:grid;grid-template-columns:.9fr 1.1fr;gap:28px}.contact-card p{margin-bottom:10px}.emergency-box{margin-top:20px;padding:22px;border-radius:20px;background:linear-gradient(135deg,#fff3c4,#fff8df);border:1px solid rgba(246,196,69,.34);color:#5f4200}.contact-form{display:grid;gap:14px}.form-row{display:grid;grid-template-columns:1fr 1fr;gap:14px}.contact-form label{display:grid;gap:7px;font-weight:900;color:var(--blue-dark)}.contact-form input,.contact-form textarea{width:100%;border:1px solid rgba(13,71,161,.16);border-radius:15px;padding:13px 14px;background:#fbfdff;color:var(--charcoal);outline:none;transition:.2s ease}.contact-form input:focus,.contact-form textarea:focus{border-color:var(--teal);box-shadow:0 0 0 4px rgba(0,168,132,.13);background:white}.contact-form textarea{resize:vertical;min-height:140px}
/* Footer */
.site-footer{background:linear-gradient(135deg,#071f3f 0%,#0b356f 56%,#075f55 100%);color:#dcebff;position:relative;overflow:hidden}.site-footer:before{content:"";position:absolute;right:-120px;top:-160px;width:360px;height:360px;border-radius:50%;background:rgba(246,196,69,.15)}.footer-grid{display:grid;grid-template-columns:1.2fr 1fr .8fr .9fr;gap:34px;padding:58px 0;position:relative;z-index:1}.footer-brand{display:flex;align-items:center;gap:12px;margin-bottom:15px;color:white}.footer-brand img{width:54px;height:54px;border-radius:16px}.site-footer h3{color:white;margin-bottom:12px;font-size:1.05rem}.site-footer p,.site-footer a{color:#dcebff}.footer-links{list-style:none;display:grid;gap:8px}.footer-links a:hover,.social-link:hover{color:var(--gold-2)}.social-link{display:inline-flex;margin-top:10px;font-weight:900}.footer-bottom{text-align:center;padding:18px 20px;border-top:1px solid rgba(255,255,255,.12);color:#c7dcff;font-size:.92rem;position:relative;z-index:1}
/* Motion */
.reveal{opacity:0;transform:translateY(24px);transition:opacity .65s ease,transform .65s ease}.reveal.visible{opacity:1;transform:none}.delay-1{transition-delay:.12s}.delay-2{transition-delay:.22s}.delay-3{transition-delay:.32s}
.back-to-top{position:fixed;right:22px;bottom:22px;width:48px;height:48px;border:0;border-radius:16px;background:linear-gradient(135deg,var(--blue-2),var(--teal));color:white;font-size:1.25rem;font-weight:900;box-shadow:0 15px 35px rgba(13,71,161,.28);opacity:0;transform:translateY(18px);pointer-events:none;transition:.25s ease;z-index:900}.back-to-top.show{opacity:1;transform:none;pointer-events:auto}
@media (prefers-reduced-motion:reduce){*,*:before,*:after{scroll-behavior:auto!important;transition:none!important;animation:none!important}.reveal{opacity:1;transform:none}}
/* Responsive */
@media (max-width:1180px){.menu-toggle{display:flex}.nav-menu{position:absolute;left:20px;right:20px;top:calc(100% + 8px);display:grid;grid-template-columns:repeat(2,1fr);gap:8px;background:rgba(255,255,255,.96);border:1px solid rgba(13,71,161,.1);border-radius:22px;padding:16px;box-shadow:var(--shadow);opacity:0;transform:translateY(-10px);pointer-events:none;transition:.22s ease}.nav-menu.open{opacity:1;transform:none;pointer-events:auto}.nav-link{padding:12px 14px;border-radius:14px}.hero-card{right:40px}.card-grid,.officials-grid{grid-template-columns:repeat(2,1fr)}.profile-grid{grid-template-columns:repeat(2,1fr)}.footer-grid{grid-template-columns:repeat(2,1fr)}}
@media (max-width:900px){.hero{min-height:auto}.hero-content{padding:96px 0 150px}.hero-card{position:relative;right:auto;bottom:auto;margin:-108px auto 48px}.stats-grid{grid-template-columns:repeat(2,1fr)}.split-layout,.contact-grid{grid-template-columns:1fr}.card-grid.three,.card-grid.two{grid-template-columns:1fr 1fr}.page-hero h1,.hero h1{letter-spacing:-.045em}.section-pad{padding:70px 0}.section-pad-sm{padding:54px 0}.downloads-grid{grid-template-columns:1fr}.rounded-img{min-height:260px}.map-embed iframe{height:340px}}
@media (max-width:640px){.container{width:min(100% - 28px,var(--container))}.navbar{min-height:74px}.brand img{width:50px;height:50px}.brand strong{font-size:1rem}.nav-menu{grid-template-columns:1fr;left:14px;right:14px}.hero-content{padding:74px 0 136px}.hero h1{font-size:2.35rem}.hero p,.page-hero p{font-size:1rem}.hero-actions{display:grid;grid-template-columns:1fr;gap:11px}.btn{width:100%;padding:12px 18px}.section-pad{padding:58px 0}.section-pad-sm{padding:46px 0}.card-grid,.card-grid.three,.card-grid.two,.officials-grid,.stats-grid,.profile-grid,.service-meta{grid-template-columns:1fr}.image-card img{height:190px}.download-card{grid-template-columns:1fr;text-align:left}.doc-row{align-items:flex-start;flex-direction:column}.footer-grid{grid-template-columns:1fr;padding:46px 0}.official-mini{flex-direction:column;text-align:center}.official-mini img{width:132px;height:132px}.form-row{grid-template-columns:1fr}.page-hero:after{display:none}}
@media (max-width:420px){.brand small{display:none}.hero h1{font-size:2.05rem}.page-hero h1{font-size:2rem}.hero-card span{font-size:1.35rem}.info-card,.official-card,.contact-card,.contact-form,.pledge,.download-card{padding:21px}.accordion-trigger{padding:18px}.accordion-content p{padding-left:18px;padding-right:18px}.service-meta{padding-left:18px;padding-right:18px}}
/* Production header correction: keep desktop navigation clean, single-row, and balanced */
.site-header{overflow:visible}
.navbar.container{width:min(1360px,calc(100% - 40px));max-width:1360px}
.navbar{min-height:76px;gap:18px}
.brand{flex:0 0 auto;gap:12px}
.brand img{width:52px;height:52px;border-radius:16px}
.brand strong{font-size:1.02rem;white-space:nowrap}
.brand small{font-size:.74rem;white-space:nowrap}
.nav-menu{flex:1 1 auto;min-width:0;flex-wrap:nowrap;gap:4px;justify-content:flex-end}
.nav-link{font-size:.78rem;padding:9px 8px;line-height:1.15;white-space:nowrap}
.nav-link.active{box-shadow:0 10px 20px rgba(21,101,216,.2)}
@media (max-width:1200px){
.menu-toggle{display:flex}
.nav-menu{
position:absolute;
left:20px;
right:20px;
top:calc(100% + 8px);
display:grid;
grid-template-columns:repeat(2,1fr);
gap:8px;
background:rgba(255,255,255,.98);
border:1px solid rgba(13,71,161,.1);
border-radius:22px;
padding:16px;
box-shadow:var(--shadow);
opacity:0;
transform:translateY(-10px);
pointer-events:none;
transition:.22s ease;
flex:initial;
}
.nav-menu.open{opacity:1;transform:none;pointer-events:auto}
.nav-link{padding:12px 14px;border-radius:14px;font-size:.9rem}
}
@media (max-width:640px){
.navbar.container{width:min(100% - 28px,1360px)}
.navbar{min-height:72px}
}
/* 2026 LGU modernization refresh - visual-only enhancements */
:root{
--civic-navy:#061f3f;
--civic-blue:#155eef;
--civic-cyan:#09c6e8;
--civic-mint:#16b687;
--civic-gold:#f7c948;
--surface:#ffffff;
--surface-2:#f5f9ff;
--text-strong:#0b1f3a;
--text-soft:#5b6b83;
--modern-shadow:0 24px 70px rgba(6,31,63,.14);
--modern-shadow-soft:0 14px 36px rgba(6,31,63,.09);
}
body{
color:var(--text-strong);
background:
radial-gradient(circle at 4% 5%,rgba(21,94,239,.18),transparent 30rem),
radial-gradient(circle at 94% 9%,rgba(9,198,232,.16),transparent 28rem),
radial-gradient(circle at 50% 100%,rgba(22,182,135,.12),transparent 30rem),
linear-gradient(180deg,#f7fbff 0%,#ffffff 42%,#f5fff9 100%);
}
body:before{
content:"";
position:fixed;
inset:0;
pointer-events:none;
z-index:-1;
background-image:
linear-gradient(rgba(21,94,239,.045) 1px,transparent 1px),
linear-gradient(90deg,rgba(21,94,239,.045) 1px,transparent 1px);
background-size:44px 44px;
mask-image:linear-gradient(180deg,rgba(0,0,0,.9),rgba(0,0,0,.15),transparent 90%);
}
.site-header{
border-bottom:1px solid rgba(255,255,255,.42);
background:rgba(255,255,255,.76);
backdrop-filter:blur(22px);
-webkit-backdrop-filter:blur(22px);
box-shadow:0 12px 40px rgba(6,31,63,.07);
z-index:1000;
}
.site-header.scrolled{background:rgba(255,255,255,.92);box-shadow:0 18px 52px rgba(6,31,63,.12)}
.brand{padding:7px 9px;border-radius:20px;background:linear-gradient(135deg,rgba(255,255,255,.86),rgba(245,250,255,.62));border:1px solid rgba(21,94,239,.08)}
.brand img,.footer-brand img{box-shadow:0 12px 26px rgba(21,94,239,.18);background:white}
.brand strong{color:var(--civic-navy);letter-spacing:-.02em}.brand small{color:var(--text-soft)}
.nav-link{font-weight:800;color:#223956;border:1px solid transparent}.nav-link:hover{background:rgba(21,94,239,.08);color:var(--civic-blue);border-color:rgba(21,94,239,.08)}
.nav-link.active{background:linear-gradient(135deg,var(--civic-blue),var(--civic-mint));color:white;box-shadow:0 14px 28px rgba(21,94,239,.24)}
.hero,.page-hero{
isolation:isolate;
background:
linear-gradient(135deg,rgba(6,31,63,.88),rgba(21,94,239,.72) 47%,rgba(22,182,135,.64)),
url('../images/hero-bg.jpg') center/cover no-repeat;
}
.hero:before,.page-hero:before{
content:"";
position:absolute;
inset:0;
z-index:-1;
background:
radial-gradient(circle at 24% 24%,rgba(255,255,255,.18),transparent 18rem),
radial-gradient(circle at 74% 36%,rgba(247,201,72,.18),transparent 14rem),
linear-gradient(90deg,rgba(255,255,255,.08) 1px,transparent 1px),
linear-gradient(rgba(255,255,255,.08) 1px,transparent 1px);
background-size:auto,auto,58px 58px,58px 58px;
opacity:.76;
}
.hero-overlay{background:linear-gradient(90deg,rgba(6,31,63,.78),rgba(6,31,63,.36),rgba(6,31,63,.18))}
.hero h1,.page-hero h1{max-width:950px;letter-spacing:-.065em;text-wrap:balance;text-shadow:0 18px 44px rgba(0,0,0,.18)}
.hero p,.page-hero p{color:rgba(255,255,255,.9);max-width:760px}.eyebrow{letter-spacing:.13em;color:var(--civic-mint)}
.hero .eyebrow,.page-hero .eyebrow{color:#c8fff2;background:rgba(255,255,255,.13);border:1px solid rgba(255,255,255,.18);border-radius:999px;padding:8px 13px;display:inline-flex;margin-bottom:16px}
.btn{border-radius:999px;font-weight:900;box-shadow:var(--modern-shadow-soft);transform:translateZ(0)}
.btn:hover{transform:translateY(-3px)}
.btn-primary{background:linear-gradient(135deg,var(--civic-blue),var(--civic-mint));border:0}.btn-outline{border-color:rgba(255,255,255,.52);background:rgba(255,255,255,.1);backdrop-filter:blur(12px)}.btn-soft{background:rgba(255,255,255,.9);color:var(--civic-navy)}
.hero-card,.official-mini,.info-card,.image-card,.official-card,.profile-item,.pledge,.contact-card,.contact-form,.download-card,.doc-row,.accordion-item,.table-wrap{
border:1px solid rgba(21,94,239,.09);
background:linear-gradient(180deg,rgba(255,255,255,.96),rgba(255,255,255,.86));
box-shadow:var(--modern-shadow-soft);
backdrop-filter:blur(16px);
}
.hero-card{border-radius:28px;background:linear-gradient(155deg,rgba(255,255,255,.96),rgba(235,250,255,.92));overflow:hidden}.hero-card:before{content:"";position:absolute;inset:0 0 auto;height:5px;background:linear-gradient(90deg,var(--civic-blue),var(--civic-mint),var(--civic-gold))}.hero-card strong{color:var(--civic-navy)}.hero-card span{color:var(--civic-blue)}
.gradient-band{background:transparent}.stats-grid{margin-top:-2px}.stats-grid div{position:relative;overflow:hidden;border:1px solid rgba(255,255,255,.64);background:linear-gradient(145deg,rgba(255,255,255,.94),rgba(239,248,255,.86));box-shadow:var(--modern-shadow-soft)}.stats-grid div:after{content:"";position:absolute;right:-34px;bottom:-34px;width:92px;height:92px;border-radius:50%;background:linear-gradient(135deg,rgba(21,94,239,.11),rgba(22,182,135,.12))}
.section-heading h2,.split-layout h2{color:var(--civic-navy);letter-spacing:-.045em}.section-heading p,.split-layout p,.info-card p,.image-card p,.official-card p{color:var(--text-soft)}
.info-card{position:relative;overflow:hidden}.info-card:before,.official-card:before,.download-card:before{content:"";position:absolute;left:0;right:0;top:0;height:4px;background:linear-gradient(90deg,var(--civic-blue),var(--civic-mint))}.info-card:hover,.image-card:hover,.official-card:hover,.download-card:hover,.doc-row:hover{transform:translateY(-7px);box-shadow:var(--modern-shadow)}
.info-card .icon,.download-card .icon{display:grid;place-items:center;width:52px;height:52px;border-radius:18px;background:linear-gradient(135deg,rgba(21,94,239,.12),rgba(22,182,135,.15));font-size:1.45rem}
.soft-bg{background:linear-gradient(135deg,rgba(21,94,239,.06),rgba(22,182,135,.06));position:relative}.soft-bg:before{content:"";position:absolute;left:5%;top:8%;width:150px;height:150px;border-radius:50%;background:rgba(9,198,232,.09);filter:blur(8px)}
.mini-list article{border-left:4px solid var(--civic-mint);background:rgba(255,255,255,.88);box-shadow:var(--modern-shadow-soft)}
.image-card{overflow:hidden}.image-card img{transition:transform .5s ease,filter .5s ease}.image-card:hover img{transform:scale(1.055);filter:saturate(1.08) contrast(1.04)}
.status{border-radius:999px;font-weight:900}.status.ongoing{background:#e8f1ff;color:var(--civic-blue)}.status.completed{background:#e8fff6;color:#087562}.status.upcoming{background:#fff5d6;color:#8b6500}
.official-strip{background:linear-gradient(135deg,#f5faff,#f2fff9)}.official-mini{border-radius:30px}.official-mini img{border:8px solid white;box-shadow:0 20px 45px rgba(6,31,63,.18)}
.officials-grid{align-items:stretch}.official-card{position:relative;overflow:hidden;border-radius:28px}.official-card img{border:8px solid #fff;background:#eff6ff;box-shadow:0 18px 42px rgba(21,94,239,.16)}.official-card h3{color:var(--civic-navy);letter-spacing:-.025em}.official-card span{color:var(--civic-blue)}
.page-hero{padding:72px 0 72px;position:relative;overflow:hidden}.page-hero:after{opacity:.16}.page-hero .container{position:relative;z-index:1}.page-hero h1{font-size:clamp(2.35rem,6vw,4.9rem)}
.accordion-trigger{background:linear-gradient(90deg,#fff,#f3f9ff);color:var(--civic-navy)}.accordion-trigger b{display:grid;place-items:center;width:36px;height:36px;border-radius:50%;background:rgba(21,94,239,.1);color:var(--civic-blue)}.service-meta span{background:linear-gradient(135deg,#f8fbff,#f2fff9);border-color:rgba(21,94,239,.09)}
th{background:linear-gradient(135deg,var(--civic-navy),var(--civic-blue))}.doc-row,.download-card{position:relative;overflow:hidden}.btn-small{border-radius:999px}
.contact-form input,.contact-form textarea{background:white;border-color:rgba(21,94,239,.14)}.emergency-box{background:linear-gradient(135deg,#fff7df,#ecfff8);border-color:rgba(247,201,72,.38)}
.site-footer{background:radial-gradient(circle at 80% 0%,rgba(22,182,135,.24),transparent 28rem),linear-gradient(135deg,#041831,#082a55 52%,#063f4b);}.footer-bottom{background:rgba(0,0,0,.12)}
.back-to-top{border-radius:50%;background:linear-gradient(135deg,var(--civic-blue),var(--civic-mint))}
@media (max-width:1200px){.nav-menu{z-index:1200}.nav-link{white-space:normal}.site-header{overflow:visible}}
@media (max-width:900px){.page-hero{padding:62px 0 56px}.hero:before,.page-hero:before{background-size:auto,auto,46px 46px,46px 46px}.stats-grid{margin-top:0}}
@media (max-width:640px){body:before{background-size:34px 34px}.hero h1{font-size:2.55rem}.page-hero h1{font-size:2.35rem}.hero-card{max-width:calc(100% - 32px)}}
/* 2026-06-29 mobile balance + modern motion refresh
Reverted away from the Philippine flag color theme and restored the clean civic blue/teal identity. */
:root{
--mobile-safe-x:18px;
}
/* Soft ambient motion for a modern government/LGU feel without using flag colors */
.hero,
.page-hero,
.gradient-panel,
.soft-bg{
position:relative;
overflow:hidden;
}
.hero::selection,
.page-hero::selection{background:rgba(255,255,255,.25)}
.hero .container,
.page-hero .container{position:relative;z-index:2}
.hero:after,
.page-hero:after{
content:"";
position:absolute;
z-index:0;
width:420px;
height:420px;
right:-170px;
bottom:-180px;
border-radius:50%;
background:radial-gradient(circle,rgba(255,255,255,.18),rgba(255,255,255,.04) 60%,transparent 70%);
animation:floatOrb 12s ease-in-out infinite;
}
.page-hero:after{opacity:.75}
.hero .eyebrow,
.page-hero .eyebrow{
box-shadow:inset 0 1px 0 rgba(255,255,255,.22),0 14px 30px rgba(0,0,0,.08);
}
.info-card,
.official-card,
.profile-item,
.download-card,
.contact-card,
.contact-form,
.pledge,
.doc-row,
.accordion-item,
.image-card,
.table-wrap{
will-change:transform;
}
.info-card:after,
.official-card:after,
.download-card:after,
.contact-card:after{
content:"";
position:absolute;
width:120px;
height:120px;
right:-55px;
bottom:-65px;
border-radius:50%;
background:linear-gradient(135deg,rgba(21,94,239,.08),rgba(22,182,135,.10));
pointer-events:none;
transition:transform .35s ease,opacity .35s ease;
}
.info-card:hover:after,
.official-card:hover:after,
.download-card:hover:after,
.contact-card:hover:after{transform:scale(1.25);opacity:.9}
@keyframes floatOrb{
0%,100%{transform:translate3d(0,0,0) scale(1)}
50%{transform:translate3d(-18px,-24px,0) scale(1.05)}
}
@keyframes subtleGradientShift{
0%,100%{background-position:0% 50%}
50%{background-position:100% 50%}
}
.hero,
.page-hero{
background-size:cover,cover;
}
.btn-primary,
.menu-toggle,
.back-to-top{
background-size:160% 160%;
animation:subtleGradientShift 8s ease-in-out infinite;
}
/* Stronger mobile balance */
@media (max-width:768px){
.site-header{background:rgba(255,255,255,.9)}
.navbar.container{width:calc(100% - 24px)}
.navbar{min-height:68px;gap:10px}
.brand{
max-width:calc(100vw - 96px);
min-width:0;
padding:6px 10px 6px 7px;
gap:9px;
border-radius:18px;
}
.brand img{width:44px;height:44px;border-radius:14px;flex:0 0 auto}
.brand span{min-width:0;display:block}
.brand strong{
font-size:.96rem;
max-width:100%;
overflow:hidden;
text-overflow:ellipsis;
white-space:nowrap;
}
.brand small{font-size:.68rem;line-height:1.1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.menu-toggle{width:44px;height:44px;border-radius:15px;flex:0 0 44px}
.nav-menu{
left:12px;
right:12px;
top:calc(100% + 8px);
max-height:calc(100vh - 92px);
overflow:auto;
grid-template-columns:1fr;
padding:12px;
border-radius:20px;
}
.nav-link{font-size:.92rem;padding:12px 14px}
.hero{min-height:auto}
.hero-content{padding:70px 0 112px;max-width:100%}
.page-hero{padding:56px 0 48px;min-height:auto}
.hero h1,.page-hero h1{
font-size:clamp(2rem,10.5vw,2.75rem);
line-height:1.05;
letter-spacing:-.052em;
max-width:100%;
}
.hero p,.page-hero p{
font-size:1rem;
line-height:1.65;
max-width:100%;
}
.hero .eyebrow,.page-hero .eyebrow{
font-size:.72rem;
padding:7px 12px;
letter-spacing:.12em;
margin-bottom:14px;
}
.hero-actions{margin-top:26px}
.hero-card{margin:-80px auto 38px;max-width:calc(100% - 28px);padding:20px;border-radius:24px}
.section-pad{padding:54px 0}
.section-pad-sm{padding:44px 0}
.section-heading{margin-bottom:30px;text-align:left}
.section-heading h2,.split-layout h2,.pledge h2{font-size:clamp(1.75rem,8vw,2.25rem);line-height:1.12}
.card-grid,.card-grid.three,.card-grid.two,.officials-grid,.profile-grid,.stats-grid,.downloads-grid{gap:16px}
.info-card,.official-card,.contact-card,.contact-form,.pledge,.download-card,.profile-item,.doc-row{border-radius:22px;padding:22px}
.rounded-img{border-radius:24px;min-height:220px}
.split-layout{gap:24px}
.footer-grid{gap:24px}
}
@media (max-width:420px){
.navbar.container{width:calc(100% - 20px)}
.navbar{min-height:66px}
.brand{max-width:calc(100vw - 86px);border-radius:17px}
.brand img{width:40px;height:40px;border-radius:13px}
.brand strong{font-size:.92rem}
.menu-toggle{width:42px;height:42px;flex-basis:42px;border-radius:14px}
.page-hero{padding:50px 0 42px}
.hero-content{padding:62px 0 104px}
.hero h1,.page-hero h1{font-size:2rem;line-height:1.08}
.hero p,.page-hero p{font-size:.97rem;line-height:1.6}
.section-pad{padding:48px 0}
.info-card,.official-card,.contact-card,.contact-form,.pledge,.download-card,.profile-item,.doc-row{padding:20px}
}
@media (prefers-reduced-motion:reduce){
.hero:after,.page-hero:after,.btn-primary,.menu-toggle,.back-to-top{animation:none!important}
}
/* 2026-06-29 v2 mobile rebalance + richer motion/background polish */
@keyframes heroGridDrift{
0%,100%{transform:translate3d(0,0,0)}
50%{transform:translate3d(-8px,10px,0)}
}
@keyframes ambientBlob{
0%,100%{transform:translate3d(0,0,0) scale(1)}
50%{transform:translate3d(16px,-18px,0) scale(1.08)}
}
@keyframes iconLift{
0%,100%{transform:translateY(0)}
50%{transform:translateY(-5px)}
}
@keyframes shimmerSweep{
0%{transform:translateX(-120%)}
100%{transform:translateX(130%)}
}
main{position:relative;overflow:hidden}
main > section{position:relative;isolation:isolate}
main > section:not(.page-hero):not(.gradient-panel):not(.official-strip):not(.soft-bg){
background:linear-gradient(180deg,rgba(255,255,255,.92),rgba(247,251,255,.98));
}
main > section.section-pad:nth-of-type(odd):not(.page-hero):not(.gradient-panel):not(.official-strip):not(.soft-bg){
background:linear-gradient(180deg,rgba(247,251,255,.98),rgba(255,255,255,.94));
}
main > section:not(.page-hero)::before{
content:"";
position:absolute;
inset:auto auto 10% -54px;
width:170px;
height:170px;
border-radius:50%;
background:radial-gradient(circle,rgba(21,94,239,.08),transparent 68%);
filter:blur(4px);
pointer-events:none;
z-index:0;
}
main > section:not(.page-hero)::after{
content:"";
position:absolute;
inset:12% -46px auto auto;
width:160px;
height:160px;
border-radius:50%;
background:radial-gradient(circle,rgba(22,182,135,.08),transparent 68%);
filter:blur(6px);
pointer-events:none;
z-index:0;
}
main > section > .container{position:relative;z-index:1}
.page-hero{
padding:112px 0 74px;
overflow:hidden;
}
.page-hero:before{
animation:heroGridDrift 18s ease-in-out infinite;
}
.page-hero .container{
max-width:min(var(--container),calc(100% - 40px));
}
.page-hero .container:after{
content:"";
position:absolute;
left:-10%;
right:-10%;
bottom:-80px;
height:120px;
background:radial-gradient(70% 120% at 50% 0%,rgba(255,255,255,.16),transparent 70%);
pointer-events:none;
}
.page-hero h1{max-width:11ch}
.page-hero p{max-width:44rem}
.page-hero .eyebrow{backdrop-filter:blur(10px)}
.page-hero:after{
width:340px;
height:340px;
right:-120px;
bottom:-140px;
opacity:.62;
}
.soft-bg,
.gradient-panel,
.official-strip{
overflow:hidden;
}
.soft-bg:after,
.gradient-panel:after,
.official-strip:after{
content:"";
position:absolute;
width:260px;
height:260px;
border-radius:50%;
right:-110px;
bottom:-120px;
background:radial-gradient(circle,rgba(255,255,255,.18),rgba(255,255,255,0) 68%);
animation:ambientBlob 16s ease-in-out infinite;
pointer-events:none;
}
.info-card,
.official-card,
.download-card,
.profile-item,
.contact-card,
.contact-form,
.doc-row,
.accordion-item,
.image-card,
.official-mini,
.table-wrap{
overflow:hidden;
}
.info-card::after,
.official-card::after,
.download-card::after,
.profile-item::after,
.contact-card::after,
.doc-row::after,
.image-card::after{
content:"";
position:absolute;
top:0;
left:0;
width:42%;
height:100%;
background:linear-gradient(90deg,rgba(255,255,255,.3),rgba(255,255,255,0));
opacity:0;
pointer-events:none;
}
.info-card:hover::after,
.official-card:hover::after,
.download-card:hover::after,
.profile-item:hover::after,
.contact-card:hover::after,
.doc-row:hover::after,
.image-card:hover::after{
opacity:.8;
animation:shimmerSweep 1.15s ease;
}
.info-card .icon,
.download-card .icon,
.official-card img,
.official-mini img{
animation:iconLift 5.8s ease-in-out infinite;
}
.image-card:hover img,
.rounded-img:hover{
transform:scale(1.03);
}
.rounded-img{transition:transform .45s ease, box-shadow .45s ease}
.rounded-img:hover{box-shadow:0 26px 56px rgba(6,31,63,.18)}
.reveal-left,
.reveal-right,
.reveal-zoom{opacity:0;transition:opacity .7s ease,transform .7s ease}
.reveal-left{transform:translateX(-24px)}
.reveal-right{transform:translateX(24px)}
.reveal-zoom{transform:scale(.96)}
.reveal-left.visible,
.reveal-right.visible,
.reveal-zoom.visible{opacity:1;transform:none}
@media (max-width:768px){
body{
background:
radial-gradient(circle at 6% 4%,rgba(21,94,239,.16),transparent 22rem),
radial-gradient(circle at 92% 10%,rgba(9,198,232,.12),transparent 18rem),
linear-gradient(180deg,#f8fbff 0%,#ffffff 44%,#f5fff9 100%);
}
body:before{
background-size:28px 28px;
opacity:.72;
}
.page-hero{
padding:74px 0 42px;
min-height:auto;
}
.page-hero:before{
background:
radial-gradient(circle at 20% 18%,rgba(255,255,255,.14),transparent 13rem),
radial-gradient(circle at 80% 68%,rgba(247,201,72,.12),transparent 12rem),
linear-gradient(90deg,rgba(255,255,255,.07) 1px,transparent 1px),
linear-gradient(rgba(255,255,255,.07) 1px,transparent 1px);
background-size:auto,auto,38px 38px,38px 38px;
opacity:.86;
}
.page-hero:after{
width:220px;
height:220px;
right:-90px;
bottom:-88px;
opacity:.52;
}
.page-hero .container:after{
bottom:-56px;
height:90px;
}
.page-hero h1,
.hero h1{
max-width:9.6ch;
text-wrap:balance;
}
.page-hero p,
.hero p{
max-width:30ch;
font-size:.98rem;
line-height:1.72;
}
main > section:not(.page-hero)::before{
width:120px;
height:120px;
left:-40px;
bottom:6%;
}
main > section:not(.page-hero)::after{
width:110px;
height:110px;
right:-34px;
top:10%;
}
.split-layout > .reveal,
.split-layout > .reveal-left,
.split-layout > .reveal-right,
.split-layout > .reveal-zoom{
width:100%;
}
.section-heading,
.split-layout h2,
.pledge h2{
text-wrap:balance;
}
}
@media (max-width:480px){
.page-hero{padding:70px 0 38px}
.page-hero .container{width:min(100% - 20px,var(--container))}
.page-hero h1,
.hero h1{font-size:clamp(1.85rem,10.2vw,2.2rem);max-width:10ch}
.page-hero p,
.hero p{max-width:100%;font-size:.97rem;line-height:1.68}
.hero .eyebrow,
.page-hero .eyebrow{font-size:.69rem;gap:7px;padding:7px 11px}
.split-layout{gap:20px}
.rounded-img{min-height:200px}
.info-card,
.official-card,
.contact-card,
.contact-form,
.pledge,
.download-card,
.profile-item,
.doc-row,
.accordion-item{border-radius:20px}
}
@media (prefers-reduced-motion:reduce){
.page-hero:before,
.page-hero:after,
.soft-bg:after,
.gradient-panel:after,
.official-strip:after,
.info-card .icon,
.download-card .icon,
.official-card img,
.official-mini img{animation:none!important}
}
/* 2026-06-29 v3 vibrant visual refresh - brighter palette and more visible motion */
:root{
--civic-navy:#071d49;
--civic-blue:#2563ff;
--civic-cyan:#08c8ff;
--civic-mint:#12d6a6;
--civic-gold:#ffd25e;
--civic-violet:#6e6bff;
--text-strong:#081b3a;
--text-soft:#5a6e88;
}
@keyframes vividGradientFlow{
0%,100%{background-position:0% 50%}
50%{background-position:100% 50%}
}
@keyframes glowPulseStrong{
0%,100%{box-shadow:0 18px 44px rgba(37,99,255,.18)}
50%{box-shadow:0 24px 56px rgba(8,200,255,.24)}
}
@keyframes orbFloatStrong{
0%,100%{transform:translate3d(0,0,0) scale(1)}
25%{transform:translate3d(-12px,18px,0) scale(1.04)}
50%{transform:translate3d(14px,-10px,0) scale(1.08)}
75%{transform:translate3d(-10px,-18px,0) scale(1.02)}
}
@keyframes badgePulse{
0%,100%{transform:scale(1);box-shadow:0 10px 26px rgba(255,255,255,.08)}
50%{transform:scale(1.03);box-shadow:0 18px 34px rgba(255,255,255,.18)}
}
body{
background:
radial-gradient(circle at 6% 3%,rgba(37,99,255,.22),transparent 26rem),
radial-gradient(circle at 92% 10%,rgba(8,200,255,.18),transparent 22rem),
radial-gradient(circle at 82% 74%,rgba(18,214,166,.14),transparent 20rem),
radial-gradient(circle at 22% 92%,rgba(110,107,255,.10),transparent 22rem),
linear-gradient(180deg,#f5f9ff 0%,#ffffff 42%,#f3fffb 100%);
}
body:before{
background-image:
linear-gradient(rgba(37,99,255,.055) 1px,transparent 1px),
linear-gradient(90deg,rgba(37,99,255,.055) 1px,transparent 1px);
background-size:42px 42px;
}
.site-header{
background:rgba(255,255,255,.84);
box-shadow:0 16px 42px rgba(7,29,73,.08);
}
.brand{
background:linear-gradient(135deg,rgba(255,255,255,.96),rgba(241,248,255,.88));
border-color:rgba(37,99,255,.1);
box-shadow:0 10px 26px rgba(37,99,255,.08);
}
.nav-link:hover{background:rgba(37,99,255,.09);color:var(--civic-blue)}
.nav-link.active{
background:linear-gradient(135deg,var(--civic-blue),var(--civic-cyan),var(--civic-mint));
background-size:180% 180%;
animation:vividGradientFlow 8s ease infinite;
box-shadow:0 16px 32px rgba(37,99,255,.28);
}
.menu-toggle,
.btn-primary,
.back-to-top{
background:linear-gradient(135deg,var(--civic-blue),var(--civic-cyan),var(--civic-mint));
background-size:190% 190%;
animation:vividGradientFlow 7s ease infinite, glowPulseStrong 3.8s ease-in-out infinite;
}
.btn-soft{
background:linear-gradient(135deg,#ffffff,#eef8ff);
color:var(--civic-blue);
}
.btn-outline:hover{background:rgba(255,255,255,.18);border-color:rgba(255,255,255,.85)}
.hero,
.page-hero{
background:
linear-gradient(125deg,rgba(7,29,73,.88) 0%,rgba(37,99,255,.78) 42%,rgba(8,200,255,.55) 72%,rgba(18,214,166,.45) 100%),
url('../images/hero-bg.jpg') center/cover no-repeat;
}
.hero-overlay{
background:linear-gradient(90deg,rgba(7,29,73,.66),rgba(7,29,73,.20),rgba(7,29,73,.06));
}
.hero:before,
.page-hero:before{
background:
radial-gradient(circle at 18% 16%,rgba(255,255,255,.16),transparent 15rem),
radial-gradient(circle at 80% 26%,rgba(255,210,94,.18),transparent 12rem),
radial-gradient(circle at 76% 78%,rgba(18,214,166,.14),transparent 12rem),
linear-gradient(90deg,rgba(255,255,255,.09) 1px,transparent 1px),
linear-gradient(rgba(255,255,255,.09) 1px,transparent 1px);
background-size:auto,auto,auto,56px 56px,56px 56px;
opacity:.95;
animation:heroGridDrift 16s ease-in-out infinite;
}
.hero:after,
.page-hero:after,
.soft-bg:after,
.gradient-panel:after,
.official-strip:after{
animation:orbFloatStrong 16s ease-in-out infinite;
}
.page-hero .eyebrow,
.hero .eyebrow{
background:linear-gradient(135deg,rgba(255,255,255,.18),rgba(255,255,255,.10));
border:1px solid rgba(255,255,255,.28);
animation:badgePulse 4s ease-in-out infinite;
}
.hero h1,
.page-hero h1{
text-shadow:0 18px 50px rgba(0,0,0,.18);
}
.hero p,
.page-hero p{
color:rgba(255,255,255,.95);
}
.hero-card{
border-color:rgba(37,99,255,.12);
box-shadow:0 28px 70px rgba(7,29,73,.18);
}
main > section:not(.page-hero):not(.gradient-panel):not(.official-strip):not(.soft-bg){
background:
linear-gradient(180deg,rgba(255,255,255,.96),rgba(246,251,255,.98));
}
main > section.section-pad:nth-of-type(odd):not(.page-hero):not(.gradient-panel):not(.official-strip):not(.soft-bg){
background:
linear-gradient(180deg,rgba(246,251,255,.98),rgba(255,255,255,.96));
}
.soft-bg{
background:
linear-gradient(135deg,rgba(37,99,255,.07),rgba(8,200,255,.05) 45%,rgba(18,214,166,.07));
}
.gradient-panel{
background:linear-gradient(135deg,var(--civic-blue),var(--civic-cyan),var(--civic-mint));
background-size:180% 180%;
animation:vividGradientFlow 10s ease infinite;
}
.official-strip{
background:linear-gradient(135deg,#eef5ff,#f3fbff 50%,#f0fff9);
}
.info-card,
.official-card,
.profile-item,
.contact-card,
.contact-form,
.pledge,
.download-card,
.doc-row,
.accordion-item,
.image-card,
.official-mini,
.table-wrap{
background:linear-gradient(180deg,rgba(255,255,255,.98),rgba(246,251,255,.93));
border:1px solid rgba(37,99,255,.10);
box-shadow:0 16px 40px rgba(7,29,73,.08);
}
.info-card:hover,
.official-card:hover,
.profile-item:hover,
.download-card:hover,
.doc-row:hover,
.image-card:hover,
.contact-card:hover{
transform:translateY(-9px) scale(1.01);
box-shadow:0 24px 56px rgba(37,99,255,.14),0 10px 26px rgba(8,200,255,.10);
border-color:rgba(37,99,255,.18);
}
.info-card:before,
.official-card:before,
.download-card:before,
.contact-card:before{
background:linear-gradient(90deg,var(--civic-blue),var(--civic-cyan),var(--civic-mint),var(--civic-gold));
background-size:200% 200%;
animation:vividGradientFlow 8s ease infinite;
}
.info-card .icon,
.download-card .icon{
background:linear-gradient(135deg,rgba(37,99,255,.16),rgba(8,200,255,.12),rgba(18,214,166,.16));
color:var(--civic-blue);
box-shadow:0 14px 28px rgba(37,99,255,.12);
}
.section-heading h2,
.split-layout h2,
.pledge h2{
color:var(--civic-navy);
}
.eyebrow{color:var(--civic-mint)}
.text-link{color:var(--civic-blue)}
.official-card span,
.official-mini span,
.date,
.mini-list span{color:var(--civic-blue)}
.status.ongoing{background:#e9f0ff;color:var(--civic-blue)}
.status.completed{background:#e8fff8;color:#09906d}
.status.upcoming{background:#fff4d4;color:#9a6b00}
th{background:linear-gradient(135deg,var(--civic-navy),var(--civic-blue),var(--civic-cyan));background-size:180% 180%;animation:vividGradientFlow 10s ease infinite}
.back-to-top{border-radius:18px}
.back-to-top.show{opacity:1;transform:none;box-shadow:0 20px 44px rgba(37,99,255,.26)}
@media (max-width:768px){
body:before{background-size:30px 30px}
.page-hero,
.hero-content{overflow:hidden}
.page-hero{
background:
linear-gradient(128deg,rgba(7,29,73,.92) 0%,rgba(37,99,255,.80) 46%,rgba(8,200,255,.58) 74%,rgba(18,214,166,.46) 100%),
url('../images/hero-bg.jpg') center/cover no-repeat;
}
.page-hero:before,
.hero:before{
background-size:auto,auto,auto,36px 36px,36px 36px;
opacity:.92;
}
.page-hero .eyebrow,
.hero .eyebrow{box-shadow:0 12px 28px rgba(0,0,0,.10)}
.info-card,
.official-card,
.contact-card,
.contact-form,
.pledge,
.download-card,
.profile-item,
.doc-row,
.accordion-item{
box-shadow:0 14px 34px rgba(7,29,73,.08);
}
}
@media (prefers-reduced-motion:reduce){
.nav-link.active,
.menu-toggle,
.btn-primary,
.back-to-top,
.gradient-panel,
th,
.info-card:before,
.official-card:before,
.download-card:before,
.contact-card:before,
.page-hero .eyebrow,
.hero .eyebrow{animation:none!important}
}
/* 2026-06-29 v4 standardized page backgrounds + home community hero */
:root{
--standard-page-bg: linear-gradient(180deg,#f6fbff 0%,#ffffff 52%,#f5fffa 100%);
--standard-section-bg: linear-gradient(180deg,#ffffff 0%,#f8fbff 100%);
--standard-soft-section-bg: linear-gradient(135deg,rgba(37,99,255,.05),rgba(8,200,255,.04) 46%,rgba(18,214,166,.06));
}
body{
background:
radial-gradient(circle at 8% 4%,rgba(37,99,255,.15),transparent 24rem),
radial-gradient(circle at 92% 7%,rgba(8,200,255,.12),transparent 20rem),
radial-gradient(circle at 75% 92%,rgba(18,214,166,.08),transparent 18rem),
var(--standard-page-bg);
}
main{
background:transparent;
}
main > section:not(.hero):not(.page-hero):not(.gradient-panel):not(.official-strip):not(.soft-bg):not(.gradient-band){
background:var(--standard-section-bg);
}
.soft-bg,
.official-strip,
.gradient-band{
background:var(--standard-soft-section-bg);
}
.page-hero{
background:
linear-gradient(135deg,rgba(8,26,70,.92) 0%,rgba(20,83,194,.84) 46%,rgba(8,200,255,.66) 100%);
position:relative;
}
.page-hero:before{
background:
radial-gradient(circle at 18% 18%,rgba(255,255,255,.18),transparent 15rem),
radial-gradient(circle at 82% 30%,rgba(255,210,94,.18),transparent 12rem),
linear-gradient(90deg,rgba(255,255,255,.09) 1px,transparent 1px),
linear-gradient(rgba(255,255,255,.09) 1px,transparent 1px);
background-size:auto,auto,44px 44px,44px 44px;
}
.hero{
background:
linear-gradient(90deg,rgba(5,22,56,.80) 0%,rgba(11,59,140,.62) 34%,rgba(7,145,193,.30) 58%,rgba(255,255,255,0) 78%),
url('../images/home-community-hero.jpg') center/cover no-repeat;
position:relative;
min-height:720px;
}
.hero-overlay{
background:
linear-gradient(90deg,rgba(4,19,48,.18),rgba(4,19,48,.05),rgba(4,19,48,0));
}
.hero:before{
content:"";
position:absolute;
inset:0;
background:
radial-gradient(circle at 14% 20%,rgba(255,255,255,.16),transparent 15rem),
radial-gradient(circle at 28% 80%,rgba(8,200,255,.16),transparent 18rem),
linear-gradient(90deg,rgba(255,255,255,.08) 1px,transparent 1px),
linear-gradient(rgba(255,255,255,.08) 1px,transparent 1px);
background-size:auto,auto,56px 56px,56px 56px;
opacity:.92;
animation:heroGridDrift 14s ease-in-out infinite;
}
.hero:after{
content:"";
position:absolute;
width:460px;
height:460px;
right:-120px;
bottom:-150px;
border-radius:50%;
background:radial-gradient(circle,rgba(255,255,255,.22),rgba(255,255,255,.04) 55%,transparent 70%);
animation:orbFloatStrong 16s ease-in-out infinite;
}
.hero .container::before,
.hero .container::after{
content:"";
position:absolute;
border-radius:50%;
filter:blur(8px);
pointer-events:none;
}
.hero .container::before{
width:110px;
height:110px;
right:12%;
top:5%;
background:rgba(37,99,255,.24);
animation:orbFloatStrong 11s ease-in-out infinite;
}
.hero .container::after{
width:68px;
height:68px;
left:58%;
bottom:8%;
background:rgba(18,214,166,.18);
animation:orbFloatStrong 9s ease-in-out infinite reverse;
}
.hero-content{
max-width:760px;
}
.hero h1,
.hero p,
.hero .eyebrow,
.hero .btn-outline,
.hero .btn-soft{position:relative;z-index:2}
.hero h1{
color:#ffffff;
max-width:10ch;
text-shadow:0 14px 40px rgba(0,0,0,.28);
}
.hero p{
color:rgba(255,255,255,.95);
max-width:36rem;
text-shadow:0 6px 20px rgba(0,0,0,.18);
}
.hero .eyebrow{
background:linear-gradient(135deg,rgba(255,255,255,.18),rgba(255,255,255,.09));
color:#dbfff6;
}
.hero-card{
background:rgba(255,255,255,.94);
box-shadow:0 24px 60px rgba(5,22,56,.18);
}
.hero-card strong{color:#0a2a61}
.hero-card span{color:#155eef}
.section-heading h2,
.split-layout h2,
.pledge h2,
.info-card h3,
.image-card h3,
.official-card h3,
.download-card h3{color:#09245b}
.info-card p,
.image-card p,
.official-card p,
.download-card p,
.split-layout p,
.section-heading p,
.profile-item span,
.doc-row span,
.contact-card p{color:#576d8a}
.info-card,
.official-card,
.profile-item,
.contact-card,
.contact-form,
.pledge,
.download-card,
.doc-row,
.accordion-item,
.image-card,
.official-mini,
.table-wrap{
background:linear-gradient(180deg,rgba(255,255,255,.98),rgba(248,252,255,.96));
}
.stats-grid div{
background:linear-gradient(145deg,rgba(255,255,255,.96),rgba(241,248,255,.92));
}
.stats-grid strong{color:#0c2c68}
.stats-grid span{color:#527090}
@media (max-width:900px){
.hero{
min-height:auto;
background-position:68% center;
}
.hero-content{padding:84px 0 132px}
}
@media (max-width:768px){
.hero{
background:
linear-gradient(180deg,rgba(5,22,56,.76) 0%,rgba(10,61,153,.58) 34%,rgba(7,145,193,.24) 58%,rgba(5,22,56,.10) 100%),
url('../images/home-community-hero.jpg') 68% center/cover no-repeat;
}
.hero:before{background-size:auto,auto,36px 36px,36px 36px}
.hero:after{width:260px;height:260px;right:-90px;bottom:-100px}
.hero .container::before{right:4%;top:2%;width:80px;height:80px}
.hero .container::after{left:auto;right:20%;bottom:4%;width:52px;height:52px}
.hero h1{max-width:9.2ch}
.hero p{max-width:30ch}
.page-hero{padding:80px 0 52px}
}
@media (max-width:480px){
.hero{background-position:72% center}
.hero-content{padding:70px 0 116px}
.hero h1{max-width:9.5ch}
.hero p{max-width:100%}
}
/* 2026-06-29 v6 softer community backgrounds + less boxy modern styling */
@keyframes softGlowFloat{
0%,100%{transform:translate3d(0,0,0) scale(1)}
50%{transform:translate3d(10px,-14px,0) scale(1.06)}
}
@keyframes gentleDrift{
0%,100%{transform:translate3d(0,0,0)}
50%{transform:translate3d(-10px,8px,0)}
}
body{
background:
radial-gradient(circle at 8% 4%,rgba(37,99,255,.12),transparent 23rem),
radial-gradient(circle at 92% 8%,rgba(8,200,255,.10),transparent 20rem),
radial-gradient(circle at 74% 90%,rgba(18,214,166,.08),transparent 18rem),
linear-gradient(180deg,#f7fbff 0%,#ffffff 48%,#f7fffb 100%);
}
body:before{
background-image:none;
opacity:.35;
}
main > section:not(.hero):not(.page-hero):not(.gradient-panel):not(.official-strip):not(.soft-bg):not(.gradient-band){
background:linear-gradient(180deg,rgba(255,255,255,.98),rgba(248,251,255,.96));
}
main > section.section-pad:nth-of-type(odd):not(.hero):not(.page-hero):not(.gradient-panel):not(.official-strip):not(.soft-bg):not(.gradient-band){
background:linear-gradient(180deg,rgba(248,251,255,.97),rgba(255,255,255,.98));
}
.soft-bg,
.official-strip,
.gradient-band{
background:
radial-gradient(circle at 10% 18%,rgba(37,99,255,.06),transparent 16rem),
radial-gradient(circle at 90% 20%,rgba(8,200,255,.05),transparent 14rem),
linear-gradient(135deg,rgba(255,255,255,.94),rgba(244,250,255,.96) 58%,rgba(243,255,250,.95));
}
.hero{
background:
linear-gradient(90deg,rgba(4,20,56,.88) 0%,rgba(4,20,56,.74) 25%,rgba(8,50,113,.52) 48%,rgba(8,50,113,.18) 72%,rgba(255,255,255,0) 100%),
url('../images/home-community-hero.jpg') 78% center/cover no-repeat;
min-height:720px;
}
.hero-overlay{
background:linear-gradient(90deg,rgba(4,20,56,.16),rgba(4,20,56,.04),rgba(4,20,56,0));
}
.hero:before{
background:
radial-gradient(circle at 16% 22%,rgba(255,255,255,.16),transparent 16rem),
radial-gradient(circle at 72% 20%,rgba(8,200,255,.10),transparent 12rem),
radial-gradient(circle at 58% 84%,rgba(18,214,166,.12),transparent 12rem);
background-size:auto;
opacity:.9;
animation:gentleDrift 16s ease-in-out infinite;
}
.hero:after{
width:420px;
height:420px;
right:-110px;
bottom:-130px;
background:radial-gradient(circle,rgba(255,255,255,.18),rgba(255,255,255,.03) 58%,transparent 72%);
animation:softGlowFloat 15s ease-in-out infinite;
}
.hero .container::before,
.hero .container::after{
filter:blur(18px);
}
.hero-content{
max-width:760px;
position:relative;
}
.hero h1,
.hero p,
.hero .eyebrow,
.hero .btn-outline,
.hero .btn-soft,
.hero .btn-primary{
position:relative;
z-index:2;
}
.hero h1{
max-width:9.2ch;
text-shadow:0 18px 46px rgba(0,0,0,.34);
}
.hero p{
max-width:35rem;
text-shadow:0 8px 24px rgba(0,0,0,.20);
}
.page-hero{
background:
linear-gradient(120deg,rgba(10,31,81,.88) 0%,rgba(22,79,188,.74) 46%,rgba(9,170,221,.58) 100%),
url('../images/community-bg-soft.jpg') center/cover no-repeat;
position:relative;
}
.page-hero:before{
background:
radial-gradient(circle at 18% 18%,rgba(255,255,255,.14),transparent 16rem),
radial-gradient(circle at 82% 22%,rgba(255,255,255,.10),transparent 14rem),
radial-gradient(circle at 76% 78%,rgba(18,214,166,.12),transparent 16rem);
background-size:auto;
opacity:.95;
animation:gentleDrift 16s ease-in-out infinite;
}
.page-hero:after{
content:"";
position:absolute;
right:-90px;
top:50%;
width:260px;
height:260px;
border-radius:50%;
background:radial-gradient(circle,rgba(255,255,255,.12),rgba(255,255,255,.02) 58%,transparent 72%);
transform:translateY(-50%);
animation:softGlowFloat 15s ease-in-out infinite;
}
.page-hero .container{
position:relative;
z-index:1;
}
.page-hero h1{
max-width:10ch;
}
.page-hero p{
max-width:40rem;
}
.info-card,
.official-card,
.profile-item,
.contact-card,
.contact-form,
.pledge,
.download-card,
.doc-row,
.accordion-item,
.image-card,
.official-mini,
.table-wrap,
.stats-grid div,
.hero-card{
border-radius:28px;
background:linear-gradient(180deg,rgba(255,255,255,.98),rgba(246,251,255,.95));
border:1px solid rgba(37,99,255,.08);
box-shadow:0 18px 42px rgba(7,29,73,.08);
}
.info-card:hover,
.official-card:hover,
.profile-item:hover,
.download-card:hover,
.doc-row:hover,
.image-card:hover,
.contact-card:hover,
.stats-grid div:hover{
transform:translateY(-8px);
box-shadow:0 28px 58px rgba(7,29,73,.12);
}
.stats-grid div{
min-height:120px;
}
.section-heading h2,
.split-layout h2,
.pledge h2,
.info-card h3,
.image-card h3,
.official-card h3,
.download-card h3{
letter-spacing:-.03em;
}
.image-card img,
.rounded-img{
border-radius:24px;
}
@media (max-width:900px){
.hero{background-position:72% center}
}
@media (max-width:768px){
.hero{
background:
linear-gradient(180deg,rgba(4,20,56,.82) 0%,rgba(4,20,56,.62) 38%,rgba(8,50,113,.34) 70%,rgba(4,20,56,.12) 100%),
url('../images/home-community-hero.jpg') 72% center/cover no-repeat;
min-height:auto;
}
.hero:after{width:240px;height:240px;right:-70px;bottom:-90px}
.page-hero{
background:
linear-gradient(140deg,rgba(10,31,81,.90) 0%,rgba(22,79,188,.76) 50%,rgba(9,170,221,.62) 100%),
url('../images/community-bg-soft.jpg') center/cover no-repeat;
}
.page-hero:after{width:180px;height:180px;right:-60px}
}
@media (max-width:480px){
.hero{background-position:75% center}
.page-hero h1{max-width:9ch}
}
/* 2026-06-29 v7 balanced subtle community-people hero background */
.hero{
background:
linear-gradient(90deg,rgba(5,23,58,.88) 0%,rgba(5,23,58,.74) 24%,rgba(10,61,153,.50) 48%,rgba(10,61,153,.20) 70%,rgba(255,255,255,0) 100%),
url('../images/home-community-balanced.jpg') 80% center/cover no-repeat !important;
min-height:720px;
}
.hero-overlay{
background:linear-gradient(90deg,rgba(5,23,58,.12),rgba(5,23,58,.04),rgba(5,23,58,0));
}
.hero:before{
background:
radial-gradient(circle at 16% 20%,rgba(255,255,255,.14),transparent 15rem),
radial-gradient(circle at 76% 18%,rgba(8,200,255,.08),transparent 12rem),
radial-gradient(circle at 60% 84%,rgba(18,214,166,.10),transparent 12rem);
opacity:.72;
}
.hero:after{
width:390px;
height:390px;
right:-90px;
bottom:-120px;
background:radial-gradient(circle,rgba(255,255,255,.14),rgba(255,255,255,.02) 58%,transparent 72%);
}
.hero h1{
color:#ffffff;
text-shadow:0 18px 42px rgba(0,0,0,.32);
}
.hero p{
color:rgba(255,255,255,.94);
text-shadow:0 8px 22px rgba(0,0,0,.18);
}
.hero-card{
background:linear-gradient(180deg,rgba(255,255,255,.96),rgba(247,251,255,.95));
}
@media (max-width:900px){
.hero{
background:
linear-gradient(90deg,rgba(5,23,58,.88) 0%,rgba(5,23,58,.72) 28%,rgba(10,61,153,.42) 60%,rgba(255,255,255,0) 100%),
url('../images/home-community-balanced.jpg') 76% center/cover no-repeat !important;
}
}
@media (max-width:768px){
.hero{
background:
linear-gradient(180deg,rgba(5,23,58,.82) 0%,rgba(5,23,58,.62) 36%,rgba(10,61,153,.30) 66%,rgba(5,23,58,.12) 100%),
url('../images/home-community-balanced.jpg') 72% center/cover no-repeat !important;
}
}
@media (max-width:480px){
.hero{
background:
linear-gradient(180deg,rgba(5,23,58,.84) 0%,rgba(5,23,58,.66) 34%,rgba(10,61,153,.32) 66%,rgba(5,23,58,.18) 100%),
url('../images/home-community-balanced.jpg') 74% center/cover no-repeat !important;
}
}
/* 2026-06-29 v8 mobile balance fix only */
html, body{
max-width:100%;
overflow-x:hidden;
}
.site-header,
.hero,
.page-hero,
main,
section{
width:100%;
max-width:100%;
}
.hero,
.page-hero{
margin:0;
}
@media (max-width:768px){
.container,
.navbar.container,
.page-hero .container,
.hero .container{
width:calc(100% - 24px) !important;
max-width:calc(100% - 24px) !important;
margin-left:auto;
margin-right:auto;
}
.site-header{position:sticky;top:0}
.navbar{
min-height:64px;
align-items:center;
gap:10px;
}
.brand{
max-width:calc(100vw - 92px);
min-width:0;
padding:6px 9px 6px 6px;
border-radius:17px;
gap:8px;
}
.brand img{
width:42px !important;
height:42px !important;
border-radius:13px;
flex:0 0 42px;
}
.brand span{min-width:0;display:block}
.brand strong{
font-size:.94rem !important;
line-height:1.05;
white-space:nowrap;
overflow:hidden;
text-overflow:ellipsis;
}
.brand small{display:none !important}
.menu-toggle{
width:42px;
height:42px;
border-radius:14px;
flex:0 0 42px;
}
.nav-menu{
left:12px !important;
right:12px !important;
top:calc(100% + 8px);
grid-template-columns:1fr !important;
max-height:calc(100vh - 88px);
overflow:auto;
}
.hero{
min-height:auto !important;
display:block;
background-position:72% center !important;
}
.hero-content{
width:100%;
max-width:100% !important;
padding:56px 0 28px !important;
}
.hero .eyebrow,
.page-hero .eyebrow{
font-size:.69rem !important;
letter-spacing:.10em;
padding:7px 11px;
margin-bottom:14px;
}
.hero h1,
.page-hero h1{
max-width:100% !important;
font-size:clamp(2.05rem,9.4vw,2.55rem) !important;
line-height:1.07 !important;
letter-spacing:-.045em !important;
text-wrap:balance;
margin-bottom:16px;
}
.hero p,
.page-hero p{
max-width:100% !important;
font-size:.98rem !important;
line-height:1.62 !important;
margin-bottom:0;
}
.hero-actions{
display:grid !important;
grid-template-columns:1fr;
gap:10px !important;
margin-top:24px !important;
}
.hero-actions .btn,
.btn{
width:100%;
min-height:48px;
padding:12px 18px !important;
}
.hero-card{
position:relative !important;
right:auto !important;
bottom:auto !important;
width:calc(100% - 24px) !important;
max-width:360px !important;
margin:18px auto 34px !important;
padding:20px !important;
border-radius:24px !important;
}
.hero-card span{
font-size:1.5rem !important;
line-height:1.12;
}
.page-hero{
padding:58px 0 48px !important;
min-height:auto !important;
}
.page-hero .container{
padding:0 !important;
}
.page-hero h1{
margin-bottom:14px;
}
.section-pad{
padding:48px 0 !important;
}
.section-pad-sm{
padding:42px 0 !important;
}
.section-heading{
margin-bottom:28px !important;
text-align:left;
}
.section-heading h2,
.split-layout h2,
.pledge h2{
font-size:clamp(1.75rem,7.8vw,2.15rem) !important;
line-height:1.12;
max-width:100%;
}
.split-layout,
.contact-grid{
grid-template-columns:1fr !important;
gap:22px !important;
}
.card-grid,
.card-grid.three,
.card-grid.two,
.officials-grid,
.stats-grid,
.profile-grid,
.downloads-grid,
.service-meta{
grid-template-columns:1fr !important;
gap:16px !important;
}
.info-card,
.official-card,
.contact-card,
.contact-form,
.pledge,
.download-card,
.profile-item,
.doc-row,
.accordion-item,
.official-mini,
.stats-grid div{
padding:20px !important;
border-radius:22px !important;
}
.rounded-img{
min-height:210px !important;
border-radius:22px !important;
}
.official-mini{
text-align:center;
align-items:center;
}
.official-mini img{
width:120px !important;
height:120px !important;
margin-inline:auto;
}
.footer-grid{
grid-template-columns:1fr !important;
gap:24px !important;
padding:42px 0 !important;
}
}
@media (max-width:420px){
.container,
.navbar.container,
.page-hero .container,
.hero .container{
width:calc(100% - 20px) !important;
max-width:calc(100% - 20px) !important;
}
.hero-content{
padding:52px 0 24px !important;
}
.hero h1,
.page-hero h1{
font-size:clamp(1.95rem,10vw,2.35rem) !important;
}
.page-hero{
padding:54px 0 42px !important;
}
.section-pad{padding:42px 0 !important}
.hero-card{width:calc(100% - 20px) !important}
}
/* 2026-06-29 desktop hero gap correction only */
@media (min-width:901px){
.hero{
width:100% !important;
margin:0 !important;
overflow:hidden;
background:
linear-gradient(90deg,rgba(5,23,58,.86) 0%,rgba(5,23,58,.70) 22%,rgba(10,61,153,.48) 45%,rgba(10,61,153,.22) 68%,rgba(10,61,153,.08) 100%),
url('../images/home-community-balanced.jpg') 74% center/cover no-repeat !important;
}
.hero .container{
width:min(1440px,calc(100% - 96px)) !important;
max-width:1440px !important;
margin-inline:auto !important;
}
.hero-content{
margin-left:0 !important;
max-width:720px !important;
padding-left:0 !important;
padding-right:0 !important;
}
.hero h1{
max-width:10ch !important;
}
.hero p{
max-width:34rem !important;
}
.hero-card{
right:6.5% !important;
bottom:78px !important;
width:min(340px,calc(100% - 48px)) !important;
}
}
@media (min-width:1400px){
.hero .container{
width:min(1500px,calc(100% - 120px)) !important;
max-width:1500px !important;
}
.hero-card{
right:8% !important;
}
}
/* 2026-06-29 inner page heroes: community people a bit more visible, home hero unchanged */
.page-hero{
background:
linear-gradient(100deg,rgba(9,32,86,.82) 0%,rgba(22,79,188,.62) 44%,rgba(9,170,221,.42) 100%),
url('../images/community-bg-visible.jpg') center/cover no-repeat !important;
}
.page-hero:before{
background:
radial-gradient(circle at 16% 20%,rgba(255,255,255,.12),transparent 15rem),
radial-gradient(circle at 82% 20%,rgba(255,255,255,.08),transparent 13rem),
radial-gradient(circle at 74% 78%,rgba(18,214,166,.10),transparent 15rem);
opacity:.72;
}
.page-hero:after{
background:radial-gradient(circle,rgba(255,255,255,.10),rgba(255,255,255,.02) 58%,transparent 72%);
opacity:.62;
}
.page-hero h1,
.page-hero p{
text-shadow:0 10px 28px rgba(0,0,0,.20);
}
@media (max-width:768px){
.page-hero{
background:
linear-gradient(145deg,rgba(9,32,86,.86) 0%,rgba(22,79,188,.66) 52%,rgba(9,170,221,.46) 100%),
url('../images/community-bg-visible.jpg') center/cover no-repeat !important;
}
}
/* 2026-06-29 v10 mobile page-hero balance + larger mobile logo
Scope: mobile-only spacing/header correction for all pages. */
@media (max-width:768px){
/* Make the mobile logo more visible without increasing the whole header too much */
.navbar{
min-height:68px !important;
padding-top:6px !important;
padding-bottom:6px !important;
}
.brand{
max-width:calc(100vw - 94px) !important;
padding:7px 11px 7px 7px !important;
gap:9px !important;
border-radius:18px !important;
}
.brand img{
width:48px !important;
height:48px !important;
flex:0 0 48px !important;
border-radius:14px !important;
}
.brand strong{
font-size:1rem !important;
line-height:1.05 !important;
}
.menu-toggle{
width:44px !important;
height:44px !important;
flex:0 0 44px !important;
border-radius:15px !important;
}
/* Remove the uneven top gap on all inner page banners */
.page-hero{
padding:30px 0 34px !important;
min-height:220px !important;
display:flex !important;
align-items:center !important;
}
.page-hero .container{
width:calc(100% - 28px) !important;
max-width:calc(100% - 28px) !important;
padding:0 !important;
margin-inline:auto !important;
}
.page-hero .eyebrow{
margin-bottom:12px !important;
}
.page-hero h1{
margin-bottom:12px !important;
max-width:100% !important;
font-size:clamp(2rem,8.8vw,2.55rem) !important;
line-height:1.08 !important;
}
.page-hero p{
max-width:100% !important;
font-size:.98rem !important;
line-height:1.55 !important;
}
/* Keep home hero balanced separately */
.hero-content{
padding-top:46px !important;
padding-bottom:28px !important;
}
.hero-card{
margin-top:16px !important;
}
}
@media (max-width:420px){
.navbar{
min-height:66px !important;
}
.brand img{
width:46px !important;
height:46px !important;
flex-basis:46px !important;
}
.brand strong{
font-size:.96rem !important;
}
.page-hero{
padding:26px 0 32px !important;
min-height:210px !important;
}
.page-hero .container{
width:calc(100% - 24px) !important;
max-width:calc(100% - 24px) !important;
}
.page-hero h1{
font-size:clamp(1.9rem,9.2vw,2.35rem) !important;
}
}
/* 2026-06-29 v11 mobile home hero balance only */
@media (max-width:768px){
.hero{
min-height:auto !important;
}
.hero .container{
width:calc(100% - 28px) !important;
max-width:calc(100% - 28px) !important;
margin-inline:auto !important;
}
.hero-content{
width:100% !important;
max-width:100% !important;
padding:34px 0 20px !important;
}
.hero .eyebrow{
margin-bottom:12px !important;
font-size:.70rem !important;
padding:8px 12px !important;
}
.hero h1{
max-width:100% !important;
font-size:clamp(1.95rem,8.7vw,2.42rem) !important;
line-height:1.06 !important;
letter-spacing:-.042em !important;
margin-bottom:14px !important;
}
.hero p{
max-width:100% !important;
font-size:.98rem !important;
line-height:1.55 !important;
margin-bottom:0 !important;
}
.hero-actions{
margin-top:20px !important;
gap:10px !important;
}
.hero-actions .btn{
min-height:46px !important;
font-size:1rem !important;
padding:12px 16px !important;
}
.hero-card{
width:calc(100% - 28px) !important;
max-width:360px !important;
margin:16px auto 26px !important;
padding:18px 20px !important;
border-radius:22px !important;
}
.hero-card strong{
font-size:1rem !important;
}
.hero-card span{
font-size:1.25rem !important;
margin-top:6px !important;
display:block;
}
.hero-card small{
font-size:.92rem !important;
line-height:1.45 !important;
}
}
@media (max-width:420px){
.hero .container{
width:calc(100% - 24px) !important;
max-width:calc(100% - 24px) !important;
}
.hero-content{
padding:30px 0 18px !important;
}
.hero h1{
font-size:clamp(1.85rem,9.2vw,2.2rem) !important;
}
.hero p{
font-size:.96rem !important;
}
.hero-card{
width:calc(100% - 24px) !important;
margin:14px auto 22px !important;
}
}
/* 2026-06-29 final: compact mobile hero buttons + cleaner location panel */
@media (max-width:768px){
.hero-actions{
max-width:320px !important;
margin:18px auto 0 !important;
gap:9px !important;
}
.hero-actions .btn{
width:100% !important;
min-height:42px !important;
padding:9px 14px !important;
font-size:.94rem !important;
border-radius:999px !important;
}
.hero-card{
max-width:320px !important;
padding:16px 18px !important;
}
.hero-card span{
font-size:1.18rem !important;
}
}
@media (max-width:420px){
.hero-actions{
max-width:300px !important;
}
.hero-actions .btn{
min-height:40px !important;
font-size:.92rem !important;
}
}
/* Calm down the bright location overview section */
.gradient-panel{
background:
radial-gradient(circle at 10% 10%, rgba(37,99,255,.08), transparent 18rem),
radial-gradient(circle at 90% 10%, rgba(18,214,166,.08), transparent 18rem),
linear-gradient(135deg,#f7fbff 0%,#ffffff 52%,#f4fffb 100%) !important;
color:#0b1f3a !important;
}
.gradient-panel h2{color:#09245b !important;}
.gradient-panel p{color:#576d8a !important;}
.gradient-panel .map-placeholder,
.gradient-panel .map-embed{
background:linear-gradient(180deg,rgba(255,255,255,.98),rgba(246,251,255,.96)) !important;
border:1px solid rgba(37,99,255,.10) !important;
color:#09245b !important;
box-shadow:0 18px 42px rgba(7,29,73,.08) !important;
}
.gradient-panel .map-placeholder small{color:#576d8a !important;}
/* 2026-06-29 lively motion refresh - visual only */
@keyframes floatSoft{
0%,100%{transform:translate3d(0,0,0)}
50%{transform:translate3d(0,-8px,0)}
}
@keyframes floatSide{
0%,100%{transform:translate3d(0,0,0) scale(1)}
50%{transform:translate3d(16px,-12px,0) scale(1.04)}
}
@keyframes gradientMove{
0%,100%{background-position:0% 50%}
50%{background-position:100% 50%}
}
@keyframes shineLine{
0%{transform:translateX(-140%)}
100%{transform:translateX(160%)}
}
@keyframes iconPop{
0%,100%{transform:translateY(0) rotate(0deg)}
50%{transform:translateY(-6px) rotate(-2deg)}
}
@keyframes softPulse{
0%,100%{box-shadow:0 18px 42px rgba(7,29,73,.08)}
50%{box-shadow:0 26px 60px rgba(21,94,239,.16)}
}
.hero:before,
.page-hero:before{
animation:gradientMove 18s ease-in-out infinite, gentleDrift 14s ease-in-out infinite;
}
.hero:after,
.page-hero:after,
main > section:not(.hero):not(.page-hero)::before,
main > section:not(.hero):not(.page-hero)::after{
animation:floatSide 14s ease-in-out infinite;
}
.hero-card,
.official-mini{
animation:floatSoft 6s ease-in-out infinite;
}
.btn-primary,
.menu-toggle,
.back-to-top{
background-size:200% 200% !important;
animation:gradientMove 7s ease infinite, softPulse 4.5s ease-in-out infinite;
}
.btn,
.nav-link,
.info-card,
.official-card,
.image-card,
.profile-item,
.download-card,
.doc-row,
.accordion-item,
.stats-grid div{
transition:transform .28s ease, box-shadow .28s ease, border-color .28s ease, background .28s ease, color .28s ease;
}
.btn:hover,
.nav-link:hover{
transform:translateY(-3px);
}
.info-card:hover,
.official-card:hover,
.image-card:hover,
.profile-item:hover,
.download-card:hover,
.doc-row:hover,
.accordion-item:hover,
.stats-grid div:hover{
transform:translateY(-8px) scale(1.01);
}
.info-card,
.official-card,
.image-card,
.profile-item,
.download-card,
.doc-row,
.stats-grid div,
.contact-card,
.official-mini{
position:relative;
overflow:hidden;
}
.info-card:after,
.official-card:after,
.image-card:after,
.profile-item:after,
.download-card:after,
.doc-row:after,
.stats-grid div:after,
.contact-card:after,
.official-mini:after{
content:"";
position:absolute;
inset:0 auto 0 0;
width:42%;
background:linear-gradient(90deg,rgba(255,255,255,0),rgba(255,255,255,.45),rgba(255,255,255,0));
opacity:0;
pointer-events:none;
}
.info-card:hover:after,
.official-card:hover:after,
.image-card:hover:after,
.profile-item:hover:after,
.download-card:hover:after,
.doc-row:hover:after,
.stats-grid div:hover:after,
.contact-card:hover:after,
.official-mini:hover:after{
opacity:1;
animation:shineLine 1.1s ease;
}
.info-card .icon,
.download-card .icon,
.official-card img,
.official-mini img{
animation:iconPop 5.5s ease-in-out infinite;
}
.official-card:nth-child(2n) img{animation-delay:.4s}
.official-card:nth-child(3n) img{animation-delay:.8s}
.info-card:nth-child(2n) .icon{animation-delay:.5s}
.info-card:nth-child(3n) .icon{animation-delay:.9s}
.image-card img{
transition:transform .65s ease, filter .65s ease;
}
.image-card:hover img{
transform:scale(1.08);
filter:saturate(1.12) contrast(1.04);
}
.accordion-trigger b{
transition:transform .25s ease, background .25s ease;
}
.accordion-trigger:hover b{
transform:rotate(90deg) scale(1.08);
}
.reveal,
.reveal-left,
.reveal-right,
.reveal-zoom{
transition-duration:.82s !important;
transition-timing-function:cubic-bezier(.2,.8,.2,1) !important;
}
.reveal.visible,
.reveal-left.visible,
.reveal-right.visible,
.reveal-zoom.visible{
will-change:transform,opacity;
}
@media (max-width:768px){
.hero-card,
.official-mini{
animation:none;
}
.info-card:hover,
.official-card:hover,
.image-card:hover,
.profile-item:hover,
.download-card:hover,
.doc-row:hover,
.accordion-item:hover,
.stats-grid div:hover{
transform:translateY(-4px);
}
}
@media (prefers-reduced-motion:reduce){
*,*:before,*:after{
animation:none!important;
transition:none!important;
}
}
/* ===== Balanced Global Background Refresh ===== */
/* Added to balance the overall background and reduce plain white empty areas */
:root{
--balanced-page-top: #f5f9ff;
--balanced-page-mid: #ffffff;
--balanced-page-bottom: #eef6ff;
--balanced-section-1: rgba(255,255,255,.96);
--balanced-section-2: rgba(247,251,255,.96);
--balanced-section-alt-1: rgba(248,251,255,.97);
--balanced-section-alt-2: rgba(255,255,255,.98);
--balanced-card-bg: rgba(255,255,255,.90);
--balanced-card-border: rgba(37,99,255,.08);
}
/* Overall page background */
body{
background:
radial-gradient(circle at 12% 10%, rgba(37,99,255,.06), transparent 22%),
radial-gradient(circle at 88% 18%, rgba(8,200,255,.05), transparent 20%),
radial-gradient(circle at 20% 85%, rgba(18,214,166,.05), transparent 22%),
linear-gradient(180deg, var(--balanced-page-top) 0%, var(--balanced-page-mid) 42%, var(--balanced-page-bottom) 100%) !important;
}
/* Keep standard sections balanced and not too white */
main > section:not(.hero):not(.page-hero):not(.gradient-panel):not(.official-strip):not(.soft-bg):not(.gradient-band){
background: linear-gradient(180deg, var(--balanced-section-1), var(--balanced-section-2)) !important;
position: relative;
overflow: hidden;
}
/* Subtle alternating section tone */
main > section.section-pad:nth-of-type(odd):not(.hero):not(.page-hero):not(.gradient-panel):not(.official-strip):not(.soft-bg):not(.gradient-band){
background: linear-gradient(180deg, var(--balanced-section-alt-1), var(--balanced-section-alt-2)) !important;
}
/* Soft glow overlay for sections */
main > section:not(.hero):not(.page-hero):not(.gradient-panel):not(.official-strip):not(.soft-bg):not(.gradient-band)::before{
content: "";
position: absolute;
inset: 0;
pointer-events: none;
background:
radial-gradient(circle at 15% 20%, rgba(37,99,255,.045), transparent 20%),
radial-gradient(circle at 85% 75%, rgba(18,214,166,.04), transparent 22%);
z-index: 0;
}
main > section > .container{
position: relative;
z-index: 1;
}
/* Softer modern cards */
.info-card,
.official-card,
.contact-card,
.contact-form,
.pledge,
.download-card,
.doc-row,
.profile-item,
.image-card,
.accordion-item,
.table-wrap,
.official-mini,
.mini-list article{
background: var(--balanced-card-bg) !important;
border: 1px solid var(--balanced-card-border) !important;
backdrop-filter: blur(8px);
-webkit-backdrop-filter: blur(8px);
}
/* Softer body text inside content areas */
.section-heading p,
.info-card p,
.download-card p,
.doc-row p,
.profile-item span,
.mini-list article p{
color: #5c6f86;
}
/* ===== Location Overview Background Fix ===== */
/* Prevents the Location Overview section from looking too washed out after the global background refresh */
.split-layout{
align-items: center;
}
.split-layout.section-pad,
section.section-pad:has(.split-layout){
background:
radial-gradient(circle at 8% 18%, rgba(37,99,255,.045), transparent 26%),
radial-gradient(circle at 92% 20%, rgba(18,214,166,.055), transparent 28%),
linear-gradient(180deg, rgba(248,251,255,.98), rgba(255,255,255,.97)) !important;
}
.map-placeholder{
background:
linear-gradient(145deg, rgba(255,255,255,.96), rgba(246,251,255,.94)) !important;
border: 1px solid rgba(37,99,255,.10) !important;
box-shadow: 0 18px 46px rgba(8,38,77,.10) !important;
color: var(--blue-dark) !important;
min-height: 300px;
}
.map-placeholder small{
color: #5c6f86 !important;
}
.map-placeholder strong,
.map-placeholder p{
color: var(--blue-dark) !important;
}
/* Make the section feel less empty on wide screens */
.split-layout > div:first-child{
max-width: 620px;
}
@media (max-width: 900px){
.split-layout{
align-items: start;
}
.map-placeholder{
min-height: 240px;
}
}
/* ===== Modern Motion Polish ===== */
/* Added subtle moving parts, modern hover effects, and balanced animation without changing layout/content */
:root{
--motion-blue: rgba(37,99,255,.13);
--motion-cyan: rgba(8,200,255,.12);
--motion-mint: rgba(18,214,166,.14);
--motion-gold: rgba(247,201,72,.14);
}
/* animated soft background ambience */
body::after{
content:"";
position:fixed;
inset:-20%;
pointer-events:none;
z-index:-1;
background:
radial-gradient(circle at 18% 22%, var(--motion-blue), transparent 18rem),
radial-gradient(circle at 82% 18%, var(--motion-mint), transparent 20rem),
radial-gradient(circle at 72% 82%, var(--motion-cyan), transparent 18rem),
radial-gradient(circle at 16% 86%, var(--motion-gold), transparent 16rem);
filter: blur(2px);
opacity:.72;
animation: civicAmbientMove 18s ease-in-out infinite alternate;
}
/* subtle civic dot pattern on standard sections */
main > section:not(.hero):not(.page-hero):not(.gradient-panel):not(.official-strip):not(.soft-bg):not(.gradient-band)::after{
content:"";
position:absolute;
inset:0;
pointer-events:none;
z-index:0;
opacity:.26;
background-image:
radial-gradient(circle, rgba(37,99,255,.16) 1px, transparent 1.6px),
radial-gradient(circle, rgba(18,214,166,.12) 1px, transparent 1.6px);
background-size:46px 46px, 72px 72px;
background-position:0 0, 22px 26px;
animation: civicDotsFloat 28s linear infinite;
}
main > section > .container{
position:relative;
z-index:1;
}
/* richer hero movement */
.hero::before,
.page-hero::before{
animation: civicHeroGlow 14s ease-in-out infinite alternate;
}
.hero::after,
.page-hero::after{
animation: civicFloatSlow 10s ease-in-out infinite alternate;
}
/* modern card movement */
.info-card,
.official-card,
.contact-card,
.contact-form,
.pledge,
.download-card,
.doc-row,
.profile-item,
.image-card,
.accordion-item,
.table-wrap,
.official-mini,
.mini-list article,
.hero-card{
transform:translateY(0);
transition:
transform .32s ease,
box-shadow .32s ease,
border-color .32s ease,
background .32s ease;
}
.info-card:hover,
.official-card:hover,
.contact-card:hover,
.download-card:hover,
.profile-item:hover,
.image-card:hover,
.accordion-item:hover,
.official-mini:hover,
.mini-list article:hover,
.hero-card:hover{
transform:translateY(-8px);
box-shadow:0 24px 60px rgba(8,38,77,.14) !important;
border-color:rgba(37,99,255,.18) !important;
}
/* animated accent line on cards */
.info-card::before,
.official-card::before,
.download-card::before,
.contact-card::before,
.pledge::before{
background:linear-gradient(90deg,var(--civic-blue),var(--civic-cyan),var(--civic-mint),var(--civic-gold),var(--civic-blue)) !important;
background-size:260% 100% !important;
animation:civicAccentFlow 7s linear infinite;
}
/* icon float and glow */
.icon{
animation:civicIconFloat 4.8s ease-in-out infinite;
}
.info-card:nth-child(2) .icon,
.download-card:nth-child(2) .icon,
.profile-item:nth-child(2) .icon{
animation-delay:.45s;
}
.info-card:nth-child(3) .icon,
.download-card:nth-child(3) .icon,
.profile-item:nth-child(3) .icon{
animation-delay:.9s;
}
.info-card:nth-child(4) .icon,
.download-card:nth-child(4) .icon,
.profile-item:nth-child(4) .icon{
animation-delay:1.35s;
}
/* navigation feels more modern */
.nav-link{
position:relative;
overflow:hidden;
}
.nav-link::after{
content:"";
position:absolute;
left:16px;
right:16px;
bottom:7px;
height:2px;
border-radius:999px;
background:linear-gradient(90deg,var(--civic-blue),var(--civic-mint));
transform:scaleX(0);
transform-origin:left;
transition:transform .25s ease;
}
.nav-link:hover::after,
.nav-link.active::after{
transform:scaleX(1);
}
/* button shine */
.btn,
.btn-primary,
.btn-outline,
.btn-soft,
.btn-small{
position:relative;
overflow:hidden;
}
.btn::after,
.btn-primary::after,
.btn-outline::after,
.btn-soft::after,
.btn-small::after{
content:"";
position:absolute;
inset:-40% auto -40% -70%;
width:42%;
transform:skewX(-18deg);
background:linear-gradient(90deg,transparent,rgba(255,255,255,.45),transparent);
transition:left .55s ease;
}
.btn:hover::after,
.btn-primary:hover::after,
.btn-outline:hover::after,
.btn-soft:hover::after,
.btn-small:hover::after{
left:130%;
}
/* map/location placeholder now feels intentional */
.map-placeholder{
position:relative;
overflow:hidden;
}
.map-placeholder::before{
content:"";
position:absolute;
width:180px;
height:180px;
right:-70px;
top:-70px;
border-radius:50%;
background:radial-gradient(circle,rgba(18,214,166,.18),transparent 70%);
animation:civicFloatSlow 8s ease-in-out infinite alternate;
}
.map-placeholder::after{
content:"";
position:absolute;
width:150px;
height:150px;
left:-60px;
bottom:-60px;
border-radius:50%;
background:radial-gradient(circle,rgba(37,99,255,.15),transparent 70%);
animation:civicFloatReverse 9s ease-in-out infinite alternate;
}
.map-placeholder > *{
position:relative;
z-index:1;
}
/* smooth entrance polish */
.reveal{
will-change:transform,opacity;
}
.reveal.visible{
animation:civicRevealUp .62s ease both;
}
/* accordion interaction */
.accordion-trigger{
transition:background .28s ease, color .28s ease, transform .28s ease;
}
.accordion-trigger:hover{
background:linear-gradient(90deg,#ffffff,#f0f8ff) !important;
}
.accordion-trigger b{
transition:transform .28s ease, background .28s ease;
}
.accordion-trigger:hover b{
transform:rotate(90deg) scale(1.04);
}
/* keep animation respectful for users who prefer reduced motion */
@media (prefers-reduced-motion: reduce){
*,
*::before,
*::after{
animation-duration:.01ms !important;
animation-iteration-count:1 !important;
scroll-behavior:auto !important;
}
}
/* motion keyframes */
@keyframes civicAmbientMove{
0%{transform:translate3d(0,0,0) scale(1);}
50%{transform:translate3d(2.5%, -1.5%, 0) scale(1.03);}
100%{transform:translate3d(-1.5%, 2%, 0) scale(1.02);}
}
@keyframes civicDotsFloat{
from{background-position:0 0, 22px 26px;}
to{background-position:46px 46px, 94px 98px;}
}
@keyframes civicHeroGlow{
0%{opacity:.78;transform:scale(1);}
100%{opacity:1;transform:scale(1.035);}
}
@keyframes civicFloatSlow{
0%{transform:translate3d(0,0,0) scale(1);}
100%{transform:translate3d(-18px,14px,0) scale(1.04);}
}
@keyframes civicFloatReverse{
0%{transform:translate3d(0,0,0) scale(1);}
100%{transform:translate3d(18px,-14px,0) scale(1.04);}
}
@keyframes civicAccentFlow{
0%{background-position:0% 50%;}
100%{background-position:260% 50%;}
}
@keyframes civicIconFloat{
0%,100%{transform:translateY(0);box-shadow:inset 0 0 0 1px rgba(13,71,161,.08), 0 0 0 rgba(37,99,255,0);}
50%{transform:translateY(-5px);box-shadow:inset 0 0 0 1px rgba(13,71,161,.08), 0 14px 26px rgba(37,99,255,.10);}
}
@keyframes civicRevealUp{
0%{opacity:0;transform:translateY(18px);}
100%{opacity:1;transform:translateY(0);}
}
@media (max-width: 768px){
body::after{
opacity:.48;
}
main > section:not(.hero):not(.page-hero):not(.gradient-panel):not(.official-strip):not(.soft-bg):not(.gradient-band)::after{
opacity:.16;
background-size:36px 36px, 58px 58px;
}
.info-card:hover,
.official-card:hover,
.contact-card:hover,
.download-card:hover,
.profile-item:hover,
.image-card:hover,
.accordion-item:hover,
.official-mini:hover,
.mini-list article:hover,
.hero-card:hover{
transform:translateY(-4px);
}
}
/* ===== Recommended Modern Card Color Design ===== */
/* Softer, less repetitive civic gradients for announcement / community cards */
.image-card{
background: rgba(255,255,255,.94) !important;
border: 1px solid rgba(37,99,255,.09) !important;
box-shadow: 0 18px 48px rgba(8,38,77,.10) !important;
}
.image-card img{
filter: saturate(.86) contrast(.96) brightness(1.03);
}
/* Add soft overlay so repeated graphics feel more premium and less strong */
.image-card{
position: relative;
}
.image-card::after{
content: "";
position: absolute;
left: 0;
right: 0;
top: 0;
height: 220px;
pointer-events: none;
border-radius: var(--radius) var(--radius) 0 0;
opacity: .92;
mix-blend-mode: soft-light;
}
/* Barangay Assembly / first card: blue to teal */
.image-card:nth-child(6n+1)::after{
background:
radial-gradient(circle at 82% 22%, rgba(255,255,255,.24), transparent 23%),
linear-gradient(135deg, rgba(29,110,208,.46) 0%, rgba(20,184,166,.36) 100%);
}
/* Health / second card: teal to soft green */
.image-card:nth-child(6n+2)::after{
background:
radial-gradient(circle at 22% 22%, rgba(255,255,255,.22), transparent 24%),
linear-gradient(135deg, rgba(14,165,164,.42) 0%, rgba(91,196,126,.36) 100%);
}
/* Clean-up / third card: green to soft yellow */
.image-card:nth-child(6n+3)::after{
background:
radial-gradient(circle at 78% 26%, rgba(255,255,255,.24), transparent 24%),
linear-gradient(135deg, rgba(18,158,114,.40) 0%, rgba(246,211,101,.34) 100%);
}
/* Disaster / fourth card: navy to cyan */
.image-card:nth-child(6n+4)::after{
background:
radial-gradient(circle at 20% 26%, rgba(255,255,255,.22), transparent 24%),
linear-gradient(135deg, rgba(9,42,98,.46) 0%, rgba(8,200,255,.32) 100%);
}
/* Public advisory / fifth card: blue to mint */
.image-card:nth-child(6n+5)::after{
background:
radial-gradient(circle at 70% 22%, rgba(255,255,255,.22), transparent 24%),
linear-gradient(135deg, rgba(37,99,255,.42) 0%, rgba(18,214,166,.32) 100%);
}
/* Community event / sixth card: teal to gold */
.image-card:nth-child(6n+6)::after{
background:
radial-gradient(circle at 82% 26%, rgba(255,255,255,.24), transparent 24%),
linear-gradient(135deg, rgba(13,148,136,.42) 0%, rgba(247,201,72,.34) 100%);
}
/* Make the label panel cleaner and more readable over the softer graphics */
.image-card img + div,
.image-card > div{
position: relative;
z-index: 1;
}
.image-card .status{
filter: saturate(.92);
}
/* Stronger content readability */
.image-card h3{
color: #082a63;
}
.image-card p{
color: #5d7189 !important;
}
.image-card .text-link{
color: #1d6ed0;
}
/* Keep the image area soft on hover instead of becoming too loud */
.image-card:hover img{
filter: saturate(.92) contrast(.98) brightness(1.05);
}
/* ===== Citizen's Charter compact modern redesign ===== */
/* Fixes the large vertical gap and turns the charter content into one cohesive modern block */
.charter-section{
padding-top:72px !important;
padding-bottom:72px !important;
}
.charter-stack{
display:grid;
gap:18px;
max-width:1100px;
margin:0 auto;
position:relative;
}
.charter-stack::before{
content:"";
position:absolute;
left:-40px;
top:32px;
width:180px;
height:180px;
border-radius:50%;
pointer-events:none;
background:radial-gradient(circle, rgba(37,99,255,.08), transparent 70%);
animation:civicFloatSlow 10s ease-in-out infinite alternate;
}
.charter-stack::after{
content:"";
position:absolute;
right:-50px;
bottom:30px;
width:220px;
height:220px;
border-radius:50%;
pointer-events:none;
background:radial-gradient(circle, rgba(18,214,166,.10), transparent 72%);
animation:civicFloatReverse 12s ease-in-out infinite alternate;
}
.charter-section .pledge,
.charter-section .table-wrap,
.charter-meta-card{
position:relative;
z-index:1;
}
.charter-section .pledge{
padding:26px 28px !important;
border-radius:28px !important;
}
.charter-section .pledge p{
max-width:840px;
}
.charter-section .table-wrap{
margin-top:-2px;
border-radius:26px !important;
overflow:hidden;
box-shadow:0 18px 48px rgba(8,38,77,.10) !important;
}
.charter-section table{
min-width:100%;
}
.charter-section th{
background:linear-gradient(135deg,var(--civic-blue),var(--civic-cyan),var(--civic-mint)) !important;
background-size:180% 180% !important;
animation:vividGradientFlow 10s ease infinite;
}
.charter-section td,
.charter-section th{
vertical-align:top;
}
.charter-meta-grid{
display:grid;
grid-template-columns:repeat(2, minmax(0, 1fr));
gap:18px;
margin-top:2px;
}
.charter-meta-card{
min-height:100%;
border-radius:24px !important;
padding:24px 24px 22px !important;
background:linear-gradient(180deg, rgba(255,255,255,.98), rgba(245,250,255,.95)) !important;
}
.charter-meta-card h3{
margin-bottom:10px;
color:#09245b;
}
.charter-meta-card::after{
content:"";
position:absolute;
inset:auto 22px 0 22px;
height:3px;
border-radius:999px;
background:linear-gradient(90deg, rgba(37,99,255,.35), rgba(8,200,255,.25), rgba(18,214,166,.30));
opacity:.9;
}
.charter-meta-card:hover{
transform:translateY(-6px);
box-shadow:0 22px 54px rgba(8,38,77,.12) !important;
}
@media (max-width: 900px){
.charter-section{
padding-top:56px !important;
padding-bottom:56px !important;
}
.charter-stack{
gap:16px;
}
.charter-meta-grid{
grid-template-columns:1fr;
gap:16px;
}
.charter-section .pledge{
padding:22px 22px !important;
border-radius:24px !important;
}
.charter-section .table-wrap{
border-radius:22px !important;
}
}
@media (max-width: 640px){
.charter-section{
padding-top:44px !important;
padding-bottom:44px !important;
}
.charter-section .pledge{
padding:20px 18px !important;
}
.charter-meta-card{
padding:20px 18px !important;
}
}
/* ===== Global Spacing Balance Fix ===== */
/* Reduces excessive vertical gaps across all pages while keeping the modern design and animations */
:root{
--balanced-section-space-desktop: 56px;
--balanced-section-space-medium: 44px;
--balanced-section-space-mobile: 34px;
--balanced-card-gap: 16px;
}
/* Global section spacing */
.section-pad{
padding-top: var(--balanced-section-space-desktop) !important;
padding-bottom: var(--balanced-section-space-desktop) !important;
}
.section-pad-sm{
padding-top: 48px !important;
padding-bottom: 48px !important;
}
/* Reduce overly tall inner-page hero banners */
.page-hero.section-pad-sm{
padding-top: 58px !important;
padding-bottom: 50px !important;
}
/* Keep section headings closer to their content */
.section-heading{
margin-bottom: 28px !important;
}
.section-heading h2,
.split-layout h2,
.pledge h2{
margin-bottom: 10px !important;
}
/* Balance grids and card spacing */
.card-grid,
.card-grid.three,
.card-grid.two,
.officials-grid,
.profile-grid,
.stats-grid,
.downloads-grid,
.contact-grid,
.footer-grid,
.charter-meta-grid{
gap: var(--balanced-card-gap) !important;
}
/* Reduce very large gaps in split sections like Mission/Vision and Location Overview */
.split-layout{
gap: 28px !important;
align-items: center !important;
}
/* Compact cards slightly */
.info-card,
.official-card,
.contact-card,
.contact-form,
.pledge,
.download-card,
.doc-row,
.profile-item,
.image-card,
.accordion-item,
.official-mini,
.mini-list article,
.charter-meta-card{
padding: 22px !important;
}
/* Prevent stacked sections from creating too much empty space */
main > section + section{
margin-top: 0 !important;
}
/* About/Profile sections: remove the large empty white band feel */
main > section:not(.hero):not(.page-hero):not(.gradient-panel):not(.official-strip):not(.gradient-band){
min-height: auto !important;
}
/* Mission and Vision cards should not float too far from the next section */
.card-grid.two,
.profile-grid{
margin-top: 0 !important;
}
/* Citizen's Charter stays compact after previous redesign */
.charter-section{
padding-top: 54px !important;
padding-bottom: 54px !important;
}
.charter-stack{
gap: 16px !important;
}
/* Tables should feel closer to the heading/pledge */
.table-wrap{
margin-top: 0 !important;
}
/* Location/map area */
.map-placeholder,
.map-embed{
min-height: 260px !important;
}
/* Cards with images remain modern but not oversized */
.image-card img{
height: 190px !important;
}
/* Footer spacing balance */
.site-footer{
margin-top: 0 !important;
}
/* Mobile and tablet spacing */
@media (max-width: 900px){
.section-pad{
padding-top: var(--balanced-section-space-medium) !important;
padding-bottom: var(--balanced-section-space-medium) !important;
}
.section-pad-sm,
.page-hero.section-pad-sm{
padding-top: 42px !important;
padding-bottom: 38px !important;
}
.section-heading{
margin-bottom: 22px !important;
}
.split-layout{
gap: 22px !important;
align-items: start !important;
}
.info-card,
.official-card,
.contact-card,
.contact-form,
.pledge,
.download-card,
.doc-row,
.profile-item,
.image-card,
.accordion-item,
.official-mini,
.mini-list article,
.charter-meta-card{
padding: 20px !important;
}
.charter-section{
padding-top: 42px !important;
padding-bottom: 42px !important;
}
.map-placeholder,
.map-embed{
min-height: 230px !important;
}
}
@media (max-width: 640px){
.section-pad{
padding-top: var(--balanced-section-space-mobile) !important;
padding-bottom: var(--balanced-section-space-mobile) !important;
}
.section-pad-sm,
.page-hero.section-pad-sm{
padding-top: 34px !important;
padding-bottom: 32px !important;
}
.section-heading{
margin-bottom: 18px !important;
}
.card-grid,
.card-grid.three,
.card-grid.two,
.officials-grid,
.profile-grid,
.stats-grid,
.downloads-grid,
.contact-grid,
.footer-grid,
.charter-meta-grid{
gap: 14px !important;
}
.info-card,
.official-card,
.contact-card,
.contact-form,
.pledge,
.download-card,
.doc-row,
.profile-item,
.image-card,
.accordion-item,
.official-mini,
.mini-list article,
.charter-meta-card{
padding: 18px !important;
}
.image-card img{
height: 170px !important;
}
}
/* ===== Navigation Active Highlight Removal ===== */
/* Removes the blue pill/highlight while navigating between pages */
.nav-link,
.nav-link.active,
.nav-link:hover,
.nav-link:focus,
.nav-link:focus-visible{
background: transparent !important;
box-shadow: none !important;
color: var(--blue-dark) !important;
outline: none !important;
}
/* Keep navigation clean with only a subtle text color change */
.nav-link:hover,
.nav-link.active{
color: var(--civic-blue) !important;
}
/* Remove animated underline/highlight bar */
.nav-link::after,
.nav-link:hover::after,
.nav-link.active::after{
display: none !important;
transform: none !important;
}
/* Remove tap/click highlight effect on mobile */
.nav-link,
.brand,
.menu-toggle{
-webkit-tap-highlight-color: transparent;
}
/* ===== Citizen's Charter actual process animation ===== */
/* Adds a more visual "actual process" feel to the Service Pledge workflow table */
.process-flow-wrap{
position:relative;
overflow:hidden;
}
.process-flow-wrap::before{
content:"";
position:absolute;
left:0;
top:0;
width:100%;
height:4px;
background:linear-gradient(90deg,rgba(37,99,255,.15),rgba(8,200,255,.55),rgba(18,214,166,.38),rgba(37,99,255,.15));
background-size:220% 100%;
animation:processBeam 8s linear infinite;
z-index:2;
}
.charter-section tbody tr{
opacity:.55;
transform:translateX(-22px);
transition:
transform .38s ease,
opacity .38s ease,
background .28s ease;
}
.charter-section.process-in-view tbody tr{
animation:processRowIn .72s ease forwards;
}
.charter-section.process-in-view tbody tr:nth-child(1){animation-delay:.05s;}
.charter-section.process-in-view tbody tr:nth-child(2){animation-delay:.18s;}
.charter-section.process-in-view tbody tr:nth-child(3){animation-delay:.31s;}
.charter-section.process-in-view tbody tr:nth-child(4){animation-delay:.44s;}
.charter-section.process-in-view tbody tr:nth-child(5){animation-delay:.57s;}
.charter-section tbody tr:hover td{
background:linear-gradient(90deg,rgba(236,246,255,.96),rgba(244,252,255,.98)) !important;
}
.charter-section td.step-cell{
position:relative;
min-width:82px;
padding-right:12px;
}
.charter-section td.step-cell::after{
content:"";
position:absolute;
left:39px;
top:54px;
bottom:-18px;
width:2px;
background:linear-gradient(180deg,rgba(37,99,255,.18),rgba(8,200,255,.24),rgba(18,214,166,.18));
}
.charter-section tbody tr:last-child td.step-cell::after{
display:none;
}
.step-badge{
width:36px;
height:36px;
display:inline-grid;
place-items:center;
border-radius:50%;
font-weight:800;
color:#0b2d66;
background:
radial-gradient(circle at 30% 28%, rgba(255,255,255,.88), rgba(255,255,255,.42) 38%, transparent 39%),
linear-gradient(135deg, rgba(37,99,255,.20), rgba(8,200,255,.22), rgba(18,214,166,.24));
border:1px solid rgba(37,99,255,.20);
box-shadow:
0 10px 22px rgba(37,99,255,.10),
inset 0 0 0 1px rgba(255,255,255,.42);
position:relative;
isolation:isolate;
}
.step-badge::after{
content:"";
position:absolute;
inset:-6px;
border-radius:50%;
border:2px solid rgba(8,200,255,.18);
opacity:0;
transform:scale(.85);
}
.charter-section.process-in-view tbody tr:nth-child(1) .step-badge::after{animation:stepPulse 2.4s ease-out .6s infinite;}
.charter-section.process-in-view tbody tr:nth-child(2) .step-badge::after{animation:stepPulse 2.4s ease-out .95s infinite;}
.charter-section.process-in-view tbody tr:nth-child(3) .step-badge::after{animation:stepPulse 2.4s ease-out 1.3s infinite;}
.charter-section.process-in-view tbody tr:nth-child(4) .step-badge::after{animation:stepPulse 2.4s ease-out 1.65s infinite;}
.charter-section.process-in-view tbody tr:nth-child(5) .step-badge::after{animation:stepPulse 2.4s ease-out 2s infinite;}
.charter-section tbody td{
position:relative;
}
.charter-section tbody tr td:nth-child(2)::before{
content:"";
position:absolute;
left:0;
top:50%;
width:0;
height:2px;
transform:translateY(-50%);
background:linear-gradient(90deg,rgba(37,99,255,.55),rgba(8,200,255,.45),rgba(18,214,166,.32));
border-radius:999px;
opacity:.8;
}
.charter-section.process-in-view tbody tr:nth-child(1) td:nth-child(2)::before{animation:processLine 1.1s ease .25s forwards;}
.charter-section.process-in-view tbody tr:nth-child(2) td:nth-child(2)::before{animation:processLine 1.1s ease .45s forwards;}
.charter-section.process-in-view tbody tr:nth-child(3) td:nth-child(2)::before{animation:processLine 1.1s ease .65s forwards;}
.charter-section.process-in-view tbody tr:nth-child(4) td:nth-child(2)::before{animation:processLine 1.1s ease .85s forwards;}
.charter-section.process-in-view tbody tr:nth-child(5) td:nth-child(2)::before{animation:processLine 1.1s ease 1.05s forwards;}
.charter-section tbody tr td:nth-child(2){
padding-left:22px;
}
.charter-section tbody tr td:nth-child(2) strong{
color:#0a2c67;
}
.charter-meta-card{
overflow:hidden;
}
.charter-meta-card::before{
content:"";
position:absolute;
width:140px;
height:140px;
right:-46px;
top:-52px;
border-radius:50%;
background:radial-gradient(circle,rgba(8,200,255,.10),transparent 70%);
animation:civicFloatSlow 9s ease-in-out infinite alternate;
pointer-events:none;
}
@keyframes processBeam{
0%{background-position:0% 50%;}
100%{background-position:220% 50%;}
}
@keyframes processRowIn{
0%{opacity:0; transform:translateX(-24px);}
100%{opacity:1; transform:translateX(0);}
}
@keyframes processLine{
0%{width:0; opacity:.25;}
100%{width:18px; opacity:.85;}
}
@keyframes stepPulse{
0%{opacity:.65; transform:scale(.85);}
70%{opacity:0; transform:scale(1.28);}
100%{opacity:0; transform:scale(1.34);}
}
@media (max-width: 900px){
.charter-section td.step-cell{
min-width:68px;
}
.charter-section td.step-cell::after{
left:33px;
top:48px;
bottom:-16px;
}
.step-badge{
width:30px;
height:30px;
font-size:.95rem;
}
.charter-section tbody tr td:nth-child(2){
padding-left:16px;
}
}
@media (prefers-reduced-motion: reduce){
.process-flow-wrap::before,
.charter-section.process-in-view tbody tr,
.charter-section.process-in-view tbody tr td:nth-child(2)::before,
.step-badge::after{
animation:none !important;
}
.charter-section tbody tr{
opacity:1 !important;
transform:none !important;
}
}
/* ===== Feedback/Requirements bubble overlap fix ===== */
/* Keeps decorative floating bubbles from covering the actual text */
.charter-meta-card{
position: relative;
overflow: hidden;
isolation: isolate;
}
.charter-meta-card::before{
z-index: 0 !important;
width: 110px !important;
height: 110px !important;
right: -34px !important;
top: -38px !important;
opacity: .42 !important;
pointer-events: none;
}
.charter-meta-card > *{
position: relative;
z-index: 2 !important;
}
/* Slightly move the underline accent lower and keep it behind content */
.charter-meta-card::after{
z-index: 1 !important;
}
/* Mobile: make the decorative bubble even smaller */
@media (max-width: 640px){
.charter-meta-card::before{
width: 88px !important;
height: 88px !important;
right: -28px !important;
top: -30px !important;
opacity: .32 !important;
}
}
/* ===== Global Typography Balance Fix ===== */
/* Rebalances oversized hero/main text and keeps headings more proportional across all sections */
:root{
--balanced-hero-title: clamp(3.15rem, 6.1vw, 5.35rem);
--balanced-inner-hero-title: clamp(2.15rem, 4.2vw, 3.35rem);
--balanced-section-title: clamp(1.85rem, 3vw, 2.7rem);
--balanced-body-lead: clamp(1rem, 1.2vw, 1.15rem);
}
/* Main homepage hero */
.hero h1{
font-size: var(--balanced-hero-title) !important;
line-height: .96 !important;
letter-spacing: -0.055em !important;
max-width: 9.2ch;
margin-bottom: 18px !important;
}
.hero p{
font-size: var(--balanced-body-lead) !important;
line-height: 1.62 !important;
max-width: 34rem !important;
}
.hero-content{
max-width: 700px !important;
}
.hero-actions{
gap: 12px !important;
margin-top: 26px !important;
}
.hero .btn,
.hero .btn-primary,
.hero .btn-outline,
.hero .btn-soft{
padding: 12px 20px !important;
font-size: .98rem !important;
}
/* Inner page banners */
.page-hero h1{
font-size: var(--balanced-inner-hero-title) !important;
line-height: 1.02 !important;
letter-spacing: -0.04em !important;
margin-bottom: 12px !important;
}
.page-hero p{
font-size: 1.02rem !important;
line-height: 1.58 !important;
max-width: 760px;
}
/* Section titles across the site */
.section-heading h2,
.split-layout h2,
.pledge h2{
font-size: var(--balanced-section-title) !important;
line-height: 1.08 !important;
letter-spacing: -0.042em !important;
}
/* Other cards / section text balance */
.info-card h3,
.image-card h3,
.official-card h3,
.download-card h3,
.charter-meta-card h3,
.contact-card h3{
font-size: 1.45rem !important;
line-height: 1.18 !important;
}
.info-card p,
.image-card p,
.official-card p,
.download-card p,
.contact-card p,
.charter-meta-card p,
.pledge p{
font-size: 1rem !important;
line-height: 1.62 !important;
}
/* Specific rebalance for large home headings like Barangay Profile / Services etc. */
.section-heading{
max-width: 720px !important;
}
.section-heading p{
font-size: 1rem !important;
line-height: 1.62 !important;
}
/* Top eyebrow text slightly tighter */
.eyebrow{
font-size: .74rem !important;
letter-spacing: .13em !important;
}
/* Mobile / tablet tuning */
@media (max-width: 900px){
.hero h1{
font-size: clamp(2.65rem, 8.6vw, 4rem) !important;
max-width: 9.5ch;
margin-bottom: 16px !important;
}
.hero p{
font-size: 1rem !important;
max-width: 100% !important;
}
.hero-actions{
margin-top: 22px !important;
gap: 10px !important;
}
.hero .btn,
.hero .btn-primary,
.hero .btn-outline,
.hero .btn-soft{
padding: 11px 18px !important;
font-size: .95rem !important;
}
.page-hero h1{
font-size: clamp(1.95rem, 6vw, 2.7rem) !important;
}
.section-heading h2,
.split-layout h2,
.pledge h2{
font-size: clamp(1.7rem, 5.3vw, 2.2rem) !important;
}
.info-card h3,
.image-card h3,
.official-card h3,
.download-card h3,
.charter-meta-card h3,
.contact-card h3{
font-size: 1.28rem !important;
}
}
@media (max-width: 640px){
.hero h1{
font-size: clamp(2.25rem, 10vw, 3.15rem) !important;
line-height: .98 !important;
max-width: 9.8ch;
}
.hero p{
font-size: .98rem !important;
line-height: 1.58 !important;
}
.hero .btn,
.hero .btn-primary,
.hero .btn-outline,
.hero .btn-soft{
width: auto !important;
min-width: 0 !important;
}
.page-hero h1{
font-size: clamp(1.8rem, 8vw, 2.35rem) !important;
}
.section-heading h2,
.split-layout h2,
.pledge h2{
font-size: clamp(1.55rem, 7vw, 2rem) !important;
}
.info-card h3,
.image-card h3,
.official-card h3,
.download-card h3,
.charter-meta-card h3,
.contact-card h3{
font-size: 1.18rem !important;
}
.info-card p,
.image-card p,
.official-card p,
.download-card p,
.contact-card p,
.charter-meta-card p,
.pledge p,
.section-heading p{
font-size: .96rem !important;
}
}
/* ===== Footer layout balance fix ===== */
/* Makes the footer less cramped and improves spacing/readability across desktop and mobile */
.site-footer{
padding-top: 58px !important;
padding-bottom: 0 !important;
}
.footer-grid{
display: grid !important;
grid-template-columns: 1.25fr 1fr .9fr .95fr !important;
gap: 42px !important;
align-items: start !important;
max-width: 1240px;
}
.footer-grid > div{
min-width: 0;
}
.footer-brand{
display: flex !important;
align-items: center !important;
gap: 12px !important;
margin-bottom: 14px !important;
}
.footer-brand img{
width: 56px !important;
height: 56px !important;
object-fit: contain;
flex: 0 0 auto;
}
.footer-brand strong{
font-size: 1.6rem !important;
line-height: 1.1 !important;
}
.site-footer h3{
font-size: 1.4rem !important;
line-height: 1.15 !important;
margin-bottom: 16px !important;
color: #ffffff !important;
}
.site-footer p,
.site-footer li,
.site-footer a{
font-size: 1.02rem !important;
line-height: 1.65 !important;
color: rgba(255,255,255,.88) !important;
word-break: break-word;
}
.footer-links{
display: grid !important;
gap: 8px !important;
padding: 0 !important;
margin: 0 !important;
list-style: none !important;
}
.footer-links a{
display: inline-block;
text-decoration: none;
}
.footer-links a:hover,
.site-footer a:hover{
color: #ffffff !important;
}
.social-link{
display: inline-flex !important;
align-items: center;
margin-top: 12px !important;
font-weight: 700;
}
.footer-bottom{
margin-top: 34px !important;
padding: 16px 20px !important;
text-align: center !important;
font-size: .94rem !important;
line-height: 1.5 !important;
}
/* Better column widths for medium screens */
@media (max-width: 1180px){
.footer-grid{
grid-template-columns: 1.1fr 1fr 1fr 1fr !important;
gap: 28px !important;
}
.site-footer h3{
font-size: 1.25rem !important;
}
.footer-brand strong{
font-size: 1.42rem !important;
}
.site-footer p,
.site-footer li,
.site-footer a{
font-size: .98rem !important;
}
}
/* Stack cleanly on tablet */
@media (max-width: 900px){
.site-footer{
padding-top: 46px !important;
}
.footer-grid{
grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
gap: 24px 22px !important;
}
.site-footer h3{
margin-bottom: 12px !important;
}
}
/* Single-column mobile layout */
@media (max-width: 640px){
.site-footer{
padding-top: 38px !important;
}
.footer-grid{
grid-template-columns: 1fr !important;
gap: 20px !important;
}
.footer-brand{
margin-bottom: 12px !important;
}
.footer-brand strong{
font-size: 1.28rem !important;
}
.site-footer h3{
font-size: 1.12rem !important;
margin-bottom: 10px !important;
}
.site-footer p,
.site-footer li,
.site-footer a{
font-size: .95rem !important;
line-height: 1.6 !important;
}
.footer-bottom{
margin-top: 24px !important;
font-size: .88rem !important;
}
}
/* ===== Footer gap rebalance + hotline single line ===== */
/* Tightens the footer columns, improves balance, and keeps the hotline on one line */
.footer-grid{
grid-template-columns: 1.12fr 1fr .92fr 1fr !important;
gap: 24px !important;
align-items: start !important;
}
.footer-grid > div{
padding-right: 4px;
}
.site-footer p,
.site-footer li,
.site-footer a{
line-height: 1.55 !important;
}
.footer-hotline{
display: inline-block;
white-space: nowrap;
}
.social-link{
text-decoration: none;
}
.social-link:hover{
text-decoration: underline;
}
@media (max-width: 1180px){
.footer-grid{
grid-template-columns: 1.05fr 1fr .95fr 1fr !important;
gap: 20px !important;
}
}
@media (max-width: 900px){
.footer-grid{
grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
gap: 22px 18px !important;
}
.footer-hotline{
white-space: normal;
}
}
@media (max-width: 640px){
.footer-grid{
grid-template-columns: 1fr !important;
gap: 18px !important;
}
}
/* ===== Final Footer Gap Balance ===== */
/* Balances footer column spacing and removes the uneven wide gap between Quick Links and Emergency Contacts */
.site-footer{
padding-top: 48px !important;
}
.site-footer .footer-grid{
max-width: 1080px !important;
margin: 0 auto !important;
display: grid !important;
grid-template-columns: 1.12fr 1.05fr .72fr 1.05fr !important;
column-gap: 34px !important;
row-gap: 24px !important;
align-items: start !important;
}
.site-footer .footer-grid > div{
padding-right: 0 !important;
min-width: 0 !important;
}
.site-footer h3{
margin-bottom: 12px !important;
}
.site-footer p,
.site-footer li,
.site-footer a{
font-size: .94rem !important;
line-height: 1.5 !important;
}
.footer-brand{
margin-bottom: 12px !important;
}
.footer-brand img{
width: 48px !important;
height: 48px !important;
}
.footer-brand strong{
font-size: 1.28rem !important;
white-space: nowrap;
}
.footer-links{
gap: 6px !important;
}
.footer-hotline{
white-space: nowrap !important;
}
.footer-bottom{
margin-top: 40px !important;
padding: 10px 20px !important;
}
/* Medium desktop: keep columns balanced without creating a large center gap */
@media (max-width: 1200px){
.site-footer .footer-grid{
max-width: 980px !important;
grid-template-columns: 1.08fr 1.02fr .72fr 1.08fr !important;
column-gap: 28px !important;
}
.site-footer p,
.site-footer li,
.site-footer a{
font-size: .9rem !important;
}
.footer-brand strong{
font-size: 1.18rem !important;
}
}
/* Tablet */
@media (max-width: 900px){
.site-footer .footer-grid{
max-width: 720px !important;
grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
column-gap: 28px !important;
row-gap: 24px !important;
}
.footer-hotline{
white-space: normal !important;
}
}
/* Mobile */
@media (max-width: 640px){
.site-footer{
padding-top: 36px !important;
}
.site-footer .footer-grid{
max-width: 100% !important;
grid-template-columns: 1fr !important;
gap: 18px !important;
}
.footer-bottom{
margin-top: 24px !important;
}
}
/* ===== Page Hero Background Line Cleanup ===== */
/* Removes the visible horizontal/diagonal decorative lines behind inner page titles */
.page-hero{
background:
linear-gradient(115deg, rgba(8,35,78,.88) 0%, rgba(25,102,196,.72) 48%, rgba(0,173,185,.62) 100%),
url('../images/home-community-hero.jpg') center/cover no-repeat !important;
overflow: hidden !important;
}
.page-hero::before{
background:
radial-gradient(circle at 16% 24%, rgba(255,255,255,.13), transparent 15rem),
radial-gradient(circle at 84% 30%, rgba(18,214,166,.16), transparent 18rem),
linear-gradient(90deg, rgba(6,25,64,.16), transparent 55%) !important;
animation: civicHeroGlow 14s ease-in-out infinite alternate;
}
.page-hero::after{
width: 230px !important;
height: 230px !important;
right: -80px !important;
top: -70px !important;
background: radial-gradient(circle, rgba(255,255,255,.12), transparent 70%) !important;
border: 0 !important;
opacity: .65 !important;
}
/* Ensure no dotted/line pattern appears inside the page banner */
.page-hero .container::before,
.page-hero .container::after{
display: none !important;
}
@media (max-width: 640px){
.page-hero::after{
width: 150px !important;
height: 150px !important;
right: -56px !important;
top: -44px !important;
}
}
/* ===== Footer Final Alignment Balance ===== */
/* Final footer correction: equal visual spacing, compact width, and cleaner column alignment */
.site-footer{
padding-top: 52px !important;
}
.site-footer .footer-grid{
width: min(100%, 1060px) !important;
max-width: 1060px !important;
margin: 0 auto !important;
display: grid !important;
grid-template-columns: 260px 250px 160px 250px !important;
justify-content: center !important;
column-gap: 46px !important;
row-gap: 24px !important;
align-items: start !important;
}
.site-footer .footer-grid > div{
width: 100% !important;
max-width: 100% !important;
padding: 0 !important;
margin: 0 !important;
}
.footer-brand{
display: flex !important;
align-items: center !important;
gap: 12px !important;
margin-bottom: 14px !important;
}
.footer-brand img{
width: 48px !important;
height: 48px !important;
flex: 0 0 48px !important;
}
.footer-brand strong{
font-size: 1.22rem !important;
line-height: 1.15 !important;
white-space: nowrap !important;
}
.site-footer h3{
font-size: 1.28rem !important;
line-height: 1.2 !important;
margin: 0 0 14px !important;
}
.site-footer p,
.site-footer li,
.site-footer a{
font-size: .94rem !important;
line-height: 1.52 !important;
}
.footer-links{
gap: 7px !important;
}
.footer-hotline{
white-space: nowrap !important;
}
.footer-bottom{
margin-top: 42px !important;
padding: 10px 20px !important;
}
/* Medium desktop: use fluid columns but keep the same balance */
@media (max-width: 1180px){
.site-footer .footer-grid{
width: min(100%, 960px) !important;
max-width: 960px !important;
grid-template-columns: 250px 230px 150px 230px !important;
column-gap: 32px !important;
}
.site-footer p,
.site-footer li,
.site-footer a{
font-size: .9rem !important;
}
.site-footer h3{
font-size: 1.18rem !important;
}
.footer-brand strong{
font-size: 1.12rem !important;
}
}
/* Tablet: two clean rows */
@media (max-width: 900px){
.site-footer{
padding-top: 42px !important;
}
.site-footer .footer-grid{
width: min(100%, 700px) !important;
max-width: 700px !important;
grid-template-columns: 1fr 1fr !important;
column-gap: 28px !important;
row-gap: 26px !important;
justify-content: stretch !important;
}
.footer-hotline{
white-space: normal !important;
}
}
/* Mobile: single column */
@media (max-width: 640px){
.site-footer{
padding-top: 34px !important;
}
.site-footer .footer-grid{
width: 100% !important;
max-width: 100% !important;
grid-template-columns: 1fr !important;
gap: 20px !important;
}
.footer-bottom{
margin-top: 24px !important;
}
}
/* ===== Header logo + hero text rebalance ===== */
/* Makes the header logo more visible and reduces the oversized homepage hero text */
.brand{
gap: 12px !important;
padding: 9px 14px !important;
border-radius: 22px !important;
}
.brand img{
width: 58px !important;
height: 58px !important;
object-fit: contain !important;
flex: 0 0 58px !important;
}
.brand strong{
font-size: 1.55rem !important;
line-height: 1.05 !important;
}
.brand small{
font-size: .98rem !important;
line-height: 1.2 !important;
display: block !important;
margin-top: 3px !important;
}
/* Homepage hero text balance */
.hero h1{
font-size: clamp(2.8rem, 5.1vw, 4.75rem) !important;
line-height: .98 !important;
letter-spacing: -0.05em !important;
max-width: 8.2ch !important;
margin-bottom: 16px !important;
}
.hero p{
font-size: 1.04rem !important;
line-height: 1.58 !important;
max-width: 32rem !important;
}
.hero-content{
max-width: 640px !important;
}
.hero .eyebrow{
font-size: .8rem !important;
}
.hero-actions{
margin-top: 24px !important;
}
/* Keep the floating card proportional */
.hero-card{
width: min(340px, calc(100% - 40px)) !important;
}
@media (max-width: 1100px){
.brand img{
width: 54px !important;
height: 54px !important;
flex-basis: 54px !important;
}
.brand strong{
font-size: 1.36rem !important;
}
.brand small{
font-size: .92rem !important;
}
.hero h1{
font-size: clamp(2.55rem, 6vw, 4.1rem) !important;
max-width: 8.4ch !important;
}
}
@media (max-width: 900px){
.brand{
padding: 8px 10px !important;
gap: 10px !important;
}
.brand img{
width: 50px !important;
height: 50px !important;
flex-basis: 50px !important;
}
.brand strong{
font-size: 1.18rem !important;
}
.brand small{
font-size: .84rem !important;
}
.hero h1{
font-size: clamp(2.3rem, 8.4vw, 3.6rem) !important;
max-width: 8.7ch !important;
}
.hero p{
font-size: .98rem !important;
max-width: 100% !important;
}
}
@media (max-width: 640px){
.brand img{
width: 46px !important;
height: 46px !important;
flex-basis: 46px !important;
}
.brand strong{
font-size: 1.06rem !important;
}
.brand small{
font-size: .78rem !important;
}
.hero h1{
font-size: clamp(2rem, 9.5vw, 3rem) !important;
max-width: 8.8ch !important;
}
.hero p{
font-size: .95rem !important;
line-height: 1.55 !important;
}
}
/* ===== Enhanced Process Timeline Style ===== */
/* More modern animated style for the Citizen's Charter step numbers */
.charter-section td.step-cell{
width: 86px !important;
text-align: center !important;
position: relative !important;
}
.charter-section td.step-cell::after{
left: 50% !important;
top: 58px !important;
bottom: -22px !important;
width: 3px !important;
transform: translateX(-50%) !important;
border-radius: 999px !important;
background:
linear-gradient(
180deg,
rgba(37,99,255,.16),
rgba(8,200,255,.45),
rgba(18,214,166,.22)
) !important;
box-shadow: 0 0 18px rgba(8,200,255,.18);
}
.step-badge{
width: 42px !important;
height: 42px !important;
font-size: 1.08rem !important;
font-weight: 900 !important;
color: #082a63 !important;
background:
linear-gradient(135deg, rgba(255,255,255,.92), rgba(226,249,255,.92)),
radial-gradient(circle at 30% 25%, rgba(255,255,255,.95), transparent 35%) !important;
border: 1px solid rgba(37,99,255,.28) !important;
box-shadow:
0 12px 28px rgba(37,99,255,.13),
inset 0 0 0 1px rgba(255,255,255,.72),
0 0 0 7px rgba(8,200,255,.055) !important;
position: relative !important;
z-index: 2 !important;
transition: transform .28s ease, box-shadow .28s ease, background .28s ease;
}
/* small moving highlight inside each number circle */
.step-badge::before{
content: "";
position: absolute;
inset: 5px;
border-radius: 50%;
background:
linear-gradient(135deg, rgba(37,99,255,.18), transparent 45%, rgba(18,214,166,.16));
opacity: .68;
z-index: -1;
animation: stepInnerGlow 4.5s ease-in-out infinite alternate;
}
.step-badge::after{
content: "";
position: absolute;
inset: -9px !important;
border-radius: 50%;
border: 2px solid rgba(8,200,255,.20) !important;
opacity: 0;
transform: scale(.82);
}
/* active sequence pulse */
.charter-section.process-in-view tbody tr:nth-child(1) .step-badge{
animation: stepFocus 3.5s ease-in-out .2s infinite;
}
.charter-section.process-in-view tbody tr:nth-child(2) .step-badge{
animation: stepFocus 3.5s ease-in-out .55s infinite;
}
.charter-section.process-in-view tbody tr:nth-child(3) .step-badge{
animation: stepFocus 3.5s ease-in-out .9s infinite;
}
.charter-section.process-in-view tbody tr:nth-child(4) .step-badge{
animation: stepFocus 3.5s ease-in-out 1.25s infinite;
}
.charter-section.process-in-view tbody tr:nth-child(5) .step-badge{
animation: stepFocus 3.5s ease-in-out 1.6s infinite;
}
/* row turns into a soft process card on hover */
.charter-section tbody tr:hover .step-badge{
transform: scale(1.12);
background:
linear-gradient(135deg, #ffffff, #ddfbff) !important;
box-shadow:
0 16px 34px rgba(37,99,255,.18),
inset 0 0 0 1px rgba(255,255,255,.82),
0 0 0 9px rgba(18,214,166,.075) !important;
}
.charter-section tbody tr:hover td:nth-child(2){
color: #082a63 !important;
font-weight: 700;
}
/* animated progress runner beside the timeline */
.process-flow-wrap{
--runner-position: 0%;
}
.process-flow-wrap::after{
content: "";
position: absolute;
left: 39px;
top: 100px;
width: 10px;
height: 10px;
border-radius: 50%;
background: linear-gradient(135deg, #2563ff, #08c8ff, #12d6a6);
box-shadow:
0 0 0 6px rgba(8,200,255,.10),
0 0 18px rgba(8,200,255,.38);
z-index: 3;
opacity: .9;
animation: processRunner 7s ease-in-out infinite;
}
/* make table feel lighter and less rigid */
.charter-section tbody tr{
background: rgba(255,255,255,.88);
}
.charter-section tbody td{
border-bottom: 1px solid rgba(37,99,255,.075) !important;
}
@keyframes stepInnerGlow{
0%{transform: rotate(0deg) scale(.96); opacity:.48;}
100%{transform: rotate(22deg) scale(1.05); opacity:.86;}
}
@keyframes stepFocus{
0%, 74%, 100%{
transform: scale(1);
box-shadow:
0 12px 28px rgba(37,99,255,.13),
inset 0 0 0 1px rgba(255,255,255,.72),
0 0 0 7px rgba(8,200,255,.055);
}
12%{
transform: scale(1.10);
box-shadow:
0 16px 36px rgba(37,99,255,.18),
inset 0 0 0 1px rgba(255,255,255,.80),
0 0 0 10px rgba(18,214,166,.08);
}
}
@keyframes processRunner{
0%, 8%{ transform: translateY(0); opacity:.95; }
23%{ transform: translateY(62px); opacity:.95; }
38%{ transform: translateY(124px); opacity:.95; }
53%{ transform: translateY(186px); opacity:.95; }
68%{ transform: translateY(248px); opacity:.95; }
82%, 100%{ transform: translateY(248px); opacity:0; }
}
@media (max-width: 900px){
.charter-section td.step-cell{
width: 68px !important;
}
.step-badge{
width: 36px !important;
height: 36px !important;
font-size: 1rem !important;
}
.process-flow-wrap::after{
left: 33px;
}
}
@media (max-width: 640px){
.charter-section td.step-cell{
width: 58px !important;
}
.step-badge{
width: 32px !important;
height: 32px !important;
font-size: .92rem !important;
}
.process-flow-wrap::after{
display: none;
}
}
/* ===== Homepage Hero Title Short Name Fix ===== */
/* Rebalances the hero title after changing it to Barangay Hulo only */
.hero h1{
max-width: 11ch !important;
font-size: clamp(3rem, 5.4vw, 5rem) !important;
line-height: .98 !important;
letter-spacing: -0.05em !important;
}
@media (max-width: 900px){
.hero h1{
max-width: 11ch !important;
font-size: clamp(2.55rem, 8vw, 3.8rem) !important;
}
}
@media (max-width: 640px){
.hero h1{
max-width: 11ch !important;
font-size: clamp(2.3rem, 9vw, 3.1rem) !important;
}
}
/* ===== Header Brand Text Balance Fix ===== */
/* Softens the brand text color and reduces the size for better balance */
.brand{
padding: 8px 12px !important;
gap: 10px !important;
}
.brand img{
width: 54px !important;
height: 54px !important;
flex: 0 0 54px !important;
}
.brand strong{
font-size: 1.12rem !important;
line-height: 1.08 !important;
color: #16356a !important;
font-weight: 800 !important;
}
.brand small{
font-size: .84rem !important;
line-height: 1.2 !important;
color: #5a6f8d !important;
font-weight: 700 !important;
margin-top: 2px !important;
}
@media (max-width: 900px){
.brand{
padding: 7px 10px !important;
gap: 9px !important;
}
.brand img{
width: 48px !important;
height: 48px !important;
flex-basis: 48px !important;
}
.brand strong{
font-size: 1rem !important;
}
.brand small{
font-size: .78rem !important;
}
}
@media (max-width: 640px){
.brand img{
width: 44px !important;
height: 44px !important;
flex-basis: 44px !important;
}
.brand strong{
font-size: .94rem !important;
}
.brand small{
font-size: .74rem !important;
}
}
/* ===== Footer Clean Balanced Final Fix ===== */
/* Cleaner footer: smaller text, better spacing, less cramped layout */
.site-footer{
padding-top: 42px !important;
padding-bottom: 0 !important;
}
.site-footer .footer-grid{
width: min(100%, 960px) !important;
max-width: 960px !important;
margin: 0 auto !important;
display: grid !important;
grid-template-columns: 1.02fr 1fr .82fr 1fr !important;
column-gap: 30px !important;
row-gap: 20px !important;
align-items: start !important;
justify-content: center !important;
}
.site-footer .footer-grid > div{
min-width: 0 !important;
padding: 0 !important;
margin: 0 !important;
}
.footer-brand{
display: flex !important;
align-items: center !important;
gap: 10px !important;
margin-bottom: 12px !important;
}
.footer-brand img{
width: 44px !important;
height: 44px !important;
flex: 0 0 44px !important;
}
.footer-brand strong{
font-size: 1.02rem !important;
line-height: 1.1 !important;
font-weight: 800 !important;
}
.site-footer h3{
font-size: 1rem !important;
line-height: 1.2 !important;
margin: 0 0 10px !important;
font-weight: 800 !important;
}
.site-footer p,
.site-footer li,
.site-footer a{
font-size: 0.84rem !important;
line-height: 1.45 !important;
color: rgba(255,255,255,.90) !important;
}
.footer-links{
gap: 4px !important;
}
.footer-hotline{
white-space: nowrap !important;
}
.social-link{
margin-top: 8px !important;
font-size: 0.84rem !important;
}
.footer-bottom{
margin-top: 24px !important;
padding: 10px 18px !important;
font-size: 0.8rem !important;
line-height: 1.4 !important;
}
/* Keep the footer compact on medium screens */
@media (max-width: 1100px){
.site-footer .footer-grid{
width: min(100%, 900px) !important;
max-width: 900px !important;
grid-template-columns: 1fr 1fr .85fr 1fr !important;
column-gap: 22px !important;
}
.footer-hotline{
white-space: normal !important;
}
}
/* Tablet */
@media (max-width: 900px){
.site-footer{
padding-top: 36px !important;
}
.site-footer .footer-grid{
width: min(100%, 700px) !important;
max-width: 700px !important;
grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
column-gap: 22px !important;
row-gap: 20px !important;
}
}
/* Mobile */
@media (max-width: 640px){
.site-footer{
padding-top: 30px !important;
}
.site-footer .footer-grid{
width: 100% !important;
max-width: 100% !important;
grid-template-columns: 1fr !important;
gap: 16px !important;
}
.footer-bottom{
margin-top: 20px !important;
font-size: 0.76rem !important;
}
}
/* ===== Officials Bluish Background Refresh ===== */
/* Gives the officials cards a soft bluish background for a cleaner civic look */
.official-card{
background: linear-gradient(180deg, rgba(245,249,255,.98), rgba(234,242,255,.96)) !important;
border: 1px solid rgba(82,125,210,.18) !important;
box-shadow: 0 16px 36px rgba(21, 66, 140, .08) !important;
}
.official-card:hover{
background: linear-gradient(180deg, rgba(247,251,255,.99), rgba(230,240,255,.98)) !important;
border-color: rgba(63,118,235,.24) !important;
box-shadow: 0 20px 44px rgba(21, 66, 140, .12) !important;
}
.official-card img{
border-color: rgba(255,255,255,.88) !important;
box-shadow:
0 10px 24px rgba(21, 66, 140, .10),
0 0 0 1px rgba(126, 162, 232, .22) !important;
}
.official-card h3{
color: #16356a !important;
}
.official-card span{
color: #2962ff !important;
}
.official-card p{
color: #5f7394 !important;
}
/* Featured Punong Barangay block also gets a matching soft bluish tone */
.official-mini{
background: linear-gradient(180deg, rgba(246,250,255,.96), rgba(236,244,255,.95)) !important;
border: 1px solid rgba(82,125,210,.16) !important;
box-shadow: 0 18px 40px rgba(21, 66, 140, .08) !important;
}
.official-mini strong{
color: #16356a !important;
}
.official-mini span{
color: #2962ff !important;
}
/* ===== Footer spacing rebalance override ===== */
/* Final override: equalizes footer column spacing, reduces cramped text, and cleans the layout */
.site-footer{
padding-top: 44px !important;
padding-bottom: 0 !important;
}
.site-footer .container{
max-width: 1120px !important;
}
.site-footer .footer-grid{
width: min(100%, 1000px) !important;
max-width: 1000px !important;
margin: 0 auto !important;
display: grid !important;
grid-template-columns: minmax(220px, 1.18fr) minmax(220px, 1.08fr) minmax(150px, .82fr) minmax(220px, 1fr) !important;
column-gap: 40px !important;
row-gap: 18px !important;
align-items: start !important;
justify-content: center !important;
}
.site-footer .footer-grid > div{
min-width: 0 !important;
width: 100% !important;
padding: 0 !important;
margin: 0 !important;
}
.footer-brand{
display: flex !important;
align-items: center !important;
gap: 10px !important;
margin-bottom: 12px !important;
}
.footer-brand img{
width: 42px !important;
height: 42px !important;
flex: 0 0 42px !important;
}
.footer-brand strong{
font-size: 1rem !important;
line-height: 1.08 !important;
font-weight: 800 !important;
}
.site-footer h3{
font-size: 1rem !important;
line-height: 1.18 !important;
margin: 0 0 10px !important;
font-weight: 800 !important;
}
.site-footer p,
.site-footer li,
.site-footer a{
font-size: .84rem !important;
line-height: 1.48 !important;
color: rgba(255,255,255,.90) !important;
}
.footer-links{
gap: 5px !important;
}
.footer-hotline{
white-space: nowrap !important;
}
.social-link{
margin-top: 8px !important;
font-size: .84rem !important;
}
.footer-bottom{
margin-top: 24px !important;
padding: 10px 18px !important;
font-size: .79rem !important;
line-height: 1.4 !important;
}
/* Slightly tighter on medium desktops while keeping the balance */
@media (max-width: 1150px){
.site-footer .footer-grid{
width: min(100%, 940px) !important;
max-width: 940px !important;
grid-template-columns: minmax(210px, 1.12fr) minmax(210px, 1.02fr) minmax(145px, .82fr) minmax(210px, .98fr) !important;
column-gap: 30px !important;
}
.footer-hotline{
white-space: normal !important;
}
}
/* Tablet */
@media (max-width: 900px){
.site-footer{
padding-top: 36px !important;
}
.site-footer .footer-grid{
width: min(100%, 720px) !important;
max-width: 720px !important;
grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
column-gap: 24px !important;
row-gap: 20px !important;
}
}
/* Mobile */
@media (max-width: 640px){
.site-footer{
padding-top: 30px !important;
}
.site-footer .footer-grid{
width: 100% !important;
max-width: 100% !important;
grid-template-columns: 1fr !important;
gap: 16px !important;
}
.footer-bottom{
margin-top: 20px !important;
font-size: .75rem !important;
}
}
/* ===== Footer emergency contacts reorder + final gap fix ===== */
/* Removes Facebook link spacing, tightens Quick Links to Emergency Contacts gap, and keeps contact lines clean */
.site-footer .footer-grid{
width: min(100%, 900px) !important;
max-width: 900px !important;
margin: 0 auto !important;
display: grid !important;
grid-template-columns: 1.05fr 1fr .72fr 1.05fr !important;
column-gap: 22px !important;
row-gap: 18px !important;
justify-content: center !important;
align-items: start !important;
}
.site-footer .footer-grid > div{
min-width: 0 !important;
padding: 0 !important;
margin: 0 !important;
}
.site-footer h3{
margin-bottom: 9px !important;
font-size: .96rem !important;
}
.site-footer p,
.site-footer li,
.site-footer a{
font-size: .82rem !important;
line-height: 1.42 !important;
}
.footer-links{
gap: 4px !important;
}
.footer-hotline{
display: inline !important;
white-space: nowrap !important;
}
.social-link{
display: none !important;
}
.footer-bottom{
margin-top: 22px !important;
}
/* Bring Emergency Contacts closer to Quick Links on desktop */
.site-footer .footer-grid > div:nth-child(4){
margin-left: -6px !important;
}
/* Keep Contact Information from pushing too wide */
.site-footer .footer-grid > div:nth-child(2){
max-width: 220px !important;
}
.site-footer .footer-grid > div:nth-child(3){
max-width: 150px !important;
}
.site-footer .footer-grid > div:nth-child(4){
max-width: 230px !important;
}
@media (max-width: 1100px){
.site-footer .footer-grid{
width: min(100%, 860px) !important;
max-width: 860px !important;
grid-template-columns: 1.05fr 1fr .72fr 1.05fr !important;
column-gap: 18px !important;
}
.footer-hotline{
white-space: normal !important;
}
.site-footer .footer-grid > div:nth-child(4){
margin-left: 0 !important;
}
}
@media (max-width: 900px){
.site-footer .footer-grid{
width: min(100%, 700px) !important;
max-width: 700px !important;
grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
column-gap: 22px !important;
row-gap: 20px !important;
}
.site-footer .footer-grid > div:nth-child(2),
.site-footer .footer-grid > div:nth-child(3),
.site-footer .footer-grid > div:nth-child(4){
max-width: none !important;
}
}
@media (max-width: 640px){
.site-footer .footer-grid{
width: 100% !important;
max-width: 100% !important;
grid-template-columns: 1fr !important;
gap: 16px !important;
}
}
/* ===== Contact Section Modern Refresh ===== */
.contact-modern-section{
position: relative;
}
.contact-grid-modern{
grid-template-columns: .92fr 1.08fr !important;
gap: 20px !important;
align-items: stretch !important;
max-width: 1160px;
}
.contact-card-modern,
.contact-form-modern{
padding: 24px !important;
border-radius: 28px !important;
background:
linear-gradient(180deg, rgba(255,255,255,.97), rgba(246,250,255,.96)) !important;
border: 1px solid rgba(86, 129, 216, .14) !important;
box-shadow: 0 18px 44px rgba(22, 53, 106, .07) !important;
}
.contact-card-header{
margin-bottom: 18px;
}
.contact-card-header h2{
margin: 10px 0 8px !important;
font-size: clamp(1.7rem, 2.6vw, 2.25rem) !important;
line-height: 1.08 !important;
color: #112d61 !important;
}
.contact-card-header p{
margin: 0 !important;
color: #607595 !important;
line-height: 1.58 !important;
font-size: .98rem !important;
}
.contact-chip{
display: inline-flex;
align-items: center;
gap: 8px;
padding: 8px 12px;
border-radius: 999px;
background: linear-gradient(90deg, rgba(37,99,255,.12), rgba(8,200,255,.10));
color: #1d4ed8;
font-size: .78rem;
font-weight: 800;
letter-spacing: .08em;
text-transform: uppercase;
}
.contact-info-list{
display: grid;
gap: 12px;
}
.contact-info-row{
display: grid;
grid-template-columns: 128px 1fr;
gap: 12px;
padding: 12px 14px;
border-radius: 18px;
background: rgba(247,250,255,.92);
border: 1px solid rgba(86,129,216,.10);
}
.contact-info-label{
font-weight: 800;
color: #20427b;
}
.contact-info-value{
color: #5f7394;
line-height: 1.5;
}
.emergency-box-modern{
margin-top: 18px !important;
padding: 18px 20px !important;
border-radius: 22px !important;
display: flex;
align-items: center;
justify-content: space-between;
gap: 16px;
background: linear-gradient(135deg, rgba(255,247,223,.95), rgba(240,255,247,.96)) !important;
border: 1px solid rgba(247,201,72,.36) !important;
box-shadow: inset 0 1px 0 rgba(255,255,255,.65);
}
.emergency-box-modern strong{
display: block;
color: #7a5700;
font-size: 1rem;
margin-bottom: 4px;
}
.emergency-box-modern small{
display: block;
color: #8a6a19;
font-size: .84rem;
}
.emergency-box-modern span{
font-size: 1.28rem;
font-weight: 800;
color: #855c00;
white-space: nowrap;
}
.contact-form-modern{
gap: 14px !important;
}
.contact-form-modern .form-row{
gap: 14px !important;
}
.contact-form-modern label{
gap: 8px !important;
font-size: .98rem;
font-weight: 800;
color: #16356a !important;
}
.contact-form-modern input,
.contact-form-modern textarea{
border-radius: 16px !important;
border: 1px solid rgba(86,129,216,.16) !important;
background: rgba(255,255,255,.96) !important;
padding: 14px 16px !important;
box-shadow: inset 0 1px 0 rgba(255,255,255,.7);
}
.contact-form-modern input:focus,
.contact-form-modern textarea:focus{
border-color: rgba(8,200,255,.55) !important;
box-shadow: 0 0 0 4px rgba(8,200,255,.10) !important;
}
.contact-form-modern textarea{
min-height: 180px !important;
}
.contact-form-modern .btn{
width: 100%;
border-radius: 999px !important;
padding: 14px 22px !important;
font-size: 1rem !important;
font-weight: 800 !important;
margin-top: 2px;
}
@media (max-width: 900px){
.contact-grid-modern{
grid-template-columns: 1fr !important;
gap: 18px !important;
}
.contact-card-modern,
.contact-form-modern{
padding: 22px !important;
border-radius: 24px !important;
}
.contact-info-row{
grid-template-columns: 1fr;
gap: 6px;
}
.emergency-box-modern{
flex-direction: column;
align-items: flex-start;
}
}
@media (max-width: 640px){
.contact-card-modern,
.contact-form-modern{
padding: 18px !important;
border-radius: 22px !important;
}
.contact-card-header h2{
font-size: clamp(1.45rem, 7vw, 1.9rem) !important;
}
.contact-form-modern .form-row{
grid-template-columns: 1fr !important;
}
.contact-form-modern textarea{
min-height: 150px !important;
}
.emergency-box-modern span{
font-size: 1.12rem;
}
}
/* ===== TRUE FINAL FOOTER GAP FIX ===== */
/* Uses fixed footer column widths so the spacing is visually even and no column floats too far away. */
.site-footer{
padding-top: 42px !important;
}
.site-footer .footer-grid{
width: 100% !important;
max-width: 920px !important;
margin: 0 auto !important;
display: flex !important;
justify-content: center !important;
align-items: flex-start !important;
gap: 28px !important;
}
.site-footer .footer-grid > div{
padding: 0 !important;
margin: 0 !important;
min-width: 0 !important;
flex: 0 0 auto !important;
}
.site-footer .footer-grid > div:nth-child(1){
width: 220px !important;
}
.site-footer .footer-grid > div:nth-child(2){
width: 220px !important;
}
.site-footer .footer-grid > div:nth-child(3){
width: 145px !important;
}
.site-footer .footer-grid > div:nth-child(4){
width: 225px !important;
margin-left: 0 !important;
}
.footer-brand{
gap: 10px !important;
margin-bottom: 12px !important;
}
.footer-brand img{
width: 42px !important;
height: 42px !important;
flex: 0 0 42px !important;
}
.footer-brand strong{
font-size: 1rem !important;
line-height: 1.1 !important;
}
.site-footer h3{
font-size: 1rem !important;
line-height: 1.18 !important;
margin: 0 0 10px !important;
}
.site-footer p,
.site-footer li,
.site-footer a{
font-size: .84rem !important;
line-height: 1.42 !important;
}
.footer-links{
gap: 4px !important;
}
.footer-hotline{
white-space: nowrap !important;
}
.footer-bottom{
margin-top: 24px !important;
padding: 10px 18px !important;
font-size: .78rem !important;
}
/* Tablet: two balanced columns */
@media (max-width: 900px){
.site-footer .footer-grid{
max-width: 680px !important;
display: grid !important;
grid-template-columns: 1fr 1fr !important;
gap: 22px !important;
}
.site-footer .footer-grid > div{
width: auto !important;
}
.footer-hotline{
white-space: normal !important;
}
}
/* Mobile: single column */
@media (max-width: 640px){
.site-footer{
padding-top: 32px !important;
}
.site-footer .footer-grid{
max-width: 100% !important;
grid-template-columns: 1fr !important;
gap: 16px !important;
}
.footer-bottom{
margin-top: 20px !important;
}
}
/* ===== Contact emergency box cleanup ===== */
/* Removes excess vertical space and balances the Emergency Hotline box */
.emergency-box-modern{
margin-top: 16px !important;
padding: 16px 20px !important;
min-height: auto !important;
border-radius: 20px !important;
align-items: center !important;
}
.emergency-box-modern div{
display: flex;
align-items: center;
min-height: auto !important;
}
.emergency-box-modern strong{
margin-bottom: 0 !important;
font-size: 1.02rem !important;
line-height: 1.2 !important;
}
.emergency-box-modern small{
display: none !important;
}
.emergency-box-modern span{
font-size: 1.18rem !important;
line-height: 1 !important;
}
@media (max-width: 640px){
.emergency-box-modern{
padding: 14px 16px !important;
gap: 10px !important;
}
.emergency-box-modern span{
font-size: 1.05rem !important;
}
}
/* ===== Footer email single-line cleanup ===== */
/* Removes office hours in footer and keeps the email on one line */
.footer-email{
white-space: nowrap !important;
display: inline-block;
}
@media (max-width: 1100px){
.footer-email{
white-space: normal !important;
word-break: break-word;
}
}
/* ===== Featured Punong Barangay image animation removal ===== */
/* Keeps the featured official image steady with no floating/hover animation */
.official-mini img,
.official-mini:hover img{
animation: none !important;
transform: none !important;
transition: none !important;
}
.official-mini:hover{
transform: none !important;
}
/* Prevent any general card/image hover rule from affecting the featured official image */
.official-mini img:hover{
transform: none !important;
animation: none !important;
}
/* ===== Header Modern Balanced Refresh ===== */
/* Cleaner, more modern, and better-balanced branding + navigation */
.site-header{
background: rgba(255,255,255,.88) !important;
backdrop-filter: blur(20px) saturate(1.05) !important;
border-bottom: 1px solid rgba(99, 136, 204, .12) !important;
box-shadow: 0 10px 28px rgba(9, 39, 91, .06) !important;
}
.site-header.scrolled{
background: rgba(255,255,255,.94) !important;
box-shadow: 0 14px 36px rgba(9, 39, 91, .09) !important;
}
.site-header .container{
max-width: 1280px !important;
}
.navbar{
min-height: 74px !important;
gap: 24px !important;
padding-top: 8px !important;
padding-bottom: 8px !important;
}
.brand{
display: flex !important;
align-items: center !important;
gap: 12px !important;
padding: 8px 14px !important;
border-radius: 22px !important;
background: linear-gradient(180deg, rgba(255,255,255,.88), rgba(245,249,255,.86)) !important;
border: 1px solid rgba(90, 131, 212, .12) !important;
box-shadow: 0 10px 24px rgba(21, 66, 140, .06) !important;
}
.brand img{
width: 52px !important;
height: 52px !important;
border-radius: 16px !important;
filter: drop-shadow(0 8px 14px rgba(13,71,161,.10)) !important;
}
.brand strong{
font-size: 1rem !important;
line-height: 1.08 !important;
color: #173a74 !important;
font-weight: 800 !important;
letter-spacing: -.02em !important;
}
.brand small{
font-size: .74rem !important;
line-height: 1.18 !important;
margin-top: 3px !important;
color: #5f7696 !important;
font-weight: 700 !important;
}
.nav-menu{
display: flex !important;
align-items: center !important;
justify-content: flex-end !important;
gap: 2px !important;
flex-wrap: wrap !important;
}
.nav-link{
position: relative !important;
padding: 10px 12px !important;
border-radius: 12px !important;
font-size: .83rem !important;
font-weight: 800 !important;
color: #233d62 !important;
background: transparent !important;
box-shadow: none !important;
transition: color .22s ease, background .22s ease, transform .22s ease !important;
}
.nav-link:hover{
color: #1d6ed0 !important;
background: rgba(37,99,255,.05) !important;
transform: translateY(-1px);
}
.nav-link.active{
color: #2a62ff !important;
background: rgba(42,98,255,.06) !important;
}
.nav-link::after{
content: "" !important;
position: absolute !important;
left: 14px !important;
right: 14px !important;
bottom: 5px !important;
height: 2px !important;
border-radius: 999px !important;
background: linear-gradient(90deg, #2563ff, #11c7d9) !important;
transform: scaleX(0) !important;
transform-origin: center !important;
transition: transform .22s ease !important;
display: block !important;
}
.nav-link:hover::after,
.nav-link.active::after{
transform: scaleX(1) !important;
}
.menu-toggle{
width: 44px !important;
height: 44px !important;
border-radius: 14px !important;
box-shadow: 0 10px 20px rgba(21,101,216,.14) !important;
}
/* Large desktop: slightly tighter link spacing for a more balanced full header */
@media (max-width: 1250px){
.site-header .container{
max-width: 1180px !important;
}
.nav-link{
padding: 9px 10px !important;
font-size: .8rem !important;
}
.navbar{
gap: 18px !important;
}
}
/* Tablet */
@media (max-width: 900px){
.navbar{
min-height: 70px !important;
gap: 12px !important;
}
.brand{
padding: 7px 10px !important;
gap: 10px !important;
}
.brand img{
width: 46px !important;
height: 46px !important;
}
.brand strong{
font-size: .94rem !important;
}
.brand small{
font-size: .7rem !important;
}
}
/* Mobile */
@media (max-width: 640px){
.site-header{
backdrop-filter: blur(16px) !important;
}
.navbar{
min-height: 66px !important;
padding-top: 6px !important;
padding-bottom: 6px !important;
}
.brand{
padding: 6px 8px !important;
border-radius: 18px !important;
}
.brand img{
width: 42px !important;
height: 42px !important;
}
.brand strong{
font-size: .9rem !important;
}
.brand small{
font-size: .68rem !important;
}
}
/* ===== Header Wrap Fix / Clean Balanced Navigation ===== */
/* Fixes the messy two-line navigation and keeps the menu balanced on desktop */
.site-header .container{
max-width: 1440px !important;
width: min(100% - 32px, 1440px) !important;
}
.navbar{
min-height: 74px !important;
display: flex !important;
align-items: center !important;
justify-content: space-between !important;
gap: 18px !important;
}
.brand{
flex: 0 0 auto !important;
padding: 7px 12px !important;
gap: 10px !important;
border-radius: 20px !important;
}
.brand img{
width: 48px !important;
height: 48px !important;
flex: 0 0 48px !important;
}
.brand strong{
font-size: .98rem !important;
line-height: 1.05 !important;
}
.brand small{
font-size: .72rem !important;
line-height: 1.15 !important;
}
.nav-menu{
flex: 1 1 auto !important;
display: flex !important;
align-items: center !important;
justify-content: flex-end !important;
gap: 4px !important;
flex-wrap: nowrap !important;
min-width: 0 !important;
}
.nav-link{
flex: 0 0 auto !important;
white-space: nowrap !important;
padding: 8px 8px !important;
font-size: .76rem !important;
line-height: 1 !important;
border-radius: 10px !important;
background: transparent !important;
box-shadow: none !important;
color: #18365f !important;
}
/* Keep active/hover clean and not bulky */
.nav-link:hover,
.nav-link.active{
color: #2563ff !important;
background: transparent !important;
box-shadow: none !important;
transform: none !important;
}
.nav-link::after{
left: 8px !important;
right: 8px !important;
bottom: 1px !important;
height: 2px !important;
}
/* For smaller laptops/tablets, let the existing mobile menu take over earlier */
@media (max-width: 1180px){
.nav-menu{
flex-wrap: wrap !important;
justify-content: flex-end !important;
row-gap: 4px !important;
}
.nav-link{
font-size: .74rem !important;
padding: 7px 7px !important;
}
}
/* Mobile menu mode */
@media (max-width: 900px){
.site-header .container{
width: min(100% - 24px, 1440px) !important;
}
.nav-menu{
flex-wrap: nowrap !important;
}
.brand img{
width: 44px !important;
height: 44px !important;
flex-basis: 44px !important;
}
}
/* ===== Hero Emergency Card Redesign ===== */
/* Stronger emergency look with balanced styling and subtle animation */
.hero-emergency-card{
position: absolute !important;
right: 6% !important;
bottom: 54px !important;
width: min(390px, calc(100% - 40px)) !important;
padding: 20px 20px 18px !important;
border-radius: 26px !important;
background:
linear-gradient(180deg, rgba(255,255,255,.97), rgba(246,250,255,.94)) !important;
border: 1px solid rgba(102,130,214,.16) !important;
box-shadow:
0 18px 44px rgba(10, 39, 88, .16),
inset 0 1px 0 rgba(255,255,255,.75) !important;
overflow: hidden !important;
}
.hero-emergency-card::before{
content: "" !important;
position: absolute !important;
inset: 0 auto auto 0 !important;
width: 100% !important;
height: 6px !important;
border-radius: 26px 26px 0 0 !important;
background: linear-gradient(90deg, #2563ff 0%, #12cde2 58%, #f1ca53 100%) !important;
display: block !important;
}
.hero-emergency-card::after{
content: "" !important;
position: absolute !important;
right: -34px !important;
top: -34px !important;
width: 120px !important;
height: 120px !important;
border-radius: 50% !important;
background: radial-gradient(circle, rgba(18,205,226,.14), transparent 70%) !important;
animation: emergencyOrbFloat 7s ease-in-out infinite alternate !important;
}
.emergency-card-top{
display: flex !important;
align-items: center !important;
justify-content: space-between !important;
gap: 12px !important;
margin-bottom: 10px !important;
position: relative;
z-index: 1;
}
.emergency-pill{
display: inline-flex !important;
align-items: center !important;
gap: 8px !important;
padding: 8px 12px !important;
border-radius: 999px !important;
background: linear-gradient(90deg, rgba(220,239,255,.82), rgba(236,249,255,.9)) !important;
border: 1px solid rgba(74,131,232,.18) !important;
color: #1d4ed8 !important;
font-size: .78rem !important;
font-weight: 800 !important;
letter-spacing: .04em !important;
text-transform: uppercase !important;
}
.emergency-dot{
width: 10px !important;
height: 10px !important;
display: inline-block !important;
border-radius: 50% !important;
background: #ff5b57 !important;
box-shadow: 0 0 0 0 rgba(255,91,87,.45);
animation: emergencyPulse 1.9s infinite !important;
}
.emergency-status{
display: inline-flex !important;
align-items: center !important;
justify-content: center !important;
min-width: 58px !important;
padding: 7px 10px !important;
border-radius: 999px !important;
background: linear-gradient(135deg, rgba(255,244,211,.96), rgba(255,250,229,.96)) !important;
border: 1px solid rgba(241,202,83,.40) !important;
color: #8a6400 !important;
font-weight: 900 !important;
font-size: .78rem !important;
position: relative;
z-index: 1;
}
.hero-emergency-card strong{
display: block !important;
color: #173a74 !important;
font-size: 1.18rem !important;
line-height: 1.15 !important;
margin-bottom: 8px !important;
position: relative;
z-index: 1;
}
.hero-hotline-number{
font-size: 2.15rem !important;
font-weight: 900 !important;
line-height: 1 !important;
color: #2563ff !important;
letter-spacing: -.03em !important;
margin-bottom: 10px !important;
position: relative;
z-index: 1;
}
.hero-emergency-card p{
margin: 0 0 14px !important;
color: #667a96 !important;
font-size: .95rem !important;
line-height: 1.5 !important;
max-width: none !important;
position: relative;
z-index: 1;
}
.hero-emergency-grid{
display: grid !important;
grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
gap: 10px !important;
position: relative;
z-index: 1;
}
.hero-emergency-item{
padding: 12px 10px !important;
border-radius: 16px !important;
background: rgba(245,249,255,.95) !important;
border: 1px solid rgba(92,132,212,.12) !important;
text-align: center !important;
transition: transform .22s ease, box-shadow .22s ease !important;
}
.hero-emergency-item:hover{
transform: translateY(-2px) !important;
box-shadow: 0 10px 24px rgba(21,66,140,.08) !important;
}
.hero-emergency-item label{
display: block !important;
margin-bottom: 5px !important;
font-size: .68rem !important;
text-transform: uppercase !important;
letter-spacing: .05em !important;
font-weight: 800 !important;
color: #7287a5 !important;
}
.hero-emergency-item span{
display: block !important;
font-size: 1.05rem !important;
font-weight: 900 !important;
color: #12356f !important;
line-height: 1 !important;
margin: 0 !important;
}
@keyframes emergencyPulse{
0%{ box-shadow: 0 0 0 0 rgba(255,91,87,.46); }
70%{ box-shadow: 0 0 0 10px rgba(255,91,87,0); }
100%{ box-shadow: 0 0 0 0 rgba(255,91,87,0); }
}
@keyframes emergencyOrbFloat{
0%{ transform: translateY(0) scale(1); opacity: .72; }
100%{ transform: translateY(12px) scale(1.06); opacity: .98; }
}
@media (max-width: 900px){
.hero-emergency-card{
right: 20px !important;
bottom: 24px !important;
width: min(360px, calc(100% - 24px)) !important;
padding: 18px 18px 16px !important;
}
.hero-hotline-number{
font-size: 1.95rem !important;
}
.hero-emergency-grid{
gap: 8px !important;
}
}
@media (max-width: 640px){
.hero-emergency-card{
position: relative !important;
right: auto !important;
bottom: auto !important;
margin: 18px 16px 0 auto !important;
width: calc(100% - 32px) !important;
}
.hero-hotline-number{
font-size: 1.72rem !important;
}
.hero-emergency-grid{
grid-template-columns: 1fr !important;
}
.hero-emergency-item{
text-align: left !important;
padding: 10px 12px !important;
}
}
/* ===== Alternative Emergency Card Design ===== */
/* Stronger emergency look with animated siren/beacon and more alert-focused styling */
.hero-emergency-card.emergency-card-alt{
width: min(420px, calc(100% - 40px)) !important;
padding: 18px 18px 16px !important;
border-radius: 28px !important;
background:
linear-gradient(180deg, rgba(255,255,255,.97), rgba(248,250,255,.95)) !important;
border: 1px solid rgba(255,255,255,.55) !important;
box-shadow:
0 18px 50px rgba(7, 25, 58, .22),
inset 0 1px 0 rgba(255,255,255,.86) !important;
}
.hero-emergency-card.emergency-card-alt::before{
height: 7px !important;
background: linear-gradient(90deg, #ff5252 0%, #ff8a3d 30%, #12cde2 70%, #94d54e 100%) !important;
animation: emergencyBarShift 5s linear infinite !important;
background-size: 220% 100% !important;
}
.hero-emergency-card.emergency-card-alt::after{
content: "" !important;
position: absolute !important;
inset: 0 !important;
width: auto !important;
height: auto !important;
border-radius: 28px !important;
background:
linear-gradient(120deg, transparent 0%, rgba(255,255,255,.08) 42%, rgba(255,255,255,.36) 50%, transparent 58%) !important;
background-size: 220% 100% !important;
animation: emergencySweep 6.8s ease-in-out infinite !important;
pointer-events: none !important;
}
.emergency-pill-live{
background: linear-gradient(90deg, rgba(255,236,236,.95), rgba(246,247,255,.96)) !important;
border-color: rgba(255,102,102,.24) !important;
color: #d62839 !important;
}
.emergency-status-alert{
background: linear-gradient(135deg, rgba(255,243,213,.98), rgba(255,249,231,.98)) !important;
border-color: rgba(241,202,83,.42) !important;
color: #8e6300 !important;
box-shadow: 0 0 0 0 rgba(241,202,83,.24);
animation: statusGlow 2.8s ease-in-out infinite !important;
}
.emergency-main-row{
display: grid !important;
grid-template-columns: 1fr auto !important;
gap: 14px !important;
align-items: center !important;
margin-bottom: 8px !important;
position: relative;
z-index: 1;
}
.emergency-copy{
min-width: 0;
}
.emergency-card-alt strong{
color: #12346a !important;
font-size: 1.16rem !important;
margin-bottom: 8px !important;
}
.emergency-card-alt .hero-hotline-number{
color: #2563ff !important;
font-size: 2.28rem !important;
text-shadow: 0 8px 20px rgba(37,99,255,.10);
}
.emergency-siren-badge{
width: 70px !important;
height: 70px !important;
border-radius: 50% !important;
position: relative !important;
display: grid !important;
place-items: center !important;
background:
radial-gradient(circle at 35% 30%, rgba(255,255,255,.86), rgba(255,255,255,.18) 28%, transparent 29%),
linear-gradient(135deg, #ff5252, #ff8a3d) !important;
box-shadow:
0 14px 26px rgba(214,40,57,.22),
inset 0 -8px 16px rgba(150,25,33,.16) !important;
overflow: visible !important;
}
.emergency-siren-badge i{
font-style: normal !important;
font-size: .88rem !important;
font-weight: 900 !important;
color: #fff !important;
letter-spacing: .06em !important;
z-index: 3 !important;
}
.emergency-siren-badge span{
position: absolute !important;
inset: -8px !important;
border-radius: 50% !important;
border: 2px solid rgba(255,94,94,.26) !important;
animation: sirenRing 2.1s ease-out infinite !important;
}
.emergency-siren-badge span:nth-child(2){
animation-delay: 1.05s !important;
}
.emergency-card-alt p{
color: #677b97 !important;
margin-bottom: 14px !important;
}
.emergency-card-alt .hero-emergency-grid{
gap: 10px !important;
margin-bottom: 12px !important;
}
.emergency-card-alt .hero-emergency-item{
background: linear-gradient(180deg, rgba(252,253,255,.98), rgba(243,247,255,.98)) !important;
border: 1px solid rgba(89,127,208,.14) !important;
position: relative !important;
overflow: hidden !important;
}
.emergency-card-alt .hero-emergency-item::before{
content: "" !important;
position: absolute !important;
left: 0 !important;
top: 0 !important;
width: 100% !important;
height: 3px !important;
background: linear-gradient(90deg, rgba(255,82,82,.78), rgba(255,138,61,.72), rgba(37,99,255,.66)) !important;
opacity: .8 !important;
}
.emergency-card-alt .hero-emergency-item:hover{
transform: translateY(-3px) !important;
box-shadow: 0 12px 24px rgba(20, 64, 139, .10) !important;
}
.emergency-action-strip{
display: flex !important;
align-items: center !important;
justify-content: space-between !important;
gap: 10px !important;
padding-top: 2px !important;
position: relative;
z-index: 1;
}
.emergency-action-label{
color: #d62839 !important;
font-size: .78rem !important;
font-weight: 900 !important;
text-transform: uppercase !important;
letter-spacing: .08em !important;
}
.emergency-action-chip{
display: inline-flex !important;
align-items: center !important;
justify-content: center !important;
padding: 8px 12px !important;
border-radius: 999px !important;
background: linear-gradient(90deg, rgba(37,99,255,.10), rgba(18,205,226,.16)) !important;
border: 1px solid rgba(37,99,255,.12) !important;
color: #184cae !important;
font-size: .78rem !important;
font-weight: 800 !important;
}
@keyframes sirenRing{
0%{ transform: scale(.84); opacity: .7; }
100%{ transform: scale(1.38); opacity: 0; }
}
@keyframes emergencySweep{
0%, 15%{ background-position: 150% 0; opacity: 0; }
32%{ background-position: 0 0; opacity: .8; }
50%, 100%{ background-position: -120% 0; opacity: 0; }
}
@keyframes emergencyBarShift{
0%{ background-position: 0% 50%; }
100%{ background-position: 220% 50%; }
}
@keyframes statusGlow{
0%,100%{ box-shadow: 0 0 0 0 rgba(241,202,83,.20); }
50%{ box-shadow: 0 0 0 8px rgba(241,202,83,0); }
}
@media (max-width: 900px){
.hero-emergency-card.emergency-card-alt{
width: min(390px, calc(100% - 24px)) !important;
}
.emergency-card-alt .hero-hotline-number{
font-size: 2rem !important;
}
.emergency-siren-badge{
width: 62px !important;
height: 62px !important;
}
}
@media (max-width: 640px){
.hero-emergency-card.emergency-card-alt{
width: calc(100% - 32px) !important;
padding: 16px 16px 14px !important;
}
.emergency-main-row{
grid-template-columns: 1fr !important;
}
.emergency-siren-badge{
width: 58px !important;
height: 58px !important;
margin-left: auto !important;
}
.emergency-card-alt .hero-hotline-number{
font-size: 1.76rem !important;
}
.emergency-action-strip{
flex-direction: column !important;
align-items: flex-start !important;
}
}
/* ===== Mobile Navigation Safety Fix ===== */
/* Fixes mobile menu overflow/wrapping issue without changing desktop layout */
@media (max-width: 900px){
.site-header{
position: sticky !important;
top: 0 !important;
z-index: 1000 !important;
}
.navbar{
position: relative !important;
min-height: 74px !important;
display: flex !important;
align-items: center !important;
justify-content: space-between !important;
gap: 12px !important;
}
.menu-toggle{
display: flex !important;
flex: 0 0 44px !important;
width: 44px !important;
height: 44px !important;
margin-left: auto !important;
z-index: 1002 !important;
}
.nav-menu{
position: absolute !important;
top: calc(100% + 8px) !important;
left: 0 !important;
right: 0 !important;
width: 100% !important;
max-height: min(72vh, 560px) !important;
overflow-y: auto !important;
display: none !important;
flex-direction: column !important;
flex-wrap: nowrap !important;
align-items: stretch !important;
justify-content: flex-start !important;
gap: 6px !important;
padding: 12px !important;
border-radius: 22px !important;
background: rgba(255,255,255,.96) !important;
border: 1px solid rgba(86,129,216,.16) !important;
box-shadow: 0 18px 42px rgba(9,39,91,.16) !important;
backdrop-filter: blur(18px) !important;
-webkit-backdrop-filter: blur(18px) !important;
z-index: 1001 !important;
}
.nav-menu.open,
.nav-menu.active,
body.nav-open .nav-menu{
display: flex !important;
}
.nav-link{
width: 100% !important;
display: flex !important;
align-items: center !important;
justify-content: flex-start !important;
padding: 12px 14px !important;
border-radius: 14px !important;
font-size: .92rem !important;
line-height: 1.2 !important;
white-space: normal !important;
color: #173a74 !important;
background: transparent !important;
}
.nav-link:hover,
.nav-link.active{
color: #2563ff !important;
background: rgba(37,99,255,.07) !important;
}
.nav-link::after{
display: none !important;
}
}
@media (max-width: 640px){
.site-header .container{
width: min(100% - 20px, 1440px) !important;
}
.navbar{
min-height: 70px !important;
}
.brand{
max-width: calc(100% - 58px) !important;
}
.brand img{
width: 44px !important;
height: 44px !important;
flex: 0 0 44px !important;
}
.brand strong{
font-size: .95rem !important;
}
.brand small{
font-size: .72rem !important;
}
.nav-menu{
top: calc(100% + 6px) !important;
border-radius: 20px !important;
padding: 10px !important;
}
.nav-link{
padding: 11px 13px !important;
font-size: .9rem !important;
}
}
/* ===== Compact Mobile Menu Refinement ===== */
/* Makes the mobile navigation smaller, cleaner, and more balanced */
@media (max-width: 900px){
.nav-menu{
left: auto !important;
right: 0 !important;
width: min(360px, calc(100vw - 28px)) !important;
max-height: min(68vh, 470px) !important;
padding: 10px !important;
border-radius: 18px !important;
gap: 8px !important;
background: rgba(255,255,255,.97) !important;
}
.nav-menu.open,
.nav-menu.active,
body.nav-open .nav-menu{
display: grid !important;
grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
align-items: stretch !important;
}
.nav-link{
width: 100% !important;
min-height: 44px !important;
padding: 10px 12px !important;
font-size: .84rem !important;
line-height: 1.2 !important;
border-radius: 12px !important;
font-weight: 800 !important;
}
.nav-link:hover,
.nav-link.active{
background: rgba(37,99,255,.08) !important;
}
}
@media (max-width: 640px){
.nav-menu{
width: min(330px, calc(100vw - 24px)) !important;
max-height: min(66vh, 430px) !important;
padding: 8px !important;
border-radius: 16px !important;
gap: 6px !important;
}
.nav-menu.open,
.nav-menu.active,
body.nav-open .nav-menu{
grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
}
.nav-link{
min-height: 40px !important;
padding: 9px 10px !important;
font-size: .8rem !important;
border-radius: 11px !important;
}
}
@media (max-width: 430px){
.nav-menu{
width: min(314px, calc(100vw - 20px)) !important;
max-height: min(64vh, 400px) !important;
}
.nav-link{
font-size: .78rem !important;
padding: 8px 9px !important;
}
}
/* ===== Footer rearranged after removing Emergency Contacts ===== */
/* Clean 3-column footer layout */
.site-footer{
padding-top: 42px !important;
}
.site-footer .footer-grid{
width: 100% !important;
max-width: 760px !important;
margin: 0 auto !important;
display: flex !important;
justify-content: center !important;
align-items: flex-start !important;
gap: 36px !important;
}
.site-footer .footer-grid > div{
flex: 0 0 auto !important;
min-width: 0 !important;
padding: 0 !important;
margin: 0 !important;
}
.site-footer .footer-grid > div:nth-child(1){
width: 230px !important;
}
.site-footer .footer-grid > div:nth-child(2){
width: 235px !important;
}
.site-footer .footer-grid > div:nth-child(3){
width: 160px !important;
}
.site-footer h3{
font-size: 1rem !important;
line-height: 1.18 !important;
margin: 0 0 10px !important;
}
.site-footer p,
.site-footer li,
.site-footer a{
font-size: .84rem !important;
line-height: 1.45 !important;
}
.footer-links{
gap: 4px !important;
}
.footer-bottom{
margin-top: 24px !important;
}
@media (max-width: 900px){
.site-footer .footer-grid{
max-width: 680px !important;
display: grid !important;
grid-template-columns: 1fr 1fr !important;
gap: 22px !important;
}
.site-footer .footer-grid > div{
width: auto !important;
}
.site-footer .footer-grid > div:first-child{
grid-column: 1 / -1 !important;
}
}
@media (max-width: 640px){
.site-footer{
padding-top: 32px !important;
}
.site-footer .footer-grid{
max-width: 100% !important;
grid-template-columns: 1fr !important;
gap: 16px !important;
}
.footer-bottom{
margin-top: 20px !important;
}
}
/* ===== Contact page map gap fix ===== */
/* Reduces the excessive space between the inquiry/contact cards and the map section */
.contact-modern-section{
padding-bottom: 18px !important;
}
.contact-modern-section + .section-pad.soft-bg{
padding-top: 10px !important;
}
.contact-modern-section + .section-pad.soft-bg .container{
max-width: 1160px !important;
}
.contact-modern-section + .section-pad.soft-bg .map-embed{
border-radius: 26px !important;
box-shadow: 0 18px 40px rgba(22, 53, 106, .08) !important;
overflow: hidden !important;
}
.contact-modern-section + .section-pad.soft-bg .map-embed iframe{
height: 420px !important;
}
@media (max-width: 900px){
.contact-modern-section{
padding-bottom: 14px !important;
}
.contact-modern-section + .section-pad.soft-bg{
padding-top: 6px !important;
}
.contact-modern-section + .section-pad.soft-bg .map-embed iframe{
height: 360px !important;
}
}
@media (max-width: 640px){
.contact-modern-section{
padding-bottom: 10px !important;
}
.contact-modern-section + .section-pad.soft-bg{
padding-top: 4px !important;
}
.contact-modern-section + .section-pad.soft-bg .map-embed{
border-radius: 20px !important;
}
.contact-modern-section + .section-pad.soft-bg .map-embed iframe{
height: 300px !important;
}
}
/* =========================================================
FINAL RESPONSIVE SYSTEM STABILIZATION
Purpose:
- Makes layout device-adaptive across mobile, tablet, laptop, desktop, and large screens.
- Fixes common overflow, oversized text, cramped cards, image scaling, footer/header balance.
- Does not change content, workflow, forms, links, or existing functionality.
========================================================= */
:root{
--fluid-container: min(100% - 32px, 1180px);
--fluid-container-wide: min(100% - 40px, 1320px);
--section-y-lg: clamp(46px, 5.4vw, 76px);
--section-y-md: clamp(34px, 4.4vw, 58px);
--card-pad-fluid: clamp(18px, 2.2vw, 26px);
--card-radius-fluid: clamp(18px, 2.4vw, 28px);
--gap-fluid: clamp(14px, 2vw, 24px);
--text-navy: #15376f;
--text-muted-soft: #607595;
}
/* Global overflow and scaling protection */
html,
body{
width: 100%;
max-width: 100%;
overflow-x: hidden !important;
}
body{
text-rendering: optimizeLegibility;
-webkit-font-smoothing: antialiased;
}
img,
svg,
video,
iframe{
max-width: 100%;
}
img{
height: auto;
}
.container{
width: var(--fluid-container) !important;
max-width: 1180px !important;
margin-inline: auto !important;
}
/* Section spacing should scale, not jump */
.section-pad{
padding-top: var(--section-y-lg) !important;
padding-bottom: var(--section-y-lg) !important;
}
.section-pad-sm{
padding-top: var(--section-y-md) !important;
padding-bottom: var(--section-y-md) !important;
}
/* Balanced fluid typography */
.hero h1{
font-size: clamp(2.75rem, 5.1vw, 4.9rem) !important;
line-height: .98 !important;
letter-spacing: -.05em !important;
max-width: 11ch !important;
}
.hero p,
.page-hero p,
.section-heading p,
.info-card p,
.image-card p,
.contact-card p,
.contact-form p,
.official-card p,
.download-card p,
.profile-item span,
.charter-meta-card p{
font-size: clamp(.92rem, 1vw, 1.02rem) !important;
line-height: 1.6 !important;
}
.page-hero h1{
font-size: clamp(2rem, 4vw, 3.2rem) !important;
line-height: 1.05 !important;
}
.section-heading h2,
.split-layout h2,
.pledge h2,
.contact-card-header h2{
font-size: clamp(1.65rem, 3vw, 2.55rem) !important;
line-height: 1.1 !important;
}
/* Header: desktop balance without wrapping awkwardly */
.site-header .container{
width: min(100% - 28px, 1360px) !important;
max-width: 1360px !important;
}
.navbar{
min-height: 72px !important;
display: flex !important;
align-items: center !important;
gap: 16px !important;
}
.brand{
flex: 0 0 auto !important;
min-width: 0 !important;
max-width: 300px !important;
}
.brand img{
flex: 0 0 auto !important;
}
.brand span{
min-width: 0;
}
.brand strong,
.brand small{
overflow-wrap: normal;
word-break: normal;
}
.nav-menu{
min-width: 0 !important;
}
.nav-link{
text-align: center;
}
/* Cards and grids should be consistent */
.card-grid,
.card-grid.three,
.card-grid.two,
.officials-grid,
.profile-grid,
.stats-grid,
.downloads-grid,
.contact-grid,
.charter-meta-grid{
gap: var(--gap-fluid) !important;
}
.info-card,
.official-card,
.contact-card,
.contact-form,
.pledge,
.download-card,
.doc-row,
.profile-item,
.image-card,
.accordion-item,
.table-wrap,
.official-mini,
.mini-list article,
.charter-meta-card{
padding: var(--card-pad-fluid) !important;
border-radius: var(--card-radius-fluid) !important;
}
/* Homepage hero: avoid oversized crop and bad placement */
.hero{
min-height: clamp(600px, 78vh, 760px) !important;
}
.hero-content{
max-width: 620px !important;
}
.hero-actions{
display: flex !important;
flex-wrap: wrap !important;
gap: 12px !important;
}
.hero .btn{
min-height: 44px;
}
/* Emergency hero card: desktop and responsive safety */
.hero-emergency-card,
.hero-emergency-card.emergency-card-alt{
max-width: 420px !important;
z-index: 4 !important;
}
.hero-emergency-grid{
grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
}
.hero-hotline-number{
overflow-wrap: anywhere;
}
/* Featured official block */
.official-mini{
display: flex !important;
align-items: center !important;
gap: clamp(16px, 2vw, 24px) !important;
}
.official-mini img{
width: clamp(118px, 12vw, 154px) !important;
height: clamp(118px, 12vw, 154px) !important;
flex: 0 0 auto !important;
}
/* Officials grid */
.officials-grid{
grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)) !important;
}
.official-card img{
width: clamp(112px, 10vw, 150px) !important;
height: clamp(112px, 10vw, 150px) !important;
}
/* Forms and contact cards */
.contact-grid-modern{
align-items: stretch !important;
}
.contact-form-modern input,
.contact-form-modern textarea{
width: 100% !important;
}
.form-row{
gap: 14px !important;
}
/* Tables and map */
.table-wrap{
overflow-x: auto !important;
-webkit-overflow-scrolling: touch;
}
.table-wrap table{
width: 100% !important;
}
.map-embed{
width: 100% !important;
min-height: 0 !important;
}
.map-embed iframe{
width: 100% !important;
height: clamp(300px, 42vw, 420px) !important;
}
/* Footer base: clean adaptive layout */
.site-footer{
overflow: hidden !important;
}
.site-footer .footer-grid{
width: min(100% - 32px, 920px) !important;
max-width: 920px !important;
margin-inline: auto !important;
}
.footer-email,
.footer-hotline{
overflow-wrap: anywhere;
}
/* Laptop and smaller desktop */
@media (max-width: 1280px){
.site-header .container{
width: min(100% - 24px, 1220px) !important;
}
.nav-link{
font-size: .74rem !important;
padding: 8px 7px !important;
}
.brand{
max-width: 270px !important;
}
.brand img{
width: 46px !important;
height: 46px !important;
}
.brand strong{
font-size: .94rem !important;
}
.brand small{
font-size: .7rem !important;
}
}
/* Tablet layout */
@media (max-width: 1024px){
:root{
--fluid-container: min(100% - 28px, 900px);
}
.hero{
min-height: auto !important;
}
.hero-content{
padding-top: 84px !important;
padding-bottom: 190px !important;
max-width: 580px !important;
}
.hero h1{
font-size: clamp(2.4rem, 7vw, 4rem) !important;
}
.hero-emergency-card,
.hero-emergency-card.emergency-card-alt{
right: 24px !important;
bottom: 28px !important;
width: min(390px, calc(100% - 48px)) !important;
}
.card-grid,
.card-grid.three,
.officials-grid,
.profile-grid{
grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
}
.card-grid.two,
.contact-grid,
.contact-grid-modern,
.split-layout{
grid-template-columns: 1fr !important;
}
.downloads-grid{
grid-template-columns: 1fr !important;
}
.official-mini{
display: grid !important;
grid-template-columns: auto 1fr !important;
}
}
/* Mobile navigation must be compact and non-overflowing */
@media (max-width: 900px){
.site-header{
position: sticky !important;
top: 0 !important;
}
.site-header .container{
width: min(100% - 22px, 760px) !important;
}
.navbar{
min-height: 70px !important;
position: relative !important;
}
.brand{
max-width: calc(100% - 58px) !important;
padding: 6px 9px !important;
border-radius: 18px !important;
}
.brand img{
width: 42px !important;
height: 42px !important;
}
.brand strong{
font-size: .9rem !important;
}
.brand small{
font-size: .68rem !important;
}
.menu-toggle{
display: flex !important;
flex: 0 0 44px !important;
width: 44px !important;
height: 44px !important;
z-index: 1002 !important;
}
.nav-menu{
position: absolute !important;
top: calc(100% + 8px) !important;
right: 0 !important;
left: auto !important;
width: min(340px, calc(100vw - 24px)) !important;
max-height: min(64vh, 420px) !important;
overflow-y: auto !important;
display: none !important;
grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
gap: 6px !important;
padding: 8px !important;
border-radius: 16px !important;
background: rgba(255,255,255,.98) !important;
border: 1px solid rgba(86,129,216,.16) !important;
box-shadow: 0 18px 42px rgba(9,39,91,.16) !important;
backdrop-filter: blur(18px) !important;
z-index: 1001 !important;
}
.nav-menu.open,
.nav-menu.active,
body.nav-open .nav-menu{
display: grid !important;
}
.nav-link{
width: 100% !important;
min-height: 40px !important;
padding: 9px 10px !important;
display: flex !important;
align-items: center !important;
justify-content: flex-start !important;
text-align: left !important;
white-space: normal !important;
font-size: .8rem !important;
line-height: 1.15 !important;
border-radius: 11px !important;
}
.nav-link::after{
display: none !important;
}
.contact-form-modern .form-row,
.form-row{
grid-template-columns: 1fr !important;
}
.service-meta{
grid-template-columns: 1fr !important;
}
.footer-email,
.footer-hotline{
white-space: normal !important;
}
}
/* Standard mobile phones */
@media (max-width: 640px){
:root{
--fluid-container: min(100% - 24px, 560px);
--section-y-lg: 34px;
--section-y-md: 30px;
--card-pad-fluid: 18px;
--gap-fluid: 14px;
}
.page-hero.section-pad-sm{
padding-top: 34px !important;
padding-bottom: 34px !important;
}
.page-hero h1{
font-size: clamp(1.8rem, 7.4vw, 2.35rem) !important;
}
.hero{
min-height: auto !important;
}
.hero-content{
padding-top: 58px !important;
padding-bottom: 24px !important;
}
.hero h1{
font-size: clamp(2.1rem, 10vw, 3rem) !important;
max-width: 11ch !important;
}
.hero p{
font-size: .94rem !important;
max-width: 100% !important;
}
.hero-actions{
display: grid !important;
grid-template-columns: 1fr !important;
gap: 10px !important;
}
.hero .btn{
width: 100% !important;
min-height: 44px !important;
padding: 12px 16px !important;
}
.hero-emergency-card,
.hero-emergency-card.emergency-card-alt{
position: relative !important;
right: auto !important;
bottom: auto !important;
width: 100% !important;
max-width: 100% !important;
margin: 16px 0 0 !important;
padding: 16px !important;
}
.emergency-main-row{
grid-template-columns: 1fr auto !important;
gap: 10px !important;
}
.emergency-siren-badge{
width: 54px !important;
height: 54px !important;
}
.hero-hotline-number{
font-size: clamp(1.55rem, 8vw, 1.9rem) !important;
}
.hero-emergency-grid{
grid-template-columns: 1fr !important;
}
.card-grid,
.card-grid.three,
.card-grid.two,
.officials-grid,
.profile-grid,
.stats-grid,
.downloads-grid,
.contact-grid,
.contact-grid-modern,
.charter-meta-grid{
grid-template-columns: 1fr !important;
}
.official-mini{
grid-template-columns: 1fr !important;
text-align: center !important;
justify-items: center !important;
}
.official-mini img{
width: 120px !important;
height: 120px !important;
}
.official-card img{
width: 120px !important;
height: 120px !important;
}
.image-card img{
height: 170px !important;
}
.download-card{
grid-template-columns: 1fr !important;
text-align: left !important;
}
.doc-row{
display: grid !important;
grid-template-columns: 1fr !important;
gap: 12px !important;
}
.accordion-trigger{
padding: 16px 18px !important;
}
.contact-info-row{
grid-template-columns: 1fr !important;
}
.emergency-box-modern{
display: grid !important;
grid-template-columns: 1fr !important;
gap: 8px !important;
}
.map-embed iframe{
height: 280px !important;
}
.site-footer .footer-grid{
width: var(--fluid-container) !important;
max-width: 100% !important;
display: grid !important;
grid-template-columns: 1fr !important;
gap: 16px !important;
}
.site-footer .footer-grid > div{
width: auto !important;
}
}
/* Very small mobile devices */
@media (max-width: 420px){
:root{
--fluid-container: min(100% - 20px, 400px);
}
.brand{
gap: 8px !important;
}
.brand img{
width: 40px !important;
height: 40px !important;
}
.brand strong{
font-size: .86rem !important;
}
.brand small{
font-size: .64rem !important;
}
.menu-toggle{
width: 42px !important;
height: 42px !important;
flex-basis: 42px !important;
}
.nav-menu{
width: min(312px, calc(100vw - 20px)) !important;
max-height: min(62vh, 390px) !important;
}
.nav-link{
font-size: .76rem !important;
min-height: 38px !important;
padding: 8px 9px !important;
}
.hero h1{
font-size: clamp(1.95rem, 10vw, 2.6rem) !important;
}
.hero-hotline-number{
font-size: 1.48rem !important;
}
.emergency-card-top,
.emergency-action-strip{
flex-direction: column !important;
align-items: flex-start !important;
}
}
/* Large screens: centered and not oversized */
@media (min-width: 1440px){
.container{
max-width: 1200px !important;
}
.site-header .container{
max-width: 1360px !important;
}
.hero-content{
max-width: 650px !important;
}
.hero h1{
font-size: clamp(4rem, 4.2vw, 5.15rem) !important;
}
}
/* Accessibility: reduced motion */
@media (prefers-reduced-motion: reduce){
*,
*::before,
*::after{
animation-duration: .01ms !important;
animation-iteration-count: 1 !important;
transition-duration: .01ms !important;
scroll-behavior: auto !important;
}
}
/* ===== Mobile emergency card size rebalance ===== */
/* Reduces the emergency card height/weight on mobile only */
@media (max-width: 640px){
.hero-emergency-card,
.hero-emergency-card.emergency-card-alt{
margin-top: 14px !important;
padding: 12px 12px 12px !important;
border-radius: 20px !important;
}
.hero-emergency-card::before,
.hero-emergency-card.emergency-card-alt::before{
height: 5px !important;
border-radius: 20px 20px 0 0 !important;
}
.emergency-card-top{
gap: 8px !important;
margin-bottom: 8px !important;
}
.emergency-pill,
.emergency-pill-live{
padding: 7px 10px !important;
font-size: .72rem !important;
}
.emergency-status,
.emergency-status-alert{
min-width: auto !important;
padding: 6px 10px !important;
font-size: .72rem !important;
}
.emergency-main-row{
grid-template-columns: 1fr auto !important;
gap: 8px !important;
margin-bottom: 4px !important;
}
.emergency-card-alt strong,
.hero-emergency-card strong{
font-size: 1rem !important;
margin-bottom: 6px !important;
}
.hero-hotline-number{
font-size: 1.28rem !important;
line-height: 1.02 !important;
margin-bottom: 8px !important;
}
.emergency-siren-badge{
width: 46px !important;
height: 46px !important;
min-width: 46px !important;
}
.emergency-siren-badge i{
font-size: .74rem !important;
}
.hero-emergency-card p,
.emergency-card-alt p{
font-size: .88rem !important;
line-height: 1.48 !important;
margin-bottom: 10px !important;
}
.hero-emergency-grid{
grid-template-columns: 1fr !important;
gap: 8px !important;
margin-bottom: 8px !important;
}
.hero-emergency-item,
.emergency-card-alt .hero-emergency-item{
padding: 9px 11px !important;
border-radius: 14px !important;
text-align: left !important;
min-height: auto !important;
}
.hero-emergency-item label{
font-size: .64rem !important;
margin-bottom: 3px !important;
}
.hero-emergency-item span{
font-size: .95rem !important;
}
.emergency-action-strip{
gap: 8px !important;
padding-top: 0 !important;
}
.emergency-action-label,
.emergency-action-chip{
font-size: .72rem !important;
}
.emergency-action-chip{
padding: 7px 10px !important;
}
}
@media (max-width: 420px){
.hero-emergency-card,
.hero-emergency-card.emergency-card-alt{
padding: 11px 11px 12px !important;
border-radius: 18px !important;
}
.hero-hotline-number{
font-size: 1.18rem !important;
}
.emergency-pill,
.emergency-pill-live{
font-size: .68rem !important;
padding: 6px 8px !important;
}
.emergency-status,
.emergency-status-alert{
font-size: .68rem !important;
padding: 5px 8px !important;
}
.hero-emergency-card p,
.emergency-card-alt p{
font-size: .84rem !important;
}
.emergency-siren-badge{
width: 42px !important;
height: 42px !important;
min-width: 42px !important;
}
.hero-emergency-item{
padding: 8px 10px !important;
}
}
/* ==========================================================================
2026-06-29 Final responsive redesign + balanced motion layer
Purpose: keep existing content/functionality, improve device balance,
mobile safety, visual polish, and lightweight animations.
========================================================================== */
:root{
--site-max: 1180px;
--header-h: 74px;
--page-x: clamp(16px, 4vw, 32px);
--fluid-radius: clamp(18px, 2.2vw, 28px);
--fluid-gap: clamp(14px, 2vw, 24px);
--fluid-card-pad: clamp(18px, 2.2vw, 28px);
--fluid-section-y: clamp(44px, 7vw, 86px);
--motion-fast: 180ms;
--motion-med: 420ms;
}
html{
overflow-x: hidden !important;
scroll-padding-top: var(--header-h);
}
body{
overflow-x: hidden !important;
}
.container,
.navbar.container,
.site-footer .container{
width: min(100% - (var(--page-x) * 2), var(--site-max)) !important;
max-width: var(--site-max) !important;
margin-inline: auto !important;
}
.site-header{
position: sticky !important;
top: 0 !important;
z-index: 1500 !important;
overflow: visible !important;
backdrop-filter: blur(16px);
}
.navbar{
min-height: var(--header-h) !important;
gap: 14px !important;
}
.brand{
min-width: 0 !important;
flex: 1 1 auto !important;
}
.brand span,
.brand strong,
.brand small{
min-width: 0 !important;
}
.brand strong,
.brand small{
white-space: nowrap !important;
overflow: hidden !important;
text-overflow: ellipsis !important;
}
.menu-toggle{
flex: 0 0 auto !important;
}
.nav-link{
position: relative !important;
isolation: isolate;
}
.nav-link::after{
content: "";
position: absolute;
left: 14px;
right: 14px;
bottom: 7px;
height: 2px;
border-radius: 999px;
background: currentColor;
transform: scaleX(0);
transform-origin: left;
opacity: .55;
transition: transform var(--motion-fast) ease;
}
.nav-link:hover::after,
.nav-link.active::after{
transform: scaleX(1);
}
.section-pad{
padding-block: var(--fluid-section-y) !important;
}
.section-pad-sm{
padding-block: clamp(48px, 7vw, 78px) !important;
}
.section-heading{
margin-bottom: clamp(24px, 4vw, 42px) !important;
}
.info-card,
.official-card,
.contact-card,
.contact-form,
.pledge,
.download-card,
.image-card,
.profile-item,
.doc-row,
.table-wrap,
.mini-list article{
border-radius: var(--fluid-radius) !important;
padding: var(--fluid-card-pad) !important;
}
.card-grid,
.card-grid.three,
.card-grid.two,
.officials-grid,
.profile-grid,
.downloads-grid,
.charter-meta-grid{
gap: var(--fluid-gap) !important;
}
.card-grid{
grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
}
.card-grid.three{
grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
}
.card-grid.two,
.downloads-grid,
.profile-grid{
grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
}
.split-layout,
.contact-grid,
.contact-grid-modern{
grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) !important;
gap: clamp(24px, 4vw, 48px) !important;
align-items: center !important;
}
img,
video,
iframe{
max-width: 100% !important;
}
/* Modern animated ambient background that remains lightweight */
.hero,
.page-hero{
isolation: isolate;
}
.hero::before,
.page-hero::before{
animation: bgDrift 22s linear infinite alternate !important;
}
.hero::after,
.page-hero::after{
animation: softFloat 10s ease-in-out infinite alternate !important;
}
.hero-content{
position: relative !important;
z-index: 2 !important;
padding-top: clamp(100px, 11vw, 150px) !important;
padding-bottom: clamp(120px, 15vw, 190px) !important;
max-width: min(680px, 100%) !important;
}
.hero h1,
.page-hero h1,
.section-heading h2,
.split-layout h2,
.pledge h2{
text-wrap: balance;
}
.hero p,
.page-hero p,
.section-heading p,
.split-layout p{
text-wrap: pretty;
}
.hero-actions{
display: flex !important;
flex-wrap: wrap !important;
gap: 12px !important;
}
.btn{
min-height: 46px !important;
display: inline-flex !important;
align-items: center !important;
justify-content: center !important;
transform: translateZ(0);
transition: transform var(--motion-fast) ease, box-shadow var(--motion-fast) ease, border-color var(--motion-fast) ease !important;
}
.btn:hover,
.info-card:hover,
.official-card:hover,
.download-card:hover,
.profile-item:hover,
.image-card:hover{
transform: translateY(-4px) !important;
}
.info-card::after,
.official-card::after,
.download-card::after,
.profile-item::after,
.image-card::after,
.contact-card::after{
content: "";
position: absolute;
inset: 0;
pointer-events: none;
background: radial-gradient(circle at var(--mx,50%) var(--my,0%), rgba(21,101,216,.12), transparent 36%);
opacity: 0;
transition: opacity var(--motion-med) ease;
}
.info-card:hover::after,
.official-card:hover::after,
.download-card:hover::after,
.profile-item:hover::after,
.image-card:hover::after,
.contact-card:hover::after{
opacity: 1;
}
/* Emergency card redesign: compact, alert-like, and responsive */
.hero-card.hero-emergency-card{
z-index: 3 !important;
}
.hero-emergency-card,
.hero-emergency-card.emergency-card-alt{
width: min(420px, calc(100% - 40px)) !important;
padding: clamp(16px, 2vw, 20px) !important;
border-radius: clamp(20px, 2.2vw, 28px) !important;
}
.emergency-card-top,
.emergency-action-strip{
flex-wrap: wrap !important;
}
.emergency-main-row{
grid-template-columns: minmax(0, 1fr) auto !important;
}
.hero-hotline-number{
font-size: clamp(1.32rem, 4vw, 2.24rem) !important;
word-break: keep-all !important;
}
.hero-emergency-grid{
grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
}
.emergency-siren-badge{
animation: sirenFloat 2.8s ease-in-out infinite !important;
}
/* Footer rebalance for 3 actual columns */
.site-footer .footer-grid,
.footer-grid{
width: min(100% - (var(--page-x) * 2), var(--site-max)) !important;
max-width: var(--site-max) !important;
grid-template-columns: minmax(0, 1.25fr) minmax(240px, .95fr) minmax(180px, .75fr) !important;
gap: clamp(22px, 4vw, 44px) !important;
padding-block: clamp(34px, 6vw, 58px) !important;
}
.footer-email{
white-space: nowrap !important;
}
/* Better tablet behavior */
@media (max-width: 1180px){
:root{ --site-max: 960px; }
.nav-menu{
position: absolute !important;
top: calc(100% + 10px) !important;
left: var(--page-x) !important;
right: var(--page-x) !important;
width: auto !important;
max-height: min(68vh, 520px) !important;
overflow-y: auto !important;
overscroll-behavior: contain !important;
grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
opacity: 0 !important;
transform: translateY(-8px) scale(.98) !important;
pointer-events: none !important;
}
.nav-menu.open,
body.nav-open .nav-menu{
opacity: 1 !important;
transform: translateY(0) scale(1) !important;
pointer-events: auto !important;
}
.card-grid,
.card-grid.three,
.officials-grid{
grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
}
.hero-card{
right: var(--page-x) !important;
}
}
@media (max-width: 900px){
:root{ --site-max: 720px; --header-h: 68px; }
.hero-content{
padding-top: 92px !important;
padding-bottom: 34px !important;
}
.hero-card,
.hero-card.hero-emergency-card,
.hero-emergency-card,
.hero-emergency-card.emergency-card-alt{
position: relative !important;
right: auto !important;
bottom: auto !important;
width: min(100%, 560px) !important;
max-width: 100% !important;
margin: 0 auto 34px !important;
}
.split-layout,
.contact-grid,
.contact-grid-modern{
grid-template-columns: 1fr !important;
align-items: start !important;
}
.site-footer .footer-grid,
.footer-grid{
grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
}
}
@media (max-width: 640px){
:root{
--page-x: 14px;
--header-h: 64px;
--fluid-card-pad: 16px;
--fluid-section-y: 38px;
--fluid-gap: 14px;
}
.navbar{
min-height: var(--header-h) !important;
}
.brand img{
width: 40px !important;
height: 40px !important;
border-radius: 12px !important;
}
.brand strong{ font-size: .9rem !important; }
.brand small{ font-size: .66rem !important; }
.nav-menu{
left: 10px !important;
right: 10px !important;
top: calc(100% + 8px) !important;
grid-template-columns: 1fr !important;
padding: 12px !important;
border-radius: 18px !important;
max-height: min(72vh, 520px) !important;
}
.nav-link{
min-height: 40px !important;
padding: 10px 12px !important;
font-size: .82rem !important;
}
.hero-content{
padding-top: 78px !important;
padding-bottom: 22px !important;
}
.hero h1{
font-size: clamp(2.1rem, 12vw, 3rem) !important;
max-width: 12ch !important;
}
.hero p,
.page-hero p{
font-size: .94rem !important;
line-height: 1.62 !important;
}
.hero-actions{
display: grid !important;
grid-template-columns: 1fr !important;
width: 100% !important;
}
.hero-actions .btn{
width: 100% !important;
padding-inline: 14px !important;
}
.hero-emergency-card,
.hero-emergency-card.emergency-card-alt{
margin-top: 0 !important;
margin-bottom: 28px !important;
padding: 13px !important;
}
.emergency-card-top{
display: grid !important;
grid-template-columns: 1fr auto !important;
align-items: center !important;
}
.emergency-pill,
.emergency-pill-live,
.emergency-status,
.emergency-status-alert{
font-size: .68rem !important;
padding: 6px 8px !important;
min-width: 0 !important;
}
.emergency-main-row{
gap: 8px !important;
}
.emergency-siren-badge{
width: 42px !important;
height: 42px !important;
min-width: 42px !important;
}
.emergency-siren-badge i{
font-size: .68rem !important;
}
.hero-hotline-number{
font-size: clamp(1.16rem, 6vw, 1.45rem) !important;
margin-bottom: 6px !important;
}
.hero-emergency-card p,
.emergency-card-alt p{
font-size: .82rem !important;
line-height: 1.45 !important;
margin-bottom: 8px !important;
}
.hero-emergency-grid{
grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
gap: 7px !important;
}
.hero-emergency-item,
.emergency-card-alt .hero-emergency-item{
padding: 8px 6px !important;
text-align: center !important;
}
.hero-emergency-item label{
font-size: .56rem !important;
letter-spacing: .04em !important;
}
.hero-emergency-item span{
font-size: .86rem !important;
}
.emergency-action-strip{
display: none !important;
}
.card-grid,
.card-grid.three,
.card-grid.two,
.officials-grid,
.profile-grid,
.downloads-grid,
.stats-grid,
.contact-grid,
.contact-grid-modern,
.charter-meta-grid,
.form-row{
grid-template-columns: 1fr !important;
}
.stats-grid div{
min-height: auto !important;
}
.image-card img{
height: clamp(150px, 45vw, 190px) !important;
}
.official-card img,
.official-mini img{
width: 112px !important;
height: 112px !important;
}
.download-card,
.doc-row{
grid-template-columns: 1fr !important;
}
.site-footer .footer-grid,
.footer-grid{
grid-template-columns: 1fr !important;
gap: 18px !important;
padding-block: 32px !important;
}
.footer-email{
white-space: normal !important;
overflow-wrap: anywhere !important;
}
.back-to-top{
right: 14px !important;
bottom: 14px !important;
width: 44px !important;
height: 44px !important;
}
}
@media (max-width: 380px){
:root{ --page-x: 12px; }
.brand strong{ font-size: .82rem !important; }
.brand small{ display: none !important; }
.emergency-card-top{
grid-template-columns: 1fr !important;
}
.hero-emergency-grid{
grid-template-columns: 1fr !important;
}
.hero-emergency-item{
text-align: left !important;
padding-inline: 10px !important;
}
}
@media (min-width: 1440px){
:root{ --site-max: 1220px; }
.site-header .container{
max-width: 1380px !important;
}
}
@keyframes bgDrift{
from{ background-position: 0 0, 100% 0, 0 0, 0 0; }
to{ background-position: 0 0, 100% 0, 38px 26px, -36px -24px; }
}
@keyframes softFloat{
from{ transform: translate3d(0,0,0) scale(1); }
to{ transform: translate3d(-18px,-12px,0) scale(1.05); }
}
@keyframes sirenFloat{
0%,100%{ transform: translateY(0) rotate(0deg); }
50%{ transform: translateY(-3px) rotate(-2deg); }
}
@media (prefers-reduced-motion: reduce){
.hero::before,
.page-hero::before,
.hero::after,
.page-hero::after,
.emergency-siren-badge,
.emergency-dot,
.emergency-status-alert{
animation: none !important;
}
}
/* =======================================================================
TRUE FINAL MOBILE RECOVERY FIX - 2026-06-29
Scope: fixes oversized mobile fonts, huge gaps, emergency card height,
and broken/duplicate mobile menu behavior. Content and workflow unchanged.
======================================================================= */
@media (max-width: 900px){
html, body{ overflow-x:hidden !important; }
.site-header{ position:sticky !important; top:0 !important; z-index:9999 !important; }
.site-header .container,
.navbar.container,
.container{
width:calc(100% - 24px) !important;
max-width:calc(100% - 24px) !important;
margin-left:auto !important;
margin-right:auto !important;
}
.navbar{
min-height:62px !important;
padding:6px 0 !important;
gap:10px !important;
align-items:center !important;
justify-content:space-between !important;
}
.brand{
flex:1 1 auto !important;
max-width:calc(100% - 52px) !important;
min-width:0 !important;
padding:5px 8px !important;
gap:8px !important;
border-radius:16px !important;
}
.brand img{
width:38px !important;
height:38px !important;
flex:0 0 38px !important;
border-radius:11px !important;
}
.brand strong{
font-size:.82rem !important;
line-height:1.05 !important;
}
.brand small{
display:block !important;
font-size:.62rem !important;
line-height:1.1 !important;
margin-top:1px !important;
}
.menu-toggle{
display:flex !important;
width:40px !important;
height:40px !important;
flex:0 0 40px !important;
border-radius:13px !important;
margin-left:auto !important;
z-index:10001 !important;
}
.nav-menu{
position:absolute !important;
top:calc(100% + 6px) !important;
left:0 !important;
right:0 !important;
width:100% !important;
max-height:calc(100vh - 92px) !important;
overflow-y:auto !important;
display:none !important;
grid-template-columns:1fr !important;
gap:4px !important;
padding:8px !important;
border-radius:16px !important;
background:rgba(255,255,255,.98) !important;
border:1px solid rgba(86,129,216,.16) !important;
box-shadow:0 16px 38px rgba(9,39,91,.16) !important;
z-index:10000 !important;
opacity:1 !important;
transform:none !important;
pointer-events:auto !important;
}
.nav-menu.open,
body.nav-open .nav-menu{
display:grid !important;
}
.nav-link{
min-height:36px !important;
padding:8px 10px !important;
font-size:.78rem !important;
line-height:1.15 !important;
border-radius:10px !important;
text-align:left !important;
justify-content:flex-start !important;
white-space:normal !important;
}
.nav-link::after{ display:none !important; }
.hero{
min-height:auto !important;
background-position:72% center !important;
}
.hero-content{
max-width:100% !important;
padding-top:42px !important;
padding-bottom:12px !important;
}
.hero .eyebrow,
.page-hero .eyebrow{
max-width:100% !important;
padding:6px 10px !important;
font-size:.60rem !important;
line-height:1.15 !important;
letter-spacing:.10em !important;
margin-bottom:10px !important;
}
.hero h1{
font-size:clamp(1.8rem, 7.8vw, 2.35rem) !important;
line-height:1.03 !important;
letter-spacing:-.035em !important;
max-width:100% !important;
margin-bottom:10px !important;
}
.hero p{
font-size:.88rem !important;
line-height:1.48 !important;
max-width:100% !important;
margin-bottom:0 !important;
}
.hero-actions{
width:100% !important;
max-width:285px !important;
display:grid !important;
grid-template-columns:1fr !important;
gap:8px !important;
margin:16px auto 0 !important;
}
.hero-actions .btn,
.hero .btn{
width:100% !important;
min-height:38px !important;
padding:8px 14px !important;
font-size:.86rem !important;
border-radius:999px !important;
}
.hero-card.hero-emergency-card,
.hero-emergency-card,
.hero-emergency-card.emergency-card-alt{
position:relative !important;
left:auto !important;
right:auto !important;
bottom:auto !important;
top:auto !important;
width:100% !important;
max-width:100% !important;
margin:10px 0 22px !important;
padding:10px !important;
border-radius:18px !important;
animation:none !important;
}
.hero-emergency-card::before,
.hero-emergency-card.emergency-card-alt::before{
height:4px !important;
border-radius:18px 18px 0 0 !important;
}
.hero-emergency-card::after,
.hero-emergency-card.emergency-card-alt::after{ display:none !important; }
.emergency-card-top{
display:grid !important;
grid-template-columns:minmax(0,1fr) auto !important;
gap:6px !important;
align-items:center !important;
margin-bottom:8px !important;
}
.emergency-pill,
.emergency-pill-live,
.emergency-status,
.emergency-status-alert{
min-width:0 !important;
padding:5px 7px !important;
font-size:.58rem !important;
line-height:1.05 !important;
letter-spacing:.045em !important;
}
.emergency-main-row{
display:grid !important;
grid-template-columns:minmax(0,1fr) auto !important;
gap:8px !important;
align-items:center !important;
margin-bottom:4px !important;
}
.hero-emergency-card strong,
.emergency-card-alt strong{
font-size:.9rem !important;
line-height:1.15 !important;
margin-bottom:4px !important;
}
.hero-hotline-number,
.emergency-card-alt .hero-hotline-number{
font-size:1.18rem !important;
line-height:1.02 !important;
margin-bottom:5px !important;
letter-spacing:-.02em !important;
}
.emergency-siren-badge{
width:38px !important;
height:38px !important;
min-width:38px !important;
animation:none !important;
}
.emergency-siren-badge i{
font-size:.58rem !important;
}
.emergency-siren-badge span{ display:none !important; }
.hero-emergency-card p,
.emergency-card-alt p{
font-size:.76rem !important;
line-height:1.36 !important;
margin-bottom:8px !important;
}
.hero-emergency-grid{
display:grid !important;
grid-template-columns:repeat(3, minmax(0,1fr)) !important;
gap:6px !important;
margin-bottom:0 !important;
}
.hero-emergency-item,
.emergency-card-alt .hero-emergency-item{
min-height:auto !important;
padding:7px 4px !important;
border-radius:12px !important;
text-align:center !important;
}
.hero-emergency-item label{
font-size:.48rem !important;
line-height:1.05 !important;
letter-spacing:.03em !important;
margin-bottom:3px !important;
}
.hero-emergency-item span{
font-size:.78rem !important;
line-height:1 !important;
}
.emergency-action-strip{ display:none !important; }
.section-pad{ padding-top:30px !important; padding-bottom:30px !important; }
.section-pad-sm{ padding-top:28px !important; padding-bottom:28px !important; }
.section-heading{ margin-bottom:18px !important; }
.section-heading h2,
.split-layout h2,
.pledge h2,
.contact-card-header h2{
font-size:clamp(1.35rem, 6vw, 1.8rem) !important;
line-height:1.12 !important;
}
.info-card,
.official-card,
.contact-card,
.contact-form,
.pledge,
.download-card,
.image-card,
.profile-item,
.doc-row,
.table-wrap,
.mini-list article,
.charter-meta-card{
padding:16px !important;
border-radius:18px !important;
}
.card-grid,
.card-grid.three,
.card-grid.two,
.officials-grid,
.profile-grid,
.downloads-grid,
.stats-grid,
.contact-grid,
.contact-grid-modern,
.charter-meta-grid,
.form-row{
grid-template-columns:1fr !important;
gap:12px !important;
}
}
@media (max-width:420px){
.site-header .container,
.navbar.container,
.container{
width:calc(100% - 20px) !important;
max-width:calc(100% - 20px) !important;
}
.navbar{ min-height:58px !important; }
.brand img{ width:36px !important; height:36px !important; flex-basis:36px !important; }
.brand strong{ font-size:.78rem !important; }
.brand small{ font-size:.58rem !important; }
.menu-toggle{ width:38px !important; height:38px !important; flex-basis:38px !important; }
.hero-content{ padding-top:36px !important; }
.hero h1{ font-size:clamp(1.65rem, 8.2vw, 2.05rem) !important; }
.hero p{ font-size:.84rem !important; }
.hero-actions{ max-width:270px !important; }
.hero-actions .btn{ min-height:36px !important; font-size:.82rem !important; }
.emergency-card-top{ grid-template-columns:1fr auto !important; }
.emergency-pill,
.emergency-status{ font-size:.54rem !important; }
.hero-hotline-number,
.emergency-card-alt .hero-hotline-number{ font-size:1.05rem !important; }
.hero-emergency-card p,
.emergency-card-alt p{ font-size:.72rem !important; }
.hero-emergency-grid{ grid-template-columns:repeat(3, minmax(0,1fr)) !important; }
}
@media (max-width:360px){
.hero-emergency-grid{ grid-template-columns:1fr !important; }
.hero-emergency-item{ text-align:left !important; padding:7px 9px !important; }
}
@media (max-width:900px), (prefers-reduced-motion: reduce){
body::after,
.hero::before,
.hero::after,
.page-hero::before,
.page-hero::after,
.info-card .icon,
.download-card .icon,
.official-card img{
animation:none !important;
}
}
/* =======================================================================
MOBILE BALANCE PATCH - buttons + emergency card
Scope: reduce mobile button size, emergency card height, gaps, and text scale.
Content, links, forms, and functionality unchanged.
======================================================================= */
@media (max-width: 600px){
.hero{
min-height:auto !important;
padding-bottom:18px !important;
}
.hero-content{
padding-top:30px !important;
padding-bottom:0 !important;
}
.hero .eyebrow{
width:auto !important;
max-width:100% !important;
padding:5px 9px !important;
font-size:.56rem !important;
letter-spacing:.085em !important;
margin-bottom:8px !important;
}
.hero h1{
font-size:clamp(1.5rem, 7vw, 1.9rem) !important;
line-height:1.02 !important;
margin-bottom:8px !important;
}
.hero p{
font-size:.80rem !important;
line-height:1.42 !important;
margin-bottom:0 !important;
}
.hero-actions{
width:min(100%, 248px) !important;
max-width:248px !important;
gap:7px !important;
margin:13px auto 0 !important;
}
.hero-actions .btn,
.hero .btn,
a.btn,
button.btn{
min-height:34px !important;
height:34px !important;
max-height:34px !important;
padding:6px 12px !important;
font-size:.78rem !important;
line-height:1 !important;
border-radius:999px !important;
display:inline-flex !important;
align-items:center !important;
justify-content:center !important;
}
.hero-card.hero-emergency-card,
.hero-emergency-card,
.hero-emergency-card.emergency-card-alt{
width:calc(100% - 20px) !important;
max-width:360px !important;
margin:12px auto 0 !important;
padding:9px 10px 10px !important;
border-radius:16px !important;
box-shadow:0 10px 22px rgba(20, 37, 70, .14) !important;
}
.hero-emergency-card::before,
.hero-emergency-card.emergency-card-alt::before{
height:3px !important;
border-radius:16px 16px 0 0 !important;
}
.emergency-card-top{
display:flex !important;
align-items:center !important;
justify-content:space-between !important;
gap:6px !important;
margin-bottom:7px !important;
}
.emergency-pill,
.emergency-pill-live,
.emergency-status,
.emergency-status-alert{
min-height:26px !important;
padding:4px 7px !important;
font-size:.50rem !important;
line-height:1.05 !important;
letter-spacing:.035em !important;
border-radius:999px !important;
white-space:nowrap !important;
}
.emergency-pill-live{
max-width:66% !important;
overflow:hidden !important;
text-overflow:ellipsis !important;
}
.emergency-status-alert{
flex:0 0 auto !important;
font-size:.60rem !important;
font-weight:800 !important;
}
.emergency-main-row{
grid-template-columns:minmax(0,1fr) 34px !important;
gap:7px !important;
margin-bottom:3px !important;
}
.hero-emergency-card strong,
.emergency-card-alt strong{
font-size:.78rem !important;
line-height:1.1 !important;
margin-bottom:3px !important;
}
.hero-hotline-number,
.emergency-card-alt .hero-hotline-number{
font-size:1.0rem !important;
line-height:1 !important;
margin-bottom:3px !important;
letter-spacing:-.015em !important;
}
.emergency-siren-badge{
width:34px !important;
height:34px !important;
min-width:34px !important;
box-shadow:0 6px 14px rgba(255, 84, 78, .20) !important;
}
.emergency-siren-badge i{
font-size:.50rem !important;
line-height:1 !important;
}
.hero-emergency-card p,
.emergency-card-alt p{
font-size:.68rem !important;
line-height:1.28 !important;
margin:0 0 7px !important;
}
.hero-emergency-grid{
grid-template-columns:repeat(3, minmax(0,1fr)) !important;
gap:5px !important;
}
.hero-emergency-item,
.emergency-card-alt .hero-emergency-item{
padding:5px 3px !important;
min-height:42px !important;
border-radius:10px !important;
}
.hero-emergency-item label{
font-size:.42rem !important;
line-height:1 !important;
margin-bottom:3px !important;
}
.hero-emergency-item span{
font-size:.68rem !important;
line-height:1 !important;
}
.gradient-band,
.section-pad{
padding-top:24px !important;
padding-bottom:24px !important;
}
}
@media (max-width: 380px){
.hero-actions{
width:min(100%, 230px) !important;
max-width:230px !important;
}
.hero-actions .btn,
.hero .btn,
a.btn,
button.btn{
min-height:32px !important;
height:32px !important;
max-height:32px !important;
font-size:.74rem !important;
padding:5px 10px !important;
}
.hero-card.hero-emergency-card,
.hero-emergency-card,
.hero-emergency-card.emergency-card-alt{
width:calc(100% - 16px) !important;
padding:8px !important;
}
.emergency-pill,
.emergency-pill-live{
font-size:.46rem !important;
padding:4px 6px !important;
}
.emergency-status,
.emergency-status-alert{
font-size:.54rem !important;
padding:4px 6px !important;
}
.hero-hotline-number,
.emergency-card-alt .hero-hotline-number{
font-size:.92rem !important;
}
.hero-emergency-card p,
.emergency-card-alt p{
font-size:.64rem !important;
}
}
/* ==========================================================
FINAL FIX: Citizen's Charter mobile timeline/table viewing
Purpose: Fix cramped mobile table, oversized wrapping, and
misaligned/early-stopping blue dot animation.
========================================================== */
/* Remove the separate moving blue dot runner because it is hard-coded
and becomes inaccurate when row heights change on mobile/tablet. */
.process-flow-wrap::after{
display:none !important;
content:none !important;
animation:none !important;
}
/* Keep desktop/tablet table cleaner and slightly less oversized. */
.charter-section .table-wrap{
max-width:100% !important;
}
.charter-section table{
min-width:680px !important;
}
.charter-section th,
.charter-section td{
font-size:.95rem !important;
line-height:1.45 !important;
padding:14px 16px !important;
}
.charter-section th:first-child,
.charter-section td.step-cell{
width:82px !important;
min-width:82px !important;
}
/* Tablet: reduce width requirement so the table scroll is not excessive. */
@media (max-width:900px){
.charter-section table{
min-width:620px !important;
}
.charter-section th,
.charter-section td{
font-size:.88rem !important;
line-height:1.42 !important;
padding:12px 14px !important;
}
.charter-section .table-wrap{
border-radius:18px !important;
}
}
/* Mobile: convert the table into readable stacked process cards. */
@media (max-width:700px){
.charter-section{
padding-top:26px !important;
padding-bottom:26px !important;
}
.charter-stack{
gap:16px !important;
}
.pledge{
padding:16px !important;
border-radius:18px !important;
}
.pledge h2{
font-size:1.1rem !important;
margin-bottom:6px !important;
}
.pledge p{
font-size:.82rem !important;
line-height:1.45 !important;
}
.charter-section .table-wrap.process-flow-wrap{
overflow:visible !important;
padding:0 !important;
background:transparent !important;
border:0 !important;
box-shadow:none !important;
border-radius:0 !important;
}
.process-flow-wrap::before{
display:none !important;
content:none !important;
animation:none !important;
}
.charter-section table,
.charter-section thead,
.charter-section tbody,
.charter-section tr,
.charter-section td{
display:block !important;
width:100% !important;
min-width:0 !important;
}
.charter-section thead{
display:none !important;
}
.charter-section table{
border-collapse:separate !important;
border-spacing:0 !important;
}
.charter-section tbody{
display:grid !important;
gap:12px !important;
}
.charter-section tbody tr,
.charter-section.process-in-view tbody tr{
display:grid !important;
grid-template-columns:48px minmax(0,1fr) !important;
column-gap:10px !important;
align-items:start !important;
position:relative !important;
padding:12px 12px 12px 8px !important;
border:1px solid rgba(37,99,255,.10) !important;
border-radius:18px !important;
background:linear-gradient(180deg,rgba(255,255,255,.98),rgba(246,251,255,.94)) !important;
box-shadow:0 10px 24px rgba(7,29,73,.06) !important;
opacity:1 !important;
transform:none !important;
animation:none !important;
}
.charter-section tbody tr:hover td{
background:transparent !important;
}
.charter-section tbody td,
.charter-section tbody td:nth-child(2),
.charter-section tbody td:nth-child(3),
.charter-section tbody td:nth-child(4){
padding:0 !important;
border:0 !important;
background:transparent !important;
min-width:0 !important;
}
.charter-section td.step-cell{
grid-column:1 !important;
grid-row:1 / span 3 !important;
width:48px !important;
min-width:48px !important;
padding-top:2px !important;
text-align:center !important;
display:flex !important;
justify-content:center !important;
align-items:flex-start !important;
}
.charter-section td.step-cell::after{
left:50% !important;
top:42px !important;
bottom:-26px !important;
width:2px !important;
transform:translateX(-50%) !important;
background:linear-gradient(180deg,rgba(8,200,255,.34),rgba(18,214,166,.16)) !important;
box-shadow:none !important;
}
.charter-section tbody tr:last-child td.step-cell::after{
display:none !important;
}
.step-badge{
width:32px !important;
height:32px !important;
font-size:.86rem !important;
box-shadow:
0 8px 18px rgba(37,99,255,.10),
inset 0 0 0 1px rgba(255,255,255,.68),
0 0 0 5px rgba(8,200,255,.055) !important;
animation:none !important;
}
.step-badge::before,
.step-badge::after{
display:none !important;
content:none !important;
animation:none !important;
}
.charter-section tbody td:nth-child(2){
grid-column:2 !important;
color:#0b2d66 !important;
font-size:.88rem !important;
line-height:1.35 !important;
font-weight:800 !important;
margin:0 0 8px !important;
}
.charter-section tbody td:nth-child(2)::before{
display:none !important;
content:none !important;
animation:none !important;
}
.charter-section tbody td:nth-child(3),
.charter-section tbody td:nth-child(4){
grid-column:2 !important;
position:relative !important;
padding-left:72px !important;
color:#4b5f7a !important;
font-size:.76rem !important;
line-height:1.35 !important;
margin-top:5px !important;
}
.charter-section tbody td:nth-child(3)::before,
.charter-section tbody td:nth-child(4)::before{
position:absolute !important;
left:0 !important;
top:0 !important;
width:62px !important;
color:#6b7f99 !important;
font-size:.62rem !important;
line-height:1.35 !important;
font-weight:900 !important;
letter-spacing:.05em !important;
text-transform:uppercase !important;
}
.charter-section tbody td:nth-child(3)::before{
content:"Time" !important;
}
.charter-section tbody td:nth-child(4)::before{
content:"Office" !important;
}
.charter-meta-grid{
grid-template-columns:1fr !important;
gap:12px !important;
}
.charter-meta-card{
padding:16px !important;
border-radius:18px !important;
}
.charter-meta-card h3{
font-size:1rem !important;
margin-bottom:6px !important;
}
.charter-meta-card p{
font-size:.80rem !important;
line-height:1.45 !important;
}
}
@media (max-width:380px){
.charter-section tbody tr,
.charter-section.process-in-view tbody tr{
grid-template-columns:42px minmax(0,1fr) !important;
column-gap:8px !important;
padding:10px 10px 10px 6px !important;
border-radius:16px !important;
}
.charter-section td.step-cell{
width:42px !important;
min-width:42px !important;
}
.step-badge{
width:28px !important;
height:28px !important;
font-size:.78rem !important;
}
.charter-section tbody td:nth-child(2){
font-size:.82rem !important;
}
.charter-section tbody td:nth-child(3),
.charter-section tbody td:nth-child(4){
font-size:.72rem !important;
padding-left:62px !important;
}
.charter-section tbody td:nth-child(3)::before,
.charter-section tbody td:nth-child(4)::before{
width:54px !important;
font-size:.58rem !important;
}
}
/* ==========================================================
2026-06-29 v5 FINAL MOBILE COMPACT BALANCE PATCH
Scope: mobile/tablet sizing only for header/menu, page hero,
officials, initiative/announcement cards, and downloads.
========================================================== */
@media (max-width: 768px){
html,
body{
overflow-x:hidden !important;
}
.site-header{
min-height:auto !important;
}
.navbar.container{
width:calc(100% - 18px) !important;
}
.navbar{
min-height:58px !important;
padding:6px 0 !important;
gap:8px !important;
}
.brand{
max-width:calc(100vw - 76px) !important;
padding:5px 9px 5px 6px !important;
gap:7px !important;
border-radius:15px !important;
}
.brand img{
width:34px !important;
height:34px !important;
border-radius:11px !important;
}
.brand strong{
font-size:.78rem !important;
line-height:1.05 !important;
letter-spacing:-.02em !important;
}
.brand small{
display:block !important;
font-size:.58rem !important;
line-height:1.05 !important;
}
.menu-toggle{
width:38px !important;
height:38px !important;
flex:0 0 38px !important;
border-radius:12px !important;
gap:4px !important;
box-shadow:0 8px 18px rgba(21,101,216,.18) !important;
}
.menu-toggle span{
width:18px !important;
height:2px !important;
}
.menu-toggle.open span:nth-child(1){
transform:translateY(6px) rotate(45deg) !important;
}
.menu-toggle.open span:nth-child(3){
transform:translateY(-6px) rotate(-45deg) !important;
}
.nav-menu{
left:10px !important;
right:10px !important;
top:calc(100% + 6px) !important;
max-height:calc(100vh - 76px) !important;
padding:9px !important;
gap:6px !important;
border-radius:16px !important;
grid-template-columns:1fr !important;
}
.nav-link{
min-height:38px !important;
padding:9px 12px !important;
font-size:.82rem !important;
border-radius:12px !important;
}
.page-hero{
min-height:190px !important;
padding:50px 0 30px !important;
background-position:center center !important;
}
.page-hero:before{
opacity:.78 !important;
}
.page-hero .container{
width:calc(100% - 24px) !important;
}
.page-hero .eyebrow{
font-size:.58rem !important;
line-height:1 !important;
padding:6px 10px !important;
gap:6px !important;
margin-bottom:10px !important;
letter-spacing:.08em !important;
}
.page-hero .eyebrow:before{
width:24px !important;
height:2px !important;
}
.page-hero h1{
font-size:clamp(1.72rem,7.5vw,2.05rem) !important;
line-height:1.08 !important;
max-width:100% !important;
margin-bottom:10px !important;
letter-spacing:-.045em !important;
}
.page-hero p{
max-width:34ch !important;
font-size:.92rem !important;
line-height:1.5 !important;
}
.section-pad{
padding:28px 0 !important;
}
.section-pad-sm{
padding:26px 0 !important;
}
.card-grid,
.card-grid.three,
.card-grid.two,
.officials-grid,
.downloads-grid{
gap:14px !important;
grid-template-columns:1fr !important;
}
.official-card{
padding:17px 14px !important;
border-radius:18px !important;
min-height:0 !important;
}
.official-card img{
width:82px !important;
height:82px !important;
border-width:5px !important;
margin-bottom:10px !important;
box-shadow:0 10px 22px rgba(21,94,239,.12) !important;
animation:none !important;
}
.official-card h3{
font-size:1rem !important;
line-height:1.2 !important;
margin-bottom:6px !important;
}
.official-card span{
font-size:.86rem !important;
line-height:1.2 !important;
margin-bottom:5px !important;
}
.official-card p{
font-size:.78rem !important;
line-height:1.35 !important;
}
.image-card{
border-radius:18px !important;
box-shadow:0 12px 28px rgba(8,38,77,.08) !important;
}
.image-card img{
height:132px !important;
object-fit:cover !important;
}
.image-card::after{
height:132px !important;
border-radius:18px 18px 0 0 !important;
}
.image-card img + div,
.image-card > div{
padding:15px 16px 17px !important;
}
.image-card .status,
.status{
font-size:.66rem !important;
padding:5px 9px !important;
margin-bottom:9px !important;
}
.image-card h3{
font-size:1.02rem !important;
line-height:1.25 !important;
margin-bottom:6px !important;
}
.image-card p{
font-size:.86rem !important;
line-height:1.45 !important;
}
.image-card .text-link{
font-size:.86rem !important;
}
.download-card{
display:grid !important;
grid-template-columns:42px minmax(0,1fr) !important;
align-items:start !important;
gap:11px !important;
padding:16px !important;
border-radius:18px !important;
text-align:left !important;
}
.download-card .icon{
width:42px !important;
height:42px !important;
border-radius:14px !important;
font-size:1.05rem !important;
margin:0 !important;
animation:none !important;
}
.download-card h3{
font-size:1rem !important;
line-height:1.25 !important;
margin-bottom:6px !important;
}
.download-card p{
font-size:.84rem !important;
line-height:1.45 !important;
margin-bottom:12px !important;
}
.download-card .btn,
.download-card .btn-small,
.download-card .btn-primary{
grid-column:1 / -1 !important;
width:100% !important;
min-height:38px !important;
height:38px !important;
padding:9px 14px !important;
font-size:.78rem !important;
border-radius:15px !important;
}
.btn,
.btn-primary,
.btn-secondary,
.btn-light{
min-height:40px !important;
padding:10px 16px !important;
font-size:.86rem !important;
border-radius:16px !important;
}
.reveal,
.reveal-left,
.reveal-right,
.reveal-zoom{
transition-duration:.35s !important;
transform:none !important;
}
}
@media (max-width: 480px){
.navbar.container{
width:calc(100% - 16px) !important;
}
.navbar{
min-height:54px !important;
}
.brand{
max-width:calc(100vw - 68px) !important;
padding:4px 8px 4px 5px !important;
}
.brand img{
width:31px !important;
height:31px !important;
}
.brand strong{
font-size:.72rem !important;
}
.brand small{
font-size:.54rem !important;
}
.menu-toggle{
width:36px !important;
height:36px !important;
flex-basis:36px !important;
border-radius:11px !important;
}
.page-hero{
min-height:176px !important;
padding:44px 0 26px !important;
}
.page-hero h1{
font-size:clamp(1.62rem,7.8vw,1.92rem) !important;
margin-bottom:8px !important;
}
.page-hero p{
font-size:.88rem !important;
line-height:1.48 !important;
}
.page-hero .eyebrow{
font-size:.54rem !important;
padding:5px 9px !important;
margin-bottom:9px !important;
}
.official-card{
padding:15px 12px !important;
border-radius:16px !important;
}
.official-card img{
width:76px !important;
height:76px !important;
}
.official-card h3{
font-size:.96rem !important;
}
.official-card span{
font-size:.82rem !important;
}
.official-card p{
font-size:.75rem !important;
}
.image-card img,
.image-card::after{
height:124px !important;
}
.image-card img + div,
.image-card > div{
padding:14px 15px 16px !important;
}
.image-card h3{
font-size:.98rem !important;
}
.image-card p{
font-size:.82rem !important;
}
.download-card{
padding:14px !important;
gap:10px !important;
grid-template-columns:38px minmax(0,1fr) !important;
}
.download-card .icon{
width:38px !important;
height:38px !important;
border-radius:13px !important;
font-size:1rem !important;
}
.download-card h3{
font-size:.95rem !important;
}
.download-card p{
font-size:.80rem !important;
}
.download-card .btn,
.download-card .btn-small,
.download-card .btn-primary{
height:36px !important;
min-height:36px !important;
font-size:.74rem !important;
}
}
@media (max-width: 380px){
.brand{
max-width:calc(100vw - 64px) !important;
}
.brand strong{
font-size:.68rem !important;
}
.brand small{
font-size:.50rem !important;
}
.page-hero{
min-height:166px !important;
}
.page-hero h1{
font-size:1.5rem !important;
}
.page-hero p{
font-size:.82rem !important;
}
.official-card img{
width:70px !important;
height:70px !important;
}
.image-card img,
.image-card::after{
height:116px !important;
}
}
/* ===== Final Emergency Card Refinement ===== */
/* Compact, cleaner, government-service style emergency panel. */
.hero-emergency-card,
.hero-emergency-card.emergency-card-alt{
width: min(360px, calc(100% - 40px)) !important;
padding: 15px 15px 14px !important;
border-radius: 22px !important;
box-shadow: 0 14px 36px rgba(7,25,58,.16), inset 0 1px 0 rgba(255,255,255,.82) !important;
}
.hero-emergency-card::before,
.hero-emergency-card.emergency-card-alt::before{
height: 5px !important;
border-radius: 22px 22px 0 0 !important;
}
.hero-emergency-card.emergency-card-alt::after{
border-radius: 22px !important;
opacity: .55 !important;
}
.emergency-card-top{
gap: 8px !important;
margin-bottom: 9px !important;
}
.emergency-pill,
.emergency-pill-live{
padding: 6px 10px !important;
gap: 6px !important;
font-size: .68rem !important;
letter-spacing: .035em !important;
}
.emergency-dot{
width: 8px !important;
height: 8px !important;
}
.emergency-status,
.emergency-status-alert{
min-width: auto !important;
padding: 6px 9px !important;
font-size: .70rem !important;
}
.emergency-main-row{
grid-template-columns: 1fr auto !important;
gap: 10px !important;
align-items: center !important;
margin-bottom: 6px !important;
}
.hero-emergency-card strong,
.emergency-card-alt strong{
font-size: 1.02rem !important;
margin-bottom: 6px !important;
line-height: 1.15 !important;
}
.hero-hotline-number,
.emergency-card-alt .hero-hotline-number{
font-size: 1.82rem !important;
line-height: 1 !important;
margin-bottom: 7px !important;
letter-spacing: -.025em !important;
}
.emergency-siren-badge{
width: 56px !important;
height: 56px !important;
box-shadow: 0 10px 20px rgba(214,40,57,.18), inset 0 -7px 14px rgba(150,25,33,.14) !important;
}
.emergency-siren-badge i{
font-size: .72rem !important;
}
.emergency-siren-badge span{
inset: -6px !important;
border-width: 1.5px !important;
}
.hero-emergency-card p,
.emergency-card-alt p{
font-size: .84rem !important;
line-height: 1.42 !important;
margin-bottom: 10px !important;
}
.hero-emergency-grid,
.emergency-card-alt .hero-emergency-grid{
gap: 8px !important;
margin-bottom: 9px !important;
}
.hero-emergency-item,
.emergency-card-alt .hero-emergency-item{
padding: 9px 8px !important;
border-radius: 13px !important;
}
.hero-emergency-item label{
margin-bottom: 4px !important;
font-size: .58rem !important;
letter-spacing: .045em !important;
}
.hero-emergency-item span{
font-size: .92rem !important;
}
.emergency-action-strip{
gap: 8px !important;
padding-top: 0 !important;
}
.emergency-action-label{
font-size: .64rem !important;
letter-spacing: .06em !important;
}
.emergency-action-chip{
padding: 6px 10px !important;
font-size: .66rem !important;
}
@media (max-width: 1100px){
.hero-emergency-card,
.hero-emergency-card.emergency-card-alt{
width: min(340px, calc(100% - 32px)) !important;
right: 4% !important;
}
.hero-hotline-number,
.emergency-card-alt .hero-hotline-number{
font-size: 1.68rem !important;
}
.emergency-siren-badge{
width: 52px !important;
height: 52px !important;
}
}
@media (max-width: 640px){
.hero-emergency-card,
.hero-emergency-card.emergency-card-alt{
width: calc(100% - 28px) !important;
margin: 12px 14px 0 !important;
padding: 13px 13px 12px !important;
border-radius: 18px !important;
}
.hero-emergency-card::before,
.hero-emergency-card.emergency-card-alt::before{
height: 4px !important;
border-radius: 18px 18px 0 0 !important;
}
.emergency-card-top{
gap: 7px !important;
margin-bottom: 8px !important;
}
.emergency-pill,
.emergency-pill-live{
padding: 5px 8px !important;
font-size: .62rem !important;
white-space: nowrap !important;
}
.emergency-status,
.emergency-status-alert{
padding: 5px 8px !important;
font-size: .64rem !important;
white-space: nowrap !important;
}
.emergency-main-row{
grid-template-columns: 1fr auto !important;
gap: 8px !important;
}
.hero-emergency-card strong,
.emergency-card-alt strong{
font-size: .95rem !important;
margin-bottom: 5px !important;
}
.hero-hotline-number,
.emergency-card-alt .hero-hotline-number{
font-size: 1.48rem !important;
margin-bottom: 6px !important;
}
.hero-emergency-card p,
.emergency-card-alt p{
font-size: .78rem !important;
line-height: 1.36 !important;
margin-bottom: 9px !important;
}
.emergency-siren-badge{
width: 46px !important;
height: 46px !important;
margin-left: 0 !important;
}
.emergency-siren-badge i{
font-size: .62rem !important;
}
.hero-emergency-grid,
.emergency-card-alt .hero-emergency-grid{
grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
gap: 7px !important;
margin-bottom: 8px !important;
}
.hero-emergency-item,
.emergency-card-alt .hero-emergency-item{
text-align: center !important;
padding: 8px 5px !important;
border-radius: 12px !important;
}
.hero-emergency-item label{
font-size: .50rem !important;
margin-bottom: 3px !important;
}
.hero-emergency-item span{
font-size: .82rem !important;
}
.emergency-action-strip{
flex-direction: row !important;
align-items: center !important;
justify-content: space-between !important;
}
.emergency-action-label{
font-size: .54rem !important;
}
.emergency-action-chip{
padding: 5px 8px !important;
font-size: .56rem !important;
}
}
@media (max-width: 390px){
.emergency-pill,
.emergency-pill-live{
font-size: .56rem !important;
padding: 5px 7px !important;
}
.emergency-status,
.emergency-status-alert{
font-size: .58rem !important;
padding: 5px 7px !important;
}
.hero-hotline-number,
.emergency-card-alt .hero-hotline-number{
font-size: 1.34rem !important;
}
.emergency-siren-badge{
width: 42px !important;
height: 42px !important;
}
.emergency-action-label{
display: none !important;
}
.emergency-action-chip{
width: 100% !important;
}
}
/* 2026-06-29 FINAL MOBILE BALANCE PATCH
Scope: mobile header/logo, hero spacing, emergency information card only.
Purpose: prevent oversized/clipped mobile UI while preserving desktop design/content. */
@media (max-width: 640px){
body{overflow-x:hidden;}
.site-header{
padding: 4px 0 !important;
background: rgba(255,255,255,.94) !important;
}
.navbar.container{
width: calc(100% - 18px) !important;
}
.navbar{
min-height: 54px !important;
gap: 8px !important;
padding: 5px 0 !important;
}
.brand{
max-width: calc(100vw - 72px) !important;
min-height: 44px !important;
padding: 4px 8px 4px 5px !important;
gap: 7px !important;
border-radius: 14px !important;
}
.brand img{
width: 34px !important;
height: 34px !important;
border-radius: 10px !important;
}
.brand strong{
font-size: .78rem !important;
line-height: 1.05 !important;
letter-spacing: -.02em !important;
}
.brand small{
font-size: .58rem !important;
line-height: 1 !important;
margin-top: 1px !important;
}
.menu-toggle{
width: 38px !important;
height: 38px !important;
flex: 0 0 38px !important;
border-radius: 12px !important;
gap: 4px !important;
}
.menu-toggle span{
width: 18px !important;
height: 2px !important;
}
.menu-toggle.open span:nth-child(1){transform:translateY(6px) rotate(45deg) !important;}
.menu-toggle.open span:nth-child(3){transform:translateY(-6px) rotate(-45deg) !important;}
.nav-menu{
left: 10px !important;
right: 10px !important;
top: calc(100% + 6px) !important;
padding: 9px !important;
gap: 6px !important;
border-radius: 16px !important;
max-height: calc(100vh - 74px) !important;
z-index: 9999 !important;
}
.nav-link{
padding: 9px 11px !important;
font-size: .82rem !important;
border-radius: 11px !important;
line-height: 1.15 !important;
}
.hero{
min-height: auto !important;
display: block !important;
}
.hero-content{
padding: 58px 0 34px !important;
}
.hero .eyebrow{
max-width: 100% !important;
font-size: .60rem !important;
padding: 5px 9px !important;
letter-spacing: .08em !important;
margin-bottom: 10px !important;
}
.hero h1{
font-size: clamp(1.72rem, 8.6vw, 2.05rem) !important;
line-height: 1.08 !important;
margin-bottom: 8px !important;
max-width: 100% !important;
}
.hero p{
font-size: .86rem !important;
line-height: 1.45 !important;
max-width: 100% !important;
}
.hero-actions{
margin-top: 16px !important;
gap: 8px !important;
max-width: 86% !important;
margin-left: auto !important;
margin-right: auto !important;
}
.hero-actions .btn{
min-height: 38px !important;
padding: 9px 14px !important;
font-size: .82rem !important;
border-radius: 18px !important;
}
.hero-emergency-card,
.hero-emergency-card.emergency-card-alt{
position: relative !important;
width: calc(100% - 28px) !important;
max-width: 340px !important;
margin: 0 auto 22px !important;
padding: 12px 12px 13px !important;
border-radius: 17px !important;
transform: none !important;
overflow: hidden !important;
}
.hero-emergency-card::before,
.hero-emergency-card.emergency-card-alt::before{
height: 3px !important;
}
.emergency-card-top{
display: flex !important;
align-items: center !important;
justify-content: space-between !important;
gap: 6px !important;
margin-bottom: 9px !important;
}
.emergency-pill,
.emergency-pill-live{
min-width: 0 !important;
max-width: calc(100% - 94px) !important;
padding: 5px 8px !important;
font-size: .58rem !important;
line-height: 1 !important;
letter-spacing: .035em !important;
overflow: hidden !important;
text-overflow: ellipsis !important;
white-space: nowrap !important;
}
.emergency-dot{
width: 7px !important;
height: 7px !important;
flex: 0 0 7px !important;
}
.emergency-status,
.emergency-status-alert{
flex: 0 0 auto !important;
padding: 5px 8px !important;
font-size: .62rem !important;
line-height: 1 !important;
white-space: nowrap !important;
}
.emergency-main-row{
display: grid !important;
grid-template-columns: minmax(0,1fr) 40px !important;
align-items: center !important;
gap: 8px !important;
}
.hero-emergency-card strong,
.emergency-card-alt strong{
font-size: .86rem !important;
margin-bottom: 3px !important;
}
.hero-hotline-number,
.emergency-card-alt .hero-hotline-number{
font-size: 1.28rem !important;
line-height: 1.05 !important;
margin: 0 !important;
letter-spacing: -.04em !important;
white-space: nowrap !important;
}
.emergency-siren-badge{
width: 40px !important;
height: 40px !important;
min-width: 40px !important;
}
.emergency-siren-badge i{
font-size: .56rem !important;
}
.hero-emergency-card p,
.emergency-card-alt p{
font-size: .70rem !important;
line-height: 1.32 !important;
margin: 8px 0 8px !important;
display: -webkit-box !important;
-webkit-line-clamp: 2 !important;
-webkit-box-orient: vertical !important;
overflow: hidden !important;
}
.hero-emergency-grid,
.emergency-card-alt .hero-emergency-grid{
grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
gap: 6px !important;
margin: 0 !important;
}
.hero-emergency-item,
.emergency-card-alt .hero-emergency-item{
padding: 7px 4px !important;
min-height: 46px !important;
border-radius: 11px !important;
}
.hero-emergency-item label{
font-size: .46rem !important;
margin-bottom: 2px !important;
letter-spacing: .04em !important;
}
.hero-emergency-item span{
font-size: .78rem !important;
line-height: 1 !important;
}
.emergency-action-strip{
display: none !important;
}
.gradient-band.section-pad{
padding-top: 28px !important;
}
}
@media (max-width: 390px){
.navbar.container{width: calc(100% - 14px) !important;}
.brand{max-width: calc(100vw - 66px) !important;padding-right: 6px !important;}
.brand img{width: 32px !important;height: 32px !important;}
.brand strong{font-size: .74rem !important;}
.brand small{display:none !important;}
.menu-toggle{width: 36px !important;height: 36px !important;flex-basis: 36px !important;}
.hero-content{padding-top: 54px !important;}
.hero-actions{max-width: 80% !important;}
.hero-emergency-card,
.hero-emergency-card.emergency-card-alt{width: calc(100% - 34px) !important;max-width: 322px !important;padding: 11px !important;}
.emergency-pill,
.emergency-pill-live{max-width: calc(100% - 84px) !important;font-size: .52rem !important;padding: 5px 7px !important;}
.emergency-status,
.emergency-status-alert{font-size: .56rem !important;padding: 5px 7px !important;}
.hero-hotline-number,
.emergency-card-alt .hero-hotline-number{font-size: 1.18rem !important;}
.emergency-siren-badge{width: 36px !important;height: 36px !important;min-width: 36px !important;}
}
/* 2026-06-30 v11 mobile header + hero + emergency centering balance fix */
@media (max-width: 480px){
.site-header{position:sticky;top:0}
.navbar.container{width:calc(100% - 16px) !important}
.navbar{
min-height:64px !important;
gap:10px !important;
padding:6px 0 !important;
}
.brand{
max-width:calc(100vw - 76px) !important;
padding:6px 8px !important;
gap:8px !important;
border-radius:16px !important;
}
.brand img{
width:36px !important;
height:36px !important;
border-radius:12px !important;
}
.brand strong{
font-size:.82rem !important;
line-height:1.06 !important;
}
.brand small{
display:block !important;
font-size:.60rem !important;
line-height:1.05 !important;
}
.menu-toggle{
width:38px !important;
height:38px !important;
flex:0 0 38px !important;
border-radius:13px !important;
}
.menu-toggle span{width:16px !important}
.hero{
min-height:auto !important;
padding-bottom:10px !important;
}
.hero-content{
padding:24px 0 14px !important;
max-width:100% !important;
}
.hero .eyebrow{
margin-bottom:10px !important;
font-size:.60rem !important;
padding:6px 10px !important;
}
.hero h1{
font-size:clamp(1.9rem,9vw,2.2rem) !important;
line-height:1.06 !important;
margin-bottom:10px !important;
}
.hero p{
font-size:.88rem !important;
line-height:1.46 !important;
margin-bottom:0 !important;
}
.hero-actions{
margin-top:16px !important;
margin-left:0 !important;
margin-right:0 !important;
max-width:100% !important;
gap:9px !important;
}
.hero-actions .btn{
min-height:40px !important;
padding:10px 14px !important;
font-size:.84rem !important;
border-radius:18px !important;
}
.hero-card,
.hero-emergency-card,
.hero-emergency-card.emergency-card-alt{
position:relative !important;
left:auto !important;
right:auto !important;
bottom:auto !important;
inset:auto !important;
display:block !important;
width:min(100%, 330px) !important;
max-width:330px !important;
margin:12px auto 14px !important;
padding:14px 14px 15px !important;
border-radius:18px !important;
text-align:left !important;
}
.emergency-card-top{
flex-direction:column !important;
align-items:center !important;
justify-content:center !important;
gap:8px !important;
margin-bottom:10px !important;
}
.emergency-pill,
.emergency-pill-live,
.emergency-status,
.emergency-status-alert{
max-width:100% !important;
white-space:nowrap !important;
overflow:visible !important;
text-overflow:clip !important;
}
.emergency-pill,
.emergency-pill-live{
padding:7px 12px !important;
font-size:.66rem !important;
line-height:1.05 !important;
}
.emergency-status,
.emergency-status-alert{
padding:6px 12px !important;
font-size:.76rem !important;
}
.emergency-main-row{
grid-template-columns:minmax(0,1fr) 48px !important;
gap:10px !important;
align-items:center !important;
}
.hero-emergency-card strong,
.emergency-card-alt strong{
font-size:.92rem !important;
margin-bottom:4px !important;
}
.hero-hotline-number,
.emergency-card-alt .hero-hotline-number{
font-size:1.42rem !important;
line-height:1.05 !important;
white-space:nowrap !important;
}
.emergency-siren-badge{
width:48px !important;
height:48px !important;
min-width:48px !important;
}
.hero-emergency-card p,
.emergency-card-alt p{
margin:9px 0 10px !important;
font-size:.76rem !important;
line-height:1.4 !important;
-webkit-line-clamp:3 !important;
}
.hero-emergency-grid,
.emergency-card-alt .hero-emergency-grid{
gap:7px !important;
justify-items:stretch !important;
}
.hero-emergency-item,
.emergency-card-alt .hero-emergency-item{
padding:8px 5px !important;
min-height:48px !important;
text-align:center !important;
}
.hero-emergency-item label{font-size:.50rem !important}
.hero-emergency-item span{font-size:.84rem !important}
.gradient-band.section-pad{
padding-top:16px !important;
padding-bottom:22px !important;
}
}
@media (max-width: 390px){
.brand{max-width:calc(100vw - 72px) !important}
.brand img{width:34px !important;height:34px !important}
.brand strong{font-size:.78rem !important}
.brand small{font-size:.56rem !important}
.menu-toggle{width:36px !important;height:36px !important;flex-basis:36px !important}
.hero-content{padding-top:20px !important;padding-bottom:12px !important}
.hero h1{font-size:1.82rem !important}
.hero p{font-size:.84rem !important}
.hero-actions .btn{font-size:.80rem !important}
.hero-card,
.hero-emergency-card,
.hero-emergency-card.emergency-card-alt{
width:calc(100% - 18px) !important;
max-width:320px !important;
margin-top:10px !important;
padding:13px 12px 14px !important;
}
.hero-hotline-number,
.emergency-card-alt .hero-hotline-number{font-size:1.28rem !important}
.emergency-siren-badge{width:44px !important;height:44px !important;min-width:44px !important}
}
/* 2026-06-30 v12 homepage quick-stats modernization + reduced gap */
.gradient-band,
.gradient-band.section-pad{
position: relative;
overflow: hidden;
padding: 26px 0 38px !important;
background:
radial-gradient(circle at 14% 18%, rgba(255,255,255,.12), transparent 13rem),
radial-gradient(circle at 86% 22%, rgba(247,201,72,.20), transparent 16rem),
radial-gradient(circle at 70% 88%, rgba(22,182,135,.18), transparent 15rem),
linear-gradient(135deg, #071f3f 0%, #1149a8 52%, #0cb9d7 100%) !important;
}
.gradient-band::before{
content: "";
position: absolute;
inset: 0;
pointer-events: none;
background:
linear-gradient(rgba(255,255,255,.05) 1px, transparent 1px),
linear-gradient(90deg, rgba(255,255,255,.05) 1px, transparent 1px);
background-size: 34px 34px;
mask-image: linear-gradient(180deg, rgba(0,0,0,.75), rgba(0,0,0,.18));
}
.gradient-band::after{
content: "";
position: absolute;
width: 340px;
height: 340px;
border-radius: 50%;
right: -120px;
bottom: -170px;
background: radial-gradient(circle, rgba(255,255,255,.16), rgba(255,255,255,0) 70%);
filter: blur(4px);
animation: statsOrbFloat 12s ease-in-out infinite;
}
.stats-grid{
position: relative;
z-index: 2;
gap: 20px;
margin-top: 0 !important;
}
.stats-grid div{
position: relative;
overflow: hidden;
min-height: 120px;
padding: 22px 22px 20px !important;
border-radius: 24px !important;
border: 1px solid rgba(255,255,255,.24) !important;
background: linear-gradient(160deg, rgba(255,255,255,.18), rgba(255,255,255,.10)) !important;
backdrop-filter: blur(14px);
-webkit-backdrop-filter: blur(14px);
box-shadow: 0 18px 42px rgba(2, 22, 52, .20) !important;
transition: transform .28s ease, box-shadow .28s ease, border-color .28s ease, background .28s ease;
animation: statsCardFloat 7.5s ease-in-out infinite;
}
.stats-grid div:nth-child(2){animation-delay: .6s}
.stats-grid div:nth-child(3){animation-delay: 1.2s}
.stats-grid div:nth-child(4){animation-delay: 1.8s}
.stats-grid div::before{
content: "";
position: absolute;
top: 0;
left: 0;
right: 0;
height: 4px;
background: linear-gradient(90deg, #72d7ff, #ffffff, #f7c948);
opacity: .95;
}
.stats-grid div::after{
content: "";
position: absolute;
right: -20px;
bottom: -20px;
width: 90px;
height: 90px;
border-radius: 50%;
background: radial-gradient(circle, rgba(255,255,255,.22), rgba(255,255,255,0) 70%);
transition: transform .28s ease, opacity .28s ease;
opacity: .8;
}
.stats-grid div:hover{
transform: translateY(-7px);
box-shadow: 0 26px 56px rgba(2, 22, 52, .28) !important;
border-color: rgba(255,255,255,.38) !important;
background: linear-gradient(160deg, rgba(255,255,255,.24), rgba(255,255,255,.14)) !important;
}
.stats-grid div:hover::after{
transform: scale(1.08);
opacity: 1;
}
.stats-grid strong{
display: block;
margin-bottom: 7px;
color: #ffffff !important;
font-size: 1.16rem !important;
line-height: 1.15;
letter-spacing: -.02em;
}
.stats-grid span{
color: rgba(237, 247, 255, .92) !important;
font-size: .95rem !important;
line-height: 1.45;
}
@keyframes statsCardFloat {
0%,100% { transform: translateY(0); }
50% { transform: translateY(-4px); }
}
@keyframes statsOrbFloat {
0%,100% { transform: translate3d(0,0,0); }
50% { transform: translate3d(-14px,-10px,0); }
}
@media (max-width: 900px){
.gradient-band,
.gradient-band.section-pad{
padding: 18px 0 28px !important;
}
.stats-grid{gap: 14px !important;}
.stats-grid div{
min-height: 108px;
padding: 18px 18px 16px !important;
border-radius: 20px !important;
}
.stats-grid strong{font-size: 1.02rem !important;}
.stats-grid span{font-size: .88rem !important;}
}
@media (max-width: 480px){
.gradient-band,
.gradient-band.section-pad{
padding: 10px 0 20px !important;
}
.gradient-band::before{background-size: 24px 24px;}
.stats-grid{
gap: 12px !important;
}
.stats-grid div{
min-height: auto;
padding: 16px 16px 15px !important;
border-radius: 18px !important;
animation-duration: 6.5s;
}
.stats-grid strong{
font-size: 1rem !important;
margin-bottom: 5px;
}
.stats-grid span{
font-size: .84rem !important;
line-height: 1.4;
}
}
@media (prefers-reduced-motion: reduce){
.gradient-band::after,
.stats-grid div{
animation: none !important;
}
}
/* 2026-06-30 v13 footer spacing balance fix */
.site-footer{
overflow:hidden;
}
.footer-grid{
grid-template-columns:minmax(280px,1.25fr) minmax(240px,1fr) minmax(220px,.95fr) !important;
gap:56px !important;
align-items:start !important;
padding:64px 0 54px !important;
}
.footer-grid > div{
min-width:0;
}
.footer-brand{
margin-bottom:18px !important;
gap:14px !important;
}
.footer-brand strong{
font-size:1.18rem;
line-height:1.1;
}
.site-footer h3{
margin-bottom:16px !important;
}
.site-footer p,
.site-footer a,
.footer-links li{
line-height:1.6;
}
.footer-links{
gap:10px !important;
}
.footer-links li{
list-style:none;
}
.footer-email{
word-break:break-word;
}
@media (max-width: 1100px){
.footer-grid{
grid-template-columns:repeat(2,minmax(240px,1fr)) !important;
gap:34px 42px !important;
padding:56px 0 46px !important;
}
}
@media (max-width: 680px){
.footer-grid{
grid-template-columns:1fr !important;
gap:24px !important;
padding:42px 0 34px !important;
}
.footer-brand{
margin-bottom:14px !important;
}
}
/* 2026-06-30 v14 About page spacing balance fix */
body[data-page="about.html"] main > section.section-pad{
padding-top:64px !important;
padding-bottom:64px !important;
}
body[data-page="about.html"] main > section.section-pad + section.section-pad,
body[data-page="about.html"] main > section.section-pad + section.soft-bg,
body[data-page="about.html"] main > section.soft-bg{
padding-top:46px !important;
padding-bottom:60px !important;
}
body[data-page="about.html"] .split-layout{
gap:34px !important;
align-items:center !important;
}
body[data-page="about.html"] .card-grid.two{
gap:22px !important;
}
body[data-page="about.html"] .info-card{
padding:24px !important;
}
@media (max-width:900px){
body[data-page="about.html"] main > section.section-pad{
padding-top:46px !important;
padding-bottom:44px !important;
}
body[data-page="about.html"] main > section.section-pad + section.section-pad,
body[data-page="about.html"] main > section.section-pad + section.soft-bg,
body[data-page="about.html"] main > section.soft-bg{
padding-top:34px !important;
padding-bottom:44px !important;
}
body[data-page="about.html"] .split-layout{
gap:24px !important;
}
}
@media (max-width:480px){
body[data-page="about.html"] main > section.section-pad{
padding-top:34px !important;
padding-bottom:32px !important;
}
body[data-page="about.html"] main > section.section-pad + section.section-pad,
body[data-page="about.html"] main > section.section-pad + section.soft-bg,
body[data-page="about.html"] main > section.soft-bg{
padding-top:24px !important;
padding-bottom:34px !important;
}
body[data-page="about.html"] .card-grid.two{
gap:14px !important;
}
body[data-page="about.html"] .info-card{
padding:20px !important;
}
}
/* 2026-06-30 v15 Services + Transparency modernization */
@keyframes civicCardFloat {
0%,100% { transform: translateY(0); }
50% { transform: translateY(-4px); }
}
@keyframes civicGlowPulse {
0%,100% { box-shadow: 0 0 0 0 rgba(21,94,239,.16); }
50% { box-shadow: 0 0 0 10px rgba(21,94,239,0); }
}
body[data-page="services.html"] .accordion,
body[data-page="transparency.html"] .document-list{
gap:20px !important;
}
body[data-page="services.html"] .accordion-item,
body[data-page="transparency.html"] .doc-row{
position:relative;
overflow:hidden;
border-radius:28px !important;
border:1px solid rgba(21,94,239,.10) !important;
background:linear-gradient(145deg, rgba(255,255,255,.94), rgba(245,250,255,.92)) !important;
box-shadow:0 18px 46px rgba(6,31,63,.09) !important;
transition:transform .28s ease, box-shadow .28s ease, border-color .28s ease, background .28s ease;
}
body[data-page="services.html"] .accordion-item::before,
body[data-page="transparency.html"] .doc-row::before{
content:"";
position:absolute;
left:0;
right:0;
top:0;
height:4px;
background:linear-gradient(90deg,#2f66ff,#19c1e8,#21c38b);
}
body[data-page="services.html"] .accordion-item::after,
body[data-page="transparency.html"] .doc-row::after{
content:"";
position:absolute;
right:-38px;
top:-38px;
width:120px;
height:120px;
border-radius:50%;
background:radial-gradient(circle, rgba(21,94,239,.10), rgba(21,94,239,0) 72%);
opacity:.9;
transition:transform .28s ease, opacity .28s ease;
}
body[data-page="services.html"] .accordion-item:hover,
body[data-page="transparency.html"] .doc-row:hover,
body[data-page="services.html"] .accordion-item.open{
transform:translateY(-6px) !important;
border-color:rgba(21,94,239,.18) !important;
box-shadow:0 26px 58px rgba(6,31,63,.14) !important;
}
body[data-page="services.html"] .accordion-item:hover::after,
body[data-page="transparency.html"] .doc-row:hover::after,
body[data-page="services.html"] .accordion-item.open::after{
transform:scale(1.08);
opacity:1;
}
body[data-page="services.html"] .accordion-trigger{
position:relative;
padding:24px 26px !important;
background:transparent !important;
color:#0a285d !important;
gap:18px;
}
body[data-page="services.html"] .accordion-trigger span{
position:relative;
display:flex;
align-items:center;
gap:14px;
font-size:1.08rem;
line-height:1.2;
}
body[data-page="services.html"] .accordion-trigger span::before{
content:"";
width:14px;
height:14px;
border-radius:50%;
flex:0 0 14px;
background:linear-gradient(135deg,#2f66ff,#1ac3e8);
box-shadow:0 0 0 7px rgba(21,94,239,.10);
animation:civicGlowPulse 2.8s ease-in-out infinite;
}
body[data-page="services.html"] .accordion-trigger b{
width:42px !important;
height:42px !important;
min-width:42px;
display:grid !important;
place-items:center;
border-radius:16px !important;
background:linear-gradient(135deg, rgba(47,102,255,.12), rgba(26,195,232,.18)) !important;
color:#1e57f1 !important;
font-size:1.55rem !important;
font-weight:800;
transition:transform .28s ease, background .28s ease, color .28s ease, box-shadow .28s ease;
box-shadow:inset 0 0 0 1px rgba(21,94,239,.06);
}
body[data-page="services.html"] .accordion-trigger:hover b,
body[data-page="services.html"] .accordion-item.open .accordion-trigger b{
transform:rotate(180deg) scale(1.04);
background:linear-gradient(135deg,#2f66ff,#19c1e8) !important;
color:white !important;
box-shadow:0 14px 30px rgba(21,94,239,.24);
}
body[data-page="services.html"] .accordion-content{
background:linear-gradient(180deg, rgba(247,251,255,.72), rgba(240,252,248,.82));
}
body[data-page="services.html"] .accordion-content.open{
border-top:1px solid rgba(21,94,239,.08);
}
body[data-page="services.html"] .accordion-content p{
padding:18px 26px 16px !important;
color:#5a6d87 !important;
font-size:.98rem;
line-height:1.65;
}
body[data-page="services.html"] .service-meta{
padding:0 26px 26px !important;
gap:14px !important;
}
body[data-page="services.html"] .service-meta span{
position:relative;
padding:16px 16px 16px 18px !important;
border-radius:18px !important;
background:linear-gradient(135deg, rgba(255,255,255,.88), rgba(240,247,255,.96)) !important;
border:1px solid rgba(21,94,239,.08) !important;
box-shadow:0 10px 24px rgba(6,31,63,.05);
transition:transform .22s ease, box-shadow .22s ease, border-color .22s ease;
}
body[data-page="services.html"] .service-meta span::before{
content:"";
position:absolute;
left:0;
top:14px;
bottom:14px;
width:4px;
border-radius:999px;
background:linear-gradient(180deg,#2f66ff,#21c38b);
}
body[data-page="services.html"] .service-meta span:hover{
transform:translateY(-3px);
border-color:rgba(21,94,239,.14) !important;
box-shadow:0 16px 28px rgba(6,31,63,.08);
}
body[data-page="transparency.html"] .doc-row{
display:grid !important;
grid-template-columns:minmax(0,1fr) auto;
align-items:center !important;
gap:22px !important;
padding:24px 28px !important;
}
body[data-page="transparency.html"] .doc-row > div{
position:relative;
padding-left:72px;
}
body[data-page="transparency.html"] .doc-row > div::before{
content:"↓";
position:absolute;
left:0;
top:50%;
transform:translateY(-50%);
width:52px;
height:52px;
border-radius:18px;
display:grid;
place-items:center;
font-size:1.25rem;
font-weight:800;
color:#155eef;
background:linear-gradient(135deg, rgba(47,102,255,.14), rgba(26,195,232,.20));
box-shadow:0 14px 30px rgba(21,94,239,.12);
}
body[data-page="transparency.html"] .doc-row strong{
font-size:1.18rem !important;
margin-bottom:6px;
color:#0a285d !important;
line-height:1.18;
}
body[data-page="transparency.html"] .doc-row span{
color:#60748e !important;
font-size:.97rem !important;
line-height:1.6;
}
body[data-page="transparency.html"] .doc-row .btn,
body[data-page="transparency.html"] .doc-row .btn-small{
width:auto !important;
min-width:138px;
min-height:46px;
padding:11px 18px !important;
border-radius:16px !important;
background:linear-gradient(135deg,#2f66ff,#18bfdc) !important;
color:#fff !important;
font-weight:800 !important;
box-shadow:0 14px 28px rgba(21,94,239,.20);
border:0 !important;
transition:transform .24s ease, box-shadow .24s ease, filter .24s ease;
}
body[data-page="transparency.html"] .doc-row .btn:hover,
body[data-page="transparency.html"] .doc-row .btn-small:hover{
transform:translateY(-2px);
filter:saturate(1.05);
box-shadow:0 18px 34px rgba(21,94,239,.28);
}
body[data-page="services.html"] .accordion-item:nth-child(odd),
body[data-page="transparency.html"] .doc-row:nth-child(odd){
animation:civicCardFloat 7.2s ease-in-out infinite;
}
body[data-page="services.html"] .accordion-item:nth-child(even),
body[data-page="transparency.html"] .doc-row:nth-child(even){
animation:civicCardFloat 7.2s ease-in-out infinite;
animation-delay:1.2s;
}
@media (max-width: 900px){
body[data-page="services.html"] .accordion,
body[data-page="transparency.html"] .document-list{gap:16px !important;}
body[data-page="services.html"] .accordion-trigger{padding:21px 20px !important;}
body[data-page="services.html"] .accordion-trigger span{font-size:1rem;gap:12px;}
body[data-page="services.html"] .accordion-content p{padding:16px 20px 14px !important;}
body[data-page="services.html"] .service-meta{padding:0 20px 20px !important;grid-template-columns:1fr !important;}
body[data-page="transparency.html"] .doc-row{padding:20px 22px !important;gap:16px !important;}
body[data-page="transparency.html"] .doc-row > div{padding-left:64px;}
body[data-page="transparency.html"] .doc-row > div::before{width:46px;height:46px;border-radius:16px;}
body[data-page="transparency.html"] .doc-row strong{font-size:1.08rem !important;}
}
@media (max-width: 640px){
body[data-page="services.html"] .accordion-item,
body[data-page="transparency.html"] .doc-row{border-radius:22px !important;}
body[data-page="services.html"] .accordion-trigger{padding:18px 16px !important;gap:12px;}
body[data-page="services.html"] .accordion-trigger span{font-size:.95rem;gap:10px;}
body[data-page="services.html"] .accordion-trigger span::before{width:12px;height:12px;flex-basis:12px;box-shadow:0 0 0 6px rgba(21,94,239,.10);}
body[data-page="services.html"] .accordion-trigger b{width:38px !important;height:38px !important;min-width:38px;border-radius:14px !important;font-size:1.35rem !important;}
body[data-page="services.html"] .accordion-content p{padding:14px 16px 12px !important;font-size:.92rem;}
body[data-page="services.html"] .service-meta{padding:0 16px 16px !important;gap:10px !important;}
body[data-page="services.html"] .service-meta span{padding:14px 14px 14px 16px !important;border-radius:16px !important;font-size:.90rem;}
body[data-page="transparency.html"] .doc-row{
grid-template-columns:1fr !important;
align-items:flex-start !important;
padding:18px 16px !important;
gap:14px !important;
}
body[data-page="transparency.html"] .doc-row > div{padding-left:56px;}
body[data-page="transparency.html"] .doc-row > div::before{width:42px;height:42px;border-radius:14px;font-size:1.05rem;}
body[data-page="transparency.html"] .doc-row strong{font-size:1rem !important;}
body[data-page="transparency.html"] .doc-row span{font-size:.89rem !important;line-height:1.55;}
body[data-page="transparency.html"] .doc-row .btn,
body[data-page="transparency.html"] .doc-row .btn-small{width:100% !important;min-width:0;min-height:42px;font-size:.88rem !important;border-radius:14px !important;}
}
@media (prefers-reduced-motion: reduce){
body[data-page="services.html"] .accordion-item,
body[data-page="transparency.html"] .doc-row,
body[data-page="services.html"] .accordion-trigger span::before{
animation:none !important;
}
}
/* 2026-06-30 v16 footer logo spacing + single-line email fix */
.footer-grid{
grid-template-columns:minmax(320px,1.25fr) minmax(300px,1fr) minmax(220px,.95fr) !important;
gap:72px !important;
}
.footer-grid > div:first-child{
max-width:340px;
}
.footer-brand{
display:flex !important;
align-items:center !important;
gap:16px !important;
margin-bottom:18px !important;
white-space:nowrap;
}
.footer-brand img{
width:60px !important;
height:60px !important;
flex:0 0 60px !important;
}
.footer-brand strong{
display:block;
font-size:1.2rem !important;
line-height:1.1 !important;
white-space:nowrap !important;
}
.site-footer p{
max-width:100%;
}
.footer-email{
display:inline !important;
white-space:nowrap !important;
word-break:normal !important;
overflow-wrap:normal !important;
}
@media (max-width: 1180px){
.footer-grid{
grid-template-columns:minmax(260px,1fr) minmax(260px,1fr) !important;
gap:40px 48px !important;
}
.footer-grid > div:first-child{
max-width:none;
}
}
@media (max-width: 820px){
.footer-grid{
grid-template-columns:1fr !important;
gap:26px !important;
}
.footer-brand{
white-space:normal;
}
.footer-brand strong{
white-space:normal !important;
}
.footer-email{
white-space:normal !important;
}
}
/* 2026-06-30 v17 desktop hero top-gap reduction + footer redesign */
@media (min-width: 901px){
.hero{
min-height: 630px !important;
}
.hero-content{
padding: 34px 0 86px !important;
max-width: 760px !important;
}
.hero .eyebrow{
margin-bottom: 14px !important;
}
.hero h1{
margin-bottom: 14px !important;
}
.hero p{
max-width: 640px !important;
}
.hero-actions{
margin-top: 24px !important;
}
.hero-card,
.hero-emergency-card,
.hero-emergency-card.emergency-card-alt{
bottom: 36px !important;
}
}
@media (min-width: 1280px){
.hero{
min-height: 600px !important;
}
.hero-content{
padding: 26px 0 80px !important;
}
}
.site-footer{
position: relative;
background:
radial-gradient(circle at 92% -8%, rgba(247,201,72,.14), transparent 13rem),
radial-gradient(circle at 9% 108%, rgba(21,94,239,.18), transparent 18rem),
linear-gradient(135deg, #051c3b 0%, #0a3369 50%, #095c67 100%) !important;
}
.site-footer::after{
content: "";
position: absolute;
inset: 0;
pointer-events: none;
background:
linear-gradient(rgba(255,255,255,.04) 1px, transparent 1px),
linear-gradient(90deg, rgba(255,255,255,.04) 1px, transparent 1px);
background-size: 36px 36px;
mask-image: linear-gradient(180deg, rgba(0,0,0,.55), transparent 90%);
}
.footer-grid{
position: relative;
z-index: 1;
grid-template-columns: minmax(360px, 1.35fr) minmax(300px, 1fr) minmax(240px, .92fr) !important;
gap: 28px !important;
align-items: stretch !important;
padding: 62px 0 48px !important;
}
.footer-grid > div{
position: relative;
min-width: 0;
padding: 24px 26px !important;
border-radius: 24px;
background: linear-gradient(160deg, rgba(255,255,255,.08), rgba(255,255,255,.04));
border: 1px solid rgba(255,255,255,.10);
box-shadow: 0 18px 42px rgba(3, 18, 40, .18);
backdrop-filter: blur(12px);
-webkit-backdrop-filter: blur(12px);
transition: transform .25s ease, box-shadow .25s ease, border-color .25s ease;
}
.footer-grid > div:hover{
transform: translateY(-4px);
border-color: rgba(255,255,255,.16);
box-shadow: 0 24px 50px rgba(3, 18, 40, .24);
}
.footer-grid > div:first-child{
max-width: none !important;
}
.footer-brand{
display: flex !important;
align-items: center !important;
gap: 16px !important;
margin-bottom: 16px !important;
white-space: nowrap;
}
.footer-brand img{
width: 58px !important;
height: 58px !important;
flex: 0 0 58px !important;
border-radius: 18px !important;
}
.footer-brand strong{
display: block;
font-size: 1.2rem !important;
line-height: 1.1 !important;
white-space: nowrap !important;
color: #ffffff !important;
}
.site-footer h3{
color: #ffffff !important;
margin-bottom: 14px !important;
font-size: 1.14rem !important;
letter-spacing: -.02em;
}
.site-footer p,
.site-footer a,
.footer-links li{
color: #e5f0ff !important;
line-height: 1.62;
}
.footer-links{
gap: 10px !important;
}
.footer-links a{
display: inline-flex;
position: relative;
padding-left: 14px;
}
.footer-links a::before{
content: "";
position: absolute;
left: 0;
top: .7em;
width: 7px;
height: 7px;
border-radius: 50%;
background: linear-gradient(135deg, #58d8ff, #f7c948);
}
.footer-links a:hover{
color: #ffffff !important;
}
.footer-email{
display: inline !important;
white-space: nowrap !important;
word-break: normal !important;
overflow-wrap: normal !important;
}
.footer-bottom{
position: relative;
z-index: 1;
padding: 16px 20px 22px !important;
border-top: 1px solid rgba(255,255,255,.10) !important;
color: #d8e9ff !important;
}
@media (max-width: 1180px){
.footer-grid{
grid-template-columns: repeat(2, minmax(260px, 1fr)) !important;
gap: 22px !important;
padding: 54px 0 42px !important;
}
}
@media (max-width: 820px){
.footer-grid{
grid-template-columns: 1fr !important;
gap: 18px !important;
padding: 40px 0 30px !important;
}
.footer-grid > div{
padding: 20px 18px !important;
border-radius: 20px;
}
.footer-brand{
white-space: normal;
}
.footer-brand strong,
.footer-email{
white-space: normal !important;
}
}
/* 2026-06-30 v18 desktop header logo restore + hero first-screen balance */
@media (min-width: 901px){
.navbar{
min-height: 76px !important;
padding: 10px 0 !important;
gap: 22px !important;
}
.brand{
gap: 12px !important;
padding: 9px 14px !important;
border-radius: 20px !important;
max-width: none !important;
}
.brand img{
width: 52px !important;
height: 52px !important;
border-radius: 16px !important;
flex: 0 0 52px !important;
}
.brand strong{
font-size: 1rem !important;
line-height: 1.06 !important;
white-space: nowrap !important;
}
.brand small{
display: block !important;
font-size: .72rem !important;
line-height: 1.08 !important;
white-space: nowrap !important;
}
.hero{
min-height: 680px !important;
}
.hero-content{
padding: 54px 0 112px !important;
max-width: 760px !important;
}
.hero .eyebrow{
margin-bottom: 16px !important;
}
.hero h1{
margin-bottom: 16px !important;
}
.hero p{
max-width: 640px !important;
}
.hero-actions{
margin-top: 26px !important;
}
.hero-card,
.hero-emergency-card,
.hero-emergency-card.emergency-card-alt{
bottom: 42px !important;
}
.gradient-band,
.gradient-band.section-pad{
padding-top: 18px !important;
padding-bottom: 28px !important;
}
}
@media (min-width: 1280px){
.hero{
min-height: 700px !important;
}
.hero-content{
padding: 58px 0 118px !important;
}
}
/* 2026-06-30 v19 clean professional footer correction
Purpose: remove the boxed/card footer design and restore a clean spacious footer layout. */
.site-footer{
position:relative !important;
overflow:hidden !important;
background:
radial-gradient(circle at 96% -18%, rgba(255,255,255,.14), transparent 17rem),
linear-gradient(135deg, #061f3f 0%, #0b356f 54%, #075f55 100%) !important;
}
.site-footer::after{
display:none !important;
}
.site-footer::before{
content:"" !important;
position:absolute !important;
right:-140px !important;
top:-170px !important;
width:360px !important;
height:360px !important;
border-radius:50% !important;
background:rgba(255,255,255,.11) !important;
pointer-events:none !important;
}
.footer-grid{
position:relative !important;
z-index:1 !important;
display:grid !important;
grid-template-columns: minmax(330px, 1.15fr) minmax(320px, 1fr) minmax(220px, .8fr) !important;
gap:72px !important;
align-items:start !important;
max-width:1100px !important;
margin:0 auto !important;
padding:62px 0 54px !important;
}
.footer-grid > div{
padding:0 !important;
margin:0 !important;
max-width:none !important;
min-width:0 !important;
border:0 !important;
border-radius:0 !important;
background:transparent !important;
box-shadow:none !important;
backdrop-filter:none !important;
-webkit-backdrop-filter:none !important;
transform:none !important;
}
.footer-grid > div:hover{
transform:none !important;
box-shadow:none !important;
border-color:transparent !important;
}
.footer-brand{
display:flex !important;
align-items:center !important;
gap:14px !important;
margin:0 0 18px !important;
padding:0 !important;
background:transparent !important;
border:0 !important;
border-radius:0 !important;
white-space:nowrap !important;
}
.footer-brand img{
width:58px !important;
height:58px !important;
flex:0 0 58px !important;
border-radius:16px !important;
background:white !important;
box-shadow:0 10px 24px rgba(0,0,0,.18) !important;
}
.footer-brand strong{
display:block !important;
color:#ffffff !important;
font-size:1.25rem !important;
font-weight:800 !important;
line-height:1.12 !important;
white-space:nowrap !important;
}
.site-footer h3{
color:#ffffff !important;
font-size:1.12rem !important;
font-weight:800 !important;
line-height:1.2 !important;
margin:0 0 16px !important;
padding:0 !important;
}
.site-footer p{
color:#dcebff !important;
font-size:.98rem !important;
line-height:1.55 !important;
margin:0 !important;
max-width:330px !important;
}
.site-footer a,
.footer-links li{
color:#dcebff !important;
font-size:.98rem !important;
line-height:1.45 !important;
}
.footer-links{
display:grid !important;
gap:9px !important;
padding:0 !important;
margin:0 !important;
list-style:none !important;
}
.footer-links a{
display:inline-block !important;
padding:0 !important;
color:#dcebff !important;
transition:color .2s ease, transform .2s ease !important;
}
.footer-links a::before{
display:none !important;
}
.footer-links a:hover{
color:#ffffff !important;
transform:translateX(3px) !important;
}
.footer-email{
display:inline !important;
white-space:nowrap !important;
word-break:normal !important;
overflow-wrap:normal !important;
}
.footer-bottom{
position:relative !important;
z-index:1 !important;
padding:18px 20px !important;
border-top:1px solid rgba(255,255,255,.12) !important;
color:#c7dcff !important;
text-align:center !important;
font-size:.92rem !important;
}
@media (max-width:1180px){
.footer-grid{
max-width:calc(100% - 40px) !important;
grid-template-columns:1.1fr 1fr .8fr !important;
gap:44px !important;
}
}
@media (max-width:900px){
.footer-grid{
grid-template-columns:1fr 1fr !important;
gap:34px 42px !important;
padding:52px 0 44px !important;
}
.site-footer p{
max-width:100% !important;
}
}
@media (max-width:640px){
.footer-grid{
grid-template-columns:1fr !important;
gap:28px !important;
padding:42px 0 34px !important;
}
.footer-brand{
white-space:normal !important;
}
.footer-brand img{
width:52px !important;
height:52px !important;
flex-basis:52px !important;
}
.footer-brand strong{
white-space:normal !important;
font-size:1.12rem !important;
}
.footer-email{
white-space:normal !important;
}
}
/* 2026-06-30 v20 footer compact typography + spacing rebalance */
.site-footer .container.footer-grid{
max-width: 1180px !important;
grid-template-columns: minmax(320px, 1.2fr) minmax(290px, 1fr) minmax(220px, .82fr) !important;
gap: 92px !important;
padding: 56px 0 46px !important;
}
.site-footer .footer-grid > div{
min-width: 0 !important;
}
.site-footer .footer-grid > div:first-child{
max-width: 390px !important;
}
.site-footer .footer-brand{
gap: 12px !important;
margin-bottom: 14px !important;
}
.site-footer .footer-brand img{
width: 54px !important;
height: 54px !important;
flex: 0 0 54px !important;
}
.site-footer .footer-brand strong{
font-size: 1.08rem !important;
line-height: 1.08 !important;
}
.site-footer h3{
font-size: 1rem !important;
margin-bottom: 12px !important;
}
.site-footer p,
.site-footer a,
.site-footer .footer-links li{
font-size: .90rem !important;
line-height: 1.45 !important;
}
.site-footer p{
max-width: 100% !important;
}
.site-footer .footer-links{
gap: 8px !important;
}
.site-footer .footer-email{
white-space: nowrap !important;
}
.site-footer .footer-bottom{
font-size: .88rem !important;
padding: 16px 20px 18px !important;
}
@media (max-width: 1200px){
.site-footer .container.footer-grid{
max-width: calc(100% - 44px) !important;
gap: 54px !important;
grid-template-columns: minmax(280px, 1.1fr) minmax(260px, 1fr) minmax(200px, .82fr) !important;
}
}
@media (max-width: 900px){
.site-footer .container.footer-grid{
grid-template-columns: 1fr 1fr !important;
gap: 30px 38px !important;
padding: 46px 0 38px !important;
}
.site-footer .footer-grid > div:first-child{
max-width: none !important;
}
}
@media (max-width: 640px){
.site-footer .container.footer-grid{
grid-template-columns: 1fr !important;
gap: 24px !important;
padding: 38px 0 30px !important;
}
.site-footer .footer-brand img{
width: 50px !important;
height: 50px !important;
flex-basis: 50px !important;
}
.site-footer .footer-brand strong{
font-size: 1rem !important;
}
.site-footer p,
.site-footer a,
.site-footer .footer-links li{
font-size: .92rem !important;
}
.site-footer .footer-email{
white-space: normal !important;
}
}
/* 2026-06-30 v21 global mobile page-hero gap reduction */
@media (max-width: 768px){
.page-hero,
.page-hero.section-pad-sm{
min-height: 166px !important;
padding: 24px 0 20px !important;
display: flex !important;
align-items: flex-end !important;
}
.page-hero .container{
width: calc(100% - 24px) !important;
margin: 0 auto !important;
}
.page-hero .eyebrow{
margin-bottom: 8px !important;
}
.page-hero h1{
margin-bottom: 8px !important;
}
.page-hero p{
margin-bottom: 0 !important;
max-width: 30ch !important;
}
}
@media (max-width: 480px){
.page-hero,
.page-hero.section-pad-sm{
min-height: 150px !important;
padding: 18px 0 16px !important;
}
.page-hero .container{
width: calc(100% - 20px) !important;
}
.page-hero .eyebrow{
margin-bottom: 7px !important;
padding: 5px 9px !important;
}
.page-hero h1{
margin-bottom: 7px !important;
font-size: clamp(1.58rem, 7.6vw, 1.88rem) !important;
line-height: 1.06 !important;
}
.page-hero p{
font-size: .84rem !important;
line-height: 1.42 !important;
max-width: 28ch !important;
}
}
@media (max-width: 380px){
.page-hero,
.page-hero.section-pad-sm{
min-height: 142px !important;
padding: 16px 0 14px !important;
}
.page-hero h1{
font-size: 1.46rem !important;
}
.page-hero p{
font-size: .80rem !important;
}
}
/* 2026-06-30 v22 Barangay Services / Service Pledge gap fix */
body[data-page="citizens-charter.html"] main > section.section-pad{
padding-top:42px !important;
padding-bottom:50px !important;
}
body[data-page="citizens-charter.html"] .page-hero + .section-pad{
padding-top:34px !important;
}
body[data-page="citizens-charter.html"] .pledge{
margin-top:0 !important;
padding:24px 28px !important;
}
body[data-page="citizens-charter.html"] .pledge + .table-wrap,
body[data-page="citizens-charter.html"] .table-wrap{
margin-top:18px !important;
}
@media (max-width:900px){
body[data-page="citizens-charter.html"] main > section.section-pad{
padding-top:30px !important;
padding-bottom:40px !important;
}
body[data-page="citizens-charter.html"] .page-hero + .section-pad{
padding-top:24px !important;
}
body[data-page="citizens-charter.html"] .pledge{
padding:22px !important;
}
}
@media (max-width:480px){
body[data-page="citizens-charter.html"] main > section.section-pad{
padding-top:20px !important;
padding-bottom:30px !important;
}
body[data-page="citizens-charter.html"] .page-hero + .section-pad{
padding-top:16px !important;
}
body[data-page="citizens-charter.html"] .pledge{
padding:18px 16px !important;
border-radius:18px !important;
}
body[data-page="citizens-charter.html"] .pledge h2{
font-size:1.35rem !important;
margin-bottom:8px !important;
}
body[data-page="citizens-charter.html"] .pledge p{
font-size:.84rem !important;
line-height:1.45 !important;
}
body[data-page="citizens-charter.html"] .table-wrap{
margin-top:14px !important;
}
}
/* 2026-06-30 v23 Global section spacing balance fix
Applies consistent spacing across all pages without changing content/functionality. */
/* Desktop general section spacing */
main > section.section-pad{
padding-top:58px !important;
padding-bottom:58px !important;
}
main > section.section-pad-sm{
padding-top:46px !important;
padding-bottom:46px !important;
}
/* Reduce excessive white space directly after page hero banners */
.page-hero + .section-pad,
.page-hero + .section-pad-sm,
.page-hero + section{
padding-top:42px !important;
}
/* Keep homepage hero/stat band intentional and not affected too much */
body[data-page="index.html"] .hero + .gradient-band,
body[data-page="index.html"] .gradient-band.section-pad{
padding-top:44px !important;
padding-bottom:44px !important;
}
/* Consistent spacing for common content blocks */
.section-heading{
margin-bottom:30px !important;
}
.split-layout{
gap:34px !important;
}
.card-grid,
.card-grid.three,
.card-grid.two,
.officials-grid,
.profile-grid,
.downloads-grid,
.document-list,
.accordion{
gap:20px !important;
}
.info-card,
.official-card,
.download-card,
.contact-card,
.contact-form,
.pledge,
.doc-row,
.accordion-item{
margin-top:0 !important;
}
/* About page spacing */
body[data-page="about.html"] main > section.section-pad{
padding-top:50px !important;
padding-bottom:50px !important;
}
body[data-page="about.html"] .section-pad + .section-pad,
body[data-page="about.html"] .section-pad + .soft-bg,
body[data-page="about.html"] .soft-bg{
padding-top:38px !important;
padding-bottom:48px !important;
}
/* Officials / Projects / Announcements / Downloads cards */
body[data-page="officials.html"] .officials-grid,
body[data-page="projects.html"] .card-grid,
body[data-page="announcements.html"] .card-grid,
body[data-page="downloads.html"] .downloads-grid{
gap:18px !important;
}
/* Services and Transparency pages */
body[data-page="services.html"] .page-hero + .section-pad,
body[data-page="transparency.html"] .page-hero + .section-pad{
padding-top:34px !important;
}
body[data-page="services.html"] .accordion,
body[data-page="transparency.html"] .document-list{
gap:16px !important;
}
/* Citizen/Barangay Services process page */
body[data-page="citizens-charter.html"] .page-hero + .section-pad{
padding-top:28px !important;
}
body[data-page="citizens-charter.html"] main > section.section-pad{
padding-top:38px !important;
padding-bottom:44px !important;
}
/* Contact page */
body[data-page="contact.html"] .page-hero + .section-pad{
padding-top:34px !important;
}
body[data-page="contact.html"] .contact-grid{
gap:24px !important;
}
/* Tablet */
@media (max-width:900px){
main > section.section-pad{
padding-top:42px !important;
padding-bottom:42px !important;
}
main > section.section-pad-sm{
padding-top:34px !important;
padding-bottom:34px !important;
}
.page-hero + .section-pad,
.page-hero + .section-pad-sm,
.page-hero + section{
padding-top:28px !important;
}
.section-heading{
margin-bottom:24px !important;
}
.split-layout{
gap:24px !important;
}
.card-grid,
.card-grid.three,
.card-grid.two,
.officials-grid,
.profile-grid,
.downloads-grid,
.document-list,
.accordion{
gap:16px !important;
}
body[data-page="about.html"] main > section.section-pad,
body[data-page="citizens-charter.html"] main > section.section-pad{
padding-top:34px !important;
padding-bottom:38px !important;
}
body[data-page="services.html"] .page-hero + .section-pad,
body[data-page="transparency.html"] .page-hero + .section-pad,
body[data-page="contact.html"] .page-hero + .section-pad{
padding-top:24px !important;
}
}
/* Mobile */
@media (max-width:480px){
main > section.section-pad{
padding-top:28px !important;
padding-bottom:30px !important;
}
main > section.section-pad-sm{
padding-top:24px !important;
padding-bottom:24px !important;
}
.page-hero + .section-pad,
.page-hero + .section-pad-sm,
.page-hero + section{
padding-top:18px !important;
}
.section-heading{
margin-bottom:18px !important;
}
.section-heading h2,
.split-layout h2,
.pledge h2{
margin-bottom:8px !important;
}
.split-layout{
gap:18px !important;
}
.card-grid,
.card-grid.three,
.card-grid.two,
.officials-grid,
.profile-grid,
.downloads-grid,
.document-list,
.accordion{
gap:14px !important;
}
body[data-page="about.html"] main > section.section-pad,
body[data-page="citizens-charter.html"] main > section.section-pad{
padding-top:22px !important;
padding-bottom:28px !important;
}
body[data-page="services.html"] .page-hero + .section-pad,
body[data-page="transparency.html"] .page-hero + .section-pad,
body[data-page="contact.html"] .page-hero + .section-pad,
body[data-page="citizens-charter.html"] .page-hero + .section-pad{
padding-top:16px !important;
}
body[data-page="index.html"] .hero + .gradient-band,
body[data-page="index.html"] .gradient-band.section-pad{
padding-top:10px !important;
padding-bottom:20px !important;
}
.info-card,
.official-card,
.download-card,
.contact-card,
.contact-form,
.pledge,
.doc-row{
padding:18px 16px !important;
}
}
/* 2026-06-30 v24 Contact Us navigation highlight */
.nav-link.nav-contact{
position: relative;
color: #ffffff !important;
background: linear-gradient(135deg, #1d73ff 0%, #18c6d8 100%) !important;
border: 1px solid rgba(24,198,216,.22) !important;
border-radius: 999px !important;
padding-inline: 16px !important;
font-weight: 800 !important;
box-shadow: 0 10px 24px rgba(17, 92, 216, .18);
transition: transform .22s ease, box-shadow .22s ease, filter .22s ease, background .22s ease;
}
.nav-link.nav-contact:hover,
.nav-link.nav-contact:focus-visible{
color: #ffffff !important;
transform: translateY(-1px);
filter: saturate(1.05);
box-shadow: 0 14px 28px rgba(17, 92, 216, .24);
}
.nav-link.nav-contact.active{
color: #ffffff !important;
background: linear-gradient(135deg, #155eef 0%, #14b8d4 100%) !important;
box-shadow: 0 14px 30px rgba(17, 92, 216, .28);
}
@media (max-width: 900px){
.nav-link.nav-contact{
width: 100%;
justify-content: center;
min-height: 42px;
border-radius: 14px !important;
padding: 10px 14px !important;
box-shadow: 0 8px 18px rgba(17, 92, 216, .16);
}
}
/* 2026-06-30 v25 standard subtle scrollbar fix */
html{
scrollbar-width: thin;
scrollbar-color: rgba(90, 106, 126, .45) rgba(245, 248, 252, .85);
}
body{
scrollbar-width: thin;
scrollbar-color: rgba(90, 106, 126, .45) rgba(245, 248, 252, .85);
}
/* Chromium / Edge / Safari */
::-webkit-scrollbar{
width: 9px;
height: 9px;
}
::-webkit-scrollbar-track{
background: rgba(245, 248, 252, .85);
}
::-webkit-scrollbar-thumb{
background: rgba(90, 106, 126, .42);
border-radius: 999px;
border: 2px solid rgba(245, 248, 252, .85);
}
::-webkit-scrollbar-thumb:hover{
background: rgba(70, 86, 105, .58);
}
::-webkit-scrollbar-corner{
background: rgba(245, 248, 252, .85);
}
/* Keep internal horizontal scroll areas clean and less visible */
.table-wrap,
.charter-scroll,
.process-table-wrapper{
scrollbar-width: thin;
scrollbar-color: rgba(90, 106, 126, .38) rgba(245, 248, 252, .7);
}
.table-wrap::-webkit-scrollbar,
.charter-scroll::-webkit-scrollbar,
.process-table-wrapper::-webkit-scrollbar{
height: 7px;
width: 7px;
}
.table-wrap::-webkit-scrollbar-track,
.charter-scroll::-webkit-scrollbar-track,
.process-table-wrapper::-webkit-scrollbar-track{
background: rgba(245, 248, 252, .65);
border-radius: 999px;
}
.table-wrap::-webkit-scrollbar-thumb,
.charter-scroll::-webkit-scrollbar-thumb,
.process-table-wrapper::-webkit-scrollbar-thumb{
background: rgba(90, 106, 126, .35);
border-radius: 999px;
border: 2px solid rgba(245, 248, 252, .65);
}
/* 2026-06-30 v26 force footer email single-line on desktop/tablet */
@media (min-width: 641px){
.site-footer .container.footer-grid{
max-width: 1240px !important;
grid-template-columns: minmax(300px, 1fr) minmax(380px, 1.18fr) minmax(230px, .82fr) !important;
gap: 70px !important;
}
.site-footer .footer-grid > div:nth-child(2){
min-width: 380px !important;
}
.site-footer .footer-grid > div:nth-child(2) p{
max-width: none !important;
width: max-content !important;
min-width: 380px !important;
}
.site-footer .footer-email{
display: inline-block !important;
white-space: nowrap !important;
word-break: keep-all !important;
overflow-wrap: normal !important;
hyphens: none !important;
}
}
@media (min-width: 641px) and (max-width: 900px){
.site-footer .container.footer-grid{
grid-template-columns: 1fr !important;
gap: 28px !important;
}
.site-footer .footer-grid > div:nth-child(2){
min-width: 0 !important;
}
.site-footer .footer-grid > div:nth-child(2) p{
width: auto !important;
min-width: 0 !important;
max-width: none !important;
}
}
@media (max-width: 640px){
.site-footer .footer-email{
white-space: normal !important;
}
}
/* 2026-06-30 v27 footer desktop gap rebalance fix */
@media (min-width: 901px){
.site-footer .container.footer-grid{
max-width: 980px !important;
grid-template-columns: minmax(250px, .95fr) minmax(300px, 1.02fr) minmax(190px, .72fr) !important;
column-gap: 36px !important;
row-gap: 18px !important;
justify-content: center !important;
padding: 48px 0 40px !important;
}
.site-footer .footer-grid > div{
justify-self: start !important;
}
.site-footer .footer-grid > div:first-child{
max-width: 290px !important;
}
.site-footer .footer-grid > div:nth-child(2){
min-width: 0 !important;
}
.site-footer .footer-grid > div:nth-child(2) p{
width: auto !important;
min-width: 0 !important;
max-width: none !important;
}
.site-footer .footer-grid > div:nth-child(3){
min-width: 0 !important;
}
.site-footer .footer-email{
white-space: nowrap !important;
}
}
/* 2026-06-30 v28 footer width + horizontal spacing refinement */
@media (min-width: 901px){
.site-footer .container.footer-grid{
max-width: 1140px !important;
grid-template-columns: minmax(320px, 1.15fr) minmax(340px, 1fr) minmax(220px, .78fr) !important;
column-gap: 64px !important;
row-gap: 18px !important;
justify-content: stretch !important;
padding: 48px 0 40px !important;
}
.site-footer .footer-grid > div{
justify-self: stretch !important;
}
.site-footer .footer-grid > div:first-child{
max-width: 360px !important;
}
.site-footer .footer-grid > div:first-child p{
max-width: 340px !important;
}
.site-footer .footer-grid > div:nth-child(2){
min-width: 340px !important;
}
.site-footer .footer-grid > div:nth-child(2) p{
max-width: none !important;
width: auto !important;
min-width: 0 !important;
}
.site-footer .footer-grid > div:nth-child(3){
min-width: 210px !important;
}
.site-footer .footer-brand{
margin-bottom: 16px !important;
}
.site-footer p,
.site-footer a,
.site-footer .footer-links li{
line-height: 1.5 !important;
}
.site-footer .footer-email{
display: inline-block !important;
white-space: nowrap !important;
word-break: keep-all !important;
overflow-wrap: normal !important;
hyphens: none !important;
}
}
@media (min-width: 901px) and (max-width: 1180px){
.site-footer .container.footer-grid{
max-width: calc(100% - 56px) !important;
grid-template-columns: minmax(290px, 1.05fr) minmax(310px, 1fr) minmax(200px, .76fr) !important;
column-gap: 44px !important;
}
.site-footer .footer-grid > div:first-child{
max-width: 320px !important;
}
.site-footer .footer-grid > div:first-child p{
max-width: 300px !important;
}
.site-footer .footer-grid > div:nth-child(2){
min-width: 300px !important;
}
}
/* 2026-06-30 v29 footer vertical balance fix
Keeps current horizontal spacing, but removes excess empty blue space below. */
@media (min-width: 901px){
.site-footer .container.footer-grid{
padding-top: 46px !important;
padding-bottom: 34px !important;
align-items: center !important;
}
.site-footer .footer-brand{
margin-bottom: 14px !important;
}
.site-footer h3{
margin-bottom: 10px !important;
}
.site-footer .footer-links{
gap: 7px !important;
}
.site-footer .footer-bottom{
padding-top: 12px !important;
padding-bottom: 14px !important;
}
}
@media (max-width: 900px){
.site-footer .container.footer-grid{
padding-top: 38px !important;
padding-bottom: 28px !important;
}
.site-footer .footer-bottom{
padding-top: 12px !important;
padding-bottom: 14px !important;
}
}
@media (max-width: 640px){
.site-footer .container.footer-grid{
padding-top: 34px !important;
padding-bottom: 24px !important;
}
}
/* 2026-06-30 v30 extra subtle scrollbar fix
Makes the browser scrollbar more standard, thinner, and less distracting. */
html,
body{
scrollbar-width: thin !important;
scrollbar-color: rgba(120, 132, 148, .28) rgba(248, 250, 252, .95) !important;
}
/* Chrome, Edge, Safari */
::-webkit-scrollbar{
width: 6px !important;
height: 6px !important;
}
::-webkit-scrollbar-track{
background: rgba(248, 250, 252, .95) !important;
}
::-webkit-scrollbar-thumb{
background: rgba(120, 132, 148, .26) !important;
border-radius: 999px !important;
border: 1px solid rgba(248, 250, 252, .95) !important;
}
::-webkit-scrollbar-thumb:hover{
background: rgba(100, 116, 139, .38) !important;
}
::-webkit-scrollbar-corner{
background: rgba(248, 250, 252, .95) !important;
}
/* Internal scroll areas */
.table-wrap,
.charter-scroll,
.process-table-wrapper,
.nav-menu{
scrollbar-width: thin !important;
scrollbar-color: rgba(120, 132, 148, .22) rgba(248, 250, 252, .88) !important;
}
.table-wrap::-webkit-scrollbar,
.charter-scroll::-webkit-scrollbar,
.process-table-wrapper::-webkit-scrollbar,
.nav-menu::-webkit-scrollbar{
width: 5px !important;
height: 5px !important;
}
.table-wrap::-webkit-scrollbar-track,
.charter-scroll::-webkit-scrollbar-track,
.process-table-wrapper::-webkit-scrollbar-track,
.nav-menu::-webkit-scrollbar-track{
background: rgba(248, 250, 252, .88) !important;
}
.table-wrap::-webkit-scrollbar-thumb,
.charter-scroll::-webkit-scrollbar-thumb,
.process-table-wrapper::-webkit-scrollbar-thumb,
.nav-menu::-webkit-scrollbar-thumb{
background: rgba(120, 132, 148, .20) !important;
border-radius: 999px !important;
border: 1px solid rgba(248, 250, 252, .88) !important;
}
/* Hide horizontal scrollbar unless it is truly needed by content */
body{
overflow-x: hidden !important;
}
/* 2026-06-30 v31 footer column top-alignment fix
Aligns all footer columns evenly so Contact Information is not visually lower. */
@media (min-width: 901px){
.site-footer .container.footer-grid{
align-items: start !important;
}
.site-footer .footer-grid > div{
align-self: start !important;
padding-top: 0 !important;
margin-top: 0 !important;
}
.site-footer .footer-grid > div:nth-child(2),
.site-footer .footer-grid > div:nth-child(3){
padding-top: 2px !important;
}
.site-footer .footer-brand{
margin-top: 0 !important;
}
.site-footer h3{
margin-top: 0 !important;
line-height: 1.12 !important;
}
.site-footer p,
.site-footer .footer-links{
margin-top: 0 !important;
}
}
@media (max-width: 900px){
.site-footer .footer-grid > div{
align-self: start !important;
margin-top: 0 !important;
}
.site-footer h3{
margin-top: 0 !important;
}
}
/* 2026-06-30 v32 footer final column ratio balance
Goal: first column wider, second medium, third narrower, with consistent gaps. */
@media (min-width: 901px){
.site-footer .container.footer-grid{
max-width: 1120px !important;
grid-template-columns: minmax(360px, 1.25fr) minmax(320px, .95fr) minmax(210px, .65fr) !important;
column-gap: 48px !important;
row-gap: 18px !important;
justify-content: center !important;
align-items: start !important;
padding-top: 46px !important;
padding-bottom: 34px !important;
}
.site-footer .footer-grid > div{
justify-self: start !important;
align-self: start !important;
max-width: none !important;
min-width: 0 !important;
padding-top: 0 !important;
margin-top: 0 !important;
}
.site-footer .footer-grid > div:first-child{
width: 100% !important;
}
.site-footer .footer-grid > div:first-child p{
max-width: 350px !important;
}
.site-footer .footer-grid > div:nth-child(2){
width: 100% !important;
}
.site-footer .footer-grid > div:nth-child(2) p{
max-width: 320px !important;
width: auto !important;
min-width: 0 !important;
}
.site-footer .footer-grid > div:nth-child(3){
width: 100% !important;
max-width: 220px !important;
}
.site-footer .footer-email{
display: inline-block !important;
white-space: nowrap !important;
word-break: keep-all !important;
overflow-wrap: normal !important;
hyphens: none !important;
}
}
@media (min-width: 901px) and (max-width: 1180px){
.site-footer .container.footer-grid{
max-width: calc(100% - 56px) !important;
grid-template-columns: minmax(330px, 1.18fr) minmax(310px, .95fr) minmax(200px, .65fr) !important;
column-gap: 36px !important;
}
.site-footer .footer-grid > div:first-child p{
max-width: 330px !important;
}
.site-footer .footer-grid > div:nth-child(2) p{
max-width: 310px !important;
}
}
/* 2026-06-30 v33 homepage Quick Access visibility fix
Brings the Quick Access / Barangay Services heading closer to the hero area. */
body[data-page="index.html"] .hero + .gradient-band{
padding-bottom: 18px !important;
}
body[data-page="index.html"] .gradient-band + .section-pad{
padding-top: 26px !important;
}
body[data-page="index.html"] .gradient-band + .section-pad .section-heading{
margin-bottom: 26px !important;
}
body[data-page="index.html"] .gradient-band + .section-pad .section-heading .eyebrow{
margin-bottom: 8px !important;
}
body[data-page="index.html"] .gradient-band + .section-pad .section-heading h2{
margin-bottom: 8px !important;
}
@media (min-width: 901px){
body[data-page="index.html"] .hero{
min-height: 660px !important;
}
body[data-page="index.html"] .gradient-band,
body[data-page="index.html"] .gradient-band.section-pad{
padding-top: 16px !important;
padding-bottom: 16px !important;
}
body[data-page="index.html"] .gradient-band + .section-pad{
padding-top: 22px !important;
}
body[data-page="index.html"] .gradient-band + .section-pad .section-heading{
margin-bottom: 22px !important;
}
}
@media (max-width: 900px){
body[data-page="index.html"] .gradient-band,
body[data-page="index.html"] .gradient-band.section-pad{
padding-bottom: 16px !important;
}
body[data-page="index.html"] .gradient-band + .section-pad{
padding-top: 20px !important;
}
}
@media (max-width: 480px){
body[data-page="index.html"] .gradient-band,
body[data-page="index.html"] .gradient-band.section-pad{
padding-top: 10px !important;
padding-bottom: 14px !important;
}
body[data-page="index.html"] .gradient-band + .section-pad{
padding-top: 16px !important;
}
body[data-page="index.html"] .gradient-band + .section-pad .section-heading{
margin-bottom: 16px !important;
}
}
/* 2026-06-30 v34 homepage Quick Access below-hero correction
Moves Quick Access back below the first hero view. */
@media (min-width: 901px){
body[data-page="index.html"] .hero{
min-height: 720px !important;
}
body[data-page="index.html"] .hero + .gradient-band,
body[data-page="index.html"] .gradient-band.section-pad{
padding-top: 22px !important;
padding-bottom: 34px !important;
}
body[data-page="index.html"] .gradient-band + .section-pad{
padding-top: 72px !important;
}
body[data-page="index.html"] .gradient-band + .section-pad .section-heading{
margin-bottom: 34px !important;
}
}
@media (min-width: 1280px){
body[data-page="index.html"] .hero{
min-height: 735px !important;
}
body[data-page="index.html"] .gradient-band + .section-pad{
padding-top: 82px !important;
}
}
@media (max-width: 900px){
body[data-page="index.html"] .gradient-band + .section-pad{
padding-top: 42px !important;
}
}
@media (max-width: 480px){
body[data-page="index.html"] .gradient-band + .section-pad{
padding-top: 30px !important;
}
}
/* 2026-06-30 v35 footer tighter vertical padding
Slightly reduces empty blue space above and below footer content. */
@media (min-width: 901px){
.site-footer .container.footer-grid{
padding-top: 40px !important;
padding-bottom: 28px !important;
}
.site-footer .footer-bottom{
padding-top: 10px !important;
padding-bottom: 12px !important;
}
}
@media (max-width: 900px){
.site-footer .container.footer-grid{
padding-top: 34px !important;
padding-bottom: 24px !important;
}
.site-footer .footer-bottom{
padding-top: 10px !important;
padding-bottom: 12px !important;
}
}
@media (max-width: 640px){
.site-footer .container.footer-grid{
padding-top: 30px !important;
padding-bottom: 20px !important;
}
}
/* 2026-06-30 v36 minor mobile-only hero/emergency/stat refinements
Scope: mobile sizing only. Header intentionally left unchanged. */
@media (max-width: 768px){
body[data-page="index.html"] .hero{
min-height: auto !important;
padding-bottom: 6px !important;
}
body[data-page="index.html"] .hero-content{
padding-top: 22px !important;
padding-bottom: 12px !important;
}
body[data-page="index.html"] .hero h1{
font-size: clamp(1.76rem, 8.2vw, 2.08rem) !important;
line-height: 1.06 !important;
margin-bottom: 8px !important;
font-weight: 900 !important;
}
body[data-page="index.html"] .hero p{
font-size: .84rem !important;
line-height: 1.42 !important;
}
body[data-page="index.html"] .hero-actions{
margin-top: 14px !important;
gap: 7px !important;
}
body[data-page="index.html"] .hero-actions .btn{
min-height: 36px !important;
height: auto !important;
padding: 8px 13px !important;
font-size: .80rem !important;
border-radius: 17px !important;
}
body[data-page="index.html"] .hero-emergency-card,
body[data-page="index.html"] .hero-emergency-card.emergency-card-alt{
max-width: 318px !important;
margin-top: 8px !important;
margin-bottom: 12px !important;
padding: 12px 12px 13px !important;
border-radius: 17px !important;
box-shadow: 0 16px 34px rgba(8, 38, 77, .16) !important;
}
body[data-page="index.html"] .emergency-card-top{
gap: 6px !important;
margin-bottom: 8px !important;
}
body[data-page="index.html"] .emergency-pill,
body[data-page="index.html"] .emergency-pill-live{
padding: 5px 10px !important;
font-size: .60rem !important;
}
body[data-page="index.html"] .emergency-status,
body[data-page="index.html"] .emergency-status-alert{
padding: 5px 10px !important;
font-size: .68rem !important;
}
body[data-page="index.html"] .emergency-main-row{
grid-template-columns: minmax(0,1fr) 40px !important;
gap: 8px !important;
}
body[data-page="index.html"] .hero-emergency-card strong,
body[data-page="index.html"] .emergency-card-alt strong{
font-size: .86rem !important;
}
body[data-page="index.html"] .hero-hotline-number,
body[data-page="index.html"] .emergency-card-alt .hero-hotline-number{
font-size: 1.24rem !important;
line-height: 1.04 !important;
}
body[data-page="index.html"] .emergency-siren-badge{
width: 40px !important;
height: 40px !important;
min-width: 40px !important;
box-shadow: 0 10px 22px rgba(255, 90, 65, .22) !important;
}
body[data-page="index.html"] .emergency-siren-badge i{
font-size: .54rem !important;
}
body[data-page="index.html"] .hero-emergency-card p,
body[data-page="index.html"] .emergency-card-alt p{
font-size: .70rem !important;
line-height: 1.32 !important;
margin: 7px 0 8px !important;
-webkit-line-clamp: 2 !important;
}
body[data-page="index.html"] .hero-emergency-grid,
body[data-page="index.html"] .emergency-card-alt .hero-emergency-grid{
gap: 6px !important;
}
body[data-page="index.html"] .hero-emergency-item,
body[data-page="index.html"] .emergency-card-alt .hero-emergency-item{
min-height: 42px !important;
padding: 6px 4px !important;
border-radius: 10px !important;
}
body[data-page="index.html"] .hero-emergency-item label{
font-size: .45rem !important;
margin-bottom: 2px !important;
}
body[data-page="index.html"] .hero-emergency-item span{
font-size: .76rem !important;
}
body[data-page="index.html"] .gradient-band,
body[data-page="index.html"] .gradient-band.section-pad{
padding-top: 8px !important;
padding-bottom: 16px !important;
}
body[data-page="index.html"] .stats-grid{
gap: 10px !important;
}
body[data-page="index.html"] .stats-grid div{
min-height: auto !important;
padding: 13px 14px 12px !important;
border-radius: 16px !important;
}
body[data-page="index.html"] .stats-grid strong{
font-size: .92rem !important;
margin-bottom: 3px !important;
}
body[data-page="index.html"] .stats-grid span{
font-size: .78rem !important;
line-height: 1.32 !important;
}
}
@media (max-width: 480px){
body[data-page="index.html"] .hero-content{
padding-top: 18px !important;
padding-bottom: 10px !important;
}
body[data-page="index.html"] .hero .eyebrow{
font-size: .56rem !important;
padding: 5px 9px !important;
margin-bottom: 8px !important;
}
body[data-page="index.html"] .hero h1{
font-size: clamp(1.62rem, 8vw, 1.92rem) !important;
margin-bottom: 7px !important;
}
body[data-page="index.html"] .hero p{
font-size: .80rem !important;
line-height: 1.38 !important;
}
body[data-page="index.html"] .hero-actions .btn{
min-height: 34px !important;
padding: 7px 12px !important;
font-size: .76rem !important;
}
body[data-page="index.html"] .hero-emergency-card,
body[data-page="index.html"] .hero-emergency-card.emergency-card-alt{
width: calc(100% - 24px) !important;
max-width: 304px !important;
padding: 11px !important;
margin-top: 7px !important;
}
body[data-page="index.html"] .hero-hotline-number,
body[data-page="index.html"] .emergency-card-alt .hero-hotline-number{
font-size: 1.14rem !important;
}
body[data-page="index.html"] .emergency-siren-badge{
width: 36px !important;
height: 36px !important;
min-width: 36px !important;
}
body[data-page="index.html"] .hero-emergency-card p,
body[data-page="index.html"] .emergency-card-alt p{
font-size: .66rem !important;
}
body[data-page="index.html"] .hero-emergency-item,
body[data-page="index.html"] .emergency-card-alt .hero-emergency-item{
min-height: 39px !important;
padding: 5px 3px !important;
}
body[data-page="index.html"] .stats-grid div{
padding: 12px 13px 11px !important;
}
}
@media (max-width: 380px){
body[data-page="index.html"] .hero h1{
font-size: 1.54rem !important;
}
body[data-page="index.html"] .hero-emergency-card,
body[data-page="index.html"] .hero-emergency-card.emergency-card-alt{
max-width: 292px !important;
}
body[data-page="index.html"] .hero-hotline-number,
body[data-page="index.html"] .emergency-card-alt .hero-hotline-number{
font-size: 1.06rem !important;
}
}
/* 2026-06-30 v37 final mobile polishing pass
Scope: mobile-only polish. Header intentionally unchanged. */
@media (max-width: 768px){
/* Unified mobile page hero/banner polishing */
.page-hero,
.page-hero.section-pad-sm{
min-height: 146px !important;
padding-top: 18px !important;
padding-bottom: 15px !important;
}
.page-hero .eyebrow{
margin-bottom: 7px !important;
padding: 5px 9px !important;
font-size: .54rem !important;
}
.page-hero h1{
font-size: clamp(1.52rem, 7.1vw, 1.86rem) !important;
line-height: 1.06 !important;
margin-bottom: 7px !important;
}
.page-hero p{
font-size: .82rem !important;
line-height: 1.42 !important;
max-width: 30ch !important;
}
/* Unified mobile section spacing */
main > section.section-pad{
padding-top: 24px !important;
padding-bottom: 26px !important;
}
main > section.section-pad-sm{
padding-top: 22px !important;
padding-bottom: 22px !important;
}
.page-hero + .section-pad,
.page-hero + .section-pad-sm,
.page-hero + section{
padding-top: 16px !important;
}
.section-heading{
margin-bottom: 16px !important;
}
.section-heading h2,
.split-layout h2,
.pledge h2{
font-size: clamp(1.36rem, 6vw, 1.68rem) !important;
line-height: 1.12 !important;
margin-bottom: 7px !important;
}
.section-heading p,
.split-layout p,
.pledge p{
font-size: .84rem !important;
line-height: 1.45 !important;
}
/* Unified card/grid spacing */
.card-grid,
.card-grid.three,
.card-grid.two,
.officials-grid,
.profile-grid,
.downloads-grid,
.document-list,
.accordion{
gap: 12px !important;
}
.info-card,
.official-card,
.download-card,
.contact-card,
.contact-form,
.pledge,
.doc-row,
.accordion-item,
.image-card,
.profile-item{
border-radius: 17px !important;
}
/* Officials page: keep look, reduce length */
.official-card{
padding: 14px 12px !important;
}
.official-card img,
.official-photo{
width: 72px !important;
height: 72px !important;
margin-bottom: 10px !important;
}
.official-card h3{
font-size: .94rem !important;
line-height: 1.18 !important;
margin-bottom: 5px !important;
}
.official-card span,
.official-card .position{
font-size: .80rem !important;
line-height: 1.2 !important;
}
.official-card p,
.official-card .subtitle{
font-size: .74rem !important;
line-height: 1.35 !important;
margin-top: 5px !important;
}
/* Community Initiatives / Announcements image area */
.image-card img,
.image-card::after,
.card-visual{
height: 116px !important;
max-height: 116px !important;
object-fit: cover !important;
}
.image-card img + div,
.image-card > div{
padding: 13px 14px 14px !important;
}
.image-card h3{
font-size: .94rem !important;
line-height: 1.18 !important;
margin-bottom: 5px !important;
}
.image-card p{
font-size: .78rem !important;
line-height: 1.38 !important;
}
.status{
padding: 5px 9px !important;
font-size: .66rem !important;
margin-bottom: 8px !important;
}
/* Downloads: reduce blank space and unify button sizing */
.download-card{
padding: 13px 14px !important;
gap: 10px !important;
grid-template-columns: 38px minmax(0, 1fr) !important;
align-items: center !important;
}
.download-card .icon{
width: 38px !important;
height: 38px !important;
border-radius: 13px !important;
font-size: 1rem !important;
margin-bottom: 0 !important;
}
.download-card h3{
font-size: .92rem !important;
line-height: 1.2 !important;
margin-bottom: 5px !important;
}
.download-card p{
font-size: .78rem !important;
line-height: 1.38 !important;
}
.download-card .btn,
.download-card .btn-small,
.download-card .btn-primary,
.doc-row .btn,
.doc-row .btn-small,
.contact-form .btn,
.btn{
min-height: 36px !important;
padding: 8px 13px !important;
border-radius: 16px !important;
font-size: .78rem !important;
}
/* Transparency rows */
body[data-page="transparency.html"] .doc-row{
padding: 15px 14px !important;
gap: 11px !important;
}
body[data-page="transparency.html"] .doc-row > div{
padding-left: 48px !important;
}
body[data-page="transparency.html"] .doc-row > div::before{
width: 38px !important;
height: 38px !important;
border-radius: 13px !important;
font-size: .95rem !important;
}
body[data-page="transparency.html"] .doc-row strong{
font-size: .93rem !important;
line-height: 1.18 !important;
margin-bottom: 4px !important;
}
body[data-page="transparency.html"] .doc-row span{
font-size: .78rem !important;
line-height: 1.38 !important;
}
/* Barangay Services accordion: reduce item height but keep tap target usable */
body[data-page="services.html"] .accordion,
body[data-page="citizens-charter.html"] .accordion{
gap: 11px !important;
}
body[data-page="services.html"] .accordion-trigger,
body[data-page="citizens-charter.html"] .accordion-trigger{
min-height: 48px !important;
padding: 13px 14px !important;
gap: 10px !important;
}
body[data-page="services.html"] .accordion-trigger span,
body[data-page="citizens-charter.html"] .accordion-trigger span{
font-size: .88rem !important;
line-height: 1.18 !important;
gap: 9px !important;
}
body[data-page="services.html"] .accordion-trigger span::before,
body[data-page="citizens-charter.html"] .accordion-trigger span::before{
width: 10px !important;
height: 10px !important;
flex-basis: 10px !important;
}
body[data-page="services.html"] .accordion-trigger b,
body[data-page="citizens-charter.html"] .accordion-trigger b{
width: 34px !important;
height: 34px !important;
min-width: 34px !important;
border-radius: 12px !important;
font-size: 1.2rem !important;
}
body[data-page="services.html"] .accordion-content p,
body[data-page="citizens-charter.html"] .accordion-content p{
padding: 12px 14px 10px !important;
font-size: .80rem !important;
line-height: 1.42 !important;
}
body[data-page="services.html"] .service-meta,
body[data-page="citizens-charter.html"] .service-meta{
padding: 0 14px 14px !important;
gap: 9px !important;
}
body[data-page="services.html"] .service-meta span,
body[data-page="citizens-charter.html"] .service-meta span{
padding: 12px 12px 12px 14px !important;
border-radius: 14px !important;
font-size: .80rem !important;
line-height: 1.38 !important;
}
/* Homepage stat cards: Public Service / Transparency / Community / Safety */
body[data-page="index.html"] .stats-grid{
gap: 9px !important;
}
body[data-page="index.html"] .stats-grid div{
padding: 12px 13px 11px !important;
border-radius: 15px !important;
min-height: auto !important;
}
body[data-page="index.html"] .stats-grid strong{
font-size: .90rem !important;
margin-bottom: 3px !important;
}
body[data-page="index.html"] .stats-grid span{
font-size: .76rem !important;
line-height: 1.3 !important;
}
}
@media (max-width: 480px){
.page-hero,
.page-hero.section-pad-sm{
min-height: 138px !important;
padding-top: 15px !important;
padding-bottom: 13px !important;
}
.page-hero h1{
font-size: clamp(1.42rem, 7vw, 1.72rem) !important;
}
.page-hero p{
font-size: .78rem !important;
line-height: 1.38 !important;
max-width: 28ch !important;
}
main > section.section-pad{
padding-top: 22px !important;
padding-bottom: 24px !important;
}
.official-card{
padding: 13px 11px !important;
}
.official-card img,
.official-photo{
width: 68px !important;
height: 68px !important;
}
.image-card img,
.image-card::after,
.card-visual{
height: 108px !important;
max-height: 108px !important;
}
.download-card{
padding: 12px 13px !important;
}
.download-card .btn,
.download-card .btn-small,
.download-card .btn-primary,
.doc-row .btn,
.doc-row .btn-small,
.btn{
min-height: 34px !important;
padding: 7px 12px !important;
border-radius: 15px !important;
font-size: .74rem !important;
}
}
@media (max-width: 380px){
.page-hero,
.page-hero.section-pad-sm{
min-height: 132px !important;
}
.page-hero h1{
font-size: 1.36rem !important;
}
.image-card img,
.image-card::after,
.card-visual{
height: 102px !important;
max-height: 102px !important;
}
}
/* 2026-06-30 v38 mobile menu refinement only
Scope: opened mobile menu panel/items only. Header/logo/menu button untouched. */
@media (max-width: 900px){
.nav-menu{
background: rgba(255, 255, 255, .985) !important;
backdrop-filter: blur(10px) !important;
-webkit-backdrop-filter: blur(10px) !important;
border: 1px solid rgba(21, 94, 239, .12) !important;
box-shadow: 0 18px 44px rgba(6, 31, 63, .18) !important;
padding: 10px !important;
gap: 6px !important;
border-radius: 18px !important;
}
.nav-menu.open{
background: rgba(255, 255, 255, .99) !important;
}
.nav-link{
min-height: 36px !important;
padding: 9px 12px !important;
border-radius: 12px !important;
font-size: .82rem !important;
line-height: 1.15 !important;
color: #0b2a5b !important;
background: rgba(245, 249, 255, .72) !important;
border: 1px solid rgba(21, 94, 239, .06) !important;
}
.nav-link:hover{
background: rgba(21, 94, 239, .09) !important;
color: #155eef !important;
}
.nav-link.active{
color: #ffffff !important;
background: linear-gradient(135deg, #155eef, #18bfdc) !important;
border-color: rgba(21, 94, 239, .18) !important;
box-shadow: 0 8px 18px rgba(21, 94, 239, .20) !important;
}
.nav-link.nav-contact{
color: #ffffff !important;
background: linear-gradient(135deg, #16b8f3, #14c9c4) !important;
border-color: rgba(20, 201, 196, .24) !important;
box-shadow: 0 8px 18px rgba(20, 184, 243, .22) !important;
font-weight: 900 !important;
}
.nav-link.nav-contact:hover,
.nav-link.nav-contact.active{
color: #ffffff !important;
background: linear-gradient(135deg, #129ee8, #12bfb7) !important;
box-shadow: 0 10px 22px rgba(20, 184, 243, .26) !important;
}
}
@media (max-width: 480px){
.nav-menu{
left: 10px !important;
right: 10px !important;
padding: 9px !important;
gap: 5px !important;
border-radius: 16px !important;
}
.nav-link{
min-height: 34px !important;
padding: 8px 11px !important;
font-size: .78rem !important;
border-radius: 11px !important;
}
.nav-link.nav-contact{
min-height: 36px !important;
}
}
/* 2026-06-30 v39 mobile header logo refinement only
Scope: mobile header branding only. Menu panel/button, desktop, content, links, and functionality unchanged. */
@media (max-width: 768px){
.brand{
gap: 9px !important;
padding-left: 7px !important;
padding-right: 9px !important;
}
.brand img{
width: 38px !important;
height: 38px !important;
flex: 0 0 38px !important;
border-radius: 12px !important;
}
.brand span{
min-width: 0 !important;
}
.brand strong{
line-height: 1.05 !important;
}
.brand small{
line-height: 1.05 !important;
}
}
@media (max-width: 480px){
.brand{
gap: 8px !important;
padding-left: 6px !important;
padding-right: 8px !important;
}
.brand img{
width: 35px !important;
height: 35px !important;
flex-basis: 35px !important;
border-radius: 11px !important;
}
}
@media (max-width: 380px){
.brand img{
width: 34px !important;
height: 34px !important;
flex-basis: 34px !important;
}
.brand{
gap: 7px !important;
}
}
/* 2026-06-30 v40 very minor mobile emergency label polish
Scope: mobile emergency label only. Header, menu, cards, desktop, content, and functionality unchanged. */
@media (max-width: 768px){
body[data-page="index.html"] .emergency-pill,
body[data-page="index.html"] .emergency-pill-live{
font-size: .55rem !important;
padding: 5px 9px !important;
letter-spacing: .055em !important;
}
}
@media (max-width: 480px){
body[data-page="index.html"] .emergency-pill,
body[data-page="index.html"] .emergency-pill-live{
font-size: .52rem !important;
padding: 4px 8px !important;
letter-spacing: .05em !important;
}
}
/* 2026-06-30 v41 mobile card image/overlay text visibility fix
Scope: Community Initiatives and Announcements mobile cards only. */
@media (max-width: 768px){
/* Give the image/header area enough height for the overlay title block */
body[data-page="projects.html"] .image-card img,
body[data-page="projects.html"] .image-card::after,
body[data-page="projects.html"] .card-visual,
body[data-page="announcements.html"] .image-card img,
body[data-page="announcements.html"] .image-card::after,
body[data-page="announcements.html"] .card-visual{
height: 142px !important;
max-height: 142px !important;
object-fit: cover !important;
}
/* Keep rounded image style, but do not clip the title overlay */
body[data-page="projects.html"] .image-card,
body[data-page="announcements.html"] .image-card{
overflow: visible !important;
}
body[data-page="projects.html"] .image-card img,
body[data-page="announcements.html"] .image-card img,
body[data-page="projects.html"] .card-visual,
body[data-page="announcements.html"] .card-visual{
border-radius: 17px 17px 12px 12px !important;
}
/* Move title/overlay content up and add safe spacing */
body[data-page="projects.html"] .image-card .status,
body[data-page="announcements.html"] .image-card .status{
margin-bottom: 9px !important;
}
body[data-page="projects.html"] .image-card img + div,
body[data-page="projects.html"] .image-card > div,
body[data-page="announcements.html"] .image-card img + div,
body[data-page="announcements.html"] .image-card > div{
padding: 15px 15px 16px !important;
overflow: visible !important;
}
body[data-page="projects.html"] .image-card h3,
body[data-page="announcements.html"] .image-card h3{
display: block !important;
min-height: auto !important;
max-height: none !important;
overflow: visible !important;
-webkit-line-clamp: unset !important;
line-clamp: unset !important;
white-space: normal !important;
font-size: .96rem !important;
line-height: 1.22 !important;
margin: 0 0 6px !important;
padding: 0 !important;
}
body[data-page="projects.html"] .image-card p,
body[data-page="announcements.html"] .image-card p{
overflow: visible !important;
-webkit-line-clamp: unset !important;
line-clamp: unset !important;
}
/* If the card uses an overlay block inside the visual area, keep it safely inside */
body[data-page="projects.html"] .image-card .overlay,
body[data-page="projects.html"] .image-card .card-overlay,
body[data-page="projects.html"] .image-card .image-overlay,
body[data-page="announcements.html"] .image-card .overlay,
body[data-page="announcements.html"] .image-card .card-overlay,
body[data-page="announcements.html"] .image-card .image-overlay{
bottom: 12px !important;
left: 12px !important;
right: 12px !important;
padding: 10px 12px !important;
border-radius: 13px !important;
overflow: visible !important;
max-height: none !important;
}
body[data-page="projects.html"] .image-card .overlay h3,
body[data-page="projects.html"] .image-card .card-overlay h3,
body[data-page="projects.html"] .image-card .image-overlay h3,
body[data-page="announcements.html"] .image-card .overlay h3,
body[data-page="announcements.html"] .image-card .card-overlay h3,
body[data-page="announcements.html"] .image-card .image-overlay h3{
line-height: 1.2 !important;
max-height: none !important;
overflow: visible !important;
}
}
@media (max-width: 480px){
body[data-page="projects.html"] .image-card img,
body[data-page="projects.html"] .image-card::after,
body[data-page="projects.html"] .card-visual,
body[data-page="announcements.html"] .image-card img,
body[data-page="announcements.html"] .image-card::after,
body[data-page="announcements.html"] .card-visual{
height: 136px !important;
max-height: 136px !important;
}
body[data-page="projects.html"] .image-card img + div,
body[data-page="projects.html"] .image-card > div,
body[data-page="announcements.html"] .image-card img + div,
body[data-page="announcements.html"] .image-card > div{
padding: 14px 14px 15px !important;
}
body[data-page="projects.html"] .image-card .overlay,
body[data-page="projects.html"] .image-card .card-overlay,
body[data-page="projects.html"] .image-card .image-overlay,
body[data-page="announcements.html"] .image-card .overlay,
body[data-page="announcements.html"] .image-card .card-overlay,
body[data-page="announcements.html"] .image-card .image-overlay{
bottom: 11px !important;
left: 11px !important;
right: 11px !important;
padding: 9px 11px !important;
}
}
@media (max-width: 380px){
body[data-page="projects.html"] .image-card img,
body[data-page="projects.html"] .image-card::after,
body[data-page="projects.html"] .card-visual,
body[data-page="announcements.html"] .image-card img,
body[data-page="announcements.html"] .image-card::after,
body[data-page="announcements.html"] .card-visual{
height: 132px !important;
max-height: 132px !important;
}
body[data-page="projects.html"] .image-card h3,
body[data-page="announcements.html"] .image-card h3{
font-size: .92rem !important;
line-height: 1.2 !important;
}
}
/* 2026-06-30 v42 mobile initiatives/announcements overlay subtitle readability fix
Scope: Community Initiatives and Announcements mobile cards only. */
@media (max-width: 768px){
body[data-page="projects.html"] .image-card img,
body[data-page="projects.html"] .image-card::after,
body[data-page="projects.html"] .card-visual,
body[data-page="announcements.html"] .image-card img,
body[data-page="announcements.html"] .image-card::after,
body[data-page="announcements.html"] .card-visual{
height: 162px !important;
max-height: 162px !important;
object-fit: cover !important;
}
body[data-page="projects.html"] .image-card,
body[data-page="announcements.html"] .image-card{
overflow: hidden !important;
border-radius: 17px !important;
}
body[data-page="projects.html"] .image-card img,
body[data-page="announcements.html"] .image-card img,
body[data-page="projects.html"] .card-visual,
body[data-page="announcements.html"] .card-visual{
border-radius: 17px 17px 12px 12px !important;
}
body[data-page="projects.html"] .image-card img + div,
body[data-page="projects.html"] .image-card > div,
body[data-page="announcements.html"] .image-card img + div,
body[data-page="announcements.html"] .image-card > div{
padding: 16px 15px 18px !important;
}
body[data-page="projects.html"] .image-card h3,
body[data-page="announcements.html"] .image-card h3{
font-size: .98rem !important;
line-height: 1.22 !important;
margin-bottom: 7px !important;
overflow: visible !important;
max-height: none !important;
-webkit-line-clamp: unset !important;
line-clamp: unset !important;
}
body[data-page="projects.html"] .image-card p,
body[data-page="announcements.html"] .image-card p{
font-size: .82rem !important;
line-height: 1.44 !important;
margin-bottom: 0 !important;
overflow: visible !important;
max-height: none !important;
-webkit-line-clamp: unset !important;
line-clamp: unset !important;
}
/* For cards using a white overlay box inside the image/header area */
body[data-page="projects.html"] .image-card .overlay,
body[data-page="projects.html"] .image-card .card-overlay,
body[data-page="projects.html"] .image-card .image-overlay,
body[data-page="announcements.html"] .image-card .overlay,
body[data-page="announcements.html"] .image-card .card-overlay,
body[data-page="announcements.html"] .image-card .image-overlay{
bottom: 18px !important;
left: 13px !important;
right: 13px !important;
padding: 11px 13px 12px !important;
border-radius: 14px !important;
max-height: none !important;
overflow: visible !important;
}
body[data-page="projects.html"] .image-card .overlay p,
body[data-page="projects.html"] .image-card .card-overlay p,
body[data-page="projects.html"] .image-card .image-overlay p,
body[data-page="announcements.html"] .image-card .overlay p,
body[data-page="announcements.html"] .image-card .card-overlay p,
body[data-page="announcements.html"] .image-card .image-overlay p{
font-size: .76rem !important;
line-height: 1.3 !important;
margin-top: 4px !important;
}
}
@media (max-width: 480px){
body[data-page="projects.html"] .image-card img,
body[data-page="projects.html"] .image-card::after,
body[data-page="projects.html"] .card-visual,
body[data-page="announcements.html"] .image-card img,
body[data-page="announcements.html"] .image-card::after,
body[data-page="announcements.html"] .card-visual{
height: 154px !important;
max-height: 154px !important;
}
body[data-page="projects.html"] .image-card img + div,
body[data-page="projects.html"] .image-card > div,
body[data-page="announcements.html"] .image-card img + div,
body[data-page="announcements.html"] .image-card > div{
padding: 15px 14px 17px !important;
}
body[data-page="projects.html"] .image-card p,
body[data-page="announcements.html"] .image-card p{
font-size: .80rem !important;
line-height: 1.42 !important;
}
body[data-page="projects.html"] .image-card .overlay,
body[data-page="projects.html"] .image-card .card-overlay,
body[data-page="projects.html"] .image-card .image-overlay,
body[data-page="announcements.html"] .image-card .overlay,
body[data-page="announcements.html"] .image-card .card-overlay,
body[data-page="announcements.html"] .image-card .image-overlay{
bottom: 16px !important;
left: 12px !important;
right: 12px !important;
padding: 10px 12px 11px !important;
}
}
@media (max-width: 380px){
body[data-page="projects.html"] .image-card img,
body[data-page="projects.html"] .image-card::after,
body[data-page="projects.html"] .card-visual,
body[data-page="announcements.html"] .image-card img,
body[data-page="announcements.html"] .image-card::after,
body[data-page="announcements.html"] .card-visual{
height: 150px !important;
max-height: 150px !important;
}
body[data-page="projects.html"] .image-card h3,
body[data-page="announcements.html"] .image-card h3{
font-size: .94rem !important;
}
body[data-page="projects.html"] .image-card p,
body[data-page="announcements.html"] .image-card p{
font-size: .78rem !important;
}
}
/* 2026-06-30 v43 final mobile overlay spacing polish
Scope: Announcements and Community Initiatives mobile card overlay only. */
@media (max-width: 768px){
body[data-page="projects.html"] .image-card .overlay,
body[data-page="projects.html"] .image-card .card-overlay,
body[data-page="projects.html"] .image-card .image-overlay,
body[data-page="announcements.html"] .image-card .overlay,
body[data-page="announcements.html"] .image-card .card-overlay,
body[data-page="announcements.html"] .image-card .image-overlay{
bottom: 24px !important;
padding: 11px 13px 12px !important;
}
/* Mobile only: keep overlay cleaner by showing the main title clearly */
body[data-page="projects.html"] .image-card .overlay p,
body[data-page="projects.html"] .image-card .card-overlay p,
body[data-page="projects.html"] .image-card .image-overlay p,
body[data-page="announcements.html"] .image-card .overlay p,
body[data-page="announcements.html"] .image-card .card-overlay p,
body[data-page="announcements.html"] .image-card .image-overlay p{
display: none !important;
}
body[data-page="projects.html"] .image-card .overlay h3,
body[data-page="projects.html"] .image-card .card-overlay h3,
body[data-page="projects.html"] .image-card .image-overlay h3,
body[data-page="announcements.html"] .image-card .overlay h3,
body[data-page="announcements.html"] .image-card .card-overlay h3,
body[data-page="announcements.html"] .image-card .image-overlay h3{
margin-bottom: 0 !important;
line-height: 1.22 !important;
}
}
@media (max-width: 480px){
body[data-page="projects.html"] .image-card .overlay,
body[data-page="projects.html"] .image-card .card-overlay,
body[data-page="projects.html"] .image-card .image-overlay,
body[data-page="announcements.html"] .image-card .overlay,
body[data-page="announcements.html"] .image-card .card-overlay,
body[data-page="announcements.html"] .image-card .image-overlay{
bottom: 22px !important;
padding: 10px 12px 11px !important;
}
}
/* 2026-06-30 v44 final mobile overlay subtitle-only polish
Scope: subtitle inside Community Initiatives and Announcements mobile image overlays only.
Keeps current overlay position, spacing, card height, colors, layout, desktop, content, and functionality unchanged. */
@media (max-width: 768px){
body[data-page="projects.html"] .image-card .overlay p,
body[data-page="projects.html"] .image-card .card-overlay p,
body[data-page="projects.html"] .image-card .image-overlay p,
body[data-page="announcements.html"] .image-card .overlay p,
body[data-page="announcements.html"] .image-card .card-overlay p,
body[data-page="announcements.html"] .image-card .image-overlay p{
display: none !important;
}
body[data-page="projects.html"] .image-card .overlay h3,
body[data-page="projects.html"] .image-card .card-overlay h3,
body[data-page="projects.html"] .image-card .image-overlay h3,
body[data-page="announcements.html"] .image-card .overlay h3,
body[data-page="announcements.html"] .image-card .card-overlay h3,
body[data-page="announcements.html"] .image-card .image-overlay h3{
margin-bottom: 0 !important;
}
}
/* 2026-06-30 v45 minor desktop hero refinement only
Scope: desktop homepage hero positioning only. Mobile, content, colors, navigation, workflow, and functionality unchanged. */
@media (min-width: 901px){
body[data-page="index.html"] .hero .container,
body[data-page="index.html"] .hero-grid,
body[data-page="index.html"] .hero-content{
align-items: center !important;
}
body[data-page="index.html"] .hero-content{
transform: translateY(-18px) !important;
}
body[data-page="index.html"] .hero-visual,
body[data-page="index.html"] .hero-emergency-card,
body[data-page="index.html"] .hero-emergency-card.emergency-card-alt{
transform: translateX(-22px) !important;
}
body[data-page="index.html"] .hero + .gradient-band,
body[data-page="index.html"] .gradient-band.section-pad{
padding-top: 20px !important;
padding-bottom: 30px !important;
}
body[data-page="index.html"] .stats-grid{
margin-top: 0 !important;
}
}
@media (min-width: 1280px){
body[data-page="index.html"] .hero-content{
transform: translateY(-22px) !important;
}
body[data-page="index.html"] .hero-visual,
body[data-page="index.html"] .hero-emergency-card,
body[data-page="index.html"] .hero-emergency-card.emergency-card-alt{
transform: translateX(-30px) !important;
}
}
/* 2026-06-30 v46 desktop header refinement only
Scope: desktop header alignment/spacing only.
Mobile header/menu, content, navigation items, workflow, and functionality unchanged. */
@media (min-width: 901px){
.site-header .container,
.site-header .nav-container,
.site-header .navbar,
header .container{
max-width: 1180px !important;
margin-left: auto !important;
margin-right: auto !important;
}
.site-header .container{
padding-left: 24px !important;
padding-right: 24px !important;
}
.nav-menu{
gap: 8px !important;
justify-content: flex-end !important;
align-items: center !important;
}
.nav-link{
padding-left: 10px !important;
padding-right: 10px !important;
}
.nav-link.nav-contact{
margin-left: 6px !important;
padding-left: 16px !important;
padding-right: 16px !important;
}
}
@media (min-width: 1366px){
.site-header .container,
.site-header .nav-container,
.site-header .navbar,
header .container{
max-width: 1200px !important;
}
}
@media (min-width: 1600px){
.site-header .container,
.site-header .nav-container,
.site-header .navbar,
header .container{
max-width: 1220px !important;
}
}
@media (min-width: 1900px){
.site-header .container,
.site-header .nav-container,
.site-header .navbar,
header .container{
max-width: 1240px !important;
}
}
/* 2026-06-30 v47 services-to-announcements spacing refinement
Scope: homepage Barangay Services and Announcements section spacing only.
Colors, content, navigation, workflow, and functionality unchanged. */
/* Keep homepage service cards visually even */
body[data-page="index.html"] .service-card,
body[data-page="index.html"] .quick-card,
body[data-page="index.html"] .info-card{
height: 100% !important;
}
/* Desktop / laptop refinement */
@media (min-width: 901px){
body[data-page="index.html"] .gradient-band + .section-pad{
padding-bottom: 46px !important;
}
body[data-page="index.html"] .gradient-band + .section-pad + .section-pad,
body[data-page="index.html"] .gradient-band + .section-pad + .section-pad-sm{
padding-top: 34px !important;
}
body[data-page="index.html"] .gradient-band + .section-pad + .section-pad .section-heading,
body[data-page="index.html"] .gradient-band + .section-pad + .section-pad-sm .section-heading{
margin-bottom: 22px !important;
}
body[data-page="index.html"] .gradient-band + .section-pad + .section-pad .card-grid,
body[data-page="index.html"] .gradient-band + .section-pad + .section-pad-sm .card-grid{
margin-top: 0 !important;
}
body[data-page="index.html"] .section-actions,
body[data-page="index.html"] .view-all-wrap,
body[data-page="index.html"] .view-all{
margin-top: 22px !important;
}
}
/* Tablet and mobile spacing balance */
@media (max-width: 900px){
body[data-page="index.html"] .gradient-band + .section-pad{
padding-bottom: 28px !important;
}
body[data-page="index.html"] .gradient-band + .section-pad + .section-pad,
body[data-page="index.html"] .gradient-band + .section-pad + .section-pad-sm{
padding-top: 22px !important;
}
body[data-page="index.html"] .gradient-band + .section-pad + .section-pad .section-heading,
body[data-page="index.html"] .gradient-band + .section-pad + .section-pad-sm .section-heading{
margin-bottom: 16px !important;
}
body[data-page="index.html"] .gradient-band + .section-pad + .section-pad .card-grid,
body[data-page="index.html"] .gradient-band + .section-pad + .section-pad-sm .card-grid{
gap: 12px !important;
}
body[data-page="index.html"] .section-actions,
body[data-page="index.html"] .view-all-wrap,
body[data-page="index.html"] .view-all{
margin-top: 18px !important;
}
/* Tap-target sizing for the small text/button links that point at the
Announcements page. The attribute selector also matches two structural
elements it was never meant to touch — the nav link, and each homepage
announcement card (whose href is announcements.html?id=…). Forcing those
to inline-flex laid the card's date, title and description out in a row,
squeezing the title into a ~87px column on phones. Excluded by class so
the sizing intent is preserved for the links that actually need it. */
body[data-page="index.html"] a[href*="announcements"]:not(.nav-link):not(.ann-card-link),
body[data-page="index.html"] .view-all a,
body[data-page="index.html"] .section-actions a{
min-height: 38px !important;
display: inline-flex !important;
align-items: center !important;
justify-content: center !important;
}
}
@media (max-width: 480px){
body[data-page="index.html"] .gradient-band + .section-pad{
padding-bottom: 24px !important;
}
body[data-page="index.html"] .gradient-band + .section-pad + .section-pad,
body[data-page="index.html"] .gradient-band + .section-pad + .section-pad-sm{
padding-top: 18px !important;
}
body[data-page="index.html"] .gradient-band + .section-pad + .section-pad .section-heading,
body[data-page="index.html"] .gradient-band + .section-pad + .section-pad-sm .section-heading{
margin-bottom: 14px !important;
}
body[data-page="index.html"] .section-actions,
body[data-page="index.html"] .view-all-wrap,
body[data-page="index.html"] .view-all{
margin-top: 16px !important;
}
}
/* 2026-06-30 v48 desktop header layout fix
Scope: desktop/laptop header only.
Fixes brand text overlap/cutoff and keeps hero properly below header.
Mobile header/menu, page content, colors, workflow, and functionality unchanged. */
@media (min-width: 901px){
.site-header{
position: sticky !important;
top: 0 !important;
z-index: 1000 !important;
}
.site-header .container,
.site-header .nav-container,
.site-header .navbar,
header .container{
max-width: 1240px !important;
width: min(100% - 48px, 1240px) !important;
margin-left: auto !important;
margin-right: auto !important;
}
.site-header .container,
.site-header .navbar{
display: flex !important;
align-items: center !important;
justify-content: space-between !important;
gap: 28px !important;
}
.brand{
width: 260px !important;
min-width: 260px !important;
max-width: 260px !important;
flex: 0 0 260px !important;
display: inline-flex !important;
align-items: center !important;
gap: 10px !important;
overflow: visible !important;
white-space: nowrap !important;
}
.brand img{
flex: 0 0 auto !important;
}
.brand span{
min-width: 0 !important;
max-width: none !important;
overflow: visible !important;
white-space: nowrap !important;
}
.brand strong,
.brand small{
display: block !important;
overflow: visible !important;
text-overflow: clip !important;
white-space: nowrap !important;
}
.nav-menu{
flex: 1 1 auto !important;
min-width: 0 !important;
display: flex !important;
justify-content: flex-end !important;
align-items: center !important;
gap: 6px !important;
}
.nav-link{
flex: 0 0 auto !important;
padding-left: 8px !important;
padding-right: 8px !important;
white-space: nowrap !important;
}
.nav-link.nav-contact{
margin-left: 6px !important;
padding-left: 14px !important;
padding-right: 14px !important;
align-self: center !important;
}
body[data-page="index.html"] .hero,
.page-hero{
padding-top: var(--header-safe-space, 0px) !important;
}
}
/* 1366px and smaller laptops: keep full menu fitting cleanly */
@media (min-width: 901px) and (max-width: 1420px){
.site-header .container,
.site-header .nav-container,
.site-header .navbar,
header .container{
width: min(100% - 36px, 1188px) !important;
max-width: 1188px !important;
}
.site-header .container,
.site-header .navbar{
gap: 22px !important;
}
.brand{
width: 248px !important;
min-width: 248px !important;
max-width: 248px !important;
flex-basis: 248px !important;
}
.nav-menu{
gap: 4px !important;
}
.nav-link{
padding-left: 7px !important;
padding-right: 7px !important;
font-size: .86rem !important;
}
.nav-link.nav-contact{
margin-left: 5px !important;
padding-left: 13px !important;
padding-right: 13px !important;
}
}
/* 1536px / 1440px refinement */
@media (min-width: 1421px) and (max-width: 1599px){
.site-header .container,
.site-header .nav-container,
.site-header .navbar,
header .container{
width: min(100% - 44px, 1210px) !important;
max-width: 1210px !important;
}
.brand{
width: 256px !important;
min-width: 256px !important;
max-width: 256px !important;
flex-basis: 256px !important;
}
.nav-menu{
gap: 6px !important;
}
}
/* Large desktop: prevent excessive stretching */
@media (min-width: 1600px){
.site-header .container,
.site-header .nav-container,
.site-header .navbar,
header .container{
width: min(100% - 64px, 1240px) !important;
max-width: 1240px !important;
}
}
/* 2026-06-30 v49 desktop header spacing final refinement
Scope: desktop header spacing only.
Mobile layout/menu, colors, content, workflow, and functionality unchanged. */
@media (min-width: 901px){
.site-header .container,
.site-header .nav-container,
.site-header .navbar,
header .container{
max-width: 1260px !important;
width: min(100% - 56px, 1260px) !important;
margin-left: auto !important;
margin-right: auto !important;
}
.site-header .container,
.site-header .navbar{
display: flex !important;
align-items: center !important;
justify-content: space-between !important;
gap: 42px !important;
}
.brand{
width: 246px !important;
min-width: 246px !important;
max-width: 246px !important;
flex: 0 0 246px !important;
overflow: visible !important;
}
.brand span,
.brand strong,
.brand small{
white-space: nowrap !important;
overflow: visible !important;
text-overflow: clip !important;
}
.nav-menu{
flex: 1 1 auto !important;
min-width: 0 !important;
justify-content: flex-end !important;
align-items: center !important;
gap: 5px !important;
}
.nav-link{
white-space: nowrap !important;
padding-left: 7px !important;
padding-right: 7px !important;
}
.nav-link.nav-contact{
margin-left: 8px !important;
padding-left: 15px !important;
padding-right: 15px !important;
align-self: center !important;
}
}
/* Laptop width refinement: keep more space after brand while preserving one-line nav */
@media (min-width: 901px) and (max-width: 1420px){
.site-header .container,
.site-header .nav-container,
.site-header .navbar,
header .container{
max-width: 1208px !important;
width: min(100% - 40px, 1208px) !important;
}
.site-header .container,
.site-header .navbar{
gap: 34px !important;
}
.brand{
width: 238px !important;
min-width: 238px !important;
max-width: 238px !important;
flex-basis: 238px !important;
}
.nav-menu{
gap: 3px !important;
}
.nav-link{
padding-left: 6px !important;
padding-right: 6px !important;
font-size: .84rem !important;
}
.nav-link.nav-contact{
margin-left: 7px !important;
padding-left: 13px !important;
padding-right: 13px !important;
}
}
/* 1440px / 1536px refinement */
@media (min-width: 1421px) and (max-width: 1599px){
.site-header .container,
.site-header .nav-container,
.site-header .navbar,
header .container{
max-width: 1236px !important;
width: min(100% - 48px, 1236px) !important;
}
.site-header .container,
.site-header .navbar{
gap: 40px !important;
}
.brand{
width: 242px !important;
min-width: 242px !important;
max-width: 242px !important;
flex-basis: 242px !important;
}
}
/* Large desktop: centered, not stretched */
@media (min-width: 1600px){
.site-header .container,
.site-header .nav-container,
.site-header .navbar,
header .container{
max-width: 1260px !important;
width: min(100% - 64px, 1260px) !important;
}
.site-header .container,
.site-header .navbar{
gap: 44px !important;
}
}
/* 2026-06-30 v50 desktop header minor polish only
Scope: desktop header brand/menu spacing only.
Mobile layout/menu, colors, content, workflow, and functionality unchanged. */
@media (min-width: 901px){
.site-header .container,
.site-header .nav-container,
.site-header .navbar,
header .container{
max-width: 1256px !important;
width: min(100% - 56px, 1256px) !important;
}
.site-header .container,
.site-header .navbar{
gap: 40px !important;
}
.brand{
width: 238px !important;
min-width: 238px !important;
max-width: 238px !important;
flex: 0 0 238px !important;
padding-left: 12px !important;
padding-right: 13px !important;
}
.brand img{
width: inherit;
}
.brand span,
.brand strong,
.brand small{
white-space: nowrap !important;
overflow: visible !important;
text-overflow: clip !important;
}
.nav-menu{
gap: 4px !important;
justify-content: flex-end !important;
align-items: center !important;
}
.nav-link{
white-space: nowrap !important;
padding-left: 7px !important;
padding-right: 7px !important;
}
.nav-link.nav-contact{
margin-left: 7px !important;
align-self: center !important;
}
}
@media (min-width: 901px) and (max-width: 1420px){
.site-header .container,
.site-header .nav-container,
.site-header .navbar,
header .container{
max-width: 1204px !important;
width: min(100% - 40px, 1204px) !important;
}
.site-header .container,
.site-header .navbar{
gap: 32px !important;
}
.brand{
width: 234px !important;
min-width: 234px !important;
max-width: 234px !important;
flex-basis: 234px !important;
padding-left: 11px !important;
padding-right: 12px !important;
}
.nav-menu{
gap: 3px !important;
}
.nav-link{
padding-left: 6px !important;
padding-right: 6px !important;
}
}
@media (min-width: 1421px) and (max-width: 1599px){
.site-header .container,
.site-header .nav-container,
.site-header .navbar,
header .container{
max-width: 1232px !important;
width: min(100% - 48px, 1232px) !important;
}
.brand{
width: 236px !important;
min-width: 236px !important;
max-width: 236px !important;
flex-basis: 236px !important;
}
}
@media (min-width: 1600px){
.site-header .container,
.site-header .nav-container,
.site-header .navbar,
header .container{
max-width: 1256px !important;
width: min(100% - 64px, 1256px) !important;
}
}
/* 2026-06-30 v51 desktop header-to-hero gap fix
Scope: desktop header/hero vertical spacing only.
Keeps current header logo, navigation spacing, Contact Us button, mobile layout, content, workflow, and functionality unchanged. */
@media (min-width: 901px){
/* Remove unnecessary spacing between sticky header and hero */
.site-header{
margin-bottom: 0 !important;
}
.site-header + main,
header + main,
main{
margin-top: 0 !important;
padding-top: 0 !important;
}
body[data-page="index.html"] .hero{
margin-top: 0 !important;
padding-top: 0 !important;
min-height: calc(100vh - 72px) !important;
}
body[data-page="index.html"] .hero .container,
body[data-page="index.html"] .hero-grid{
padding-top: 0 !important;
margin-top: 0 !important;
}
/* Keep hero content visible sooner without changing design */
body[data-page="index.html"] .hero-content{
transform: translateY(-30px) !important;
}
body[data-page="index.html"] .hero-visual,
body[data-page="index.html"] .hero-emergency-card,
body[data-page="index.html"] .hero-emergency-card.emergency-card-alt{
transform: translate(-30px, -10px) !important;
}
body[data-page="index.html"] .hero + .gradient-band,
body[data-page="index.html"] .gradient-band.section-pad{
margin-top: 0 !important;
}
}
@media (min-width: 1366px) and (max-width: 1599px){
body[data-page="index.html"] .hero{
min-height: calc(100vh - 70px) !important;
}
body[data-page="index.html"] .hero-content{
transform: translateY(-28px) !important;
}
body[data-page="index.html"] .hero-visual,
body[data-page="index.html"] .hero-emergency-card,
body[data-page="index.html"] .hero-emergency-card.emergency-card-alt{
transform: translate(-26px, -8px) !important;
}
}
@media (min-width: 1600px){
body[data-page="index.html"] .hero{
min-height: calc(100vh - 74px) !important;
}
body[data-page="index.html"] .hero-content{
transform: translateY(-32px) !important;
}
body[data-page="index.html"] .hero-visual,
body[data-page="index.html"] .hero-emergency-card,
body[data-page="index.html"] .hero-emergency-card.emergency-card-alt{
transform: translate(-32px, -10px) !important;
}
}
/* 2026-06-30 v52 restore hero image behind feature cards
Scope: homepage hero/stat band only.
Restores the original look where the hero image continues behind the feature cards. */
@media (min-width: 901px){
body[data-page="index.html"] .hero{
margin-bottom: 0 !important;
overflow: hidden !important;
}
body[data-page="index.html"] .hero + .gradient-band,
body[data-page="index.html"] .gradient-band.section-pad{
margin-top: -122px !important;
padding-top: 24px !important;
padding-bottom: 26px !important;
background: linear-gradient(90deg, rgba(8, 45, 95, .86), rgba(20, 188, 211, .72)) !important;
position: relative !important;
z-index: 3 !important;
}
body[data-page="index.html"] .stats-grid{
position: relative !important;
z-index: 4 !important;
}
}
@media (min-width: 1366px) and (max-width: 1599px){
body[data-page="index.html"] .hero + .gradient-band,
body[data-page="index.html"] .gradient-band.section-pad{
margin-top: -116px !important;
}
}
@media (min-width: 1600px){
body[data-page="index.html"] .hero + .gradient-band,
body[data-page="index.html"] .gradient-band.section-pad{
margin-top: -126px !important;
}
}
/* Keep mobile from being affected by this desktop restoration */
@media (max-width: 900px){
body[data-page="index.html"] .hero + .gradient-band,
body[data-page="index.html"] .gradient-band.section-pad{
margin-top: 0 !important;
}
}
/* 2026-06-30 v53 desktop hero separation fix
Scope: desktop homepage hero / emergency card / feature cards only.
Separates the emergency card from the feature cards and removes overlap. */
@media (min-width: 901px){
/* Keep the hero self-contained with enough height */
body[data-page="index.html"] .hero{
min-height: 700px !important;
margin-bottom: 0 !important;
padding-top: 0 !important;
overflow: hidden !important;
}
/* Keep the left hero content in a stable, readable position */
body[data-page="index.html"] .hero-content{
max-width: 58% !important;
padding: 92px 0 118px !important;
position: relative !important;
z-index: 2 !important;
}
/* Keep the emergency card fully inside the hero area and away from the feature cards */
body[data-page="index.html"] .hero-card,
body[data-page="index.html"] .hero-emergency-card,
body[data-page="index.html"] .hero-emergency-card.emergency-card-alt{
position: absolute !important;
top: 122px !important;
right: 5.2% !important;
bottom: auto !important;
transform: none !important;
width: min(340px, 30vw) !important;
z-index: 3 !important;
}
/* Give the feature cards their own clean section below the hero */
body[data-page="index.html"] .hero + .gradient-band,
body[data-page="index.html"] .gradient-band.section-pad{
margin-top: 0 !important;
padding-top: 28px !important;
padding-bottom: 30px !important;
background: linear-gradient(90deg, rgba(8,45,95,.96), rgba(19,92,188,.95), rgba(25,180,210,.94)) !important;
position: relative !important;
z-index: 1 !important;
}
body[data-page="index.html"] .stats-grid{
margin-top: 0 !important;
position: relative !important;
z-index: 2 !important;
}
body[data-page="index.html"] .stats-grid div{
height: 100% !important;
}
}
/* Common laptop screens */
@media (min-width: 1366px) and (max-width: 1535px){
body[data-page="index.html"] .hero{
min-height: 680px !important;
}
body[data-page="index.html"] .hero-content{
max-width: 57% !important;
padding: 86px 0 112px !important;
}
body[data-page="index.html"] .hero-card,
body[data-page="index.html"] .hero-emergency-card,
body[data-page="index.html"] .hero-emergency-card.emergency-card-alt{
top: 114px !important;
right: 4.6% !important;
width: min(332px, 31vw) !important;
}
}
/* 1440 / 1536 balance */
@media (min-width: 1536px) and (max-width: 1919px){
body[data-page="index.html"] .hero{
min-height: 700px !important;
}
body[data-page="index.html"] .hero-content{
max-width: 58% !important;
padding: 92px 0 118px !important;
}
body[data-page="index.html"] .hero-card,
body[data-page="index.html"] .hero-emergency-card,
body[data-page="index.html"] .hero-emergency-card.emergency-card-alt{
top: 122px !important;
right: 5.2% !important;
width: min(340px, 29vw) !important;
}
}
/* Large desktop */
@media (min-width: 1920px){
body[data-page="index.html"] .hero{
min-height: 720px !important;
}
body[data-page="index.html"] .hero-content{
max-width: 57% !important;
padding: 96px 0 122px !important;
}
body[data-page="index.html"] .hero-card,
body[data-page="index.html"] .hero-emergency-card,
body[data-page="index.html"] .hero-emergency-card.emergency-card-alt{
top: 126px !important;
right: 6% !important;
width: 340px !important;
}
}
/* Preserve the established mobile behavior */
@media (max-width: 900px){
body[data-page="index.html"] .hero + .gradient-band,
body[data-page="index.html"] .gradient-band.section-pad{
margin-top: 0 !important;
}
}
/* 2026-06-30 v54 desktop brand container only fix
Scope: desktop logo/brand container only.
Mobile layout/menu, hero section, colors, content, navigation items, workflow, and functionality unchanged. */
@media (min-width: 901px){
.site-header .container,
.site-header .navbar{
gap: 34px !important;
}
.brand{
width: auto !important;
min-width: 214px !important;
max-width: none !important;
flex: 0 0 auto !important;
padding-left: 8px !important;
padding-right: 12px !important;
gap: 9px !important;
align-items: center !important;
justify-content: flex-start !important;
overflow: visible !important;
white-space: nowrap !important;
}
.brand img{
flex: 0 0 auto !important;
}
.brand span{
display: flex !important;
flex-direction: column !important;
justify-content: center !important;
min-width: 0 !important;
width: auto !important;
max-width: none !important;
overflow: visible !important;
white-space: nowrap !important;
}
.brand strong,
.brand small{
display: block !important;
white-space: nowrap !important;
overflow: visible !important;
text-overflow: clip !important;
}
.nav-menu{
margin-left: 10px !important;
align-items: center !important;
}
.nav-link:first-child{
margin-left: 0 !important;
}
}
/* Laptop spacing: keep brand compact while preserving a clean Home gap */
@media (min-width: 901px) and (max-width: 1420px){
.site-header .container,
.site-header .navbar{
gap: 28px !important;
}
.brand{
min-width: 208px !important;
padding-left: 7px !important;
padding-right: 10px !important;
gap: 8px !important;
}
.nav-menu{
margin-left: 8px !important;
}
}
/* Wider desktops: keep the brand natural, not bulky */
@media (min-width: 1421px){
.brand{
min-width: 212px !important;
padding-left: 8px !important;
padding-right: 11px !important;
}
.nav-menu{
margin-left: 12px !important;
}
}
/* 2026-06-30 v55 desktop brand padding final tune
Scope: desktop logo/brand container spacing only.
Keeps logo size, mobile, hero, colors, content, navigation items, workflow, and functionality unchanged. */
@media (min-width: 901px){
.brand{
width: fit-content !important;
min-width: 0 !important;
max-width: none !important;
flex: 0 0 auto !important;
padding-left: 7px !important;
padding-right: 8px !important;
gap: 8px !important;
align-items: center !important;
justify-content: flex-start !important;
white-space: nowrap !important;
overflow: visible !important;
}
.brand img{
flex: 0 0 auto !important;
}
.brand span{
width: auto !important;
min-width: 0 !important;
max-width: none !important;
display: flex !important;
flex-direction: column !important;
justify-content: center !important;
overflow: visible !important;
white-space: nowrap !important;
}
.brand strong,
.brand small{
white-space: nowrap !important;
overflow: visible !important;
text-overflow: clip !important;
}
.nav-menu{
margin-left: 16px !important;
align-items: center !important;
}
}
@media (min-width: 901px) and (max-width: 1420px){
.brand{
padding-left: 6px !important;
padding-right: 7px !important;
gap: 8px !important;
}
.nav-menu{
margin-left: 14px !important;
}
}
@media (min-width: 1421px){
.brand{
padding-left: 7px !important;
padding-right: 8px !important;
}
.nav-menu{
margin-left: 18px !important;
}
}
/* 2026-06-30 v56 very small desktop brand padding polish
Scope: desktop logo/brand container padding only.
Hero, mobile layout, colors, content, navigation, workflow, and functionality unchanged. */
@media (min-width: 901px){
.brand{
padding-left: 5px !important;
padding-right: 6px !important;
gap: 8px !important;
width: fit-content !important;
flex: 0 0 auto !important;
white-space: nowrap !important;
overflow: visible !important;
align-items: center !important;
}
.brand img{
flex: 0 0 auto !important;
}
.brand span,
.brand strong,
.brand small{
white-space: nowrap !important;
overflow: visible !important;
text-overflow: clip !important;
}
.nav-menu{
margin-left: 16px !important;
}
}
@media (min-width: 901px) and (max-width: 1420px){
.brand{
padding-left: 5px !important;
padding-right: 6px !important;
}
.nav-menu{
margin-left: 14px !important;
}
}
/* 2026-06-30 v57 desktop brand tight container final
Scope: desktop logo/brand container only.
Mobile layout/menu, hero section, colors, content, navigation, workflow, and functionality unchanged. */
@media (min-width: 901px){
.brand{
box-sizing: border-box !important;
width: max-content !important;
min-width: 0 !important;
max-width: max-content !important;
flex: 0 0 auto !important;
/* Tight, clean breathing space only */
padding-left: 4px !important;
padding-right: 5px !important;
padding-top: 5px !important;
padding-bottom: 5px !important;
gap: 7px !important;
display: inline-flex !important;
align-items: center !important;
justify-content: flex-start !important;
white-space: nowrap !important;
overflow: visible !important;
}
.brand img{
flex: 0 0 auto !important;
width: var(--brand-logo-size, 48px) !important;
height: var(--brand-logo-size, 48px) !important;
}
.brand span{
width: auto !important;
min-width: 0 !important;
max-width: none !important;
display: flex !important;
flex-direction: column !important;
justify-content: center !important;
white-space: nowrap !important;
overflow: visible !important;
}
.brand strong,
.brand small{
display: block !important;
white-space: nowrap !important;
overflow: visible !important;
text-overflow: clip !important;
}
/* Keep a clear separation before Home without making the brand box bulky */
.nav-menu{
margin-left: 18px !important;
align-items: center !important;
}
}
@media (min-width: 901px) and (max-width: 1420px){
.brand{
padding-left: 4px !important;
padding-right: 5px !important;
gap: 7px !important;
}
.nav-menu{
margin-left: 16px !important;
}
}
@media (min-width: 1421px){
.nav-menu{
margin-left: 20px !important;
}
}
/* 2026-06-30 Contact page information/form vertical alignment fix
Scope: Contact page Barangay Information and Inquiry Form alignment only.
Content, colors, navigation, workflow, functionality, mobile menu, and other sections unchanged. */
@media (min-width: 901px){
body[data-page="contact.html"] .contact-grid,
body[data-page="contact.html"] .contact-layout,
body[data-page="contact.html"] .split-layout,
body[data-page="contact.html"] .form-grid{
align-items: start !important;
}
body[data-page="contact.html"] .contact-grid > *,
body[data-page="contact.html"] .contact-layout > *,
body[data-page="contact.html"] .split-layout > *,
body[data-page="contact.html"] .form-grid > *{
margin-top: 0 !important;
}
body[data-page="contact.html"] .contact-card,
body[data-page="contact.html"] .info-card,
body[data-page="contact.html"] .form-card,
body[data-page="contact.html"] .inquiry-form{
align-self: start !important;
}
body[data-page="contact.html"] .contact-card h2,
body[data-page="contact.html"] .info-card h2,
body[data-page="contact.html"] .form-card h2,
body[data-page="contact.html"] .inquiry-form h2{
margin-top: 0 !important;
}
}
/* Preserve mobile stacking/layout */
@media (max-width: 900px){
body[data-page="contact.html"] .contact-grid,
body[data-page="contact.html"] .contact-layout,
body[data-page="contact.html"] .split-layout,
body[data-page="contact.html"] .form-grid{
align-items: initial !important;
}
}
/* 2026-06-30 Contact page Information / Inquiry Form card consistency fix
Scope: Contact page Barangay Information and Inquiry Form cards only.
Content, colors, navigation, workflow, functionality, mobile menu, and other sections unchanged. */
@media (min-width: 901px){
/* Keep both contact columns starting from the same top line */
body[data-page="contact.html"] .contact-grid,
body[data-page="contact.html"] .contact-layout,
body[data-page="contact.html"] .split-layout,
body[data-page="contact.html"] .form-grid{
align-items: stretch !important;
gap: clamp(22px, 2.2vw, 34px) !important;
}
body[data-page="contact.html"] .contact-grid > *,
body[data-page="contact.html"] .contact-layout > *,
body[data-page="contact.html"] .split-layout > *,
body[data-page="contact.html"] .form-grid > *{
margin-top: 0 !important;
align-self: stretch !important;
}
/* Match card shell treatment for Barangay Information and Inquiry Form */
body[data-page="contact.html"] .contact-card,
body[data-page="contact.html"] .info-card,
body[data-page="contact.html"] .form-card,
body[data-page="contact.html"] .inquiry-form{
margin-top: 0 !important;
align-self: stretch !important;
height: 100% !important;
border-radius: 24px !important;
padding: clamp(24px, 2vw, 32px) !important;
box-shadow: 0 18px 45px rgba(8, 38, 77, .10) !important;
border: 1px solid rgba(21, 94, 239, .10) !important;
overflow: hidden !important;
}
/* Match header spacing/style treatment without changing typography family or colors */
body[data-page="contact.html"] .contact-card h2,
body[data-page="contact.html"] .info-card h2,
body[data-page="contact.html"] .form-card h2,
body[data-page="contact.html"] .inquiry-form h2,
body[data-page="contact.html"] .contact-card h3,
body[data-page="contact.html"] .info-card h3,
body[data-page="contact.html"] .form-card h3,
body[data-page="contact.html"] .inquiry-form h3{
margin-top: 0 !important;
margin-bottom: 14px !important;
line-height: 1.15 !important;
}
body[data-page="contact.html"] .contact-card > p:first-of-type,
body[data-page="contact.html"] .info-card > p:first-of-type,
body[data-page="contact.html"] .form-card > p:first-of-type,
body[data-page="contact.html"] .inquiry-form > p:first-of-type{
margin-top: 0 !important;
}
/* Keep internal form/list spacing consistent, not vertically offset */
body[data-page="contact.html"] .contact-card form,
body[data-page="contact.html"] .info-card form,
body[data-page="contact.html"] .form-card form,
body[data-page="contact.html"] .inquiry-form form{
margin-top: 18px !important;
}
body[data-page="contact.html"] .contact-list,
body[data-page="contact.html"] .contact-info-list{
margin-top: 18px !important;
}
}
/* Preserve mobile layout/stacking; only keep same visual card treatment if already stacked */
@media (max-width: 900px){
body[data-page="contact.html"] .contact-card,
body[data-page="contact.html"] .info-card,
body[data-page="contact.html"] .form-card,
body[data-page="contact.html"] .inquiry-form{
border-radius: 22px !important;
}
}
/* 2026-06-30 Barangay Hall Information animation refinement
Scope: Contact page Barangay Hall / Barangay Information card decorative animation only.
Content, colors, layout, navigation, workflow, functionality, mobile menu, and form behavior unchanged. */
/* Remove the oblong decorative animation from the Barangay Information / Barangay Hall card */
body[data-page="contact.html"] .contact-card::after,
body[data-page="contact.html"] .info-card::after{
content: none !important;
display: none !important;
}
/* Replace it with a subtle clean pulse-ring accent that does not overlap the text area */
body[data-page="contact.html"] .contact-card::before,
body[data-page="contact.html"] .info-card::before{
content: "" !important;
position: absolute !important;
top: 18px !important;
right: 18px !important;
width: 42px !important;
height: 42px !important;
border-radius: 50% !important;
border: 1px solid rgba(21, 94, 239, .18) !important;
background:
radial-gradient(circle at center, rgba(21, 94, 239, .12) 0 26%, transparent 27%),
radial-gradient(circle at center, rgba(25, 180, 210, .10) 0 52%, transparent 53%) !important;
opacity: .9 !important;
pointer-events: none !important;
animation: barangayInfoPulse 3.8s ease-in-out infinite !important;
}
@keyframes barangayInfoPulse{
0%, 100%{
opacity: .55;
transform: scale(.96);
}
50%{
opacity: .95;
transform: scale(1.06);
}
}
/* Keep the replacement accent smaller on mobile so it stays out of the content */
@media (max-width: 900px){
body[data-page="contact.html"] .contact-card::before,
body[data-page="contact.html"] .info-card::before{
width: 34px !important;
height: 34px !important;
top: 14px !important;
right: 14px !important;
}
}
/* 2026-06-30 Contact page card animation refinement
Scope: Barangay Hall Information and Inquiry Form card decorative animation only.
Content, colors, layout, navigation, workflow, functionality, mobile menu, and form behavior unchanged. */
/* Remove previous oblong / pulse decorative accents from both contact cards */
body[data-page="contact.html"] .contact-card::before,
body[data-page="contact.html"] .contact-card::after,
body[data-page="contact.html"] .info-card::before,
body[data-page="contact.html"] .info-card::after,
body[data-page="contact.html"] .form-card::before,
body[data-page="contact.html"] .form-card::after,
body[data-page="contact.html"] .inquiry-form::before,
body[data-page="contact.html"] .inquiry-form::after{
content: none !important;
display: none !important;
}
/* Subtle animated top highlight for Barangay Hall / Information card */
body[data-page="contact.html"] .contact-card,
body[data-page="contact.html"] .info-card{
position: relative !important;
overflow: hidden !important;
background-image:
linear-gradient(90deg, rgba(21,94,239,.16), rgba(25,180,210,.14), rgba(21,94,239,.16)),
linear-gradient(180deg, rgba(255,255,255,.98), rgba(255,255,255,.98)) !important;
background-size: 220% 4px, 100% 100% !important;
background-repeat: no-repeat !important;
background-position: 0 0, 0 0 !important;
animation: contactCardTopFlow 7s ease-in-out infinite !important;
}
/* Subtle animated top highlight for Inquiry Form card */
body[data-page="contact.html"] .form-card,
body[data-page="contact.html"] .inquiry-form{
position: relative !important;
overflow: hidden !important;
background-image:
linear-gradient(90deg, rgba(25,180,210,.14), rgba(21,94,239,.16), rgba(25,180,210,.14)),
linear-gradient(180deg, rgba(255,255,255,.98), rgba(255,255,255,.98)) !important;
background-size: 220% 4px, 100% 100% !important;
background-repeat: no-repeat !important;
background-position: 100% 0, 0 0 !important;
animation: inquiryCardTopFlow 7s ease-in-out infinite !important;
}
/* Clean hover lift only on pointer devices */
@media (hover: hover) and (pointer: fine){
body[data-page="contact.html"] .contact-card,
body[data-page="contact.html"] .info-card,
body[data-page="contact.html"] .form-card,
body[data-page="contact.html"] .inquiry-form{
transition: transform .25s ease, box-shadow .25s ease !important;
}
body[data-page="contact.html"] .contact-card:hover,
body[data-page="contact.html"] .info-card:hover,
body[data-page="contact.html"] .form-card:hover,
body[data-page="contact.html"] .inquiry-form:hover{
transform: translateY(-3px) !important;
box-shadow: 0 22px 50px rgba(8, 38, 77, .13) !important;
}
}
@keyframes contactCardTopFlow{
0%, 100%{
background-position: 0 0, 0 0;
}
50%{
background-position: 100% 0, 0 0;
}
}
@keyframes inquiryCardTopFlow{
0%, 100%{
background-position: 100% 0, 0 0;
}
50%{
background-position: 0 0, 0 0;
}
}
/* Respect reduced motion settings */
@media (prefers-reduced-motion: reduce){
body[data-page="contact.html"] .contact-card,
body[data-page="contact.html"] .info-card,
body[data-page="contact.html"] .form-card,
body[data-page="contact.html"] .inquiry-form{
animation: none !important;
transition: none !important;
}
}
/* 2026-06-30 Footer logo padding slight reduction
Scope: footer logo/brand padding only.
No changes to layout, content, colors, navigation, workflow, functionality, mobile menu, or footer structure. */
/* Slightly reduce the visible padding around the footer logo/brand only */
.site-footer .footer-brand,
footer .footer-brand{
padding: 4px 5px !important;
gap: 8px !important;
}
.site-footer .footer-brand img,
footer .footer-brand img{
margin: 0 !important;
}
/* Keep mobile safe and compact */
@media (max-width: 900px){
.site-footer .footer-brand,
footer .footer-brand{
padding: 3px 4px !important;
gap: 7px !important;
}
}
/* 2026-06-30 Footer logo padding minimal correction
Scope: footer logo/brand padding only.
No layout, content, colors, navigation, workflow, functionality, mobile menu, or footer structure changes. */
.site-footer .footer-brand,
footer .footer-brand{
padding: 1px 2px !important;
gap: 6px !important;
}
.site-footer .footer-brand img,
footer .footer-brand img{
margin: 0 !important;
padding: 0 !important;
}
@media (max-width: 900px){
.site-footer .footer-brand,
footer .footer-brand{
padding: 1px 2px !important;
gap: 6px !important;
}
}
/* 2026-06-30 Modern Google Map refinement
Scope: Contact page map section only.
Content, colors, navigation, workflow, functionality, mobile menu, contact cards, and footer unchanged. */
body[data-page="contact.html"] .map-section,
body[data-page="contact.html"] .map-section-modern{
position: relative !important;
}
body[data-page="contact.html"] .map-box,
body[data-page="contact.html"] .map-box-modern,
body[data-page="contact.html"] .map-card,
body[data-page="contact.html"] .map-card-modern{
position: relative !important;
overflow: hidden !important;
border-radius: 28px !important;
border: 1px solid rgba(21, 94, 239, .12) !important;
box-shadow: 0 22px 55px rgba(8, 38, 77, .13) !important;
background: linear-gradient(135deg, rgba(255,255,255,.96), rgba(238,247,255,.92)) !important;
}
body[data-page="contact.html"] .map-box iframe,
body[data-page="contact.html"] .map-box-modern iframe,
body[data-page="contact.html"] .map-card iframe,
body[data-page="contact.html"] .map-card-modern iframe{
display: block !important;
width: 100% !important;
min-height: clamp(330px, 38vw, 460px) !important;
border: 0 !important;
filter: saturate(1.05) contrast(1.02) !important;
}
body[data-page="contact.html"] .map-location-panel{
position: absolute !important;
left: clamp(18px, 2vw, 28px) !important;
bottom: clamp(18px, 2vw, 28px) !important;
width: min(360px, calc(100% - 36px)) !important;
padding: 18px 20px !important;
border-radius: 22px !important;
background: rgba(255,255,255,.92) !important;
border: 1px solid rgba(21, 94, 239, .12) !important;
box-shadow: 0 18px 42px rgba(8, 38, 77, .16) !important;
backdrop-filter: blur(12px) !important;
z-index: 2 !important;
}
body[data-page="contact.html"] .map-chip{
display: inline-flex !important;
align-items: center !important;
gap: 6px !important;
padding: 6px 10px !important;
border-radius: 999px !important;
background: rgba(21, 94, 239, .10) !important;
color: #155eef !important;
font-weight: 800 !important;
font-size: .72rem !important;
letter-spacing: .02em !important;
margin-bottom: 9px !important;
}
body[data-page="contact.html"] .map-location-panel strong{
display: block !important;
color: #0b2a5b !important;
font-size: clamp(1rem, .9vw, 1.14rem) !important;
line-height: 1.2 !important;
margin-bottom: 6px !important;
}
body[data-page="contact.html"] .map-location-panel p{
margin: 0 !important;
color: #52677f !important;
font-size: .86rem !important;
line-height: 1.45 !important;
}
@media (max-width: 900px){
body[data-page="contact.html"] .map-box,
body[data-page="contact.html"] .map-box-modern,
body[data-page="contact.html"] .map-card,
body[data-page="contact.html"] .map-card-modern{
border-radius: 22px !important;
}
body[data-page="contact.html"] .map-box iframe,
body[data-page="contact.html"] .map-box-modern iframe,
body[data-page="contact.html"] .map-card iframe,
body[data-page="contact.html"] .map-card-modern iframe{
min-height: 320px !important;
}
body[data-page="contact.html"] .map-location-panel{
position: relative !important;
left: auto !important;
bottom: auto !important;
width: auto !important;
margin: 12px !important;
padding: 15px 16px !important;
border-radius: 18px !important;
}
}
/* 2026-06-30 Google Map modern polish
Scope: Contact page Google Map section only.
Removed helper sentence and refined the map visual treatment.
Content outside the map, colors, navigation, workflow, functionality, mobile menu, contact cards, and footer unchanged. */
body[data-page="contact.html"] .map-box,
body[data-page="contact.html"] .map-box-modern,
body[data-page="contact.html"] .map-card,
body[data-page="contact.html"] .map-card-modern{
border-radius: 30px !important;
border: 1px solid rgba(21, 94, 239, .14) !important;
box-shadow:
0 24px 60px rgba(8, 38, 77, .14),
inset 0 1px 0 rgba(255,255,255,.72) !important;
background:
linear-gradient(135deg, rgba(255,255,255,.98), rgba(239,247,255,.94)) !important;
isolation: isolate !important;
}
body[data-page="contact.html"] .map-box::before,
body[data-page="contact.html"] .map-box-modern::before,
body[data-page="contact.html"] .map-card::before,
body[data-page="contact.html"] .map-card-modern::before{
content: "" !important;
position: absolute !important;
inset: 0 !important;
pointer-events: none !important;
z-index: 1 !important;
background:
linear-gradient(180deg, rgba(11,42,91,.08), transparent 24%, transparent 76%, rgba(11,42,91,.10)),
radial-gradient(circle at 18% 18%, rgba(25,180,210,.16), transparent 28%),
radial-gradient(circle at 82% 82%, rgba(21,94,239,.13), transparent 30%) !important;
mix-blend-mode: multiply !important;
}
body[data-page="contact.html"] .map-box iframe,
body[data-page="contact.html"] .map-box-modern iframe,
body[data-page="contact.html"] .map-card iframe,
body[data-page="contact.html"] .map-card-modern iframe{
min-height: clamp(350px, 38vw, 480px) !important;
filter: saturate(1.08) contrast(1.04) brightness(1.01) !important;
}
body[data-page="contact.html"] .map-location-panel{
width: min(340px, calc(100% - 36px)) !important;
padding: 16px 18px !important;
border-radius: 20px !important;
background: rgba(255,255,255,.94) !important;
box-shadow: 0 18px 44px rgba(8, 38, 77, .17) !important;
z-index: 3 !important;
}
body[data-page="contact.html"] .map-location-panel p{
display: none !important;
}
body[data-page="contact.html"] .map-location-panel strong{
margin-bottom: 0 !important;
}
@media (hover: hover) and (pointer: fine){
body[data-page="contact.html"] .map-box,
body[data-page="contact.html"] .map-box-modern,
body[data-page="contact.html"] .map-card,
body[data-page="contact.html"] .map-card-modern{
transition: box-shadow .25s ease, transform .25s ease !important;
}
body[data-page="contact.html"] .map-box:hover,
body[data-page="contact.html"] .map-box-modern:hover,
body[data-page="contact.html"] .map-card:hover,
body[data-page="contact.html"] .map-card-modern:hover{
transform: translateY(-2px) !important;
box-shadow:
0 28px 68px rgba(8, 38, 77, .17),
inset 0 1px 0 rgba(255,255,255,.76) !important;
}
}
@media (max-width: 900px){
body[data-page="contact.html"] .map-box,
body[data-page="contact.html"] .map-box-modern,
body[data-page="contact.html"] .map-card,
body[data-page="contact.html"] .map-card-modern{
border-radius: 24px !important;
}
body[data-page="contact.html"] .map-location-panel{
margin: 12px !important;
width: auto !important;
padding: 14px 15px !important;
}
}
/* 2026-06-30 Google Map clean embed update
Scope: Contact page Google Map iframe/source only and visual polish.
Replaces Place/review-style embed with a cleaner location map view to avoid showing review UI.
Other content, colors, navigation, workflow, functionality, mobile menu, contact cards, and footer unchanged. */
body[data-page="contact.html"] .map-box iframe,
body[data-page="contact.html"] .map-box-modern iframe,
body[data-page="contact.html"] .map-card iframe,
body[data-page="contact.html"] .map-card-modern iframe{
width: 100% !important;
min-height: clamp(350px, 38vw, 480px) !important;
border: 0 !important;
display: block !important;
}
/* 2026-06-30 Contact page form/card text weight balance
Scope: Contact page Barangay Hall Information and Send an Inquiry text balance only.
Content, colors, layout, navigation, workflow, functionality, mobile menu, map, and footer unchanged. */
/* Balance the main contact card headings so they are not overly bold */
body[data-page="contact.html"] .contact-card h2,
body[data-page="contact.html"] .info-card h2,
body[data-page="contact.html"] .form-card h2,
body[data-page="contact.html"] .inquiry-form h2,
body[data-page="contact.html"] .contact-form h2{
font-weight: 750 !important;
letter-spacing: -0.015em !important;
line-height: 1.16 !important;
}
/* Balance smaller headers and labels inside both cards */
body[data-page="contact.html"] .contact-card h3,
body[data-page="contact.html"] .info-card h3,
body[data-page="contact.html"] .form-card h3,
body[data-page="contact.html"] .inquiry-form h3,
body[data-page="contact.html"] .contact-info-label,
body[data-page="contact.html"] label{
font-weight: 650 !important;
letter-spacing: -0.005em !important;
}
/* Keep body/form text readable and visually lighter */
body[data-page="contact.html"] .contact-card p,
body[data-page="contact.html"] .info-card p,
body[data-page="contact.html"] .form-card p,
body[data-page="contact.html"] .inquiry-form p,
body[data-page="contact.html"] .contact-info-value,
body[data-page="contact.html"] input,
body[data-page="contact.html"] textarea,
body[data-page="contact.html"] select{
font-weight: 400 !important;
}
/* Keep CTA/button text clear but not too heavy */
body[data-page="contact.html"] .contact-form button,
body[data-page="contact.html"] .inquiry-form button,
body[data-page="contact.html"] .form-card button{
font-weight: 700 !important;
}
@media (max-width: 900px){
body[data-page="contact.html"] .contact-card h2,
body[data-page="contact.html"] .info-card h2,
body[data-page="contact.html"] .form-card h2,
body[data-page="contact.html"] .inquiry-form h2,
body[data-page="contact.html"] .contact-form h2{
font-weight: 720 !important;
}
body[data-page="contact.html"] .contact-card h3,
body[data-page="contact.html"] .info-card h3,
body[data-page="contact.html"] .form-card h3,
body[data-page="contact.html"] .inquiry-form h3,
body[data-page="contact.html"] .contact-info-label,
body[data-page="contact.html"] label{
font-weight: 620 !important;
}
}
/* 2026-06-30 Contact page lighter text weight correction
Scope: Contact page Barangay Hall Information and Send an Inquiry text weight only.
Content, colors, layout, navigation, workflow, functionality, mobile menu, map, and footer unchanged. */
/* Make the main contact headings visibly lighter */
body[data-page="contact.html"] .contact-card h2,
body[data-page="contact.html"] .info-card h2,
body[data-page="contact.html"] .form-card h2,
body[data-page="contact.html"] .inquiry-form h2,
body[data-page="contact.html"] .contact-form h2{
font-weight: 600 !important;
letter-spacing: -0.01em !important;
}
/* Make secondary headers and labels lighter */
body[data-page="contact.html"] .contact-card h3,
body[data-page="contact.html"] .info-card h3,
body[data-page="contact.html"] .form-card h3,
body[data-page="contact.html"] .inquiry-form h3,
body[data-page="contact.html"] .contact-info-label,
body[data-page="contact.html"] label{
font-weight: 500 !important;
letter-spacing: 0 !important;
}
/* Keep contact values and form text normal weight */
body[data-page="contact.html"] .contact-info-value,
body[data-page="contact.html"] .contact-card p,
body[data-page="contact.html"] .info-card p,
body[data-page="contact.html"] .form-card p,
body[data-page="contact.html"] .inquiry-form p,
body[data-page="contact.html"] input,
body[data-page="contact.html"] textarea,
body[data-page="contact.html"] select{
font-weight: 400 !important;
}
/* Keep submit button clear but less heavy */
body[data-page="contact.html"] .contact-form button,
body[data-page="contact.html"] .inquiry-form button,
body[data-page="contact.html"] .form-card button{
font-weight: 600 !important;
}
@media (max-width: 900px){
body[data-page="contact.html"] .contact-card h2,
body[data-page="contact.html"] .info-card h2,
body[data-page="contact.html"] .form-card h2,
body[data-page="contact.html"] .inquiry-form h2,
body[data-page="contact.html"] .contact-form h2{
font-weight: 600 !important;
}
body[data-page="contact.html"] .contact-card h3,
body[data-page="contact.html"] .info-card h3,
body[data-page="contact.html"] .form-card h3,
body[data-page="contact.html"] .inquiry-form h3,
body[data-page="contact.html"] .contact-info-label,
body[data-page="contact.html"] label{
font-weight: 500 !important;
}
}
/* 2026-06-30 Production-safe subtle site animations
Scope: visual animation only.
No layout, sizing, spacing, content, colors, navigation, mobile menu, workflow, or functionality changes. */
/* Soft entrance animation for existing reveal elements only */
.reveal{
animation: safeFadeUp .58s ease both !important;
}
.reveal.delay-1{ animation-delay: .08s !important; }
.reveal.delay-2{ animation-delay: .16s !important; }
.reveal.delay-3{ animation-delay: .24s !important; }
/* Subtle desktop hover lift for existing cards only */
@media (hover: hover) and (pointer: fine){
.service-card,
.info-card,
.official-card,
.news-card,
.image-card,
.download-card,
.contact-card,
.form-card,
.pledge,
.quick-card,
.stat-card,
.accordion-item{
transition: transform .24s ease, box-shadow .24s ease, border-color .24s ease !important;
}
.service-card:hover,
.info-card:hover,
.official-card:hover,
.news-card:hover,
.image-card:hover,
.download-card:hover,
.contact-card:hover,
.form-card:hover,
.pledge:hover,
.quick-card:hover,
.stat-card:hover,
.accordion-item:hover{
transform: translateY(-3px) !important;
box-shadow: 0 18px 45px rgba(8, 38, 77, .12) !important;
}
/* Very subtle CTA interaction only */
.btn,
.nav-contact{
transition: transform .22s ease, box-shadow .22s ease, filter .22s ease !important;
}
.btn:hover,
.nav-contact:hover{
transform: translateY(-2px) !important;
filter: brightness(1.03) !important;
}
}
/* Gentle icon float, limited to icons already inside cards */
.service-card i,
.info-card i,
.quick-card i,
.stat-card i,
.contact-info-icon{
animation: safeIconFloat 4.8s ease-in-out infinite !important;
}
/* Keep animation subtle and stable */
@keyframes safeFadeUp{
from{
opacity: 0;
transform: translateY(12px);
}
to{
opacity: 1;
transform: translateY(0);
}
}
@keyframes safeIconFloat{
0%, 100%{
transform: translateY(0);
}
50%{
transform: translateY(-3px);
}
}
/* Accessibility: disable motion for users who prefer reduced motion */
@media (prefers-reduced-motion: reduce){
.reveal,
.service-card i,
.info-card i,
.quick-card i,
.stat-card i,
.contact-info-icon{
animation: none !important;
}
.service-card,
.info-card,
.official-card,
.news-card,
.image-card,
.download-card,
.contact-card,
.form-card,
.pledge,
.quick-card,
.stat-card,
.accordion-item,
.btn,
.nav-contact{
transition: none !important;
}
}
/* 2026-06-30 Barangay History photo update - scoped only to About page */
body[data-page="about.html"] .history-photo-grid{
display:grid;
grid-template-columns:repeat(2,minmax(0,1fr));
gap:14px;
}
body[data-page="about.html"] .history-photo-grid img{
width:100%;
height:190px;
object-fit:cover;
display:block;
border-radius:22px;
border:6px solid rgba(255,255,255,.86);
box-shadow:0 18px 42px rgba(6,31,63,.14);
}
body[data-page="about.html"] .history-photo-grid img:first-child{
grid-column:span 2;
height:250px;
}
@media (max-width:900px){
body[data-page="about.html"] .history-photo-grid img{
height:180px;
}
body[data-page="about.html"] .history-photo-grid img:first-child{
height:230px;
}
}
@media (max-width:520px){
body[data-page="about.html"] .history-photo-grid{
grid-template-columns:1fr;
gap:12px;
}
body[data-page="about.html"] .history-photo-grid img,
body[data-page="about.html"] .history-photo-grid img:first-child{
grid-column:auto;
height:210px;
border-radius:20px;
}
}
/* 2026-06-30 Barangay History alignment fix - scoped only to About page */
body[data-page="about.html"] section.section-pad:has(.history-photo-grid) .split-layout{
align-items:start !important;
}
body[data-page="about.html"] .history-photo-grid{
align-self:start;
}
/* 2026-06-30 Barangay History photo animation refinement - scoped only to About page */
body[data-page="about.html"] .history-photo-grid img{
opacity:1;
transform:translateY(0) scale(1);
transition:transform .32s ease, box-shadow .32s ease, filter .32s ease;
will-change:transform, box-shadow, filter, opacity;
}
body[data-page="about.html"] .history-photo-grid.reveal img{
opacity:0;
transform:translateY(22px) scale(.975);
}
body[data-page="about.html"] .history-photo-grid.reveal.visible img{
opacity:1;
}
body[data-page="about.html"] .history-photo-grid.reveal.visible img:nth-child(1){
animation:historyPhotoReveal .78s cubic-bezier(.22,.78,.18,1) .05s both, historyPhotoFloatA 6.8s ease-in-out .95s infinite alternate, historyPhotoGlow 4.8s ease-in-out 1s infinite alternate;
}
body[data-page="about.html"] .history-photo-grid.reveal.visible img:nth-child(2){
animation:historyPhotoReveal .78s cubic-bezier(.22,.78,.18,1) .18s both, historyPhotoFloatB 6.2s ease-in-out 1.08s infinite alternate, historyPhotoGlow 5s ease-in-out 1.15s infinite alternate;
}
body[data-page="about.html"] .history-photo-grid.reveal.visible img:nth-child(3){
animation:historyPhotoReveal .78s cubic-bezier(.22,.78,.18,1) .31s both, historyPhotoFloatC 6.5s ease-in-out 1.22s infinite alternate, historyPhotoGlow 5.2s ease-in-out 1.3s infinite alternate;
}
body[data-page="about.html"] .history-photo-grid img:hover{
animation-play-state:paused;
transform:translateY(-8px) scale(1.02);
box-shadow:0 26px 52px rgba(6,31,63,.22);
filter:saturate(1.06) brightness(1.02);
}
@keyframes historyPhotoReveal{
from{
opacity:0;
transform:translateY(22px) scale(.975);
}
to{
opacity:1;
transform:translateY(0) scale(1);
}
}
@keyframes historyPhotoFloatA{
from{transform:translateY(0) scale(1);}
to{transform:translateY(-10px) scale(1.006);}
}
@keyframes historyPhotoFloatB{
from{transform:translateY(0) scale(1);}
to{transform:translateY(-7px) scale(1.005);}
}
@keyframes historyPhotoFloatC{
from{transform:translateY(0) scale(1);}
to{transform:translateY(8px) scale(1.005);}
}
@keyframes historyPhotoGlow{
from{
box-shadow:0 18px 42px rgba(6,31,63,.14);
}
to{
box-shadow:0 24px 48px rgba(6,31,63,.2);
}
}
@media (prefers-reduced-motion:reduce){
body[data-page="about.html"] .history-photo-grid img,
body[data-page="about.html"] .history-photo-grid.reveal img,
body[data-page="about.html"] .history-photo-grid.reveal.visible img{
opacity:1 !important;
transform:none !important;
animation:none !important;
transition:none !important;
}
}
/* 2026-06-30 Contact page modernization - visual only, scoped to contact page */
body[data-page="contact.html"] .contact-card,
body[data-page="contact.html"] .form-card{
position: relative !important;
overflow: hidden !important;
border: 1px solid rgba(20, 94, 180, .14) !important;
border-radius: 30px !important;
background:
radial-gradient(circle at 12% 8%, rgba(31, 143, 255, .12), transparent 28%),
radial-gradient(circle at 88% 6%, rgba(18, 196, 220, .14), transparent 24%),
linear-gradient(180deg, rgba(255,255,255,.98), rgba(246,250,255,.94)) !important;
box-shadow:
0 24px 60px rgba(6, 31, 63, .12),
inset 0 1px 0 rgba(255,255,255,.92) !important;
}
body[data-page="contact.html"] .contact-card::before,
body[data-page="contact.html"] .form-card::before{
content: "" !important;
position: absolute !important;
inset: 0 !important;
pointer-events: none !important;
background:
linear-gradient(120deg, rgba(255,255,255,.55), transparent 34%, rgba(34, 211, 238, .11) 52%, transparent 72%),
repeating-linear-gradient(90deg, rgba(30, 124, 255, .035) 0 1px, transparent 1px 42px) !important;
opacity: .8 !important;
}
body[data-page="contact.html"] .contact-card::after,
body[data-page="contact.html"] .form-card::after{
content: "" !important;
position: absolute !important;
top: 0 !important;
left: 26px !important;
right: 26px !important;
height: 4px !important;
border-radius: 999px !important;
background: linear-gradient(90deg, #1d4ed8, #0ea5e9, #22d3ee) !important;
opacity: .9 !important;
}
body[data-page="contact.html"] .contact-card > *,
body[data-page="contact.html"] .form-card > *{
position: relative !important;
z-index: 1 !important;
}
body[data-page="contact.html"] .contact-card .eyebrow,
body[data-page="contact.html"] .form-card .eyebrow{
display: inline-flex !important;
align-items: center !important;
gap: 8px !important;
padding: 8px 14px !important;
border-radius: 999px !important;
background: linear-gradient(135deg, rgba(219, 234, 254, .95), rgba(207, 250, 254, .88)) !important;
color: #1d4ed8 !important;
letter-spacing: .08em !important;
box-shadow: 0 10px 24px rgba(29, 78, 216, .08) !important;
}
body[data-page="contact.html"] .contact-card .eyebrow::before,
body[data-page="contact.html"] .form-card .eyebrow::before{
content: "" !important;
width: 8px !important;
height: 8px !important;
border-radius: 50% !important;
background: #22d3ee !important;
box-shadow: 0 0 0 5px rgba(34,211,238,.18) !important;
}
body[data-page="contact.html"] .contact-card h2,
body[data-page="contact.html"] .form-card h2{
margin-top: 14px !important;
letter-spacing: -.04em !important;
background: linear-gradient(135deg, #0b2d63, #145ee8 55%, #0ea5e9) !important;
-webkit-background-clip: text !important;
background-clip: text !important;
color: transparent !important;
}
body[data-page="contact.html"] .contact-card > p,
body[data-page="contact.html"] .form-card > p{
max-width: 92% !important;
color: #55709b !important;
}
body[data-page="contact.html"] .contact-list{
display: grid !important;
gap: 12px !important;
margin-top: 22px !important;
}
body[data-page="contact.html"] .contact-list li{
position: relative !important;
display: grid !important;
grid-template-columns: 132px 1fr !important;
align-items: center !important;
gap: 8px !important;
padding: 15px 16px !important;
border: 1px solid rgba(20, 94, 180, .12) !important;
border-radius: 18px !important;
background: rgba(255,255,255,.74) !important;
box-shadow: 0 10px 26px rgba(6, 31, 63, .06) !important;
transition: transform .25s ease, box-shadow .25s ease, border-color .25s ease, background .25s ease !important;
}
body[data-page="contact.html"] .contact-list li::before{
content: "" !important;
width: 7px !important;
height: 36px !important;
border-radius: 999px !important;
background: linear-gradient(180deg, #1d4ed8, #22d3ee) !important;
position: absolute !important;
left: 0 !important;
top: 50% !important;
transform: translateY(-50%) !important;
opacity: .72 !important;
}
body[data-page="contact.html"] .contact-list li:hover{
transform: translateY(-3px) !important;
border-color: rgba(14, 165, 233, .28) !important;
background: rgba(255,255,255,.92) !important;
box-shadow: 0 16px 34px rgba(6, 31, 63, .1) !important;
}
body[data-page="contact.html"] .contact-list strong{
color: #0b3b82 !important;
font-weight: 800 !important;
}
body[data-page="contact.html"] .contact-list span{
color: #536b95 !important;
}
body[data-page="contact.html"] .form-grid{
gap: 16px !important;
}
body[data-page="contact.html"] .form-group label{
color: #153e79 !important;
font-weight: 750 !important;
margin-bottom: 8px !important;
}
body[data-page="contact.html"] .form-group input,
body[data-page="contact.html"] .form-group textarea{
border: 1px solid rgba(20, 94, 180, .14) !important;
border-radius: 18px !important;
background:
linear-gradient(180deg, rgba(255,255,255,.96), rgba(247,251,255,.92)) !important;
box-shadow:
0 10px 22px rgba(6, 31, 63, .045),
inset 0 1px 0 rgba(255,255,255,.94) !important;
transition: border-color .25s ease, box-shadow .25s ease, transform .25s ease !important;
}
body[data-page="contact.html"] .form-group input:focus,
body[data-page="contact.html"] .form-group textarea:focus{
outline: none !important;
border-color: rgba(14, 165, 233, .7) !important;
box-shadow:
0 0 0 4px rgba(14, 165, 233, .12),
0 14px 30px rgba(6, 31, 63, .08) !important;
transform: translateY(-1px) !important;
}
body[data-page="contact.html"] .form-card .btn-primary,
body[data-page="contact.html"] .form-card button[type="submit"]{
border: 0 !important;
border-radius: 999px !important;
font-weight: 800 !important;
color: #052447 !important;
background: linear-gradient(135deg, #1d8cff, #18c7dc, #6ee7f9) !important;
box-shadow: 0 16px 32px rgba(14, 165, 233, .24) !important;
transition: transform .25s ease, box-shadow .25s ease, filter .25s ease !important;
}
body[data-page="contact.html"] .form-card .btn-primary:hover,
body[data-page="contact.html"] .form-card button[type="submit"]:hover{
transform: translateY(-3px) !important;
filter: saturate(1.06) brightness(1.02) !important;
box-shadow: 0 22px 42px rgba(14, 165, 233, .32) !important;
}
@media (max-width: 760px){
body[data-page="contact.html"] .contact-card,
body[data-page="contact.html"] .form-card{
border-radius: 24px !important;
}
body[data-page="contact.html"] .contact-list li{
grid-template-columns: 1fr !important;
gap: 5px !important;
}
body[data-page="contact.html"] .contact-card > p,
body[data-page="contact.html"] .form-card > p{
max-width: 100% !important;
}
}
/* 2026-06-30 Header brand padding balance refinement - scoped to header logo card only */
.site-header .brand{
padding: 4px 10px 4px 6px !important;
gap: 7px !important;
border-radius: 18px !important;
min-height: auto !important;
}
.site-header .brand img{
width: 50px !important;
height: 50px !important;
}
.site-header .brand span{
line-height: 1.05 !important;
}
.site-header .brand strong{
line-height: 1.05 !important;
}
.site-header .brand small{
margin-top: 2px !important;
line-height: 1.05 !important;
}
@media (max-width: 640px){
.site-header .brand{
padding: 4px 8px 4px 6px !important;
gap: 6px !important;
border-radius: 16px !important;
}
.site-header .brand img{
width: 46px !important;
height: 46px !important;
}
}
/* 2026-06-30 Barangay Information stacked format - scoped only to contact page left info card */
body[data-page="contact.html"] .contact-card-modern .contact-info-stack{
display:grid !important;
gap:18px !important;
margin-top:24px !important;
}
body[data-page="contact.html"] .contact-card-modern .info-stack-item{
display:grid !important;
grid-template-columns:56px 1fr !important;
align-items:start !important;
gap:16px !important;
}
body[data-page="contact.html"] .contact-card-modern .info-stack-icon{
display:flex !important;
align-items:center !important;
justify-content:center !important;
width:56px !important;
height:56px !important;
border-radius:16px !important;
font-size:22px !important;
font-weight:700 !important;
color:#1d4ed8 !important;
background:linear-gradient(180deg, rgba(255,255,255,.96), rgba(240,246,255,.9)) !important;
border:1px solid rgba(20,94,180,.14) !important;
box-shadow:0 12px 26px rgba(6,31,63,.08), inset 0 1px 0 rgba(255,255,255,.95) !important;
}
body[data-page="contact.html"] .contact-card-modern .info-stack-content{
padding-top:3px !important;
}
body[data-page="contact.html"] .contact-card-modern .info-stack-title{
display:block !important;
margin-bottom:8px !important;
font-size:.88rem !important;
font-weight:800 !important;
text-transform:uppercase !important;
letter-spacing:.16em !important;
color:#1d4ed8 !important;
}
body[data-page="contact.html"] .contact-card-modern .info-stack-content p{
margin:0 !important;
color:#39567f !important;
font-size:1.08rem !important;
line-height:1.65 !important;
}
body[data-page="contact.html"] .contact-card-modern .info-stack-item + .info-stack-item{
padding-top:6px !important;
border-top:1px solid rgba(20,94,180,.08) !important;
}
@media (max-width:640px){
body[data-page="contact.html"] .contact-card-modern .info-stack-item{
grid-template-columns:50px 1fr !important;
gap:14px !important;
}
body[data-page="contact.html"] .contact-card-modern .info-stack-icon{
width:50px !important;
height:50px !important;
border-radius:14px !important;
font-size:20px !important;
}
body[data-page="contact.html"] .contact-card-modern .info-stack-content p{
font-size:1rem !important;
}
}
/* 2026-06-30 Barangay Information icon modernization and social refresh */
body[data-page="contact.html"] .contact-card-modern .info-stack-item{
grid-template-columns:60px 1fr !important;
gap:18px !important;
}
body[data-page="contact.html"] .contact-card-modern .info-stack-icon{
position:relative !important;
width:60px !important;
height:60px !important;
border-radius:18px !important;
color:#145ee8 !important;
background:linear-gradient(180deg, rgba(255,255,255,.98), rgba(236,245,255,.9)) !important;
border:1px solid rgba(20,94,180,.14) !important;
box-shadow:0 14px 28px rgba(6,31,63,.08), inset 0 1px 0 rgba(255,255,255,.97) !important;
}
body[data-page="contact.html"] .contact-card-modern .info-stack-icon::after{
content:"" !important;
position:absolute !important;
inset:10px !important;
border-radius:14px !important;
background:linear-gradient(135deg, rgba(29,78,216,.08), rgba(34,211,238,.14)) !important;
}
body[data-page="contact.html"] .contact-card-modern .info-stack-icon svg{
position:relative !important;
z-index:1 !important;
width:24px !important;
height:24px !important;
display:block !important;
}
body[data-page="contact.html"] .contact-card-modern .info-stack-title{
margin-bottom:7px !important;
}
body[data-page="contact.html"] .contact-card-modern .contact-social-block{
margin-top:18px !important;
padding-top:22px !important;
border-top:1px solid rgba(20,94,180,.08) !important;
}
body[data-page="contact.html"] .contact-card-modern .contact-social-icons{
display:flex !important;
align-items:center !important;
flex-wrap:wrap !important;
gap:14px !important;
}
body[data-page="contact.html"] .contact-card-modern .contact-social-icon{
position:relative !important;
display:inline-flex;
align-items:center !important;
justify-content:center !important;
width:56px !important;
height:56px !important;
border-radius:16px !important;
color:#145ee8 !important;
text-decoration:none !important;
background:linear-gradient(180deg, rgba(255,255,255,.98), rgba(236,245,255,.9)) !important;
border:1px solid rgba(20,94,180,.14) !important;
box-shadow:0 14px 28px rgba(6,31,63,.08), inset 0 1px 0 rgba(255,255,255,.97) !important;
transition:transform .25s ease, box-shadow .25s ease, border-color .25s ease, color .25s ease !important;
}
body[data-page="contact.html"] .contact-card-modern .contact-social-icon::after{
content:"" !important;
position:absolute !important;
inset:9px !important;
border-radius:13px !important;
background:linear-gradient(135deg, rgba(29,78,216,.08), rgba(34,211,238,.14)) !important;
}
body[data-page="contact.html"] .contact-card-modern .contact-social-icon svg{
position:relative !important;
z-index:1 !important;
width:22px !important;
height:22px !important;
display:block !important;
}
body[data-page="contact.html"] .contact-card-modern .contact-social-icon:hover{
transform:translateY(-4px) !important;
color:#0b3b82 !important;
border-color:rgba(14,165,233,.3) !important;
box-shadow:0 20px 38px rgba(6,31,63,.12), inset 0 1px 0 rgba(255,255,255,.97) !important;
}
@media (max-width:640px){
body[data-page="contact.html"] .contact-card-modern .info-stack-item{
grid-template-columns:54px 1fr !important;
gap:15px !important;
}
body[data-page="contact.html"] .contact-card-modern .info-stack-icon{
width:54px !important;
height:54px !important;
border-radius:16px !important;
}
body[data-page="contact.html"] .contact-card-modern .contact-social-icon{
width:52px !important;
height:52px !important;
border-radius:15px !important;
}
}
/* =====================================================================
RESPONSIVE SYSTEM — Unified Breakpoint Cleanup
Breakpoints: 1400+, 769-1179, 600-768, 480-599, <480
===================================================================== */
/* 1. Large Monitors (>=1400px) */
@media (min-width:1400px){
:root{ --container:1280px }
.section-pad{ padding:100px 0 !important }
.section-pad-sm{ padding:78px 0 !important }
.hero .container{ width:min(1480px,calc(100% - 100px)) !important; max-width:1480px !important }
.hero-card{ right:7% !important; width:360px !important }
.footer-grid{ grid-template-columns:1.4fr 1fr 0.9fr 0.9fr !important }
}
/* 2. Small Desktop / Tablet Landscape (769px-1179px) */
@media (min-width:769px) and (max-width:1179px){
.card-grid,.card-grid.two{ grid-template-columns:repeat(2,1fr) !important }
.card-grid.three{ grid-template-columns:repeat(2,1fr) !important }
.stats-grid{ grid-template-columns:repeat(2,1fr) !important }
.officials-grid{ grid-template-columns:repeat(2,1fr) !important }
.profile-grid{ grid-template-columns:repeat(2,1fr) !important }
.downloads-grid{ grid-template-columns:1fr 1fr !important }
.footer-grid{ grid-template-columns:repeat(2,1fr) !important }
.section-pad{ padding:72px 0 !important }
.section-pad-sm{ padding:56px 0 !important }
.hero-content{ max-width:620px !important }
}
/* 3. Tablet Portrait (600px-768px) - restore 2-col where it fits */
@media (min-width:600px) and (max-width:768px){
.card-grid,.card-grid.two,.card-grid.three,.stats-grid,.officials-grid,.profile-grid,.downloads-grid{ grid-template-columns:repeat(2,1fr) !important; gap:14px !important }
.footer-grid{ grid-template-columns:repeat(2,1fr) !important; gap:20px !important }
.service-meta{ grid-template-columns:repeat(2,1fr) !important }
.section-heading{ text-align:center !important }
}
/* 4. Large Mobile (480px-599px) */
@media (min-width:480px) and (max-width:599px){
.card-grid,.card-grid.two,.card-grid.three,.stats-grid{ grid-template-columns:repeat(2,1fr) !important; gap:12px !important }
.officials-grid,.profile-grid,.downloads-grid{ grid-template-columns:1fr !important }
.footer-grid{ grid-template-columns:1fr !important }
}
/* 5. Mobile (<=479px) */
@media (max-width:479px){
.card-grid,.card-grid.two,.card-grid.three,.stats-grid,.officials-grid,.profile-grid,.downloads-grid,.service-meta,.form-row,.footer-grid{ grid-template-columns:1fr !important; gap:12px !important }
.split-layout,.contact-grid{ grid-template-columns:1fr !important }
.section-pad{ padding:40px 0 !important }
.section-pad-sm{ padding:34px 0 !important }
.gradient-band{ padding:26px 0 !important }
.hero-content{ padding:28px 0 16px !important }
.hero-actions{ margin-top:16px !important; gap:8px !important }
.container{ width:calc(100% - 18px) !important; max-width:calc(100% - 18px) !important }
}
/* 6. Section heading centering */
@media (min-width:769px){
.section-heading{ text-align:center !important }
}
/* 7. Stats band — comfortable padding inside gradient section */
body[data-page="index.html"] .gradient-band.section-pad{ padding:44px 0 !important }
@media (max-width:768px){ body[data-page="index.html"] .gradient-band.section-pad{ padding:32px 0 !important } .stats-grid div{ min-height:auto !important } }
@media (max-width:479px){ body[data-page="index.html"] .gradient-band.section-pad{ padding:24px 0 !important } }
/* 8. Hero card - clean positioning at each breakpoint */
@media (min-width:901px){
.hero-card{ position:absolute !important; right:6% !important; bottom:72px !important; width:min(340px,calc(50% - 40px)) !important; max-width:340px !important }
}
@media (min-width:769px) and (max-width:900px){
.hero-card{ position:relative !important; right:auto !important; bottom:auto !important; width:min(380px,calc(100% - 32px)) !important; max-width:380px !important; margin:-60px auto 36px !important }
}
@media (max-width:768px){
.hero-card{ position:relative !important; right:auto !important; bottom:auto !important; width:calc(100% - 24px) !important; max-width:340px !important; margin:14px auto 24px !important }
}
/* 9. Downloads grid: 2-col on 600px+ */
@media (min-width:600px){ .downloads-grid{ grid-template-columns:repeat(2,1fr) !important } }
/* 10. Table wrap horizontal scroll */
.table-wrap{ overflow-x:auto !important }
table{ min-width:min(700px,100%) }
/* 11. Image card heights by breakpoint */
@media (max-width:599px){ .image-card img{ height:180px !important; width:100% !important } }
@media (min-width:600px) and (max-width:768px){ .image-card img{ height:200px !important } }
/* 12. Footer bottom */
.footer-bottom{ text-align:center !important; padding:20px !important }
/* 13. Prevent horizontal overflow */
html,body{ max-width:100vw; overflow-x:hidden }
.hero,.page-hero,section,.site-header,.site-footer{ max-width:100%; overflow-x:hidden }
/* 14. Page hero height */
@media (min-width:1024px){ .page-hero{ padding:110px 0 76px !important; min-height:280px } }
@media (min-width:769px) and (max-width:1023px){ .page-hero{ padding:88px 0 60px !important; min-height:240px !important } }
@media (min-width:600px) and (max-width:768px){ .page-hero{ padding:60px 0 44px !important; min-height:220px !important } }
/* 15. Page hero headings — single line on tablet and up */
@media (min-width:600px){
.page-hero h1 {
white-space: nowrap !important;
text-wrap: nowrap !important;
font-size: clamp(1.9rem, 3.6vw, 3.6rem) !important;
letter-spacing: -0.04em !important;
}
}
/* 15. Form row */
@media (min-width:480px){ .form-row{ grid-template-columns:repeat(2,1fr) !important } }
@media (max-width:479px){ .form-row{ grid-template-columns:1fr !important } }
/* 16. Official mini on small screens */
@media (max-width:599px){ .official-mini{ flex-direction:column !important; text-align:center !important; align-items:center !important } .official-mini img{ width:110px !important; height:110px !important } }
/* 17. Nav menu mobile */
@media (max-width:768px){ .nav-menu{ grid-template-columns:1fr !important; left:10px !important; right:10px !important } }
/* 18. Hero orbs - no overflow on mobile */
@media (max-width:768px){ .hero:after,.page-hero:after{ right:-80px !important; width:200px !important; height:200px !important } }
/* 19. Reduced motion */
@media (prefers-reduced-motion:reduce){ *,*::before,*::after{ animation:none !important; transition:none !important } }
/* =====================================================================
EMERGENCY CARD + GRID FINAL FIXES
===================================================================== */
/* Emergency card — mobile/tablet: center it below hero content */
@media (max-width:900px){
.hero-emergency-card,
.hero-emergency-card.emergency-card-alt{
position:relative !important;
right:auto !important;
bottom:auto !important;
left:auto !important;
display:block !important;
margin:18px auto 32px !important;
width:min(400px,calc(100% - 28px)) !important;
max-width:400px !important;
}
}
@media (max-width:479px){
.hero-emergency-card,
.hero-emergency-card.emergency-card-alt{
margin:12px auto 24px !important;
width:calc(100% - 20px) !important;
max-width:100% !important;
}
}
/* Stats grid — restore 2-col at 600-900px */
@media (min-width:600px) and (max-width:900px){
.stats-grid{
grid-template-columns:repeat(2,1fr) !important;
gap:14px !important;
}
.stats-grid div{ min-height:auto !important }
}
/* Card grids — restore 2-col at 600-768px */
@media (min-width:600px) and (max-width:768px){
.card-grid,
.card-grid.two,
.card-grid.three,
.officials-grid,
.profile-grid,
.downloads-grid{
grid-template-columns:repeat(2,1fr) !important;
gap:14px !important;
}
}
/* Hero section: block layout on mobile so card flows naturally */
@media (max-width:900px){
.hero{ display:block !important }
.hero-content{ width:100% }
}
/* =====================================================================
FINAL CARD FIX — uses body[data-page] for higher specificity (0,2,0)
Overrides all previous right/margin conflicts at <=900px
===================================================================== */
@media (max-width:900px){
body[data-page="index.html"] .hero-emergency-card,
body[data-page="index.html"] .hero-emergency-card.emergency-card-alt{
position:relative !important;
inset:auto !important;
right:auto !important;
left:auto !important;
bottom:auto !important;
top:auto !important;
display:block !important;
margin:16px auto 28px !important;
width:min(360px,calc(100% - 28px)) !important;
max-width:360px !important;
transform:none !important;
}
}
@media (max-width:479px){
body[data-page="index.html"] .hero-emergency-card,
body[data-page="index.html"] .hero-emergency-card.emergency-card-alt{
width:calc(100% - 20px) !important;
max-width:100% !important;
margin:10px auto 20px !important;
}
}
/* =====================================================================
LARGE-SCREEN CONTAINER FIX
Override the max-width:1200px cap set at min-width:1440px earlier.
This must be at the end so later source order wins.
===================================================================== */
@media (min-width:1400px){
.container{
max-width:1280px !important;
width:min(1280px,calc(100% - 40px)) !important;
}
}
@media (min-width:1920px){
.container{
max-width:1400px !important;
width:min(1400px,calc(100% - 60px)) !important;
}
}
/* =====================================================================
HERO CONTENT ALIGNMENT FIX
Problem: at large screens, hero heading is shifted right because
max-width:58% with margin:auto centers it in the full hero width,
but content sections below left-align to the container edge.
Fix: align hero-content left edge with the container left margin.
===================================================================== */
@media (min-width:1400px){
body[data-page="index.html"] .hero .hero-content{
/* Left-align to match the regular container (1280px) positioning */
margin-left: max(calc((100vw - 1280px) / 2), 20px) !important;
margin-right: 0 !important;
width: min(55vw, 720px) !important;
max-width: min(55vw, 720px) !important;
}
}
@media (min-width:1920px){
body[data-page="index.html"] .hero .hero-content{
/* Adjust for 1400px container at 1920px+ */
margin-left: max(calc((100vw - 1400px) / 2), 20px) !important;
width: min(50vw, 760px) !important;
max-width: min(50vw, 760px) !important;
}
}
/* =====================================================================
BARANGAY HULO — MODERN POLISH & PROFESSIONAL ANIMATIONS
LGU/public-service grade: subtle, trustworthy, citizen-friendly.
Rules: transform + opacity only — no layout shifts.
All effects suppressed under prefers-reduced-motion.
===================================================================== */
/* ------------------------------------------------------------------
1. ENHANCED REVEAL ANIMATIONS
Smoother easing, slight stagger support via existing delay classes
------------------------------------------------------------------ */
.reveal {
opacity: 0;
transform: translateY(28px);
transition: opacity 0.72s cubic-bezier(0.22, 1, 0.36, 1),
transform 0.72s cubic-bezier(0.22, 1, 0.36, 1) !important;
}
.reveal.visible { opacity: 1; transform: none !important; }
.reveal-left {
opacity: 0;
transform: translateX(-30px);
transition: opacity 0.72s cubic-bezier(0.22, 1, 0.36, 1),
transform 0.72s cubic-bezier(0.22, 1, 0.36, 1) !important;
}
.reveal-left.visible { opacity: 1; transform: none !important; }
.reveal-right {
opacity: 0;
transform: translateX(30px);
transition: opacity 0.72s cubic-bezier(0.22, 1, 0.36, 1),
transform 0.72s cubic-bezier(0.22, 1, 0.36, 1) !important;
}
.reveal-right.visible { opacity: 1; transform: none !important; }
.reveal-zoom {
opacity: 0;
transform: scale(0.96) translateY(14px);
transition: opacity 0.65s cubic-bezier(0.22, 1, 0.36, 1),
transform 0.65s cubic-bezier(0.22, 1, 0.36, 1) !important;
}
.reveal-zoom.visible { opacity: 1; transform: none !important; }
/* Stagger delays — already applied via .delay-1 / .delay-2 / .delay-3 */
.delay-1 { transition-delay: 0.10s !important; }
.delay-2 { transition-delay: 0.20s !important; }
.delay-3 { transition-delay: 0.30s !important; }
/* ------------------------------------------------------------------
2. HEADER — scrolled elevation
------------------------------------------------------------------ */
.site-header {
transition: box-shadow 0.32s ease, background 0.32s ease !important;
}
.site-header.scrolled {
box-shadow: 0 2px 20px rgba(8,38,77,0.09) !important;
}
.nav-link {
transition: color 0.2s ease, background 0.2s ease, box-shadow 0.2s ease !important;
}
/* ------------------------------------------------------------------
3. BUTTONS — lift + glow
------------------------------------------------------------------ */
.btn {
transition: transform 0.22s cubic-bezier(0.22,1,0.36,1),
box-shadow 0.22s ease,
background 0.22s ease,
color 0.22s ease !important;
will-change: transform;
}
.btn:hover {
transform: translateY(-2px) !important;
}
.btn:active {
transform: translateY(0) scale(0.98) !important;
transition-duration: 0.1s !important;
}
.btn-primary:hover {
box-shadow: 0 10px 26px rgba(13,71,161,0.30) !important;
}
.btn-soft:hover {
box-shadow: 0 6px 18px rgba(13,71,161,0.12) !important;
}
.back-to-top {
transition: transform 0.24s ease,
box-shadow 0.24s ease,
opacity 0.3s ease,
pointer-events 0s !important;
}
.back-to-top:hover {
transform: translateY(-4px) !important;
box-shadow: 0 16px 32px rgba(13,71,161,0.34) !important;
}
/* ------------------------------------------------------------------
4. SERVICE / INFO CARDS — lift + icon bounce
------------------------------------------------------------------ */
.info-card {
transition: transform 0.28s cubic-bezier(0.22,1,0.36,1),
box-shadow 0.28s ease,
border-color 0.28s ease !important;
will-change: transform;
}
.info-card:hover {
transform: translateY(-6px) !important;
box-shadow: 0 20px 44px rgba(8,38,77,0.13) !important;
border-color: rgba(21,101,216,0.22) !important;
}
.info-card .icon {
display: inline-block;
transition: transform 0.32s cubic-bezier(0.34,1.56,0.64,1) !important;
}
.info-card:hover .icon {
transform: scale(1.20) translateY(-3px) !important;
}
/* ------------------------------------------------------------------
5. IMAGE CARDS — lift + subtle zoom on photo
------------------------------------------------------------------ */
.image-card {
transition: transform 0.30s cubic-bezier(0.22,1,0.36,1),
box-shadow 0.30s ease !important;
overflow: hidden;
will-change: transform;
}
.image-card:hover {
transform: translateY(-5px) !important;
box-shadow: 0 22px 46px rgba(8,38,77,0.15) !important;
}
.image-card img {
transition: transform 0.55s cubic-bezier(0.22,1,0.36,1) !important;
}
.image-card:hover img {
transform: scale(1.05) !important;
}
/* ------------------------------------------------------------------
6. OFFICIAL CARDS — lift + photo scale
------------------------------------------------------------------ */
.official-card {
transition: transform 0.28s cubic-bezier(0.22,1,0.36,1),
box-shadow 0.28s ease !important;
will-change: transform;
}
.official-card:hover {
transform: translateY(-6px) !important;
box-shadow: 0 22px 46px rgba(8,38,77,0.14) !important;
}
.official-card img,
.profile-item img {
transition: transform 0.40s cubic-bezier(0.22,1,0.36,1) !important;
}
.official-card:hover img,
.profile-item:hover img {
transform: scale(1.05) !important;
}
/* ------------------------------------------------------------------
7. DOWNLOAD CARDS
------------------------------------------------------------------ */
.download-card {
transition: transform 0.26s cubic-bezier(0.22,1,0.36,1),
box-shadow 0.26s ease,
background 0.26s ease !important;
}
.download-card:hover {
transform: translateY(-4px) !important;
box-shadow: 0 16px 34px rgba(8,38,77,0.12) !important;
}
/* ------------------------------------------------------------------
8. STATS GRID — lift with subtle glow
------------------------------------------------------------------ */
.stats-grid > div {
transition: transform 0.26s cubic-bezier(0.22,1,0.36,1),
box-shadow 0.26s ease !important;
}
.stats-grid > div:hover {
transform: translateY(-4px) !important;
box-shadow: 0 12px 28px rgba(0,0,0,0.14) !important;
}
/* ------------------------------------------------------------------
9. DOCUMENT ROWS & ACCORDIONS
------------------------------------------------------------------ */
.doc-row {
transition: background 0.2s ease, transform 0.2s ease !important;
}
.doc-row:hover {
transform: translateX(4px) !important;
}
.accordion-trigger {
transition: background 0.22s ease, color 0.22s ease !important;
}
/* ------------------------------------------------------------------
10. CONTACT SOCIAL ICONS
------------------------------------------------------------------ */
.contact-social-icon {
transition: transform 0.28s cubic-bezier(0.34,1.56,0.64,1),
box-shadow 0.28s ease !important;
}
.contact-social-icon:hover {
transform: translateY(-5px) scale(1.10) !important;
box-shadow: 0 12px 24px rgba(13,71,161,0.20) !important;
}
/* ------------------------------------------------------------------
11. FOOTER LINKS — slide right micro-interaction
------------------------------------------------------------------ */
.footer-links a {
display: inline-block;
transition: color 0.2s ease, transform 0.22s ease !important;
}
.footer-links a:hover {
transform: translateX(5px) !important;
}
/* ------------------------------------------------------------------
12. TEXT LINK
------------------------------------------------------------------ */
.text-link {
display: inline-block;
transition: transform 0.22s ease, color 0.2s ease !important;
}
.text-link:hover {
transform: translateX(4px) !important;
}
/* ------------------------------------------------------------------
13. MAP EMBED — subtle hover elevation
------------------------------------------------------------------ */
.map-embed {
transition: box-shadow 0.3s ease !important;
}
.map-embed:hover {
box-shadow: 0 24px 52px rgba(8,38,77,0.14) !important;
}
/* ------------------------------------------------------------------
14. PAGE HERO — eyebrow accent pulse (once, on load)
------------------------------------------------------------------ */
@keyframes bhEyebrowIn {
from { opacity:0; transform:translateX(-12px); }
to { opacity:1; transform:none; }
}
.page-hero .eyebrow,
.hero .eyebrow {
animation: bhEyebrowIn 0.6s cubic-bezier(0.22,1,0.36,1) both;
animation-delay: 0.2s;
}
/* ------------------------------------------------------------------
15. SECTION HEADING — underline grow on reveal
------------------------------------------------------------------ */
@keyframes bhLineGrow {
from { transform: scaleX(0); }
to { transform: scaleX(1); }
}
.section-heading h2 {
position: relative;
display: block;
}
.section-heading h2::after {
display: none;
}
/* ------------------------------------------------------------------
16. EMERGENCY CARD SOS BADGE — soft pulse
------------------------------------------------------------------ */
@keyframes bhSOSPulse {
0%, 100% { box-shadow: 0 0 0 0 rgba(255,82,82,0.35); }
60% { box-shadow: 0 0 0 10px rgba(255,82,82,0); }
}
.emergency-siren-badge {
animation: bhSOSPulse 2.4s ease-in-out infinite;
}
/* ------------------------------------------------------------------
16.5 ANNOUNCEMENTS SECTION — staggered entrance on reveal
Scoped to .ann-heading-wrap (eyebrow, heading, description, link)
and #ann-mini-list cards only — nothing else in the section animates.
------------------------------------------------------------------ */
.ann-heading-wrap .eyebrow,
.ann-heading-wrap h2,
.ann-heading-wrap p,
.ann-heading-wrap .text-link {
opacity: 0 !important;
transform: translateY(30px) !important;
transition: opacity 700ms ease-out, transform 700ms ease-out !important;
}
.ann-heading-wrap .eyebrow { transition-delay: 0s !important; }
.ann-heading-wrap h2 { transition-delay: 0.12s !important; }
.ann-heading-wrap p { transition-delay: 0.24s !important; }
.ann-heading-wrap .text-link { transition-delay: 0.36s !important; }
.ann-heading-wrap.ann-visible .eyebrow,
.ann-heading-wrap.ann-visible h2,
.ann-heading-wrap.ann-visible p,
.ann-heading-wrap.ann-visible .text-link {
opacity: 1 !important;
transform: none !important;
}
/* "LATEST UPDATES" accent line — expands left to right once, on reveal */
.ann-heading-wrap .eyebrow::before {
transform: scaleX(0) !important;
transform-origin: left center;
transition: transform 0.5s cubic-bezier(0.22, 1, 0.36, 1) !important;
transition-delay: 0.05s !important;
}
.ann-heading-wrap.ann-visible .eyebrow::before {
transform: scaleX(1) !important;
}
@media (prefers-reduced-motion: reduce) {
.ann-heading-wrap .eyebrow,
.ann-heading-wrap h2,
.ann-heading-wrap p,
.ann-heading-wrap .text-link,
.ann-heading-wrap .eyebrow::before {
opacity: 1 !important;
transform: none !important;
transition: none !important;
}
}
/* main.js auto-assigns a reveal-variant class to any un-classed direct
child of .split-layout — neutralize that on the wrapper/list containers
themselves so only the items styled above actually animate. */
.ann-heading-wrap.reveal,
.ann-heading-wrap.reveal-left,
.ann-heading-wrap.reveal-right,
.ann-heading-wrap.reveal-zoom,
#ann-mini-list.reveal,
#ann-mini-list.reveal-left,
#ann-mini-list.reveal-right,
#ann-mini-list.reveal-zoom {
opacity: 1 !important;
transform: none !important;
transition: none !important;
}
/* Announcement cards — fade/slide/scale entrance, fully decoupled from
main.js's shared .reveal/.visible system (same reason as the wrapper
above): driven entirely by our own "ann-visible" class. */
#ann-mini-list article.reveal {
opacity: 0 !important;
transform: translateX(40px) !important;
transition: opacity 700ms ease-out, transform 700ms ease-out !important;
}
#ann-mini-list article.reveal:nth-child(1) { transition-delay: 100ms !important; }
#ann-mini-list article.reveal:nth-child(2) { transition-delay: 250ms !important; }
#ann-mini-list article.reveal:nth-child(3) { transition-delay: 400ms !important; }
#ann-mini-list article.reveal.ann-visible {
opacity: 1 !important;
transform: none !important;
}
@media (prefers-reduced-motion: reduce) {
#ann-mini-list article.reveal {
opacity: 1 !important;
transform: none !important;
}
}
/* ------------------------------------------------------------------
17. ANNOUNCEMENT MINI-LIST ARTICLES
------------------------------------------------------------------ */
.mini-list article {
transition: transform 0.24s ease, box-shadow 0.24s ease !important;
border-radius: var(--radius-sm);
}
.mini-list article:hover {
transform: translateY(-3px) !important;
box-shadow: 0 8px 20px rgba(8,38,77,0.08) !important;
}
/* ------------------------------------------------------------------
18. CONTACT FORM FOCUS POLISH
------------------------------------------------------------------ */
.contact-form input:focus,
.contact-form textarea:focus,
.contact-form-modern input:focus,
.contact-form-modern textarea:focus {
transition: border-color 0.2s ease, box-shadow 0.2s ease !important;
outline: none;
box-shadow: 0 0 0 3px rgba(21,101,216,0.12) !important;
}
/* ------------------------------------------------------------------
19. STATUS BADGE — soft shimmer on ongoing items
------------------------------------------------------------------ */
@keyframes bhStatusShimmer {
0% { background-position: -200% center; }
100% { background-position: 200% center; }
}
.status.ongoing {
background-size: 200% auto;
animation: bhStatusShimmer 3s linear infinite;
}
/* ------------------------------------------------------------------
20. ACCESSIBILITY — suppress all animations
------------------------------------------------------------------ */
@media (prefers-reduced-motion: reduce) {
.reveal, .reveal-left, .reveal-right, .reveal-zoom {
opacity: 1 !important;
transform: none !important;
transition: none !important;
animation: none !important;
}
.btn, .info-card, .image-card, .official-card, .download-card,
.stats-grid > div, .contact-social-icon, .footer-links a,
.text-link, .doc-row, .mini-list article, .back-to-top,
.official-card img, .profile-item img, .image-card img,
.accordion-trigger, .map-embed {
transition: none !important;
animation: none !important;
}
.btn:hover, .info-card:hover, .image-card:hover,
.official-card:hover, .download-card:hover,
.stats-grid > div:hover, .contact-social-icon:hover,
.footer-links a:hover, .text-link:hover, .doc-row:hover,
.mini-list article:hover, .back-to-top:hover {
transform: none !important;
}
.page-hero .eyebrow, .hero .eyebrow { animation: none !important; opacity: 1 !important; }
.emergency-siren-badge { animation: none !important; }
.status.ongoing { animation: none !important; }
}
/* =====================================================================
ALIGNMENT FIX — Content containers match navbar width (1360px)
Problem: navbar container = 1360px, content containers = 1280px
→ logo and section headings start at different left positions.
Fix: unify all containers to 1360px so logo, headings, and
all sections share the same left/right edge.
===================================================================== */
@media (min-width:1400px){
:root{ --container:1360px }
.container{
max-width:1360px !important;
width:min(1360px,calc(100% - 40px)) !important;
}
/* Hero content left edge must match the 1360px container margin */
body[data-page="index.html"] .hero .hero-content{
margin-left:max(calc((100vw - 1360px) / 2), 20px) !important;
width:min(54vw,720px) !important;
max-width:min(54vw,720px) !important;
margin-right:0 !important;
}
}
@media (min-width:1920px){
:root{ --container:1440px }
.container{
max-width:1440px !important;
width:min(1440px,calc(100% - 60px)) !important;
}
body[data-page="index.html"] .hero .hero-content{
margin-left:max(calc((100vw - 1440px) / 2), 20px) !important;
width:min(50vw,760px) !important;
max-width:min(50vw,760px) !important;
}
}
/* =====================================================================
NAVBAR + CONTENT ALIGNMENT — unify to 1360px at 1421-1919px
Root cause: @media(1421-1599px) sets .site-header .navbar to 1232px
at specificity (0,2,0). Must match that specificity + later source
order to override. Content container also unified here.
===================================================================== */
@media (min-width:1421px) and (max-width:1919px){
/* Override the navbar 1232px cap — match specificity (0,2,0) */
.site-header .container,
.site-header .navbar,
.navbar.container,
header .container{
max-width:1360px !important;
width:min(calc(100% - 40px),1360px) !important;
}
/* All content containers must match */
.container{
max-width:1360px !important;
width:min(calc(100% - 40px),1360px) !important;
}
/* Hero content left edge = navbar left edge */
body[data-page="index.html"] .hero .hero-content{
margin-left:max(calc((100vw - 1360px) / 2), 20px) !important;
width:min(54vw,720px) !important;
max-width:min(54vw,720px) !important;
margin-right:0 !important;
}
}
@media (min-width:1920px){
.site-header .container,
.site-header .navbar,
.navbar.container,
header .container{
max-width:1440px !important;
width:min(calc(100% - 60px),1440px) !important;
}
.container{
max-width:1440px !important;
width:min(calc(100% - 60px),1440px) !important;
}
body[data-page="index.html"] .hero .hero-content{
margin-left:max(calc((100vw - 1440px) / 2), 20px) !important;
width:min(50vw,760px) !important;
max-width:min(50vw,760px) !important;
margin-right:0 !important;
}
}
/* =====================================================================
LOGO ↔ SECTIONS ALIGNMENT — remove navbar internal padding at large screens
The .navbar has padding:24px which offsets the logo 24px right of
the container edge. Content sections have no such padding, so they
start 24px earlier. Removing at >=1421px aligns logo with sections.
===================================================================== */
@media (min-width:1421px){
.navbar{
padding-left:0 !important;
padding-right:0 !important;
}
}
/* =====================================================================
LOGO ↔ SECTIONS PADDING FIX
Source: @media(901px+) .site-header .container sets padding:24px !important
specificity (0,2,0). Must match that specificity to override.
===================================================================== */
@media (min-width:1421px){
.site-header .container,
.site-header .nav-container,
.site-header .navbar,
header .container{
padding-left:0 !important;
padding-right:0 !important;
}
}
/* =====================================================================
HERO CONTENT MARGIN — use 100% (body width, excludes scrollbar)
instead of 100vw (includes scrollbar) so hero heading aligns exactly
with logo and section containers.
===================================================================== */
@media (min-width:1421px) and (max-width:1919px){
body[data-page="index.html"] .hero .hero-content{
margin-left:max(calc((100% - 1360px) / 2), 20px) !important;
}
}
@media (min-width:1920px){
body[data-page="index.html"] .hero .hero-content{
margin-left:max(calc((100% - 1440px) / 2), 20px) !important;
}
}
/* =====================================================================
HERO VIEWPORT HEIGHT FIX
Problem: fixed pixel min-heights (680–720px) let the Barangay Services
section bleed into the first viewport on tall monitors (1080p, etc.).
Fix: use calc(100dvh - 160px) so hero always fills the viewport minus
the navbar (~64px) and the gradient-band feature strip (~96px).
The max() floor prevents the hero from shrinking too small on short
viewports or when calc resolves below a usable height.
===================================================================== */
/* Hero min-height = viewport minus navbar (92px) minus gradient-band (98px) minus 10px buffer = 200px.
This ensures hero + feature strip together fill exactly one viewport on any screen height,
so the Quick Access section starts only after the user scrolls. */
@media (min-width: 901px) {
body[data-page="index.html"] .hero {
min-height: max(600px, calc(100dvh - 200px)) !important;
}
}
@media (min-width: 1920px) {
body[data-page="index.html"] .hero {
min-height: max(680px, calc(100dvh - 200px)) !important;
}
}
/* =====================================================================
ICT EQUIPMENT CARD — Community Initiatives (index.html)
===================================================================== */
/* Banner replaces the ![]()
slot — same 220px height as image-card img */
.ict-banner {
height: 220px;
background: linear-gradient(140deg, #0d3a85 0%, #1565c0 45%, #0097b2 100%);
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
gap: 14px;
padding: 24px 20px;
position: relative;
overflow: hidden;
}
/* Subtle radial highlight for depth */
.ict-banner::before {
content: '';
position: absolute;
top: -40px;
right: -40px;
width: 180px;
height: 180px;
border-radius: 50%;
background: rgba(255,255,255,0.07);
pointer-events: none;
}
.ict-banner-icon {
width: 72px;
height: 72px;
background: rgba(255,255,255,0.12);
border: 1px solid rgba(255,255,255,0.22);
border-radius: 20px;
display: flex;
align-items: center;
justify-content: center;
padding: 12px;
transition: transform 0.32s cubic-bezier(0.34,1.56,0.64,1);
}
.image-card:hover .ict-banner-icon {
transform: scale(1.12) translateY(-3px);
}
.ict-banner-icon svg {
width: 100%;
height: 100%;
}
.ict-banner-label {
text-align: center;
color: white;
}
.ict-banner-label strong {
display: block;
font-size: 0.82rem;
font-weight: 800;
letter-spacing: 0.08em;
text-transform: uppercase;
opacity: 0.96;
}
.ict-banner-label span {
display: block;
font-size: 0.72rem;
opacity: 0.72;
margin-top: 3px;
letter-spacing: 0.04em;
}
/* Community Support badge */
.status.community {
background: #efe8ff;
color: #5b21b6;
}
/* Hover — same scale as image-card:hover img */
.image-card:hover .ict-banner {
filter: brightness(1.06);
transition: filter 0.45s ease;
}
/* Reduced motion */
@media (prefers-reduced-motion: reduce) {
.image-card:hover .ict-banner-icon {
transform: none !important;
}
}
/* Program banner variants — same structure as .ict-banner */
.prog-banner {
height: 220px;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
gap: 14px;
padding: 24px 20px;
position: relative;
overflow: hidden;
}
.prog-banner::before {
content: '';
position: absolute;
top: -40px;
right: -40px;
width: 180px;
height: 180px;
border-radius: 50%;
background: rgba(255,255,255,0.07);
pointer-events: none;
}
/* Clean and Green — forest green → teal */
.prog-banner--green {
background: linear-gradient(140deg, #0a5c3a 0%, #0e8a52 48%, #00a693 100%);
}
/* Livelihood — deep amber → warm gold */
.prog-banner--gold {
background: linear-gradient(140deg, #7a3d00 0%, #b85c00 48%, #d4870a 100%);
}
.image-card:hover .prog-banner { filter: brightness(1.07); transition: filter 0.45s ease; }
/* =====================================================================
LOGO + BRAND + EYEBROW ENHANCEMENT
===================================================================== */
/* Navbar logo — larger and crisper */
.site-header .brand img,
header .brand img {
width: 62px !important;
height: 62px !important;
border-radius: 16px !important;
}
/* Brand name — stronger, more presence */
.site-header .brand strong,
header .brand strong {
font-size: 1.18rem !important;
font-weight: 800 !important;
letter-spacing: -0.03em !important;
line-height: 1.05 !important;
}
/* Brand subtitle */
.site-header .brand small,
header .brand small {
font-size: 0.78rem !important;
font-weight: 700 !important;
letter-spacing: 0.01em !important;
margin-top: 2px !important;
}
/* Eyebrow captions — more visible and polished */
.eyebrow {
font-size: 0.85rem !important;
font-weight: 900 !important;
letter-spacing: 0.17em !important;
}
/* Hero / page-hero eyebrow pill */
.hero .eyebrow,
.page-hero .eyebrow {
font-size: 0.82rem !important;
padding: 9px 16px !important;
letter-spacing: 0.15em !important;
}
/* Section eyebrows — largest, most prominent */
.section-heading .eyebrow,
.split-layout .eyebrow {
font-size: 0.90rem !important;
letter-spacing: 0.22em !important;
gap: 10px !important;
}
.section-heading .eyebrow::before,
.split-layout .eyebrow::before {
width: 30px !important;
height: 3px !important;
}
/* Mobile — keep logo sensible */
@media (max-width: 600px) {
.site-header .brand img,
header .brand img {
width: 46px !important;
height: 46px !important;
}
.site-header .brand strong,
header .brand strong {
font-size: 1rem !important;
}
}
/* =====================================================================
HERO QUICK-FACTS BAR
===================================================================== */
.hero-quick-facts {
display: flex;
align-items: center;
flex-wrap: nowrap;
gap: 0;
margin-top: 40px;
background: rgba(255,255,255,0.08);
border: 1px solid rgba(255,255,255,0.16);
border-radius: 14px;
padding: 12px 20px;
backdrop-filter: blur(8px);
max-width: 100%;
overflow: hidden;
}
.hero-fact {
display: flex;
align-items: center;
gap: 6px;
color: rgba(255,255,255,0.90);
font-size: 0.75rem;
font-weight: 600;
flex-shrink: 1;
white-space: nowrap;
min-width: 0;
padding: 4px 8px;
}
.hero-fact svg {
width: 13px;
height: 13px;
flex-shrink: 0;
opacity: 0.80;
}
.hero-fact-divider {
width: 1px;
height: 24px;
background: rgba(255,255,255,0.20);
flex-shrink: 0;
}
/* Tablet / mobile: stack each item on its own row */
@media (max-width: 700px) {
.hero-quick-facts { flex-wrap: wrap; padding: 12px 16px; gap: 2px; }
.hero-fact-divider { display: none; }
.hero-fact { flex: 0 0 100%; white-space: normal; padding: 5px 6px; font-size: 0.78rem; }
}
/* Mobile: tighten spacing */
@media (max-width: 480px) {
.hero-quick-facts { margin-top: 16px; padding: 10px 14px; gap: 0; }
.hero-fact { flex: 0 0 100%; font-size: 0.74rem; padding: 4px 5px; }
}
/* =====================================================================
CONTACT PAGE — MODERNIZED CARDS
===================================================================== */
/* ── Info card: gradient header ───────────────────────────────────── */
body[data-page="contact.html"] .contact-card-modern {
padding: 0 !important;
overflow: hidden !important;
background: white !important;
border: 1px solid rgba(86,129,216,.12) !important;
box-shadow: 0 24px 56px rgba(8,38,77,.10) !important;
}
body[data-page="contact.html"] .contact-card-modern .contact-card-header {
background: linear-gradient(140deg, #0b3880 0%, #1565c0 52%, #0097b2 100%);
padding: 30px 28px 26px !important;
margin-bottom: 0 !important;
position: relative;
overflow: hidden;
}
/* Decorative circle in header */
body[data-page="contact.html"] .contact-card-modern .contact-card-header::after {
content: '';
position: absolute;
right: -32px; top: -32px;
width: 140px; height: 140px;
border-radius: 50%;
background: rgba(255,255,255,0.08);
pointer-events: none;
}
body[data-page="contact.html"] .contact-card-modern .contact-chip {
background: rgba(255,255,255,0.18) !important;
color: rgba(255,255,255,0.95) !important;
border: 1px solid rgba(255,255,255,0.22) !important;
}
body[data-page="contact.html"] .contact-card-modern .contact-card-header h2 {
color: white !important;
font-size: clamp(1.4rem, 2.2vw, 1.9rem) !important;
}
body[data-page="contact.html"] .contact-card-modern .contact-card-header p {
color: rgba(255,255,255,0.75) !important;
}
body[data-page="contact.html"] .contact-card-modern .contact-info-stack {
padding: 22px 28px 28px !important;
}
/* Info stack items — icon colored per type */
body[data-page="contact.html"] .contact-card-modern .info-stack-item {
padding: 14px 16px !important;
border-radius: 14px !important;
background: #f7faff !important;
border: 1px solid rgba(86,129,216,0.10) !important;
transition: background 0.2s ease, box-shadow 0.2s ease !important;
}
body[data-page="contact.html"] .contact-card-modern .info-stack-item:hover {
background: #edf3ff !important;
box-shadow: 0 4px 16px rgba(21,101,216,0.08) !important;
}
body[data-page="contact.html"] .contact-card-modern .info-stack-icon {
width: 40px !important;
height: 40px !important;
border-radius: 11px !important;
flex-shrink: 0 !important;
}
/* Distinct icon colors: phone=blue, email=teal, address=purple, hours=amber */
body[data-page="contact.html"] .contact-info-stack .info-stack-item:nth-child(1) .info-stack-icon { background: linear-gradient(135deg,#1565c0,#1e88e5) !important; }
body[data-page="contact.html"] .contact-info-stack .info-stack-item:nth-child(2) .info-stack-icon { background: linear-gradient(135deg,#00796b,#26c6aa) !important; }
body[data-page="contact.html"] .contact-info-stack .info-stack-item:nth-child(3) .info-stack-icon { background: linear-gradient(135deg,#6a1b9a,#ab47bc) !important; }
body[data-page="contact.html"] .contact-info-stack .info-stack-item:nth-child(4) .info-stack-icon { background: linear-gradient(135deg,#e65100,#ff8f00) !important; }
body[data-page="contact.html"] .contact-card-modern .info-stack-icon svg {
width: 18px !important; height: 18px !important;
color: white !important;
}
body[data-page="contact.html"] .contact-card-modern .info-stack-title {
font-size: 0.72rem !important;
font-weight: 800 !important;
letter-spacing: 0.10em !important;
text-transform: uppercase !important;
color: #6b85aa !important;
}
body[data-page="contact.html"] .contact-card-modern .info-stack-content p {
font-weight: 600 !important;
color: #112d61 !important;
font-size: 0.95rem !important;
}
/* Social icons */
body[data-page="contact.html"] .contact-card-modern .contact-social-block {
margin-top: 20px !important;
padding-top: 18px !important;
border-top: 1px solid rgba(86,129,216,0.12) !important;
}
body[data-page="contact.html"] .contact-card-modern .contact-social-icon {
width: 42px !important; height: 42px !important;
border-radius: 12px !important;
background: #f0f4ff !important;
color: #1565c0 !important;
border: 1px solid rgba(86,129,216,0.15) !important;
display: inline-flex; align-items: center; justify-content: center;
transition: background 0.22s ease, transform 0.22s ease, box-shadow 0.22s ease !important;
}
body[data-page="contact.html"] .contact-card-modern .contact-social-icon:hover {
background: #1565c0 !important;
color: white !important;
transform: translateY(-3px) !important;
box-shadow: 0 8px 20px rgba(21,101,216,0.28) !important;
}
body[data-page="contact.html"] .contact-card-modern .contact-social-icon svg {
width: 18px !important; height: 18px !important;
fill: currentColor !important;
}
/* ── Inquiry form: gradient top accent ────────────────────────────── */
body[data-page="contact.html"] .contact-form-modern {
background: white !important;
border: 1px solid rgba(86,129,216,.12) !important;
box-shadow: 0 24px 56px rgba(8,38,77,.10) !important;
padding: 0 !important;
overflow: hidden !important;
}
body[data-page="contact.html"] .contact-form-modern .contact-card-header {
background: linear-gradient(140deg, #0b3880 0%, #1565c0 52%, #0097b2 100%);
padding: 30px 32px 26px !important;
margin-bottom: 0 !important;
position: relative;
overflow: hidden;
}
body[data-page="contact.html"] .contact-form-modern .contact-card-header::after {
content: '';
position: absolute;
right: -32px; top: -32px;
width: 140px; height: 140px;
border-radius: 50%;
background: rgba(255,255,255,0.08);
pointer-events: none;
}
body[data-page="contact.html"] .contact-form-modern .contact-chip {
background: rgba(255,255,255,0.18) !important;
color: rgba(255,255,255,0.95) !important;
border: 1px solid rgba(255,255,255,0.22) !important;
}
body[data-page="contact.html"] .contact-form-modern .contact-card-header h2 {
color: white !important;
font-size: clamp(1.4rem, 2.2vw, 1.9rem) !important;
}
body[data-page="contact.html"] .contact-form-modern .contact-card-header p {
color: rgba(255,255,255,0.75) !important;
}
/* Form body padding */
body[data-page="contact.html"] .contact-form-modern .form-row,
body[data-page="contact.html"] .contact-form-modern > label,
body[data-page="contact.html"] .contact-form-modern > button {
margin-left: 32px !important;
margin-right: 32px !important;
}
body[data-page="contact.html"] .contact-form-modern .form-row:first-of-type {
margin-top: 28px !important;
}
body[data-page="contact.html"] .contact-form-modern > button {
margin-bottom: 32px !important;
width: calc(100% - 64px) !important;
}
/* Input/textarea styling */
body[data-page="contact.html"] .contact-form-modern label {
font-size: 0.80rem !important;
font-weight: 700 !important;
color: #3a5080 !important;
letter-spacing: 0.04em !important;
text-transform: uppercase !important;
}
body[data-page="contact.html"] .contact-form-modern input,
body[data-page="contact.html"] .contact-form-modern textarea {
background: #f5f8ff !important;
border: 1.5px solid rgba(86,129,216,0.18) !important;
border-radius: 12px !important;
padding: 12px 16px !important;
font-size: 0.96rem !important;
color: #112d61 !important;
transition: border-color 0.22s ease, box-shadow 0.22s ease, background 0.22s ease !important;
}
body[data-page="contact.html"] .contact-form-modern input:focus,
body[data-page="contact.html"] .contact-form-modern textarea:focus {
border-color: #1565c0 !important;
background: white !important;
box-shadow: 0 0 0 4px rgba(21,101,216,0.10) !important;
outline: none !important;
}
/* Submit button */
body[data-page="contact.html"] .contact-form-modern .btn-primary {
background: linear-gradient(135deg, #0b3880, #1565c0) !important;
border: none !important;
border-radius: 12px !important;
padding: 14px 28px !important;
font-size: 1rem !important;
font-weight: 700 !important;
letter-spacing: 0.02em !important;
box-shadow: 0 8px 24px rgba(13,56,128,0.28) !important;
transition: transform 0.22s ease, box-shadow 0.22s ease !important;
}
body[data-page="contact.html"] .contact-form-modern .btn-primary:hover {
transform: translateY(-2px) !important;
box-shadow: 0 14px 32px rgba(13,56,128,0.36) !important;
}
/* Mobile */
@media (max-width: 600px) {
body[data-page="contact.html"] .contact-card-modern .contact-card-header,
body[data-page="contact.html"] .contact-form-modern .contact-card-header {
padding: 22px 20px 20px !important;
}
body[data-page="contact.html"] .contact-card-modern .contact-info-stack {
padding: 16px 20px 22px !important;
}
body[data-page="contact.html"] .contact-form-modern .form-row,
body[data-page="contact.html"] .contact-form-modern > label,
body[data-page="contact.html"] .contact-form-modern > button {
margin-left: 20px !important;
margin-right: 20px !important;
}
body[data-page="contact.html"] .contact-form-modern > button {
width: calc(100% - 40px) !important;
}
}
/* =====================================================================
ABOUT PAGE — MODERNIZED PROFILE GRID & MAP
===================================================================== */
.about-profile-grid {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 20px;
margin-top: 36px;
}
.about-profile-card {
background: white;
border: 1px solid rgba(86,129,216,0.12);
border-radius: 18px;
padding: 24px 22px;
display: flex;
align-items: center;
gap: 18px;
box-shadow: 0 4px 20px rgba(8,38,77,0.06);
transition: transform 0.26s ease, box-shadow 0.26s ease;
}
.about-profile-card:hover {
transform: translateY(-4px);
box-shadow: 0 12px 36px rgba(8,38,77,0.12);
}
.about-profile-icon {
width: 52px;
height: 52px;
border-radius: 14px;
flex-shrink: 0;
display: flex;
align-items: center;
justify-content: center;
color: white;
}
.about-profile-icon svg {
width: 24px;
height: 24px;
}
.about-profile-content {
display: flex;
flex-direction: column;
gap: 4px;
}
.about-profile-label {
font-size: 0.72rem;
font-weight: 800;
letter-spacing: 0.10em;
text-transform: uppercase;
color: #6b85aa;
}
.about-profile-value {
font-size: 1.05rem;
font-weight: 700;
color: #0d2a5e;
line-height: 1.3;
}
@media (max-width: 900px) {
.about-profile-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 520px) {
.about-profile-grid { grid-template-columns: 1fr; }
}
/* Map */
.about-map-wrap {
position: relative;
border-radius: 20px;
overflow: hidden;
box-shadow: 0 16px 48px rgba(8,38,77,0.14);
border: 1px solid rgba(86,129,216,0.12);
margin-top: 36px;
height: 420px;
}
.about-map-wrap iframe {
width: 100%;
height: 100%;
border: none;
display: block;
}
.about-map-badge {
position: absolute;
bottom: 20px;
left: 20px;
background: white;
border-radius: 50px;
padding: 10px 18px;
display: flex;
align-items: center;
gap: 8px;
font-size: 0.85rem;
font-weight: 700;
color: #0d2a5e;
box-shadow: 0 4px 20px rgba(8,38,77,0.18);
}
.about-map-badge svg {
width: 16px;
height: 16px;
color: #1565c0;
flex-shrink: 0;
}
@media (max-width: 600px) {
.about-map-wrap { height: 300px; }
}
/* =====================================================================
COMMUNITY INITIATIVES — MODERNIZED CARD DESIGN
===================================================================== */
/* Card shell */
.image-card {
border-radius: 22px !important;
overflow: hidden !important;
border: 1px solid rgba(86,129,216,0.10) !important;
box-shadow: 0 4px 24px rgba(8,38,77,0.07) !important;
transition: transform 0.28s cubic-bezier(0.34,1.2,0.64,1),
box-shadow 0.28s ease !important;
background: white !important;
}
.image-card:hover {
transform: translateY(-7px) !important;
box-shadow: 0 20px 52px rgba(8,38,77,0.15) !important;
}
/* Banner: taller + left-aligned layout */
.ict-banner,
.prog-banner {
height: 200px !important;
flex-direction: row !important;
align-items: flex-end !important;
justify-content: flex-start !important;
gap: 0 !important;
padding: 0 24px 22px !important;
}
/* Decorative large ring — bottom-right */
.ict-banner::after,
.prog-banner::after {
content: '';
position: absolute;
bottom: -56px;
right: -56px;
width: 200px;
height: 200px;
border-radius: 50%;
border: 28px solid rgba(255,255,255,0.07);
pointer-events: none;
}
/* Second smaller ring — top-right */
.ict-banner::before,
.prog-banner::before {
content: '' !important;
position: absolute !important;
top: -24px !important;
right: 32px !important;
left: auto !important;
width: 110px !important;
height: 110px !important;
border-radius: 50% !important;
background: rgba(255,255,255,0.06) !important;
border: none !important;
pointer-events: none;
}
/* Floating icon — circle, top-left area */
.ict-banner-icon {
position: absolute !important;
top: 22px !important;
left: 24px !important;
width: 62px !important;
height: 62px !important;
border-radius: 50% !important;
background: rgba(255,255,255,0.18) !important;
border: 1.5px solid rgba(255,255,255,0.32) !important;
box-shadow: 0 4px 20px rgba(0,0,0,0.18), 0 0 0 6px rgba(255,255,255,0.07) !important;
padding: 14px !important;
transition: transform 0.32s cubic-bezier(0.34,1.56,0.64,1),
box-shadow 0.32s ease !important;
}
.image-card:hover .ict-banner-icon {
transform: scale(1.10) translateY(-2px) !important;
box-shadow: 0 8px 28px rgba(0,0,0,0.22), 0 0 0 8px rgba(255,255,255,0.10) !important;
}
/* Label — sits at bottom-left beside the icon space */
.ict-banner-label {
text-align: left !important;
padding-left: 0 !important;
position: relative;
z-index: 1;
}
.ict-banner-label strong {
font-size: 0.80rem !important;
font-weight: 900 !important;
letter-spacing: 0.13em !important;
text-transform: uppercase !important;
opacity: 1 !important;
text-shadow: 0 1px 4px rgba(0,0,0,0.18);
}
.ict-banner-label span {
font-size: 0.73rem !important;
opacity: 0.82 !important;
margin-top: 3px !important;
letter-spacing: 0.03em !important;
display: block !important;
line-height: 1.4 !important;
text-shadow: 0 1px 3px rgba(0,0,0,0.15);
}
/* Card body */
.image-card > div:last-child {
padding: 18px 22px 22px !important;
}
.image-card > div:last-child h3 {
font-size: 1.0rem !important;
font-weight: 800 !important;
line-height: 1.35 !important;
color: #0d2a5e !important;
margin-top: 6px !important;
margin-bottom: 8px !important;
}
.image-card > div:last-child p {
font-size: 0.875rem !important;
line-height: 1.65 !important;
color: #4a5f7a !important;
}
/* =====================================================================
COMMUNITY INITIATIVES — DIGITAL ACCESS / CISCO WI-FI CARD
===================================================================== */
.prog-banner--violet {
background: linear-gradient(140deg, #3b0764 0%, #5b21b6 48%, #0284c7 100%);
}
.status.implemented {
background: #d1fae5;
color: #065f46;
}
/* =====================================================================
BARANGAY AT A GLANCE — HERO CARD
===================================================================== */
.hero-glance-card {
margin-top: 18px;
background: rgba(255,255,255,0.08);
border: 1px solid rgba(255,255,255,0.16);
border-radius: 14px;
backdrop-filter: blur(8px);
max-width: 100%;
overflow: hidden;
}
.hgc-title {
display: flex;
align-items: center;
gap: 8px;
padding: 10px 20px;
border-bottom: 1px solid rgba(255,255,255,0.10);
font-size: 0.72rem;
font-weight: 800;
letter-spacing: 0.13em;
text-transform: uppercase;
color: rgba(255,255,255,0.70);
}
.hgc-title svg { width: 14px; height: 14px; flex-shrink: 0; color: rgba(255,255,255,0.65); }
.hgc-info { margin-left: 4px; opacity: 0.45; }
.hgc-body {
display: flex;
align-items: stretch;
gap: 0;
}
.hgc-item {
flex: 1;
display: flex;
flex-direction: row;
align-items: center;
gap: 10px;
padding: 14px 18px;
color: rgba(255,255,255,0.90);
min-width: 0;
}
.hgc-item svg {
width: 22px;
height: 22px;
color: rgba(255,255,255,0.75);
flex-shrink: 0;
}
/* Barangay at a Glance — subtle icon color coding */
.hgc-icon-population { color: rgba(125, 211, 252, 0.88) !important; } /* soft cyan-blue */
.hgc-icon-assistance { color: rgba(94, 207, 208, 0.88) !important; } /* teal */
.hgc-icon-documents { color: rgba(186, 230, 253, 0.88) !important; } /* soft white-blue */
.hgc-icon-programs { color: rgba(110, 231, 183, 0.88) !important; } /* green-cyan */
.hgc-label {
font-size: 0.78rem;
font-weight: 600;
color: rgba(255,255,255,0.80);
line-height: 1.25;
white-space: nowrap;
}
.hgc-value {
font-size: 1.5rem;
font-weight: 800;
color: #fff;
line-height: 1.1;
}
.hgc-sub {
font-size: 0.75rem;
color: rgba(255,255,255,0.58);
line-height: 1.45;
}
.hgc-divider {
width: 1px;
background: rgba(255,255,255,0.12);
flex-shrink: 0;
align-self: stretch;
}
/* Tablet: full width, glance card wraps 2×2
Dividers sit at nth-child positions 2,4,6 so items are at 1,3,5,7 */
@media (max-width: 860px) {
.hero-glance-card { max-width: 100%; }
.hgc-body { flex-wrap: wrap; }
.hgc-divider { display: none; }
.hgc-item { flex: 0 0 50%; padding: 12px 14px; }
.hgc-item:nth-child(1),
.hgc-item:nth-child(3) { border-bottom: 1px solid rgba(255,255,255,0.10); }
.hgc-item:nth-child(1),
.hgc-item:nth-child(5) { border-right: 1px solid rgba(255,255,255,0.10); }
}
/* Mobile: 2-column compact grid */
@media (max-width: 480px) {
.hero-glance-card { margin-top: 12px; }
.hgc-title { padding: 8px 14px; font-size: 0.65rem; letter-spacing: 0.10em; }
.hgc-title svg { width: 12px; height: 12px; }
.hgc-body { flex-wrap: wrap; }
.hgc-divider { display: none; }
.hgc-item {
flex: 0 0 50%;
padding: 10px 12px;
gap: 8px;
border-right: none !important;
border-bottom: none !important;
}
.hgc-item svg { width: 18px; height: 18px; }
.hgc-label { font-size: 0.72rem; white-space: normal; }
/* 2×2 internal borders */
.hgc-item:nth-child(1) {
border-right: 1px solid rgba(255,255,255,0.12) !important;
border-bottom: 1px solid rgba(255,255,255,0.12) !important;
}
.hgc-item:nth-child(3) {
border-bottom: 1px solid rgba(255,255,255,0.12) !important;
}
.hgc-item:nth-child(5) {
border-right: 1px solid rgba(255,255,255,0.12) !important;
}
.hgc-item svg { width: 20px; height: 20px; margin-bottom: 1px; }
.hgc-label { font-size: 0.68rem; }
.hgc-value { font-size: 1.15rem; }
.hgc-sub { font-size: 0.65rem; line-height: 1.35; }
}
/* =====================================================================
ABOUT PAGE — RESPONSIVE FIXES
===================================================================== */
/* Mission/Vision cards: single column at ≤599px
(line 15902 forces 2-col at 480-599px — this wins because it's later + more specific) */
@media (max-width: 599px) {
body[data-page="about.html"] .card-grid.two {
grid-template-columns: 1fr !important;
gap: 16px !important;
}
}
/* Profile grid: 2-col on tablet, 1-col on mobile */
@media (max-width: 599px) {
body[data-page="about.html"] .about-profile-grid {
grid-template-columns: repeat(2, 1fr) !important;
gap: 14px !important;
}
}
@media (max-width: 420px) {
body[data-page="about.html"] .about-profile-grid {
grid-template-columns: 1fr !important;
}
}
/* History story section: reduce gap on mobile */
@media (max-width: 599px) {
body[data-page="about.html"] section.section-pad:has(.history-photo-grid) .split-layout {
gap: 20px !important;
}
}
/* Map: compact on small screens */
@media (max-width: 480px) {
body[data-page="about.html"] .about-map-wrap { height: 260px !important; }
}
/* Info cards: ensure proper sizing at all widths */
@media (max-width: 599px) {
body[data-page="about.html"] .info-card .icon {
width: 44px !important;
height: 44px !important;
font-size: 1.25rem !important;
}
}
/* =====================================================================
HERO CONTENT PADDING FIX — restore proper top spacing for index page
Many layered overrides throughout the file reduce padding-top to ~20px.
These rules win the cascade by appearing last + high specificity.
===================================================================== */
@media (min-width: 1181px) {
body[data-page="index.html"] .hero .hero-content {
padding-top: 72px !important;
padding-bottom: 80px !important;
}
}
@media (min-width: 901px) and (max-width: 1180px) {
body[data-page="index.html"] .hero .hero-content {
padding-top: 64px !important;
padding-bottom: 70px !important;
}
}
@media (min-width: 701px) and (max-width: 900px) {
body[data-page="index.html"] .hero .hero-content {
padding-top: 56px !important;
padding-bottom: 60px !important;
}
}
@media (max-width: 700px) {
body[data-page="index.html"] .hero .hero-content {
padding-top: 36px !important;
padding-bottom: 36px !important;
}
}
@media (max-width: 480px) {
body[data-page="index.html"] .hero .hero-content {
padding-top: 28px !important;
padding-bottom: 28px !important;
}
}
/* =====================================================================
HERO CARDS — ALIGNMENT + STAGGERED ANIMATIONS
Both .hero-quick-facts and .hero-glance-card share max-width: 100%
so they're constrained equally by .hero-content width.
===================================================================== */
/* Info bar: each fact slides up + fades in when bar becomes visible */
.hero-quick-facts.visible .hero-fact {
opacity: 0;
animation: factReveal 0.5s ease forwards;
}
.hero-quick-facts.visible .hero-fact:nth-child(1) { animation-delay: 0.05s; }
.hero-quick-facts.visible .hero-fact:nth-child(3) { animation-delay: 0.15s; }
.hero-quick-facts.visible .hero-fact:nth-child(5) { animation-delay: 0.25s; }
.hero-quick-facts.visible .hero-fact:nth-child(7) { animation-delay: 0.35s; }
.hero-quick-facts.visible .hero-fact:nth-child(9) { animation-delay: 0.45s; }
.hero-quick-facts.visible .hero-fact-divider {
opacity: 0;
animation: fadeIn 0.4s ease forwards;
}
.hero-quick-facts.visible .hero-fact-divider:nth-child(2) { animation-delay: 0.10s; }
.hero-quick-facts.visible .hero-fact-divider:nth-child(4) { animation-delay: 0.20s; }
.hero-quick-facts.visible .hero-fact-divider:nth-child(6) { animation-delay: 0.30s; }
.hero-quick-facts.visible .hero-fact-divider:nth-child(8) { animation-delay: 0.40s; }
/* ── Status bar icon + text color coding ──────────────────────────── */
/* Date / Time icons: soft light blue */
#hero-fact-date svg,
#hero-fact-time svg { color: rgba(186, 230, 253, 0.90); }
/* Weather icon colors keyed to weather group */
#hero-fact-weather.wx-clear svg { color: #FDB813; }
#hero-fact-weather.wx-cloudy svg { color: #94a3b8; }
#hero-fact-weather.wx-fog svg { color: #cbd5e1; }
#hero-fact-weather.wx-rain svg { color: #60a5fa; }
#hero-fact-weather.wx-snow svg { color: #e0f2fe; }
#hero-fact-weather.wx-storm svg { color: #818cf8; }
/* AQI status text colors (applied to inside) */
.hero-fact .aqi-good { color: #4ade80; }
.hero-fact .aqi-moderate { color: #fde047; }
.hero-fact .aqi-usg { color: #fb923c; }
.hero-fact .aqi-unhealthy{ color: #f87171; }
.hero-fact .aqi-very { color: #c084fc; }
.hero-fact .aqi-hazardous{ color: #e05252; }
/* AQI + Advisory icon colors (applied via class on the fact div) */
#hero-fact-aqi.aqi-good svg,
#hero-fact-advisory.aqi-good svg { color: #4ade80; }
#hero-fact-aqi.aqi-moderate svg,
#hero-fact-advisory.aqi-moderate svg { color: #fde047; }
#hero-fact-aqi.aqi-usg svg,
#hero-fact-advisory.aqi-usg svg { color: #fb923c; }
#hero-fact-aqi.aqi-unhealthy svg,
#hero-fact-advisory.aqi-unhealthy svg { color: #f87171; }
#hero-fact-aqi.aqi-very svg,
#hero-fact-advisory.aqi-very svg { color: #c084fc; }
#hero-fact-aqi.aqi-hazardous svg,
#hero-fact-advisory.aqi-hazardous svg { color: #e05252; }
/* Mobile: hide Advisory row (and its divider) */
@media (max-width: 700px) {
#hero-fact-advisory,
#hero-divider-advisory { display: none !important; }
}
@keyframes factReveal {
from { opacity: 0; transform: translateY(8px); }
to { opacity: 1; transform: translateY(0); }
}
@keyframes fadeIn {
from { opacity: 0; }
to { opacity: 1; }
}
/* Glance card: title bar slides down, each column rises up in sequence */
.hero-glance-card.visible .hgc-title {
opacity: 0;
animation: factReveal 0.45s ease 0.05s forwards;
}
.hero-glance-card.visible .hgc-item {
opacity: 0;
animation: hgcItemReveal 0.55s cubic-bezier(0.22,1,0.36,1) forwards;
}
.hero-glance-card.visible .hgc-item:nth-child(1) { animation-delay: 0.18s; }
.hero-glance-card.visible .hgc-item:nth-child(3) { animation-delay: 0.28s; }
.hero-glance-card.visible .hgc-item:nth-child(5) { animation-delay: 0.38s; }
.hero-glance-card.visible .hgc-item:nth-child(7) { animation-delay: 0.48s; }
.hero-glance-card.visible .hgc-divider {
opacity: 0;
animation: hgcDividerGrow 0.4s ease forwards;
}
.hero-glance-card.visible .hgc-divider:nth-child(2) { animation-delay: 0.22s; }
.hero-glance-card.visible .hgc-divider:nth-child(4) { animation-delay: 0.32s; }
.hero-glance-card.visible .hgc-divider:nth-child(6) { animation-delay: 0.42s; }
@keyframes hgcItemReveal {
from { opacity: 0; transform: translateY(14px); }
to { opacity: 1; transform: translateY(0); }
}
@keyframes hgcDividerGrow {
from { opacity: 0; transform: scaleY(0.3); }
to { opacity: 1; transform: scaleY(1); }
}
@media (prefers-reduced-motion: reduce) {
.hero-quick-facts.visible .hero-fact,
.hero-quick-facts.visible .hero-fact-divider,
.hero-glance-card.visible .hgc-title,
.hero-glance-card.visible .hgc-item,
.hero-glance-card.visible .hgc-divider {
animation: none !important;
opacity: 1 !important;
transform: none !important;
}
}
/* =====================================================================
ABOUT PAGE — COMPACT LAYOUT AT ALL DESKTOP SIZES
Goal: header (93px) + about-hero (~210px) + history (~380px) = ~683px
so Mission/Vision cards appear within a typical 780px effective viewport.
===================================================================== */
/* Photo heights — large desktop (1201px+) */
@media (min-width: 1201px) {
body[data-page="about.html"] .history-photo-grid img:first-child {
height: 178px !important;
}
body[data-page="about.html"] .history-photo-grid img:not(:first-child) {
height: 136px !important;
}
}
/* Photo heights — medium desktop (901–1200px) */
@media (min-width: 901px) and (max-width: 1200px) {
body[data-page="about.html"] .history-photo-grid img:first-child {
height: 162px !important;
}
body[data-page="about.html"] .history-photo-grid img:not(:first-child) {
height: 122px !important;
}
}
/* =====================================================================
SERVICES PAGE — MODERNIZED ACCORDION
Icons + chips in closed state, constrained width, clean hierarchy.
All rules scoped to body[data-page="services.html"].
===================================================================== */
/* Constrain accordion to readable width, centered
Use .container.accordion for higher specificity than .container alone */
body[data-page="services.html"] .container.accordion {
max-width: 800px !important;
width: min(800px, calc(100% - 40px)) !important;
margin-left: auto !important;
margin-right: auto !important;
}
/* Trigger layout: icon | info | + button */
body[data-page="services.html"] .accordion-trigger {
display: flex !important;
align-items: center !important;
gap: 16px !important;
padding: 18px 22px !important;
}
/* Service icon circle
Use .accordion-trigger .svc-icon for specificity (0,3,2) to beat
the existing .accordion-trigger span rule at (0,2,2) */
body[data-page="services.html"] .accordion-trigger .svc-icon {
display: flex !important;
align-items: center !important;
justify-content: center !important;
width: 48px !important;
height: 48px !important;
min-width: 48px !important;
border-radius: 16px !important;
font-size: 0 !important;
gap: 0 !important;
position: static !important;
line-height: 0 !important;
flex-shrink: 0 !important;
}
/* Remove the old pulsing dot — use .accordion-trigger context for specificity */
body[data-page="services.html"] .accordion-trigger .svc-icon::before,
body[data-page="services.html"] .accordion-trigger .svc-info::before,
body[data-page="services.html"] .accordion-trigger .svc-name::before,
body[data-page="services.html"] .accordion-trigger .svc-chips::before,
body[data-page="services.html"] .accordion-trigger .svc-chip::before {
display: none !important;
content: none !important;
width: 0 !important;
height: 0 !important;
}
/* Info block: name + chips stacked */
body[data-page="services.html"] .accordion-trigger .svc-info {
flex: 1 !important;
display: flex !important;
flex-direction: column !important;
gap: 5px !important;
align-items: flex-start !important;
min-width: 0 !important;
font-size: inherit !important;
position: static !important;
}
/* Service name */
body[data-page="services.html"] .svc-name {
font-size: 1.02rem !important;
font-weight: 700 !important;
color: #0a285d !important;
line-height: 1.25 !important;
display: block !important;
}
/* Chips row */
body[data-page="services.html"] .svc-chips {
display: flex !important;
gap: 6px !important;
flex-wrap: wrap !important;
align-items: center !important;
}
/* Base chip */
body[data-page="services.html"] .svc-chip {
display: inline-flex !important;
align-items: center !important;
padding: 2px 9px !important;
border-radius: 999px !important;
font-size: 0.68rem !important;
font-weight: 600 !important;
letter-spacing: 0.01em !important;
white-space: nowrap !important;
line-height: 1.6 !important;
}
/* Time chip — blue */
body[data-page="services.html"] .svc-chip-time {
background: rgba(47,102,255,0.08) !important;
color: #1d4ed8 !important;
border: 1px solid rgba(47,102,255,0.15) !important;
}
/* Free chip — green */
body[data-page="services.html"] .svc-chip-free {
background: rgba(22,163,74,0.08) !important;
color: #15803d !important;
border: 1px solid rgba(22,163,74,0.18) !important;
}
/* Paid chip — amber */
body[data-page="services.html"] .svc-chip-paid {
background: rgba(217,119,6,0.08) !important;
color: #b45309 !important;
border: 1px solid rgba(217,119,6,0.18) !important;
}
/* Emergency chip — red */
body[data-page="services.html"] .svc-chip-emergency {
background: rgba(220,38,38,0.08) !important;
color: #b91c1c !important;
border: 1px solid rgba(220,38,38,0.18) !important;
}
/* Mobile: compact icon, hide chips if space is tight */
@media (max-width: 480px) {
body[data-page="services.html"] .svc-icon {
width: 40px !important;
height: 40px !important;
min-width: 40px !important;
border-radius: 13px !important;
}
body[data-page="services.html"] .svc-icon svg {
width: 18px !important;
height: 18px !important;
}
body[data-page="services.html"] .svc-name {
font-size: 0.92rem !important;
}
body[data-page="services.html"] .svc-chip {
font-size: 0.62rem !important;
padding: 1px 7px !important;
}
}
/* Section padding — all desktop (901px+)
Overrides line 10190 which sets 46px/60px using a high-specificity
adjacent-sibling selector. Mirror that exact selector here so we win
by position (later in file = same specificity, later wins). */
@media (min-width: 901px) {
body[data-page="about.html"] section.section-pad:has(.history-photo-grid) {
padding-top: 36px !important;
padding-bottom: 36px !important;
}
body[data-page="about.html"] main > section.section-pad + section.section-pad,
body[data-page="about.html"] main > section.section-pad + section.soft-bg,
body[data-page="about.html"] main > section.soft-bg {
padding-top: 32px !important;
padding-bottom: 40px !important;
}
}
/* =====================================================================
HOMEPAGE HERO — MOBILE LAYOUT OVERHAUL (≤ 640px)
Goal: clean, organized flow — title → info bar → glance card →
emergency card. No overcrowding, no excessive min-height, no overlap.
All rules scoped to body[data-page="index.html"] for safety.
===================================================================== */
/* 1. Hero: remove the min-height clamp that forces 600-760px on mobile */
@media (max-width: 640px) {
body[data-page="index.html"] .hero {
min-height: 0 !important;
}
}
/* 2. H1: slightly tighter on very small screens (360px) */
@media (max-width: 380px) {
body[data-page="index.html"] .hero h1 {
font-size: 2.15rem !important;
line-height: 1.15 !important;
}
}
/* 3. Hero description: compact line-height and size */
@media (max-width: 640px) {
body[data-page="index.html"] .hero .hero-content > p {
font-size: 0.93rem !important;
line-height: 1.55 !important;
margin-top: 10px !important;
margin-bottom: 0 !important;
}
}
/* 4. Buttons: reduce gap and padding to save ~20px vertical space */
@media (max-width: 640px) {
body[data-page="index.html"] .hero .hero-actions {
gap: 8px !important;
margin-top: 16px !important;
}
body[data-page="index.html"] .hero .hero-actions .btn {
padding: 10px 16px !important;
min-height: 44px !important;
font-size: 0.9rem !important;
}
}
/* 5. Emergency card: properly centered, full-width, cleaner mobile layout */
@media (max-width: 640px) {
body[data-page="index.html"] .hero-card.hero-emergency-card,
body[data-page="index.html"] .hero-card.hero-emergency-card.emergency-card-alt {
position: relative !important;
inset: auto !important;
width: calc(100% - 28px) !important;
max-width: 100% !important;
margin: 14px auto 22px !important;
border-radius: 20px !important;
}
}
/* 6. Emergency main row: restore side-by-side on mobile (saves ~60px height) */
@media (max-width: 640px) {
body[data-page="index.html"] .emergency-main-row {
display: flex !important;
align-items: center !important;
justify-content: space-between !important;
gap: 10px !important;
}
body[data-page="index.html"] .emergency-siren-badge {
flex-shrink: 0 !important;
margin-left: auto !important;
}
}
/* 7. Emergency number grid: 3 columns on mobile (saves ~60px height) */
@media (max-width: 640px) {
body[data-page="index.html"] .hero-emergency-grid {
grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
gap: 6px !important;
}
body[data-page="index.html"] .hero-emergency-item {
padding: 8px 6px !important;
text-align: center !important;
}
}
/* 8. Emergency action strip: keep in row on mobile */
@media (max-width: 640px) {
body[data-page="index.html"] .emergency-action-strip {
flex-direction: row !important;
align-items: center !important;
flex-wrap: wrap !important;
gap: 8px !important;
}
}
/* CONTACT PAGE — SK FACEBOOK FEATURED CARD */
.contact-social-block {
display: flex !important;
align-items: center !important;
gap: 20px !important;
flex-wrap: wrap !important;
}
.contact-social-left {
display: flex;
flex-direction: column;
gap: 8px;
flex-shrink: 0;
}
.contact-social-label {
font-size: 0.68rem;
font-weight: 700;
letter-spacing: 0.07em;
text-transform: uppercase;
color: #6b7ea8;
}
.contact-social-featured {
flex: 1;
min-width: 180px;
}
.contact-social-page-card {
display: flex;
align-items: center;
gap: 12px;
padding: 12px 16px;
background: #f8faff;
border: 1px solid #e2e8f5;
border-radius: 14px;
text-decoration: none;
transition: background 0.18s, border-color 0.18s, box-shadow 0.18s;
cursor: pointer;
}
.contact-social-page-card:hover {
background: #eef3ff;
border-color: #bfcfef;
box-shadow: 0 2px 10px rgba(24,119,242,0.08);
}
.cspf-icon {
display: flex;
align-items: center;
justify-content: center;
flex-shrink: 0;
}
.cspf-info {
flex: 1;
display: flex;
flex-direction: column;
gap: 2px;
min-width: 0;
}
.cspf-name {
font-size: 0.88rem;
font-weight: 700;
color: #0a285d;
line-height: 1.2;
}
.cspf-sub {
font-size: 0.75rem;
color: #6b7ea8;
line-height: 1.2;
}
.cspf-arrow {
color: #9caed0;
display: flex;
align-items: center;
flex-shrink: 0;
}
/* HOMEPAGE — VALUES STRIP COMPACT (≥ 900px) */
@media (min-width: 900px) {
body[data-page="index.html"] .gradient-band.section-pad {
padding-top: 16px !important;
padding-bottom: 16px !important;
}
body[data-page="index.html"] .stats-grid div {
min-height: auto !important;
height: auto !important;
padding: 14px 20px !important;
border-radius: 12px !important;
display: flex !important;
flex-direction: column !important;
justify-content: center !important;
}
body[data-page="index.html"] .stats-grid strong {
font-size: 0.93rem !important;
margin-bottom: 3px !important;
display: block !important;
}
body[data-page="index.html"] .stats-grid span {
font-size: 0.79rem !important;
line-height: 1.35 !important;
display: block !important;
}
/* Spacing between gradient band and next section */
body[data-page="index.html"] .gradient-band + .section-pad {
padding-top: 48px !important;
margin-top: 0px !important;
}
}
/* HOMEPAGE — Spacing below feature strip on desktop */
@media (min-width: 1024px) {
body[data-page="index.html"] .gradient-band + .section-pad {
padding-top: 56px !important;
}
}
/* HOMEPAGE HERO — DESKTOP SCALE-DOWN (≥ 900px) */
@media (min-width: 900px) {
body[data-page="index.html"] .hero h1 {
font-size: clamp(2.4rem, 3.8vw, 3.6rem) !important;
letter-spacing: -0.045em !important;
line-height: 1.05 !important;
}
body[data-page="index.html"] .hero-card.hero-emergency-card,
body[data-page="index.html"] .hero-card.hero-emergency-card.emergency-card-alt {
width: min(310px, calc(100% - 40px)) !important;
right: 3% !important;
padding: 16px 18px 14px !important;
}
body[data-page="index.html"] .emergency-pill,
body[data-page="index.html"] .emergency-pill-live {
font-size: 0.68rem !important;
padding: 5px 9px !important;
gap: 6px !important;
}
body[data-page="index.html"] .emergency-dot {
width: 7px !important;
height: 7px !important;
}
body[data-page="index.html"] .emergency-status,
body[data-page="index.html"] .emergency-status-alert {
font-size: 0.68rem !important;
padding: 4px 9px !important;
}
body[data-page="index.html"] .hero-hotline-number {
font-size: 1.5rem !important;
}
body[data-page="index.html"] .hero-emergency-grid {
gap: 5px !important;
}
body[data-page="index.html"] .emergency-card-alt p {
font-size: 0.75rem !important;
line-height: 1.4 !important;
}
}
/* ═══════════════════════════════════════════════════
SITE-WIDE RESPONSIVE POLISH
Targeted fixes across all pages and breakpoints.
No content removed, no layout redesigned.
═══════════════════════════════════════════════════ */
/* ── Prevent any horizontal scroll ── */
html, body { overflow-x: hidden; max-width: 100%; }
/* ── Footer copyright: allow clean wrap on mobile ── */
.footer-bottom {
white-space: normal;
word-break: break-word;
line-height: 1.55;
padding: 16px 20px;
}
/* Prevent back-to-top button from overlapping copyright text on small screens */
@media (max-width: 640px) {
.site-footer .footer-bottom {
padding-right: 80px !important;
text-align: left !important;
}
}
/* ── About page: disable justify on mobile (avoids uneven spacing) ── */
@media (max-width: 640px) {
p[style*="text-align: justify"] { text-align: left !important; }
}
/* ── Quick info bar: tighten font at very small screens ── */
@media (max-width: 380px) {
.hero-fact { font-size: 0.63rem !important; }
.hero-fact svg { width: 12px !important; height: 12px !important; }
}
/* ── Officials page: 2-column card grid at mobile (less scrolling) ── */
@media (max-width: 640px) {
body[data-page="officials.html"] .officials-grid {
grid-template-columns: repeat(2, 1fr) !important;
gap: 14px !important;
}
body[data-page="officials.html"] .official-card img {
width: 90px !important;
height: 90px !important;
}
body[data-page="officials.html"] .official-card h3 {
font-size: 0.88rem !important;
}
body[data-page="officials.html"] .official-card span,
body[data-page="officials.html"] .official-card p {
font-size: 0.78rem !important;
}
}
/* ── Services page: keep trigger aligned when name wraps ── */
@media (max-width: 480px) {
body[data-page="services.html"] .accordion-trigger {
padding: 14px 16px !important;
gap: 12px !important;
}
body[data-page="services.html"] .svc-chips {
gap: 4px !important;
}
}
/* ── Hero at tablet (768–900px): prevent card overlap ── */
@media (min-width: 641px) and (max-width: 900px) {
body[data-page="index.html"] .hero-content {
padding-bottom: 160px !important;
}
body[data-page="index.html"] .hero-card.hero-emergency-card {
max-width: 420px !important;
margin-left: auto !important;
margin-right: auto !important;
}
}
/* ── Announcements & projects: cards full-width on mobile ── */
@media (max-width: 640px) {
.card-grid { grid-template-columns: 1fr !important; }
.image-card { border-radius: 20px !important; }
}
/* ── Citizens charter steps: prevent overflow on tiny screens ── */
@media (max-width: 480px) {
.step-card, [class*="step-"] {
padding: 14px 16px !important;
}
}
/* ── Contact social block: stack on very narrow ── */
@media (max-width: 420px) {
.contact-social-block {
flex-direction: column !important;
align-items: flex-start !important;
gap: 12px !important;
}
.contact-social-featured { width: 100% !important; min-width: 0 !important; }
.contact-social-page-card { width: 100% !important; }
}
/* ── Nav menu: ensure it never overflows viewport ── */
@media (max-width: 480px) {
.nav-menu {
left: 10px !important;
right: 10px !important;
padding: 12px !important;
}
}
/* ── Page hero: reduce height on small tablets ── */
@media (min-width: 641px) and (max-width: 900px) {
.page-hero { padding: 52px 0 44px !important; }
}
/* ── Glance card: ensure 2-column on tablet ── */
@media (min-width: 481px) and (max-width: 860px) {
.hgc-body { flex-wrap: wrap !important; }
.hgc-divider { display: none !important; }
.hgc-item { flex: 0 0 50% !important; }
}
/* ── Large screens (≥1440px): cap content width gracefully ── */
@media (min-width: 1440px) {
body[data-page="index.html"] .hero-card.hero-emergency-card,
body[data-page="index.html"] .hero-card.hero-emergency-card.emergency-card-alt {
right: max(3%, calc(50vw - 590px)) !important;
}
}
/* ═══════════════════════════════════════════════════
SERVICES PAGE — ACCORDION SECTION BACKGROUND
Soft official blue tint behind the accordion list.
Cards stay white/light. No dark treatment.
═══════════════════════════════════════════════════ */
.svc-accordion-section {
background:
radial-gradient(circle at 8% 15%, rgba(21,94,239,0.05) 0%, transparent 35%),
radial-gradient(circle at 92% 85%, rgba(22,182,135,0.05) 0%, transparent 35%),
linear-gradient(160deg, #eef5ff 0%, #f6fafe 45%, #edfaf5 100%) !important;
position: relative;
}
.svc-accordion-section .container.accordion {
position: relative;
z-index: 1;
}
/* Keep accordion items white/glassy — ensure no dark override */
body[data-page="services.html"] .accordion-item {
background: #fff !important;
border: 1px solid rgba(21,94,239,0.08) !important;
box-shadow: 0 2px 12px rgba(21,94,239,0.06), 0 1px 3px rgba(0,0,0,0.04) !important;
}
body[data-page="services.html"] .accordion-item:hover {
box-shadow: 0 6px 24px rgba(21,94,239,0.10), 0 2px 6px rgba(0,0,0,0.05) !important;
transform: translateY(-1px);
transition: box-shadow 0.2s ease, transform 0.2s ease;
}
/* ═══════════════════════════════════════════════════
COMMUNITY INITIATIVES — 3-COLUMN GRID & CARD FIX
Balanced 6-card layout, consistent banner heights.
═══════════════════════════════════════════════════ */
/* Shared proj-card rules — used on both index.html and projects.html */
.proj-card-grid {
grid-template-columns: repeat(3, 1fr) !important;
gap: 22px !important;
align-items: stretch !important;
}
.proj-card {
display: flex !important;
flex-direction: column !important;
overflow: hidden;
}
.proj-card-banner {
height: 150px !important;
min-height: 150px !important;
flex-shrink: 0 !important;
display: flex !important;
flex-direction: row !important;
align-items: center !important;
gap: 14px !important;
padding: 20px 22px !important;
box-sizing: border-box !important;
}
/* Image-based banners: full-bleed photo */
.proj-card-banner.proj-card-banner-img {
padding: 0 !important;
overflow: hidden !important;
}
.proj-card-banner.proj-card-banner-img img {
width: 100% !important;
height: 100% !important;
object-fit: cover !important;
object-position: center bottom !important;
display: block !important;
}
.proj-card-banner .ict-banner-icon {
width: 52px !important;
height: 52px !important;
min-width: 52px !important;
flex-shrink: 0 !important;
display: flex !important;
align-items: center !important;
justify-content: center !important;
}
.proj-card-banner .ict-banner-icon svg {
width: 44px !important;
height: 44px !important;
display: block !important;
}
.proj-card-body {
flex: 1 !important;
display: flex !important;
flex-direction: column !important;
padding: 20px 20px 22px !important;
}
.proj-card-body h3 {
margin-top: 8px !important;
margin-bottom: 10px !important;
font-size: 1rem !important;
line-height: 1.3 !important;
}
.proj-card-body p {
font-size: 0.875rem !important;
line-height: 1.6 !important;
margin: 0 !important;
}
/* Blue road banner */
.prog-banner--blue {
background: linear-gradient(135deg, #1565c0 0%, #1e88e5 60%, #42a5f5 100%);
}
/* Teal youth banner */
.prog-banner--teal {
background: linear-gradient(135deg, #00695c 0%, #00897b 60%, #26a69a 100%);
}
/* Status: Upcoming */
.status.upcoming {
background: rgba(255, 167, 38, 0.12);
color: #e65100;
border: 1px solid rgba(230, 81, 0, 0.22);
}
/* Status: Implemented */
.status.implemented {
background: rgba(21, 101, 216, 0.10);
color: #1565d8;
border: 1px solid rgba(21, 101, 216, 0.22);
}
/* Tablet: 2 columns — applies to all pages using proj-card-grid */
@media (max-width: 900px) {
.proj-card-grid {
grid-template-columns: repeat(2, 1fr) !important;
}
}
/* Mobile: 1 column — applies to all pages using proj-card-grid */
@media (max-width: 560px) {
.proj-card-grid {
grid-template-columns: 1fr !important;
gap: 20px !important;
}
.proj-card-banner {
height: 120px !important;
min-height: 120px !important;
}
}
/* ═══════════════════════════════════════════════════
HOMEPAGE HERO — SUBTLE ENTRANCE ANIMATIONS
Smooth, professional, no layout shift.
All animations respect prefers-reduced-motion.
═══════════════════════════════════════════════════ */
/* Keyframes */
@keyframes heroFadeUp {
from { opacity: 0; transform: translateY(14px); }
to { opacity: 1; transform: translateY(0); }
}
@keyframes heroFadeRight {
from { opacity: 0; transform: translateX(22px); }
to { opacity: 1; transform: translateX(0); }
}
@keyframes heroFadeIn {
from { opacity: 0; }
to { opacity: 1; }
}
@keyframes heroPulse {
0%, 100% { opacity: 1; transform: scale(1); }
50% { opacity: 0.82; transform: scale(1.06); }
}
@keyframes heroBgZoom {
from { transform: scale(1.04); }
to { transform: scale(1.0); }
}
/* Hero background subtle zoom */
body[data-page="index.html"] .hero-overlay {
animation: heroBgZoom 9s cubic-bezier(0.25, 0.46, 0.45, 0.94) both;
}
/* Hero content children — staggered fade-up */
body[data-page="index.html"] .hero-content .eyebrow {
animation: heroFadeUp 0.6s ease both;
animation-delay: 0.1s;
}
body[data-page="index.html"] .hero-content h1 {
animation: heroFadeUp 0.65s ease both;
animation-delay: 0.22s;
}
body[data-page="index.html"] .hero-content > p {
animation: heroFadeUp 0.65s ease both;
animation-delay: 0.35s;
}
body[data-page="index.html"] .hero-content .hero-actions {
animation: heroFadeUp 0.6s ease both;
animation-delay: 0.48s;
}
/* Quick info bar */
body[data-page="index.html"] .hero-quick-facts {
animation: heroFadeIn 0.7s ease both;
animation-delay: 0.6s;
}
/* Barangay at a Glance — card fade-up, items stagger */
body[data-page="index.html"] .hgc-item:nth-child(1) {
animation: heroFadeIn 0.5s ease both;
animation-delay: 0.85s;
}
body[data-page="index.html"] .hgc-item:nth-child(3) {
animation: heroFadeIn 0.5s ease both;
animation-delay: 1.0s;
}
body[data-page="index.html"] .hgc-item:nth-child(5) {
animation: heroFadeIn 0.5s ease both;
animation-delay: 1.15s;
}
body[data-page="index.html"] .hgc-item:nth-child(7) {
animation: heroFadeIn 0.5s ease both;
animation-delay: 1.3s;
}
/* Emergency card — slide from right on desktop */
@media (min-width: 900px) {
body[data-page="index.html"] .hero-card.hero-emergency-card:not(.visible) {
transform: translateX(20px) !important;
}
body[data-page="index.html"] .hero-card.hero-emergency-card {
transition: opacity 0.65s ease, transform 0.65s ease !important;
transition-delay: 0.25s !important;
}
}
/* SOS badge — slow professional pulse */
body[data-page="index.html"] .emergency-siren-badge {
animation: heroPulse 2.8s ease-in-out infinite;
animation-delay: 1.8s;
}
/* Hero buttons — hover lift on desktop */
@media (hover: hover) {
body[data-page="index.html"] .hero-actions .btn {
transition: transform 0.22s ease, box-shadow 0.22s ease,
background 0.22s ease, color 0.22s ease,
border-color 0.22s ease !important;
}
body[data-page="index.html"] .hero-actions .btn:hover {
transform: translateY(-2px) !important;
box-shadow: 0 8px 22px rgba(0, 0, 0, 0.2) !important;
}
}
/* Feature cards strip — hover lift on desktop */
@media (hover: hover) {
body[data-page="index.html"] .stats-grid div {
transition: transform 0.22s ease, box-shadow 0.22s ease !important;
}
body[data-page="index.html"] .stats-grid div:hover {
transform: translateY(-3px) !important;
box-shadow: 0 10px 28px rgba(21, 94, 239, 0.18) !important;
}
}
/* Reduced motion — disable all hero animations */
@media (prefers-reduced-motion: reduce) {
body[data-page="index.html"] .hero-overlay,
body[data-page="index.html"] .hero-content .eyebrow,
body[data-page="index.html"] .hero-content h1,
body[data-page="index.html"] .hero-content > p,
body[data-page="index.html"] .hero-content .hero-actions,
body[data-page="index.html"] .hero-quick-facts,
body[data-page="index.html"] .hgc-item,
body[data-page="index.html"] .hero-card.hero-emergency-card,
body[data-page="index.html"] .emergency-siren-badge {
animation: none !important;
transition: none !important;
opacity: 1 !important;
transform: none !important;
}
}
/* About Us — Mission/Vision: compact spacing, no viewport-fill stretch */
body[data-page="about.html"] main > section.soft-bg.section-pad:not(.page-hero):not(.hero) {
min-height: 0 !important;
display: block !important;
padding: 40px 0 44px !important;
}
body[data-page="about.html"] main > section.soft-bg.section-pad:not(.page-hero):not(.hero) > .container {
width: auto !important;
}
body[data-page="about.html"] .about-profile-section {
margin-top: 0 !important;
}
/* Emergency card — vertically center beside hero content on all desktop sizes. */
@media (min-width: 901px) {
body[data-page="index.html"] .hero-card.hero-emergency-card,
body[data-page="index.html"] .hero-card.hero-emergency-card.emergency-card-alt {
top: 50% !important;
bottom: auto !important;
transform: translateY(-50%) !important;
}
}
/* =================================================================
HOMEPAGE HERO — STAGGERED ENTRANCE + AMBIENT ANIMATIONS
On desktop: each element enters individually with timing offsets
instead of the bulk reveal-class fade. The reveal class on
.hero-content is disabled (opacity forced to 1) so the children
control their own entrance.
================================================================= */
@keyframes hHeroEyebrow {
from { opacity: 0; transform: translateY(-14px); }
to { opacity: 1; transform: none; }
}
@keyframes hHeroTitle {
from { opacity: 0; transform: translateY(48px) scale(0.93); }
to { opacity: 1; transform: none; }
}
@keyframes hHeroFadeUp {
from { opacity: 0; transform: translateY(28px); }
to { opacity: 1; transform: none; }
}
@keyframes hHeroBtnPop {
0% { opacity: 0; transform: scale(0.78) translateY(16px); }
65% { transform: scale(1.07) translateY(-4px); }
100% { opacity: 1; transform: none; }
}
@keyframes hCardFadeIn {
from { opacity: 0; }
to { opacity: 1; }
}
/* Float via margin-top: doesn't conflict with top:50%!important or transform:translateY(-50%)!important */
@keyframes hCardFloat {
0%, 100% { margin-top: 0px; }
50% { margin-top: -10px; }
}
@keyframes hDotBlink {
0%, 100% { opacity: 1; transform: scale(1); }
50% { opacity: 0.35; transform: scale(0.8); }
}
@keyframes hSosPulse {
0%, 100% { transform: scale(1); }
50% { transform: scale(1.12); }
}
@keyframes hHotlineShimmer {
0% { background-position: 200% center; }
100% { background-position: -200% center; }
}
@media (min-width: 901px) {
/* Disable bulk-reveal on the hero-content container so children animate */
body[data-page="index.html"] .hero-content {
opacity: 1 !important;
transform: none !important;
transition: none !important;
}
/* Eyebrow badge — drops in from slightly above */
body[data-page="index.html"] .hero-content .eyebrow {
animation: hHeroEyebrow 0.55s cubic-bezier(0.22, 1, 0.36, 1) 0.08s both;
}
/* H1 — large upward rise with subtle scale for impact */
body[data-page="index.html"] .hero-content h1 {
animation: hHeroTitle 0.9s cubic-bezier(0.22, 1, 0.36, 1) 0.22s both;
}
/* Description paragraph */
body[data-page="index.html"] .hero-content > p {
animation: hHeroFadeUp 0.7s ease 0.44s both;
}
/* Buttons — each pops in with spring, staggered 120ms apart */
body[data-page="index.html"] .hero-actions a:nth-child(1) {
animation: hHeroBtnPop 0.6s cubic-bezier(0.34, 1.56, 0.64, 1) 0.6s both;
}
body[data-page="index.html"] .hero-actions a:nth-child(2) {
animation: hHeroBtnPop 0.6s cubic-bezier(0.34, 1.56, 0.64, 1) 0.72s both;
}
body[data-page="index.html"] .hero-actions a:nth-child(3) {
animation: hHeroBtnPop 0.6s cubic-bezier(0.34, 1.56, 0.64, 1) 0.84s both;
}
/* Info bar and glance card */
body[data-page="index.html"] .hero-quick-facts {
animation: hHeroFadeUp 0.65s ease 0.98s both;
transition: none !important;
}
body[data-page="index.html"] .hero-glance-card {
animation: hHeroFadeUp 0.65s ease 1.14s both;
transition: none !important;
}
/* Emergency card — fades in (centered position held by !important rules above),
then gently bobs via margin-top which doesn't conflict with top/transform.
!important needed to beat .reveal { animation: safeFadeUp !important } */
body[data-page="index.html"] .hero-card.hero-emergency-card {
animation: hCardFadeIn 0.8s ease 0.3s both,
hCardFloat 5s ease-in-out 1.4s infinite !important;
transition: none !important;
}
}
/* Ambient: live indicator dot pulses */
body[data-page="index.html"] .emergency-dot {
animation: hDotBlink 1.5s ease-in-out infinite !important;
}
/* Ambient: SOS text bounces */
body[data-page="index.html"] .emergency-siren-badge > i {
animation: hSosPulse 2.2s ease-in-out infinite;
}
/* Ambient: hotline number sweeps a light shimmer across */
body[data-page="index.html"] .hero-hotline-number {
background: linear-gradient(
90deg,
#1d4ed8 0%,
#1d4ed8 30%,
#93c5fd 50%,
#1d4ed8 70%,
#1d4ed8 100%
);
background-size: 250% auto;
-webkit-background-clip: text;
background-clip: text;
-webkit-text-fill-color: transparent;
animation: hHotlineShimmer 4s linear 2.5s infinite;
}
/* Fix: On the homepage, the selector a[href*="announcements"] inadvertently
catches the Announcements nav-link, overriding justify-content to center
and min-height to 38px. This restores it to match all other nav buttons. */
@media (max-width: 900px) {
body[data-page="index.html"] .nav-menu .nav-link[href*="announcements"] {
justify-content: flex-start !important;
}
}
@media (max-width: 480px) {
body[data-page="index.html"] .nav-menu .nav-link[href*="announcements"] {
min-height: 34px !important;
}
}
/* =====================================================================
CONTACT PAGE — MOBILE SPACING & ALIGNMENT CLEANUP
Scoped entirely to body[data-page="contact.html"].
Desktop layout (≥ 601px) is untouched.
Targets: hero height, card header padding, info stack spacing,
icon sizing, text wrap, and social block layout.
===================================================================== */
@media (max-width: 600px) {
/* 1. Hero — slightly tighter so card reaches the screen sooner */
body[data-page="contact.html"] .page-hero {
padding: 42px 0 34px !important;
}
/* 2. Blue gradient card header — reduce generous 30px padding on mobile */
body[data-page="contact.html"] .contact-card-modern .contact-card-header {
padding: 22px 20px 20px !important;
}
/* 3. Info stack wrapper — remove excess margin-top and reduce side padding
so content has more room on narrow screens */
body[data-page="contact.html"] .contact-card-modern .contact-info-stack {
padding: 16px 14px 18px !important;
gap: 10px !important;
margin-top: 0 !important;
}
/* 4. Each info row — smaller icon column, tighter padding, center-align icon */
body[data-page="contact.html"] .contact-card-modern .info-stack-item {
grid-template-columns: 42px 1fr !important;
gap: 12px !important;
padding: 11px 12px !important;
align-items: center !important;
}
/* 5. Remove the extra top-border spacing between items — gap handles it */
body[data-page="contact.html"] .contact-card-modern .info-stack-item + .info-stack-item {
padding-top: 0 !important;
border-top: none !important;
}
/* 6. Icon — reduce from 60px to 42px */
body[data-page="contact.html"] .contact-card-modern .info-stack-icon {
width: 42px !important;
height: 42px !important;
border-radius: 11px !important;
font-size: 18px !important;
}
/* 7. Icon SVG */
body[data-page="contact.html"] .contact-card-modern .info-stack-icon svg {
width: 17px !important;
height: 17px !important;
}
/* 8. Label (PHONE / EMAIL / etc.) */
body[data-page="contact.html"] .contact-card-modern .info-stack-title {
font-size: 0.63rem !important;
margin-bottom: 3px !important;
letter-spacing: 0.11em !important;
}
/* 9. Value text — slightly smaller, wraps cleanly without overflow */
body[data-page="contact.html"] .contact-card-modern .info-stack-content p {
font-size: 0.88rem !important;
line-height: 1.5 !important;
word-break: break-word !important;
overflow-wrap: break-word !important;
}
/* 10. Social block — tighter top spacing, always stacked on mobile */
body[data-page="contact.html"] .contact-card-modern .contact-social-block {
margin-top: 14px !important;
padding-top: 14px !important;
gap: 12px !important;
flex-direction: column !important;
align-items: flex-start !important;
}
body[data-page="contact.html"] .contact-social-featured {
width: 100% !important;
min-width: 0 !important;
}
/* 11. Social icon buttons — slightly smaller on mobile */
body[data-page="contact.html"] .contact-card-modern .contact-social-icon {
width: 38px !important;
height: 38px !important;
border-radius: 10px !important;
}
/* 12. SK Facebook Page card — ensure it fills width and text doesn't clip */
body[data-page="contact.html"] .contact-social-featured {
width: 100% !important;
min-width: 0 !important;
}
body[data-page="contact.html"] .contact-social-page-card {
width: 100% !important;
padding: 10px 14px !important;
box-sizing: border-box !important;
}
}
/* Extra-tight for 360–380px screens */
@media (max-width: 380px) {
body[data-page="contact.html"] .page-hero {
padding: 36px 0 28px !important;
}
body[data-page="contact.html"] .contact-card-modern .contact-card-header {
padding: 18px 16px 16px !important;
}
body[data-page="contact.html"] .contact-card-modern .contact-info-stack {
padding: 14px 12px 16px !important;
}
body[data-page="contact.html"] .contact-card-modern .info-stack-item {
padding: 10px 10px !important;
grid-template-columns: 38px 1fr !important;
gap: 10px !important;
}
body[data-page="contact.html"] .contact-card-modern .info-stack-icon {
width: 38px !important;
height: 38px !important;
border-radius: 10px !important;
}
/* Email address: force break on very narrow screens to prevent overflow */
body[data-page="contact.html"] .contact-card-modern .info-stack-content p {
font-size: 0.83rem !important;
word-break: break-all !important;
}
}
/* =====================================================================
OFFICIALS PAGE — FEATURED PUNONG BARANGAY + COUNCIL GRID
Scoped to body[data-page="officials.html"]. No other pages affected.
===================================================================== */
/* ── Section vertical spacing ───────────────────────────────────── */
body[data-page="officials.html"] .officials-section {
padding-bottom: 80px !important;
}
/* ── Featured Punong Barangay card ──────────────────────────────── */
body[data-page="officials.html"] .officials-feature-wrap {
display: flex;
justify-content: center;
margin-bottom: 36px;
}
/* ── Featured Punong Barangay card ──────────────────────────────── */
body[data-page="officials.html"] .officials-feature-wrap {
display: flex;
justify-content: center;
margin-bottom: 36px;
}
/* Horizontal layout: photo left, details right */
body[data-page="officials.html"] .official-featured {
background: #fff;
border: 1px solid rgba(21, 101, 216, .12);
border-radius: 18px;
box-shadow: 0 10px 32px rgba(8, 38, 77, .10);
padding: 20px 28px;
max-width: 520px;
width: fit-content;
position: relative;
overflow: hidden;
display: flex;
align-items: center;
gap: 18px;
text-align: left;
}
/* Blue gradient top accent bar */
body[data-page="officials.html"] .official-featured::before {
content: '';
position: absolute;
inset: 0 0 auto 0;
height: 4px;
background: linear-gradient(90deg, #0b3880 0%, #1565c0 55%, #0097b2 100%);
}
/* Subtle decorative circle — right side */
body[data-page="officials.html"] .official-featured::after {
content: '';
position: absolute;
right: -50px;
top: -50px;
width: 180px;
height: 180px;
border-radius: 50%;
background: radial-gradient(circle, rgba(21,101,216,.06), transparent 70%);
pointer-events: none;
}
body[data-page="officials.html"] .official-featured .ofc-photo {
flex-shrink: 0;
margin-bottom: 0;
}
body[data-page="officials.html"] .official-featured .ofc-photo img {
width: 120px;
height: 120px;
border-radius: 50%;
object-fit: cover;
border: 4px solid #ddeeff;
box-shadow: 0 6px 20px rgba(13, 71, 161, .15);
display: block;
transition: transform 0.3s ease;
}
/* Right-side text container */
body[data-page="officials.html"] .ofc-details {
flex: 1;
min-width: 0;
}
body[data-page="officials.html"] .ofc-badge {
display: inline-flex;
align-items: center;
padding: 4px 12px;
border-radius: 999px;
background: linear-gradient(90deg, rgba(21,101,216,.11), rgba(0,151,178,.08));
border: 1px solid rgba(21,101,216,.15);
color: #1565c0;
font-size: .70rem;
font-weight: 800;
letter-spacing: .12em;
text-transform: uppercase;
margin-bottom: 8px;
}
body[data-page="officials.html"] .ofc-name {
font-size: 1.25rem;
font-weight: 800;
color: #0d2d63;
letter-spacing: -.03em;
line-height: 1.2;
margin: 0 0 8px;
}
/* Subtle divider under the name */
body[data-page="officials.html"] .ofc-divider {
width: 36px;
height: 2px;
background: linear-gradient(90deg, #1565c0, #0097b2);
border-radius: 2px;
margin-bottom: 8px;
}
body[data-page="officials.html"] .ofc-role {
display: inline-flex;
align-items: flex-start;
gap: 6px;
color: #607595;
font-size: .88rem;
margin: 0;
line-height: 1.6;
}
/* People icon — pinned to top-left of multi-line description */
body[data-page="officials.html"] .ofc-role::before {
content: '';
display: inline-block;
width: 14px;
height: 14px;
flex-shrink: 0;
margin-top: 2px;
background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23607595' d='M16 11c1.66 0 2.99-1.34 2.99-3S17.66 5 16 5c-1.66 0-3 1.34-3 3s1.34 3 3 3zm-8 0c1.66 0 2.99-1.34 2.99-3S9.66 5 8 5C6.34 5 5 6.34 5 8s1.34 3 3 3zm0 2c-2.33 0-7 1.17-7 3.5V19h14v-2.5c0-2.33-4.67-3.5-7-3.5zm8 0c-.29 0-.62.02-.97.05 1.16.84 1.97 1.97 1.97 3.45V19h6v-2.5c0-2.33-4.67-3.5-7-3.5z'/%3E%3C/svg%3E") center/contain no-repeat;
opacity: .7;
}
/* ── Section divider before council grid ────────────────────────── */
body[data-page="officials.html"] .officials-divider {
display: flex;
align-items: center;
gap: 16px;
margin-bottom: 10px;
color: #7a94bc;
font-size: .73rem;
font-weight: 700;
text-transform: uppercase;
letter-spacing: .12em;
}
body[data-page="officials.html"] .officials-divider::before,
body[data-page="officials.html"] .officials-divider::after {
content: '';
flex: 1;
height: 1px;
background: rgba(86, 129, 216, .18);
}
/* ── Council grid — 5 columns desktop ──────────────────────────── */
body[data-page="officials.html"] .officials-council-grid {
display: grid;
grid-template-columns: repeat(5, 1fr);
gap: 18px;
max-width: 1220px;
margin: 0 auto;
}
/* 5 columns only on 1200px+ */
@media (min-width: 1200px) {
body[data-page="officials.html"] .officials-section .officials-council-grid {
grid-template-columns: repeat(5, 1fr) !important;
}
}
/* Compact card sizing for the council grid */
body[data-page="officials.html"] .officials-council-grid .official-card {
padding: 20px 14px 18px !important;
border-radius: 16px !important;
text-align: center;
min-height: auto !important;
}
body[data-page="officials.html"] .officials-council-grid .official-card img {
width: 90px !important;
height: 90px !important;
border-radius: 50% !important;
object-fit: cover !important;
border: 4px solid #ddeeff !important;
box-shadow: 0 8px 20px rgba(13, 71, 161, .13) !important;
display: block !important;
margin: 0 auto 10px !important;
}
body[data-page="officials.html"] .officials-council-grid .official-card h3 {
font-size: .94rem !important;
font-weight: 700 !important;
color: #0d2d63 !important;
letter-spacing: -.015em !important;
margin-bottom: 4px !important;
line-height: 1.2 !important;
}
body[data-page="officials.html"] .officials-council-grid .official-card span {
font-size: .72rem !important;
font-weight: 800 !important;
color: #1565c0 !important;
display: block !important;
margin-bottom: 4px !important;
text-transform: uppercase !important;
letter-spacing: .07em !important;
}
body[data-page="officials.html"] .officials-council-grid .official-card p {
font-size: .80rem !important;
color: #607595 !important;
margin: 0 !important;
line-height: 1.4 !important;
}
/* ── Responsive breakpoints ─────────────────────────────────────── */
/* 900px–1199px: 3 columns, featured card stacked */
@media (max-width: 1199px) {
body[data-page="officials.html"] .officials-section .officials-council-grid {
grid-template-columns: repeat(3, 1fr) !important;
gap: 16px !important;
max-width: 860px !important;
}
}
/* 768px–899px: 3 columns, featured stacked */
@media (max-width: 899px) {
body[data-page="officials.html"] .officials-section .officials-council-grid {
grid-template-columns: repeat(3, 1fr) !important;
gap: 14px !important;
max-width: 680px !important;
}
}
/* Below 768px: stack featured card vertically, 2-column council grid */
@media (max-width: 767px) {
body[data-page="officials.html"] .officials-feature-wrap {
margin-bottom: 28px;
}
body[data-page="officials.html"] .official-featured {
flex-direction: column;
align-items: center;
text-align: center;
padding: 22px 20px 20px;
gap: 14px;
width: 100%;
max-width: 420px;
}
body[data-page="officials.html"] .official-featured .ofc-photo img {
width: 110px;
height: 110px;
}
body[data-page="officials.html"] .ofc-divider {
margin: 8px auto;
}
body[data-page="officials.html"] .ofc-role {
justify-content: center;
}
body[data-page="officials.html"] .ofc-name {
font-size: 1.15rem;
}
body[data-page="officials.html"] .officials-section .officials-council-grid {
grid-template-columns: repeat(2, 1fr) !important;
gap: 12px !important;
max-width: 100% !important;
}
}
/* Below 480px: tighten further */
@media (max-width: 480px) {
body[data-page="officials.html"] .official-featured {
padding: 18px 16px 16px;
gap: 12px;
max-width: 100%;
}
body[data-page="officials.html"] .official-featured .ofc-photo img {
width: 96px;
height: 96px;
}
body[data-page="officials.html"] .ofc-name {
font-size: 1.05rem;
}
body[data-page="officials.html"] .ofc-quote {
font-size: .84rem;
}
body[data-page="officials.html"] .ofc-feature-item span {
display: none;
}
body[data-page="officials.html"] .ofc-watermark {
display: none;
}
body[data-page="officials.html"] .officials-council-grid .official-card img {
width: 64px !important;
height: 64px !important;
}
body[data-page="officials.html"] .officials-council-grid .official-card {
padding: 14px 10px 12px !important;
}
}
/* =====================================================================
OFFICIALS PAGE — SUBTLE ENHANCEMENTS
Entrance animations · Hover lift · Badge icon · Divider icon
Reduced-motion safe. Desktop hover only.
===================================================================== */
/* ── Entrance animation keyframes ───────────────────────────────── */
@keyframes ofcFadeUp {
from { opacity: 0; transform: translateY(22px); }
to { opacity: 1; transform: translateY(0); }
}
/* Featured card entrance — !important to beat .reveal { animation: safeFadeUp !important } */
body[data-page="officials.html"] .official-featured {
animation: ofcFadeUp 0.65s cubic-bezier(.22,.8,.36,1) 0.1s both !important;
}
/* Council cards entrance — staggered via nth-child */
body[data-page="officials.html"] .officials-council-grid .official-card {
animation: ofcFadeUp 0.55s cubic-bezier(.22,.8,.36,1) both !important;
}
body[data-page="officials.html"] .officials-council-grid .official-card:nth-child(1) { animation-delay: 0.30s !important; }
body[data-page="officials.html"] .officials-council-grid .official-card:nth-child(2) { animation-delay: 0.38s !important; }
body[data-page="officials.html"] .officials-council-grid .official-card:nth-child(3) { animation-delay: 0.46s !important; }
body[data-page="officials.html"] .officials-council-grid .official-card:nth-child(4) { animation-delay: 0.54s !important; }
body[data-page="officials.html"] .officials-council-grid .official-card:nth-child(5) { animation-delay: 0.62s !important; }
body[data-page="officials.html"] .officials-council-grid .official-card:nth-child(6) { animation-delay: 0.70s !important; }
body[data-page="officials.html"] .officials-council-grid .official-card:nth-child(7) { animation-delay: 0.78s !important; }
body[data-page="officials.html"] .officials-council-grid .official-card:nth-child(8) { animation-delay: 0.86s !important; }
body[data-page="officials.html"] .officials-council-grid .official-card:nth-child(9) { animation-delay: 0.94s !important; }
body[data-page="officials.html"] .officials-council-grid .official-card:nth-child(10) { animation-delay: 1.02s !important; }
/* ── Desktop-only hover: featured card + council cards ───────────── */
@media (hover: hover) and (min-width: 769px) {
/* Featured card hover lift */
body[data-page="officials.html"] .official-featured {
transition: transform 0.25s ease, box-shadow 0.25s ease;
will-change: transform;
}
body[data-page="officials.html"] .official-featured:hover {
transform: translateY(-4px) !important;
box-shadow: 0 20px 50px rgba(8, 38, 77, .15) !important;
}
/* Photo zoom on featured card hover */
body[data-page="officials.html"] .official-featured:hover .ofc-photo img {
transform: scale(1.06);
}
/* Council card hover lift */
body[data-page="officials.html"] .officials-council-grid .official-card {
transition: transform 0.22s ease, box-shadow 0.22s ease;
will-change: transform;
}
body[data-page="officials.html"] .officials-council-grid .official-card:hover {
transform: translateY(-5px) !important;
box-shadow: 0 18px 40px rgba(8, 38, 77, .18) !important;
}
/* Photo zoom on council card hover */
body[data-page="officials.html"] .officials-council-grid .official-card img {
transition: transform 0.3s ease !important;
}
body[data-page="officials.html"] .officials-council-grid .official-card:hover img {
transform: scale(1.08) !important;
}
}
/* ── Subtle badge glow on page load ─────────────────────────────── */
@keyframes ofcBadgeGlow {
0%, 100% { box-shadow: 0 0 0 0 rgba(21, 101, 216, 0); }
50% { box-shadow: 0 0 8px 2px rgba(21, 101, 216, .18); }
}
body[data-page="officials.html"] .ofc-badge {
animation: ofcBadgeGlow 2.8s ease-in-out 1.2s 2;
}
/* ── Star/seal icon in Punong Barangay badge ─────────────────────── */
body[data-page="officials.html"] .ofc-badge::before {
content: '';
display: inline-block;
width: 13px;
height: 13px;
margin-right: 6px;
flex-shrink: 0;
background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%231565c0' d='M12 2l2.6 5.26 5.8.84-4.2 4.09.99 5.77L12 15.27l-5.19 2.69.99-5.77L3.6 8.1l5.8-.84Z'/%3E%3C/svg%3E") center/contain no-repeat;
}
/* ── People icon in divider label ────────────────────────────────── */
body[data-page="officials.html"] .officials-divider span::before {
content: '';
display: inline-block;
width: 14px;
height: 14px;
margin-right: 7px;
vertical-align: middle;
position: relative;
top: -1px;
flex-shrink: 0;
background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%237a94bc' d='M16 11c1.66 0 2.99-1.34 2.99-3S17.66 5 16 5c-1.66 0-3 1.34-3 3s1.34 3 3 3zm-8 0c1.66 0 2.99-1.34 2.99-3S9.66 5 8 5C6.34 5 5 6.34 5 8s1.34 3 3 3zm0 2c-2.33 0-7 1.17-7 3.5V19h14v-2.5c0-2.33-4.67-3.5-7-3.5zm8 0c-.29 0-.62.02-.97.05 1.16.84 1.97 1.97 1.97 3.45V19h6v-2.5c0-2.33-4.67-3.5-7-3.5z'/%3E%3C/svg%3E") center/contain no-repeat;
}
/* ── Respect reduced motion ──────────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
body[data-page="officials.html"] .official-featured,
body[data-page="officials.html"] .ofc-badge,
body[data-page="officials.html"] .officials-council-grid .official-card {
animation: none !important;
opacity: 1 !important;
transform: none !important;
transition: none !important;
}
body[data-page="officials.html"] .official-featured:hover,
body[data-page="officials.html"] .officials-council-grid .official-card:hover {
transform: none !important;
box-shadow: inherit !important;
}
body[data-page="officials.html"] .official-featured:hover .ofc-photo img,
body[data-page="officials.html"] .officials-council-grid .official-card:hover img {
transform: none !important;
}
}
/* ── Officials hero container: align with navbar (901–1420px only) ── */
/* At this range navbar uses max-width:1204px + 24px padding. */
/* Page-hero container uses 1180px + 0px — causing 12px left offset. */
/* Fix: match the hero container to the navbar's width+padding so the */
/* badge/title left edge aligns with the logo above it. */
@media (min-width: 901px) and (max-width: 1420px) {
body[data-page="officials.html"] .page-hero .container {
max-width: 1204px !important;
width: min(100% - 40px, 1204px) !important;
padding-left: 24px !important;
padding-right: 24px !important;
}
}
/* ── MacBook Air/Pro 13" · 1200px–1440px → 4 columns ───────────── */
/* Covers: 1280px (Air 13"), 1366px generic laptop, 1440px (some 13") */
@media (min-width: 1200px) and (max-width: 1440px) {
/* padding-top handled by .page-hero + .section-pad standard rule */
body[data-page="officials.html"] .officials-feature-wrap { margin-bottom: 36px !important; }
body[data-page="officials.html"] .official-featured {
padding: 12px 20px !important;
gap: 14px !important;
}
body[data-page="officials.html"] .official-featured .ofc-photo img {
width: 100px !important;
height: 100px !important;
}
body[data-page="officials.html"] .officials-divider { margin-bottom: 10px !important; }
/* 4-column grid */
body[data-page="officials.html"] .officials-section .officials-council-grid {
grid-template-columns: repeat(4, 1fr) !important;
gap: 20px !important;
max-width: 960px !important;
}
body[data-page="officials.html"] .officials-council-grid .official-card {
padding: 18px 14px 16px !important;
min-height: auto !important;
}
body[data-page="officials.html"] .officials-council-grid .official-card img {
width: 80px !important;
height: 80px !important;
margin-bottom: 8px !important;
}
}
/* ── MacBook Pro 14" · 1441px–1599px → 5 columns ───────────────── */
/* Covers: 1512px (MBP 14") CSS viewport */
@media (min-width: 1441px) and (max-width: 1599px) {
/* padding-top handled by .page-hero + .section-pad standard rule */
body[data-page="officials.html"] .officials-feature-wrap { margin-bottom: 36px !important; }
body[data-page="officials.html"] .official-featured {
padding: 14px 22px !important;
gap: 16px !important;
}
body[data-page="officials.html"] .official-featured .ofc-photo img {
width: 108px !important;
height: 108px !important;
}
body[data-page="officials.html"] .officials-divider { margin-bottom: 10px !important; }
/* 5-column grid with comfortable spacing */
body[data-page="officials.html"] .officials-section .officials-council-grid {
grid-template-columns: repeat(5, 1fr) !important;
gap: 20px !important;
max-width: 1200px !important;
}
body[data-page="officials.html"] .officials-council-grid .official-card {
padding: 20px 14px 18px !important;
min-height: auto !important;
}
body[data-page="officials.html"] .officials-council-grid .official-card img {
width: 86px !important;
height: 86px !important;
margin-bottom: 9px !important;
}
}
/* ── Large screen (1600px+) ──────────────────────────────────────── */
@media (min-width: 1600px) {
body[data-page="officials.html"] .officials-section {
padding-bottom: 180px !important;
}
body[data-page="officials.html"] .official-featured .ofc-photo img {
width: 124px !important;
height: 124px !important;
}
body[data-page="officials.html"] .officials-council-grid {
max-width: 1320px !important;
gap: 26px !important;
grid-template-columns: repeat(5, 1fr) !important;
}
body[data-page="officials.html"] .officials-council-grid .official-card {
padding: 22px 16px 18px !important;
}
body[data-page="officials.html"] .officials-council-grid .official-card img {
width: 98px !important;
height: 98px !important;
}
}
/* ── Very large screen (1920px+) ─────────────────────────────────── */
@media (min-width: 1920px) {
body[data-page="officials.html"] .officials-section {
padding-bottom: 220px !important;
}
body[data-page="officials.html"] .official-featured .ofc-photo img {
width: 136px !important;
height: 136px !important;
}
body[data-page="officials.html"] .officials-council-grid {
max-width: 1460px !important;
gap: 26px !important;
grid-template-columns: repeat(5, 1fr) !important;
}
body[data-page="officials.html"] .officials-council-grid .official-card {
padding: 24px 18px 20px !important;
}
body[data-page="officials.html"] .officials-council-grid .official-card img {
width: 106px !important;
height: 106px !important;
}
}
/* =====================================================================
HOME PAGE — OFFICIAL PREVIEW CARD (OPC)
Simple clean card: photo + identity + faint watermark.
Scoped to body[data-page="index.html"] to avoid bleed.
===================================================================== */
/* ── Official-strip: cap width and use balanced columns ─────────── */
body[data-page="index.html"] .official-strip .container {
max-width: 1180px !important;
}
body[data-page="index.html"] .official-strip .split-layout {
grid-template-columns: 0.8fr 1.4fr !important;
gap: 32px !important;
align-items: center !important;
}
/* ── Card shell ─────────────────────────────────────────────────── */
body[data-page="index.html"] .opc-card {
display: flex;
align-items: center;
gap: 0;
background: linear-gradient(135deg, #f0f5ff 0%, #e8effc 100%);
border-radius: 18px;
border: 1px solid rgba(37, 99, 255, .10);
box-shadow: 0 8px 32px rgba(6, 31, 63, .08);
padding: 24px 28px;
position: relative;
overflow: hidden;
width: 100%;
max-width: 860px;
}
/* ── Photo ──────────────────────────────────────────────────────── */
body[data-page="index.html"] .opc-photo {
flex-shrink: 0;
margin-right: 28px;
}
body[data-page="index.html"] .opc-photo img {
width: 110px !important;
height: 110px !important;
border-radius: 16px !important;
object-fit: cover !important;
object-position: center top !important;
border: 4px solid #ffffff !important;
box-shadow: 0 6px 20px rgba(6, 31, 63, .15) !important;
display: block !important;
}
/* ── Identity block ─────────────────────────────────────────────── */
body[data-page="index.html"] .opc-identity {
display: flex;
flex-direction: column;
justify-content: center;
flex-shrink: 0;
}
body[data-page="index.html"] .opc-name {
font-size: 1.2rem;
font-weight: 800;
color: #0d2357;
letter-spacing: -.025em;
line-height: 1.2;
margin: 0 0 4px;
white-space: nowrap;
}
body[data-page="index.html"] .opc-position {
font-size: .88rem;
font-weight: 700;
color: #2563ff;
margin: 0 0 10px;
}
body[data-page="index.html"] .opc-divider {
width: 36px;
height: 2px;
background: #c0d0ea;
border-radius: 2px;
margin-bottom: 12px;
}
body[data-page="index.html"] .opc-role {
display: flex;
align-items: center;
gap: 6px;
font-size: .81rem;
color: #6b7fa8;
margin: 0;
line-height: 1.4;
white-space: nowrap;
}
body[data-page="index.html"] .opc-role-icon {
fill: #8ba4cc;
flex-shrink: 0;
display: block;
}
/* ── Vertical divider ───────────────────────────────────────────── */
body[data-page="index.html"] .opc-vdivider {
width: 1px;
align-self: stretch;
background: rgba(37, 99, 255, .13);
flex-shrink: 0;
margin: 0 20px;
}
/* ── Right panel ────────────────────────────────────────────────── */
body[data-page="index.html"] .opc-right {
flex: 1;
min-width: 0;
display: flex;
flex-direction: column;
justify-content: center;
gap: 16px;
position: relative;
}
/* Quote block */
body[data-page="index.html"] .opc-quote-wrap {
display: flex;
align-items: flex-start;
gap: 6px;
position: relative;
z-index: 1;
}
body[data-page="index.html"] .opc-qmark {
flex-shrink: 0;
opacity: .7;
margin-top: 2px;
}
body[data-page="index.html"] .opc-quote {
font-size: .80rem;
font-style: italic;
color: #3d5280;
line-height: 1.55;
margin: 0;
border: none;
padding: 2px 0 2px 10px;
border-left: 2px solid #5b8dee;
min-width: 0;
}
/* Features row */
body[data-page="index.html"] .opc-features {
display: flex;
align-items: center;
gap: 0;
}
body[data-page="index.html"] .opc-feature-item {
display: flex;
flex-direction: column;
align-items: center;
gap: 5px;
flex: none;
}
body[data-page="index.html"] .opc-feat-icon {
width: 36px;
height: 36px;
display: flex;
align-items: center;
justify-content: center;
color: #5b8dee;
}
body[data-page="index.html"] .opc-feature-item span {
font-size: .65rem;
font-weight: 600;
color: #6b7fa8;
text-align: center;
line-height: 1.25;
}
body[data-page="index.html"] .opc-feat-sep {
width: 1px;
height: 40px;
background: rgba(37, 99, 255, .15);
flex-shrink: 0;
margin: 0 8px;
align-self: center;
}
/* Watermark seal — true overlay at far right, behind all content */
body[data-page="index.html"] .opc-watermark {
position: absolute;
right: 12px;
top: 50%;
transform: translateY(-50%);
width: 120px;
height: 120px;
opacity: .045;
pointer-events: none;
z-index: 0;
}
body[data-page="index.html"] .opc-watermark img {
width: 100% !important;
height: 100% !important;
object-fit: contain !important;
display: block !important;
}
/* Ensure quote and features sit above watermark */
body[data-page="index.html"] .opc-quote-wrap,
body[data-page="index.html"] .opc-features {
position: relative;
z-index: 1;
}
/* ── Responsive ─────────────────────────────────────────────────── */
/* Tablet (≤960px): tighten gaps */
@media (max-width: 960px) {
body[data-page="index.html"] .opc-card { padding: 20px 22px; }
body[data-page="index.html"] .opc-photo { margin-right: 20px; }
body[data-page="index.html"] .opc-vdivider { margin: 0 18px; }
body[data-page="index.html"] .opc-watermark { width: 100px; height: 100px; right: 8px; }
}
/* ≤1200px: right panel (quote+feature icons) is too cramped — hide it.
At ≤900px it was already hidden; extending to 1200px covers the 901–1200px
range where opc-right only gets ~110px but needs ~223px for the feature row. */
@media (max-width: 1200px) {
body[data-page="index.html"] .opc-vdivider { display: none !important; }
body[data-page="index.html"] .opc-right { display: none !important; }
}
/* Mobile (≤640px): stack split to single column, stack card content */
@media (max-width: 640px) {
body[data-page="index.html"] .official-strip .split-layout {
grid-template-columns: 1fr !important;
gap: 24px !important;
}
body[data-page="index.html"] .opc-card {
flex-direction: column;
align-items: flex-start;
gap: 16px;
padding: 20px 18px;
}
body[data-page="index.html"] .opc-photo { margin-right: 0; }
body[data-page="index.html"] .opc-name { white-space: normal; }
body[data-page="index.html"] .opc-role { white-space: normal; }
}
/* Small mobile (≤400px): shrink photo */
@media (max-width: 400px) {
body[data-page="index.html"] .opc-photo img {
width: 88px !important;
height: 88px !important;
}
body[data-page="index.html"] .opc-name { font-size: 1.05rem; }
}
/* ── Community Initiatives grid — responsive (index + projects) ── */
/* Tablet ≤900px → 2 columns */
@media (max-width: 900px) {
body[data-page="index.html"] .proj-card-grid,
body[data-page="projects.html"] .proj-card-grid {
grid-template-columns: repeat(2, 1fr) !important;
gap: 18px !important;
}
}
/* Mobile ≤560px → 1 column, taller banners for label visibility */
@media (max-width: 560px) {
body[data-page="index.html"] .proj-card-grid,
body[data-page="projects.html"] .proj-card-grid {
grid-template-columns: 1fr !important;
gap: 20px !important;
}
body[data-page="index.html"] .proj-card-banner,
body[data-page="projects.html"] .proj-card-banner {
height: 160px !important;
min-height: 160px !important;
}
/* Anchor photo-based banners to bottom so embedded badges stay visible */
body[data-page="index.html"] .proj-card-banner-img img,
body[data-page="projects.html"] .proj-card-banner-img img {
object-position: center bottom !important;
}
/* Push label right so icon circle doesn't overlap text */
body[data-page="index.html"] .proj-card-banner .ict-banner-label,
body[data-page="projects.html"] .proj-card-banner .ict-banner-label {
padding-left: 80px !important;
}
}
/* =====================================================================
BARANGAY BOLBOK — Spring Water Heritage Color Theme Override
Purpose: Replace all Barangay Hulo colors with Bolbok branding.
Strategy: append last so cascade wins without touching earlier rules.
===================================================================== */
:root {
--blue: #0B5E7A;
--blue-2: #2CA6A4;
--blue-dark: #083d52;
--teal: #2CA6A4;
--teal-dark: #0B5E7A;
--gold: #D9A441;
--gold-2: #efc070;
--navy: #083d52;
--charcoal: #1F2933;
--muted: #64748B;
--soft-blue: #e8f5f5;
--soft-green: #e8f5f5;
--soft-gold: #fdf3e0;
--line: rgba(11,94,122,.12);
--civic-navy: #083d52;
--civic-blue: #0B5E7A;
--civic-cyan: #2CA6A4;
--civic-mint: #2CA6A4;
--civic-gold: #D9A441;
--surface-2: #F6FBFA;
--text-strong: #1F2933;
--text-soft: #64748B;
--text-navy: #0B5E7A;
--text-muted-soft: #64748B;
}
/* --- Body background --- */
body {
background-color: #F6FBFA !important;
background-image:
radial-gradient(circle at 18% 12%, rgba(44,166,164,.10), transparent 22rem),
radial-gradient(circle at 82% 8%, rgba(11,94,122,.08), transparent 26rem),
radial-gradient(circle at 50% 90%, rgba(217,164,65,.07), transparent 20rem) !important;
}
/* --- Site header --- */
.site-header {
background: rgba(11,94,122,.96) !important;
border-bottom-color: rgba(44,166,164,.22) !important;
}
.site-header::after {
background: linear-gradient(90deg, #0B5E7A, #2CA6A4, #D9A441, #2CA6A4, #0B5E7A) !important;
}
.brand strong { color: #ffffff !important; }
.brand small { color: rgba(255,255,255,.72) !important; }
.nav-link { color: rgba(255,255,255,.88) !important; }
.nav-link:hover,
.nav-link.active { color: #D9A441 !important; }
.nav-link.active::after,
.nav-link:hover::after { background: #D9A441 !important; }
.nav-contact,
.nav-link.nav-contact {
background: #D9A441 !important;
color: #1F2933 !important;
}
.nav-contact:hover { background: #efc070 !important; }
.nav-menu {
background: transparent !important;
border-color: transparent !important;
}
.menu-toggle {
background: rgba(44,166,164,.18) !important;
border-color: rgba(44,166,164,.28) !important;
}
.menu-toggle span { background: #ffffff !important; }
/* --- Emergency action strip: always single row, label left / chip right --- */
body[data-page="index.html"] .emergency-action-strip {
display: flex !important;
flex-direction: row !important;
align-items: center !important;
justify-content: space-between !important;
flex-wrap: nowrap !important;
gap: 8px !important;
}
body[data-page="index.html"] .emergency-action-label {
display: block !important;
white-space: nowrap !important;
font-size: 0.6rem !important;
flex: 1 1 auto !important;
min-width: 0 !important;
overflow: hidden !important;
text-overflow: ellipsis !important;
}
body[data-page="index.html"] .emergency-action-chip {
white-space: nowrap !important;
font-size: 0.6rem !important;
padding: 5px 9px !important;
flex: 0 0 auto !important;
min-width: 0 !important;
width: auto !important;
}
/* ≤390px: base CSS sets chip width:100% when label is hidden — restore auto since we show the label */
@media (max-width: 390px) {
body[data-page="index.html"] .emergency-action-chip {
width: auto !important;
}
}
/* --- Hero overlay: lighter first layer + softer ::before so photo feels natural --- */
.hero {
background:
linear-gradient(135deg,
rgba(11,94,122,.62) 0%,
rgba(8,61,82,.46) 40%,
rgba(44,166,164,.20) 100%),
url('../images/home-community-balanced.jpg') 80% center / cover no-repeat !important;
}
/* ::before: very subtle second tonal wash — text stays readable */
.hero::before {
background: linear-gradient(
135deg,
rgba(11,94,122,.28) 0%,
rgba(8,61,82,.18) 50%,
rgba(44,166,164,.08) 100%
) !important;
opacity: 1 !important;
}
.hero .eyebrow {
background: rgba(217,164,65,.18) !important;
color: #D9A441 !important;
border-color: rgba(217,164,65,.28) !important;
}
.hero h1 { color: #ffffff !important; }
.hero p { color: rgba(255,255,255,.88) !important; }
/* --- Page hero (inner pages) --- */
.page-hero::before {
background: linear-gradient(
135deg,
rgba(11,94,122,.88) 0%,
rgba(8,61,82,.76) 55%,
rgba(44,166,164,.44) 100%
) !important;
}
.page-hero .eyebrow {
color: #D9A441 !important;
border-color: rgba(217,164,65,.32) !important;
}
.page-hero h1 { color: #ffffff !important; }
.page-hero p { color: rgba(255,255,255,.84) !important; }
/* --- Buttons --- */
.btn-primary,
.btn.btn-primary,
button.btn-primary {
background: #0B5E7A !important;
color: #ffffff !important;
border-color: #0B5E7A !important;
}
.btn-primary:hover {
background: #083d52 !important;
border-color: #083d52 !important;
}
.btn-secondary,
.btn.btn-secondary {
background: transparent !important;
border-color: rgba(44,166,164,.55) !important;
color: #2CA6A4 !important;
}
.btn-secondary:hover {
background: rgba(44,166,164,.08) !important;
border-color: #2CA6A4 !important;
}
.btn-light,
.btn.btn-light {
background: rgba(255,255,255,.12) !important;
color: #ffffff !important;
border-color: rgba(255,255,255,.28) !important;
}
.btn-light:hover { background: rgba(255,255,255,.22) !important; }
/* --- Info cards --- */
.info-card {
background: #ffffff !important;
border-color: rgba(11,94,122,.08) !important;
}
.info-card::before {
background: linear-gradient(90deg, #0B5E7A, #2CA6A4, #2CA6A4, #D9A441) !important;
}
.info-card .icon {
background: linear-gradient(135deg, #0B5E7A, #2CA6A4) !important;
color: #ffffff !important;
}
.info-card h3 { color: #0B5E7A !important; }
/* --- Section headings --- */
.section-heading h2,
.split-layout h2 { color: #0B5E7A !important; }
.section-heading p,
.split-layout p { color: #64748B !important; }
.eyebrow { color: #2CA6A4 !important; }
/* --- Gradient band (stats strip) --- */
.gradient-band,
.gradient-band.section-pad {
background:
radial-gradient(circle at 14% 18%, rgba(255,255,255,.12), transparent 13rem),
radial-gradient(circle at 86% 22%, rgba(217,164,65,.22), transparent 16rem),
radial-gradient(circle at 70% 88%, rgba(44,166,164,.20), transparent 15rem),
linear-gradient(135deg, #083d52 0%, #0B5E7A 52%, #2CA6A4 100%) !important;
}
.stats-grid div::before {
background: linear-gradient(90deg, #2CA6A4, #ffffff, #D9A441) !important;
}
/* --- Image cards --- */
.image-card { background: #ffffff !important; border-color: rgba(11,94,122,.07) !important; }
.image-card::before { background: linear-gradient(90deg, #0B5E7A, #2CA6A4, #D9A441) !important; }
.image-card h3 { color: #0B5E7A !important; }
.image-card .date { color: #2CA6A4 !important; }
.image-card p { color: #64748B !important; }
.text-link { color: #0B5E7A !important; }
.text-link:hover { color: #2CA6A4 !important; }
/* --- Officials --- */
.official-featured {
background: linear-gradient(145deg, #F6FBFA, #e8f5f5) !important;
border-color: rgba(44,166,164,.18) !important;
}
.ofc-badge { background: #0B5E7A !important; color: #ffffff !important; }
.ofc-name { color: #0B5E7A !important; }
.ofc-divider { background: linear-gradient(90deg, #0B5E7A, #2CA6A4) !important; }
.official-card { background: #ffffff !important; border-color: rgba(11,94,122,.08) !important; }
.official-card::before { background: linear-gradient(90deg, #0B5E7A, #2CA6A4, #D9A441) !important; }
.official-card h3 { color: #0B5E7A !important; }
.official-card span { color: #2CA6A4 !important; }
.officials-divider span { color: #0B5E7A !important; border-color: rgba(11,94,122,.18) !important; }
/* --- Contact cards --- */
.contact-card { background: #ffffff !important; border-color: rgba(11,94,122,.08) !important; }
.contact-card::before { background: linear-gradient(90deg, #0B5E7A, #2CA6A4, #D9A441) !important; }
.contact-chip { background: rgba(44,166,164,.12) !important; color: #0B5E7A !important; }
.contact-card-header h2 { color: #0B5E7A !important; }
.info-stack-icon { background: linear-gradient(135deg, #0B5E7A, #2CA6A4) !important; color: #ffffff !important; }
.info-stack-title { color: #2CA6A4 !important; }
.contact-social-icon { background: rgba(11,94,122,.08) !important; color: #0B5E7A !important; border-color: rgba(11,94,122,.14) !important; }
.contact-social-icon:hover { background: #0B5E7A !important; color: #ffffff !important; }
.contact-form { background: #ffffff !important; border-color: rgba(11,94,122,.08) !important; }
.contact-form::before { background: linear-gradient(90deg, #2CA6A4, #0B5E7A, #D9A441) !important; }
.contact-form input:focus,
.contact-form textarea:focus {
border-color: #2CA6A4 !important;
box-shadow: 0 0 0 3px rgba(44,166,164,.14) !important;
}
.contact-form label { color: #0B5E7A !important; }
/* --- Accordion (services) --- */
.accordion-item { border-color: rgba(11,94,122,.10) !important; background: #ffffff !important; }
.accordion-item::before { background: linear-gradient(90deg, #0B5E7A, #2CA6A4, #D9A441) !important; }
.accordion-trigger { color: #0B5E7A !important; }
.accordion-trigger:hover { color: #2CA6A4 !important; background: rgba(44,166,164,.06) !important; }
.accordion-trigger .icon { background: linear-gradient(135deg, #0B5E7A, #2CA6A4) !important; color: #ffffff !important; }
/* --- Citizens Charter / Pledge --- */
.pledge { background: linear-gradient(135deg, #F6FBFA, #e8f5f5) !important; border-color: rgba(44,166,164,.20) !important; }
.pledge h2 { color: #0B5E7A !important; }
.pledge p { color: #1F2933 !important; }
.charter-meta-card { background: #ffffff !important; border-color: rgba(11,94,122,.08) !important; }
.charter-meta-card::before { background: linear-gradient(90deg, #0B5E7A, #2CA6A4, #D9A441) !important; }
.step-badge { background: linear-gradient(135deg, #0B5E7A, #2CA6A4) !important; color: #ffffff !important; }
.charter-section th { background: linear-gradient(90deg, #0B5E7A, #2CA6A4) !important; color: #ffffff !important; }
.charter-section tbody tr:hover td { background: rgba(44,166,164,.05) !important; }
.charter-section td.step-cell::after { background: linear-gradient(180deg, rgba(44,166,164,.34), rgba(11,94,122,.16)) !important; }
.process-flow-wrap::before { background: linear-gradient(180deg, #2CA6A4 0%, rgba(44,166,164,.18) 100%) !important; }
.charter-section tbody tr {
border-color: rgba(11,94,122,.10) !important;
background: linear-gradient(180deg, rgba(255,255,255,.98), rgba(246,251,250,.94)) !important;
}
/* --- Profile items (about page) --- */
.profile-item { background: #ffffff !important; border-color: rgba(11,94,122,.08) !important; }
.profile-item::before { background: linear-gradient(90deg, #0B5E7A, #2CA6A4, #D9A441) !important; }
.profile-item strong,
.profile-item h3 { color: #0B5E7A !important; }
.profile-item span { color: #64748B !important; }
/* --- Soft background --- */
.soft-bg { background: #F6FBFA !important; }
/* --- Back to top --- */
.back-to-top {
background: linear-gradient(135deg, #0B5E7A, #2CA6A4) !important;
color: #ffffff !important;
}
.back-to-top:hover { background: linear-gradient(135deg, #2CA6A4, #0B5E7A) !important; }
/* --- Footer --- */
.site-footer {
background:
radial-gradient(circle at 80% 0%, rgba(44,166,164,.22), transparent 26rem),
linear-gradient(135deg, #04222f, #0B5E7A 52%, #083d52) !important;
}
.site-footer h3 { color: #ffffff !important; }
.site-footer p,
.site-footer li { color: rgba(255,255,255,.74) !important; }
.site-footer a { color: rgba(255,255,255,.74) !important; }
.site-footer a:hover { color: #2CA6A4 !important; }
.footer-brand strong { color: #ffffff !important; }
.footer-email,
.footer-hotline { color: rgba(255,255,255,.74) !important; }
.footer-bottom {
border-color: rgba(44,166,164,.18) !important;
color: rgba(255,255,255,.52) !important;
}
/* --- Project / Community Initiatives cards — refined, lighter treatment --- */
/* 2-column desktop grid for 4 cards */
.proj-card-grid {
grid-template-columns: repeat(2, 1fr) !important;
gap: 20px !important;
}
/* Card shell: very rounded, soft shadow, off-white */
.proj-card {
background: #ffffff !important;
border: 1px solid rgba(11,94,122,.09) !important;
border-radius: 28px !important;
box-shadow: 0 4px 20px rgba(11,94,122,.08), 0 1px 4px rgba(11,94,122,.05) !important;
overflow: visible !important; /* let inner banner show its own rounding */
}
.proj-card::before { background: linear-gradient(90deg, #0B5E7A, #2CA6A4, #D9A441) !important; border-radius: 28px 28px 0 0 !important; }
/* Banner: floats inside the card with margin so it never touches edges */
.proj-card-banner {
height: 116px !important;
min-height: 116px !important;
margin: 16px 16px 0 !important;
padding: 16px 18px !important;
border-radius: 20px !important;
overflow: hidden !important;
flex-shrink: 0 !important;
}
/* Unified banner gradient — Deep Water Blue → Spring Teal, all cards */
.prog-banner--blue,
.prog-banner--green,
.prog-banner--teal,
.prog-banner--gold {
background: linear-gradient(135deg, #0B5E7A 0%, #2CA6A4 100%) !important;
}
/* Icon: in-flow, circular badge */
.proj-card-banner .ict-banner-icon {
position: relative !important;
top: auto !important;
left: auto !important;
width: 40px !important;
height: 40px !important;
min-width: 40px !important;
flex-shrink: 0 !important;
border-radius: 50% !important;
background: rgba(255,255,255,.18) !important;
border: 1.5px solid rgba(255,255,255,.30) !important;
box-shadow: none !important;
padding: 8px !important;
}
.proj-card-banner .ict-banner-icon svg {
width: 22px !important;
height: 22px !important;
}
/* Label: clean white text, wraps safely — reset any padding-left from older icon-overlap rule */
body[data-page="projects.html"] .proj-card-banner .ict-banner-label,
body[data-page="index.html"] .proj-card-banner .ict-banner-label,
.proj-card-banner .ict-banner-label {
background: transparent !important;
flex: 1 !important;
min-width: 0 !important;
overflow: hidden !important;
padding-left: 0 !important;
text-align: left !important;
}
.proj-card-banner .ict-banner-label strong {
display: block !important;
font-size: 0.72rem !important;
letter-spacing: 0.08em !important;
color: rgba(255,255,255,.95) !important;
text-transform: uppercase !important;
white-space: normal !important;
word-break: normal !important;
overflow-wrap: anywhere !important;
}
.proj-card-banner .ict-banner-label span {
display: block !important;
font-size: 0.82rem !important;
color: rgba(255,255,255,.82) !important;
font-weight: 400 !important;
white-space: normal !important;
word-break: normal !important;
}
/* Card body: comfortable padding below the floating banner */
.proj-card-body {
padding: 14px 20px 22px !important;
}
.proj-card-body h3 {
font-size: 1rem !important;
margin-top: 6px !important;
margin-bottom: 6px !important;
color: #0B5E7A !important;
}
.proj-card-body p {
font-size: 0.855rem !important;
line-height: 1.55 !important;
color: #64748B !important;
margin: 0 !important;
}
/* Status badge — compact pill */
.proj-card-body .status,
.image-card .status {
display: inline-flex !important;
align-self: flex-start !important;
padding: 4px 12px !important;
border-radius: 999px !important;
font-size: 0.7rem !important;
font-weight: 600 !important;
letter-spacing: 0.03em !important;
width: auto !important;
max-width: none !important;
}
/* Badge colours: Bolbok palette */
.proj-card-body .status.ongoing,
.image-card .status.ongoing {
background: rgba(44,166,164,.12) !important;
color: #0B5E7A !important;
border: 1px solid rgba(44,166,164,.26) !important;
}
.proj-card-body .status.upcoming,
.image-card .status.upcoming {
background: rgba(217,164,65,.13) !important;
color: #7a5a10 !important;
border: 1px solid rgba(217,164,65,.30) !important;
}
/* Responsive: tablet stays 2-col, mobile 1-col */
@media (max-width: 900px) {
.proj-card-grid { grid-template-columns: repeat(2, 1fr) !important; }
}
@media (max-width: 560px) {
.proj-card-grid { grid-template-columns: 1fr !important; gap: 16px !important; }
.proj-card-banner { height: 90px !important; min-height: 90px !important; }
}
/* --- OPC featured strip --- */
.official-mini { background: #ffffff !important; border-color: rgba(11,94,122,.10) !important; }
.official-mini::before { background: linear-gradient(90deg, #0B5E7A, #2CA6A4, #D9A441) !important; }
.opc-watermark { opacity: .04 !important; }
/* --- Download cards --- */
.download-card { background: #ffffff !important; border-color: rgba(11,94,122,.08) !important; }
.download-card::before { background: linear-gradient(90deg, #0B5E7A, #2CA6A4, #D9A441) !important; }
.download-card .icon { background: linear-gradient(135deg, #0B5E7A, #2CA6A4) !important; color: #ffffff !important; }
.download-card h3 { color: #0B5E7A !important; }
/* --- Mobile nav override --- */
@media (max-width: 900px) {
.site-header { background: rgba(11,94,122,.97) !important; }
.nav-menu,
.nav-menu.open,
.nav-menu.active,
body.nav-open .nav-menu {
background: rgba(8,61,82,.97) !important;
border-color: rgba(44,166,164,.22) !important;
}
.nav-link { color: rgba(255,255,255,.90) !important; background: transparent !important; }
.nav-link:hover,
.nav-link.active {
color: #2CA6A4 !important;
background: rgba(44,166,164,.14) !important;
}
}
/* --- Hero h1 single-line fix --- */
.hero h1 {
font-size: clamp(1.8rem, 4.8vw, 3.8rem) !important;
max-width: none !important;
white-space: nowrap !important;
}
@media (max-width: 380px) {
.hero h1 { white-space: normal !important; font-size: clamp(1.6rem, 6.5vw, 2rem) !important; }
}
/* --- Emergency card caption color fix --- */
.hero-emergency-card p,
.emergency-card-alt p {
color: #1F2933 !important;
}
/* --- Brand capsule removal: strip white background, padding, border --- */
.brand {
background: transparent !important;
background-image: none !important;
border: none !important;
box-shadow: none !important;
padding: 0 !important;
border-radius: 0 !important;
}
/* --- Logo image: transparent, no white fill, no distorting blend mode --- */
.brand img,
.footer-brand img {
background: transparent !important;
background-color: transparent !important;
mix-blend-mode: normal !important;
box-shadow: none !important;
border-radius: 6px !important;
filter: none !important;
}
/* --- Keep header dark even when scrolled --- */
.site-header.scrolled {
background: rgba(11,94,122,.98) !important;
box-shadow: 0 4px 24px rgba(4,34,47,.32) !important;
}
/* --- Home page: Community Initiatives flat icon cards --- */
.bolbok-init-grid {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 18px;
margin-top: 28px;
}
.bolbok-init-card {
background: #F6FBFA;
border: 1px solid rgba(11,94,122,.10);
border-top: 3px solid #2CA6A4;
border-radius: 26px;
padding: 24px 22px 22px;
box-shadow: 0 2px 14px rgba(11,94,122,.07);
display: flex;
flex-direction: column;
gap: 8px;
transition: box-shadow .22s, transform .22s;
}
.bolbok-init-card:hover {
box-shadow: 0 6px 28px rgba(11,94,122,.13);
transform: translateY(-2px);
}
.bic-icon {
width: 48px;
height: 48px;
background: rgba(44,166,164,.13);
border-radius: 18px;
display: flex;
align-items: center;
justify-content: center;
margin-bottom: 4px;
color: #0B5E7A;
flex-shrink: 0;
}
.bic-icon svg {
width: 24px;
height: 24px;
display: block;
}
.bic-category {
font-size: 0.68rem;
font-weight: 700;
letter-spacing: 0.09em;
text-transform: uppercase;
color: #2CA6A4;
}
.bic-title {
font-size: 0.97rem;
font-weight: 700;
color: #1F2933;
margin: 0;
line-height: 1.35;
}
.bic-status {
display: inline-flex;
align-self: flex-start;
padding: 3px 11px;
border-radius: 999px;
font-size: 0.68rem;
font-weight: 600;
letter-spacing: 0.02em;
}
.bic-status.ongoing {
background: rgba(44,166,164,.12);
color: #0B5E7A;
border: 1px solid rgba(44,166,164,.26);
}
.bic-status.upcoming {
background: rgba(217,164,65,.13);
color: #7a5a10;
border: 1px solid rgba(217,164,65,.30);
}
.bic-desc {
font-size: 0.85rem;
color: #64748B;
line-height: 1.57;
margin: 0;
}
@media (max-width: 900px) {
.bolbok-init-grid { grid-template-columns: repeat(2, 1fr); gap: 16px; }
}
@media (max-width: 560px) {
.bolbok-init-grid { grid-template-columns: 1fr; gap: 14px; }
.bolbok-init-card { padding: 20px 16px 18px; }
}
/* ===== END Barangay Bolbok Spring Water Heritage Theme ===== */
/* ===================================================================
BBCB — OTHER HOTLINES MODAL
Scoped to .bbcb-modal-* classes; no base-CSS interference.
=================================================================== */
/* "View List" span inside the trigger box */
body[data-page="index.html"] .hero-emergency-item.bbcb-hotlines-trigger .bbcb-view-list {
font-size: 0.72rem !important;
font-weight: 700 !important;
color: #2CA6A4 !important;
letter-spacing: 0.02em !important;
text-decoration: underline !important;
text-underline-offset: 2px !important;
}
/* Clickable state for Other Hotlines box */
body[data-page="index.html"] .hero-emergency-item.bbcb-hotlines-trigger {
cursor: pointer !important;
}
body[data-page="index.html"] .hero-emergency-item.bbcb-hotlines-trigger:focus-visible {
outline: 2px solid #0B5E7A !important;
outline-offset: 2px !important;
}
/* Modal overlay */
.bbcb-modal-overlay {
position: fixed !important;
inset: 0 !important;
background: rgba(10, 30, 50, 0.60) !important;
backdrop-filter: blur(4px) !important;
-webkit-backdrop-filter: blur(4px) !important;
z-index: 9000 !important;
display: flex !important;
align-items: center !important;
justify-content: center !important;
padding: 16px !important;
}
.bbcb-modal-overlay[hidden] { display: none !important; }
/* Modal container */
.bbcb-modal {
background: #F6FBFA;
border-radius: 20px;
box-shadow: 0 24px 64px rgba(11, 94, 122, 0.22), 0 4px 16px rgba(0, 0, 0, 0.10);
width: 100%;
max-width: 560px;
max-height: 88vh;
display: flex;
flex-direction: column;
overflow: hidden;
position: relative;
}
/* Header */
.bbcb-modal-header {
display: flex;
align-items: center;
justify-content: space-between;
padding: 18px 22px 16px;
background: #ffffff;
border-bottom: 1px solid rgba(11, 94, 122, 0.10);
flex-shrink: 0;
gap: 12px;
}
.bbcb-modal-title-group {
display: flex;
align-items: center;
gap: 10px;
}
.bbcb-modal-title-group h2 {
font-size: 1rem;
font-weight: 700;
color: #0B5E7A;
margin: 0;
letter-spacing: -0.01em;
line-height: 1.2;
}
.bbcb-modal-phone-icon { flex-shrink: 0; }
/* Close button */
.bbcb-modal-close {
background: rgba(11, 94, 122, 0.08);
border: none;
border-radius: 50%;
width: 32px;
height: 32px;
display: flex;
align-items: center;
justify-content: center;
font-size: 1rem;
color: #0B5E7A;
cursor: pointer;
line-height: 1;
transition: background 0.15s, transform 0.12s;
flex-shrink: 0;
}
.bbcb-modal-close:hover { background: rgba(11, 94, 122, 0.16); }
.bbcb-modal-close:focus-visible { outline: 2px solid #0B5E7A; outline-offset: 2px; }
/* Scrollable body */
.bbcb-modal-body {
overflow-y: auto;
flex: 1;
padding-bottom: 8px;
-webkit-overflow-scrolling: touch;
scrollbar-width: thin;
scrollbar-color: rgba(11, 94, 122, 0.22) transparent;
}
.bbcb-modal-body::-webkit-scrollbar { width: 4px; }
.bbcb-modal-body::-webkit-scrollbar-track { background: transparent; }
.bbcb-modal-body::-webkit-scrollbar-thumb {
background: rgba(11, 94, 122, 0.22);
border-radius: 4px;
}
/* Section blocks */
.bbcb-modal-section { padding: 0 22px 4px; }
.bbcb-modal-section-label {
font-size: 0.64rem;
font-weight: 800;
letter-spacing: 0.12em;
text-transform: uppercase;
color: #2CA6A4;
margin: 16px 0 8px;
padding-bottom: 7px;
border-bottom: 1.5px solid rgba(44, 166, 164, 0.22);
}
/* Each row */
.bbcb-modal-row {
display: flex;
justify-content: space-between;
align-items: flex-start;
gap: 14px;
padding: 8px 0;
border-bottom: 1px solid rgba(100, 116, 139, 0.09);
}
.bbcb-modal-row:last-child { border-bottom: none; }
.bbcb-modal-name {
font-size: 0.82rem;
color: #1F2933;
line-height: 1.45;
flex: 1;
min-width: 0;
word-break: break-word;
}
.bbcb-modal-number,
.bbcb-modal-number a {
font-size: 0.82rem;
font-weight: 700;
color: #0B5E7A;
text-align: right;
text-decoration: none;
flex-shrink: 0;
line-height: 1.55;
white-space: normal;
max-width: 48%;
}
.bbcb-modal-number { display: block; }
.bbcb-modal-number a:hover { text-decoration: underline; color: #2CA6A4; }
/* ─ Mobile responsive ──────────────────────────────── */
@media (max-width: 600px) {
.bbcb-modal-overlay {
padding: 24px 12px 36px !important;
align-items: flex-start !important;
padding-top: max(24px, env(safe-area-inset-top, 24px)) !important;
padding-bottom: max(36px, env(safe-area-inset-bottom, 36px)) !important;
}
.bbcb-modal {
max-height: calc(100svh - 60px);
max-height: calc(100vh - 60px);
border-radius: 16px;
margin-top: auto;
margin-bottom: auto;
}
.bbcb-modal-header { padding: 14px 16px 12px; }
.bbcb-modal-section { padding: 0 16px 4px; }
.bbcb-modal-name { font-size: 0.78rem; }
.bbcb-modal-number,
.bbcb-modal-number a { font-size: 0.78rem; max-width: 46%; }
}
/* ===== END BBCB Other Hotlines Modal ===== */
/* ── Read More alignment — Announcements & Community Initiatives ── */
body[data-page="announcements.html"] #ann-grid .image-card,
body[data-page="projects.html"] #proj-grid .image-card {
display: flex;
flex-direction: column;
}
body[data-page="announcements.html"] #ann-grid .image-card > div,
body[data-page="projects.html"] #proj-grid .image-card > div {
flex: 1;
display: flex;
flex-direction: column;
}
body[data-page="announcements.html"] #ann-grid .image-card .text-link,
body[data-page="projects.html"] #proj-grid .image-card .text-link {
margin-top: auto;
padding-top: 12px;
align-self: flex-start;
text-align: left;
}
/* ══════════════════════════════════════════════════════════════
Barangay Calendar Section
══════════════════════════════════════════════════════════════ */
/* Main two-column layout: calendar left, featured right */
/* ══════════════════════════════════════════════════════════════
BARANGAY CALENDAR — MODERNIZED UI
══════════════════════════════════════════════════════════════ */
/* ── Section wrapper ───────────────────────────────────────── */
.brcal-section {
background: linear-gradient(175deg, #f0f5ff 0%, #f7faff 45%, #fff 100%);
position: relative;
}
/* ── Calendar Grid Layout ──────────────────────────────────── */
.brcal-main {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 28px;
margin-bottom: 60px;
align-items: start;
}
/* ── Calendar Widget ───────────────────────────────────────── */
.brcal-cal-wrap {
background: #fff;
border-radius: var(--radius-md);
box-shadow: 0 4px 28px rgba(13,71,161,.09), 0 1px 6px rgba(13,71,161,.05);
padding: 28px;
border: 1px solid rgba(13,71,161,.07);
position: relative;
overflow: hidden;
}
.brcal-cal-wrap::before {
content: '';
position: absolute;
inset: 0 0 auto 0;
height: 3px;
background: linear-gradient(90deg, var(--blue-2), var(--teal));
}
.brcal-cal-header {
display: flex;
align-items: center;
justify-content: space-between;
margin-bottom: 20px;
}
.brcal-month-label {
font-size: 1.05rem;
font-weight: 800;
color: var(--navy);
letter-spacing: -.03em;
}
.brcal-nav-btn {
display: flex;
align-items: center;
justify-content: center;
width: 36px;
height: 36px;
border-radius: 10px;
border: 1.5px solid rgba(13,71,161,.14);
background: #fff;
color: var(--navy);
cursor: pointer;
transition: background .18s, color .18s, border-color .18s, box-shadow .18s;
flex-shrink: 0;
}
.brcal-nav-btn:hover {
background: var(--blue-2);
color: #fff;
border-color: var(--blue-2);
box-shadow: 0 4px 12px rgba(21,101,216,.3);
}
.brcal-weekdays {
display: grid;
grid-template-columns: repeat(7, 1fr);
margin-bottom: 6px;
border-bottom: 1px solid rgba(13,71,161,.07);
padding-bottom: 8px;
}
.brcal-weekdays span {
text-align: center;
font-size: .65rem;
font-weight: 800;
color: var(--blue-2);
text-transform: uppercase;
letter-spacing: .06em;
padding: 4px 0;
}
.brcal-grid {
display: grid;
grid-template-columns: repeat(7, 1fr);
gap: 2px;
}
.brcal-day {
display: flex;
flex-direction: column;
align-items: center;
justify-content: space-between;
padding: 5px 2px 4px;
border: none;
background: transparent;
border-radius: 10px;
cursor: default;
transition: background .15s ease;
min-height: 44px;
gap: 3px;
}
.brcal-day-num {
font-size: .8rem;
font-weight: 500;
line-height: 1;
color: var(--charcoal);
display: flex;
align-items: center;
justify-content: center;
width: 26px;
height: 26px;
border-radius: 50%;
transition: background .15s, color .15s;
}
.brcal-day.other-month { opacity: .25; cursor: not-allowed; }
.brcal-day.today .brcal-day-num {
background: linear-gradient(135deg, var(--blue-2), var(--teal));
color: #fff;
font-weight: 800;
box-shadow: 0 2px 8px rgba(21,101,216,.35);
}
.brcal-day.has-event { cursor: pointer; }
.brcal-day.has-event .brcal-day-num { font-weight: 700; color: var(--navy); }
.brcal-day.has-event:hover:not(.selected) { background: rgba(13,71,161,.07); }
.brcal-day.selected { background: var(--navy); }
.brcal-day.selected .brcal-day-num { color: #fff; font-weight: 700; background: transparent; box-shadow: none; }
.brcal-dots {
display: flex;
gap: 2px;
justify-content: center;
}
.brcal-dot {
width: 5px;
height: 5px;
border-radius: 50%;
background: var(--blue-2);
flex-shrink: 0;
}
.brcal-day.selected .brcal-dot { background: rgba(255,255,255,.6); }
/* ── Featured Activity Panel ───────────────────────────────── */
.brcal-featured {
background: #fff;
border-radius: var(--radius-md);
box-shadow: 0 4px 28px rgba(13,71,161,.09), 0 1px 6px rgba(13,71,161,.05);
border: 1px solid rgba(13,71,161,.07);
min-height: 340px;
display: flex;
flex-direction: column;
overflow: hidden;
position: relative;
}
.brcal-featured::before {
content: '';
position: absolute;
inset: 0 0 auto 0;
height: 3px;
background: linear-gradient(90deg, var(--teal), var(--blue-2), var(--gold));
}
.brcal-featured-empty {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
gap: 14px;
text-align: center;
padding: 52px 28px;
flex: 1;
color: var(--muted);
}
.brcal-featured-empty-icon {
width: 60px; height: 60px;
border-radius: 18px;
background: var(--soft-blue);
display: flex;
align-items: center;
justify-content: center;
color: var(--blue-2);
}
.brcal-featured-empty p {
font-size: .88rem;
line-height: 1.65;
color: var(--muted);
}
.brcal-feat-inner {
padding: 28px;
display: flex;
flex-direction: column;
gap: 16px;
flex: 1;
}
.brcal-feat-cat {
display: inline-flex;
align-items: center;
padding: 4px 12px;
border-radius: 999px;
font-size: .68rem;
font-weight: 800;
letter-spacing: .06em;
text-transform: uppercase;
width: fit-content;
}
.brcal-feat-icon-wrap {
width: 56px;
height: 56px;
border-radius: 16px;
display: flex;
align-items: center;
justify-content: center;
flex-shrink: 0;
}
.brcal-feat-title {
font-size: 1.2rem;
font-weight: 800;
color: var(--navy);
line-height: 1.25;
letter-spacing: -.03em;
}
.brcal-feat-metas,
.brcal-card-metas,
.brcal-modal-metas {
display: flex;
flex-direction: column;
gap: 8px;
}
.brcal-feat-meta {
display: flex;
align-items: flex-start;
gap: 9px;
font-size: .82rem;
color: var(--charcoal);
line-height: 1.4;
}
.brcal-feat-meta svg {
flex-shrink: 0;
margin-top: 1px;
color: var(--blue-2);
opacity: .85;
}
.brcal-feat-desc {
font-size: .88rem;
color: var(--charcoal);
line-height: 1.7;
}
.brcal-feat-btn {
margin-top: auto;
align-self: flex-start;
font-size: .86rem;
padding: 11px 24px;
border-radius: 999px;
}
/* ── Multi-activity featured list ──────────────────────────── */
.brcal-feat-multi {
gap: 10px;
overflow-y: auto;
max-height: 420px;
}
.brcal-feat-date-hdr {
display: flex;
align-items: center;
gap: 8px;
font-size: .82rem;
font-weight: 700;
color: var(--navy);
padding-bottom: 10px;
border-bottom: 1.5px solid rgba(13,71,161,.1);
flex-shrink: 0;
}
.brcal-feat-date-hdr svg { color: var(--blue-2); flex-shrink: 0; }
.brcal-feat-item {
display: flex;
flex-direction: column;
gap: 7px;
padding: 14px 16px;
background: #f0f5ff;
border-radius: 12px;
border-left: 3px solid var(--blue-2);
}
.brcal-feat-item-title {
font-size: .95rem;
font-weight: 700;
color: var(--navy);
line-height: 1.3;
}
.brcal-feat-item .brcal-feat-btn {
margin-top: 4px;
font-size: .8rem;
padding: 8px 18px;
}
/* ── Section label (Upcoming / Archive) ────────────────────── */
.brcal-section-label {
display: flex;
align-items: center;
gap: 12px;
margin-bottom: 22px;
}
@keyframes brcal-pill-pulse {
0%, 100% { transform: scale(1); box-shadow: 0 0 0 0 rgba(0,180,180,.35); opacity: 1; }
50% { transform: scale(1.04); box-shadow: 0 0 0 5px rgba(0,180,180,0); opacity: .88; }
}
.brcal-section-label-pill {
display: inline-flex;
align-items: center;
padding: 3px 12px;
border-radius: 999px;
font-size: .68rem;
font-weight: 800;
letter-spacing: .08em;
text-transform: uppercase;
background: linear-gradient(135deg, var(--blue-2), var(--teal));
color: #fff;
flex-shrink: 0;
animation: brcal-pill-pulse 2s ease-in-out infinite;
}
@media (prefers-reduced-motion: reduce) {
.brcal-section-label-pill { animation: none; }
}
.brcal-section-label-past {
background: linear-gradient(135deg, #6a1b9a, #9c27b0);
}
.brcal-upcoming-heading {
font-size: 1.2rem;
font-weight: 800;
color: var(--navy);
letter-spacing: -.03em;
margin: 0;
}
/* ── Activity Cards ────────────────────────────────────────── */
.brcal-cards-grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 22px;
}
.brcal-card {
background: #fff;
border-radius: var(--radius-md);
box-shadow: 0 2px 14px rgba(13,71,161,.07), 0 1px 4px rgba(13,71,161,.04);
border: 1px solid rgba(13,71,161,.07);
padding: 26px;
display: flex;
flex-direction: column;
gap: 11px;
transition: box-shadow .25s ease, transform .25s ease, border-color .25s ease;
position: relative;
overflow: hidden;
}
.brcal-card::before {
content: '';
position: absolute;
inset: 0 0 auto 0;
height: 3px;
background: linear-gradient(90deg, var(--blue-2), var(--teal));
border-radius: 0;
transition: opacity .25s;
}
.brcal-card:hover {
box-shadow: 0 10px 40px rgba(13,71,161,.14), 0 2px 10px rgba(13,71,161,.07);
transform: translateY(-5px);
border-color: rgba(21,101,216,.15);
}
.brcal-card-title {
font-size: .97rem;
font-weight: 800;
color: var(--navy);
line-height: 1.3;
letter-spacing: -.02em;
}
.brcal-card-metas { gap: 6px; }
.brcal-card-desc {
font-size: .83rem;
color: var(--muted);
line-height: 1.62;
display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
overflow: hidden;
flex: 1;
}
.brcal-card-btn {
display: inline-flex;
align-items: center;
gap: 5px;
border: none;
padding: 8px 18px;
border-radius: 999px;
font-size: .8rem;
font-weight: 700;
color: var(--blue-2);
background: rgba(21,101,216,.08);
cursor: pointer;
align-self: flex-start;
transition: background .18s, color .18s, box-shadow .18s;
margin-top: 4px;
letter-spacing: -.01em;
}
.brcal-card-btn:hover {
background: var(--blue-2);
color: #fff;
box-shadow: 0 4px 14px rgba(21,101,216,.3);
}
.brcal-no-upcoming {
color: var(--muted);
font-size: .9rem;
padding: 28px 0;
grid-column: 1/-1;
text-align: center;
}
/* ── Past activity card ────────────────────────────────────── */
.brcal-card-past::before {
background: linear-gradient(90deg, #9c27b0, #6a1b9a);
}
.brcal-card-past .brcal-card-btn {
color: #7b1fa2;
background: rgba(156,39,176,.08);
}
.brcal-card-past .brcal-card-btn:hover {
background: #7b1fa2;
color: #fff;
box-shadow: 0 4px 14px rgba(123,31,162,.3);
}
/* ── Activity Details Modal ────────────────────────────────── */
.brcal-modal-box {
background: #fff;
border-radius: var(--radius);
width: 100%;
max-width: 540px;
max-height: 90vh;
overflow: hidden;
display: flex;
flex-direction: column;
box-shadow: 0 32px 90px rgba(8,38,77,.3), 0 8px 24px rgba(8,38,77,.12);
animation: brcalModalIn .22s cubic-bezier(.22,1,.36,1);
}
@keyframes brcalModalIn {
from { opacity: 0; transform: translateY(18px) scale(.98); }
to { opacity: 1; transform: translateY(0) scale(1); }
}
.brcal-modal-head {
background: linear-gradient(120deg, var(--blue-dark) 0%, var(--blue-2) 60%, var(--teal-dark) 100%);
padding: 24px 26px 22px;
display: flex;
align-items: flex-start;
justify-content: space-between;
gap: 16px;
flex-shrink: 0;
position: relative;
overflow: hidden;
}
.brcal-modal-head::after {
content: '';
position: absolute;
inset: 0;
background-image: radial-gradient(circle, rgba(255,255,255,.1) 1px, transparent 1px);
background-size: 24px 24px;
pointer-events: none;
}
.brcal-modal-mtitle {
font-size: 1.15rem;
font-weight: 800;
color: #fff;
line-height: 1.25;
margin-top: 8px;
letter-spacing: -.03em;
position: relative;
z-index: 1;
}
.brcal-modal-close-btn {
flex-shrink: 0;
background: rgba(255,255,255,.15);
border: none;
border-radius: 50%;
width: 36px;
height: 36px;
cursor: pointer;
display: flex;
align-items: center;
justify-content: center;
font-size: 1.1rem;
color: #fff;
line-height: 1;
transition: background .18s;
position: relative;
z-index: 1;
}
.brcal-modal-close-btn:hover { background: rgba(255,255,255,.28); }
.brcal-modal-body-scroll {
padding: 24px;
overflow-y: auto;
display: flex;
flex-direction: column;
gap: 16px;
flex: 1;
}
.brcal-modal-metas {
background: linear-gradient(135deg, #eaf4ff 0%, #f0faff 100%);
border-radius: 14px;
padding: 16px 18px;
border: 1px solid rgba(13,71,161,.08);
}
.brcal-modal-metas .brcal-feat-meta svg { color: var(--blue-2); opacity: 1; }
.brcal-modal-desc {
font-size: .91rem;
color: var(--charcoal);
line-height: 1.75;
}
.brcal-modal-req {
font-size: .86rem;
display: flex;
flex-direction: column;
gap: 6px;
padding: 15px 16px;
background: rgba(246,196,69,.09);
border-radius: 12px;
border-left: 3px solid var(--gold);
}
.brcal-modal-req strong {
color: var(--navy);
font-size: .7rem;
font-weight: 800;
text-transform: uppercase;
letter-spacing: .08em;
}
.brcal-modal-req p { color: var(--charcoal); line-height: 1.6; }
.brcal-req-list { margin: 6px 0 0 0; padding-left: 18px; color: var(--charcoal); line-height: 1.75; }
.brcal-req-list li { margin-bottom: 3px; }
.brcal-modal-req a { color: var(--blue-2); text-decoration: underline; }
.brcal-download-link { display:inline-flex; align-items:center; gap:5px; font-weight:700; }
.brcal-gallery { display:flex; flex-wrap:wrap; gap:10px; margin-top:8px; }
.brcal-gallery-img { width:92px; height:92px; object-fit:cover; border-radius:10px; border:1px solid rgba(0,0,0,.07); cursor:pointer; transition:opacity .15s, transform .15s, box-shadow .15s; }
.brcal-gallery-img:hover { opacity:.9; transform:scale(1.04); box-shadow:0 4px 14px rgba(0,0,0,.18); }
.brcal-docs-list { display:flex; flex-direction:column; gap:7px; margin-top:8px; }
.brcal-docs-list .brcal-download-link { font-size:.88rem; }
/* Status badge in modal */
.brcal-status-badge { display:inline-flex; align-items:center; gap:5px; font-size:.75rem; font-weight:700; letter-spacing:.05em; padding:4px 12px; border-radius:999px; text-transform:uppercase; }
.brcal-status-scheduled { background:#dbeafe; color:#1d4ed8; }
.brcal-status-ongoing { background:#dcfce7; color:#16a34a; }
.brcal-status-completed { background:#f3e8ff; color:#7e22ce; }
.brcal-status-cancelled { background:#fee2e2; color:#dc2626; }
/* Activity summary block */
.brcal-summary-block { background:#faf5ff; border-left:3px solid #9c27b0; }
.brcal-modal-register { padding-top: 4px; }
/* ── Responsive ────────────────────────────────────────────── */
@media (max-width: 900px) {
.brcal-main { grid-template-columns: 1fr; }
.brcal-featured { order: -1; }
.brcal-cards-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 640px) {
.brcal-main { gap: 16px; margin-bottom: 40px; }
.brcal-cal-wrap { padding: 18px 14px; }
.brcal-feat-inner { padding: 22px; }
.brcal-day { min-height: 36px; padding: 4px 1px 3px; }
.brcal-day-num { font-size: .72rem; width: 22px; height: 22px; }
.brcal-weekdays span { font-size: .6rem; }
.brcal-cards-grid { grid-template-columns: 1fr; }
.brcal-feat-title { font-size: 1.08rem; }
.brcal-feat-icon-wrap { width: 50px; height: 50px; border-radius: 14px; }
.brcal-modal-box { border-radius: 22px; }
.brcal-modal-head { padding: 20px 18px 18px; }
.brcal-modal-body-scroll { padding: 18px; }
}
/* ── Emergency Alert System — Public (Phase 2) ─────────────────────────────── */
.ea-banner{display:none;width:100%;z-index:999;border-bottom:1px solid transparent;opacity:1;animation:eaBannerIn .35s ease forwards}
.ea-banner.is-visible{display:block}
@keyframes eaBannerIn{from{opacity:0;transform:translateY(-6px)}to{opacity:1;transform:translateY(0)}}
.ea-banner-inner{display:flex;align-items:center;gap:14px;padding:13px 22px;flex-wrap:wrap}
.ea-banner-icon{flex-shrink:0;width:22px;height:22px}
.ea-banner-body{flex:1;min-width:0}
.ea-banner-title{font-weight:700;font-size:.95rem;line-height:1.3}
.ea-banner-msg{font-size:.88rem;line-height:1.45;opacity:.9;margin-top:2px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.ea-banner-actions{display:flex;align-items:center;gap:10px;flex-shrink:0}
.ea-banner-link{font-size:.84rem;font-weight:700;padding:6px 14px;border-radius:8px;border:1.5px solid currentColor;opacity:.9;transition:.18s ease;white-space:nowrap;text-decoration:none}
.ea-banner-link:hover{opacity:1;background:rgba(255,255,255,.18)}
.ea-banner-close{background:none;border:none;cursor:pointer;padding:4px;border-radius:6px;display:flex;align-items:center;justify-content:center;opacity:.7;transition:.18s ease;color:inherit}
.ea-banner-close:hover{opacity:1;background:rgba(255,255,255,.2)}
/* Priority colour themes */
.ea-banner-advisory{background:linear-gradient(135deg,#1e4a91,#2563c4);color:#fff;border-color:rgba(255,255,255,.12)}
.ea-banner-warning{background:linear-gradient(135deg,#b45309,#d97706);color:#fff;border-color:rgba(255,255,255,.12)}
.ea-banner-critical{background:linear-gradient(135deg,#991b1b,#dc2626);color:#fff;border-color:rgba(255,255,255,.12)}
/* Popup — element created/removed by JS; never hidden via CSS */
.ea-popup-overlay{position:fixed;inset:0;z-index:10000;background:rgba(0,0,0,.65);display:flex;align-items:center;justify-content:center;padding:20px;box-sizing:border-box}
.ea-popup-box{background:#fff;border-radius:20px;max-width:500px;width:100%;box-shadow:0 28px 80px rgba(0,0,0,.4);overflow:hidden;opacity:1;animation:eaPopupIn .3s cubic-bezier(.22,1,.36,1) forwards;max-height:90vh;overflow-y:auto}
@keyframes eaPopupIn{from{opacity:0;transform:scale(.93) translateY(18px)}to{opacity:1;transform:scale(1) translateY(0)}}
.ea-popup-head{background:linear-gradient(135deg,#991b1b,#dc2626);color:#fff;padding:24px 24px 20px}
.ea-popup-label{font-size:.72rem;font-weight:800;letter-spacing:.12em;text-transform:uppercase;opacity:.85;margin-bottom:10px}
.ea-popup-title{font-size:1.35rem;font-weight:800;line-height:1.2;margin-bottom:14px}
.ea-popup-badges{display:flex;gap:8px;flex-wrap:wrap}
.ea-popup-badge{display:inline-flex;padding:4px 11px;border-radius:999px;font-size:.74rem;font-weight:700;letter-spacing:.04em}
.ea-popup-badge-type{background:rgba(255,255,255,.18);color:#fff;border:1px solid rgba(255,255,255,.3)}
.ea-popup-badge-priority{background:rgba(255,255,255,.95);color:#991b1b}
.ea-popup-body{padding:22px 24px 4px}
.ea-popup-section{margin-bottom:18px}
.ea-popup-section-label{font-size:.7rem;font-weight:800;letter-spacing:.1em;text-transform:uppercase;color:var(--muted);margin-bottom:7px}
.ea-popup-msg{font-size:.97rem;color:var(--charcoal);line-height:1.65}
.ea-popup-instr{font-size:.92rem;color:var(--charcoal);line-height:1.6;padding:12px 14px;background:#fef2f2;border-radius:8px;border-left:3px solid #dc2626}
/* ── EA message block formatting ── */
.ea-msg-para{margin:0 0 10px;line-height:inherit}
.ea-msg-para:last-child{margin-bottom:0}
.ea-msg-heading{font-size:1em;font-weight:700;margin:12px 0 5px;color:inherit;line-height:1.35}
.ea-msg-heading:first-child{margin-top:0}
.ea-msg-list{margin:4px 0 10px 18px;padding:0;line-height:inherit}
.ea-msg-list li{margin-bottom:5px}
.ea-msg-list:last-child{margin-bottom:0}
/* Instructions list */
.ea-instr-list{margin:0;padding:0 0 0 18px;list-style:disc}
.ea-instr-list li{margin-bottom:8px;line-height:1.55}
.ea-instr-list li:last-child{margin-bottom:0}
/* Detail page message body */
.ea-msg-body{font-size:1.04rem;line-height:1.75;color:var(--charcoal)}
.ea-msg-body .ea-msg-para{margin-bottom:14px}
.ea-msg-body .ea-msg-heading{font-size:1.06rem;font-weight:700;color:var(--navy);margin:18px 0 8px}
.ea-msg-body .ea-msg-list{margin-left:22px;margin-bottom:14px}
.ea-msg-body .ea-msg-list li{margin-bottom:7px}
.ea-msg-body .ea-instr-list{padding-left:22px}
.ea-msg-body .ea-instr-list li{margin-bottom:10px;line-height:1.7;font-size:1.02rem}
.ea-popup-meta-row{display:flex;align-items:flex-start;gap:6px;font-size:.87rem;color:#991b1b;font-weight:600;margin-bottom:18px}
.ea-popup-foot{display:flex;gap:10px;padding:20px 24px;flex-wrap:wrap}
.ea-popup-btn-detail{flex:1;min-width:120px;padding:12px 16px;background:#dc2626;color:#fff;border:none;border-radius:10px;font-weight:700;font-size:.93rem;cursor:pointer;transition:.18s ease;text-align:center;text-decoration:none;display:inline-flex;align-items:center;justify-content:center}
.ea-popup-btn-detail:hover{background:#b91c1c;color:#fff}
.ea-popup-btn-close{flex:0 0 auto;padding:12px 20px;background:#f3f4f6;color:var(--charcoal);border:none;border-radius:10px;font-weight:600;font-size:.93rem;cursor:pointer;transition:.18s ease}
.ea-popup-btn-close:hover{background:#e5e7eb}
/* Emergency Alert Detail Page */
.ead-info-table{display:grid;gap:0}
.ead-info-row{display:grid;gap:3px;padding:13px 0;border-bottom:1px solid rgba(13,71,161,.08)}
.ead-info-row:first-child{padding-top:0}
.ead-info-row:last-child{border-bottom:none;padding-bottom:0}
.ead-info-label{font-size:.73rem;font-weight:800;letter-spacing:.09em;text-transform:uppercase;color:var(--muted)}
.ead-info-val{font-size:.95rem;font-weight:600;color:var(--charcoal);line-height:1.4}
.ead-hotline-link{display:flex;align-items:center;gap:10px;padding:13px 16px;background:var(--soft-blue);border:1px solid rgba(13,71,161,.12);border-radius:14px;font-weight:700;color:var(--blue);font-size:.9rem;transition:.2s ease;text-decoration:none}
.ead-hotline-link+.ead-hotline-link{margin-top:10px}
.ead-hotline-link:hover{background:#dbeafe;box-shadow:0 4px 14px rgba(13,71,161,.1)}
.ead-expired-notice{background:#fef2f2;border:1px solid rgba(220,38,38,.2);border-radius:var(--radius-sm);padding:40px 28px;text-align:center;color:#991b1b;max-width:560px;margin:0 auto}
.ead-expired-notice h2{color:#991b1b;margin-bottom:10px}
.ead-expired-notice p{color:#b91c1c;margin-bottom:20px}
.ead-badge{display:inline-flex;align-items:center;padding:5px 12px;border-radius:999px;font-size:.78rem;font-weight:800;letter-spacing:.04em}
.ead-badge-glass{background:rgba(255,255,255,.18);color:#fff;border:1px solid rgba(255,255,255,.28)}
.ead-badge-critical{background:#fee2e2;color:#991b1b}
.ead-badge-warning{background:#fef3c7;color:#92400e}
.ead-badge-advisory{background:#dbeafe;color:#1e40af}
/* Hide View Details on the alert detail page itself */
[data-page="emergency-alert-detail.html"] .ea-banner-link{display:none}
/* Resolved toast — All Clear */
.ea-toast{position:fixed;bottom:24px;right:24px;z-index:10002;background:#fff;border-radius:18px;box-shadow:0 8px 40px rgba(0,0,0,.13),0 2px 8px rgba(0,0,0,.06);border:1.5px solid #bbf7d0;max-width:360px;width:calc(100vw - 48px);opacity:0;transition:opacity .4s ease;pointer-events:none;overflow:hidden}
.ea-toast.is-visible{opacity:1;pointer-events:auto}
.ea-toast-head{background:linear-gradient(135deg,#166534,#16a34a);color:#fff;padding:11px 14px 11px 16px;display:flex;align-items:center;gap:8px}
.ea-toast-head-label{flex:1;font-size:.72rem;font-weight:800;letter-spacing:.13em;text-transform:uppercase}
.ea-toast-close{background:rgba(255,255,255,.18);border:none;cursor:pointer;color:#fff;font-size:.75rem;width:22px;height:22px;border-radius:50%;display:flex;align-items:center;justify-content:center;flex-shrink:0;transition:background .15s ease;line-height:1;padding:0}
.ea-toast-close:hover{background:rgba(255,255,255,.32)}
.ea-toast-body{display:flex;align-items:flex-start;gap:12px;padding:14px 16px 16px}
.ea-toast-icon{flex-shrink:0;width:32px;height:32px;background:#dcfce7;border-radius:50%;display:flex;align-items:center;justify-content:center;color:#16a34a;margin-top:1px}
.ea-toast-content{flex:1;min-width:0}
.ea-toast-title{font-weight:700;font-size:.9rem;color:#15803d;margin-bottom:5px;line-height:1.2}
.ea-toast-msg{font-size:.81rem;color:#4b5563;line-height:1.55}
.ea-toast-progress{height:3px;background:#dcfce7}
.ea-toast-bar{height:100%;width:100%;background:#16a34a;animation:eaToastBar 15s linear forwards}
@keyframes eaToastBar{from{width:100%}to{width:0%}}
@media(max-width:480px){
.ea-toast{bottom:16px;right:16px;left:16px;max-width:none;width:auto}
}
@media(max-width:768px){
.ea-banner-inner{padding:11px 14px;gap:8px;flex-wrap:nowrap}
.ea-banner-msg{display:none}
.ea-banner-body{min-width:0}
.ea-banner-title{font-size:.88rem;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.ea-banner-actions{flex-shrink:0;gap:8px}
.ea-banner-link{font-size:.8rem;padding:5px 11px}
.ea-popup-box{border-radius:16px}
}
@media(max-width:480px){
.ea-popup-head{padding:20px 18px 16px}
.ea-popup-body{padding:18px 18px 4px}
.ea-popup-foot{padding:16px 18px;gap:8px}
.ea-popup-btn-detail,.ea-popup-btn-close{flex:1 1 auto}
}
/* ═══════════════════════════════════════════════════════════════════════
DIRECTORY MODULE v2.0 — unified map + list
Additive only — reuses existing tokens (--blue-2, --teal, --gold, --radius,
--shadow-sm, .info-card look) so the page matches the rest of the site.
No existing selector above this point is modified. Supersedes the old
Phase 1 four-section directory CSS (dir-card/dir-jumpnav/etc.), which was
only ever used by directory.html and is now fully replaced below.
═══════════════════════════════════════════════════════════════════════ */
.dir2-section{padding:8px 0 88px;position:relative}
.dir2-grid{
display:grid;
grid-template-columns:280px 1fr;
grid-template-areas:
"toolbar toolbar"
"map map"
"cats list";
gap:22px 26px;
}
.dir2-toolbar{grid-area:toolbar;display:flex;gap:14px;flex-wrap:wrap;align-items:center}
.dir2-search-wrap{position:relative;flex:1 1 320px;min-width:220px}
.dir2-search{width:100%;border:1px solid rgba(13,71,161,.16);border-radius:15px;padding:13px 40px 13px 16px;background:#fbfdff;color:var(--charcoal);outline:none;transition:.2s ease;font-size:.95rem}
.dir2-search:focus{border-color:var(--teal);box-shadow:0 0 0 4px rgba(0,168,132,.13);background:white}
.dir2-search::-webkit-search-cancel-button{display:none}
.dir2-search-clear{position:absolute;right:6px;top:50%;transform:translateY(-50%);width:30px;height:30px;border:none;border-radius:50%;background:transparent;color:var(--muted);font-size:.95rem;line-height:1;cursor:pointer;display:flex;align-items:center;justify-content:center;transition:.15s ease}
.dir2-search-clear:hover{background:#eef2f7;color:var(--charcoal)}
.dir2-search-clear[hidden]{display:none}
.dir2-sort{border:1px solid rgba(13,71,161,.16);border-radius:15px;padding:13px 16px;background:#fbfdff;color:var(--charcoal);font-weight:700;font-size:.88rem;cursor:pointer}
.dir2-nearme-btn{background:var(--soft-green);color:var(--teal-dark);font-weight:800;font-size:.84rem;padding:12px 18px;border-radius:15px;border:1px solid transparent;cursor:pointer;white-space:nowrap;transition:.2s ease;font-family:inherit}
.dir2-nearme-btn:hover{background:var(--teal);color:white}
.dir2-radius-row{display:none;flex-basis:100%;flex-wrap:wrap;gap:8px;margin-top:2px}
.dir2-radius-row.open{display:flex}
.dir2-map-shell{grid-area:map;border-radius:var(--radius);overflow:hidden;box-shadow:var(--shadow-sm);border:1px solid rgba(13,71,161,.1)}
.dir2-map{width:100%;height:480px;background:#eef4fb}
.dir2-cats{grid-area:cats}
.dir2-cats h2{font-size:.78rem;text-transform:uppercase;letter-spacing:.1em;color:var(--muted);font-weight:900;margin-bottom:14px}
.dir2-chip-rail{display:flex;flex-direction:column;gap:9px}
.dir2-subchip-rail{display:none;flex-direction:column;gap:8px;margin-top:14px;padding-top:14px;border-top:1px solid rgba(13,71,161,.1)}
.dir2-subchip-rail.open{display:flex}
.dir2-chip{display:inline-flex;align-items:center;gap:6px;padding:10px 16px;border-radius:999px;border:1px solid transparent;background:#eef2f7;color:#45556a;font-weight:800;font-size:.84rem;cursor:pointer;transition:.2s ease;white-space:nowrap}
.dir2-chip:hover{transform:translateY(-2px)}
.dir2-chip--all.active,.dir2-chip--all{background:#eef2f7;color:var(--charcoal)}
.dir2-chip--blue.active,.dir2-chip--blue{background:var(--soft-blue);color:var(--blue-2)}
.dir2-chip--teal.active,.dir2-chip--teal{background:var(--soft-green);color:var(--teal-dark)}
.dir2-chip--gold.active,.dir2-chip--gold{background:var(--soft-gold);color:#8b6400}
.dir2-chip--red.active,.dir2-chip--red{background:#fee2e2;color:#991b1b}
.dir2-chip.active{box-shadow:var(--shadow-sm);border-color:currentColor}
/* Category filter chips (sidebar + subcategory rail): neutral outline at rest,
solid fill only when selected — avoids every category being permanently
pastel-filled at once, and uses distinct hues instead of the shared
--soft-blue/--soft-green tokens (which resolve to the same pale value). */
#dir2-chips .dir2-chip,
#dir2-subchips .dir2-chip{background:#fff;border-color:#e2e8f0;color:#475569}
#dir2-chips .dir2-chip:hover,
#dir2-subchips .dir2-chip:hover{background:#f8fafc;border-color:#cbd5e1;transform:translateY(-2px)}
#dir2-chips .dir2-chip--all,
#dir2-subchips .dir2-chip--all{color:#334155}
#dir2-chips .dir2-chip--blue,
#dir2-subchips .dir2-chip--blue{color:#1d4ed8}
#dir2-chips .dir2-chip--teal,
#dir2-subchips .dir2-chip--teal{color:#0f766e}
#dir2-chips .dir2-chip--gold,
#dir2-subchips .dir2-chip--gold{color:#a16207}
#dir2-chips .dir2-chip--red,
#dir2-subchips .dir2-chip--red{color:#b91c1c}
#dir2-chips .dir2-chip--all.active,
#dir2-subchips .dir2-chip--all.active{background:var(--blue-dark);border-color:var(--blue-dark);color:#fff}
#dir2-chips .dir2-chip--blue.active,
#dir2-subchips .dir2-chip--blue.active{background:#1d4ed8;border-color:#1d4ed8;color:#fff}
#dir2-chips .dir2-chip--teal.active,
#dir2-subchips .dir2-chip--teal.active{background:#0f766e;border-color:#0f766e;color:#fff}
#dir2-chips .dir2-chip--gold.active,
#dir2-subchips .dir2-chip--gold.active{background:#a16207;border-color:#a16207;color:#fff}
#dir2-chips .dir2-chip--red.active,
#dir2-subchips .dir2-chip--red.active{background:#b91c1c;border-color:#b91c1c;color:#fff}
#dir2-chips .dir2-chip.active,
#dir2-subchips .dir2-chip.active{box-shadow:0 6px 16px rgba(15,23,42,.16)}
.dir2-chip-static{cursor:default;font-size:.74rem;padding:5px 12px;margin-bottom:11px;display:inline-flex}
.dir2-chip-static:hover{transform:none}
.dir2-item-cat{display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.dir2-parent-cat{font-size:.68rem;font-weight:800;text-transform:uppercase;letter-spacing:.06em;color:var(--muted);margin-bottom:11px}
.dir2-listwrap{grid-area:list;min-width:0}
.dir2-count{color:var(--muted);font-weight:700;font-size:.88rem;margin-bottom:14px}
.dir2-list{display:flex;flex-direction:column;gap:14px;max-height:560px;overflow-y:auto;padding-right:6px}
.dir2-empty{text-align:center;color:var(--muted);padding:40px 0}
.dir2-list-sentinel{height:1px}
.dir2-item{display:flex;gap:16px;background:rgba(255,255,255,.94);border-radius:var(--radius-md);box-shadow:var(--shadow-sm);border:1px solid rgba(13,71,161,.1);padding:16px;cursor:pointer;transition:transform .2s ease,box-shadow .2s ease,border-color .2s ease}
.dir2-skeleton{display:flex;gap:16px;background:rgba(255,255,255,.94);border-radius:var(--radius-md);border:1px solid rgba(13,71,161,.1);padding:16px}
.dir2-skeleton:before{content:"";flex:0 0 56px;width:56px;height:56px;border-radius:14px;background:linear-gradient(100deg,#eef2f7 30%,#f7fafc 50%,#eef2f7 70%);background-size:200% 100%;animation:dir2Shimmer 1.4s ease-in-out infinite}
.dir2-skeleton:after{content:"";flex:1;height:14px;margin-top:6px;border-radius:7px;background:linear-gradient(100deg,#eef2f7 30%,#f7fafc 50%,#eef2f7 70%);background-size:200% 100%;animation:dir2Shimmer 1.4s ease-in-out infinite}
@keyframes dir2Shimmer{0%{background-position:200% 0}100%{background-position:-200% 0}}
@media (prefers-reduced-motion:reduce){.dir2-skeleton:before,.dir2-skeleton:after{animation:none}}
.dir2-item:hover{transform:translateY(-3px);box-shadow:var(--shadow)}
.dir2-item.active{border-color:var(--teal);box-shadow:0 0 0 3px rgba(0,168,132,.15)}
.dir2-item:focus-visible{outline:3px solid var(--teal);outline-offset:2px}
.dir2-item-logo{flex:0 0 56px;width:56px;height:56px;border-radius:14px;overflow:hidden;display:flex;align-items:center;justify-content:center;font-size:1.5rem}
.dir2-item-logo--blue{background:linear-gradient(135deg,var(--blue-2),var(--blue-dark))}
.dir2-item-logo--teal{background:linear-gradient(135deg,var(--teal),var(--teal-dark))}
.dir2-item-logo--gold{background:linear-gradient(135deg,var(--gold),#e0a72f)}
.dir2-item-logo--red{background:linear-gradient(135deg,#ef4444,#b91c1c)}
.dir2-item-logo--neutral{background:#f1f5f9}
.dir2-item-logo--neutral .dir2-item-logo-icon{color:var(--blue-dark)}
.dir2-item-logo-img{width:100%;height:100%;object-fit:cover}
.dir2-item-logo-icon{color:white}
.dir2-item-body{flex:1;min-width:0}
.dir2-item-top{display:flex;align-items:baseline;gap:8px;flex-wrap:wrap}
.dir2-item-body h3{color:var(--blue-dark);font-size:1.02rem;letter-spacing:-.01em}
.dir2-item-badges{display:inline-flex;gap:6px}
.dir2-badge{font-size:.68rem;font-weight:900;padding:3px 8px;border-radius:999px;white-space:nowrap}
.dir2-badge-featured{background:var(--soft-gold);color:#8b6400}
.dir2-badge-verified{background:var(--soft-green);color:var(--teal-dark)}
.dir2-item-addr{color:var(--muted);font-size:.86rem;margin:6px 0 4px}
.dir2-item-meta{display:flex;flex-wrap:wrap;gap:14px;color:#45556a;font-size:.84rem;margin-bottom:8px}
.dir2-item-actions{display:flex;gap:16px}
.dir2-link{background:none;border:none;cursor:pointer;font-family:inherit;color:var(--teal-dark);font-weight:800;font-size:.84rem;padding:0}
.dir2-link:hover{text-decoration:underline}
.dir2-link:focus-visible,.dir2-chip:focus-visible{outline:3px solid var(--teal);outline-offset:2px}
/* Leaflet marker popup */
.dir2-popup-anim{animation:dir2PopupIn .18s ease-out}
@keyframes dir2PopupIn{from{opacity:0;transform:scale(.92) translateY(4px)}to{opacity:1;transform:scale(1) translateY(0)}}
@media (prefers-reduced-motion:reduce){.dir2-popup-anim{animation:none}}
.dir2-popup{min-width:200px}
.dir2-popup-thumb-wrap{position:relative;max-width:220px;height:110px;margin:0 auto 8px;border-radius:12px;overflow:hidden;cursor:pointer;box-shadow:0 6px 16px rgba(10,36,83,.16);display:flex;align-items:center;justify-content:center;background-size:cover;background-position:center}
.dir2-popup-thumb-wrap::before{content:'';position:absolute;inset:0;background:inherit;filter:blur(20px) saturate(1.15);transform:scale(1.3)}
.dir2-popup-thumb-wrap::after{content:'';position:absolute;inset:0;background:rgba(255,255,255,.58)}
.dir2-popup-thumb{position:relative;z-index:1;width:68px;height:68px;object-fit:contain;display:block;transition:transform .3s ease;background:#fff;border-radius:50%;padding:8px;box-sizing:border-box;box-shadow:0 4px 14px rgba(10,36,83,.2)}
.dir2-popup-thumb-wrap:hover .dir2-popup-thumb{transform:scale(1.06)}
@media (prefers-reduced-motion:reduce){.dir2-popup-thumb-wrap:hover .dir2-popup-thumb{transform:none}}
.dir2-popup strong{display:block;color:var(--blue-dark);font-size:1rem;margin-bottom:2px}
.dir2-popup-cat{display:inline-block;font-size:.72rem;font-weight:800;margin-bottom:6px}
.dir2-popup-cat--blue{color:var(--blue-2)}
.dir2-popup-cat--teal{color:var(--teal-dark)}
.dir2-popup-cat--gold{color:#8b6400}
.dir2-popup-cat--red{color:#b91c1c}
.dir2-popup-line{display:block;font-size:.82rem;color:#45556a;margin-bottom:2px}
.dir2-popup-actions{display:flex;gap:10px;margin-top:8px}
.dir2-popup-btn{font-size:.78rem;font-weight:800;color:white;background:var(--teal);padding:6px 10px;border-radius:8px;border:none;cursor:pointer;text-decoration:none;display:inline-block}
.dir2-popup-btn:hover{background:var(--teal-dark)}
/* Details modal */
body.dir2-modal-lock{overflow:hidden}
.dir2-modal-overlay{position:fixed;inset:0;background:rgba(8,20,45,.6);z-index:200;display:none;align-items:flex-start;justify-content:center;padding:40px 20px;overflow-y:auto}
.dir2-modal-overlay.open{display:flex}
.dir2-modal{background:white;border-radius:var(--radius);max-width:560px;width:100%;box-shadow:var(--shadow-lg);position:relative;overflow:hidden;margin:auto}
.dir2-modal-close{position:absolute;top:14px;right:14px;background:rgba(255,255,255,.9);border:none;width:36px;height:36px;border-radius:50%;font-size:1rem;cursor:pointer;z-index:2;box-shadow:var(--shadow-sm)}
.dir2-modal-close:focus-visible{outline:3px solid var(--teal);outline-offset:2px}
.dir2-modal-cover{width:100%;height:180px;display:flex;align-items:center;justify-content:center;font-size:3rem;color:white;padding:16px;box-sizing:border-box;position:relative;overflow:hidden}
.dir2-modal-cover--blue{background:linear-gradient(135deg,var(--blue-2),var(--blue-dark))}
.dir2-modal-cover--teal{background:linear-gradient(135deg,var(--teal),var(--teal-dark))}
.dir2-modal-cover--gold{background:linear-gradient(135deg,var(--gold),#e0a72f)}
.dir2-modal-cover--red{background:linear-gradient(135deg,#ef4444,#b91c1c)}
.dir2-modal-cover--photo{background-size:cover;background-position:center}
.dir2-modal-cover--photo::before{content:'';position:absolute;inset:0;background:inherit;filter:blur(28px) saturate(1.15);transform:scale(1.3)}
.dir2-modal-cover--photo::after{content:'';position:absolute;inset:0;background:linear-gradient(to bottom,rgba(255,255,255,.58) 0%,rgba(255,255,255,.58) 65%,rgba(255,255,255,.96) 100%)}
.dir2-modal-cover-img{position:relative;z-index:1;width:110px;height:110px;object-fit:contain;background:#fff;border-radius:50%;padding:14px;box-sizing:border-box;box-shadow:0 8px 24px rgba(10,36,83,.22)}
.dir2-modal-content{padding:24px 26px 26px}
.dir2-modal-content h2{color:var(--blue-dark);margin:10px 0 10px;font-size:1.4rem;letter-spacing:-.02em}
.dir2-modal-desc{color:var(--muted);margin-bottom:14px}
.dir2-modal-meta{list-style:none;display:grid;gap:8px;margin-bottom:10px;color:#45556a;font-size:.92rem}
.dir2-modal-meta a{color:var(--teal-dark)}
.dir2-subhead{font-size:.72rem;font-weight:900;letter-spacing:.08em;text-transform:uppercase;color:var(--teal-dark);margin:14px 0 4px}
.dir2-note{color:var(--muted);font-size:.9rem}
.dir2-modal-actions{display:flex;flex-wrap:wrap;gap:10px;margin-top:18px;padding-top:16px;border-top:1px solid rgba(13,71,161,.08)}
.dir2-btn{background:var(--soft-blue);color:var(--blue-2);font-weight:800;font-size:.84rem;padding:9px 16px;border-radius:999px;border:none;cursor:pointer;text-decoration:none;display:inline-flex;align-items:center;transition:.2s ease;font-family:inherit}
.dir2-btn:hover{background:var(--blue-2);color:white}
.dir2-btn:focus-visible{outline:3px solid var(--teal);outline-offset:2px}
.dir2-item-featured{border-color:rgba(246,196,69,.55);background:linear-gradient(180deg,rgba(255,247,223,.6),rgba(255,255,255,.94))}
.dir2-status{font-size:.68rem;font-weight:900;padding:3px 8px;border-radius:999px;white-space:nowrap;text-transform:uppercase;letter-spacing:.03em}
.dir2-status--open{background:var(--soft-green);color:var(--teal-dark)}
.dir2-status--closed{background:#f1f5f9;color:#64748b}
.dir2-status--opening,.dir2-status--closing{background:var(--soft-gold);color:#8b6400}
/* Photo gallery (details modal) + lightbox */
.dir2-gallery-strip{display:flex;gap:8px;overflow-x:auto;padding-bottom:4px;margin:8px 0}
.dir2-gallery-thumb{width:84px;height:84px;object-fit:cover;border-radius:8px;cursor:pointer;flex:0 0 auto;transition:transform .15s ease}
.dir2-gallery-thumb:hover{transform:scale(1.05)}
.dir2-lightbox-overlay{position:fixed;inset:0;background:rgba(8,20,45,.88);z-index:300;display:none;align-items:center;justify-content:center;padding:30px}
.dir2-lightbox-overlay.open{display:flex}
.dir2-lightbox-overlay img{max-width:100%;max-height:100%;border-radius:8px;box-shadow:var(--shadow-lg)}
.dir2-lightbox-overlay .dir2-modal-close{position:fixed;top:20px;right:20px}
/* Transient share toast */
.dir2-toast{position:fixed;left:50%;bottom:28px;transform:translate(-50%,20px);background:var(--blue-dark);color:white;padding:12px 20px;border-radius:999px;font-weight:700;font-size:.86rem;box-shadow:var(--shadow-lg);opacity:0;transition:opacity .3s ease,transform .3s ease;z-index:300;pointer-events:none}
.dir2-toast.show{opacity:1;transform:translate(-50%,0)}
@media (max-width:1024px){
.dir2-grid{grid-template-columns:220px 1fr;gap:18px 20px}
.dir2-map{height:400px}
.dir2-list{max-height:480px}
}
@media (max-width:768px){
.dir2-grid{
grid-template-columns:minmax(0,1fr);
grid-template-areas:
"toolbar"
"cats"
"map"
"list";
}
.dir2-toolbar{flex-direction:column;align-items:stretch}
.dir2-search-wrap,.dir2-search,.dir2-sort,.dir2-nearme-btn{flex:none;width:100%}
.dir2-cats h2{margin-bottom:8px}
.dir2-chip-rail{flex-direction:row;overflow-x:auto;padding-bottom:6px;gap:8px;-webkit-overflow-scrolling:touch}
.dir2-subchip-rail{flex-direction:row;overflow-x:auto;padding-bottom:6px;gap:8px;-webkit-overflow-scrolling:touch}
.dir2-subchip-rail.open{display:flex}
.dir2-map{height:320px}
.dir2-list{max-height:none;overflow-y:visible;padding-right:0}
}
@media (max-width:480px){
.dir2-modal-overlay{padding:20px 12px}
.dir2-modal-cover{height:150px}
}
/* Responsive audit fix: the hero emergency card's top accent stripe had
conflicting left/right/width declarations accumulated across many prior
breakpoint overrides, causing it to overhang the card's right edge by
~24px (invisible since its background is transparent at that breakpoint,
but still an incorrect box). Force a single unambiguous full-width box. */
.hero-emergency-card::before,
.hero-emergency-card.emergency-card-alt::before{
left:0 !important;
right:0 !important;
width:auto !important;
bottom:auto !important;
}
/* Public Services CMS — new optional banner image on an expanded service card.
Additive only: base .accordion-item/.service-meta rules above are untouched. */
body[data-page="services.html"] .svc-banner{
width:100%;
max-height:220px;
object-fit:cover;
border-radius:14px;
display:block;
margin:0 0 16px;
}
body[data-page="services.html"] .service-meta span a{
color:var(--civic-blue,#155eef);
font-weight:600;
text-decoration:underline;
}
/* ─────────────────────────────────────────────────────────────────────────────
Header fit — the barangay name is editable in admin, so the brand can be any
length. .brand was flex:0 0 auto with min-width:max-content while .nav-menu
could shrink below its own content, so a longer name made the nav links spill
leftward out of their container and render on top of the title.
Selectors are .site-header-scoped with !important to match the existing
header-tuning stack, which uses that specificity and would otherwise win.
───────────────────────────────────────────────────────────────────────────── */
@media (min-width: 1181px) {
/* The brand yields before the nav, and ellipses rather than overlapping, so
no name length can reproduce the collision. */
.site-header .navbar .brand {
flex: 0 1 auto !important;
min-width: 0 !important;
}
.site-header .navbar .brand > span {
min-width: 0 !important;
overflow: hidden !important;
}
.site-header .navbar .brand strong,
.site-header .navbar .brand small {
overflow: hidden !important;
text-overflow: ellipsis !important;
}
/* Links must never render outside their own box. */
.site-header .navbar .nav-menu {
min-width: max-content !important;
flex: 0 0 auto !important;
}
}
/* The container is capped at 1180px through this range, so the row is tightest
here — reclaims ~40px so a long barangay name fits without truncating. */
@media (min-width: 1181px) and (max-width: 1420px) {
/* 24px of inline padding on the bar itself was the biggest single saving
available, and costs less visually than cramping the links further. */
.site-header .navbar { gap: 18px !important; padding-left: 12px !important; padding-right: 12px !important; }
.site-header .navbar .nav-menu { gap: 2px !important; }
.site-header .navbar .nav-link { padding-left: 4px !important; padding-right: 4px !important; }
.site-header .brand img,
header .brand img { width: 52px !important; height: 52px !important; }
}
/* ─────────────────────────────────────────────────────────────────────────────
Announcements section — hover feedback, link arrow, ambient background.
The entrance animation lives in section 16.5 above; this adds the
interaction states. Scoped to .ann-heading-wrap / #ann-mini-list so nothing
else on the page is affected.
No background motion is added here: main > section::before/::after already
drifts every section with floatSide 14s, and .soft-bg:before already draws
the gradient blobs, so item 6 of the brief is satisfied by existing CSS.
───────────────────────────────────────────────────────────────────────────── */
/* Card hover: lift + deeper shadow. Overrides the lighter treatment in
section 17, which used -3px and a softer shadow. */
#ann-mini-list article {
border-left: 3px solid transparent !important;
box-shadow: 0 10px 30px rgba(0,0,0,0.05) !important;
transition: transform 300ms ease, box-shadow 300ms ease,
border-left-color 300ms ease !important;
}
/* The settled-entrance rule above is #ann-mini-list article.reveal.ann-visible
with transform:none !important, which outranks a plain article:hover — the
lift silently did nothing. Matching that specificity is what makes it work. */
/* Each card wraps its content in a link. Inherit colour so the existing
type treatment is untouched, and fill the card so the whole surface is
the click target. */
#ann-mini-list article .ann-card-link {
display: block;
color: inherit;
text-decoration: none;
}
#ann-mini-list article .ann-card-link:focus-visible {
outline: 2px solid #0B607A;
outline-offset: 4px;
border-radius: 8px;
}
/* focus-within mirrors :hover so keyboard users get the same feedback. */
#ann-mini-list article:hover,
#ann-mini-list article:focus-within,
#ann-mini-list article.reveal.ann-visible:hover,
#ann-mini-list article.reveal.ann-visible:focus-within {
transform: translateY(-6px) !important;
box-shadow: 0 20px 45px rgba(0,0,0,0.12) !important;
border-left-color: #0B607A !important;
}
/* Date picks up the accent while the card is hovered. */
#ann-mini-list article span {
color: #0B607A;
transition: color 300ms ease;
}
#ann-mini-list article:hover span,
#ann-mini-list article:focus-within span {
color: #008C95;
}
/* "View all announcements →" — the arrow eases forward on hover. */
.ann-heading-wrap .text-link .tl-arrow {
display: inline-block;
margin-left: 6px;
transition: transform 250ms ease;
}
.ann-heading-wrap .text-link:hover .tl-arrow,
.ann-heading-wrap .text-link:focus-visible .tl-arrow {
transform: translateX(5px);
}
/* Mobile: cards rise instead of sliding sideways — vertical reads more
naturally on a phone, and a 40px horizontal offset risks overflow. */
@media (max-width: 900px) {
#ann-mini-list article.reveal {
transform: translateY(30px) !important;
}
}
@media (prefers-reduced-motion: reduce) {
.ann-heading-wrap .text-link .tl-arrow,
#ann-mini-list article,
#ann-mini-list article span { transition: none !important; }
#ann-mini-list article.reveal { opacity: 1 !important; transform: none !important; }
}
/* Officials page — shown when nothing is published, replacing the shipped
sample council so an unpublished roster reads as empty rather than current. */
.ofc-empty {
grid-column: 1 / -1;
margin: 0;
padding: 28px 20px;
text-align: center;
color: #64748b;
font-size: .95rem;
background: #f8fafc;
border: 1px dashed #cbd5e1;
border-radius: 12px;
}