/* === Google Fonts — підключається через wp_head (preconnect + preload в enqueue.php) === */ /* @import видалено — блокував рендер сторінки */ /* === CSS Variables === */ :root { /* Кольори — фінальні значення будуть оновлені після затвердження дизайну Figma */ --color-bg: #F5F5F5; --color-accent: #000000; --color-accent-hover: #333333; --color-text: #1A1A1A; --color-text-secondary: #6B6B6B; --color-white: #FFFFFF; --color-dark: #1A1A1A; --color-border: rgba(0, 0, 0, 0.1); /* Шрифт */ --font-primary: 'Open Sans', sans-serif; /* Сітка */ --container-max: 1920px; --container-padding: 40px; --container-padding-tablet: 24px; --container-padding-mobile: 16px; /* Шапка: top bar (100px) + menu bar (50px) = 150px */ --header-height: 150px; --header-height-tablet: 124px; /* top bar 80px + menu bar 44px */ --header-height-mobile: 64px; /* тільки top bar, menu bar прихований */ } /* === Reset === */ *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; } html { -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } body { font-family: var(--font-primary); font-weight: 400; font-size: 16px; line-height: 1.5; color: var(--color-text); background-color: var(--color-bg); } a { text-decoration: none; color: inherit; } ul, ol { list-style: none; } img, svg { display: block; max-width: 100%; height: auto; } button { font-family: inherit; cursor: pointer; border: none; background: none; } input, textarea, select { font-family: inherit; } /* === Глобальні WooCommerce-стилі === */ .woocommerce-notices-wrapper { width: 100%; } /* === Відступ під фіксованою шапкою === */ /* * Застосовуємо padding-top до body — єдиний спосіб покрити всі типи сторінок: * звичайні (page.php), WooCommerce (woocommerce.php), ShopBuilder та Elementor Theme Builder * (рендеруються повз PHP-шаблони, тому .creamaman-main там немає). * * --creamaman-header-height: встановлюється JS (header-menu.js) за реальною висотою шапки. * Fallback на --header-height спрацьовує до завантаження JS (перші мілісекунди). * Якщо на сторінці шапки немає — додай клас .no-header до . */ body:not(.no-header) { padding-top: var(--creamaman-header-height, var(--header-height)) !important; } /* WordPress admin bar зміщує fixed елементи вниз */ .admin-bar .creamaman-global-header { top: 32px; } .admin-bar body:not(.no-header) { padding-top: calc(var(--creamaman-header-height, var(--header-height)) + 32px); } @media (max-width: 1200px) { body:not(.no-header) { padding-top: var(--creamaman-header-height, var(--header-height-tablet)); } .admin-bar body:not(.no-header) { padding-top: calc(var(--creamaman-header-height, var(--header-height-tablet)) + 32px); } } @media (max-width: 768px) { body:not(.no-header) { padding-top: var(--creamaman-header-height, var(--header-height-mobile)); } .admin-bar body:not(.no-header) { padding-top: calc(var(--creamaman-header-height, var(--header-height-mobile)) + 46px); } }