/* ========================================================================== casino_v1 — component CSS on top of Bootstrap 5. Every visual value comes from Theme CSS variables (see :root in ). No site-specific or brand colors are allowed in this file. ========================================================================== */ /* --------------------------------------------------------------- 1. Reset / Base */ *, *::before, *::after { box-sizing: border-box; } html { scroll-behavior: smooth; } /* clip (not hidden) keeps position:sticky working on the header */ body { overflow-x: clip; } [data-theme-mode="dark"] { color-scheme: dark; } [data-theme-mode="light"] { color-scheme: light; } /* Theme values drive Bootstrap's own custom properties. */ :root { --bs-body-bg: var(--body-bg, #ffffff); --bs-body-color: var(--text-color, #1f2937); --bs-body-font-family: var(--body-font-family, system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif); --bs-body-font-size: var(--body-font-size, 16px); --bs-body-font-weight: var(--body-weight, 400); --bs-body-line-height: var(--body-line-height, 1.6); --bs-heading-color: var(--heading-color, #0f172a); --bs-secondary-color: var(--muted-text-color, #6b7280); --bs-border-color: var(--border-color, #e5e7eb); --bs-border-radius: var(--global-radius, 14px); --bs-emphasis-color: var(--heading-color, #0f172a); } body { background-color: var(--body-bg, #ffffff); color: var(--text-color, #1f2937); } img { max-width: 100%; height: auto; } hr { border-color: var(--divider-color, #e5e7eb); opacity: 1; } :focus-visible { outline: 2px solid var(--accent-color, #2563eb); outline-offset: 2px; } @media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } *, *::before, *::after { transition-duration: 0.01ms !important; animation-duration: 0.01ms !important; } } /* --------------------------------------------------------------- 2. Typography */ body { font-family: var(--body-font-family, system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif); font-size: var(--body-font-size, 16px); font-weight: var(--body-weight, 400); line-height: var(--body-line-height, 1.6); } h1, h2, h3, h4, h5, h6 { font-family: var(--heading-font-family, inherit); font-weight: var(--heading-weight, 700); color: var(--heading-color, #0f172a); } /* clamp() keeps long headings from overflowing narrow viewports */ h1 { font-size: clamp(28px, 6vw, var(--h1-size, 44px)); line-height: 1.15; } h2 { font-size: clamp(23px, 4.4vw, var(--h2-size, 32px)); line-height: 1.2; } h3 { font-size: clamp(19px, 3.4vw, var(--h3-size, 24px)); line-height: 1.3; } a { color: var(--link-color, #2563eb); text-decoration: none; transition: color var(--transition-speed, 180ms) ease; } a:hover, a:focus-visible { color: var(--link-hover-color, #1d4ed8); text-decoration: underline; } .text-muted-theme { color: var(--muted-text-color, #6b7280); } /* --------------------------------------------------------------- 3. Layout */ @media (min-width: 1200px) { .container { max-width: var(--container-width, 1200px); } } .section { padding-block: var(--section-spacing, 72px); } @media (max-width: 767.98px) { .section { padding-block: calc(var(--section-spacing, 72px) * 0.6); } } /* --------------------------------------------------------------- 4. Header */ .site-header { position: sticky; top: 0; z-index: 1030; background-color: var(--header-bg, #ffffff); color: var(--header-text, #0f172a); border-bottom: 1px solid var(--header-border, transparent); backdrop-filter: blur(var(--backdrop-blur, 0px)); transition: box-shadow var(--transition-speed, 180ms) ease; } .site-header.is-scrolled { box-shadow: var(--header-shadow, 0 6px 20px rgba(0, 0, 0, 0.08)); } .site-navbar { min-height: var(--header-height, 72px); padding-block: 0.5rem; flex-wrap: wrap; } .site-logo { display: inline-flex; align-items: center; padding: 0; color: var(--header-text, #0f172a); } .site-logo:hover, .site-logo:focus-visible { color: var(--header-text, #0f172a); text-decoration: none; } .site-logo-image { display: block; width: auto; max-height: calc(var(--header-height, 72px) - 28px); } /* Заглушка на биту картинку логотипа. Файли теки бренду заливає власник руками під кожен сайт, тому маніфесту в них немає і білд попередити не може. Механізм .is-missing уже покривав усе, що йде з шорткодів, але лого хедера й футера — розмітка шаблону, і в список воно не потрапило: при 404 браузер малював іконку битої картинки на КОЖНІЙ сторінці сайту, у двох найпомітніших місцях. Тепер поруч із лежить назва сайту текстом, і клас .is-missing просто перемикає на неї — так само, як ініціали в game_card. */ .site-logo-text--fallback { display: none; } .site-logo.is-missing .site-logo-image { display: none; } .site-logo.is-missing .site-logo-text--fallback { display: block; } .site-logo-text { font-family: var(--heading-font-family, inherit); font-weight: var(--heading-weight, 700); font-size: 1.25rem; line-height: 1.2; } .site-nav-toggler { border-color: var(--header-border, transparent); border-radius: var(--global-radius, 14px); padding: 0.5rem 0.65rem; } .site-nav-toggler:focus { box-shadow: none; } /* Recolor Bootstrap's toggler icon from the theme instead of shipping separate light/dark navbar variants. */ .site-nav-toggler .navbar-toggler-icon { background-image: none; background-color: var(--header-link, #0f172a); -webkit-mask: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3e%3cpath stroke='%23000' stroke-linecap='round' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e") center / 100% 100% no-repeat; mask: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3e%3cpath stroke='%23000' stroke-linecap='round' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e") center / 100% 100% no-repeat; } /* Партнерська кнопка в хедері. Кольори беруться з тих самих змінних, що й кнопки в контенті, тому генератор теми накриває її разом з усім іншим — окремих стовпців у Themes під неї не треба. У розмітці вона стоїть перед бургером, щоб на мобільному лишитись у верхньому рядку. На десктопі порядок правиться через order: сама розмітка мобільна, бо саме там перестановка коштувала б зайвого рядка. */ .header-cta { display: inline-flex; align-items: center; justify-content: center; padding: 0.55rem 1.15rem; border: var(--button-border, 1px solid transparent); border-radius: var(--button-radius, 12px); background-color: var(--button-bg, #2563eb); color: var(--button-text, #ffffff); font-family: var(--heading-font-family, inherit); font-size: 0.95rem; font-weight: 700; line-height: 1.2; text-decoration: none; white-space: nowrap; transition: background-color var(--transition-speed, 180ms) ease, color var(--transition-speed, 180ms) ease; } .header-cta:hover, .header-cta:focus-visible { background-color: var(--button-hover-bg, #1d4ed8); color: var(--button-hover-text, #ffffff); text-decoration: none; } @media (min-width: 992px) { .site-navbar > .navbar-collapse { order: 2; } .header-cta { order: 3; margin-left: 0.75rem; } } @media (max-width: 991.98px) { /* Логотип ліворуч, кнопка притиснута до бургера праворуч. */ .header-cta { margin-left: auto; margin-right: 0.5rem; padding-inline: 0.85rem; } } /* --------------------------------------------------------------- 5. Navigation */ .header-nav { width: 100%; } .header-nav ul { list-style: none; margin: 0; padding: 0; display: flex; gap: 0.15rem; } @media (min-width: 992px) { .header-nav ul { margin-left: auto; flex-direction: row; align-items: center; } } @media (max-width: 991.98px) { .header-nav ul { flex-direction: column; align-items: stretch; } .navbar-collapse { margin-top: 0.5rem; padding-block: 0.5rem 0.75rem; border-top: 1px solid var(--header-border, transparent); } } .header-nav a { display: block; padding: 0.55rem 0.85rem; border-radius: var(--global-radius, 14px); color: var(--header-link, #0f172a); font-weight: 600; text-decoration: none; transition: color var(--transition-speed, 180ms) ease, background-color var(--transition-speed, 180ms) ease; } .header-nav a:hover, .header-nav a:focus-visible { color: var(--header-link-hover, #000000); background-color: color-mix(in srgb, var(--accent-color, #2563eb) 14%, transparent); text-decoration: none; } .header-nav a[aria-current="page"] { color: var(--header-link-hover, #000000); background-color: color-mix(in srgb, var(--accent-color, #2563eb) 20%, transparent); } /* --------------------------------------------------------------- 6. Breadcrumbs */ .breadcrumbs { margin-bottom: 1rem; font-size: 0.9rem; color: var(--muted-text-color, #6b7280); } .breadcrumbs ol { list-style: none; display: flex; flex-wrap: wrap; gap: 0.35rem 0.5rem; margin: 0; padding: 0; } .breadcrumbs li + li::before { content: "/"; margin-right: 0.5rem; color: var(--divider-color, #cbd5e1); } /* Той самий 2.5.8, що й у меню підвалу: рядок у 0.9rem дає 16px заввишки, а це навігаційне посилання, не посилання всередині абзацу. */ .breadcrumbs a { color: inherit; display: inline-block; padding-block: 0.25rem; min-height: 24px; } .breadcrumbs a:hover { color: var(--link-hover-color, #1d4ed8); } /* ------------------------------------------------- 7. Заголовок сторінки */ /* Hero більше не секція шаблону: заголовок, плашки, кнопки й банер збираються шорткодами в контенті ([badges], [cta_row], [banner]). Тут лишається сам H1 і breadcrumbs, вирівняні по тій самій колонці, що й контент. */ .page-heading .breadcrumbs, .page-heading .page-title { max-width: var(--content-max-width, 840px); margin-inline: auto; } .page-heading .page-title { margin-bottom: 0; } /* --------------------------------------------------------------- 8. Buttons */ .btn-primary { --bs-btn-bg: var(--button-bg, #2563eb); --bs-btn-color: var(--button-text, #ffffff); --bs-btn-hover-bg: var(--button-hover-bg, #1d4ed8); --bs-btn-hover-color: var(--button-hover-text, #ffffff); --bs-btn-active-bg: var(--button-hover-bg, #1d4ed8); --bs-btn-active-color: var(--button-hover-text, #ffffff); --bs-btn-disabled-bg: var(--button-bg, #2563eb); --bs-btn-disabled-color: var(--button-text, #ffffff); --bs-btn-border-color: transparent; --bs-btn-hover-border-color: transparent; --bs-btn-active-border-color: transparent; --bs-btn-border-radius: var(--button-radius, 12px); border: var(--button-border, 1px solid transparent); box-shadow: var(--button-shadow, none); font-weight: 600; padding: 0.85rem 1.75rem; transition: background-color var(--transition-speed, 180ms) ease, transform var(--transition-speed, 180ms) ease; } .btn-primary:hover { transform: translateY(-1px); } /* --------------------------------------------------------- 9. Контент сторінки */ /* Одна колонка контенту на сторінку: сюди потрапляє все, що редактор або генератор поклали в стовпець Content Block, разом із шорткодами. */ /* Колонка контенту ширша за колонку прози: раніше тут жив тільки SEO-текст, тепер — ще й сітки слотів і логотипів, банер і порівняльна таблиця. Шість карток у 840px дають 140px на картку, у старій секції слотів було 200px. Тому широка колонка для блоків, а сама проза лишається вузькою нижче. */ .content-body { max-width: none; padding: clamp(20px, 3vw, 40px); background-color: var(--content-bg, transparent); border: 1px solid var(--border-color, transparent); border-radius: var(--global-radius, 14px); box-shadow: var(--global-shadow, none); } .content-body > :first-child { margin-top: 0; } .content-body > :last-child { margin-bottom: 0; } .content-body h2, .content-body h3 { margin-top: 1.6em; margin-bottom: 0.6em; } /* Рядок на всю ширину контейнера читати незручно, тому текстові діти лишаються у вузькій колонці. Блоки шорткодів під це правило не підпадають і використовують усю ширину. */ .content-body > h2, .content-body > h3, .content-body > p, .content-body > ul, .content-body > ol { max-width: var(--content-max-width, 840px); } .content-body p, .content-body ul, .content-body ol { margin-bottom: 1.1em; } .content-body li { margin-bottom: 0.4em; } /* --------------------------------------------------------------- 10. Footer */ .site-footer { background-color: var(--footer-bg, #0f172a); color: var(--footer-text, #e5e7eb); border-top: 1px solid var(--footer-border, transparent); padding-block: calc(var(--section-spacing, 72px) * 0.75) 1.5rem; } .site-footer a { color: var(--footer-link, #d1d5db); } .site-footer a:hover, .site-footer a:focus-visible { color: var(--footer-link-hover, #ffffff); } .footer-top { --bs-gutter-y: 2rem; } .footer-logo { display: block; width: auto; max-height: 44px; margin-bottom: 1rem; } .footer-logo-wrap { display: block; } .footer-logo-text { display: none; font-family: var(--heading-font-family, inherit); font-weight: var(--heading-weight, 700); font-size: 1.25rem; line-height: 1.2; color: var(--footer-text, #e5e7eb); margin-bottom: 1rem; } .footer-logo-wrap.is-missing .footer-logo { display: none; } .footer-logo-wrap.is-missing .footer-logo-text { display: block; } .footer-brand-text { color: var(--footer-muted, #9ca3af); font-size: 0.95rem; max-width: 40ch; } .footer-contact-email { display: inline-block; margin-top: 0.75rem; word-break: break-word; } .footer-menu-title { /* Це span, а не h2: підвал повторюється на кожній сторінці, і три h2 в ньому конкурували б із заголовками контенту. span інлайновий, тому display потрібен явно — без нього margin-bottom нижче не спрацює. */ display: block; font-family: var(--heading-font-family, inherit); font-size: 1rem; font-weight: var(--heading-weight, 700); color: var(--footer-text, #e5e7eb); margin-bottom: 0.9rem; } .footer-nav ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 0.5rem; } /* WCAG 2.2 AA, 2.5.8 Target Size: інтерактивна ціль — не менш ніж 24×24. Рядок тексту в 17px цього не дає, а виняток для посилань усередині абзацу тут не діє: це навігація. Падінг замість висоти — щоб не ламати gap. */ .footer-nav a { display: inline-block; padding-block: 0.2rem; min-height: 24px; } /* Знаки в підвалі: список зі стовпця Site Settings → Footer Marks, який рендериться тим самим [logo_grid type="trust"]. Тому тут лише притишення під темний футер — саму сітку описує sc-shortcodes.css. */ .footer-marks { margin-top: 1.5rem; } .footer-marks .sc-logos { margin: 0; } .footer-marks .sc-logos__frame { background: transparent; border-color: var(--footer-border, rgba(255, 255, 255, 0.14)); min-height: 2.8rem; padding: .4rem .6rem; } .footer-marks .sc-logos__fallback { color: var(--footer-muted, #9ca3af); } .footer-legal { margin-top: 2.5rem; padding-top: 1.25rem; border-top: 1px solid var(--footer-border, transparent); color: var(--footer-muted, #9ca3af); font-size: 0.9rem; } .footer-legal p { margin: 0; } /* --------------------------------------------------------------- 11. Forms */ .form-control, .form-select { background-color: var(--input-bg, #ffffff); color: var(--input-text, #111827); border: 1px solid var(--input-border, #cbd5e1); border-radius: var(--input-radius, 10px); } .form-control:focus, .form-select:focus { background-color: var(--input-bg, #ffffff); color: var(--input-text, #111827); border-color: var(--input-focus-border, var(--accent-color, #2563eb)); box-shadow: 0 0 0 0.2rem color-mix(in srgb, var(--input-focus-border, var(--accent-color, #2563eb)) 25%, transparent); } .form-control::placeholder { color: var(--muted-text-color, #6b7280); }