:root { --navy:#18334a; --muted:#5d768a; --pale:#f4f8fa; --line:#dce5e9; --footer:#e8eff2; font-family:Inter,Roboto,Arial,sans-serif; color:var(--navy); background:#fff; } * { box-sizing:border-box; } [hidden] { display:none !important; } body { margin:0; } button,input { font:inherit; } button { cursor:pointer; } a { color:inherit; }
.topbar { height:65px; display:flex; align-items:center; padding:0 20px; gap:20px; box-shadow:0 2px 8px #18334a12; } .brand { display:inline-flex; align-items:center; gap:8px; color:var(--navy); font-size:20px; font-weight:700; line-height:28px; text-decoration:none; white-space:nowrap; } .brand-mark { color:#ff001a; font-size:28px; line-height:1; } nav { display:flex; gap:20px; margin-left:auto; } nav a { font-size:16px; line-height:24px; text-decoration:none; } nav .current { font-weight:700; } .language { border:0; background:transparent; color:var(--navy); font-weight:700; } .support { min-width:195px; height:40px; border:0; border-radius:10px; color:#fff; background:var(--navy); font-weight:600; } .menu { display:none; width:40px; height:40px; padding:10px; border:0; background:#fff; } .menu i { display:block; height:2px; margin:5px 0; background:var(--navy); }
.content { width:856px; margin:0 auto; padding:40px 0 67px; } .intro-heading { display:flex; align-items:center; justify-content:space-between; gap:24px; } h1,h2,p { margin:0; } h1 { font-size:40px; line-height:47px; letter-spacing:-.6px; } .intro p { width:854px; margin-top:30px; font-size:20px; line-height:30px; } .api-help { border:0; background:transparent; color:var(--navy); font-size:16px; text-decoration:underline; white-space:nowrap; } .api-panel { display:flex; gap:12px; align-items:center; margin-top:16px; padding:12px 16px; border-radius:8px; background:var(--pale); font-size:14px; } .api-panel code { overflow:auto; white-space:nowrap; } .api-panel span { color:var(--muted); }
.dataset { margin-top:40px; } .dataset-toolbar { height:40px; } .search { display:block; position:relative; width:100%; } .search::before { content:"⌕"; position:absolute; z-index:1; top:7px; left:13px; color:var(--muted); font-size:23px; line-height:24px; } .search input { width:100%; height:40px; border:0; border-radius:6px; outline:0; padding:0 16px 0 42px; background:var(--pale); color:var(--navy); } .search input:focus { box-shadow:0 0 0 2px #18334a55; } .rows { margin-top:40px; } .data-row { min-height:40px; display:grid; align-items:center; border-bottom:1px solid var(--line); } .data-row.regional { grid-template-columns:350px 100px 180px 32px 194px; } .data-row.year { grid-template-columns:164px 161px 105px 230px 196px; } .data-row.regional .period { grid-column:3; } .data-row.regional .download { grid-column:5; } .data-row.year .period { grid-column:3; } .data-row.year .size { grid-column:4; } .data-row.year .download { grid-column:5; } .data-row + .data-row { margin-top:20px; } .region-name { font-size:16px; font-weight:700; } .period,.size { color:var(--muted); font-size:14px; } .download { justify-self:end; display:flex; align-items:center; justify-content:center; min-width:194px; height:40px; padding:0 14px; border:0; border-radius:8px; color:var(--navy); background:var(--pale); font-size:16px; } .download::before { content:"↓"; margin-right:10px; font-size:21px; line-height:1; } .download:disabled { cursor:wait; opacity:.65; } .empty { margin:20px 0 0; color:var(--muted); } .years { margin-top:40px; padding-top:35px; border-top:2px solid var(--navy); } .years h2 { margin-bottom:40px; font-size:40px; line-height:47px; letter-spacing:-.6px; }
.footer { min-height:457px; padding:150px max(20px, calc((100% - 856px) / 2)) 15px; background:var(--footer); } .footer-inner { display:grid; grid-template-columns:380px 190px 190px; gap:48px; } .footer p,.footer a { display:block; margin-top:8px; font-size:16px; line-height:24px; text-decoration:none; } .footer h2 { font-size:16px; line-height:24px; } .project p { margin-top:16px; } .footer-bottom { width:856px; max-width:100%; display:flex; justify-content:space-between; align-items:end; margin:48px auto 0; padding-top:14px; border-top:1px solid #c8d5da; color:var(--muted); font-size:14px; line-height:20px; } .sr-only { position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0; }
@media (max-width:900px) { .topbar nav { gap:12px; } .support { min-width:auto; padding:0 12px; } .content { width:calc(100% - 40px); } .intro p { width:auto; } }
@media (max-width:640px) { .topbar { padding:0 20px; position:relative; } .topbar nav,.topbar .language,.support { display:none; } .topbar nav.open { display:grid; position:absolute; top:65px; right:20px; z-index:2; gap:12px; padding:16px; border-radius:8px; background:#fff; box-shadow:0 5px 18px #18334a28; } .menu { display:block; margin-left:auto; } .content { width:auto; margin:0 20px; padding:20px 0 50px; } h1 { font-size:30px; line-height:35px; letter-spacing:-.4px; } .intro-heading { align-items:start; } .api-help { padding:9px 0 0; font-size:14px; } .intro p { margin-top:18px; font-size:16px; line-height:19px; } .api-panel { display:grid; gap:8px; font-size:12px; } .dataset { margin-top:20px; } .rows { margin-top:20px; } .data-row,.data-row.regional,.data-row.year { min-height:40px; grid-template-columns:180px 1fr; grid-template-rows:20px 20px; align-items:center; } .data-row + .data-row { margin-top:20px; } .data-row:nth-child(n+5) { display:none; } .rows.is-searching .data-row { display:grid; } .region-name { grid-column:1; grid-row:1; font-size:16px; line-height:16px; } .data-row .period,.data-row.regional .period,.data-row.year .period { grid-column:1; grid-row:2; margin-top:2px; font-size:14px; line-height:14px; } .size { display:none; } .data-row .download,.data-row.regional .download,.data-row.year .download { grid-column:2; grid-row:1 / span 2; min-width:194px; font-size:16px; } .years { margin-top:30px; padding-top:0; border-top:0; } .years h2 { max-width:310px; margin-bottom:20px; font-size:30px; line-height:35px; letter-spacing:-.4px; } .footer { min-height:716px; padding:190px 20px 30px; } .footer-inner { grid-template-columns:1fr 1fr; gap:20px; } .project { grid-column:1/-1; } .project p { max-width:400px; } .footer-nav { padding-left:0; } .footer-bottom { display:block; margin-top:26px; } .footer-bottom span + span { display:block; margin-top:15px; } }