/* ═══════════════════════════════════════════════════════════════════ ТЕЙК ХАБ — слой темы и компоненты. Сред две. Светлая — основная, она же по умолчанию. Тёмная (OLED, фон #000000) включается вручную или сама после 20:00. Тему выбирает app.js и ставит атрибут data-theme на : тут только значения ролей. Всё остальное оформление их читает, поэтому вторая тема ничего не ломает. Базовые токены лежат в _ds/…/tokens/*.css. ═══════════════════════════════════════════════════════════════════ */ /* ——— СВЕТЛАЯ СРЕДА (по умолчанию) ——— */ :root, :root[data-theme="light"]{ color-scheme:light; /* Поверхности */ --t-page:#FFFFFF; /* фон страницы */ --t-card:#FAFAFB; /* карточка */ --t-sunken:#EFEFF3; /* обложка, заглушка медиа */ --t-raised:#FFFFFF; /* всплывающее: меню, тост */ /* Линии */ --t-line:rgba(10,10,20,.10); --t-line-2:rgba(10,10,20,.18); --t-ink-strong:rgba(10,10,20,.34); /* Текст */ --t-ink:#0B0B12; --t-muted:#5E5E6C; --t-dim:#8A8A98; /* Акцент — синий карандаш. 7.6:1 на белом. */ --t-accent:#1E45FB; --t-accent-hi:#123AE0; --t-accent-ink:#FFFFFF; --t-wash:rgba(30,69,251,.07); --t-accent-line:rgba(30,69,251,.42); --t-ok:#0F7B4F; --t-danger:#C4362B; --t-shadow-menu:0 18px 44px rgba(10,10,25,.16); --t-shadow-toast:0 16px 40px rgba(10,10,25,.18); --t-header-bg:rgba(255,255,255,.82); --t-card-hover:#F3F3F7; --t-hero-glow:rgba(30,69,251,.10); --t-skel-hi:#E3E3EA; --t-hover-fill:rgba(10,10,20,.04); --t-ink-2:#3A3A46; /* Жидкое стекло подвала и синий свет со дна страницы */ --t-glass:rgba(255,255,255,.52); --t-glass-line:rgba(10,10,20,.10); --t-glass-spec:rgba(255,255,255,.95); /* Свет со дна на белом виден куда сильнее, чем на чёрном: держим его тише, иначе низ страницы уходит в серо-синюю муть. */ --t-glass-inner:rgba(30,69,251,.07); --t-glow-bottom:rgba(30,69,251,.16); /* Шрифт */ --t-display:var(--font-display); --t-body:var(--font-body); --t-mono:var(--font-mono); /* Форма */ --t-r:8px; --t-r-s:6px; --t-r-l:14px; --t-r-cover:10px; --t-r-pill:999px; /* Сетка */ --t-max:1320px; --t-gut:clamp(16px,3vw,40px); /* Движение */ --t-ease:cubic-bezier(.2,0,0,1); --t-spring:cubic-bezier(.22,1,.36,1); --t-fast:120ms; --t-base:220ms; /* Насколько «приближается» выбранный блок. Было 1.02 — уменьшено вдвое по требованию: 1.01. */ --t-sel-scale:1.01; --t-z-header:40; --t-z-menu:50; --t-z-toast:80; } /* ——— ТЁМНАЯ СРЕДА (OLED) ——— Меняются только цвета: форма, ритм и движение общие. */ :root[data-theme="dark"]{ color-scheme:dark; --t-page:#000000; --t-card:#0B0B0D; --t-sunken:#141418; --t-raised:#121216; --t-line:rgba(255,255,255,.10); --t-line-2:rgba(255,255,255,.16); --t-ink-strong:rgba(255,255,255,.28); --t-ink:#F5F5F7; --t-muted:#9A9AA5; --t-dim:#6E6E78; /* Ночной карандаш: 6.4:1 на чёрном. */ --t-accent:#5C7BFF; --t-accent-hi:#8AA0FF; --t-accent-ink:#04060F; --t-wash:rgba(92,123,255,.12); --t-accent-line:rgba(92,123,255,.55); --t-ok:#3DDC97; --t-danger:#FF6B5E; --t-shadow-menu:0 18px 44px rgba(0,0,0,.7); --t-shadow-toast:0 16px 40px rgba(0,0,0,.7); --t-header-bg:rgba(0,0,0,.82); --t-card-hover:#0F0F12; --t-hero-glow:rgba(92,123,255,.18); --t-skel-hi:#1D1D22; --t-hover-fill:rgba(255,255,255,.05); --t-ink-2:#C9C9D2; --t-glass:rgba(12,12,18,.42); --t-glass-line:rgba(255,255,255,.14); --t-glass-spec:rgba(255,255,255,.42); --t-glass-inner:rgba(92,123,255,.16); --t-glow-bottom:rgba(92,123,255,.34); } /* Смена темы — мягкая, но не мешает нажатиям. */ html.tk-theme-swap, html.tk-theme-swap body{transition:background-color 280ms var(--t-ease)} *,*::before,*::after{box-sizing:border-box} html{-webkit-text-size-adjust:100%} html,body{margin:0;padding:0;background:var(--t-page)} body{ color:var(--t-ink); font:var(--text-paragraph); font-family:var(--t-body); min-height:100dvh; -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility; } *{-webkit-tap-highlight-color:transparent} img,svg{max-width:100%} a{color:var(--t-accent);text-decoration:none;transition:color var(--t-fast) var(--t-ease)} a:hover{color:var(--t-accent-hi)} button{font:inherit;color:inherit;touch-action:manipulation} input,select,textarea{font-family:var(--t-body);color:var(--t-ink)} :focus-visible{outline:2px solid var(--t-accent);outline-offset:2px;border-radius:2px} ::selection{background:var(--t-accent);color:var(--t-accent-ink)} ::placeholder{color:var(--t-dim)} /* Полосы прокрутки в тон среде */ *{scrollbar-color:var(--t-ink-strong) transparent;scrollbar-width:thin} *::-webkit-scrollbar{width:10px;height:10px} *::-webkit-scrollbar-thumb{background:var(--t-line-2);border-radius:99px;border:3px solid transparent;background-clip:content-box} *::-webkit-scrollbar-thumb:hover{background:var(--t-ink-strong);background-clip:content-box} @keyframes tk-rise{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}} @keyframes tk-fade{from{opacity:0}to{opacity:1}} @keyframes tk-toast{from{opacity:0;transform:translate(-50%,14px)}to{opacity:1;transform:translate(-50%,0)}} @keyframes tk-shimmer{from{background-position:-200% 0}to{background-position:200% 0}} @keyframes tk-spin{to{transform:rotate(360deg)}} @media (prefers-reduced-motion:reduce){ *,*::before,*::after{animation-duration:1ms !important;animation-iteration-count:1 !important;transition-duration:1ms !important;scroll-behavior:auto !important} } /* Переход между экранами — только там, где браузер умеет. */ @view-transition{navigation:none} ::view-transition-old(root){animation:tk-fade 140ms var(--t-ease) reverse both} ::view-transition-new(root){animation:tk-fade 220ms var(--t-ease) both} /* ——— Реакции на наведение и нажатие ——— */ .h72{transition:opacity var(--t-fast) var(--t-ease),color var(--t-fast) var(--t-ease)} .h72:hover{opacity:.72} .a98{transition:transform var(--t-fast) var(--t-ease),opacity var(--t-fast) var(--t-ease)} .a98:not(:disabled):active{transform:scale(.98)} .a99:not(:disabled):active{transform:scale(.99)} .a995:not(:disabled):active{transform:scale(.995)} .noscroll{scrollbar-width:none} .noscroll::-webkit-scrollbar{display:none} /* Ссылка «к содержимому» для клавиатуры */ .tk-skip{ position:fixed;left:12px;top:-60px;z-index:100; background:var(--t-accent);color:var(--t-accent-ink); padding:10px 16px;border-radius:var(--t-r-s); font:500 14px/1 var(--t-body); transition:top var(--t-base) var(--t-ease); } .tk-skip:focus{top:12px;color:var(--t-accent-ink)} /* ═══ Компоненты дизайн-системы ═══════════════════════════════════ */ /* Button */ .ds-btn{ font:500 15px/1 var(--t-body); border:1px solid transparent; border-radius:var(--t-r); min-height:var(--tap-min); padding:0 20px; cursor:pointer; display:inline-flex; align-items:center; justify-content:center; gap:8px; white-space:nowrap; transition:background var(--t-fast) var(--t-ease),border-color var(--t-fast) var(--t-ease), color var(--t-fast) var(--t-ease),transform var(--t-fast) var(--t-ease),opacity var(--t-fast) var(--t-ease); } .ds-btn--primary{background:var(--t-accent);color:var(--t-accent-ink);border-color:var(--t-accent);font-weight:600} .ds-btn--primary:not(:disabled):hover{background:var(--t-accent-hi);border-color:var(--t-accent-hi)} .ds-btn--secondary{background:transparent;color:var(--t-ink);border-color:var(--t-line-2)} .ds-btn--secondary:not(:disabled):hover{border-color:var(--t-ink-strong);background:var(--t-hover-fill)} .ds-btn--ghost{background:transparent;color:var(--t-muted);border-color:transparent;padding:0 10px} .ds-btn--ghost:not(:disabled):hover{color:var(--t-ink)} .ds-btn--danger{background:transparent;color:var(--t-danger);border-color:rgba(255,107,94,.5)} .ds-btn--danger:not(:disabled):hover{background:rgba(255,107,94,.1)} .ds-btn--s{min-height:36px;padding:0 14px;font-size:13px} .ds-btn--l{min-height:52px;padding:0 26px;font-size:16px} .ds-btn--full{width:100%} .ds-btn:not(:disabled):active{transform:scale(.985)} .ds-btn:disabled{opacity:.42;cursor:not-allowed} /* Input / Select — общая обёртка поля */ .ds-field{display:block;min-width:0} .ds-field__label{ display:block; font:var(--text-meta); font-size:10px; letter-spacing:var(--tracking-mono); text-transform:uppercase; color:var(--t-muted); margin-bottom:7px; } .ds-field__hint{ display:block; margin-top:6px; font:300 12px/1.4 var(--t-body); color:var(--t-muted); } .ds-field__hint--error{color:var(--t-danger)} .ds-input,.ds-select{ width:100%; min-height:var(--tap-min); background:var(--t-card); color:var(--t-ink); border:1px solid var(--t-line); border-radius:var(--t-r); outline-offset:var(--focus-offset); transition:border-color var(--t-fast) var(--t-ease),background var(--t-fast) var(--t-ease); } .ds-input:hover,.ds-select:hover{border-color:var(--t-line-2)} .ds-input:focus,.ds-select:focus{border-color:var(--t-accent);outline:none;box-shadow:0 0 0 3px var(--t-wash)} .ds-input{padding:0 14px;font:400 15px/1 var(--t-body)} .ds-input--mono{font:var(--text-meta);font-size:13px} .ds-input--error{border-color:var(--t-danger)} .ds-select{ padding:0 34px 0 12px;font:400 15px/1 var(--t-body);cursor:pointer; appearance:none; background-image:linear-gradient(45deg,transparent 50%,var(--t-muted) 50%),linear-gradient(135deg,var(--t-muted) 50%,transparent 50%); background-position:calc(100% - 17px) center,calc(100% - 12px) center; background-size:5px 5px,5px 5px; background-repeat:no-repeat; } .ds-select option{background:var(--t-card);color:var(--t-ink)} /* Textarea */ .ds-textarea{ width:100%; background:var(--t-card); color:var(--t-ink); border:1px solid var(--t-line); border-radius:var(--t-r); padding:12px 14px; font:400 15px/1.5 var(--t-body); resize:vertical; transition:border-color var(--t-fast) var(--t-ease); } .ds-textarea:focus{border-color:var(--t-accent);outline:none;box-shadow:0 0 0 3px var(--t-wash)} /* Checkbox */ .ds-check{ display:inline-flex; align-items:center; gap:10px; min-height:var(--tap-min); cursor:pointer; font:400 14px/1.4 var(--t-body); color:var(--t-ink); position:relative; } .ds-check__box{ width:18px;height:18px;flex:none; border-radius:4px; border:1px solid var(--t-line-2); background:transparent; display:grid; place-items:center; transition:background var(--t-fast) var(--t-ease),border-color var(--t-fast) var(--t-ease); } .ds-check:hover .ds-check__box{border-color:var(--t-ink-strong)} .ds-check--on .ds-check__box{border-color:var(--t-accent);background:var(--t-accent)} .ds-check__box svg{display:none} .ds-check__box svg path{stroke:var(--t-accent-ink)} .ds-check--on .ds-check__box svg{display:block} .ds-check input{position:absolute;opacity:0;width:0;height:0} .ds-check input:focus-visible+.ds-check__box, .ds-check:focus-within .ds-check__box{outline:2px solid var(--t-accent);outline-offset:2px} /* Tag */ .ds-tag{ font:var(--text-meta); font-size:9.5px; letter-spacing:var(--tracking-mono); text-transform:uppercase; border:1px solid var(--t-line); border-radius:var(--t-r-pill); padding:4px 10px; display:inline-block; white-space:nowrap; color:var(--t-muted); background:transparent; } .ds-tag--accent{color:var(--t-accent);border-color:var(--t-accent-line);background:var(--t-wash)} .ds-tag--ok{color:var(--t-ok);border-color:rgba(61,220,151,.42);background:rgba(61,220,151,.1)} .ds-tag--danger{color:var(--t-danger);border-color:rgba(255,107,94,.45)} /* SegmentedControl */ .ds-seg{display:flex;gap:20px;border-bottom:1px solid var(--t-line);overflow-x:auto;scrollbar-width:none} .ds-seg::-webkit-scrollbar{display:none} .ds-seg__b{ background:none;border:none;cursor:pointer; padding:0 0 12px; font:var(--text-meta); font-size:11px; letter-spacing:var(--tracking-mono); text-transform:uppercase; color:var(--t-muted); white-space:nowrap; border-bottom:2px solid transparent; margin-bottom:-1px; transition:color var(--t-fast) var(--t-ease),border-color var(--t-base) var(--t-ease); } .ds-seg__b:hover{color:var(--t-ink)} .ds-seg__b--on{color:var(--t-ink);border-bottom-color:var(--t-accent)} /* StatRow */ .ds-stats{ display:grid; gap:1px; background:var(--t-line); border:1px solid var(--t-line); border-radius:var(--t-r); overflow:hidden; } .ds-stats__cell{background:var(--t-card);padding:16px 16px 18px} .ds-stats__label{ font:var(--text-meta); font-size:9.5px; letter-spacing:var(--tracking-mono); text-transform:uppercase; color:var(--t-muted); } .ds-stats__value{ margin-top:8px; font:800 22px/1 var(--t-display); letter-spacing:var(--tracking-display); font-variant-numeric:tabular-nums; color:var(--t-ink); } .ds-stats__delta{margin-top:6px;font:var(--text-meta);font-size:10px;color:var(--t-ok)} .ds-stats__delta--neg{color:var(--t-danger)} /* DropZone */ .ds-drop{ border:1px dashed var(--t-line-2); background:var(--t-card); border-radius:var(--t-r); padding:38px 20px; text-align:center; cursor:pointer; transition:background var(--t-fast) var(--t-ease),border-color var(--t-fast) var(--t-ease); } .ds-drop:hover{border-color:var(--t-ink-strong)} .ds-drop--over{border-color:var(--t-accent);background:var(--t-wash)} .ds-drop__t{ font:600 20px/1.2 var(--t-display); letter-spacing:var(--tracking-display-soft); color:var(--t-ink); } .ds-drop__h{ margin-top:8px; font:var(--text-meta); font-size:11px; letter-spacing:.06em; color:var(--t-muted); } /* ═══ Разметка приложения ═════════════════════════════════════════ */ /* Обрезка по обеим осям, а не только по горизонтали. Синее пятно под подвалом (.tk-app::after) висит на 240px ниже дна страницы: с overflow-x:clip эти 240px оставались прокручиваемыми, и под подвалом открывалась чёрная полоса. clip не создаёт свой скролл, поэтому липкая шапка работает как работала. */ .tk-app{position:relative;display:flex;flex-direction:column;min-height:100dvh;overflow:clip} .tk-main{flex:1} .tk-wrap{max-width:var(--t-max);margin:0 auto;padding-left:var(--t-gut);padding-right:var(--t-gut)} .tk-screen{padding-top:clamp(20px,3vw,36px);padding-bottom:clamp(56px,7vw,96px);animation:tk-fade var(--t-base) var(--t-ease) both} .tk-section{padding-top:clamp(36px,5vw,72px);padding-bottom:clamp(36px,5vw,72px)} .tk-hr{border-top:1px solid var(--t-line)} .tk-eyebrow{ font:var(--text-meta);font-size:10px;letter-spacing:var(--tracking-eyebrow); text-transform:uppercase;color:var(--t-muted); } .tk-meta{ font:var(--text-meta);font-size:10px;letter-spacing:.1em; text-transform:uppercase;color:var(--t-muted); } .tk-mono{font-family:var(--t-mono);font-size:13px;font-variant-numeric:tabular-nums} .tk-h1{margin:0;font:600 clamp(26px,3vw,38px)/1.1 var(--t-display);letter-spacing:var(--tracking-display-soft)} .tk-h1-big{margin:0;font:800 clamp(30px,3.6vw,46px)/1.03 var(--t-display);letter-spacing:var(--tracking-display)} .tk-h2{margin:0;font:600 clamp(22px,2.6vw,34px)/1.1 var(--t-display);letter-spacing:var(--tracking-display-soft)} .tk-lead{margin:14px 0 0;max-width:38em;font:300 clamp(15px,1.4vw,17px)/1.65 var(--t-body);color:var(--t-muted)} .tk-card{ border:1px solid var(--t-line); background:var(--t-card); border-radius:var(--t-r-l); transition:border-color var(--t-base) var(--t-ease),background var(--t-base) var(--t-ease),transform var(--t-base) var(--t-spring); } .tk-card--pad{padding:clamp(18px,2vw,22px)} .tk-card--hover:hover{border-color:var(--t-line-2);background:var(--t-card-hover)} .tk-grid{display:grid;gap:14px} .tk-grid--cards{grid-template-columns:repeat(auto-fill,minmax(228px,1fr))} .tk-grid--wide{grid-template-columns:repeat(auto-fit,minmax(240px,1fr))} .tk-row{display:flex;flex-wrap:wrap;gap:14px;align-items:center} .tk-split{display:flex;flex-wrap:wrap;gap:clamp(24px,4vw,44px);align-items:flex-start} .tk-between{display:flex;flex-wrap:wrap;gap:12px;align-items:baseline;justify-content:space-between} .tk-backlink{ background:none;border:none;padding:0;cursor:pointer; font:var(--text-meta);font-size:10px;letter-spacing:.14em; text-transform:uppercase;color:var(--t-muted); transition:color var(--t-fast) var(--t-ease); } .tk-backlink:hover{color:var(--t-ink)} .tk-link{ background:none;border:none;padding:0;cursor:pointer; font:var(--text-meta);font-size:10px;letter-spacing:.12em; text-transform:uppercase;color:var(--t-accent); transition:color var(--t-fast) var(--t-ease); } .tk-link:hover{color:var(--t-accent-hi)} .tk-plain{background:none;border:none;padding:0;cursor:pointer;text-align:left;color:inherit;font:inherit} /* ——— Переходы — настоящие ссылки ——— Оформление то же, что у кнопок: подчёркивание и синий цвет ссылки тут не нужны, адрес всё равно копируется и открывается в новой вкладке. */ a.tk-nav__b,a.tk-plain,a.tk-shelf,a.tk-pill,a.tk-footer__b, a.tk-backlink,a.tk-brand,a.tk-item__cover,a.tk-card{ color:inherit;text-decoration:none; } a.tk-plain{display:block} a.tk-nav__b{color:var(--t-muted)} a.tk-nav__b:hover,a.tk-nav__b--on{color:var(--t-ink)} a.tk-footer__b{color:var(--t-muted)} a.tk-footer__b:hover{color:var(--t-ink)} a.tk-backlink{color:var(--t-muted)} a.tk-backlink:hover{color:var(--t-ink)} a.tk-link{color:var(--t-accent);text-decoration:none} a.tk-link:hover{color:var(--t-accent-hi)} /* ——— Шапка ——— */ .tk-header{ position:sticky;top:0;z-index:var(--t-z-header); background:var(--t-header-bg); backdrop-filter:blur(14px); -webkit-backdrop-filter:blur(14px); border-bottom:1px solid var(--t-line); } .tk-header__in{ max-width:var(--t-max);margin:0 auto; padding:12px var(--t-gut); display:flex;flex-wrap:wrap;gap:10px 20px;align-items:center; } .tk-brand{display:flex;align-items:center;gap:10px;background:none;border:none;padding:0;cursor:pointer} .tk-brand__mark{width:30px;height:30px;display:block} .tk-brand__name{ font:var(--text-meta);font-size:11px;letter-spacing:var(--tracking-mono); text-transform:uppercase;color:var(--t-ink); } .tk-nav{display:flex;gap:18px;overflow-x:auto;font:400 15px/1.2 var(--t-body)} .tk-nav__b{ background:none;border:none;padding:6px 0;cursor:pointer;white-space:nowrap; color:var(--t-muted);position:relative; transition:color var(--t-fast) var(--t-ease); } .tk-nav__b:hover{color:var(--t-ink)} .tk-nav__b--on{color:var(--t-ink)} .tk-nav__b--on::after{ content:"";position:absolute;left:0;right:0;bottom:0;height:1px;background:var(--t-accent); } .tk-pill{ background:none;border:1px solid var(--t-line-2);border-radius:var(--t-r-pill); padding:9px 14px;cursor:pointer; font:var(--text-meta);font-size:10px;letter-spacing:.1em;text-transform:uppercase;color:var(--t-ink); display:inline-flex;align-items:center;gap:7px; transition:border-color var(--t-fast) var(--t-ease),background var(--t-fast) var(--t-ease); } .tk-pill:hover{border-color:var(--t-ink-strong);background:var(--t-hover-fill)} .tk-pill--accent{border-color:var(--t-accent-line);color:var(--t-accent)} .tk-pill__dot{ min-width:18px;height:18px;padding:0 5px;border-radius:9px; background:var(--t-accent);color:var(--t-accent-ink); display:inline-flex;align-items:center;justify-content:center; font-size:10px;font-weight:700; } .tk-menu{ position:absolute;right:0;top:calc(100% + 10px);min-width:220px; background:var(--t-raised);border:1px solid var(--t-line-2);border-radius:var(--t-r); padding:6px;display:flex;flex-direction:column; box-shadow:var(--t-shadow-menu); animation:tk-rise 180ms var(--t-spring) both; z-index:var(--t-z-menu); } .tk-menu__b{ background:none;border:none;text-align:left;padding:11px 12px;cursor:pointer; border-radius:var(--t-r-s);font:400 15px/1.2 var(--t-body);color:var(--t-ink); transition:background var(--t-fast) var(--t-ease); } .tk-menu__b:hover{background:var(--t-hover-fill)} .tk-menu__b--danger{color:var(--t-danger)} /* ——— Появление при прокрутке ———————————————————————————— Класс tk-motion ставит landing.js. Без скрипта правило не срабатывает и страница остаётся видимой — это важнее анимации. Порядок внутри группы задаёт --i. */ .tk-motion .tk-rv{ opacity:0;transform:translateY(16px); transition:opacity 560ms var(--t-ease),transform 640ms var(--t-spring); transition-delay:calc(var(--i,0) * 55ms); } .tk-motion .tk-rv--in{opacity:1;transform:none} /* ——— Лендинг ——— */ .tk-hero{ position:relative;overflow:hidden; border-bottom:1px solid var(--t-line); } /* Свет уходит за курсором: только transform, раскладка не считается. */ .tk-hero::before{ content:"";position:absolute;inset:-40% -10% auto -10%;height:120%; background:radial-gradient(60% 60% at 20% 0%,var(--t-hero-glow),transparent 70%); pointer-events:none; transform:translate3d(calc(var(--tk-mx,0) * 46px),calc(var(--tk-my,0) * 30px),0); transition:transform 500ms var(--t-ease); } .tk-hero::after{ content:"";position:absolute;inset:0;pointer-events:none; background-image:linear-gradient(var(--t-line) 1px,transparent 1px); background-size:100% 84px; mask-image:linear-gradient(#000,transparent 82%); -webkit-mask-image:linear-gradient(#000,transparent 82%); opacity:.7; } .tk-hero__in{ position:relative;z-index:1; max-width:var(--t-max);margin:0 auto; padding:clamp(48px,8vw,110px) var(--t-gut) clamp(36px,5vw,72px); } /* Слева слово, справа знак. На узком — одна колонка. */ .tk-hero__grid{ display:grid;align-items:center; gap:clamp(24px,4vw,56px); grid-template-columns:minmax(0,1.06fr) minmax(0,.94fr); } .tk-hero__copy{min-width:0} .tk-hero__title{ margin:22px 0 0; font-family:var(--t-display);font-weight:800; font-size:clamp(38px,6.2vw,84px);line-height:1.02; letter-spacing:var(--tracking-display); text-wrap:balance; } /* Акцентная строка героя: только цвет, без подчёркивания. */ .tk-hero__accent{color:var(--t-accent);white-space:nowrap} .tk-hero__sub{margin:26px 0 0;max-width:34em;font:300 clamp(16px,1.5vw,20px)/1.6 var(--t-body);color:var(--t-ink-2)} .tk-hero__cta{margin:34px 0 0;display:flex;flex-wrap:wrap;gap:12px} /* ——— Знак Тейка в объёме ——— Холст рисует landing.js: кольцо, буква и полосы звука вокруг. Подписи лежат поверх холста и переводятся вместе со страницей. */ .tk-hero__stage{ position:relative;width:100%;max-width:520px;margin:0 auto; aspect-ratio:1 / 1; } .tk-stage{position:absolute;inset:0;z-index:1} .tk-stage__cv{display:block;width:100%;height:100%} .tk-stage__halo{ position:absolute;inset:10%;z-index:0;border-radius:50%;pointer-events:none; background:radial-gradient(50% 50% at 50% 50%,var(--t-hero-glow),transparent 72%); animation:tk-breathe 9s var(--t-ease) infinite; } /* Подписи не ловят курсор: иначе они рвали бы наведение на знак. */ .tk-orbit{ position:absolute;z-index:2;pointer-events:none; padding:5px 10px;border:1px solid var(--t-line);background:var(--t-card); border-radius:var(--t-r-pill);color:var(--t-dim); font:var(--text-meta);font-size:9.5px;letter-spacing:.14em;white-space:nowrap; animation:tk-float 7s var(--t-ease) infinite; animation-delay:calc(var(--i,0) * -1.6s); } .tk-orbit--a{top:4%;left:0} .tk-orbit--b{top:27%;right:0} .tk-orbit--c{bottom:25%;left:0} .tk-orbit--d{bottom:3%;right:6%} @keyframes tk-float{0%,100%{transform:translateY(0)}50%{transform:translateY(-9px)}} @keyframes tk-breathe{0%,100%{opacity:.62;transform:scale(1)}50%{opacity:1;transform:scale(1.06)}} .tk-hero__facts{ margin:44px 0 0;display:grid;gap:1px;background:var(--t-line); border:1px solid var(--t-line);border-radius:var(--t-r-l);overflow:hidden; grid-template-columns:repeat(auto-fit,minmax(150px,1fr)); } .tk-fact{ background:var(--t-card);padding:18px 18px 20px; transition:background var(--t-base) var(--t-ease); } .tk-fact:hover{background:var(--t-card-hover)} .tk-fact__v{font:800 clamp(20px,2.4vw,28px)/1 var(--t-display);letter-spacing:var(--tracking-display);font-variant-numeric:tabular-nums} .tk-fact__k{margin-top:8px;font:var(--text-meta);font-size:10px;letter-spacing:.12em;text-transform:uppercase;color:var(--t-muted)} .tk-fact--accent .tk-fact__v{color:var(--t-accent)} /* Живая точка в плашке: раз в две секунды расходится круг. */ .tk-dot--live{position:relative} .tk-dot--live::after{ content:"";position:absolute;inset:-4px;border-radius:50%; border:1px solid currentColor; animation:tk-ping 2.4s var(--t-ease) infinite; } @keyframes tk-ping{0%{transform:scale(.55);opacity:.75}70%,100%{transform:scale(2);opacity:0}} /* Две ленты навстречу: нижняя тише и медленнее. */ .tk-marquee{ border-bottom:1px solid var(--t-line); overflow:hidden;padding:13px 0; display:flex;flex-direction:column;gap:7px; mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent); -webkit-mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent); } .tk-marquee__row{ display:flex;gap:44px;white-space:nowrap;width:max-content; font:var(--text-meta);font-size:10.5px;letter-spacing:.16em;text-transform:uppercase;color:var(--t-dim); animation:tk-slide 46s linear infinite; } .tk-marquee__row--back{animation-duration:64s;animation-direction:reverse;opacity:.5} @keyframes tk-slide{from{transform:translateX(0)}to{transform:translateX(-50%)}} .tk-shelf{ width:100%;background:none;border:none;border-top:1px solid var(--t-line); padding:clamp(22px,3vw,34px) 0;cursor:pointer;text-align:left; display:flex;flex-wrap:wrap;gap:16px 28px;align-items:center; transition:background var(--t-base) var(--t-ease); } .tk-shelf:hover{background:linear-gradient(90deg,var(--t-wash),transparent 60%)} .tk-shelf__num,.tk-shelf__t{transition:transform var(--t-base) var(--t-spring)} .tk-shelf:hover .tk-shelf__num,.tk-shelf:hover .tk-shelf__t{transform:translateX(8px)} .tk-shelf__num{font-family:var(--t-mono);font-size:11px;letter-spacing:.1em;color:var(--t-accent);flex:none;width:30px} .tk-shelf__t{flex:1 1 200px;font:600 clamp(24px,3vw,40px)/1.1 var(--t-display);letter-spacing:var(--tracking-display-soft);color:var(--t-ink)} .tk-shelf__d{flex:1 1 320px;max-width:32em;font:300 16px/1.6 var(--t-body);color:var(--t-muted)} .tk-shelf__go{font-family:var(--t-mono);font-size:14px;color:var(--t-ink);flex:none;transition:transform var(--t-base) var(--t-spring)} .tk-shelf:hover .tk-shelf__go{transform:translateX(6px);color:var(--t-accent)} /* Знак раздела: полосы звука, пэды, фейдеры. */ .tk-shelf__sign{ flex:none;display:flex;align-items:center;justify-content:center; width:44px;height:44px;color:var(--t-ink-strong); transition:color var(--t-base) var(--t-ease); } .tk-shelf:hover .tk-shelf__sign, .tk-shelf:focus-visible .tk-shelf__sign{color:var(--t-accent)} .tk-sign{display:block} /* ——— Движение знаков ——— Знак не приближается и не кренится: двигаются его части. Каждая несёт свой такт в переменных, а анимация всегда назначена и просто стоит на паузе — так поза не прыгает ни на входе, ни на выходе. */ .tk-sign__bar,.tk-sign__pad,.tk-sign__fader{ transform-box:fill-box;transform-origin:50% 50%; animation-play-state:paused; animation-timing-function:var(--t-ease); animation-iteration-count:infinite; } .tk-shelf:hover .tk-sign__bar,.tk-shelf:hover .tk-sign__pad,.tk-shelf:hover .tk-sign__fader, .tk-shelf:focus-visible .tk-sign__bar,.tk-shelf:focus-visible .tk-sign__pad,.tk-shelf:focus-visible .tk-sign__fader{ animation-play-state:running; } /* Пальцем не наводят: там знаки живут сами. */ @media (hover:none){ .tk-sign__bar,.tk-sign__pad,.tk-sign__fader{animation-play-state:running} } /* Биты: полоса тянется и оседает. Каждая в своём темпе — цикл общей волны не читается. */ .tk-sign__bar{ transform:scaleY(var(--s,1)); animation-name:tk-eq; animation-duration:var(--d,1200ms); animation-direction:alternate; } @keyframes tk-eq{from{transform:scaleY(var(--s,1))}to{transform:scaleY(var(--s2,1))}} /* Наборы: свет обходит пэды по спирали. Горит один, коротко. */ .tk-sign__pad{ fill:transparent; animation-name:tk-pad; animation-duration:2400ms; animation-delay:var(--dl,0ms); } /* Окно свечения чуть длиннее шага между пэдами (240 мс): свет передаётся соседу без тёмного зазора. */ @keyframes tk-pad{ 0%{fill:currentColor;transform:scale(.93)} 9%{fill:currentColor;transform:scale(1)} 11%,100%{fill:transparent;transform:scale(1)} } /* Услуги: фейдер идёт по своей линии и возвращается. */ .tk-sign__fader{ animation-name:tk-fader; animation-duration:var(--d,2600ms); animation-direction:alternate; } @keyframes tk-fader{from{transform:translateY(var(--y0,0))}to{transform:translateY(var(--y1,0))}} .tk-step{padding:22px 20px;position:relative;overflow:hidden} /* Полоска сверху дочерчивается, когда шаг появляется. */ .tk-step::before{ content:"";position:absolute;left:0;right:0;top:0;height:2px; background:linear-gradient(90deg,var(--t-accent),transparent); transform:scaleX(0);transform-origin:left; transition:transform 700ms var(--t-spring); transition-delay:calc(var(--i,0) * 90ms + 120ms); } .tk-step.tk-rv--in::before,html:not(.tk-motion) .tk-step::before{transform:scaleX(1)} .tk-step__n{font-family:var(--t-mono);font-size:11px;letter-spacing:.1em;color:var(--t-accent)} .tk-step__t{margin-top:14px;font:600 19px/1.2 var(--t-display);letter-spacing:var(--tracking-display-soft)} .tk-step__d{margin:10px 0 0;font:300 15px/1.6 var(--t-body);color:var(--t-muted)} .tk-lic{ padding:24px 22px;display:flex;flex-direction:column;gap:14px; transition:transform var(--t-base) var(--t-spring),border-color var(--t-base) var(--t-ease); } .tk-lic:hover{transform:translateY(-3px);border-color:var(--t-line-2)} .tk-lic--on{border-color:var(--t-accent-line);background:linear-gradient(180deg,var(--t-wash),transparent 60%)} .tk-lic--on:hover{border-color:var(--t-accent)} .tk-lic__n{font:500 17px/1.2 var(--t-body)} .tk-lic__p{font-family:var(--t-mono);font-size:22px;font-variant-numeric:tabular-nums} .tk-lic__l{display:flex;flex-direction:column;gap:9px;font:300 15px/1.5 var(--t-body);color:var(--t-muted)} .tk-fact-row{ display:flex;justify-content:space-between;gap:16px;align-items:baseline; padding:15px 0;border-bottom:1px solid var(--t-line); } /* ——— Дорожная карта ——— Одна спина слева, точки на ней, карточки справа. Последний узел — не «ещё одна фаза», а цель: он шире, ярче и подписан отдельно. Спина дочерчивается сверху вниз, когда блок появляется. */ .tk-road{position:relative;margin-top:clamp(26px,3.4vw,40px);padding-left:clamp(30px,4vw,46px)} .tk-road__track{position:relative} /* Хвост в 31px — ровно до середины узла цели: 10px отступа карточки плюс 22px до кружка плюс его половина. */ .tk-road__line{ position:absolute;left:calc(clamp(30px,4vw,46px) * -1 + 5px);top:6px;bottom:-31px;width:2px;border-radius:2px; background:linear-gradient(180deg,var(--t-accent) 0%,var(--t-line-2) 34%,var(--t-line-2) 62%,var(--t-accent) 100%); } .tk-motion .tk-road__line{ opacity:1;transform:scaleY(0);transform-origin:top; transition:transform 1400ms var(--t-ease); } .tk-motion .tk-road__line.tk-rv--in{transform:scaleY(1)} .tk-road__step{position:relative;padding-bottom:clamp(18px,2.4vw,26px)} .tk-road__dot{ position:absolute;left:calc(clamp(30px,4vw,46px) * -1);top:12px; width:12px;height:12px;border-radius:50%; border:2px solid var(--t-line-2);background:var(--t-page); } /* Точка «сейчас» закрашена и дышит: тут мы стоим прямо сегодня. */ .tk-road__dot--now{border-color:var(--t-accent);background:var(--t-accent)} .tk-road__dot--now::after{ content:"";position:absolute;inset:-6px;border-radius:50%; border:1px solid var(--t-accent); animation:tk-ping 2.6s var(--t-ease) infinite; } .tk-road__card{ border-left:1px solid transparent;padding:6px 0 0; transition:transform var(--t-base) var(--t-spring); } .tk-road__tag{ display:inline-block; font:var(--text-meta);font-size:10px;letter-spacing:.14em;text-transform:uppercase;color:var(--t-dim); } .tk-road__tag--now{color:var(--t-accent)} .tk-road__t{margin-top:8px;font:600 clamp(19px,2vw,24px)/1.15 var(--t-display);letter-spacing:var(--tracking-display-soft)} .tk-road__d{margin:8px 0 0;max-width:44em;font:300 15px/1.6 var(--t-body);color:var(--t-muted)} /* На широком фаза раскладывается на две колонки: слева ступень, справа что она даёт. Дорога занимает полосу целиком, а не жмётся к левому краю. */ @media (min-width:900px){ .tk-road__card{ display:grid;align-items:start; grid-template-columns:minmax(0,.38fr) minmax(0,.62fr); gap:6px clamp(24px,4vw,64px); } .tk-road__t{margin-top:6px} .tk-road__d{grid-column:2;grid-row:1 / span 2;margin:2px 0 0} } /* Цель. Крупный узел в конце дороги: ради этого всё остальное. */ .tk-road__step--goal{padding-bottom:0} .tk-road__dot--goal{ width:18px;height:18px;top:22px;left:calc(clamp(30px,4vw,46px) * -1 - 3px); border:2px solid var(--t-accent);background:var(--t-page); } .tk-road__dot--goal::after{ content:"";position:absolute;inset:3px;border-radius:50%;background:var(--t-accent); } .tk-road__goal{ position:relative;overflow:hidden; margin-top:10px;padding:clamp(24px,3vw,40px); border:1px solid var(--t-accent-line);border-radius:var(--t-r-l); background:var(--t-card); } /* Свет внутри узла — только внутри него: рамка держит пятно и оно не растекается по странице. */ .tk-road__goal::before{ content:"";position:absolute;inset:-30% -10% auto -10%;height:150%;pointer-events:none; background:radial-gradient(46% 52% at 22% 0%,var(--t-hero-glow),transparent 70%); } .tk-road__goal>*{position:relative;z-index:1} .tk-road__goalt{ margin-top:18px; font:800 clamp(24px,3.4vw,44px)/1.06 var(--t-display);letter-spacing:var(--tracking-display); text-wrap:balance; } .tk-road__goalt span{display:block;color:var(--t-accent)} .tk-road__goald{margin:16px 0 0;max-width:40em;font:300 clamp(15px,1.4vw,17px)/1.65 var(--t-body);color:var(--t-ink-2)} /* Чем платформа хороша слушателю: три знака в ряд. Раньше здесь лежали три плашки с одним словом — знак читается раньше подписи, и ряд держит низ узла, а не висит строкой мелких капсул. */ .tk-road__marks{ margin-top:26px;padding-top:24px;border-top:1px solid var(--t-line); display:grid;gap:clamp(16px,2.4vw,28px); grid-template-columns:repeat(auto-fit,minmax(180px,1fr)); } .tk-gain{min-width:0} .tk-gain__sign{ display:block;color:var(--t-accent); transition:transform var(--t-base) var(--t-spring); } .tk-road__goal:hover .tk-gain__sign{transform:translateY(-3px)} .tk-gain:nth-child(2) .tk-gain__sign{transition-delay:60ms} .tk-gain:nth-child(3) .tk-gain__sign{transition-delay:120ms} .tk-gain__t{ margin-top:12px; font:600 17px/1.2 var(--t-display);letter-spacing:var(--tracking-display-soft);color:var(--t-ink); } .tk-gain__d{margin:8px 0 0;font:300 14px/1.6 var(--t-body);color:var(--t-muted)} /* ——— Последний разворот ——— Раньше блок держался на синем пятне со дна, и оно сливалось с таким же пятном под подвалом — низ страницы читался одной мутной полосой. Теперь это плотная панель с рамкой: край видно, свет не течёт. */ .tk-cta{position:relative;border-top:1px solid var(--t-line);background:var(--t-page)} .tk-cta__in{max-width:var(--t-max);margin:0 auto;padding:clamp(36px,5vw,72px) var(--t-gut)} .tk-cta__panel{ position:relative;overflow:hidden; border:1px solid var(--t-line);border-radius:var(--t-r-l); background:var(--t-card); padding:clamp(26px,3.6vw,52px); display:grid;gap:clamp(24px,3.2vw,48px); grid-template-columns:minmax(0,1.3fr) minmax(0,.7fr); align-items:center; } /* Синяя кромка слева — единственное цветное пятно блока. */ .tk-cta__panel::before{ content:"";position:absolute;left:0;top:0;bottom:0;width:3px; background:linear-gradient(180deg,var(--t-accent),transparent 82%); } /* Та же сетка, что в первом экране: страница закрывается тем же ритмом. */ .tk-cta__panel::after{ content:"";position:absolute;inset:0;pointer-events:none; background-image:linear-gradient(var(--t-line) 1px,transparent 1px); background-size:100% 84px; mask-image:linear-gradient(transparent,#000 88%); -webkit-mask-image:linear-gradient(transparent,#000 88%); opacity:.6; } .tk-cta__copy,.tk-cta__facts{position:relative;z-index:1} .tk-cta__t{ margin-top:14px; font:800 clamp(28px,4vw,54px)/1.02 var(--t-display);letter-spacing:var(--tracking-display); text-wrap:balance; } .tk-cta__d{margin:16px 0 0;max-width:36em;font:300 clamp(15px,1.4vw,17px)/1.65 var(--t-body);color:var(--t-muted)} .tk-cta__btns{margin:28px 0 0;display:flex;flex-wrap:wrap;gap:12px} .tk-cta__fact{ display:flex;gap:16px;align-items:baseline;justify-content:space-between; padding:14px 0;border-bottom:1px solid var(--t-line); font:400 15px/1.4 var(--t-body);color:var(--t-muted); } .tk-cta__fact:first-child{padding-top:0} .tk-cta__fact:last-child{border-bottom:none;padding-bottom:0} .tk-cta__fact .tk-mono{color:var(--t-ink);font-size:15px} @media (max-width:860px){ .tk-cta__panel{grid-template-columns:1fr} } /* ——— Карточки каталога ——— */ .tk-item{padding:14px;display:flex;flex-direction:column;gap:12px} .tk-item__cover{ background:var(--t-sunken);border:none;padding:0;aspect-ratio:1/1; border-radius:var(--t-r-cover);cursor:pointer;display:block;width:100%; position:relative;overflow:hidden; } .tk-item__cover::after{ content:"";position:absolute;inset:0; background:radial-gradient(120% 90% at 50% 0%,var(--t-hero-glow),transparent 60%); opacity:0;transition:opacity var(--t-base) var(--t-ease); } .tk-item:hover .tk-item__cover::after{opacity:1} .tk-item__t{font:500 16px/1.25 var(--t-body);color:var(--t-ink)} .tk-item__m{margin-top:6px;font:var(--text-meta);font-size:10px;letter-spacing:.1em;text-transform:uppercase;color:var(--t-muted)} .tk-item__foot{ display:flex;justify-content:space-between;align-items:center;gap:10px; border-top:1px solid var(--t-line);padding-top:12px; } .tk-play{ flex:none;border-radius:50%;display:flex;align-items:center;justify-content:center;cursor:pointer; border:1px solid var(--t-ink-strong);background:transparent;color:var(--t-ink); transition:background var(--t-fast) var(--t-ease),border-color var(--t-fast) var(--t-ease),color var(--t-fast) var(--t-ease),transform var(--t-fast) var(--t-ease); } .tk-play:hover{border-color:var(--t-accent);color:var(--t-accent)} .tk-play:active{transform:scale(.94)} .tk-play--on{background:var(--t-accent);border-color:var(--t-accent);color:var(--t-accent-ink)} .tk-play--on:hover{color:var(--t-accent-ink);background:var(--t-accent-hi)} .tk-wave{position:relative;border-radius:2px;overflow:hidden} .tk-wave__bg{position:absolute;inset:0;background:repeating-linear-gradient(90deg,var(--t-line-2) 0 2px,transparent 2px 5px)} .tk-wave__fill{position:absolute;left:0;top:0;bottom:0;background:repeating-linear-gradient(90deg,var(--t-accent) 0 2px,transparent 2px 5px);transition:width 80ms linear} /* ——— Выбор: лицензия, способ оплаты, роль, тип товара ——— Синяя обводка, лёгкая подложка. Никакого рисованного круга. «Приближение» выбранного блока — вдвое меньше прежнего (--t-sel-scale). */ .tk-pick{ width:100%;text-align:left;cursor:pointer;display:block; border:1px solid var(--t-line);background:var(--t-card); border-radius:var(--t-r);padding:16px; transition:border-color var(--t-base) var(--t-ease),background var(--t-base) var(--t-ease), transform var(--t-base) var(--t-spring),box-shadow var(--t-base) var(--t-ease); } .tk-pick:hover{border-color:var(--t-line-2)} .tk-pick--on{ border-color:var(--t-accent); background:var(--t-wash); transform:scale(var(--t-sel-scale)); box-shadow:0 0 0 1px var(--t-accent-line); } .tk-pick:disabled{opacity:.42;cursor:not-allowed} .tk-pick__head{display:flex;justify-content:space-between;gap:14px;align-items:baseline;font:500 16px/1.25 var(--t-body);color:var(--t-ink)} .tk-pick__price{font-family:var(--t-mono);font-size:14px;font-variant-numeric:tabular-nums} .tk-pick__sub{display:block;margin-top:8px;font:300 14px/1.5 var(--t-body);color:var(--t-muted)} .tk-pick--on .tk-pick__sub{color:var(--t-ink-2)} .tk-picks{display:flex;flex-direction:column;gap:10px} .tk-picks--row{flex-direction:row;flex-wrap:wrap} .tk-picks--row>*{flex:1 1 220px} /* ——— Пустые состояния и загрузка ——— */ .tk-empty{ border:1px dashed var(--t-line-2);border-radius:var(--t-r-l); padding:clamp(28px,4vw,44px) clamp(20px,3vw,32px); max-width:44em;background:var(--t-card); } .tk-empty__t{font:600 clamp(19px,2vw,23px)/1.25 var(--t-display);letter-spacing:var(--tracking-display-soft)} .tk-empty__d{margin:12px 0 0;font:300 15px/1.6 var(--t-body);color:var(--t-muted);max-width:38em} .tk-empty__a{margin-top:20px;display:flex;flex-wrap:wrap;gap:10px} .tk-skel{ background:linear-gradient(90deg,var(--t-sunken) 25%,var(--t-skel-hi) 37%,var(--t-sunken) 63%); background-size:200% 100%; animation:tk-shimmer 1.4s linear infinite; border-radius:var(--t-r-s); } .tk-skel--cover{aspect-ratio:1/1;border-radius:var(--t-r-cover)} .tk-skel--line{height:12px} .tk-skel--line-s{height:9px;width:60%} .tk-spinner{ width:16px;height:16px;border-radius:50%; border:2px solid var(--t-line-2);border-top-color:var(--t-accent); animation:tk-spin 700ms linear infinite; } /* ——— Тост ——— */ .tk-toast{ position:fixed;left:50%;bottom:24px;transform:translateX(-50%); z-index:var(--t-z-toast); background:var(--t-raised);color:var(--t-ink); border:1px solid var(--t-line-2); border-radius:var(--t-r);padding:14px 20px; max-width:min(92vw,520px); font:400 15px/1.4 var(--t-body); box-shadow:var(--t-shadow-toast); animation:tk-toast 220ms var(--t-spring) both; } .tk-toast--error{border-color:rgba(255,107,94,.5)} /* ——— Подвал ——— */ /* ——— Подвал: жидкое стекло ——— Фон не закрашен: сквозь него светит синее пятно со дна страницы (body::after). Стекло даёт размытие, лёгкую пересветку и блик по верхней кромке. Где backdrop-filter не поддерживается — просто плотная подложка, читаемость не страдает. */ .tk-footer{ position:relative; z-index:1; border-top:1px solid var(--t-glass-line); background:var(--t-glass); backdrop-filter:blur(28px) saturate(180%); -webkit-backdrop-filter:blur(28px) saturate(180%); overflow:hidden; isolation:isolate; } /* Блик по кромке — как на краю стекла. */ .tk-footer::before{ content:"";position:absolute;left:0;right:0;top:0;height:1px; background:linear-gradient(90deg,transparent,var(--t-glass-spec),transparent); pointer-events:none; } /* Тёплая толща стекла: мягкий отсвет внутри панели. */ .tk-footer::after{ content:"";position:absolute;left:-10%;right:-10%;bottom:-60%;height:160%; background:radial-gradient(50% 60% at 50% 100%,var(--t-glass-inner),transparent 72%); pointer-events:none; } .tk-footer>*{position:relative;z-index:1} @supports not ((backdrop-filter:blur(4px)) or (-webkit-backdrop-filter:blur(4px))){ .tk-footer{background:var(--t-card)} } /* Синий свет со дна страницы. Лежит под подвалом, поэтому стекло его размывает и пропускает, а не перекрывает. */ .tk-app::after{ content:""; position:absolute;left:50%;bottom:-260px; width:min(1100px,92%);height:480px; transform:translateX(-50%); border-radius:50%; background:radial-gradient(closest-side,var(--t-glow-bottom),transparent 72%); filter:blur(12px); pointer-events:none; z-index:0; } .tk-footer__in{ max-width:var(--t-max);margin:0 auto; padding:clamp(32px,4vw,56px) var(--t-gut); display:flex;flex-wrap:wrap;gap:32px 40px; } .tk-footer__b{ background:none;border:none;padding:0;cursor:pointer; font:400 14.5px/1.3 var(--t-body);color:var(--t-muted);text-align:left; transition:color var(--t-fast) var(--t-ease); } .tk-footer__b:hover{color:var(--t-ink)} .tk-footer__bottom{ position:relative; padding:16px var(--t-gut); max-width:var(--t-max);margin:0 auto; display:flex;flex-wrap:wrap;gap:12px 20px;justify-content:space-between;align-items:center; font:var(--text-meta);font-size:10px;letter-spacing:.08em;text-transform:uppercase;color:var(--t-dim); } /* Черта идёт по краям колонок подвала, а не шире их на отступ. */ .tk-footer__bottom::before{ content:"";position:absolute;top:0;left:var(--t-gut);right:var(--t-gut);height:1px; background:var(--t-line); } /* ——— Профиль ——— Одна колонка на 980, шапка с кружком и вкладки. Всё внутри — те же карточки и поля, что и на остальных экранах: профиль не должен выглядеть чужой страницей. */ .tk-prof{max-width:980px;margin:0 auto;padding-left:var(--t-gut);padding-right:var(--t-gut)} .tk-prof__head{display:flex;flex-wrap:wrap;gap:20px;align-items:center} .tk-prof__sub{margin-top:8px;font:300 14.5px/1.5 var(--t-body);color:var(--t-muted)} .tk-prof__save{margin-left:auto} .tk-prof__foot{ margin-top:36px;border-top:1px solid var(--t-line);padding-top:20px; display:flex;flex-wrap:wrap;gap:14px 18px;align-items:center;justify-content:space-between; } /* Под вкладками уже есть своя черта — вторую сразу под ней не рисуем. */ .tk-prof section:first-of-type{border-top:0;margin-top:24px;padding-top:0} .tk-prof-grid{display:grid;gap:14px;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));max-width:720px} .tk-prof-cards{display:grid;gap:14px;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));max-width:780px} .tk-checks{display:flex;flex-direction:column;gap:14px;align-items:flex-start} /* Полоска-напоминание: вход не выполнен, но анкету заполнить можно. */ .tk-note{ margin-top:20px;border:1px solid var(--t-accent-line);background:var(--t-wash); border-radius:var(--t-r);padding:14px 18px; display:flex;flex-wrap:wrap;gap:12px 18px;align-items:center;justify-content:space-between; font:300 14.5px/1.55 var(--t-body);color:var(--t-ink); } /* ——— Кружок ——— */ .tk-ava{ display:inline-flex;align-items:center;justify-content:center; border-radius:50%;overflow:hidden;flex:none; background:var(--t-sunken);color:#FFF; box-shadow:inset 0 0 0 1px var(--t-line); } .tk-ava img{width:100%;height:100%;object-fit:cover;display:block} .tk-ava__t{font:700 1em/1 var(--t-display);letter-spacing:.02em;color:#FFF} /* Область кружка — единый обведённый блок, а не три вещи в потоке. Левая половина утоплена и работает кнопкой: кружок сам открывает выбор файла, наведение подписывает, что будет. */ .tk-ava-zone{ display:flex;flex-wrap:wrap;align-items:stretch; border:1px solid var(--t-line);border-radius:var(--t-r); background:var(--t-card);overflow:hidden; } .tk-ava-slot{ position:relative;flex:0 0 auto; display:flex;flex-direction:column;align-items:center;gap:12px; padding:22px 28px;cursor:pointer; background:var(--t-sunken); border-right:1px solid var(--t-line); } .tk-ava-slot input{position:absolute;width:1px;height:1px;opacity:0;pointer-events:none} .tk-ava-slot__pic{position:relative;display:inline-flex;border-radius:50%} .tk-ava-slot__over{ position:absolute;inset:0;border-radius:50%; display:flex;align-items:center;justify-content:center; background:rgba(6,6,12,.62);color:#FFF; font:600 12px/1 var(--t-body);letter-spacing:.04em;text-transform:uppercase; opacity:0;transition:opacity var(--t-fast) var(--t-ease); } .tk-ava-slot:hover .tk-ava-slot__over, .tk-ava-slot input:focus-visible~.tk-ava-slot__pic .tk-ava-slot__over{opacity:1} .tk-ava-slot input:focus-visible~.tk-ava-slot__pic{outline:2px solid var(--t-accent);outline-offset:3px} .tk-ava-slot__cap{ font:var(--text-meta);font-size:10px; letter-spacing:var(--tracking-mono);text-transform:uppercase;color:var(--t-muted); } .tk-ava-side{flex:1 1 260px;min-width:240px;padding:22px 24px} .tk-ava-side__t{font:600 15px/1.3 var(--t-display);letter-spacing:var(--tracking-display-soft)} .tk-ava-side__t--sep{margin-top:22px;padding-top:18px;border-top:1px solid var(--t-line)} .tk-ava-side__h{margin-top:6px;font:300 13px/1.5 var(--t-body);color:var(--t-muted)} .tk-ava-btns{margin-top:14px;display:flex;flex-wrap:wrap;gap:10px;align-items:center} .tk-ava-up{display:inline-flex;position:relative} .tk-ava-up input{position:absolute;inset:0;opacity:0;width:100%;height:100%;cursor:pointer} .tk-ava-up input:focus-visible+.ds-btn{outline:2px solid var(--t-accent);outline-offset:2px} .tk-ava-picks{margin-top:14px;display:flex;flex-wrap:wrap;gap:10px} .tk-ava-pick{ width:30px;height:30px;border-radius:50%;border:2px solid transparent; padding:0;cursor:pointer; box-shadow:0 0 0 1px var(--t-line); transition:transform var(--t-fast) var(--t-ease),border-color var(--t-fast) var(--t-ease); } .tk-ava-pick:hover{transform:scale(1.08)} .tk-ava-pick--on{border-color:var(--t-page);box-shadow:0 0 0 2px var(--t-accent)} /* ——— Привязанные входы ——— */ .tk-conn-list{display:grid;gap:14px;grid-template-columns:repeat(auto-fit,minmax(280px,1fr))} .tk-conn{ border:1px solid var(--t-line);background:var(--t-card); border-radius:var(--t-r);padding:18px; } .tk-conn--on{border-color:var(--t-accent-line);background:var(--t-wash)} .tk-conn__head{display:flex;gap:10px;align-items:center;justify-content:space-between} .tk-conn__t{font:600 17px/1.2 var(--t-display);letter-spacing:var(--tracking-display-soft)} .tk-conn__d{margin-top:8px;font:300 13.5px/1.55 var(--t-body);color:var(--t-muted)} .tk-conn__f{margin-top:14px;display:flex;flex-wrap:wrap;gap:10px;align-items:flex-end} .tk-conn__f .ds-field{flex:1 1 160px} .tk-conn__f--one{display:block} /* ——— Вход через ВК и Яндекс ——— Цвета фирменные: ВК — #0077FF, Яндекс — #FC3F1D. Они одинаковы в светлой и тёмной теме: узнаваемость кнопки важнее подстройки под фон, и обе компании просят не перекрашивать. Знак — плашка с буквами, а не логотип: логотипы защищены, а плашка не мылится. */ .tk-oauth{ display:inline-flex;align-items:center;gap:12px; min-height:var(--tap-min);padding:0 18px; border:1px solid transparent;border-radius:var(--t-r); cursor:pointer;color:#FFF; font:500 15px/1 var(--t-body); transition:filter var(--t-fast) var(--t-ease),transform var(--t-fast) var(--t-ease); } .tk-oauth--full{width:100%;justify-content:flex-start} .tk-oauth--vk{background:#0077FF} .tk-oauth--yandex{background:#FC3F1D} .tk-oauth:not(:disabled):hover{filter:brightness(1.08)} .tk-oauth:not(:disabled):active{transform:scale(.985)} .tk-oauth:focus-visible{outline:2px solid var(--t-accent);outline-offset:3px} .tk-oauth:disabled{opacity:.42;cursor:not-allowed} .tk-oauth__mark{ flex:none;display:flex;align-items:center;justify-content:center; width:26px;height:26px;border-radius:7px;background:#FFF; font:800 12px/1 var(--t-display);letter-spacing:.01em; } .tk-oauth--vk .tk-oauth__mark{color:#0077FF} .tk-oauth--yandex .tk-oauth__mark{color:#FC3F1D;font-size:14px} .tk-oauth__t{white-space:nowrap;overflow:hidden;text-overflow:ellipsis} .tk-oauth-row{display:flex;flex-direction:column;gap:10px} /* Разделитель «или»: линия с надписью посередине. */ .tk-or{ display:flex;align-items:center;gap:14px;margin:20px 0; font:var(--text-meta);font-size:10px; letter-spacing:var(--tracking-mono);text-transform:uppercase;color:var(--t-muted); } .tk-or::before,.tk-or::after{content:"";flex:1;height:1px;background:var(--t-line)} /* ——— Карты ——— */ .tk-cardlist{display:flex;flex-direction:column;gap:10px} .tk-cardrow{ display:flex;flex-wrap:wrap;gap:10px 16px;align-items:center; border:1px solid var(--t-line);background:var(--t-card); border-radius:var(--t-r);padding:14px 16px; } .tk-cardrow--on{border-color:var(--t-accent-line);background:var(--t-wash)} .tk-cardrow__brand{ font:var(--text-meta);font-size:10px;letter-spacing:.12em;text-transform:uppercase; color:var(--t-muted);min-width:76px; } .tk-cardrow__num{font-size:14px;letter-spacing:.06em} .tk-cardrow__exp{color:var(--t-muted)} .tk-cardrow__who{ flex:1 1 120px;min-width:0; font:300 13.5px/1.4 var(--t-body);color:var(--t-muted); overflow:hidden;text-overflow:ellipsis;white-space:nowrap; } @media (max-width:560px){ .tk-prof__save{margin-left:0;width:100%} .tk-prof__save .ds-btn{width:100%} } /* ——— Строки списков ——— */ .tk-line{ display:flex;flex-wrap:wrap;gap:14px;align-items:center; padding:16px 0;border-bottom:1px solid var(--t-line); } .tk-line__media{ width:56px;height:56px;background:var(--t-sunken); border-radius:var(--t-r-cover);flex:none; } .tk-line__media--round{border-radius:50%} /* ═══ Окно поверх страницы ════════════════════════════════════════ Подложка размывает страницу, лист приезжает снизу. Ни портала, ни отдельного слоя: разметку кладёт тот же точечный патч, а прокрутку под окном держит класс на . */ /* Место под полосу прокрутки остаётся занятым: без этого страница под окном дёргается вбок на ширину полосы. */ html.tk-locked, html.tk-locked body{overflow:hidden} html.tk-locked{scrollbar-gutter:stable} .tk-modal{ position:fixed;inset:0;z-index:90; display:flex;align-items:flex-end;justify-content:center; padding:0; background:rgba(6,6,14,.52); animation:tk-fade 180ms var(--t-ease) both; } :root[data-theme="dark"] .tk-modal{background:rgba(0,0,0,.7)} @supports ((backdrop-filter:blur(4px)) or (-webkit-backdrop-filter:blur(4px))){ .tk-modal{-webkit-backdrop-filter:blur(7px) saturate(115%);backdrop-filter:blur(7px) saturate(115%)} } @media (min-width:720px){ .tk-modal{align-items:center;padding:clamp(20px,4vh,56px) var(--t-gut)} } .tk-modal__sheet{ position:relative;overflow:hidden; width:100%;max-width:560px;max-height:92dvh; display:flex;flex-direction:column; border:1px solid var(--t-line-2); border-radius:var(--t-r-l) var(--t-r-l) 0 0; background:var(--t-page); box-shadow:var(--t-shadow-menu); animation:tk-sheet 300ms var(--t-spring) both; } .tk-modal__sheet--wide{max-width:840px} @media (min-width:720px){ .tk-modal__sheet{border-radius:var(--t-r-l);max-height:86dvh} } @keyframes tk-sheet{from{opacity:0;transform:translateY(26px) scale(.985)}to{opacity:1;transform:none}} .tk-modal__sheet:focus{outline:none} .tk-modal__sheet:focus-visible{outline:2px solid var(--t-accent);outline-offset:-2px} /* Свет в углу листа — тот же приём, что и в узле цели на главной: рамка держит пятно, наружу оно не течёт. */ .tk-modal__sheet::before{ content:"";position:absolute;inset:-40% -20% auto -20%;height:120%;pointer-events:none; background:radial-gradient(42% 46% at 18% 0%,var(--t-hero-glow),transparent 72%); } .tk-modal__top,.tk-modal__body,.tk-modal__foot{position:relative;z-index:1} .tk-modal__top{ display:flex;gap:16px;align-items:flex-start;justify-content:space-between; padding:clamp(20px,3vw,26px) clamp(18px,3vw,28px) 16px; border-bottom:1px solid var(--t-line); } .tk-modal__t{ margin-top:10px; font:700 clamp(22px,3vw,30px)/1.08 var(--t-display);letter-spacing:var(--tracking-display); } .tk-modal__s{margin-top:8px;font:300 14px/1.5 var(--t-body);color:var(--t-muted)} .tk-modal__x{ flex:none;width:36px;height:36px;display:inline-flex;align-items:center;justify-content:center; border:1px solid var(--t-line);border-radius:50%;background:transparent; color:var(--t-muted);cursor:pointer; transition:color var(--t-fast) var(--t-ease),border-color var(--t-fast) var(--t-ease),transform var(--t-fast) var(--t-ease); } .tk-modal__x:hover{color:var(--t-ink);border-color:var(--t-ink-strong)} .tk-modal__x:active{transform:scale(.94)} .tk-modal__body{ overflow-y:auto;overscroll-behavior:contain; padding:clamp(18px,3vw,24px) clamp(18px,3vw,28px); } .tk-modal__foot{ display:flex;flex-wrap:wrap;gap:14px;align-items:center;justify-content:space-between; padding:16px clamp(18px,3vw,28px) clamp(18px,3vw,24px); border-top:1px solid var(--t-line);background:var(--t-card); } .tk-modal__note{flex:1 1 240px;font:300 13px/1.5 var(--t-body);color:var(--t-muted)} .tk-modal__btns{display:flex;flex-wrap:wrap;gap:10px} /* ——— Кнопка «Лучшие работы» ——— Слова о себе стоят дёшево, работы дороже: кнопка должна читаться раньше цены. Полосы на паузе стоят ровно и оживают под курсором — тот же приём, что у знаков разделов на главной. */ .tk-best{ display:inline-flex;align-items:center;gap:10px;flex:none; min-height:36px;padding:0 14px 0 12px; border:1px solid var(--t-accent-line);border-radius:var(--t-r-pill); background:linear-gradient(120deg,var(--t-wash),transparent 70%); color:var(--t-accent);cursor:pointer; font:500 13px/1 var(--t-body); transition:background var(--t-base) var(--t-ease),border-color var(--t-fast) var(--t-ease),transform var(--t-fast) var(--t-ease); } .tk-best:hover{background:linear-gradient(120deg,var(--t-wash),var(--t-wash));border-color:var(--t-accent)} .tk-best:active{transform:scale(.98)} .tk-best--big{min-height:48px;padding:0 20px 0 16px;font-size:15px;gap:12px} .tk-best__eq{display:inline-flex;align-items:flex-end;gap:2.5px;height:14px;flex:none} .tk-best--big .tk-best__eq{height:18px;gap:3px} .tk-best__eq i{ display:block;width:2.5px;height:100%;border-radius:2px;background:currentColor; transform:scaleY(var(--h,1));transform-origin:50% 100%; animation:tk-eqbar var(--d,1s) var(--t-ease) infinite alternate; animation-play-state:paused; } .tk-best:hover .tk-best__eq i, .tk-best:focus-visible .tk-best__eq i{animation-play-state:running} @media (hover:none){ .tk-best__eq i{animation-play-state:running} } @keyframes tk-eqbar{from{transform:scaleY(var(--h,1))}to{transform:scaleY(calc(1.15 - var(--h,1) * .75))}} .tk-best__n{ font-family:var(--t-mono);font-size:11px;font-variant-numeric:tabular-nums; padding:2px 7px;border-radius:var(--t-r-pill); background:var(--t-accent);color:var(--t-accent-ink); } /* ——— Работа в окне ——— */ .tk-works{display:grid;gap:14px;grid-template-columns:repeat(auto-fit,minmax(250px,1fr))} .tk-work{ position:relative;overflow:hidden; display:flex;flex-direction:column; padding:18px;border:1px solid var(--t-line);border-radius:var(--t-r); background:var(--t-card); animation:tk-rise 320ms var(--t-ease) both; animation-delay:calc(var(--i,0) * 55ms); transition:border-color var(--t-fast) var(--t-ease),background var(--t-fast) var(--t-ease); } .tk-work:hover{border-color:var(--t-line-2);background:var(--t-card-hover)} .tk-work--best{border-color:var(--t-accent-line)} .tk-work--best::before{ content:"";position:absolute;left:0;right:0;top:0;height:2px;background:var(--t-accent); } .tk-work__top{display:flex;gap:10px;align-items:center} .tk-work__n{font-family:var(--t-mono);font-size:11px;letter-spacing:.1em;color:var(--t-accent)} .tk-work__best{ display:inline-flex;align-items:center;gap:5px; font:var(--text-meta);font-size:9px;letter-spacing:.12em;color:var(--t-accent); } .tk-work__y{margin-left:auto;color:var(--t-muted)} .tk-work__t{margin-top:12px;font:600 19px/1.15 var(--t-display);letter-spacing:var(--tracking-display-soft)} .tk-work__m{ margin-top:7px;font:var(--text-meta);font-size:10px;letter-spacing:.1em; text-transform:uppercase;color:var(--t-muted); } .tk-work__d{margin:12px 0 0;font:300 14px/1.6 var(--t-body);color:var(--t-muted)} .tk-work__foot{ margin-top:16px;padding-top:14px;border-top:1px solid var(--t-line); display:flex;gap:10px;align-items:center;flex-wrap:wrap; } .tk-work__no{font:var(--text-meta);font-size:9px;letter-spacing:.1em;text-transform:uppercase;color:var(--t-dim)} /* ═══ Студия ══════════════════════════════════════════════════════ Рабочее место того, кто продаёт. Главное слева, деньги и доступ — отдельной колонкой справа; на узком экране колонка уходит вниз. */ .tk-studio__head{display:flex;flex-wrap:wrap;gap:20px;align-items:center;justify-content:space-between} .tk-studio__who{display:flex;flex-wrap:wrap;gap:18px;align-items:center;min-width:0;flex:1 1 300px} .tk-studio__tags{margin-top:12px;display:flex;flex-wrap:wrap;gap:8px} .tk-studio__acts{display:flex;flex-wrap:wrap;gap:10px} .tk-studio__grid{display:flex;flex-wrap:wrap;gap:clamp(16px,2.4vw,26px);align-items:flex-start} .tk-studio__main{flex:1 1 460px;min-width:280px} .tk-studio__side{flex:1 1 280px;min-width:260px;display:flex;flex-direction:column;gap:14px} .tk-studio__quick{margin-top:14px;display:flex;flex-direction:column;gap:10px} .tk-studio__lead{margin:12px 0 0;max-width:44em;font:300 14.5px/1.6 var(--t-body);color:var(--t-muted)} .tk-studio__none{margin:14px 0 0;font:300 14px/1.6 var(--t-body);color:var(--t-muted)} /* Ход продаж. Столбики, а не картинка: читаются в обеих темах и переживают наложение разметки. День без продаж остаётся огрызком — провал видно так же ясно, как всплеск. */ .tk-chart{margin-top:18px} .tk-chart__row{ display:flex;gap:4px;align-items:flex-end;height:112px; border-bottom:1px solid var(--t-line); } .tk-chart__bar{ flex:1;min-width:0;height:var(--h,4%); border-radius:3px 3px 0 0; background:linear-gradient(180deg,var(--t-accent),var(--t-accent) 62%,var(--t-accent-line)); transform-origin:50% 100%; animation:tk-bar 420ms var(--t-spring) both; animation-delay:calc(var(--i,0) * 32ms); } .tk-chart__bar--zero{background:var(--t-line-2)} @keyframes tk-bar{from{transform:scaleY(0)}to{transform:scaleY(1)}} .tk-chart__axis{ margin-top:10px;display:flex;justify-content:space-between; font:var(--text-meta);font-size:9px;letter-spacing:.12em;text-transform:uppercase;color:var(--t-dim); } .tk-top{margin-top:8px} .tk-top__row{ display:flex;flex-wrap:wrap;gap:8px 14px;align-items:baseline; padding:13px 0;border-bottom:1px solid var(--t-line); } .tk-top__row:last-child{border-bottom:none;padding-bottom:0} .tk-top__n{font-family:var(--t-mono);font-size:11px;letter-spacing:.1em;color:var(--t-accent);flex:none} .tk-top__t{flex:1 1 160px;min-width:0;font:400 15px/1.3 var(--t-body)} .tk-acc{margin-top:14px;display:flex;flex-direction:column;gap:12px} .tk-acc__row{display:flex;justify-content:space-between;gap:12px;align-items:baseline;font:400 15px/1.3 var(--t-body)} .tk-bal__v{ margin-top:12px;font-family:var(--t-mono);font-size:30px;font-variant-numeric:tabular-nums; color:var(--t-ink); } .tk-bal__h{margin-top:10px;font:300 13px/1.5 var(--t-body);color:var(--t-muted)} .tk-bal__pay{ margin-top:16px;padding-top:14px;border-top:1px solid var(--t-line); display:flex;flex-wrap:wrap;gap:10px;align-items:center;justify-content:space-between; font:300 13px/1.5 var(--t-body);color:var(--t-muted); } /* Витрина работ: строка с переключателем «в лучшие». */ .tk-wrows{margin-top:18px} .tk-wrow{ display:flex;flex-wrap:wrap;gap:12px;align-items:center; padding:16px;border:1px solid var(--t-line);border-radius:var(--t-r); background:var(--t-card); } .tk-wrow+.tk-wrow{margin-top:10px} .tk-wrow--on{border-color:var(--t-accent-line);background:linear-gradient(120deg,var(--t-wash),transparent 60%)} .tk-wrow__t{font:500 16px/1.25 var(--t-body);color:var(--t-ink)} /* ——— Мелочи ——— */ .tk-badge{ display:inline-flex;align-items:center;gap:8px; border:1px solid var(--t-accent-line);background:var(--t-wash); color:var(--t-accent);border-radius:var(--t-r-pill); padding:6px 12px; font:var(--text-meta);font-size:10px;letter-spacing:.12em;text-transform:uppercase; } .tk-dot{width:6px;height:6px;border-radius:50%;background:currentColor} .tk-hide{display:none !important} /* Одна колонка: сначала слово, знак под ним. */ @media (max-width:980px){ .tk-hero__grid{grid-template-columns:1fr} .tk-hero__stage{max-width:420px;margin-top:8px} } @media (max-width:640px){ .tk-header__in{padding:10px var(--t-gut)} .tk-hero__facts{grid-template-columns:repeat(2,1fr)} /* Полки на телефоне: знак и номер в одну строку с названием. */ .tk-shelf{gap:12px 16px} .tk-shelf__sign{width:34px;height:34px} .tk-sign{width:34px;height:34px} } /* Подписям вокруг знака нужен воздух: на узком экране их нет. */ @media (max-width:560px){ .tk-orbit{display:none} .tk-hero__stage{max-width:320px} }