/* Downtown Crowd — shared identity for the board and the swipe deck.
The palette, type and small badge language of index.html, expressed as
custom properties so both new surfaces carry the same identity and cannot
drift apart. Load this BEFORE the page's own sheet:
Two themes: the night board (the sibling site's palette) and the day board
(the same two accents on paper). prefers-color-scheme picks the default;
a [data-theme] attribute on overrides it in both directions. */
@font-face {
font-family: "Geist Mono";
font-style: normal;
font-weight: 100 900;
font-display: swap;
src: url(./assets/fonts/geist-mono-latin.woff2) format("woff2");
unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+2000-206F, U+2122, U+2191, U+2193, U+2212, U+FEFF, U+FFFD;
}
:root {
--mono: "Geist Mono", ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
--sans: Arial, Helvetica, system-ui, sans-serif;
--serif: Georgia, "Times New Roman", serif;
/* day board */
--bg: #f4f7f1;
--surface: #ffffff;
--sunk: #f1f5ec;
--row: #ffffff;
--row-alt: #f6f8f2;
--hover: #e7f4ef;
--picked: #f2f9cf;
--line: #e0e6dd;
--line-soft: #eaeee6;
--line-strong: #bfcbc2;
--text: #0e1a16;
--muted: #45534e;
--faint: #5d6b66;
--accent: #007f76;
--accent-soft: rgba(0, 127, 118, .09);
--brand: #d7ff4f;
--brand-ink: #16210a;
--dot-on: #6f9300;
--dot-off: #ccd5cb;
--warm: #9a5f00;
--danger: #a3311f;
--glow: 0 0 0 3px rgba(215, 255, 79, .35);
--shadow: 0 8px 30px rgba(15, 26, 23, .12);
color-scheme: light;
}
@media (prefers-color-scheme: dark) {
:root:not([data-theme="light"]) {
--bg: #07100e;
--surface: #101917;
--sunk: #0c1614;
--row: #07100e;
--row-alt: #0a1512;
--hover: #14231f;
--picked: #18220e;
--line: #1f2c28;
--line-soft: #172420;
--line-strong: #35463f;
--text: #eff6f2;
--muted: #9fb0aa;
--faint: #82938d;
--accent: #66e7d6;
--accent-soft: rgba(102, 231, 214, .13);
--brand: #d7ff4f;
--brand-ink: #14200a;
--dot-on: #d7ff4f;
--dot-off: #2f3f38;
--warm: #ffb44a;
--danger: #ff9179;
--glow: 0 0 14px rgba(215, 255, 79, .6);
--shadow: 0 22px 60px rgba(0, 0, 0, .55);
color-scheme: dark;
}
}
:root[data-theme="dark"] {
--bg: #07100e;
--surface: #101917;
--sunk: #0c1614;
--row: #07100e;
--row-alt: #0a1512;
--hover: #14231f;
--picked: #18220e;
--line: #1f2c28;
--line-soft: #172420;
--line-strong: #35463f;
--text: #eff6f2;
--muted: #9fb0aa;
--faint: #82938d;
--accent: #66e7d6;
--accent-soft: rgba(102, 231, 214, .13);
--brand: #d7ff4f;
--brand-ink: #14200a;
--dot-on: #d7ff4f;
--dot-off: #2f3f38;
--warm: #ffb44a;
--danger: #ff9179;
--glow: 0 0 14px rgba(215, 255, 79, .6);
--shadow: 0 22px 60px rgba(0, 0, 0, .55);
color-scheme: dark;
}
* { box-sizing: border-box; }
html, body { height: 100%; }
body {
margin: 0;
background: var(--bg);
color: var(--text);
font-family: var(--sans);
font-size: 13px;
-webkit-font-smoothing: antialiased;
-webkit-text-size-adjust: 100%;
overscroll-behavior: none; /* no pull-to-refresh / rubber-band */
}
a { color: var(--accent); }
:where(a, button, input, select, summary, textarea):focus-visible {
outline: 2px solid var(--accent);
outline-offset: 1px;
border-radius: 3px;
}
[hidden] { display: none !important; }
/* ---- header ------------------------------------------------------------- */
.bar {
display: flex;
align-items: center;
gap: 14px;
flex: none;
height: 44px;
padding: 0 max(14px, env(safe-area-inset-right)) 0 max(14px, env(safe-area-inset-left));
background: var(--surface);
border-bottom: 1px solid var(--line);
position: relative;
}
.bar::after { /* the sibling site's acid→cyan rule */
content: "";
position: absolute;
left: 0; right: 0; bottom: -1px;
height: 2px;
background: linear-gradient(90deg, var(--brand), var(--accent) 55%, transparent);
opacity: .85;
}
.brand {
display: flex;
align-items: center;
gap: 9px;
font-size: 12px;
font-weight: 800;
letter-spacing: .14em;
color: var(--text);
text-decoration: none;
white-space: nowrap;
}
.pulse-dot {
width: 8px; height: 8px;
border-radius: 50%;
background: var(--brand);
box-shadow: var(--glow);
flex: none;
}
.bar .here {
font-family: var(--mono);
font-size: 10px;
font-weight: 700;
letter-spacing: .16em;
color: var(--brand-ink);
background: var(--brand);
border-radius: 3px;
padding: 3px 7px;
white-space: nowrap;
}
.bar .edition {
font-family: var(--mono);
font-size: 10px;
letter-spacing: .13em;
color: var(--faint);
white-space: nowrap;
}
.bar nav { display: flex; align-items: center; gap: 4px; margin-left: auto; }
.bar nav a {
font-family: var(--mono);
font-size: 11px;
letter-spacing: .08em;
padding: 7px 8px;
border-radius: 5px;
text-decoration: none;
color: var(--muted);
white-space: nowrap;
}
.bar nav a:hover { color: var(--text); background: var(--sunk); }
/* ---- controls ------------------------------------------------------------ */
button, .btn {
font-family: var(--mono);
font-size: 11px;
letter-spacing: .06em;
line-height: 1;
padding: 8px 11px;
min-height: 30px;
border: 1px solid var(--line-strong);
border-radius: 4px;
background: var(--surface);
color: var(--muted);
cursor: pointer;
white-space: nowrap;
}
button:hover { color: var(--text); border-color: var(--accent); }
button.primary {
background: var(--brand);
border-color: var(--brand);
color: var(--brand-ink);
font-weight: 700;
}
button.primary:hover { filter: brightness(1.06); color: var(--brand-ink); }
button.quiet { border-color: transparent; background: transparent; font-size: 13px; }
input[type="text"], input[type="date"], input[type="number"], select, textarea {
font-family: var(--sans);
font-size: 12px;
color: var(--text);
background: var(--surface);
border: 1px solid var(--line);
border-radius: 4px;
}
input:hover, select:hover { border-color: var(--line-strong); }
input:focus, select:focus, textarea:focus {
border-color: var(--accent);
outline: none;
box-shadow: 0 0 0 2px var(--accent-soft);
}
input::placeholder, textarea::placeholder { color: var(--faint); }
/* ---- shared badge language ----------------------------------------------- */
.eyebrow {
font-family: var(--mono);
font-size: 10px;
font-weight: 700;
letter-spacing: .18em;
color: var(--accent);
margin: 0 0 10px;
}
.grade {
font-family: var(--mono);
font-size: 9px;
font-weight: 700;
color: var(--faint);
border: 1px solid var(--line-strong);
border-radius: 3px;
padding: 0 3px;
}
.grade.g-A, .grade.g-B { color: var(--accent); border-color: var(--accent); }
.pill {
display: inline-block;
font-family: var(--mono);
font-size: 10px;
letter-spacing: .03em;
line-height: 16px;
padding: 0 6px;
border-radius: 9px;
border: 1px solid var(--line-strong);
color: var(--muted);
white-space: nowrap;
}
.pill.hi { border-color: var(--accent); color: var(--accent); background: var(--accent-soft); }
.pill.warm { border-color: var(--warm); color: var(--warm); }
.pill.off { border-color: transparent; color: var(--faint); padding-left: 0; }
.rate { letter-spacing: .5px; color: var(--dot-off); font-size: 11px; white-space: nowrap; }
.rate i { color: var(--dot-on); font-style: normal; }
.heat {
display: inline-block;
width: 7px; height: 7px;
border-radius: 50%;
background: var(--warm);
box-shadow: 0 0 0 2px var(--accent-soft);
}
.heat.hot { background: var(--brand); box-shadow: var(--glow); }
/* ---- narrow header --------------------------------------------------------
The bar has to survive 320 px: the wordmark and any secondary nav link are
the first things to go, the identity (pulse dot) and the actions stay. */
@media (max-width: 760px) {
.bar { gap: 10px; }
.bar .here { display: none; }
.bar nav { gap: 2px; }
.bar nav a { padding: 8px 6px; font-size: 10px; }
}
@media (max-width: 560px) {
.brand-text, .nav-extra { display: none; }
}
@media (prefers-reduced-motion: reduce) {
*, *::before, *::after { animation-duration: .001ms !important; transition-duration: .001ms !important; }
}