/* ============================================================================ ChessImprover web — design tokens + shared components. Layering, in order: 1. Tokens (Refined Lavender, light + dark) 2. Base + typography 3. Shell (header, mode nav, streak, account menu) 4. Shared components (btn, card, stat, pill, badge, segmented, tabs, chip, range, bar-chart, empty-state, toolbar, sheet, list-row) 5. Board (themes, squares, coords, hints) 6. Page rules (landing, trainer, app screens) Screens own their extra rules in site/css/.css. Everything here is shared, so a component added below must be usable by any screen unchanged. ============================================================================ */ /* ---- 1. Tokens ---------------------------------------------------------- Mirror of ui/theme/Color.kt (Refined Lavender). Light is the base; dark applies for an explicit data-theme="dark" and for the system/unstamped case under a dark OS preference. data-theme="light" therefore matches no dark rule and stays light. nav.js stamps data-theme on ; :not([data-theme]) covers the sliver before that runs. */ :root { color-scheme: light; /* Foundations */ --paper: #F7F6FB; --paper2: #ECEAF5; --paper3: #DEDBEC; --surface: #FFFFFF; --border: #DEDBEC; --border2: #C5C2DA; --ink: #1A1B2E; --ink2: #3A3B5C; --ink3: #5A5C7A; --ink4: #8082A0; --ink5: #B0B2C9; /* Brand */ --accent: #5A5BA0; --accent2: #6E70B5; --accent-soft: #DAD7EE; --accent-tint: #E8E5F5; /* Semantic */ --success: #22A06B; --success-soft: #D8F0E2; --warning: #E08B3C; --warning-soft: #FBE5CC; --danger: #D85858; --danger-soft: #FADADA; --info: #4A6FB5; --info-soft: #DEE6F4; /* Text that sits on a filled accent/danger surface. Flips in dark, where the accent is the light color of the pair. */ --on-accent: #FFFFFF; --on-danger: #FFFFFF; --scrim: rgba(19, 20, 38, 0.55); --shadow-1: 0 1px 2px rgba(26, 27, 46, 0.07); --shadow-2: 0 6px 24px rgba(26, 27, 46, 0.14); /* Chess conventions — identical in both modes, never the brand accent. */ --last-move: rgba(245, 224, 122, 0.55); --check-ring: rgba(255, 0, 0, 0.28); /* Board squares. Overridden per [data-board-theme]; wood is the default. */ --sq-light: #F0D9B5; --sq-dark: #B58863; /* Type stacks. No webfont is fetched (no external assets); Inter and JetBrains Mono are used when the reader has them, else the platform UI / mono face. */ --font-ui: Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif; --font-mono: "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, monospace; /* Aliases kept for markup written against the pre-token palette. */ --fg: var(--ink); --muted: var(--ink3); --bg: var(--paper); --card: var(--surface); --board-light: var(--sq-light); --board-dark: var(--sq-dark); } :root[data-theme="system"], :root:not([data-theme]) { color-scheme: light dark; } :root[data-theme="light"] { color-scheme: light; } @media (prefers-color-scheme: dark) { :root[data-theme="system"], :root:not([data-theme]) { color-scheme: dark; --paper: #131426; --paper2: #1A1B33; --paper3: #232444; --surface: #1E1F38; --border: #2E2F50; --border2: #3A3B66; --ink: #F0F0FA; --ink2: #D4D4E6; --ink3: #A8A9C5; --ink4: #8284A8; --ink5: #5E608A; --accent: #9B9CE0; --accent2: #B1B2EE; --accent-soft: #2E2F60; --accent-tint: #2D2E5C; --success: #3FB880; --success-soft: #1E3A2C; --warning: #EFA055; --warning-soft: #3A2A1A; --danger: #EC7878; --danger-soft: #3A1F1F; --info: #6E8FCC; --info-soft: #1F2A40; --on-accent: #131426; --on-danger: #131426; --scrim: rgba(0, 0, 0, 0.62); --shadow-1: 0 1px 2px rgba(0, 0, 0, 0.4); --shadow-2: 0 8px 28px rgba(0, 0, 0, 0.5); } } :root[data-theme="dark"] { color-scheme: dark; --paper: #131426; --paper2: #1A1B33; --paper3: #232444; --surface: #1E1F38; --border: #2E2F50; --border2: #3A3B66; --ink: #F0F0FA; --ink2: #D4D4E6; --ink3: #A8A9C5; --ink4: #8284A8; --ink5: #5E608A; --accent: #9B9CE0; --accent2: #B1B2EE; --accent-soft: #2E2F60; --accent-tint: #2D2E5C; --success: #3FB880; --success-soft: #1E3A2C; --warning: #EFA055; --warning-soft: #3A2A1A; --danger: #EC7878; --danger-soft: #3A1F1F; --info: #6E8FCC; --info-soft: #1F2A40; --on-accent: #131426; --on-danger: #131426; --scrim: rgba(0, 0, 0, 0.62); --shadow-1: 0 1px 2px rgba(0, 0, 0, 0.4); --shadow-2: 0 8px 28px rgba(0, 0, 0, 0.5); } /* ---- 2. Base + typography ----------------------------------------------- */ * { box-sizing: border-box; } [hidden] { display: none !important; } body { font-family: var(--font-ui); line-height: 1.6; color: var(--ink); background: var(--paper); margin: 0; padding: 2rem 1.25rem 4rem; -webkit-text-size-adjust: 100%; } main { max-width: 720px; margin: 0 auto; } h1 { font-size: 1.7rem; line-height: 1.25; margin: 0.5rem 0 0.25rem; letter-spacing: -0.01em; } h2 { font-size: 1.2rem; margin-top: 2rem; } a { color: var(--accent); } ul { padding-left: 1.25rem; } li { margin: 0.3rem 0; } code { font-family: var(--font-mono); background: var(--paper2); border: 1px solid var(--border); padding: 0.1rem 0.35rem; border-radius: 5px; font-size: 0.88em; } .muted { color: var(--ink3); } :focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; } /* Chess data — SAN, FEN, Elo, clocks, ratings — is monospaced everywhere so move lists and numbers stay column-aligned as they tick. */ .mono, .san, .fen, .elo, .clock, .rating, .move-list, .mv, .stat-num, .big-score, .bar-value, .streak-count, .coord { font-family: var(--font-mono); font-variant-numeric: tabular-nums; } /* ---- 3. Shell ------------------------------------------------------------ Rendered by nav.js: brand (Home) + the four practice modes + streak/account. The mode nav is a top nav on wide viewports and a fixed bottom bar on mobile — one markup, two layouts. Static navs (privacy/terms) use plain .site-nav and are unaffected. */ header.site { display: flex; align-items: center; justify-content: space-between; gap: 1rem; flex-wrap: wrap; margin-bottom: 1.75rem; } header.site a.brand { font-weight: 700; font-size: 1.1rem; color: var(--ink); text-decoration: none; } header.site a.brand-logo { display: inline-flex; align-items: center; gap: 0.5rem; } header.site a.brand-logo img { border-radius: 7px; } .site-nav { display: flex; gap: 0.3rem; flex-wrap: wrap; } .site-nav a { padding: 0.4rem 0.85rem; border-radius: 999px; text-decoration: none; color: var(--ink2); font-weight: 600; font-size: 0.95rem; } .site-nav a:hover { background: var(--paper2); color: var(--ink); } .site-nav a[aria-current="page"] { background: var(--accent-tint); color: var(--accent); } .site-nav a.nav-gear { padding: 0.4rem 0.6rem; font-size: 1.05rem; line-height: 1; } .mode-icon { display: none; } .site-actions { display: flex; align-items: center; gap: 0.15rem; } /* Daily-streak flame — lit while the streak is alive, dimmed at zero. Opens the Profile, where the full streak card lives. */ .streak { display: inline-flex; align-items: center; gap: 3px; padding: 6px 8px; border-radius: 999px; text-decoration: none; } .streak:hover { background: var(--paper2); } .streak-flame { font-size: 0.94rem; line-height: 1; opacity: 0.35; } .streak-count { font-size: 0.875rem; font-weight: 700; color: var(--ink3); line-height: 1; } .streak.is-lit .streak-flame { opacity: 1; } .streak.is-lit .streak-count { color: var(--ink); } /* Account avatar + menu (Profile / Settings live behind this, off the modes). */ .account { position: relative; } .avatar { display: inline-flex; align-items: center; justify-content: center; width: 34px; height: 34px; padding: 0; border: none; border-radius: 50%; background: var(--accent-tint); color: var(--accent); cursor: pointer; } .avatar:hover { background: var(--accent-soft); } .avatar svg { width: 19px; height: 19px; display: block; fill: currentColor; } .account-menu { position: absolute; right: 0; top: calc(100% + 6px); z-index: 30; min-width: 10.5rem; padding: 4px; background: var(--surface); border: 1px solid var(--border); border-radius: 12px; box-shadow: var(--shadow-2); } .account-menu a { display: block; padding: 0.5rem 0.75rem; border-radius: 8px; color: var(--ink); text-decoration: none; font-weight: 600; font-size: 0.95rem; } .account-menu a:hover, .account-menu a:focus-visible { background: var(--accent-tint); color: var(--accent); outline: none; } .account-menu a[aria-current="page"] { color: var(--accent); } /* ---- 4. Shared components ----------------------------------------------- */ /* Buttons */ /* Also used on anchors (a.btn), which is why it clears the underline itself: a button that reads as a link is a bug every page would otherwise re-fix. */ .btn { font: inherit; font-family: var(--font-ui); font-weight: 600; padding: 0.55rem 1.1rem; border-radius: 999px; cursor: pointer; border: 1px solid var(--border); background: var(--surface); color: var(--ink); text-decoration: none; } .btn:hover:not(:disabled) { border-color: var(--accent); } .btn:disabled { opacity: 0.45; cursor: default; } .btn-primary { background: var(--accent); border-color: var(--accent); color: var(--on-accent); } .btn-primary:hover:not(:disabled) { background: var(--accent2); border-color: var(--accent2); } .btn-danger { background: var(--danger); border-color: var(--danger); color: var(--on-danger); } .btn-danger:hover:not(:disabled) { border-color: var(--danger); filter: brightness(1.06); } .btn-row { display: flex; flex-wrap: wrap; gap: 0.5rem; margin: 0.75rem 0; } /* Card — the default surface for a block of content. .card-soft is the lavender-tinted variant used to call one out. */ .card { background: var(--surface); border: 1px solid var(--border); border-radius: 14px; padding: 1.1rem 1.25rem; margin: 0.75rem 0; } .card > :first-child { margin-top: 0; } .card > :last-child { margin-bottom: 0; } .card-soft { background: var(--accent-tint); border-color: transparent; } .card-head { display: flex; justify-content: space-between; align-items: baseline; gap: 0.5rem; flex-wrap: wrap; margin: 0 0 0.15rem; } .card-head strong { font-size: 1.05rem; } /* Stat tile */ .stat { flex: 1; background: var(--surface); border: 1px solid var(--border); border-radius: 12px; padding: 0.65rem 0.5rem; text-align: center; } .stat-num { display: block; font-size: 1.6rem; font-weight: 700; line-height: 1.1; color: var(--ink); } .stat-num.stat-sm { font-size: 1.05rem; padding-top: 0.35rem; } .stat-label { display: block; color: var(--ink3); font-size: 0.75rem; margin-top: 0.15rem; } .stat-row { display: flex; gap: 0.75rem; margin-bottom: 1rem; } .stat-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(7.5rem, 1fr)); gap: 0.75rem; margin: 0.5rem 0; } /* Pill — a soft status label. Badge — the same, smaller and louder, for counts and one-word states. Both take the -accent/-success/-warning/-danger/-info modifiers; bare is neutral. */ .pill, .badge { display: inline-flex; align-items: center; gap: 0.3rem; border-radius: 999px; background: var(--paper2); color: var(--ink2); font-weight: 600; white-space: nowrap; } .pill { padding: 0.2rem 0.65rem; font-size: 0.82rem; } .badge { padding: 0.1rem 0.5rem; font-size: 0.72rem; font-weight: 700; letter-spacing: 0.02em; } .pill-accent, .badge-accent { background: var(--accent-tint); color: var(--accent); } .pill-success, .badge-success { background: var(--success-soft); color: var(--success); } .pill-warning, .badge-warning { background: var(--warning-soft); color: var(--warning); } .pill-danger, .badge-danger { background: var(--danger-soft); color: var(--danger); } .pill-info, .badge-info { background: var(--info-soft); color: var(--info); } /* Segmented control — an inline switch between a few exclusive options. Selected reads as the accent tile (matching the nav indicator). */ .segmented { display: inline-flex; gap: 2px; padding: 3px; background: var(--paper2); border: 1px solid var(--border); border-radius: 999px; } .segmented button, .segmented a { font: inherit; font-family: var(--font-ui); font-weight: 600; font-size: 0.9rem; padding: 0.35rem 0.9rem; border: none; border-radius: 999px; cursor: pointer; background: transparent; color: var(--ink3); text-decoration: none; white-space: nowrap; } .segmented button:hover, .segmented a:hover { color: var(--ink); } .segmented .active, .segmented [aria-selected="true"], .segmented [aria-pressed="true"] { background: var(--accent-tint); color: var(--accent); } /* Tabs — the page-level mode switcher (Rated / Timed / Custom). */ .tabs { display: flex; gap: 0.4rem; justify-content: center; margin-bottom: 1.5rem; flex-wrap: wrap; } .tab { font: inherit; font-family: var(--font-ui); font-weight: 600; padding: 0.5rem 1.25rem; border-radius: 999px; cursor: pointer; border: 1px solid var(--border); background: var(--surface); color: var(--ink2); } .tab:hover { border-color: var(--accent); color: var(--ink); } .tab.active, .tab[aria-selected="true"] { background: var(--accent-tint); border-color: var(--accent); color: var(--accent); } /* Chip — a small toggleable filter (themes, colors, brackets). */ .chip { font: inherit; font-family: var(--font-ui); font-weight: 600; font-size: 0.85rem; display: inline-flex; align-items: center; gap: 0.3rem; padding: 0.3rem 0.75rem; border-radius: 999px; cursor: pointer; border: 1px solid var(--border); background: var(--surface); color: var(--ink2); text-decoration: none; } .chip:hover { border-color: var(--border2); color: var(--ink); } .chip.active, .chip[aria-pressed="true"] { background: var(--accent-tint); border-color: var(--accent); color: var(--accent); } .chip-row { display: flex; flex-wrap: wrap; gap: 0.4rem; } /* Range slider (playing strength, durations). Track/thumb need per-engine pseudo-elements; they can't be grouped in one selector list. */ .range { -webkit-appearance: none; appearance: none; width: 100%; height: 22px; margin: 0; padding: 0; background: transparent; accent-color: var(--accent); cursor: pointer; } .range::-webkit-slider-runnable-track { height: 6px; border-radius: 999px; background: var(--paper3); } .range::-webkit-slider-thumb { -webkit-appearance: none; appearance: none; width: 18px; height: 18px; margin-top: -6px; border-radius: 50%; background: var(--accent); border: 2px solid var(--surface); box-shadow: var(--shadow-1); } .range::-moz-range-track { height: 6px; border-radius: 999px; background: var(--paper3); } .range::-moz-range-thumb { width: 18px; height: 18px; border-radius: 50%; border: 2px solid var(--surface); background: var(--accent); box-shadow: var(--shadow-1); } .range:focus-visible { outline: none; } .range:focus-visible::-webkit-slider-thumb { box-shadow: 0 0 0 3px var(--accent-soft); } .range:focus-visible::-moz-range-thumb { box-shadow: 0 0 0 3px var(--accent-soft); } .range:disabled { opacity: 0.45; cursor: default; } /* Progress bar */ .pbar { height: 10px; border-radius: 999px; background: var(--paper3); overflow: hidden; } .pbar-fill { display: block; height: 100%; background: var(--accent); border-radius: 999px; } /* Bar chart — columns of .bar-col, each { .bar-value, .bar-track > .bar-fill, .bar-label }. Height comes from the container; .bar-fill sets its own % height. */ .bar-chart { display: flex; align-items: flex-end; gap: 0.4rem; height: 8rem; } .bar-col { flex: 1; height: 100%; min-width: 0; display: flex; flex-direction: column; align-items: center; justify-content: flex-end; gap: 0.3rem; } .bar-value { font-size: 0.7rem; color: var(--ink3); line-height: 1; } .bar-track { width: 100%; flex: 1; display: flex; align-items: flex-end; background: var(--paper2); border-radius: 6px; overflow: hidden; } .bar-fill { width: 100%; min-height: 3px; background: var(--accent); border-radius: 6px; } .bar-label { font-size: 0.7rem; color: var(--ink4); line-height: 1; } .bar-col.today .bar-fill { background: var(--accent2); } .bar-col.today .bar-label { color: var(--accent); font-weight: 700; } /* Empty state */ .empty-state { text-align: center; padding: 2rem 1.25rem; color: var(--ink3); background: var(--paper2); border: 1px dashed var(--border2); border-radius: 14px; } .empty-icon { display: block; font-size: 2rem; line-height: 1; margin-bottom: 0.6rem; opacity: 0.75; } .empty-state h3, .empty-state strong { color: var(--ink); font-size: 1.05rem; margin: 0; } .empty-state p { margin: 0.35rem 0 0; font-size: 0.95rem; } .empty-state .btn { margin-top: 0.9rem; } /* Toolbar — a compact strip of controls above a board or list. */ .toolbar { display: flex; align-items: center; gap: 0.5rem; flex-wrap: wrap; padding: 0.5rem 0.65rem; background: var(--paper2); border: 1px solid var(--border); border-radius: 12px; } .toolbar-title { font-weight: 700; font-size: 0.95rem; } .toolbar-spacer { flex: 1; } /* Sheet — a modal panel. .sheet-backdrop is the scrim; hide by putting the `hidden` attribute on it. Bottom-anchored on mobile, centered on desktop. */ .sheet-backdrop { position: fixed; inset: 0; z-index: 40; background: var(--scrim); display: flex; align-items: flex-end; justify-content: center; } .sheet { width: min(30rem, 100%); max-height: 85vh; overflow-y: auto; padding: 1rem 1.25rem calc(1.25rem + env(safe-area-inset-bottom)); background: var(--surface); border: 1px solid var(--border); border-radius: 18px 18px 0 0; box-shadow: var(--shadow-2); } .sheet-handle { width: 2.5rem; height: 4px; border-radius: 999px; background: var(--border2); margin: 0 auto 0.85rem; } .sheet-title { margin: 0 0 0.35rem; font-size: 1.15rem; } .sheet > :last-child { margin-bottom: 0; } @media (min-width: 760px) { .sheet-backdrop { align-items: center; } .sheet { border-radius: 18px; padding-bottom: 1.25rem; } } /* List row — a tappable line in a list (drills, folders, lines, games). */ .list-row { display: flex; align-items: center; gap: 0.75rem; width: 100%; font: inherit; font-family: var(--font-ui); text-align: left; text-decoration: none; padding: 0.8rem 1rem; color: var(--ink); background: var(--surface); border: 1px solid var(--border); border-radius: 12px; } .list-row + .list-row { margin-top: 0.5rem; } a.list-row, button.list-row { cursor: pointer; } a.list-row:hover, button.list-row:hover { border-color: var(--border2); background: var(--paper2); } .list-row-main { flex: 1; min-width: 0; } .list-row-title { display: block; font-weight: 600; } .list-row-sub { display: block; color: var(--ink3); font-size: 0.85rem; } .list-row-end { flex: none; color: var(--ink3); font-size: 0.9rem; } /* Status line — the shared inline feedback line under a board/form. */ .status-line { min-height: 1.5em; font-weight: 600; margin: 0.5rem 0; } .status-line.ok { color: var(--success); } .status-line.no { color: var(--danger); } /* Labelled select/input row */ .select-row { display: flex; flex-direction: column; gap: 0.35rem; margin: 0.75rem 0; } .select-row label { font-weight: 600; font-size: 0.9rem; } .select-row select, .select-row input { font: inherit; font-family: var(--font-ui); padding: 0.5rem 0.7rem; border-radius: 10px; border: 1px solid var(--border); background: var(--surface); color: var(--ink); } .select-row select:focus, .select-row input:focus { border-color: var(--accent); } /* ---- 5. Board ----------------------------------------------------------- Square colors come from --sq-light/--sq-dark, switched by data-board-theme on the board element (board.js/game-board.js set it from settings). */ [data-board-theme="wood"] { --sq-light: #F0D9B5; --sq-dark: #B58863; } [data-board-theme="lavender"] { --sq-light: #E8E5F5; --sq-dark: #9C9AC9; } [data-board-theme="green"] { --sq-light: #EEEED2; --sq-dark: #769656; } [data-board-theme="blue"] { --sq-light: #DEEDF6; --sq-dark: #7FA3C4; } [data-board-theme="grey"] { --sq-light: #E0E0E0; --sq-dark: #9E9E9E; } .board { position: relative; width: min(360px, 88vw); aspect-ratio: 1 / 1; display: grid; grid-template-columns: repeat(8, 1fr); grid-template-rows: repeat(8, 1fr); border-radius: 10px; overflow: hidden; box-shadow: var(--shadow-2); user-select: none; touch-action: manipulation; } .sq { display: flex; align-items: center; justify-content: center; cursor: pointer; position: relative; } .sq.light { background: var(--sq-light); } .sq.dark { background: var(--sq-dark); } .sq.last::after { content: ""; position: absolute; inset: 0; background: var(--last-move); } .sq.sel::after { content: ""; position: absolute; inset: 0; box-shadow: inset 0 0 0 3px var(--accent); } /* Checked king: a soft red disc behind the piece, 80% of the square. */ .sq.in-check::before { content: ""; position: absolute; left: 10%; top: 10%; width: 80%; height: 80%; border-radius: 50%; background: var(--check-ring); z-index: 0; } .piece { position: relative; z-index: 1; width: 86%; height: 86%; object-fit: contain; -webkit-user-drag: none; user-drag: none; pointer-events: none; filter: drop-shadow(0 1px 1px rgba(0, 0, 0, 0.28)); } /* Rank/file labels drawn in the squares along the board's left/bottom edges. They tint against their own square, so they read on either color. */ .coord { position: absolute; z-index: 2; pointer-events: none; font-size: clamp(7px, 1.6vw, 10px); font-weight: 700; line-height: 1; opacity: 0.72; } .coord-rank { top: 3%; left: 5%; } .coord-file { bottom: 3%; right: 6%; } .sq.light .coord { color: var(--sq-dark); } .sq.dark .coord { color: var(--sq-light); } /* Move hints + promotion picker (game-board.js). Opacity carries the alpha so the accent stays a token rather than a baked rgba(). */ .gb-dot { position: absolute; width: 30%; height: 30%; border-radius: 50%; background: var(--accent); opacity: 0.5; z-index: 2; pointer-events: none; } .gb-capture { position: absolute; inset: 6%; border-radius: 50%; z-index: 2; pointer-events: none; box-shadow: inset 0 0 0 4px var(--accent); opacity: 0.5; } .gb-promo { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; gap: 0.4rem; background: var(--scrim); z-index: 5; } .gb-promo button { width: 20%; aspect-ratio: 1/1; padding: 4%; border-radius: 10px; cursor: pointer; border: none; background: var(--surface); } .gb-promo button:hover { outline: 3px solid var(--accent); } .gb-promo img { width: 100%; height: 100%; object-fit: contain; } /* ---- 6. Pages ----------------------------------------------------------- */ /* Static docs (privacy/terms) */ .updated { color: var(--ink3); font-size: 0.9rem; margin-bottom: 1.5rem; } .summary { background: var(--surface); border: 1px solid var(--border); border-radius: 12px; padding: 1rem 1.25rem; margin: 1.5rem 0; } .summary p { margin: 0.35rem 0; } footer { margin-top: 3rem; padding-top: 1.5rem; border-top: 1px solid var(--border); color: var(--ink3); font-size: 0.9rem; } footer a { margin-right: 1rem; } .nav { margin: 1.5rem 0; } .nav a { display: inline-block; margin: 0.25rem 0.5rem 0.25rem 0; padding: 0.5rem 1rem; border: 1px solid var(--border); border-radius: 999px; text-decoration: none; } /* Landing */ .hero { text-align: center; margin: 1rem 0 2.5rem; } .hero-icon { border-radius: 20px; box-shadow: var(--shadow-2); } .hero h1 { font-size: 2rem; margin: 1.25rem 0 0.75rem; } .lede { color: var(--ink3); font-size: 1.08rem; max-width: 34rem; margin: 0 auto; } .hero-cta { margin: 1.5rem 0 0.5rem; } .hero-play { display: inline-block; text-decoration: none; font-size: 1.05rem; padding: 0.7rem 1.4rem; } /* Store badges — the landing's app-store tiles (not the .badge component). */ .store-badges { display: flex; flex-wrap: wrap; gap: 0.75rem; justify-content: center; margin: 1.75rem 0 0.5rem; } .store-badge { display: inline-flex; flex-direction: column; align-items: flex-start; justify-content: center; min-width: 9.5rem; padding: 0.55rem 1.1rem; border: 1px solid var(--border); border-radius: 12px; background: var(--surface); color: var(--ink); text-decoration: none; } .store-badge strong { font-size: 1.05rem; line-height: 1.2; } .store-badge small { color: var(--ink3); font-size: 0.75rem; } .store-badge-soon { opacity: 0.7; cursor: default; } .hero-note { color: var(--ink3); font-size: 0.9rem; margin-top: 0.5rem; } .features { display: grid; grid-template-columns: repeat(2, 1fr); gap: 1rem; margin: 2.5rem 0; } .feature { background: var(--surface); border: 1px solid var(--border); border-radius: 14px; padding: 1.1rem 1.25rem; } .feature h3 { margin: 0 0 0.4rem; font-size: 1.05rem; } .feature p { margin: 0; color: var(--ink3); font-size: 0.95rem; } @media (max-width: 560px) { .features { grid-template-columns: 1fr; } .hero h1 { font-size: 1.7rem; } } .strip { background: var(--accent-tint); border: 1px solid var(--border); border-radius: 14px; padding: 1.25rem 1.5rem; margin: 2.5rem 0; text-align: center; } .strip p { margin: 0; } .follow { text-align: center; margin: 2.5rem 0; } .follow h2 { margin-top: 0; } footer .nav { justify-content: center; } .fineprint { margin: 0.5rem 0 0; } /* Daily puzzle (landing) */ .daily { margin: 3rem 0; } .daily h2 { text-align: center; margin-bottom: 1.25rem; } .puzzle-wrap { display: flex; flex-wrap: wrap; gap: 1.5rem; align-items: center; justify-content: center; } .puzzle-side { max-width: 20rem; } .puzzle-prompt { font-weight: 600; margin: 0 0 0.4rem; } .puzzle-status { min-height: 1.4em; margin: 0 0 0.75rem; font-size: 0.95rem; } .puzzle-status.ok { color: var(--success); font-weight: 600; } .puzzle-status.no { color: var(--danger); } .puzzle-status.hint { color: var(--ink3); } .puzzle-controls { display: flex; flex-wrap: wrap; gap: 0.5rem; margin-bottom: 0.75rem; } .puzzle-controls button { font: inherit; font-family: var(--font-ui); padding: 0.45rem 0.9rem; border-radius: 999px; border: 1px solid var(--border); background: var(--surface); color: var(--ink); cursor: pointer; } .puzzle-controls button:hover:not(:disabled) { border-color: var(--accent); } .puzzle-controls button:disabled { opacity: 0.45; cursor: default; } .puzzle-meta { color: var(--ink3); font-size: 0.85rem; margin: 0 0 0.5rem; } .puzzle-cta { color: var(--ink3); font-size: 0.9rem; margin: 0; } .puzzle-more { margin: 0.6rem 0 0; font-size: 0.95rem; } .puzzle-more a { font-weight: 600; text-decoration: none; } /* Puzzle trainer (/puzzles) */ .trainer-title { text-align: center; margin-bottom: 0.35rem; } .trainer-sub { text-align: center; color: var(--ink3); margin: 0 auto 1.5rem; max-width: 32rem; } .trainer-wrap { display: flex; flex-wrap: wrap; gap: 1.75rem; align-items: flex-start; justify-content: center; } .trainer-side { flex: 1 1 15rem; max-width: 20rem; min-width: 14rem; } .mode-title { margin: 0 0 0.35rem; } .mode-desc { color: var(--ink3); margin: 0 0 1rem; font-size: 0.95rem; } .choices { display: flex; flex-wrap: wrap; gap: 0.5rem; margin: 0.5rem 0 1rem; } .choices-col { flex-direction: column; } .choices button { font: inherit; font-family: var(--font-ui); padding: 0.6rem 1rem; border-radius: 10px; cursor: pointer; border: 1px solid var(--border); background: var(--surface); color: var(--ink); text-align: left; } .choices button:hover { border-color: var(--accent); } .choices:not(.choices-col) button { flex: 1; text-align: center; min-width: 4.5rem; } .big-score { font-size: 1.15rem; margin: 0.5rem 0; } .best-note { color: var(--ink3); font-size: 0.9rem; margin: 0.5rem 0 0; min-height: 1.2em; } .trainer-foot { text-align: center; margin-top: 2.5rem; } .trainer-foot a { text-decoration: none; } @media (max-width: 560px) { .trainer-side { max-width: none; } } /* Compact the trainer so the board + controls fit without scrolling on desktop. The board shrinks with viewport height (vh) on shorter screens. */ body.page-trainer { padding-top: 1.25rem; padding-bottom: 1.5rem; } .page-trainer header.site { margin-bottom: 1.1rem; } .page-trainer .trainer-title { font-size: 1.5rem; margin: 0.2rem 0 0.15rem; } .page-trainer .trainer-sub { margin: 0 auto 0.9rem; font-size: 0.9rem; } .page-trainer .tabs { margin-bottom: 1rem; } .page-trainer .board { width: min(360px, 90vw, 50vh); } .page-trainer .trainer-foot { margin-top: 1.25rem; } /* App screens: centered board + side panel. */ .app-wrap { display: flex; flex-wrap: wrap; gap: 1.75rem; align-items: flex-start; justify-content: center; } .app-board { width: min(420px, 92vw, 60vh); } .app-board .board { width: 100%; } .app-side { flex: 1 1 16rem; max-width: 22rem; min-width: 14rem; } .app-title { text-align: center; margin: 0.2rem 0 0.15rem; } .app-sub { text-align: center; color: var(--ink3); margin: 0 auto 1.25rem; max-width: 34rem; } .move-list { background: var(--surface); border: 1px solid var(--border); border-radius: 10px; padding: 0.6rem 0.8rem; max-height: 11rem; overflow-y: auto; font-size: 0.95rem; line-height: 1.7; } .move-list .mv { cursor: default; } /* ---- Mobile bottom bar -------------------------------------------------- Last in the file on purpose: it has to beat the per-page padding-bottom above (e.g. body.page-trainer), which carries the same specificity. */ @media (max-width: 760px) { .site-nav a { padding: 0.35rem 0.7rem; font-size: 0.9rem; } .mode-nav { position: fixed; left: 0; right: 0; bottom: 0; z-index: 20; display: flex; flex-wrap: nowrap; gap: 0; padding: 0.3rem 0.25rem calc(0.3rem + env(safe-area-inset-bottom)); background: var(--paper); border-top: 1px solid var(--border); } .mode-nav a { flex: 1; min-width: 0; display: flex; flex-direction: column; align-items: center; gap: 2px; padding: 0.35rem 0.2rem; border-radius: 12px; font-size: 0.7rem; color: var(--ink3); } .mode-nav a:hover { background: none; color: var(--ink3); } .mode-nav a[aria-current="page"] { background: none; color: var(--accent); } .mode-nav .mode-icon { display: flex; align-items: center; justify-content: center; width: 3.25rem; height: 1.7rem; border-radius: 999px; font-size: 1.05rem; line-height: 1; } .mode-nav a[aria-current="page"] .mode-icon { background: var(--accent-tint); } /* The bar is fixed, so the page needs room to scroll clear of it. */ body.has-bottom-nav { padding-bottom: calc(4.75rem + env(safe-area-inset-bottom)); } }