/* ------------------------------------------------------------------ */ /* TOKENS */ /* */ /* Every colour the site uses is declared once, here. Nothing below */ /* this block writes a hex value: a rule that hardcodes #fff is a rule */ /* the dark theme cannot reach, and hunting those down one at a time */ /* later is the expensive way to do this. */ /* */ /* The dark theme is ONE block. is always "light" or */ /* "dark"; render.js resolves "system" itself and listens for the OS */ /* flipping. That is why there is no prefers-color-scheme query here -- */ /* a second copy of the dark palette would drift out of step with the */ /* first inside a month. */ /* ------------------------------------------------------------------ */ :root{ /* base */ --ink:#14282b;--paper:#ffffff;--grey:#101c1c;--grey-2:#1c2a29;--line:#d6e2e2;--dot:#dce8e8; /* palette */ --navy:#0d2860; /* deepest, quote bar */ --royal:#1a4fa0; /* second voice, world column */ --ion:#0e6f74; /* primary petrol, brand and headings */ --ion-deep:#08484d; /* darker petrol */ --teal:#3aa8ac; /* turquoise accent */ --mint:#5fd6ad; /* bright accent, dark bars only */ --sea:#2e8f6e; /* sea green, positive */ --forest:#123a2e; /* dark forest, regional column */ --plum:#3d1b47; /* aubergine, sponsored and rare accents */ --ion-light:#4fa3a8; /* focus ring, must stay legible on white */ --ion-pale:#edf4f4; /* table header wash */ --navy-pale:#eef1f8; /* alternate wash */ /* semantics */ --up:#2e8f6e;--down:#b0473c;--wave:#0e6f74; /* surfaces and inversions */ --surface:#ffffff; /* cards, tables, panels, inputs */ --on-dark:#ffffff; /* text printed on a dark fill */ --shadow:rgba(20,40,43,.22); /* floating panels */ --mark:#fdf2c8; /* search hit highlight */ --tag-dark:#3a3a3a; /* expired tender tag */ /* the navy quote bar is dark in both themes, so these do not flip */ --q-dim:#8ea6cf; --q-down:#e8917f; /* publisher lockup */ --gmax-navy:#2a4879; --gmax-red:#ea3323; /* regulation lane: hairlines */ --rule-faint:rgba(42,72,121,.03); --rule-soft:rgba(42,72,121,.10); --rule-mid:rgba(42,72,121,.18); --rule-chip:rgba(42,72,121,.28); /* regulation lane: badges, by legal weight */ --reg-badge-bg:#eef1f6;--reg-badge-fg:#2a4879;--reg-badge-br:rgba(42,72,121,.22); --reg-hi-bg:#2a4879;--reg-hi-fg:#ffffff; --reg-mid-bg:#3f6bb5;--reg-mid-fg:#ffffff; --reg-low-bg:#dbe3f0;--reg-low-fg:#2a4879; --reg-accent:#ea3323; --reg-topic-fg:#3f6bb5; /* filter chips and show-all buttons */ --chip-bg:#ffffff;--chip-fg:#2a4879;--chip-hover:#eef1f6; --chip-on-bg:#2a4879;--chip-on-fg:#ffffff; --more-bg:#eef1f6;--more-fg:#2a4879;--more-hover:#dbe3f0; --tn-urgent:#b5341f; --display:Impact,"Haettenschweiler","Arial Narrow Bold",system-ui,sans-serif; --body:-apple-system,"Helvetica Neue",Arial,sans-serif; --mono:"IBM Plex Mono",ui-monospace,monospace; --maxw:1720px; } /* ------------------------------------------------------------------ */ /* DARK THEME - the only place dark values are written */ /* ------------------------------------------------------------------ */ :root[data-theme="dark"]{ --ink:#dfeae8;--paper:#0d1414;--grey:#b6c6c4;--grey-2:#8aa09e; --line:#243333;--dot:#182424; --navy:#0a1730; --royal:#1e4787; --ion:#5cc4c8; --ion-deep:#14383b; --teal:#43aeb2; --mint:#5fd6ad; --sea:#57b98f; --forest:#153a2e; --plum:#4a2255; --ion-light:#5cc4c8; --ion-pale:#182626; --navy-pale:#161d2c; --up:#57b98f;--down:#e08575;--wave:#5cc4c8; --surface:#141e1e; --on-dark:#ffffff; --shadow:rgba(0,0,0,.55); --mark:#4a3f14; --tag-dark:#2a2a2a; --gmax-navy:#9dbcf0; --gmax-red:#ff6a5c; --rule-faint:rgba(255,255,255,.04); --rule-soft:rgba(255,255,255,.10); --rule-mid:rgba(255,255,255,.16); --rule-chip:rgba(157,188,240,.32); --reg-badge-bg:#1d2a3d;--reg-badge-fg:#a9c6f5;--reg-badge-br:rgba(157,188,240,.28); --reg-hi-bg:#3f6bb5;--reg-hi-fg:#ffffff; --reg-mid-bg:#2c4f8a;--reg-mid-fg:#dbe6fa; --reg-low-bg:#22303f;--reg-low-fg:#a9c6f5; --reg-accent:#ff6a5c; --reg-topic-fg:#8fb0e8; --chip-bg:#141e1e;--chip-fg:#a9c6f5;--chip-hover:#1d2a3d; --chip-on-bg:#3f6bb5;--chip-on-fg:#ffffff; --more-bg:#1d2a3d;--more-fg:#a9c6f5;--more-hover:#22303f; --tn-urgent:#e08575; } /* The G MAX mark is a fixed-colour SVG. Nothing recolours a logo; it is only taken off full brightness so it does not glare on a dark page. */ :root[data-theme="dark"] .publisher .mk{ opacity:.92 } *{box-sizing:border-box} html{scroll-behavior:smooth} body{zoom:var(--zoom,1);margin:0;font-size:17.5px;font-family:var(--body);color:var(--ink);background:var(--paper);line-height:1.6;-webkit-font-smoothing:antialiased; background-image:radial-gradient(var(--dot) 1px,transparent 1px);background-size:24px 24px;} a{color:inherit} /* Width in % and padding in em so the layout scales WITH the zoom. vw and px would be measured against the unzoomed window, which left the content squashed into the middle at 50%. */ .wrap{width:94%;max-width:var(--maxw);margin:0 auto;padding:0 1.6em} /* masthead */ header.top{position:relative;z-index:60;border-bottom:1px solid var(--line);background:color-mix(in srgb,var(--paper) 92%,transparent);backdrop-filter:blur(10px)} .top-inner{display:flex;align-items:flex-end;justify-content:space-between;gap:24px;padding:22px 0 14px} .brand{text-decoration:none;display:block} .brand .name{display:none} .brand .sub{font-family:var(--display);font-size:2.6em;font-weight:700;letter-spacing:0.01em;line-height:0.88;text-transform:uppercase;color:var(--ion);margin-top:0} .top-right{display:flex;align-items:center;gap:18px;flex:0 0 auto} .stamp{font-family:var(--mono);font-size:11px;letter-spacing:0.06em;text-transform:uppercase;color:var(--ink);white-space:nowrap} .lang-select{font-family:var(--mono);font-size:11px;letter-spacing:0.04em;color:var(--ink);background:var(--surface);border:1px solid var(--line);padding:5px 26px 5px 10px;border-radius:2px;cursor:pointer;appearance:none; background-image:linear-gradient(45deg,transparent 50%,var(--ion) 50%),linear-gradient(135deg,var(--ion) 50%,transparent 50%); background-position:calc(100% - 14px) 12px,calc(100% - 9px) 12px;background-size:5px 5px,5px 5px;background-repeat:no-repeat} .lang-select:hover{border-color:var(--ion)} .zoom-select{font-family:var(--mono);font-size:11px;letter-spacing:0.04em;color:var(--ink);background:var(--surface);border:1px solid var(--line);padding:5px 24px 5px 9px;border-radius:2px;cursor:pointer;appearance:none; background-image:linear-gradient(45deg,transparent 50%,var(--ion) 50%),linear-gradient(135deg,var(--ion) 50%,transparent 50%); background-position:calc(100% - 13px) 12px,calc(100% - 8px) 12px;background-size:5px 5px,5px 5px;background-repeat:no-repeat} .zoom-select:hover{border-color:var(--ion)} /* theme switch: one icon, three states, no label. The icon IS the state -- sun for light, moon for dark, half-disc for following the OS. */ .theme-btn{ flex:0 0 auto;display:inline-flex;align-items:center;justify-content:center; width:28px;height:28px;padding:0;cursor:pointer;border-radius:2px; background:var(--surface);border:1px solid var(--line);color:var(--ion); } .theme-btn:hover{border-color:var(--ion)} .theme-btn svg{width:15px;height:15px;display:block} /* right-to-left support for Arabic and Persian */ [dir="rtl"] .bar-track{animation-direction:reverse} [dir="rtl"] table.mkt th:first-child,[dir="rtl"] table.mkt td:first-child{text-align:right} [dir="rtl"] table.mkt th,[dir="rtl"] table.mkt td{text-align:left} [dir="rtl"] .tick,[dir="rtl"] .q{border-right:0;border-left:1px solid var(--line)} [dir="rtl"] .method{border-left:0;border-right:2px solid var(--ion)} [dir="rtl"] .page-head h1::after{margin-left:auto;margin-right:0} nav.main{display:flex;gap:22px;padding:10px 0;border-top:1px solid var(--line);overflow-x:auto} nav.main::-webkit-scrollbar{display:none} nav.main a{text-decoration:none;font-family:var(--mono);font-size:11px;letter-spacing:0.09em;text-transform:uppercase;color:var(--ink);white-space:nowrap;padding-bottom:2px;border-bottom:2px solid transparent} nav.main a:hover{color:var(--ion)} nav.main a.is-current{color:var(--ion);border-bottom-color:var(--ion)} /* marquee bars */ .bar{position:relative;z-index:1;border-bottom:1px solid var(--line)} .bar-inner{display:flex;align-items:stretch} .bar-tag{flex:0 0 auto;display:flex;align-items:center;font-family:var(--mono);font-size:9px;font-weight:700;letter-spacing:0.2em;text-transform:uppercase;padding:0 14px;z-index:2} .bar-view{flex:1 1 auto;min-width:0;overflow:hidden} .bar-track{display:inline-flex;white-space:nowrap;will-change:transform;animation:slide 70s linear infinite} .bar:hover .bar-track{animation-play-state:paused} @keyframes slide{from{transform:translateX(0)}to{transform:translateX(-50%)}} .bar-notice{background:var(--surface)} .bar-notice .bar-tag{background:var(--ion);color:var(--on-dark);height:38px} .bar-notice{border-bottom-color:var(--line)} .tick{display:inline-flex;align-items:center;gap:8px;height:38px;padding:0 18px;font-family:var(--mono);font-size:11px;color:var(--grey);border-right:1px solid var(--line)} .tick b{font-weight:700;letter-spacing:0.13em;text-transform:uppercase;font-size:9px} .tick.t-tender b{color:var(--ion)} /* Empty lane: a statement, not a truncated item, so it carries no divider. */ .tick.t-none{color:var(--grey-2);border-right:0} .tick.t-event b{color:var(--grey-2)} .tick.t-sponsor b{color:var(--plum)} .tick a{text-decoration:none;color:var(--ink)} .tick a:hover{color:var(--ion)} .bar-quotes{background:var(--navy);border-bottom-color:var(--navy)} .bar-quotes .bar-tag{background:var(--navy);color:var(--teal);border-right:1px solid rgba(255,255,255,.18);height:36px} .q{display:inline-flex;align-items:center;gap:7px;height:36px;padding:0 16px;font-family:var(--mono);font-size:11px;border-right:1px solid rgba(255,255,255,.14)} .q .s{color:var(--q-dim);letter-spacing:0.09em;text-transform:uppercase;font-size:10px} .q .p{color:var(--on-dark);font-weight:600} .q .c.up{color:var(--mint)} .q .c.down{color:var(--q-down)} .q .c.flat{color:var(--q-dim)} /* page heading */ .page-head{padding:30px 0 0} .page-head .crumb{font-family:var(--mono);font-size:10px;letter-spacing:0.14em;text-transform:uppercase;color:var(--grey-2);margin-bottom:8px} .page-head .crumb a{text-decoration:none} .page-head .crumb a:hover{color:var(--ion)} .page-head h1{font-family:var(--display);font-weight:700;font-size:3em;text-transform:uppercase;letter-spacing:0.01em;line-height:0.95;margin:0;color:var(--ion)} .page-head h1::after{content:"";display:block;width:64px;height:4px;background:var(--teal);margin-top:14px} .page-head .standfirst{margin:12px 0 0;font-size:1.05em;color:var(--grey);max-width:64ch;line-height:1.65} .page-head .updated{font-family:var(--mono);font-size:10px;letter-spacing:0.13em;text-transform:uppercase;color:var(--grey-2);margin-top:12px;padding-top:12px;border-top:1px solid var(--line)} /* front page columns */ .front{padding:26px 0 0} .front-head{display:flex;align-items:baseline;justify-content:space-between;gap:16px;margin:0 0 12px} .front-head h2{font-family:var(--display);font-weight:700;font-size:1.9em;text-transform:uppercase;letter-spacing:0.01em;line-height:1;margin:0;color:var(--ion)} .front-head .note.is-stale{color:var(--down);font-weight:500} .front-head .note{font-family:var(--mono);font-size:10px;letter-spacing:0.13em;text-transform:uppercase;color:var(--grey-2)} .cols{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,300px),1fr));gap:1px;background:var(--line);border:1px solid var(--line)} .col{background:var(--surface);min-width:0;display:flex;flex-direction:column} .col-head{display:flex;align-items:center;justify-content:space-between;font-family:var(--mono);font-size:10px;font-weight:700;letter-spacing:0.18em;text-transform:uppercase;color:var(--on-dark);background:var(--royal);padding:9px 18px} .col-head .cnt{font-weight:400;letter-spacing:0.08em;color:rgba(255,255,255,.62)} .col.region .col-head{background:var(--forest)} .col.local .col-head{background:var(--ion)} .col-body{padding:2px 18px 16px;flex:1 1 auto} .story{padding:14px 0;border-bottom:1px solid var(--line)} .story:last-child{border-bottom:0} .story .kicker{font-family:var(--mono);font-size:9px;font-weight:700;letter-spacing:0.16em;text-transform:uppercase;color:var(--teal);margin-bottom:5px} .story h3{margin:0;font-size:0.95em;line-height:1.35;font-weight:600;overflow-wrap:anywhere} .story h3 a{text-decoration:none} .story h3 a:hover{color:var(--ion)} .story p{margin:6px 0 0;font-size:13px;color:var(--grey);line-height:1.55} .story .src{font-family:var(--mono);font-size:10px;letter-spacing:0.08em;text-transform:uppercase;color:var(--grey-2);margin-top:8px} .story.lead h3{font-size:1.15em;line-height:1.26} .col-more{border-top:1px solid var(--line);padding:10px 18px;font-family:var(--mono);font-size:10px;letter-spacing:0.13em;text-transform:uppercase;color:var(--ion);text-decoration:none;display:block} .col-more:hover{background:var(--ion-pale)} /* numeric cells */ .cells{display:grid;gap:1px;background:var(--line);border:1px solid var(--line)} .g3{grid-template-columns:repeat(auto-fit,minmax(min(100%,210px),1fr))} .g4{grid-template-columns:repeat(auto-fit,minmax(min(100%,200px),1fr))} .cell{background:var(--surface);padding:14px 16px;min-width:0} .cell.key{background:var(--ion);color:var(--on-dark)} .cell .lbl{font-family:var(--mono);font-size:9px;letter-spacing:0.13em;text-transform:uppercase;color:var(--grey-2);line-height:1.4} .cell.key .lbl{color:var(--teal)} .cell .val{font-family:var(--display);font-size:1.85em;font-weight:700;line-height:1.05;margin-top:6px;white-space:nowrap} .cell .unit{font-family:var(--mono);font-size:10px;color:var(--grey-2);margin-left:5px;font-weight:400} .cell.key .unit{color:var(--teal)} .cell .delta{font-family:var(--mono);font-size:10px;margin-top:4px;color:var(--grey)} .cell .delta.up{color:var(--up)} .cell .delta.down{color:var(--down)} .cell.key .delta{color:var(--mint)} /* market tables */ .block{padding:26px 0 0} .sub-head{font-family:var(--mono);font-size:10px;font-weight:700;letter-spacing:0.16em;text-transform:uppercase;color:var(--sea);margin:22px 0 7px;padding-bottom:6px;border-bottom:1px solid var(--line)} table.mkt{width:100%;table-layout:fixed;border-collapse:collapse;background:var(--surface);border:1px solid var(--line)} table.mkt col.c-name{width:36%} table.mkt col.c-last{width:16%} table.mkt col.c-unit{width:18%} table.mkt col.c-chg{width:15%} table.mkt col.c-pct{width:15%} table.mkt th{font-family:var(--mono);font-size:9px;font-weight:700;letter-spacing:0.14em;text-transform:uppercase;color:var(--grey-2);text-align:right;padding:7px 10px;border-bottom:1px solid var(--line);background:var(--ion-pale)} table.mkt th:first-child,table.mkt td:first-child{text-align:left} table.mkt td{font-family:var(--mono);font-size:0.78em;padding:0.45em 0.7em;border-bottom:1px solid var(--line);text-align:right;overflow-wrap:break-word;hyphens:auto;vertical-align:top} table.mkt td.last,table.mkt td.chg,table.mkt td.pct{white-space:nowrap} table.mkt tr:last-child td{border-bottom:0} table.mkt tbody tr:hover td{background:var(--ion-pale)} td.nm{font-family:var(--body);font-size:0.85em;font-weight:600;color:var(--ink)} td.u{color:var(--grey-2);font-size:10px;letter-spacing:0.05em;text-transform:uppercase} td.last{font-weight:600;color:var(--ink)} td.chg.up,td.pct.up{color:var(--up)} td.chg.down,td.pct.down{color:var(--down)} td.chg.flat,td.pct.flat{color:var(--grey-2)} a.rowlink{color:inherit;text-decoration:none;border-bottom:1px solid var(--line)} a.rowlink:hover{color:var(--ion);border-bottom-color:var(--ion)} a.rowlink .ext{font-size:9px;color:var(--grey-2);letter-spacing:0} a.rowlink:hover .ext{color:var(--ion)} .src-line{font-family:var(--mono);font-size:10px;letter-spacing:0.08em;color:var(--grey-2);margin:6px 0 0;padding-bottom:2px} .src-line a{color:var(--ion);text-decoration:none} .src-line a:hover{text-decoration:underline} a.q{text-decoration:none} a.q:hover .p{color:var(--mint)} .story h3 .nolink{color:inherit} .story h3 a::after{content:" \2197";font-size:0.7em;color:var(--grey-2);white-space:nowrap} .story h3 a:hover::after{color:var(--ion)} [dir="rtl"] a.rowlink .ext{transform:scaleX(-1);display:inline-block} .mkt-cols{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,420px),1fr));gap:1.4em} /* method note */ .method{margin-top:26px;border-left:2px solid var(--ion);background:var(--surface);padding:14px 18px} .method p{margin:0;font-size:13px;color:var(--grey);line-height:1.6} .method .flabel{font-family:var(--mono);font-size:9px;letter-spacing:0.16em;text-transform:uppercase;color:var(--ion);margin:0 0 6px;font-weight:700} /* audience band */ .band{margin-top:36px;border:1px solid var(--line);background:var(--surface);padding:22px 24px} .band .flabel{font-family:var(--mono);font-size:9px;letter-spacing:0.16em;text-transform:uppercase;color:var(--grey-2);margin:0 0 12px} .band-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,230px),1fr));gap:1.6em} .band-grid h4{font-family:var(--mono);font-size:10px;font-weight:700;letter-spacing:0.13em;text-transform:uppercase;color:var(--ion);margin:0 0 6px} .band-grid p{margin:0;font-size:13px;color:var(--grey);line-height:1.55} /* section index cards on home */ .sections{margin-top:30px} .sec-grid{display:flex;flex-wrap:wrap;gap:1px;background:var(--line);border:1px solid var(--line)} .sec-grid .sec{flex:1 1 190px;min-width:0} .sec{background:var(--surface);padding:14px 16px;text-decoration:none;display:block;min-width:0} .sec:hover{background:var(--ion-pale)} .sec .t{font-family:var(--mono);font-size:10px;font-weight:700;letter-spacing:0.13em;text-transform:uppercase;color:var(--ion)} .sec .d{font-size:12px;color:var(--grey);margin-top:5px;line-height:1.5} footer{border-top:1px solid var(--line);margin-top:40px;padding:44px 0 32px} .fgrid{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,270px),1fr));gap:2.2em;align-items:start} footer .flabel{font-family:var(--mono);font-size:10px;letter-spacing:0.15em;text-transform:uppercase;color:var(--grey-2);margin:0 0 9px} footer p{margin:0 0 9px;font-size:14px;color:var(--grey);line-height:1.65;max-width:46ch} footer a.mail{color:var(--ion);text-decoration:none;font-family:var(--mono);font-weight:600;font-size:15px} footer nav.fnav{display:grid;grid-template-columns:repeat(auto-fit,minmax(110px,1fr));gap:2px 18px} footer nav.fnav a{display:block;text-decoration:none;font-size:14px;color:var(--grey);padding:3px 0} footer nav.fnav a:hover{color:var(--ion)} .publisher{border:1px solid var(--line);background:var(--surface);padding:18px 20px} .publisher .lockup{display:flex;align-items:center;gap:13px} .publisher .mk{width:42px;height:48px;flex:0 0 auto} .publisher .g{font-family:var(--display);font-size:22px;font-weight:700;letter-spacing:0.02em;text-transform:uppercase;color:var(--gmax-navy);line-height:1} .publisher .gs{font-family:var(--mono);font-size:8px;font-weight:700;letter-spacing:0.22em;text-transform:uppercase;color:var(--gmax-red);margin-top:5px} .publisher p{font-size:13px;margin-top:13px;padding-top:13px;border-top:1px solid var(--line);line-height:1.6} .publisher .glink{font-family:var(--mono);font-size:12px;font-weight:600;letter-spacing:0.06em;color:var(--ion);text-decoration:none;display:inline-block;margin-top:4px} .publisher .glink:hover{color:var(--teal)} .fbottom{margin-top:34px;padding-top:16px;border-top:1px solid var(--line);display:flex;justify-content:space-between;gap:16px;font-family:var(--mono);font-size:11px;color:var(--grey-2)} :focus-visible{outline:2px solid var(--ion-light);outline-offset:3px} @media(prefers-reduced-motion:reduce){.bar-track{animation:none}} @media(max-width:1080px){ .top-inner{align-items:flex-start} } @media(max-width:640px){ .top-inner{flex-direction:column;align-items:flex-start;gap:12px} .fbottom{flex-direction:column} } /* narrow screens: tables stop being tables and become stacked records */ @media(max-width:560px){ table.mkt,table.mkt tbody,table.mkt tr,table.mkt td{display:block;width:100%} table.mkt thead{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap} table.mkt colgroup{display:none} table.mkt tr{border-bottom:1px solid var(--line);padding:10px 12px} table.mkt tr:last-child{border-bottom:0} table.mkt td{border:0;padding:2px 0;text-align:left;white-space:normal;display:flex;justify-content:space-between;gap:12px} table.mkt td.nm{font-size:14px;margin-bottom:4px;display:block} table.mkt td::before{content:attr(data-label);font-family:var(--mono);font-size:9px;letter-spacing:0.13em;text-transform:uppercase;color:var(--grey-2)} table.mkt td.nm::before{content:none} table.mkt tbody tr:hover td{background:transparent} } /* section coverage pages */ .coverage{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,320px),1fr));gap:1px;background:var(--line);border:1px solid var(--line)} .cov-item{background:var(--surface);padding:16px 20px} .cov-item .kicker{font-family:var(--mono);font-size:9px;font-weight:700;letter-spacing:0.16em;text-transform:uppercase;color:var(--teal);margin-bottom:6px} .cov-item h3{margin:0;font-size:1.02em;line-height:1.32;font-weight:600;overflow-wrap:anywhere} .cov-item h3 a{text-decoration:none} .cov-item h3 a:hover{color:var(--ion)} .cov-item h3 a::after{content:" \2197";font-size:0.7em;color:var(--grey-2)} .cov-item p{margin:7px 0 0;font-size:13px;color:var(--grey);line-height:1.55} .cov-item .src{font-family:var(--mono);font-size:10px;letter-spacing:0.08em;text-transform:uppercase;color:var(--grey-2);margin-top:9px} .empty{background:var(--surface);padding:28px 20px;margin:0;font-size:14px;color:var(--grey)} /* An empty news column. render.js emits this class; without a rule the text sat flush against the column edge and read as a rendering failure. */ .col-empty{padding:18px 0;font-size:13px;color:var(--grey-2);line-height:1.5} /* access markers - a reader should see the wall before clicking */ .wall{display:inline-block;margin-left:8px;padding:1px 6px;border-radius:2px;font-family:var(--mono);font-size:9px;font-weight:700;letter-spacing:0.1em;text-transform:uppercase;vertical-align:1px} .wall-hard{background:var(--plum);color:var(--on-dark)} .wall-soft{background:var(--ion-pale);color:var(--ion);border:1px solid var(--border-accent,var(--line))} /* search */ .search{position:relative;flex:0 1 300px;min-width:210px} #search-input{width:100%;font-family:var(--mono);font-size:11px;letter-spacing:0.04em;color:var(--ink);background:var(--surface);border:1px solid var(--line);border-radius:2px;padding:6px 10px;appearance:none} #search-input:focus{outline:none;border-color:var(--ion)} #search-input::placeholder{color:var(--grey-2)} /* The panel is positioned inside .search, so a percentage width is a percentage of the SEARCH BOX -- about 264px -- not of the page. The 74px kind column and the nowrap source column then ate almost all of it and the headline column collapsed to roughly one character wide, which is why results rendered vertically. Width in em, never vw: vw is measured against the unzoomed window, so the panel would not follow the page-size control. */ .sr-panel{display:none;position:absolute;top:calc(100% + 5px);right:0;width:36em;max-height:70vh;overflow-y:auto;background:var(--surface);border:1px solid var(--line);box-shadow:0 10px 34px var(--shadow);z-index:200} .sr-panel.is-open{display:block} /* minmax(0,...) on every flexible track, or a long unbroken string in one cell refuses to shrink and pushes the others to nothing. */ .sr-item{display:grid;grid-template-columns:5.5em minmax(0,1fr) minmax(0,auto);gap:12px;align-items:start;padding:10px 14px;border-bottom:1px solid var(--line);text-decoration:none;color:var(--ink);background:var(--surface)} .sr-item:last-child{border-bottom:0} .sr-item:hover{background:var(--ion-pale)} .sr-kind{font-family:var(--mono);font-size:9px;font-weight:700;letter-spacing:0.13em;text-transform:uppercase;color:var(--teal);padding-top:3px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;min-width:0} .sr-label{font-size:13px;line-height:1.45;overflow-wrap:anywhere;min-width:0} .sr-value{font-family:var(--mono);font-size:12px;font-weight:600;white-space:nowrap;padding-top:2px;min-width:0} .sr-value em{font-style:normal;font-weight:400;color:var(--grey-2);font-size:10px;text-transform:uppercase} /* A publisher name is not worth squeezing the headline for. It truncates. */ .sr-meta{font-family:var(--mono);font-size:10px;letter-spacing:0.06em;text-transform:uppercase;color:var(--grey-2);white-space:nowrap;padding-top:3px;min-width:0;max-width:9em;overflow:hidden;text-overflow:ellipsis} .sr-empty{padding:18px 14px;font-size:13px;color:var(--grey)} .sr-panel mark{background:var(--mark);color:inherit;padding:0 1px} [dir="rtl"] .sr-panel{right:auto;left:0} @media(max-width:700px){.search{flex:1 1 100%;order:3}.sr-panel{width:100%}.sr-item{grid-template-columns:minmax(0,1fr);gap:3px}.sr-meta{max-width:none}} /* unsourced figures - visible, deliberate, never pretending */ tr.unsourced td.last,tr.unsourced td.chg,tr.unsourced td.pct{color:var(--grey-2)} tr.unsourced td.nm{color:var(--grey)} .awaiting{font-family:var(--mono);font-size:10px;letter-spacing:0.08em;color:var(--grey-2);background:var(--ion-pale);border:1px solid var(--line);border-bottom:0;padding:7px 12px} .unverified{display:inline-block;width:14px;height:14px;line-height:13px;text-align:center;border-radius:50%;background:var(--plum);color:var(--on-dark);font-family:var(--mono);font-size:9px;font-weight:700;vertical-align:1px;cursor:help} /* front page glance windows */ .glance{margin-top:2em} .glance-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,260px),1fr));gap:1px;background:var(--line);border:1px solid var(--line)} .gcard{background:var(--surface);display:flex;flex-direction:column} .ghead{font-family:var(--mono);font-size:9px;font-weight:700;letter-spacing:0.18em;text-transform:uppercase;color:var(--on-dark);background:var(--ion-deep);padding:8px 16px} .gcard-uz .ghead{background:var(--ion)} .gbody{padding:4px 16px 12px} .grow{display:flex;align-items:baseline;justify-content:space-between;gap:12px;padding:9px 0;border-bottom:1px solid var(--line)} .grow:last-child{border-bottom:0} .gname{font-size:0.85em;line-height:1.4;overflow-wrap:anywhere;min-width:0} .gname a{text-decoration:none;border-bottom:1px solid var(--line)} .gname a:hover{color:var(--ion);border-bottom-color:var(--ion)} .gval{font-family:var(--mono);font-size:0.82em;font-weight:600;white-space:nowrap} .gval em{font-style:normal;font-weight:400;font-size:0.85em;color:var(--grey-2)} .gval em.up{color:var(--up)} .gval em.down{color:var(--down)} .gdays{font-family:var(--mono);font-size:0.75em;font-weight:600;white-space:nowrap;color:var(--grey-2)} .gdays.is-urgent{color:var(--down)} .gempty{padding:14px 0;font-size:0.85em;color:var(--grey-2)} .gage{display:inline-block;margin-left:8px;font-family:var(--mono);font-size:0.75em;color:var(--grey-2);letter-spacing:0.06em} /* ------------------------------------------------------------------ */ /* regulation lane */ /* Weight is shown by a badge, not by colour alone, so the ranking */ /* survives greyscale printing and colour-blind readers. */ /* ------------------------------------------------------------------ */ .reg-rail { margin-bottom: 1.4em; } .gcard-reg .ghead { display: flex; justify-content: space-between; align-items: baseline; } .gcard-reg .col-more { font-size: .78em; } .reg-item { display: flex; gap: .7em; align-items: flex-start; padding: .5em 0; border-bottom: 1px solid var(--rule-soft); text-decoration: none; color: inherit; } .reg-item:last-child { border-bottom: 0; } .reg-item:hover .reg-title { text-decoration: underline; } .reg-badge { flex: 0 0 auto; min-width: 4.6em; text-align: center; font-size: .68em; font-weight: 700; letter-spacing: .04em; padding: .25em .45em; border-radius: 2px; background: var(--reg-badge-bg); color: var(--reg-badge-fg); border: 1px solid var(--reg-badge-br); } .reg-KODEKS, .reg-TREATY, .reg-ZRU { background: var(--reg-hi-bg); color: var(--reg-hi-fg); border-color: var(--reg-hi-bg); } .reg-OMJ, .reg-UP, .reg-PP, .reg-RP { background: var(--reg-mid-bg); color: var(--reg-mid-fg); border-color: var(--reg-mid-bg); } .reg-PKM, .reg-RKM, .reg-KKPKM { background: var(--reg-low-bg); color: var(--reg-low-fg); } .reg-KKZRU { border-color: var(--reg-accent); } .reg-KKPKM { border-color: var(--reg-accent); } .reg-body { display: flex; flex-direction: column; gap: .15em; min-width: 0; } .reg-title { font-size: .92em; line-height: 1.35; } .reg-meta { display: flex; flex-wrap: wrap; gap: .8em; font-size: .74em; opacity: .72; } .reg-num { font-weight: 600; } .reg-count { float: right; font-weight: 400; opacity: .6; font-size: .8em; } .reg-empty { padding: .8em 0; opacity: .6; font-size: .85em; } .reg-group { margin-bottom: 1.6em; } [dir="rtl"] .reg-item { flex-direction: row-reverse; } [dir="rtl"] .reg-count { float: left; } /* regulation controls: nearly 300 acts need filtering, not scrolling */ .reg-controls { position: sticky; top: 0; z-index: 5; padding: .6em 0 .5em; margin-bottom: .8em; background: var(--surface); border-bottom: 1px solid var(--rule-mid); } .reg-row { display: flex; flex-wrap: wrap; gap: .5em; align-items: center; margin-bottom: .35em; } .reg-row:last-child { margin-bottom: 0; } .reg-lab { flex: 0 0 3.4em; font-size: .66em; letter-spacing: .1em; text-transform: uppercase; opacity: .5; } .reg-chips { display: flex; flex-wrap: wrap; gap: .3em; } .reg-chip { font: inherit; font-size: .7em; letter-spacing: .03em; padding: .25em .55em; cursor: pointer; background: var(--chip-bg); color: var(--chip-fg); border: 1px solid var(--rule-chip); border-radius: 2px; } .reg-chip:hover { background: var(--chip-hover); } .reg-chip.is-on { background: var(--chip-on-bg); color: var(--chip-on-fg); border-color: var(--chip-on-bg); } .reg-chip-topic { border-style: dashed; } .reg-chip-topic.is-on { background: var(--reg-mid-bg); border-color: var(--reg-mid-bg); border-style: solid; } .reg-search { font: inherit; font-size: .78em; padding: .3em .55em; min-width: 14em; border: 1px solid var(--rule-chip); border-radius: 2px; background: var(--surface); color: var(--ink); } .reg-shown { margin-left: auto; font-size: .68em; opacity: .55; letter-spacing: .04em; } /* rows: tight enough that a screen holds a dozen */ .reg-group { margin-bottom: .9em; } /* Six groups, three to a row, two full rows. The register has eleven act types and an eleven-block grid leaves an orphan row of two; the types are collapsed into legal tiers in render.js so the grid always fills. A group is never split across a column: an act list broken mid-tier reads as two different registers. */ .reg-cols { display: grid; grid-template-columns: repeat(auto-fill, minmax(26em, 1fr)); gap: 0 2.2em; align-items: start; } .reg-cols .reg-group { break-inside: avoid; margin-bottom: 1.4em; } @media (max-width: 60em) { .reg-cols { grid-template-columns: 1fr; } } .reg-head { display: flex; justify-content: space-between; align-items: baseline; gap: 1em; } .reg-formname { font-weight: 600; } .reg-count { font-weight: 400; opacity: .5; font-size: .78em; white-space: nowrap; } .reg-item { display: flex; gap: .6em; align-items: flex-start; padding: .38em 0; border-bottom: 1px solid var(--rule-soft); text-decoration: none; color: inherit; } .reg-item:last-of-type { border-bottom: 0; } .reg-item:hover { background: var(--rule-faint); } .reg-item:hover .reg-title { text-decoration: underline; } .reg-badge { flex: 0 0 auto; min-width: 4.2em; text-align: center; font-size: .62em; font-weight: 700; letter-spacing: .05em; padding: .25em .4em; border-radius: 2px; margin-top: .15em; background: var(--reg-badge-bg); color: var(--reg-badge-fg); border: 1px solid var(--reg-badge-br); } .reg-body { display: flex; flex-direction: column; gap: .1em; min-width: 0; } .reg-title { font-size: .88em; line-height: 1.3; } .reg-meta { display: flex; flex-wrap: wrap; gap: .7em; font-size: .68em; opacity: .68; } .reg-topic { font-weight: 600; letter-spacing: .04em; text-transform: uppercase; color: var(--reg-topic-fg); opacity: .9; } .reg-num { font-weight: 600; } .reg-more { font: inherit; font-size: .72em; margin-top: .45em; padding: .35em .7em; cursor: pointer; background: var(--more-bg); color: var(--more-fg); border: 1px solid var(--reg-badge-br); border-radius: 2px; } .reg-more:hover { background: var(--more-hover); } .reg-empty { padding: .8em 0; opacity: .6; font-size: .85em; } /* front page rail */ .reg-rail { margin-bottom: 1.4em; } .gcard-reg .ghead { display: flex; justify-content: space-between; align-items: baseline; } .gcard-reg .col-more { font-size: .78em; color: var(--on-dark); opacity: .85; border-top: 0; } [dir="rtl"] .reg-item { flex-direction: row-reverse; } [dir="rtl"] .reg-shown { margin-left: 0; margin-right: auto; } /* live adapter rows: as-of date beside the source credit */ .asof{ opacity:.6; margin-left:.5em; } .reg-origin{ opacity:.55; letter-spacing:.02em; } /* tenders: one row per notice, deadline hard right */ .tn-head { display: flex; justify-content: space-between; align-items: baseline; padding-bottom: .5em; margin-bottom: .3em; border-bottom: 1px solid var(--rule-mid); } .tn-count { font-weight: 600; } .tn-src { font-size: .7em; letter-spacing: .06em; text-transform: uppercase; opacity: .5; } .tn-row { display: flex; gap: 1.4em; align-items: flex-start; padding: .7em 0; border-bottom: 1px solid var(--rule-soft); } .tn-row:last-child { border-bottom: 0; } .tn-main { flex: 1 1 auto; min-width: 0; } .tn-title a { color: inherit; text-decoration: none; } .tn-title a:hover { text-decoration: underline; } .tn-meta { margin-top: .25em; font-size: .74em; opacity: .6; letter-spacing: .02em; } .tn-right { flex: 0 0 auto; text-align: right; } .tn-days { font-weight: 600; font-size: .82em; white-space: nowrap; } .tn-days.is-urgent { color: var(--tn-urgent); } .tn-date { font-size: .7em; opacity: .5; margin-top: .2em; white-space: nowrap; } /* Expired: visible for 48 hours so a reader who saw it yesterday can tell it closed rather than wonder whether it was ever there. */ .tn-row.is-expired { opacity: .45; } .tn-tag { font-size: .64em; letter-spacing: .1em; text-transform: uppercase; padding: .2em .5em; border-radius: 2px; background: var(--tag-dark); color: var(--on-dark); } /* Cadence heading. Daily settlements and monthly averages are different measurements sitting centimetres apart on one page; this is the line that tells a reader which block they are reading from. */ .cadence{ font-family:var(--mono);font-size:10px;font-weight:700; letter-spacing:0.2em;text-transform:uppercase;color:var(--on-dark); background:var(--ion-deep);display:inline-block; padding:5px 12px;margin:26px 0 2px;border-radius:2px; } /* Full search results page. Same chip controls as the regulation page -- one filter idiom on the site, not two. */ .sp-echo{font-family:var(--mono);color:var(--ion);font-weight:600} .sp-group{margin-bottom:1.6em} .sp-row{ display:grid;grid-template-columns:7em minmax(0,1fr) minmax(0,12em); gap:1em;align-items:start;padding:.7em 0; border-bottom:1px solid var(--line); text-decoration:none;color:var(--ink); } .sp-row:last-child{border-bottom:0} .sp-row:hover{background:var(--ion-pale)} .sp-kind{ font-family:var(--mono);font-size:9px;font-weight:700;letter-spacing:.14em; text-transform:uppercase;color:var(--teal);padding-top:.25em; overflow:hidden;text-overflow:ellipsis;white-space:nowrap;min-width:0; } .sp-label{font-size:.95em;line-height:1.4;overflow-wrap:anywhere;min-width:0} .sp-dek{display:block;font-size:.82em;color:var(--grey);margin-top:.25em;line-height:1.5} .sp-value{font-family:var(--mono);font-size:.85em;font-weight:600;text-align:right;white-space:nowrap;min-width:0} .sp-value em{font-style:normal;font-weight:400;font-size:.85em;color:var(--grey-2);text-transform:uppercase} .sp-meta{ font-family:var(--mono);font-size:10px;letter-spacing:.06em; text-transform:uppercase;color:var(--grey-2);text-align:right; padding-top:.25em;min-width:0;overflow:hidden;text-overflow:ellipsis; } @media(max-width:700px){ .sp-row{grid-template-columns:minmax(0,1fr);gap:.3em} .sp-value,.sp-meta{text-align:left} } /* Search filter bar and pager. */ .sp-bar{ position:relative; display:flex;align-items:center;gap:.6em;flex-wrap:wrap; padding-bottom:.7em;margin-bottom:.9em; border-bottom:1px solid var(--line); } .sp-toggle{ font:inherit;font-family:var(--mono);font-size:.72em;letter-spacing:.1em; text-transform:uppercase;cursor:pointer; padding:.5em .9em;border-radius:2px; background:var(--surface);color:var(--ion);border:1px solid var(--ion); display:inline-flex;align-items:center;gap:.5em; } .sp-toggle:hover{background:var(--ion-pale)} .sp-toggle.is-on{background:var(--ion);color:var(--on-dark)} .sp-badge{ display:inline-block;min-width:1.5em;text-align:center; background:var(--teal);color:var(--on-dark);border-radius:1em; font-size:.85em;padding:0 .35em; } .sp-clear{ font:inherit;font-family:var(--mono);font-size:.7em;letter-spacing:.08em; text-transform:uppercase;cursor:pointer;padding:.5em .7em; background:none;border:0;color:var(--grey-2);text-decoration:underline; } .sp-clear:hover{color:var(--down)} .sp-count{ margin-left:auto;font-family:var(--mono);font-size:.72em; letter-spacing:.06em;color:var(--grey-2); } /* A popup, not a block that shoves the results down the page. Floating it means opening the filters never moves the thing you were reading, and the three groups sit side by side instead of stacked. */ .sp-panel{ position:absolute;top:calc(100% + .4em);left:0;z-index:120; background:var(--surface);border:1px solid var(--line);border-radius:2px; box-shadow:0 10px 34px var(--shadow); padding:1.1em 1.3em;margin:0; display:flex;gap:2.2em;flex-wrap:wrap;align-items:flex-start; max-width:min(100%,54em); } .sp-panel .reg-row{display:block;margin:0;flex:0 1 auto;min-width:0} .sp-panel .reg-lab{display:block;flex:none;margin:0 0 .5em} .sp-panel .reg-chips{gap:.35em} @media(max-width:700px){ .sp-panel{position:static;box-shadow:none;border:0;padding:0; flex-direction:column;gap:.6em;margin-bottom:1em} } .sp-pager{ display:flex;flex-wrap:wrap;gap:.3em;align-items:center; justify-content:center;margin-top:1.6em;padding-top:1.2em; border-top:1px solid var(--line); } .sp-page{ font:inherit;font-family:var(--mono);font-size:.75em;letter-spacing:.05em; cursor:pointer;min-width:2.4em;padding:.45em .7em;border-radius:2px; background:var(--surface);color:var(--ion);border:1px solid var(--line); } .sp-page:hover:not(:disabled){border-color:var(--ion);background:var(--ion-pale)} .sp-page.is-on{background:var(--ion);color:var(--on-dark);border-color:var(--ion)} .sp-page:disabled{opacity:.35;cursor:default} .sp-gap{font-family:var(--mono);font-size:.75em;color:var(--grey-2);padding:0 .2em} /* "+N" chip that reveals the rest of a capped filter row. Deliberately quieter than a real filter: it changes what you can see, not what is shown. */ .reg-chip-more{ border-style:dashed; opacity:.75; } .reg-chip-more:hover{opacity:1} /* The regulations filter bar reuses the search page's idiom, but its title filter sits in the bar itself rather than the panel: it is the fastest way to find one decree among 325 and should never be a click away. */ .sp-bar .reg-search{ flex:0 1 18em; min-width:11em; }