/* Economic Atlas — shared styles */ :root{ --paper:#F5F6F3; --panel:#FFFFFF; --ink:#171B1E; --ink2:#5A6167; --hair:#E4E6E1; /* wireframe blues */ --navy:#1E4566; --navy-2:#27567F; --blue:#4796CE; /* seaborn mako stops (dark -> light) */ --mako-1:#2E1E3B; --mako-2:#413D7B; --mako-3:#37659E; --mako-4:#348FA7; --mako-5:#40B7AD; --mako-6:#8AD9B1; --mako-7:#DEF5E5; } /* Dark mode: same variable names, dark-appropriate values, applied via a data-theme attribute on so nothing that already reads these variables needs to change. This is deliberately the groundwork, not a fully polished dark mode -- chart tooltips, some chart fills, and a few other spots still have their own hardcoded colors (mostly set in JS, not CSS) that don't yet respond to this and would need a follow-up pass to look fully native in dark mode. The page chrome, nav, panels, text and borders are fully covered. */ html[data-theme="dark"]{ --paper:#14171A; --panel:#1D2124; --ink:#E7E9EA; --ink2:#9BA3A9; --hair:#2B3034; --navy:#2A5A82; --navy-2:#356B98; --blue:#5CA8DE; --mako-1:#4A3568; --mako-2:#5B56A0; --mako-3:#4C81BE; --mako-4:#3EA8C4; --mako-5:#4DCFC3; --mako-6:#8AD9B1; --mako-7:#2E5240; } html{transition:background-color .15s ease;} body{transition:background-color .15s ease, color .15s ease;} *{box-sizing:border-box; margin:0;} body{ background:var(--paper); color:var(--ink); font-family:"Avenir Next","Avenir","Nunito Sans",system-ui,sans-serif; font-size:16px; line-height:1.55; -webkit-font-smoothing:antialiased; } .wrap{max-width:1140px; margin:0 auto; padding:0 24px;} /* ------------------------------ theme toggle ----------------------------- */ .theme-toggle{border:1px solid rgba(255,255,255,.25); background:transparent; color:#D8E4EF; font-size:15px; cursor:pointer; padding:7px 11px; border-radius:999px; line-height:1; display:flex; align-items:center; justify-content:center;} .theme-toggle:hover{border-color:#fff; color:#fff;} /* ------------------------------ navigation ------------------------------ */ nav.top{background:var(--navy);} nav.top .wrap, nav.sub .wrap{display:flex; align-items:stretch; gap:4px;} nav .brand{ color:#fff; font-weight:600; font-size:17px; letter-spacing:.02em; padding:14px 18px 14px 0; margin-right:10px; text-decoration:none; display:flex; align-items:center; gap:9px; } nav .brand .globe{width:9px;height:9px;border-radius:50%; background:var(--mako-5); box-shadow:0 0 0 3px rgba(64,183,173,.25);} nav.top a.item{ color:#D8E4EF; text-decoration:none; font-weight:600; font-size:15px; padding:14px 22px; display:flex; align-items:center; } nav.top a.item:hover{background:var(--navy-2); color:#fff;} nav.top a.item.active{background:var(--navy-2); color:#fff;} nav.sub{background:var(--blue);} nav.sub a.item{ color:#F2F8FD; text-decoration:none; font-weight:600; font-size:14.5px; padding:10px 22px; display:flex; align-items:center; } nav.sub a.item:hover, nav.sub a.item.active{background:rgba(255,255,255,.18); color:#fff;} /* ------------------------------ dropdown nav ----------------------------- */ nav.top{position:relative;} .dropbtn{ color:#D8E4EF; background:none; border:none; cursor:pointer; font:inherit; font-weight:600; font-size:15px; padding:14px 22px; display:flex; align-items:center; gap:7px; } .dropbtn:hover, .dropbtn.open{background:var(--navy-2); color:#fff;} .dropbtn .caret{font-size:10px; transition:transform .15s; display:inline-block;} .dropbtn.open .caret{transform:rotate(180deg);} .dropdown-panel{ display:none; position:absolute; top:100%; left:50%; transform:translateX(-50%); z-index:20; background:var(--navy-2); border-radius:0 0 12px 12px; box-shadow:0 12px 30px rgba(0,0,0,.28); padding:22px 32px; gap:36px; flex-wrap:wrap; width:min(95vw, 1160px); } .dropdown-panel.open{display:flex;} @media (hover:hover){ .dropdown:hover .dropdown-panel{display:flex;} } .doverview{padding-right:28px; border-right:1px solid rgba(255,255,255,.15); display:flex; align-items:flex-start;} .dcol{display:flex; flex-direction:column; gap:2px; min-width:130px;} .dhead{color:#9FC2DC; text-transform:uppercase; font-size:11px; letter-spacing:.08em; font-weight:700; margin:0 0 7px;} .dcol a, .doverview a{ color:#F2F8FD; text-decoration:none; font-weight:600; font-size:14.5px; padding:6px 9px; border-radius:7px; margin:0 -9px; } .dcol a:hover, .doverview a:hover, .dcol a.active, .doverview a.active{ background:rgba(255,255,255,.16); color:#fff; } @media (max-width:640px){ .dropdown-panel{gap:22px; padding:18px 20px;} .doverview{padding-right:20px;} } /* --------------------------- mobile nav toggle --------------------------- */ /* .navlinks uses display:contents on wide screens, so it's invisible to layout entirely -- nav.top .wrap's existing flex rules apply directly to its children exactly as if this wrapper div didn't exist, meaning desktop nav needs zero other changes. Only below the breakpoint does it become a real collapsible panel. */ .navtoggle{display:none; flex-direction:column; justify-content:center; gap:5px; width:34px; height:34px; margin-left:auto; border:none; background:none; cursor:pointer; padding:0; flex-shrink:0;} .navtoggle span{display:block; width:22px; height:2px; background:#fff; border-radius:2px; transition:transform .2s ease, opacity .2s ease;} .navtoggle.open span:nth-child(1){transform:translateY(7px) rotate(45deg);} .navtoggle.open span:nth-child(2){opacity:0;} .navtoggle.open span:nth-child(3){transform:translateY(-7px) rotate(-45deg);} .navlinks{display:contents;} @media (max-width:900px){ nav.top .wrap{flex-wrap:nowrap;} .navtoggle{display:flex;} .navlinks{ display:none; position:absolute; top:100%; left:0; right:0; background:var(--navy); flex-direction:column; padding:6px 0 14px; box-shadow:0 14px 28px rgba(0,0,0,.28); z-index:25; max-height:calc(100vh - 60px); overflow-y:auto; } .navlinks.open{display:flex;} nav.top a.item{width:100%; padding:14px 24px;} .navlinks .theme-toggle{margin:12px 24px 4px; align-self:flex-start;} .dropdown{width:100%;} .dropbtn{width:100%; padding:14px 24px; justify-content:space-between;} .dropdown-panel{ display:none; position:static; transform:none; width:100%; border-radius:0; box-shadow:none; background:var(--navy-2); flex-direction:column; flex-wrap:nowrap; gap:2px; padding:4px 24px 14px; } .dropdown-panel.open{display:flex;} @media (hover:hover){ .dropdown:hover .dropdown-panel{display:none;} .dropdown:hover .dropdown-panel.open{display:flex;} } .doverview{border-right:none; padding-right:0; padding-bottom:10px; border-bottom:1px solid rgba(255,255,255,.15); margin-bottom:8px;} .dcol{min-width:0;} } /* -------------------------- per-country mini map -------------------------- */ .mini-mapwrap{ position:absolute; top:0; right:0; z-index:15; overflow:hidden; border-radius:14px; background:var(--panel); border:1px solid var(--hair); width:177px; height:92px; transition:width .3s ease, height .3s ease; cursor:pointer; } .mini-mapwrap.expanded, .mini-mapwrap:hover{ width:min(94vw, 1140px); height:380px; } .mini-mapwrap svg{width:100%; height:100%; display:block;} .mini-mapwrap .minihint{ position:absolute; right:14px; bottom:10px; font-size:11.5px; color:var(--ink2); background:var(--panel); padding:2px 8px; border-radius:6px; opacity:.85; pointer-events:none; transition:opacity .2s; white-space:nowrap; } .mini-mapwrap.expanded .minihint, .mini-mapwrap:hover .minihint{opacity:0;} .mini-legend{ position:absolute; left:14px; bottom:10px; right:130px; display:flex; gap:14px; flex-wrap:wrap; font-size:11.5px; color:var(--ink2); background:var(--panel); padding:6px 10px; border-radius:8px; opacity:0; transition:opacity .2s; pointer-events:none; } .mini-mapwrap.expanded .mini-legend, .mini-mapwrap:hover .mini-legend{opacity:1;} .mini-legend span{display:flex; align-items:center; gap:6px;} .mini-swatch{width:10px; height:10px; border-radius:3px;} .country{fill:#E7EAE6; stroke:#fff; stroke-width:.5;} .country.live{fill:var(--mako-3); cursor:pointer; transition:fill .15s;} .country.live:hover{fill:var(--mako-6);} .country.g7{fill:var(--mako-4); cursor:pointer; transition:fill .15s;} .country.g7:hover{fill:var(--mako-6);} .country.current{fill:var(--mako-5) !important;} .country.current:hover{fill:var(--mako-6) !important;} #maptip{position:absolute; display:none; pointer-events:none; z-index:5; background:var(--panel); border:1px solid var(--hair); border-radius:8px; padding:6px 10px; font-size:13px; color:var(--ink); box-shadow:0 4px 14px rgba(0,0,0,.12); white-space:nowrap;} .zoomhint{position:absolute; right:14px; bottom:8px; font-size:11px; color:var(--ink2); background:var(--panel); padding:2px 7px; border-radius:6px; opacity:.75; transition:opacity .2s; pointer-events:none;} .mini-mapwrap:not(.expanded):not(:hover) .zoomhint{opacity:0;} /* -------------------------------- headers ------------------------------- */ header.page{padding:44px 0 6px;} header.page.with-map{position:relative;} .head-text{padding-right:205px;} @media (max-width:700px){ /* The corner-mounted mini-map reserves 205px of padding for itself, which is fine on desktop but leaves almost no room for the country name on a phone-width column -- "United Kingdom" was wrapping across two cramped lines beside a tiny map. Below this width the map just stacks under the heading as a normal block instead, full-width, so the heading gets the full column to itself. The existing tap-to-expand behaviour (.expanded class) still works exactly the same, just growing downward in flow instead of as a floated overlay. */ .head-text{padding-right:0;} .mini-mapwrap{position:static; width:100%; height:190px; margin-top:16px;} .mini-mapwrap.expanded, .mini-mapwrap:hover{width:100%; height:340px;} } .eyebrow{ font-size:12px; font-weight:600; letter-spacing:.14em; text-transform:uppercase; color:var(--ink2); display:flex; align-items:center; gap:10px; flex-wrap:wrap; } .eyebrow .dot{width:5px;height:5px;border-radius:50%;background:var(--mako-4);} h1{font-weight:600; font-size:clamp(30px,4.6vw,44px); line-height:1.08; letter-spacing:-.01em; margin:12px 0 8px;} .subline{color:var(--ink2); font-size:15px;} .badge{display:none; margin-left:8px; padding:3px 10px; border-radius:999px; background:#F3E8D8; color:#7A5518; font-size:12px; font-weight:600;} .badge.show{display:inline-block;} /* ------------------------------ metric toggles --------------------------- */ .metric-toggles{display:flex; align-items:center; gap:10px; flex-wrap:wrap; margin:14px 0 18px;} .mtoggle{display:flex; align-items:center; gap:8px; background:var(--panel); border:1.5px solid var(--hair); border-radius:999px; padding:7px 14px 7px 12px; font-weight:600; font-size:13.5px; color:var(--ink); cursor:pointer; font-family:inherit;} .mtoggle:hover{border-color:var(--mako-4);} .mtoggle-switch{width:30px; height:17px; border-radius:999px; background:var(--hair); position:relative; flex:none; transition:background .15s;} .mtoggle-switch::after{content:""; position:absolute; top:2px; left:2px; width:13px; height:13px; border-radius:50%; background:#fff; box-shadow:0 1px 2px rgba(0,0,0,.25); transition:transform .15s;} .mtoggle.on{border-color:var(--mako-3);} .mtoggle.on .mtoggle-switch{background:var(--mako-3);} .mtoggle.on .mtoggle-switch::after{transform:translateX(13px);} .mtoggle.disabled{opacity:.4; cursor:not-allowed;} .mtoggle-note{font-size:12px; color:var(--ink2);} /* --------------------------------- tiles -------------------------------- */ .hero{display:grid; grid-template-columns:repeat(auto-fill,minmax(215px,1fr)); gap:1px; background:var(--hair); border:1px solid var(--hair); border-radius:14px; overflow:hidden; margin:30px 0 40px;} .stat{background:var(--panel); padding:20px 22px 18px; min-height:132px;} .stat .label{font-size:12px; font-weight:600; letter-spacing:.09em; text-transform:uppercase; color:var(--ink2);} .stat .figure{font-weight:600; font-size:clamp(32px,3.4vw,40px); line-height:1.15; margin:7px 0 5px; font-variant-numeric:tabular-nums;} .stat .delta{font-size:13.5px; font-weight:600;} .stat .delta .arrow{font-size:11px;} .stat .period{font-size:12.5px; color:var(--ink2); margin-top:2px;} .delta.good{color:#1E7B54;} .delta.bad{color:#B0432E;} .delta.flat{color:var(--ink2);} .stat.pending .figure{color:#C4C8C3;} .stat.pending .period{color:#A8ACA7; font-style:italic;} /* --------------------------------- panels ------------------------------- */ .grid{display:grid; grid-template-columns:repeat(auto-fit,minmax(min(460px,100%),1fr)); gap:22px;} .panel{background:var(--panel); border:1px solid var(--hair); border-radius:14px; padding:22px 24px 18px;} .panel h2{font-size:13px; font-weight:600; letter-spacing:.09em; text-transform:uppercase; color:var(--ink);} .panel .range{font-size:12.5px; color:var(--ink2); margin:2px 0 14px;} .chartbox{position:relative; height:250px;} .panel .src{font-size:12px; color:var(--ink2); margin-top:12px;} /* ------------------------------ placeholders ---------------------------- */ .shell{ border:1.5px dashed #C9CEC8; border-radius:14px; background:rgba(255,255,255,.55); padding:64px 32px; text-align:center; margin:34px 0 60px; } .shell h2{font-size:20px; font-weight:600; margin-bottom:8px;} .shell p{color:var(--ink2); max-width:520px; margin:0 auto 20px;} .btn{ display:inline-block; background:var(--blue); color:#fff; text-decoration:none; font-weight:600; font-size:14.5px; padding:10px 22px; border-radius:8px; } .btn:hover{background:var(--navy-2);} .btn.ghost{background:transparent; color:var(--navy); border:1.5px solid var(--blue);} .btn.ghost:hover{background:var(--blue); color:#fff;} /* ------------------------------ cookie consent --------------------------- */ #cookieBanner{position:fixed; left:20px; right:20px; bottom:20px; z-index:500; max-width:640px; margin:0 auto; background:var(--panel); border:1px solid var(--hair); border-radius:16px; box-shadow:0 12px 40px rgba(0,0,0,.18); padding:22px 26px; display:none;} #cookieBanner.show{display:block; animation:cookieIn .25s ease-out;} @keyframes cookieIn{from{opacity:0; transform:translateY(12px);} to{opacity:1; transform:translateY(0);}} .cookie-inner{display:flex; flex-direction:column; gap:16px;} .cookie-icon{font-size:22px; line-height:1; margin-bottom:2px;} .cookie-text{font-size:14px; color:var(--ink2); line-height:1.55;} .cookie-text strong{color:var(--ink); font-size:15px;} .cookie-text a{color:var(--blue);} .cookie-actions{display:flex; gap:10px;} .cookie-actions .btn{flex:1; padding:11px 18px; font-size:14px; font-weight:700; cursor:pointer; border-radius:10px; text-align:center; transition:transform .1s, filter .15s;} .cookie-actions .btn:active{transform:scale(.98);} .cookie-actions .btn:not(.ghost){background:var(--navy);} .cookie-actions .btn:not(.ghost):hover{filter:brightness(1.1); background:var(--navy);} .cookie-actions .btn.ghost{border:1.5px solid var(--ink2); color:var(--ink); background:transparent; font-weight:700;} .cookie-actions .btn.ghost:hover{border-color:var(--ink); background:var(--paper); color:var(--ink);} @media (max-width:520px){#cookieBanner{left:12px; right:12px; bottom:12px; padding:18px 20px;}} footer{margin:52px 0 60px; padding-top:22px; border-top:1px solid var(--hair); font-size:13px; color:var(--ink2);} footer a{color:var(--navy-2); text-decoration:none;} footer a:hover{text-decoration:underline;} /* ---- v4: centred tiles, mini section tiles, clickable tiles, banner ---- */ .hero{display:flex; flex-wrap:wrap; justify-content:center; background:transparent; border:none; gap:14px; overflow:visible;} .stat{border:1px solid var(--hair); border-radius:12px; flex:1 1 205px; max-width:275px; min-width:190px;} .hero.mini{justify-content:flex-start; margin:0 0 22px;} .hero.mini .stat{min-height:auto; padding:14px 16px; flex-basis:180px; max-width:245px;} .hero.mini .figure{font-size:25px;} .hero.mini .source{font-size:10.5px;} .stat.link{cursor:pointer; transition:border-color .15s, box-shadow .15s;} .stat.link:hover{border-color:var(--blue); box-shadow:0 2px 10px rgba(30,69,102,.10);} .newdata{display:flex; align-items:center; gap:10px; flex-wrap:wrap; background:#E7F4EC; color:#1E6B48; border:1px solid #CBE7D6; border-radius:10px; padding:11px 16px; margin:0 0 24px; font-size:13.5px; font-weight:600;} .newdata .pulse{width:9px; height:9px; border-radius:50%; background:#2FA463; box-shadow:0 0 0 3px rgba(47,164,99,.2); flex:none;} .newdata #newdataText{display:flex; align-items:center; gap:6px; flex-wrap:wrap;} .newdata-link{font:inherit; font-weight:600; color:#1E6B48; background:var(--panel); border:1px solid #9FCFAF; border-radius:6px; padding:2px 9px; cursor:pointer; transition:background .15s, border-color .15s;} .newdata-link:hover, .newdata-link:focus-visible{background:#D5EEDD; border-color:#2FA463; outline:none;} .newdata-sep{color:#5B9C79; font-weight:400;} .lastupdated{display:block; margin-top:10px; color:var(--ink2); font-size:12.5px;} .roadmap{background:var(--panel); border:1px solid var(--hair); border-radius:14px; padding:26px 30px; margin:30px 0 16px;} .roadmap h2{font-size:15px; font-weight:700; letter-spacing:.06em; text-transform:uppercase; margin-bottom:14px;} .roadmap ol{margin:0; padding-left:22px; color:var(--ink);} .roadmap li{margin:9px 0; line-height:1.5;} .roadmap li span{color:var(--ink2); font-size:14px;} /* v4.2 */ .newdata[hidden]{display:none;} .stat .figure{white-space:nowrap;} /* v4.3 unified tile sizing */ .hero .stat, .hero.mini .stat{padding:16px 18px; flex:1 1 195px; max-width:255px; min-width:180px; min-height:0;} .hero .stat .figure, .hero.mini .stat .figure{font-size:28px;}