/* Theme Name: Flavor Core Theme URI: Description: Uniwersalny FSE block theme dla sieci portali informacyjnych. Metro kafelki z gradientami per kategoria, dark/light mode, sloty reklamowe z CLS=0. Version: 4.0.6 Requires at least: 6.4 Tested up to: 6.7 Requires PHP: 8.0 Author: S Text Domain: flavor-core Tags: full-site-editing, block-patterns, news, portal License: Proprietary */ /* ========================================================================== 0. Self-hosted Fonts (RODO-safe, zero external requests) ========================================================================== */ @font-face { font-family: 'Roboto Mono'; src: url('./assets/fonts/RobotoMono-Regular.woff') format('woff'); font-weight: 400; font-style: normal; font-display: swap; } @font-face { font-family: 'Roboto Mono'; src: url('./assets/fonts/RobotoMono-Bold.woff') format('woff'); font-weight: 700; font-style: normal; font-display: swap; } @font-face { font-family: 'Montserrat'; src: url('./assets/fonts/Montserrat-Regular.woff') format('woff'); font-weight: 400; font-style: normal; font-display: swap; } @font-face { font-family: 'Montserrat'; src: url('./assets/fonts/Montserrat-Medium.woff') format('woff'); font-weight: 500; font-style: normal; font-display: swap; } @font-face { font-family: 'Montserrat'; src: url('./assets/fonts/Montserrat-Bold.woff') format('woff'); font-weight: 700; font-style: normal; font-display: swap; } /* ========================================================================== 1. CSS Custom Properties ========================================================================== */ :root { /* Brand — set dynamically from settings panel via fc_dynamic_font_css() */ --fc-brand-primary: #1a1a2e; /* --fc-brand-accent set in by PHP */ /* Typography */ --fc-font-heading: 'Roboto Mono', ui-monospace, 'Cascadia Code', monospace; --fc-font-body: 'Montserrat', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif; --fc-font-mono: 'Roboto Mono', ui-monospace, monospace; /* Light mode (default) */ --fc-bg: #ffffff; --fc-bg-alt: #ffffff; --fc-text: #1a1a1a; --fc-text-secondary: #555555; --fc-text-muted: #888888; --fc-border: #e0e0e0; --fc-card-shadow: 0 1px 3px rgba(0, 0, 0, 0.08); /* Tile text — light mode */ --fc-tile-text: #1a1a1a; --fc-tile-meta: #555555; --fc-tile-cat: #333333; /* Ad slots */ --fc-ad-bg: rgba(0, 0, 0, 0.03); --fc-ad-border: #e0e0e0; --fc-ad-text: #cccccc; /* Label colors */ --fc-label-pilne: #dc2626; --fc-label-spon: #7c3aed; --fc-label-ekskl: #d97706; --fc-label-custom: #6b7280; /* Spacing & shape */ --fc-gap: 12px; --fc-radius: 8px; --fc-content-width: 1200px; --fc-article-width: 740px; /* Toggle button */ --fc-toggle-bg: #e0e0e0; --fc-toggle-icon: "☀️"; } /* ========================================================================== 2. Dark Mode — auto (prefers-color-scheme) ========================================================================== */ @media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) { --fc-bg: #1a1a1a; --fc-bg-alt: #1a1a1a; --fc-text: #e8e8e8; --fc-text-secondary: #b0b0b0; --fc-text-muted: #666666; --fc-border: #333333; --fc-card-shadow: 0 1px 3px rgba(0, 0, 0, 0.4); --fc-tile-text: #f0f0f0; --fc-tile-meta: #b0b0b0; --fc-tile-cat: #d0d0d0; --fc-ad-bg: rgba(255, 255, 255, 0.03); --fc-ad-border: #333333; --fc-ad-text: #444444; --fc-toggle-bg: #333333; --fc-toggle-icon: "🌙"; } /* Dark tiles use gradient */ :root:not([data-theme="light"]) .fc-tile { background: linear-gradient(135deg, var(--fc-tile-grad-start, #333), var(--fc-tile-grad-end, #1a1a1a)); } } /* ========================================================================== 3. Dark Mode — manual override [data-theme="dark"] ========================================================================== */ [data-theme="dark"] { --fc-bg: #1a1a1a; --fc-bg-alt: #1a1a1a; --fc-text: #e8e8e8; --fc-text-secondary: #b0b0b0; --fc-text-muted: #666666; --fc-border: #333333; --fc-card-shadow: 0 1px 3px rgba(0, 0, 0, 0.4); --fc-tile-text: #f0f0f0; --fc-tile-meta: #b0b0b0; --fc-tile-cat: #d0d0d0; --fc-ad-bg: rgba(255, 255, 255, 0.03); --fc-ad-border: #333333; --fc-ad-text: #444444; --fc-toggle-bg: #333333; --fc-toggle-icon: "🌙"; } [data-theme="dark"] .fc-tile { background: linear-gradient(135deg, var(--fc-tile-grad-start, #333), var(--fc-tile-grad-end, #1a1a1a)); } /* ========================================================================== 4. Base / Reset ========================================================================== */ *, *::before, *::after { box-sizing: border-box; } body { background-color: var(--fc-bg); color: var(--fc-text); font-family: var(--fc-font-body); line-height: 1.6; margin: 0; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } /* Let WP blocks inherit body background naturally */ a { color: inherit; text-decoration: none; } a:hover { color: var(--fc-brand-accent); } img { max-width: 100%; height: auto; } /* ========================================================================== 5. Header (PHP-rendered, no WP blocks) ========================================================================== */ .fc-header { position: sticky; top: 0; z-index: 1000; background: var(--fc-bg); width: 100%; } /* Ensure nav overlay positions relative to header */ @media (max-width: 768px) { .fc-header { position: sticky; /* position: relative is implicit for sticky */ } } .fc-header__top { display: flex; align-items: center; justify-content: space-between; padding: 0 20px; max-width: var(--fc-content-width); margin: 0 auto; height: 52px; } .fc-header__logo { display: flex; align-items: center; height: 100%; } .fc-header__actions { display: flex; align-items: center; gap: 10px; height: 100%; } /* Hamburger — hidden on desktop */ .fc-hamburger { display: none; flex-direction: column; justify-content: center; gap: 5px; width: 32px; height: 32px; padding: 4px; background: none; border: none; cursor: pointer; } .fc-hamburger span { display: block; width: 100%; height: 2.5px; background: var(--fc-text); border-radius: 2px; transition: transform 0.2s, opacity 0.2s; } .fc-hamburger.is-active span:nth-child(1) { transform: translateY(6px) rotate(45deg); } .fc-hamburger.is-active span:nth-child(2) { opacity: 0; } .fc-hamburger.is-active span:nth-child(3) { transform: translateY(-6px) rotate(-45deg); } /* Logo */ .fc-site-logo { display: block; line-height: 1; } .fc-site-logo--text { font-family: var(--fc-font-heading); font-size: 1.5rem; font-weight: 800; letter-spacing: -0.02em; color: var(--fc-text); text-decoration: none; white-space: nowrap; } .fc-site-logo--text:hover { color: var(--fc-text); } .fc-site-logo--svg { display: inline-flex; align-items: center; } .fc-site-logo--svg svg { height: 26px; width: auto; max-width: 220px; } @media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .fc-site-logo--svg svg .logo-text { fill: #e8e8e8 !important; } } [data-theme="dark"] .fc-site-logo--svg svg .logo-text { fill: #e8e8e8 !important; } .fc-site-logo--svg svg .logo-dot { fill: #ad004b; } /* Navigation — Newspaper-style bordered box */ .fc-nav { max-width: var(--fc-content-width); margin: 0 auto; border: 1px solid var(--fc-brand-accent); border-left: 3px solid var(--fc-brand-accent); padding: 0 12px; } /* Handle both wp_nav_menu (