:root { --void: #04050d; --ink: #090c1a; --star: #f4f2ff; --muted: #8b90b8; --dim: #767ba1; --gold: #e8c87a; --line: rgba(180, 195, 255, 0.13); --glass: rgba(14, 18, 38, 0.55); --accent: var(--gold); --accent-glow: rgba(232, 200, 122, 0.4); --font-display: 'Cormorant Garamond', 'Iowan Old Style', Georgia, serif; --font-ui: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif; --ease: cubic-bezier(0.22, 1, 0.36, 1); } * { box-sizing: border-box; } /* Атрибут hidden должен побеждать display из классов. */ [hidden] { display: none !important; } html, body { height: 100%; margin: 0; } body { background: var(--void); color: var(--star); font-family: var(--font-ui); font-size: 16px; line-height: 1.55; -webkit-font-smoothing: antialiased; overflow-x: hidden; } #sky { position: fixed; inset: 0; width: 100%; height: 100%; z-index: 0; display: block; } /* --- Стартовый экран (только при первом визите) ------------------------ */ #boot { position: fixed; inset: 0; z-index: 20; display: grid; place-items: center; background: var(--void); transition: opacity 0.7s var(--ease), transform 0.7s var(--ease); } /* Повторный визит: экрана нет вовсе, решает синхронный скрипт в . */ :root[data-boot='skip'] #boot { display: none; } /* Уходит вверх и растворяется, открывая небо. */ #boot[data-done] { opacity: 0; transform: scale(1.06); pointer-events: none; } .boot-inner { display: grid; justify-items: center; gap: 26px; padding: 20px; width: min(340px, 82vw); } .boot-constellation { width: 100%; height: auto; overflow: visible; } .boot-lines path { fill: none; stroke: rgba(190, 210, 255, 0.42); stroke-width: 0.7; stroke-linecap: round; stroke-linejoin: round; /* Длина заведомо больше периметра — точное значение не нужно. */ stroke-dasharray: 460; stroke-dashoffset: 460; animation: boot-draw 1.15s cubic-bezier(0.5, 0, 0.2, 1) 0.45s forwards; } .boot-lines path:last-child { animation-delay: 0.72s; } .boot-stars circle { fill: #fff; opacity: 0; transform-box: fill-box; transform-origin: center; filter: drop-shadow(0 0 5px rgba(190, 215, 255, 0.9)); animation: boot-spark 0.7s var(--ease) both; } .boot-stars circle:nth-child(1) { animation-delay: 0.05s; } .boot-stars circle:nth-child(2) { animation-delay: 0.14s; } .boot-stars circle:nth-child(3) { animation-delay: 0.23s; } .boot-stars circle:nth-child(4) { animation-delay: 0.32s; } .boot-stars circle:nth-child(5) { animation-delay: 0.41s; } .boot-stars circle:nth-child(6) { animation-delay: 0.5s; } .boot-stars circle:nth-child(7) { animation-delay: 0.59s; } @keyframes boot-spark { 0% { opacity: 0; transform: scale(0.2); } 55% { opacity: 1; transform: scale(1.7); } 100% { opacity: 0.85; transform: scale(1); } } @keyframes boot-draw { to { stroke-dashoffset: 0; } } .boot-word { margin: 0; display: flex; gap: 0.03em; font-family: var(--font-display); font-weight: 300; font-size: clamp(23px, 6.4vw, 31px); letter-spacing: 0.13em; color: var(--star); text-transform: uppercase; } /* Буквы проявляются из размытия — как будто собираются из света. */ .boot-word span { opacity: 0; animation: boot-letter 0.6s var(--ease) both; } @keyframes boot-letter { from { opacity: 0; filter: blur(9px); transform: translateY(9px); } to { opacity: 1; filter: blur(0); transform: none; } } .boot-bar { width: 128px; height: 2px; border-radius: 2px; background: rgba(255, 255, 255, 0.09); overflow: hidden; } .boot-bar i { display: block; height: 100%; width: 0; border-radius: 2px; background: linear-gradient(90deg, rgba(232, 200, 122, 0.35), var(--gold)); animation: boot-fill 1.95s cubic-bezier(0.35, 0, 0.2, 1) forwards; } @keyframes boot-fill { to { width: 100%; } } @media (prefers-reduced-motion: reduce) { /* Ничего не летает и не собирается — сразу готовый кадр. */ .boot-lines path { stroke-dashoffset: 0; } .boot-stars circle { opacity: 0.85; } .boot-word span { opacity: 1; } .boot-bar i { width: 100%; } } /* Виньетка поверх неба — прижимает края и вытягивает центр. */ .vignette { position: fixed; inset: 0; z-index: 1; pointer-events: none; background: radial-gradient(ellipse 90% 70% at 50% 45%, transparent 0%, rgba(4, 5, 13, 0.55) 70%, rgba(4, 5, 13, 0.9) 100%); } body { display: flex; flex-direction: column; min-height: 100dvh; } .stage { position: relative; z-index: 2; flex: 1; display: grid; place-items: center; padding: 28px 20px 8px; } /* --- Экраны ----------------------------------------------------------- */ .screen { width: 100%; max-width: 560px; opacity: 0; visibility: hidden; transform: translateY(14px); transition: opacity 0.6s var(--ease), transform 0.6s var(--ease), visibility 0s linear 0.6s; grid-area: 1 / 1; } .screen[data-active] { opacity: 1; visibility: visible; transform: none; /* Показ без задержки — иначе .focus() уходит в никуда. */ transition: opacity 0.6s var(--ease), transform 0.6s var(--ease), visibility 0s linear 0s; } .stage { display: grid; grid-template-areas: 'main'; align-items: center; justify-items: center; } .screen { grid-area: main; } /* Высоту строки грида задаёт самый высокий экран, а это карточка вердикта (~1200px). Пока неактивные экраны остаются в потоке, форма центруется внутри этой высоты и уезжает вниз. Активный экран задаёт высоту, все остальные выводятся из потока и накладываются поверх для перекрёстного затухания. */ .screen:not([data-active]) { position: absolute; inset: 0; margin: auto; width: 100%; max-width: 560px; height: max-content; } /* --- Титул ------------------------------------------------------------ */ .eyebrow { font-size: 11px; letter-spacing: 0.22em; text-transform: uppercase; color: var(--dim); margin: 0 0 18px; text-align: center; } h1 { font-family: var(--font-display); font-weight: 300; font-size: clamp(42px, 9vw, 68px); line-height: 1.02; letter-spacing: -0.01em; margin: 0 0 14px; text-align: center; background: linear-gradient(180deg, #ffffff 20%, #b9c0e8 100%); -webkit-background-clip: text; background-clip: text; color: transparent; } .subtitle { text-align: center; color: var(--muted); font-size: 17px; margin: 0 auto 28px; max-width: 38ch; text-wrap: balance; } /* --- Карточка --------------------------------------------------------- */ .card { background: var(--glass); border: 1px solid var(--line); border-radius: 20px; padding: 26px 24px 24px; backdrop-filter: blur(18px) saturate(1.3); -webkit-backdrop-filter: blur(18px) saturate(1.3); /* Тяжёлый слой — только там, где карточка низкая. Ниже он снимается. */ box-shadow: 0 1px 0 rgba(255, 255, 255, 0.06) inset, 0 30px 80px -30px rgba(0, 0, 0, 0.9); } /* --- Форма по шагам --------------------------------------------------- */ .sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; } .steps-head { display: flex; align-items: center; gap: 14px; margin-bottom: 22px; } .step-count { margin: 0; font-size: 11px; letter-spacing: 0.16em; text-transform: uppercase; color: var(--dim); white-space: nowrap; } .step-bar { flex: 1; height: 2px; border-radius: 2px; background: rgba(255, 255, 255, 0.08); overflow: hidden; } .step-bar i { display: block; height: 100%; width: 33.33%; border-radius: 2px; background: linear-gradient(90deg, rgba(232, 200, 122, 0.35), var(--gold)); transition: width 0.5s var(--ease); } /* Резерв высоты, чтобы карточка не прыгала между шагами. */ /* Высота подгоняется под текущий шаг из JS: фиксированный резерв убирал прыжок, но оставлял пустой провал на коротких шагах. */ .steps { transition: height 0.35s var(--ease); } .step { border: 0; padding: 0; margin: 0; display: grid; gap: 18px; align-content: start; animation: step-in 0.4s var(--ease) both; } .step[data-back] { animation-name: step-in-back; } @keyframes step-in { from { opacity: 0; transform: translateX(16px); } to { opacity: 1; transform: none; } } @keyframes step-in-back { from { opacity: 0; transform: translateX(-16px); } to { opacity: 1; transform: none; } } .field { display: grid; gap: 8px; min-width: 0; } label { font-family: var(--font-display); font-size: 25px; font-weight: 300; letter-spacing: 0; text-transform: none; color: var(--star); line-height: 1.2; } input[type='date'], input[type='time'], input[type='text'] { width: 100%; font: inherit; font-size: 17px; color: var(--star); background: rgba(255, 255, 255, 0.045); border: 1px solid var(--line); border-radius: 12px; padding: 14px 15px; transition: border-color 0.25s, background 0.25s, box-shadow 0.25s, opacity 0.25s; color-scheme: dark; min-width: 0; } input::placeholder { color: #9095bb; } input:hover:not(:disabled) { background: rgba(255, 255, 255, 0.07); } input:disabled { opacity: 0.4; cursor: not-allowed; } input:focus-visible { outline: none; border-color: rgba(232, 200, 122, 0.55); background: rgba(255, 255, 255, 0.08); box-shadow: 0 0 0 3px rgba(232, 200, 122, 0.14); } .hint { font-size: 13.5px; color: var(--muted); line-height: 1.45; margin: 0; } .check { display: flex; align-items: center; gap: 10px; min-height: 44px; font-size: 14.5px; color: var(--muted); cursor: pointer; user-select: none; font-family: var(--font-ui); font-weight: 400; text-transform: none; letter-spacing: 0; } .check input { appearance: none; width: 18px; height: 18px; flex: none; border: 1px solid var(--line); border-radius: 5px; background: rgba(255, 255, 255, 0.045); display: grid; place-content: center; cursor: pointer; transition: background 0.2s, border-color 0.2s; padding: 0; } .check input::after { content: ''; width: 10px; height: 10px; transform: scale(0); transition: transform 0.18s var(--ease); background: var(--void); clip-path: polygon(14% 44%, 0 60%, 39% 100%, 100% 22%, 85% 8%, 38% 71%); } .check input:checked { background: var(--gold); border-color: var(--gold); } .check input:checked::after { transform: scale(1); } .check input:focus-visible { outline: 2px solid rgba(232, 200, 122, 0.6); outline-offset: 2px; } .step-actions { display: flex; gap: 10px; margin-top: 24px; } /* --- Кнопки ----------------------------------------------------------- */ .btn { font: inherit; font-size: 15px; font-weight: 500; letter-spacing: 0.01em; border-radius: 12px; padding: 14px 22px; cursor: pointer; transition: transform 0.2s var(--ease), box-shadow 0.3s, background 0.25s, border-color 0.25s; border: 1px solid transparent; } .btn:active { transform: translateY(1px) scale(0.995); } .btn:focus-visible { outline: 2px solid rgba(232, 200, 122, 0.7); outline-offset: 3px; } .btn-primary { flex: 1; color: #17130a; background: linear-gradient(180deg, #f6e4b4 0%, var(--gold) 100%); box-shadow: 0 8px 30px -10px var(--accent-glow); } .btn-primary:hover { box-shadow: 0 12px 40px -10px var(--accent-glow); transform: translateY(-1px); } .btn-ghost { background: rgba(255, 255, 255, 0.05); border-color: var(--line); color: var(--star); } .btn-ghost:hover { background: rgba(255, 255, 255, 0.1); } .btn-quiet { background: transparent; border-color: var(--line); color: var(--muted); flex: none; padding-inline: 18px; } .btn-quiet:hover { color: var(--star); background: rgba(255, 255, 255, 0.05); } .btn-link { display: block; margin: 16px auto 0; padding: 8px 12px; min-height: 44px; font: inherit; font-size: 13.5px; color: var(--muted); background: none; border: 0; border-radius: 8px; cursor: pointer; text-decoration: underline; text-underline-offset: 4px; text-decoration-color: var(--line); transition: color 0.2s, text-decoration-color 0.2s; } .btn-link:hover { color: var(--star); text-decoration-color: var(--muted); } .btn-link:focus-visible { outline: 2px solid rgba(232, 200, 122, 0.7); outline-offset: 2px; } .error { color: #ff9b93; font-size: 13px; min-height: 18px; margin-top: 10px; text-align: center; } /* --- Экран схождения -------------------------------------------------- */ #screen-cast { text-align: center; } /* Звёзды на canvas сходятся в центр вьюпорта, поэтому и кольцо должно стоять ровно там же — иначе вспышка бьёт мимо циферблата. Экран раскрывается на весь вьюпорт, кольцо и текст кладутся в одну грид-ячейку, текст сдвигается вниз на полрадиуса с отступом. */ #screen-cast { position: fixed; inset: 0; max-width: none; width: auto; display: grid; grid-template-areas: 'centre'; place-items: center; padding: 20px; --orbit-size: min(210px, 52vw); } #screen-cast > * { grid-area: centre; } .orbit { width: var(--orbit-size); filter: drop-shadow(0 0 30px rgba(160, 190, 255, 0.22)); } .cast-text { width: min(90vw, 520px); text-align: center; transform: translateY(calc(var(--orbit-size) / 2 + 58px)); } .orbit svg { display: block; width: 100%; height: auto; overflow: visible; } .orbit circle { fill: none; } /* Кольца крутятся в разные стороны — создаёт ощущение работающего механизма. */ .ring { stroke: rgba(190, 205, 255, 0.16); stroke-width: 1; transform-origin: 100px 100px; } .ring-outer { stroke-dasharray: 2 10; animation: spin 26s linear infinite; } .ring-mid { stroke-dasharray: 30 14; stroke: rgba(190, 205, 255, 0.11); animation: spin 17s linear infinite reverse; } .ticks line { stroke: rgba(200, 215, 255, 0.28); stroke-width: 1.2; stroke-linecap: round; transform-origin: 100px 100px; animation: spin 90s linear infinite; } .ring-track { stroke: rgba(255, 255, 255, 0.07); stroke-width: 2; } /* Дуга прогресса: dashoffset гонится из JS на длительность схождения. */ .ring-progress { stroke: var(--gold); stroke-width: 2; stroke-linecap: round; transform: rotate(-90deg); transform-origin: 100px 100px; filter: drop-shadow(0 0 6px rgba(232, 200, 122, 0.65)); } .core { fill: var(--gold); animation: pulse 2.4s ease-in-out infinite; transform-origin: 100px 100px; } @keyframes spin { to { transform: rotate(360deg); } } @keyframes pulse { 0%, 100% { opacity: 0.55; transform: scale(1); } 50% { opacity: 1; transform: scale(1.9); } } .phrase { font-family: var(--font-display); font-size: clamp(24px, 5vw, 34px); font-weight: 300; color: var(--star); min-height: 1.4em; margin: 0; transition: opacity 0.45s var(--ease), transform 0.45s var(--ease), filter 0.45s; text-shadow: 0 0 40px rgba(180, 200, 255, 0.35); } .phrase.out { opacity: 0; transform: translateY(-8px); filter: blur(3px); } .cast-note { margin: 18px 0 0; font-size: 12px; letter-spacing: 0.2em; text-transform: uppercase; color: var(--dim); } /* --- Результат -------------------------------------------------------- */ /* Карточка вердикта вырастает до ~1200px, а backdrop-filter такой высоты ломает растеризацию — часть карточки просто не отрисовывается. Компенсируем плотностью фона. */ #screen-result .card { text-align: center; padding-top: 30px; backdrop-filter: none; -webkit-backdrop-filter: none; background: rgba(11, 15, 32, 0.88); } /* Каскад появления: 4.2 секунды нарастания заслуживают не одного fade. */ #screen-result[data-active] .verdict-title { animation: rise 0.5s var(--ease) both; } #screen-result[data-active] .party-logo { animation: rise 0.5s var(--ease) 0.1s both; } #screen-result[data-active] .party { animation: flare 0.9s var(--ease) 0.18s both; } #screen-result[data-active] .match { animation: rise 0.5s var(--ease) 0.5s both; } #screen-result[data-active] .meter { animation: rise 0.5s var(--ease) 0.6s both; } #screen-result[data-active] .chart { animation: rise 0.6s var(--ease) 0.72s both; } #screen-result[data-active] .block:nth-of-type(1) { animation: rise 0.6s var(--ease) 0.88s both; } #screen-result[data-active] .block:nth-of-type(2) { animation: rise 0.6s var(--ease) 1s both; } #screen-result[data-active] .block:nth-of-type(3) { animation: rise 0.6s var(--ease) 1.12s both; } #screen-result[data-active] .actions { animation: rise 0.5s var(--ease) 1.26s both; } #screen-result[data-active] .btn-link { animation: rise 0.5s var(--ease) 1.36s both; } @keyframes rise { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } } /* Название партии не просто появляется — оно вспыхивает, как звезда. */ @keyframes flare { 0% { opacity: 0; transform: scale(0.94); filter: blur(8px); letter-spacing: 0.06em; } 60% { opacity: 1; filter: blur(0); } 100% { opacity: 1; transform: none; filter: blur(0); letter-spacing: normal; } } .verdict-title { font-family: var(--font-display); font-size: 15px; letter-spacing: 0.3em; text-transform: uppercase; color: var(--dim); margin: 0 0 6px; } .party { font-family: var(--font-display); font-weight: 400; font-size: clamp(32px, 7.5vw, 50px); line-height: 1.1; margin: 6px 0 4px; color: var(--accent); text-shadow: 0 0 60px var(--accent-glow); transition: color 0.5s; } /* Круглая эмблема партии: настоящий логотип на светлом медальоне в кольце партийного цвета. Медальон нужен по делу — тёмно-красный знак КПРФ прямо на ночном фоне почти не читается. */ .party-logo { position: relative; width: 92px; height: 92px; margin: 6px auto 2px; } .party-logo svg { display: block; width: 100%; height: 100%; overflow: visible; } /* Пунктирная орбита повторяет кольцо со экрана схождения. */ .pl-orbit { fill: none; stroke: var(--accent); stroke-width: 1; stroke-dasharray: 3 7; opacity: 0.45; transform-origin: 50% 50%; animation: pl-spin 26s linear infinite; } .pl-plate { fill: #f2f1ec; } /* Вписанный в круг квадрат — 71% диаметра; берём чуть меньше, чтобы логотип не упирался в кольцо. */ .pl-emblem { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width: auto; max-width: 42px; max-height: 38px; } .pl-ring { fill: none; stroke: var(--accent); stroke-width: 1.6; filter: drop-shadow(0 0 9px var(--accent-glow)); } .pl-abbr { position: absolute; inset: 0; display: grid; place-items: center; font-size: 14px; font-weight: 600; letter-spacing: 0.06em; color: var(--void); } @keyframes pl-spin { to { transform: rotate(360deg); } } .match { font-size: 13px; color: var(--muted); margin: 0 0 22px; } .match b { color: var(--star); font-weight: 600; } /* Полоска совпадения */ .meter { height: 3px; border-radius: 3px; background: rgba(255, 255, 255, 0.08); overflow: hidden; margin: 0 auto 24px; max-width: 260px; } .meter i { display: block; height: 100%; width: 0; border-radius: 3px; background: linear-gradient(90deg, color-mix(in srgb, var(--accent) 45%, transparent), var(--accent)); transition: width 1.1s var(--ease) 0.25s; } /* Натальная карта — знак, асцендент, луна */ .chart { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1px; background: var(--line); border: 1px solid var(--line); border-radius: 14px; overflow: hidden; margin-bottom: 22px; } .chart div { background: rgba(9, 12, 26, 0.6); padding: 13px 8px; } .chart dt { font-size: 10.5px; letter-spacing: 0.14em; text-transform: uppercase; color: #8c91b8; margin-bottom: 5px; } .chart dd { margin: 0; font-family: var(--font-display); font-size: 20px; color: var(--star); } .chart .glyph { font-size: 15px; color: var(--accent); margin-right: 5px; font-family: var(--font-ui); } .block { text-align: left; border-top: 1px solid var(--line); padding-top: 18px; margin-top: 20px; } .block-title { margin: 0 0 10px; font-size: 11px; letter-spacing: 0.2em; text-transform: uppercase; color: var(--dim); font-weight: 500; } .reason { font-size: 15.5px; line-height: 1.62; color: #d3d7f0; margin: 0; text-align: left; } .constellation { font-size: 13px; color: var(--dim); margin: 10px 0 0; text-align: left; } .bars { margin: 18px 0 0; display: grid; gap: 11px; } .bars > div { display: grid; grid-template-columns: 8.5em 1fr 3em; align-items: center; gap: 12px; } .bars dt { font-size: 13px; color: var(--muted); } .bars dd { margin: 0; height: 4px; border-radius: 4px; background: rgba(255, 255, 255, 0.08); overflow: hidden; } .bars dd i { display: block; height: 100%; width: 0; border-radius: 4px; background: linear-gradient(90deg, color-mix(in srgb, var(--accent) 40%, transparent), var(--accent)); transition: width 0.9s var(--ease); } .bars b { font-size: 13px; font-weight: 600; color: var(--star); text-align: right; font-variant-numeric: tabular-nums; } .actions { display: grid; grid-template-columns: 1fr 1fr; gap: 11px; margin-top: 24px; } .disclaimer { margin: 24px 0 0; font-size: 12.5px; line-height: 1.55; color: var(--dim); text-align: center; border-top: 1px solid var(--line); padding: 18px 8px 0; } .disclaimer span { display: inline-block; max-width: 46ch; } .toast { position: fixed; left: 50%; bottom: 28px; transform: translate(-50%, 20px); z-index: 10; background: rgba(20, 24, 46, 0.95); border: 1px solid var(--line); border-radius: 100px; padding: 10px 20px; font-size: 13.5px; opacity: 0; pointer-events: none; transition: opacity 0.3s, transform 0.3s var(--ease); backdrop-filter: blur(10px); } .toast[data-show] { opacity: 1; transform: translate(-50%, 0); } .page-footer { position: relative; z-index: 2; display: flex; flex-direction: column; align-items: center; gap: 8px; padding: 0 20px 14px; } .motion-toggle { font: inherit; font-size: 12px; color: var(--muted); background: rgba(10, 13, 28, 0.75); border: 1px solid var(--line); border-radius: 100px; padding: 9px 16px; min-height: 40px; cursor: pointer; transition: color 0.2s, border-color 0.2s, background 0.2s; } .motion-toggle:hover { color: var(--star); background: rgba(20, 25, 48, 0.9); } .motion-toggle:focus-visible { outline: 2px solid rgba(232, 200, 122, 0.7); outline-offset: 2px; } .footer-note { margin: 0; text-align: center; font-size: 12px; color: #767ba1; max-width: 62ch; } @media (max-width: 480px) { .row { grid-template-columns: 1fr; } .card { padding: 22px 18px 20px; border-radius: 18px; } .chart dd { font-size: 17px; } .bars > div { grid-template-columns: 7em 1fr 2.8em; gap: 9px; } .bars { margin: 18px 0 0; display: grid; gap: 11px; } .bars > div { display: grid; grid-template-columns: 8.5em 1fr 3em; align-items: center; gap: 12px; } .bars dt { font-size: 13px; color: var(--muted); } .bars dd { margin: 0; height: 4px; border-radius: 4px; background: rgba(255, 255, 255, 0.08); overflow: hidden; } .bars dd i { display: block; height: 100%; width: 0; border-radius: 4px; background: linear-gradient(90deg, color-mix(in srgb, var(--accent) 40%, transparent), var(--accent)); transition: width 0.9s var(--ease); } .bars b { font-size: 13px; font-weight: 600; color: var(--star); text-align: right; font-variant-numeric: tabular-nums; } .actions { grid-template-columns: 1fr; } } @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: 0.01ms !important; animation-delay: 0s !important; animation-iteration-count: 1 !important; transition-duration: 0.12s !important; } /* Дуга прогресса — единственный индикатор хода, её оставляем живой. Значение должно быть явным: inherit наследуется от и даёт 0s. */ .ring-progress { transition-duration: var(--cast-ms, 1600ms) !important; } .step { animation: none; } }