/* ═══════════════════════════════════════════════════════════════════ ТЕЙК ХАБ — слой темы и компоненты. Тёмный маркетплейс. Основа — почти чёрный лист (#161616), на нём плиты (#242424) и волосяные линии (#292929). Ничего цветного в основе: цвет тут работает знаком, а не фоном. Главное действие — белая заливка с чёрным текстом (18:1). Алый #FF4438 держит цену, активный раздел, бейджи и точку приёма — 5.3:1 на листе, поэтому годится и в текст. Светлая среда оставлена как второй скин: та же геометрия, те же роли, другие значения. Тёмная — основная и по умолчанию. Тему выбирает app.js и ставит атрибут data-theme на : тут только значения ролей. Базовые токены лежат в _ds/…/tokens/*.css. ═══════════════════════════════════════════════════════════════════ */ /* ——— ТЁМНАЯ СРЕДА (основная) ——— */ :root, :root[data-theme="dark"]{ color-scheme:dark; /* Поверхности */ --t-page:#161616; /* лист */ --t-rail:#131313; /* рельс разделов */ --t-card:#242424; /* плита */ --t-sunken:#131313; /* обложка, заглушка медиа */ --t-raised:#1B1B1B; /* всплывающее: меню, тост */ --t-panel:#1B1B1B; /* широкая панель под содержимым */ /* Линии */ --t-line:#292929; --t-line-2:#3A3A3A; --t-ink-strong:rgba(255,255,255,.32); /* Текст */ --t-ink:#FFFFFF; /* 18.1:1 */ --t-ink-2:#D6D6D6; /* 12.5:1 */ --t-muted:#A3A1A2; /* 7.1:1 */ --t-dim:#898989; /* 5.2:1 */ /* Знак. Заливкой почти не ходит: на нём плохо читается и белое, и чёрное. Его работа — цена, активное, бейдж, точка приёма. */ --t-accent:#FF4438; /* 5.3:1 на листе */ --t-accent-hi:#FF6A5E; --t-accent-ink:#170403; --t-wash:rgba(255,68,56,.12); --t-accent-line:rgba(255,68,56,.55); /* Главное действие: белым по чёрному. */ --t-btn:#FFFFFF; --t-btn-ink:#0E0E0E; --t-ok:#3DDC97; --t-danger:#FF6B5E; --t-shadow-menu:0 20px 48px rgba(0,0,0,.72); --t-shadow-toast:0 18px 44px rgba(0,0,0,.72); --t-header-bg:rgba(22,22,22,.92); --t-card-hover:#2C2C2C; --t-hero-glow:rgba(255,68,56,.16); --t-skel-hi:#2E2E2E; --t-hover-fill:rgba(255,255,255,.06); --t-glass:rgba(27,27,27,.72); --t-glass-line:rgba(255,255,255,.10); --t-glass-spec:rgba(255,255,255,.30); --t-glass-inner:rgba(255,68,56,.10); --t-glow-bottom:rgba(255,68,56,.22); /* Обложки без картинки: тёмные, чтобы не спорить с листом. */ --t-cover-1:#2E2E2E; --t-cover-1b:#4A4A4A; --t-cover-2:#243030; --t-cover-2b:#3E5450; --t-cover-3:#33231F; --t-cover-3b:#5A3A32; --t-cover-4:#282433; --t-cover-4b:#453E5C; --t-cover-5:#2A2A2A; --t-cover-5b:#404040; --t-cover-6:#332B22; --t-cover-6b:#57493A; /* Шрифт */ --t-display:var(--font-display); --t-body:var(--font-body); --t-mono:var(--font-mono); /* Форма. Пилюля — основная: она держит поиск, чипы и бейджи. */ --t-r:12px; --t-r-s:10px; --t-r-l:16px; --t-r-xl:32px; --t-r-cover:12px; --t-r-pill:9999px; /* Сетка. Рельс стоит слева и не прокручивается. */ --t-rail-w:88px; --t-max:1544px; --t-gut:clamp(16px,2.4vw,34px); /* Движение */ --t-ease:cubic-bezier(.2,0,0,1); --t-spring:cubic-bezier(.22,1,.36,1); --t-fast:120ms; --t-base:220ms; --t-sel-scale:1.01; --t-z-rail:45; --t-z-header:40; --t-z-menu:50; --t-z-toast:80; } /* ——— СВЕТЛАЯ СРЕДА (второй скин) ——— Меняются только цвета: форма, ритм и движение общие. */ :root[data-theme="light"]{ color-scheme:light; --t-page:#F4F4F4; --t-rail:#FFFFFF; --t-card:#FFFFFF; --t-sunken:#E9E9E9; --t-raised:#FFFFFF; --t-panel:#FFFFFF; --t-line:#E2E2E2; --t-line-2:#D2D2D2; --t-ink-strong:rgba(17,17,18,.34); --t-ink:#111112; --t-ink-2:#333335; --t-muted:#5C5C5C; --t-dim:#6E6E6E; --t-accent:#D82A1E; /* 4.5:1 на листе, белое на нём 4.9:1 */ --t-accent-hi:#B92116; --t-accent-ink:#FFFFFF; --t-wash:rgba(216,42,30,.08); --t-accent-line:rgba(216,42,30,.45); --t-btn:#111112; --t-btn-ink:#FFFFFF; --t-ok:#177A4F; --t-danger:#C02718; --t-shadow-menu:0 18px 44px rgba(10,10,10,.14); --t-shadow-toast:0 16px 40px rgba(10,10,10,.16); --t-header-bg:rgba(244,244,244,.92); --t-card-hover:#EFEFEF; --t-hero-glow:rgba(216,42,30,.10); --t-skel-hi:#E0E0E0; --t-hover-fill:rgba(17,17,18,.05); --t-glass:rgba(255,255,255,.72); --t-glass-line:rgba(17,17,18,.10); --t-glass-spec:rgba(255,255,255,.9); --t-glass-inner:rgba(216,42,30,.06); --t-glow-bottom:rgba(216,42,30,.14); --t-cover-1:#DFDFDF; --t-cover-1b:#BEBEBE; --t-cover-2:#D6E0DE; --t-cover-2b:#AFC3BF; --t-cover-3:#E5D8D3; --t-cover-3b:#C6ABA1; --t-cover-4:#DCD9E4; --t-cover-4b:#B6B0C7; --t-cover-5:#DEDEDE; --t-cover-5b:#BBBBBB; --t-cover-6:#E3DDD2; --t-cover-6b:#C2B6A1; } /* Смена темы — мягкая, но не мешает нажатиям. */ 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); } /* Главное действие — белым по чёрному: 18:1. Алая заливка давала бы 3.4:1 под белым текстом, а алый нужен цене и активному разделу. */ .ds-btn--primary{background:var(--t-btn);color:var(--t-btn-ink);border-color:var(--t-btn);font-weight:600} .ds-btn--primary:not(:disabled):hover{opacity:.86} .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) висит на 260px ниже дна страницы: с overflow-x:clip эти 260px оставались прокручиваемыми, и под подвалом открывалась пустая полоса. clip не создаёт свой скролл, поэтому липкая строка поиска работает как работала. Рельс разделов лежит снаружи .tk-app именно из-за этого clip: внутри он обрезался бы вместе со светом. */ .tk-app{ position:relative;display:flex;flex-direction:column;min-height:100dvh; overflow:clip;margin-left:var(--t-rail-w); } .tk-app--bare{margin-left:0} .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-plain,a.tk-pill,a.tk-line,a.tk-maker,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-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-rail{ position:fixed;left:0;top:0;bottom:0;width:var(--t-rail-w); background:var(--t-rail); display:flex;flex-direction:column;align-items:center; padding:20px 0 18px;gap:6px; z-index:var(--t-z-rail); } .tk-rail__logo{display:block;margin-bottom:16px} .tk-rail__logo img{width:30px;height:30px;display:block} .tk-rail__b{ width:46px;height:46px;border-radius:var(--t-r); display:grid;place-items:center; background:none;border:none;padding:0;cursor:pointer; color:var(--t-dim); transition:color var(--t-fast) var(--t-ease),background var(--t-fast) var(--t-ease); } .tk-rail__b:hover{color:var(--t-ink);background:var(--t-hover-fill)} .tk-rail__b--on{color:var(--t-ink);background:var(--t-card)} .tk-rail__sp{margin-top:auto} /* Счётчик корзины на иконке: цифра важнее подписи. */ .tk-rail__n{ position:absolute;transform:translate(14px,-14px); min-width:17px;height:17px;padding:0 5px;border-radius:var(--t-r-pill); background:var(--t-accent);color:#fff; display:inline-flex;align-items:center;justify-content:center; font:700 10px/1 var(--t-mono); } .tk-rail__b{position:relative} /* Полоса разделов на телефоне: рельс туда не помещается. */ .tk-tabs{ position:fixed;left:0;right:0;bottom:0;z-index:var(--t-z-rail); display:none;background:var(--t-rail);border-top:1px solid var(--t-line); padding:8px max(10px,env(safe-area-inset-left)) calc(8px + env(safe-area-inset-bottom)); } .tk-tabs__b{ flex:1;min-height:48px;border:none;background:none;cursor:pointer; display:flex;flex-direction:column;align-items:center;justify-content:center;gap:4px; color:var(--t-dim);font:400 10px/1 var(--t-body); } .tk-tabs__b--on{color:var(--t-ink)} /* Строка поиска. Пилюля во всю ширину, справа — колокол. */ .tk-top{ position:sticky;top:0;z-index:var(--t-z-header); background:var(--t-page); padding:18px 0 10px; } .tk-top__in{ max-width:var(--t-max);margin:0 auto;padding-inline:var(--t-gut); display:flex;gap:12px;align-items:center; } .tk-search{ flex:1;min-width:0;position:relative; } .tk-search__i{ position:absolute;left:18px;top:50%;transform:translateY(-50%); color:var(--t-dim);pointer-events:none;display:flex; } .tk-search .ds-field{display:block;margin:0} .tk-search input{ width:100%;height:54px;border-radius:var(--t-r-pill); border:1px solid var(--t-line);background:transparent;color:var(--t-ink); padding:0 22px 0 46px;font:400 16px/1 var(--t-body); transition:border-color var(--t-fast) var(--t-ease); } .tk-search input::placeholder{color:var(--t-dim)} .tk-search input:focus{outline:none;border-color:var(--t-line-2)} .tk-search input:focus-visible{outline:2px solid var(--t-accent);outline-offset:2px} .tk-circ{ flex:none;width:54px;height:54px;border-radius:50%; border:1px solid var(--t-line);background:none;cursor:pointer; display:grid;place-items:center;color:var(--t-muted); transition:color var(--t-fast) var(--t-ease),border-color var(--t-fast) var(--t-ease); } .tk-circ:hover{color:var(--t-ink);border-color:var(--t-line-2)} .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-pill{ background:none;border:1px solid var(--t-line);border-radius:var(--t-r-pill); padding:10px 16px;cursor:pointer;white-space:nowrap; font:400 14px/1 var(--t-body);color:var(--t-muted); display:inline-flex;align-items:center;gap:8px; transition:color var(--t-fast) var(--t-ease),border-color var(--t-fast) var(--t-ease),background var(--t-fast) var(--t-ease); } .tk-pill:hover{color:var(--t-ink);border-color:var(--t-line-2)} .tk-pill--on,.tk-pill--accent{background:var(--t-card);border-color:var(--t-card);color:var(--t-ink)} .tk-pill__dot{ min-width:18px;height:18px;padding:0 5px;border-radius:var(--t-r-pill); background:var(--t-accent);color:#fff; display:inline-flex;align-items:center;justify-content:center; font:700 10px/1 var(--t-mono); } /* Метка-тег под названием: мельче чипа и не нажимается. */ .tk-tag{ display:inline-flex;align-items:center; padding:5px 10px;border-radius:var(--t-r-pill); background:var(--t-hover-fill);color:var(--t-muted); font:400 12px/1 var(--t-body);white-space:nowrap; } .tk-menu{ position:absolute;right:0;top:calc(100% + 10px);min-width:220px; background:var(--t-raised);border:1px solid var(--t-line);border-radius:var(--t-r-l); 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)} @media (max-width:900px){ .tk-rail{display:none} .tk-tabs{display:flex} .tk-app{margin-left:0;padding-bottom:76px} .tk-top{padding-top:12px} .tk-search .ds-field{display:block;margin:0} .tk-search input{height:48px;font-size:16px} .tk-circ{width:48px;height:48px} } Класс 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-wrap{max-width:var(--t-max);margin:0 auto;padding-inline:var(--t-gut)} .tk-block{margin-top:clamp(28px,3.6vw,44px)} /* Заголовок раздела: слева название, справа ссылка «смотреть все». */ .tk-sh{display:flex;flex-wrap:wrap;gap:10px 20px;align-items:baseline;justify-content:space-between;margin-bottom:16px} .tk-sh__t{margin:0;font:700 clamp(19px,2.1vw,24px)/1.15 var(--t-display);letter-spacing:-.01em;color:var(--t-ink)} .tk-sh__a{ font:400 14px/1 var(--t-body);color:var(--t-muted);text-decoration:none; display:inline-flex;align-items:center;gap:8px; transition:color var(--t-fast) var(--t-ease); } .tk-sh__a:hover{color:var(--t-ink)} /* ——— Баннер ——— Одна плита во всю ширину вместо карусели: показывать нечего, кроме того, зачем сюда пришли. Знак Тейка стоит справа и вращается. */ .tk-banner{ position:relative;overflow:hidden; border-radius:var(--t-r-xl);background:var(--t-panel); min-height:clamp(320px,38vw,430px); display:grid;align-items:center; grid-template-columns:minmax(0,1.15fr) minmax(0,.85fr); gap:clamp(16px,3vw,40px); padding:clamp(26px,3.4vw,48px); } .tk-banner::before{ content:"";position:absolute;inset:auto -10% -60% 30%;height:120%; background:radial-gradient(50% 50% at 50% 50%,var(--t-hero-glow),transparent 70%); pointer-events:none; transform:translate3d(calc(var(--tk-mx,0) * 34px),calc(var(--tk-my,0) * 22px),0); transition:transform 500ms var(--t-ease); } .tk-banner__in{position:relative;z-index:1;min-width:0} .tk-banner__k{ display:inline-flex;align-items:center;gap:9px;margin-bottom:18px; padding:7px 14px;border-radius:var(--t-r-pill); border:1px solid var(--t-accent-line);color:var(--t-accent); font:var(--text-meta);font-size:10px;letter-spacing:.14em;text-transform:uppercase; } .tk-banner__t{ margin:0;font:700 clamp(30px,4.6vw,56px)/1.02 var(--t-display); letter-spacing:-.03em;color:var(--t-ink);text-wrap:balance; } .tk-banner__d{margin:18px 0 0;max-width:36em;font:300 clamp(15px,1.4vw,17px)/1.6 var(--t-body);color:var(--t-muted)} .tk-banner__cta{margin:26px 0 0;display:flex;flex-wrap:wrap;gap:10px} .tk-banner__stage{position:relative;z-index:1;justify-self:center;width:100%;max-width:340px;aspect-ratio:1/1} /* Знак Тейка в объёме. Холст рисует landing.js: кольцо, буква и полосы звука. Подписи лежат поверх и переводятся вместе со страницей, поэтому снаружи заморозки. */ .tk-stage{position:absolute;inset:0;z-index:1} .tk-stage__cv{display:block;width:100%;height:100%} .tk-stage__halo{ position:absolute;inset:12%;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-muted); font:var(--text-meta);font-size:9.5px;letter-spacing:.12em;white-space:nowrap; animation:tk-float 7s var(--t-ease) infinite; animation-delay:calc(var(--i,0) * -1.6s); } .tk-orbit--a{top:2%;left:-6%} .tk-orbit--b{top:26%;right:-8%} .tk-orbit--c{bottom:24%;left:-8%} .tk-orbit--d{bottom:2%;right:-2%} @keyframes tk-float{0%,100%{transform:translateY(0)}50%{transform:translateY(-9px)}} @keyframes tk-breathe{0%,100%{opacity:.6;transform:scale(1)}50%{opacity:1;transform:scale(1.06)}} /* Показания под баннером: одна строка цифр, без плашек. */ .tk-num{ margin-top:14px;display:grid;gap:1px;background:var(--t-line); border-radius:var(--t-r-l);overflow:hidden; grid-template-columns:repeat(auto-fit,minmax(150px,1fr)); } .tk-num__c{background:var(--t-panel);padding:18px 20px} .tk-num__v{font:700 clamp(20px,2.2vw,26px)/1 var(--t-display);letter-spacing:-.02em;font-variant-numeric:tabular-nums;color:var(--t-ink)} .tk-num__c--accent .tk-num__v{color:var(--t-accent)} .tk-num__k{margin-top:7px;font:var(--text-meta);font-size:10px;letter-spacing:.12em;text-transform:uppercase;color:var(--t-dim)} /* Чипы разделов: тот же чип, что и в фильтрах каталога. */ .tk-chips{display:flex;flex-wrap:wrap;gap:8px} /* ——— Строки товара ——— Две колонки на широком экране: так на первый экран влезает вдвое больше, чем сеткой обложек, и слушать удобнее — строка не прыгает. */ .tk-list{display:grid;gap:10px} @media (min-width:1000px){.tk-list{grid-template-columns:repeat(2,minmax(0,1fr))}} .tk-line{ display:flex;align-items:center;gap:12px; background:var(--t-card);border-radius:var(--t-r-l); /* Отступ одинаков со всех сторон. Раньше слева стояло 9px против 14px справа, и обложка липла к краю плиты: на строке это видно сразу, потому что квадрат обложки — самая тёмная фигура в ряду и глаз мерит расстояние именно по ней. */ padding:10px 14px;color:inherit;text-decoration:none; transition:background var(--t-fast) var(--t-ease); } .tk-line:hover{background:var(--t-card-hover)} .tk-line__cv{ flex:none;width:46px;height:46px;border-radius:var(--t-r-s); background:var(--t-sunken);display:grid;place-items:center;overflow:hidden; font:700 13px/1 var(--t-display);color:var(--t-dim); } .tk-line__go{flex:1;min-width:0;display:flex;align-items:center;gap:12px;color:inherit;text-decoration:none} .tk-line__in{flex:1;min-width:0;display:flex;flex-direction:column;gap:3px} .tk-line__t{font:500 14.5px/1.25 var(--t-body);color:var(--t-ink);overflow:hidden;text-overflow:ellipsis;white-space:nowrap} .tk-line__m{font:400 13px/1.2 var(--t-body);color:var(--t-dim);overflow:hidden;text-overflow:ellipsis;white-space:nowrap} .tk-line__p{font:500 14px/1 var(--t-mono);color:var(--t-accent);font-variant-numeric:tabular-nums;white-space:nowrap} .tk-line__b{ flex:none;width:34px;height:34px;border-radius:50%; border:1px solid var(--t-line);background:none;cursor:pointer; display:grid;place-items:center;color:var(--t-muted); transition:color var(--t-fast) var(--t-ease),border-color var(--t-fast) var(--t-ease); } .tk-line__b:hover{color:var(--t-ink);border-color:var(--t-line-2)} /* ——— Лента авторов ——— Едет вбок с прилипанием: список длинный, а места мало. */ .tk-reel{ display:grid;grid-auto-flow:column;grid-auto-columns:minmax(196px,196px); gap:12px;overflow-x:auto;scroll-snap-type:x mandatory; padding-bottom:6px;scrollbar-width:thin; } .tk-reel>*{scroll-snap-align:start} .tk-maker{ background:var(--t-card);border-radius:var(--t-r-l);padding:10px; display:flex;flex-direction:column;gap:10px;color:inherit;text-decoration:none; transition:background var(--t-fast) var(--t-ease); } .tk-maker:hover{background:var(--t-card-hover)} .tk-maker__cv{ position:relative;aspect-ratio:1/1;border-radius:var(--t-r);overflow:hidden; background:var(--t-sunken);display:grid;place-items:center; font:700 26px/1 var(--t-display);color:var(--t-dim); } /* Место в списке — не украшение: тройка лидеров подписана знаком. */ .tk-maker__n{ position:absolute;left:8px;top:8px; padding:4px 9px;border-radius:var(--t-r-pill); background:rgba(0,0,0,.55);color:#fff; font:500 11px/1 var(--t-mono); } .tk-maker--top .tk-maker__n{background:var(--t-accent);color:#fff} .tk-maker__t{font:600 14.5px/1.2 var(--t-body);color:var(--t-ink);overflow:hidden;text-overflow:ellipsis;white-space:nowrap} .tk-maker__tags{display:flex;gap:6px;overflow:hidden} .tk-maker__s{display:flex;gap:14px;font:400 12px/1 var(--t-mono);color:var(--t-dim);font-variant-numeric:tabular-nums} .tk-maker__s span{display:inline-flex;align-items:center;gap:5px} .tk-maker__go{ margin-top:2px;border:1px solid var(--t-line);border-radius:var(--t-r); padding:9px 0;text-align:center;font:400 13px/1 var(--t-body);color:var(--t-muted); transition:color var(--t-fast) var(--t-ease),border-color var(--t-fast) var(--t-ease); } .tk-maker:hover .tk-maker__go{color:var(--t-ink);border-color:var(--t-line-2)} /* ——— Условия ——— Широкая плита с волосяными перегородками вместо трёх карточек: это один договор, а не три предложения. */ .tk-terms{ background:var(--t-panel);border-radius:var(--t-r-xl); padding:clamp(22px,3vw,36px); display:grid;gap:clamp(18px,2.4vw,30px); } @media (min-width:900px){.tk-terms{grid-template-columns:minmax(0,1fr) minmax(0,1.25fr);align-items:center}} .tk-terms__t{margin:0;font:700 clamp(22px,2.8vw,34px)/1.08 var(--t-display);letter-spacing:-.02em;color:var(--t-ink);text-wrap:balance} .tk-terms__t b{color:var(--t-accent);font-weight:700} .tk-terms__d{margin:14px 0 0;max-width:34em;font:300 15px/1.6 var(--t-body);color:var(--t-muted)} .tk-terms__g{display:grid;gap:1px;background:var(--t-line);border-radius:var(--t-r-l);overflow:hidden} @media (min-width:560px){.tk-terms__g{grid-template-columns:repeat(2,1fr)}} .tk-terms__c{background:var(--t-panel);padding:18px 20px;display:flex;flex-direction:column;gap:8px} .tk-terms__v{font:700 clamp(19px,2.1vw,24px)/1 var(--t-display);letter-spacing:-.02em;color:var(--t-ink)} .tk-terms__k{font:400 13px/1.4 var(--t-body);color:var(--t-dim)} /* ——— Что дальше ——— Три строки, а не карта со стрелками: список честнее рисунка, потому что сроков мы пока не обещаем. */ .tk-next{display:grid;gap:1px;background:var(--t-line);border-radius:var(--t-r-l);overflow:hidden} .tk-next__r{ background:var(--t-panel);padding:clamp(18px,2.2vw,24px) clamp(18px,2.2vw,26px); display:grid;gap:6px 22px;align-items:baseline; } @media (min-width:820px){.tk-next__r{grid-template-columns:11ch minmax(0,15ch) minmax(0,1fr)}} .tk-next__k{font:var(--text-meta);font-size:10px;letter-spacing:.14em;text-transform:uppercase;color:var(--t-dim)} .tk-next__k--now{color:var(--t-accent)} .tk-next__t{font:600 17px/1.2 var(--t-body);color:var(--t-ink)} .tk-next__d{font:300 14.5px/1.55 var(--t-body);color:var(--t-muted)} /* ——— Последняя плита ——— */ .tk-end{ position:relative;overflow:hidden; margin-block:clamp(28px,3.6vw,44px) clamp(40px,5vw,72px); border-radius:var(--t-r-xl);background:var(--t-panel); padding:clamp(28px,4vw,56px); display:grid;gap:clamp(20px,3vw,36px); } @media (min-width:820px){.tk-end{grid-template-columns:minmax(0,1fr) auto;align-items:end}} .tk-end::before{ content:"";position:absolute;inset:-40% -20% auto auto;width:70%;height:160%; background:radial-gradient(50% 50% at 70% 40%,var(--t-hero-glow),transparent 70%); pointer-events:none; } .tk-end>*{position:relative;z-index:1} .tk-end__t{margin:0;font:700 clamp(24px,3.4vw,42px)/1.04 var(--t-display);letter-spacing:-.03em;color:var(--t-ink);text-wrap:balance} .tk-end__d{margin:16px 0 0;max-width:36em;font:300 15px/1.6 var(--t-body);color:var(--t-muted)} .tk-end__cta{display:flex;flex-wrap:wrap;gap:10px} @media (max-width:900px){ .tk-banner{grid-template-columns:1fr;min-height:0} .tk-banner__stage{max-width:240px;order:-1} .tk-orbit{display:none} } /* ——— Карточки каталога ——— */ .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-lrow), и это не педантизм. Раньше здесь стоял тот же .tk-line, что и у строк товара на главной, — два разных правила под одним именем в одном файле. Побеждало нижнее, и строка товара получала «padding:16px 0» вместо своего: обложка вставала вплотную к левому краю плиты, а отступ справа оставался на месте. Ряд из таких строк читается сдвинутым, и починить это, не разведя имена, было нельзя. */ .tk-lrow{ display:flex;flex-wrap:wrap;gap:14px;align-items:center; padding:16px 0;border-bottom:1px solid var(--t-line); } .tk-lrow__media{ width:56px;height:56px;background:var(--t-sunken); border-radius:var(--t-r-cover);flex:none; } .tk-lrow__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 уже занят строкой поиска в оболочке — она приклеена к верху окна и красит фон во всю ширину, и список подхватывал её правила, вылезал за края плиты и накрывал собственный заголовок. */ .tk-sells{margin-top:8px} .tk-sells__row{ display:flex;flex-wrap:wrap;gap:8px 14px;align-items:baseline; padding:13px 0;border-bottom:1px solid var(--t-line); } .tk-sells__row:last-child{border-bottom:none;padding-bottom:0} .tk-sells__n{font-family:var(--t-mono);font-size:11px;letter-spacing:.1em;color:var(--t-accent);flex:none} .tk-sells__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:640px){ .tk-num{grid-template-columns:repeat(2,1fr)} .tk-sign{width:34px;height:34px} .tk-reel{grid-auto-columns:minmax(168px,168px)} } /* ═══════════════════════════════════════════════════════════════════ РАЗДЕЛЫ, СТУДИИ, ПУЛЬТ БИТОВ, ПОДИУМ, КАРТА Всё, что добавилось вместе с разделами товара, записью на студию и новым пультом битов. Порядок тот же, что на экране: сначала общая форма блоков, потом их начинка. Про скругления. Раньше радиус ставился на глаз, и вложенные плитки выглядели то острее, то круглее внешней рамки. Теперь действует одно правило: радиус внутренней плитки равен радиусу внешней минус её отступ (--t-r-in). При 14 и 4 это ровно 10 — углы идут параллельно, а не сходятся клином. ═══════════════════════════════════════════════════════════════════ */ :root{ /* Радиусы плашек живут выше, в наборе токенов. Здесь — только два производных: плитка внутри плиты и её отступ от края. */ --t-r-in:10px; /* плитка внутри плиты: 16 − 6 */ --t-r-pad:6px; /* отступ вложенной плитки от края рамки */ } /* ——— Блоки вкладки ——— */ .tk-blks{display:flex;flex-direction:column;gap:clamp(30px,4vw,52px);margin-top:clamp(26px,3.4vw,40px)} .tk-blk{min-width:0} /* ——— Мини-блоки разделов ——— Первый экран вкладки: с чего начать. Плитка держит знак, имя, строку сути и цену — больше в неё класть нечего. */ .tk-cats{ display:grid;gap:12px; grid-template-columns:repeat(auto-fit,minmax(210px,1fr)); } .tk-cat{ position:relative;display:flex;flex-direction:column;gap:6px; padding:18px 18px 16px;min-height:158px; border:1px solid var(--t-line);border-radius:var(--t-r-l); background:var(--t-card);color:inherit;text-decoration:none; transition:border-color var(--t-base) var(--t-ease),background var(--t-base) var(--t-ease),transform var(--t-base) var(--t-spring); overflow:hidden; } .tk-cat::before{ content:"";position:absolute;inset:auto -30% -60% -30%;height:110%; background:radial-gradient(60% 60% at 50% 100%,var(--t-wash),transparent 70%); opacity:0;transition:opacity var(--t-base) var(--t-ease); } .tk-cat:hover{border-color:var(--t-accent-line);background:var(--t-card-hover);transform:translateY(-2px)} .tk-cat:hover::before{opacity:1} .tk-cat:focus-visible{outline:2px solid var(--t-accent);outline-offset:2px} .tk-cat>*{position:relative;z-index:1} .tk-cat__sign{ display:inline-flex;align-items:center;justify-content:center; width:44px;height:44px;border-radius:var(--t-r-in); background:var(--t-sunken);color:var(--t-ink); transition:color var(--t-base) var(--t-ease),background var(--t-base) var(--t-ease); } .tk-cat:hover .tk-cat__sign{color:var(--t-accent);background:var(--t-wash)} .tk-cat__sign--big{width:52px;height:52px;flex:none} .tk-cat__t{margin-top:12px;font:600 17px/1.2 var(--t-display);letter-spacing:var(--tracking-display-soft);color:var(--t-ink)} .tk-cat__d{font:300 13.5px/1.5 var(--t-body);color:var(--t-muted)} .tk-cat__foot{ margin-top:auto;padding-top:12px;display:flex;gap:10px;align-items:baseline;justify-content:space-between; font-family:var(--t-mono);font-size:13px;color:var(--t-ink); } .tk-cat__n{font:var(--text-meta);font-size:10px;letter-spacing:.1em;text-transform:uppercase;color:var(--t-dim)} /* ——— Строки товара ——— Карточка-строка: та же форма, что у списка «Свежие биты», только с рамкой. Внутренняя плитка меньше внешней ровно на отступ. */ .tk-lines,.tk-brows{display:flex;flex-direction:column;gap:10px} @media (min-width:900px){ .tk-lines,.tk-brows{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px} } .tk-line--card{ padding:12px 14px;border:1px solid var(--t-line);border-radius:var(--t-r-l); background:var(--t-card);border-bottom:1px solid var(--t-line); transition:border-color var(--t-base) var(--t-ease),background var(--t-base) var(--t-ease); } .tk-line--card:hover{border-color:var(--t-line-2);background:var(--t-card-hover)} .tk-line__mark{ display:inline-flex;align-items:center;justify-content:center;flex:none; width:40px;height:40px;border-radius:var(--t-r-in); background:var(--t-sunken);color:var(--t-muted); } /* Бит строкой: плитка с буквами, имя, полоска, цена, корзина. */ .tk-brow{ display:flex;gap:12px;align-items:center;min-width:0; padding:var(--t-r-pad);padding-right:12px; border:1px solid var(--t-line);border-radius:var(--t-r-l); background:var(--t-card); transition:border-color var(--t-base) var(--t-ease),background var(--t-base) var(--t-ease); } .tk-brow:hover{border-color:var(--t-line-2);background:var(--t-card-hover)} .tk-brow--on{border-color:var(--t-accent-line)} .tk-brow__mark{ position:relative;flex:none;width:46px;height:46px; border:none;border-radius:var(--t-r-in); background:var(--t-sunken);color:var(--t-ink);cursor:pointer; display:grid;place-items:center; transition:background var(--t-base) var(--t-ease),color var(--t-base) var(--t-ease); } .tk-brow__ini{ font:var(--text-meta);font-size:12px;letter-spacing:.06em;text-transform:uppercase;color:var(--t-muted); transition:opacity var(--t-fast) var(--t-ease); } .tk-brow__play{position:absolute;inset:0;display:grid;place-items:center;opacity:0;transition:opacity var(--t-fast) var(--t-ease)} .tk-brow__mark:hover,.tk-brow__mark:focus-visible{background:var(--t-wash);color:var(--t-accent)} .tk-brow__mark:hover .tk-brow__ini,.tk-brow__mark:focus-visible .tk-brow__ini,.tk-brow__mark--on .tk-brow__ini{opacity:0} .tk-brow__mark:hover .tk-brow__play,.tk-brow__mark:focus-visible .tk-brow__play,.tk-brow__mark--on .tk-brow__play{opacity:1} .tk-brow__mark--on{background:var(--t-wash);color:var(--t-accent);box-shadow:inset 0 0 0 1px var(--t-accent-line)} .tk-brow__who{flex:1 1 auto;min-width:0;display:block;text-decoration:none} .tk-brow__t{display:block;font:500 15.5px/1.25 var(--t-body);color:var(--t-ink);overflow:hidden;text-overflow:ellipsis;white-space:nowrap} .tk-brow__m{display:block;margin-top:4px;font:var(--text-meta);font-size:10px;letter-spacing:.1em;text-transform:uppercase;color:var(--t-muted);overflow:hidden;text-overflow:ellipsis;white-space:nowrap} .tk-brow__wave{display:none;flex:0 1 120px;min-width:60px} @media (min-width:1100px){.tk-brow__wave{display:block}} .tk-brow__p{flex:none;font-size:13.5px;color:var(--t-ink)} .tk-brow__cart{ flex:none;width:36px;height:36px;border-radius:var(--t-r-s); border:1px solid var(--t-line);background:transparent;color:var(--t-muted); display:grid;place-items:center;cursor:pointer; transition:color var(--t-fast) var(--t-ease),border-color var(--t-fast) var(--t-ease); } .tk-brow__cart:hover{color:var(--t-accent);border-color:var(--t-accent-line)} /* ——— Панель ——— */ .tk-panel{display:flex;flex-direction:column;gap:14px;padding:18px;text-decoration:none} .tk-panel__head{display:flex;gap:12px;align-items:center;min-width:0} .tk-panel__sign{ display:inline-flex;align-items:center;justify-content:center;flex:none; width:48px;height:48px;border-radius:var(--t-r-in); background:var(--t-sunken);color:var(--t-ink); } .tk-panel__t{display:block;font:600 18px/1.2 var(--t-display);letter-spacing:var(--tracking-display-soft);color:var(--t-ink)} .tk-panel__list{display:flex;flex-direction:column;gap:7px} .tk-panel__li{font:300 14px/1.5 var(--t-body);color:var(--t-muted)} .tk-panel__foot{ margin-top:auto;padding-top:12px;border-top:1px solid var(--t-line); display:flex;gap:10px;align-items:baseline;justify-content:space-between; } /* ——— Квадраты: обложки ——— */ .tk-squares{display:grid;gap:14px;grid-template-columns:repeat(auto-fill,minmax(180px,1fr))} .tk-sq{display:block;text-decoration:none;color:inherit} .tk-sq__pic{ display:grid;place-items:center;aspect-ratio:1/1;overflow:hidden; border:1px solid var(--t-line);border-radius:var(--t-r-l); background:var(--t-sunken);color:var(--t-muted); transition:border-color var(--t-base) var(--t-ease),transform var(--t-base) var(--t-spring); } .tk-sq:hover .tk-sq__pic{border-color:var(--t-accent-line);transform:translateY(-3px)} .tk-sq__pic img{width:100%;height:100%;object-fit:cover;display:block} .tk-sq__t{display:block;margin-top:12px;font:500 15.5px/1.25 var(--t-body);color:var(--t-ink)} .tk-sq--more .tk-sq__pic{border-style:dashed} /* ——— Студии ——— */ .tk-studiocard{display:flex;flex-direction:column;gap:0;padding:var(--t-r-pad);text-decoration:none;overflow:hidden} .tk-studiocard__pic{ display:grid;place-items:center;aspect-ratio:16/10;overflow:hidden; border-radius:var(--t-r-in);background:var(--t-sunken); } .tk-studiocard__pic img{width:100%;height:100%;object-fit:cover;display:block} .tk-studiocard__mark{ font:700 26px/1 var(--t-display);letter-spacing:.04em;color:var(--t-dim); } .tk-studiocard__body{padding:14px 12px 12px;min-width:0} .tk-studiocard__t{font:600 17px/1.2 var(--t-display);letter-spacing:var(--tracking-display-soft);color:var(--t-ink)} .tk-studiocard__foot{margin-top:12px;display:flex;gap:10px;align-items:center;justify-content:space-between;flex-wrap:wrap} .tk-slotchip{ display:inline-flex;align-items:center;gap:6px; padding:4px 10px;border-radius:var(--t-r-pill); background:var(--t-wash);color:var(--t-accent); font:var(--text-meta);font-size:10px;letter-spacing:.08em;text-transform:uppercase; } /* Блок «Запись на студии» на вкладке услуг: слева зов на карту. */ .tk-recblk{display:grid;gap:14px;grid-template-columns:minmax(0,1fr)} @media (min-width:900px){.tk-recblk{grid-template-columns:minmax(0,1.25fr) minmax(0,1.3fr)}} .tk-recblk__map{ /* Пять чисел, из которых собрана вся плита. Держим их здесь, а не раскидываем по правилам: микрофон, ширина колонки текста и просветы вокруг него связаны между собой, и разъехаться им нельзя. Тронул одно — остальные пересчитались сами. --mic-h высота плиты; от неё меряется всё остальное --pad отступ плиты внутрь --mic-img высота картинки — выше плиты, низ уходит под край --mic-drop насколько микрофон опущен от верха --mic-w ширина картинки — из её пропорций (640×1058) --mic-gap просвет слева и справа от микрофона Доля видимого = (1 − drop) / img, и она держится на четырёх пятых при любой паре чисел, лишь бы они сходились: подняли микрофон — увеличили картинку, и наоборот. Сейчас 0.952 / 1.19. Картинка выше плиты: когда она была ровно в её рост, микрофон выходил мелким для такой плиты — узкая фигура в высоком поле, — и приходилось топить его ниже, чтобы обрезать положенную пятую часть. Теперь наоборот: стекло крупнее плиты, стоит почти от верхнего края, а лишнее уходит вниз. */ --mic-h:clamp(260px,26vw,340px); --pad:clamp(18px,2vw,26px); --mic-img:calc(var(--mic-h) * 1.19); --mic-drop:calc(var(--mic-h) * .048); --mic-w:calc(var(--mic-img) * .605); --mic-gap:clamp(14px,2vw,26px); /* Плита не растягивается под соседнюю колонку. Раньше растягивалась — колонка со студиями рядом бывает вдвое выше, — и микрофон, который меряется высотой плиты, вырастал шире неё самой и наезжал на заголовок. Ровные по высоте половины стоили того меньше, чем целый блок. */ align-self:start; /* Высота задана, а не «не меньше». Микрофон меряется ею, а колонка текста — шириной микрофона: стоит плите подрасти под длинную строку, и обрезка поехала бы, а стекло вылезло бы за отведённое. Поэтому высота — вход, а не выход: содержимое подгоняется под неё (см. строку описания), а не наоборот. */ position:relative;overflow:hidden;height:var(--mic-h); /* Сверху подпись, снизу зов — между ними пусто по делу, а не от того, что содержимое прижато к нижнему краю. */ display:flex;flex-direction:column;justify-content:space-between;gap:16px; padding:var(--pad);border-radius:var(--t-r-xl); border:1px solid var(--t-accent-line); background:linear-gradient(150deg,var(--t-wash),transparent 60%),var(--t-card); text-decoration:none;color:inherit; } /* Верхняя строка. Раньше её не было, и над заголовком стояла пустая треть плиты: содержимое прижималось к низу, а сверху оставался воздух, который ничего не значил. Теперь там то, что и так надо знать до нажатия, — сколько мест на карте и когда ближайшее окно. */ .tk-recblk__top{ position:relative;z-index:1; display:flex;flex-wrap:wrap;gap:6px 14px;align-items:baseline; max-width:calc(100% + var(--pad) - var(--mic-w) - var(--mic-gap) * 2); } .tk-recblk__eyebrow{ font:var(--text-meta);font-size:10px;letter-spacing:.14em;text-transform:uppercase; color:var(--t-accent); } .tk-recblk__free{ font:var(--text-meta);font-size:10px;letter-spacing:.1em;text-transform:uppercase; color:var(--t-dim); } .tk-recblk__grid{ position:absolute;inset:0;pointer-events:none;opacity:.6; background-image:linear-gradient(var(--t-line) 1px,transparent 1px),linear-gradient(90deg,var(--t-line) 1px,transparent 1px); background-size:38px 38px; mask-image:radial-gradient(70% 70% at 30% 30%,#000,transparent 75%); -webkit-mask-image:radial-gradient(70% 70% at 30% 30%,#000,transparent 75%); } .tk-recblk__copy{ position:relative;z-index:1; /* Колонка кончается там, где начинается микрофон. Ширина считается из тех же переменных, что и он сам: сколько заняло стекло вместе с просветами, столько текст и не берёт. Плюс --pad: у колонки 100% — это ширина внутри отступов плиты, а просвет справа отмеряется от её края, и правый отступ надо вернуть обратно, иначе микрофон встанет не по середине зазора. Раньше строка шла под микрофон: буквы оставались сверху и читались, но заголовок ложился прямо на блик, и плита выглядела собранной из двух картинок, наехавших друг на друга. */ max-width:calc(100% + var(--pad) - var(--mic-w) - var(--mic-gap) * 2); } /* Заголовок крупнее: он держит плиту. Мелкий заголовок в высокой плите и был той пустотой, которую хотелось чем-то заполнить. */ .tk-recblk__t{display:block;font:600 clamp(22px,2.5vw,32px)/1.08 var(--t-display);letter-spacing:var(--tracking-display);text-wrap:balance} /* Две строки и не больше: высота плиты задана, и третья строка выдавила бы «Открыть карту» под нижний край. Обрезаем описание, а не зов к действию — без него плита перестаёт быть кнопкой. */ .tk-recblk__d{ display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden; margin-top:12px;max-width:26em;font:300 15px/1.6 var(--t-body);color:var(--t-muted); } .tk-recblk__go{display:block;margin-top:16px;font-family:var(--t-mono);font-size:12px;letter-spacing:.08em;color:var(--t-accent)} .tk-recblk__map:hover .tk-recblk__go{text-decoration:underline} @media (max-width:720px){ /* Микрофона там нет — ни колонки держать узкими, ни высоту задавать наперёд незачем: пусть плита растёт под текст. */ .tk-recblk__copy,.tk-recblk__top{max-width:none} .tk-recblk__map{height:auto;min-height:var(--mic-h)} .tk-recblk__d{-webkit-line-clamp:none;display:block;overflow:visible} } .tk-recblk__list{display:grid;gap:12px;grid-template-columns:repeat(auto-fit,minmax(190px,1fr))} /* ——— Карта ——— Рисует её Leaflet, лежащий в vendor/. Всё, что ниже, — приведение его в тот же вид, что и остальной Хаб: свои кнопки приближения, своя метка, своя подпись об источнике плиток. Слои внутри карты Leaflet раскладывает по z-index 400…700, а свои элементы управления — по 800…1000. Поэтому наши кнопки и карточка выбранной студии стоят выше тысячи: иначе их накрывало бы панелью Leaflet. */ .tk-map{ position:relative;overflow:hidden; height:clamp(320px,48vh,520px); border:1px solid var(--t-line);border-radius:var(--t-r-xl); background:var(--t-sunken); } /* Замороженный узел: внутри него Leaflet строит своё дерево. */ .tk-map__canvas{position:absolute;inset:0;z-index:1;background:transparent} /* Метки в разметке — только источник для map.js, глазом их не видно. */ .tk-map__pins{display:none} /* Строчка на случай, если карта не открылась. Лежит под ней: пришли плитки — их и видно, не пришли — видно объяснение. */ .tk-map__off{ position:absolute;inset:0;z-index:0; display:grid;place-items:center;padding:24px;text-align:center; font:300 14px/1.6 var(--t-body);color:var(--t-muted); } /* Тёмная тема: те же плитки, но вывернутые и приглушённые — иначе карта светит фонарём посреди чёрного листа. Выворачиваем только слой плиток: метки и подписи поверх остаются как были. */ :root[data-theme="dark"] .tk-map .leaflet-tile-pane{ filter:invert(1) hue-rotate(180deg) brightness(.86) contrast(.92); } /* Метка. Leaflet ставит на точку обёртку и сам её двигает; сдвиг «вверх и по центру» остаётся на самой метке — так её остриё приходится ровно на координату. Обёртка не ловит нажатия (interactive:false у иконки), а кнопка внутри ловит: тогда Leaflet не перехватывает щелчок, и он доходит до общего слушателя действий в app.js. */ .tk-pin__mark{pointer-events:none;background:none;border:none} .tk-pin{ transform:translate(-50%,-100%); display:inline-flex;align-items:center;gap:7px; padding:6px 10px 6px 8px;border-radius:var(--t-r-pill); border:1px solid var(--t-line-2);background:var(--t-raised);color:var(--t-ink); font:500 12.5px/1 var(--t-body);white-space:nowrap;cursor:pointer; box-shadow:var(--t-shadow-menu);pointer-events:auto; transition:transform var(--t-base) var(--t-spring),border-color var(--t-fast) var(--t-ease); } .tk-pin:hover{border-color:var(--t-accent)} .tk-pin--on{border-color:var(--t-accent);color:var(--t-accent)} .tk-pin--on .tk-pin__dot{background:var(--t-accent)} .tk-pin__dot{width:8px;height:8px;border-radius:50%;background:var(--t-accent);flex:none} .tk-map__ctrl{position:absolute;right:12px;top:12px;z-index:1200;display:flex;flex-direction:column;gap:6px} .tk-map__z{ width:34px;height:34px;border-radius:var(--t-r-s); border:1px solid var(--t-line-2);background:var(--t-raised);color:var(--t-ink); font:500 18px/1 var(--t-body);cursor:pointer; } .tk-map__z:hover{border-color:var(--t-accent);color:var(--t-accent)} /* Подпись об источнике плиток. Её ставит сам Leaflet, и это не украшение: OpenStreetMap отдаёт плитки при условии, что на карте стоит ссылка на них. Поэтому не убираем, а причёсываем. */ .tk-map .leaflet-control-attribution{ background:var(--t-glass);color:var(--t-muted); padding:2px 6px;border-radius:var(--t-r-s); font:var(--text-meta);font-size:9px;letter-spacing:.06em; } .tk-map .leaflet-control-attribution a{color:var(--t-muted);text-decoration:underline} .tk-map .leaflet-control-attribution a:hover{color:var(--t-ink)} /* Флажок Leaflet рядом со своим именем — единственное цветное пятно на всей карте, и на тёмном листе оно бьёт по глазам. Убираем картинку, имя со ссылкой остаётся: библиотеку тоже надо назвать. */ .tk-map .leaflet-control-attribution .leaflet-attribution-flag{display:none} .tk-map .leaflet-container{background:var(--t-sunken);font-family:var(--t-body)} .tk-map__card{ position:absolute;left:12px;right:12px;bottom:12px;z-index:1200; display:flex;flex-wrap:wrap;gap:12px;align-items:center; padding:14px 16px;border-radius:var(--t-r-l); border:1px solid var(--t-line);background:var(--t-raised); box-shadow:var(--t-shadow-menu); animation:tk-rise 220ms var(--t-spring) both; } @keyframes tk-rise{from{opacity:0;transform:translateY(12px)}to{opacity:1;transform:none}} .tk-chips{display:flex;flex-wrap:wrap;gap:8px} .tk-chip{ padding:8px 14px;border-radius:var(--t-r-pill); border:1px solid var(--t-line);background:transparent;color:var(--t-muted); font:400 13.5px/1 var(--t-body);cursor:pointer;min-height:36px; } .tk-chip:hover{border-color:var(--t-ink-strong);color:var(--t-ink)} .tk-chip--on{border-color:var(--t-accent);background:var(--t-wash);color:var(--t-accent)} /* ——— Свободные дни и окна ——— */ .tk-days{display:flex;gap:8px;overflow-x:auto;padding-bottom:4px} .tk-day{ flex:none;width:62px;min-height:76px;padding:10px 6px; border:1px solid var(--t-line);border-radius:var(--t-r-l); background:var(--t-card);color:var(--t-ink);cursor:pointer; display:flex;flex-direction:column;align-items:center;gap:4px; transition:border-color var(--t-fast) var(--t-ease),background var(--t-fast) var(--t-ease); } .tk-day:hover:not(:disabled){border-color:var(--t-ink-strong)} .tk-day--on{border-color:var(--t-accent);background:var(--t-wash)} .tk-day--full,.tk-day:disabled{opacity:.42;cursor:not-allowed} .tk-day__w{font:var(--text-meta);font-size:9.5px;letter-spacing:.08em;text-transform:uppercase;color:var(--t-muted)} .tk-day__n{font:600 19px/1 var(--t-display)} .tk-day__f{font-family:var(--t-mono);font-size:11px;color:var(--t-accent)} .tk-day--on .tk-day__f{color:var(--t-accent)} .tk-slots{display:grid;gap:8px;grid-template-columns:repeat(auto-fill,minmax(78px,1fr))} .tk-slot{ min-height:44px;border-radius:var(--t-r); border:1px solid var(--t-line);background:var(--t-card);color:var(--t-ink); font-family:var(--t-mono);font-size:14px;cursor:pointer; transition:border-color var(--t-fast) var(--t-ease),background var(--t-fast) var(--t-ease); } .tk-slot:hover:not(:disabled){border-color:var(--t-accent);color:var(--t-accent)} .tk-slot--on{border-color:var(--t-accent);background:var(--t-wash);color:var(--t-accent)} .tk-slot--busy{opacity:.32;cursor:not-allowed;text-decoration:line-through} /* ——— Страница студии ——— */ .tk-venue__head{display:flex;flex-wrap:wrap;gap:20px;align-items:center} .tk-venue__logo{ display:grid;place-items:center;flex:none; width:88px;height:88px;border-radius:var(--t-r-l);overflow:hidden; background:var(--t-sunken);color:var(--t-dim); font:700 26px/1 var(--t-display); } .tk-venue__logo img{width:100%;height:100%;object-fit:cover;display:block} .tk-venue__price{display:flex;flex-direction:column;gap:6px;align-items:flex-end;min-width:140px} .tk-shots{display:flex;gap:10px;overflow-x:auto;padding-bottom:4px} .tk-shots__wrap{position:relative;flex:none;display:inline-block} .tk-shots__i{ flex:none;width:clamp(180px,26vw,260px);aspect-ratio:3/2;object-fit:cover; border-radius:var(--t-r-l);border:1px solid var(--t-line);display:block; } .tk-shots__x{ position:absolute;top:8px;right:8px;width:26px;height:26px;border-radius:50%; border:1px solid var(--t-line-2);background:var(--t-raised);color:var(--t-ink); display:grid;place-items:center;cursor:pointer; } .tk-book__line{display:flex;justify-content:space-between;gap:12px;font:400 15px/1.4 var(--t-body)} /* ——— Напоминание о записи ——— */ .tk-remind{ display:flex;flex-wrap:wrap;gap:12px;align-items:center; padding:14px 16px;border-radius:var(--t-r-l); border:1px solid var(--t-accent-line); background:linear-gradient(120deg,var(--t-wash),transparent 70%),var(--t-card); } .tk-remind__i{ display:grid;place-items:center;flex:none;width:38px;height:38px; border-radius:var(--t-r-in);background:var(--t-wash);color:var(--t-accent); } .tk-remind__t{font:500 16px/1.25 var(--t-body);color:var(--t-ink)} .tk-remind--s{padding:12px 14px} /* ——— Пульт битов ——— */ .tk-desk{ /* Липнет под строкой поиска, а не поверх неё: у той сверху свои 18 + 54 + 10 точек. */ position:sticky;top:82px;z-index:5; margin-top:18px;padding:16px 16px 14px; border:1px solid var(--t-line);border-radius:var(--t-r-xl); background:var(--t-header-bg);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px); display:flex;flex-direction:column;gap:14px; } @supports not (backdrop-filter:blur(4px)){.tk-desk{background:var(--t-card)}} .tk-desk__q{display:flex;gap:10px;align-items:stretch} .tk-desk__q .ds-field{flex:1 1 auto;min-width:0} .tk-desk__q .ds-btn{flex:none} .tk-desk__extra{display:flex;flex-wrap:wrap;gap:14px;align-items:center} .tk-wall{display:flex;flex-wrap:wrap;gap:8px} .tk-wall__b{ display:inline-flex;align-items:center;gap:8px; padding:9px 14px;min-height:40px;border-radius:var(--t-r-pill); border:1px solid var(--t-line);background:var(--t-card);color:var(--t-ink); font:400 14px/1 var(--t-body);cursor:pointer; transition:border-color var(--t-fast) var(--t-ease),background var(--t-fast) var(--t-ease),color var(--t-fast) var(--t-ease); } .tk-wall__b:hover{border-color:var(--t-ink-strong)} .tk-wall__b--on{border-color:var(--t-accent-line);background:var(--t-wash);color:var(--t-ink)} .tk-wall__n{font-family:var(--t-mono);font-size:11px;color:var(--t-dim)} .tk-wall__b--on .tk-wall__n{color:var(--t-accent)} .tk-tempo{display:flex;gap:6px;overflow-x:auto;scrollbar-width:none} .tk-tempo::-webkit-scrollbar{display:none} .tk-tempo__b{ flex:1 1 92px;min-width:92px;min-height:52px;padding:8px 10px; border:1px solid var(--t-line);border-radius:var(--t-r); background:var(--t-card);color:var(--t-ink);cursor:pointer; display:flex;flex-direction:column;gap:4px;align-items:flex-start;justify-content:center; transition:border-color var(--t-fast) var(--t-ease),background var(--t-fast) var(--t-ease); } .tk-tempo__b:hover{border-color:var(--t-ink-strong)} .tk-tempo__b--on{border-color:var(--t-accent);background:var(--t-wash)} .tk-tempo__t{font:500 14px/1.15 var(--t-body)} .tk-tempo__s{font-family:var(--t-mono);font-size:10.5px;color:var(--t-muted)} .tk-tempo__b--on .tk-tempo__s{color:var(--t-accent)} /* Полка вбок: карточки едут строкой, полоса прокрутки скрыта. */ .tk-strip{display:flex;gap:14px;overflow-x:auto;scroll-snap-type:x proximity;padding-bottom:4px} .tk-strip__cell{flex:none;width:clamp(200px,22vw,236px);scroll-snap-align:start} .tk-strip__cell>.tk-card{height:100%} /* ——— Подиум ——— Три ступени: второе слева, первое в середине и выше, третье справа. На узком экране ступени становятся одной колонкой — порядок остаётся 1, 2, 3, потому что на телефоне «выше» уже ничего не значит. */ .tk-podium{ display:grid;gap:12px;align-items:end; grid-template-columns:repeat(3,minmax(0,1fr)); } .tk-pod{ display:flex;flex-direction:column;align-items:center;gap:14px; text-decoration:none;color:inherit;min-width:0; } .tk-pod__who{display:flex;flex-direction:column;align-items:center;gap:8px;text-align:center;min-width:0} .tk-pod__medal{ display:grid;place-items:center;width:26px;height:26px;border-radius:50%; background:var(--t-sunken);color:var(--t-muted); font:var(--text-meta);font-size:11px; } .tk-pod__name{font:600 17px/1.2 var(--t-display);letter-spacing:var(--tracking-display-soft);color:var(--t-ink)} .tk-pod__block{ width:100%;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:4px; border:1px solid var(--t-line);border-bottom:none; border-radius:var(--t-r-l) var(--t-r-l) 0 0; background:linear-gradient(180deg,var(--t-card),transparent); transition:background var(--t-base) var(--t-ease),border-color var(--t-base) var(--t-ease); } .tk-pod:hover .tk-pod__block{border-color:var(--t-accent-line);background:linear-gradient(180deg,var(--t-wash),transparent)} .tk-pod__place{font:800 clamp(28px,4vw,44px)/1 var(--t-display);letter-spacing:var(--tracking-display);color:var(--t-ink)} .tk-pod__sales{font:var(--text-meta);font-size:10px;letter-spacing:.1em;text-transform:uppercase;color:var(--t-muted);padding-bottom:12px} .tk-pod--1 .tk-pod__block{height:clamp(120px,15vh,168px);border-color:var(--t-accent-line);background:linear-gradient(180deg,var(--t-wash),transparent)} .tk-pod--1 .tk-pod__place{color:var(--t-accent)} .tk-pod--1 .tk-pod__medal{background:var(--t-accent);color:var(--t-accent-ink)} .tk-pod--2 .tk-pod__block{height:clamp(92px,11vh,126px)} .tk-pod--3 .tk-pod__block{height:clamp(74px,9vh,104px)} .tk-pod--empty{display:none} @media (max-width:700px){ .tk-podium{grid-template-columns:1fr;align-items:stretch} .tk-pod{flex-direction:row;align-items:center;gap:14px;padding:12px;border:1px solid var(--t-line);border-radius:var(--t-r-l);background:var(--t-card)} .tk-pod__who{flex-direction:row;align-items:center;text-align:left;flex:1 1 auto} .tk-pod__block{width:auto;height:auto !important;border:none;background:none;align-items:flex-end} .tk-pod__place{font-size:26px} .tk-pod__sales{padding-bottom:0} .tk-pod--1{order:1}.tk-pod--2{order:2}.tk-pod--3{order:3} } /* Места с четвёртого по десятое: строка с полосой доли. */ .tk-toplist{display:flex;flex-direction:column;gap:8px} .tk-toprow{ display:flex;gap:12px;align-items:center;text-decoration:none;color:inherit; padding:10px 14px 10px 10px;border:1px solid var(--t-line);border-radius:var(--t-r-l); background:var(--t-card); transition:border-color var(--t-fast) var(--t-ease),background var(--t-fast) var(--t-ease); } .tk-toprow:hover{border-color:var(--t-line-2);background:var(--t-card-hover)} .tk-toprow__n{flex:none;width:26px;text-align:center;font-family:var(--t-mono);font-size:12px;color:var(--t-dim)} .tk-toprow__who{flex:1 1 160px;min-width:0} .tk-toprow__name{display:block;font:500 15.5px/1.25 var(--t-body);color:var(--t-ink)} .tk-toprow__bar{display:none;flex:1 1 120px;height:6px;border-radius:var(--t-r-pill);background:var(--t-sunken);overflow:hidden} .tk-toprow__bar>span{display:block;height:100%;border-radius:inherit;background:var(--t-accent);opacity:.7} @media (min-width:760px){.tk-toprow__bar{display:block}} .tk-toprow__v{flex:none;min-width:44px;text-align:right} .tk-percard__d{ display:block;margin-top:10px; font:300 14px/1.55 var(--t-body);color:var(--t-muted); display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden; } /* ——— Роли и двери профиля ——— */ .tk-roles{display:grid;gap:12px;grid-template-columns:repeat(auto-fit,minmax(240px,1fr))} .tk-role{ display:flex;flex-direction:column;gap:10px; padding:18px;border:1px solid var(--t-line);border-radius:var(--t-r-l);background:var(--t-card); } .tk-role--on{border-color:var(--t-accent-line);background:linear-gradient(140deg,var(--t-wash),transparent 70%)} .tk-role__head{display:flex;gap:12px;align-items:baseline;justify-content:space-between} .tk-role__t{font:600 18px/1.2 var(--t-display);letter-spacing:var(--tracking-display-soft)} .tk-role__d{font:300 14px/1.55 var(--t-body);color:var(--t-muted)} .tk-role__f{margin-top:auto;padding-top:6px} .tk-doors{display:grid;gap:12px;grid-template-columns:repeat(auto-fit,minmax(240px,1fr))} .tk-door{ display:flex;flex-direction:column;gap:8px;text-align:left; padding:18px;border:1px solid var(--t-line);border-radius:var(--t-r-l); background:var(--t-card);color:inherit;text-decoration:none;cursor:pointer; transition:border-color var(--t-base) var(--t-ease),transform var(--t-base) var(--t-spring); } .tk-door:hover{border-color:var(--t-accent-line);transform:translateY(-2px)} .tk-door__i{ display:grid;place-items:center;width:40px;height:40px;border-radius:var(--t-r-in); background:var(--t-wash);color:var(--t-accent); } .tk-door__t{font:600 17px/1.2 var(--t-display);letter-spacing:var(--tracking-display-soft);color:var(--t-ink)} .tk-door__d{font:300 13.5px/1.55 var(--t-body);color:var(--t-muted)} .tk-door--studio .tk-door__i{background:var(--t-sunken);color:var(--t-ink)} /* Квадрат с иконкой: короткая дорога в Студию из профиля. */ .tk-tostudio{ display:inline-flex;flex-direction:column;align-items:center;justify-content:center;gap:4px; width:64px;height:64px;border-radius:var(--t-r-l); border:1px solid var(--t-accent-line);background:var(--t-wash);color:var(--t-accent); text-decoration:none;margin-right:12px; transition:transform var(--t-base) var(--t-spring),background var(--t-base) var(--t-ease); } .tk-tostudio span{font:var(--text-meta);font-size:8.5px;letter-spacing:.08em;text-transform:uppercase} .tk-tostudio:hover{transform:translateY(-2px);background:var(--t-card-hover);color:var(--t-ink)} /* ——— Визитка автора ——— */ .tk-vcard{position:relative;overflow:hidden;border-radius:var(--t-r-xl)} .tk-vcard__top{ height:clamp(88px,14vh,140px); background:linear-gradient(120deg,var(--t-wash),transparent 60%),var(--t-sunken); border-bottom:1px solid var(--t-line); } .tk-vcard__in{ display:flex;flex-wrap:wrap;gap:20px;align-items:flex-start; padding:0 clamp(18px,3vw,30px) clamp(20px,3vw,28px); margin-top:calc(clamp(48px,7vh,70px) * -1); } .tk-vcard__in>.tk-ava{border:3px solid var(--t-page);box-shadow:var(--t-shadow-menu)} .tk-vcard__sub{margin-top:8px;font:300 14.5px/1.5 var(--t-body);color:var(--t-muted)} .tk-vcard__about{margin:14px 0 0;max-width:36em;font:300 15.5px/1.65 var(--t-body)} .tk-vcard__acts{display:flex;flex-wrap:wrap;gap:10px;align-items:center;margin-top:clamp(48px,7vh,70px)} .tk-socials{margin-top:16px;display:flex;flex-wrap:wrap;gap:8px} .tk-social{ display:inline-flex;align-items:center;min-height:36px;padding:0 14px; border:1px solid var(--t-line);border-radius:var(--t-r-pill); color:var(--t-ink);text-decoration:none; font:400 13.5px/1 var(--t-body); transition:border-color var(--t-fast) var(--t-ease),color var(--t-fast) var(--t-ease); } .tk-social:hover{border-color:var(--t-accent);color:var(--t-accent)} /* ——— Вход ——— Две половины: слева слово, справа форма. Форма стоит в потоке, поэтому её высота не привязана к экрану и на маленьком ноутбуке ничего не срезается. */ .tk-auth{display:flex;flex-wrap:wrap;min-height:100svh} .tk-auth__side{ flex:1 1 380px;min-width:280px; padding:clamp(28px,5vw,72px) clamp(20px,4vw,64px); display:flex;flex-direction:column;justify-content:space-between;gap:40px; border-right:1px solid var(--t-line); } .tk-auth__form{ flex:1 1 380px;min-width:280px;background:var(--t-card); padding:clamp(28px,5vw,72px) clamp(20px,4vw,64px); display:flex;align-items:center; } .tk-auth__box{width:100%;max-width:400px;margin:0 auto} /* Поле кода выезжает снизу: строки под ним съезжают вниз плавно, потому что меняется не display, а высота строки сетки. */ .tk-reveal{display:grid;grid-template-rows:0fr;transition:grid-template-rows 420ms var(--t-spring)} .tk-reveal--in{grid-template-rows:1fr} .tk-reveal__in{overflow:hidden;min-height:0} .tk-reveal__in>*{opacity:0;transform:translateY(-8px);transition:opacity 260ms var(--t-ease) 120ms,transform 260ms var(--t-ease) 120ms} .tk-reveal--in .tk-reveal__in>*{opacity:1;transform:none} @media (prefers-reduced-motion:reduce){ .tk-reveal{transition:none} .tk-reveal__in>*{transition:none} } /* Вход через чужой аккаунт: две прозрачные кнопки в один ряд. */ .tk-oauth-row{display:grid;grid-template-columns:1fr 1fr;gap:10px} .tk-oauth{ display:inline-flex;align-items:center;justify-content:center;gap:10px; min-height:48px;padding:0 16px; border:1px solid #808080;border-radius:var(--t-r); background:transparent;color:var(--t-ink);cursor:pointer; font:500 14px/1 var(--t-body); transition:border-color var(--t-fast) var(--t-ease),background var(--t-fast) var(--t-ease); } .tk-oauth:not(:disabled):hover{border-color:var(--t-ink);background:var(--t-hover-fill)} .tk-oauth:not(:disabled):active{transform:scale(.985)} .tk-oauth:focus-visible{outline:2px solid var(--t-accent);outline-offset:2px} .tk-oauth:disabled{opacity:.42;cursor:not-allowed} .tk-oauth--full{width:100%} .tk-oauth__mark{display:block;flex:none} .tk-oauth--telegram .tk-oauth__mark{color:#2AABEE} .tk-oauth--yandex .tk-oauth__mark{color:#FC3F1D} .tk-oauth__t{white-space:nowrap;overflow:hidden;text-overflow:ellipsis} /* ═══ Дорожная карта ══════════════════════════════════════════════ Горизонтальная лента шагов. У каждого шага своя палитра — она живёт в двух переменных на самом шаге и дальше расходится по рамке, знаку и полосе заливки. Общий стиль Хаба это не ломает: цвет остаётся внутри одного шага и наружу не выходит. Заливка идёт слева направо, шаг за шагом: полоса под карточкой растёт по scaleX, задержка — номер шага. Когда шаги не влезают в строку, лента заворачивается змейкой: чётные ряды идут в обратную сторону, и дорога складывается в букву П. */ .tk-rm{margin-top:clamp(26px,3.4vw,40px)} .tk-rm__track{ display:grid;gap:14px; grid-template-columns:repeat(var(--cols,5),minmax(0,1fr)); } .tk-rm__step{ position:relative;display:flex;flex-direction:column;gap:10px; padding:20px 18px 18px; border:1px solid var(--t-line);border-radius:var(--t-r-l); background:var(--t-card);color:inherit;text-decoration:none; isolation:isolate; transition:border-color var(--t-base) var(--t-ease),transform var(--t-base) var(--t-spring); } /* Подложка и полоса заливки обрезаны по рамке шага, а стрелка между шагами — нет: она нарочно выходит за край и связывает карточки. */ .tk-rm__step::before{ content:"";position:absolute;inset:0;z-index:-1;opacity:.9; border-radius:inherit; background:linear-gradient(150deg,color-mix(in srgb,var(--c) 12%,transparent),transparent 62%); } .tk-rm__step:hover{border-color:var(--c);transform:translateY(-3px)} /* Полоса заливки под шагом: та самая «плавная заливка» дороги. */ .tk-rm__bar{ position:absolute;left:0;right:0;bottom:0;height:3px; background:var(--t-line);overflow:hidden; border-radius:0 0 var(--t-r-l) var(--t-r-l); } .tk-rm__bar>i{ display:block;height:100%;transform:scaleX(0);transform-origin:0 50%; background:linear-gradient(90deg,var(--c),var(--c2)); } .tk-motion .tk-rm__step.tk-rv--in .tk-rm__bar>i, html:not(.tk-motion) .tk-rm__bar>i{ transform:scaleX(1); transition:transform 900ms var(--t-ease); transition-delay:calc(var(--i) * 220ms); } .tk-rm__sign{ display:grid;place-items:center;width:44px;height:44px;border-radius:var(--t-r-in); background:color-mix(in srgb,var(--c) 16%,transparent);color:var(--c); } .tk-rm__num{font-family:var(--t-mono);font-size:11px;letter-spacing:.1em;color:var(--c)} .tk-rm__t{font:600 19px/1.15 var(--t-display);letter-spacing:var(--tracking-display-soft);color:var(--t-ink)} .tk-rm__d{margin:0;font:300 14px/1.6 var(--t-body);color:var(--t-muted)} .tk-rm__tag{ margin-top:auto;padding-top:10px; font:var(--text-meta);font-size:9.5px;letter-spacing:.12em;text-transform:uppercase;color:var(--c); } .tk-rm__arrow{ position:absolute;right:-11px;top:50%;transform:translateY(-50%); width:22px;height:22px;border-radius:50%;z-index:2; display:grid;place-items:center; background:var(--t-page);border:1px solid var(--t-line);color:var(--t-dim); font-size:11px; } .tk-rm__step:last-child .tk-rm__arrow{display:none} /* Три в ряд: пять шагов складываются змейкой, второй ряд идёт обратно — дорога становится П-образной. */ @media (max-width:1180px){ .tk-rm__track{--cols:3} .tk-rm__step:nth-child(4){order:6} .tk-rm__step:nth-child(5){order:5} .tk-rm__step:nth-child(6){order:4} .tk-rm__step:nth-child(3) .tk-rm__arrow{top:auto;bottom:-11px;right:50%;transform:translateX(50%) rotate(90deg)} .tk-rm__step:nth-child(4) .tk-rm__arrow, .tk-rm__step:nth-child(5) .tk-rm__arrow{right:auto;left:-11px;transform:translateY(-50%) rotate(180deg)} } @media (max-width:820px){ .tk-rm__track{--cols:2} .tk-rm__step:nth-child(n){order:0} .tk-rm__step:nth-child(3),.tk-rm__step:nth-child(4){order:0} .tk-rm__arrow{display:none} } @media (max-width:520px){ .tk-rm__track{--cols:1} } /* ═══ Карточка услуги ══════════════════════════════════════════════ Лента услуг держится на звуке, а не на описании, поэтому карточка устроена как маленький пульт: сверху — что и почём, посередине — полоса звука с переключателем «до/после» и рядом работ, снизу — три двери. В ряду две. Три превращают полосу звука в ниточку, одна растягивает строку описания на пол-экрана; две держат и звук, и сравнение соседей в одном взгляде. */ .tk-svcgrid{display:grid;gap:14px;grid-template-columns:minmax(0,1fr)} @media (min-width:960px){.tk-svcgrid{grid-template-columns:repeat(2,minmax(0,1fr))}} .tk-svccard{ display:flex;flex-direction:column;gap:14px;min-width:0; padding:20px;border:1px solid var(--t-line);border-radius:var(--t-r-l); background:var(--t-card); transition:border-color var(--t-base) var(--t-ease),background var(--t-base) var(--t-ease); } .tk-svccard:hover{border-color:var(--t-line-2);background:var(--t-card-hover)} /* Карточка, которая сейчас звучит, отмечена краем: иначе непонятно, откуда идёт звук, когда курсор уже уехал к соседке. */ .tk-svccard[data-hover]:hover{border-color:var(--t-accent-line)} .tk-svccard__head{display:flex;gap:16px;align-items:flex-start;justify-content:space-between} .tk-svccard__who{min-width:0} .tk-svccard__t{ display:block;font:600 clamp(19px,1.7vw,23px)/1.2 var(--t-display); letter-spacing:var(--tracking-display-soft);color:var(--t-ink); } .tk-svccard__t:hover{color:var(--t-accent)} .tk-svccard__m{ margin-top:6px;font:var(--text-meta);font-size:10.5px;letter-spacing:.12em; text-transform:uppercase;color:var(--t-dim); } .tk-svccard__price{flex:none;text-align:right;display:flex;flex-direction:column;gap:5px;align-items:flex-end} .tk-svccard__price .tk-mono{font-size:15px;color:var(--t-ink);white-space:nowrap} .tk-svccard__price .tk-meta{font-size:10px;color:var(--t-dim)} .tk-svccard__bundle{ align-self:flex-start;padding:5px 10px;border-radius:var(--t-r-s); border:1px solid var(--t-accent-line);color:var(--t-accent); font:var(--text-meta);font-size:9.5px;letter-spacing:.12em; } .tk-svccard__d{ margin:0;font:300 15px/1.55 var(--t-body);color:var(--t-ink-2); display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden; } /* ——— Пульт ——— */ .tk-svcdeck{ border:1px solid var(--t-line);border-radius:var(--t-r); background:var(--t-sunken);padding:14px;display:flex;flex-direction:column;gap:12px; } .tk-svcdeck__row{display:flex;align-items:center;gap:12px;min-width:0} .tk-svcdeck__works{display:flex;flex-wrap:wrap;gap:8px} .tk-svcw{ padding:7px 12px;border-radius:var(--t-r-pill); border:1px solid var(--t-line);background:transparent;color:var(--t-muted); font:400 12.5px/1 var(--t-body);cursor:pointer; max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap; transition:color var(--t-fast) var(--t-ease),border-color var(--t-fast) var(--t-ease); } .tk-svcw:hover{color:var(--t-ink);border-color:var(--t-line-2)} .tk-svcw--on{color:var(--t-ink);border-color:var(--t-ink-strong);background:var(--t-card)} /* Полоса звука столбиками. Ширина столбика постоянная — «сыгранная» часть лежит поверх и обрезается по ширине, а резиновые столбики она растянула бы иначе, чем нижний слой, и полосы разъехались бы. */ .tk-bars{ position:relative;flex:1;min-width:0;height:38px;overflow:hidden; -webkit-mask-image:linear-gradient(90deg,#000 0 92%,transparent); mask-image:linear-gradient(90deg,#000 0 92%,transparent); } .tk-bars__row{position:absolute;inset:0;display:flex;align-items:center;gap:3px} .tk-bars__row i{ flex:none;width:4px;border-radius:1px; height:calc(var(--h) * 100%);background:var(--t-line-2); } .tk-bars__on{ position:absolute;left:0;top:0;bottom:0;width:0;overflow:hidden; transition:width 80ms linear; } .tk-bars__on i{background:var(--t-accent)} /* Пока карточка под курсором, полоса дышит — это единственная подсказка, что звук идёт именно отсюда. */ .tk-svccard[data-hover]:hover .tk-bars__row i{animation:tk-barbreathe 1.6s var(--t-ease) infinite} .tk-bars__row i:nth-child(3n){animation-delay:.2s} .tk-bars__row i:nth-child(3n+1){animation-delay:.45s} @keyframes tk-barbreathe{0%,100%{opacity:1}50%{opacity:.55}} /* ——— «До / После» ——— */ .tk-ab{ flex:none;display:inline-flex;padding:3px;gap:2px; border:1px solid var(--t-line);border-radius:var(--t-r-pill);background:var(--t-card); } .tk-ab__b{ border:none;background:none;cursor:pointer;color:var(--t-dim); padding:6px 12px;border-radius:var(--t-r-pill); font:var(--text-meta);font-size:10.5px;letter-spacing:.1em;text-transform:uppercase; transition:color var(--t-fast) var(--t-ease),background var(--t-fast) var(--t-ease); } .tk-ab__b:hover{color:var(--t-ink)} .tk-ab__b--on{background:var(--t-sunken);color:var(--t-ink)} .tk-svccard__tags{display:flex;flex-wrap:wrap;gap:8px} .tk-svccard__foot{ margin-top:auto;padding-top:14px;border-top:1px solid var(--t-line); display:flex;gap:12px;align-items:center;justify-content:space-between;flex-wrap:wrap; } .tk-svccard__btns{display:flex;gap:8px;flex-wrap:wrap;margin-left:auto} /* Кнопка «Заказать»: та же вторичная, но подписана краской. Заливать её алым нельзя — под белым текстом он даёт 3.4:1. */ .ds-btn--accent{color:var(--t-accent);border-color:var(--t-accent-line)} .ds-btn--accent:hover{border-color:var(--t-accent)} /* ═══ Лента обложек ════════════════════════════════════════════════ Курсор ходит по квадрату влево-вправо и листает папку художника. Всё правилами CSS: полосы наведения стоят перед картинками, и каждая зажигает свою. Скрипт сюда не заходит — значит, наложение разметки листание не сбивает и на телефоне ничего не ломается (там наведения нет вовсе). */ .tk-sq__pic{position:relative} .tk-sq__im{ position:absolute;inset:0;width:100%;height:100%;object-fit:cover; opacity:0;transition:opacity 140ms var(--t-ease);z-index:1; } .tk-sq__im--on{opacity:1} .tk-sq__zone{position:absolute;top:0;bottom:0;z-index:3;cursor:pointer} .tk-sq[data-reel="2"] .tk-sq__zone{width:50%} .tk-sq[data-reel="3"] .tk-sq__zone{width:33.34%} .tk-sq[data-reel="4"] .tk-sq__zone{width:25%} .tk-sq[data-reel="5"] .tk-sq__zone{width:20%} .tk-sq[data-reel="6"] .tk-sq__zone{width:16.67%} .tk-sq[data-reel="7"] .tk-sq__zone{width:14.29%} .tk-sq[data-reel="8"] .tk-sq__zone{width:12.5%} .tk-sq__zone[data-pic="0"]{left:0} .tk-sq__zone[data-pic="1"]{left:12.5%} .tk-sq__zone[data-pic="2"]{left:25%} .tk-sq__zone[data-pic="3"]{left:37.5%} .tk-sq__zone[data-pic="4"]{left:50%} .tk-sq__zone[data-pic="5"]{left:62.5%} .tk-sq__zone[data-pic="6"]{left:75%} .tk-sq__zone[data-pic="7"]{left:87.5%} .tk-sq[data-reel="2"] .tk-sq__zone[data-pic="1"]{left:50%} .tk-sq[data-reel="3"] .tk-sq__zone[data-pic="1"]{left:33.33%} .tk-sq[data-reel="3"] .tk-sq__zone[data-pic="2"]{left:66.66%} .tk-sq[data-reel="4"] .tk-sq__zone[data-pic="1"]{left:25%} .tk-sq[data-reel="4"] .tk-sq__zone[data-pic="2"]{left:50%} .tk-sq[data-reel="4"] .tk-sq__zone[data-pic="3"]{left:75%} .tk-sq[data-reel="5"] .tk-sq__zone[data-pic="1"]{left:20%} .tk-sq[data-reel="5"] .tk-sq__zone[data-pic="2"]{left:40%} .tk-sq[data-reel="5"] .tk-sq__zone[data-pic="3"]{left:60%} .tk-sq[data-reel="5"] .tk-sq__zone[data-pic="4"]{left:80%} .tk-sq[data-reel="6"] .tk-sq__zone[data-pic="1"]{left:16.67%} .tk-sq[data-reel="6"] .tk-sq__zone[data-pic="2"]{left:33.34%} .tk-sq[data-reel="6"] .tk-sq__zone[data-pic="3"]{left:50%} .tk-sq[data-reel="6"] .tk-sq__zone[data-pic="4"]{left:66.68%} .tk-sq[data-reel="6"] .tk-sq__zone[data-pic="5"]{left:83.35%} /* Полоса зажигает свою картинку — и гасит первую, показанную по умолчанию. Порядок правил важнее веса селекторов: сперва гасим все, потом зажигаем нужную. */ .tk-sq__zone:hover ~ .tk-sq__im{opacity:0} .tk-sq__zone[data-pic="0"]:hover ~ .tk-sq__im[data-pic="0"], .tk-sq__zone[data-pic="1"]:hover ~ .tk-sq__im[data-pic="1"], .tk-sq__zone[data-pic="2"]:hover ~ .tk-sq__im[data-pic="2"], .tk-sq__zone[data-pic="3"]:hover ~ .tk-sq__im[data-pic="3"], .tk-sq__zone[data-pic="4"]:hover ~ .tk-sq__im[data-pic="4"], .tk-sq__zone[data-pic="5"]:hover ~ .tk-sq__im[data-pic="5"], .tk-sq__zone[data-pic="6"]:hover ~ .tk-sq__im[data-pic="6"], .tk-sq__zone[data-pic="7"]:hover ~ .tk-sq__im[data-pic="7"]{opacity:1} /* Риски сверху: сколько всего картинок и где мы сейчас. Без них первое движение курсора читается сбоем, а не листанием. */ .tk-sq__ticks{ position:absolute;top:8px;left:8px;right:8px;z-index:4; display:flex;gap:4px;opacity:0;transition:opacity 140ms var(--t-ease);pointer-events:none; } .tk-sq:hover .tk-sq__ticks{opacity:1} .tk-sq__ticks i{ flex:1;height:2px;border-radius:2px;background:rgba(255,255,255,.28); transition:background 140ms var(--t-ease); } .tk-sq__ticks i:first-child{background:rgba(255,255,255,.9)} .tk-sq__zone:hover ~ .tk-sq__ticks i{background:rgba(255,255,255,.28)} .tk-sq__zone[data-pic="0"]:hover ~ .tk-sq__ticks i[data-pic="0"], .tk-sq__zone[data-pic="1"]:hover ~ .tk-sq__ticks i[data-pic="1"], .tk-sq__zone[data-pic="2"]:hover ~ .tk-sq__ticks i[data-pic="2"], .tk-sq__zone[data-pic="3"]:hover ~ .tk-sq__ticks i[data-pic="3"], .tk-sq__zone[data-pic="4"]:hover ~ .tk-sq__ticks i[data-pic="4"], .tk-sq__zone[data-pic="5"]:hover ~ .tk-sq__ticks i[data-pic="5"], .tk-sq__zone[data-pic="6"]:hover ~ .tk-sq__ticks i[data-pic="6"], .tk-sq__zone[data-pic="7"]:hover ~ .tk-sq__ticks i[data-pic="7"]{background:rgba(255,255,255,.9)} /* ═══ Оплата на месте ══════════════════════════════════════════════ */ .tk-pay__lines{display:flex;flex-direction:column;gap:11px;font:400 15px/1.4 var(--t-body)} .tk-pay__row{display:flex;justify-content:space-between;gap:12px} .tk-pay__row--dim{color:var(--t-muted)} .tk-pay__row--total{ padding-top:12px;border-top:1px solid var(--t-line);font:500 17px/1.2 var(--t-body); } .tk-pay__row--total .tk-mono{font-size:17px} .tk-pay__note{ margin-top:16px;display:flex;flex-direction:column;gap:7px; font:var(--text-meta);font-size:10px;letter-spacing:.1em;color:var(--t-dim); } /* ═══ Шаги формы ═══════════════════════════════════════════════════ Пройденный шаг — кнопка: нажал и вернулся. Вперёд по подписям не пускаем — следующий шаг ещё не заполнен, и «пройти» его нажатием значило бы обмануть проверку. */ .tk-steps{display:flex;flex-wrap:wrap;align-items:center;gap:6px 10px} .tk-steps__b{ display:inline-flex;align-items:center;gap:8px; padding:7px 12px;border-radius:var(--t-r-pill); border:1px solid transparent;background:none; font:var(--text-meta);font-size:10.5px;letter-spacing:.12em;text-transform:uppercase; color:var(--t-dim); } .tk-steps__b--done{cursor:pointer;color:var(--t-muted);border-color:var(--t-line)} .tk-steps__b--done:hover{color:var(--t-ink);border-color:var(--t-line-2)} .tk-steps__b--on{color:var(--t-accent);border-color:var(--t-accent-line);background:var(--t-wash)} .tk-steps__n{font-family:var(--t-mono);opacity:.7} .tk-steps__sep{width:14px;height:1px;background:var(--t-line);flex:none} /* ═══ Картинка перетаскиванием ═════════════════════════════════════ */ .ds-drop--pic{ position:relative;padding:0;aspect-ratio:1/1;max-width:260px; display:grid;place-items:center;overflow:hidden; } .ds-drop--pic .ds-drop__t{padding:0 16px} .ds-drop--pic .ds-drop__h{padding:0 16px} .ds-drop__file{ position:absolute;inset:0;width:100%;height:100%; opacity:0;cursor:pointer;z-index:2; } .ds-drop__img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover} .ds-drop__over{ position:absolute;left:0;right:0;bottom:0;padding:10px;z-index:3; background:linear-gradient(transparent,rgba(0,0,0,.72));color:#fff; font:var(--text-meta);font-size:10px;letter-spacing:.12em;text-transform:uppercase; opacity:0;transition:opacity var(--t-fast) var(--t-ease);pointer-events:none; } .ds-drop--filled:hover .ds-drop__over{opacity:1} .ds-drop__rm{ margin-top:8px;border:none;background:none;cursor:pointer;color:var(--t-danger); font:var(--text-meta);font-size:10px;letter-spacing:.1em;text-transform:uppercase;padding:4px 0; } .tk-chip:disabled{opacity:.4;cursor:not-allowed} .tk-chip__n{margin-left:7px;font-family:var(--t-mono);font-size:11px;opacity:.7} /* ═══ Анкета товара ════════════════════════════════════════════════ Форма разбита на плиты: главное, обложка, жанры, лицензии, работы. Раньше это был один столбец полей, и понять, где кончается «что продаём» и начинается «почём», можно было только по подписям. */ .tk-upblk{ margin-top:18px;padding:18px; border:1px solid var(--t-line);border-radius:var(--t-r-l);background:var(--t-card); } .tk-upblk:first-child{margin-top:0} .tk-uphint{ margin-top:8px;max-width:44em; font:300 13.5px/1.55 var(--t-body);color:var(--t-muted); } /* ——— Строки списков ——— Лицензия, строка состава, работа — одна форма на все три. */ .tk-erows{display:flex;flex-direction:column;gap:12px} .tk-erow{ padding:14px;border:1px solid var(--t-line);border-radius:var(--t-r); background:var(--t-sunken); } .tk-erow__head{display:flex;gap:10px;align-items:center;flex-wrap:wrap;margin-bottom:12px} .tk-erow__n{ font:var(--text-meta);font-size:10px;letter-spacing:.12em;text-transform:uppercase; color:var(--t-dim);font-family:var(--t-mono); } .tk-erow__rm{ margin-left:auto;border:none;background:none;cursor:pointer;color:var(--t-danger); font:var(--text-meta);font-size:10px;letter-spacing:.1em;text-transform:uppercase;padding:4px 6px; } .tk-erow__rm:hover{text-decoration:underline} /* «Берут чаще» — не галочка, а отметка: нажатая читается как ярлык на товаре, ненажатая — как предложение её поставить. */ .tk-erow__pop{ border:1px solid var(--t-line);background:none;cursor:pointer;color:var(--t-dim); padding:5px 10px;border-radius:var(--t-r-pill); font:var(--text-meta);font-size:9.5px;letter-spacing:.1em;text-transform:uppercase; transition:color var(--t-fast) var(--t-ease),border-color var(--t-fast) var(--t-ease); } .tk-erow__pop:hover{color:var(--t-ink);border-color:var(--t-line-2)} .tk-erow__pop--on{color:var(--t-accent);border-color:var(--t-accent-line);background:var(--t-wash)} .tk-erow__grid{display:grid;gap:12px;grid-template-columns:repeat(auto-fit,minmax(150px,1fr))} .tk-erow__pic{margin-top:12px} .tk-erow__files{margin-top:12px;display:flex;flex-direction:column;gap:8px} .tk-erows__add{padding-top:2px} .tk-erows__note{ font:var(--text-meta);font-size:10px;letter-spacing:.08em;color:var(--t-dim); padding:4px 2px; } /* Строка выбора файла: подпись, что выбрано, кнопка. Само поле лежит поверх прозрачным — так работает и клик, и перетаскивание. */ .tk-filerow{ position:relative;display:flex;gap:12px;align-items:center; padding:11px 14px;border:1px solid var(--t-line);border-radius:var(--t-r); background:var(--t-card);cursor:pointer; } .tk-filerow:hover{border-color:var(--t-line-2)} .tk-filerow input{position:absolute;inset:0;width:100%;height:100%;opacity:0;cursor:pointer} .tk-filerow__t{font:400 14px/1.3 var(--t-body);color:var(--t-ink);flex:none} .tk-filerow__h{ flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap; font:300 13px/1.3 var(--t-body);color:var(--t-muted); } .tk-filerow__b{ flex:none;font:var(--text-meta);font-size:10px;letter-spacing:.1em; text-transform:uppercase;color:var(--t-accent); } /* ——— Жанры ——— */ .tk-genres .ds-field__label{display:flex;align-items:center;gap:8px} .tk-genres__n{margin-left:auto;font-family:var(--t-mono);font-size:11px;color:var(--t-dim)} .tk-genres .tk-chips{margin-top:10px} /* ═══ Область кружка: выбор куска картинки ═════════════════════════ Раньше своя картинка резалась по центру молча. На портрете это срезает лоб, на групповом снимке — оставляет чужое плечо, и поправить было нечем: только перерисовывать файл в редакторе. Теперь кусок выбирают сами: картинку таскают под рамкой и приближают ползунком. Рамка круглая, потому что круглым будет и результат: показывать квадрат, а сохранять круг — обманывать. */ .tk-crop{display:flex;flex-direction:column;gap:16px;align-items:center} .tk-crop__view{ position:relative;width:min(280px,68vw);aspect-ratio:1/1; border-radius:50%;overflow:hidden;background:var(--t-sunken); cursor:grab;touch-action:none; box-shadow:0 0 0 1px var(--t-line),0 0 0 12px var(--t-page); } .tk-crop__view:active{cursor:grabbing} .tk-crop__img{ position:absolute;left:50%;top:50%; transform-origin:center;user-select:none;-webkit-user-drag:none;pointer-events:none; max-width:none; } /* Перекрестье: без него непонятно, где окажется центр лица. */ .tk-crop__cross{position:absolute;inset:0;pointer-events:none;opacity:.35} .tk-crop__cross::before,.tk-crop__cross::after{ content:"";position:absolute;background:rgba(255,255,255,.5); } .tk-crop__cross::before{left:50%;top:0;bottom:0;width:1px} .tk-crop__cross::after{top:50%;left:0;right:0;height:1px} .tk-crop__zoom{width:min(280px,68vw);display:flex;gap:12px;align-items:center} .tk-crop__zoom input{flex:1;accent-color:var(--t-accent)} .tk-crop__hint{ font:var(--text-meta);font-size:10px;letter-spacing:.1em;text-transform:uppercase;color:var(--t-dim); text-align:center; } /* ═══ Микрофон в блоке записи ══════════════════════════════════════ Стоит справа и подрезан нижним краем плиты: видно верхние четыре пятых, остальное уходит под границу. Целая фигура, вписанная в прямоугольник, читается наклейкой; обрезанная — предметом, который стоит за плитой, и у плиты появляется глубина. Доля видимого держится не подбором отступов, а размером фона: слой лежит ровно по плите (inset:0), а картинка выше него на четверть — `auto 125%`. Дальше арифметика: видно 100/125, то есть ровно четыре пятых, и это не зависит ни от ширины окна, ни от того, насколько плита вытянулась под текстом. Отступами то же самое пришлось бы пересчитывать на каждой ширине. Резать нижний край плите ничего не мешает: у неё overflow:hidden. */ .tk-recblk__mic{ position:absolute;inset:0; /* Просвет слева и справа от стекла одинаковый, и это не на глаз: колонка текста кончается ровно за --mic-gap до микрофона (см. .tk-recblk__copy), а сам он отступает на столько же от края плиты. Значит, стоит ровно посередине оставшейся полосы. */ background:url(assets/mic.webp) no-repeat right var(--mic-gap) top var(--mic-drop); /* Картинка ровно в высоту плиты и опущена на пятую часть: нижняя пятая часть микрофона уходит под край. Предел на всякий случай: плита может оказаться выше задуманного (длинный перевод, крупный шрифт системы), и без него проценты раздули бы стекло без меры. */ background-size:auto var(--mic-img); pointer-events:none;z-index:0; /* Последние проценты уходят в темноту плиты, а не обрываются линией: у стекла срез виден сильнее, чем у плотной фигуры. */ -webkit-mask-image:linear-gradient(#000 0 90%,rgba(0,0,0,.45) 97%,transparent); mask-image:linear-gradient(#000 0 90%,rgba(0,0,0,.45) 97%,transparent); transition:transform var(--t-slow,600ms) var(--t-ease); } .tk-recblk__map:hover .tk-recblk__mic{transform:translateY(-6px)} /* На светлом листе прозрачное стекло теряется: подкладываем тень. Выворачивать цвета нельзя — это снимок, а не рисунок линиями. */ :root[data-theme="light"] .tk-recblk__mic{filter:drop-shadow(0 10px 30px rgba(0,0,0,.45)) contrast(1.08)} /* Узкая плита: текст важнее картинки. */ @media (max-width:720px){ .tk-recblk__mic{display:none} } /* ═══ Открытие витрины ═════════════════════════════════════════════ */ .tk-open{max-width:940px;margin:0 auto;padding-inline:var(--t-gut)} .tk-open__head{margin-top:20px;max-width:44em} .tk-open__head .tk-h1-big{margin-top:10px} .tk-open__head .tk-lead{margin-top:14px} .tk-open__blk{ margin-top:26px;padding:22px; border:1px solid var(--t-line);border-radius:var(--t-r-l);background:var(--t-card); } .tk-open__hint{margin:10px 0 0;max-width:46em;font:300 14.5px/1.6 var(--t-body);color:var(--t-muted)} .tk-open__note{ margin-top:16px;padding-top:14px;border-top:1px solid var(--t-line); font:300 13.5px/1.55 var(--t-body);color:var(--t-dim);max-width:46em; } .tk-opengrid{ margin-top:16px;display:grid;gap:12px; grid-template-columns:repeat(auto-fit,minmax(220px,1fr)); } .tk-opencard{ position:relative;display:flex;flex-direction:column;gap:8px;text-align:left; padding:16px;border:1px solid var(--t-line);border-radius:var(--t-r); background:var(--t-sunken);color:inherit;cursor:pointer; transition:border-color var(--t-base) var(--t-ease),transform var(--t-base) var(--t-spring); } .tk-opencard:hover{border-color:var(--t-line-2);transform:translateY(-2px)} .tk-opencard--on{border-color:var(--t-accent);background:var(--t-wash)} .tk-opencard__mark{color:var(--t-muted)} .tk-opencard--on .tk-opencard__mark{color:var(--t-accent)} .tk-opencard__t{font:600 17px/1.2 var(--t-display);letter-spacing:var(--tracking-display-soft);color:var(--t-ink)} .tk-opencard__d{font:300 13.5px/1.5 var(--t-body);color:var(--t-muted)} .tk-opencard__tags{display:flex;flex-wrap:wrap;gap:6px;margin-top:4px} .tk-opencard__pin{ position:absolute;right:12px;top:12px;width:22px;height:22px;border-radius:50%; display:grid;place-items:center;color:#fff;background:var(--t-accent); opacity:0;transform:scale(.6);transition:opacity var(--t-fast) var(--t-ease),transform var(--t-fast) var(--t-spring); } .tk-opencard--on .tk-opencard__pin{opacity:1;transform:none} .tk-open__list{margin-top:14px;display:grid;gap:12px;grid-template-columns:repeat(auto-fit,minmax(200px,1fr))} .tk-open__li{display:flex;flex-direction:column;gap:5px} .tk-open__li-t{font:500 15px/1.2 var(--t-body);color:var(--t-ink)} .tk-open__li-d{font:300 13.5px/1.5 var(--t-body);color:var(--t-muted)} .tk-open__foot{ margin-top:26px;display:flex;flex-wrap:wrap;gap:14px;align-items:center; padding-bottom:40px; } /* Дверь «открыть витрину» в профиле: одна и во всю ширину. */ .tk-doors--one{grid-template-columns:minmax(0,1fr)} .tk-door--open{border-color:var(--t-accent-line)} .tk-door--open:hover{border-color:var(--t-accent)} .tk-door__go{ margin-top:12px;font-family:var(--t-mono);font-size:12px;letter-spacing:.08em;color:var(--t-accent); } /* ═══ Сборка витрины ═══════════════════════════════════════════════ Пять секунд с показанным ходом сборки, а не полоска ожидания: полоска сообщает «жди», строки сообщают «вот что сделано». Первая часть — сборка, вторая — что получилось. Между ними ничего не мигает: карточка приезжает на том же листе. */ .tk-birth{ position:fixed;inset:0;z-index:130; display:flex;flex-direction:column;align-items:center;justify-content:center;gap:22px; padding:24px;background:var(--t-page); animation:tk-fade 240ms var(--t-ease) both; } .tk-birth__stage{position:relative;width:220px;height:220px;display:grid;place-items:center} .tk-birth__ring{ position:absolute;inset:14px;border-radius:50%; border:1px solid var(--t-line-2); animation:tk-ring 2.6s var(--t-ease) infinite; } .tk-birth__ring--2{inset:44px;animation-delay:.5s;border-color:var(--t-accent-line)} .tk-birth__part{ position:absolute;width:44px;height:44px;color:var(--t-accent); display:grid;place-items:center; border:1px solid var(--t-accent-line);border-radius:50%;background:var(--t-card); animation:tk-orbit 1500ms var(--t-spring) both; animation-delay:calc(var(--i) * 260ms); } .tk-birth__mark{ width:84px;height:84px;display:block;position:relative; animation:tk-seat 900ms var(--t-spring) 1500ms both; } .tk-birth__t{ font:600 clamp(20px,2.6vw,28px)/1.2 var(--t-display);letter-spacing:var(--tracking-display-soft); animation:tk-fade 500ms var(--t-ease) 300ms both; } .tk-birth__rows{display:flex;flex-direction:column;gap:12px;min-width:min(340px,86vw)} .tk-birth__row{ display:flex;gap:12px;align-items:center; font:400 14.5px/1.3 var(--t-body);color:var(--t-muted); animation:tk-lit 500ms var(--t-ease) both; animation-delay:calc(900ms + var(--i) * 850ms); } .tk-birth__tick{ width:22px;height:22px;flex:none;border-radius:50%; display:grid;place-items:center;color:var(--t-page);background:var(--t-accent); transform:scale(.4);opacity:0; animation:tk-tick 420ms var(--t-spring) both; animation-delay:calc(1000ms + var(--i) * 850ms); } @keyframes tk-ring{0%{transform:scale(.9);opacity:.2}50%{transform:scale(1.04);opacity:.7}100%{transform:scale(.9);opacity:.2}} @keyframes tk-orbit{ from{opacity:0;transform:rotate(var(--a)) translateX(150px) rotate(calc(var(--a) * -1)) scale(.6)} 60%{opacity:1} to{opacity:0;transform:rotate(var(--a)) translateX(0) rotate(calc(var(--a) * -1)) scale(.9)} } @keyframes tk-seat{from{opacity:0;transform:scale(.5) rotate(-12deg)}to{opacity:1;transform:none}} @keyframes tk-lit{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}} @keyframes tk-tick{from{opacity:0;transform:scale(.4)}to{opacity:1;transform:none}} /* ——— Вторая часть: что получилось ——— */ .tk-birth--done{gap:0} .tk-birth__card{ max-width:min(560px,92vw);text-align:center; display:flex;flex-direction:column;align-items:center;gap:16px; animation:tk-rise 460ms var(--t-spring) both; } .tk-birth__seal{ width:64px;height:64px;display:block; animation:tk-seat 700ms var(--t-spring) 120ms both; } .tk-birth__big{ font:800 clamp(24px,3.6vw,38px)/1.1 var(--t-display);letter-spacing:var(--tracking-display); color:var(--t-ink); } .tk-birth__lead{margin:0;max-width:34em;font:300 16px/1.6 var(--t-body);color:var(--t-muted)} .tk-birth__tags{display:flex;flex-wrap:wrap;gap:8px;justify-content:center} .tk-birth__btns{margin-top:8px;display:flex;flex-wrap:wrap;gap:10px;justify-content:center} @media (prefers-reduced-motion:reduce){ .tk-birth,.tk-birth *{animation:none !important} } /* ═══ Проводник ════════════════════════════════════════════════════ Тёмный лист поверх страницы, окно вокруг нужного блока, карточка с объяснением рядом. Затемнение делает не подложка, а огромная тень самого окна: так «дырка» получается одной коробкой, без масок и без четырёх прямоугольников по краям. Сквозь окно ничего не нажимается намеренно: проводник ведёт, а не предлагает попробовать. Выйти можно кнопкой и клавишей Escape. */ .tk-tour{position:fixed;inset:0;z-index:140;animation:tk-fade 200ms var(--t-ease) both} .tk-tour__hole{ position:fixed;border-radius:var(--t-r); box-shadow:0 0 0 100vmax rgba(0,0,0,.74),0 0 0 1px var(--t-accent) inset; transition:left 260ms var(--t-ease),top 260ms var(--t-ease), width 260ms var(--t-ease),height 260ms var(--t-ease); pointer-events:none; } .tk-tour__card{ position:fixed;width:min(360px,90vw);z-index:1; padding:18px;border-radius:var(--t-r-l); border:1px solid var(--t-line-2);background:var(--t-card); box-shadow:0 24px 60px rgba(0,0,0,.5); animation:tk-rise 260ms var(--t-spring) both; } .tk-tour__arrow{ position:absolute;left:50%;width:14px;height:14px; background:var(--t-card);border:1px solid var(--t-line-2); transform:translateX(-50%) rotate(45deg); } .tk-tour__card--below .tk-tour__arrow{top:-8px;border-right:none;border-bottom:none} .tk-tour__card:not(.tk-tour__card--below) .tk-tour__arrow{bottom:-8px;border-left:none;border-top:none} .tk-tour__n{ font:var(--text-meta);font-size:10px;letter-spacing:.14em;color:var(--t-accent); font-family:var(--t-mono); } .tk-tour__t{margin-top:8px;font:600 19px/1.2 var(--t-display);letter-spacing:var(--tracking-display-soft);color:var(--t-ink)} .tk-tour__d{margin:10px 0 0;font:300 14.5px/1.6 var(--t-body);color:var(--t-muted)} .tk-tour__btns{margin-top:16px;display:flex;flex-wrap:wrap;gap:8px;justify-content:flex-end} .tk-tour__btns .ds-btn:first-child{margin-right:auto} @media (prefers-reduced-motion:reduce){ .tk-tour,.tk-tour *{animation:none !important;transition:none !important} } /* ═══ Посадка в экран ══════════════════════════════════════════════ Первый экран должен помещаться целиком на любом мониторе, а не только на том, где его рисовали. Баннер и показания под ним считаются не только от ширины, но и от высоты: на низком и широком экране (ноутбук 2880×1800 в масштабе) заголовок уменьшается, и низ первого экрана больше не срезается. */ .tk-banner{min-height:min(clamp(320px,38vw,430px),74svh)} .tk-banner__t{font-size:clamp(26px,min(3.4vw,5.4vh),46px)} .tk-banner__d{margin-top:clamp(10px,1.8vh,18px);font-size:clamp(14px,min(1.4vw,1.9vh),17px)} .tk-banner__cta{margin-top:clamp(14px,2.4vh,26px)} .tk-banner__stage{max-height:min(52vh,340px)} /* Низкий экран в альбомной ориентации: тянуть баннер по высоте незачем — он становится обычной плитой и ничего не режет. */ @media (max-height:520px){ .tk-banner{min-height:0} } /* ═══ Мелкие экраны ═══════════════════════════════════════════════ */ @media (max-width:720px){ .tk-desk{position:static;padding:14px} .tk-desk__q{flex-wrap:wrap} .tk-desk__q .ds-btn{width:100%} .tk-venue__price{align-items:flex-start} .tk-vcard__acts{margin-top:0;width:100%} .tk-vcard__acts .ds-btn{flex:1 1 160px} .tk-map{height:clamp(280px,44vh,420px)} .tk-oauth-row{grid-template-columns:1fr} } @media (max-width:560px){ .tk-cats{grid-template-columns:repeat(auto-fit,minmax(150px,1fr))} .tk-cat{min-height:136px;padding:14px} .tk-squares{grid-template-columns:repeat(2,minmax(0,1fr))} .tk-strip__cell{width:min(74vw,230px)} .tk-tostudio{width:56px;height:56px} } /* Планшеты и большие экраны: полоса содержимого не должна растягиваться до края — читать длинные строки неудобно. */ @media (min-width:1800px){ :root{--t-max:1480px} } /* Ссылка-карточка сильнее общего правила для ссылок. `a.tk-plain{display:block}` выше стоит с большей силой, чем класс компонента, и на нём разваливались строки: раскладка становилась блочной. Поэтому у ссылок-карточек своя строка с той же силой. */ a.tk-toprow{display:flex} a.tk-pod{display:flex} a.tk-sq{display:block} a.tk-studiocard{display:flex} a.tk-panel{display:flex} a.tk-brow__who{display:block} /* Подпись только для скринридера: место занимает, глазом не видна. */ .visually-hidden{ position:absolute;width:1px;height:1px;margin:-1px;padding:0; overflow:hidden;clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap;border:0; }