/* ==========================================================================
NACOPHA public website - nacopha.or.tz
Loaded with a plain from nacopha_website.layout, never through
web.assets_frontend, so none of it can leak into the membership portal.
Everything is namespaced under .nw for the same reason.
========================================================================== */
.nw {
--nw-red: #c41e3a;
--nw-red-dark: #8b1428;
--nw-red-soft: #fdecef;
--nw-navy: #1d3557;
--nw-navy-light: #2b4a70;
--nw-teal: #2a9d8f;
--nw-teal-soft: #e7f5f3;
--nw-sand: #f4a261;
--nw-sand-soft: #fef3e8;
--nw-ink: #16202e;
--nw-body: #4a5568;
--nw-muted: #5f6b7c; /* 5.4:1 on white - card summaries use this */
--nw-line: #e6e9ef;
--nw-line-strong: #cbd3de; /* borders that have to read as a control */
--nw-bg: #ffffff;
--nw-bg-alt: #f7f8fb;
--nw-radius: 14px;
--nw-radius-sm: 8px;
--nw-shadow: 0 2px 4px rgba(22, 32, 46, .04), 0 12px 28px rgba(22, 32, 46, .06);
--nw-shadow-lg: 0 8px 20px rgba(22, 32, 46, .08), 0 24px 60px rgba(22, 32, 46, .10);
--nw-serif: 'Playfair Display', Georgia, 'Times New Roman', serif;
--nw-sans: 'DM Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
--nw-max: 1180px;
--nw-header-h: 76px;
font-family: var(--nw-sans);
color: var(--nw-body);
background: var(--nw-bg);
font-size: 16px;
line-height: 1.65;
-webkit-font-smoothing: antialiased;
overflow-wrap: break-word;
}
/* --- What needs JavaScript, and what does not ----------------------------
.nw-js is set on by an inline script in the head, before first
paint. Anything that only works with the script running is hidden behind
it, so a blocked or broken nacopha_site.js leaves a plainer page rather
than a broken one: sections stay visible, FAQ answers stay open, the
menu stays a list. */
/* --- Bilingual switch -----------------------------------------------------
Every string ships in both languages; CSS hides the one you are not
reading. Keeps the markup editable side by side and needs no page reload. */
.nw[data-lang="en"] .l-sw,
.nw[data-lang="sw"] .l-en { display: none !important; }
/* --- Resets that Bootstrap does not already give us ---------------------- */
.nw *, .nw *::before, .nw *::after { box-sizing: border-box; }
.nw img { max-width: 100%; height: auto; }
.nw h1, .nw h2, .nw h3, .nw h4 {
font-family: var(--nw-serif);
color: var(--nw-ink);
line-height: 1.2;
margin: 0 0 .6em;
font-weight: 700;
}
.nw h1 { font-size: clamp(2.1rem, 4.4vw, 3.4rem); letter-spacing: -.02em; }
.nw h2 { font-size: clamp(1.7rem, 3vw, 2.4rem); letter-spacing: -.01em; }
.nw h3 { font-size: 1.25rem; }
.nw h4 { font-size: 1.05rem; }
.nw p { margin: 0 0 1.1em; }
.nw p:last-child { margin-bottom: 0; }
.nw a { color: var(--nw-red); text-decoration: none; transition: color .18s ease; }
.nw a:hover { color: var(--nw-red-dark); text-decoration: underline; }
.nw ul.nw-list { list-style: none; padding: 0; margin: 0 0 1.1em; }
.nw ul.nw-list li {
position: relative;
padding-left: 30px;
margin-bottom: .6em;
}
.nw ul.nw-list li .fa {
position: absolute;
left: 0;
top: .35em;
color: var(--nw-teal);
}
/* Visible keyboard focus everywhere - the site is used on shared devices. */
.nw a:focus-visible,
.nw button:focus-visible,
.nw input:focus-visible,
.nw select:focus-visible,
.nw textarea:focus-visible {
outline: 3px solid rgba(196, 30, 58, .45);
outline-offset: 2px;
}
.nw .nw-skip {
position: absolute;
left: -9999px;
top: 0;
background: var(--nw-red);
color: #fff;
padding: 12px 20px;
z-index: 2000;
}
.nw .nw-skip:focus { left: 0; color: #fff; }
/* --- Layout primitives --------------------------------------------------- */
/* #fees, #giving, #nw-main: without this the sticky header covers the
heading the reader just jumped to. */
.nw [id] { scroll-margin-top: calc(var(--nw-header-h) + 18px); }
.nw-container {
width: 100%;
max-width: var(--nw-max);
margin: 0 auto;
padding: 0 24px;
}
.nw-section { padding: 84px 0; }
.nw-section--tight { padding: 56px 0; }
.nw-section--alt { background: var(--nw-bg-alt); }
.nw-section--line { border-top: 1px solid var(--nw-line); }
.nw-eyebrow {
display: inline-flex;
align-items: center;
gap: 8px;
font-size: .8rem;
font-weight: 700;
letter-spacing: .12em;
text-transform: uppercase;
color: var(--nw-red);
margin-bottom: 14px;
}
.nw-eyebrow::before {
content: '';
width: 26px;
height: 2px;
background: var(--nw-red);
}
.nw-section-head { max-width: 720px; margin: 0 0 48px; }
.nw-section-head--center { margin-left: auto; margin-right: auto; text-align: center; }
.nw-section-head--center .nw-eyebrow::before { display: none; }
.nw-lead { font-size: 1.1rem; color: var(--nw-body); }
.nw-grid { display: grid; gap: 26px; }
.nw-grid--2 { grid-template-columns: repeat(2, 1fr); }
.nw-grid--3 { grid-template-columns: repeat(3, 1fr); }
.nw-grid--4 { grid-template-columns: repeat(4, 1fr); }
/* --- Buttons ------------------------------------------------------------- */
.nw-btn {
display: inline-flex;
align-items: center;
justify-content: center;
gap: 10px;
min-height: 48px;
padding: 13px 26px;
border: 2px solid transparent;
border-radius: 50px;
font-family: var(--nw-sans);
font-size: .95rem;
font-weight: 700;
line-height: 1.2;
cursor: pointer;
transition: transform .18s ease, box-shadow .18s ease, background .18s ease, color .18s ease;
}
.nw-btn:hover { text-decoration: none; transform: translateY(-2px); }
.nw-btn .fa, .nw-card-link .fa { line-height: 1; }
/* These all colour an , and `.nw a` above is (0,1,1) - one class and one
element. A single component class is (0,1,0) and loses to it, which is
why every red button was rendering red text on red until the cursor
touched it (:hover added a class and tipped the balance). The extra .nw
makes them (0,2,0), which wins. */
.nw .nw-btn--primary { background: var(--nw-red); color: #fff; box-shadow: 0 8px 20px rgba(196, 30, 58, .28); }
.nw .nw-btn--primary:hover { background: var(--nw-red-dark); color: #fff; box-shadow: 0 12px 26px rgba(196, 30, 58, .34); }
.nw .nw-btn--ghost { background: transparent; color: var(--nw-ink); border-color: var(--nw-line-strong); }
.nw .nw-btn--ghost:hover { color: var(--nw-red); border-color: var(--nw-red); }
.nw .nw-btn--light { background: rgba(255, 255, 255, .12); color: #fff; border-color: rgba(255, 255, 255, .5); }
.nw .nw-btn--light:hover { background: #fff; color: var(--nw-navy); }
.nw .nw-btn--white { background: #fff; color: var(--nw-red); }
.nw .nw-btn--white:hover { background: #fff; color: var(--nw-red-dark); }
.nw-btn--sm { min-height: 40px; padding: 9px 20px; font-size: .88rem; }
.nw-btn--block { width: 100%; }
/* --- Top bar ------------------------------------------------------------- */
.nw-topbar {
background: var(--nw-navy);
color: rgba(255, 255, 255, .82);
font-size: .86rem;
}
.nw-topbar .nw-container {
display: flex;
align-items: center;
justify-content: space-between;
flex-wrap: wrap;
gap: 8px 16px;
min-height: 42px;
padding-top: 6px;
padding-bottom: 6px;
}
.nw-topbar a { color: rgba(255, 255, 255, .82); }
.nw-topbar a:hover { color: #fff; text-decoration: none; }
.nw-topbar-contact { display: flex; gap: 22px; flex-wrap: wrap; }
.nw-topbar-contact .fa { color: var(--nw-sand); margin-right: 6px; }
.nw-topbar-right { display: flex; align-items: center; gap: 16px; }
.nw-lang {
display: inline-flex;
border: 1px solid rgba(255, 255, 255, .28);
border-radius: 50px;
overflow: hidden;
}
.nw-lang a {
padding: 3px 13px;
font-weight: 700;
font-size: .8rem;
letter-spacing: .04em;
line-height: 1.6;
}
.nw-lang a.is-active { background: var(--nw-red); color: #fff; }
/* --- Header -------------------------------------------------------------- */
.nw-header {
position: sticky;
top: 0;
z-index: 1000;
background: rgba(255, 255, 255, .96);
backdrop-filter: saturate(180%) blur(10px);
border-bottom: 1px solid var(--nw-line);
}
.nw-header .nw-container {
display: flex;
align-items: center;
justify-content: space-between;
gap: 20px;
min-height: var(--nw-header-h);
}
.nw-brand { display: flex; align-items: center; gap: 12px; }
.nw-brand:hover { text-decoration: none; }
.nw-brand img { width: 46px; height: 46px; object-fit: contain; }
.nw-brand-text { display: flex; flex-direction: column; line-height: 1.15; }
.nw-brand-name {
font-family: var(--nw-serif);
font-size: 1.4rem;
font-weight: 700;
color: var(--nw-navy);
letter-spacing: .01em;
}
.nw-brand-tag { font-size: .75rem; color: var(--nw-muted); letter-spacing: .05em; }
.nw-nav { display: flex; align-items: center; gap: 4px; }
.nw-nav a {
padding: 10px 13px;
border-radius: var(--nw-radius-sm);
color: var(--nw-ink);
font-size: .93rem;
font-weight: 600;
white-space: nowrap;
}
/* The header gets more room than the body copy does. */
.nw-header .nw-container { max-width: 1320px; }
.nw-nav a:hover { background: var(--nw-bg-alt); color: var(--nw-red); text-decoration: none; }
.nw-nav a.is-active { color: var(--nw-red); }
.nw-nav a.is-active::after {
content: '';
display: block;
height: 2px;
margin-top: 4px;
border-radius: 2px;
background: var(--nw-red);
}
.nw-header-cta { display: flex; align-items: center; gap: 10px; }
/* Repeated inside the mobile drawer - see the 991px block. Hiding the
header CTA on a phone without putting it back somewhere would drop the
site's primary action on the devices most members use. */
.nw-nav-cta { display: none; }
.nw-burger {
display: none;
width: 46px;
height: 46px;
align-items: center;
justify-content: center;
background: none;
border: 1px solid var(--nw-line);
border-radius: var(--nw-radius-sm);
color: var(--nw-ink);
font-size: 1.2rem;
}
/* --- Hero ---------------------------------------------------------------- */
.nw-hero {
position: relative;
overflow: hidden;
background:
radial-gradient(ellipse at 15% 10%, rgba(196, 30, 58, .16) 0%, transparent 55%),
radial-gradient(ellipse at 85% 85%, rgba(29, 53, 87, .18) 0%, transparent 55%),
linear-gradient(160deg, #fdfdfe 0%, #f4f6fa 100%);
padding: 92px 0 84px;
}
.nw-hero::after {
/* soft NACOPHA ribbon motif, drawn rather than shipped as an image */
content: '';
position: absolute;
right: -120px;
top: -80px;
width: 520px;
height: 520px;
border-radius: 50%;
background: linear-gradient(135deg, rgba(196, 30, 58, .10), rgba(42, 157, 143, .08));
filter: blur(10px);
pointer-events: none;
}
.nw-hero .nw-container { position: relative; z-index: 1; }
.nw-hero-grid {
display: grid;
grid-template-columns: 1.15fr .85fr;
gap: 56px;
align-items: center;
}
.nw-hero-badge {
display: inline-flex;
align-items: center;
gap: 9px;
padding: 7px 16px;
border-radius: 50px;
background: var(--nw-red-soft);
color: var(--nw-red-dark);
font-size: .84rem;
font-weight: 700;
margin-bottom: 22px;
}
.nw-hero h1 { margin-bottom: .35em; }
.nw-hero h1 .accent { color: var(--nw-red); }
.nw-hero-sub { font-size: 1.14rem; max-width: 34em; margin-bottom: 30px; }
.nw-hero-actions { display: flex; flex-wrap: wrap; gap: 14px; }
.nw-hero-card {
background: #fff;
border: 1px solid var(--nw-line);
border-radius: 20px;
box-shadow: var(--nw-shadow-lg);
padding: 30px;
}
.nw-hero-card h3 { margin-bottom: 6px; }
.nw-hero-card .nw-muted { font-size: .92rem; }
.nw .nw-hero-card-row {
color: var(--nw-ink);
display: flex;
align-items: center;
gap: 14px;
padding: 15px 0;
border-bottom: 1px solid var(--nw-line);
}
.nw-hero-card-row:last-of-type { border-bottom: 0; }
.nw-hero-card-row > span + span { min-width: 0; }
.nw-hero-card-icon {
flex: none;
width: 42px;
height: 42px;
border-radius: 12px;
display: flex;
align-items: center;
justify-content: center;
background: var(--nw-red-soft);
color: var(--nw-red);
font-size: 1.05rem;
}
/* --- Hero carousel --------------------------------------------------------
Slides are stacked and cross-faded rather than slid sideways: it costs no
layout work, it cannot leave a half-scrolled frame if the script stops
mid-transition, and it reads calmly behind a headline. */
.nw-slider {
position: relative;
overflow: hidden;
background: var(--nw-navy);
min-height: clamp(360px, 52vw, 560px);
}
.nw-slider-track { position: absolute; inset: 0; }
.nw-slide {
position: absolute;
inset: 0;
display: flex;
align-items: flex-end;
opacity: 0;
visibility: hidden;
transition: opacity .7s ease, visibility 0s linear .7s;
}
.nw-slide.is-current {
opacity: 1;
visibility: visible;
transition: opacity .7s ease, visibility 0s;
}
.nw-slide-image {
position: absolute;
inset: 0;
width: 100%;
height: 100%;
object-fit: cover;
}
/* Dark at the bottom where the words are, clear at the top where the
photograph is. Without it a headline lands on whatever the picture
happens to have there. */
.nw-slide-veil {
position: absolute;
inset: 0;
background: linear-gradient(
to top,
rgba(11, 19, 31, .88) 0%,
rgba(11, 19, 31, .55) 38%,
rgba(11, 19, 31, .12) 78%,
rgba(11, 19, 31, .05) 100%);
}
.nw-slide-body {
position: relative;
z-index: 2;
width: 100%;
padding-top: 40px;
padding-bottom: 62px;
color: #fff;
}
.nw .nw-slide-title {
color: #fff;
max-width: 17em;
font-size: clamp(1.75rem, 3.4vw, 2.9rem);
margin-bottom: .35em;
text-shadow: 0 2px 18px rgba(0, 0, 0, .35);
}
.nw-slide-sub {
color: rgba(255, 255, 255, .92);
max-width: 40em;
font-size: 1.06rem;
margin: 0;
text-shadow: 0 1px 12px rgba(0, 0, 0, .35);
}
.nw-slider-arrow {
position: absolute;
top: 50%;
z-index: 3;
transform: translateY(-50%);
width: 48px;
height: 48px;
display: flex;
align-items: center;
justify-content: center;
border: 0;
border-radius: 50%;
background: rgba(255, 255, 255, .2);
color: #fff;
font-size: 1.5rem;
cursor: pointer;
transition: background .18s ease;
}
.nw-slider-arrow:hover { background: var(--nw-red); }
.nw-slider-arrow--prev { left: 16px; }
.nw-slider-arrow--next { right: 16px; }
.nw-slider-dots {
position: absolute;
left: 0;
right: 0;
bottom: 14px;
z-index: 3;
display: flex;
justify-content: center;
gap: 4px;
}
/* The button is a 30px target; the dot inside it is what you see. */
.nw-slider-dot {
width: 30px;
height: 30px;
padding: 0;
border: 0;
background: none;
cursor: pointer;
display: flex;
align-items: center;
justify-content: center;
}
.nw-slider-dot::after {
content: '';
width: 9px;
height: 9px;
border-radius: 50%;
background: rgba(255, 255, 255, .5);
transition: width .25s ease, background .25s ease;
}
.nw-slider-dot.is-current::after {
width: 26px;
border-radius: 5px;
background: #fff;
}
.nw-quicklinks .nw-card { display: block; }
/* --- Stat strip ---------------------------------------------------------- */
.nw-stats {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 1px;
background: var(--nw-line);
border: 1px solid var(--nw-line);
border-radius: var(--nw-radius);
overflow: hidden;
}
.nw-stat { background: #fff; padding: 26px 20px; text-align: center; }
.nw-stat-num {
font-family: var(--nw-serif);
font-size: clamp(1.55rem, 4.6vw, 2.3rem);
font-weight: 700;
color: var(--nw-red);
line-height: 1.1;
}
.nw-stat-label {
font-size: .86rem;
color: var(--nw-muted);
text-transform: uppercase;
letter-spacing: .07em;
font-weight: 600;
}
/* --- Cards --------------------------------------------------------------- */
.nw-card {
background: #fff;
border: 1px solid var(--nw-line);
border-radius: var(--nw-radius);
padding: 28px;
height: 100%;
transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease;
}
/* A card that lifts under the cursor promises a click. Only the ones that
lead somewhere get to make that promise. */
a.nw-card:hover,
.nw-news-card:hover,
.nw-card--link:hover {
transform: translateY(-4px);
box-shadow: var(--nw-shadow);
border-color: transparent;
}
.nw-card h3 { margin-bottom: .45em; }
.nw-card p { font-size: 1rem; }
.nw-card-icon {
width: 54px;
height: 54px;
border-radius: 15px;
display: flex;
align-items: center;
justify-content: center;
font-size: 1.55rem;
margin-bottom: 18px;
background: var(--nw-red-soft);
color: var(--nw-red);
}
.nw-card-icon--teal { background: var(--nw-teal-soft); color: var(--nw-teal); }
.nw-card-icon--sand { background: var(--nw-sand-soft); color: #c9762c; }
.nw-card-icon--navy { background: #eaeef5; color: var(--nw-navy); }
.nw-card-icon--step {
font-family: var(--nw-serif);
font-size: 1.6rem;
font-weight: 700;
line-height: 1;
}
.nw-card-link { display: inline-flex; align-items: center; gap: 7px; font-weight: 700; font-size: .9rem; }
/* --- Coloured band ------------------------------------------------------- */
.nw-band {
background: linear-gradient(135deg, var(--nw-red) 0%, var(--nw-red-dark) 100%);
color: #fff;
padding: 66px 0;
}
.nw-band--navy { background: linear-gradient(135deg, var(--nw-navy) 0%, #12233b 100%); }
.nw-band h2, .nw-band h3 { color: #fff; }
.nw-band .nw-eyebrow { color: rgba(255, 255, 255, .9); }
.nw-band .nw-eyebrow::before { background: rgba(255, 255, 255, .9); }
.nw-band p { color: rgba(255, 255, 255, .88); }
.nw-band-grid {
display: grid;
grid-template-columns: 1.4fr auto;
gap: 36px;
align-items: center;
}
.nw-band .nw-stat { background: transparent; }
.nw-band .nw-stat-num { color: #fff; }
.nw-band .nw-stat-label { color: rgba(255, 255, 255, .72); }
.nw-band .nw-stats { background: rgba(255, 255, 255, .18); border-color: rgba(255, 255, 255, .18); }
/* --- Page hero (interior pages) ------------------------------------------ */
.nw-page-hero {
background:
radial-gradient(ellipse at 80% 0%, rgba(196, 30, 58, .22) 0%, transparent 60%),
linear-gradient(135deg, var(--nw-navy) 0%, #12233b 100%);
color: #fff;
padding: 62px 0 66px;
}
.nw-page-hero h1 { color: #fff; margin-bottom: .3em; }
.nw-page-hero p { color: rgba(255, 255, 255, .84); max-width: 46em; font-size: 1.05rem; }
.nw-breadcrumb {
font-size: .875rem;
color: rgba(255, 255, 255, .62);
margin-bottom: 16px;
}
.nw-breadcrumb a { color: rgba(255, 255, 255, .82); }
.nw-breadcrumb span { margin: 0 8px; }
/* --- Media / text split -------------------------------------------------- */
.nw-split {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 54px;
align-items: center;
}
.nw-split--wide-left { grid-template-columns: 1.25fr .75fr; }
/* Photographs are still coming. Until they do, the slot is a brand-tinted
panel that reads as a deliberate design element rather than a hole. */
.nw .nw-figure {
position: relative;
border-radius: 20px;
overflow: hidden;
background:
radial-gradient(ellipse at 80% 10%, rgba(196, 30, 58, .10) 0%, transparent 60%),
radial-gradient(ellipse at 10% 90%, rgba(29, 53, 87, .10) 0%, transparent 60%),
linear-gradient(140deg, #f5f7fa 0%, #eef1f6 100%);
border: 1px solid var(--nw-line);
min-height: clamp(200px, 32vw, 320px);
display: flex;
align-items: center;
justify-content: center;
text-align: center;
padding: 30px;
color: var(--nw-muted);
}
.nw-figure .fa {
display: flex;
align-items: center;
justify-content: center;
width: 78px;
height: 78px;
margin: 0 auto 16px;
border-radius: 50%;
background: rgba(196, 30, 58, .09);
color: var(--nw-red);
font-size: 1.85rem;
}
.nw-figure-note { font-size: .88rem; }
/* --- Timeline ------------------------------------------------------------ */
.nw-timeline { position: relative; padding-left: 34px; }
.nw-timeline::before {
content: '';
position: absolute;
left: 9px;
top: 6px;
bottom: 6px;
width: 2px;
background: var(--nw-line);
}
.nw-timeline-item { position: relative; padding-bottom: 30px; }
.nw-timeline-item:last-child { padding-bottom: 0; }
.nw-timeline-item::before {
content: '';
position: absolute;
left: -30px;
top: 6px;
width: 14px;
height: 14px;
border-radius: 50%;
background: #fff;
border: 3px solid var(--nw-red);
}
.nw-timeline-year {
font-family: var(--nw-serif);
font-weight: 700;
color: var(--nw-red);
font-size: 1.05rem;
}
/* --- News ---------------------------------------------------------------- */
.nw-news-card { display: flex; flex-direction: column; overflow: hidden; padding: 0; }
.nw .nw-news-thumb {
height: 172px;
background: linear-gradient(135deg, var(--nw-navy) 0%, var(--nw-red-dark) 130%);
display: flex;
align-items: center;
justify-content: center;
color: rgba(255, 255, 255, .9);
font-size: 1.7rem;
}
.nw-news-thumb .fa {
display: flex;
align-items: center;
justify-content: center;
width: 62px;
height: 62px;
border-radius: 50%;
background: rgba(255, 255, 255, .14);
}
.nw-news-body { padding: 24px; flex: 1; display: flex; flex-direction: column; }
.nw-news-meta {
display: flex;
flex-wrap: wrap;
gap: 6px 12px;
align-items: center;
font-size: .85rem;
color: var(--nw-muted);
margin-bottom: 10px;
}
.nw-tag {
display: inline-block;
padding: 3px 11px;
border-radius: 50px;
background: var(--nw-red-soft);
color: var(--nw-red-dark);
font-size: .78rem;
font-weight: 700;
letter-spacing: .03em;
}
.nw-tag--teal { background: var(--nw-teal-soft); color: #1c7268; }
.nw-tag--navy { background: #eaeef5; color: var(--nw-navy); }
.nw-news-card h3 { font-size: 1.12rem; }
.nw-news-card .nw-card-link { margin-top: auto; padding-top: 14px; }
/* --- Resources ----------------------------------------------------------- */
.nw-resource {
display: flex;
gap: 18px;
align-items: flex-start;
padding: 22px;
border: 1px solid var(--nw-line);
border-radius: var(--nw-radius);
background: #fff;
transition: border-color .2s ease, box-shadow .2s ease;
}
.nw-resource:hover { border-color: transparent; box-shadow: var(--nw-shadow); }
.nw-resource-icon {
flex: none;
width: 48px;
height: 48px;
border-radius: 12px;
display: flex;
align-items: center;
justify-content: center;
background: var(--nw-red-soft);
color: var(--nw-red);
font-size: 1.2rem;
}
.nw-resource h4 { margin-bottom: .25em; }
.nw-resource-meta { font-size: .88rem; color: var(--nw-muted); }
/* --- Accordion (FAQ) ----------------------------------------------------- */
.nw-accordion { border: 1px solid var(--nw-line); border-radius: var(--nw-radius); overflow: hidden; }
.nw-acc-item + .nw-acc-item { border-top: 1px solid var(--nw-line); }
.nw-acc-head {
width: 100%;
display: flex;
align-items: center;
justify-content: space-between;
gap: 16px;
padding: 20px 24px;
background: #fff;
border: 0;
text-align: left;
font-family: var(--nw-sans);
font-size: 1rem;
font-weight: 700;
color: var(--nw-ink);
cursor: pointer;
min-height: 48px;
}
.nw-acc-head { cursor: default; }
.nw-acc-head .fa { display: none; color: var(--nw-red); transition: transform .2s ease; }
.nw-acc-body { display: block; padding: 0 24px 22px; }
/* Collapsed only when something can expand it again. */
.nw-js .nw-acc-head { cursor: pointer; }
.nw-js .nw-acc-head:hover { background: var(--nw-bg-alt); }
.nw-js .nw-acc-head .fa { display: inline-block; }
.nw-js .nw-acc-item .nw-acc-body { display: none; }
.nw-js .nw-acc-item.is-open .nw-acc-body { display: block; }
.nw-js .nw-acc-item.is-open .nw-acc-head .fa { transform: rotate(45deg); }
/* --- Forms --------------------------------------------------------------- */
.nw-form-card {
background: #fff;
border: 1px solid var(--nw-line);
border-radius: var(--nw-radius);
box-shadow: var(--nw-shadow);
padding: 32px;
}
.nw-field { margin-bottom: 18px; }
.nw-label {
display: block;
font-size: .9rem;
font-weight: 700;
color: var(--nw-ink);
margin-bottom: 7px;
}
.nw-label .req { color: var(--nw-red); }
.nw-input,
.nw-textarea,
.nw-select {
width: 100%;
min-height: 48px;
padding: 12px 15px;
border: 1px solid var(--nw-line);
border-radius: var(--nw-radius-sm);
font-family: var(--nw-sans);
font-size: 1rem;
color: var(--nw-ink);
background: #fff;
transition: border-color .18s ease, box-shadow .18s ease;
}
.nw-input:focus,
.nw-textarea:focus,
.nw-select:focus {
border-color: var(--nw-red);
box-shadow: 0 0 0 3px rgba(196, 30, 58, .12);
}
.nw-textarea { min-height: 150px; resize: vertical; }
.nw-hp { position: absolute; left: -9999px; opacity: 0; height: 0; width: 0; }
.nw-alert {
display: flex;
gap: 12px;
padding: 15px 18px;
border-radius: var(--nw-radius-sm);
margin-bottom: 22px;
font-size: .94rem;
}
.nw-alert .fa { margin-top: .2em; }
.nw-alert--ok { background: var(--nw-teal-soft); color: #1c7268; }
.nw-alert--err { background: var(--nw-red-soft); color: var(--nw-red-dark); }
/* --- Contact blocks ------------------------------------------------------ */
.nw-contact-item { display: flex; gap: 16px; margin-bottom: 26px; }
.nw-contact-item:last-child { margin-bottom: 0; }
.nw-contact-icon {
flex: none;
width: 46px;
height: 46px;
border-radius: 13px;
display: flex;
align-items: center;
justify-content: center;
background: var(--nw-red-soft);
color: var(--nw-red);
}
.nw-contact-item h4 { margin-bottom: .2em; }
.nw-contact-item p { font-size: .95rem; margin: 0; }
/* --- Partners ------------------------------------------------------------ */
.nw-partners {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
gap: 16px;
}
.nw .nw-partner {
height: 88px;
border: 1px solid var(--nw-line);
border-radius: var(--nw-radius-sm);
display: flex;
align-items: center;
justify-content: center;
color: var(--nw-muted);
font-size: .84rem;
font-weight: 600;
text-align: center;
padding: 10px;
background: #fff;
}
/* --- Footer -------------------------------------------------------------- */
.nw-footer {
background: var(--nw-navy);
color: rgba(255, 255, 255, .72);
padding: 64px 0 0;
font-size: .93rem;
}
.nw-footer h4 {
color: #fff;
font-family: var(--nw-sans);
font-size: .88rem;
letter-spacing: .12em;
text-transform: uppercase;
margin-bottom: 18px;
}
.nw-footer a { color: rgba(255, 255, 255, .72); }
.nw-footer a:hover { color: #fff; text-decoration: none; }
.nw-footer-grid {
display: grid;
grid-template-columns: 1.6fr 1fr 1fr 1.3fr;
gap: 40px;
padding-bottom: 48px;
}
.nw-footer-brand { display: flex; align-items: center; gap: 12px; margin-bottom: 18px; }
.nw-footer-brand img { width: 46px; height: 46px; background: #fff; border-radius: 10px; padding: 4px; }
.nw-footer-brand span { font-family: var(--nw-serif); font-size: 1.35rem; color: #fff; font-weight: 700; }
.nw-footer-links { list-style: none; padding: 0; margin: 0; }
.nw-footer-links li { margin-bottom: 11px; }
.nw-social { display: flex; gap: 10px; margin-top: 20px; }
.nw-social a {
width: 40px;
height: 40px;
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
background: rgba(255, 255, 255, .10);
color: #fff;
transition: background .18s ease, transform .18s ease;
}
.nw-social a:hover { background: var(--nw-red); transform: translateY(-2px); }
.nw-footer-bottom {
border-top: 1px solid rgba(255, 255, 255, .12);
padding: 22px 0;
display: flex;
flex-wrap: wrap;
gap: 14px;
justify-content: space-between;
font-size: .88rem;
color: rgba(255, 255, 255, .55);
}
.nw-footer-bottom-links { display: flex; gap: 20px; flex-wrap: wrap; }
/* --- Region search (/networks) ------------------------------------------- */
.nw-search { position: relative; }
.nw-search .fa {
position: absolute;
left: 18px;
top: 50%;
transform: translateY(-50%);
color: var(--nw-muted);
pointer-events: none;
}
.nw-search .nw-input {
padding-left: 46px;
height: 54px;
border-radius: 50px;
font-size: 1rem;
}
/* --- Zones and region cards (/networks) ---------------------------------- */
.nw-zone { margin-bottom: 44px; }
.nw-zone:last-child { margin-bottom: 0; }
.nw-zone[hidden] { display: none; }
.nw-zone-title {
display: flex;
align-items: center;
gap: 12px;
font-size: 1.35rem;
padding-bottom: 12px;
margin-bottom: 22px;
border-bottom: 2px solid var(--nw-line);
}
.nw-zone-count {
display: inline-flex;
align-items: center;
justify-content: center;
min-width: 28px;
height: 28px;
padding: 0 9px;
border-radius: 50px;
background: var(--nw-red-soft);
color: var(--nw-red-dark);
font-family: var(--nw-sans);
font-size: .82rem;
font-weight: 700;
}
.nw-region {
position: relative;
padding: 20px 20px 18px;
border: 1px solid var(--nw-line);
border-radius: var(--nw-radius);
background: #fff;
transition: border-color .18s ease, box-shadow .18s ease, transform .18s ease;
}
/* Not a link: a colour shift acknowledges the cursor without promising a
destination. */
.nw-region:hover { border-color: var(--nw-line-strong); }
.nw-region[hidden] { display: none; }
.nw-region-code {
position: absolute;
top: 16px;
right: 16px;
font-size: .75rem;
font-weight: 700;
letter-spacing: .08em;
color: var(--nw-muted);
border: 1px solid var(--nw-line);
border-radius: 5px;
padding: 2px 6px;
}
.nw-region-name {
font-size: 1.08rem;
margin: 0 0 4px;
padding-right: 42px;
}
.nw-region-meta { font-size: .88rem; color: var(--nw-muted); margin: 0; }
/* --- Back to top --------------------------------------------------------- */
.nw-top {
position: fixed;
right: 22px;
bottom: 22px;
z-index: 900;
width: 46px;
height: 46px;
border: 0;
border-radius: 50%;
background: var(--nw-red);
color: #fff;
font-size: 1.3rem;
cursor: pointer;
box-shadow: 0 8px 20px rgba(196, 30, 58, .32);
transition: transform .18s ease, background .18s ease;
}
.nw-top:hover { background: var(--nw-red-dark); transform: translateY(-2px); }
.nw-top[hidden] { display: none; }
/* --- Real photographs in a figure slot ------------------------------------
.nw-figure is the empty placeholder; add --photo once there is an image
in it and the padding and dashed styling get out of the picture's way. */
.nw-figure--photo {
display: block;
padding: 0;
border: 0;
background: var(--nw-bg-alt);
}
.nw-figure--photo img {
display: block;
width: 100%;
height: 100%;
min-height: inherit;
object-fit: cover;
}
a.nw-figure--photo:hover { text-decoration: none; }
/* A lead image wants more height than a side figure - but still not a
fixed one, or it eats a phone screen. */
.nw-figure--tall { min-height: clamp(220px, 46vw, 340px); }
/* --- News thumbnails ----------------------------------------------------- */
a.nw-news-thumb { overflow: hidden; }
a.nw-news-thumb:hover { text-decoration: none; }
.nw-news-thumb img {
width: 100%;
height: 100%;
object-fit: cover;
transition: transform .35s ease;
}
.nw-news-card:hover .nw-news-thumb img { transform: scale(1.04); }
.nw-news-card h3 a { color: var(--nw-ink); }
.nw-news-card h3 a:hover { color: var(--nw-red); text-decoration: none; }
/* --- Editor-written prose (news bodies, page text slots) -----------------
Everything here comes out of Odoo's HTML editor, so the rules have to be
forgiving: whatever tags an editor produces should still look like the
rest of the site. */
/* Around 70 characters; an 860px column of 16px text is a tiring line. */
.nw-article { margin-top: 26px; max-width: 68ch; line-height: 1.75; }
.nw-article > *:first-child { margin-top: 0; }
.nw-article p { margin: 0 0 1.1em; }
.nw-article h2 { font-size: 1.6rem; margin: 1.6em 0 .5em; }
.nw-article h3 { font-size: 1.25rem; margin: 1.5em 0 .5em; }
.nw-article ul, .nw-article ol { margin: 0 0 1.2em; padding-left: 1.4em; }
.nw-article li { margin-bottom: .5em; }
.nw-article img {
max-width: 100%;
height: auto;
border-radius: var(--nw-radius);
margin: 1.2em 0;
}
.nw-article table {
width: 100%;
border-collapse: collapse;
margin: 1.2em 0;
display: block;
overflow-x: auto;
}
.nw-article th, .nw-article td {
border: 1px solid var(--nw-line);
padding: 10px 12px;
text-align: left;
}
.nw-article blockquote {
margin: 1.4em 0;
padding: 4px 0 4px 22px;
border-left: 3px solid var(--nw-red);
color: var(--nw-ink);
font-family: var(--nw-serif);
font-size: 1.15rem;
}
.nw-article-image {
width: 100%;
border-radius: var(--nw-radius);
margin-bottom: 8px;
}
/* --- Leadership portraits ------------------------------------------------ */
.nw-leader-photo {
display: block;
width: 104px;
height: 104px;
margin: 0 auto 16px;
border-radius: 50%;
object-fit: cover;
border: 3px solid var(--nw-line);
}
/* --- Partner logos ------------------------------------------------------- */
a.nw-partner:hover {
text-decoration: none;
border-color: var(--nw-red);
color: var(--nw-red);
}
.nw-partner img {
max-height: 58px;
max-width: 100%;
width: auto;
object-fit: contain;
}
/* --- Utilities ----------------------------------------------------------- */
.nw-muted { color: var(--nw-muted); }
/* Correct heading level for the document outline, card-sized on the page. */
.nw-h-sm { font-size: 1.05rem; }
/* Flex collapses the space between the icon and the label. */
.nw-hide-sm { display: inline-flex; align-items: center; gap: 6px; }
.nw ::selection { background: rgba(196, 30, 58, .18); }
.nw-center { text-align: center; }
.nw-mt-0 { margin-top: 0; }
.nw-mt-2 { margin-top: 18px; }
.nw-mt-3 { margin-top: 28px; }
.nw-mt-4 { margin-top: 40px; }
.nw-mb-3 { margin-bottom: 28px; }
/* Editing hints belong to staff. A visitor must never see the scaffolding,
so the badge is hidden unless the wrapper carries .nw-staff. */
.nw-todo { display: none; }
.nw-staff .nw-todo {
display: inline-block;
margin-top: 10px;
padding: 3px 10px;
border-radius: 5px;
background: #fff8e1;
border: 1px dashed #e0b400;
color: #8a6d00;
font-size: .78rem;
font-weight: 700;
letter-spacing: .04em;
}
/* --- Reveal on scroll ----------------------------------------------------
Content is visible by default. Without the .nw-js guard, a script that
never loads would leave 25 sections at opacity 0 across the site - the
page would look empty rather than unanimated. */
.nw-js .nw-reveal {
opacity: 0;
transform: translateY(22px);
transition: opacity .55s ease, transform .55s ease;
}
.nw-js .nw-reveal.is-in { opacity: 1; transform: none; }
@media (max-width: 1200px) {
/* Eight items plus the CTA is a squeeze before the burger kicks in. */
.nw-nav a { padding: 10px 9px; font-size: .88rem; }
.nw-brand-tag { display: none; }
}
/* --- Responsive ----------------------------------------------------------
Four tiers, each with a job:
1200 the eight-item nav starts to crowd the CTA
991 one column, and the nav becomes a drawer
640 phones: single column everywhere, tighter padding
400 small phones: type and controls step down again
---------------------------------------------------------------------- */
/* Navigation only. Eight items plus the wordmark and the call to action
stop fitting well before the layout does, and a squeezed nav wraps its
labels onto a second line. */
@media (max-width: 1150px) {
.nw { --nw-header-h: 68px; }
/* --- Navigation ---
No script: the menu is a plain stacked list under the brand, and the
header stops sticking (a nine-item header would eat the screen).
With the script: a drawer the burger opens. */
.nw-header { position: static; }
.nw-header .nw-container { flex-wrap: wrap; }
.nw-nav {
width: 100%;
flex-direction: column;
align-items: stretch;
gap: 0;
padding: 4px 0 12px;
}
.nw-js .nw-header { position: sticky; }
.nw-js .nw-header .nw-container { flex-wrap: nowrap; }
.nw-js .nw-burger { display: flex; }
.nw-js .nw-nav {
/* Anchored to the header, not the viewport: at the top of the page
the sticky header sits below the utility bar, and a fixed drawer
would cover it. */
position: absolute;
top: 100%;
left: 0;
right: 0;
width: auto;
background: #fff;
border-bottom: 1px solid var(--nw-line);
box-shadow: var(--nw-shadow);
padding: 10px 24px 22px;
max-height: calc(100vh - var(--nw-header-h));
overflow-y: auto;
overscroll-behavior: contain;
-webkit-overflow-scrolling: touch;
display: none;
}
.nw-js .nw-nav.is-open { display: flex; }
.nw-nav a {
padding: 14px 4px;
border-radius: 0;
border-bottom: 1px solid var(--nw-line);
}
.nw-nav a.is-active::after { display: none; }
/* The header CTA is hidden here, so the drawer carries it instead. */
.nw-header-cta .nw-btn { display: none; }
.nw-nav .nw-nav-cta {
display: flex;
align-items: center;
justify-content: center;
gap: 9px;
min-height: 48px;
margin-top: 16px;
padding: 13px 22px;
border: 0;
border-radius: 50px;
background: var(--nw-red);
color: #fff;
font-weight: 700;
}
.nw-nav .nw-nav-cta:hover {
background: var(--nw-red-dark);
color: #fff;
text-decoration: none;
}
.nw-nav .nw-nav-cta--ghost {
margin-top: 10px;
background: transparent;
color: var(--nw-ink);
border: 2px solid var(--nw-line);
}
.nw-nav .nw-nav-cta--ghost:hover {
background: transparent;
color: var(--nw-red);
border-color: var(--nw-red);
}
.nw-brand-tag { display: none; }
}
@media (max-width: 991px) {
.nw { --nw-header-h: 66px; }
.nw-section { padding: 62px 0; }
.nw-section--tight { padding: 44px 0; }
.nw-hero { padding: 64px 0 60px; }
.nw-page-hero { padding: 52px 0 54px; }
.nw-band { padding: 54px 0; }
.nw-hero-grid,
.nw-split,
.nw-split--wide-left,
.nw-band-grid { grid-template-columns: 1fr; gap: 36px; }
.nw-grid--3, .nw-grid--4 { grid-template-columns: repeat(2, 1fr); }
.nw-footer-grid { grid-template-columns: 1fr 1fr; gap: 32px; }
.nw-section-head { margin-bottom: 34px; }
.nw-topbar-contact .nw-topbar-address { display: none; }
}
@media (max-width: 640px) {
.nw { --nw-header-h: 62px; }
.nw-container { padding: 0 18px; }
.nw-section { padding: 46px 0; }
.nw-section--tight { padding: 34px 0; }
.nw-hero { padding: 44px 0 46px; }
.nw-page-hero { padding: 38px 0 42px; }
.nw-band { padding: 44px 0; }
.nw-footer { padding: 46px 0 0; }
.nw-section-head { margin-bottom: 28px; }
.nw-grid { gap: 18px; }
.nw-grid--2, .nw-grid--3, .nw-grid--4 { grid-template-columns: 1fr; }
/* Regions are two words each - a single column would make a phone
scroll past 31 of them. */
.nw-zone .nw-grid--4 { grid-template-columns: repeat(2, 1fr); }
.nw-stats { grid-template-columns: repeat(2, 1fr); }
.nw-footer-grid { grid-template-columns: 1fr; gap: 28px; }
.nw-card,
.nw-hero-card,
.nw-form-card { padding: 22px; }
.nw-news-body { padding: 20px; }
.nw-news-thumb { height: 200px; }
.nw-acc-head { padding: 16px 18px; }
.nw-acc-body { padding: 0 18px 18px; }
.nw-resource { padding: 18px; gap: 14px; }
.nw-zone-title { font-size: 1.15rem; }
.nw-zone { margin-bottom: 32px; }
.nw-topbar .nw-container { justify-content: center; }
.nw-topbar-contact { display: none; }
.nw-hide-sm { display: none; }
.nw-hero-actions { gap: 10px; }
.nw-hero-actions .nw-btn { width: 100%; }
.nw-brand-tag { display: none; }
.nw-brand img { width: 40px; height: 40px; }
.nw-brand-name { font-size: 1.25rem; }
.nw-top { right: 14px; bottom: 14px; width: 42px; height: 42px; }
.nw-footer-bottom { flex-direction: column; gap: 10px; }
}
@media (max-width: 400px) {
.nw-container { padding: 0 14px; }
.nw-btn { padding: 12px 18px; font-size: .88rem; }
.nw-btn--sm { padding: 9px 14px; }
.nw-zone .nw-grid--4 { grid-template-columns: 1fr; }
.nw-stats { grid-template-columns: 1fr; }
.nw-region-name { font-size: 1rem; }
/* Height comes down on a small screen, but the type stays at 1rem.
Safari on iOS zooms the whole page in when a field it is focusing
has text under 16px, and it does not zoom back out afterwards. The
member is then left on a page wider than the screen, scrolling
sideways to find what they were reading. */
.nw-search .nw-input { height: 48px; font-size: 1rem; }
.nw-lang a { padding: 3px 10px; }
}
@media (prefers-reduced-motion: reduce) {
.nw *, .nw *::before, .nw *::after {
animation-duration: .001ms !important;
transition-duration: .001ms !important;
}
.nw-reveal { opacity: 1; transform: none; }
}
@media print {
.nw-header, .nw-topbar, .nw-footer, .nw-btn { display: none !important; }
.nw[data-lang="en"] .l-sw, .nw[data-lang="sw"] .l-en { display: none !important; }
}