/* base.css — the FUZZY SPORTS PLATFORM STYLESHEET (2026-09-07). ⚠ IT EXISTS BECAUSE THE LEGAL PAGES ARE NOT PART OF ANY GAME. /privacy and /terms bind a real party to real commitments and must render for a signed-out stranger; they were styled by the stock game’s app.css, which broke the moment that file moved under /football-exchange/. Copying the rules into a second file would have left two definitions of one footer, free to drift — and the footer is where the privacy link lives, so drift there is a legal page becoming unreachable. WHAT BELONGS HERE: the palette, the document base, the accessibility primitives every page needs (.skip, .sr-only, focus), the site header/footer chrome, and the legal-page prose styles. WHAT DOES NOT: anything about a market, a board, a portfolio or a trade. Those stay in the game’s own stylesheet, which loads AFTER this one. Loaded by: / (with home.css), /privacy, /terms, and /football-exchange/ (with app.css). */ /* ⚠ SIX PALETTES, ONE SET OF NAMES (owner, 2026-09-23: "the site is dark, I'm not sure everybody likes that"). Every page reads these names and none of them names a colour, so a theme is this block and nothing else — and a rule that hard-codes a hex is a rule that will look wrong in five of the six. /theme.js puts the chosen name on before the first paint. THE NAMES: --bg / --panel / --line the page, the raised surface, the rule between things --ink / --dim / --ink-soft primary text, secondary text, long-form prose --field / --hover what a control sits on, what a row does under the cursor --up / --down / --accent gain, loss, the interactive colour --on-accent text ON the accent (the skip link), which is not --ink in a light theme --alert-bg / --alert-ink the failure banner --shadow one shadow colour, since black at 35% is a smear on a cream page --pattern a background-image, none in the plain themes ⚠ GREEN AND RED ARE NOT THE SAME GREEN AND RED IN EVERY THEME. #3fb950 on white is a pale smear at small sizes, and the red/green pair is already the worst case for colour vision — so the light themes take darker, denser versions. The sign is in the text beside them either way (see signed() in app.js), which is what actually carries the meaning. */ :root, :root[data-theme="dark"] { --bg:#0e1116; --panel:#161b22; --line:#2a313c; --ink:#e6edf3; --dim:#9aa7b4; --up:#3fb950; --down:#f85149; --accent:#58a6ff; --ink-soft:#c9d4de; --field:#0d1117; --hover:#12161d; --on-accent:#0d1117; --alert-bg:#2d1214; --alert-ink:#ffb3ae; --shadow:rgba(0,0,0,.35); --pattern:none; } /* Plain white-ish. The one most people mean by "light". */ :root[data-theme="light"] { --bg:#ffffff; --panel:#f6f8fa; --line:#d8dee4; --ink:#1f2328; --dim:#5b6672; --up:#1a7f37; --down:#cf222e; --accent:#0969da; --ink-soft:#32383f; --field:#ffffff; --hover:#f0f3f6; --on-accent:#ffffff; --alert-bg:#ffebe9; --alert-ink:#82071e; --shadow:rgba(31,35,40,.12); --pattern:none; } /* Warm paper: the same light theme with the blue taken out of it, for anyone who finds white screens harsh. */ :root[data-theme="sand"] { --bg:#f7f3ea; --panel:#fffdf8; --line:#e0d8c7; --ink:#2e2a24; --dim:#6b6355; --up:#1a7f37; --down:#c02b1d; --accent:#8a5a10; --ink-soft:#3f3a32; --field:#fffdf8; --hover:#f0e9da; --on-accent:#fffdf8; --alert-bg:#fbe6e1; --alert-ink:#8a1c10; --shadow:rgba(70,60,40,.14); --pattern:none; } /* Cool grey — light, but with the glare off it. */ :root[data-theme="slate"] { --bg:#e9edf1; --panel:#f7f9fb; --line:#cbd4dd; --ink:#1c2530; --dim:#5a6775; --up:#17713a; --down:#c0272d; --accent:#1f5fa9; --ink-soft:#333f4c; --field:#f7f9fb; --hover:#dfe5ec; --on-accent:#f7f9fb; --alert-bg:#f7e2e2; --alert-ink:#7d1620; --shadow:rgba(28,37,48,.13); --pattern:none; } /* ⚠ THE TWO PATTERNED THEMES ARE DELIBERATELY ALMOST INVISIBLE (owner: "subdued, non-nausea-inducing"). Both are a single flat colour with lines around a tenth opacity at a 28px pitch: fine enough to read as texture, coarse enough not to shimmer against a scrolling table, which is what makes a pattern sickening. They are also background-attachment:fixed on the body, so the texture stays put while the page moves over it rather than sliding under the eye. */ :root[data-theme="graph"] { --bg:#fbfcfd; --panel:#ffffff; --line:#d5dde5; --ink:#1f2328; --dim:#5b6672; --up:#1a7f37; --down:#cf222e; --accent:#0969da; --ink-soft:#32383f; --field:#ffffff; --hover:#eef3f8; --on-accent:#ffffff; --alert-bg:#ffebe9; --alert-ink:#82071e; --shadow:rgba(31,35,40,.12); --pattern:linear-gradient(rgba(31,99,160,.11) 1px, transparent 1px), linear-gradient(90deg, rgba(31,99,160,.11) 1px, transparent 1px); --pattern-size:28px 28px; } :root[data-theme="weave"] { --bg:#f6f2e9; --panel:#fffdf7; --line:#ded6c5; --ink:#2e2a24; --dim:#6b6355; --up:#1a7f37; --down:#c02b1d; --accent:#8a5a10; --ink-soft:#3f3a32; --field:#fffdf7; --hover:#efe8d9; --on-accent:#fffdf7; --alert-bg:#fbe6e1; --alert-ink:#8a1c10; --shadow:rgba(70,60,40,.14); --pattern:repeating-linear-gradient(45deg, rgba(120,95,45,.10) 0 1px, transparent 1px 16px); --pattern-size:auto; } * { box-sizing:border-box; } body { margin:0; background-color:var(--bg); color:var(--ink); background-image:var(--pattern, none); background-size:var(--pattern-size, auto); /* Fixed, so the texture does not slide under a scrolling table — see the note on the palettes. */ background-attachment:fixed; font:14px/1.45 ui-sans-serif,system-ui,-apple-system,Segoe UI,Roboto,sans-serif; } /* ⚠ THE WAY OUT OF A LONG PAGE, AT THE TOP OF IT (owner, 2026-09-23). About, How to Play and Rules are read from inside the game, and their only exit was a footer link — which on a page you have to scroll to the end of is not an exit, it is a reward for persistence. The Back control is first and weighted; the sibling pages follow it, so somebody checking the Rules against How to Play moves sideways instead of going back and coming in again. */ .pagenav { display:flex; flex-wrap:wrap; align-items:center; gap:14px; padding:10px 24px; border-bottom:1px solid var(--line); font-size:13px; } .pagenav .backlink { font-weight:600; } .pagenav-rest { display:flex; flex-wrap:wrap; gap:10px; align-items:center; color:var(--dim); } .pagenav a { color:var(--accent); text-decoration:none; } .pagenav a:hover { text-decoration:underline; } @media (max-width: 720px) { .pagenav { padding-left:12px; padding-right:12px; gap:10px; } } /* Visually hidden but still announced. The counterpart to the [hidden] rule above: `hidden` takes an element out of the accessibility tree, this keeps it in. Labels use THIS, never `hidden`. */ .sr-only { position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; border:0; } .skip { position:absolute; left:-999px; top:0; z-index:10; background:var(--accent); color:var(--on-accent); padding:8px 14px; border-radius:0 0 6px 0; font-weight:600; } .skip:focus { left:0; } /* One visible focus style everywhere. The browser default is invisible on this palette, and a keyboard user who cannot see focus cannot use the page at all. */ :focus-visible { outline:2px solid var(--accent); outline-offset:2px; } header { display:flex; align-items:center; gap:16px; padding:12px 18px; border-bottom:1px solid var(--line); background:var(--panel); flex-wrap:wrap; } header h1 { font-size:15px; margin:0; font-weight:650; letter-spacing:.2px; } header .phase { font-size:11px; text-transform:uppercase; letter-spacing:.6px; color:var(--dim); border:1px solid var(--line); border-radius:999px; padding:2px 9px; } .muted { color:var(--dim); } /* --- site footer + legal pages (BUILD-PLAN §9.2) ---------------------------------------------- ⚠ THE FOOTER LIVES OUTSIDE #app AND IS NEVER HIDDEN. A privacy policy that only a signed-in user can reach is not a published privacy policy: the person most likely to want it is the one deciding whether to hand over an email address, and at that moment #app is `hidden` and the sign-in gate is all there is. So it sits at the end of , visible in every state. */ .sitefoot { display:flex; align-items:center; gap:10px; flex-wrap:wrap; padding:14px 18px; margin-top:28px; border-top:1px solid var(--line); background:var(--panel); font-size:12px; color:var(--dim); } .sitefoot a { color:var(--dim); text-decoration:underline; text-underline-offset:2px; } .sitefoot a:hover { color:var(--accent); } .sitefoot .foot-note { margin-left:auto; } .homelink { color:inherit; text-decoration:none; } .homelink:hover { color:var(--accent); } /* Prose, not a data table: a measure that stays readable, and headings that separate. */ .legal { max-width:78ch; padding:24px 18px 8px; } .legal h2 { font-size:22px; margin:0 0 4px; } .legal h3 { font-size:15px; margin:30px 0 8px; padding-top:14px; border-top:1px solid var(--line); color:var(--ink); } .legal p, .legal li { color:var(--ink-soft); } .legal ul { padding-left:20px; } .legal li { margin:6px 0; } .legal a { color:var(--accent); } .legal code { font:12px/1.4 ui-monospace,SFMono-Regular,Menlo,Consolas,monospace; background:var(--field); border:1px solid var(--line); border-radius:4px; padding:1px 5px; } .legal-date { margin:0 0 18px; font-size:12px; } /* ⚠ `white-space:normal` AND `table-layout:fixed` ARE BOTH LOAD-BEARING, NOT TIDYING. The global `th,td` rule above sets `white-space:nowrap`, which is right for the market board — a price must not wrap mid-number — and catastrophic for prose: without this override the cells refuse to wrap, the table grows to whatever the longest sentence measures (1934px when this page was first opened in a browser), and it drags the whole BODY into horizontal scrolling, breaking the "the body never scrolls sideways" rule the mobile work established. `table-layout:fixed` then keeps the three columns from being re-proportioned by their longest cell. No test caught this and none realistically would have — it was found by looking at the page. */ .legal-table { border-collapse:collapse; width:100%; margin:10px 0 4px; table-layout:fixed; } .legal-table th, .legal-table td { border:1px solid var(--line); padding:8px 10px; text-align:left; vertical-align:top; white-space:normal; /* see above */ overflow-wrap:anywhere; /* a long unbroken token cannot push the column open */ } /* The global `th` is sticky for the scrolling market board; on a prose page it just floats a header over the text as you scroll past it. */ .legal-table th { background:var(--field); font-weight:600; color:var(--ink); position:static; } /* With table-layout:fixed the first row decides the columns, so state the split rather than let the longest cell win it. The middle column carries the explanations and needs the room. */ .legal-table th:nth-child(1) { width:24%; } .legal-table th:nth-child(2) { width:50%; } .legal-table th:nth-child(3) { width:26%; } .legal-table td { color:var(--ink-soft); } /* A short table of numbers (the Rules page's roster, 2026-09-22). It stays a table on a phone: five short columns fit at 360px, and stacking eight rows into cards made the page twice as long. */ .num-table { border-collapse:collapse; width:100%; margin:10px 0 4px; font-size:14px; } .num-table th, .num-table td { border-bottom:1px solid var(--line); padding:6px 8px; text-align:left; white-space:normal; } .num-table th { font-weight:600; color:var(--ink); font-size:12px; position:static; background:none; } .num-table td { color:var(--ink-soft); } @media (max-width: 720px) { .num-table { font-size:13px; } .num-table th, .num-table td { padding:6px 4px; } } @media (max-width: 720px) { .legal { padding:16px 12px 4px; } .sitefoot { padding:14px 12px; } .sitefoot .foot-note { margin-left:0; flex-basis:100%; } /* A three-column table at 360px is unreadable; stack each row into a labelled block instead. */ .legal-table thead { display:none; } .legal-table, .legal-table tbody, .legal-table tr, .legal-table td { display:block; width:100%; } .legal-table tr { margin-bottom:10px; border:1px solid var(--line); border-radius:6px; } .legal-table td { border:0; border-bottom:1px solid var(--line); } .legal-table td:last-child { border-bottom:0; } /* The stacked rows would otherwise be three unlabelled paragraphs — carry the column heading into each cell so "Kept: 7 days" still reads as an answer to a question. */ .legal-table td::before { content:attr(data-label); display:block; margin-bottom:2px; font-size:11px; text-transform:uppercase; letter-spacing:.5px; color:var(--dim); } }