/* Rank Anything — design system. Extends the Big Board aesthetic (dark, DM Sans/DM Mono, cyan accent, radial glow) into the generic app. */ [data-theme="dark"] { --bg: #0d1017; --bg-soft: #111620; --panel: #141923; --panel-strong: #1a2030; --text: #edf1f7; --muted: #8a96b0; --accent: #38bdf8; --accent-strong: #0ea5e9; --accent-tint: rgba(56, 189, 248, 0.12); /* Primary-action pair: 8.7:1 on dark (axe AA gate) */ --accent-btn-bg: #38bdf8; --on-accent: #0b1220; --border: #2e3d58; --shadow: rgba(0, 0, 0, 0.4); --danger: #f87171; --success: #34d399; --amber: #f59e0b; --amber-tint: rgba(245, 158, 11, 0.15); --cat-1: #f87171; --cat-2: #34d399; --cat-3: #60a5fa; --cat-4: #fb923c; --cat-5: #a78bfa; --cat-6: #f472b6; --cat-7: #facc15; --cat-8: #2dd4bf; --r-sm: 6px; --r-lg: 12px; } [data-theme="light"] { --bg: #f0f4f8; --bg-soft: #e8edf3; --panel: #ffffff; --panel-strong: #f5f8fb; --text: #1a2233; --muted: #5a6780; --accent: #0284c7; --accent-strong: #0369a1; --accent-tint: rgba(2, 132, 199, 0.10); /* Primary-action pair: 5.9:1 on light (axe AA gate) */ --accent-btn-bg: #0369a1; --on-accent: #ffffff; --border: #d1d9e6; --shadow: rgba(0, 0, 0, 0.12); --danger: #dc2626; --success: #059669; --amber: #d97706; --amber-tint: rgba(217, 119, 6, 0.12); --cat-1: #dc2626; --cat-2: #059669; --cat-3: #2563eb; --cat-4: #ea580c; --cat-5: #7c3aed; --cat-6: #db2777; --cat-7: #ca8a04; --cat-8: #0d9488; --r-sm: 6px; --r-lg: 12px; } * { box-sizing: border-box; } body { margin: 0; font-family: "DM Sans", sans-serif; color: var(--text); background: var(--bg); min-height: 100vh; } [data-theme="dark"] body { background: radial-gradient(1200px 500px at 15% -10%, rgba(56, 189, 248, 0.14), transparent 60%), radial-gradient(900px 400px at 100% 0%, rgba(52, 211, 153, 0.09), transparent 55%), linear-gradient(160deg, #0b0e14 0%, #0d1017 60%, #0f1220 100%); background-attachment: fixed; } .shell { max-width: 980px; margin: 0 auto; padding: 24px 20px 80px; } /* === ad slots === Hidden unless — set either by ?ads=preview (a dry-run so the clutter can be judged before committing to ads) or, later, by the real ad bootstrap. Sizes are the actual AdSense units that would run here, so the preview is honest about the space they take: 728x90 leaderboard / 320x100 mobile banner / 320x50 sticky anchor. */ .ad-slot { display: none; } [data-ads="on"] .ad-slot { display: flex; align-items: center; justify-content: center; background: var(--panel); border: 1px dashed var(--border); border-radius: var(--r-sm); color: var(--muted); font: 500 10px "DM Mono", monospace; letter-spacing: 0.12em; text-transform: uppercase; } [data-ads="on"] .ad-leaderboard { width: 100%; max-width: 728px; height: 90px; margin: 0 auto 18px; } [data-ads="on"] .ad-rectangle { width: 100%; max-width: 336px; height: 280px; margin: 22px auto 0; } /* The sticky anchor is the one that actually costs you screen: it never scrolls away. Shown at phone widths, where it hurts most. */ [data-ads="on"] .ad-anchor { position: fixed; left: 0; right: 0; bottom: 0; height: 50px; z-index: 40; border-radius: 0; border-left: 0; border-right: 0; border-bottom: 0; } [data-ads="on"] body { padding-bottom: 50px; } @media (min-width: 601px) { [data-ads="on"] .ad-anchor { display: none; } [data-ads="on"] body { padding-bottom: 0; } } @media (max-width: 600px) { [data-ads="on"] .ad-leaderboard { max-width: 320px; height: 100px; } } /* === header / toolbar === */ .masthead { display: flex; align-items: baseline; justify-content: space-between; gap: 16px; flex-wrap: wrap; margin-bottom: 8px; } .wordmark { font-weight: 700; font-size: 15px; letter-spacing: 0.02em; color: var(--text); text-decoration: none; } .wordmark .tick { color: var(--accent); } .board-title { font-size: 24px; font-weight: 700; margin: 6px 0 2px; } .board-subtitle { color: var(--muted); font-size: 13px; margin: 0 0 16px; } .toolbar { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; padding: 10px; background: var(--panel); border: 1px solid var(--border); border-radius: var(--r-lg); margin-bottom: 14px; } .toolbar .spacer { flex: 1; } .btn { font: 500 13px "DM Sans", sans-serif; color: var(--text); background: var(--panel-strong); border: 1px solid var(--border); border-radius: var(--r-sm); padding: 7px 12px; cursor: pointer; transition: border-color 160ms ease, background 160ms ease; } .btn:hover { border-color: var(--accent); } .btn:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; } .btn.primary { background: var(--accent-btn-bg); border-color: var(--accent-btn-bg); color: var(--on-accent); font-weight: 600; } .btn:disabled { opacity: 0.45; cursor: default; } .view-switch { display: inline-flex; border: 1px solid var(--border); border-radius: var(--r-sm); overflow: hidden; } .view-switch .btn { border: 0; border-radius: 0; background: transparent; } .view-switch .btn[aria-pressed="true"] { background: var(--accent-tint); color: var(--accent); } .search-input { font: 400 13px "DM Sans", sans-serif; color: var(--text); background: var(--bg-soft); border: 1px solid var(--border); border-radius: var(--r-sm); padding: 7px 10px; min-width: 170px; } .search-input:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; } .sort-select { font: 400 13px "DM Sans", sans-serif; color: var(--text); background: var(--bg-soft); border: 1px solid var(--border); border-radius: var(--r-sm); padding: 7px 10px; } .sort-select:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; } .filter-bar { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 14px; } .filter-chip { font: 500 12px "DM Sans", sans-serif; color: var(--muted); background: var(--panel); border: 1px solid var(--border); border-radius: 999px; padding: 5px 12px; cursor: pointer; } .filter-chip[aria-pressed="true"] { color: var(--accent); border-color: var(--accent); background: var(--accent-tint); } /* === board table === */ .board-table { width: 100%; border-collapse: collapse; background: var(--panel); border: 1px solid var(--border); border-radius: var(--r-lg); overflow: hidden; } .board-table th { text-align: left; font: 600 11px "DM Mono", monospace; text-transform: uppercase; letter-spacing: 0.08em; color: var(--muted); padding: 10px 12px; border-bottom: 1px solid var(--border); background: var(--panel-strong); } .board-table td { padding: 8px 12px; border-bottom: 1px solid var(--border); font-size: 14px; } .item-row { cursor: grab; } .item-row:focus-visible { outline: 2px solid var(--accent); outline-offset: -2px; } .item-row.kb-lifted { outline: 2px solid var(--accent); outline-offset: -2px; background: var(--accent-tint); } .item-row.drop-before td { border-top: 2px solid var(--accent); } .item-row.drop-after td { border-bottom: 2px solid var(--accent); } .item-row.starred .item-name { font-weight: 700; } .col-rank { font-family: "DM Mono", monospace; color: var(--muted); width: 46px; } .col-num { font-family: "DM Mono", monospace; color: var(--muted); } .col-actions { text-align: right; width: 108px; white-space: nowrap; } .icon-btn { font-size: 14px; background: transparent; color: var(--muted); border: 0; cursor: pointer; padding: 2px 6px; border-radius: var(--r-sm); } .icon-btn:hover { color: var(--text); background: var(--panel-strong); } .icon-btn:focus-visible { outline: 2px solid var(--accent); } .icon-btn.danger:hover { color: var(--danger); } .icon-btn[aria-pressed="true"] { color: var(--amber); } .enum-badge { font: 600 11px "DM Mono", monospace; color: var(--badge-color); border: 1px solid var(--badge-color); border-radius: 999px; padding: 2px 8px; white-space: nowrap; } .note-dot { display: inline-block; width: 6px; height: 6px; border-radius: 50%; background: var(--accent); margin-left: 8px; vertical-align: middle; } .tier-btn { font: 600 12px "DM Mono", monospace; color: var(--amber); background: transparent; border: 1px dashed var(--amber); border-radius: var(--r-sm); width: 20px; height: 20px; line-height: 1; cursor: pointer; margin-right: 8px; opacity: 0; transition: opacity 160ms ease; } .item-row:hover .tier-btn, .item-row:focus-within .tier-btn { opacity: 1; } .tier-btn:focus-visible { opacity: 1; outline: 2px solid var(--amber); } .tier-row td { background: var(--amber-tint); padding: 4px 12px; } .tier-label { font: 600 12px "DM Mono", monospace; text-transform: uppercase; letter-spacing: 0.06em; color: var(--amber); background: transparent; border: 0; width: 100%; } .tier-label:focus-visible { outline: 1px solid var(--amber); } /* === tier grid view === */ .tier-grid { display: flex; flex-direction: column; gap: 10px; } .tier-lane { display: grid; grid-template-columns: 110px 1fr; background: var(--panel); border: 1px solid var(--border); border-radius: var(--r-lg); overflow: hidden; } .tier-lane-label { font: 600 12px "DM Mono", monospace; text-transform: uppercase; letter-spacing: 0.06em; color: var(--amber); background: var(--amber-tint); padding: 14px 12px; display: flex; align-items: center; } .tier-lane-chips { display: flex; flex-wrap: wrap; gap: 8px; padding: 12px; min-height: 52px; } .chip { font: 500 13px "DM Sans", sans-serif; color: var(--text); background: var(--panel-strong); border: 1px solid var(--badge-color, var(--border)); border-radius: 999px; padding: 6px 12px; cursor: grab; display: inline-flex; align-items: center; gap: 8px; } .chip:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; } .chip.kb-lifted { outline: 2px solid var(--accent); background: var(--accent-tint); } .chip-rank { font: 500 11px "DM Mono", monospace; color: var(--muted); } .view-hint { color: var(--muted); font-size: 12px; margin-top: 12px; } /* === pairwise === */ .duel { display: grid; grid-template-columns: 1fr 56px 1fr; align-items: stretch; gap: 12px; margin: 28px 0; } .duel-card { font: 600 20px "DM Sans", sans-serif; color: var(--text); background: var(--panel); border: 1px solid var(--border); border-radius: var(--r-lg); padding: 44px 24px; cursor: pointer; text-align: center; transition: border-color 160ms ease, transform 160ms ease; } .duel-card:hover { border-color: var(--accent); transform: translateY(-2px); } .duel-card:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; } .duel-vs { display: flex; align-items: center; justify-content: center; font: 700 14px "DM Mono", monospace; color: var(--muted); } .progress-track { height: 6px; background: var(--panel-strong); border-radius: 999px; overflow: hidden; margin: 16px 0; } .progress-fill { height: 100%; background: var(--accent); border-radius: 999px; transition: width 200ms ease; } .pairwise-result-list { list-style: none; margin: 16px 0; padding: 0; counter-reset: pw; } .pairwise-result-list li { counter-increment: pw; background: var(--panel); border: 1px solid var(--border); border-radius: var(--r-sm); padding: 9px 14px; margin-bottom: 6px; font-size: 14px; } .pairwise-result-list li::before { content: counter(pw); font: 500 12px "DM Mono", monospace; color: var(--muted); display: inline-block; width: 32px; } /* === home / gallery === */ .hero { margin: 40px 0 28px; } .hero h1 { font-size: 34px; font-weight: 700; margin: 0 0 8px; letter-spacing: -0.01em; } .hero p { color: var(--muted); font-size: 15px; margin: 0; } .paste-panel { background: var(--panel); border: 1px solid var(--border); border-radius: var(--r-lg); padding: 16px; margin: 20px 0 36px; } .paste-panel textarea { width: 100%; min-height: 130px; font: 400 14px "DM Mono", monospace; color: var(--text); background: var(--bg-soft); border: 1px solid var(--border); border-radius: var(--r-sm); padding: 12px; resize: vertical; } .paste-panel textarea:focus-visible { outline: 2px solid var(--accent); } .paste-actions { display: flex; justify-content: space-between; align-items: center; margin-top: 10px; gap: 12px; } .paste-hint { color: var(--muted); font-size: 12px; } .gallery { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 12px; } .gallery-card { display: block; text-decoration: none; color: var(--text); background: var(--panel); border: 1px solid var(--border); border-radius: var(--r-lg); padding: 16px; transition: border-color 160ms ease, transform 160ms ease; } .gallery-card:hover { border-color: var(--accent); transform: translateY(-2px); } .gallery-card:focus-visible { outline: 2px solid var(--accent); } .gallery-card h3 { margin: 0 0 4px; font-size: 15px; } .gallery-card p { margin: 0 0 10px; color: var(--muted); font-size: 12.5px; line-height: 1.45; } .gallery-card .meta { font: 500 11px "DM Mono", monospace; color: var(--muted); text-transform: uppercase; letter-spacing: 0.06em; } .gallery-card .meta .count { color: var(--accent); } .section-label { font: 600 12px "DM Mono", monospace; text-transform: uppercase; letter-spacing: 0.1em; color: var(--muted); margin: 30px 0 12px; } /* === shared bits === */ .empty-state { color: var(--muted); text-align: center; padding: 48px 20px; background: var(--panel); border: 1px dashed var(--border); border-radius: var(--r-lg); } .toast { position: fixed; bottom: 20px; right: 20px; background: var(--panel-strong); color: var(--muted); font-size: 12px; padding: 8px 14px; border-radius: var(--r-sm); border: 1px solid var(--border); opacity: 0; transform: translateY(6px); transition: opacity 200ms ease, transform 200ms ease; pointer-events: none; z-index: 9999; } .toast.visible { opacity: 1; transform: translateY(0); } .banner { display: none; background: var(--accent-tint); border: 1px solid var(--accent); color: var(--text); font-size: 13px; border-radius: var(--r-sm); padding: 9px 12px; margin-bottom: 12px; } .banner.active { display: block; } .sr-only { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; } dialog.note-dialog { background: var(--panel); color: var(--text); border: 1px solid var(--border); border-radius: var(--r-lg); padding: 18px; width: min(420px, 90vw); } dialog.note-dialog::backdrop { background: rgba(0, 0, 0, 0.55); } dialog.note-dialog textarea { width: 100%; min-height: 90px; font: 400 13px "DM Sans", sans-serif; color: var(--text); background: var(--bg-soft); border: 1px solid var(--border); border-radius: var(--r-sm); padding: 10px; } .dialog-actions { display: flex; justify-content: flex-end; gap: 8px; margin-top: 12px; } .site-footer { margin-top: 48px; color: var(--muted); font-size: 12px; display: flex; gap: 16px; flex-wrap: wrap; } .site-footer a { color: var(--muted); } /* embed */ body.embed { background: var(--bg); } .embed .shell { padding: 12px; max-width: none; } .embed-cta { display: inline-block; margin-top: 10px; font-size: 12px; color: var(--accent); } /* Drag handle: the touch-drag grab point (touch reorder is gated to it so a plain swipe still scrolls). Also a useful desktop affordance. */ .drag-handle { background: none; border: 0; color: var(--muted); cursor: grab; font-size: 15px; line-height: 1; padding: 4px 6px; touch-action: none; } .drag-handle:disabled { opacity: 0.3; cursor: default; } .drag-handle:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; } @media (max-width: 640px) { .duel { grid-template-columns: 1fr; } .duel-vs { padding: 4px 0; } .tier-lane { grid-template-columns: 1fr; } .tier-lane-label { padding: 8px 12px; } } /* Desktop hides the mobile "more" affordance; every field is a column there. */ .col-more { display: none; } .more-dialog .more-attrs { margin: 0 0 14px; } .more-attr { display: flex; justify-content: space-between; gap: 12px; padding: 7px 0; border-bottom: 1px solid var(--border); } .more-attr dt { color: var(--muted); font-size: 12px; text-transform: uppercase; letter-spacing: 0.04em; } .more-attr dd { margin: 0; font-size: 14px; } .more-actions { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; } .more-actions .btn { min-height: 44px; } .btn.danger { color: var(--danger, #f87171); border-color: var(--danger, #f87171); } /* Phone: keep rows to ONE dense line so the list stays scannable — the same pattern the frozen football board settled on (Entries 010-011). Attribute columns and secondary actions move into the more-actions sheet rather than stacking inline, which is what made the earlier card layout cluttered: every schema field added another visible line per row (fantasy-football has four, so rows were ~4x taller than they needed to be). Row is: [⋮ more] [rank] [★] [name + badge] [⣿ drag]. */ @media (max-width: 600px) { .shell, .board-table { min-width: 0; } .board-table thead { display: none; } .board-table, .board-table tbody, .board-table tr, .board-table td { display: block; width: auto; } .board-table tr.item-row { display: flex; align-items: center; gap: 2px; padding: 2px 6px; border-bottom: 1px solid var(--border); } .board-table td { border-bottom: 0; padding: 0; } .item-row.drop-before { border-top: 2px solid var(--accent); } .item-row.drop-after { border-bottom: 2px solid var(--accent); } .item-row.drop-before td, .item-row.drop-after td { border: 0; } .col-more { display: block; flex: 0 0 auto; } .board-table tr.item-row > .col-rank { flex: 0 0 auto; min-width: 22px; text-align: right; font-size: 14px; } .board-table tr.item-row > td:nth-child(3) { flex: 0 0 auto; } /* star */ .board-table tr.item-row > .col-name { flex: 1 1 auto; min-width: 0; display: flex; align-items: center; gap: 6px; font-size: 14px; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .board-table tr.item-row > .col-name .item-name { overflow: hidden; text-overflow: ellipsis; } /* The primary enum (position/category) stays inline as a badge — it's the one attribute worth scanning without opening anything. Everything else lives in the sheet. */ .board-table tr.item-row > td:has(.enum-badge) { flex: 0 0 auto; display: block; } .board-table tr.item-row > td[data-label]:not(:has(.enum-badge)) { display: none; } .board-table tr.item-row > .col-actions { flex: 0 0 auto; display: flex; align-items: center; width: auto; } /* Note/delete/tier move into the sheet; the handle stays for touch drag. */ .col-actions .icon-btn { display: none; } .tier-btn { display: none; } .icon-btn, .drag-handle, .more-btn { min-width: 44px; min-height: 44px; display: inline-flex; align-items: center; justify-content: center; } .col-actions .drag-handle { display: inline-flex; } .board-table tr.tier-row { display: block; padding: 0; } .board-table tr.tier-row td { display: block; width: auto; } .toolbar .btn, .toolbar select, .toolbar input, .filter-chip { min-height: 44px; } .filter-chip { min-width: 44px; } .search-input, .sort-select { font-size: 16px; } /* no iOS zoom-on-focus */ } @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: 0.01ms !important; transition-duration: 0.01ms !important; } }