/* Custom cursor — tpvz-cursor.js */ /* ── Navigation cursor fix ───────────────────────────────────────────────── SPA body-swap navigation (tpvz-nav.js v4) keeps the element alive across page transitions — compositor never resets cursor, no OS flash. View Transitions removed: Chrome applies snapshot to content, not cursor; cursor was rendered live from the new Document, so VT gave no benefit. */ /* Prevent background flash before CSS bundle loads */ html.dark { background-color: #0a0d1e; color-scheme: dark; } html:not(.dark) { background-color: #f8fafc; color-scheme: light; } /* FOUC / «полу-белый» экран: базовый фон и текст до hydration Tailwind CDN (defer). */ body { margin: 0; min-height: 100dvh; -webkit-font-smoothing: antialiased; } html:not(.dark) body { background-color: #f8fafc; color: #0f172a; } html.dark body { background-color: #0a0d1e; color: #f8fafc; } /* Касание: иногда inline style cursor:none на мешает взаимодействию — сбрасываем на coarse pointer. */ @media (pointer: coarse) { html, body { cursor: auto !important; } } /* Hide system cursor — cursor:none is the hardest suppression: tells the compositor there is literally nothing to render, so the OS arrow never briefly appears during click hit-testing. Evaluated before any JS runs; no class dependency needed. */ @media (hover: hover) and (pointer: fine) { html, body, *, *::before, *::after { cursor: none !important; } input:not([type="button"]):not([type="submit"]):not([type="reset"]):not([type="checkbox"]):not([type="radio"]):not([type="range"]), textarea, [contenteditable="true"] { cursor: text !important; } } /* Class-based backup (also used by tpvz-cursor.js) */ html.tpvz-cursor-on, html.tpvz-cursor-on *, html.tpvz-cursor-on *::before, html.tpvz-cursor-on *::after { cursor: none !important; } html.tpvz-cursor-on input:not([type="button"]):not([type="submit"]):not([type="reset"]):not([type="checkbox"]):not([type="radio"]):not([type="range"]), html.tpvz-cursor-on textarea, html.tpvz-cursor-on [contenteditable="true"] { cursor: text !important; } /* Mobile / touch: never show custom cursor */ @media (pointer: coarse) { .tpvz-cursor-el { display: none !important; } } .tpvz-cursor-el { position: fixed; left: 0; top: 0; width: 32px; height: 32px; z-index: 2147483647; pointer-events: none; will-change: transform; contain: strict; opacity: 0; transition: opacity 0.15s ease; } html.tpvz-cursor-on .tpvz-cursor-el { opacity: 1; } /* Hide custom cursor when typing */ html.tpvz-cursor-on.tpvz-cursor--text .tpvz-cursor-el { opacity: 0 !important; } .tpvz-cursor-el::before { content: ""; display: block; width: 32px; height: 32px; background: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACAAAAAgCAYAAABzenr0AAAFFUlEQVR4nOWWTWxUVRTH/+fe+96bdqa0aVUoIia6EdTERBbqpmVjjGxIzDRuNHFnYowLFT8QX99ORCTYyIcKBVFjOhCiuHChtpWENKIRRFlglCgKVOn3MDPvzbv3mPvaKS20Zao1mHiSycydue/e3/mfrwH+m8Z0De/m8cu7WCLL8tpAbOL0FCKC360mwRbYaPKTzwInQQ13jm5HTWoNovhTgPYMr689PLnHqvIDGAGZBQZgAogXbzqXjgup88LNZCAkoCOwjvsEUWdRxAfGXqwfmIS9HYQ2GPvcAgBg3Ls20s3+0B5R2/CIKQyVAbjkZQjSAYf58wTqArDn7MuZbyuPtfisegHzd1WhyU824XKkb94wcC+c2iNcLhoQCTAbm5lQnhRuGiYcY4L4DMy7S/n8of7NzRcnVTkJQm5+qtC0lT0kAN+6fuAr8upWmeiiJoJMtrFhBmkCFHl1ABE4Kv5MwAeanH2ng9Spaaq0Q4OuDiKmLlqSNbHDtNMVDhxj4BhAGYZiIpehFAOyNKplYUQ7oFtcN/OSZ6LjKzaMHVjh5x+0FdMbUGwvz3axzGa75ixlmr4cT8a7nxusDyV+JKGuZx1x4m5lZ8Unu2aYJERCKOnVgY2GiaMTAuJdLtOHJ15N/1Y5t8Xvkb3trVeoQpcTtSQerI7vWvfnG0666clyYTAmIjW3kMwJDJiEUytI1UBHYyOC6aAw6Dy6cdGXlZ3ZLMtcjvSsAL7PIgjIrHph4A4JdYx12Yap+ibEbBgwJJWSbh1MXAJM3CcgOmOMHjj6yrLxUp4NYCrEfc/88bny6lfH4aghovm1ZWYriy1NId0MkXBgyoV+mHKnrG0KetsR2shOS8KK9Uwkp2Oww2GQYxjzfjHIZZIuE4kwr6kwFMk4Wly3qOl5MXbhfpsLLX63nDG2vQG0jWfIZz5xivjVU95yE4e2vmcEnlMGsCGQUG5GWhHLw0PHQPK4Pd82sFkOtHSQfVuWF5XhvSlZa70yDlvPqngZYxxjYheS0m6D9MghUS59gaj4sIou3NO9ufGX5JqAzKzZ3QqYXhsGbTqpNLLOgXBhbH7RrAnJsL/DKFkjpVMjylF+hMPifkH6nUNbruu7vNwTV+cSsFIyDz1x7qCTalhbDkdjAFdC20bJDCldSFWDOC6eYsbeWPG+j15vOjMRDcq2QeQua9VqLoDK8UqI7UrrtWyMoBkEYAMjpAsY87uJw2dJ5D/ev2V5seLEypXggMjkYHPrCvarme1ikDf1nzuhnPRtcbmQDKmpDzJYu169DKPh7Pvblu6H74sWtIqZOt+8AXyfVRBQ/NjjZ5/2vMbXwtKg7fOXlGMYqTwRx6XTdW7ziu8aoasdRNaqKKv2ZM6LsniPS8NjLpRyDLMdUhODytSKpEre7uigsDVxq/pxLK62IQgC05VluWvXkn4Z64NplbGX6vGGY9gjKXVxKO84qnMqcLWmqtmUm3h3mHdQufioYyBsLjJDp9yMKpWGc1u3NZ+3oG3BpUFTjYmqAHKkfd8XW3ff2Ieo8HVapYUyRjsMgajAStObVvjcJOoCA4xbe/JnRRmxMwVl4x9nZJqoXDq8ee/Sb3yfKZdrm5f31qoGCJL5ACBVk4tLw4Ne0nYEeYyO5PuennnOiXkCAMQ2xhvfahxRxuy4Ib1ExcWR7xvrlx1iMAW9rfpfBgDakjbKpM/85EeF0TVC8gNPdVBYAcT/yJj8lm5lK+OfnvQXlV6bGRxpNi4AAAAASUVORK5CYII=") center / contain no-repeat; filter: drop-shadow(0 2px 3px rgba(15, 23, 42, 0.28)); } /* ── Toggle switch (панель) ────────────────────────────────────── */ .am-switch { --sw-w: 46px; --sw-h: 24px; --sw-bg: rgb(131,131,131); --sw-c-bg: rgb(0,218,80); --sw-off: calc((var(--sw-h) - var(--c-d)) / 2); --sw-t: all 0.2s cubic-bezier(0.27,0.2,0.25,1.51); --c-d: 18px; --c-bg: #fff; --c-s: 1px 1px 2px rgba(146,146,146,.45); --c-cs: -1px 1px 2px rgba(163,163,163,.45); display: inline-block; } .am-switch input { display: none; } .am-switch svg { transition: var(--sw-t); position: absolute; height: auto; } .am-switch .am-checkmark { width: 10px; color: var(--sw-c-bg); transform: scale(0); } .am-switch .am-cross { width: 6px; color: var(--sw-bg); } .am-slider { box-sizing: border-box; width: var(--sw-w); height: var(--sw-h); background: var(--sw-bg); border-radius: 999px; display: flex; align-items: center; position: relative; transition: var(--sw-t); } .am-circle { width: var(--c-d); height: var(--c-d); background: var(--c-bg); border-radius: inherit; box-shadow: var(--c-s); display: flex; align-items: center; justify-content: center; transition: var(--sw-t); z-index: 1; position: absolute; left: var(--sw-off); } .am-slider::before { content: ; position: absolute; width: calc(var(--c-d) / 2); height: calc(var(--c-d) / 4 - 1px); left: calc(var(--sw-off) + var(--c-d) / 4); background: var(--c-bg); border-radius: 1px; transition: all .2s ease-in-out; } .am-switch input:checked + .am-slider { background: var(--sw-c-bg); } .am-switch input:checked + .am-slider .am-checkmark { transform: scale(1); } .am-switch input:checked + .am-slider .am-cross { transform: scale(0); } .am-switch input:checked + .am-slider::before { left: calc(100% - var(--c-d) / 2 - var(--c-d) / 4 - var(--sw-off)); } .am-switch input:checked + .am-slider .am-circle { left: calc(100% - var(--c-d) - var(--sw-off)); box-shadow: var(--c-cs); }