/* ============================================================
Дизайн-система для сервиса регистрации на мероприятия
Файл 1 из 2: токены + база + компоненты
Всё, что нужно менять под себя, — в блоке :root
============================================================ */
:root{
/* ---------- ЦВЕТ ---------- */
--brand-050:#FFF3ED;
--brand-100:#FFE0D1;
--brand-300:#FFA97E;
--brand-500:#F04E23; /* основной оранжевый */
--brand-600:#D8431A;
--brand-700:#A93212;
--ink-900:#0F0D0C; /* почти чёрный, тёплый */
--ink-800:#1C1815;
--ink-700:#2A2523;
--ink-500:#544C47;
--grey-500:#8E949A; /* серый «пальто» маскота */
--grey-400:#AEB4B9;
--grey-200:#DDD9D3;
--cream-050:#FDFBF8;
--cream-100:#F7F2EA;
--cream-200:#EFE8DD;
--white:#FFFFFF;
/* смысловые роли */
--bg:var(--cream-100);
--bg-panel:var(--cream-050);
--fg:var(--ink-900);
--fg-muted:var(--ink-500);
--fg-on-dark:var(--cream-050);
--line:rgba(15,13,12,.12);
--line-strong:rgba(15,13,12,.22);
/* ---------- ТИПОГРАФИКА ---------- */
--font-display:"Unbounded",system-ui,sans-serif; /* крупные заголовки */
--font-body:"Onest",system-ui,sans-serif; /* текст */
--font-mono:"JetBrains Mono",ui-monospace,monospace;/* микро-подписи */
--fs-hero:clamp(2.6rem,9vw,7.5rem);
--fs-h1:clamp(2rem,5.2vw,4rem);
--fs-h2:clamp(1.5rem,3.2vw,2.4rem);
--fs-h3:clamp(1.15rem,1.8vw,1.5rem);
--fs-body:clamp(1rem,1.1vw,1.125rem);
--fs-small:.875rem;
--fs-micro:.6875rem; /* моно-подписи */
--lh-tight:.95;
--lh-body:1.55;
--tracking-micro:.16em;
/* ---------- ФОРМА И РИТМ ---------- */
--r-sm:12px;
--r-md:20px;
--r-lg:32px;
--r-xl:44px;
--r-pill:999px;
--sp-1:4px; --sp-2:8px; --sp-3:12px; --sp-4:16px;
--sp-5:24px; --sp-6:32px; --sp-7:48px; --sp-8:64px; --sp-9:96px;
--shadow-card:0 2px 4px rgba(15,13,12,.04),0 12px 32px rgba(15,13,12,.08);
--shadow-pop:0 4px 8px rgba(15,13,12,.06),0 24px 64px rgba(15,13,12,.14);
/* заметная обводка «стикера» вокруг маскота */
--sticker:
drop-shadow(2px 0 0 #fff) drop-shadow(-2px 0 0 #fff)
drop-shadow(0 2px 0 #fff) drop-shadow(0 -2px 0 #fff)
drop-shadow(0 14px 28px rgba(15,13,12,.20));
--grain:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='4'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23n)' opacity='.5'/%3E%3C/svg%3E");
}
/* ============================================================
БАЗА
============================================================ */
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
body{
margin:0;
background:var(--bg);
color:var(--fg);
font-family:var(--font-body);
font-size:var(--fs-body);
line-height:var(--lh-body);
font-weight:400;
-webkit-font-smoothing:antialiased;
}
img,svg,video{max-width:100%;display:block}
a{color:inherit;text-decoration:none}
h1,h2,h3{margin:0;font-family:var(--font-display);font-weight:800;line-height:var(--lh-tight);letter-spacing:-.02em}
p{margin:0 0 var(--sp-4)}
:focus-visible{outline:3px solid var(--brand-500);outline-offset:3px;border-radius:4px}
.wrap{width:min(1200px,100% - 2 * var(--sp-5));margin-inline:auto}
.section{padding-block:var(--sp-9)}
.section--tight{padding-block:var(--sp-7)}
/* ============================================================
КОМПОНЕНТЫ
============================================================ */
/* --- моно-подпись в стиле референса: ТЕКСТ → ТЕКСТ → ТЕКСТ --- */
.u-label{
font-family:var(--font-mono);font-size:var(--fs-micro);
text-transform:uppercase;letter-spacing:var(--tracking-micro);
color:var(--fg-muted);font-weight:500;
}
.u-label--arrows{display:flex;flex-wrap:wrap;gap:var(--sp-3);align-items:center}
.u-label--arrows span::after{content:" → ";color:var(--brand-500);font-weight:400}
.u-label--arrows span:last-child::after{content:""}
/* --- «плита»: скруглённая карточка на кремовом фоне --- */
.panel{
background:var(--bg-panel);
border-radius:var(--r-xl);
padding:clamp(24px,4vw,56px);
box-shadow:var(--shadow-card);
}
.panel--dark{background:var(--ink-900);color:var(--fg-on-dark)}
.panel--dark .u-label{color:rgba(253,251,248,.6)}
.panel--brand{
background:linear-gradient(135deg,var(--brand-700) 0%,var(--brand-500) 55%,#FF7A45 100%);
color:var(--white);
position:relative;overflow:hidden;
}
.panel--brand::after{
content:"";position:absolute;inset:0;background-image:var(--grain);
opacity:.22;mix-blend-mode:overlay;pointer-events:none;
}
.panel--brand .u-label{color:rgba(255,255,255,.7)}
/* --- кнопки --- */
.btn{
display:inline-flex;align-items:center;justify-content:center;gap:var(--sp-2);
font-family:var(--font-body);font-weight:600;font-size:1rem;
padding:14px 28px;border-radius:var(--r-pill);
border:1.5px solid transparent;cursor:pointer;
transition:transform .18s cubic-bezier(.2,.8,.3,1),background .18s,box-shadow .18s,color .18s;
}
.btn--primary{background:var(--brand-500);color:var(--white);box-shadow:0 8px 20px rgba(240,78,35,.28)}
.btn--primary:hover{background:var(--brand-600);transform:translateY(-2px);box-shadow:0 12px 28px rgba(240,78,35,.36)}
.btn--dark{background:var(--ink-900);color:var(--fg-on-dark)}
.btn--dark:hover{transform:translateY(-2px)}
.btn--ghost{background:transparent;border-color:var(--line-strong);color:var(--fg)}
.btn--ghost:hover{border-color:var(--fg);transform:translateY(-2px)}
.btn--block{width:100%}
.btn[disabled],.btn[aria-disabled="true"]{
background:var(--grey-200);color:var(--ink-500);box-shadow:none;cursor:not-allowed;transform:none;
}
/* --- афиша / карточка события --- */
.card{
background:var(--white);border-radius:var(--r-lg);overflow:hidden;
box-shadow:var(--shadow-card);transition:transform .22s cubic-bezier(.2,.8,.3,1),box-shadow .22s;
}
.card:hover{transform:translateY(-4px);box-shadow:var(--shadow-pop)}
.card__cover{aspect-ratio:16/9;background:var(--brand-100);position:relative;overflow:hidden}
.card__cover img{width:100%;height:100%;object-fit:cover}
.card__body{padding:var(--sp-5)}
.card__meta{display:flex;gap:var(--sp-4);flex-wrap:wrap;margin-top:var(--sp-3)}
/* --- чип/бейдж: свободные места, квота, статус --- */
.chip{
display:inline-flex;align-items:center;gap:6px;
font-family:var(--font-mono);font-size:var(--fs-micro);
text-transform:uppercase;letter-spacing:var(--tracking-micro);font-weight:500;
padding:7px 12px;border-radius:var(--r-pill);
background:var(--brand-050);color:var(--brand-700);border:1px solid var(--brand-100);
}
.chip--ok{background:#EAF7EE;color:#1E6B38;border-color:#C8E6D3}
.chip--wait{background:#FFF6E5;color:#8A5A00;border-color:#F5E0B0}
.chip--dead{background:#F2F0ED;color:var(--ink-500);border-color:var(--grey-200)}
/* --- полоса статистики (75% / 25% / 90 мин / 07 сек) --- */
.stat-strip{
display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));
gap:1px;background:var(--line);border-radius:var(--r-md);overflow:hidden;
}
.stat{background:var(--bg-panel);padding:var(--sp-5)}
.stat__num{font-family:var(--font-display);font-weight:800;font-size:clamp(2rem,4vw,3.25rem);line-height:1}
.stat__num sup{font-size:.4em;color:var(--brand-500);vertical-align:super}
.stat__cap{font-size:var(--fs-small);color:var(--fg-muted);margin-top:var(--sp-2);line-height:1.35}
/* --- форма / поля --- */
.field{display:block;margin-bottom:var(--sp-4)}
.field__label{display:block;font-size:var(--fs-small);font-weight:500;margin-bottom:6px}
.field__hint{font-size:.75rem;color:var(--fg-muted);margin-top:4px}
.input,.select{
width:100%;padding:13px 16px;font:inherit;
background:var(--white);color:var(--fg);
border:1.5px solid var(--line-strong);border-radius:var(--r-sm);
transition:border-color .16s,box-shadow .16s;
}
.input:focus,.select:focus{
outline:none;border-color:var(--brand-500);box-shadow:0 0 0 4px var(--brand-050);
}
.input::placeholder{color:var(--grey-400)}
.field--error .input{border-color:var(--brand-600)}
.field--error .field__hint{color:var(--brand-700)}
.check{display:flex;gap:10px;align-items:flex-start;margin-bottom:var(--sp-3);cursor:pointer}
.check input{
appearance:none;flex:0 0 auto;width:20px;height:20px;margin-top:2px;
border:1.5px solid var(--line-strong);border-radius:5px;background:var(--white);
cursor:pointer;transition:background .16s,border-color .16s;
}
.check input:checked{
background:var(--brand-500) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M3 8.5l3.2 3.2L13 5' stroke='%23fff' stroke-width='2.2' fill='none' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/14px no-repeat;
border-color:var(--brand-500);
}
.check span{font-size:var(--fs-small);line-height:1.45}
.check a{color:var(--brand-600);text-decoration:underline;text-underline-offset:2px}
/* --- выбор типа билета --- */
.ticket{
display:flex;gap:var(--sp-4);justify-content:space-between;align-items:flex-start;
padding:var(--sp-4);border:1.5px solid var(--line);border-radius:var(--r-md);
background:var(--white);cursor:pointer;transition:border-color .16s,box-shadow .16s;
}
.ticket:hover{border-color:var(--grey-400)}
.ticket[aria-checked="true"]{border-color:var(--brand-500);box-shadow:0 0 0 4px var(--brand-050)}
.ticket__price{font-family:var(--font-display);font-weight:800;white-space:nowrap}
/* --- прогресс квоты --- */
.quota{height:6px;border-radius:var(--r-pill);background:var(--grey-200);overflow:hidden}
.quota__fill{height:100%;background:var(--brand-500);border-radius:inherit;transition:width .5s cubic-bezier(.2,.8,.3,1)}
.quota--full .quota__fill{background:var(--ink-900)}
/* --- cookie-баннер --- */
.cookie{
position:fixed;left:var(--sp-5);right:var(--sp-5);bottom:var(--sp-5);z-index:80;
max-width:760px;margin-inline:auto;
background:var(--ink-900);color:var(--fg-on-dark);
border-radius:var(--r-lg);padding:var(--sp-5);
box-shadow:var(--shadow-pop);
display:flex;gap:var(--sp-5);align-items:center;flex-wrap:wrap;
}
.cookie p{margin:0;font-size:var(--fs-small);color:rgba(253,251,248,.78);flex:1 1 320px}
.cookie__actions{display:flex;gap:var(--sp-3);flex-wrap:wrap}
/* ============================================================
МАСКОТ
============================================================ */
.mascot{
filter:var(--sticker);
transform-origin:50% 100%;
animation:mascot-bob 3.6s ease-in-out infinite;
will-change:transform;
}
/* «идёт» — покачивание с лёгким поворотом */
@keyframes mascot-bob{
0%,100%{transform:translateY(0) rotate(-1.4deg)}
50% {transform:translateY(-14px) rotate(1.4deg)}
}
/* появление из-за края */
.mascot--enter{animation:mascot-enter .9s cubic-bezier(.2,.9,.25,1) both,mascot-bob 3.6s ease-in-out 1s infinite}
@keyframes mascot-enter{
from{opacity:0;transform:translateY(60px) rotate(-8deg) scale(.9)}
to {opacity:1;transform:translateY(0) rotate(-1.4deg) scale(1)}
}
/* реакция на наведение: подпрыгивает и «машет» */
.mascot:hover{animation:mascot-cheer .7s cubic-bezier(.2,.9,.25,1)}
@keyframes mascot-cheer{
0%{transform:translateY(0) rotate(0) scale(1)}
35%{transform:translateY(-26px) rotate(6deg) scale(1.06)}
65%{transform:translateY(-8px) rotate(-4deg) scale(1.02)}
100%{transform:translateY(0) rotate(-1.4deg) scale(1)}
}
.mascot--float{animation:mascot-float 5s ease-in-out infinite}
@keyframes mascot-float{
0%,100%{transform:translateY(0)}
50%{transform:translateY(-18px)}
}
/* ============================================================
АДАПТИВ И ДОСТУПНОСТЬ
============================================================ */
.hero-grid{display:grid;grid-template-columns:1.15fr .85fr;gap:var(--sp-5);align-items:center}
.two-col{display:grid;grid-template-columns:1fr 1fr;gap:var(--sp-7)}
@media (max-width:860px){
.hero-grid,.two-col{grid-template-columns:1fr}
.section{padding-block:var(--sp-7)}
.cookie{left:var(--sp-4);right:var(--sp-4);bottom:var(--sp-4)}
}
/* Уважаем системную настройку «меньше движения» */
@media (prefers-reduced-motion:reduce){
html{scroll-behavior:auto}
.mascot,.mascot--enter,.mascot--float{animation:none !important}
.btn,.card{transition:none}
}