/* Cheesybook — the product's visual identity. * * ─────────────────────────────────────────────────────────────────────────── * THREE PALETTES, ONE SWITCH. * * The default is the cheese palette, because the product is called Cheesybook: * ivory paper, a bitter-chocolate masthead, gold and orange for the things that * need to interrupt, jungle green for good news. * * Two alternates ship alongside it. Flip either on : * slate and cerulean — calmest under * dense tables and in black and white * paprika and midnight violet * * A note on the gold: #ffd800 on white is about 1.3:1, so it can never carry * text. It is a background, a rule, a highlight — never a foreground. Same for * raw #ffa600. Where those hues need to be read, the tokens below use darkened * versions that clear AA, which is why --flag is not the orange you handed me. * * The name lives in js/brand.js and the look lives here; no other file carries * either, so a rebrand is these two files. * ─────────────────────────────────────────────────────────────────────────── */ /* ── Type ───────────────────────────────────────────────────────────────── * * Two custom faces, from public/fonts, and deliberately no more: * * Funkora Regular the wordmark, and only the wordmark. Chunky and friendly, * which is the right register for a thing called Cheesybook. * Heilo Champion page headings. Condensed athletic caps — the register a * sports results page wants, and it harmonises with the * wordmark instead of arguing with it. * * Tables, numbers and body copy stay on the system UI font on purpose. This is * a product people read four-digit Power Indexes off, down a column, on a phone * at a tennis court — a display face there costs legibility and buys nothing. * `font-display: swap` so text is never invisible while a face loads. * * public/brand-fonts.html renders every face in the library against the * wordmark and a line of real data, for when the final mark gets chosen. */ @font-face { font-family: 'Cheesybook Wordmark'; src: url('../fonts/Funkora-Regular.otf') format('opentype'); font-weight: 400; font-display: swap; } @font-face { font-family: 'Cheesybook Display'; src: url('../fonts/Heilo-Champion.otf') format('opentype'); font-weight: 400; font-display: swap; } :root { --brand-font: 'Cheesybook Wordmark', 'Inter Tight', 'SF Pro Display', system-ui, sans-serif; --display-font: 'Cheesybook Display', 'Inter Tight', system-ui, -apple-system, sans-serif; --body-font: system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif; /* ── Cheese palette (default) ──────────────────────────────────────────── * bright-gold #ffd800 · bitter-chocolate #6a3937 · orange #ffa600 * jungle-green #00a86b · ivory-mist #fff9e6 */ --ink: #3a1f1e; /* bitter-chocolate, deepened for body text */ --ink-2: #6a3937; /* bitter-chocolate — 8:1 on white */ --ink-3: #8a6b63; --ink-4: #b3a08f; --rule: #ece0c4; --rule-2: #f6efdb; --paper: #ffffff; --paper-2: #fff9e6; /* ivory-mist */ --mast: #6a3937; /* bitter-chocolate */ --mast-fg: #fff9e6; /* ivory-mist */ --mast-dim: #c9a9a2; --brand-pop: #ffd800; /* bright-gold — rules and highlights only */ --accent: #00754a; /* jungle-green, darkened to 5.2:1 for links */ --accent-2: #005c3a; --accent-wash: #dff3e9; /* The interrupting colour: the at-large cut line, a dispute, a loss. Raw * #ffa600 is ~2:1 on white, so text uses this darkened form. */ --flag: #8a5a00; --flag-wash: #fff2d6; --win: #00754a; --win-wash: #dff3e9; --loss: #a33b28; --loss-wash: #fbe7e2; --shadow: 0 1px 2px rgba(106, 57, 55, .07), 0 4px 14px rgba(106, 57, 55, .07); } :root[data-palette="cool"] { /* charcoal-blue #274156 · cerulean #1c6e8c · taupe-grey #605856 * pale-slate #d0ccd0 · white #fbfcff * Contrast on white: charcoal 10:1, cerulean 5.2:1, taupe 7:1. */ --ink: #1d2f3e; --ink-2: #3d5266; --ink-3: #605856; --ink-4: #948d8b; --rule: #d0ccd0; --rule-2: #e9e7e9; --paper: #fbfcff; --paper-2: #f3f5f8; --mast: #274156; --mast-fg: #fbfcff; --mast-dim: #93a6b5; --brand-pop: #1c6e8c; --accent: #1c6e8c; --accent-2: #15546b; --accent-wash: #e2eef3; --flag: #b8431e; --flag-wash: #fbeae3; --win: #1c6e8c; --win-wash: #e2eef3; --loss: #b8431e; --loss-wash: #fbeae3; --shadow: 0 1px 2px rgba(39, 65, 86, .06), 0 4px 14px rgba(39, 65, 86, .06); } :root[data-palette="warm"] { /* navajo-white #ffe0b5 · spicy-paprika #e35226 · dark-khaki #474a2c * bright-teal-blue #007cbe · midnight-violet #412234 */ --ink: #2b1723; /* midnight-violet, deepened */ --ink-2: #5a4450; --ink-3: #7d6f79; --ink-4: #a99ea6; --rule: #ecdfd0; --rule-2: #f6efe6; --paper: #ffffff; --paper-2: #fdf7ef; /* navajo-white, way down */ --mast: #412234; /* midnight-violet */ --mast-fg: #ffe0b5; /* navajo-white */ --mast-dim: #b79a9f; --brand-pop: #ffe0b5; --accent: #007cbe; /* bright-teal-blue */ --accent-2: #005f92; --accent-wash: #e0f0f9; --flag: #c0431c; /* spicy-paprika, darkened to clear AA on text */ --flag-wash: #fdeae3; --win: #474a2c; /* dark-khaki */ --win-wash: #eceedd; --loss: #c0431c; --loss-wash: #fdeae3; --shadow: 0 1px 2px rgba(65, 34, 52, .06), 0 4px 14px rgba(65, 34, 52, .06); } * { box-sizing: border-box; } html { -webkit-text-size-adjust: 100%; } body { margin: 0; font-family: var(--body-font); background: var(--paper-2); color: var(--ink); font-size: 14px; line-height: 1.45; -webkit-font-smoothing: antialiased; } /* Numbers are compared down columns constantly here, so they line up * everywhere, without exception. */ .num, td.num, th.num, .tabular { font-variant-numeric: tabular-nums; } a { color: var(--accent); text-decoration: none; } a:hover { text-decoration: underline; } /* ── Masthead ─────────────────────────────────────────────────────────── */ .mast { background: var(--mast); color: var(--mast-fg); padding-top: env(safe-area-inset-top); position: sticky; top: 0; z-index: 40; } .mast-inner { max-width: 1320px; margin: 0 auto; padding: 11px calc(20px + env(safe-area-inset-right)) 11px calc(20px + env(safe-area-inset-left)); display: flex; align-items: baseline; gap: 14px; flex-wrap: wrap; } .wordmark { font-family: var(--brand-font); font-weight: 400; /* Funkora ships one weight; 700 would synthesise a bold */ font-size: 1.24rem; letter-spacing: -0.022em; color: var(--mast-fg); } .wordmark:hover { text-decoration: none; color: var(--mast-fg); } .mast-tagline { color: var(--mast-dim); font-size: 0.78rem; letter-spacing: .01em; padding-left: 14px; border-left: 1px solid rgba(255, 255, 255, .16); } .mast-nav { margin-left: auto; display: flex; gap: 18px; } .mast-link { color: var(--mast-dim); font-size: 0.84rem; font-weight: 500; } .mast-link:hover { color: var(--mast-fg); text-decoration: none; } /* The gold underline is the one place the brightest colour appears at full strength — a 2px rule, where contrast rules do not apply. */ .mast-link.current { color: var(--mast-fg); box-shadow: 0 2px 0 var(--brand-pop); } /* ── Layout ───────────────────────────────────────────────────────────── */ .wrap { max-width: 1320px; margin: 0 auto; padding: 0 calc(20px + env(safe-area-inset-right)) 60px calc(20px + env(safe-area-inset-left)); } .pagehead { padding: 26px 0 6px; } .pagehead h1 { font-family: var(--display-font); font-size: 1.6rem; font-weight: 700; letter-spacing: -0.02em; margin: 0; } .pagehead .sub { color: var(--ink-3); margin: 4px 0 0; font-size: 0.9rem; max-width: 62ch; } .panel { background: var(--paper); border: 1px solid var(--rule); border-radius: 10px; box-shadow: var(--shadow); margin: 16px 0; overflow: hidden; } .panel-head { padding: 11px 16px; border-bottom: 1px solid var(--rule); display: flex; align-items: center; gap: 12px; flex-wrap: wrap; background: var(--paper-2); } .panel-head h2 { margin: 0; font-size: 0.92rem; font-weight: 700; letter-spacing: 0; color: var(--ink-2); } .panel-body { padding: 14px 16px; } .panel-body.flush { padding: 0; } .controls { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; padding: 12px 16px; background: var(--paper); border: 1px solid var(--rule); border-radius: 10px; box-shadow: var(--shadow); margin: 14px 0; } /* min-width:0 on both so a long option label (a full date, a school name) shrinks instead of pushing the page wider than the viewport. */ .controls label { display: flex; align-items: center; gap: 7px; font-size: 0.82rem; color: var(--ink-3); min-width: 0; } .controls select, .controls input { min-width: 0; max-width: 100%; } select, input[type="search"], input[type="text"] { font: inherit; font-size: 0.86rem; padding: 6px 10px; border: 1px solid var(--rule); border-radius: 7px; background: var(--paper); color: var(--ink); } select:focus, input:focus { outline: 2px solid var(--accent-wash); border-color: var(--accent); } button { font: inherit; font-size: 0.84rem; font-weight: 600; padding: 7px 14px; border-radius: 7px; border: 1px solid var(--rule); background: var(--paper); color: var(--ink); cursor: pointer; } button:hover { background: var(--paper-2); } button.primary { background: var(--accent); border-color: var(--accent); color: #fff; } button.primary:hover { background: var(--accent-2); } button.sm { padding: 3px 9px; font-size: 0.76rem; } button:disabled { opacity: .45; cursor: not-allowed; } /* ── Tables ───────────────────────────────────────────────────────────── */ table { border-collapse: collapse; width: 100%; } thead th { position: sticky; top: 0; background: var(--paper-2); font-size: 0.68rem; font-weight: 700; text-transform: uppercase; letter-spacing: .06em; color: var(--ink-3); text-align: left; padding: 8px 10px; border-bottom: 1px solid var(--rule); white-space: nowrap; z-index: 2; } thead th.sortable { cursor: pointer; user-select: none; } thead th.sortable:hover { color: var(--ink); } thead th .arrow { opacity: .35; margin-left: 3px; font-size: 0.7em; } thead th.sorted .arrow { opacity: 1; } tbody td { padding: 8px 10px; border-bottom: 1px solid var(--rule-2); font-size: 0.85rem; } tbody tr:hover td { background: var(--paper-2); } td.num, th.num { text-align: right; font-variant-numeric: tabular-nums; } td.mid, th.mid { text-align: center; } .scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; } /* ── Chips and marks ──────────────────────────────────────────────────── */ .chip { display: inline-block; padding: 1px 7px; border-radius: 999px; font-size: 0.68rem; font-weight: 700; letter-spacing: .02em; white-space: nowrap; } .chip.aq { background: var(--accent-wash); color: var(--accent-2); } .chip.win { background: var(--win-wash); color: var(--win); } .chip.loss { background: var(--loss-wash); color: var(--loss); } .chip.flag { background: var(--flag-wash); color: var(--flag); } .chip.quiet { background: var(--rule-2); color: var(--ink-3); } .rankbox { display: inline-block; min-width: 26px; text-align: center; font-weight: 700; font-variant-numeric: tabular-nums; color: var(--ink-2); } /* The at-large cut line. This is the single most important line on the page — * it is what the committee is actually arguing about — so it gets the one warm * colour in the palette and a label that survives printing. */ tr.cutline td { border-bottom: 2px solid var(--flag); position: relative; } tr.cutline-label td { background: var(--flag-wash); color: var(--flag); font-size: 0.72rem; font-weight: 700; text-transform: uppercase; letter-spacing: .07em; padding: 5px 10px; } /* A compact win/loss run, newest first. Reads as a shape before it reads as * data, which is the point at a glance. */ .form { display: inline-flex; gap: 2px; } .form i { width: 7px; height: 14px; border-radius: 2px; display: inline-block; font-style: normal; } .form i.w { background: var(--win); } .form i.l { background: var(--loss); } .form i.t { background: var(--ink-4); } .meter { position: relative; height: 5px; background: var(--rule-2); border-radius: 3px; min-width: 52px; } .meter > span { position: absolute; inset: 0 auto 0 0; background: var(--accent); border-radius: 3px; } .muted { color: var(--ink-3); } .tiny { font-size: 0.74rem; } .empty { color: var(--ink-3); padding: 30px 16px; text-align: center; font-size: 0.9rem; } .note { border-left: 3px solid var(--rule); padding: 2px 0 2px 12px; color: var(--ink-3); font-size: 0.8rem; margin: 10px 0; } .note.flag { border-color: var(--flag); color: var(--flag); } /* ── Print ────────────────────────────────────────────────────────────── */ @media print { @page { size: letter portrait; margin: 0.5in; } body { background: #fff; font-size: 10px; } .mast, .controls, .no-print { display: none !important; } .wrap { max-width: none; padding: 0; } .panel { break-inside: avoid; box-shadow: none; border-color: #ccc; margin: 0 0 12px; } thead th { position: static; } thead { display: table-header-group; } .page-break { break-before: page; } * { -webkit-print-color-adjust: exact; print-color-adjust: exact; } a { color: inherit; text-decoration: none; } .print-only { display: block !important; } } .print-only { display: none; } @media (max-width: 720px) { /* iOS zooms the whole page when a control smaller than 16px takes focus, and the zoom does not undo itself. Every control gets 16px and a 40px box — the size a thumb actually hits — rather than each page fixing it locally and missing some. */ select, textarea, input[type="search"], input[type="text"], input[type="date"], input[type="number"], input[type="email"], input[type="password"] { font-size: 16px; min-height: 40px; } button, .btn { min-height: 40px; } button.sm, button.tiny { min-height: 32px; } input[type="checkbox"], input[type="radio"] { width: 24px; height: 24px; } .mast-tagline { display: none; } /* Six nav items do not fit a phone on one line. Let them wrap rather than push the page wider than the viewport — adding Teams was what tipped it. */ .mast-nav { flex-wrap: wrap; gap: 6px 14px; margin-left: 0; width: 100%; } .mast-inner { gap: 8px; } .pagehead h1 { font-size: 1.3rem; } .controls { gap: 8px; } }