/* ============================================================================
MDA site foundation — shared by all four templates.
Every template sets its own --primary / --accent and its own display face.
Everything here is what they agree on: the scale, the rhythm, the components
that must look identical across the estate, and the accessibility floor.
DESIGN BRIEF (from the CTO, 15 Aug 2026):
· full-width with real padding and margins · large, bold type
· mobile-first · well structured
· footer line "Designed by NORA | ICT Agency"
NO EXTERNAL HOSTS. Fonts are the system stack; icons are the local sprite.
A government site must not fetch its own furniture from a third party — it
leaks every visitor's IP and puts the page at the mercy of an outage we do
not control. This is why the CDN s were removed.
========================================================================= */
/* ---- reset ------------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }
* { margin: 0; }
html { -webkit-text-size-adjust: 100%; }
img, svg, video { display: block; max-width: 100%; height: auto; }
button, input, select, textarea { font: inherit; color: inherit; }
/* Strip list markers on any styled list AND on lists inside a styled wrapper —
a nav whose
carries no class of its own still must not show bullets. */
ul[class], ol[class],
nav ul, .footer ul, .side-nav ul, .panel-note ul, .dept-list ul, .dept-grid {
list-style: none; padding: 0;
}
/* ---- tokens ------------------------------------------------------------ */
:root {
/* Each template overrides these two. Everything else derives from them. */
--primary: #0f3d5c;
--primary-dark: #08283d;
--accent: #c0392b;
/* Neutrals carry a slight cool bias so they sit WITH the primaries rather
than under them — a pure grey next to a saturated navy reads as dirty. */
--ink: #141c24;
--body: #47535f;
--soft: #6b7885;
--line: #dde3e9;
--ground: #f4f7f9;
--panel: #ffffff;
--focus: #1d6fe0;
/* Type scale — 1.25 minor third, fluid. Deliberately large: the brief asks
for bold, and government sites are read on cheap phones at arm's length. */
--t-xs: 0.8125rem;
--t-sm: 0.9375rem;
--t-md: 1.0625rem;
--t-lg: clamp(1.15rem, 0.9rem + 0.7vw, 1.35rem);
--t-xl: clamp(1.45rem, 1.1rem + 1.2vw, 1.9rem);
--t-2xl: clamp(1.9rem, 1.4rem + 2.2vw, 2.75rem);
--t-3xl: clamp(2.4rem, 1.6rem + 3.6vw, 4rem);
--t-4xl: clamp(2.9rem, 1.8rem + 5vw, 5.25rem);
/* Spacing rhythm */
--s-1: 0.5rem; --s-2: 0.875rem; --s-3: 1.25rem; --s-4: 2rem;
--s-5: 3rem; --s-6: 4.5rem; --s-7: 7rem;
--radius: 14px;
--radius-sm: 9px;
--shadow-1: 0 1px 2px rgb(16 26 36 / .05), 0 2px 8px rgb(16 26 36 / .05);
--shadow-2: 0 2px 6px rgb(16 26 36 / .06), 0 14px 38px rgb(16 26 36 / .09);
/* The page gutter. Sites are FULL-WIDTH — the gutter is the padding, not a
narrow centred column. Content that must stay readable uses --measure. */
--gutter: clamp(1.15rem, 5vw, 4.5rem);
--measure: 68ch;
--max: 1440px;
--nav-h: 76px;
--font-body: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
--font-display: var(--font-body);
--font-mono: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, monospace;
}
html {
scroll-behavior: smooth;
scroll-padding-top: calc(var(--nav-h) + 1.5rem);
}
@media (prefers-reduced-motion: reduce) {
html { scroll-behavior: auto; }
*, *::before, *::after {
animation-duration: .01ms !important; animation-iteration-count: 1 !important;
transition-duration: .01ms !important; scroll-behavior: auto !important;
}
}
body {
font-family: var(--font-body);
font-size: var(--t-md);
line-height: 1.68;
color: var(--body);
background: var(--panel);
-webkit-font-smoothing: antialiased;
text-rendering: optimizeLegibility;
overflow-x: hidden; /* nothing may scroll the page sideways */
}
/* ---- headings ---------------------------------------------------------- */
h1, h2, h3, h4 {
font-family: var(--font-display);
color: var(--ink);
line-height: 1.1;
letter-spacing: -0.022em;
text-wrap: balance;
font-weight: 800;
}
h1 { font-size: var(--t-3xl); }
h2 { font-size: var(--t-2xl); }
h3 { font-size: var(--t-xl); letter-spacing: -0.015em; }
h4 { font-size: var(--t-lg); letter-spacing: -0.01em; font-weight: 700; }
p { text-wrap: pretty; }
a { color: var(--primary); text-decoration-thickness: 1.5px; text-underline-offset: 3px; }
a:hover { color: var(--accent); }
/* Visible keyboard focus everywhere — required, not optional, on a gov site. */
:focus-visible {
outline: 3px solid var(--focus);
outline-offset: 2px;
border-radius: 3px;
}
/* Skip link — the first thing a screen-reader or keyboard user meets. */
.skip {
position: absolute; left: var(--s-3); top: -100px; z-index: 2000;
background: var(--ink); color: #fff; padding: .8rem 1.3rem;
border-radius: 0 0 var(--radius-sm) var(--radius-sm); font-weight: 700;
transition: top .18s;
}
.skip:focus { top: 0; color: #fff; }
.sr-only {
position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}
/* ---- layout ------------------------------------------------------------ */
.wrap {
width: 100%;
max-width: var(--max);
margin-inline: auto;
padding-inline: var(--gutter);
}
.section { padding-block: var(--s-6); }
.section-tight { padding-block: var(--s-5); }
.section.alt { background: var(--ground); }
.measure { max-width: var(--measure); }
/* Grid and flex items default to min-width:auto, so a long word or a wide
child refuses to shrink and pushes the whole page sideways — the single
most common cause of horizontal scroll on a phone. Every layout child here
is allowed to shrink below its content instead. */
.grid > *, .hero-inner > *, .about-grid > *, .lead-grid > *,
.layout > *, .cta-band .wrap > *, .footer .cols > * { min-width: 0; }
.grid { display: grid; gap: var(--s-3); }
.g-2 { grid-template-columns: repeat(auto-fit, minmax(min(100%, 280px), 1fr)); }
.g-3 { grid-template-columns: repeat(auto-fit, minmax(min(100%, 250px), 1fr)); }
.g-4 { grid-template-columns: repeat(auto-fit, minmax(min(100%, 210px), 1fr)); }
/* ---- section heading --------------------------------------------------- */
.eyebrow {
display: inline-flex; align-items: center; gap: .5rem;
font-size: var(--t-xs); font-weight: 800;
letter-spacing: .17em; text-transform: uppercase;
color: var(--accent); margin-bottom: var(--s-1);
}
.eyebrow::before {
content: ""; width: 26px; height: 3px; background: currentColor; border-radius: 2px;
}
.section-head { margin-bottom: var(--s-4); }
.section-head p { max-width: var(--measure); margin-top: var(--s-2); font-size: var(--t-lg); }
/* ---- icons ------------------------------------------------------------- */
.i { width: 1.25em; height: 1.25em; flex: none; }
.icon-badge {
width: 58px; height: 58px; border-radius: var(--radius-sm);
display: grid; place-items: center;
background: color-mix(in srgb, var(--primary) 10%, transparent);
color: var(--primary); margin-bottom: var(--s-2);
}
.icon-badge .i { width: 27px; height: 27px; }
/* ---- buttons ----------------------------------------------------------- */
.btn {
display: inline-flex; align-items: center; justify-content: center; gap: .6rem;
padding: .95rem 1.7rem; border-radius: var(--radius-sm);
font-weight: 700; font-size: var(--t-sm); letter-spacing: .01em;
text-decoration: none; border: 2px solid transparent; cursor: pointer;
transition: transform .16s ease, box-shadow .16s ease, background-color .16s ease;
min-height: 52px; /* comfortable touch target */
}
.btn:hover { transform: translateY(-2px); }
.btn:active { transform: translateY(0); }
.btn-primary { background: var(--primary); color: #fff; box-shadow: var(--shadow-1); }
.btn-primary:hover { background: var(--primary-dark); color: #fff; box-shadow: var(--shadow-2); }
.btn-accent { background: var(--accent); color: #fff; box-shadow: var(--shadow-1); }
.btn-accent:hover { color: #fff; filter: brightness(.93); box-shadow: var(--shadow-2); }
.btn-ghost { border-color: currentColor; color: var(--primary); background: transparent; }
.btn-ghost:hover { background: var(--primary); border-color: var(--primary); color: #fff; }
.btn-on-dark { border-color: rgb(255 255 255 / .55); color: #fff; background: rgb(255 255 255 / .07); }
.btn-on-dark:hover { background: #fff; color: var(--primary); border-color: #fff; }
/* ---- cards ------------------------------------------------------------- */
.card {
background: var(--panel); border: 1px solid var(--line);
border-radius: var(--radius); padding: var(--s-3);
transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease;
}
.card-hover:hover {
transform: translateY(-4px); box-shadow: var(--shadow-2);
border-color: color-mix(in srgb, var(--primary) 35%, var(--line));
}
.card h3 { margin-bottom: .45rem; }
.card p { font-size: var(--t-sm); }
/* ---- officers ---------------------------------------------------------- */
.officer { text-align: center; }
.officer img,
.officer .placeholder {
width: 100%; aspect-ratio: 1 / 1; object-fit: cover; object-position: center top;
border-radius: var(--radius); background: var(--ground); margin-bottom: var(--s-2);
}
.officer .placeholder { display: grid; place-items: center; color: var(--soft); }
.officer .placeholder .i { width: 42%; height: 42%; }
.officer .name { font-weight: 800; color: var(--ink); font-size: var(--t-lg); line-height: 1.25; }
/* The lead officer's TITLE is content, never markup: a ministry has a
Commissioner, an agency an MD/CEO, a commission a Chairman. */
.officer .role { color: var(--accent); font-weight: 700; font-size: var(--t-sm); margin-top: .2rem; }
.officer .bio { font-size: var(--t-sm); margin-top: .5rem; }
/* ---- stats ------------------------------------------------------------- */
.stat .value {
font-family: var(--font-display); font-size: var(--t-2xl); font-weight: 800;
color: var(--primary); line-height: 1; letter-spacing: -.03em;
font-variant-numeric: tabular-nums;
}
.stat .label {
font-size: var(--t-xs); font-weight: 700; letter-spacing: .1em;
text-transform: uppercase; color: var(--soft); margin-top: .45rem;
}
/* ---- news -------------------------------------------------------------- */
.news-item { display: grid; gap: var(--s-2); }
.news-date {
font-family: var(--font-mono); font-size: var(--t-xs); font-weight: 600;
letter-spacing: .06em; text-transform: uppercase; color: var(--accent);
}
.news-item h3 { font-size: var(--t-lg); }
/* ---- gallery ----------------------------------------------------------- */
.gallery { display: grid; gap: var(--s-2); grid-template-columns: repeat(auto-fit, minmax(min(100%, 240px), 1fr)); }
.gallery figure { margin: 0; border-radius: var(--radius); overflow: hidden; background: var(--ground); }
.gallery img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; transition: transform .35s ease; }
.gallery figure:hover img { transform: scale(1.045); }
.gallery figcaption { font-size: var(--t-xs); color: var(--soft); padding: .6rem .8rem; }
/* ---- government top bar ------------------------------------------------ */
.gov-bar {
background: var(--primary-dark); color: rgb(255 255 255 / .82);
font-size: var(--t-xs); border-bottom: 3px solid var(--accent);
}
.gov-bar .wrap {
display: flex; flex-wrap: wrap; gap: .5rem var(--s-3);
align-items: center; justify-content: space-between; padding-block: .6rem;
}
.gov-bar a { color: #fff; text-decoration: none; font-weight: 600; }
.gov-bar a:hover { text-decoration: underline; }
.gov-bar span { display: inline-flex; align-items: center; gap: .45rem; }
.gov-bar .links { display: flex; flex-wrap: wrap; gap: var(--s-2); }
/* ---- navbar ------------------------------------------------------------ */
.nav {
position: sticky; top: 0; z-index: 900;
background: rgb(255 255 255 / .93);
backdrop-filter: saturate(1.5) blur(12px);
border-bottom: 1px solid var(--line);
}
.nav .wrap {
display: flex; align-items: center; justify-content: space-between;
gap: var(--s-3); min-height: var(--nav-h);
}
.brand { display: flex; align-items: center; gap: .8rem; text-decoration: none; min-width: 0; }
.brand img { width: 48px; height: 48px; object-fit: contain; flex: none; }
.brand .org { font-size: var(--t-xs); font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--soft); line-height: 1.2; }
.brand .unit { font-family: var(--font-display); font-weight: 800; color: var(--ink); font-size: var(--t-lg); line-height: 1.15; letter-spacing: -.02em; }
.nav-links { display: flex; align-items: center; gap: .35rem; }
.nav-links a {
padding: .6rem .85rem; border-radius: var(--radius-sm); text-decoration: none;
font-weight: 650; font-size: var(--t-sm); color: var(--body); white-space: nowrap;
}
.nav-links a:hover, .nav-links a[aria-current="page"] { background: var(--ground); color: var(--primary); }
.nav-links a.cta { background: var(--accent); color: #fff; }
.nav-links a.cta:hover { filter: brightness(.93); color: #fff; }
.nav-toggle {
display: none; background: none; border: 2px solid var(--line);
border-radius: var(--radius-sm); padding: .55rem; color: var(--ink); cursor: pointer;
}
@media (max-width: 1000px) {
.nav-toggle { display: grid; place-items: center; }
/* ABSOLUTE, not fixed. `.nav` sets backdrop-filter, and a filtered ancestor
becomes the containing block for its fixed descendants — so a fixed panel
anchored to the viewport silently anchors to the NAV instead, and scrolls
away with it. That is the bug where the last menu item (Contact /
Emergency) ended up above the top of the screen and unreachable.
Absolute against the nav is what we actually want, and it survives the
filter. */
.nav-links {
position: absolute; top: 100%; left: 0; right: 0;
flex-direction: column; align-items: stretch; gap: .2rem;
background: var(--panel);
padding: var(--s-3) var(--gutter) var(--s-4);
border-bottom: 1px solid var(--line); box-shadow: var(--shadow-2);
/* Never taller than the space under the nav, and scrollable inside itself,
so a long menu can always reach its last item. */
max-height: calc(100dvh - var(--nav-h)); overflow-y: auto;
overscroll-behavior: contain;
/* Hidden by CLIPPING the parent, not by moving the panel off-screen: a
translated panel still hangs over the page and can be tabbed into. */
visibility: hidden; opacity: 0;
transform: translateY(-8px);
transition: transform .24s ease, opacity .2s ease, visibility .24s;
}
.nav-links[data-open="true"] { visibility: visible; opacity: 1; transform: translateY(0); }
.nav-links a { padding: .95rem 1rem; font-size: var(--t-md); }
/* The nav must not clip its own dropdown. */
.nav { overflow: visible; }
}
/* ---- footer ------------------------------------------------------------ */
.footer { background: var(--primary-dark); color: rgb(255 255 255 / .74); padding-block: var(--s-5) var(--s-3); }
.footer h4 { color: #fff; font-size: var(--t-sm); letter-spacing: .1em; text-transform: uppercase; margin-bottom: var(--s-2); }
.footer a { color: rgb(255 255 255 / .74); text-decoration: none; }
.footer a:hover { color: #fff; text-decoration: underline; }
.footer ul { display: grid; gap: .55rem; font-size: var(--t-sm); }
.footer .cols { display: grid; gap: var(--s-4); grid-template-columns: repeat(auto-fit, minmax(min(100%, 220px), 1fr)); }
.footer .contact-line { display: flex; gap: .6rem; align-items: flex-start; font-size: var(--t-sm); }
.footer .contact-line .i { margin-top: .25em; color: var(--accent); }
.socials { display: flex; gap: .6rem; margin-top: var(--s-2); }
.socials a {
width: 44px; height: 44px; border-radius: 50%; display: grid; place-items: center;
background: rgb(255 255 255 / .1); color: #fff;
}
.socials a:hover { background: var(--accent); }
/* The agency's signature. Required on every generated site. */
.footer-base {
margin-top: var(--s-4); padding-top: var(--s-3);
border-top: 1px solid rgb(255 255 255 / .15);
display: flex; flex-wrap: wrap; gap: .6rem var(--s-3);
justify-content: space-between; align-items: center;
font-size: var(--t-xs);
}
.footer-base .signature { font-weight: 700; color: rgb(255 255 255 / .9); letter-spacing: .02em; }
.footer-base .signature a { color: inherit; text-decoration: none; }
.footer-base .signature a:hover { color: #fff; text-decoration: underline; }
/* ---- back to top ------------------------------------------------------- */
.to-top {
position: fixed; right: var(--s-3); bottom: var(--s-3); z-index: 800;
width: 52px; height: 52px; border-radius: 50%; border: none; cursor: pointer;
background: var(--primary); color: #fff; display: grid; place-items: center;
box-shadow: var(--shadow-2); opacity: 0; visibility: hidden;
transition: opacity .22s ease, visibility .22s ease, transform .22s ease;
}
.to-top[data-show="true"] { opacity: 1; visibility: visible; }
.to-top:hover { transform: translateY(-3px); background: var(--primary-dark); }
/* ---- reveal-on-scroll (opt-in, and safe without JS) -------------------- */
[data-reveal] { opacity: 0; transform: translateY(18px); transition: opacity .55s ease, transform .55s ease; }
[data-reveal].in { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) { [data-reveal] { opacity: 1; transform: none; } }
.no-js [data-reveal] { opacity: 1; transform: none; }
/* ---- print ------------------------------------------------------------- */
@media print {
.nav, .gov-bar, .to-top, .nav-toggle { display: none !important; }
body { color: #000; font-size: 11pt; }
.section { padding-block: 1rem; }
}
/* ---- lead-officer portrait placeholder --------------------------------- */
/* The two-column introduction must hold its shape before the MDA supplies a
photograph — otherwise the column collapses and the layout reads as a
caption under a heading rather than an introduction. */
.lead-placeholder, .principal-placeholder {
display: grid; place-items: center;
width: 100%; aspect-ratio: 4 / 5;
background: var(--ground); border: 1px dashed var(--line);
border-radius: var(--radius); color: var(--soft);
}
.principal-placeholder { aspect-ratio: auto; min-height: 280px; height: 100%; border-radius: 0; }
.lead-placeholder .i, .principal-placeholder .i { width: 34%; height: 34%; opacity: .5; }
/* ── CTA enquiry form ─────────────────────────────────────────────────────
The call-to-action band rendered as a real form (cta.fields). Lives in the
SHARED sheet, not a template's, because any of the four may carry a form —
the band's colours still come from the template, so it stays on-brand.
Responses go to the MDA's own mailbox; the agency only relays them. */
.cta-form-band .wrap { display: block; }
.cta-form-band .cta-intro { margin-bottom: 1.25rem; max-width: 60ch; }
.cta-form {
display: grid; gap: .9rem 1rem;
grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
align-items: start;
}
.cta-form .field { display: flex; flex-direction: column; gap: .35rem; min-width: 0; }
/* A message box or the submit row spans the whole grid rather than sitting in one column. */
.cta-form .field-wide { grid-column: 1 / -1; }
.cta-form label { font-size: var(--t-xs); font-weight: 600; letter-spacing: .01em; }
.cta-form .req { color: var(--accent, #c99a3f); }
.cta-form input, .cta-form select, .cta-form textarea {
font: inherit; font-size: var(--t-sm);
padding: .6rem .7rem; border-radius: 8px;
border: 1px solid rgb(0 0 0 / .18); background: #fff; color: #111;
width: 100%; min-width: 0;
}
.cta-form textarea { resize: vertical; }
.cta-form input:focus-visible, .cta-form select:focus-visible, .cta-form textarea:focus-visible {
outline: 2px solid var(--accent, #c99a3f); outline-offset: 1px;
}
/* Consent: the box sits beside its sentence, and the sentence keeps its normal weight. */
.cta-form .field-check { grid-column: 1 / -1; flex-direction: row; align-items: flex-start; gap: .55rem; }
.cta-form .field-check input { width: auto; margin-top: .15rem; }
.cta-form .field-check label { font-weight: 400; font-size: var(--t-sm); }
.cta-form .cta-actions { flex-direction: row; align-items: center; gap: .9rem; flex-wrap: wrap; }
.cta-form .cta-status { font-size: var(--t-sm); margin: 0; }
.cta-form .cta-status.ok { color: #0b7a4b; font-weight: 600; }
.cta-form .cta-status.err { color: #b3261e; font-weight: 600; }
.cta-form .cta-privacy { grid-column: 1 / -1; font-size: var(--t-xs); opacity: .75; margin: 0; }
/* The honeypot. Off-screen rather than display:none — some bots skip hidden inputs. */
.cta-form .hp { position: absolute; left: -9999px; width: 1px; height: 1px; opacity: 0; }
/* On a dark CTA band the labels must invert, or they vanish against it. */
.cta-band .cta-form label, .cta-band .cta-form .cta-privacy { color: rgb(255 255 255 / .85); }
.cta-band .cta-form .field-check label { color: rgb(255 255 255 / .78); }
/* ---- long hero headlines ------------------------------------------------
Government body names are long. "Ministry of Local Government, Chieftaincy
and Community Affairs" is 62 characters, and at the display size a hero uses
it wrapped to four lines and pushed the lede and the buttons off the first
screen entirely.
The renderer stamps `data-len` on the hero
(see heroNameAttr in
home.js) so the type steps down with the name instead of the layout
breaking. It steps DOWN only — a short name keeps the full display size,
which is the whole point of a hero. Never set on a
carrying a tagline:
a tagline is written to be a headline and should stay large.
`text-wrap: balance` keeps the remaining lines even rather than leaving one
orphaned word on the last line; it is ignored by browsers that lack it.
SPECIFICITY: each template sets its own `.hero h1 { font-size }` and its
stylesheet loads AFTER this one, so a plain `.hero h1[data-len]` rule loses
the cascade at equal specificity and the headline stays full size (verified
by rendering — the attribute and the rule were both present and nothing
changed). Doubling the attribute selector raises specificity above every
template's rule without needing the same block copied into all four. */
.hero h1[data-len][data-len="long"] { font-size: var(--t-3xl); }
.hero h1[data-len][data-len="xlong"] { font-size: var(--t-2xl); letter-spacing: -.01em; }
.hero h1[data-len][data-len] { text-wrap: balance; max-width: 24ch; }