/* =====================================================================
Ohangwena EOI Investment Portal
css/style.css — design tokens, base elements, layout
Load order: style.css -> components.css -> responsive.css
===================================================================== */
/* ---------------------------------------------------------------------
FONTS
Montserrat and Inter are self-hosted deliberately: no third-party font
CDN on a government site, and a render-blocking external font request is
one of the most expensive things you can do to first paint on a Namibian
mobile connection.
Two faces, two jobs. Montserrat is geometric and wide — it carries
headings, eyebrows and the masthead, where it reads institutional
without reading stiff. Inter is a screen-first UI face with a large
x-height, so it takes body copy, forms and the long-form guidance
passages that used to be set in a serif.
Both are variable on the weight axis (100–900), so ONE file per family
covers every weight the site uses — no separate 400/500/600/700 files.
Each family is split into two subsets by unicode-range. The browser only
downloads latin-ext if a character in that range actually appears on the
page, so the Oshiwambo eng (ŋ, U+014B) and the Afrikaans/Portuguese
diacritics stay available without costing every visitor the bytes.
latin Inter 48 KB + Montserrat 38 KB = 86 KB, always fetched
latin-ext Inter 85 KB + Montserrat 69 KB = fetched only if needed
Both are SIL Open Font License 1.1 — free for commercial and government
use, redistribution permitted. Licence texts sit alongside the woff2
files in /assets/fonts so the provenance travels with the deliverable.
Add these to on every page, above the stylesheet links. The
crossorigin attribute is required even though the files are same-origin;
without it the browser fetches the font twice.
--------------------------------------------------------------------- */
/* Montserrat — display */
@font-face {
font-family: 'Montserrat';
font-style: normal;
font-weight: 100 900;
font-display: swap;
src: url('../assets/fonts/montserrat-var-latin.woff2') format('woff2-variations');
unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122,
U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
font-family: 'Montserrat';
font-style: normal;
font-weight: 100 900;
font-display: swap;
src: url('../assets/fonts/montserrat-var-latin-ext.woff2') format('woff2-variations');
unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF,
U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF,
U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* Inter — UI, body, forms */
@font-face {
font-family: 'Inter';
font-style: normal;
font-weight: 100 900;
font-display: swap;
src: url('../assets/fonts/inter-var-latin.woff2') format('woff2-variations');
unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122,
U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
font-family: 'Inter';
font-style: normal;
font-weight: 100 900;
font-display: swap;
src: url('../assets/fonts/inter-var-latin-ext.woff2') format('woff2-variations');
unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF,
U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF,
U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
:root {
/* Institutional — sampled from the Republic of Namibia crest in logo.png */
--ohg-crest: #00497e;
--ohg-crest-deep: #003257;
--ohg-crest-tint: #e7eef4;
/* Ink — blue-black, never pure #000 */
--ohg-ink: #0b1f33;
--ohg-ink-muted: #4a5c6e;
--ohg-ink-faint: #5a6875;
/* Region — Kalahari sand and the straw-gold of mahangu at harvest */
--ohg-sand: #efe9dd;
--ohg-sand-deep: #ded5c4;
--ohg-mahangu: #c9a227;
--ohg-mahangu-light: #e8c766;
/* Surfaces */
--ohg-paper: #ffffff;
--ohg-line: #d8dfe6;
--ohg-field-border: #9aa8b4;
/* Status */
--ohg-positive: #2e6b4f;
--ohg-warning: #a66a00;
--ohg-critical: #a32020;
/* Type stacks */
--font-display: 'Montserrat', 'Segoe UI', system-ui, Helvetica, Arial, sans-serif;
--font-ui: 'Inter', 'Segoe UI', system-ui, -apple-system, Helvetica, Arial, sans-serif;
/* --font-editorial keeps its name so components.css and responsive.css
don't need touching. It is now Inter as well: the role it marks is
"reading passage", and that role is handled with measure, size and
leading rather than a second family. */
--font-editorial: var(--font-ui);
--font-mono: ui-monospace, 'SF Mono', SFMono-Regular, Menlo, Consolas, monospace;
/* Fluid type scale */
--step--1: clamp(0.83rem, 0.8rem + 0.15vw, 0.89rem);
--step-0: clamp(1rem, 0.96rem + 0.2vw, 1.13rem);
--step-1: clamp(1.2rem, 1.13rem + 0.35vw, 1.25rem);
--step-2: clamp(1.44rem, 1.32rem + 0.58vw, 1.625rem);
--step-3: clamp(1.73rem, 1.55rem + 0.9vw, 2rem);
--step-4: clamp(2.07rem, 1.8rem + 1.36vw, 2.625rem);
--step-5: clamp(2.49rem, 2.08rem + 2.03vw, 3rem);
/* Space — 4px base */
--s1: 4px; --s2: 8px; --s3: 12px; --s4: 16px; --s5: 24px;
--s6: 32px; --s7: 48px; --s8: 64px; --s9: 96px; --s10: 128px;
--content-max: 1200px;
--header-h: 80px;
--shadow-modal: 0 8px 24px -8px rgb(11 31 51 / 0.18);
}
/* ------------------------------------------------------------------ */
/* Reset & base */
/* ------------------------------------------------------------------ */
*, *::before, *::after { box-sizing: border-box; }
html {
-webkit-text-size-adjust: 100%;
scroll-behavior: smooth;
}
body {
margin: 0;
background: var(--ohg-paper);
color: var(--ohg-ink);
font-family: var(--font-ui);
font-size: var(--step-0);
line-height: 1.6;
-webkit-font-smoothing: antialiased;
/* Long unbroken tokens — Veronica.Ekandjo@ohangwenaog.gov.na is 35
characters with no break opportunity — otherwise push the layout
wider than a 320px screen. */
overflow-wrap: break-word;
}
/* Montserrat for every heading. Its default tracking is loose at display
sizes, so it gets pulled in — more at the top of the scale than the
bottom, because the optical gap grows with size. */
h1, h2, h3, h4, h5, h6 {
margin: 0 0 var(--s4);
font-family: var(--font-display);
line-height: 1.15;
font-weight: 600;
letter-spacing: -0.01em;
text-wrap: balance;
}
h1 { font-size: var(--step-5); letter-spacing: -0.022em; }
h2 { font-size: var(--step-3); letter-spacing: -0.018em; }
h3 { font-size: var(--step-1); }
h4 { font-size: var(--step-0); letter-spacing: 0; }
p { margin: 0 0 var(--s4); }
a { color: var(--ohg-crest); text-underline-offset: 3px; overflow-wrap: anywhere; }
a:hover { color: var(--ohg-crest-deep); }
img { max-width: 100%; height: auto; }
ul, ol { margin: 0 0 var(--s4); padding-left: 1.2em; }
li { margin-bottom: var(--s2); }
hr { border: 0; border-top: 1px solid var(--ohg-line); margin: var(--s7) 0; }
/* WCAG 2.2 — focus visible, and never obscured by the sticky header */
:focus-visible {
outline: 2px solid var(--ohg-crest);
outline-offset: 2px;
border-radius: 2px;
}
[id] { scroll-margin-top: calc(var(--header-h) + var(--s5)); }
.visually-hidden {
position: absolute; width: 1px; height: 1px;
padding: 0; margin: -1px; overflow: hidden;
clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}
/* ------------------------------------------------------------------ */
/* Layout primitives */
/* ------------------------------------------------------------------ */
.wrap {
width: 100%;
max-width: var(--content-max);
margin-inline: auto;
padding-inline: var(--s5);
}
.section { padding-block: var(--s9); }
.section--tight { padding-block: var(--s7); }
.section--sand { background: var(--ohg-sand); }
.section--crest { background: var(--ohg-crest-deep); color: #fff; }
.section--crest h1,
.section--crest h2,
.section--crest h3 { color: #fff; }
.grid { display: grid; gap: var(--s5); }
.grid--2 { grid-template-columns: repeat(auto-fit, minmax(min(320px, 100%), 1fr)); }
.grid--3 { grid-template-columns: repeat(auto-fit, minmax(min(280px, 100%), 1fr)); }
.grid--4 { grid-template-columns: repeat(auto-fit, minmax(min(220px, 100%), 1fr)); }
.grid--split { grid-template-columns: minmax(0, 1.1fr) minmax(min(300px, 100%), 0.9fr); gap: var(--s7); align-items: start; }
/* Grid and flex children default to min-width:auto, so a wide child
stretches its track past the viewport instead of shrinking. */
.grid > *, .grid--split > * { min-width: 0; }
.stack > * + * { margin-top: var(--s5); }
/* ------------------------------------------------------------------ */
/* Text roles */
/* ------------------------------------------------------------------ */
/* Montserrat in caps needs less letter-spacing than a normal-width sans:
the geometric forms already sit apart. 0.16em looked airy, 0.13em holds
the label together as one shape. */
.eyebrow {
font-family: var(--font-display);
font-size: var(--step--1);
font-weight: 700;
letter-spacing: 0.13em;
text-transform: uppercase;
color: var(--ohg-crest);
margin: 0 0 var(--s3);
}
.section--crest .eyebrow,
.page-head .eyebrow { color: var(--ohg-mahangu-light); }
/* The measures came down when these moved off a serif. Inter runs a wider
x-height at the same point size, so 68ch was overshooting a comfortable
line — 62ch for the lede, 66ch for body prose. */
.lede {
font-family: var(--font-editorial);
font-size: 18px;
font-weight: 400;
line-height: 1.45;
letter-spacing: -0.011em;
color: var(--ohg-ink-muted);
}
.prose {
font-family: var(--font-editorial);
line-height: 1.7;
}
.prose li { margin-bottom: var(--s3); }
.meta { font-size: var(--step--1); color: var(--ohg-ink-faint); }
.mono {
font-family: var(--font-mono);
letter-spacing: 0.04em;
font-variant-numeric: tabular-nums;
}
.text-center { text-align: center; }
.mt-0 { margin-top: 0; }
.mb-0 { margin-bottom: 0; }
.mt-6 { margin-top: var(--s6); }
.mt-7 { margin-top: var(--s7); }
/* ------------------------------------------------------------------ */
/* Skip link, header, footer */
/* ------------------------------------------------------------------ */
.skip {
position: absolute;
left: -9999px;
top: 0;
z-index: 300;
background: var(--ohg-crest);
color: #fff;
padding: var(--s3) var(--s4);
font-weight: 600;
}
.skip:focus { left: var(--s4); top: var(--s4); color: #fff; }
.site-header {
position: sticky;
top: 0;
z-index: 100;
background: var(--ohg-paper);
border-bottom: 1px solid var(--ohg-line);
}
.site-header__bar {
display: flex;
align-items: center;
justify-content: space-between;
gap: var(--s5);
min-height: var(--header-h);
}
.brand {
display: flex;
align-items: center;
gap: var(--s3);
text-decoration: none;
color: var(--ohg-ink);
}
/* The official lockup is a wide 2.27:1 image, not a square mark. Height is
fixed and width follows, so the logo never distorts. */
.brand__logo {
height: 120px;
width: auto;
display: block;
flex: none;
}
/* crest-official.png is square (160x160). It must be sized square or it
distorts — the wide dimensions here were a leftover from when this rule
pointed at the full lockup. */
.brand__crest { width: 272px; height: 120px; flex: none; }
.brand__text { line-height: 1.2; }
/* Montserrat here so the masthead matches the headings, not the body. */
.brand__text strong {
display: block;
font-family: var(--font-display);
font-size: var(--step--1);
font-weight: 700;
letter-spacing: 0.01em;
white-space: nowrap;
}
.brand__text span {
display: block;
font-size: 0.72rem;
letter-spacing: 0.1em;
text-transform: uppercase;
color: var(--ohg-ink-faint);
white-space: nowrap;
}
.nav { display: flex; align-items: center; gap: var(--s5); }
.nav a {
font-size: var(--step--1);
font-weight: 500;
color: var(--ohg-ink);
text-decoration: none;
padding-block: var(--s2);
border-bottom: 2px solid transparent;
white-space: nowrap;
}
.nav a:hover { border-bottom-color: var(--ohg-mahangu); }
.nav a[aria-current='page'] { border-bottom-color: var(--ohg-crest); font-weight: 600; }
/* Mobile nav toggle — hidden on desktop, shown in responsive.css */
.nav-toggle {
display: none;
align-items: center;
gap: var(--s2);
background: none;
border: 1px solid var(--ohg-line);
border-radius: 2px;
padding: var(--s2) var(--s3);
font: inherit;
font-size: var(--step--1);
font-weight: 600;
color: var(--ohg-ink);
cursor: pointer;
min-height: 44px;
}
.nav-toggle__bars { display: grid; gap: 4px; width: 18px; }
.nav-toggle__bars span {
display: block; height: 2px; background: var(--ohg-ink); border-radius: 1px;
}
/* Full-screen panel. Deliberately NOT using backdrop-filter — on a
transformed ancestor it creates a new containing block and the panel
detaches from the viewport. */
.mobile-nav {
position: fixed;
inset: 0;
z-index: 200;
background: var(--ohg-crest-deep);
color: #fff;
padding: var(--s5);
overflow-y: auto;
display: none;
}
.mobile-nav[open], .mobile-nav.is-open { display: block; }
.mobile-nav__head {
display: flex; align-items: center; justify-content: space-between;
margin-bottom: var(--s6);
}
.mobile-nav__close {
background: none; border: 1px solid rgb(255 255 255 / 0.4);
color: #fff; font: inherit; font-size: var(--step--1); font-weight: 600;
padding: var(--s2) var(--s4); min-height: 44px; cursor: pointer; border-radius: 2px;
}
.mobile-nav ul { list-style: none; margin: 0; padding: 0; }
.mobile-nav li { margin: 0; border-bottom: 1px solid rgb(255 255 255 / 0.15); }
.mobile-nav a {
display: block; padding: var(--s4) 0; color: #fff;
text-decoration: none; font-size: var(--step-1); font-weight: 500;
}
.mobile-nav a[aria-current='page'] { color: var(--ohg-mahangu-light); }
body.nav-open { overflow: hidden; }
.site-footer {
background: var(--ohg-crest-deep);
color: #fff;
padding-block: var(--s8) var(--s6);
font-size: var(--step--1);
}
.site-footer a { color: #fff; }
.site-footer__grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(min(220px, 100%), 1fr));
gap: var(--s6);
padding-bottom: var(--s6);
border-bottom: 1px solid rgb(255 255 255 / 0.18);
}
/* The lockup is a coloured crest with black type. Inverting it turns the
crest into a white blob, so it sits on a white plate instead — the same
treatment it gets on official letterhead. */
.site-footer__logo-plate {
display: inline-block;
background: var(--ohg-paper);
border-radius: 3px;
padding: var(--s4) var(--s5);
margin-bottom: var(--s4);
}
.site-footer__logo {
width: 100%;
max-width: 220px;
height: auto;
display: block;
}
.site-footer h2 {
font-size: var(--step--1);
font-weight: 700;
letter-spacing: 0.12em;
text-transform: uppercase;
color: var(--ohg-mahangu-light);
margin-bottom: var(--s3);
}
.site-footer ul { list-style: none; margin: 0; padding: 0; }
.site-footer li { margin-bottom: var(--s2); }
.site-footer p { color: rgb(255 255 255 / 0.85); }
.site-footer__base {
padding-top: var(--s5);
color: rgb(255 255 255 / 0.7);
display: flex;
flex-wrap: wrap;
gap: var(--s4);
justify-content: space-between;
}
/* ------------------------------------------------------------------ */
/* Page head (interior pages) & breadcrumbs */
/* ------------------------------------------------------------------ */
.page-head {
background: var(--ohg-crest-deep);
color: #fff;
padding-block: var(--s8);
}
.page-head h1 { color: #fff; max-width: 20ch; }
.page-head__lede {
font-family: var(--font-editorial);
font-size: 16px;
line-height: 1.55;
letter-spacing: -0.011em;
color: rgb(255 255 255 / 0.85);
max-width: 60ch;
}
.breadcrumb { margin-bottom: var(--s4); }
.breadcrumb ol {
display: flex; flex-wrap: wrap; gap: var(--s2);
list-style: none; margin: 0; padding: 0;
font-size: var(--step--1); color: rgb(255 255 255 / 0.75);
}
.breadcrumb li { margin: 0; }
.breadcrumb a { color: inherit; }
/* ------------------------------------------------------------------ */
/* Reduced motion */
/* ------------------------------------------------------------------ */
@media (prefers-reduced-motion: reduce) {
*, *::before, *::after {
animation-duration: 0.01ms !important;
animation-iteration-count: 1 !important;
transition-duration: 0.01ms !important;
scroll-behavior: auto !important;
}
}
/* ------------------------------------------------------------------ */
/* Print */
/* ------------------------------------------------------------------ */
@media print {
.site-header, .site-footer, .quickbar, .nav-toggle, .mobile-nav { display: none !important; }
body { color: #000; background: #fff; }
a[href^='http']::after { content: ' (' attr(href) ')'; font-size: 0.8em; }
}