/* ══════════════════════════════════════════════════════════════════════════════
А-ФЕСТ 2026 · ЕДИНЫЙ ФИРМЕННЫЙ СТИЛЬ МОБИЛЬНЫХ СТРАНИЦ
Источник палитры — «А-ФЕСТ 2026.pptx» (цвета слайдов: 0061A0, 41B3E1,
EC6F40, E6293A) и обложка «А-ФЕСТ 2026_8.09.pdf»: глубокий синий сверху,
голубая волна справа, тёплое оранжево-красное свечение снизу слева.
Правила, унаследованные от РК-феста (они себя оправдали на трёх фестивалях):
1. Один стиль на ВСЕ страницы: клиент, сотрудник, статистика, печать QR.
2. Мобильный первым. Ширина колонки 520px, кнопка не ниже 54px по высоте —
человек стоит в проходе и тычет одной рукой.
3. Холст никогда не белый: фон живёт на , body прозрачный.
4. Цвет несёт смысл: голубой = действие, оранжевый = «сделал сам»,
синий приглушённый = «сделал менеджер». Зелёного нет.
══════════════════════════════════════════════════════════════════════════════ */
/* ── 1. ТОКЕНЫ ─────────────────────────────────────────────────────────────── */
:root{
--navy:#061229; --navy2:#0a2350; --blue:#0061A0; --blue-lt:#2b8ecb;
--cyan:#41B3E1; --cyan-lt:#7fd0ef;
--orange:#EC6F40; --red:#E6293A;
/* Светлее прежнего: холст стал насыщеннее, и внизу экрана текст попадает
на тёплое пятно — там прежние #d7e6f5 / #9fb7d4 переставали читаться. */
--ink:#ffffff; --ink2:#e8f1fb; --muted:#c2d6ec;
/* Плотнее прежнего: на насыщенном холсте полупрозрачная подложка .07
переставала читаться как отдельная карточка — края растворялись. */
--card:rgba(6,18,41,.42);
--card2:rgba(6,18,41,.28);
--line:rgba(255,255,255,.18);
--line2:rgba(255,255,255,.30);
--input:rgba(3,10,26,.42);
--sheet:#0b2247;
--r:16px; --r-lg:22px;
--gut:18px;
--tap:54px;
}
*{box-sizing:border-box;-webkit-tap-highlight-color:transparent}
html,body{overflow-x:hidden}
html{background-color:#061229}
/* ── 2. ХОЛСТ ──────────────────────────────────────────────────────────────
Диагональ «глубокий синий → фирменный синий → голубой», а тёплое пятно
светит снизу слева — как на обложке презентации. Слой фиксированный,
поэтому при прокрутке длинной формы фон не «уезжает» полосами.
ПРАВКА 07.09 (владелец): «в телефоне всё как будто синее, хотя на компьютере
видны переливания». Причина не в палитре, а в геометрии. Диагональ 158° на
экране шириной 390 px проходит почти по горизонтали, и в кадр попадает
короткий кусок перехода; вдобавок первые 60% шкалы занимали три почти
неразличимых тёмно-синих тона (#050f24 → #071a3d → #0a3168), которые на
телефоне при автояркости сливаются в один.
Что сделано:
1. Угол 158° → 172°: на узком экране переход идёт СВЕРХУ ВНИЗ, а не вбок,
и целиком помещается в кадр.
2. Раздвинут тональный диапазон: верх темнее, середина — насыщенный
фирменный синий с голубым, низ теплее и начинается раньше.
3. Голубое пятно поднято к верхнему правому углу и усилено, тёплое поднято
с 104% до 88% — раньше оно светило ниже нижнего края телефона. */
body{
margin:0;background:transparent;color:var(--ink);
font:15.5px/1.45 'Manrope',-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,Arial,sans-serif;
letter-spacing:-.1px;min-height:100vh;
padding-bottom:env(safe-area-inset-bottom);
/* Тень в один пиксель. Холст фиксированный, поэтому нижняя часть экрана
всегда тёплая, и любой текст без карточки оказывается на оранжевом.
Тень держит его читаемым, не глуша сам перелив. */
text-shadow:0 1px 2px rgba(3,10,26,.45);
}
body::before{
content:'';position:fixed;inset:0;z-index:-2;pointer-events:none;
background:
radial-gradient(88% 32% at 92% 1%, rgba(96,208,247,.60) 0%, rgba(96,208,247,0) 66%),
radial-gradient(76% 30% at 4% 86%, rgba(255,124,58,.88) 0%, rgba(255,124,58,0) 62%),
radial-gradient(54% 24% at 44% 101%, rgba(233,45,60,.78) 0%, rgba(233,45,60,0) 66%),
linear-gradient(172deg,
#030a1c 0%, #061a42 13%, #0a2f6e 28%, #0b56a0 44%,
#1580c2 58%, #3f6fa8 70%, #7a4a72 81%, #b8402c 92%, #dd5a20 100%);
background-repeat:no-repeat;
}
/* Волна — эхо знака в логотипе. Держим очень тихой: она задаёт «воздух»,
но не спорит с текстом. */
body::after{
content:'';position:fixed;left:-10%;right:-10%;bottom:-4%;height:62%;z-index:-1;
pointer-events:none;opacity:.42;
background:
radial-gradient(58% 100% at 18% 100%, rgba(255,255,255,.20) 0%, transparent 70%),
radial-gradient(66% 100% at 82% 96%, rgba(96,208,247,.30) 0%, transparent 70%);
-webkit-mask-image:linear-gradient(180deg,transparent 0%,#000 40%);
mask-image:linear-gradient(180deg,transparent 0%,#000 40%);
}
/* ── 3. КАРКАС ─────────────────────────────────────────────────────────────── */
.wrap{max-width:520px;margin:0 auto;padding:0 var(--gut) 42px}
.head{
position:sticky;top:0;z-index:20;
display:flex;align-items:center;gap:12px;
padding:calc(12px + env(safe-area-inset-top)) var(--gut) 12px;
margin:0 calc(var(--gut) * -1) 16px;
background:linear-gradient(180deg,rgba(5,12,30,.94) 0%,rgba(6,18,41,.72) 70%,rgba(6,18,41,0) 100%);
backdrop-filter:blur(9px);-webkit-backdrop-filter:blur(9px);
}
.head .logo{height:26px;width:auto;flex:none;display:block}
.head .who{margin-left:auto;text-align:right;font-size:13px;font-weight:700;
overflow:hidden;text-overflow:ellipsis;white-space:nowrap;max-width:56%}
.head .who small{display:block;font-weight:600;font-size:11px;color:var(--muted)}
.head .exit{background:none;border:none;color:var(--muted);font:inherit;font-size:12px;
text-decoration:underline;cursor:pointer;padding:4px 0;flex:none}
/* ── 4. ТИПОГРАФИКА ────────────────────────────────────────────────────────── */
h1{font-size:27px;font-weight:800;letter-spacing:-.7px;line-height:1.14;margin:0 0 6px}
h2{font-size:19px;font-weight:800;letter-spacing:-.4px;margin:0 0 10px}
h3{font-size:15px;font-weight:800;letter-spacing:.4px;text-transform:uppercase;
color:var(--cyan-lt);margin:22px 0 10px}
p{margin:0 0 12px}
.lead{color:var(--ink2);font-size:15px;margin:0 0 18px}
.muted{color:var(--muted);font-size:13px}
.tiny{font-size:12px;color:var(--muted);line-height:1.4}
.num{font-variant-numeric:tabular-nums}
/* Плашка события — одна строка, которая говорит «где я». */
.evt{display:inline-flex;align-items:center;gap:8px;font-size:12px;font-weight:700;
color:var(--ink2);background:rgba(255,255,255,.09);border:1px solid var(--line);
border-radius:999px;padding:6px 13px;margin-bottom:14px}
.evt b{color:#fff}
.evt .dot{width:7px;height:7px;border-radius:50%;background:var(--cyan);flex:none}
/* ── 5. КАРТОЧКИ ───────────────────────────────────────────────────────────── */
.card{background:var(--card);border:1px solid var(--line);border-radius:var(--r-lg);
padding:18px;margin-bottom:14px;backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px)}
.card.tight{padding:14px}
.card.flat{background:var(--card2)}
/* ── 6. КНОПКИ ─────────────────────────────────────────────────────────────── */
button{font-family:inherit;cursor:pointer;border:none}
.btn{display:flex;align-items:center;justify-content:center;gap:10px;width:100%;
min-height:var(--tap);border-radius:15px;padding:15px 18px;
font-size:16.5px;font-weight:800;letter-spacing:-.2px;transition:transform .08s, opacity .15s}
.btn:active{transform:scale(.985)}
.btn + .btn{margin-top:10px}
.btn-1{background:linear-gradient(135deg,var(--cyan) 0%,var(--blue) 100%);color:#fff;
box-shadow:0 8px 22px rgba(0,97,160,.42)}
.btn-2{background:rgba(255,255,255,.10);color:#fff;border:1px solid var(--line2)}
.btn-warm{background:linear-gradient(135deg,var(--orange) 0%,var(--red) 100%);color:#fff;
box-shadow:0 8px 22px rgba(230,41,58,.35)}
.btn:disabled{opacity:.45;pointer-events:none;box-shadow:none}
.btn-sm{min-height:auto;padding:11px 16px;font-size:14.5px;border-radius:12px;width:auto}
.link{background:none;border:none;color:var(--cyan-lt);font:inherit;font-weight:700;
text-decoration:underline;text-underline-offset:3px;cursor:pointer;padding:10px 0;width:100%}
/* ── 7. ПОЛЯ ───────────────────────────────────────────────────────────────── */
label.lbl{display:block;font-size:13px;font-weight:700;color:var(--ink2);margin:14px 0 6px}
label.lbl:first-child{margin-top:0}
label.lbl .req{color:var(--cyan)}
.field{width:100%;min-height:50px;border-radius:13px;padding:13px 14px;font-size:16px;
border:1px solid var(--line2);background:var(--input);color:#fff;font-family:inherit;
-webkit-appearance:none;appearance:none}
.field::placeholder{color:rgba(255,255,255,.42)}
.field:focus{outline:none;border-color:var(--cyan);box-shadow:0 0 0 3px rgba(65,179,225,.22)}
.field.bad{border-color:var(--red);box-shadow:0 0 0 3px rgba(230,41,58,.25)}
select.field{padding-right:40px;
background-image:url("data:image/svg+xml;utf8,");
background-repeat:no-repeat;background-position:right 14px center}
select.field option{color:#0b1f3f;background:#fff}
textarea.field{min-height:84px;resize:vertical;line-height:1.4}
.err{color:#ffb3ba;font-size:12.5px;margin:5px 0 0;font-weight:600}
.two{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.two .lbl{margin-top:0}
/* согласие */
.agree{display:flex;align-items:flex-start;gap:12px;margin:18px 0 4px;cursor:pointer}
.agree input{width:23px;height:23px;flex:none;margin:1px 0 0;accent-color:var(--cyan)}
.agree span{font-size:13.5px;line-height:1.4;color:#fff}
.agree a{color:var(--cyan-lt)}
/* ── 8. ПЛИТКИ РАЗДЕЛОВ ────────────────────────────────────────────────────── */
.tiles{display:grid;grid-template-columns:1fr 1fr;gap:11px}
.tile{position:relative;display:flex;flex-direction:column;justify-content:space-between;
min-height:126px;text-align:left;padding:15px;border-radius:var(--r);
background:var(--card);border:1px solid var(--line);color:#fff}
.tile:active{transform:scale(.98)}
.tile .ic{width:34px;height:34px}
.tile b{display:block;font-size:15.5px;font-weight:800;line-height:1.2;letter-spacing:-.2px}
.tile i{display:block;font-style:normal;font-size:11.5px;color:var(--muted);margin-top:3px}
.tile.wide{grid-column:1 / -1;min-height:auto;flex-direction:row;align-items:center;gap:14px}
.tile.wide .ic{flex:none}
.tile.done{border-color:rgba(65,179,225,.55);background:rgba(65,179,225,.13)}
.tile .mark{position:absolute;top:11px;right:11px;font-size:11px;font-weight:800;
color:var(--navy);background:var(--cyan);border-radius:999px;padding:3px 8px}
.tile.accent{background:linear-gradient(135deg,rgba(236,111,64,.26),rgba(230,41,58,.20));
border-color:rgba(236,111,64,.45)}
.tile.accent .ic{stroke:#ffc4a8}
/* Базовый размер иконки. Без него голый