/* * THE CLUB SKELETON — one stylesheet, every public page. * * WHY THIS FILE EXISTS. index.html and game.html each carried their own copy of * the palette, the shell, the top bar, the mark, the buttons and the footer. * Two copies of a design system is two design systems: game.html had a fluid * root type scale and index.html did not, so the same club's two pages * disagreed about how big text should be on a 27-inch monitor, and every * hardcoded dark surface had to be found and fixed twice. * * There is no build step here and there should not be — this Worker has to stay * up while either app is redeploying, and its whole value is that it is static. * A plain stylesheet linked from both pages is the version of "shared" that * costs nothing and cannot fall out of step. * * WHAT LIVES HERE: anything two pages both need. Palette, type scale, shell * width, top bar, brand mark, the language and theme switches, buttons, footer. * WHAT DOES NOT: anything one page owns — the seat ring, the role cards, the * beats strip. Those stay inline on the page that uses them. * * THE ONE THING DELIBERATELY NOT SHARED is the pre-paint theme bootstrap, which * has to be INLINE in each : a stylesheet cannot set a class, and a * script tag fetched over the network runs late enough to show somebody who * chose dark a white flash. members/src/theme.ts makes the same trade and says * so. */ /* =========================================================================== PALETTE Values lifted from members/src/index.css rather than re-picked by eye. Two sites meant to look like one organisation cannot each hold their own idea of what the club's grey is. ========================================================================= */ :root { color-scheme: dark; --bg: #0b0b0d; --card: #141318; --card-hover: #1a1820; --line: #26242c; --line-strong: #37333e; --ink: #f3f0ea; --muted: #9a94a3; --dim: #716b79; --red: #c1121f; --red-bright: #e12a36; --gold: #c9a227; --steel: #5b8fc9; --quiet-bg: rgba(20, 19, 24, 0.7); --card-grad: linear-gradient(150deg, rgba(24, 22, 28, 0.96), rgba(15, 14, 19, 0.96)); --card-shadow: 0 24px 70px rgba(0, 0, 0, 0.4); --seat-fill: #191821; --felt-fill: rgba(193, 18, 31, 0.05); --go-grad: linear-gradient(145deg, #d11d2a, #a70d18); --go-shadow: 0 8px 24px rgba(193, 18, 31, 0.24); --wash-red: rgba(193, 18, 31, 0.2); --wash-gold: rgba(201, 162, 39, 0.055); --serif: ui-serif, "Iowan Old Style", "Palatino Linotype", Palatino, Georgia, serif; --sans: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; --mono: ui-monospace, "SF Mono", SFMono-Regular, Menlo, Consolas, monospace; /* * TYPE THAT GROWS WITH THE WINDOW, which game.html had and index.html did not. * * Every size on both pages is set in rem, so this one line is the whole * response to "the width should adapt to the resolution": on a 27-inch * monitor the club's text gets bigger rather than the same paragraph being * stretched to twice its measure. The ceiling exists because past about 21px * a line of body text needs a shorter measure, not a longer one. */ font-size: clamp(16px, 14.2px + 0.36vw, 21px); } /* * LIGHT. Applied by the inline bootstrap in each before first paint. * * A CLASS rather than a `prefers-color-scheme` block, because "follow the * device" must be expressible alongside an explicit choice — a media query * would override somebody who deliberately picked dark on a light laptop. * * The reds and golds are DARKER here rather than reused: club red on white is * 3.9:1 and fails, and the dark gold measures 1.4:1. These are the values the * portal already re-picked and validated for its own light theme. */ :root.is-light { color-scheme: light; --bg: #f4f5f7; --card: #ffffff; --card-hover: #eff1f4; --line: #dbdee3; --line-strong: #bfc4cc; --ink: #16171a; --muted: #5b616a; --dim: #838a93; --red: #a8101a; --red-bright: #c1121f; --gold: #7d6412; --steel: #2f5f96; --quiet-bg: #ffffff; --card-grad: linear-gradient(150deg, #ffffff, #fbfcfd); --card-shadow: 0 14px 40px rgba(16, 18, 24, 0.12); --seat-fill: #eef0f4; --felt-fill: rgba(168, 16, 26, 0.05); --go-grad: linear-gradient(145deg, #c1121f, #961018); --go-shadow: 0 8px 24px rgba(168, 16, 26, 0.18); /* A tenth of the strength: the wash that reads as stage light on black reads as a stain on paper. */ --wash-red: rgba(168, 16, 26, 0.05); --wash-gold: rgba(125, 100, 18, 0.03); } /* =========================================================================== BASE ========================================================================= */ * { box-sizing: border-box; } html { -webkit-text-size-adjust: 100%; } body { margin: 0; background: radial-gradient(1200px 640px at 50% -12%, var(--wash-red), transparent 62%), radial-gradient(900px 520px at 50% 118%, var(--wash-gold), transparent 60%), var(--bg); color: var(--ink); font: 1rem/1.6 var(--sans); -webkit-font-smoothing: antialiased; } b, strong { font-variant-numeric: tabular-nums; } a { color: inherit; } [hidden] { display: none !important; } @media (prefers-reduced-motion: reduce) { * { transition: none !important; } } /* * THE SHELL — one page width for the whole club, and the same formula the * members portal uses. It tracks the window CONTINUOUSLY rather than snapping * at breakpoints: full-bleed on a phone, 82% of the window above that with a * floor so a small laptop is not cramped, and one hard ceiling past which a * line of body text gets long enough that the eye loses its place returning to * the next line. */ .shell { max-width: min(100%, 1500px, max(560px, 82vw)); margin: 0 auto; /* The horizontal value is `--shell-pad` from members/src/index.css, repeated as a literal because a static file has no build step and cannot import a token. It is checked by scripts/check_widths.mjs rather than trusted. IT IS px AND NOT rem ON PURPOSE. The root font-size on both surfaces is itself fluid — clamp(16px, 14.2px + 0.36vw, 21px) — so a rem pad would scale twice, once with the root and again with its own vw term, and the landing page's left edge would sit somewhere the portal's never does. That is the exact drift this shared file exists to end. */ padding: 1.5rem clamp(18px, 2.1vw, 44px) 4rem; } /* =========================================================================== TOP BAR ========================================================================= */ .top { display: flex; align-items: center; justify-content: space-between; gap: 1rem; margin-bottom: 2.5rem; } .mark { display: flex; align-items: center; gap: 0.7rem; text-decoration: none; } .mark img { width: 40px; height: 40px; object-fit: contain; } .mark b { display: block; font-family: var(--serif); font-size: 1rem; font-weight: 700; letter-spacing: 0.03em; } .mark small { display: block; color: var(--dim); font-size: 0.625rem; letter-spacing: 0.2em; text-transform: uppercase; } /* The two preference switches travel together and wrap under the mark on a narrow phone rather than squeezing the wordmark. */ .top__prefs { display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem; } .lang { display: inline-flex; border: 1px solid var(--line); border-radius: 999px; overflow: hidden; } .lang button { padding: 0.44rem 0.8rem; border: 0; background: none; color: var(--muted); font: inherit; font-size: 0.75rem; font-weight: 700; letter-spacing: 0.04em; cursor: pointer; } .lang button[aria-pressed="true"] { background: var(--card-hover); color: var(--ink); } .lang button:focus-visible { outline: 2px solid var(--gold); outline-offset: -2px; } /* * THE THEME SWITCH. Three segments, same wording and same three options as the * portal's, so crossing between the two sites does not mean learning a second * control. Labels rather than a cycling icon: a rotating sun/moon hides two * thirds of the state, and there is no glyph anyone reads as "follow the * device" the first time. */ .theme { display: inline-flex; flex: 0 0 auto; border: 1px solid var(--line); border-radius: 999px; overflow: hidden; background: var(--card); } .theme button { min-height: 30px; padding: 0 0.7rem; border: 0; background: none; color: var(--muted); font: inherit; font-size: 0.75rem; font-weight: 700; letter-spacing: 0.03em; cursor: pointer; white-space: nowrap; } .theme button + button { border-left: 1px solid var(--line); } .theme button:hover { color: var(--ink); } .theme button[aria-checked="true"] { background: var(--card-hover); color: var(--ink); } .theme button:focus-visible { outline: 2px solid var(--gold); outline-offset: -2px; } /* =========================================================================== BUTTONS ========================================================================= */ .btn { display: inline-flex; align-items: center; justify-content: center; /* 48px at the base type size, and it grows with it. Never below 44. */ min-height: 3rem; padding: 0.75rem 1.25rem; border: 1px solid transparent; border-radius: 12px; font: inherit; font-size: 0.84rem; font-weight: 700; text-decoration: none; cursor: pointer; transition: transform 0.12s ease, border-color 0.12s ease, background 0.12s ease; } .btn:hover { transform: translateY(-1px); } .btn:focus-visible { outline: 2px solid var(--gold); outline-offset: 2px; } .btn--go { color: #fff; background: var(--go-grad); box-shadow: var(--go-shadow); } .btn--quiet { border-color: var(--line-strong); color: var(--ink); background: var(--quiet-bg); } /* =========================================================================== FOOTER Columns that FIT rather than columns that were chosen: auto-fit against a 16rem floor, so this is one stack on a phone, two on a tablet and four on a laptop without a single breakpoint. The layout answers "adapt to the resolution" itself instead of a media query guessing at devices. ========================================================================= */ footer { margin-top: 4rem; padding-top: 1.75rem; border-top: 1px solid var(--line); } .foot__cols { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 16rem), 1fr)); gap: 1.75rem clamp(1.25rem, 3vw, 3rem); } .foot__col { display: flex; flex-direction: column; align-items: flex-start; gap: 0.44rem; min-width: 0; } .foot__col h2 { margin: 0 0 0.25rem; color: var(--dim); font-family: var(--sans); font-size: 0.66rem; font-weight: 800; letter-spacing: 0.18em; text-transform: uppercase; } .foot__col a { color: var(--muted); font-size: 0.81rem; text-decoration: none; line-height: 1.5; } .foot__col a:hover { color: var(--ink); } .foot__col p { margin: 0; color: var(--muted); font-size: 0.81rem; line-height: 1.55; } .mark--foot { margin-bottom: 0.25rem; } .mark--foot img { width: 34px; height: 34px; } .foot__blurb { max-width: 34ch; } .foot__note { margin: 1.9rem 0 0; padding-top: 1.1rem; border-top: 1px solid var(--line); color: var(--dim); font-size: 0.72rem; } /* Every footer link is a real tap target on a phone, where they sit closest together and are hit with a thumb. */ @media (max-width: 620px) { .foot__col a { min-height: 34px; display: inline-flex; align-items: center; } }