html.is-modal-open, html.is-modal-open body { overflow: hidden; }
/* Sticky .site-header (top:0, ~72px tall) overlapped anchor-jump
targets — clicking #foo or skip-link landed the heading flush with
the viewport top, where the header was now drawn over it. scroll-
padding-top reserves the header's worth of space so the browser's
native anchor-snap lands the heading visible just below the bar. */
html { scroll-padding-top: 80px; }
/* Phosphor's ph-spinner is static. Public form submit buttons reuse
the icon; without a keyframe rule it just sat there during the
request. Mirror the rule from pacta-foundation.css. */
@keyframes ph-spin { to { transform: rotate(360deg); } }
.ph.ph-spinner { display: inline-block; animation: ph-spin 1s linear infinite; }
@media (prefers-reduced-motion: reduce) {
.ph.ph-spinner { animation: none; }
}
:root {
--green-500: #0e7490;
--green-800: #155e75;
--bg-light: #f1f8f8;
--bg-dark: #023347;
--neutral-900: #171a1b;
--neutral-500: #798384;
--neutral-400: #929c9d;
--neutral-300: #c8cfd0;
--neutral-200: #e4e7e7;
--white: #fff;
--media-min-sm: 170px;
--media-min-md: 220px;
--media-min-lg: 320px;
--admin-widget-min: 120px;
--admin-widget-max: 170px;
}
* { box-sizing: border-box; }
.test-mode-banner {
position: fixed;
top: 0;
left: 0;
right: 0;
z-index: 101;
background: linear-gradient(90deg, #b45309 0%, #d97706 100%);
color: #fff;
font-size: 13px;
font-weight: 600;
letter-spacing: .02em;
border-bottom: 1px solid rgba(0,0,0,.08);
box-shadow: 0 1px 2px rgba(0,0,0,.05);
}
.test-mode-inner {
display: flex;
align-items: center;
justify-content: center;
gap: 10px;
padding: 8px 16px;
text-align: center;
line-height: 1.4;
}
.test-mode-banner svg { flex-shrink: 0; opacity: .95; }
.test-mode-banner strong { font-weight: 700; letter-spacing: .08em; text-transform: uppercase; font-size: 11px; padding: 2px 8px; background: rgba(255,255,255,.18); border-radius: 999px; }
@media (max-width: 560px) {
.test-mode-banner { font-size: 12px; }
.test-mode-inner { padding: 7px 12px; gap: 8px; }
.test-mode-banner strong { font-size: 10px; padding: 2px 6px; }
}
html, body { margin:0; padding:0; font-family:'Montserrat',system-ui,-apple-system,Segoe UI,Roboto,sans-serif; color:var(--neutral-900); font-size:var(--base-font-size,17px); background:var(--bg-light); }
.skip-link {
position: absolute;
left: 10px;
top: -44px;
z-index: 200;
background: #0e7490;
color: #fff;
padding: 8px 12px;
border-radius: 8px;
border: 1px solid rgba(42,142,158,.45);
text-decoration: none;
font-size: 14px;
font-weight: 700;
}
.skip-link:focus { top: 10px; }
/* iter 451 added tabindex="-1" to so the
skip-link reliably focuses the region. Suppress the resulting
focus ring around the entire main — it's not actionable and the
skip-link arrival is already announced by screen readers. */
main#main-content:focus { outline: none; }
/* Screen-reader-only utility — visually invisible but readable to AT.
Used for chart-data tables and any other content that's redundant
for sighted users but essential for keyboard/screen-reader access. */
.visually-hidden,
.u-visually-hidden {
position: absolute !important;
width: 1px; height: 1px;
padding: 0; margin: -1px;
overflow: hidden; clip: rect(0,0,0,0);
white-space: nowrap; border: 0;
}
a { color: inherit; text-decoration: none; }
.container { width:min(1200px, calc(100% - 32px)); margin:0 auto; }
.container-narrow { width:min(860px, calc(100% - 32px)); margin:0 auto; }
.grid-bg {
background: #E8F5FB;
position: relative;
overflow: hidden;
color: #023347;
}
.grid-bg::before {
content: '';
position: absolute;
inset: 0;
background-image: linear-gradient(rgba(2,51,71,.05) 1px, transparent 1px), linear-gradient(90deg, rgba(2,51,71,.05) 1px, transparent 1px);
background-size: 48px 48px;
pointer-events: none;
z-index: 0;
}
.grid-bg::after {
content: '';
position: absolute;
inset: 0;
background:
radial-gradient(900px 340px at 75% 0%, rgba(42,142,158,.12), transparent 65%),
radial-gradient(600px 280px at 0% 100%, rgba(26,106,255,.08), transparent 70%);
pointer-events: none;
z-index: 0;
}
.grid-bg .hero { position: relative; z-index: 1; }
.grid-bg .hero h1 { color: #023347; }
.grid-bg .hero p.sub { color: #2a6e7a; }
.site-header { position: sticky; top:0; z-index:10; background: #fff; border-bottom:1px solid #e4e7e7; box-shadow:none; }
/* ── Utility / topbar ── */
.utility-bar {
display: flex;
align-items: stretch;
background: #fff;
border-bottom: 1px solid #e1e1e1;
min-height: 88px;
overflow: visible;
position: relative;
z-index: 20;
}
.topbar-tag {
display: flex;
align-items: center;
justify-content: space-between;
gap: 10px;
background: var(--bg-dark, #023347);
color: #fff;
padding: 0 16px 0 22px;
min-width: 148px;
flex-shrink: 0;
text-decoration: none;
font-size: 12.5px;
font-weight: 700;
text-transform: uppercase;
letter-spacing: .07em;
line-height: 1.35;
transition: background .15s;
}
.topbar-tag:hover { background: #155e75; }
.topbar-brand {
display: flex;
align-items: center;
padding: 0 22px;
gap: 0;
flex-shrink: 0;
}
.topbar-emblem {
width: 52px;
height: auto;
display: block;
}
.topbar-vline {
width: 3px;
height: 54px;
background: linear-gradient(180deg, #1eb53a 0%, #009abf 100%);
border-radius: 2px;
margin: 0 18px;
flex-shrink: 0;
}
.topbar-org-name {
font-size: 13px;
font-weight: 800;
color: #023347;
text-transform: uppercase;
letter-spacing: .04em;
line-height: 1.45;
margin: 0;
}
.topbar-building {
display: flex;
align-items: center;
flex-shrink: 0;
text-decoration: none;
margin-right: 8px;
}
.topbar-building img {
height: 58px;
width: auto;
display: block;
object-fit: contain;
}
.topbar-controls {
display: flex;
align-items: center;
gap: 12px;
flex-shrink: 0;
margin-left: 8px;
}
.topbar-clock {
font-size: 13px;
color: #2d3a3b;
font-weight: 500;
white-space: nowrap;
letter-spacing: .02em;
margin-right: 4px;
}
.topbar-lang-drop { position: relative; }
.topbar-lang-trigger {
background: none;
border: 1px solid #c8d0d2;
border-radius: 4px;
cursor: pointer;
color: #2d3a3b;
font-size: 13px;
font-weight: 600;
font-family: inherit;
display: flex;
align-items: center;
gap: 5px;
padding: 5px 10px;
transition: border-color .14s, color .14s;
white-space: nowrap;
}
.topbar-lang-trigger:hover { border-color: #023347; color: #023347; }
.topbar-lang-trigger svg { transition: transform .18s; flex-shrink: 0; }
.topbar-lang-drop.open .topbar-lang-trigger { border-color: #023347; color: #023347; }
.topbar-lang-drop.open .topbar-lang-trigger svg { transform: rotate(180deg); }
.topbar-lang-menu {
display: none;
position: absolute;
top: calc(100% + 6px);
right: 0;
background: #fff;
border: 1px solid #e1e1e1;
border-radius: 6px;
box-shadow: 0 4px 16px rgba(0,0,0,.12);
min-width: 140px;
padding: 4px 0;
z-index: 9999;
}
.topbar-lang-drop.open .topbar-lang-menu { display: block; }
.topbar-lang {
display: block;
font-size: 13px;
font-weight: 500;
color: #2d3a3b;
text-decoration: none;
padding: 8px 16px;
white-space: nowrap;
transition: background .12s, color .12s;
}
.topbar-lang:hover { background: #f5f6f8; color: #023347; }
.topbar-lang.active-lang { color: var(--green-500); font-weight: 700; }
.vis-btn {
width: 38px; height: 38px;
border: 1.5px solid #9ca3af;
border-radius: 50%;
background: #f5f6f8;
color: #374151;
display: grid; place-items: center;
cursor: pointer;
padding: 0;
transition: border-color .14s, color .14s, background .14s;
flex-shrink: 0;
}
.vis-btn:hover { border-color: var(--green-500); color: var(--green-500); background: #fff; }
.search-btn {
width: 38px; height: 38px;
border: 1.5px solid #9ca3af;
border-radius: 50%;
background: transparent;
cursor: pointer;
display: inline-flex;
align-items: center;
justify-content: center;
color: #798384;
padding: 0;
transition: border-color .14s, color .14s, background .14s;
flex-shrink: 0;
}
.search-btn:hover { border-color: var(--green-500); color: var(--green-500); background: #fff; }
.topbar-fond-brand {
display: flex;
align-items: center;
gap: 9px;
flex-shrink: 0;
text-decoration: none;
}
.topbar-fond-logo {
height: 36px;
width: auto;
object-fit: contain;
display: block;
flex-shrink: 0;
}
.topbar-fond-name {
display: flex;
flex-direction: column;
line-height: 1.25;
gap: 1px;
}
.topbar-fond-name-primary {
font-size: 13px;
font-weight: 700;
color: #023347;
letter-spacing: 0.04em;
white-space: nowrap;
}
.topbar-fond-name-sub {
font-size: 11px;
font-weight: 500;
color: #4a7a90;
letter-spacing: 0.02em;
white-space: nowrap;
}
body.home-page .topbar-fond-name-primary { color: #fff; }
body.home-page .topbar-fond-name-sub { color: rgba(255,255,255,0.75); }
@media (max-width: 980px) { .topbar-controls { display: none; } }
/* Search overlay */
.search-overlay {
position: fixed;
inset: 0;
z-index: 9999;
background: rgba(2,51,71,0.72);
display: flex;
align-items: flex-start;
justify-content: center;
padding-top: 80px;
opacity: 0;
pointer-events: none;
transition: opacity .18s;
}
.search-overlay.open {
opacity: 1;
pointer-events: auto;
}
.search-overlay__box {
background: #fff;
border-radius: 14px;
box-shadow: 0 8px 48px rgba(2,51,71,0.22);
padding: 20px 24px;
width: min(600px, calc(100% - 32px));
}
.search-overlay__form {
display: flex;
align-items: center;
gap: 12px;
border: 1.5px solid #c8cfd0;
border-radius: 10px;
padding: 10px 14px;
background: #f7f9fa;
}
.search-overlay__form input {
flex: 1;
border: none;
background: transparent;
outline: none;
font-size: 16px;
font-family: inherit;
color: #171a1b;
}
.search-overlay__form input::placeholder { color: #9ca3af; }
.search-overlay__close {
background: none; border: none; cursor: pointer;
color: #798384; font-size: 22px; line-height: 1;
padding: 0; flex-shrink: 0;
}
.site-search-form { display:flex; align-items:center; border:1px solid #c8cfd0; background:#f1f3f4; }
.site-search-form input { border:0; outline:none; padding:6px 10px; width:210px; font:inherit; font-size:15px; color:#798384; background:transparent; }
.site-search-form input::placeholder { color:#929c9d; }
.site-search-form button { border:0; border-left:1px solid #c8cfd0; background:transparent; color:#798384; padding:6px 10px; font-weight:700; font-size:14px; cursor:pointer; }
.home-page .nav { min-height:78px; }
.home-page .menu { font-size:17px; }
.a11y-panel { position:fixed; top:112px; right:16px; z-index:30; width:min(320px, calc(100% - 32px)); background:#fff; border:1px solid #e1e1e1; box-shadow:0 6px 24px rgba(0,0,0,.12); padding:14px; display:none; color:#1a1a2e; border-radius:8px; }
.a11y-panel.open { display:block; }
.a11y-panel h4 { margin:0 0 10px; font-size:16px; }
.a11y-row { display:flex; align-items:center; justify-content:space-between; gap:10px; margin-top:10px; }
.a11y-row label { font-size:14px; color:#1a1a2e; }
.a11y-row .btn-mini { border:1px solid #e1e1e1; background:#f5f6f8; color:#1a1a2e; font-weight:700; padding:6px 9px; cursor:pointer; border-radius:4px; }
.a11y-row .btn-mini.active { background:var(--green-500); color:#fff; border-color:var(--green-500); }
body.a11y-contrast {
--bg-light: #ffffff;
--bg-dark: #000000;
--neutral-900: #000000;
--neutral-500: #111111;
--neutral-400: #222222;
--neutral-300: #444444;
--neutral-200: #777777;
--green-500: #000000;
--green-800: #000000;
}
body.a11y-contrast .btn,
body.a11y-contrast .contact-btn,
body.a11y-contrast .tool-pill,
body.a11y-contrast .vis-btn,
body.a11y-contrast .btn-mini {
background:#000 !important;
color:#fff !important;
border-color:#000 !important;
}
body.a11y-contrast .site-header,
body.a11y-contrast .utility-bar,
body.a11y-contrast .grid-bg,
body.a11y-contrast .card,
body.a11y-contrast .item,
body.a11y-contrast .news-item,
body.a11y-contrast .fact,
body.a11y-contrast .partner,
body.a11y-contrast .page-link-card,
body.a11y-contrast .events-block,
body.a11y-contrast .doc-table,
body.a11y-contrast .a11y-panel {
background:#fff !important;
color:#000 !important;
}
body.a11y-contrast .a11y-row label,
body.a11y-contrast .a11y-panel h4 {
color:#000 !important;
}
body.a11y-grayscale { filter: grayscale(1); }
.nav { position:relative; display:grid; grid-template-columns:auto 1fr auto; align-items:center; gap:12px; min-height:72px; padding:8px 0; }
.topbar-building { justify-self:start; }
.topbar-controls { justify-self:end; }
.brand { display:flex; align-items:center; gap:12px; flex-shrink:0; font-size:22px; font-weight:700; letter-spacing:.01em; color:var(--neutral-900); text-transform:none; }
.brand .brand-name { display:flex; flex-direction:column; gap:1px; }
.brand .brand-name-main { font-size:20px; font-weight:700; color:var(--green-500); line-height:1.1; letter-spacing:.01em; }
.brand .brand-name-sub { font-size:13px; font-weight:500; color:var(--neutral-500); letter-spacing:.04em; text-transform:uppercase; line-height:1; }
.brand-dot { width:44px; height:44px; border-radius:50%; border:2px solid var(--green-500); background:#f1f3f4; color:var(--green-500); display:grid; place-items:center; font-weight:700; font-size:14px; letter-spacing:.04em; flex-shrink:0; }
.menu { display:flex; justify-content:center; align-items:center; gap:22px; margin:0; color:var(--neutral-900); font-size:17px; font-weight:600; overflow:visible; }
.menu > a, .menu .nav-item { white-space:nowrap; letter-spacing:.01em; }
.menu a { white-space:nowrap; letter-spacing:.01em; padding-bottom:3px; border-bottom:2px solid transparent; transition:color .15s, border-color .15s; }
.menu a:hover { color:var(--green-500); border-bottom-color:var(--green-500); }
.menu a.active { color:var(--green-500); font-weight:700; border-bottom-color:var(--green-500); }
.contact-btn { flex-shrink:0; background:#E8F5FB; color:#023347; padding:10px 18px; font-size:14px; font-weight:700; border-radius:5px; border:1.5px solid #b8dce8; transition:background .18s ease, border-color .18s; }
.contact-btn:hover { background:#cce7f5; border-color:#0e7490; }
/* DROPDOWN NAV */
.nav-item { position:relative; }
.nav-item::after {
content: "";
position: absolute;
left: 0;
right: 0;
top: 100%;
height: 12px;
}
.nav-item > a { display:flex; align-items:center; gap:5px; cursor:pointer; }
.nav-item > a .ph-caret-down { font-size:10px; flex-shrink:0; opacity:.55; transition:transform .2s; }
.nav-item:hover > a .ph-caret-down, .nav-item.is-open > a .ph-caret-down, .nav-item:focus-within > a .ph-caret-down { transform:rotate(180deg); opacity:1; }
/* Subpage residence cue — see dropdown.js. Without this, navigating
into a dropdown's child page gives no top-nav highlighting at all. */
.nav-item.has-dropdown.is-section-active > a { color: var(--green-600, #255f40); font-weight: 600; }
.dropdown {
position: absolute;
top: calc(100% + 8px);
left: 50%;
transform: translateX(-50%);
min-width: 270px;
background: #fff;
border: 1px solid #d8e0e1;
border-top: 3px solid var(--green-500);
box-shadow: 0 16px 40px rgba(2,51,71,.13), 0 2px 8px rgba(0,0,0,.07);
padding: 6px 0;
z-index: 100;
display: none;
border-radius: 0 0 6px 6px;
}
/* :focus-within keeps the dropdown open while keyboard users tab
through its links — without it, tabbing into a hidden submenu
meant the focused link was visually unreachable. */
.nav-item:hover .dropdown, .nav-item.is-open .dropdown, .nav-item:focus-within .dropdown { display: block; }
.dropdown a {
display: flex;
align-items: center;
padding: 13px 20px;
font-size: 15px;
font-weight: 600;
color: #2d3a3b;
border-bottom: 1px solid #edf1f1;
transition: background .13s, color .13s, padding-left .13s;
letter-spacing: .005em;
white-space: nowrap;
line-height: 1.3;
position: relative;
}
.dropdown a::before {
content: '';
position: absolute;
left: 0; top: 0; bottom: 0;
width: 3px;
background: var(--green-500);
transform: scaleY(0);
transition: transform .13s;
border-radius: 0 2px 2px 0;
}
.dropdown a:last-child { border-bottom: 0; }
.dropdown a:hover {
background: #f0f9fa;
color: var(--green-500);
padding-left: 26px;
}
.dropdown a:hover::before { transform: scaleY(1); }
/* HAMBURGER BUTTON */
.hamburger { display:none; flex-direction:column; justify-content:center; gap:5px; cursor:pointer; padding:7px; background:none; border:1px solid #e1e1e1; width:38px; height:38px; flex-shrink:0; }
.hamburger span { display:block; width:20px; height:2px; background:#1a1a2e; border-radius:2px; transition:transform .22s ease, opacity .18s ease; }
.hamburger.is-open span:nth-child(1) { transform:rotate(45deg) translate(5px,5px); }
.hamburger.is-open span:nth-child(2) { opacity:0; transform:scaleX(0); }
.hamburger.is-open span:nth-child(3) { transform:rotate(-45deg) translate(5px,-5px); }
/* MOBILE NAV OVERLAY */
.mobile-nav { display:none; position:fixed; inset:0; z-index:39; background:#fff; overflow-y:auto; padding:80px 24px 60px; }
.mobile-nav.is-open { display:block; }
.mobile-nav-label { font-size:11px; text-transform:uppercase; letter-spacing:.12em; color:var(--green-500); margin:22px 0 4px; font-weight:700; display:block; }
.mobile-nav a { display:block; padding:13px 0; color:#1a1a2e; font-size:17px; font-weight:600; border-bottom:1px solid #e1e1e1; }
.mobile-nav a:hover { color:var(--green-500); }
.mobile-nav-sub { padding-left:14px; }
.mobile-nav-sub a { font-size:15px; padding:9px 0; font-weight:400; color:#707070; }
.mobile-nav-cta { margin-top:28px; display:block; background:#E8F5FB; color:#023347 !important; padding:15px 24px; font-size:16px; font-weight:700; text-align:center; border:1.5px solid #b8dce8 !important; border-radius:6px; }
@media (max-width: 1240px){
.menu { gap:16px; font-size:16px; }
.contact-btn { padding:9px 13px; font-size:13px; }
}
.hero { position:relative; z-index:1; padding:90px 0 70px; }
.hero.center { text-align:center; }
.hero h1 { margin:0 0 22px; font-size:clamp(42px, 8vw, 70px); line-height:1.2; letter-spacing:-.01em; font-weight:700; }
.hero p.sub { margin:0; color:var(--neutral-500); font-size:20px; line-height:1.4; }
.hero-cinematic { position:relative; overflow:hidden; min-height:76vh; background:#023347; color:#fff; }
.hero-cinematic::before { content:""; position:absolute; inset:0; background:linear-gradient(180deg, rgba(2,51,71,.2) 0%, rgba(2,51,71,.64) 100%); pointer-events:none; z-index:0; }
.hero-cinematic::after { content:""; position:absolute; inset:0; background-image:linear-gradient(rgba(255,255,255,.05) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,.05) 1px, transparent 1px); background-size:72px 72px; opacity:.16; pointer-events:none; z-index:0; }
/* Cinematic hero. The .hero-cinematic-video has its autoplay attr
stripped on slow networks / save-data / prefers-reduced-motion, so
give the wrapper a CSS gradient fallback that holds the brand
colours instead of leaving a black void behind the H1. */
.hero-cinematic-bg {
position: absolute; inset: 0; pointer-events: none;
background: linear-gradient(135deg, #0d2738 0%, #1b5c67 60%, #0e7490 100%);
}
.hero-cinematic-video { position:absolute; inset:0; width:100%; height:100%; object-fit:cover; filter:saturate(.95) contrast(1.02) brightness(.62); transform:scale(1.02); }
.orb { position:absolute; border-radius:50%; filter:blur(24px); opacity:.28; animation:heroDrift 16s ease-in-out infinite; }
.orb-1 { width:520px; height:520px; left:-130px; top:8%; background:radial-gradient(circle,#0e7490 0%, rgba(37,99,235,0) 72%); }
.orb-2 { width:460px; height:460px; right:-120px; top:26%; background:radial-gradient(circle,#1a6aff 0%, rgba(26,106,255,0) 72%); animation-delay:2.4s; }
.orb-3 { width:380px; height:380px; left:30%; bottom:-170px; background:radial-gradient(circle,#013d8c 0%, rgba(1,61,140,0) 72%); animation-delay:4.4s; }
.scan { position:absolute; left:-32%; width:164%; height:190px; background:linear-gradient(90deg, rgba(255,255,255,0), rgba(255,255,255,.16), rgba(255,255,255,0)); mix-blend-mode:screen; transform:skewY(-7deg); opacity:.24; animation:heroSweep 11s linear infinite; }
.scan-1 { top:16%; }
.scan-2 { top:52%; animation-delay:5.4s; }
.hero-cinematic-inner { position:relative; z-index:1; min-height:72vh; display:flex; flex-direction:column; justify-content:center; align-items:flex-start; padding:100px 0 160px; }
.home-page .hero-cinematic-inner { align-items:center; text-align:center; }
.hero-cinematic-copy h1 { margin:0 0 16px; font-size:clamp(44px,6.9vw,74px); line-height:1.04; letter-spacing:-.02em; color:#f1f3f4; text-shadow:0 8px 28px rgba(0,0,0,.28); }
.hero-cinematic-copy .lead { margin:0; max-width:860px; font-size:20px; line-height:1.48; color:#c8cfd0; }
.eyebrow { margin:0 0 12px; font-size:12px; letter-spacing:.16em; text-transform:uppercase; color:#c8cfd0; font-weight:700; }
.hero-outline-btn { border-color:#c8cfd0; color:#f1f3f4; background:transparent; }
.hero-outline-btn:hover { background:rgba(42,142,158,.24); }
.hero-member-btn {
display: inline-flex;
align-items: center;
gap: 11px;
background: #fff;
color: #023347;
border: none;
border-radius: 6px;
padding: 16px 30px;
font-family: inherit;
font-size: 1rem;
font-weight: 700;
letter-spacing: .01em;
text-decoration: none;
cursor: pointer;
box-shadow: 0 6px 32px rgba(0,0,0,.28), 0 2px 8px rgba(0,0,0,.18);
transition: background .18s, color .18s, box-shadow .18s, transform .12s;
position: relative;
overflow: hidden;
}
.hero-member-btn::after {
content: '';
position: absolute;
inset: 0;
background: linear-gradient(120deg, transparent 30%, rgba(42,142,158,.10) 100%);
opacity: 0;
transition: opacity .22s;
}
.hero-member-btn:hover {
background: #e8f6f8;
color: #023347;
box-shadow: 0 10px 40px rgba(0,0,0,.32), 0 3px 10px rgba(42,142,158,.18);
transform: translateY(-2px);
}
.hero-member-btn:hover::after { opacity: 1; }
.hero-member-btn:active { transform: translateY(0); box-shadow: 0 4px 18px rgba(0,0,0,.22); }
.hero-member-btn svg { color: #0e7490; flex-shrink: 0; }
.hero-member-btn .btn-label { display: flex; flex-direction: column; text-align: left; line-height: 1.15; }
.hero-member-btn .btn-label-sub { font-size: .72rem; font-weight: 500; color: #0e7490; letter-spacing: .04em; text-transform: uppercase; margin-top: 1px; }
.hero-benefits-btn {
display: inline-flex;
align-items: center;
gap: 11px;
background: #fff;
color: #023347;
border: none;
border-radius: 6px;
padding: 16px 30px;
font-family: inherit;
font-size: 1rem;
font-weight: 700;
letter-spacing: .01em;
text-decoration: none;
cursor: pointer;
box-shadow: 0 6px 32px rgba(0,0,0,.28), 0 2px 8px rgba(0,0,0,.18);
transition: background .18s, color .18s, box-shadow .18s, transform .12s;
position: relative;
overflow: hidden;
}
.hero-benefits-btn::after {
content: '';
position: absolute;
inset: 0;
background: linear-gradient(120deg, transparent 30%, rgba(42,142,158,.10) 100%);
opacity: 0;
transition: opacity .22s;
}
.hero-benefits-btn:hover {
background: #e8f6f8;
color: #023347;
box-shadow: 0 10px 40px rgba(0,0,0,.32), 0 3px 10px rgba(42,142,158,.18);
transform: translateY(-2px);
}
.hero-benefits-btn:hover::after { opacity: 1; }
.hero-benefits-btn:active { transform: translateY(0); box-shadow: 0 4px 18px rgba(0,0,0,.22); }
.hero-benefits-btn svg { color: #0e7490; flex-shrink: 0; }
.hero-benefits-btn .btn-label { display: flex; flex-direction: column; text-align: left; line-height: 1.15; }
.hero-cinematic-panel { border:1px solid rgba(200,207,208,.38); background:linear-gradient(160deg, rgba(2,51,71,.84), rgba(27,92,103,.66)); backdrop-filter:blur(8px); box-shadow:0 18px 42px rgba(0,0,0,.34); padding:18px; }
.hero-cinematic-panel h3 { margin:0 0 12px; font-size:24px; }
.hero-mini-kpis { display:grid; gap:10px; margin-bottom:10px; }
.hero-mini-kpis div { border:1px solid rgba(200,207,208,.28); background:rgba(244,249,250,.08); padding:10px 12px; }
.hero-mini-kpis span { display:block; font-size:12px; letter-spacing:.04em; color:#c8cfd0; margin-bottom:5px; }
.hero-mini-kpis strong { font-size:32px; line-height:1; color:#0e7490; }
.hero-cinematic-strip { position:absolute; left:0; right:0; bottom:0; z-index:1; border-top:1px solid #155e75; background:rgba(2,51,71,.8); backdrop-filter:blur(8px); }
.hero-strip-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
gap: 0;
}
.hero-strip-grid a {
border-right: 1px solid rgba(200,207,208,.24);
padding: 14px 16px;
min-height: clamp(72px, 8vw, 90px);
display: grid;
align-content: center;
gap: 5px;
transition: background .16s ease;
}
.hero-strip-grid a:last-child { border-right:0; }
.hero-strip-grid a:hover { background:rgba(42,142,158,.18); }
.hero-strip-grid span { font-size:11px; color:#c8cfd0; text-transform:uppercase; letter-spacing:.08em; }
.hero-strip-grid strong { font-size:16px; line-height:1.3; color:#f1f3f4; font-weight:700; }
/* Home page: glass header floating over the video */
.home-page .site-header {
position: fixed;
top: 36px; left: 0; right: 0;
background: rgba(2, 12, 24, 0.38);
backdrop-filter: blur(20px) saturate(1.5);
-webkit-backdrop-filter: blur(20px) saturate(1.5);
border-bottom: 1px solid rgba(255,255,255,0.08);
z-index: 100;
}
@media (max-width: 560px) {
.home-page .site-header { top: 32px; }
}
.home-page .brand { color: #fff; }
.home-page .brand-dot { background: rgba(255,255,255,0.12); color: #fff; border-color: rgba(255,255,255,0.35); }
.home-page .menu a { color: rgba(255,255,255,0.82); border-bottom-color: transparent; }
.home-page .menu a:hover,
.home-page .menu a.active { color: #fff; border-bottom-color: rgba(255,255,255,0.6); }
.home-page .topbar-lang-trigger {
color: rgba(255,255,255,0.85);
border-color: rgba(255,255,255,0.25);
}
.home-page .topbar-lang-trigger:hover,
.home-page .topbar-lang-drop.open .topbar-lang-trigger { color: #fff; border-color: rgba(255,255,255,0.6); }
.home-page .topbar-lang-menu {
background: #0b2535;
border-color: rgba(255,255,255,0.12);
box-shadow: 0 12px 32px rgba(0,0,0,0.4);
}
.home-page .topbar-lang { color: rgba(255,255,255,0.8); }
.home-page .topbar-lang:hover { background: rgba(255,255,255,0.08); color: #fff; }
.home-page .topbar-lang.active-lang { color: #00c9dd; }
.home-page .vis-btn,
.home-page .search-btn { background: rgba(255,255,255,0.1); border-color: rgba(255,255,255,0.25); color: #fff; }
.home-page .hero-cinematic { min-height: 100vh; }
.home-page .dropdown {
background: #0b2535;
border-color: rgba(255,255,255,0.12);
border-top-color: #00c9dd;
box-shadow: 0 16px 40px rgba(0,0,0,.4);
}
.home-page .dropdown a { color: rgba(255,255,255,0.85); border-bottom-color: rgba(255,255,255,0.07); }
.home-page .dropdown a:hover { background: rgba(255,255,255,0.08); color: #00c9dd; }
.home-page .nav-item > a .ph-caret-down { color: rgba(255,255,255,0.6); }
.entry-hero { position:relative; z-index:1; padding:78px 0 64px; text-align:center; }
.entry-hero h1 { margin:0 0 14px; font-size:clamp(40px,7vw,64px); line-height:1.15; font-weight:700; }
.entry-hero .lead { margin:0 auto 26px; max-width:860px; color:var(--neutral-500); font-size:20px; line-height:1.4; }
.entry-tools { display:flex; justify-content:center; gap:12px; flex-wrap:wrap; margin-bottom:28px; }
.tool-pill { background:#fff; border:1px solid var(--neutral-200); padding:10px 14px; font-size:15px; color:var(--neutral-500); box-shadow:0 3px 6px rgba(100,100,100,.2); }
.entry-contacts {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(170px, 1fr));
gap: 14px;
text-align: left;
}
.entry-contacts .cell { background:#fff; border:1px solid var(--neutral-200); box-shadow:0 3px 6px rgba(100,100,100,.2); padding:16px; }
.entry-contacts .k { display:block; color:var(--neutral-500); font-size:15px; margin-bottom:4px; }
.entry-contacts .v { font-weight:700; }
.activity-strip { margin-top:22px; background:#fff; border:1px solid var(--neutral-200); box-shadow:0 3px 6px rgba(100,100,100,.2); padding:18px; text-align:left; }
.activity-strip h3 { margin:0 0 12px; font-size:24px; }
.activity-list { display:grid; grid-template-columns:repeat(auto-fill, minmax(min(300px, 100%), 1fr)); gap:12px; }
.activity-list a { display:block; border:1px solid var(--neutral-200); padding:12px; font-weight:600; }
.activity-list small { display:block; color:var(--neutral-500); font-weight:500; margin-top:4px; }
.facts-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(170px, 1fr));
gap: 14px;
margin-top: 20px;
}
.fact { background:#fff; border:1px solid var(--neutral-200); box-shadow:0 3px 6px rgba(100,100,100,.2); padding:16px; border-radius:8px; }
.fact .k { display:block; color:var(--neutral-500); font-size:15px; margin-bottom:5px; }
.fact .v { font-weight:700; line-height:1.4; }
.fact-value { font-size:34px; font-weight:700; color:var(--green-500); }
.is-loading-muted { opacity: .4; }
.mini-news { display:grid; grid-template-columns:repeat(auto-fill, minmax(min(300px, 100%), 1fr)); gap:16px; margin-top:22px; }
.news-item { background:#fff; border:1px solid var(--neutral-200); box-shadow:0 3px 6px rgba(100,100,100,.2); padding:18px; border-radius:8px; }
.news-item .tag { color:var(--green-500); font-size:14px; font-weight:700; margin-bottom:6px; display:block; }
.news-item h4 { margin:0 0 8px; font-size:20px; line-height:1.35; }
.news-item p { margin:0; color:var(--neutral-500); line-height:1.6; }
.top-story-grid { display:grid; grid-template-columns:1.2fr .8fr; gap:18px; margin-top:22px; }
.top-story-main { background:#fff; border:1px solid var(--neutral-200); box-shadow:0 3px 6px rgba(100,100,100,.2); padding:24px; border-radius:8px; }
.top-story-main h3 { margin:8px 0 10px; font-size:34px; line-height:1.2; }
.top-story-main p { margin:0 0 16px; color:var(--neutral-500); font-size:18px; line-height:1.5; }
.top-story-list { display:grid; gap:12px; }
.split-panels { display:grid; grid-template-columns:1fr 1fr; gap:20px; }
.events-dual { display:grid; grid-template-columns:1fr 1fr; gap:20px; margin-top:22px; }
.events-block { background:#fff; border:1px solid var(--neutral-200); box-shadow:0 3px 6px rgba(100,100,100,.2); padding:18px; border-radius:8px; }
.events-block h3 { margin:0; font-size:24px; }
.hero-cinematic .meta-line { color:#c8cfd0; font-size:15px; margin:6px 0 0; }
.meta-line { color:var(--neutral-500); font-size:15px; margin:6px 0 0; }
.content-shell { max-width:940px; }
.breadcrumbs { margin:0 0 14px; color:var(--neutral-500); font-size:15px; }
.content-shell h1 { margin:0; font-size:48px; line-height:1.18; }
.article-cover {
margin-top: 18px;
width: 100%;
aspect-ratio: 16 / 7;
min-height: clamp(220px, 34vw, 360px);
background: linear-gradient(135deg,#b8d8e8,#9acad8);
border: 1px solid var(--neutral-200);
}
.article-content { margin-top:18px; display:grid; gap:14px; }
.article-content p { margin:0; color:var(--neutral-900); line-height:1.8; font-size:18px; }
.video-frame {
margin-top: 18px;
width: 100%;
aspect-ratio: 16 / 9;
min-height: clamp(220px, 38vw, 420px);
border: 1px solid var(--neutral-200);
display: grid;
place-items: center;
background: #f5f6f8;
color: var(--neutral-500);
font-weight: 700;
border-radius: 8px;
}
.partner-grid { display:grid; grid-template-columns:repeat(auto-fill, minmax(150px,1fr)); gap:14px; margin-top:24px; }
.partner {
border: 1px solid var(--neutral-200);
background: #fff;
min-height: clamp(82px, 12vw, 110px);
display: grid;
place-items: center;
padding: 16px;
border-radius: 8px;
box-shadow: 0 3px 6px rgba(100,100,100,.2);
transition: border-color .18s ease, box-shadow .18s ease;
}
.partner:hover { border-color:var(--green-500); }
.partner img { max-width:100%; max-height:56px; object-fit:contain; filter:grayscale(15%); transition:filter .2s ease; }
.partner:hover img { filter:none; }
.page-links { display:grid; grid-template-columns:repeat(auto-fill, minmax(min(300px, 100%), 1fr)); gap:16px; margin-top:28px; }
.page-link-card { border:1px solid var(--neutral-200); background:#fff; box-shadow:0 3px 6px rgba(100,100,100,.2); padding:18px; border-radius:8px; transition: border-color .18s ease, box-shadow .18s ease; }
.page-link-card:hover { border-color: var(--green-500); }
.page-link-card h3 { margin:0 0 8px; font-size:22px; }
.page-link-card p { margin:0; color:var(--neutral-500); }
.btn { display:inline-flex; align-items:center; justify-content:center; background:#E8F5FB; color:#023347; padding:14px 20px; font-size:16px; font-weight:700; border:1.5px solid #b8dce8; cursor:pointer; border-radius:5px; transition:background .18s, border-color .18s; }
.btn:hover { background:#cce7f5; border-color:#0e7490; }
.section { padding:64px 0; background:var(--bg-light); }
.section-title { font-size:40px; line-height:1.2; margin:0 0 14px; color:#0e7490; padding-bottom:12px; border-bottom:3px solid #0e7490; display:inline-block; }
.section-sub { color:#798384; font-size:20px; line-height:1.4; margin:0; }
.section-tight { padding-top:28px; }
.hero-cta-row { margin-top:28px; margin-bottom:0; display:flex; justify-content:center; }
.home-page .hero-cta-row { justify-content:center; }
/* Homepage CTA — bottom-right corner of the video hero */
.hero-cta-corner {
position: absolute;
bottom: 130px; /* sits above the stats bar with breathing room */
right: 60px;
z-index: 3;
display: flex;
flex-direction: column;
gap: 12px;
width: 360px; /* both buttons stretch to this shared width */
}
.hero-cta-corner .hero-member-btn,
.hero-cta-corner .hero-benefits-btn {
width: 100%;
box-sizing: border-box;
}
@media (max-width: 860px) {
.hero-cta-corner {
position: relative;
bottom: auto; right: auto;
width: auto; min-width: 280px; max-width: 96vw;
padding: 24px 20px 0;
align-self: center;
}
}
.section-action { margin-top:18px; }
.section-header-row {
display: flex;
justify-content: space-between;
align-items: flex-end;
gap: 16px;
margin-bottom: 24px;
}
.section-header-row .section-title { margin-bottom: 6px; border-bottom: none; padding-bottom: 0; }
.section-header-row .section-sub { margin: 0; }
.see-all-link {
display: inline-flex;
align-items: center;
gap: 7px;
flex-shrink: 0;
font-size: 15px;
font-weight: 700;
color: var(--green-600, #255f40);
text-decoration: none;
border: 2px solid var(--green-500, #0e7490);
border-radius: 6px;
padding: 9px 18px;
transition: background .15s, color .15s;
white-space: nowrap;
align-self: center;
}
.see-all-link svg { transition: transform .15s; }
.see-all-link:hover { background: var(--green-500, #0e7490); color: #fff; }
.see-all-link:hover svg { transform: translateX(4px); }
.media-spotlight-grid { display:grid; grid-template-columns:1.3fr .7fr; gap:18px; margin-top:22px; }
.media-spotlight-main { background:#fff; border:1px solid var(--neutral-200); box-shadow:0 3px 6px rgba(100,100,100,.2); padding:18px; }
.media-spotlight-main .media-lg {
width: 100%;
aspect-ratio: 16 / 9;
min-height: clamp(220px, 30vw, 320px);
margin-bottom: 12px;
}
.media-spotlight-main h3 { margin:8px 0 10px; font-size:32px; line-height:1.2; }
.media-spotlight-main p { margin:0 0 14px; color:var(--neutral-500); font-size:18px; line-height:1.55; }
.media-spotlight-list { display:grid; gap:12px; }
.video-hub { display:grid; grid-template-columns:1.25fr .75fr; gap:18px; margin-top:22px; }
.video-hub-main { background:#fff; border:1px solid var(--neutral-200); box-shadow:0 3px 6px rgba(100,100,100,.2); padding:16px; }
.video-player-shell { position:relative; width:100%; padding-top:56.25%; border:1px solid var(--neutral-200); background:#f5f6f8; margin-bottom:12px; overflow:hidden; border-radius:6px; }
.video-player-shell iframe { position:absolute; inset:0; width:100%; height:100%; border:0; }
.video-hub-main h3 { margin:8px 0 8px; font-size:30px; line-height:1.2; }
.video-hub-main p { margin:0 0 8px; color:var(--neutral-500); line-height:1.55; font-size:17px; }
.video-hub-list { display:grid; gap:10px; align-content:start; }
.video-hub-item {
width: 100%;
border: 1px solid var(--neutral-200);
background: #fff;
padding: 10px;
display: grid;
grid-template-columns: minmax(80px, 27%) 1fr;
gap: 10px;
align-items: center;
cursor: pointer;
text-align: left;
}
.video-hub-item:hover { border-color:var(--green-500); }
.video-hub-item.is-active { border-color:var(--green-500); background:#e0f0f8; }
.video-hub-thumb {
width: 100%;
aspect-ratio: 16 / 9;
min-height: 52px;
border: 1px solid var(--neutral-200);
background: linear-gradient(135deg,#b8d8e8,#9acad8);
position: relative;
}
.video-hub-thumb::before { content:''; position:absolute; left:50%; top:50%; transform:translate(-40%,-50%); width:0; height:0; border-top:9px solid transparent; border-bottom:9px solid transparent; border-left:14px solid #fff; }
.video-hub-copy strong { display:block; font-size:16px; margin-bottom:4px; color:var(--neutral-900); }
.video-hub-copy small { color:var(--neutral-500); font-size:14px; }
.goal-grid { display:grid; grid-template-columns:1fr 1fr; gap:12px; margin-top:16px; }
.goal-card { background:#fff; border:1px solid var(--neutral-200); box-shadow:0 3px 6px rgba(100,100,100,.2); padding:14px; }
.goal-card h4 { margin:0 0 6px; font-size:20px; line-height:1.3; }
.goal-card p { margin:0; color:var(--neutral-500); line-height:1.55; }
.open-data-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(170px, 1fr));
gap: 12px;
margin-top: 22px;
}
.open-data-card { background:#fff; border:1px solid var(--neutral-200); box-shadow:0 3px 6px rgba(100,100,100,.2); padding:16px; display:grid; gap:8px; }
.open-data-card .k { color:var(--neutral-500); font-size:15px; }
.open-data-card strong { font-size:34px; line-height:1; color:var(--green-500); }
.open-data-card a { color:var(--green-500); font-weight:700; font-size:14px; }
.cards { display:grid; grid-template-columns:repeat(auto-fill, minmax(min(300px, 100%), 1fr)); gap:18px; margin-top:36px; }
.card { background:#fff; border:1px solid var(--neutral-200); box-shadow:0 3px 6px rgba(100,100,100,.2); padding:20px; border-radius:8px; }
.card h2,
.card h3 { margin:0 0 10px; font-size:24px; line-height:1.35; }
.card p { margin:0; color:var(--neutral-500); line-height:1.6; }
.card-cover { aspect-ratio: 16 / 9; border-radius: 6px; margin: -4px -4px 14px; background-position: center; background-size: cover; }
.media {
width: 100%;
aspect-ratio: 16 / 10;
min-height: clamp(160px, 23vw, 240px);
background: linear-gradient(135deg,#b8d8e8,#9acad8);
margin-bottom: 14px;
}
.split { display:grid; grid-template-columns:1.1fr .9fr; gap:28px; align-items:center; }
.list { display:grid; gap:12px; margin-top:18px; }
.list .item { border:1px solid var(--neutral-200); background:#fff; padding:16px; border-radius:8px; transition: border-color .18s ease, box-shadow .18s ease; }
.list a.item:hover { border-color: var(--green-500); box-shadow: 0 4px 14px rgba(1,61,140,.12); }
.list .item h4,
.list .item h3 { margin:0 0 6px; font-size:20px; }
.list .item p { margin:0; color:var(--neutral-500); }
/* ── Hero stats bar (glassmorphism) ── */
.hero-stats-bar {
position: absolute;
bottom: 0;
left: 0;
right: 0;
z-index: 2;
backdrop-filter: blur(22px) saturate(1.5);
-webkit-backdrop-filter: blur(22px) saturate(1.5);
background: rgba(2, 14, 26, 0.52);
border-top: 1px solid rgba(255,255,255,0.09);
}
.hero-stats-row {
display: grid;
grid-template-columns: repeat(7, 1fr);
}
.hero-stat {
padding: 16px 0;
text-align: center;
border-right: 1px solid rgba(255,255,255,0.08);
}
.hero-stat:last-child { border-right: none; }
.hero-stat-num {
display: block;
font-size: clamp(1.1rem, 1.5vw, 1.8rem);
font-weight: 700;
color: #fff;
line-height: 1;
letter-spacing: -.01em;
}
.hero-stat-label {
display: block;
font-size: .7rem;
font-weight: 500;
color: rgba(255,255,255,.65);
text-transform: uppercase;
letter-spacing: .06em;
margin-top: 6px;
line-height: 1.35;
padding: 0 10px;
}
@media (max-width: 1100px) {
.hero-stats-row { grid-template-columns: repeat(4, 1fr); }
.hero-stat:nth-child(4) { border-right: none; }
}
@media (max-width: 700px) {
.hero-stats-row { grid-template-columns: repeat(3, 1fr); }
.hero-stat:nth-child(3),
.hero-stat:nth-child(6) { border-right: none; }
}
@media (max-width: 460px) {
.hero-stats-row { grid-template-columns: repeat(2, 1fr); }
.hero-stat:nth-child(2n) { border-right: none; }
}
/* ── /Hero stats bar ── */
.dark-cta { background:#023347; color:#fff; border-bottom:1px solid #155e75; }
.dark-cta .row { display:flex; align-items:center; justify-content:space-between; gap:24px; padding:60px 0; }
.dark-cta h2 { margin:0; font-size:48px; line-height:1.2; max-width:840px; }
.dark-cta .btn {
background: transparent;
border: 1px solid #fff;
border-radius: 8px;
color: #fff;
}
.dark-cta .btn:hover {
background: #155e75;
}
/* ── Footer ─────────────────────────────────────────────── */
.site-footer { background: #E8F5FB; color: #2c4a52; border-top: 2px solid #b8dce8; }
/* Two-column grid: left = all content, right = map */
.footer-inner {
width: min(1200px, calc(100% - 32px));
margin: 0 auto;
}
.footer-grid {
display: grid;
grid-template-columns: 1fr 1fr 1fr 2fr;
gap: 24px;
padding: 20px 0 14px;
}
.footer-col-brand .footer-logo-img { height: 56px; width: auto; display: block; margin-bottom: 6px; }
.footer-col-title { color: #023347; font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .1em; margin: 0 0 12px; }
.footer-col a, .footer-col p { display: block; font-size: 13px; color: #3a6670; text-decoration: none; margin: 0 0 6px; line-height: 1.5; }
.footer-col a:hover { color: #023347; }
/* ── Social links ──────────────────────────────────────── */
.social-links {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 7px;
margin-top: 2px;
}
.social-link {
display: flex; align-items: center; gap: 7px;
padding: 7px 10px; border-radius: 9px;
background: rgba(255,255,255,0.82);
border: 1px solid rgba(2,51,71,0.08);
color: #023347; text-decoration: none;
box-shadow: 0 2px 8px rgba(2,51,71,0.08);
transition: transform .18s ease, box-shadow .18s ease, background .18s ease;
min-width: 0;
}
.social-link svg { width: 18px; height: 18px; display: block; flex-shrink: 0; color: var(--sc); }
.social-link span { display: block; font-size: 13px; font-weight: 700; line-height: 1; white-space: nowrap; color: #023347; }
.social-link:hover {
background: #fff;
transform: translateY(-2px);
box-shadow: 0 6px 18px rgba(2,51,71,0.13);
color: #023347;
}
/* Copyright bar */
.footer-bottom-bar { border-top: 1px solid #b8dce8; }
.footer-bottom-info { display: flex; gap: 20px; flex-wrap: wrap; padding: 16px 0; font-size: 13px; color: #6a9aaa; }
.footer-bottom-info a { color: #6a9aaa; text-decoration: none; }
.footer-bottom-info a:hover { color: #023347; }
/* ── Responsive ─────────────────────────────────────────── */
@media (max-width: 860px) {
.footer-grid { grid-template-columns: 1fr 1fr; gap: 20px; padding: 24px 0 18px; }
.social-links { grid-template-columns: 1fr 1fr 1fr; }
.footer-bottom-info { padding: 12px 0; }
}
@media (max-width: 520px) {
.footer-grid { grid-template-columns: 1fr; padding: 20px 0 14px; }
.social-links { grid-template-columns: 1fr 1fr 1fr; }
.footer-bottom-info { flex-direction: column; gap: 6px; }
}
.kpi-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(170px, 1fr));
gap: 16px;
margin-top: 28px;
}
.kpi { background:#fff; border:1px solid var(--neutral-200); box-shadow:0 3px 6px rgba(100,100,100,.2); padding:18px; text-align:center; border-radius:8px; }
.kpi strong { display:block; font-size:34px; color:var(--green-500); }
.faq { display:grid; gap:12px; }
.faq .q { background:#fff; border-radius:8px; padding:18px; border:1px solid var(--neutral-200); box-shadow:0 3px 6px rgba(100,100,100,.2); }
.faq .q h4 { margin:0; font-size:20px; }
.faq .q p { margin:10px 0 0; color:var(--neutral-500); }
.faq-toggle { width:100%; text-align:left; background:transparent; border:0; font-size:20px; font-weight:700; cursor:pointer; padding:0; }
.faq .q.is-collapsed p { display:none; }
.form-grid { display:grid; grid-template-columns:1fr 1fr; gap:12px; }
.form-grid input, .form-grid select, .form-grid textarea { width:100%; padding:13px 14px; border:1px solid var(--neutral-200); font:inherit; background:#fff; color:var(--neutral-900); border-radius:5px; }
.form-grid textarea { min-height:140px; grid-column:1 / -1; resize:vertical; }
.form-field { display: grid; gap: 6px; }
.form-field--full { grid-column: 1 / -1; }
.form-label { font-size: 15px; font-weight: 600; color: var(--neutral-500); }
.form-help { font-size: 14px; color: var(--neutral-400); margin: 0; }
.form-actions { margin-top: 14px; display: flex; flex-wrap: wrap; align-items: center; gap: 10px; }
.form-consent { font-size: 15px; color: var(--neutral-500); }
.section-no-top { padding-top: 0; }
.section-no-bottom { padding-bottom: 0; }
.card-split-action { display: flex; align-items: center; justify-content: space-between; gap: 16px; }
.card-split-action h3 { margin: 0 0 8px; }
.card-action { margin-top: 12px; }
.card-title-tight { margin: 0 0 8px; }
.card-subtle { margin: 0 0 14px; color: var(--neutral-500); }
.check-line-consent { display: flex; gap: 10px; align-items: flex-start; }
.check-line-consent input { margin-top: 3px; }
.faq-list-spaced { margin-top: 16px; }
.faq-search-label { display: block; font-weight: 700; margin-bottom: 8px; font-size: 15px; }
#faq-search { display: block; width: 100%; box-sizing: border-box; border: 1px solid var(--neutral-200); border-radius: 6px; padding: 12px 16px; font: inherit; font-size: 15px; color: var(--neutral-900); background: #fff; outline: none; transition: border-color .15s; }
#faq-search:focus { border-color: var(--green-500); box-shadow: 0 0 0 3px rgba(42,142,158,.12); }
.check-line { margin-top:14px; display:flex; gap:10px; align-items:flex-start; }
.doc-table { border:1px solid var(--neutral-200); background:#fff; border-radius:8px; overflow:hidden; }
.doc-row { display:grid; grid-template-columns:2fr 1fr 1fr auto; gap:10px; padding:12px 14px; border-top:1px solid var(--neutral-200); align-items:center; }
.doc-row.head { border-top:0; font-weight:700; background:#f5f6f8; }
.doc-row a { color:var(--green-500); font-weight:700; }
.split-inline { display:flex; align-items:center; justify-content:space-between; gap:16px; }
.not-found { text-align:center; padding:120px 0; }
.not-found .code { font-size:220px; line-height:1; color:var(--green-500); font-weight:700; margin:0; }
.not-found h1 { margin:0 0 14px; font-size:clamp(36px,6vw,64px); line-height:1.2; color:var(--neutral-900); font-weight:700; }
.not-found .sub { margin:0 0 28px; font-size:18px; line-height:1.6; color:var(--neutral-500); }
.not-found .btn { font-size:15px; padding:13px 24px; }
.team-grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(200px,1fr)); gap:20px; margin-top:26px; }
.team-card { background:#fff; border:1px solid var(--neutral-200); box-shadow:0 3px 10px rgba(100,100,100,.15); padding:28px 16px 20px; border-radius:14px; display:flex; flex-direction:column; align-items:center; text-align:center; }
.team-photo {
width: 130px;
height: 130px;
border-radius: 50%;
overflow: hidden;
flex-shrink: 0;
margin: 0 auto 16px;
background: linear-gradient(145deg, #e8f5fb 0%, #cce0ea 100%);
box-shadow:
0 0 0 3px #fff,
0 0 0 5px rgba(2,51,71,0.13),
0 6px 18px rgba(2,51,71,0.12);
}
.team-photo img {
width: 100%;
height: 100%;
object-fit: cover;
object-position: center top;
display: block;
transition: transform .35s ease;
}
.team-card:hover .team-photo img { transform: scale(1.05); }
.team-card h3 { margin:0 0 4px; font-size:16px; font-weight:700; line-height:1.35; }
.team-role { margin:0 0 10px; color:var(--green-500); font-weight:600; font-size:13px; line-height:1.4; }
.team-meta { margin-top:10px; display:grid; gap:5px; color:var(--neutral-500); font-size:13px; }
.team-card p { margin:0; color:var(--neutral-500); line-height:1.6; }
.team-meta { margin-top:12px; display:grid; gap:6px; color:var(--neutral-900); font-size:15px; font-weight:600; }
.team-departments .item h4 { font-size:18px; }
.team-contacts { display:grid; gap:12px; margin-top:18px; }
.team-contacts .fact small { margin-top:6px; color:var(--neutral-500); font-size:14px; display:block; }
.team-cta { background:#fff; border:1px solid var(--neutral-200); box-shadow:0 3px 6px rgba(100,100,100,.2); padding:24px; display:flex; align-items:center; justify-content:space-between; gap:18px; }
.team-cta h2 { margin:0 0 8px; font-size:34px; line-height:1.2; }
.team-cta p { margin:0; color:var(--neutral-500); font-size:18px; line-height:1.5; }
.research-grid { display:grid; grid-template-columns:repeat(auto-fill, minmax(min(300px, 100%), 1fr)); gap:18px; margin-top:24px; }
.research-card { background:#fff; border:1px solid var(--neutral-200); box-shadow:0 3px 6px rgba(100,100,100,.2); padding:18px; border-radius:8px; }
.research-card h3 { margin:0 0 8px; font-size:24px; line-height:1.3; }
.research-card p { margin:0; color:var(--neutral-500); line-height:1.6; }
.useful-links-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
gap: 14px;
margin-top: 22px;
}
.useful-link-card { background:#fff; border:1px solid var(--neutral-200); box-shadow:0 3px 6px rgba(100,100,100,.2); padding:14px 12px; border-radius:8px; text-decoration:none; display:flex; flex-direction:column; align-items:center; text-align:center; gap:8px; }
.useful-link-card:hover { border-color:var(--green-500); }
.useful-link-card .ul-icon { width:44px; height:44px; display:block; object-fit:contain; }
.useful-link-card h4,
.useful-link-card h3 { margin:0; font-size:11px; font-weight:600; color:var(--neutral-500); line-height:1.4; }
.useful-link-card p { margin:0; color:var(--neutral-500); line-height:1.5; }
.search-results { display:grid; gap:12px; margin-top:20px; }
.search-item { background:#fff; border:1px solid var(--neutral-200); box-shadow:0 3px 6px rgba(100,100,100,.2); padding:16px; border-radius:8px; }
.search-item h3 { margin:0 0 8px; font-size:22px; }
.search-item p { margin:0; color:var(--neutral-500); line-height:1.6; }
@media (max-width: 980px){
.utility-row { min-height:42px; }
.utility-left { display:none; }
.utility-right { width:100%; justify-content:flex-end; }
.site-search-form { width:100%; order:5; }
.site-search-form input { width:100%; }
.a11y-panel { top:110px; right:8px; width:calc(100% - 16px); }
.menu { display:none !important; }
.hamburger { display:flex; grid-column:3; }
.nav { grid-template-columns: 1fr auto 1fr; }
.hero-cinematic { min-height:auto; }
.hero-cinematic-inner { min-height:auto; grid-template-columns:1fr; padding:96px 0 130px; }
.hero-cinematic-copy h1 { font-size:clamp(34px,9vw,48px); }
.hero-cinematic-copy .lead { font-size:18px; }
.hero-cinematic-strip { position:relative; }
.hero-strip-grid { grid-template-columns:1fr 1fr; }
.hero-strip-grid a { min-height:68px; }
.media-spotlight-grid { grid-template-columns:1fr; }
.video-hub { grid-template-columns:1fr; }
.media-spotlight-main .media-lg { min-height:180px; }
.goal-grid { grid-template-columns:1fr; }
.open-data-grid { grid-template-columns:1fr 1fr; }
.top-story-grid { grid-template-columns:1fr; }
.split-panels { grid-template-columns:1fr; }
.events-dual { grid-template-columns:1fr; }
.content-shell h1 { font-size:34px; }
.article-cover { min-height:180px; }
.video-frame { min-height:200px; }
.form-grid { grid-template-columns:1fr; }
.doc-row { grid-template-columns:1fr; gap:6px; padding:14px 16px; }
.doc-row > * { text-align:left; }
.split-inline { flex-direction:column; align-items:flex-start; }
.split { grid-template-columns:1fr; }
.kpi-grid { grid-template-columns:repeat(2,1fr); }
.council-table-wrap, .table-scroll { overflow-x:auto; -webkit-overflow-scrolling:touch; }
.council-table { min-width:640px; }
.team-cta { flex-direction:column; align-items:flex-start; }
.team-cta h2 { font-size:30px; }
.dark-cta .row { flex-direction:column; align-items:flex-start; }
.dark-cta h2 { font-size:36px; }
.not-found .code { font-size:120px; }
.section-tight { padding-top:18px; }
}
@keyframes heroDrift {
0%,100% { transform:translateY(0) translateX(0) scale(1); opacity:.24; }
50% { transform:translateY(-24px) translateX(18px) scale(1.08); opacity:.34; }
}
@keyframes heroSweep {
0% { transform:translateX(-18%) skewY(-7deg); opacity:.1; }
20% { opacity:.28; }
100% { transform:translateX(18%) skewY(-7deg); opacity:.1; }
}
/* ============================================================
PRINT — hide chrome, render the article cleanly
============================================================ */
@media print {
/* Hide navigation, footer, sidebar, share buttons, language
switcher etc. The detail pages have a window.print() button
in the article header; clicking it should produce a clean
printable copy of just the article body. */
.site-header,
.site-footer,
.footer-legal,
.test-mode-banner,
.skip-link,
.topbar,
.sidebar,
.search-overlay,
.a11y-panel,
.mobile-nav,
.detail-sidebar,
.detail-share-row,
.detail-print-btn,
.detail-tags,
.scroll-fade,
.gov-news-overlay,
noscript {
display: none !important;
}
body { background: #fff !important; color: #000 !important; }
a { color: #000; text-decoration: underline; }
/* Spell out external link targets so printed pages preserve
citation context. */
a[href^="http"]::after { content: " (" attr(href) ")"; font-size: 90%; }
.detail-paper { box-shadow: none !important; padding: 0 !important; max-width: 100% !important; }
.detail-cover { display: none; }
h1, h2, h3 { page-break-after: avoid; }
img { max-width: 100% !important; height: auto !important; page-break-inside: avoid; }
}
@media (prefers-reduced-motion: reduce){
/* Global reduced-motion: zero out durations on every element
instead of listing classes. The rule also covers smooth-scroll
anchor jumps that would otherwise glide past several pages. */
*,
*::before,
*::after {
animation-duration: 0.01ms !important;
animation-iteration-count: 1 !important;
transition-duration: 0.01ms !important;
scroll-behavior: auto !important;
}
.orb,
.scan,
.nnt-card,
.scroll-fade,
.fade-up{
animation:none !important;
transition:none !important;
}
/* Make sure scroll-fade content is visible without the fade-in
transition. Without this rule the elements stay at the
opacity:0 starting state forever. */
.scroll-fade,
.scroll-fade.ready{
opacity:1 !important;
transform:none !important;
}
}
/* ============================================================
ADMIN PANEL — Main Site Visual Language
============================================================ */
.admin-section {
background: var(--bg-light);
padding: 42px 24px 50px;
}
.admin-shell {
display: grid;
grid-template-columns: 270px 1fr;
gap: 18px;
align-items: start;
}
.admin-nav-panel {
position: sticky;
top: 98px;
align-self: start;
border: 1px solid var(--neutral-200);
background: #fff;
box-shadow: 0 3px 6px rgba(100,100,100,.2);
padding: 16px;
border-radius: 8px;
}
.admin-nav-panel h3 {
margin: 0 0 10px;
font-size: 20px;
color: var(--neutral-900);
}
.admin-menu {
display: grid;
gap: 8px;
}
.admin-menu a {
border: 1px solid var(--neutral-200);
background: #fff;
padding: 10px 12px;
font-size: 15px;
font-weight: 600;
color: var(--neutral-500);
position: relative;
transition: all .16s ease;
}
.admin-menu a::before {
content: '';
position: absolute;
left: 0;
top: 6px;
bottom: 6px;
width: 3px;
background: transparent;
}
.admin-menu a:hover,
.admin-menu a.active {
border-color: var(--green-500);
color: var(--green-500);
background: rgba(1,61,140,.06);
}
.admin-menu a.active::before {
background: var(--green-500);
}
.admin-stats {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(170px, 1fr));
gap: 12px;
margin-bottom: 12px;
align-items: start;
}
.admin-stat,
.admin-card,
.admin-toolbar,
.admin-table-wrap,
.admin-pager {
border: 1px solid var(--neutral-200);
background: #fff;
box-shadow: 0 3px 6px rgba(100,100,100,.2);
}
.admin-stat {
padding: 14px;
}
.admin-stat span {
display: block;
font-size: 12px;
color: var(--neutral-500);
margin-bottom: 6px;
}
.admin-stat strong {
font-size: 34px;
line-height: 1;
color: var(--neutral-900);
}
.admin-main-grid {
display: grid;
grid-template-columns: 1.6fr .8fr;
gap: 12px;
margin-bottom: 12px;
align-items: start;
}
.admin-bottom {
display: grid;
grid-template-columns: 1fr 1fr 1fr;
gap: 12px;
align-items: start;
}
.admin-card {
padding: 14px;
min-height: 0;
}
.admin-card h3 {
margin: 0 0 10px;
font-size: 22px;
color: var(--neutral-900);
}
.admin-map {
width: 100%;
aspect-ratio: 16 / 10;
min-height: clamp(220px, 35vw, 320px);
border: 1px solid var(--neutral-200);
background: #f5f6f8;
position: relative;
overflow: hidden;
}
.admin-map::before {
content: '';
position: absolute;
inset: 0;
background-image: linear-gradient(rgba(1,61,140,.05) 1px, transparent 1px), linear-gradient(90deg, rgba(1,61,140,.05) 1px, transparent 1px);
background-size: 34px 34px;
}
.admin-map::after {
content: '';
position: absolute;
left: 18%;
top: 18%;
width: 62%;
height: 64%;
background: radial-gradient(circle at 25% 35%, rgba(126,197,143,.55), transparent 22%), radial-gradient(circle at 46% 56%, rgba(251,184,97,.46), transparent 24%), radial-gradient(circle at 72% 52%, rgba(228,101,101,.4), transparent 22%);
}
.admin-map-label {
position: absolute;
left: 53%;
top: 48%;
transform: translate(-50%,-50%);
background: #fff;
border: 1px solid var(--neutral-300);
color: var(--neutral-900);
padding: 9px 10px;
font-size: 13px;
box-shadow: 0 8px 24px rgba(0,0,0,.1);
z-index: 2;
}
.admin-side-list {
display: grid;
gap: 8px;
}
.admin-side-item,
.admin-list li {
border: 1px solid var(--neutral-200);
padding: 10px;
font-size: 14px;
background: #f5f6f8;
display: flex;
justify-content: space-between;
align-items: center;
}
.admin-list {
margin: 0;
padding: 0;
list-style: none;
display: grid;
gap: 8px;
font-size: 14px;
}
.admin-badge {
padding: 2px 7px;
border-radius: 999px;
font-size: 11px;
font-weight: 700;
}
.admin-badge.ok { background:#e1f5e6; color:#24733a; }
.admin-badge.warn { background:#fff5df; color:#996109; }
.admin-badge.bad { background:#fde6e6; color:#9c2828; }
.admin-toolbar {
display: flex;
align-items: center;
justify-content: space-between;
gap: 12px;
margin-bottom: 12px;
padding: 14px;
}
.admin-toolbar h2 {
margin: 0;
font-size: 32px;
line-height: 1.2;
color: var(--neutral-900);
}
.admin-filters {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(170px, 1fr));
gap: 10px;
margin-bottom: 12px;
}
.admin-input,
.admin-select {
width: 100%;
border: 1px solid var(--neutral-200);
background: #fff;
padding: 11px 12px;
font: inherit;
color: var(--neutral-900);
}
.admin-input:focus,
.admin-select:focus {
outline: none;
border-color: var(--green-500);
box-shadow: 0 0 0 3px rgba(1,61,140,.12);
}
.admin-table-wrap {
overflow: auto;
}
.admin-table {
width: 100%;
border-collapse: collapse;
min-width: clamp(640px, 92vw, 860px);
font-size: 14px;
}
.admin-table th,
.admin-table td {
padding: 12px 10px;
border-top: 1px solid var(--neutral-200);
text-align: left;
vertical-align: top;
}
.admin-table thead th {
border-top: 0;
background: #f5f6f8;
font-size: 13px;
color: var(--neutral-500);
font-weight: 700;
}
.admin-table tbody tr:nth-child(even) {
background: #f9f9fb;
}
.admin-table tbody tr:hover {
background: #f0f4fa;
}
.admin-pager {
display: flex;
justify-content: space-between;
align-items: center;
gap: 10px;
margin-top: 10px;
font-size: 14px;
color: var(--neutral-500);
padding: 10px;
}
.admin-page-btns {
display: flex;
gap: 8px;
}
.admin-page-btns button {
border: 1px solid var(--neutral-300);
background: #fff;
padding: 6px 10px;
font: inherit;
cursor: pointer;
}
.admin-page-btns button.active,
.admin-page-btns button:hover {
border-color: var(--green-500);
color: var(--green-500);
}
.admin-panel-label {
font-size: 11px;
font-weight: 700;
letter-spacing: .12em;
text-transform: uppercase;
color: #013d8c;
padding: 4px 10px;
border: 1px solid rgba(1,61,140,.25);
background: rgba(1,61,140,.06);
white-space: nowrap;
}
.admin-header-right {
display: flex;
align-items: center;
gap: 12px;
margin-left: auto;
}
.admin-site-link {
font-size: 13px;
color: #707070;
font-weight: 500;
}
.admin-site-link:hover {
color: #013d8c;
}
@media (max-width: 1100px) {
.admin-shell { grid-template-columns: 1fr; }
.admin-nav-panel { position: static; }
.admin-stats { grid-template-columns: 1fr 1fr; }
.admin-main-grid,
.admin-bottom,
.admin-filters { grid-template-columns: 1fr; }
.admin-toolbar { flex-direction: column; align-items: flex-start; }
}
/* ============================================================
Typography Tuning (Main + Admin)
============================================================ */
.site-search-form input { font-size: 16px; }
.site-search-form button { font-size: 15px; }
.menu { font-size: 17px; }
.contact-btn { font-size: 16px; }
.dropdown a { font-size: 17px; }
.mobile-nav-label { font-size: 12px; }
.mobile-nav a { font-size: 18px; }
.mobile-nav-sub a { font-size: 16px; }
.mobile-nav-cta { font-size: 17px; }
.hero p.sub { font-size: 22px; }
.entry-hero .lead { font-size: 21px; }
.section-sub { font-size: 22px; }
.hero-cinematic-copy .lead { font-size: 22px; }
.hero-strip-grid span { font-size: 12px; }
.hero-strip-grid strong { font-size: 17px; }
.eyebrow { font-size: 14px; }
.hero-mini-kpis span { font-size: 14px; }
.card p { font-size: 17px; line-height: 1.65; }
.page-link-card p { font-size: 17px; line-height: 1.65; }
.news-item p { font-size: 17px; line-height: 1.65; }
.tool-pill { font-size: 15px; }
.open-data-card .k { font-size: 15px; }
.open-data-card a { font-size: 15px; }
.entry-contacts .k { font-size: 15px; }
.fact .k { font-size: 15px; }
.meta-line { font-size: 15px; line-height: 1.6; }
.breadcrumbs { font-size: 15px; }
.article-content p { font-size: 20px; line-height: 1.75; }
.video-hub-main p { font-size: 18px; line-height: 1.6; }
.video-hub-copy small { font-size: 15px; }
.team-role { font-size: 16px; }
.team-meta { font-size: 15px; }
.team-contacts .fact small { font-size: 15px; }
.team-cta p { font-size: 20px; line-height: 1.6; }
.useful-link-card h4,
.useful-link-card h3 { font-size: 11px; }
.search-item h3 { font-size: 24px; }
.list .item h4,
.list .item h3 { font-size: 22px; }
.faq .q h4 { font-size: 22px; }
.faq-toggle { font-size: 22px; }
.footer-col a, .footer-col p { font-size: 15px; }
.footer-col-title { font-size: 12px; }
.footer-bottom-info { font-size: 18px; }
.not-found .sub { font-size: 20px; line-height: 1.65; }
.not-found .btn { font-size: 16px; }
.admin-panel-label { font-size: 12px; }
.admin-site-link { font-size: 14px; }
.admin-menu a { font-size: 16px; }
.admin-stat span { font-size: 14px; }
.admin-side-item, .admin-list li { font-size: 15px; line-height: 1.6; }
.admin-toolbar h2 { font-size: 34px; }
.admin-input, .admin-select { font-size: 15px; line-height: 1.55; }
.admin-table { font-size: 15px; }
.admin-table thead th { font-size: 14px; }
.admin-table td { font-size: 15px; }
.admin-table td small { font-size: 14px; }
.admin-pager { font-size: 15px; }
.admin-badge { font-size: 12px; }
@media (max-width: 980px) {
.hero p.sub,
.entry-hero .lead,
.section-sub,
.hero-cinematic-copy .lead,
.article-content p,
.team-cta p,
.not-found .sub {
font-size: 19px;
}
}
/* ============================================================
ADMIN DASHBOARD — Charts & Visualizations
============================================================ */
.admin-stat-sub { display:block; font-size:11px; margin-top:4px; color:var(--neutral-400); }
.admin-stat-sub.ok { color:#24733a; }
.admin-stat-sub.warn { color:#d97706; }
.admin-card-top { margin-bottom:12px; }
.admin-card-top h3 { margin:0 0 1px; font-size:15px; font-weight:700; color:var(--neutral-900); }
.admin-card-top small { font-size:11px; color:var(--neutral-500); }
.admin-card-top a { color:var(--green-800); }
/* Charts row */
.admin-charts-row {
display: grid;
grid-template-columns: minmax(0, 1fr) minmax(220px, 30%);
gap: 12px;
margin-bottom: 12px;
align-items: start;
}
/* Bar chart */
.adm-bc { display:flex; flex-direction:column; gap:4px; }
.adm-bc-bars {
display: flex;
align-items: flex-end;
gap: 5px;
min-height: clamp(110px, 16vw, 140px);
}
.adm-bc-col { flex:1; display:flex; flex-direction:column; align-items:center; justify-content:flex-end; gap:2px; height:100%; }
.adm-bc-num { font-size:9px; font-weight:700; color:var(--neutral-700); line-height:1; }
.adm-bc-num.dim { color:var(--neutral-400); }
.adm-bc-bar { width:100%; background:var(--green-500); min-height:3px; flex-shrink:0; }
.adm-bc-col--dim .adm-bc-bar { background:var(--neutral-200); }
.adm-bc-col--hi .adm-bc-bar { background:var(--green-800); }
.adm-bc-lbls { display:flex; gap:5px; }
.adm-bc-lbls span { flex:1; text-align:center; font-size:9px; color:var(--neutral-400); }
/* Donut */
.adm-donut-wrap { display:flex; flex-direction:column; align-items:center; gap:12px; padding:4px 0; }
.adm-donut {
width: clamp(var(--admin-widget-min), 14vw, var(--admin-widget-max));
aspect-ratio: 1;
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
}
.adm-donut-hole {
width: clamp(70px, 9vw, 96px);
aspect-ratio: 1;
border-radius: 50%;
background: #fff;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
text-align: center;
}
.adm-donut-hole strong { font-size:22px; font-weight:800; line-height:1; color:var(--neutral-900); }
.adm-donut-hole span { font-size:10px; color:var(--neutral-500); }
.adm-legend { width:100%; display:grid; gap:5px; }
.adm-legend-row { display:flex; align-items:center; gap:6px; font-size:11.5px; color:var(--neutral-700); }
.adm-legend-dot { width:8px; height:8px; border-radius:2px; flex-shrink:0; }
.adm-legend-name { flex:1; }
.adm-legend-n { font-weight:700; color:var(--neutral-900); font-size:12px; }
/* Uzbekistan map */
.uzb-map-wrap { display:grid; grid-template-columns:1fr 210px; gap:18px; align-items:center; }
.uzb-map-svg svg { width:100%; height:auto; display:block; }
.uzb-region { stroke:#fff; stroke-width:1; cursor:default; transition:opacity .15s; }
.uzb-region:hover { opacity:.82; }
.uzb-dot { cursor:pointer; }
.uzb-dot circle { transition:opacity .15s; }
.uzb-dot:hover circle { opacity:.75; }
.uzb-region-text { font-family:'Montserrat',sans-serif; font-size:8px; fill:#fff; font-weight:700; pointer-events:none; text-anchor:middle; dominant-baseline:central; }
.uzb-region-text.dark { fill:var(--neutral-900); }
.uzb-reg-list { display:grid; gap:5px; }
.uzb-reg-row { display:flex; align-items:center; gap:6px; }
.uzb-reg-name { flex:1; font-size:11px; color:var(--neutral-700); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.uzb-reg-bar { height:4px; border-radius:2px; background:var(--green-500); flex-shrink:0; }
.uzb-reg-count { font-weight:700; font-size:12px; color:var(--neutral-900); min-width:22px; text-align:right; }
/* Bottom 2-col */
.admin-bottom-2 { display:grid; grid-template-columns:1fr 1fr; gap:12px; align-items:start; }
/* Events/news feed */
.adm-feed { margin:0; padding:0; list-style:none; display:flex; flex-direction:column; }
.adm-feed-item { display:flex; gap:10px; padding:9px 0; border-bottom:1px solid var(--neutral-200); align-items:flex-start; }
.adm-feed-item:last-child { border-bottom:0; }
.adm-feed-dot { width:7px; height:7px; border-radius:50%; flex-shrink:0; margin-top:5px; }
.adm-feed-body { flex:1; min-width:0; }
.adm-feed-tag { font-size:10px; font-weight:800; letter-spacing:.08em; text-transform:uppercase; color:var(--green-800); display:block; }
.adm-feed-title { font-size:12.5px; font-weight:600; color:var(--neutral-900); margin:1px 0 2px; line-height:1.4; }
.adm-feed-date { font-size:11px; color:var(--neutral-400); }
@media (max-width: 1100px) {
.admin-charts-row { grid-template-columns:1fr; }
.uzb-map-wrap { grid-template-columns:1fr; }
.admin-bottom-2 { grid-template-columns:1fr; }
}
/* Chart widgets for admin screens */
.adm-chart-grid {
display: grid;
grid-template-columns: minmax(0, 1fr) minmax(240px, 32%);
gap: 12px;
margin-bottom: 12px;
}
.adm-chart-card { border:1px solid var(--neutral-200); background:#fff; padding:14px; }
.adm-chart-title { margin:0 0 4px; font-size:16px; font-weight:700; color:var(--neutral-900); }
.adm-chart-sub { margin:0 0 10px; font-size:13px; color:var(--neutral-500); }
.adm-line-wrap {
width: 100%;
min-height: clamp(140px, 24vw, 190px);
border: 1px solid var(--neutral-200);
background: #f5f6f8;
padding: 8px;
}
.adm-line-wrap svg { width:100%; height:100%; display:block; }
.adm-axis-labels { display:flex; justify-content:space-between; margin-top:6px; font-size:11px; color:var(--neutral-500); }
.adm-donut-box { display:flex; align-items:center; justify-content:center; gap:14px; }
.adm-donut-v2 {
width: clamp(132px, 16vw, 170px);
aspect-ratio: 1;
border-radius: 50%;
display: grid;
place-items: center;
}
.adm-donut-v2-hole {
width: clamp(80px, 10vw, 102px);
aspect-ratio: 1;
border-radius: 50%;
background: #fff;
display: grid;
place-items: center;
text-align: center;
border: 1px solid var(--neutral-200);
}
.adm-donut-v2-hole strong { display:block; font-size:24px; line-height:1; color:var(--neutral-900); }
.adm-donut-v2-hole span { font-size:12px; color:var(--neutral-500); }
.adm-legend-v2 { display:grid; gap:8px; min-width:130px; }
.adm-legend-v2 .row { display:flex; align-items:center; gap:8px; font-size:13px; color:var(--neutral-700); }
.adm-legend-v2 .dot { width:10px; height:10px; border-radius:50%; }
@media (max-width:1100px) {
.adm-chart-grid { grid-template-columns: 1fr; }
}
/* ── Admin: info rows, doc checklist, versions table, activity log ── */
.adm-info-row { display:flex; justify-content:space-between; align-items:center; padding:8px 0; border-bottom:1px solid var(--neutral-200); font-size:13px; }
.adm-info-row:last-child { border-bottom:0; }
.adm-info-label { color:var(--neutral-500); }
.adm-info-val { font-weight:600; color:var(--neutral-900); }
.adm-doc-row { display:flex; gap:8px; padding:8px 0; border-bottom:1px solid var(--neutral-200); align-items:center; font-size:12.5px; }
.adm-doc-row:last-child { border-bottom:0; }
.adm-doc-icon { width:18px; text-align:center; flex-shrink:0; }
.adm-doc-name { flex:1; color:var(--neutral-900); font-weight:500; }
.adm-doc-badge { font-size:11px; font-weight:700; padding:2px 7px; border-radius:3px; flex-shrink:0; }
.adm-doc-badge.ok { background:#e1f5e6; color:#24733a; }
.adm-doc-badge.warn { background:#fff5df; color:#996109; }
.adm-doc-badge.miss { background:#f1f5f9; color:var(--neutral-400); }
.adm-note-area { width:100%; border:1px solid var(--neutral-200); border-radius:4px; padding:9px 11px; font-family:inherit; font-size:13px; color:var(--neutral-900); resize:vertical; min-height:76px; background:#fff; box-sizing:border-box; display:block; margin-bottom:10px; }
.adm-note-area:focus { outline:none; border-color:var(--green-500); }
.adm-ver-table { width:100%; border-collapse:collapse; font-size:13px; }
.adm-ver-table th { background:#f5f6f8; color:var(--neutral-500); font-weight:700; font-size:12px; padding:9px 11px; text-align:left; border-bottom:1px solid var(--neutral-200); }
.adm-ver-table td { padding:9px 11px; border-bottom:1px solid var(--neutral-200); color:var(--neutral-900); vertical-align:middle; }
.adm-ver-table tr:last-child td { border-bottom:0; }
.adm-ver-badge { display:inline-block; padding:2px 8px; font-size:11px; font-weight:700; border-radius:3px; }
.adm-ver-badge.cur { background:#e1f5e6; color:#24733a; }
.adm-ver-badge.arch { background:#f1f5f9; color:var(--neutral-400); }
.adm-act-row { display:flex; gap:10px; padding:9px 0; border-bottom:1px solid var(--neutral-200); align-items:flex-start; }
.adm-act-row:last-child { border-bottom:0; }
.adm-act-dot { width:8px; height:8px; border-radius:50%; background:var(--green-500); flex-shrink:0; margin-top:5px; }
.adm-act-dot.warn { background:#d97706; }
.adm-act-dot.bad { background:#dc2626; }
.adm-act-body { flex:1; }
.adm-act-title { font-size:13px; font-weight:600; color:var(--neutral-900); }
.adm-act-meta { font-size:11px; color:var(--neutral-400); margin-top:2px; }
/* Filter chips */
.adm-chips { display:flex; flex-wrap:wrap; gap:6px; margin-bottom:12px; }
.adm-chip { display:inline-flex; align-items:center; gap:5px; padding:5px 12px; border:1px solid var(--neutral-200); border-radius:20px; font-size:12.5px; font-weight:600; color:var(--neutral-500); background:#fff; cursor:pointer; transition:all .15s; }
.adm-chip:hover { border-color:var(--green-500); color:var(--green-500); }
.adm-chip.active { background:var(--green-500); border-color:var(--green-500); color:#fff; }
.adm-chip-count { font-size:11px; font-weight:700; background:rgba(255,255,255,.25); padding:1px 5px; border-radius:10px; }
.adm-chip:not(.active) .adm-chip-count { background:var(--neutral-100); color:var(--neutral-500); }
/* Mini progress bars (table column) */
.adm-mini-bar-wrap { display:flex; align-items:center; gap:6px; min-width:72px; }
.adm-mini-bar { height:6px; border-radius:3px; background:var(--green-500); flex-shrink:0; }
.adm-mini-bar.ok { background:#24733a; }
.adm-mini-bar.warn { background:#d97706; }
.adm-mini-label { font-size:11px; font-weight:700; color:var(--neutral-500); white-space:nowrap; }
/* ============================================================
Small-screen adjustments (≤640px phones)
============================================================ */
@media (max-width: 640px) {
.section { padding: 46px 0; }
.hero { padding: 54px 0 42px; }
.entry-hero { padding: 46px 0 34px; }
.dark-cta .row { padding: 40px 0; gap: 16px; }
.dark-cta h2 { font-size: 30px; }
.footer-bottom-info { padding: 20px 0; }
.not-found .code { font-size: 84px; }
.not-found { padding: 80px 0; }
.kpi-grid { grid-template-columns: 1fr; }
.open-data-grid { grid-template-columns: 1fr; }
.hero-strip-grid { grid-template-columns: 1fr; }
.hero-strip-grid a {
border-right: 0;
border-bottom: 1px solid rgba(255,255,255,.14);
}
.hero-strip-grid a:last-child { border-bottom: 0; }
.hero-cinematic-panel { padding: 14px; }
.hero-mini-kpis strong { font-size: 26px; }
.hero p.sub,
.entry-hero .lead,
.section-sub { font-size: 17px; }
/* Reduce large section titles on phones */
.section-title { font-size: 26px; }
.content-shell h1 { font-size: 28px; }
.admin-table {
min-width: 100%;
font-size: 13px;
}
/* Fix membership.html inline 2-col form grid */
.card [style*="grid-template-columns:1fr 1fr"] {
grid-template-columns: 1fr !important;
}
/* CTA cards with inline flex+space-between → stack text above button */
.card[style*="justify-content:space-between"] {
flex-direction: column !important;
align-items: flex-start !important;
}
.card-split-action {
flex-direction: column;
align-items: flex-start;
}
.orb, .orb-1, .orb-2, .orb-3 { display:none; }
.scan, .scan-1, .scan-2 { width:100%; left:0; right:0; }
p, li, a, .excerpt, .hero-cinematic-copy p { overflow-wrap:break-word; word-wrap:break-word; }
a[href*="://"]:not(td a) { word-break:break-all; }
}
/* ── Very narrow phones: hide nav CTA (accessible via hamburger) ── */
@media (max-width: 480px) {
.contact-btn { display:none; }
.container { width:min(100%, calc(100% - 24px)); }
.hero-cta-corner {
position:static;
min-width:0;
max-width:100%;
padding:16px;
display:flex;
flex-direction:column;
gap:12px;
}
.hero-cta-corner a,
.hero-cta-corner button { width:100%; }
.hero-cinematic-inner,
.page-header,
.dark-cta,
section.container > div { padding-top:clamp(32px, 8vw, 80px); padding-bottom:clamp(32px, 8vw, 80px); }
h1, .hero-cinematic-copy h1 { font-size:clamp(24px, 7.5vw, 40px); line-height:1.18; }
h2, .dark-cta h2, .section-title, .page-title { font-size:clamp(22px, 6vw, 32px); line-height:1.22; }
h3 { font-size:clamp(18px, 5vw, 22px); }
.hero-stats-row { grid-template-columns:1fr; gap:12px; }
.hero-stat { padding:16px; }
table { display:block; overflow-x:auto; -webkit-overflow-scrolling:touch; }
img, video, iframe { max-width:100%; height:auto; }
.dropdown, .nav-item .dropdown { min-width:0; max-width:calc(100vw - 24px); }
}
@media (max-width: 360px) {
.container { width:min(100%, calc(100% - 16px)); }
.topbar-fond-name { display:none; }
h1, .hero-cinematic-copy h1 { font-size:clamp(20px, 8vw, 28px); }
}
/* ══════════════════════════════════════════════════════════════
GOV.UZ-STYLE CARD GRID (news.html, events.html, etc.)
══════════════════════════════════════════════════════════════ */
.gov-news-grid {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(19rem, 1fr));
gap: 2rem;
align-items: start;
}
/* Card root — two rows: image + content */
.gov-news-card {
display: grid;
grid-template-rows: 15rem 1fr;
}
/* Image area */
.gov-news-img {
position: relative;
display: block;
width: 100%;
height: 15rem;
overflow: hidden;
text-decoration: none;
}
.gov-news-img-inner {
width: 100%; height: 100%;
background: linear-gradient(135deg, #1a5c35 0%, var(--green-500, #0e7490) 100%);
}
/* Category-specific gradients */
.gov-news-card[data-cat="TADBIR"] .gov-news-img-inner,
.gov-news-card[data-cat="upcoming"] .gov-news-img-inner { background: linear-gradient(135deg,#1a3a5c 0%,#0e7490 100%); }
.gov-news-card[data-cat="TAHLIL"] .gov-news-img-inner { background: linear-gradient(135deg,#3b1a5c 0%,#7c3aed 100%); }
.gov-news-card[data-cat="E'LON"] .gov-news-img-inner { background: linear-gradient(135deg,#5c3a1a 0%,#d97706 100%); }
.gov-news-card[data-cat="PRESS"] .gov-news-img-inner { background: linear-gradient(135deg,#1a4a5c 0%,#0e7490 100%); }
.gov-news-archive-badge {
position: absolute;
top: 10px; left: 10px;
background: rgba(2,51,71,.82);
color: #fff;
font-size: 11px;
font-weight: 700;
text-transform: uppercase;
letter-spacing: .08em;
padding: 3px 8px;
border-radius: 3px;
z-index: 2;
}
.archive-tab-bar {
display: flex;
gap: 0;
margin-bottom: 24px;
border-bottom: 2px solid var(--neutral-200, #e4e7e7);
}
.archive-tab {
padding: 10px 22px;
font-size: 15px;
font-weight: 700;
background: none;
border: none;
border-bottom: 3px solid transparent;
margin-bottom: -2px;
cursor: pointer;
color: var(--neutral-500, #798384);
transition: color .15s, border-color .15s;
}
.archive-tab:hover { color: var(--neutral-900, #171a1b); }
.archive-tab.active {
color: var(--green-500, #0e7490);
border-bottom-color: var(--green-500, #0e7490);
}
.gov-news-overlay {
position: absolute; inset: 0;
background: #000; opacity: .4;
}
/* Floating white content box */
.gov-news-content {
position: relative;
width: calc(100% - 2.5rem);
margin-top: -3rem;
margin-left: auto; margin-right: auto;
background: #fff;
border: 1px solid var(--neutral-200, #dde0e7);
padding: 1rem 1.25rem;
display: flex;
flex-direction: column;
gap: .55rem;
box-sizing: border-box;
}
/* Header row: date block + title */
.gov-news-header {
display: flex;
align-items: flex-start;
gap: .75rem;
}
.gov-news-date {
flex: 0 0 46px;
text-align: center;
line-height: 1.15;
}
.gov-news-date b {
display: block;
font-size: 1.5rem;
color: #7e7e7e;
font-weight: 700;
}
.gov-news-date span {
display: block;
font-size: .7rem;
color: #222;
font-weight: 700;
text-transform: uppercase;
letter-spacing: .05em;
}
.gov-news-title {
flex: 1;
margin: 0;
font-size: .9375rem;
font-weight: 600;
color: #1a1a1a;
line-height: 1.35;
display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
overflow: hidden;
transition: color .15s;
}
.gov-news-title a {
color: inherit;
text-decoration: none;
}
.gov-news-img:hover ~ .gov-news-content .gov-news-title,
.gov-news-title:hover,
.gov-news-title a:hover {
color: var(--green-600, #255f40);
text-decoration: underline;
}
/* Excerpt */
.gov-news-excerpt {
font-size: .875rem;
color: #555;
text-decoration: none;
line-height: 1.45;
display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
overflow: hidden;
}
.gov-news-excerpt:hover { text-decoration: underline; }
/* Footer: date left · label right */
.gov-news-footer {
display: flex;
justify-content: space-between;
align-items: center;
margin-top: auto;
padding-top: .4rem;
border-top: 1px solid var(--neutral-200, #dde0e7);
}
.gov-news-footer span { font-size: .8125rem; color: #888; }
.gov-news-footer a {
font-size: .8125rem;
color: var(--green-600, #255f40);
text-decoration: none;
font-weight: 600;
}
.gov-news-footer a:hover { text-decoration: underline; }
/* Section label above a grid group */
.gov-news-section-label {
font-size: 1.1rem;
font-weight: 700;
color: var(--neutral-900, #111);
margin: 0 0 1.25rem;
padding-bottom: .6rem;
border-bottom: 2px solid var(--green-500, #0e7490);
display: inline-block;
}
/* ══════════════════════════════════════════════════════════════
DETAIL PAGE LAYOUT (news-detail, event-detail, etc.)
══════════════════════════════════════════════════════════════ */
.detail-layout {
display: grid;
grid-template-columns: minmax(0, 10fr) 3fr;
gap: 2rem;
align-items: start;
}
@media (max-width: 62rem) {
.detail-layout { grid-template-columns: 1fr; }
.detail-sidebar { display: none; }
}
/* White paper card */
.detail-paper {
background: #fff;
box-shadow: 0 3px 10px rgba(0,0,0,.10);
padding: 2.5rem 3rem;
}
@media (max-width: 48rem) {
.detail-paper { padding: 1.25rem; }
}
/* Breadcrumbs + print button row */
.detail-top-bar {
display: flex;
justify-content: space-between;
align-items: center;
margin-bottom: 1.25rem;
padding-bottom: 1rem;
border-bottom: 1px solid var(--neutral-200, #dde0e7);
}
.detail-breadcrumbs {
display: flex;
align-items: center;
flex-wrap: wrap;
gap: .35rem;
font-size: .8125rem;
color: #888;
margin: 0;
}
.detail-breadcrumbs a {
color: var(--green-600, #255f40);
font-weight: 700;
text-decoration: none;
}
.detail-breadcrumbs a:hover { text-decoration: underline; }
.detail-bc-sep { color: #ccc; font-size: .9em; }
.detail-print-btn {
flex-shrink: 0;
border: 1px solid var(--neutral-300, #c5cdd6);
background: none;
width: 32px; height: 32px;
display: grid; place-items: center;
cursor: pointer;
color: #666;
border-radius: 4px;
transition: background .15s, border-color .15s;
}
.detail-print-btn:hover {
background: var(--green-500, #0e7490);
border-color: var(--green-500, #0e7490);
color: #fff;
}
/* Title */
.detail-title {
font-size: 1.5rem;
font-weight: 700;
color: var(--neutral-900, #111);
line-height: 1.3;
margin: 0 0 .75rem;
}
/* Meta: date / category */
.detail-meta {
font-size: 1rem;
color: #666;
margin: 0 0 1.5rem;
display: flex;
align-items: center;
gap: .4rem;
flex-wrap: wrap;
}
.detail-meta-sep { color: #bbb; }
.detail-meta a {
color: var(--green-600, #255f40);
font-weight: 600;
text-decoration: none;
}
.detail-meta a:hover { text-decoration: underline; }
/* Cover image / gradient block */
.detail-cover {
width: 100%;
max-width: 44rem;
height: 22rem;
margin: 0 auto 2rem;
border-radius: 4px;
background: linear-gradient(135deg, #1a5c35 0%, var(--green-500, #0e7490) 100%);
background-size: cover;
background-position: center;
}
@media (max-width: 48rem) { .detail-cover { height: 13rem; } }
/* Body text */
.detail-body {
font-size: 1.0625rem;
color: #111;
line-height: 1.75;
margin-bottom: 1.5rem;
}
.detail-body p + p { margin-top: .75rem; }
.detail-body a { font-weight: 600; color: var(--green-600, #255f40); text-decoration: underline; }
.detail-body strong { font-weight: 700; }
/* Tags / pills */
.detail-tags {
display: flex;
flex-wrap: wrap;
gap: .5rem;
padding: .85rem 0;
border-top: 1px solid var(--neutral-200, #dde0e7);
border-bottom: 1px solid var(--neutral-200, #dde0e7);
margin-bottom: 1.25rem;
}
.detail-tag {
background: #f0f4f0;
border: 1px solid var(--neutral-200, #dde0e7);
color: #333;
font-size: .875rem;
font-weight: 500;
padding: .3rem .9rem;
border-radius: 999px;
text-decoration: none;
transition: background .15s, color .15s;
}
.detail-tag:hover {
background: var(--green-500, #0e7490);
color: #fff;
border-color: var(--green-500, #0e7490);
}
/* Share row */
.detail-share-row {
display: flex;
align-items: center;
gap: .75rem;
}
.detail-share-label { font-size: .875rem; color: #888; }
.detail-share-btn {
display: grid;
place-items: center;
width: 34px; height: 34px;
border-radius: 50%;
background: #f0f4f0;
text-decoration: none;
transition: background .15s;
}
.detail-share-btn svg { fill: var(--green-600, #255f40); transition: fill .15s; }
.detail-share-btn:hover { background: var(--green-500, #0e7490); }
.detail-share-btn:hover svg { fill: #fff; }
/* Right sidebar */
.detail-sidebar {
position: sticky;
top: 90px;
background: #f4f6f5;
border: 1px solid var(--neutral-200, #dde0e7);
max-height: calc(100vh - 110px);
overflow-y: auto;
border-radius: 4px;
}
.detail-sidebar-heading {
font-size: .75rem;
font-weight: 700;
text-transform: uppercase;
letter-spacing: .07em;
color: #888;
padding: 1rem 1.25rem .6rem;
border-bottom: 1px solid var(--neutral-200, #dde0e7);
margin: 0;
}
.detail-sidebar-item {
display: block;
padding: .85rem 1.25rem;
border-bottom: 1px solid var(--neutral-200, #dde0e7);
text-decoration: none;
transition: background .15s;
}
.detail-sidebar-item:hover { background: #e6ede9; }
.detail-sidebar-item-date {
font-size: .75rem;
color: #999;
margin: 0 0 .25rem;
}
.detail-sidebar-item-title {
font-size: .875rem;
font-weight: 600;
color: #222;
line-height: 1.35;
margin: 0;
display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
overflow: hidden;
}
.detail-sidebar-item:hover .detail-sidebar-item-title { color: var(--green-600, #255f40); }
/* ── Gov-style inner page layout ────────────────────────────────── */
.gov-page-wrap { background:#fff; min-height:60vh; padding-bottom:64px; }
/* Breadcrumb bar */
.gov-topbar { border-bottom:1px solid #e4e7e7; padding:14px 0 12px; margin-bottom:0; }
.gov-breadcrumb { display:flex; align-items:center; flex-wrap:wrap; gap:5px; font-size:13px; color:#999; }
.gov-breadcrumb a { color:var(--green-500); text-decoration:none; font-weight:600; }
.gov-breadcrumb a:hover { text-decoration:underline; }
.gov-breadcrumb .bc-sep { color:#bbb; }
.gov-breadcrumb-row { display:flex; align-items:center; justify-content:space-between; }
.gov-print-btn { border:1px solid #d0d5d8; background:#fff; padding:5px 8px; cursor:pointer; color:#666; border-radius:3px; display:grid; place-items:center; }
.gov-print-btn:hover { background:#f5f6f8; }
/* Page title */
.gov-page-title { font-size:1.25rem; font-weight:800; color:var(--green-500); text-transform:uppercase; letter-spacing:.04em; margin:20px 0 18px; }
/* layout */
.gov-layout { padding-top:24px; }
/* Leader cards */
.leader-card {
border:1px solid #e0e3e5;
background:#fff;
margin-bottom:20px;
overflow:hidden;
border-radius:6px;
}
.leader-card-body { display:flex; align-items:center; gap:32px; padding:32px 36px; }
.leader-photo {
width:160px; height:160px; border-radius:50%;
background:#fff;
flex-shrink:0;
overflow:hidden;
display:flex; align-items:center; justify-content:center;
}
.leader-photo svg { color:#aabcc4; width:64px; height:64px; }
.leader-photo img { width:100%; height:100%; object-fit:contain; }
.leader-center { flex:1; min-width:0; }
.leader-name { font-size:1.25rem; font-weight:700; color:#1a2635; margin:0 0 6px; line-height:1.35; }
.leader-role { font-size:.975rem; color:#555; margin:0 0 20px; line-height:1.45; }
.leader-btns { display:flex; gap:10px; flex-wrap:wrap; }
.leader-btn {
background:var(--green-500); color:#fff; border:none;
padding:10px 24px; font:inherit; font-size:.9rem; font-weight:600;
cursor:pointer; border-radius:4px; transition:background .14s;
}
.leader-btn:hover, .leader-btn.is-open { background:var(--green-800); }
.leader-contacts-col {
flex-shrink:0; width:260px;
padding-left:28px; border-left:1px solid #eaecee;
display:flex; flex-direction:column; gap:12px;
}
.leader-contact-item {
display:flex; align-items:flex-start; gap:10px;
font-size:.9rem; color:#333; text-decoration:none; line-height:1.4;
}
.leader-contact-item:hover { color:var(--green-500); }
.leader-contact-item svg { flex-shrink:0; margin-top:2px; color:var(--green-500); width:16px; height:16px; }
.leader-expand-body {
display:none; padding:20px 36px 24px;
border-top:1px solid #eaecee;
font-size:.95rem; color:#444; line-height:1.75;
background:#fafbfc;
}
.leader-expand-body.open { display:block; }
.leader-expand-body p { margin:0 0 .6rem; }
.leader-expand-body p:last-child { margin:0; }
/* Article body */
.gov-article-body { font-size:.9625rem; line-height:1.8; color:#333; }
.gov-article-body p { margin:0 0 1rem; }
.gov-article-body h3 { font-size:1rem; font-weight:700; color:#023347; margin:1.5rem 0 .6rem; }
.gov-article-body ol, .gov-article-body ul { padding-left:1.4rem; margin:0 0 1rem; }
.gov-article-body li { margin-bottom:.55rem; }
.gov-article-body strong { color:#023347; }
.gov-article-meta { display:flex; gap:24px; flex-wrap:wrap; font-size:.8rem; color:#aaa; margin-top:28px; padding-top:14px; border-top:1px solid #eaedef; }
/* Share row */
.gov-share-row { display:flex; align-items:center; gap:8px; margin-top:24px; padding-top:18px; border-top:1px solid #eaedef; font-size:.8125rem; color:#aaa; }
.gov-share-btn { display:inline-flex; align-items:center; gap:5px; padding:6px 12px; border-radius:3px; font-size:.8rem; font-weight:700; text-decoration:none; color:#fff; transition:opacity .14s; }
.gov-share-btn:hover { opacity:.85; }
.gov-share-fb { background:#1877f2; }
.gov-share-tg { background:#229ed9; }
.gov-share-x { background:#111; }
@media (max-width:860px) {
.leader-card-body { flex-wrap:wrap; }
.leader-contacts-col { width:100%; padding-left:0; border-left:0; border-top:1px solid #eaecee; padding-top:12px; }
}
/* ── Membership modal ───────────────────────────────────────────── */
.membership-overlay {
display: none;
position: fixed;
inset: 0;
z-index: 9999;
background: rgba(0,0,0,.88);
overflow-y: auto;
padding: 40px 16px;
}
.membership-overlay:target { display: flex; align-items: flex-start; justify-content: center; }
.membership-box {
background: #fff;
width: 100%;
max-width: 780px;
border-radius: 6px;
overflow: hidden;
position: relative;
box-shadow: 0 24px 80px rgba(0,0,0,.45);
margin: auto;
}
.membership-header {
background: var(--bg-dark, #023347);
padding: 28px 36px 24px;
color: #fff;
position: relative;
}
.membership-header h2 {
margin: 0 0 6px;
font-size: 1.35rem;
font-weight: 700;
color: #fff;
}
.membership-header p {
margin: 0;
font-size: .9rem;
color: rgba(255,255,255,.65);
}
.membership-close {
position: absolute;
top: 16px; right: 16px;
width: 32px; height: 32px;
border: 1px solid rgba(255,255,255,.28);
background: transparent;
color: #fff;
font-size: 18px;
font-weight: 700;
cursor: pointer;
display: grid; place-items: center;
border-radius: 4px;
text-decoration: none;
line-height: 1;
transition: background .15s, border-color .15s;
}
.membership-close:hover { background: rgba(255,255,255,.15); border-color: rgba(255,255,255,.5); }
.membership-step { padding: 32px 36px 36px; }
.membership-step[hidden] { display: none; }
.membership-terms-box {
border: 1px solid #e4e7e7;
border-radius: 4px;
padding: 18px 20px;
max-height: 220px;
overflow-y: auto;
font-size: .875rem;
line-height: 1.7;
color: #444;
background: #fafafa;
margin-bottom: 20px;
}
.membership-terms-box p { margin: 0 0 .75rem; }
.membership-terms-box p:last-child { margin-bottom: 0; }
.membership-agree-row {
display: flex;
align-items: center;
gap: 10px;
margin-bottom: 24px;
}
.membership-agree-row input[type="checkbox"] {
width: 18px; height: 18px;
accent-color: var(--green-500);
cursor: pointer;
flex-shrink: 0;
}
.membership-agree-row label {
font-size: .9rem;
color: #333;
cursor: pointer;
}
.membership-fields {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 0 24px;
}
.membership-field {
margin-bottom: 20px;
}
.membership-field.full { grid-column: 1 / -1; }
.membership-field label {
display: block;
font-size: .8125rem;
color: #999;
margin-bottom: 6px;
font-weight: 600;
letter-spacing: .02em;
text-transform: uppercase;
}
.membership-field input,
.membership-field select,
.membership-field textarea {
width: 100%;
border: none;
border-bottom: 1px solid #cacaca;
background: #fbfbfb;
padding: 10px 2px;
font: inherit;
font-size: .9375rem;
color: #222;
outline: none;
border-radius: 0;
transition: border-color .15s;
-webkit-appearance: none;
appearance: none;
}
.membership-field input:focus,
.membership-field select:focus,
.membership-field textarea:focus {
border-bottom-color: var(--green-500);
background: #f5fbfc;
}
.membership-field textarea { resize: vertical; min-height: 80px; }
.membership-field select { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath fill='%23999' d='M6 8L0 0h12z'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 4px center; padding-right: 20px; }
.membership-actions {
display: flex;
align-items: center;
gap: 16px;
margin-top: 8px;
}
.membership-submit {
background: var(--green-500);
color: #fff;
border: none;
border-radius: 30px;
padding: 13px 36px;
font: inherit;
font-size: 1rem;
font-weight: 700;
cursor: pointer;
transition: background .15s, transform .1s;
}
.membership-submit:disabled {
background: #b0cdd2;
cursor: not-allowed;
}
.membership-submit:not(:disabled):hover { background: var(--green-800); transform: translateY(-1px); }
.membership-back {
background: none;
border: none;
color: #999;
font: inherit;
font-size: .875rem;
cursor: pointer;
padding: 0;
text-decoration: underline;
}
.membership-back:hover { color: #444; }
.membership-step-indicator {
display: flex;
gap: 8px;
margin-bottom: 24px;
align-items: center;
}
.membership-step-dot {
width: 28px; height: 28px;
border-radius: 50%;
border: 2px solid #ddd;
background: #fff;
display: grid; place-items: center;
font-size: .75rem;
font-weight: 700;
color: #bbb;
}
.membership-step-dot.active { border-color: var(--green-500); background: var(--green-500); color: #fff; }
.membership-step-dot.done { border-color: var(--green-500); background: #fff; color: var(--green-500); }
.membership-step-line { flex: 1; height: 2px; background: #e4e7e7; border-radius: 1px; }
.membership-step-line.done { background: var(--green-500); }
@media (max-width: 600px) {
.membership-header { padding: 22px 20px 18px; }
.membership-step { padding: 22px 20px 24px; }
.membership-fields { grid-template-columns: 1fr; }
.membership-field.full { grid-column: 1; }
}
/* ── Interactive Map Section ─────────────────────────────── */
.map-section {
background: #E8F5FB;
padding: 60px 0 52px;
position: relative;
overflow: hidden;
}
.map-section::before {
content: '';
position: absolute;
inset: 0;
background: radial-gradient(ellipse 70% 60% at 55% 50%, rgba(42,142,158,.08) 0%, transparent 70%);
pointer-events: none;
}
.map-section .section-title { color: #023347; }
.map-section .section-sub { color: #2a6e7a; }
.map-svg-box {
position: relative;
width: 100%;
margin-top: 28px;
min-height: 200px;
}
.map-svg-box svg {
width: 100%;
height: auto;
display: block;
}
/* Default region fill */
.map-svg-box svg path[id^="UZ-"] {
fill: #a5dae6;
stroke: #6fb5c4;
stroke-width: 1.2;
cursor: pointer;
transition: fill .18s;
}
/* Water / neighbour paths */
.map-svg-box svg path:not([id^="UZ-"]) {
fill: #d4eef4;
stroke: #afdae4;
stroke-width: 0.5;
pointer-events: none;
}
.map-svg-box svg path[id="UZ-AS"] { fill: #d4eef4; pointer-events: none; }
.map-svg-box svg path[id^="UZ-"].hovered { fill: #c3e7ef; }
.map-svg-box svg path[id^="UZ-"].active { fill: #80d2de; }
/* Visible focus ring for keyboard navigation across regions
(paths get tabindex=0 + role=link in initMap). The default UA outline
on SVG path is rendered around the bounding rect, which is okay; we
force its color so it shows against the light fills. */
.map-svg-box svg path[id^="UZ-"]:focus {
outline: 2px solid #16566c;
outline-offset: 1px;
}
.map-svg-box svg path[id^="UZ-"]:focus:not(:focus-visible) {
outline: none;
}
/* Overlay labels */
.map-label {
position: absolute;
transform: translate(-50%, -50%);
background: rgba(22, 86, 108, 0.82);
border: 1px solid rgba(128, 210, 222, 0.38);
border-radius: 4px;
padding: 4px 8px 5px;
pointer-events: none;
white-space: nowrap;
font-family: inherit;
z-index: 2;
transition: border-color .18s, background .18s;
line-height: 1;
}
.map-label.active {
border-color: rgba(128, 210, 222, 0.9);
background: rgba(14, 116, 144, 0.92);
}
.ml-nnt {
display: block;
font-size: .92rem;
font-weight: 700;
color: #e8f7fa;
letter-spacing: .01em;
}
.ml-members {
display: block;
font-size: .8rem;
color: rgba(255,255,255,.88);
margin-top: 1px;
}
.ml-name {
display: block;
font-size: .72rem;
color: rgba(255,255,255,.62);
margin-top: 3px;
border-top: 1px solid rgba(255,255,255,.16);
padding-top: 2px;
}
/* Legend */
.map-legend {
display: flex;
gap: 24px;
margin-top: 12px;
flex-wrap: wrap;
}
.map-legend-item {
display: flex;
align-items: center;
gap: 8px;
font-size: .8rem;
color: #2c4a52;
}
.map-legend-dot {
width: 14px;
height: 14px;
border-radius: 3px;
flex-shrink: 0;
}
/* ── Scroll-fade animation ───────────────────────────────────
JS adds .ready to start hidden, .visible to animate in.
Without JS: elements stay fully visible (no .ready class).
───────────────────────────────────────────────────────────── */
.scroll-fade.ready {
opacity: 0;
transform: translateY(38px);
transition: opacity 0.72s cubic-bezier(0.22, 1, 0.36, 1),
transform 0.72s cubic-bezier(0.22, 1, 0.36, 1);
}
.scroll-fade.ready.visible {
opacity: 1;
transform: translateY(0);
}
/* Stagger the 3 stat boxes inside the chart card */
.nnt-chart-card.ready .nnt-stat-box {
opacity: 0;
transform: translateY(20px);
transition: opacity 0.45s cubic-bezier(0.22, 1, 0.36, 1),
transform 0.45s cubic-bezier(0.22, 1, 0.36, 1);
}
.nnt-chart-card.ready.visible .nnt-stat-box:nth-child(1) { opacity: 1; transform: translateY(0); transition-delay: 0.18s; }
.nnt-chart-card.ready.visible .nnt-stat-box:nth-child(2) { opacity: 1; transform: translateY(0); transition-delay: 0.30s; }
.nnt-chart-card.ready.visible .nnt-stat-box:nth-child(3) { opacity: 1; transform: translateY(0); transition-delay: 0.42s; }
/* ── NNT dynamics chart ──────────────────────────────────── */
.nnt-chart-section { padding-top: 32px; }
.nnt-chart-card {
background: #fff;
border-radius: 16px;
box-shadow: 0 4px 24px rgba(2,51,71,.10);
padding: 28px 32px 24px;
}
.nnt-chart-stats {
display: flex;
gap: 12px;
margin-bottom: 20px;
flex-wrap: wrap;
}
.nnt-stat-box {
flex: 1;
min-width: 140px;
background: #f9fbfc;
border-left: 3px solid #378ADD;
border-radius: 8px;
padding: 12px 16px;
}
.nnt-stat-box.nnt-stat--purple { border-left-color: #9b8fd4; }
.nnt-stat-label { font-size: 11px; color: #6b7c85; margin: 0 0 4px; display: block; }
.nnt-stat-value { font-size: 24px; font-weight: 700; color: #1a2e3a; display: block; }
.nnt-chart-legend {
display: flex;
align-items: center;
gap: 20px;
margin-bottom: 6px;
}
.nnt-legend-item {
display: flex;
align-items: center;
gap: 7px;
font-size: 12px;
font-weight: 600;
color: #2c4a52;
}
.nnt-legend-sq { width: 13px; height: 13px; background: #378ADD; border-radius: 3px; flex-shrink: 0; }
.nnt-legend-ln { width: 22px; height: 2.5px; background: #1D9E75; border-radius: 2px; flex-shrink: 0; }
.nnt-chart-wrap {
position: relative;
max-width: 100%;
margin: 0;
height: clamp(240px, 40vw, 460px);
}
.nnt-chart-footer {
display: flex;
justify-content: space-between;
align-items: center;
margin-top: 14px;
}
.nnt-dl-btn {
width: 36px; height: 36px;
border-radius: 50%;
background: #fff;
border: 1.5px solid #c8dde6;
cursor: pointer;
display: flex; align-items: center; justify-content: center;
color: #378ADD;
font-size: 17px;
transition: background .2s, border-color .2s;
}
.nnt-dl-btn:hover { background: #EAF6F6; border-color: #378ADD; }
.nnt-chart-source { font-size: 11px; color: #8fa5af; font-style: italic; }
/* ── Contact page ────────────────────────────────────────── */
.contact-grid {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 16px;
margin-bottom: 32px;
}
.contact-info-card {
display: flex;
align-items: flex-start;
gap: 14px;
padding: 18px 20px;
border: 1px solid #e0e3e5;
border-radius: 6px;
background: #fff;
}
.contact-info-icon {
width: 42px;
height: 42px;
background: #f0f9fb;
border: 1px solid #c8eef3;
border-radius: 8px;
display: flex;
align-items: center;
justify-content: center;
flex-shrink: 0;
color: var(--green-500);
}
.contact-info-label {
font-size: .72rem;
color: #999;
font-weight: 600;
text-transform: uppercase;
letter-spacing: .04em;
margin-bottom: 4px;
}
.contact-info-value {
font-size: .9rem;
color: #1a1a2e;
line-height: 1.5;
}
.contact-info-value a {
color: var(--green-500);
text-decoration: none;
font-weight: 600;
}
.contact-info-value a:hover { text-decoration: underline; }
.contact-section-title {
font-size: 1rem;
font-weight: 700;
color: #1a1a2e;
margin: 28px 0 14px;
}
.contact-social-row {
display: flex;
gap: 10px;
flex-wrap: wrap;
margin-bottom: 28px;
}
.contact-social-btn {
display: inline-flex;
align-items: center;
gap: 7px;
padding: 9px 16px;
border-radius: 5px;
font-size: .83rem;
font-weight: 600;
color: #fff;
text-decoration: none;
transition: opacity .15s;
}
.contact-social-btn:hover { opacity: .85; }
.contact-social-fb { background: #1877f2; }
.contact-social-ig { background: linear-gradient(135deg,#f09433,#e6683c,#dc2743,#cc2366,#bc1888); }
.contact-social-tg { background: #229ed9; }
.contact-social-yt { background: #ff0000; }
.contact-action-cards {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 14px;
margin-bottom: 28px;
}
.contact-action-card {
display: flex;
align-items: center;
gap: 14px;
padding: 18px 20px;
border: 1px solid #e0e3e5;
border-radius: 6px;
text-decoration: none;
color: #1a1a2e;
background: #fff;
}
.contact-action-card:hover { border-color: var(--green-500); }
.contact-action-card svg { color: var(--green-500); flex-shrink: 0; }
.contact-action-card strong { display: block; font-size: .9rem; font-weight: 700; margin-bottom: 3px; }
.contact-action-card span { font-size: .78rem; color: #666; }
.contact-map {
width: 100%;
height: 320px;
border-radius: 6px;
overflow: hidden;
border: 1px solid #e0e3e5;
margin-bottom: 24px;
}
.contact-map iframe { width: 100%; height: 100%; border: 0; display: block; }
@media (max-width: 640px) {
.contact-grid { grid-template-columns: 1fr; }
.contact-action-cards { grid-template-columns: 1fr; }
}
/* ── Infographics page ───────────────────────────────────── */
.infographic-grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 20px;
margin: 24px 0;
}
.infographic-card {
border: 1px solid #e0e3e5;
border-radius: 6px;
background: #fff;
padding: 22px 18px 18px;
display: flex;
flex-direction: column;
gap: 10px;
position: relative;
}
.infographic-card:hover { border-color: var(--green-500); }
.infographic-card-badge {
position: absolute;
top: 14px;
right: 14px;
background: var(--green-500);
color: #fff;
font-size: .68rem;
font-weight: 700;
padding: 2px 8px;
border-radius: 20px;
}
.infographic-card-visual {
display: flex;
align-items: center;
justify-content: center;
height: 80px;
background: #f5fafb;
border-radius: 4px;
}
.infographic-card h3 {
font-size: .88rem;
font-weight: 700;
color: #1a1a2e;
line-height: 1.35;
margin: 0;
}
.infographic-card p {
font-size: .78rem;
color: #666;
line-height: 1.5;
margin: 0;
flex: 1;
}
.infographic-card-meta {
font-size: .7rem;
color: #aaa;
border-top: 1px solid #f0f0f0;
padding-top: 8px;
margin-top: auto;
}
@media (max-width: 860px) {
.infographic-grid { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 560px) {
.infographic-grid { grid-template-columns: 1fr; }
}
/* Dynamic nnt-cards fade in when render() injects them */
@keyframes nntCardIn {
from { opacity: 0; transform: translateY(14px); }
to { opacity: 1; transform: none; }
}
.nnt-card { animation: nntCardIn 0.35s ease both; }
/* ═══════════════════════════════════════════════════
Spring hover — must stay AFTER scroll-reveal block
so this transition wins regardless of [data-reveal]
═══════════════════════════════════════════════════ */
.leader-card,
.team-card,
.nnt-card,
.partner,
.page-link-card,
.useful-link-card,
.contact-action-card,
.infographic-card,
.research-card {
position: relative;
z-index: 0;
transition: transform 0.55s cubic-bezier(0.34, 1.56, 0.64, 1),
box-shadow 0.55s ease,
border-color 0.2s ease,
opacity 0.55s ease,
translate 0.55s ease;
}
.leader-card:hover { transform: scale(1.20); box-shadow: 0 24px 80px rgba(0,0,0,.18); z-index: 2; }
.team-card:hover { transform: scale(1.08); box-shadow: 0 14px 40px rgba(0,0,0,.13); z-index: 2; }
.nnt-card:hover { transform: scale(1.04); box-shadow: 0 10px 32px rgba(2,51,71,.13); z-index: 2; }
.partner:hover { transform: scale(1.07); box-shadow: 0 8px 24px rgba(1,61,140,.13); z-index: 2; }
.page-link-card:hover { transform: scale(1.05); box-shadow: 0 8px 24px rgba(1,61,140,.12); z-index: 2; }
.useful-link-card:hover { transform: scale(1.07); box-shadow: 0 8px 24px rgba(42,142,158,.18); z-index: 2; }
.contact-action-card:hover{ transform: scale(1.05); box-shadow: 0 8px 24px rgba(0,180,198,.13); z-index: 2; }
.infographic-card:hover { transform: scale(1.05); box-shadow: 0 8px 24px rgba(0,180,198,.12); z-index: 2; }
.research-card:hover { transform: scale(1.05); box-shadow: 0 8px 24px rgba(0,0,0,.10); z-index: 2; }
/* ── Utility classes extracted from inline styles (content.js) ── */
.text-muted-light { color: rgba(180,220,255,.5); }
.loading-text { color: rgba(180,220,255,.5); }
.grant-amount { font-size: 13px; color: #00b4d8; margin-top: 8px; }
.grant-deadline { font-size: 13px; color: rgba(180,220,255,.6); margin-top: 4px; }
.btn-inline { margin-top: 14px; display: inline-block; }
.mt-section { margin-top: 2rem; }
.mb-section { margin-bottom: 3rem; }
.fw-600 { font-weight: 600; }
.load-more-wrap { text-align: center; margin: 32px 0; }
.load-more-count { font-size: 13px; color: var(--neutral-500); margin-top: 8px; }
.search-empty { padding: 24px 0; color: #798384; }
.search-section-title { font-size: 18px; font-weight: 600; color: #1a1a1a; margin: 24px 0 12px; padding-bottom: 8px; border-bottom: 1px solid var(--neutral-200, #e5e7eb); }
#search-static-results .search-section-title:first-child { margin-top: 0; }
/* Header nav spans full viewport with truly symmetric side padding
so logo (flush-left) and the rightmost icon (flush-right) sit at equal distance from the edges.
Other .container uses (hero, main sections, footer) remain 1200px centered. */
.site-header > .container {
width: 100%;
max-width: 100%;
padding-left: clamp(16px, 2.5vw, 48px);
padding-right: clamp(16px, 2.5vw, 48px);
box-sizing: border-box;
}
/* ── Responsive-down fixes. */
/* Top-bar: shrink fond-brand text progressively in the 1200-1100 window before menu collapses. */
.topbar-fond-brand { flex-shrink: 1; min-width: 0; }
.topbar-fond-name { min-width: 0; overflow: hidden; }
.topbar-fond-name-primary,
.topbar-fond-name-sub { overflow: hidden; text-overflow: ellipsis; }
.topbar-brand { min-width: 0; }
.topbar-org-name {
overflow: hidden;
display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
}
@media (max-width: 1200px) {
.topbar-fond-name-sub { display: none; }
}
/* Home: keep the h1 clear of the fixed blurry header (height ~108px = 36 test-mode + 72 nav). */
body.home-page .hero-cinematic-inner { padding: 160px 0 180px; }
/* At ≤1100: swap menu to hamburger. Topbar-controls also fold into the drawer
so laptops at 1280/1366/1440 keep the desktop nav visible.
Was 1480 — that hid the nav on every standard laptop. */
@media (max-width: 1100px) {
.menu { display: none !important; }
.hamburger { display: flex !important; justify-self: end; }
.nav { grid-template-columns: auto 1fr auto; }
.topbar-controls { display: none; }
}
/* Progressive shedding as room runs out. Tuned for nav-visible-from-1101.
Was tuned for the old hamburger-at-1480 era which left the 1100-1280 band
with overflowing controls (lang dropdown clipped off the right edge). */
@media (max-width: 1280px) { .topbar-fond-name { display: none; } }
@media (max-width: 1180px) { .topbar-fond-brand { display: none; } }
@media (max-width: 1280px) {
.menu { gap: 14px; font-size: 15px; }
.menu > .nav-item > a,
.menu > a { padding: 6px 6px; }
.topbar-lang-trigger { padding: 6px 8px; font-size: 13px; }
.topbar-controls { gap: 8px; }
}
@media (max-width: 720px) { .topbar-lang:nth-child(n+2) { display: none; } }
@media (max-width: 560px) { .topbar-lang { display: none; } }
@media (max-width: 480px) { .vis-btn { display: none; } }
@media (max-width: 400px) { .search-btn { display: none; } }
/* At ≤1100: stack the hero so stats bar / CTA buttons flow below content naturally. */
@media (max-width: 1100px) {
.hero-cinematic,
body.home-page .hero-cinematic {
min-height: auto;
display: flex;
flex-direction: column;
}
.hero-cinematic-inner,
body.home-page .hero-cinematic-inner {
min-height: auto;
padding: 140px 0 32px;
}
.hero-cta-corner {
position: relative;
bottom: auto;
right: auto;
width: auto;
min-width: 280px;
max-width: calc(100% - 32px);
padding: 0 16px 32px;
align-self: center;
}
.hero-stats-bar { position: relative; }
}
/* ============================================================
* a11y: focus-visible
* Re-introduces a visible focus indicator for keyboard users —
* existing outline:none rules suppress focus rings for mouse
* clicks (intentional), but :focus-visible fires only when the
* browser determines focus came from keyboard, screen reader,
* or other a11y tech. WCAG 2.4.7 (Focus Visible) compliance.
* ============================================================ */
:focus-visible {
outline: 2px solid #0e7490;
outline-offset: 2px;
border-radius: 4px;
}
.btn:focus-visible,
button:focus-visible,
a:focus-visible,
input:focus-visible,
textarea:focus-visible,
select:focus-visible,
[tabindex]:focus-visible {
outline: 2px solid #0e7490;
outline-offset: 2px;
box-shadow: 0 0 0 4px rgba(14, 116, 144, 0.15);
}
.skip-link:focus,
.skip-link:focus-visible {
position: fixed;
top: 8px;
left: 8px;
z-index: 10000;
padding: 10px 16px;
background: #023347;
color: #fff;
text-decoration: none;
border-radius: 6px;
outline: 2px solid #0e7490;
outline-offset: 2px;
}
/* ============================================================
* Team page styles — extracted from inline duplicates on
* hududiy-bolinmalar.html and our-team.html in iter 51.
* ============================================================ */
.team-meta-bar { display:flex; flex-wrap:wrap; gap:14px; margin:0 0 24px; }
.team-chip { background:#f0f4f8; border:1px solid var(--neutral-200); color:var(--neutral-900); padding:9px 14px; font-size:15px; font-weight:600; border-radius:999px; }
.team-controls { display:flex; flex-wrap:wrap; gap:10px; align-items:center; margin-bottom:22px; }
.team-search { flex:1; min-width:220px; border:1px solid var(--neutral-200); border-radius:6px; padding:10px 14px; font:inherit; font-size:15px; outline:none; }
.team-search:focus { border-color:var(--green-500); }
.team-filter { border:1px solid var(--neutral-200); background:#fff; color:var(--neutral-900); font:inherit; font-size:15px; font-weight:600; padding:9px 14px; border-radius:999px; cursor:pointer; transition:background .15s,color .15s; }
.team-filter.active { background:var(--green-500); border-color:var(--green-500); color:#fff; }
.team-empty { display:none; padding:24px; border-radius:8px; background:#f5f6f8; color:var(--neutral-500); font-size:15px; }
.team-card .team-region { margin:0 0 8px; color:var(--neutral-500); font-size:14px; font-weight:700; text-transform:uppercase; letter-spacing:.06em; }
.team-card .team-meta a { color:var(--green-500); text-decoration:none; overflow-wrap:break-word; word-break:break-all; }
.team-card .team-meta a:hover { text-decoration:underline; }
.team-card.vacancy .team-photo { background:var(--neutral-200); }
/* iter 52: footer legal/copyright row */
.footer-legal {
margin-top: 18px;
padding-top: 14px;
border-top: 1px solid rgba(255,255,255,0.08);
display: flex;
flex-wrap: wrap;
justify-content: space-between;
gap: 10px;
align-items: center;
font-size: 13px;
color: rgba(255,255,255,0.55);
}
.footer-legal a {
color: rgba(255,255,255,0.7);
text-decoration: none;
}
.footer-legal a:hover { color: #fff; text-decoration: underline; }
.footer-legal-links { display: flex; gap: 18px; flex-wrap: wrap; }
/* ============================================================
2026-05-25 responsiveness audit pass — bundled fixes
============================================================ */
/* #1 #18 footer copyright contrast — actual footer bg is #E8F5FB (light blue),
not the dark fill the original rule expected. Force dark text + border. */
.footer-legal { color: #374151; border-top: 1px solid #b8dce8; }
.footer-legal a { color: #023347; }
.footer-legal a:hover { color: #0a4a64; text-decoration: underline; }
/* #2 #7 sub-page logo: HTML src now points to logo-oznntma.png on every
non-home page; only need to make sure the wide dark logo sizes right. */
body:not(.home-page) .topbar-building img { height: 58px; width: auto; }
/* #3 #4 Real fix lives at the 1480→1100 edit in the older block above; this
ensures topbar utility row also folds away with the menu. */
@media (max-width: 1100px) {
.utility-left { display: none; }
.utility-right { width: 100%; justify-content: flex-end; }
}
/* #5 hero video/scan-band overflowed the viewport on narrow phones —
the video was 8px wider than the container due to scale(1.02). */
@media (max-width: 480px) {
.hero-cinematic, .hero-cinematic-inner { overflow: hidden; }
.hero-cinematic-video {
width: 100% !important;
max-width: 100% !important;
left: 0 !important;
transform: none !important;
}
.scan, .scan-1, .scan-2 { width: 100% !important; left: 0; right: 0; max-width: 100%; }
}
/* #6 sticky site-header sat under the mobile drawer when narrow — bumped
padding-top to clear utility-bar (42) + nav (72) + breathing room. */
.mobile-nav { z-index: 50; padding-top: 130px; }
/* #8 test-mode-banner sometimes covered drawer/dropdowns when above z:60 */
.test-mode-banner { z-index: 60; }
/* Banner is position:fixed top:0 (z:60). Home keeps content clear via
.home-page .site-header { position:fixed; top:36px } + the hero's own
100px top padding. Sub-pages were missing the equivalent offset, so the
banner overlapped the sticky header and the first page section. Push the
body down by banner height and float the sticky header below the banner. */
body:not(.home-page) { padding-top: 36px; }
body:not(.home-page) .site-header { top: 36px; }
@media (max-width: 560px) {
body:not(.home-page) { padding-top: 32px; }
body:not(.home-page) .site-header { top: 32px; }
}
/* #9 /leadership card text column overflowed because long names had no
wrap-target — flex item default min-width:auto held them at intrinsic width.
Force min-width:0 + word-break on the text column and slim the photo. */
.leader-center { min-width: 0; word-break: break-word; overflow-wrap: anywhere; }
.leader-name, .leader-role { overflow-wrap: anywhere; word-break: break-word; }
@media (max-width: 460px) {
.leader-card-body { padding: 18px 14px; gap: 14px; }
.leader-photo { width: 88px; height: 88px; }
.leader-name { font-size: 1.05rem; }
.leader-role { font-size: .88rem; margin-bottom: 12px; }
.leader-btn { padding: 8px 12px; font-size: .82rem; }
.leader-contacts-col { padding-top: 12px; }
}
/* #10 homepage news heading wrapped 4 lines because "see all" link ate width */
@media (max-width: 640px) {
.section-header-row {
flex-direction: column;
align-items: flex-start;
gap: 10px;
}
.section-header-row .see-all-link { align-self: flex-start; }
}
/* #13 /reporting-forms wide table got cut off on mobile */
.doc-table { overflow-x: auto; -webkit-overflow-scrolling: touch; }
.doc-table table { min-width: 640px; }
/* #16 hero copy hit the right edge on phones — the .container baseline
padding wasn't reaching .hero-cinematic-copy. Force a side floor on both. */
@media (max-width: 600px) {
.hero-cinematic-inner,
body.home-page .hero-cinematic-inner {
padding-left: clamp(16px, 4vw, 24px) !important;
padding-right: clamp(16px, 4vw, 24px) !important;
}
.hero-cinematic-copy h1,
.hero-cinematic-copy p,
.hero-cinematic-copy .lead {
padding-right: 8px;
word-break: break-word;
overflow-wrap: anywhere;
}
}
/* #20 homepage stat counter strip got clipped under the sticky header */
.home-page .hero-stats-bar { z-index: 5; }
/* #17 mobile drawer lang + a11y + search controls — moved to the top of
the drawer (sits below the close X), styled with high-specificity
selectors so the underlying .mobile-nav typography doesn't bleed in. */
.mobile-nav .mobile-nav-controls {
display: flex;
align-items: center;
gap: 10px;
flex-wrap: wrap;
margin: 0 0 22px;
padding: 0 0 18px;
border-bottom: 1px solid #e1e1e1;
border-top: 0;
}
.mobile-nav .mobile-nav-controls .lang-group {
display: flex;
gap: 6px;
flex: 1 1 auto;
min-width: 0;
}
.mobile-nav .mobile-nav-controls .lang-pill {
flex: 1 1 0;
border: 1px solid #cbd2d6;
background: #fff;
padding: 10px 0;
border-radius: 999px;
font-size: 13px;
font-weight: 700;
letter-spacing: .04em;
color: #1a1a2e;
cursor: pointer;
text-align: center;
font-family: inherit;
line-height: 1;
appearance: none;
-webkit-appearance: none;
transition: background .12s ease, color .12s ease, border-color .12s ease;
}
.mobile-nav .mobile-nav-controls .lang-pill:hover { border-color: #023347; }
.mobile-nav .mobile-nav-controls .lang-pill.is-active {
background: #023347;
color: #fff;
border-color: #023347;
}
.mobile-nav .mobile-nav-controls .icon-btn {
background: #fff;
border: 1px solid #cbd2d6;
border-radius: 999px;
padding: 0;
cursor: pointer;
color: #1a1a2e;
width: 42px;
height: 42px;
flex: 0 0 auto;
display: inline-flex;
align-items: center;
justify-content: center;
appearance: none;
-webkit-appearance: none;
font-family: inherit;
}
.mobile-nav .mobile-nav-controls .icon-btn:hover { border-color: #023347; color: #023347; }
.mobile-nav .mobile-nav-controls .icon-btn svg {
width: 20px;
height: 20px;
display: block;
stroke: currentColor;
fill: none;
}
/* #14 #15 skeleton loaders for news/events lists while data fetches */
.skeleton-list {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
gap: 20px;
margin-top: 8px;
}
.skeleton-card {
background: #fff;
border: 1px solid var(--neutral-200, #e4e7e7);
border-radius: 10px;
padding: 14px;
display: flex;
flex-direction: column;
gap: 10px;
}
.sk {
background: linear-gradient(90deg, #eef1f2 0%, #f6f8f9 45%, #eef1f2 90%);
background-size: 200% 100%;
border-radius: 6px;
animation: skShimmer 1.4s linear infinite;
}
.sk-thumb { height: 140px; border-radius: 8px; margin-bottom: 6px; }
.sk-line { height: 12px; }
.sk-line.w40 { width: 40%; }
.sk-line.w50 { width: 50%; }
.sk-line.w60 { width: 60%; }
.sk-line.w65 { width: 65%; }
.sk-line.w70 { width: 70%; }
.sk-line.w75 { width: 75%; }
.sk-line.w80 { width: 80%; }
.sk-line.w85 { width: 85%; }
.sk-line.w90 { width: 90%; }
@keyframes skShimmer {
0% { background-position: 200% 0; }
100% { background-position: -200% 0; }
}
@media (prefers-reduced-motion: reduce) {
.sk { animation: none; }
}