/* Дизайн-токены globalcartrade.ru и скин калькулятора. * * Значения не подобраны на глаз: сняты 08.08.2026 с живого сайта * https://globalcartrade.ru/ (Tilda, проект 19543186) — вычисленные стили в * браузере плюс собственные стили страницы. Каждое число ниже помечено тем, * откуда оно взято. * * Файл самодостаточен: он красит и разметку страницы, и всё, что рисует * src/page/render.ts. Поэтому любую страницу калькулятора можно одеть одной * строкой — переменных без правил * для этого не хватило бы. */ /* Шрифт сайта — HelveticaNeueCyr, тот же файл, что грузит сам сайт. * Отдаётся с access-control-allow-origin: * , поэтому подключается напрямую. * Копию в репозиторий не кладём: это коммерческая гарнитура, и раздавать её * со своего хоста — вопрос лицензии, который мы за владельца не решаем. * font-display:swap + Arial в цепочке: если Tilda сменит адрес, страница * останется читаемой, а не пустой. */ @font-face{font-family:'HelveticaNeue';src:url('https://static.tildacdn.net/tild3363-6130-4266-b832-393431346662/HelveticaNeueCyr-Lig.woff') format('woff');font-weight:300;font-style:normal;font-display:swap} @font-face{font-family:'HelveticaNeue';src:url('https://static.tildacdn.net/tild3739-6637-4663-a461-316231363632/HelveticaNeueCyr-Rom.woff') format('woff');font-weight:400;font-style:normal;font-display:swap} @font-face{font-family:'HelveticaNeue';src:url('https://static.tildacdn.net/tild6531-3039-4331-b965-633636636232/HelveticaNeueCyr-Med.woff') format('woff');font-weight:500;font-style:normal;font-display:swap} @font-face{font-family:'HelveticaNeue';src:url('https://static.tildacdn.net/tild3831-3562-4230-a430-313732386437/HelveticaNeueCyr-Bol.woff') format('woff');font-weight:600;font-style:normal;font-display:swap} @font-face{font-family:'HelveticaNeue';src:url('https://static.tildacdn.net/tild3432-6164-4562-b165-313665306433/HelveticaNeueCyr-Bol.woff') format('woff');font-weight:700;font-style:normal;font-display:swap} :root{ color-scheme: dark; /* Гарнитура и цепочка запасных — как в --t-text-font на сайте. */ --font: 'HelveticaNeue', Arial, sans-serif; /* Поверхности. --bg — фон 14 секций сайта, --surface — фон карточек, --surface-input и --border-input сняты с поля ввода в форме сайта. */ --bg: #080C16; --surface: #0A1228; --surface-input: #0E1833; --border-input: #1E2949; /* Линии. rgba(255,255,255,.1) — самая частая рамка на сайте. */ --line: rgba(255, 255, 255, .1); /* Текст. --text-muted — цвет мелкого текста (100 элементов на 13px), --text-field — цвет значения в поле ввода. */ --text: #FFFFFF; --text-muted: rgba(255, 255, 255, .5); --text-field: #EAEAEA; /* Акцент: фон кнопок и ссылок, --accent-pressed — его же hover (--uc-button-bgcolorhover), --accent-soft — светлый оттенок для сносок. */ --accent: #5371FF; --accent-pressed: #3251E1; --accent-soft: #99ABFF; --accent-tint: rgba(50, 81, 225, .1); /* Красного на сайте нет ни одного, поэтому цвет ошибки — единственный выведенный, а не снятый: тёплый тон той же светлоты, что и акцент. */ --danger: #FF7A7A; --danger-tint: rgba(255, 122, 122, .1); --danger-line: rgba(255, 122, 122, .35); /* Радиусы: карточки 16px (самый частый на сайте), поля 8px (форма сайта), кнопки — полная скругление, как все CTA сайта. */ --radius-card: 16px; --radius-input: 8px; --radius-pill: 100px; /* Кегль поля ввода отдельным токеном: всё, что меньше 16px, при фокусе зумит страницу в iOS Safari — ровно на телефоне, ради которого страница и сделана (docs/proposals/calc-page-invalid-font-shorthand-zooms-ios.md). На сайте поля тоже 16px. */ --fs-input: 16px; /* Высота тап-цели: 44px минимум, кнопки сайта — 50px. */ --tap: 44px; --btn-h: 50px; } /* --- Страница ---------------------------------------------------------- */ body{ font-family: var(--font); font-size: 16px; line-height: 1.5; margin: 0; background: var(--bg); color: var(--text); -webkit-font-smoothing: antialiased; } .wrap{max-width:640px;margin:0 auto;padding:20px 16px 48px} h1{font-size:1.5rem;line-height:1.15;font-weight:900;letter-spacing:-.4px;margin:0 0 12px} h2{font-size:1.15rem;line-height:1.25;font-weight:700;margin:0 0 8px} a{color:var(--accent)} .card{background:var(--surface);border:1px solid var(--line);border-radius:var(--radius-card);padding:16px 20px;margin:12px 0} .muted{color:var(--text-muted);font-size:.9rem} /* --- Форма калькулятора ------------------------------------------------ */ /* Одна колонка: поле, под ним его сноска, дальше следующее поле (оператор, 2026-08-20). Сноски больше не лежат котлетой под формой — каждая живёт в своём [data-calc-field]. */ form[data-calc-form]{display:flex;flex-direction:column;gap:14px} [data-calc-field]{display:flex;flex-direction:column;gap:6px} [data-calc-note]{color:var(--text-muted);font-size:.85rem;margin:0;line-height:1.4} /* Блокирующая сноска под своим полем: расчёт без этой цифры неполон, поэтому она красная и рядом с полем, а не абзацем под таблицей (оператор, 2026-08-21). Тот же токен, что у [data-error] — одна «красная» на странице. */ [data-calc-note][data-blocking]{color:var(--danger)} /* Подпись поля мощности — обычная сноска; своё имя нужно, чтобы страница находила именно её, когда подставляет туда блокирующий вопрос. */ [data-calc-power-note]{margin:0} [data-calc-power-options]{display:flex;flex-wrap:wrap;gap:8px;margin:0} [data-calc-power-options][hidden]{display:none} /* Кнопка-вариант: подставляет мощность в поле выше одним касанием. Размер пилюли держит палец (--tap). Это постоянный контрол, а не сообщение об ошибке (оператор, 2026-08-21), поэтому спокойный по умолчанию. */ [data-power-option]{ display:inline-flex;flex-direction:column;align-items:flex-start;gap:2px; min-height:var(--tap);padding:8px 14px; background:var(--surface-input);border:1px solid var(--border-input); border-radius:var(--radius-input);color:var(--text); font-family:inherit;font-size:.9rem;text-align:left;cursor:pointer } [data-power-option]:hover{border-color:var(--accent)} /* Пока не выбрано — цвет предупреждения: без этой цифры утильсбор не рассчитан, и это должно быть видно. Выбранный вариант всегда акцентный. */ [data-calc-power-options][data-pending] [data-power-option]{ background:var(--danger-tint);border-color:var(--danger-line) } [data-power-option][aria-pressed="true"]{ background:var(--accent-tint);border-color:var(--accent);color:var(--accent-soft) } [data-power-option-hp]{font-weight:600} [data-power-option-what]{color:var(--text-muted);font-size:.8rem} /* Предупреждение под датой: тот же кегль, но акцентным тоном — это просьба проверить цифру, а не пояснение к полю. */ [data-calc-date-note]{color:var(--accent-soft,var(--text));font-size:.85rem;margin:0;line-height:1.4} [data-calc-date-note][hidden]{display:none} /* Превью первого этапа: карточка машины между ссылкой и остальными полями. */ [data-calc-preview]{display:block} [data-calc-preview]:empty{display:none} [data-preview-card]{ display:flex;gap:12px;align-items:center; padding:10px;border:1px solid var(--border-input);border-radius:var(--radius-input); background:var(--surface-input); } [data-preview-photo]{width:96px;height:72px;object-fit:cover;border-radius:calc(var(--radius-input) - 2px);flex:0 0 auto} [data-preview-body]{display:flex;flex-direction:column;gap:4px;min-width:0} [data-preview-title]{margin:0;font-size:1rem;font-weight:600;color:var(--text)} [data-preview-specs]{margin:0;color:var(--text-muted);font-size:.85rem} /* font-size отдельным свойством, а не шорткатом: `font:1rem inherit` — невалидное объявление (шорткат требует семейство, а inherit допустим только как значение целиком), парсер его выбрасывает и поле уезжает на ~13px. */ input[data-calc-url]{ width:100%;min-height:var(--tap);box-sizing:border-box;padding:12px 20px; background:var(--surface-input);border:1px solid var(--border-input); border-radius:var(--radius-input);color:var(--text-field); font-size:var(--fs-input);font-family:inherit; } /* Поле мощности есть на site/calc.html, а на лендинге его нет — правило живёт здесь, чтобы одна строка одевала и ту страницу целиком. Уже, чем поле ссылки: «Мощность, л.с.» короче адреса. */ input[data-calc-power]{ width:100%;min-height:var(--tap);box-sizing:border-box;padding:12px 20px; background:var(--surface-input);border:1px solid var(--border-input); border-radius:var(--radius-input);color:var(--text-field); font-size:var(--fs-input);font-family:inherit; } /* Дата выпуска — свой дропдаун в стиле drom, но в нашем ките. Кнопка одета как поле; открытый список — тёмный, в теме формы, а не системным меню ОС. Группа занимает свою строку целиком: месяц и год делят её, а не жмутся в остаток после ссылки и мощности. Правило живёт здесь, чтобы одна строка одевала и лендинг. */ span[data-calc-date-group]{display:flex;gap:8px;width:100%} [data-calc-date-field]{position:relative;display:inline-flex} [data-calc-date-field="month"]{flex:1 1 auto} [data-calc-date-field="year"]{flex:0 0 96px} button[data-calc-date-button]{ width:100%;min-height:var(--tap);box-sizing:border-box; padding:12px 34px 12px 16px;text-align:left;cursor:pointer; background:var(--surface-input);border:1px solid var(--border-input); border-radius:var(--radius-input);color:var(--text-field); font-size:var(--fs-input);font-family:inherit; background-image:linear-gradient(45deg,transparent 50%,var(--text-muted) 50%), linear-gradient(135deg,var(--text-muted) 50%,transparent 50%); background-position:calc(100% - 18px) 50%,calc(100% - 13px) 50%; background-size:5px 5px,5px 5px;background-repeat:no-repeat; } button[data-calc-date-button].is-empty{color:var(--text-muted)} ul[data-calc-date-list]{ position:absolute;top:calc(100% + 6px);left:0;z-index:20; min-width:100%;max-height:260px;overflow-y:auto;margin:0;padding:6px; list-style:none;text-align:left; background:var(--surface-input);border:1px solid var(--border-input); border-radius:var(--radius-input); box-shadow:0 12px 32px rgba(0,0,0,0.45); } ul[data-calc-date-list][hidden]{display:none} ul[data-calc-date-list] li{ padding:10px 14px;border-radius:calc(var(--radius-input) - 4px); color:var(--text-field);font-size:var(--fs-input);cursor:pointer; white-space:nowrap;text-align:left; } ul[data-calc-date-list] li:hover{background:var(--surface-hover,rgba(255,255,255,0.06))} ul[data-calc-date-list] li[aria-selected="true"]{ background:var(--accent);color:var(--text);font-weight:600; } /* Курс вона: то же поле, что мощность, но шире — «Курс, ₽ за 1000 ₩» длиннее «Мощность, л.с.», и placeholder не должен обрезаться на телефоне. */ input[data-calc-rate]{ width:100%;min-height:var(--tap);box-sizing:border-box;padding:12px 20px; background:var(--surface-input);border:1px solid var(--border-input); border-radius:var(--radius-input);color:var(--text-field); font-size:var(--fs-input);font-family:inherit; } input[data-calc-url]::placeholder,input[data-calc-power]::placeholder, input[data-calc-rate]::placeholder{color:var(--text-muted)} input[data-calc-url]:focus,input[data-calc-power]:focus,input[data-calc-rate]:focus, button[data-calc-date-button]:focus{outline:none;border-color:var(--accent)} button[data-calc-submit]{ width:100%;min-height:var(--btn-h);padding:12px 24px;border:0; border-radius:var(--radius-pill);background:var(--accent);color:var(--text); font-size:var(--fs-input);font-weight:600;font-family:inherit;cursor:pointer; transition:background-color .2s; } button[data-calc-submit]:hover:not(:disabled){background:var(--accent-pressed)} button[data-calc-submit]:disabled{opacity:.6;cursor:progress} /* --- Вывод калькулятора (селекторы src/page/render.ts) ------------------ */ [data-calc-result][data-loading]{opacity:.5} [data-error]{background:var(--danger-tint);border:1px solid var(--danger-line);border-radius:var(--radius-card);padding:12px 16px;margin:12px 0;color:var(--danger)} [data-loading-card]{background:var(--surface);border:1px solid var(--line);border-radius:var(--radius-card);padding:16px 20px;margin:12px 0;color:var(--text-muted)} [data-demo-banner]{background:var(--accent-tint);border:1px solid var(--accent);border-radius:var(--radius-card);padding:10px 16px;margin:0 0 12px;font-size:.95rem;color:var(--accent-soft)} [data-result]{background:var(--surface);border:1px solid var(--line);border-radius:var(--radius-card);padding:16px 20px;margin:12px 0} [data-title]{font-size:1.15rem;font-weight:700;margin:0 0 12px} [data-photos]{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:12px} [data-photo-main]{width:100%;border-radius:var(--radius-input);display:block} [data-photo-thumb]{width:calc(25% - 6px);border-radius:6px;display:block} [data-specs]{display:grid;grid-template-columns:auto 1fr;gap:4px 16px;margin:0 0 16px} [data-specs] dt{color:var(--text-muted)} [data-specs] dd{margin:0} [data-cost-table]{border-top:1px solid var(--line);margin-bottom:12px} [data-row]{display:flex;align-items:baseline;justify-content:space-between;gap:16px;padding:9px 0;border-bottom:1px solid var(--line)} [data-label]{color:var(--text)} [data-line-note]{display:block;color:var(--text-muted);font-size:.8rem} [data-value]{white-space:nowrap;font-variant-numeric:tabular-nums;text-align:right} [data-value-krw]{display:block;color:var(--text-muted);font-size:.8rem;font-weight:400} [data-unknown] [data-label],[data-unknown] [data-value]{color:var(--text-muted)} /* Итого стоит в том же ритме, что остальные строки: кегль строки, не крупнее (оператор, 2026-08-20 — «строка "итого" по высоте такая же, как остальные?»; было 64,4 px против 62,2). Итог всё равно читается первым: жирный, акцентного цвета и отделён акцентной линией сверху. Линия 1 px, как разделители строк, иначе она сама добавляла бы высоту. */ [data-row="total"]{font-weight:700;border-bottom:0;border-top:1px solid var(--accent)} [data-row="total"] [data-value]{color:var(--accent)} /* Приписка под «Итого в РФ» читается как подписи остальных строк, а не как часть жирного итога: свой кегль и вес, унаследованные от строки, сбрасываем (оператор, 2026-08-20 — «как с остальными строками»). */ [data-row="total"] [data-line-note]{font-size:.8rem;font-weight:400} /* The won annotation stays secondary even on the accent-coloured total. */ [data-row="total"] [data-value-krw]{color:var(--text-muted)} [data-notes]{margin:8px 0 16px} [data-calc-note],[data-embedded-marker],[data-preliminary-rate],[data-rejected-rate]{color:var(--accent-soft);font-size:.85rem;margin-top:4px} /* «Курс указан вручную: …» — та же приписка под таблицей, что дата курса ЦБ: одна строка провенанса, один вид. */ [data-manual-rate],[data-rate-date],[data-commission-note]{color:var(--text-muted);font-size:.85rem;margin-top:4px} /* Одна геометрия на пару кнопок действия. box-sizing здесь несущий: у