/* Тачборд — дизайн-система. Темы задаются атрибутом data-theme на , шрифт — data-font, скругления — data-corners, размер — data-scale. */ @import url('/css/fonts.css'); :root { /* тема по умолчанию: космос */ --bg: #0b0a1f; --bg2: #1b1450; --bg3: #2a1f6e; --card: rgba(255,255,255,.06); --card2: rgba(255,255,255,.1); --line: rgba(255,255,255,.12); --fg: #ffffff; --muted: #b3acd6; --on-accent: #0b0a1f; --accent: #8b6cff; --accent2: #4dd4ff; --gold: #ffcc4d; --ok: #7cf29a; --bad: #ff6b6b; --c0: #ff5c8a; --c1: #4dd4ff; --c2: #ffcc4d; --c3: #7cf29a; --c4: #b98cff; --c5: #ff9f4d; --c6: #4dffd8; --c7: #ff7bf2; --glow: 0 0 40px; --r-s: 10px; --r-m: 16px; --r-l: 24px; --r-pill: 999px; --font: 'Manrope', -apple-system, 'Segoe UI', Roboto, sans-serif; --font-display: 'Unbounded', 'Manrope', sans-serif; --scale: 1; --shadow: 0 20px 60px rgba(0,0,0,.35); --dur: 1; color-scheme: dark; } /* ---------- темы ---------- */ [data-theme="neon"] { --bg: #050505; --bg2: #14001f; --bg3: #001a1a; --fg: #fff; --muted: #9a9aa6; --accent: #39ff14; --accent2: #ff00e5; --gold: #ffee00; --on-accent: #000; --c0: #ff00e5; --c1: #00f0ff; --c2: #ffee00; --c3: #39ff14; --c4: #b300ff; --c5: #ff7a00; --c6: #00ffb3; --c7: #ff2d55; --glow: 0 0 60px; } [data-theme="ocean"] { --bg: #041a2e; --bg2: #073b5c; --bg3: #0b5f7a; --fg: #f2fbff; --muted: #9dc3d6; --accent: #19c6d8; --accent2: #6ee7b7; --gold: #ffd166; --on-accent: #041a2e; --c0: #19c6d8; --c1: #6ee7b7; --c2: #ffd166; --c3: #7aa7ff; --c4: #f78fb3; --c5: #ffa94d; --c6: #a5f3fc; --c7: #c4b5fd; } [data-theme="sunset"] { --bg: #2a0a1e; --bg2: #6a1b3a; --bg3: #b8412a; --fg: #fff6f0; --muted: #e6b8a8; --accent: #ff7a59; --accent2: #ffc45c; --gold: #ffd36e; --on-accent: #2a0a1e; --c0: #ff7a59; --c1: #ffc45c; --c2: #ff4f8b; --c3: #ffe08a; --c4: #f4a3ff; --c5: #ff9a3c; --c6: #ffb3c6; --c7: #c084fc; } [data-theme="forest"] { --bg: #0d1f14; --bg2: #16402a; --bg3: #1f5e3a; --fg: #f1faf3; --muted: #a9c9b3; --accent: #5ee39a; --accent2: #c7f464; --gold: #f5d76e; --on-accent: #0d1f14; --c0: #5ee39a; --c1: #c7f464; --c2: #f5d76e; --c3: #7dd3fc; --c4: #f9a8d4; --c5: #fdba74; --c6: #86efac; --c7: #a5b4fc; } [data-theme="wedding"] { --bg: #fff8f3; --bg2: #ffe9dc; --bg3: #fbd3c1; --card: rgba(120,60,40,.06); --card2: rgba(120,60,40,.1); --line: rgba(120,60,40,.15); --fg: #3a2520; --muted: #8c6a60; --accent: #c98a5b; --accent2: #e0a9a0; --gold: #d4a94a; --ok: #3f9d6b; --bad: #d0554f; --on-accent: #fff; --c0: #e0a9a0; --c1: #c98a5b; --c2: #d4a94a; --c3: #9fc5b4; --c4: #b8a4d6; --c5: #f0b48f; --c6: #8ec6d9; --c7: #e69ec4; --shadow: 0 20px 50px rgba(120,60,40,.15); --glow: 0 0 0; color-scheme: light; } [data-theme="minimal"] { --bg: #ffffff; --bg2: #f4f4f7; --bg3: #e9e9ef; --card: #f5f5f8; --card2: #ececf2; --line: rgba(0,0,0,.1); --fg: #111118; --muted: #666677; --accent: #2b2bff; --accent2: #111118; --gold: #e0a800; --ok: #1f9d55; --bad: #d92d20; --on-accent: #fff; --c0: #2b2bff; --c1: #e0338b; --c2: #e0a800; --c3: #1f9d55; --c4: #7c3aed; --c5: #ea580c; --c6: #0891b2; --c7: #111118; --shadow: 0 10px 30px rgba(0,0,0,.08); --glow: 0 0 0; color-scheme: light; } [data-theme="candy"] { --bg: #fff1f7; --bg2: #ffe4f0; --bg3: #e4f0ff; --card: rgba(255,255,255,.7); --card2: #fff; --line: rgba(80,40,120,.12); --fg: #2d1b4e; --muted: #7a6a94; --accent: #ff4fa3; --accent2: #6c5cff; --gold: #ffb020; --ok: #16b364; --bad: #ef4444; --on-accent: #fff; --c0: #ff4fa3; --c1: #6c5cff; --c2: #ffb020; --c3: #16b364; --c4: #00b8d9; --c5: #ff7a45; --c6: #9b5cff; --c7: #ff5c5c; --shadow: 0 16px 40px rgba(120,60,180,.15); --glow: 0 0 0; color-scheme: light; } [data-theme="retro"] { --bg: #f3e9d2; --bg2: #e8d7b4; --bg3: #d9bf8c; --card: rgba(80,50,20,.07); --card2: rgba(80,50,20,.12); --line: rgba(80,50,20,.18); --fg: #3b2a14; --muted: #7d6748; --accent: #d9662f; --accent2: #5c8a5a; --gold: #c9962b; --ok: #5c8a5a; --bad: #b3372f; --on-accent: #fff; --c0: #d9662f; --c1: #5c8a5a; --c2: #c9962b; --c3: #4e7ba6; --c4: #a3466b; --c5: #e0a04a; --c6: #6f8f6d; --c7: #8b5a3c; --shadow: 0 16px 40px rgba(80,50,20,.15); --glow: 0 0 0; color-scheme: light; } [data-theme="midnight"] { --bg: #05070d; --bg2: #0b1224; --bg3: #101c3a; --fg: #e8eefc; --muted: #8b98b8; --accent: #3b82f6; --accent2: #22d3ee; --gold: #fbbf24; --on-accent: #05070d; --c0: #3b82f6; --c1: #22d3ee; --c2: #fbbf24; --c3: #34d399; --c4: #a78bfa; --c5: #fb923c; --c6: #67e8f9; --c7: #f472b6; } /* акцент поверх темы */ [data-accent="gold"] { --accent: #ffcc4d; --accent2: #ffe08a; --on-accent: #1a1400; } [data-accent="cyan"] { --accent: #4dd4ff; --accent2: #a5f3fc; --on-accent: #041a2e; } [data-accent="pink"] { --accent: #ff5c8a; --accent2: #ffb3c6; --on-accent: #2a0a1e; } [data-accent="lime"] { --accent: #c7f464; --accent2: #7cf29a; --on-accent: #0d1f14; } [data-accent="violet"] { --accent: #8b6cff; --accent2: #c4b5fd; --on-accent: #fff; } [data-accent="orange"] { --accent: #ff9f4d; --accent2: #ffc45c; --on-accent: #2a0a1e; } [data-accent="red"] { --accent: #ff4f4f; --accent2: #ff9a9a; --on-accent: #fff; } [data-accent="white"] { --accent: #ffffff; --accent2: #dddddd; --on-accent: #111; } [data-font="display"] { --font: 'Unbounded', 'Manrope', sans-serif; } [data-font="serif"] { --font: 'Literata', Georgia, serif; --font-display: 'Literata', Georgia, serif; } [data-font="mono"] { --font: 'JetBrains Mono', ui-monospace, Menlo, monospace; --font-display: 'JetBrains Mono', ui-monospace, monospace; } [data-font="system"] { --font: -apple-system, 'Segoe UI', Roboto, sans-serif; --font-display: -apple-system, 'Segoe UI', Roboto, sans-serif; } [data-corners="round"] { --r-s: 18px; --r-m: 28px; --r-l: 40px; } [data-corners="sharp"] { --r-s: 3px; --r-m: 4px; --r-l: 6px; --r-pill: 6px; } [data-scale="s"] { --scale: .85; } [data-scale="l"] { --scale: 1.2; } [data-scale="xl"] { --scale: 1.45; } [data-intensity="off"] { --dur: 0; } [data-intensity="calm"] { --dur: 1.6; } [data-intensity="party"] { --dur: .7; } @media (prefers-reduced-motion: reduce) { :root { --dur: 0; } } /* ---------- база ---------- */ * { box-sizing: border-box; margin: 0; -webkit-tap-highlight-color: transparent; } html { font-size: 16px; } body { background: var(--bg); color: var(--fg); font-family: var(--font); min-height: 100dvh; line-height: 1.45; -webkit-font-smoothing: antialiased; } body::before { content: ""; position: fixed; inset: 0; z-index: -2; background: radial-gradient(1200px 800px at 15% -10%, var(--bg2), transparent 60%), radial-gradient(900px 700px at 110% 110%, var(--bg3), transparent 55%), var(--bg); } a { color: var(--accent2); text-decoration: none; } a:hover { text-decoration: underline; } h1, h2, h3 { line-height: 1.12; letter-spacing: -.015em; font-family: var(--font-display); } h1 { font-size: 32px; font-weight: 800; } h2 { font-size: 22px; font-weight: 700; } h3 { font-size: 16px; font-weight: 700; font-family: var(--font); } p { color: var(--muted); } .wrap { max-width: 1080px; margin: 0 auto; padding: 20px 16px 60px; } .narrow { max-width: 460px; } .topbar { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 10px 0 26px; flex-wrap: wrap; } .brand { font-family: var(--font-display); font-weight: 900; font-size: 22px; color: var(--fg); letter-spacing: -.02em; display: inline-flex; align-items: center; gap: 8px; } .brand i { width: 26px; height: 26px; border-radius: 8px; background: linear-gradient(135deg, var(--accent), var(--accent2)); display: inline-block; box-shadow: var(--glow) color-mix(in srgb, var(--accent) 50%, transparent); } .topbar nav { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; } .btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; font: inherit; font-weight: 700; font-size: 15px; color: var(--fg); background: var(--card2); border: 1px solid var(--line); border-radius: var(--r-s); padding: 10px 16px; cursor: pointer; transition: transform .08s, background .2s, opacity .2s, box-shadow .2s; text-decoration: none !important; white-space: nowrap; } .btn:hover { background: color-mix(in srgb, var(--card2) 60%, var(--fg) 8%); } .btn:active { transform: scale(.97); } .btn:disabled { opacity: .45; cursor: default; transform: none; } .btn.primary { background: linear-gradient(135deg, var(--accent), color-mix(in srgb, var(--accent) 60%, var(--accent2))); color: var(--on-accent); border-color: transparent; box-shadow: 0 8px 24px color-mix(in srgb, var(--accent) 35%, transparent); } .btn.primary:hover { filter: brightness(1.08); } .btn.gold { background: var(--gold); color: #1a1400; border-color: transparent; } .btn.danger { background: color-mix(in srgb, var(--bad) 15%, transparent); border-color: color-mix(in srgb, var(--bad) 40%, transparent); color: var(--bad); } .btn.ghost { background: transparent; } .btn.small { padding: 6px 10px; font-size: 13px; } .btn.big { padding: 16px 24px; font-size: 18px; border-radius: var(--r-m); } .btn.block { width: 100%; } .field { display: flex; flex-direction: column; gap: 6px; margin-bottom: 14px; } .field label { font-size: 13px; color: var(--muted); font-weight: 600; } input[type=text], input[type=email], input[type=password], input[type=number], textarea, select { font: inherit; font-size: 16px; color: var(--fg); background: color-mix(in srgb, var(--bg) 60%, var(--card)); border: 1px solid var(--line); border-radius: var(--r-s); padding: 10px 12px; width: 100%; outline: none; transition: border-color .2s, box-shadow .2s; } input:focus, textarea:focus, select:focus { border-color: var(--accent); box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 25%, transparent); } textarea { resize: vertical; min-height: 70px; } select option { color: #111; background: #fff; } .check { display: flex; align-items: center; gap: 8px; font-size: 15px; cursor: pointer; } .check input { width: 18px; height: 18px; accent-color: var(--accent); } .row { display: flex; gap: 12px; align-items: center; flex-wrap: wrap; } .row.between { justify-content: space-between; } .grow { flex: 1; min-width: 0; } .grid2 { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; } @media (max-width: 640px) { .grid2 { grid-template-columns: 1fr; } } .card { background: var(--card); border: 1px solid var(--line); border-radius: var(--r-m); padding: 18px; backdrop-filter: blur(12px); } .card + .card { margin-top: 12px; } .list { display: flex; flex-direction: column; gap: 10px; } .item { display: flex; align-items: center; gap: 12px; padding: 12px 14px; border-radius: var(--r-s); background: color-mix(in srgb, var(--bg) 40%, transparent); border: 1px solid transparent; transition: border-color .2s; } .item:hover { border-color: var(--line); } .item .title { font-weight: 700; font-size: 16px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .item .sub { font-size: 13px; color: var(--muted); } .actions { display: flex; gap: 6px; flex-wrap: wrap; justify-content: flex-end; } .muted { color: var(--muted); } .small { font-size: 13px; } .center { text-align: center; } .mt { margin-top: 16px; } .mb { margin-bottom: 16px; } .hidden { display: none !important; } .err { color: var(--bad); font-size: 14px; min-height: 18px; margin-top: 6px; } .ok { color: var(--ok); } .tag { display: inline-block; font-size: 12px; font-weight: 700; padding: 3px 8px; border-radius: var(--r-pill); background: var(--card2); color: var(--muted); text-transform: uppercase; letter-spacing: .04em; } .tag.live { background: color-mix(in srgb, var(--ok) 18%, transparent); color: var(--ok); } .tag.lobby { background: color-mix(in srgb, var(--gold) 18%, transparent); color: var(--gold); } .code { font-family: 'JetBrains Mono', ui-monospace, Menlo, monospace; font-weight: 800; letter-spacing: .12em; } .empty { padding: 30px; text-align: center; color: var(--muted); border: 1px dashed var(--line); border-radius: var(--r-m); } .toast { position: fixed; left: 50%; bottom: 24px; transform: translateX(-50%); background: var(--fg); color: var(--bg); font-weight: 700; padding: 12px 18px; border-radius: var(--r-s); box-shadow: var(--shadow); opacity: 0; transition: opacity .25s; pointer-events: none; z-index: 50; max-width: 90vw; } .toast.show { opacity: 1; } .toast.bad { background: var(--bad); color: #fff; } .status { position: fixed; bottom: 10px; left: 14px; font-size: 12px; color: var(--bad); z-index: 40; } /* ---------- столбики ---------- */ .bars { display: flex; flex-direction: column; gap: 10px; } .bar { display: grid; gap: 4px; } .bar .label { display: flex; justify-content: space-between; gap: 12px; font-weight: 700; } .bar .label .name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .bar .label .num { color: var(--muted); font-variant-numeric: tabular-nums; white-space: nowrap; } .bar .track { height: 14px; background: color-mix(in srgb, var(--fg) 10%, transparent); border-radius: var(--r-pill); overflow: hidden; } .bar .fill { height: 100%; width: 0; border-radius: var(--r-pill); background: var(--bar-color, var(--accent)); transition: width calc(.7s * var(--dur)) cubic-bezier(.2,.9,.3,1.1); } [data-bar-anim="bounce"] .bar .fill { transition-timing-function: cubic-bezier(.2,1.4,.4,1); } [data-bar-anim="race"] .bar:nth-child(2) .fill { transition-delay: calc(.15s * var(--dur)); } [data-bar-anim="race"] .bar:nth-child(3) .fill { transition-delay: calc(.3s * var(--dur)); } [data-bar-anim="race"] .bar:nth-child(4) .fill { transition-delay: calc(.45s * var(--dur)); } [data-bar-anim="race"] .bar:nth-child(n+5) .fill { transition-delay: calc(.6s * var(--dur)); } [data-bar-anim="none"] .bar .fill { transition: none; } [data-bar-style="flat"] .bar .track, [data-bar-style="flat"] .bar .fill { border-radius: 2px; } [data-bar-style="gradient"] .bar .fill { background: linear-gradient(90deg, color-mix(in srgb, var(--bar-color, var(--accent)) 60%, #fff 0%), var(--bar-color, var(--accent))); } [data-bar-style="striped"] .bar .fill { background-image: repeating-linear-gradient(-45deg, rgba(255,255,255,.25) 0 8px, transparent 8px 16px); background-color: var(--bar-color, var(--accent)); } [data-bar-style="glow"] .bar .fill { box-shadow: 0 0 24px var(--bar-color, var(--accent)); } .bar.correct .name::before { content: "✓ "; color: var(--ok); } .bar.wrong { opacity: .5; } [data-reveal="fade"] .bar.wrong { opacity: .18; } [data-reveal="shake"] .bar.wrong { animation: shake calc(.6s * var(--dur)) both; } [data-reveal="spotlight"] .bar.correct { transform: scale(1.03); transform-origin: left; filter: drop-shadow(0 0 20px var(--ok)); } [data-reveal="none"] .bar.wrong { opacity: 1; } @keyframes shake { 10%, 90% { transform: translateX(-2px); } 20%, 80% { transform: translateX(4px); } 30%, 50%, 70% { transform: translateX(-6px); } 40%, 60% { transform: translateX(6px); } } .dialog-backdrop { position: fixed; inset: 0; background: rgba(0,0,0,.6); display: grid; place-items: center; z-index: 60; padding: 16px; } .dialog { background: var(--bg2); border: 1px solid var(--line); border-radius: var(--r-m); padding: 20px; width: 100%; max-width: 420px; box-shadow: var(--shadow); } /* ---------- общие анимации появления ---------- */ @keyframes pop { from { transform: scale(.4); opacity: 0; } 70% { transform: scale(1.06); } to { transform: scale(1); opacity: 1; } } @keyframes rise { from { transform: translateY(30px); opacity: 0; } to { transform: none; opacity: 1; } } @keyframes drop { from { transform: translateY(-60px); opacity: 0; } 60% { transform: translateY(8px); } to { transform: none; opacity: 1; } } @keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } } @keyframes slideIn { from { transform: translateX(-40px); opacity: 0; } to { transform: none; opacity: 1; } } @keyframes slideRight { from { transform: translateX(60px); opacity: 0; } to { transform: none; opacity: 1; } } @keyframes zoomIn { from { transform: scale(1.15); opacity: 0; } to { transform: none; opacity: 1; } } @keyframes flipIn { from { transform: perspective(1200px) rotateY(-70deg); opacity: 0; } to { transform: none; opacity: 1; } } @keyframes blurIn { from { filter: blur(20px); opacity: 0; } to { filter: none; opacity: 1; } } @keyframes glowIn { 0% { opacity: 0; filter: brightness(3) blur(6px); } 40% { opacity: 1; filter: brightness(2) blur(0); } 100% { filter: none; } } @keyframes pulse { 50% { transform: scale(1.08); } } @keyframes floaty { 0%, 100% { transform: translateY(0) rotate(-1deg); } 50% { transform: translateY(-12px) rotate(1deg); } } @keyframes spin { to { transform: rotate(360deg); } } @keyframes wave { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-10px); } } @keyframes marquee { from { transform: translateX(100%); } to { transform: translateX(-100%); } } @keyframes glowLoop { to { filter: brightness(1.4); } } /* ---------- иконки ---------- */ .ic { width: 1.15em; height: 1.15em; vertical-align: -.2em; flex-shrink: 0; } .ic.lg { width: 1.6em; height: 1.6em; } .ic.xl { width: 2.4em; height: 2.4em; } .btn .ic { width: 1.1em; height: 1.1em; } .iconbox { display: inline-grid; place-items: center; width: 40px; height: 40px; border-radius: var(--r-s); background: color-mix(in srgb, var(--accent) 18%, transparent); color: var(--accent2); } .iconbox .ic { width: 22px; height: 22px; } .team-badge { display: inline-flex; align-items: center; gap: 4px; padding: 2px 8px; border-radius: var(--r-pill); background: color-mix(in srgb, var(--tc) 22%, transparent); color: var(--tc); font-weight: 700; font-size: .85em; border: 1px solid color-mix(in srgb, var(--tc) 50%, transparent); }