/* Theme Name: Lanka-KSO Theme URI: https://khersonline.net Author: Khersonline Description: Тема новинного порталу Lanka-KSO. Version: 1.0.0 Requires at least: 6.4 Tested up to: 6.7 Requires PHP: 8.0 Text Domain: lanka-kso License: GNU General Public License v2 or later License URI: http://www.gnu.org/licenses/gpl-2.0.html */ /* ========================================================================== 1. Custom Properties ========================================================================== */ :root { --shell: 1320px; --gap: 10px; --gap-lg: 14px; --b: none; --hairline: 1px solid rgba(0, 0, 0, 0.1); --block-shadow: 0 2px 14px rgba(0, 0, 0, 0.08); --bg: #fff; --font: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif; --header-bg: linear-gradient(135deg, #c0392b 0%, #7b0000 100%); --header-h: 58px; /* висота header — використовується в sticky offset */ /* Зсув sticky-банера, коли під header є смуга NAV BAR (desktop) */ --nav-bar-sticky-offset: 40px; --header-color: #fff; /* Посилання в контенті (не хедер / не кнопки-іконки) */ --link: #a93226; --link-hover: #c0392b; --link-visited: #7b241c; --block-bg: rgba(255, 255, 255, 0.93); --label-fs: 10px; --label-fw: 800; /* Dark mode overrides (застосовуються через .lanka-kso-dark на ) */ --dark-bg: #121212; --dark-surface: #1e1e1e; --dark-border: #333; --dark-text: #e0e0e0; --dark-muted: #a8a8a8; --wp-admin-bar: 0px; } body.admin-bar { --wp-admin-bar: 32px; } @media screen and (max-width: 782px) { body.admin-bar { --wp-admin-bar: 46px; } } /* ========================================================================== 2. Reset / Base ========================================================================== */ *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; } html, body { height: 100%; } body { font-family: var(--font); background: var(--bg); color: #000; line-height: 1.4; padding-top: var(--header-h); } img { max-width: 100%; height: auto; display: block; } /* ========================================================================== 2a. Посилання — уніфіковано по сайту (винятки нижче) ========================================================================== */ a { color: var(--link); text-decoration: underline; text-decoration-color: rgba(169, 50, 38, 0.45); text-decoration-thickness: 1px; text-underline-offset: 3px; transition: color 0.15s ease, text-decoration-color 0.15s ease; } a:hover, a:focus-visible { color: var(--link-hover); text-decoration-color: var(--link-hover); } a:visited { color: var(--link-visited); } /* Хедер, другорядне меню, мобільний дровер — світла/контрастна палітра, без «контентного» підкреслення. */ .site-header a:not(.social-link), .site-header a:not(.social-link):visited { color: inherit; text-decoration: none; } .site-header a:not(.social-link):hover, .site-header a:not(.social-link):focus-visible { color: var(--header-color); text-decoration: none; opacity: 0.95; } .header-logo__link, .header-logo__link:visited, .header-nav__list a, .header-nav__list a:visited, .header-nav__list li ul li a, .header-nav__list li ul li a:visited { color: inherit; text-decoration: none; } #mobile-menu a, #mobile-menu a:visited { color: #111; text-decoration: none; } #mobile-menu a:hover, #mobile-menu a:focus-visible { color: var(--link-hover); text-decoration: underline; text-decoration-color: var(--link-hover); } .lanka-kso-dark #mobile-menu a, .lanka-kso-dark #mobile-menu a:visited { color: var(--dark-text); } .lanka-kso-dark #mobile-menu a:hover, .lanka-kso-dark #mobile-menu a:focus-visible { color: var(--link-hover); } /* Картки-превʼю: посилання на всю площу без глобального підкреслення */ .hero-card__link, .hero-card__link:visited, .search-item__link, .search-item__link:visited, .lcol-item__link, .lcol-item__link:visited { text-decoration: none; } /* Пагінація-клітинки */ a.page-numbers { text-decoration: none; } a.page-numbers:hover, a.page-numbers:focus-visible { text-decoration: none; } /* Навігація «Попередня / Наступна» лише з підкресленням заголовка */ .post-navigation a, .post-navigation a:visited { text-decoration: none; } .post-navigation a .nav-title { text-decoration: underline; text-decoration-color: rgba(169, 50, 38, 0.45); text-decoration-thickness: 1px; text-underline-offset: 3px; transition: text-decoration-color 0.15s ease; } .post-navigation a:hover .nav-title, .post-navigation a:focus-visible .nav-title { text-decoration-color: var(--link-hover); } /* ========================================================================== 3. Shell ========================================================================== */ .shell { max-width: var(--shell); margin: 0 auto; padding: 0 16px; } /* ========================================================================== 4. Wireframe Block ========================================================================== */ .block { border: none; position: relative; min-height: 48px; background: #fff; box-shadow: var(--block-shadow); } /* Wireframe-мітки (data-label) вимкнено */ .block::before { display: none !important; content: none; } /* ========================================================================== 5. HEADER — fixed ========================================================================== */ .site-header { position: fixed; top: var(--wp-admin-bar); left: 0; right: 0; width: 100%; z-index: 300; background: var(--header-bg); color: var(--header-color); } .site-header .shell { padding-top: 0; padding-bottom: 0; } /* Desktop: [LOGO] [NAV] [END = tools + hamburger] */ .header-grid { display: grid; grid-template-areas: "logo nav end"; /* minmax(0, 1fr) дає змогу стискати колонку меню; інакше 1fr має min = ширина всіх пунктів і вони заїжджають під header-end. */ grid-template-columns: auto minmax(0, 1fr) auto; column-gap: 10px; align-items: center; min-height: var(--header-h); } .header-grid > * { min-width: 0; } .header-logo { grid-area: logo; min-width: min-content; justify-self: start; } .header-end { grid-area: end; display: flex; align-items: center; flex: 0 0 auto; flex-shrink: 0; gap: 0; justify-self: end; min-width: max-content; white-space: nowrap; position: relative; z-index: 2; } .header-hamburger { display: none; } /* ========================================================================== 5a. LOGO ========================================================================== */ .header-logo__link { display: flex; align-items: center; text-decoration: none; padding: 6px 12px 6px 0; color: #fff; } .header-logo__img { display: block; max-height: var(--header-h); width: auto; object-fit: contain; } .header-logo__text { font-size: 20px; font-weight: 900; letter-spacing: -0.02em; line-height: 1; color: #fff; text-transform: uppercase; white-space: nowrap; } /* ========================================================================== 5b. HEADER NAV — горизонтальне меню (inline, без wireframe-рамки) ========================================================================== */ .header-nav { grid-area: nav; position: relative; z-index: 1; display: flex; align-items: center; height: 100%; min-width: 0; max-width: 100%; overflow: hidden; } /* WordPress генерує