/* GENERATED from ds/src/components.css by ds/scripts/sync-site-css.mjs — DO NOT EDIT. Edit the design system source and run `make site-css`. */ /* ===================================================================== Swingelo design-system component styles — THE SINGLE SOURCE. Consumed by both the design system (Claude Design) and the live site (site/components.css is generated from this file). Tokens come from tokens.css. Keep this file the source of truth for component visuals; app-shell layout (header, footer, hero, profile scaffolding) lives in site/style.css. ===================================================================== */ @keyframes fadeUp { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } } /* Root wrapper / "provider" for standalone use (design system previews). The live site sets the surface on instead, so .swds-root is harmless there. */ .swds-root { position: relative; background: var(--bg); color: var(--ink); font-family: var(--font-body); font-size: 15px; line-height: 1.5; -webkit-font-smoothing: antialiased; } .swds-root::before { content: ""; position: absolute; inset: 0; pointer-events: none; background: var(--veil); } .swds-root > * { position: relative; } .swds-root *, .swds-root *::before, .swds-root *::after { box-sizing: border-box; } .swds-mono { font-family: var(--font-mono); font-variant-numeric: tabular-nums; } /* ---- eyebrow (hero + section labels) ---- */ .eyebrow { font-family: var(--font-mono); font-size: 12px; letter-spacing: 0.16em; text-transform: uppercase; color: var(--accent); margin-bottom: 14px; } /* ---- stat tile ---- */ .stat-tile { background: var(--bg-card); border: 1px solid var(--border); border-radius: 14px; padding: 18px 20px; } .stat-value { font-family: var(--font-display); font-weight: 800; font-size: 30px; line-height: 1; font-variant-numeric: tabular-nums; } .stat-label { font-size: 12.5px; color: var(--muted); margin-top: 7px; letter-spacing: 0.02em; } /* ---- toggle ---- */ .toggle { display: flex; gap: 6px; background: var(--bg-card); border: 1px solid rgba(246, 239, 228, 0.1); border-radius: 11px; padding: 4px; } .toggle-btn { padding: 7px 14px; border-radius: 8px; border: none; cursor: pointer; font-weight: 600; font-size: 13px; background: transparent; color: var(--ink-2); } .toggle-btn.active { background: var(--accent); color: var(--bg); } /* ---- cards / panels ---- */ .panel, .card { background: var(--bg-card-2); border: 1px solid var(--border); border-radius: var(--radius); padding: 24px; margin-bottom: 16px; animation: fadeUp 0.4s ease both; } .panel-title { font-family: var(--font-display); font-weight: 800; font-size: 18px; margin: 0; color: var(--ink); } .panel-sub { font-size: 13px; line-height: 1.5; color: var(--muted); margin: 5px 0 0; } .card-points { background: linear-gradient(155deg, #241d15, #1a150f); border-color: rgba(255, 106, 61, 0.22); } .card-moves { background: linear-gradient(155deg, #1f1a13, #191712); border-color: rgba(70, 199, 192, 0.22); } /* ---- level badge ---- */ .level-badge { display: inline-block; font-family: var(--font-mono); font-size: 12px; font-weight: 600; padding: 4px 10px; border-radius: 999px; } /* ---- avatars ---- */ .avatar { width: 34px; height: 34px; flex: none; border-radius: 9px; display: flex; align-items: center; justify-content: center; font-family: var(--font-display); font-weight: 700; font-size: 13px; color: var(--bg); } .avatar-sm { width: 30px; height: 30px; border-radius: 8px; font-size: 12px; } .avatar-lg { width: 48px; height: 48px; border-radius: 13px; font-size: 18px; font-weight: 800; } .avatar-xl { width: 72px; height: 72px; border-radius: 18px; font-size: 28px; font-weight: 800; } /* ---- the field beeswarm ---- */ .legend { display: flex; gap: 13px; flex-wrap: wrap; font-family: var(--font-mono); font-size: 11px; color: var(--ink-2); } .legend-item { display: inline-flex; align-items: center; gap: 5px; } .legend-dot { width: 9px; height: 9px; border-radius: 50%; } .field-svg { display: block; overflow: visible; margin-top: 6px; } .field-tick { font-family: var(--font-mono); font-size: 13px; fill: var(--muted-2); } .field-dot { cursor: pointer; transition: opacity 0.12s; } .field-dot:hover { opacity: 0.55; } /* ---- podium card ---- */ .podium-card { text-align: left; cursor: pointer; background: linear-gradient(160deg, #241d15, #1a150f); border: 1px solid var(--border-2); border-radius: var(--radius); padding: 22px; position: relative; overflow: hidden; } .podium-card.is-first { border-color: rgba(255, 106, 61, 0.4); } .podium-card:hover { border-color: rgba(255, 106, 61, 0.5); } .podium-rank-ghost { position: absolute; top: -18px; right: 6px; font-family: var(--font-display); font-weight: 900; font-size: 120px; line-height: 1; color: rgba(246, 239, 228, 0.04); pointer-events: none; } .podium-name { font-family: var(--font-display); font-weight: 800; font-size: 21px; margin: 16px 0 3px; } .podium-level { font-family: var(--font-mono); font-size: 12px; margin-bottom: 16px; } .podium-score-row { display: flex; align-items: baseline; gap: 8px; } .podium-score { font-family: var(--font-display); font-weight: 900; font-size: 34px; } .podium-score-label { font-size: 12px; color: var(--muted); } .podium-meta { display: flex; gap: 16px; margin-top: 14px; font-family: var(--font-mono); font-size: 12px; color: var(--ink-2); } /* ---- riser card ---- */ .rise-card { text-align: left; cursor: pointer; background: var(--bg-card); border: 1px solid var(--border); border-radius: 14px; padding: 16px; } .rise-card:hover { border-color: rgba(70, 199, 192, 0.4); } .rise-card-top { display: flex; align-items: center; justify-content: space-between; } .rise-delta { font-family: var(--font-mono); font-size: 13px; font-weight: 600; color: var(--up); } .rise-delta-unit { color: var(--muted-2); font-weight: 500; font-size: 10.5px; } .rise-name { font-weight: 600; font-size: 14.5px; margin: 12px 0 2px; } .rise-level { font-family: var(--font-mono); font-size: 11.5px; } .spark { margin-top: 11px; display: block; } /* ---- division pyramid ---- */ .pyramid { display: flex; flex-direction: column; gap: 11px; margin-top: 18px; } .pyramid-row { display: flex; align-items: center; gap: 12px; } .pyramid-label { width: 96px; font-size: 13px; } .pyramid-track { flex: 1; height: 15px; border-radius: 5px; background: rgba(246, 239, 228, 0.05); overflow: hidden; } .pyramid-fill { display: block; height: 100%; border-radius: 5px; animation: fadeUp 0.5s ease both; } .pyramid-count { width: 52px; text-align: right; font-family: var(--font-mono); font-size: 13px; color: var(--ink-2); } /* ---- leaderboard row ---- */ .pill { padding: 7px 14px; border-radius: 999px; cursor: pointer; font-family: var(--font-mono); font-size: 12.5px; font-weight: 500; background: transparent; color: var(--ink-2); border: 1px solid var(--border-2); } .lb-row { width: 100%; display: grid; grid-template-columns: 52px 1fr 230px 86px 78px 96px; gap: 10px; align-items: center; padding: 13px 22px; background: none; border: none; border-bottom: 1px solid var(--border); cursor: pointer; text-align: left; color: var(--ink); } .lb-row:last-child { border-bottom: none; } button.lb-row:hover { background: var(--bg-hover); } .lb-rank { font-family: var(--font-display); font-weight: 800; font-size: 17px; } .lb-id { display: flex; align-items: center; gap: 12px; min-width: 0; } .lb-id-text { display: flex; flex-direction: column; gap: 2px; min-width: 0; } .lb-name { font-weight: 600; font-size: 15px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .lb-level { font-family: var(--font-mono); font-size: 11.5px; } .lb-bar-wrap { display: flex; align-items: center; gap: 10px; } .lb-bar { flex: 1; height: 7px; border-radius: 4px; background: rgba(246, 239, 228, 0.07); overflow: hidden; } .lb-bar-fill { display: block; height: 100%; border-radius: 4px; } .lb-score { font-family: var(--font-mono); font-size: 13px; font-weight: 600; width: 40px; text-align: right; } .mono-col { font-family: var(--font-mono); font-size: 13px; } .center { text-align: center; } .right { text-align: right; } .lb-finals, .lb-cb { color: var(--ink-2); font-size: 14px; } .lb-trend { font-weight: 600; } /* ---- search row ---- */ .search-row { width: 100%; display: flex; align-items: center; gap: 11px; padding: 11px 14px; background: none; border: none; border-bottom: 1px solid var(--border); cursor: pointer; text-align: left; } .search-row:last-child { border-bottom: none; } .search-row:hover { background: #261f17; } .search-row-text { display: flex; flex-direction: column; gap: 1px; min-width: 0; } .search-row-name { font-weight: 600; font-size: 14px; color: var(--ink); } .search-row-sub { font-size: 12px; color: var(--muted); font-family: var(--font-mono); } /* ---- points hero ---- */ .points-top { display: flex; align-items: baseline; justify-content: space-between; } .points-top .eyebrow { margin-bottom: 0; letter-spacing: 0.08em; color: var(--muted); } .points-cap { font-family: var(--font-mono); font-size: 12px; color: var(--muted); } .points-big-row { display: flex; align-items: baseline; gap: 10px; margin: 8px 0 18px; } .points-big { font-family: var(--font-display); font-weight: 900; font-size: 58px; line-height: 1; color: var(--accent); } .points-unit { font-size: 14px; color: var(--ink-2); } .points-track { height: 12px; border-radius: 7px; background: rgba(246, 239, 228, 0.08); overflow: hidden; } .points-fill { height: 100%; border-radius: 7px; background: linear-gradient(90deg, var(--accent), var(--accent-warm)); animation: fadeUp 0.5s ease both; } .points-foot { display: flex; align-items: center; justify-content: space-between; margin-top: 12px; font-size: 13.5px; color: var(--ink-2); flex-wrap: wrap; gap: 6px; } .points-foot strong { color: var(--ink); } .points-eta { color: var(--muted); font-family: var(--font-mono); } /* ---- division chips ---- */ .div-chips { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; margin-top: 14px; padding-top: 14px; border-top: 1px solid var(--border); } .div-chips-label { font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.04em; text-transform: uppercase; color: var(--muted); } .div-chip { font-family: var(--font-mono); font-size: 12px; font-weight: 600; padding: 3px 9px; border-radius: 999px; border: 1px solid var(--border-2); } .div-chip-capped { color: var(--muted); font-weight: 500; } /* ---- funnel ---- */ .funnel { display: flex; flex-direction: column; gap: 11px; margin-top: 18px; } .funnel-step-head { display: flex; justify-content: space-between; margin-bottom: 5px; font-size: 13px; } .funnel-label { color: var(--ink); font-weight: 500; } .funnel-count { color: var(--ink-2); } .funnel-conv { color: var(--muted-2); } .funnel-track { height: 9px; border-radius: 5px; background: rgba(246, 239, 228, 0.06); overflow: hidden; } .funnel-fill { height: 100%; border-radius: 5px; animation: fadeUp 0.5s ease both; } /* ---- judge row ---- */ .jrow { display: flex; align-items: center; gap: 12px; } .jrow-name { flex: 1; font-size: 13.5px; color: var(--ink); min-width: 0; } .jrow-panels { color: var(--muted-2); font-family: var(--font-mono); font-size: 11.5px; } .jrow-track { width: 96px; height: 7px; border-radius: 4px; background: rgba(246, 239, 228, 0.06); overflow: hidden; } .jrow-fill { display: block; height: 100%; border-radius: 4px; } .jrow-pct { width: 40px; text-align: right; font-family: var(--font-mono); font-size: 13px; } /* ---- best event row ---- */ .be-row { display: flex; align-items: center; gap: 14px; } .be-id { flex: 1; min-width: 0; } .be-name { display: block; font-weight: 600; font-size: 14px; } .be-loc { display: block; font-size: 12px; color: var(--muted); font-family: var(--font-mono); } .be-track { width: 120px; height: 8px; border-radius: 5px; background: rgba(246, 239, 228, 0.06); overflow: hidden; } .be-fill { display: block; height: 100%; border-radius: 5px; background: linear-gradient(90deg, var(--accent-2), var(--accent-2-bright)); } .be-odds { width: 54px; text-align: right; font-family: var(--font-mono); font-size: 15px; font-weight: 600; color: var(--accent-2); } /* ---- move ---- */ .move { display: flex; gap: 14px; align-items: flex-start; } .move-n { width: 28px; height: 28px; flex: none; border-radius: 9px; display: flex; align-items: center; justify-content: center; font-family: var(--font-display); font-weight: 800; font-size: 14px; color: var(--bg); background: var(--accent-2); } .move-text { font-size: 13.5px; line-height: 1.5; color: #e8ddcd; }