/* ========================================================================== NoClue — application stylesheet CONTENTS 1. Design tokens light + dark, system pref with manual override 2. Reset 3. Base elements themed 4. Utilities 5. Design system the reskin: shell, home, play, modals, panels 6. Legacy layer Bulma compatibility shim — DELETE AS YOU RESKIN Section 6 keeps the not-yet-reskinned pages rendering as they did under Bulma 1.0.2. Those pages carry `class="legacy"` on , which pins them to the old light palette so theming can't reach them mid-migration. Reskinned: base.html (shell), index, noclue4x, stats, account, signin, share Still legacy: admin, privacy ========================================================================== */ /* ========================================================================== 1. DESIGN TOKENS ========================================================================== */ :root { --paper: oklch(0.972 0.012 85); --paper2: oklch(0.945 0.016 82); --card: oklch(0.995 0.004 85); --ink: oklch(0.24 0.018 60); --ink2: oklch(0.44 0.014 60); /* Handoff specifies 0.56, which measures 4.31:1 on --paper and misses AA. 0.545 gives 4.52:1. Most labels sit on --paper, not --card. */ --ink3: oklch(0.545 0.014 60); /* --rule is decorative and may sit below 3:1. --edge is for anything the user acts on and must clear it. Do not collapse these into one. */ --rule: oklch(0.80 0.014 70); --edge: oklch(0.62 0.016 70); --clay: oklch(0.52 0.14 32); --moss: oklch(0.46 0.12 148); --sky: oklch(0.48 0.12 245); --focus: oklch(0.52 0.14 32); --curtain: oklch(0.20 0.016 60); --curtain-fg: oklch(0.97 0.008 85); --scrim: color-mix(in oklab, oklch(0.24 0.018 60) 55%, transparent); --btn-solid-fg: var(--paper); } :root[data-theme="dark"] { --paper: oklch(0.205 0.012 70); --paper2: oklch(0.255 0.013 70); --card: oklch(0.238 0.013 70); --ink: oklch(0.955 0.008 85); --ink2: oklch(0.79 0.010 85); --ink3: oklch(0.67 0.012 85); --rule: oklch(0.37 0.012 70); --edge: oklch(0.52 0.014 70); --clay: oklch(0.72 0.12 42); --moss: oklch(0.70 0.11 150); --sky: oklch(0.74 0.10 240); --focus: oklch(0.72 0.12 42); --scrim: color-mix(in oklab, oklch(0.12 0.012 70) 78%, transparent); /* solid buttons and filled tiles need dark ink on a light fill */ --btn-solid-fg: oklch(0.19 0.012 70); } @media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) { --paper: oklch(0.205 0.012 70); --paper2: oklch(0.255 0.013 70); --card: oklch(0.238 0.013 70); --ink: oklch(0.955 0.008 85); --ink2: oklch(0.79 0.010 85); --ink3: oklch(0.67 0.012 85); --rule: oklch(0.37 0.012 70); --edge: oklch(0.52 0.014 70); --clay: oklch(0.72 0.12 42); --moss: oklch(0.70 0.11 150); --sky: oklch(0.74 0.10 240); --focus: oklch(0.72 0.12 42); --scrim: color-mix(in oklab, oklch(0.12 0.012 70) 78%, transparent); --btn-solid-fg: oklch(0.19 0.012 70); } } /* ========================================================================== 2. RESET ========================================================================== */ html { box-sizing: border-box; } *, *::before, *::after { box-sizing: inherit; } html, body, p, ol, ul, li, dl, dt, dd, blockquote, figure, fieldset, legend, textarea, pre, iframe, hr, h1, h2, h3, h4, h5, h6 { margin: 0; padding: 0; } h1, h2, h3, h4, h5, h6 { font-size: 100%; font-weight: normal; } ul { list-style: none; } button, input, select, textarea { margin: 0; } img, video { height: auto; max-width: 100%; } svg { height: auto; width: auto; } iframe { border: 0; } fieldset { border: none; } table { border-collapse: collapse; border-spacing: 0; } td, th { padding: 0; } td:not([align]), th:not([align]) { text-align: inherit; } article, aside, figure, footer, header, hgroup, section { display: block; } input[type="checkbox"], input[type="radio"] { vertical-align: baseline; } span { font-style: inherit; font-weight: inherit; } button { appearance: none; background: none; border: none; color: inherit; font-family: inherit; font-size: 1em; margin: 0; padding: 0; } /* ========================================================================== 3. BASE ELEMENTS ========================================================================== */ html { font-size: 1em; min-width: 300px; overflow-x: hidden; overflow-y: scroll; text-rendering: optimizeLegibility; text-size-adjust: 100%; -moz-osx-font-smoothing: grayscale; -webkit-font-smoothing: antialiased; } body { background: var(--paper); color: var(--ink); font-family: Archivo, Helvetica, Arial, sans-serif; font-size: 1em; font-weight: 400; line-height: 1.5; text-wrap: pretty; } body, button, input, optgroup, select, textarea { font-family: Archivo, Helvetica, Arial, sans-serif; } a { color: var(--clay); cursor: pointer; text-decoration: none; } a:hover { color: var(--ink); } a strong { color: currentColor; } strong { color: var(--ink); font-weight: 600; } small { font-size: 0.875em; } hr { background: var(--rule); border: none; display: block; height: 1px; margin: 1.5rem 0; } :focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; } [hidden] { display: none !important; } @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; scroll-behavior: auto !important; } } /* ========================================================================== 4. UTILITIES ========================================================================== */ .sr-only, .sr, .is-sr-only { border: none !important; clip: rect(0, 0, 0, 0) !important; clip-path: inset(50%) !important; height: 0.01em !important; overflow: hidden !important; padding: 0 !important; position: absolute !important; white-space: nowrap !important; width: 0.01em !important; } .hidden, .is-hidden { display: none !important; } [x-cloak] { display: none !important; } /* Inline SVG icons, replacing the Font Awesome webfont. */ .ic { display: inline-block; fill: currentColor; height: 1em; vertical-align: -0.125em; width: 1em; } .ic-lg { font-size: 1.25em; } .ic-2x { font-size: 2em; } /* ========================================================================== 5. DESIGN SYSTEM ========================================================================== */ .wrap { max-width: 680px; margin: 0 auto; padding: 0 20px; } .serif { font-family: "Instrument Serif", Georgia, serif; font-weight: 400; } .lbl { color: var(--ink3); font-family: "Archivo Narrow", Archivo, sans-serif; font-size: 11.5px; font-weight: 600; letter-spacing: 0.13em; text-transform: uppercase; } .center { text-align: center; } .note { color: var(--ink3); font-size: 13.5px; line-height: 1.55; } .stack { display: grid; gap: 16px; justify-items: center; width: 100%; } .hr { background: var(--rule); height: 1px; margin: 24px 0; } .tnum { font-variant-numeric: tabular-nums; } /* --- shell ---------------------------------------------------------------- */ /* The translucent blur lives on a pseudo-element rather than on the header itself. In Safari a sticky element that is its own backdrop root leaves stale paint in the region below it when that content changes height — which is exactly what happens on the home page when Alpine swaps the loading state for the taller solved state. The result was half-drawn glyphs and text runs that never painted, cleared by any scroll or resize. Moving the backdrop-filter into ::before scopes the backdrop root to the pseudo-element and keeps the header out of the content's paint path; isolation gives it its own stacking context. Visually identical. Deliberately no transform/will-change here: promoting the layer that way is the other common workaround, but a transform on a sticky element can break the stickiness in some Safari versions, which would be a worse regression than the artifact. */ header.site { background: transparent; border-bottom: 1px solid var(--rule); isolation: isolate; position: sticky; top: 0; z-index: 30; } header.site::before { background: color-mix(in oklab, var(--paper) 90%, transparent); content: ""; inset: 0; position: absolute; z-index: -1; -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); } /* Play view: the header scrolls away rather than holding 62px of viewport for the whole game. It's still there at the top — noclue4x.html nudges the page past it on arrival so the board starts at the top of the screen, and scrolling up brings it back. */ body.play header.site { position: static; } .bar { align-items: center; display: flex; gap: 20px; height: 62px; margin: 0 auto; max-width: 680px; padding: 0 20px; } .mark { background: none; border: 0; color: inherit; cursor: pointer; font-family: "Instrument Serif", Georgia, serif; font-size: 27px; line-height: 1; padding: 0; text-decoration: none; } .mark i { color: var(--clay); font-style: italic; } nav.top { align-items: center; display: flex; gap: 20px; margin-left: auto; } nav.top a { color: var(--ink2); cursor: pointer; font-family: "Archivo Narrow", Archivo, sans-serif; font-size: 13px; font-weight: 600; letter-spacing: 0.08em; text-decoration: none; text-transform: uppercase; } nav.top a:hover { color: var(--ink); } nav.top a[aria-current="page"] { color: var(--ink); box-shadow: 0 6px 0 -5px var(--clay); } /* Play is disabled once today's puzzle is solved — there is nothing to play until the next rollover. Muted rather than hidden so the nav doesn't shift. */ nav.top a[aria-disabled="true"], .drawer a[aria-disabled="true"] { color: var(--ink3); cursor: default; pointer-events: none; } nav.top a[aria-disabled="true"]:hover, .drawer a[aria-disabled="true"]:hover { color: var(--ink3); } .themebtn { background: none; border: 1px solid var(--edge); border-radius: 2px; color: var(--ink2); cursor: pointer; font-family: "Archivo Narrow", Archivo, sans-serif; font-size: 12px; font-weight: 600; letter-spacing: 0.1em; padding: 7px 11px; text-transform: uppercase; } .themebtn:hover { border-color: var(--edge); color: var(--ink); } .burger { background: var(--card); border: 1px solid var(--edge); border-radius: 2px; cursor: pointer; display: none; height: 38px; margin-left: auto; padding: 0; place-items: center; width: 38px; } .burger span { background: var(--ink); display: block; height: 1.5px; margin: 3px auto; width: 16px; } .drawer { background: var(--card); border-bottom: 1px solid var(--rule); display: none; } .drawer.open { display: block; } .drawer a { border-top: 1px solid var(--rule); color: var(--ink2); display: block; font-family: "Archivo Narrow", Archivo, sans-serif; font-size: 13.5px; font-weight: 600; letter-spacing: 0.08em; padding: 14px 20px; text-decoration: none; text-transform: uppercase; } .drawer a:first-child { border-top: 0; } /* --- buttons -------------------------------------------------------------- */ .btn { background: var(--ink); border: 1px solid var(--ink); border-radius: 2px; color: var(--btn-solid-fg); cursor: pointer; display: inline-block; font: inherit; font-size: 14px; font-weight: 600; padding: 13px 22px; text-align: center; text-decoration: none; } .btn:hover { background: var(--clay); border-color: var(--clay); color: var(--btn-solid-fg); } .btn.ghost { background: none; color: var(--ink); } .btn.ghost:hover { background: var(--ink); color: var(--btn-solid-fg); } .btn.sm { font-size: 13px; padding: 9px 15px; } .btn.lg { font-size: 16px; padding: 16px 40px; } .btn[disabled], .btn.is-loading { background: var(--paper2); border-color: var(--rule); color: var(--ink3); cursor: not-allowed; opacity: 0.45; } .btn[disabled]:hover, .btn.is-loading:hover { background: var(--paper2); border-color: var(--rule); color: var(--ink3); } .tool { background: none; border: 1px solid var(--edge); border-radius: 2px; color: var(--ink2); cursor: pointer; font: inherit; font-family: "Archivo Narrow", Archivo, sans-serif; font-size: 12.5px; font-weight: 600; letter-spacing: 0.1em; padding: 8px 13px; text-transform: uppercase; } .tool:hover { border-color: var(--edge); color: var(--ink); } .tools { display: flex; gap: 10px; justify-content: center; padding: 6px 0 0; } .spin { animation: sp 0.9s linear infinite; border: 2px solid var(--rule); border-radius: 50%; border-top-color: var(--clay); height: 26px; margin: 0 auto; width: 26px; } @keyframes sp { to { transform: rotate(360deg); } } /* --- home ----------------------------------------------------------------- */ /* Vertical only. `.home` sits on the same element as `.wrap`, so a padding shorthand here would reset .wrap's 20px side padding and run the content into the edge of the screen. Same for .page below. */ .home { padding-top: 52px; padding-bottom: 70px; text-align: center; } .home h1 { font-family: "Instrument Serif", Georgia, serif; font-size: clamp(44px, 10vw, 68px); font-weight: 400; letter-spacing: -0.015em; line-height: 0.96; margin: 0; } .home h1 em { color: var(--clay); font-style: normal; } .home .sub { color: var(--ink2); font-size: 16px; line-height: 1.5; margin: 16px 0 0; } .home .date { margin-top: 22px; } .homeslot { display: grid; margin-top: 34px; min-height: 220px; place-items: center; } .guest { align-items: center; background: var(--card); border: 1px solid var(--rule); color: var(--ink2); display: flex; flex-wrap: wrap; font-size: 13.5px; gap: 12px; justify-content: center; line-height: 1.5; margin: 30px 0 0; padding: 14px 16px; text-align: left; } .guest b { color: var(--ink); font-weight: 600; } .guest .gt { flex: 1; min-width: 210px; } .guest .ga { display: flex; flex-wrap: wrap; gap: 8px; } .status { align-items: center; background: var(--card); border: 1px solid var(--edge); border-radius: 2px; color: var(--ink2); display: inline-flex; font-size: 13.5px; gap: 9px; padding: 9px 15px; } .status .dot { background: var(--sky); border-radius: 50%; height: 8px; width: 8px; } .status.done .dot { background: var(--moss); } .scorewrap { display: grid; gap: 2px; justify-items: center; } .bigscore { color: var(--clay); font-family: "Instrument Serif", Georgia, serif; font-size: 92px; font-variant-numeric: tabular-nums; line-height: 0.9; } .bigscore small { color: var(--ink3); font-size: 26px; letter-spacing: 0.02em; } .solveline { color: var(--ink2); font-size: 16px; line-height: 1.55; max-width: 34ch; } .solveline b { color: var(--ink); font-family: "Instrument Serif", Georgia, serif; font-size: 22px; font-weight: 400; } .rowbtns { display: flex; flex-wrap: wrap; gap: 10px; justify-content: center; } .credit { color: var(--ink3); font-size: 13.5px; margin-top: 44px; } .empty { background: var(--card); border: 1px solid var(--rule); max-width: 420px; padding: 26px 22px; } /* --- grid + tiles --------------------------------------------------------- */ .gridwrap { display: grid; gap: 14px; justify-items: center; } .puz { display: grid; gap: 7px; grid-auto-rows: 68px; grid-template-columns: repeat(4, 68px); } .cell { background: var(--card); border: 1px solid var(--edge); display: grid; padding: 5px; place-items: center; position: relative; } /* .drag-over / .drag-over-unplaced are toggled directly by the pointer-drag code in noclue4x.html; they mean the same thing as .over. */ .cell.over, .cell.drag-over { background: color-mix(in oklab, var(--clay) 7%, var(--card)); border-color: var(--clay); border-style: dashed; } .cell.tgt { border-color: var(--clay); border-style: dashed; } /* Brief highlight as each letter of a newly correct word locks in. */ .tile.flash-correct { animation: flashCorrect 0.7s ease; z-index: 1; } @keyframes flashCorrect { 0% { transform: scale(1); } 30% { transform: scale(1.12); } 100% { transform: scale(1); } } .tile { background: var(--card); border: 1px solid var(--edge); color: var(--ink); cursor: grab; display: grid; font-family: "Instrument Serif", Georgia, serif; font-size: 31px; height: 100%; line-height: 1; place-items: center; position: relative; transition: transform 0.12s ease, background 0.15s, border-color 0.15s, color 0.15s; user-select: none; width: 100%; /* Required for the pointer-drag path. Without it the browser treats a drag that starts on a letter as a scroll gesture and never emits the pointermove events, so the page scrolls instead of the tile moving. */ touch-action: none; } .tile:active { cursor: grabbing; } @media (pointer: coarse) { .tile { -webkit-user-drag: none; } } .tile.start { background: var(--moss); border-color: var(--moss); color: var(--paper); cursor: default; } .tile.placed { background: var(--card); border-color: var(--sky); color: var(--sky); } .tile.correct { background: var(--moss); border-color: var(--moss); color: var(--paper); cursor: default; } /* correct and start differ from placed by fill AND a mark, not hue alone */ .tile.correct::after, .tile.start::after { background: color-mix(in oklab, var(--paper) 60%, transparent); bottom: 5px; content: ""; height: 1px; left: 6px; position: absolute; right: 6px; } .tile.hint { background: var(--clay); border-color: var(--clay); color: var(--paper); cursor: not-allowed; } .tile.hint::after { background: var(--paper); border-radius: 50%; content: ""; height: 5px; position: absolute; right: 5px; top: 5px; width: 5px; } .tile.checking { animation: pulse 1s ease-in-out infinite; border-color: var(--ink3); color: var(--ink3); } @keyframes pulse { 50% { opacity: 0.45; } } .tile.wrong { border-color: var(--edge); border-style: dashed; color: var(--ink2); } .tile.sel { background: var(--sky); border-color: var(--sky); color: var(--paper); transform: translateY(-3px); } .tray { background: var(--paper2); border: 1px solid var(--edge); display: flex; flex-wrap: wrap; gap: 7px; justify-content: center; max-width: 400px; min-height: 60px; padding: 11px; width: 100%; } .tray.over, .tray.drag-over-unplaced { border-color: var(--clay); border-style: dashed; } .tray .tile { border-color: var(--sky); color: var(--sky); font-size: 26px; height: 46px; width: 46px; } /* --- play chrome ---------------------------------------------------------- */ .stage { min-height: 520px; position: relative; } .playbar { align-items: center; border-bottom: 1px solid var(--rule); display: grid; gap: 12px; grid-template-columns: 1fr auto 1fr; padding: 22px 0 18px; } .tmr { display: grid; gap: 2px; justify-items: start; } .mvs { display: grid; gap: 2px; justify-items: end; } .tmr b, .mvs b { font-family: "Instrument Serif", Georgia, serif; font-size: 32px; font-variant-numeric: tabular-nums; font-weight: 400; line-height: 1; } .hintbox { align-items: center; display: flex; gap: 8px; } /* pips carry a state, so they use --edge and differ by fill, not hue alone */ .pip { border: 1px solid var(--clay); background: var(--clay); border-radius: 50%; height: 8px; width: 8px; } .pip.used { background: transparent; border-color: var(--edge); } .playfoot { padding: 26px 0 70px; text-align: center; } /* --- pre-roll ------------------------------------------------------------- */ .preroll { background: var(--curtain); color: var(--curtain-fg); display: grid; inset: 0; place-items: center; position: absolute; text-align: center; z-index: 20; } .preroll .inner { display: grid; gap: 18px; justify-items: center; padding: 24px; } .preroll h2 { font-family: "Instrument Serif", Georgia, serif; font-size: clamp(38px, 9vw, 60px); font-weight: 400; line-height: 0.95; margin: 0; } .preroll .lbl { color: color-mix(in oklab, var(--curtain-fg) 70%, transparent); } .prebar { background: color-mix(in oklab, var(--curtain-fg) 25%, transparent); height: 3px; overflow: hidden; width: min(280px, 70vw); } .prebar i { animation: shrink 3s linear forwards; background: var(--curtain-fg); display: block; height: 100%; transform-origin: right; width: 100%; } @keyframes shrink { to { width: 0; } } /* Paused: the board must stop accepting input while the clock is stopped. Previously this was an invisible pointer blocker on the album-cover layer; the curtain now does the same job, but visibly. */ .preroll.paused .prebar { display: none; } /* While the server is scoring the finished grid the timer is also paused, but there is nothing to say — stay invisible and just keep blocking input, which is what the old .ghost-blocker did. */ .preroll.blocking { background: transparent; } /* --- modals --------------------------------------------------------------- */ .scrim { background: var(--scrim); display: none; inset: 0; padding: 20px; place-items: center; position: fixed; z-index: 50; } .scrim.on { display: grid; } .sheet { background: var(--card); border: 1px solid var(--edge); box-shadow: 0 24px 60px -28px oklch(0.24 0.018 60 / 0.5); max-width: 420px; padding: 34px 28px 26px; position: relative; text-align: center; width: 100%; } .sheet h3 { font-family: "Instrument Serif", Georgia, serif; font-size: 36px; font-weight: 400; line-height: 1; margin: 6px 0 0; } .sheet .scorewrap { margin: 18px 0 4px; } .sheet .rowbtns { margin-top: 24px; } .sheet.wide { max-width: 520px; text-align: left; } .sheet.wide h3 { text-align: center; } .htp { color: var(--ink2); display: grid; font-size: 14.5px; gap: 14px; line-height: 1.6; margin-top: 20px; } .htp ol { display: grid; gap: 10px; margin: 0; padding-left: 20px; list-style: decimal; } .legend { border-top: 1px solid var(--rule); display: grid; gap: 8px; padding-top: 16px; } .legend div { align-items: center; color: var(--ink2); display: flex; font-size: 13.5px; gap: 11px; } .chip { border: 1px solid var(--edge); display: grid; flex: none; font-family: "Instrument Serif", Georgia, serif; font-size: 15px; height: 26px; place-items: center; width: 26px; } .chip.moss { background: var(--moss); border-color: var(--moss); color: var(--paper); } .chip.sky { border-color: var(--sky); color: var(--sky); } .chip.clay { background: var(--clay); border-color: var(--clay); color: var(--paper); } /* --- alert ---------------------------------------------------------------- */ .alert { background: color-mix(in oklab, var(--clay) 7%, var(--card)); border: 1px solid var(--clay); display: grid; gap: 4px; margin: 0 auto; max-width: 420px; padding: 14px 16px; } .alert b { color: var(--clay); font-family: "Instrument Serif", Georgia, serif; font-size: 20px; font-weight: 400; } .alert p { color: var(--ink2); font-size: 13.5px; line-height: 1.5; margin: 0; } /* --- interior pages: stats, account, sign in, share ------------------------ */ .page { padding-top: 46px; padding-bottom: 80px; } .page h1 { font-family: "Instrument Serif", Georgia, serif; font-size: clamp(34px, 7vw, 46px); font-weight: 400; line-height: 1.05; /* Handoff says 4px. At 46px the serif descenders sit almost on top of the standfirst underneath, so this is 8px. */ margin: 0 0 8px; } /* standfirst directly under a page heading */ .page h1 + .note { max-width: 46ch; } /* Streaks — Current / All time. Deliberately unboxed and on one baseline: this used to be two bordered panels roughly 340px tall, which pushed Groups off the first screen on a phone. Same numbers, about a fifth of the height. */ .streaks-head { display: block; margin: 24px 0 10px; } .streaks { align-items: baseline; display: flex; flex-wrap: wrap; gap: 10px 34px; margin-top: 0; } .streak { align-items: baseline; display: flex; gap: 9px; } .streak b { font-family: "Instrument Serif", Georgia, serif; font-size: 30px; font-variant-numeric: tabular-nums; font-weight: 400; line-height: 1; } .streak .days { color: var(--ink2); font-size: 13px; } .panel { background: var(--card); border: 1px solid var(--rule); margin-top: 26px; padding: 24px 22px; } .panel h2 { font-family: "Instrument Serif", Georgia, serif; font-size: 24px; font-weight: 400; margin: 0 0 8px; } .panel p { color: var(--ink2); font-size: 14.5px; line-height: 1.6; margin: 0; } /* Section 6 is fully scoped under body.legacy, so these need no guard. */ .field { display: grid; gap: 7px; margin-top: 20px; } .field label { color: var(--ink2); font-family: "Archivo Narrow", Archivo, sans-serif; font-size: 12px; font-weight: 600; letter-spacing: 0.1em; text-transform: uppercase; } .field input { background: var(--card); border: 1px solid var(--edge); border-radius: 2px; color: var(--ink); font: inherit; font-size: 15px; padding: 12px 13px; } .field input:disabled { color: var(--ink3); cursor: not-allowed; } .field .help { color: var(--ink3); font-size: 12.5px; } /* time / moves row on the share page */ .metarow { display: flex; gap: 34px; justify-content: center; margin-top: 22px; } .metarow div { text-align: center; } .metarow b { display: block; font-family: "Instrument Serif", Georgia, serif; font-size: 30px; font-variant-numeric: tabular-nums; font-weight: 400; line-height: 1; } /* --- groups + leaderboards ------------------------------------------------ */ .groups { margin-top: 40px; } .groups-head { align-items: baseline; display: flex; gap: 14px; justify-content: space-between; margin-bottom: 14px; } .group { border: 1px solid var(--rule); margin-top: 18px; } .group-top { align-items: baseline; border-bottom: 1px solid var(--rule); display: flex; flex-wrap: wrap; gap: 8px 14px; justify-content: space-between; padding: 18px 20px; } .group-name { font-family: "Instrument Serif", Georgia, serif; font-size: 25px; font-weight: 400; line-height: 1.1; } /* Day / Week / Month. A radio group, not buttons: only one can be current, and arrow-key navigation between them comes free with the roving tabindex. */ .seg { border: 1px solid var(--rule); display: inline-flex; overflow: hidden; } .seg button { background: none; border: 0; border-right: 1px solid var(--rule); color: var(--ink3); cursor: pointer; font-family: "Archivo Narrow", Archivo, sans-serif; font-size: 12px; font-weight: 600; letter-spacing: 0.1em; padding: 8px 14px; text-transform: uppercase; } .seg button:last-child { border-right: 0; } .seg button:hover { color: var(--ink); } .seg button[aria-pressed="true"] { background: var(--ink); color: var(--btn-solid-fg); } /* Grid rather than a table: the row is a list item semantically, and this keeps the rank and score columns aligned without table layout quirks on narrow screens. */ .lb-row { align-items: baseline; border-bottom: 1px solid var(--rule); display: grid; gap: 14px; grid-template-columns: 34px 1fr auto auto; padding: 13px 20px; } .lb-row:last-child { border-bottom: 0; } /* A period switch keeps the old board in place so the page height — and so the scroll position — doesn't move; this just marks it as stale. */ .group .is-reloading { opacity: 0.45; transition: opacity 120ms ease; } .lb-row.is-you { background: var(--paper2); } .lb-rank { color: var(--ink3); font-family: "Archivo Narrow", Archivo, sans-serif; font-size: 15px; font-variant-numeric: tabular-nums; font-weight: 600; } .lb-row.is-you .lb-rank, .lb-row.is-you .lb-name { color: var(--ink); } .lb-name { color: var(--ink2); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .lb-you { color: var(--ink3); font-size: 12px; margin-left: 6px; } .lb-score { font-family: "Instrument Serif", Georgia, serif; font-size: 22px; font-variant-numeric: tabular-nums; line-height: 1; min-width: 46px; text-align: right; } /* Average and days sit together in a fixed-width column so the numbers line up down the board rather than drifting with name length. */ .lb-meta { color: var(--ink3); font-size: 12.5px; font-variant-numeric: tabular-nums; min-width: 92px; text-align: right; } .lb-idle .lb-score, .lb-idle .lb-name { color: var(--ink3); } .lb-head { border-bottom: 1px solid var(--rule); color: var(--ink3); display: grid; font-family: "Archivo Narrow", Archivo, sans-serif; font-size: 11px; font-weight: 600; gap: 14px; grid-template-columns: 34px 1fr auto auto; letter-spacing: 0.11em; padding: 10px 20px; text-transform: uppercase; } .lb-head span:nth-child(3) { min-width: 46px; text-align: right; } .lb-head span:nth-child(4) { min-width: 92px; text-align: right; } .invite-code { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 17px; letter-spacing: 0.08em; } .group-foot { align-items: center; border-top: 1px solid var(--rule); display: flex; flex-wrap: wrap; gap: 10px; justify-content: space-between; padding: 14px 20px; } /* --- group manage panel --------------------------------------------------- Expands inside the card. Tinted rather than bordered so it reads as a mode of the card it belongs to and not as a second card stacked underneath it. */ .group-manage { background: var(--paper2); } /* Separator on the top edge, not the bottom: the blocks are a mix of divs and a form, interleaved with Alpine