/* computational-diplomacy — one stylesheet, five surfaces. Light by default: a projector in a lit lecture room throws a washed-out grey for anything dark, and the leaderboard has to be legible from the back row. Dark is kept for a darkened auditorium — every colour is a token, the dark block only reassigns them, and `data-theme` on wins over both. */ :root { --ink: #12172a; --dim: #5a6480; --faint: #8b95ad; --bg: #f7f8fc; --panel: #ffffff; --panel-2: #ffffff; --panel-soft: #f2f4fa; --line: #dfe3ee; --line-soft: #eceff7; --field: #ffffff; --spark: #e0561f; --spark-ink: #ffffff; --beam: #2563eb; --gold: #a9740b; --green: #0f8f5f; --track: #e7eaf3; --shadow: 0 1px 2px rgba(18,23,42,.05), 0 8px 24px rgba(18,23,42,.05); --shadow-lift: 0 2px 6px rgba(18,23,42,.07), 0 18px 44px rgba(18,23,42,.09); --radius: 14px; --mono: ui-monospace, SFMono-Regular, "SF Mono", Menlo, monospace; --sans: system-ui, -apple-system, "Segoe UI", Inter, Roboto, sans-serif; } @media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) { --ink: #e8ecf5; --dim: #98a3bd; --faint: #6a7694; --bg: #070b16; --panel: #0e1424; --panel-2: #141c30; --panel-soft: #131b2d; --line: #22304f; --line-soft: #1a2440; --field: #0a1120; --spark: #f2662e; --spark-ink: #120704; --beam: #4da6ff; --gold: #f5c451; --green: #45d69a; --track: #172136; --shadow: none; --shadow-lift: none; } } :root[data-theme="dark"] { --ink: #e8ecf5; --dim: #98a3bd; --faint: #6a7694; --bg: #070b16; --panel: #0e1424; --panel-2: #141c30; --panel-soft: #131b2d; --line: #22304f; --line-soft: #1a2440; --field: #0a1120; --spark: #f2662e; --spark-ink: #120704; --beam: #4da6ff; --gold: #f5c451; --green: #45d69a; --track: #172136; --shadow: none; --shadow-lift: none; } * { box-sizing: border-box; } body { margin: 0; font-family: var(--sans); background: radial-gradient(1100px 620px at 82% -14%, color-mix(in srgb, var(--beam) 11%, transparent), transparent 62%), radial-gradient(880px 520px at 4% 106%, color-mix(in srgb, var(--spark) 10%, transparent), transparent 60%), var(--bg); color: var(--ink); min-height: 100vh; -webkit-text-size-adjust: 100%; } .wrap { max-width: 760px; margin: 0 auto; padding: 28px 20px 72px; } .wrap.wide { max-width: 1320px; } a { color: var(--beam); } /* --- masthead --- */ .mast { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; margin-bottom: 6px; } .mast .kicker { font-family: var(--mono); font-size: 11px; letter-spacing: .22em; text-transform: uppercase; color: var(--spark); font-weight: 600; } .mast .venue { font-family: var(--mono); font-size: 11px; letter-spacing: .12em; color: var(--faint); } h1 { font-size: clamp(26px, 5vw, 40px); line-height: 1.1; margin: 8px 0 10px; letter-spacing: -.022em; } h2 { font-size: 16px; margin: 0 0 12px; letter-spacing: -.01em; } .prompt { font-size: clamp(16px, 2.4vw, 20px); line-height: 1.45; border-left: 3px solid var(--spark); padding: 4px 0 4px 16px; margin: 18px 0 26px; } .lede { color: var(--dim); line-height: 1.55; margin: 0 0 20px; } /* --- panels --- */ .card { background: var(--panel); border: 1px solid var(--line); border-radius: var(--radius); padding: 20px; margin-bottom: 16px; box-shadow: var(--shadow); } .card.tight { padding: 14px 16px; } .card.flat { box-shadow: none; background: var(--panel-soft); } /* --- forms --- */ label { display: block; font-size: 12px; letter-spacing: .08em; text-transform: uppercase; color: var(--dim); margin: 0 0 6px; font-weight: 600; } label .opt { text-transform: none; letter-spacing: 0; color: var(--faint); font-size: 11px; margin-left: 6px; font-weight: 400; } input, textarea, select, button { font-family: inherit; font-size: 16px; width: 100%; background: var(--field); color: var(--ink); border: 1px solid var(--line); border-radius: 10px; padding: 12px 14px; } textarea { resize: vertical; min-height: 96px; line-height: 1.45; } ::placeholder { color: var(--faint); opacity: 1; } input:focus, textarea:focus, select:focus { outline: 2px solid color-mix(in srgb, var(--beam) 55%, transparent); outline-offset: 1px; border-color: transparent; } .field { margin-bottom: 14px; } .row { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; } @media (max-width: 560px) { .row { grid-template-columns: 1fr; } } .pin-input { font-family: var(--mono); font-size: 26px; letter-spacing: .5em; text-align: center; text-transform: uppercase; padding: 14px; } button { cursor: pointer; font-weight: 650; letter-spacing: .01em; background: var(--spark); color: var(--spark-ink); border: 1px solid transparent; padding: 14px 18px; } button:hover { filter: brightness(1.06); } button:disabled { opacity: .45; cursor: not-allowed; filter: none; } button.ghost { background: transparent; color: var(--ink); border: 1px solid var(--line); } button.ghost:hover { background: var(--panel-soft); filter: none; } button.small { font-size: 13px; padding: 9px 12px; width: auto; } .btn-row { display: flex; gap: 8px; flex-wrap: wrap; } /* --- tap-target chips (the technology palette) --- */ .chipset { display: flex; flex-wrap: wrap; gap: 7px; } .chipset button { width: auto; font-size: 13px; font-weight: 500; padding: 8px 12px; border-radius: 999px; background: var(--panel-soft); color: var(--dim); border: 1px solid var(--line); } .chipset button[aria-pressed="true"] { background: color-mix(in srgb, var(--beam) 13%, var(--panel)); border-color: color-mix(in srgb, var(--beam) 55%, transparent); color: var(--ink); font-weight: 600; } .chipset button:hover { filter: none; border-color: color-mix(in srgb, var(--beam) 45%, var(--line)); } /* --- messages --- */ .msg { border-radius: 10px; padding: 12px 14px; margin: 12px 0; font-size: 14px; line-height: 1.5; } .msg.err { background: color-mix(in srgb, var(--spark) 12%, var(--panel)); border: 1px solid color-mix(in srgb, var(--spark) 45%, transparent); } .msg.ok { background: color-mix(in srgb, var(--green) 12%, var(--panel)); border: 1px solid color-mix(in srgb, var(--green) 42%, transparent); } .msg.info { background: color-mix(in srgb, var(--beam) 10%, var(--panel)); border: 1px solid color-mix(in srgb, var(--beam) 36%, transparent); } .hidden { display: none !important; } /* --- the clock --- */ .clock { font-family: var(--mono); font-size: clamp(34px, 8vw, 60px); font-weight: 600; font-variant-numeric: tabular-nums; letter-spacing: .02em; line-height: 1; } .clock.warn { color: var(--gold); } .clock.hot { color: var(--spark); } .clockbar { height: 6px; border-radius: 3px; background: var(--track); overflow: hidden; margin-top: 12px; } .clockbar > i { display: block; height: 100%; background: linear-gradient(90deg, var(--beam), var(--spark)); transition: width 1s linear; } /* --- stat blocks --- */ .stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(116px, 1fr)); gap: 12px; } .stat { background: var(--panel-soft); border: 1px solid var(--line-soft); border-radius: 12px; padding: 14px; } .stat b { display: block; font-family: var(--mono); font-size: clamp(22px, 3.6vw, 34px); font-weight: 600; font-variant-numeric: tabular-nums; } .stat span { font-size: 11px; letter-spacing: .1em; text-transform: uppercase; color: var(--dim); } /* --- need list --- */ .need { border-top: 1px solid var(--line-soft); padding: 14px 0; } .need:first-child { border-top: none; } .need p { margin: 0 0 8px; line-height: 1.45; } .meta { display: flex; gap: 7px; flex-wrap: wrap; align-items: center; font-family: var(--mono); font-size: 11px; color: var(--dim); } .chip { font-family: var(--mono); font-size: 11px; letter-spacing: .04em; border: 1px solid var(--line); border-radius: 999px; padding: 3px 9px; color: var(--dim); background: var(--panel-soft); white-space: nowrap; } .chip.pts { color: var(--gold); border-color: color-mix(in srgb, var(--gold) 42%, transparent); } .chip.fresh { color: var(--green); border-color: color-mix(in srgb, var(--green) 42%, transparent); } .chip.echo { color: var(--spark); border-color: color-mix(in srgb, var(--spark) 42%, transparent); } .chip.conv { color: var(--beam); border-color: color-mix(in srgb, var(--beam) 46%, transparent); } .chip.tech { color: var(--beam); border-color: color-mix(in srgb, var(--beam) 32%, transparent); } /* --- bars (SDG / technology histograms) --- */ .bars { display: grid; gap: 7px; } .bar { display: grid; grid-template-columns: minmax(110px, 200px) 1fr auto; gap: 10px; align-items: center; font-size: 13px; } .bar > span:first-child { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .bar .track { height: 12px; background: var(--track); border-radius: 6px; overflow: hidden; } .bar .track > i { display: block; height: 100%; background: linear-gradient(90deg, var(--beam), var(--green)); border-radius: 6px; } .bar.alt .track > i { background: linear-gradient(90deg, var(--spark), var(--gold)); } .bar .n { font-family: var(--mono); color: var(--dim); font-variant-numeric: tabular-nums; } /* --------------------------------------------------------------------------- Leaderboard — a table, because it is a ranked list of numbers and every attempt to make one out of flex boxes misaligns the digits. --------------------------------------------------------------------------- */ .board { width: 100%; border-collapse: collapse; font-variant-numeric: tabular-nums; } .board th { text-align: right; font-size: 10px; letter-spacing: .12em; text-transform: uppercase; color: var(--faint); font-weight: 600; padding: 0 10px 8px; white-space: nowrap; } .board th:nth-child(1), .board th:nth-child(2) { text-align: left; } .board td { padding: 9px 10px; border-top: 1px solid var(--line-soft); text-align: right; white-space: nowrap; } .board td:nth-child(2) { text-align: left; width: 99%; white-space: normal; word-break: break-word; } .board .rank { font-family: var(--mono); font-weight: 700; color: var(--faint); width: 1%; text-align: left; font-size: 15px; } .board .who { font-weight: 600; } .board .pts { font-family: var(--mono); font-weight: 700; color: var(--gold); font-size: 16px; } .board .num { font-family: var(--mono); color: var(--dim); font-size: 13px; } .board tr.me td { background: color-mix(in srgb, var(--beam) 9%, transparent); } .board tr.me .rank { color: var(--beam); } .board tr.seed .who::after { content: 'demo'; font-family: var(--mono); font-size: 9px; letter-spacing: .1em; text-transform: uppercase; color: var(--faint); border: 1px solid var(--line); border-radius: 999px; padding: 1px 6px; margin-left: 8px; vertical-align: 1px; } /* Medals for the top three — the only ornament on the board, and the one thing a person looks for from the back of a room. */ .board tr.top1 .rank, .board tr.top2 .rank, .board tr.top3 .rank { color: var(--ink); } .board tr.top1 .rank::before { content: '🥇 '; } .board tr.top2 .rank::before { content: '🥈 '; } .board tr.top3 .rank::before { content: '🥉 '; } /* A divergence sparkbar under each name: how far from the pool their best need landed. Points alone cannot show whether a score came from one great need or from steady volume. */ .board .sparkline { display: block; height: 4px; border-radius: 2px; background: var(--track); margin-top: 6px; max-width: 260px; } .board .sparkline > i { display: block; height: 100%; border-radius: 2px; background: linear-gradient(90deg, var(--beam), var(--green)); } @media (max-width: 640px) { .board .hide-sm { display: none; } .board td, .board th { padding-left: 6px; padding-right: 6px; } } .board-empty { color: var(--dim); padding: 18px 0; } /* --- wall --- */ .wall-grid { display: grid; grid-template-columns: 330px 1fr; gap: 20px; align-items: start; } .wall-split { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; align-items: start; } .wall-split.three { grid-template-columns: repeat(3, 1fr); } @media (max-width: 1240px) { .wall-split.three { grid-template-columns: 1fr 1fr; } } @media (max-width: 980px) { .wall-grid, .wall-split { grid-template-columns: 1fr; } } .joinbox { text-align: center; } .joinbox .url { font-family: var(--mono); font-size: 15px; color: var(--beam); word-break: break-all; margin: 12px 0 4px; } .joinbox .pin { font-family: var(--mono); font-size: clamp(38px, 6vw, 58px); font-weight: 700; letter-spacing: .16em; color: var(--spark); margin: 6px 0 2px; } .joinbox .pinlabel { font-size: 11px; letter-spacing: .18em; text-transform: uppercase; color: var(--dim); } #qr { background: #fff; border-radius: 12px; padding: 10px; display: inline-block; line-height: 0; border: 1px solid var(--line); } #qr img, #qr svg, #qr canvas { display: block; width: 100%; height: auto; max-width: 250px; } .sticky-item { border: 1px solid color-mix(in srgb, var(--beam) 30%, var(--line)); border-radius: 12px; padding: 12px 14px; margin-bottom: 8px; background: color-mix(in srgb, var(--beam) 7%, var(--panel)); } .sticky-item .n { font-family: var(--mono); color: var(--beam); font-size: 13px; font-weight: 600; } /* --- theme toggle --- */ .themer { position: fixed; right: 14px; bottom: 14px; z-index: 20; width: auto; font-size: 16px; line-height: 1; padding: 10px 12px; border-radius: 999px; background: var(--panel); color: var(--ink); border: 1px solid var(--line); box-shadow: var(--shadow-lift); } footer { color: var(--faint); font-size: 12px; margin-top: 34px; line-height: 1.6; } footer a { color: var(--dim); } code { font-family: var(--mono); font-size: .92em; color: var(--spark); }