/* ============================================================================ Современная тема ГСК «Локомотив-5» — сине-янтарная палитра. Светлая и тёмная темы через CSS-переменные, переключаемые атрибутом data-theme на . Базовый размер текста — 16px (ТЗ §11). Размер шрифта регулируется классом на (font-size-normal/large/xlarge). Дизайн: мягкие тени, крупные скругления, воздушные отступы, WCAG AA. ========================================================================== */ :root { --gsk-font-base: 16px; /* Радиусы скругления */ --radius-sm: 8px; --radius: 14px; --radius-lg: 20px; --radius-pill: 999px; /* Системный шрифтовой стек */ --gsk-font: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji"; /* Переопределяем базовые bootstrap-переменные для скруглений */ --bs-border-radius: var(--radius); --bs-border-radius-sm: var(--radius-sm); --bs-border-radius-lg: var(--radius-lg); } /* ---- Светлая тема (по умолчанию) ---- */ [data-theme="light"] { --bs-body-bg: #f4f3f0; --bs-body-color: #2a2825; --gsk-bg: #f4f3f0; --gsk-bg-soft: #ebe9e3; --gsk-bg-elevated: #fbfaf7; --gsk-card-bg: #fbfaf7; --gsk-border: #ddd9d0; --gsk-border-strong: #c5bfae; --gsk-muted: #6b665f; --gsk-header-bg: rgba(244, 243, 240, 0.85); --gsk-footer-bg: #ebe9e3; --gsk-primary: #4a6b54; --gsk-primary-hover: #3a5542; --gsk-primary-2: #6b8e72; --gsk-primary-soft: #dde7dd; --gsk-accent: #a9794e; --gsk-accent-soft: #ecdfcc; --gsk-link: #4a6b54; --gsk-link-hover: #3a5542; --gsk-text: #2a2825; --gsk-heading: #211f1c; --gsk-navbar-brand: #211f1c; --gsk-shadow-sm: 0 1px 2px rgba(42, 40, 37, 0.05), 0 1px 3px rgba(42, 40, 37, 0.06); --gsk-shadow-md: 0 4px 6px -1px rgba(42, 40, 37, 0.08), 0 2px 4px -2px rgba(42, 40, 37, 0.06); --gsk-shadow-lg: 0 10px 15px -3px rgba(42, 40, 37, 0.10), 0 4px 6px -4px rgba(42, 40, 37, 0.05); --gsk-ring: rgba(74, 107, 84, 0.30); /* Декоративная подложка: мягкие шалфейные и бронзовые подсветки */ --gsk-bg-gradient: radial-gradient(1200px 600px at 85% -5%, rgba(107, 142, 114, 0.12) 0%, transparent 55%), radial-gradient(900px 500px at 0% 15%, rgba(169, 121, 78, 0.08) 0%, transparent 50%), linear-gradient(180deg, #ebe9e3 0%, #f4f3f0 30%, #f4f3f0 70%, #ebe9e3 100%); --gsk-blob-1: rgba(74, 107, 84, 0.12); --gsk-blob-2: rgba(169, 121, 78, 0.08); --gsk-blob-3: rgba(107, 142, 114, 0.10); } /* ---- Тёмная тема ---- */ [data-theme="dark"] { --bs-body-bg: #161a17; --bs-body-color: #c7c4be; --gsk-bg: #161a17; --gsk-bg-soft: #1f2421; --gsk-bg-elevated: #1f2421; --gsk-card-bg: #1f2421; --gsk-border: #2e352f; --gsk-border-strong: #3f4740; --gsk-muted: #8d8a83; --gsk-header-bg: rgba(22, 26, 23, 0.88); --gsk-footer-bg: #1f2421; --gsk-primary: #8eaa94; --gsk-primary-hover: #a4bea9; --gsk-primary-2: #7a9680; --gsk-primary-soft: rgba(142, 170, 148, 0.14); --gsk-accent: #c4a37e; --gsk-accent-soft: rgba(196, 163, 126, 0.14); --gsk-link: #8eaa94; --gsk-link-hover: #a4bea9; --gsk-text: #c7c4be; --gsk-heading: #dde0db; --gsk-navbar-brand: #dde0db; --gsk-shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.4), 0 1px 3px rgba(0, 0, 0, 0.3); --gsk-shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.5), 0 2px 4px -2px rgba(0, 0, 0, 0.4); --gsk-shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.6), 0 4px 6px -4px rgba(0, 0, 0, 0.4); --gsk-ring: rgba(142, 170, 148, 0.38); /* Декоративная подложка для тёмной темы: тёплый графит с мягкими подсветками */ --gsk-bg-gradient: radial-gradient(1200px 600px at 85% -5%, rgba(142, 170, 148, 0.10) 0%, transparent 55%), radial-gradient(900px 500px at 0% 15%, rgba(196, 163, 126, 0.06) 0%, transparent 50%), linear-gradient(180deg, #161a17 0%, #11140f 40%, #11140f 70%, #161a17 100%); --gsk-blob-1: rgba(142, 170, 148, 0.10); --gsk-blob-2: rgba(122, 150, 128, 0.08); --gsk-blob-3: rgba(164, 190, 169, 0.06); color-scheme: dark; } /* ---- Базовые правила ---- */ html { font-size: var(--gsk-font-base); scroll-behavior: smooth; } body { /* Многослойная подложка: радиальные подсветки + диагональный градиент. Карточки со сплошным фоном (--gsk-card-bg) остаются чёткими поверх. */ background-color: var(--gsk-bg); background-image: var(--gsk-bg-gradient); background-attachment: fixed; background-repeat: no-repeat; color: var(--gsk-text); font-family: var(--gsk-font); line-height: 1.65; min-height: 100vh; display: flex; flex-direction: column; transition: background-color .2s ease, color .2s ease; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; position: relative; overflow-x: hidden; } /* Aurora-блобы: крупные мягкие цветные пятна поверх градиента. position:fixed, чтобы они не прокручивались и держали композицию. */ body::before, body::after { content: ""; position: fixed; z-index: 0; border-radius: 50%; filter: blur(80px); pointer-events: none; } body::before { width: 480px; height: 480px; top: 8%; right: -120px; background: var(--gsk-blob-1); } body::after { width: 420px; height: 420px; bottom: 10%; left: -100px; background: var(--gsk-blob-2); } /* Третий блоб — через отдельный слой в main. */ main::before { content: ""; position: fixed; z-index: 0; width: 520px; height: 520px; top: 45%; left: 40%; background: var(--gsk-blob-3); border-radius: 50%; filter: blur(90px); pointer-events: none; } main { flex: 1 0 auto; position: relative; z-index: 1; } /* Контент main поверх блобов; сами блобы — на z-index:0 (fixed). */ main > * { position: relative; z-index: 1; } main { flex: 1 0 auto; } h1, h2, h3, h4, h5, h6 { color: var(--gsk-heading); letter-spacing: -0.01em; } h1 { font-weight: 800; } h2 { font-weight: 700; } a { color: var(--gsk-link); text-decoration: none; transition: color .15s ease; } a:hover { color: var(--gsk-link-hover); } .text-muted { color: var(--gsk-muted) !important; } /* ---- Размер шрифта (увеличение для аудитории старшего возраста) ---- */ body.font-size-normal { font-size: 16px; } body.font-size-large { font-size: 18px; } body.font-size-xlarge { font-size: 20px; } /* ========================================================================= Шапка ========================================================================= */ .site-header { background-color: var(--gsk-header-bg); backdrop-filter: saturate(180%) blur(12px); -webkit-backdrop-filter: saturate(180%) blur(12px); border-bottom: 1px solid var(--gsk-border); box-shadow: var(--gsk-shadow-sm); position: sticky; top: 0; z-index: 1030; } .site-header .navbar-brand, .site-header .site-name { color: var(--gsk-navbar-brand); font-weight: 700; } .site-header .nav-link { color: var(--gsk-text); font-weight: 500; padding: .5rem .9rem !important; border-radius: var(--radius-sm); transition: background-color .15s ease, color .15s ease; } .site-header .nav-link:hover, .site-header .nav-link.active { color: var(--gsk-primary); background-color: var(--gsk-primary-soft); } /* Логотип в скруглённой «таблетке» */ .brand-mark { display: inline-flex; align-items: center; justify-content: center; width: 44px; height: 44px; border-radius: var(--radius); background: linear-gradient(135deg, var(--gsk-primary), var(--gsk-primary-hover)); color: #fff; font-size: 1.3rem; flex-shrink: 0; } .brand-mark img { width: 100%; height: 100%; object-fit: contain; border-radius: var(--radius); } .brand-logo-placeholder { color: #fff; } /* Переключатель темы: показываем иконку активной темы */ .theme-toggle .theme-icon-dark { display: none; } [data-theme="dark"] .theme-toggle .theme-icon-light { display: none; } [data-theme="dark"] .theme-toggle .theme-icon-dark { display: inline-block; } /* Активная кнопка размера шрифта */ .font-size-btn.active { background-color: var(--gsk-primary); color: #fff; border-color: var(--gsk-primary); } .header-controls .btn-outline-secondary, .header-controls .btn-outline-primary { border-radius: var(--radius-sm); } /* Три кнопки размера шрифта: нарастающий размер буквы "А" */ .font-size-a-sm { font-size: .8rem; } .font-size-a-md { font-size: 1rem; } .font-size-a-lg { font-size: 1.2rem; } /* ========================================================================= Кнопки (переопределяем bootstrap) ========================================================================= */ .btn { border-radius: var(--radius-sm); font-weight: 600; transition: all .15s ease; } .btn-primary { --bs-btn-bg: var(--gsk-primary); --bs-btn-border-color: var(--gsk-primary); --bs-btn-hover-bg: var(--gsk-primary-hover); --bs-btn-hover-border-color: var(--gsk-primary-hover); --bs-btn-active-bg: var(--gsk-primary-hover); box-shadow: var(--gsk-shadow-sm); } .btn-primary:hover { transform: translateY(-1px); box-shadow: var(--gsk-shadow-md); } .btn-outline-primary { --bs-btn-color: var(--gsk-primary); --bs-btn-border-color: var(--gsk-primary); --bs-btn-hover-bg: var(--gsk-primary); --bs-btn-hover-border-color: var(--gsk-primary); --bs-btn-active-bg: var(--gsk-primary); } .btn-outline-secondary { --bs-btn-color: var(--gsk-text); } /* ========================================================================= Карточки / списки ========================================================================= */ .card { background-color: var(--gsk-card-bg); border: 1px solid var(--gsk-border); border-radius: var(--radius-lg); box-shadow: var(--gsk-shadow-sm); } .list-group { border-radius: var(--radius-lg); overflow: hidden; box-shadow: var(--gsk-shadow-sm); } .list-group-item { background-color: var(--gsk-card-bg); border-color: var(--gsk-border); color: var(--gsk-text); padding: 1rem 1.25rem; } .list-group-item-action:hover { background-color: var(--gsk-bg-soft); } .list-group-item-action:hover .fw-semibold { color: var(--gsk-primary); } /* ========================================================================= Формы ========================================================================= */ .form-control, .form-select { background-color: var(--gsk-bg-elevated); color: var(--gsk-text); border-color: var(--gsk-border-strong); border-radius: var(--radius-sm); padding: .6rem .9rem; } .form-control:focus, .form-select:focus { background-color: var(--gsk-bg-elevated); color: var(--gsk-text); border-color: var(--gsk-primary); box-shadow: 0 0 0 4px var(--gsk-ring); } .form-control::placeholder { color: var(--gsk-muted); } .form-label { font-weight: 600; color: var(--gsk-heading); } /* ========================================================================= Хлебные крошки ========================================================================= */ .breadcrumb { --bs-breadcrumb-divider-color: var(--gsk-muted); padding: 0; } .breadcrumb-item a { color: var(--gsk-link); } .breadcrumb-item.active { color: var(--gsk-muted); } /* ========================================================================= Футер ========================================================================= */ .site-footer { background-color: var(--gsk-footer-bg); border-top: 1px solid var(--gsk-border); color: var(--gsk-text); margin-top: 3rem; position: relative; z-index: 1; } .site-footer a { color: var(--gsk-link); } .site-footer a:hover { color: var(--gsk-link-hover); } .footer-title { color: var(--gsk-heading); font-weight: 700; font-size: 1rem; margin-bottom: 1rem; } /* ========================================================================= Hero на главной ========================================================================= */ .hero { background: linear-gradient(135deg, var(--gsk-primary-soft), transparent); border: 1px solid var(--gsk-border); border-radius: var(--radius-lg); padding: 2.5rem 2rem; margin-bottom: 2.5rem; box-shadow: var(--gsk-shadow-sm); } .hero h1 { font-size: clamp(1.8rem, 4vw, 2.6rem); margin-bottom: .75rem; } .hero .lead { color: var(--gsk-muted); font-size: 1.15rem; max-width: 60ch; } .section-title { display: flex; align-items: center; gap: .6rem; margin-bottom: 1.25rem; } .section-title h2 { margin: 0; font-size: 1.4rem; } .section-title .icon-bubble { display: inline-flex; align-items: center; justify-content: center; width: 38px; height: 38px; border-radius: var(--radius-sm); background: var(--gsk-primary-soft); color: var(--gsk-primary); font-size: 1.1rem; } .section-title .icon-bubble.accent { background: var(--gsk-accent-soft); color: var(--gsk-accent); } /* ========================================================================= Новостные карточки ========================================================================= */ .news-card { transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease; border-radius: var(--radius-lg); } .news-card:hover { transform: translateY(-4px); box-shadow: var(--gsk-shadow-lg); border-color: var(--gsk-border-strong); } .news-card .card-img-top { border-radius: var(--radius-lg) var(--radius-lg) 0 0; } .news-card .card-title { font-weight: 700; } .news-card .card-title a { color: var(--gsk-heading); } .news-card:hover .card-title a { color: var(--gsk-primary); } /* ========================================================================= Главная: яркий hero + акцентные элементы ========================================================================= */ /* Hero — насыщенный градиентный блок */ .hero-home { /* Фон: фото локомотива (--hero-img из шаблона) + многослойный overlay. Тёмный шалфейный градиент снизу-вверх + равномерное затемнение для читаемости белого текста. Если картинка не загрузится — fallback на шалфейный градиент (последний слой). */ background: linear-gradient(90deg, rgba(20, 32, 24, 0.92) 0%, rgba(47, 74, 55, 0.78) 45%, rgba(47, 74, 55, 0.35) 100%), var(--hero-img, none), linear-gradient(135deg, #2f4a37 0%, var(--gsk-primary) 55%, #5b8364 100%); background-size: cover, cover, cover; background-position: center, center right, center; background-repeat: no-repeat; border-radius: var(--radius-lg); padding: 3.5rem 2.5rem; margin-bottom: 2.5rem; color: #fff; box-shadow: var(--gsk-shadow-lg), inset 0 1px 0 rgba(255, 255, 255, 0.18); position: relative; overflow: hidden; min-height: 320px; display: flex; align-items: center; } /* Тёплый бронзовый акцент в углу hero (поверх overlay, под текстом) */ .hero-home::after { content: ""; position: absolute; right: -60px; top: -60px; width: 240px; height: 240px; background: radial-gradient(circle, rgba(196, 163, 126, 0.40) 0%, transparent 70%); border-radius: 50%; pointer-events: none; z-index: 0; } .hero-home__inner { position: relative; z-index: 1; max-width: 64ch; } /* Атрибуция фото (CC BY-SA 4.0) — маленькая, в углу */ .hero-home__credit { position: absolute; right: 10px; bottom: 8px; z-index: 1; font-size: .68rem; color: rgba(255, 255, 255, 0.55); text-decoration: none; transition: color .15s ease; } .hero-home__credit:hover { color: rgba(255, 255, 255, 0.85); } .hero-home__badge { display: inline-flex; align-items: center; gap: .4rem; background: rgba(255, 255, 255, 0.18); border: 1px solid rgba(255, 255, 255, 0.25); color: #fff; font-size: .85rem; font-weight: 600; padding: .35rem .85rem; border-radius: var(--radius-pill); margin-bottom: 1rem; backdrop-filter: blur(4px); } .hero-home h1 { color: #fff; font-size: clamp(2rem, 4.5vw, 3rem); font-weight: 800; margin-bottom: .75rem; text-shadow: 0 2px 8px rgba(0, 0, 0, 0.15); } .hero-home__lead { color: rgba(255, 255, 255, 0.92); font-size: 1.15rem; margin-bottom: 1.75rem; max-width: 58ch; } .hero-home__actions { display: flex; flex-wrap: wrap; gap: .75rem; } .hero-home__actions .btn { font-weight: 700; padding: .7rem 1.5rem; } .hero-home__actions .btn-light { color: var(--gsk-primary); } .hero-home__actions .btn-light:hover { background: #fff; transform: translateY(-2px); box-shadow: var(--gsk-shadow-md); } .hero-home__actions .btn-outline-light { border-color: rgba(255, 255, 255, 0.6); color: #fff; } .hero-home__actions .btn-outline-light:hover { background: rgba(255, 255, 255, 0.15); border-color: #fff; } /* Важные объявления — акцентные карточки */ .important-card { border-left: 4px solid var(--gsk-accent) !important; border-radius: var(--radius); transition: transform .18s ease, box-shadow .18s ease; } .important-card:hover { transform: translateY(-3px); box-shadow: var(--gsk-shadow-md); } .important-card__icon { display: inline-flex; align-items: center; justify-content: center; width: 44px; height: 44px; flex-shrink: 0; border-radius: var(--radius-sm); background: var(--gsk-accent-soft); color: var(--gsk-accent); font-size: 1.2rem; } .important-card__title { color: var(--gsk-heading); } .important-card:hover .important-card__title { color: var(--gsk-accent); } /* Карточки новостей: цветная плашка-баннер без обложки */ .news-card__banner { display: flex; align-items: center; justify-content: center; height: 130px; background: linear-gradient(135deg, #2f4a37 0%, var(--gsk-primary) 60%, #5b8364 100%); color: rgba(255, 255, 255, 0.9); font-size: 2.5rem; border-radius: var(--radius-lg) var(--radius-lg) 0 0; } /* Метаданные и теги в карточке новости */ .news-card__meta { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem .9rem; padding-top: .75rem; border-top: 1px solid var(--gsk-border); color: var(--gsk-muted); font-size: .82rem; } .news-card__tags { display: inline-flex; flex-wrap: wrap; gap: .35rem; } .news-card__tag { display: inline-flex; align-items: center; gap: .25rem; background: var(--gsk-primary-soft); color: var(--gsk-primary); font-size: .75rem; font-weight: 600; padding: .2rem .6rem; border-radius: var(--radius-pill); } .news-card__tag--accent { background: var(--gsk-accent-soft); color: var(--gsk-accent); margin-bottom: .5rem; } /* Теги как pill-бейджи */ .badge { font-weight: 600; border-radius: var(--radius-pill); padding: .4em .8em; } .badge.bg-secondary { background-color: var(--gsk-bg-soft) !important; color: var(--gsk-muted); border: 1px solid var(--gsk-border); } .badge.bg-warning { background-color: var(--gsk-accent-soft) !important; color: var(--gsk-accent); } /* ========================================================================= HTML-контент (из CKEditor) / markdown-body ========================================================================= */ .markdown-body { line-height: 1.7; color: var(--gsk-text); } .markdown-body h1, .markdown-body h2, .markdown-body h3 { color: var(--gsk-heading); margin-top: 1.5em; } .markdown-body img { max-width: 100%; height: auto; border-radius: var(--radius); } .markdown-body table { display: block; overflow-x: auto; border-collapse: collapse; margin: 1.25rem 0; border-radius: var(--radius-sm); } .markdown-body th, .markdown-body td { border: 1px solid var(--gsk-border); padding: .65rem .9rem; } .markdown-body th { background-color: var(--gsk-bg-soft); font-weight: 700; } .markdown-body pre { background-color: var(--gsk-bg-soft); padding: 1rem 1.25rem; border-radius: var(--radius); overflow-x: auto; border: 1px solid var(--gsk-border); } .markdown-body code { background-color: var(--gsk-bg-soft); padding: .15rem .4rem; border-radius: 6px; font-size: .9em; } .markdown-body blockquote { border-left: 4px solid var(--gsk-primary); padding: .5rem 1.25rem; color: var(--gsk-muted); margin: 1.25rem 0; background: var(--gsk-bg-soft); border-radius: 0 var(--radius-sm) var(--radius-sm) 0; } /* ========================================================================= Алерты / пагинация ========================================================================= */ .alert { border-radius: var(--radius); border: 1px solid var(--gsk-border); } .alert-info { background-color: var(--gsk-primary-soft); color: var(--gsk-primary); border-color: transparent; } .page-link { background-color: var(--gsk-bg-elevated); color: var(--gsk-link); border-color: var(--gsk-border); border-radius: var(--radius-sm) !important; margin: 0 .15rem; padding: .5rem .9rem; } .page-link:hover { background-color: var(--gsk-bg-soft); color: var(--gsk-link-hover); } .page-item.active .page-link { background-color: var(--gsk-primary); border-color: var(--gsk-primary); } /* ========================================================================= Адаптивность ========================================================================= */ @media (max-width: 575.98px) { body.font-size-large { font-size: 17px; } body.font-size-xlarge { font-size: 18px; } .header-controls { gap: .25rem !important; } .header-controls .btn { padding: .25rem .5rem; } .hero { padding: 1.75rem 1.25rem; } } /* ========================================================================= Доступность (WCAG) ========================================================================= */ a:focus-visible, button:focus-visible, input:focus-visible, select:focus-visible, textarea:focus-visible { outline: 3px solid var(--gsk-primary); outline-offset: 2px; border-radius: var(--radius-sm); } /* Уважаем предпочтение по уменьшению анимаций */ @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: .01ms !important; transition-duration: .01ms !important; } .news-card:hover, .btn-primary:hover { transform: none; } }