/* Test-only tools page. Scoped to #ct-tools-test. Brand book: #0c0c0c #141414 #f4f4f4 #a3a3a3 #de002b #b80024 */ #ct-tools-test.ctt{ --ink:#0c0c0c; --paper:#fff; --bg:#f4f4f4; --muted:#6b6b6b; --line:#e5e5e5; --red:#de002b; --red-dark:#b80024; --stock:#4a4a4a; --new:#de002b; font-family:"Source Sans 3","Source Sans Pro",system-ui,Arial,sans-serif; color:var(--ink); margin:0 0 40px; max-width:1120px; } #ct-tools-test *{box-sizing:border-box} #ct-tools-test .ctt-banner{ margin:0 0 18px;padding:12px 16px; border:1px solid var(--line);border-left:3px solid var(--red);border-radius:10px; background:#fff8f9;color:var(--ink);font-size:14px;line-height:1.45 } #ct-tools-test .ctt-lead{margin:0 0 16px;font-size:16px;line-height:1.5;color:#222} #ct-tools-test .ctt-tabs{display:flex;gap:8px;flex-wrap:wrap;margin:0 0 20px} #ct-tools-test .ctt-tab{ appearance:none;cursor:pointer; padding:10px 18px;border-radius:999px; border:1px solid var(--ink);background:#fff;color:var(--ink); font:700 14px/1.2 inherit } #ct-tools-test .ctt-tab.is-on{background:var(--red);border-color:var(--red);color:#fff} #ct-tools-test .ctt-tab:hover{border-color:var(--red);color:var(--red)} #ct-tools-test .ctt-tab.is-on:hover{color:#fff} #ct-tools-test .ctt-presets{display:flex;flex-wrap:wrap;gap:8px;margin:0 0 16px} #ct-tools-test .ctt-chip{ appearance:none;cursor:pointer;padding:6px 12px;border-radius:999px; border:1px solid var(--line);background:#fff;color:var(--ink);font:600 13px/1.3 inherit } #ct-tools-test .ctt-chip:hover{border-color:var(--red);color:var(--red)} #ct-tools-test .ctt-grid{display:grid;grid-template-columns:1fr 1fr;gap:14px;margin:0 0 16px} #ct-tools-test .ctt-card{ margin:0;padding:16px 16px 14px;background:#fff; border:1px solid var(--line);border-radius:12px } #ct-tools-test fieldset.ctt-card{min-width:0} #ct-tools-test .ctt-card>legend{ padding:0 8px;font-weight:700;font-size:15px } #ct-tools-test .ctt-mode{display:flex;gap:14px;flex-wrap:wrap;margin:0 0 12px;font-size:14px} #ct-tools-test .ctt-mode label{display:flex;align-items:center;gap:6px;cursor:pointer} #ct-tools-test .ctt-fields{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px;margin:0 0 10px} #ct-tools-test .ctt-fields.is-hidden{display:none} #ct-tools-test label{display:block;font-size:12px;font-weight:600;color:#333} #ct-tools-test label.ctt-block{margin:0 0 10px} #ct-tools-test input[type=number],#ct-tools-test select{ display:block;width:100%;margin-top:4px;padding:8px 10px; border:1px solid #ccc;border-radius:8px;font:16px/1.2 inherit;color:var(--ink);background:#fff } #ct-tools-test input[type=number]:focus,#ct-tools-test select:focus{ outline:2px solid var(--red);outline-offset:1px;border-color:var(--red) } #ct-tools-test .ctt-hint{margin:0 0 12px;font-size:13px;color:var(--muted);font-weight:400} #ct-tools-test .ctt-panel{display:none!important} #ct-tools-test .ctt-panel.is-on{display:block!important} #ct-tools-test .ctt-visuals{display:grid;grid-template-columns:1fr 1fr;gap:14px;margin:0 0 16px} #ct-tools-test .ctt-fig{padding:12px 12px 8px;background:#fafafa} #ct-tools-test .ctt-fig figcaption{margin:0 0 6px;font-size:13px;font-weight:700} #ct-tools-test .ctt-fig svg{display:block;width:100%;height:auto} #ct-tools-test .ctt-stats{ display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:10px;margin:0 0 16px } #ct-tools-test .ctt-stat{ background:#fff;border:1px solid var(--line);border-radius:12px;padding:12px 14px } #ct-tools-test .ctt-stat b{display:block;font-size:22px;line-height:1.15;font-weight:700;color:var(--ink)} #ct-tools-test .ctt-stat span{display:block;margin-top:4px;font-size:12px;color:var(--muted);font-weight:600} #ct-tools-test .ctt-stat.is-up b{color:var(--red)} #ct-tools-test .ctt-note{ margin:0 0 16px;padding:12px 16px;border-radius:10px; border:1px solid var(--line);border-left:3px solid var(--red);background:#fff8f9;font-size:15px;line-height:1.45 } #ct-tools-test .ctt-legal{margin:0 0 18px;font-size:13px;line-height:1.5;color:#444} #ct-tools-test .ctt-links{display:grid;grid-template-columns:1fr 1fr;gap:16px;margin:0 0 12px} #ct-tools-test .ctt-links h2{margin:0 0 8px;font-size:16px} #ct-tools-test .ctt-list{list-style:none;margin:0;padding:0} #ct-tools-test .ctt-list li{margin:0 0 8px;font-size:14px;line-height:1.35} #ct-tools-test .ctt-list a,#ct-tools-test .ctt-more a{color:var(--red);text-decoration:underline} #ct-tools-test .ctt-list a:hover,#ct-tools-test .ctt-more a:hover{color:var(--red-dark)} #ct-tools-test .ctt-more{margin:8px 0 0;font-size:14px} #ct-tools-test .ctt-empty{color:var(--muted);font-size:14px} #ct-tools-test .ctt-winch-kpis{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin:0} #ct-tools-test .ctt-winch-kpis b{display:block;font-size:26px;line-height:1.1} #ct-tools-test .ctt-winch-kpis span{display:block;margin-top:4px;font-size:12px;color:var(--muted);font-weight:600} #ct-tools-test .ctt-badge{display:inline-block;margin-top:10px;padding:2px 8px;border-radius:999px;border:1px solid var(--ink);font-size:11px;font-weight:700} @media (max-width:767px){ #ct-tools-test .ctt-grid, #ct-tools-test .ctt-links, #ct-tools-test .ctt-stats, #ct-tools-test .ctt-fields, #ct-tools-test .ctt-winch-kpis{grid-template-columns:1fr 1fr} #ct-tools-test .ctt-visuals{grid-template-columns:1fr} #ct-tools-test .ctt-stats{grid-template-columns:1fr 1fr} #ct-tools-test .ctt-links{grid-template-columns:1fr} #ct-tools-test .ctt-stat b{font-size:18px} #ct-tools-test .ctt-tab{padding:10px 14px;flex:1 1 auto} } @media (max-width:420px){ #ct-tools-test .ctt-fields{grid-template-columns:1fr 1fr} #ct-tools-test .ctt-fields label:nth-child(3){grid-column:1/-1} } /* ===== 14.11.2026 dark-design: вся тестовая страница по DESIGN.md (СТС, Brutal Offroad E-commerce). Только эта страница: файл подключается лишь в /custom-fit/tools-test/index.php. Шапка и подвал не затрагиваются. Токены DESIGN.md: background #0C0C0C, surface #141414, surface-raised #1A1A1A, border #222222, border-strong #3F3F3F, text #F4F4F4, text-muted #A3A3A3, text-dim #666666, primary #DE002B, primary-hover #A3001E, accent-stock #1F7A3F, accent-incart #4FAD00, rounded md/lg 12px, sm 4px, pill 999px; spacing 4/8/16/24/32/48; шрифты Unbounded / Source Sans 3 из local/templates/aspro_optimus/fonts (fonts-brutal.css). Служебные цвета инструментов (brandbook v1.1 §4): синий #5EB0FF, зелёный #1F7A3F/#4FAD00, песок #8B7355, оранжевый #F7630C, красный текст #FF6B6B. */ #content > .wrapper_inner{background:#0C0C0C!important} #content > .wrapper_inner #pagetitle{color:#F4F4F4;font-family:Unbounded,system-ui,sans-serif;font-weight:800;letter-spacing:-0.02em;line-height:1.15} #content > .wrapper_inner .breadcrumbs,#content > .wrapper_inner .breadcrumbs a,#content > .wrapper_inner .breadcrumbs span{color:#A3A3A3} #content > .wrapper_inner .breadcrumbs a:hover{color:#F4F4F4} #ct-tools-test.ctt{ --ct-bg:#0C0C0C;--ct-surface:#141414;--ct-raised:#1A1A1A;--ct-border:#222222;--ct-border-strong:#3F3F3F; --ct-text:#F4F4F4;--ct-muted:#A3A3A3;--ct-dim:#666666;--ct-primary:#DE002B;--ct-primary-hover:#A3001E; --ct-ok:#1F7A3F;--ct-ok-text:#4FAD00;--ct-info:#5EB0FF;--ct-warn:#F7630C;--ct-sand:#8B7355;--ct-bad-text:#FF6B6B; --ink:#F4F4F4;--paper:#141414;--bg:#0C0C0C;--muted:#A3A3A3;--line:#222222;--red:#DE002B;--red-dark:#A3001E; font-family:'Source Sans 3',system-ui,sans-serif;font-size:1rem;line-height:1.55;color:var(--ct-text); max-width:1450px;padding:0 0 48px } #ct-tools-test.ctt h2,#ct-tools-test.ctt .ctt-links h2{font:700 1.25rem/1.25 Unbounded,system-ui,sans-serif;letter-spacing:-0.02em;color:var(--ct-text);margin:0 0 16px} #ct-tools-test.ctt .ctt-banner{background:var(--ct-surface);border:1px solid var(--ct-border);border-left:1px solid var(--ct-border);border-radius:12px;color:var(--ct-muted);font-size:.875rem;font-weight:500;line-height:1.5;padding:16px;margin:0 0 24px} #ct-tools-test.ctt .ctt-lead{color:var(--ct-text);font-size:1rem;line-height:1.55;margin:0 0 16px} /* вкладки: активная = button-primary, остальные = button-secondary */ #ct-tools-test.ctt .ctt-tabs{gap:8px;margin:0 0 24px} #ct-tools-test.ctt .ctt-tab{min-height:40px;padding:0 24px;border-radius:12px;border:1px solid var(--ct-primary);background:transparent;color:var(--ct-text); font:700 .8125rem/1.2 'Source Sans 3',system-ui,sans-serif;letter-spacing:.04em;text-transform:uppercase;transition:background .15s,border-color .15s,color .15s} #ct-tools-test.ctt .ctt-tab:hover{background:var(--ct-primary);color:#FFFFFF;border-color:var(--ct-primary)} #ct-tools-test.ctt .ctt-tab.is-on{background:var(--ct-primary);border-color:var(--ct-primary);color:#FFFFFF} #ct-tools-test.ctt .ctt-tab.is-on:hover{background:var(--ct-primary-hover);border-color:var(--ct-primary-hover)} #ct-tools-test.ctt .ctt-tab:focus-visible,#ct-tools-test.ctt .ctt-chip:focus-visible{outline:2px solid #FFFFFF;outline-offset:2px} /* примеры размеров: метки-пилюли на surface-raised */ #ct-tools-test.ctt .ctt-chip{min-height:36px;padding:0 16px;border-radius:999px;border:1px solid var(--ct-border-strong);background:var(--ct-raised);color:var(--ct-text);font:600 .875rem/1.2 'Source Sans 3',system-ui,sans-serif} #ct-tools-test.ctt .ctt-chip:hover{border-color:var(--ct-info);color:var(--ct-info)} /* карточки = shell-surface */ #ct-tools-test.ctt .ctt-card,#ct-tools-test.ctt .ctt-stat,#ct-tools-test.ctt .ctt-fig{background:var(--ct-surface);border:1px solid var(--ct-border);border-radius:12px;color:var(--ct-text)} #ct-tools-test.ctt .ctt-card{padding:16px 16px 16px} #ct-tools-test.ctt .ctt-card>legend{padding:0 8px;font:700 1rem/1.25 Unbounded,system-ui,sans-serif;letter-spacing:-0.02em;color:var(--ct-text)} #ct-tools-test.ctt .ctt-fig figcaption{font:700 1rem/1.25 Unbounded,system-ui,sans-serif;letter-spacing:-0.02em;color:var(--ct-text)} #ct-tools-test.ctt label{color:var(--ct-muted);font-size:.875rem;font-weight:500} #ct-tools-test.ctt .ctt-mode{color:var(--ct-text)} #ct-tools-test.ctt input[type=radio]{accent-color:var(--ct-primary)} /* поля ввода: как в auth DESIGN.md — на #0C0C0C, рамка border-strong, текст #F4F4F4 */ #ct-tools-test.ctt input[type=number],#ct-tools-test.ctt select, #ct-tools-test.ctt .ctt-ov-meas input[type=number]{background:var(--ct-bg);border:1px solid var(--ct-border-strong);border-radius:12px;color:var(--ct-text);min-height:44px;font:600 1rem/1.2 'Source Sans 3',system-ui,sans-serif;color-scheme:dark} #ct-tools-test.ctt input[type=number]:hover,#ct-tools-test.ctt select:hover{border-color:var(--ct-muted)} #ct-tools-test.ctt input[type=number]:focus,#ct-tools-test.ctt select:focus, #ct-tools-test.ctt .ctt-ov-meas input[type=number]:focus{outline:2px solid var(--ct-primary);outline-offset:1px;border-color:var(--ct-primary)} #ct-tools-test.ctt select option{background:var(--ct-surface);color:var(--ct-text)} #ct-tools-test.ctt .ctt-unit-lab{font:700 .8125rem/1.2 'Source Sans 3',system-ui,sans-serif;letter-spacing:.04em;color:var(--ct-muted)} #ct-tools-test.ctt .ctt-unit-lab b{color:var(--ct-text)} #ct-tools-test.ctt .ctt-unit-lab[data-unit$="-inch"]{border-top:1px dashed var(--ct-border-strong)} #ct-tools-test.ctt .ctt-hint{color:var(--ct-muted);font-size:.875rem} /* итоги */ #ct-tools-test.ctt .ctt-stat{padding:16px} #ct-tools-test.ctt .ctt-stat b{color:var(--ct-text);font:800 1.25rem/1.2 'Source Sans 3',system-ui,sans-serif} #ct-tools-test.ctt .ctt-stat.is-up{border-top:3px solid var(--ct-info)} #ct-tools-test.ctt .ctt-stat.is-up b{color:var(--ct-info)} #ct-tools-test.ctt .ctt-stat span{color:var(--ct-muted);font-size:.8125rem;font-weight:700;letter-spacing:.04em} #ct-tools-test.ctt .ctt-note{background:var(--ct-raised);border:1px solid var(--ct-border);border-left:3px solid var(--ct-info);border-radius:12px;color:var(--ct-text)} #ct-tools-test.ctt .ctt-note b{color:var(--ct-info)} #ct-tools-test.ctt .ctt-legal{color:var(--ct-muted);font-size:.875rem;line-height:1.5} #ct-tools-test.ctt .ctt-links{background:var(--ct-surface);border:1px solid var(--ct-border);border-radius:12px;padding:24px;gap:24px} #ct-tools-test.ctt .ctt-list li{color:var(--ct-text)} #ct-tools-test.ctt .ctt-list a,#ct-tools-test.ctt .ctt-more a{color:var(--ct-text);text-decoration:underline;text-decoration-color:var(--ct-border-strong);text-underline-offset:3px} #ct-tools-test.ctt .ctt-list a:hover,#ct-tools-test.ctt .ctt-more a:hover{color:var(--ct-info);text-decoration-color:var(--ct-info)} #ct-tools-test.ctt .ctt-empty{color:var(--ct-muted)} #ct-tools-test.ctt .ctt-winch-kpis b{color:var(--ct-text);font:800 1.75rem/1.1 Unbounded,system-ui,sans-serif;letter-spacing:-0.02em} #ct-tools-test.ctt .ctt-winch-kpis span{color:var(--ct-muted)} #ct-tools-test.ctt .ctt-badge{border:1px solid rgba(31,122,63,.45);background:rgba(31,122,63,.12);color:var(--ct-ok-text);border-radius:999px} #ct-tools-test.ctt > section > p.ctt-more:last-child a{display:inline-flex;align-items:center;min-height:40px;padding:0 24px;border-radius:12px;background:var(--ct-primary);color:#FFFFFF;text-decoration:none;font:700 .8125rem/1.2 'Source Sans 3',system-ui,sans-serif;letter-spacing:.04em;text-transform:uppercase} #ct-tools-test.ctt > section > p.ctt-more:last-child a:hover{background:var(--ct-primary-hover);color:#FFFFFF} /* блок схемы «Посадка колеса в арке»: те же токены, без Ubuntu */ #ct-tools-test.ctt .ctt-fig-offset{--ov-bg:#141414;--ov-row:#1A1A1A;--ov-line:#222222;--ov-text:#F4F4F4;--ov-mute:#A3A3A3;--ov-acc:#DE002B;--ov-acc2:#DE002B;--ov-ok:#1F7A3F;--ov-warn:#F7630C; border:1px solid #222222;border-radius:12px;padding:24px} #ct-tools-test.ctt .ctt-fig-offset>figcaption{font:700 1.25rem/1.25 Unbounded,system-ui,sans-serif;letter-spacing:-0.02em} #ct-tools-test.ctt .ctt-fig-offset>figcaption small{font:400 .875rem/1.5 'Source Sans 3',system-ui,sans-serif;color:#A3A3A3} #ct-tools-test.ctt .ctt-ov-tab{font:600 .9375rem/1.2 'Source Sans 3',system-ui,sans-serif;color:#A3A3A3} #ct-tools-test.ctt .ctt-ov-tab.is-on{color:#F4F4F4;border-bottom-color:#DE002B} #ct-tools-test.ctt .ctt-ov-sum>div{border-radius:12px;border-color:#222222;color:#A3A3A3} #ct-tools-test.ctt .ctt-ov-sum>div b{font:800 1.25rem/1.15 'Source Sans 3',system-ui,sans-serif;color:#F4F4F4} #ct-tools-test.ctt .ctt-ov-sum>div.is-ok{border-top-color:#1F7A3F} #ct-tools-test.ctt .ctt-ov-sum>div.is-warn{border-top-color:#F7630C} #ct-tools-test.ctt .ctt-ov-sum>div.is-bad{border-top-color:#DE002B} #ct-tools-test.ctt .ctt-ov-svgw{border-radius:12px;border-color:#222222;background:#0C0C0C} #ct-tools-test.ctt .ctt-ov-meas{border-radius:12px;border-color:#222222;background:#1A1A1A} #ct-tools-test.ctt .ctt-ov-meas h3,#ct-tools-test.ctt .ctt-ov-verdict b{font-family:Unbounded,system-ui,sans-serif;font-weight:700;letter-spacing:-0.02em} #ct-tools-test.ctt .ctt-ov-meas label,#ct-tools-test.ctt .ctt-ov-meas p,#ct-tools-test.ctt .ctt-ov-meas details,#ct-tools-test.ctt .ctt-ov-res>div,#ct-tools-test.ctt .ctt-ov-res>.ctt-ov-verdict,#ct-tools-test.ctt .ctt-ov-tbl th:first-child,#ct-tools-test.ctt .ctt-ov-tbl td:first-child{color:#A3A3A3} #ct-tools-test.ctt .ctt-ov-meas summary:hover{color:#5EB0FF} #ct-tools-test.ctt .ctt-ov-ph{border-color:#3F3F3F;background:#0C0C0C;border-radius:12px} #ct-tools-test.ctt .ctt-ov-reset{min-height:36px;height:auto;border:1px solid #DE002B;border-radius:12px;color:#DE002B;font:700 13px/1.2 'Source Sans 3',system-ui,sans-serif;letter-spacing:.04em;text-transform:uppercase;background:transparent} @media (hover:hover){#ct-tools-test.ctt .ctt-ov-reset:hover{background:#DE002B;border-color:#DE002B;color:#FFFFFF}} /* текст статусов на тёмном — AA: зелёный #4FAD00, оранжевый #F7630C, красный #FF6B6B */ #ct-tools-test.ctt .ctt-ov-res>div.is-ok b{color:#4FAD00} #ct-tools-test.ctt .ctt-ov-res>div.is-warn b{color:#F7630C} #ct-tools-test.ctt .ctt-ov-res>div.is-bad b{color:#FF6B6B} #ct-tools-test.ctt .ctt-ov-res>.ctt-ov-verdict{border-radius:12px;background:#1A1A1A} #ct-tools-test.ctt .ctt-ov-res>.ctt-ov-verdict.is-ok{border-left-color:#1F7A3F} #ct-tools-test.ctt .ctt-ov-res>.ctt-ov-verdict.is-warn{border-left-color:#F7630C} #ct-tools-test.ctt .ctt-ov-res>.ctt-ov-verdict.is-bad{border-left-color:#DE002B} #ct-tools-test.ctt .ctt-ov-tbl td.n{color:#FF6B6B} #ct-tools-test.ctt .ctt-ov-meas .ctt-ov-ex{color:#F7630C} #ct-tools-test.ctt .ctt-ov-cap,#ct-tools-test.ctt .ctt-ov-thr{color:#A3A3A3} @media (max-width:767px){ #ct-tools-test.ctt .ctt-fig-offset{padding:16px 12px 12px} #ct-tools-test.ctt .ctt-links{padding:16px} #ct-tools-test.ctt .ctt-tab{padding:0 16px} #content > .wrapper_inner #pagetitle{font-size:1.5rem} }