/* =========================================================== BBI Africa — Biosafety & Biosecurity Initiative Design system =========================================================== */ :root { --green-900: #0b3d2e; --green-800: #0f4f3c; --green-700: #13654d; --green-600: #1c7d61; --green-100: #e3f2ec; --gold: #e0a92e; --gold-dark: #b4861e; --red: #c0392b; --blue: #1f6feb; --ink: #16241f; --muted: #5c6b64; --line: #e2e8e3; --bg: #f6f9f7; --card: #ffffff; --shadow: 0 1px 3px rgba(11, 61, 46, .08), 0 6px 24px rgba(11, 61, 46, .06); --radius: 14px; --radius-sm: 10px; --maxw: 1180px; --font: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif; } /* --- Site password gate (see js/app.js gate()) ------------------------------ Content is hidden by default (from the , so there is no flash) and only revealed once JS adds .gate-open to . A failsafe in app.js also adds .gate-open on any error, so a gate bug can never leave the site blank. */ html { background: var(--green-900); } body { visibility: hidden; } html.gate-open body { visibility: visible; } #bbi-gate { position: fixed; inset: 0; z-index: 2147483647; visibility: visible; display: flex; align-items: center; justify-content: center; padding: 24px; background: radial-gradient(1100px 620px at 50% -10%, #12583f, var(--green-900)); font-family: var(--font); } #bbi-gate .gate-card { background: var(--card); color: var(--ink); width: 100%; max-width: 380px; border-radius: var(--radius); box-shadow: var(--shadow); padding: 30px 26px 24px; text-align: center; border-top: 4px solid var(--gold); } #bbi-gate .gate-logo { width: 54px; height: 54px; margin: 0 auto 14px; display: block; } #bbi-gate h1 { font-size: 20px; margin: 0 0 6px; color: var(--green-900); } #bbi-gate p { font-size: 14px; color: var(--muted); margin: 0 0 18px; } #bbi-gate input { width: 100%; padding: 12px 14px; font-size: 15px; color: var(--ink); border: 1px solid var(--line); border-radius: var(--radius-sm); outline: none; } #bbi-gate input:focus { border-color: var(--green-700); } #bbi-gate button { width: 100%; margin-top: 12px; padding: 12px 14px; font-size: 15px; font-weight: 600; cursor: pointer; color: #fff; background: var(--green-800); border: 0; border-radius: var(--radius-sm); } #bbi-gate button:hover { background: var(--green-900); } #bbi-gate .gate-err { color: var(--red); font-size: 13px; min-height: 18px; margin-top: 10px; } * { box-sizing: border-box; } html { scroll-behavior: smooth; } body { margin: 0; font-family: var(--font); color: var(--ink); background: var(--bg); line-height: 1.6; -webkit-font-smoothing: antialiased; overflow-x: clip; /* stop any horizontal overflow (keeps sticky header working) */ max-width: 100%; } img, svg, table, pre { max-width: 100%; } img { max-width: 100%; display: block; } a { color: var(--green-700); text-decoration: none; } a:hover { text-decoration: underline; } h1, h2, h3, h4 { line-height: 1.25; color: var(--ink); margin: 0 0 .5em; } h1 { font-size: clamp(1.7rem, 4vw, 2.6rem); letter-spacing: -.02em; } h2 { font-size: clamp(1.35rem, 3vw, 1.9rem); letter-spacing: -.01em; } p { margin: 0 0 1rem; } .container { max-width: var(--maxw); margin: 0 auto; padding: 0 20px; } .muted { color: var(--muted); } .center { text-align: center; } /* ---------- Top bar ---------- */ /* The wrapper (a normal block child of ) is the sticky element, so its containing block is and it stays pinned across the whole page. */ #app-header { position: sticky; top: 0; z-index: 50; } .appbar { background: var(--green-900); color: #fff; border-bottom: 3px solid var(--gold); box-shadow: 0 2px 10px rgba(11, 61, 46, .18); position: sticky; top: 0; z-index: 50; } .appbar .container { display: flex; align-items: center; gap: 14px; min-height: 62px; padding: 6px 0; } .brand { display: flex; align-items: center; gap: 11px; color: #fff; font-weight: 700; min-width: 0; flex: 0 1 auto; } .brand:hover { text-decoration: none; } .brand .logo { width: 36px; height: 36px; flex: 0 0 auto; } .brand span { min-width: 0; } .brand small { display: block; font-weight: 500; font-size: .68rem; color: #bfe0d3; letter-spacing: .04em; text-transform: uppercase; } /* Fluid size + 2-line clamp so long translations (Swahili/Arabic) never blow up the bar */ .brand b { font-size: clamp(.84rem, 1.25vw, 1.02rem); letter-spacing: .01em; line-height: 1.18; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; } .nav { margin-left: auto; display: flex; gap: 2px; align-items: center; } .nav a { color: #d6ece2; padding: 8px 10px; border-radius: 8px; font-size: clamp(.82rem, .9vw, .92rem); font-weight: 500; white-space: nowrap; } .nav a:hover { background: rgba(255,255,255,.1); color: #fff; text-decoration: none; } .nav a.active { background: var(--gold); color: #3a2c05; font-weight: 600; } .menu-btn { display: none; margin-left: auto; background: transparent; border: 0; color: #fff; font-size: 1.6rem; cursor: pointer; padding: 4px 8px; } /* "More" dropdown */ .nav .more { position: relative; display: inline-flex; } .more-btn { color: #d6ece2; background: transparent; border: 0; cursor: pointer; font: inherit; padding: 8px 10px; border-radius: 8px; font-size: clamp(.82rem, .9vw, .92rem); font-weight: 500; white-space: nowrap; } .more-btn:hover { background: rgba(255,255,255,.1); color: #fff; } .more-btn.active { color: #fff; } .more-menu { position: absolute; right: 0; top: calc(100% + 8px); min-width: 180px; background: var(--green-800); border: 1px solid rgba(255,255,255,.12); border-radius: 12px; padding: 6px; display: none; flex-direction: column; box-shadow: var(--shadow); z-index: 60; } .more.open .more-menu { display: flex; } .more-menu a { padding: 10px 12px; border-radius: 8px; } /* Get Involved CTA */ .nav-cta { background: var(--gold); color: #3a2c05 !important; font-weight: 600; padding: 8px 16px; border-radius: 999px; margin-left: 6px; } .nav-cta:hover { text-decoration: none; box-shadow: 0 4px 14px rgba(224,169,46,.35); } @media (max-width: 880px) { .menu-btn { display: block; } .nav { position: absolute; top: 100%; left: 0; right: 0; flex-direction: column; align-items: stretch; background: var(--green-800); padding: 6px; gap: 1px; margin: 0; transform: translateY(-120%); transition: transform .25s ease; box-shadow: var(--shadow); max-height: 86vh; overflow-y: auto; } .nav.open { transform: translateY(0); } .nav a { padding: 9px 12px; border-radius: 8px; text-align: left; } /* Flatten the "More" dropdown into the mobile list */ .nav .more { display: flex; flex-direction: column; position: static; } .more-btn { display: none; } .more-menu { position: static; display: flex; flex-direction: column; background: transparent; border: 0; box-shadow: none; padding: 0; min-width: 0; gap: 1px; } .more-menu a { padding: 9px 12px; } .nav-cta { margin: 6px 0 0; text-align: left; } } /* ---------- Buttons ---------- */ .btn { display: inline-flex; align-items: center; gap: 8px; cursor: pointer; padding: 11px 20px; border-radius: 999px; font-weight: 600; font-size: .95rem; border: 1px solid transparent; transition: transform .08s ease, box-shadow .2s ease; } .btn:hover { text-decoration: none; transform: translateY(-1px); } .btn-primary { background: var(--gold); color: #3a2c05; } .btn-primary:hover { box-shadow: 0 6px 18px rgba(224,169,46,.35); } .btn-ghost { background: rgba(255,255,255,.12); color: #fff; border-color: rgba(255,255,255,.35); } .btn-outline { background: #fff; color: var(--green-800); border-color: var(--line); } /* ---------- Hero ---------- */ .hero { background: radial-gradient(1200px 400px at 80% -10%, rgba(224,169,46,.22), transparent 60%), linear-gradient(160deg, var(--green-900), var(--green-700)); color: #fff; padding: 64px 0 72px; position: relative; overflow: hidden; } .hero::after { content: ""; position: absolute; inset: 0; background-image: radial-gradient(rgba(255,255,255,.06) 1px, transparent 1px); background-size: 22px 22px; opacity: .5; pointer-events: none; } .hero .container { position: relative; z-index: 1; max-width: 880px; } .hero h1 { color: #fff; } .hero p.lead { font-size: clamp(1.02rem, 2.2vw, 1.25rem); color: #d9ede4; max-width: 680px; } .pill { display: inline-flex; align-items: center; gap: 7px; background: rgba(255,255,255,.12); border: 1px solid rgba(255,255,255,.22); color: #eafff5; padding: 5px 13px; border-radius: 999px; font-size: .78rem; font-weight: 600; letter-spacing: .03em; text-transform: uppercase; margin-bottom: 18px; } .hero-actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 26px; } /* ---------- Sections ---------- */ .section { padding: 56px 0; } .section.tight { padding: 36px 0; } .section-head { max-width: 720px; margin-bottom: 30px; } .eyebrow { color: var(--green-600); font-weight: 700; text-transform: uppercase; letter-spacing: .08em; font-size: .76rem; margin-bottom: 8px; } /* ---------- Cards & grids ---------- */ .grid { display: grid; gap: 18px; } .grid.cols-2 { grid-template-columns: repeat(2, 1fr); } .grid.cols-3 { grid-template-columns: repeat(3, 1fr); } .grid.cols-4 { grid-template-columns: repeat(4, 1fr); } @media (max-width: 900px) { .grid.cols-3, .grid.cols-4 { grid-template-columns: repeat(2, 1fr); } } @media (max-width: 560px) { .grid.cols-2, .grid.cols-3, .grid.cols-4 { grid-template-columns: 1fr; } } .card { background: var(--card); border: 1px solid var(--line); border-radius: var(--radius); padding: 22px; box-shadow: var(--shadow); } .card h3 { font-size: 1.1rem; } .card .ico { width: 44px; height: 44px; border-radius: 12px; display: grid; place-items: center; background: var(--green-100); color: var(--green-700); margin-bottom: 14px; font-size: 1.4rem; } /* ---------- Stats ---------- */ .stat { background: var(--card); border: 1px solid var(--line); border-radius: var(--radius); padding: 22px; box-shadow: var(--shadow); position: relative; overflow: hidden; } .stat::before { content:""; position:absolute; left:0; top:0; bottom:0; width:5px; background: var(--gold); } .stat .num { font-size: clamp(1.8rem, 4vw, 2.5rem); font-weight: 800; color: var(--green-800); letter-spacing: -.02em; line-height: 1; } .stat .lbl { color: var(--muted); font-size: .9rem; margin-top: 6px; } .stat .sub { font-size: .78rem; color: var(--green-600); font-weight: 600; margin-top: 8px; } /* ---------- Pillars / timeline ---------- */ .pillar { border-left: 3px solid var(--green-600); padding-left: 16px; } .pillar .n { font-size: .8rem; font-weight: 700; color: var(--gold-dark); } .timeline { position: relative; margin: 0; padding: 0; list-style: none; } .timeline li { position: relative; padding: 0 0 26px 30px; border-left: 2px solid var(--line); } .timeline li:last-child { border-left-color: transparent; } .timeline li::before { content:""; position:absolute; left:-8px; top:2px; width:14px; height:14px; border-radius:50%; background: var(--gold); border: 3px solid #fff; box-shadow: 0 0 0 1px var(--line); } .timeline .yr { font-weight: 700; color: var(--green-800); } /* ---------- Dashboard ---------- */ .bar-row { display: grid; grid-template-columns: 160px 1fr 48px; gap: 12px; align-items: center; margin-bottom: 12px; } .bar-track { background: var(--green-100); border-radius: 999px; height: 14px; overflow: hidden; } .bar-fill { height: 100%; background: linear-gradient(90deg, var(--green-600), var(--green-700)); border-radius: 999px; transition: width 1s ease; } .bar-row .v { font-weight: 700; color: var(--green-800); font-size: .9rem; text-align: right; } .bar-row .k { font-size: .9rem; color: var(--ink); } @media (max-width:560px){ .bar-row { grid-template-columns: 110px 1fr 40px; } } .donut-wrap { display: flex; align-items: center; gap: 22px; flex-wrap: wrap; } .legend { list-style: none; padding: 0; margin: 0; display: grid; gap: 8px; } .legend li { display: flex; align-items: center; gap: 9px; font-size: .9rem; } .legend .dot { width: 12px; height: 12px; border-radius: 3px; flex: 0 0 auto; } .progress-ring { display: grid; place-items: center; } .progress-ring .center { position: absolute; text-align: center; } .progress-ring .center b { font-size: 1.5rem; color: var(--green-800); } /* ---------- Africa map ---------- */ .map-wrap { position: relative; } .africa-svg { width: 100%; height: auto; display: block; background: var(--green-100); border-radius: 12px; } .africa-svg .ctry { transition: fill .15s ease, opacity .15s ease; } .africa-svg .ctry.tracked { cursor: pointer; } .africa-svg .ctry.tracked:hover { opacity: .82; } .africa-svg .ctry.sel { stroke: #16241f; stroke-width: 1.6; } .map-tip { position: absolute; z-index: 5; pointer-events: none; background: #16241f; color: #fff; padding: 6px 10px; border-radius: 8px; font-size: .82rem; max-width: 240px; box-shadow: var(--shadow); } .map-tip .tag { font-size: .7rem; } .map-legend { display: flex; flex-wrap: wrap; gap: 14px; margin-top: 14px; font-size: .85rem; color: var(--muted); } .map-legend span { display: inline-flex; align-items: center; gap: 6px; } .map-legend i { width: 13px; height: 13px; border-radius: 3px; display: inline-block; } .map-info { margin-top: 12px; padding: 12px 14px; background: var(--bg); border: 1px solid var(--line); border-radius: 10px; font-size: .92rem; } /* ---------- Directory ---------- */ .toolbar { display: flex; flex-wrap: wrap; gap: 10px; margin-bottom: 22px; align-items: center; } .toolbar input[type="search"], .toolbar select { padding: 11px 14px; border: 1px solid var(--line); border-radius: 10px; font: inherit; background: #fff; color: var(--ink); } .toolbar input[type="search"] { flex: 1; min-width: 200px; } .count-tag { margin-left: auto; color: var(--muted); font-size: .88rem; } .toolbar .chk { display: inline-flex; align-items: center; gap: 7px; font-size: .9rem; color: var(--ink); padding: 0 4px; cursor: pointer; white-space: nowrap; } .toolbar .chk input { width: 16px; height: 16px; accent-color: var(--green-700); } .person { background: var(--card); border: 1px solid var(--line); border-radius: var(--radius); padding: 18px; box-shadow: var(--shadow); display: flex; gap: 14px; align-items: flex-start; transition: transform .1s ease, box-shadow .2s ease; } a.person:hover { transform: translateY(-2px); box-shadow: 0 8px 26px rgba(11,61,46,.12); text-decoration: none; } .li-btn { flex: 0 0 auto; width: 38px; height: 38px; border-radius: 50%; display: grid; place-items: center; background: #0a66c214; align-self: center; cursor: pointer; transition: background .15s ease; } .li-btn:hover { background: #0a66c233; } .avatar { width: 52px; height: 52px; border-radius: 50%; flex: 0 0 auto; display: grid; place-items: center; font-weight: 700; color: #fff; font-size: 1.05rem; } .person h3 { margin: 0 0 2px; font-size: 1.02rem; } .person .role { color: var(--muted); font-size: .86rem; margin-bottom: 8px; } .tag { display: inline-block; font-size: .72rem; font-weight: 600; padding: 3px 9px; border-radius: 999px; background: var(--green-100); color: var(--green-700); margin: 2px 4px 2px 0; } .tag.gold { background: #fbf0d6; color: var(--gold-dark); } .tag.blue { background: #e6effd; color: var(--blue); } .flag { font-size: .8rem; color: var(--muted); margin-top: 6px; } /* ---------- Lists / news ---------- */ .news-item { display: grid; grid-template-columns: 92px 1fr; gap: 16px; padding: 18px 0; border-bottom: 1px solid var(--line); } .news-item .date { background: var(--green-100); border-radius: 10px; text-align: center; padding: 10px 4px; align-self: start; } .news-item .date b { display: block; font-size: 1.3rem; color: var(--green-800); line-height: 1; } .news-item .date span { font-size: .72rem; color: var(--muted); text-transform: uppercase; } .news-item h3 { font-size: 1.08rem; margin-bottom: 4px; } @media (max-width:560px){ .news-item { grid-template-columns: 64px 1fr; } } .res-item { display: flex; gap: 14px; align-items: center; padding: 14px 0; border-bottom: 1px solid var(--line); } .res-item .ficon { width: 40px; height: 40px; border-radius: 9px; background: var(--green-100); color: var(--green-700); display: grid; place-items: center; flex: 0 0 auto; font-weight: 700; font-size: .72rem; } /* ---------- Banners / CTA ---------- */ .cta { background: linear-gradient(160deg, var(--green-800), var(--green-600)); color: #fff; border-radius: 18px; padding: 40px; text-align: center; } .cta h2 { color: #fff; } .cta p { color: #d9ede4; max-width: 560px; margin-inline: auto; } .notice { background: #fff8e8; border: 1px solid #f0dca6; border-radius: 12px; padding: 14px 16px; font-size: .9rem; color: #6a5212; } /* ---------- Forms ---------- */ .form { display: grid; gap: 14px; margin-top: 16px; } .form label { display: grid; gap: 6px; font-size: .88rem; font-weight: 600; color: var(--ink); } .form input, .form select, .form textarea { font: inherit; font-weight: 400; padding: 11px 13px; border: 1px solid var(--line); border-radius: 10px; background: #fff; color: var(--ink); width: 100%; } .form input:focus, .form select:focus, .form textarea:focus { outline: 2px solid var(--green-600); outline-offset: 1px; border-color: var(--green-600); } .form textarea { resize: vertical; } .form .btn { justify-self: start; } @media (max-width:560px){ .form .grid.cols-2 { grid-template-columns: 1fr; } } .form label.chk-row, .chk-row { display: flex; gap: 9px; align-items: flex-start; font-weight: 400; font-size: .9rem; } .chk-row input { width: 17px; height: 17px; margin-top: 2px; accent-color: var(--green-700); flex: 0 0 auto; } /* ---------- Tabs ---------- */ .tabs { display: flex; flex-wrap: wrap; gap: 4px; background: var(--bg); border: 1px solid var(--line); border-radius: 999px; padding: 4px; margin-bottom: 18px; } .tab { flex: 1 1 auto; border: 0; background: transparent; padding: 9px 14px; border-radius: 999px; font: inherit; font-weight: 600; font-size: .9rem; color: var(--muted); cursor: pointer; white-space: nowrap; } .tab.active { background: var(--green-700); color: #fff; } /* On narrow screens, let the tabs wrap onto multiple rows instead of overflowing the screen (admin and other multi-tab pages). */ @media (max-width: 640px) { .tabs { border-radius: 16px; padding: 6px; } .tab { flex: 1 1 auto; font-size: .85rem; padding: 8px 12px; } } /* ---------- Admin tab bar ---------- */ /* Fills the full content width on desktop (one even row, like the toolbar and tables below it). On smaller screens it becomes a horizontally scrollable strip so every tab stays on a single row and reachable by swiping, instead of wrapping into uneven, hard-to-tap rows. */ #admin-tabs { flex-wrap: nowrap; width: 100%; overflow-x: auto; scrollbar-width: thin; -webkit-overflow-scrolling: touch; } #admin-tabs .tab { flex: 1 1 auto; text-align: center; } #admin-tabs::-webkit-scrollbar { height: 6px; } #admin-tabs::-webkit-scrollbar-thumb { background: var(--line); border-radius: 999px; } @media (max-width: 900px) { /* Stop stretching tabs to fill; let them keep their natural width and scroll. */ #admin-tabs .tab { flex: 0 0 auto; } } /* ---------- Admin table ---------- */ .table-wrap { overflow-x: auto; border: 1px solid var(--line); border-radius: 12px; background: #fff; } .adm-table { width: 100%; border-collapse: collapse; font-size: .9rem; min-width: 720px; } .adm-table th { text-align: left; background: var(--green-100); color: var(--green-800); font-size: .78rem; text-transform: uppercase; letter-spacing: .04em; padding: 11px 14px; } .adm-table td { padding: 12px 14px; border-top: 1px solid var(--line); vertical-align: top; } .adm-table tr:hover td { background: #fafdfb; } /* ---------- ECC editor rows ---------- */ .ecc-row { display: flex; gap: 8px; margin-bottom: 8px; flex-wrap: wrap; align-items: center; } .ecc-row input { flex: 1; min-width: 130px; padding: 8px 10px; border: 1px solid var(--line); border-radius: 8px; font: inherit; } .ecc-x { padding: 6px 12px; color: #c0392b; flex: 0 0 auto; } /* ---------- Detail drawer ---------- */ .drawer { position: fixed; inset: 0; z-index: 200; background: rgba(11,36,31,.45); display: flex; justify-content: flex-end; } .drawer-panel { width: min(520px, 100%); background: #fff; height: 100%; overflow-y: auto; padding: 26px; position: relative; box-shadow: -8px 0 30px rgba(0,0,0,.2); animation: slidein .2s ease; } @keyframes slidein { from { transform: translateX(30px); opacity: .6; } to { transform: none; opacity: 1; } } .drawer-close { position: absolute; top: 14px; right: 16px; border: 0; background: var(--bg); width: 34px; height: 34px; border-radius: 50%; font-size: 1.3rem; cursor: pointer; color: var(--ink); } .kv { padding: 10px 0; border-bottom: 1px solid var(--line); } .kv span { display: block; font-size: .74rem; text-transform: uppercase; letter-spacing: .04em; color: var(--muted); margin-bottom: 3px; } .kv div { font-size: .92rem; white-space: pre-wrap; word-break: break-word; } /* ---------- Footer ---------- */ .footer { background: var(--green-900); color: #cfe6db; margin-top: 40px; padding: 40px 0 24px; } .footer a { color: #cfe6db; } .footer h4 { color: #fff; font-size: .92rem; text-transform: uppercase; letter-spacing: .05em; } .footer .cols { display: grid; grid-template-columns: 1.8fr 1fr 1fr 1fr; gap: 28px; } @media (max-width:900px){ .footer .cols { grid-template-columns: 1fr 1fr; } } @media (max-width:520px){ .footer .cols { grid-template-columns: 1fr; } } .footer ul { list-style: none; padding: 0; margin: 0; display: grid; gap: 7px; } .footer .copy { border-top: 1px solid rgba(255,255,255,.12); margin-top: 26px; padding-top: 18px; font-size: .82rem; color: #9cc0b2; } .footer .copy-a11y { margin-top: 6px; font-size: .68rem; line-height: 1.5; color: #6f978a; } .footer .partners { font-size: .8rem; color: #9cc0b2; } /* ---------- Page header (interior pages) ---------- */ .page-head { background: linear-gradient(160deg, var(--green-900), var(--green-700)); color: #fff; padding: 44px 0; } .page-head h1 { color: #fff; margin-bottom: 6px; } .page-head p { color: #d9ede4; max-width: 680px; margin: 0; } .breadcrumb { font-size: .82rem; color: #bfe0d3; margin-bottom: 12px; } .breadcrumb a { color: #bfe0d3; } .fade-in { animation: fade .5s ease both; } @keyframes fade { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } } .hidden { display: none !important; } /* ---------- Inline content editor (admin) ---------- */ .cms-bar { position: fixed; left: 50%; bottom: 18px; transform: translateX(-50%); z-index: 300; display: flex; align-items: center; gap: 10px; flex-wrap: wrap; justify-content: center; background: #16241f; color: #fff; padding: 10px 14px; border-radius: 999px; box-shadow: 0 8px 30px rgba(0,0,0,.3); max-width: calc(100% - 24px); } .cms-bar .btn { padding: 8px 16px; } .cms-tag { background: var(--gold); color: #3a2c05; font-weight: 700; font-size: .72rem; text-transform: uppercase; letter-spacing: .05em; padding: 4px 10px; border-radius: 999px; } .cms-status { font-size: .85rem; color: #bfe0d3; } [data-edit].cms-editing { outline: 2px dashed var(--gold); outline-offset: 3px; border-radius: 4px; cursor: text; min-height: 1em; transition: outline-color .15s ease; } [data-edit].cms-editing:focus { outline-style: solid; outline-color: #f2c14e; background: rgba(224,169,46,.06); } /* =========================================================== Centered layout + Africa illustration =========================================================== */ body { text-align: center; } /* Center the prose blocks that have a max-width so they sit in the middle */ .section-head { margin-inline: auto; } .hero p.lead { margin-inline: auto; } .page-head p { margin-inline: auto; } /* centre the subtitle under each page header */ .notice, .cta p { margin-inline: auto; } .pillar { border-left: 0; padding-left: 0; } /* drop left accent so centred text reads cleanly */ .hero-actions, .toolbar { justify-content: center; } .card .ico { margin-inline: auto; } /* Keep functional / data / tabular UI left-aligned for readability */ .adm-table, .adm-table th, .adm-table td, .kv, .kv span, .kv div, input, select, textarea, .form, .form label, .card ul, .card ol, .card li, .bar-row, .map-legend, .map-info, .timeline, .timeline li, .footer .partners { text-align: left; } .bar-row .v { text-align: right; } .chk-row, .toolbar .chk { text-align: left; } .timeline { display: inline-block; } /* centre the timeline block, keep its text left */ /* Africa illustration in the hero */ .hero-illus { display: block; width: min(440px, 82%); margin: 30px auto 0; filter: drop-shadow(0 16px 30px rgba(0,0,0,.28)); } /* Faint Africa watermark on interior page headers ("here and there") */ .page-head { position: relative; overflow: hidden; } .page-head .container { position: relative; z-index: 1; } .page-head::after { content: ""; position: absolute; right: -50px; top: -30px; width: 340px; height: 340px; background: url("../assets/img/africa-hero.svg") no-repeat center / contain; opacity: .12; pointer-events: none; } @media (max-width: 640px) { .page-head::after { width: 220px; height: 220px; right: -40px; } } /* =========================================================== Language switcher (🌐) + right-to-left (Arabic) support =========================================================== */ .lang-switch { position: relative; display: inline-flex; margin-left: 8px; flex: 0 0 auto; } .lang-btn { display: inline-flex; align-items: center; gap: 6px; cursor: pointer; background: rgba(255,255,255,.1); color: #fff; border: 1px solid rgba(255,255,255,.18); border-radius: 999px; padding: 7px 12px; font: inherit; font-size: .82rem; line-height: 1; } .lang-btn:hover { background: rgba(255,255,255,.18); } .lang-btn .lang-code { font-weight: 700; letter-spacing: .03em; } .lang-btn .lang-caret { font-size: .7rem; opacity: .85; } .lang-menu { position: absolute; top: calc(100% + 8px); inset-inline-end: 0; z-index: 60; display: none; min-width: 168px; background: var(--green-800); border: 1px solid rgba(255,255,255,.14); border-radius: 12px; padding: 6px; box-shadow: 0 12px 34px rgba(0,0,0,.32); } .lang-switch.open .lang-menu { display: grid; gap: 2px; } .lang-opt { display: block; width: 100%; text-align: start; cursor: pointer; font: inherit; font-size: .9rem; color: #e7f4ee; background: transparent; border: 0; border-radius: 8px; padding: 9px 12px; } .lang-opt:hover { background: rgba(255,255,255,.1); color: #fff; } .lang-opt.active { background: var(--gold); color: #3a2c05; font-weight: 700; } /* Mobile: the language switcher expands INLINE inside the nav drawer (not a floating dropdown that lands off-screen), full-width and left-aligned. */ @media (max-width: 880px) { .lang-switch { display: block; width: 100%; margin: 4px 0 0; } .lang-btn { width: 100%; justify-content: flex-start; border-radius: 8px; padding: 9px 12px; font-size: .9rem; } .lang-btn .lang-caret { margin-inline-start: auto; } .lang-menu { position: static; min-width: 0; width: 100%; margin-top: 1px; background: transparent; border: 0; box-shadow: none; padding: 0; } .lang-switch.open .lang-menu { display: flex; flex-direction: column; gap: 1px; } .lang-opt { padding: 9px 14px; text-align: left; } } /* ----- RTL (Arabic) ----- */ [dir="rtl"] body { text-align: right; } [dir="rtl"] .nav { margin-left: 0; margin-right: auto; } [dir="rtl"] .menu-btn { margin-left: 0; margin-right: auto; } [dir="rtl"] .pillar { border-left: 0; border-right: 0; } [dir="rtl"] .breadcrumb, [dir="rtl"] .timeline, [dir="rtl"] .timeline li, [dir="rtl"] .footer .partners, [dir="rtl"] .adm-table, [dir="rtl"] .adm-table th, [dir="rtl"] .adm-table td, [dir="rtl"] .kv, [dir="rtl"] .kv span, [dir="rtl"] .kv div, [dir="rtl"] input, [dir="rtl"] select, [dir="rtl"] textarea, [dir="rtl"] .form, [dir="rtl"] .form label, [dir="rtl"] .card ul, [dir="rtl"] .card ol, [dir="rtl"] .card li, [dir="rtl"] .chk-row, [dir="rtl"] .toolbar .chk { text-align: right; } [dir="rtl"] .bar-row .v { text-align: left; } [dir="rtl"] .page-head::after { right: auto; left: -50px; } @media (max-width: 640px) { [dir="rtl"] .page-head::after { right: auto; left: -40px; } } /* =========================================================== Partner logo wall (About page) =========================================================== */ .partner-grid { display: flex; flex-wrap: wrap; justify-content: center; gap: 14px; } .partner-tile { flex: 0 1 168px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 9px; text-align: center; text-decoration: none; color: inherit; background: #fff; border: 1px solid var(--line); border-radius: 14px; padding: 22px 14px; min-height: 120px; transition: transform .15s ease, box-shadow .15s ease, border-color .15s ease; } @media (max-width: 520px) { .partner-tile { flex: 0 1 140px; } } a.partner-tile:hover, a.partner-tile:focus-visible { transform: translateY(-3px); box-shadow: var(--shadow); border-color: var(--gold); text-decoration: none; } .partner-word { font-weight: 800; font-size: 1.05rem; letter-spacing: -.01em; color: var(--green-700); line-height: 1.12; } .partner-logo { max-height: 60px; max-width: 100%; width: auto; object-fit: contain; transition: transform .15s ease; } a.partner-tile:hover .partner-logo, a.partner-tile:focus-visible .partner-logo { transform: scale(1.05); } .partner-cap { font-size: .72rem; color: var(--muted); line-height: 1.3; } /* =========================================================== Accessibility — WCAG 2.1 AA / ISO-IEC 40500 =========================================================== */ /* Skip link (2.4.1 Bypass Blocks) — visible only on focus */ .skip-link { position: absolute; inset-inline-start: 0; top: 0; z-index: 400; transform: translateY(-120%); transition: transform .15s ease; background: var(--gold); color: #3a2c05; font-weight: 700; padding: 10px 16px; border-radius: 0 0 8px 0; text-decoration: none; } .skip-link:focus { transform: translateY(0); outline: 3px solid #3a2c05; outline-offset: -3px; } /* Visible keyboard focus everywhere (2.4.7 Focus Visible) */ :focus-visible { outline: 3px solid var(--gold); outline-offset: 2px; border-radius: 4px; } .appbar :focus-visible, .footer :focus-visible, .page-head :focus-visible, .hero :focus-visible { outline-color: #fff; } [tabindex="-1"]:focus { outline: none; } /* Screen-reader-only utility */ .sr-only { position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; } /* Respect reduced-motion preference (2.3.3 / motion) */ @media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } *, *::before, *::after { animation-duration: .001ms !important; animation-iteration-count: 1 !important; transition-duration: .001ms !important; } }