/* The First Tower, Ambassadori Island Batumi
Состав страницы v2 (design-prompt-v2.md, 24.08.2026): герой, остров, галерея,
стройка и условия, квиз. Контейнер 1440, поля 160, секции 64/64.
Мобильный брейкпоинт - 720. */
:root {
--ink: #0F1417;
--ink-deep: #0A0E11;
--ink-soft: #101619;
--ink-card: #141A1E;
--paper: #F3EFE7;
--paper-alt: #EFEADF;
--text: #14191C;
--text-2: #33403F;
--text-3: #3B4749;
--muted: #5C6A70;
--muted-2: #6C7A80;
--muted-3: #8A9499;
--line: #E0D8C8;
--line-2: #DED5C3;
--line-3: #E4DDCD;
--accent: #C08F4A;
--accent-dark: #9A6F33;
--accent-soft: #8A7A5E;
--sea: #2F6B7E;
--light: #F6F3EC;
--light-2: #DCD5C7;
--light-3: #C0C9CC;
--light-muted: #9FADB2;
--light-muted-2: #8B9A9F;
--light-dim: #78868B;
--dark-line: rgba(246, 243, 236, 0.16);
--wrap: 1440px;
--pad: 160px;
--serif: 'Cormorant Garamond', 'Times New Roman', Georgia, serif;
--sans: Manrope, 'Helvetica Neue', Arial, sans-serif;
--mono: 'JetBrains Mono', ui-monospace, Menlo, monospace;
}
*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
margin: 0;
background: var(--ink);
color: var(--text);
font-family: var(--sans);
font-size: 16px;
line-height: 1.5;
-webkit-font-smoothing: antialiased;
}
img, video { max-width: 100%; display: block; }
/* display у классов перебивает встроенный [hidden] - иначе скрытые блоки остаются видимыми. */
[hidden] { display: none !important; }
p { margin: 0; }
dl, dd, dt { margin: 0; }
ul { margin: 0; padding: 0; list-style: none; }
strong { font-weight: 600; }
.mono { font-family: var(--mono); }
.skip-link {
position: absolute; left: -9999px; top: 0; z-index: 20;
padding: 12px 18px; background: var(--accent); color: var(--text);
font-size: 14px; font-weight: 600; text-decoration: none;
}
.skip-link:focus { left: 0; }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }
/* ── каркас ─────────────────────────────────────────────────────────────── */
.wrap { max-width: var(--wrap); margin: 0 auto; padding: 0 var(--pad); }
.section { padding: 64px 0; }
.section--paper { background: var(--paper); }
.section--paper-alt { background: var(--paper-alt); }
.section--ink { background: var(--ink); }
.stack { display: flex; flex-direction: column; gap: 28px; }
.stack--tight { gap: 14px; }
.h2 {
margin: 0; max-width: 640px;
font-family: var(--serif); font-weight: 500; font-size: 46px; line-height: 1.06;
letter-spacing: -0.01em; color: var(--text);
}
.h2--light { color: var(--light); }
.h3 {
margin: 0; font-family: var(--serif); font-weight: 500; font-size: 28px;
line-height: 1.15; color: var(--text);
}
.lead { max-width: 620px; font-size: 17px; line-height: 1.55; color: #4A575C; }
.note { max-width: 640px; font-size: 14px; line-height: 1.6; color: var(--muted-2); }
.note--wide { max-width: 860px; }
.note--light { color: var(--light-muted-2); }
.cta {
font-family: inherit; font-size: 16px; font-weight: 700; color: var(--text);
padding: 19px 38px; min-height: 58px;
background: var(--accent); border: none; border-radius: 2px; cursor: pointer;
transition: filter .18s ease;
}
.cta:hover { filter: brightness(1.07); }
.cta[disabled] { opacity: .6; cursor: progress; }
/* Champagne-градиент с бликом (порт .btn-sheen из globals.css Photon). Тройка цветов
пересчитана под наш акцент #C08F4A в тех же пропорциях H/S/L, что DCC8A6/C5A880/B4966C
у Photon. Текст оставлен тёмным (наш --text): white + text-shadow у Photon существует
ради белой подписи на светлом золоте, у нас контраст лучше без него. */
.btn-sheen {
position: relative; overflow: hidden; isolation: isolate;
background: linear-gradient(135deg, #D6B172 0%, #C08F4A 48%, #A47B41 100%);
box-shadow: 0 10px 30px rgba(192, 143, 74, 0.30), inset 0 1px 0 rgba(255, 255, 255, 0.40);
transition: transform .45s cubic-bezier(0.16, 1, 0.3, 1), box-shadow .45s cubic-bezier(0.16, 1, 0.3, 1);
}
.btn-sheen::before {
content: ''; position: absolute; top: -20%; left: 0; z-index: -1;
width: 40%; height: 140%;
background: linear-gradient(100deg, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0.55) 50%, rgba(255, 255, 255, 0) 100%);
transform: translateX(-160%) skewX(-18deg);
transition: transform .8s cubic-bezier(0.16, 1, 0.3, 1);
pointer-events: none;
}
.btn-sheen:hover { transform: translateY(-2px); box-shadow: 0 16px 40px rgba(192, 143, 74, 0.42), inset 0 1px 0 rgba(255, 255, 255, 0.40); }
.btn-sheen:hover::before { transform: translateX(360%) skewX(-18deg); }
.btn-sheen svg:last-child { transition: transform .4s cubic-bezier(0.16, 1, 0.3, 1); }
.btn-sheen:hover svg:last-child { transform: translateX(4px); }
.btn-sheen[disabled] { transform: none; opacity: .5; }
.btn-sheen[disabled]::before { transform: translateX(-160%) skewX(-18deg); }
/* Градиент сам несёт подсветку, яркость сверху её пережигает. */
.cta.btn-sheen:hover { filter: none; }
@media (prefers-reduced-motion: reduce) {
.btn-sheen, .btn-sheen::before, .btn-sheen svg:last-child { transition: none; }
.btn-sheen:hover { transform: none; }
.btn-sheen:hover::before { transform: translateX(-160%) skewX(-18deg); }
}
/* ── герой ──────────────────────────────────────────────────────────────── */
.hero { position: relative; height: 720px; overflow: hidden; }
.hero__media, .hero__media img { position: absolute; inset: 0; width: 100%; height: 100%; }
.hero__media img { object-fit: cover; }
.hero__shade {
position: absolute; inset: 0;
background: linear-gradient(96deg, rgba(9,13,16,0.95) 0%, rgba(9,13,16,0.88) 38%,
rgba(9,13,16,0.62) 58%, rgba(9,13,16,0.14) 100%);
}
.hero__inner {
position: relative; height: 100%;
display: flex; flex-direction: column; justify-content: center; gap: 26px;
}
.hero__logo { width: 186px; height: auto; }
.hero__title {
margin: 0; max-width: 760px;
font-family: var(--serif); font-weight: 500; font-size: 58px; line-height: 1.05;
letter-spacing: -0.015em; color: var(--light); text-wrap: pretty;
}
.hero__sub { max-width: 620px; font-size: 20px; line-height: 1.45; color: var(--light-2); }
.hero__chips { display: flex; gap: 10px; flex-wrap: wrap; }
.chip {
font-size: 13px; line-height: 1.3; color: #E6DFD2;
padding: 10px 16px; background: rgba(246, 243, 236, 0.09);
border: 1px solid rgba(246, 243, 236, 0.20); border-radius: 999px;
}
.hero__cta { display: flex; align-items: center; gap: 22px; flex-wrap: wrap; }
.hero__cta-note { max-width: 300px; font-size: 13px; line-height: 1.45; color: #B4BEC2; }
/* ── строки фактов ──────────────────────────────────────────────────────── */
.rows { display: grid; grid-template-columns: minmax(0, 1fr); }
.row {
display: grid; grid-template-columns: 130px minmax(0, 1fr); gap: 18px;
padding: 14px 0; border-top: 1px solid var(--line);
}
.row--last { border-bottom: 1px solid var(--line); }
.row__key { font-size: 14px; font-weight: 700; color: var(--text); }
.row__key--lg { font-size: 17px; font-weight: 400; }
.row__val { font-size: 15px; line-height: 1.55; color: var(--text-3); }
/* Даты и номер разрешения читаются как реквизиты документа: колонка ключа шире,
«№1146 от 29.10.2025» не должен переноситься. */
.rows--docs .row { grid-template-columns: 210px minmax(0, 1fr); gap: 20px; padding: 16px 0; }
@media (min-width: 721px) { html[lang="en"] .rows--docs .row { grid-template-columns: 290px minmax(0, 1fr); } }
.rows--docs .row__val { font-size: 16px; color: var(--text-2); }
/* ── остров: документы и мастерплан ─────────────────────────────────────── */
.docs { display: grid; grid-template-columns: minmax(0, 1fr) 380px; gap: 40px; align-items: start; }
.docs__text { min-width: 0; }
.docs__aerial { position: relative; margin: 0; border-radius: 2px; overflow: hidden; }
.docs__aerial img { width: 100%; height: 340px; object-fit: cover; }
/* Мастерплан идёт во всю ширину и целиком, а не cover'ом в узкой колонке: выноска
«THE FIRST TOWER» стоит у правого края, при кропе теряется - а это ответ на вопрос
«где именно моя башня» (согласовано с Витой 23.08). */
.docs__media { position: relative; margin: 0; }
.docs__media img { width: 100%; height: auto; border-radius: 2px; }
.isle__sub { padding-top: 4px; }
.plan { border-bottom: 1px solid var(--line-2); display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); column-gap: 40px; }
.plan__item {
display: flex; flex-direction: column; gap: 6px;
padding: 16px 0; border-top: 1px solid var(--line-2);
}
.plan__item p { font-size: 15px; line-height: 1.5; color: var(--text); }
.badge-plan {
align-self: flex-start; font-size: 10px; letter-spacing: 0.06em; color: var(--sea);
}
/* ── галерея: одна полоса без вкладок ───────────────────────────────────── */
.section--gallery { padding-bottom: 56px; }
.section--gallery .stack { margin-bottom: 28px; }
/* Полоса выходит за контейнер и скроллится горизонтально: 10 кадров подряд,
на телефоне кадр занимает ширину экрана, следующий выглядывает краем. */
.strip {
display: flex; gap: 8px;
overflow-x: auto; overflow-y: hidden;
padding: 0 var(--pad);
scroll-snap-type: x mandatory;
scroll-padding-left: var(--pad);
-webkit-overflow-scrolling: touch;
scrollbar-width: thin;
scrollbar-color: rgba(246, 243, 236, 0.28) transparent;
}
.strip::-webkit-scrollbar { height: 6px; }
.strip::-webkit-scrollbar-thumb { background: rgba(246, 243, 236, 0.28); border-radius: 3px; }
.strip::after { content: ''; flex: 0 0 1px; }
.shot {
position: relative; margin: 0; flex: 0 0 420px; height: 300px;
overflow: hidden; border-radius: 2px; background: var(--ink-card);
scroll-snap-align: start;
}
.shot img { width: 100%; height: 100%; object-fit: cover; transition: transform .4s ease; }
.shot:hover img { transform: scale(1.03); }
/* ── стройка и условия сделки ───────────────────────────────────────────── */
.deal { display: grid; grid-template-columns: 300px minmax(0, 1fr); gap: 32px; align-items: start; }
.playtile { position: relative; margin: 0; border-radius: 2px; overflow: hidden; background: var(--ink-card); }
.playtile img, .playtile video { width: 100%; height: 380px; object-fit: cover; }
.playtile video { object-fit: contain; background: #000; }
.playtile__btn {
position: absolute; inset: 0; width: 100%; height: 100%;
display: flex; align-items: center; justify-content: center;
background: rgba(9, 13, 16, 0.22); border: none; cursor: pointer; padding: 0;
}
.playtile__btn svg { width: 56px; height: 56px; }
.rows--deal .row { grid-template-columns: 190px minmax(0, 1fr); gap: 22px; padding: 16px 0; }
.rows--deal .row__val { font-size: 16px; line-height: 1.6; color: var(--text-2); }
.deal__line { display: block; }
.deal__awards { display: flex; align-items: center; gap: 16px; margin-top: 12px; }
.deal__awards img { width: 150px; height: auto; flex-shrink: 0; }
/* ── квиз ───────────────────────────────────────────────────────────────── */
/* Раскладка «unwrapped» портирована с квиза Photon (QuizEngine.tsx, ветка unwrapped,
переходы - QuizStepTransition.tsx, утилиты - globals.css). Смысл: не карточка,
а список строк во всю ширину на тёмном фоне. Палитра и шрифты остаются наши:
белый Photon'а заменён на бумажный --light, дисплейный шрифт - Cormorant. */
/* Тёмная палитра квиза: те же альфы, что у Photon (white/10, white/40, ...),
но по нашему бумажному #F6F3EC, а не по чистому белому.
Токены стоят на :root, а не на .section--quiz: те же поля (.field, .field__input)
переиспользует модалка обратной связи, а она лежит в конце body, вне секции,
и переменные с секции туда не наследуются. Один набор значений на оба места. */
:root {
--q-line: rgba(246, 243, 236, 0.10);
--q-num: rgba(246, 243, 236, 0.40);
--q-sub: rgba(246, 243, 236, 0.60);
--q-label: rgba(246, 243, 236, 0.70);
--q-counter: rgba(246, 243, 236, 0.80);
--q-tail: rgba(246, 243, 236, 0.20);
--q-tail-arrow: rgba(246, 243, 236, 0.30);
--q-field-bg: rgba(246, 243, 236, 0.05);
--q-field-bg-focus: rgba(246, 243, 236, 0.10);
--q-field-border: rgba(246, 243, 236, 0.15);
--q-placeholder: rgba(246, 243, 236, 0.32);
--q-error: #F87171;
}
.section--quiz {
position: relative; overflow: hidden;
background: var(--ink-soft); padding: 72px 0;
}
/* Размытое пятно акцента по центру секции (Photon: 600x600, bg-accent/5, blur-150px). */
.section--quiz::before {
content: ''; position: absolute; top: 50%; left: 50%; z-index: 0;
width: 600px; height: 600px; margin: -300px 0 0 -300px;
background: var(--accent); opacity: .05; border-radius: 50%;
filter: blur(150px); pointer-events: none;
}
/* Обводка фокуса только внутри квиза: у страницы своя, с offset 3px. */
#quiz *:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
/* Заголовок шага получает фокус программно (tabindex=-1), чтобы после перехода
скринридер прочитал новый вопрос, а не начал страницу заново. Глазами это выглядело
как золотая рамка вокруг вопроса на пустом месте: пользователь туда не переходил.
Снимаем обводку только у программной цели - у кнопок и полей она остаётся. */
#quiz [tabindex="-1"]:focus,
#quiz [tabindex="-1"]:focus-visible { outline: none; }
.quiz {
position: relative; z-index: 1;
max-width: 48rem; padding: 0 24px;
display: flex; flex-direction: column; align-items: center; gap: 28px;
}
.quiz__head { display: flex; flex-direction: column; gap: 10px; align-items: center; text-align: center; max-width: 620px; }
.quiz__head .h2 { font-size: 46px; }
.quiz__card { width: 100%; display: flex; flex-direction: column; }
/* ── прогресс: метка, трек во всю ширину, счётчик ── */
.quiz__chrome {
display: flex; align-items: center; gap: 24px;
padding-bottom: 16px; margin-bottom: 48px;
border-bottom: 1px solid var(--q-line);
}
.quiz__chrome-label { display: inline-flex; align-items: center; gap: 12px; white-space: nowrap; }
.quiz__dot { display: block; width: 6px; height: 6px; border-radius: 50%; background: var(--accent); }
.quiz__step-label { font-size: 11px; letter-spacing: 0.32em; text-transform: uppercase; color: var(--q-sub); }
.quiz__progress { position: relative; flex: 1; height: 1px; background: var(--q-line); overflow: hidden; }
/* Заливка растёт трансформом, а не шириной: transform не вызывает layout. */
.quiz__progress-bar {
position: absolute; inset: 0; width: 100%; height: 1px; background: var(--accent);
transform-origin: left center; transform: scaleX(.25);
transition: transform .5s ease-out;
}
.quiz__counter { font-size: 12px; letter-spacing: 0.28em; color: var(--q-counter); white-space: nowrap; font-variant-numeric: tabular-nums; }
/* ── сцена шагов: фиксация высоты + exit/enter (порт QuizStepTransition) ── */
.quiz__stage { position: relative; transition: height .38s cubic-bezier(0.22, 1, 0.36, 1); }
/* overflow прячем только на время анимации: иначе он режет обводку фокуса у строк. */
.quiz__stage.is-animating { overflow: hidden; }
.quiz__stage.is-exiting { pointer-events: none; user-select: none; }
.quiz__step { display: none; flex-direction: column; }
.quiz__step.is-active { display: flex; }
.quiz__step.is-exit-fwd { animation: quiz-exit-left .2s cubic-bezier(0.4, 0, 1, 1) forwards; }
.quiz__step.is-exit-back { animation: quiz-exit-right .2s cubic-bezier(0.4, 0, 1, 1) forwards; }
.quiz__step.is-enter-fwd { animation: quiz-enter-right .38s cubic-bezier(0.16, 1, 0.3, 1) forwards; }
.quiz__step.is-enter-back { animation: quiz-enter-left .38s cubic-bezier(0.16, 1, 0.3, 1) forwards; }
@keyframes quiz-exit-left {
from { opacity: 1; transform: translate3d(0, 0, 0) scale(1); }
to { opacity: 0; transform: translate3d(-20px, 0, 0) scale(0.99); }
}
@keyframes quiz-enter-right {
from { opacity: 0; transform: translate3d(24px, 0, 0) scale(0.99); }
to { opacity: 1; transform: translate3d(0, 0, 0) scale(1); }
}
@keyframes quiz-exit-right {
from { opacity: 1; transform: translate3d(0, 0, 0) scale(1); }
to { opacity: 0; transform: translate3d(20px, 0, 0) scale(0.99); }
}
@keyframes quiz-enter-left {
from { opacity: 0; transform: translate3d(-24px, 0, 0) scale(0.99); }
to { opacity: 1; transform: translate3d(0, 0, 0) scale(1); }
}
.quiz__q {
margin: 0 0 40px; max-width: 20ch;
font-family: var(--serif); font-weight: 400;
font-size: clamp(26px, 4.6vw, 42px); line-height: 1.06; letter-spacing: -0.01em;
color: var(--light);
}
/* Контакт и финал: под заголовком форма, а не список - Photon держит их мельче. */
.quiz__step[data-step="4"] .quiz__q,
.quiz__step[data-step="5"] .quiz__q { font-size: clamp(23px, 2.6vw, 32px); line-height: 1.15; margin-bottom: 24px; }
/* ── строки-ответы ── */
.quiz__opts { display: flex; flex-direction: column; gap: 0; border-top: 1px solid var(--q-line); }
.qopt {
display: grid; grid-template-columns: 56px 1fr 56px; align-items: center; gap: 24px;
width: 100%; margin: 0; padding: 24px 0;
font-family: inherit; text-align: left; color: inherit;
background: none; border: none; border-bottom: 1px solid var(--q-line); border-radius: 0;
cursor: pointer; transition: padding .3s ease;
}
.qopt:hover, .qopt:focus-visible { padding-left: 16px; }
.qopt__num {
font-family: var(--mono); font-size: 14px; font-weight: 400; letter-spacing: .2em;
color: var(--q-num); font-variant-numeric: tabular-nums; transition: color .3s ease;
}
/* padding-right: хвост на ховере вырастает на 8 px дальше своей колонки с gap,
и без этого зазора длинная подпись попадала бы под линию со стрелкой. */
.qopt__label { display: block; padding-right: 8px; font-size: 24px; font-weight: 400; line-height: 1.25; color: var(--light); transition: transform .3s ease; }
/* Хвост строки: линия с уголком-стрелкой; на ховере тянется и красится акцентом. */
.qopt__tail {
position: relative; display: block; justify-self: end;
width: 56px; height: 1px; background: var(--q-tail);
transition: width .3s ease, background-color .3s ease;
}
.qopt__tail::after {
content: ''; position: absolute; right: 0; top: 50%; width: 8px; height: 8px;
border-top: 1px solid var(--q-tail-arrow); border-right: 1px solid var(--q-tail-arrow);
transform: translateY(-50%) rotate(45deg); transition: border-color .3s ease;
}
.qopt:hover .qopt__num, .qopt:focus-visible .qopt__num { color: var(--accent); }
.qopt:hover .qopt__label, .qopt:focus-visible .qopt__label { transform: translateX(6px); }
.qopt:hover .qopt__tail, .qopt:focus-visible .qopt__tail { width: 88px; background: var(--accent); }
.qopt:hover .qopt__tail::after, .qopt:focus-visible .qopt__tail::after { border-color: var(--accent); }
/* Выбранный ранее ответ: тот же акцент, что и на ховере, но без заливки, без сдвига
строки и без роста хвоста - иначе при возврате «Назад» шаг въезжает уже разъехавшимся.
Нужен ровно для этого возврата: без состояния строка выглядит нетронутой. */
.qopt.is-selected .qopt__num { color: var(--accent); }
.qopt.is-selected .qopt__label { color: var(--accent); }
.qopt.is-selected .qopt__tail { background: var(--accent); }
.qopt.is-selected .qopt__tail::after { border-color: var(--accent); }
.quiz__note { margin-top: 16px; font-size: 13px; line-height: 1.5; color: var(--q-sub); }
/* ── контакт: «стеклянная» панель ── */
.quiz__fields {
/* z-index нужен из-за backdrop-filter: он делает панель отдельным контекстом наложения,
и выпадающий список стран внутри неё не мог перекрыть кнопку сабмита - та идёт ниже
по разметке и рисовалась поверх списка (поймано на прогоне 1440, 25.08). */
position: relative; z-index: 1;
display: flex; flex-direction: column; gap: 18px;
padding: 32px; margin-bottom: 28px;
background: var(--q-field-bg); border: 1px solid var(--q-line);
-webkit-backdrop-filter: blur(24px); backdrop-filter: blur(24px);
}
.field { display: flex; flex-direction: column; gap: 0; }
.field__label {
margin-bottom: 8px; font-size: 11px; font-weight: 500;
text-transform: uppercase; letter-spacing: .18em; color: var(--q-label);
}
.field__input {
width: 100%; font-family: inherit; font-size: 17px; font-weight: 400; color: var(--light);
padding: 14px 16px; background: var(--q-field-bg);
border: 1px solid var(--q-field-border); border-radius: 0;
transition: border-color .15s ease, background-color .15s ease;
}
.field__input::placeholder { color: var(--q-placeholder); }
.field__input:focus { outline: none; border-color: var(--accent); background: var(--q-field-bg-focus); }
.field__input.has-error { border-color: var(--q-error); }
.field__error { margin-top: 6px; font-size: 12px; line-height: 1.4; color: var(--q-error); }
.quiz__error { margin-top: 16px; font-size: 14px; line-height: 1.5; color: var(--q-error); }
/* ── телефон: intl-tel-input под тёмный квиз ──
Цвета тут литералами, а не через --q-*: список стран библиотека выносит из секции
в конец body (position: fixed, на мобиле - полноэкранная шторка). Изначально это
было обязательным - токены жили на .section--quiz и туда не наследовались; с
переездом токенов на :root ограничение снято, но значения те же, что у токенов
квиза (бумажный #F6F3EC по тёмному #101619), и переписывать рабочий блок не стали.
Разметку библиотека собирает сама, поэтому здесь только перекрытие её классов;
само поле остаётся .field__input и всю геометрию берёт оттуда. */
:root {
--iti-country-selector-bg: #101619;
--iti-border-color: rgba(246, 243, 236, 0.15);
--iti-hover-color: rgba(246, 243, 236, 0.08);
--iti-icon-color: rgba(246, 243, 236, 0.60);
--iti-strict-reject-flash-color: rgba(248, 113, 113, 0.14);
}
/* Обёртка библиотеки становится на место инпута внутри .field: там колонка флексов,
и inline-block из её стилей оставил бы поле по ширине содержимого. Отступ слева
под флаг библиотека считает сама и пишет инлайном поверх .field__input. */
.iti { display: block; width: 100%; color: var(--light); }
/* Только флаг слева, отделён от номера тонкой линией (как в quiz-варианте у Photon).
Код страны с 25.08.2026 живёт ВНУТРИ поля (separateDialCode: false в app.js),
поэтому правила на .iti__selected-dial-code тут больше нет: библиотека этот элемент
в таком режиме не рисует вовсе, и стиль на него был бы мёртвым.
padding-right отодвигает линию от флага: отступ до номера справа библиотека держит
сама (она считает по нему padding инпута), а слева от линии его не было вовсе. */
.iti__selected-country { border-right: 1px solid var(--q-field-border); padding-right: 8px; }
.iti__selected-country-primary { padding-left: 14px; }
/* Список стран: та же тёмная панель, что и секция, углы прямые. */
.iti__country-selector {
border-radius: 0; color: var(--light);
font-family: var(--sans); font-size: 15px;
}
.iti--inline-country-selector .iti__country-selector {
border-color: var(--dark-line);
box-shadow: 0 18px 40px rgba(10, 14, 17, 0.55);
}
.iti__dial-code { color: rgba(246, 243, 236, 0.60); }
.iti__search-input {
border-radius: 0; background: rgba(246, 243, 236, 0.05); color: var(--light);
font-family: var(--sans); font-size: 16px;
}
.iti__search-input::placeholder { color: rgba(246, 243, 236, 0.32); }
.iti__search-input:focus { outline: none; background: rgba(246, 243, 236, 0.10); }
.iti__no-results { color: rgba(246, 243, 236, 0.60); }
/* Шторка на мобиле: затемнение под неё берём от фона страницы, а не от чёрного. */
.iti--fullscreen-popup.iti--detached-country-selector { background-color: rgba(10, 14, 17, 0.78); }
.quiz__submit {
display: inline-flex; align-items: center; justify-content: center; gap: 16px;
font-family: var(--sans); font-size: 12px; font-weight: 700;
text-transform: uppercase; letter-spacing: .18em; color: var(--text);
padding: 20px 36px; border: none; border-radius: 0; cursor: pointer;
}
.quiz__submit svg { display: block; width: 28px; height: 8px; flex-shrink: 0; }
.quiz__submit[disabled] { cursor: progress; }
/* ── «Назад» ── */
.quiz__back-line { display: flex; align-items: center; padding-top: 12px; margin-top: 32px; }
.quiz__back {
display: inline-flex; align-items: center; gap: 14px;
font-family: inherit; font-size: 11px; font-weight: 400;
text-transform: uppercase; letter-spacing: .32em; color: var(--q-sub);
padding: 12px 0; background: transparent; border: none; cursor: pointer;
transition: color .15s ease;
}
.quiz__back:hover { color: var(--light); }
/* Шаг 1: кнопка остаётся распоркой (у Photon там пустой ), чтобы строка не прыгала. */
.quiz__back[disabled] { visibility: hidden; }
.quiz__back-arrow { position: relative; display: block; width: 28px; height: 1px; background: currentColor; }
.quiz__back-arrow::after {
content: ''; position: absolute; left: 0; top: 50%; width: 8px; height: 8px;
border-left: 1px solid currentColor; border-bottom: 1px solid currentColor;
transform: translateY(-50%) rotate(45deg);
}
/* ── финал ── */
.quiz__step[data-step="5"] { align-items: center; text-align: center; }
.quiz__mark { position: relative; width: 112px; height: 112px; margin: 0 0 32px; }
.quiz__mark-ping {
position: absolute; inset: 0; border-radius: 50%; background: rgba(192, 143, 74, 0.20);
animation: quiz-ping 1s cubic-bezier(0, 0, 0.2, 1) infinite;
}
.quiz__mark-pulse {
position: absolute; inset: 8px; border-radius: 50%; background: rgba(192, 143, 74, 0.30);
animation: quiz-pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite;
}
.quiz__mark-disc {
position: relative; display: flex; align-items: center; justify-content: center;
width: 112px; height: 112px; border-radius: 50%; background: var(--accent);
box-shadow: 0 25px 50px -12px rgba(192, 143, 74, 0.40);
}
.quiz__mark-disc svg { width: 56px; height: 56px; color: #FFFFFF; }
@keyframes quiz-ping { 75%, 100% { transform: scale(2); opacity: 0; } }
@keyframes quiz-pulse { 50% { opacity: .5; } }
.quiz__done { font-size: 18px; line-height: 1.6; color: var(--q-sub); }
.quiz__chips { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; margin-top: 28px; }
.quiz__chip {
font-size: 13px; font-weight: 500; color: var(--light);
padding: 8px 14px; background: var(--q-field-bg); border: 1px solid var(--q-line); border-radius: 0;
}
.quiz__restart {
align-self: center; margin-top: 24px;
font-family: inherit; font-size: 11px; text-transform: uppercase; letter-spacing: .32em;
color: var(--q-sub); padding: 14px 20px; min-height: 44px;
background: transparent; border: 1px solid var(--q-line); border-radius: 0; cursor: pointer;
transition: color .15s ease, border-color .15s ease;
}
.quiz__restart:hover { color: var(--light); border-color: var(--q-tail); }
@media (prefers-reduced-motion: reduce) {
.quiz__stage { transition: none; }
.quiz__step.is-exit-fwd, .quiz__step.is-exit-back,
.quiz__step.is-enter-fwd, .quiz__step.is-enter-back { animation: none; }
.quiz__progress-bar { transition: none; }
.quiz__mark-ping, .quiz__mark-pulse { animation: none; }
}
/* ── футер ──────────────────────────────────────────────────────────────── */
.footer { background: var(--ink-deep); padding: 40px 0; }
.footer__inner { display: flex; flex-direction: column; gap: 10px; }
.footer__legal { max-width: 940px; font-size: 13px; line-height: 1.65; color: var(--light-dim); }
.footer__pd { font-size: 12px; color: var(--light-dim); }
/* Кнопка отдельной строкой в той же колонке. align-self, а не width: во всю ширину
подвала она читалась бы как главный CTA страницы, а это не он. */
.footer__contact {
align-self: flex-start; margin-top: 8px;
font-family: var(--sans); font-size: 11px; font-weight: 600;
text-transform: uppercase; letter-spacing: .18em; color: var(--light-2);
padding: 12px 26px; background: none;
border: 1px solid var(--dark-line); border-radius: 0; cursor: pointer;
transition: color .2s ease, border-color .2s ease;
}
.footer__contact:hover, .footer__contact:focus-visible { color: var(--accent); border-color: var(--accent); }
/* ── обратная связь: модалка из подвала ─────────────────────────────────── */
/* Нативный