File size: 8,318 Bytes
16c9f7b | 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 127 128 129 130 131 132 133 134 135 136 137 138 139 140 141 142 143 144 145 146 147 148 149 | @font-face { font-family: Inter; src: url("assets/fonts/Inter-Regular.ttf"); font-display: swap; }
@font-face { font-family: Inter; font-weight: 600; font-display: swap;
src: url("assets/fonts/Inter-SemiBold.ttf"); }
:root { --page: #F8F8F8; --panel: #fff; --ink: #122121; --muted: #536363; --rule: #DCDEDE;
--link: #122121; --wash: #EFF1F1; --baseline: #3B4545; --actual: #6D3FE0; --history: #637373;
--bad: #C41F17; --shade: rgba(18, 33, 33, .05); --bar: #CFD6D6; }
@media (prefers-color-scheme: dark) {
:root { --page: #151717; --panel: #1E2020; --ink: #F8F8F8; --muted: #BDC2C2; --rule: #3A3D3D;
--link: #F8F8F8; --wash: #2C2F2F; --baseline: #BDC2C2; --actual: #b79aff;
--history: #999E9E; --bad: #FF928A; --shade: rgba(255, 255, 255, .06); --bar: #4A4F4F; }
}
* { box-sizing: border-box; }
body { margin: 0; background: var(--page); color: var(--ink); font-family: Inter, sans-serif;
font-size: 14px; line-height: 1.5; }
a { color: var(--link); }
:focus-visible { outline: 2px solid var(--link); outline-offset: 2px; }
.page { max-width: 1280px; margin: 0 auto; padding: 0 clamp(16px, 4vw, 32px) 32px; }
.only-dark { display: none; }
@media (prefers-color-scheme: dark) {
.only-light { display: none; }
.only-dark { display: block; }
}
.sp-logo { width: 80px; height: auto; flex: none; }
.intro { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center;
gap: 8px 24px; padding: 28px 0 24px; }
.sp-header h1 { font-size: 32px; font-weight: 600; line-height: 1.25; margin: 0; }
.sp-header nav { display: flex; gap: 24px; font-size: 13px; }
.sp-header nav a { display: inline-flex; align-items: center; gap: 7px; white-space: nowrap; }
.sp-header nav img { height: 18px; width: auto; }
.eyebrow { text-transform: uppercase; letter-spacing: .12em; font-size: 12px; font-weight: 500;
color: var(--muted); }
#workspace { display: flex; flex-direction: column; gap: 16px; }
#controls, #about, #results, #scores { background: var(--panel); border: 1px solid var(--rule);
border-radius: 4px; }
/* The controls: one row above the charts, wrapping when it runs out of width */
#controls { padding: 16px 22px 18px; display: flex; flex-wrap: wrap; align-items: flex-end;
gap: 14px 20px; }
/* Room for the first forecast's controls and headline while the page loads */
#controls:has(#size .chips:empty) { min-height: 96px; }
#result-head { min-height: 44px; }
#example-field { flex: 1 1 220px; max-width: 340px; min-width: 0; }
.field, legend { display: block; color: var(--muted); font-size: 12px; padding: 0;
margin: 0 0 6px; }
fieldset { border: 0; margin: 0; padding: 0; min-width: 0; }
fieldset[hidden] { display: none; }
#example { appearance: none; width: 100%; font: inherit; font-size: 13px; color: var(--ink);
border: 1px solid var(--rule); border-radius: 3px; padding: 7px 34px 7px 12px;
background: var(--panel) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6'%3E%3Cpath d='M0 0h10L5 6z' fill='%238A9999'/%3E%3C/svg%3E") no-repeat right 14px center;
text-overflow: ellipsis; cursor: pointer; }
.chips { display: flex; flex-wrap: wrap; gap: 6px; }
.chip { display: flex; align-items: center; justify-content: center; gap: 8px; cursor: pointer;
border: 1px solid var(--rule); border-radius: 3px; padding: 7px 11px; font-size: 13px;
text-align: center; white-space: nowrap; transition: background-color .15s, border-color .15s; }
.chip:hover, #example:hover { border-color: var(--muted); }
#size .chip, #cutoff .chip, #horizon .chip { font-variant-numeric: tabular-nums; }
.chip input[type=radio] { position: absolute; opacity: 0; pointer-events: none; }
.chip:has(input:checked) { border-color: var(--ink); background: var(--wash); font-weight: 600; }
.chip:has(input:focus-visible) { outline: 2px solid var(--link); outline-offset: 2px; }
fieldset:disabled { opacity: .45; }
fieldset:disabled .chip { cursor: default; }
#results { padding: 22px; min-width: 0; }
/* The headline and the chart key share a row */
#result-head { display: flex; flex-wrap: wrap; justify-content: space-between;
align-items: baseline; gap: 10px 24px; }
.result-head h2 { font-size: 24px; font-weight: 600; margin: 0; line-height: 1.25;
animation: rise .3s ease-out; }
.result-head p, .small { color: var(--muted); font-size: 12px; margin: 6px 0; }
.bad { color: var(--bad); }
.chart-key { display: flex; flex-wrap: wrap; gap: 8px 20px; font-size: 12px; color: var(--muted); }
.chart-key span { display: inline-flex; align-items: center; gap: 7px; }
.chart-key i { width: 22px; border-top: 2px solid var(--history); }
.chart-key .lead { border-color: #09A1A9; border-top-width: 3px; }
.chart-key .baseline { border-color: var(--baseline); border-top-style: dashed; }
.chart-key .actual { border-color: var(--actual); }
.chart-key .band { border: 0; height: 10px; background: #09A1A955; border-radius: 1px; }
#main-plot { min-height: 380px; }
#workspace.loading #results > :not(#result-head), #workspace.loading #below { opacity: .35;
pointer-events: none; }
.chart-missing, .noscript { color: var(--muted); margin: 0; padding: 48px 0; text-align: center; }
#covariate-plot[hidden] { display: none; }
/* Scores and the series note, side by side under the charts */
#below { display: grid; grid-template-columns: minmax(0, 3fr) minmax(0, 2fr); gap: 16px; }
#scores, #about { padding: 20px 22px; }
#scores:has(#sp-scores:empty) { display: none; }
#about p { color: var(--muted); font-size: 13px; line-height: 1.6; margin: 8px 0 0; }
#about p + .eyebrow { margin-top: 20px; }
#about .eyebrow:has(+ p:empty) { display: none; }
.scores-head { font-size: 16px; font-weight: 600; }
.scores-head span { font-weight: 400; font-size: 12px; color: var(--muted); }
#sp-scores table { width: 100%; border-collapse: collapse; margin: 10px 0 0; font-size: 13px; }
#sp-scores th, #sp-scores td { text-align: right; padding: 10px 8px;
border-bottom: 1px solid var(--rule); white-space: nowrap; }
#sp-scores td { font-variant-numeric: tabular-nums; }
#sp-scores th { font-size: 11px; color: var(--muted); font-weight: 400; }
#sp-scores th:first-child, #sp-scores td:first-child { text-align: left; padding-left: 0; }
#sp-scores tbody tr:first-child td { font-weight: 600; }
/* MASE as a bar: the chosen forecast in the accent, the others grey */
#sp-scores td.bar { width: 45%; padding-right: 0; }
#sp-scores td.bar i { display: block; height: 10px; min-width: 2px; background: var(--bar);
border-radius: 1px; transform-origin: left; animation: grow .45s ease-out; }
#sp-scores tr:first-child td.bar i { background: #09A1A9; }
@keyframes rise { from { opacity: 0; transform: translateY(4px); } }
@keyframes grow { from { transform: scaleX(0); } }
@media (prefers-reduced-motion: reduce) {
.result-head h2, #sp-scores td.bar i { animation: none; }
.chip { transition: none; }
}
/* The page footer: credits on the left, the one Abel logo on the right */
#footer { display: flex; justify-content: space-between; align-items: center; gap: 32px;
margin-top: 32px; padding-top: 20px; border-top: 1px solid var(--rule); color: var(--muted);
font-size: 12px; }
#footer p { margin: 0; }
#footer a { white-space: nowrap; color: inherit; }
@media (max-width: 760px) {
.sp-header nav { gap: 12px; font-size: 11px; }
.sp-header nav img { height: 15px; }
.sp-header h1 { font-size: 26px; }
.intro { padding: 20px 0 16px; }
#controls, #about, #results, #scores { padding: 14px; }
#controls { display: grid; grid-template-columns: minmax(0, 1fr); gap: 12px; }
#controls:has(#size .chips:empty) { min-height: 262px; }
#example-field { max-width: none; }
#example { font-size: 12px; }
.chips { display: grid; }
#size .chips { grid-template-columns: repeat(4, 1fr); }
#cutoff .chips, #horizon .chips { grid-template-columns: repeat(3, 1fr); }
.chip { padding: 7px 4px; }
#cutoff .chip { font-size: 12px; }
#result-head { min-height: 80px; }
.result-head h2 { font-size: 21px; }
#below { grid-template-columns: minmax(0, 1fr); }
#sp-scores th, #sp-scores td { padding: 10px 4px; font-size: 12px; }
#sp-scores td.bar { width: 30%; }
.chart-key { gap: 8px 14px; font-size: 11px; }
#footer { flex-direction: column; align-items: flex-start; gap: 16px; }
#footer .sp-logo { align-self: flex-end; }
}
|