/** * DTC Hub + Single DTC — Trouble Codes Styles (ADR-037). * Подключается на хабе /trouble-codes/ и детальных страницах /trouble-codes/{code}/. * * Дизайн-система: «CARBON & SIGNAL» (тёмная тема, токены из kb-style.css / landing-v3.css). * Зависит от kb-style.css (body.kb-page: тёмный фон, Astra overrides, переменные --bm-*). */ /* ======================================== ТОКЕНЫ УРОВНЯ КОМПОНЕНТА ======================================== */ :root { --dtc-primary: #1C69E4; --dtc-primary-hover: #2B7AFF; --dtc-accent: #00E0C7; --dtc-m: #E2231A; --dtc-major: #FF8A00; --dtc-mono: "JetBrains Mono", monospace; --dtc-headings: "Space Grotesk", sans-serif; } /* Светлая тема «День» (data-theme="light" на ) */ :root[data-theme="light"] { --dtc-primary: #1559C7; --dtc-primary-hover: #1C69E4; --dtc-accent: #009E8C; --dtc-m: #E2231A; --dtc-major: #C26A00; /* темнее для WCAG AA на белом */ } /* ======================================== HERO (расширение kb-archive__header) ======================================== */ .dtc-hero .kb-search { max-width: 640px; } /* ======================================== ТУЛБАР: ФИЛЬТР ПО ДВИГАТЕЛЮ ======================================== */ .dtc-toolbar { display: flex; align-items: center; gap: 0.75rem; margin-top: 1.25rem; flex-wrap: wrap; position: relative; z-index: 1; } .dtc-toolbar__label { font-size: 0.78rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.06em; color: var(--bm-text-dim, #8A8A93); } .dtc-engine-select { padding: 0.6rem 2.25rem 0.6rem 1rem; background: var(--bm-surface, #16161A); border: 1px solid var(--bm-border, rgba(255, 255, 255, 0.08)); border-radius: var(--r-md, 12px); color: var(--bm-text, #F4F4F6); font-family: var(--dtc-mono); font-size: 0.85rem; font-weight: 500; cursor: pointer; appearance: none; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%23A0A0A8' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 0.9rem center; transition: border-color var(--dur-base, 300ms) var(--ease, cubic-bezier(0.16, 1, 0.3, 1)), box-shadow var(--dur-base, 300ms) var(--ease, cubic-bezier(0.16, 1, 0.3, 1)); } .dtc-engine-select:hover { border-color: var(--bm-border-strong, rgba(255, 255, 255, 0.14)); } .dtc-engine-select:focus { outline: none; border-color: var(--dtc-accent); box-shadow: 0 0 0 3px var(--bm-accent-subtle, rgba(0, 224, 199, 0.12)); } .dtc-engine-select option { background: var(--bm-surface-2, #1C1C21); color: var(--bm-text, #F4F4F6); } /* ======================================== ЗАГОЛОВОК СЕКЦИИ ======================================== */ .dtc-section-title { font-family: var(--dtc-headings); font-size: clamp(1.25rem, 3vw, 1.6rem); font-weight: 600; letter-spacing: -0.01em; color: var(--bm-text, #F4F4F6); margin: 2.5rem 0 1.25rem; } /* ======================================== СЕТКА КАТЕГОРИЙ ======================================== */ .dtc-cats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1rem; margin-bottom: 2.5rem; } .dtc-cat-card { display: flex; flex-direction: column; gap: 0.5rem; padding: 1.25rem 1.5rem; text-align: left; background: var(--bm-surface, #16161A); border: 1px solid var(--bm-border, rgba(255, 255, 255, 0.08)); border-radius: var(--r-lg, 18px); box-shadow: var(--sh-2, 0 8px 24px rgba(0, 0, 0, 0.45)); cursor: pointer; font-family: "Inter", sans-serif; position: relative; overflow: hidden; transition: transform var(--dur-base, 300ms) var(--ease, cubic-bezier(0.16, 1, 0.3, 1)), border-color var(--dur-base, 300ms) var(--ease, cubic-bezier(0.16, 1, 0.3, 1)), box-shadow var(--dur-base, 300ms) var(--ease, cubic-bezier(0.16, 1, 0.3, 1)); } /* Акцентная полоска сверху при hover / active — как у .kb-card */ .dtc-cat-card::before { content: ""; position: absolute; top: 0; left: 0; right: 0; height: 2px; background: linear-gradient(90deg, transparent, var(--dtc-accent), transparent); opacity: 0; transition: opacity var(--dur-base, 300ms) var(--ease, cubic-bezier(0.16, 1, 0.3, 1)); } .dtc-cat-card:hover { transform: translateY(-4px); border-color: var(--bm-border-strong, rgba(255, 255, 255, 0.14)); box-shadow: var(--sh-3, 0 20px 60px rgba(0, 0, 0, 0.55)); } .dtc-cat-card:hover::before, .dtc-cat-card--active::before { opacity: 1; } .dtc-cat-card--active { border-color: var(--dtc-accent); background: var(--bm-surface-2, #1C1C21); } .dtc-cat-card__top { display: flex; align-items: center; justify-content: space-between; gap: 0.75rem; } .dtc-cat-card__name { font-family: var(--dtc-headings); font-size: 1rem; font-weight: 600; color: var(--bm-text, #F4F4F6); line-height: 1.3; } .dtc-cat-card--active .dtc-cat-card__name { color: var(--dtc-accent); } .dtc-cat-card__count { flex-shrink: 0; font-family: var(--dtc-mono); font-size: 0.72rem; font-weight: 600; color: var(--dtc-accent); padding: 0.2rem 0.55rem; border-radius: 999px; border: 1px solid rgba(0, 224, 199, 0.35); background: var(--bm-accent-subtle, rgba(0, 224, 199, 0.12)); } .dtc-cat-card__desc { font-size: 0.85rem; line-height: 1.5; color: var(--bm-text-muted, #A0A0A8); margin: 0; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; } .dtc-noscript { grid-column: 1 / -1; text-align: center; color: var(--bm-text-muted, #A0A0A8); } /* ======================================== СЧЁТЧИК РЕЗУЛЬТАТОВ / ОШИБКА / ЗАГРУЗКА ======================================== */ .dtc-results-count { font-family: var(--dtc-mono); font-size: 0.78rem; color: var(--bm-text-dim, #8A8A93); margin-bottom: 1rem; min-height: 1.2em; } .dtc-error { padding: 0.85rem 1.25rem; margin-bottom: 1.25rem; border-radius: var(--r-md, 12px); border: 1px solid rgba(226, 35, 26, 0.4); background: var(--bm-m-subtle, rgba(226, 35, 26, 0.12)); color: #ff8a80; font-size: 0.9rem; } :root[data-theme="light"] .dtc-error { color: #C81E1E; } .dtc-error[hidden] { display: none; } .dtc-loading { display: none; text-align: center; padding: 1rem 0 2rem; font-family: var(--dtc-mono); font-size: 0.8rem; color: var(--bm-text-dim, #8A8A93); } /* ======================================== СЕТКА КОДОВ ======================================== */ .dtc-codes { display: grid; grid-template-columns: repeat(2, 1fr); gap: 1.25rem; margin-bottom: 2rem; } .dtc-code-card { display: flex; flex-direction: column; padding: 1.5rem 1.75rem; background: var(--bm-surface, #16161A); border: 1px solid var(--bm-border, rgba(255, 255, 255, 0.08)); border-radius: var(--r-lg, 18px); box-shadow: var(--sh-2, 0 8px 24px rgba(0, 0, 0, 0.45)); text-decoration: none; color: inherit; position: relative; overflow: hidden; transition: transform var(--dur-base, 300ms) var(--ease, cubic-bezier(0.16, 1, 0.3, 1)), border-color var(--dur-base, 300ms) var(--ease, cubic-bezier(0.16, 1, 0.3, 1)), box-shadow var(--dur-base, 300ms) var(--ease, cubic-bezier(0.16, 1, 0.3, 1)); } .dtc-code-card::before { content: ""; position: absolute; top: 0; left: 0; right: 0; height: 2px; background: linear-gradient(90deg, transparent, var(--dtc-accent), transparent); opacity: 0; transition: opacity var(--dur-base, 300ms) var(--ease, cubic-bezier(0.16, 1, 0.3, 1)); } .dtc-code-card:hover { transform: translateY(-4px); border-color: var(--bm-border-strong, rgba(255, 255, 255, 0.14)); box-shadow: var(--sh-3, 0 20px 60px rgba(0, 0, 0, 0.55)); } .dtc-code-card:hover::before { opacity: 1; } .dtc-code-card__header { display: flex; align-items: center; gap: 0.6rem; margin-bottom: 0.65rem; flex-wrap: wrap; } /* Код ошибки — всегда JetBrains Mono + бирюзовый акцент */ .dtc-code { font-family: var(--dtc-mono); font-size: 1.05rem; font-weight: 600; letter-spacing: 0.03em; color: var(--dtc-accent); } .dtc-code-card__title { font-family: var(--dtc-headings); font-size: 1.05rem; font-weight: 600; line-height: 1.35; color: var(--bm-text, #F4F4F6); margin: 0 0 0.5rem; } .dtc-code-card__excerpt { font-size: 0.9rem; line-height: 1.55; color: var(--bm-text-muted, #A0A0A8); margin: 0 0 1rem; flex-grow: 1; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; } .dtc-code-card__tags { display: flex; align-items: center; gap: 0.4rem; flex-wrap: wrap; padding-top: 0.85rem; border-top: 1px solid var(--bm-border, rgba(255, 255, 255, 0.08)); margin-top: auto; } /* Чипы двигателей / моделей */ .dtc-tag { font-family: var(--dtc-mono); font-size: 0.72rem; font-weight: 500; padding: 0.2rem 0.5rem; border-radius: 4px; background: rgba(255, 255, 255, 0.04); color: var(--bm-text-dim, #8A8A93); transition: background var(--dur-fast, 150ms) var(--ease, cubic-bezier(0.16, 1, 0.3, 1)), color var(--dur-fast, 150ms) var(--ease, cubic-bezier(0.16, 1, 0.3, 1)); } .dtc-code-card:hover .dtc-tag { background: rgba(255, 255, 255, 0.08); color: var(--bm-text-muted, #A0A0A8); } :root[data-theme="light"] .dtc-tag { background: rgba(15, 17, 21, 0.05); } :root[data-theme="light"] .dtc-code-card:hover .dtc-tag { background: rgba(15, 17, 21, 0.09); } .dtc-tag--more { color: var(--dtc-accent); background: var(--bm-accent-subtle, rgba(0, 224, 199, 0.12)); } /* ======================================== БЕЙДЖИ SEVERITY ======================================== */ .dtc-badge { font-family: var(--dtc-mono); font-size: 0.68rem; font-weight: 600; text-transform: uppercase; letter-spacing: 0.05em; padding: 0.2rem 0.5rem; border-radius: 6px; border: 1px solid var(--bm-border, rgba(255, 255, 255, 0.08)); background: var(--bm-surface-2, #1C1C21); color: var(--bm-text-muted, #A0A0A8); white-space: nowrap; } .dtc-badge--critical { border-color: rgba(226, 35, 26, 0.45); background: rgba(226, 35, 26, 0.12); color: #ff6b6b; } :root[data-theme="light"] .dtc-badge--critical { color: #C81E1E; } .dtc-badge--major { border-color: rgba(255, 138, 0, 0.45); background: rgba(255, 138, 0, 0.12); color: var(--dtc-major); } .dtc-badge--moderate { border-color: rgba(28, 105, 228, 0.45); background: rgba(28, 105, 228, 0.12); color: #6ba3ff; } :root[data-theme="light"] .dtc-badge--moderate { color: #1559C7; } .dtc-badge--minor { border-color: rgba(160, 160, 168, 0.4); background: rgba(160, 160, 168, 0.12); color: var(--bm-text-muted, #A0A0A8); } .dtc-badge--cosmetic { border-color: rgba(110, 110, 118, 0.35); background: rgba(110, 110, 118, 0.1); color: var(--bm-text-dim, #8A8A93); } /* ======================================== ПУСТОЕ СОСТОЯНИЕ ======================================== */ .dtc-empty { grid-column: 1 / -1; text-align: center; padding: 3.5rem 1.5rem; background: var(--bm-surface, #16161A); border: 1px dashed var(--bm-border-strong, rgba(255, 255, 255, 0.14)); border-radius: var(--r-lg, 18px); } .dtc-empty__icon { width: 40px; height: 40px; color: var(--bm-text-dim, #8A8A93); opacity: 0.6; margin-bottom: 1rem; } .dtc-empty__title { font-family: var(--dtc-headings); font-size: 1.25rem; font-weight: 600; color: var(--bm-text, #F4F4F6); margin: 0 0 0.5rem; } .dtc-empty__text { font-size: 0.95rem; color: var(--bm-text-muted, #A0A0A8); margin: 0; } /* ======================================== SKELETON-ЗАГРУЗКА ======================================== */ .dtc-skeleton { padding: 1.5rem 1.75rem; background: var(--bm-surface, #16161A); border: 1px solid var(--bm-border, rgba(255, 255, 255, 0.08)); border-radius: var(--r-lg, 18px); } .dtc-skeleton__line { height: 0.85rem; border-radius: 6px; margin-bottom: 0.75rem; background: linear-gradient(90deg, var(--bm-surface-2, #1C1C21) 25%, rgba(255, 255, 255, 0.07) 50%, var(--bm-surface-2, #1C1C21) 75%); background-size: 200% 100%; animation: dtcShimmer 1.4s var(--ease, cubic-bezier(0.16, 1, 0.3, 1)) infinite; } :root[data-theme="light"] .dtc-skeleton__line { background: linear-gradient(90deg, var(--bm-surface-2, #F4F5F7) 25%, rgba(255, 255, 255, 0.65) 50%, var(--bm-surface-2, #F4F5F7) 75%); background-size: 200% 100%; } .dtc-skeleton__line--code { width: 30%; height: 1.05rem; } .dtc-skeleton__line--title { width: 75%; } .dtc-skeleton__line--text { width: 90%; } .dtc-skeleton__line--tags { width: 45%; margin-bottom: 0; } @keyframes dtcShimmer { 0% { background-position: 200% 0; } 100% { background-position: -200% 0; } } /* ======================================== ПАГИНАЦИЯ ======================================== */ .dtc-pagination { display: flex; align-items: center; justify-content: center; gap: 0.5rem; flex-wrap: wrap; padding: 1rem 0 3rem; } .dtc-page-btn { min-width: 2.5rem; height: 2.5rem; padding: 0 0.75rem; display: inline-flex; align-items: center; justify-content: center; background: var(--bm-surface, #16161A); border: 1px solid var(--bm-border, rgba(255, 255, 255, 0.08)); border-radius: var(--r-sm, 8px); color: var(--bm-text-muted, #A0A0A8); font-family: var(--dtc-mono); font-size: 0.85rem; font-weight: 600; cursor: pointer; transition: all var(--dur-base, 300ms) var(--ease, cubic-bezier(0.16, 1, 0.3, 1)); } .dtc-page-btn:hover { border-color: var(--dtc-accent); color: var(--dtc-accent); background: var(--bm-accent-subtle, rgba(0, 224, 199, 0.12)); transform: translateY(-1px); } .dtc-page-btn--active { background: var(--dtc-accent); border-color: var(--dtc-accent); color: #0B0B0D; } .dtc-page-btn--active:hover { background: #00c7b1; border-color: #00c7b1; color: #0B0B0D; } .dtc-page-ellipsis { color: var(--bm-text-dim, #8A8A93); font-family: var(--dtc-mono); padding: 0 0.25rem; } /* ======================================== ДЕТАЛЬНАЯ СТРАНИЦА КОДА (single-dtc.php) ======================================== */ .dtc-detail { padding-bottom: 4rem; } .dtc-detail__header { display: flex; align-items: center; gap: 1rem; flex-wrap: wrap; margin: 2rem 0 0.75rem; } .dtc-detail__code { font-family: var(--dtc-mono); font-size: clamp(1.75rem, 5vw, 2.75rem); font-weight: 600; letter-spacing: 0.02em; color: var(--dtc-accent); text-shadow: 0 0 40px rgba(0, 224, 199, 0.15); margin: 0; } .dtc-detail__title { font-family: var(--dtc-headings); font-size: clamp(1.15rem, 3vw, 1.5rem); font-weight: 600; line-height: 1.35; color: var(--bm-text, #F4F4F6); margin: 0 0 2rem; max-width: 760px; } /* Сетка: контент + боковая панель */ .dtc-detail__layout { display: grid; grid-template-columns: minmax(0, 1fr) 320px; gap: 2rem; align-items: start; } /* Блоки контента */ .dtc-section { background: var(--bm-surface, #16161A); border: 1px solid var(--bm-border, rgba(255, 255, 255, 0.08)); border-radius: var(--r-lg, 18px); box-shadow: var(--sh-2, 0 8px 24px rgba(0, 0, 0, 0.45)); padding: 1.5rem 1.75rem; margin-bottom: 1.25rem; } .dtc-section__title { font-family: var(--dtc-headings); font-size: 1.05rem; font-weight: 600; color: var(--bm-text, #F4F4F6); margin: 0 0 0.85rem; padding-bottom: 0.75rem; border-bottom: 1px solid var(--bm-border, rgba(255, 255, 255, 0.08)); } .dtc-section__title--danger { color: #ff6b6b; } :root[data-theme="light"] .dtc-section__title--danger { color: #C81E1E; } .dtc-section__body { font-size: 0.95rem; line-height: 1.65; color: var(--bm-text-muted, #A0A0A8); } .dtc-section__body p { margin: 0 0 0.85rem; } .dtc-section__body p:last-child { margin-bottom: 0; } /* Markdown-контент секций (h3/h4, списки, inline-код) */ .dtc-section__body h3, .dtc-section__body h4 { font-family: var(--dtc-headings); font-weight: 600; color: var(--bm-text, #F4F4F6); margin: 1.1rem 0 0.5rem; } .dtc-section__body h3 { font-size: 0.98rem; } .dtc-section__body h4 { font-size: 0.92rem; } .dtc-section__body h3:first-child, .dtc-section__body h4:first-child { margin-top: 0; } .dtc-section__body ul, .dtc-section__body ol { margin: 0 0 0.85rem; padding-left: 1.25rem; } .dtc-section__body li { margin-bottom: 0.4rem; } .dtc-section__body li::marker { color: var(--dtc-accent); } .dtc-section__body strong { color: var(--bm-text, #F4F4F6); font-weight: 600; } .dtc-section__body code { font-family: var(--dtc-mono); font-size: 0.85em; padding: 0.1rem 0.35rem; border-radius: 4px; background: rgba(255, 255, 255, 0.06); color: var(--dtc-accent); } :root[data-theme="light"] .dtc-section__body code { background: rgba(15, 17, 21, 0.07); } /* Боковая панель */ .dtc-panel { background: var(--bm-surface, #16161A); border: 1px solid var(--bm-border, rgba(255, 255, 255, 0.08)); border-radius: var(--r-lg, 18px); box-shadow: var(--sh-2, 0 8px 24px rgba(0, 0, 0, 0.45)); padding: 1.5rem; position: sticky; top: 92px; } .dtc-panel__block { margin-bottom: 1.25rem; } .dtc-panel__block:last-child { margin-bottom: 0; } .dtc-panel__label { display: block; font-size: 0.72rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.06em; color: var(--bm-text-dim, #8A8A93); margin-bottom: 0.6rem; } .dtc-panel__chips { display: flex; flex-wrap: wrap; gap: 0.4rem; } .dtc-panel__mileage { font-family: var(--dtc-mono); font-size: 0.95rem; font-weight: 600; color: var(--bm-text, #F4F4F6); } /* OEM-номера — JetBrains Mono */ .dtc-oem { font-family: var(--dtc-mono); font-size: 0.75rem; font-weight: 500; letter-spacing: 0.02em; padding: 0.25rem 0.55rem; border-radius: 4px; border: 1px solid var(--bm-border, rgba(255, 255, 255, 0.08)); background: rgba(255, 255, 255, 0.04); color: var(--bm-text-muted, #A0A0A8); word-break: break-all; } :root[data-theme="light"] .dtc-oem { background: rgba(15, 17, 21, 0.05); } .dtc-panel__source { display: inline-flex; align-items: center; gap: 0.35rem; font-size: 0.85rem; font-weight: 500; color: var(--dtc-primary-hover); text-decoration: none; transition: color var(--dur-fast, 150ms) var(--ease, cubic-bezier(0.16, 1, 0.3, 1)); word-break: break-all; } .dtc-panel__source:hover { color: var(--dtc-accent); } .dtc-panel__source::after { content: "↗"; font-size: 0.75rem; } /* Кнопка «← Все коды ошибок» (стиль btn--ghost) */ .dtc-back { display: inline-flex; align-items: center; gap: 0.5rem; padding: 0.65rem 1.25rem; border-radius: var(--r-md, 12px); border: 1px solid var(--bm-border-strong, rgba(255, 255, 255, 0.14)); background: transparent; color: var(--bm-text, #F4F4F6); font-family: "Inter", sans-serif; font-size: 0.9rem; font-weight: 600; text-decoration: none; margin-top: 0.5rem; transition: all var(--dur-base, 300ms) var(--ease, cubic-bezier(0.16, 1, 0.3, 1)); } .dtc-back:hover { border-color: var(--dtc-accent); color: var(--dtc-accent); background: var(--bm-accent-subtle, rgba(0, 224, 199, 0.12)); transform: translateY(-1px); } /* 404: код не найден */ .dtc-notfound { text-align: center; padding: 4rem 1.5rem; background: var(--bm-surface, #16161A); border: 1px dashed var(--bm-border-strong, rgba(255, 255, 255, 0.14)); border-radius: var(--r-lg, 18px); margin: 3rem 0; } .dtc-notfound__code { font-family: var(--dtc-mono); font-size: clamp(1.5rem, 4vw, 2.25rem); font-weight: 600; color: var(--dtc-accent); margin: 0 0 0.75rem; } .dtc-notfound__title { font-family: var(--dtc-headings); font-size: 1.35rem; font-weight: 600; color: var(--bm-text, #F4F4F6); margin: 0 0 0.75rem; } .dtc-notfound__text { font-size: 0.95rem; line-height: 1.6; color: var(--bm-text-muted, #A0A0A8); margin: 0 auto 1.75rem; max-width: 480px; } /* Кнопка в стиле btn--primary для 404-блока */ .dtc-notfound__cta { display: inline-flex; align-items: center; gap: 0.5rem; padding: 0.75rem 1.5rem; border-radius: var(--r-md, 12px); border: 1px solid var(--dtc-primary); background: var(--dtc-primary); color: #ffffff; font-family: "Inter", sans-serif; font-size: 0.95rem; font-weight: 600; text-decoration: none; transition: all var(--dur-base, 300ms) var(--ease, cubic-bezier(0.16, 1, 0.3, 1)); } .dtc-notfound__cta:hover { background: var(--dtc-primary-hover); border-color: var(--dtc-primary-hover); transform: translateY(-1px); box-shadow: 0 8px 24px rgba(28, 105, 228, 0.35); } /* ======================================== АДАПТИВ ======================================== */ @media (max-width: 1024px) { .dtc-cats { grid-template-columns: repeat(2, 1fr); } .dtc-detail__layout { grid-template-columns: 1fr; } .dtc-panel { position: static; } } @media (max-width: 768px) { .dtc-codes { grid-template-columns: 1fr; } .dtc-detail__header { margin-top: 1.5rem; } } @media (max-width: 560px) { .dtc-cats { grid-template-columns: 1fr; } .dtc-toolbar { align-items: flex-start; flex-direction: column; gap: 0.5rem; } .dtc-engine-select { width: 100%; } } /* Светлая тема: активная кнопка пагинации — мягкий синий вместо teal-таблетки */ :root[data-theme="light"] .dtc-page-btn--active, :root[data-theme="light"] .dtc-page-btn--active:hover { background: var(--bm-primary-subtle, rgba(21, 89, 199, 0.10)); border-color: var(--dtc-primary); color: var(--dtc-primary); }