:root {
--dict-text-main: #1e293b;
--dict-primary: #36608d;
--dict-text-muted: #3e4959;
--dict-bg-light: #f8fafc;
--dict-border: #e2e8f0;
}
/* Контейнер-изолятор (опционально, можно обернуть весь блок в этот класс) */
.dictionary-section {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
color: var(--dict-text-main);
}
/* Фиксированная панель управления */
.dictionary-controls-wrapper {
position: sticky;
top: 0;
background: rgba(255, 255, 255, 0.98);
border-bottom: 1px solid var(--dict-border);
z-index: 1000;
backdrop-filter: blur(10px);
}
.dictionary-search-row {
justify-content: space-between;
align-items: center;
gap: 20px;
margin-bottom: 15px;
}
.dictionary-logo {
padding: 0;
text-transform: uppercase;
}
.dictionary-logo span { color: var(--dict-primary); }
.dictionary-search-box {
flex-grow: 1;
max-width: 500px;
}
.dictionary-search-box input {
width: -webkit-fill-available;
padding: 10px 16px;
border-radius: 8px;
border: 1px solid var(--dict-border);
background: var(--dict-bg-light);
font-size: 16px;
outline: none;
}
.dictionary-search-box input:focus {
border-color: var(--dict-primary);
background: #fff;
box-shadow: 0 0 0 3px rgba(79, 70, 229, 0.1);
}
/* Фильтр категорий */
.dictionary-category-filter {
display: flex;            /* Выстраиваем элементы в ряд */
flex-wrap: nowrap;       /* ЗАПРЕЩАЕМ перенос на новую строку */
overflow-x: auto;        /* Включаем горизонтальный скролл */
gap: 10px;               /* Расстояние между кнопками */
padding: 10px 0;         /* Отступы сверху/снизу */
/* Плавный скролл для мобильных и трекпадов */
-webkit-overflow-scrolling: touch;
}
.dictionary-category-filter a {
flex: 0 0 auto;          /* ЗАПРЕЩАЕМ кнопкам сжиматься */
text-decoration: none;   /* Убираем подчеркивание ссылок */
}
.dictionary-category-filter::-webkit-scrollbar {
height: 0px;             /* Скрывает скроллбар, сохраняя функционал */
display: none;
}
.dictionary-category-filter {
scrollbar-width: none;
}
.dictionary-cat-btn {
white-space: nowrap;
padding: 7px 14px;
border-radius: 20px;
background: var(--dict-bg-light);
border: 1px solid var(--dict-border);
color: var(--dict-text-muted);
font-size: 13px;
font-weight: 600;
cursor: pointer;
transition: 0.2s;
}
.dictionary-cat-btn.dictionary-active {
background: var(--dict-primary);
color: #fff;
border-color: var(--dict-primary);
}
/* Алфавитный указатель */
.dictionary-alphabet-grid {
display: flex;
flex-wrap: wrap;
gap: 4px;
padding-bottom: 10px;
}
.dictionary-letter {
min-width: 32px;
height: 32px;
display: flex;
align-items: center;
justify-content: center;
border-radius: 6px;
background: var(--dict-bg-light);
color: var(--dict-text-main);
font-weight: 700;
font-size: 12px;
cursor: pointer;
border: 1px solid var(--dict-border);
text-decoration: none;
}
.dictionary-letter.dictionary-active {
background: var(--dict-text-main);
color: #fff;
}
/* Сетка карточек */
.dictionary-grid {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
gap: 20px;
padding: 30px 0;
}
.dictionary-card {
padding: 24px;
border: 1px solid var(--dict-border);
border-radius: 12px;
background: #fff;
transition: transform 0.2s, border-color 0.2s;
cursor:pointer;
max-height: 300px;
}
.dictionary-card:hover {
border-color: var(--dict-primary);
transform: translateY(-3px);
}
.dictionary-card-tag {
font-size: 10px;
font-weight: 800;
color: var(--dict-primary);
text-transform: uppercase;
margin-bottom: 10px;
display: block;
}
.dictionary-card h2 {
margin: 0 0 10px 0;
font-size: 19px;
}
.dictionary-card p {
font-size: 14px;
color: var(--dict-text-muted);
line-height: 1.6;
}
/* Адаптивность */
@media (max-width: 768px) {
.dictionary-search-row { flex-direction: column; align-items: flex-start; }
.dictionary-search-box { max-width: 100%; }
.dictionary-category-filter {
margin: 0 -20px 15px -20px;
padding: 5px 20px;
}
.dictionary-alphabet-grid {
flex-wrap: nowrap;
overflow-x: auto;
margin: 0 -20px;
padding: 0 20px 10px 20px;
}
.dictionary-letter {
min-width: 38px;
height: 38px;
}
.dictionary-grid { grid-template-columns: 1fr; }
}
.dictionary-no-results {
grid-column: 1 / -1;
text-align: center;
padding: 50px;
color: var(--dict-text-muted);
}
.search-container {
position: relative;
width: 100%;
max-width: 400px; /* можно изменить */
}
#dictionarySearchInput {
width: 100%;
padding: 10px 40px 10px 15px; /* отступ справа под лупу */
box-sizing: border-box;
border: 1px solid #ccc;
border-radius: 4px;
outline: none;
}
.search-icon-btn {
position: absolute;
right: 5px;
top: 50%;
transform: translateY(-50%);
background: none;
border: none;
cursor: pointer;
padding: 5px;
display: flex;
align-items: center;
justify-content: center;
}
.tbd-hero-section { margin-bottom: 60px; }
.tbd-tag {
font-size: 11px;
font-weight: 800;
background: var(--tbd-light);
color: var(--tbd-black);
padding: 5px 14px;
border-radius: 4px;
display: inline-block;
text-transform: uppercase;
}
.search-icon-btn svg {
fill: #888;
transition: fill 0.2s;
}
.search-icon-btn:hover svg {
fill: #333;
}
.tbd-wrapper {
/* Переменные для легкой настройки цветов */
--tbd-black: #0f172a;
--tbd-blue: #3b82f6;
--tbd-slate: #475569;
--tbd-light: #f8fafc;
background: #ffffff;
color: var(--tbd-slate);
line-height: 1.6;
padding: 20px 20px;
}
.tbd-container {
max-width: 1100px;
margin: 0 auto;
}
.tbd-definition-lead {
font-size: 1.5rem;
line-height: 1.4;
color: var(--tbd-black);
font-weight: 400;
border-left: 2px solid var(--tbd-blue);
padding-left: 30px;
}
.tbd-tag {
font-size: 11px;
font-weight: 800;
background: var(--tbd-light);
color: var(--tbd-black);
padding: 5px 14px;
border-radius: 4px;
display: inline-block;
text-transform: uppercase;
}
.tbd-main-title {
font-size: clamp(1.8rem, 7vw, 4rem);
font-weight: 900;
line-height: 1;
letter-spacing: -0.04em;
margin: 0 0 50px 0;
color: var(--tbd-black);
}
.tbd-article-content {
margin-top: 40px;
font-size: 1.1rem;
color: #334155;
}
.tbd-article-content p { margin-bottom: 25px; }
/* Ссылки на ТК РФ с эффектом заливки */
.tbd-tk-anchor {
color: var(--tbd-black);
text-decoration: none;
font-weight: 700;
box-shadow: inset 0 -4px 0 0 #dbeafe;
transition: box-shadow 0.2s ease-in-out;
padding: 0 2px;
}
.tbd-tk-anchor:hover { box-shadow: inset 0 -24px 0 0 #dbeafe; }
/* Блок "Читайте также" без использования тега <footer>*/
.tbd-related-box {
margin-top: 30px;
padding-top: 20px;
border-top: 1px solid #f1f5f9;
}
.tbd-related-head {
font-size: 18px;
font-weight: 700;
text-transform: uppercase;
letter-spacing: 0.15em;
color: #94a3b8;
margin-bottom: 30px;
}
.tbd-related-link {
text-decoration: none;
display: block;
}
.tbd-related-link h4 {
font-size: 1.6rem;
margin: 0 0 10px 0;
color: var(--tbd-black);
transition: color 0.2s;
}
.tbd-related-link:hover h4 { color: var(--tbd-blue); }
.tbd-related-link p {
color: #64748b;
margin: 0;
}
@media (max-width: 768px) {
.tbd-main-title { font-size: 3rem; padding-top:0px}
.tbd-related-grid { grid-template-columns: 1fr; }
.tbd-wrapper { padding: 20px 5px; }
}
/* Основной контент статьи */
.term-header { border-bottom: 2px solid var(--bg); padding-bottom: 20px; margin-bottom: 30px; }
.term-title { font-size: 2.5rem; margin: 0; color: var(--primary); }
.term-category { display: inline-block; background: #e1f5fe; color: #0288d1; padding: 4px 12px; border-radius: 20px; font-size: 0.85rem; margin-top: 10px; }
.short-definition { font-size: 1.2rem; font-style: italic; color: #555; border-left: 4px solid var(--accent); padding-left: 20px; margin: 25px 0; }
.full-content { font-size: 1.1rem; line-height: 1.8; }
.full-content p { margin-bottom: 20px; }
.tk-link { color: #d35400; font-weight: bold; text-decoration: none; border-bottom: 1px dashed #d35400; }
/* Блок рекомендаций */
.related-terms { margin-top: 50px; padding-top: 30px; border-top: 2px dashed #eee; }
.related-title { font-size: 1.5rem; margin-bottom: 20px; }
.related-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; }
.related-card { padding: 15px; border: 1px solid #eee; border-radius: 6px; transition: 0.3s; text-decoration: none; color: inherit; }
.related-card:hover { border-color: var(--accent); background: #f0f7ff; }
.related-card h3 { margin: 0 0 5px 0; font-size: 1.1rem; color: var(--accent); }
.related-card p { margin: 0; font-size: 0.9rem; color: #666; }
@media (max-width: 600px) { .related-grid { grid-template-columns: 1fr; } }