/* ───────────────────────────────────────────────────────────────────────────── Speed Test — оформление. Токены в :root, тёмная тема отдельным блоком. Тема: data-theme="auto|light|dark" на ; auto слушает системную. ───────────────────────────────────────────────────────────────────────── */ :root { --accent: #6366f1; --accent-2: #8b5cf6; --grad-1: #818cf8; --grad-2: #6366f1; --bg: #f5f6fb; --surface: #ffffff; --surface-2: #eef0f8; --line: #e2e5f0; --track: #e6e9f2; --text: #0f1226; --text-2: #494f68; --muted: #868ca3; --shadow-s: 0 1px 2px rgba(16, 19, 42, 0.06), 0 4px 14px rgba(16, 19, 42, 0.06); --shadow-l: 0 10px 40px rgba(16, 19, 42, 0.12); --glow: rgba(99, 102, 241, 0.42); --glow: color-mix(in srgb, var(--accent) 42%, transparent); --radius: 18px; --font: -apple-system, BlinkMacSystemFont, "Segoe UI Variable Display", "Segoe UI", system-ui, Inter, Roboto, "Helvetica Neue", Arial, sans-serif; --ok: #10b981; --warn: #f59e0b; } :root[data-theme="dark"] { /* Тёмные тона выводим из акцента, чтобы смена DECOY_ACCENT перекрашивала обе темы. В каждой паре первая строка — запас для браузеров без color-mix. */ --grad-1: #a5b4fc; --grad-1: color-mix(in srgb, #818cf8 78%, #ffffff); --grad-2: #818cf8; --accent: #818cf8; --accent-2: #a78bfa; --accent-2: color-mix(in srgb, #8b5cf6 74%, #ffffff); --bg: #0a0c14; --surface: #151827; --surface-2: #1c2032; --line: #262b3f; --track: #242942; --text: #f3f5fc; --text-2: #b9bfd6; --muted: #79809a; --shadow-s: 0 1px 2px rgba(0, 0, 0, 0.4), 0 4px 16px rgba(0, 0, 0, 0.35); --shadow-l: 0 12px 44px rgba(0, 0, 0, 0.55); } @media (prefers-color-scheme: dark) { :root[data-theme="auto"] { --grad-1: #a5b4fc; --grad-1: color-mix(in srgb, #818cf8 78%, #ffffff); --grad-2: #818cf8; --accent: #818cf8; --accent-2: #a78bfa; --accent-2: color-mix(in srgb, #8b5cf6 74%, #ffffff); --bg: #0a0c14; --surface: #151827; --surface-2: #1c2032; --line: #262b3f; --track: #242942; --text: #f3f5fc; --text-2: #b9bfd6; --muted: #79809a; --shadow-s: 0 1px 2px rgba(0, 0, 0, 0.4), 0 4px 16px rgba(0, 0, 0, 0.35); --shadow-l: 0 12px 44px rgba(0, 0, 0, 0.55); } } * { box-sizing: border-box; } html, body { height: 100%; } body { margin: 0; font-family: var(--font); color: var(--text); background-color: var(--bg); background-image: radial-gradient( 52vw 52vw at 8% -12%, color-mix(in srgb, var(--accent) 13%, transparent), transparent 62% ), radial-gradient( 48vw 48vw at 96% 110%, color-mix(in srgb, var(--accent-2) 12%, transparent), transparent 62% ); background-attachment: fixed; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; display: flex; flex-direction: column; min-height: 100dvh; } /* ── Шапка ──────────────────────────────────────────────────────────────── */ .topbar { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 20px clamp(16px, 4vw, 40px); } .brand { display: flex; align-items: center; gap: 11px; min-width: 0; } .brand-mark { width: 34px; height: 34px; flex: none; filter: drop-shadow(0 4px 12px var(--glow)); } .brand-name { font-size: 17px; font-weight: 650; letter-spacing: -0.2px; white-space: nowrap; } .icon-btn { width: 40px; height: 40px; flex: none; display: grid; place-items: center; border: 1px solid var(--line); border-radius: 12px; background: var(--surface); color: var(--text-2); cursor: pointer; transition: color 0.18s ease, border-color 0.18s ease, transform 0.18s ease; } .icon-btn:hover { color: var(--accent); border-color: color-mix(in srgb, var(--accent) 45%, var(--line)); transform: translateY(-1px); } .icon-btn svg { width: 19px; height: 19px; fill: none; stroke: currentColor; stroke-width: 1.9; } .icon-btn .i-moon { fill: currentColor; stroke: none; } /* показываем ту иконку, которая соответствует ЦЕЛЕВОЙ теме по клику */ .i-moon { display: none; } :root[data-theme="dark"] .i-sun { display: none; } :root[data-theme="dark"] .i-moon { display: block; } @media (prefers-color-scheme: dark) { :root[data-theme="auto"] .i-sun { display: none; } :root[data-theme="auto"] .i-moon { display: block; } } /* ── Основная сцена ─────────────────────────────────────────────────────── */ .stage { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 22px; padding: 8px clamp(16px, 4vw, 40px) 32px; width: 100%; max-width: 720px; margin: 0 auto; } /* ── Спидометр ──────────────────────────────────────────────────────────── */ .gauge-wrap { position: relative; width: min(330px, 78vw); aspect-ratio: 1; display: grid; place-items: center; } .gauge { width: 100%; height: 100%; overflow: visible; } /* поворачиваем только дуги — подписи делений остаются горизонтальными */ .arc-track, .arc-live { fill: none; stroke-linecap: round; stroke-width: 15; transform: rotate(135deg); transform-origin: 150px 150px; } .arc-track { stroke: var(--track); } .arc-live { stroke: url(#arcGrad); filter: drop-shadow(0 0 10px var(--glow)); transition: stroke-dasharray 0.28s cubic-bezier(0.33, 1, 0.68, 1); } .ticks text { fill: var(--muted); font-family: var(--font); font-size: 11px; font-weight: 600; font-variant-numeric: tabular-nums; text-anchor: middle; dominant-baseline: middle; } .ticks line { stroke: var(--line); stroke-width: 2; stroke-linecap: round; } /* показание в центре */ .readout { position: absolute; display: grid; place-items: center; gap: 2px; pointer-events: none; transition: opacity 0.25s ease, transform 0.25s ease; } .readout-value { font-size: clamp(38px, 12vw, 52px); font-weight: 700; letter-spacing: -1.6px; line-height: 1; font-variant-numeric: tabular-nums; } .readout-unit { font-size: 12px; font-weight: 600; letter-spacing: 1.6px; text-transform: uppercase; color: var(--muted); } body:not(.running):not(.finished) .readout { opacity: 0; transform: scale(0.9); } /* кнопка старта — в центре, прячется на время прогона */ .start { position: absolute; width: 132px; height: 132px; border: 0; border-radius: 50%; background: linear-gradient(160deg, var(--grad-1), var(--grad-2)); color: #fff; font-family: var(--font); font-size: 20px; font-weight: 650; letter-spacing: 0.4px; cursor: pointer; box-shadow: 0 10px 30px var(--glow); transition: transform 0.2s cubic-bezier(0.33, 1, 0.68, 1), box-shadow 0.2s ease, opacity 0.25s ease; } .start:hover { transform: scale(1.045); box-shadow: 0 14px 38px var(--glow); } .start:active { transform: scale(0.98); } body.running .start, body.finished .start { opacity: 0; pointer-events: none; transform: scale(0.82); } /* ── Подпись фазы и шаги ────────────────────────────────────────────────── */ .again { padding: 12px 26px; border: 0; border-radius: 999px; background: linear-gradient(160deg, var(--grad-1), var(--grad-2)); color: #fff; font-family: var(--font); font-size: 15px; font-weight: 600; letter-spacing: 0.2px; cursor: pointer; box-shadow: 0 8px 24px var(--glow); transition: transform 0.18s ease, box-shadow 0.18s ease; } .again:hover { transform: translateY(-1px); box-shadow: 0 12px 30px var(--glow); } .again:active { transform: translateY(0); } .again[hidden] { display: none; } .phase { margin: 0; min-height: 22px; font-size: 14.5px; color: var(--text-2); text-align: center; } .steps { list-style: none; display: flex; gap: 8px; margin: 0; padding: 0; flex-wrap: wrap; justify-content: center; } .steps li { display: flex; align-items: center; gap: 7px; padding: 7px 14px; border: 1px solid var(--line); border-radius: 999px; background: var(--surface); font-size: 13px; font-weight: 550; color: var(--muted); transition: color 0.2s ease, border-color 0.2s ease, background 0.2s ease; } .steps .dot { width: 7px; height: 7px; border-radius: 50%; background: var(--track); transition: background 0.2s ease, box-shadow 0.2s ease; } .steps li[data-state="active"] { color: var(--text); border-color: color-mix(in srgb, var(--accent) 50%, var(--line)); } .steps li[data-state="active"] .dot { background: var(--accent); box-shadow: 0 0 0 4px color-mix(in srgb, var(--accent) 22%, transparent); animation: pulse 1.3s ease-in-out infinite; } .steps li[data-state="done"] { color: var(--text-2); } .steps li[data-state="done"] .dot { background: var(--ok); } .steps li[data-state="failed"] { color: var(--text-2); } .steps li[data-state="failed"] .dot { background: var(--warn); } @keyframes pulse { 50% { opacity: 0.45; } } /* ── Плитки результатов ─────────────────────────────────────────────────── */ .results { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; width: 100%; } .tile { display: flex; align-items: center; gap: 11px; padding: 14px; border: 1px solid var(--line); border-radius: var(--radius); background: var(--surface); box-shadow: var(--shadow-s); } .tile-i { width: 19px; height: 19px; flex: none; fill: none; stroke: var(--accent); stroke-width: 1.9; stroke-linecap: round; stroke-linejoin: round; } .tile-body { min-width: 0; } .tile-label { font-size: 11px; font-weight: 600; letter-spacing: 1px; text-transform: uppercase; color: var(--muted); margin-bottom: 3px; } .tile-value { font-size: 19px; font-weight: 700; letter-spacing: -0.4px; font-variant-numeric: tabular-nums; white-space: nowrap; } .tile-value i { font-style: normal; font-size: 11.5px; font-weight: 600; color: var(--muted); } /* ── Сообщение о результате прогона ─────────────────────────────────────── */ .notice { margin: 0; padding: 12px 16px; border: 1px solid color-mix(in srgb, var(--warn) 35%, var(--line)); border-radius: 14px; background: color-mix(in srgb, var(--warn) 9%, var(--surface)); color: var(--text-2); font-size: 13.5px; line-height: 1.5; text-align: center; max-width: 520px; } .foot { padding: 0 20px 22px; text-align: center; font-size: 12.5px; color: var(--muted); } /* ── Адаптив ────────────────────────────────────────────────────────────── */ @media (max-width: 560px) { .results { grid-template-columns: repeat(2, 1fr); } .stage { gap: 18px; } } @media (max-width: 360px) { .steps li { padding: 6px 11px; font-size: 12px; } } /* низкие экраны в альбомной: спидометр не должен выдавливать всё остальное */ @media (max-height: 620px) and (orientation: landscape) { .gauge-wrap { width: min(240px, 42vh); } .start { width: 104px; height: 104px; font-size: 17px; } } :focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; border-radius: 6px; } @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; } }