/* ================================================================== boblog theme — extra stílusok a theme.json-en túl ================================================================== */ /* * --- Custom CSS variables, amelyeket a theme.json nem tud generálni --- * (motion, container-max, dark-mode color overrides, custom utility-k) */ :root { --duration-fast: 150ms; --duration-base: 250ms; --duration-slow: 400ms; --easing-out: cubic-bezier(0.32, 0.72, 0, 1); --easing-inout: cubic-bezier(0.65, 0, 0.35, 1); --container-narrow: 720px; --container-wide: 1440px; /* Header magasság — JS dinamikusan frissíti (header-height.js). Fallback: 60px, ami a default header config-nál tipikus. */ --header-height: 60px; } /* === Dark mode — a theme.json palettájának override-ja CSS variable-eken keresztül === */ [data-theme="dark"] { --wp--preset--color--bg: #000000; --wp--preset--color--bg-elevated: #1C1C1E; --wp--preset--color--text: #F5F5F7; --wp--preset--color--text-muted: #86868B; --wp--preset--color--border: #3A3A3C; --wp--preset--color--accent: #0A84FF; --wp--preset--color--accent-hover: #409CFF; color-scheme: dark; } [data-theme="light"] { color-scheme: light; } /* === Globális overflow + min-width védelem (mockup tapasztalat) === */ *, *::before, *::after { min-width: 0; } html, body { width: 100%; max-width: 100%; overflow-x: clip; } pre, table, iframe, embed, object { min-width: 0; max-width: 100%; overflow-x: auto; } /* === Smooth color transitions (theme switch) === */ body { transition: background-color var(--duration-base) var(--easing-inout), color var(--duration-base) var(--easing-inout); } /* === Focus ring — Apple-szerű élesebb === */ :focus-visible { outline: 2px solid var(--wp--preset--color--accent); outline-offset: 3px; border-radius: 4px; } /* === Skip-link — billentyűzetes navigáció === Default rejtett (clip), Tab-on a viewport-ra ugrik. */ .boblog-skip-link { position: absolute; left: -9999px; top: 0; z-index: 100000; background: var(--wp--preset--color--accent); color: #fff; padding: 12px 20px; border-radius: 8px; font-family: var(--wp--preset--font-family--inter); font-weight: 600; font-size: var(--wp--preset--font-size--sm); text-decoration: none; transition: none; /* azonnali megjelenés Tab-on */ } .boblog-skip-link:focus, .boblog-skip-link:focus-visible { left: 16px; top: 16px; outline: 2px solid var(--wp--preset--color--bg); outline-offset: 2px; } /* A skip-link target main-en, biztosítjuk a scroll-margin-top-ot a sticky header miatt */ #main-content { scroll-margin-top: calc(var(--header-height) + 16px); } @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: 0.01ms !important; transition-duration: 0.01ms !important; scroll-behavior: auto !important; } } /* ================================================================== SITE HEADER — sticky + glass blur A WP block-theme `` block egy `
` wrapper-be csomagolja a tartalmat. A sticky-t a wrapper-en KELL elhelyezni, mert csak ott rendelkezik a teljes content magasságával — ha a belső .site-header-t tesszük sticky-vé, a wrapper csak ~60px magas és a sticky-tartomány a wrapper magasságához kötődik (a header "elsiklik" scroll-kor). ================================================================== */ header.wp-block-template-part, .wp-block-template-part[data-area="header"] { position: sticky; top: 0; z-index: 50; background: color-mix(in oklab, var(--wp--preset--color--bg) 88%, transparent); backdrop-filter: saturate(1.5) blur(14px); -webkit-backdrop-filter: saturate(1.5) blur(14px); border-bottom: 1px solid var(--wp--preset--color--border); } /* Belső group ne ismételje a sticky-t (és ne legyen border-bottom dupla) */ .site-header { background: transparent; border-bottom: 0; } /* Logo (site title) */ .wp-block-site-title a, .wp-block-site-title { color: var(--wp--preset--color--text) !important; text-decoration: none !important; letter-spacing: -0.02em; } /* Navigation menu */ .wp-block-navigation a { color: var(--wp--preset--color--text); font-weight: 500; padding: 6px 12px !important; border-radius: 8px; transition: background var(--duration-fast) var(--easing-out); text-decoration: none; } .wp-block-navigation a:hover { background: var(--wp--preset--color--bg-elevated); color: var(--wp--preset--color--text); } .wp-block-navigation .current-menu-item > a { color: var(--wp--preset--color--accent); } /* === Mobile menu burger — desktop-on rejtett, ≤900px alatt látszik === */ .boblog-mobile-menu-btn { display: none !important; } @media (max-width: 900px) { .boblog-mobile-menu-btn { display: grid !important; } .boblog-desktop-nav, .wp-block-navigation.boblog-desktop-nav { display: none !important; } } /* Mobil drawer close gomb — safe-area-aware + magasabb specificity hogy * a .boblog-icon-btn 36x36 width-jét felülírjuk. */ .boblog-mobile-drawer .boblog-mobile-drawer-close { position: absolute; top: calc(16px + env(safe-area-inset-top, 0px)); right: calc(16px + env(safe-area-inset-right, 0px)); z-index: 2; width: 44px; height: 44px; } .boblog-mobile-drawer .boblog-mobile-drawer-close svg { width: 22px; height: 22px; } /* ================================================================== ICON BUTTONS (header, share) ================================================================== */ .boblog-icon-btn { display: inline-grid; place-items: center; width: 36px; height: 36px; border-radius: 9999px; background: transparent; border: 0; color: var(--wp--preset--color--text); cursor: pointer; transition: background var(--duration-fast) var(--easing-out); } .boblog-icon-btn:hover { background: var(--wp--preset--color--bg-elevated); } .boblog-icon-btn svg { width: 18px; height: 18px; stroke: currentColor; fill: none; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; } /* ================================================================== ABOUT HERO (a Rólam page hero a homepage tetején) ================================================================== */ .boblog-about-hero { display: grid; grid-template-columns: 1.2fr 0.9fr; gap: 48px; align-items: center; } .boblog-about-hero-text { display: flex; flex-direction: column; gap: 16px; } .boblog-about-hero-title { font-size: clamp(32px, 4vw, 64px); font-weight: 700; line-height: 1.05; letter-spacing: -0.025em; margin: 0; } .boblog-about-hero-lead { font-size: clamp(17px, 1.4vw, 22px); line-height: 1.55; color: var(--wp--preset--color--text-muted); font-weight: 400; margin: 0; max-width: 56ch; } .boblog-about-hero-actions { margin-top: 16px; } .boblog-about-hero-image { display: block; aspect-ratio: 4/5; border-radius: 24px; overflow: hidden; box-shadow: var(--wp--preset--shadow--lg); transition: transform var(--duration-base) var(--easing-out); } .boblog-about-hero-image:hover { transform: translateY(-4px); } .boblog-about-hero-image img { width: 100%; height: 100%; object-fit: cover; display: block; } @media (max-width: 900px) { .boblog-about-hero { grid-template-columns: 1fr; gap: 32px; } .boblog-about-hero-image { order: -1; aspect-ratio: 16/10; max-height: 380px; } } /* ================================================================== NEWSLETTER — saját mockup-szerű form (form-action URL alapon) ================================================================== */ .boblog-newsletter-form { display: flex; flex-direction: column; gap: 14px; max-width: 480px; margin: 32px auto 0; } .boblog-newsletter-row { display: flex; flex-direction: row; gap: 12px; flex-wrap: wrap; } .boblog-newsletter-consent { display: flex; align-items: flex-start; gap: 10px; font-size: var(--wp--preset--font-size--xs, 14px); color: var(--wp--preset--color--text-muted); line-height: 1.45; text-align: left; cursor: pointer; } .boblog-newsletter-consent input[type="checkbox"] { flex-shrink: 0; margin-top: 2px; width: 16px; height: 16px; accent-color: var(--wp--preset--color--accent); cursor: pointer; } .boblog-newsletter-consent a { color: var(--wp--preset--color--accent); text-decoration: underline; text-underline-offset: 2px; } .boblog-newsletter-consent a:hover { color: var(--wp--preset--color--accent-hover); } .boblog-newsletter-form input[type="email"] { flex: 1 1 220px; min-width: 200px; padding: 12px 18px; border-radius: 9999px; border: 1px solid var(--wp--preset--color--border); background: var(--wp--preset--color--bg); color: var(--wp--preset--color--text); font: inherit; font-size: var(--wp--preset--font-size--sm); font-family: var(--wp--preset--font-family--inter); height: auto; line-height: 1.5; } .boblog-newsletter-form input[type="email"]::placeholder { color: var(--wp--preset--color--text-muted); } .boblog-newsletter-form input[type="email"]:focus { outline: 2px solid var(--wp--preset--color--accent); outline-offset: 1px; border-color: var(--wp--preset--color--accent); } .boblog-newsletter-submit, .boblog-newsletter-form button[type="submit"] { background: var(--wp--preset--color--accent); color: #fff; border: 1px solid var(--wp--preset--color--accent); border-radius: 9999px; padding: 12px 22px; font-family: var(--wp--preset--font-family--inter); font-weight: 600; font-size: var(--wp--preset--font-size--sm); line-height: 1.4; cursor: pointer; transition: background var(--duration-fast) var(--easing-out); white-space: nowrap; flex: 0 0 auto; } .boblog-newsletter-submit:hover, .boblog-newsletter-form button[type="submit"]:hover { background: var(--wp--preset--color--accent-hover); border-color: var(--wp--preset--color--accent-hover); } @media (max-width: 480px) { .boblog-newsletter-row { flex-direction: column; } .boblog-newsletter-submit, .boblog-newsletter-form button[type="submit"] { width: 100%; } } /* Sikeres feliratkozás-üzenet (form swap után) */ .boblog-newsletter-success { display: flex; flex-direction: column; align-items: center; gap: 12px; margin-top: 24px; padding: 24px; border-radius: 16px; background: color-mix(in srgb, var(--wp--preset--color--accent) 10%, transparent); color: var(--wp--preset--color--text); animation: boblog-fade-in 240ms cubic-bezier(0.32, 0.72, 0, 1); } .boblog-newsletter-success svg { color: var(--wp--preset--color--accent); flex-shrink: 0; } .boblog-newsletter-success p { margin: 0; text-align: center; font-size: var(--wp--preset--font-size--sm, 16px); line-height: 1.5; } .boblog-newsletter-success p strong { font-weight: 600; } @keyframes boblog-fade-in { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: translateY(0); } } @media (prefers-reduced-motion: reduce) { .boblog-newsletter-success { animation: none; } } /* ================================================================== NEWSLETTER EMBED OVERRIDE — MailerLite, Beehiiv, ConvertKit, etc. A 3rd-party form-ok saját stílusát neutralizáljuk, hogy a téma "boblog-newsletter" kártyájában szépen elférjenek. ================================================================== */ .boblog-newsletter .ml-form-embedContainer, .boblog-newsletter .ml-form-embedContainer * { box-sizing: border-box !important; font-family: var(--wp--preset--font-family--inter) !important; } .boblog-newsletter .ml-form-embedWrapper, .boblog-newsletter .ml-form-embedWrapper.embedForm, .boblog-newsletter .ml-form-embedWrapper.embedDefault { background: transparent !important; border: 0 !important; border-radius: 0 !important; width: 100% !important; max-width: none !important; padding: 0 !important; display: block !important; } .boblog-newsletter .ml-form-embedBody { padding: 0 !important; } .boblog-newsletter .ml-form-embedContent { /* MailerLite saját címét + leírását elrejtjük — a téma cím+alcím megmarad */ display: none !important; } /* A
-ot flex-row-vá tesszük: input + button egymás MELLETT (mint a mockup) */ .boblog-newsletter .ml-block-form { display: flex !important; flex-direction: row !important; align-items: stretch !important; gap: 12px !important; flex-wrap: wrap !important; width: 100% !important; max-width: 480px !important; margin: 0 auto !important; } .boblog-newsletter .ml-form-formContent { flex: 1 1 220px !important; min-width: 200px !important; margin: 0 !important; padding: 0 !important; } .boblog-newsletter .ml-form-fieldRow, .boblog-newsletter .ml-form-fieldRow.ml-last-item { margin: 0 !important; } .boblog-newsletter .ml-form-fieldRow input, .boblog-newsletter .ml-form-horizontalRow input { background-color: var(--wp--preset--color--bg) !important; color: var(--wp--preset--color--text) !important; border-color: var(--wp--preset--color--border) !important; border-radius: 9999px !important; padding: 12px 18px !important; font-family: var(--wp--preset--font-family--inter) !important; font-size: var(--wp--preset--font-size--sm) !important; line-height: 1.5 !important; height: auto !important; } .boblog-newsletter .ml-form-fieldRow input::placeholder { color: var(--wp--preset--color--text-muted) !important; } .boblog-newsletter .ml-form-fieldRow input:focus { border-color: var(--wp--preset--color--accent) !important; outline: 2px solid color-mix(in oklab, var(--wp--preset--color--accent) 30%, transparent); outline-offset: 1px; } /* Submit gomb — accent pill, side-by-side (NEM full-width a flex-row-ban) */ .boblog-newsletter .ml-form-embedSubmit { margin: 0 !important; float: none !important; width: auto !important; flex: 0 0 auto !important; } .boblog-newsletter .ml-form-embedSubmit button[type="submit"], .boblog-newsletter .ml-form-embedSubmit button.primary { background-color: var(--wp--preset--color--accent) !important; color: #fff !important; border: 1px solid var(--wp--preset--color--accent) !important; border-radius: 9999px !important; padding: 12px 22px !important; font-family: var(--wp--preset--font-family--inter) !important; font-weight: 600 !important; font-size: var(--wp--preset--font-size--sm) !important; line-height: 1.4 !important; cursor: pointer !important; transition: background-color var(--duration-fast) var(--easing-out) !important; width: auto !important; height: auto !important; white-space: nowrap !important; } /* Mobile (≤480) → vissza column-ra, button full-width */ @media (max-width: 480px) { .boblog-newsletter .ml-block-form { flex-direction: column !important; } .boblog-newsletter .ml-form-embedSubmit { width: 100% !important; } .boblog-newsletter .ml-form-embedSubmit button[type="submit"], .boblog-newsletter .ml-form-embedSubmit button.primary { width: 100% !important; } } .boblog-newsletter .ml-form-embedSubmit button[type="submit"]:hover, .boblog-newsletter .ml-form-embedSubmit button.primary:hover { background-color: var(--wp--preset--color--accent-hover) !important; border-color: var(--wp--preset--color--accent-hover) !important; } /* Loading state */ .boblog-newsletter .ml-form-embedSubmit button.loading { background-color: var(--wp--preset--color--text-muted) !important; border-color: var(--wp--preset--color--text-muted) !important; } /* Privacy / consent checkbox sor — finomítva */ .boblog-newsletter .ml-form-checkboxRow, .boblog-newsletter .ml-form-embedPermissions { font-size: var(--wp--preset--font-size--xs) !important; color: var(--wp--preset--color--text-muted) !important; margin: 8px 0 12px !important; float: none !important; } .boblog-newsletter .ml-form-checkboxRow .label-description, .boblog-newsletter .ml-form-checkboxRow .label-description p { color: var(--wp--preset--color--text-muted) !important; font-size: var(--wp--preset--font-size--xs) !important; } /* Success state ("Thank you!") */ .boblog-newsletter .ml-form-successBody { padding: 0 !important; text-align: center !important; } .boblog-newsletter .ml-form-successContent h4 { color: var(--wp--preset--color--text) !important; font-size: var(--wp--preset--font-size--xl) !important; font-weight: 700 !important; margin: 0 0 8px 0 !important; text-align: center !important; } .boblog-newsletter .ml-form-successContent p { color: var(--wp--preset--color--text-muted) !important; font-size: var(--wp--preset--font-size--sm) !important; text-align: center !important; margin: 0 !important; } /* MailerLite "powered by" branding (free tier) — discreet, halvány */ .boblog-newsletter .ml-form-embedContent + form ~ * { font-size: 11px !important; color: var(--wp--preset--color--text-muted) !important; opacity: 0.7; } /* ================================================================== 404 OLDAL — search-form ================================================================== */ .boblog-404-search { display: flex; align-items: center; gap: 8px; max-width: 480px; margin: 32px auto 0; padding: 8px 8px 8px 16px; background: var(--wp--preset--color--bg-elevated); border: 1px solid var(--wp--preset--color--border); border-radius: 9999px; transition: border-color var(--duration-fast) var(--easing-out); } .boblog-404-search:focus-within { border-color: var(--wp--preset--color--accent); } .boblog-404-search-icon { width: 18px; height: 18px; color: var(--wp--preset--color--text-muted); flex-shrink: 0; } .boblog-404-search-input { flex: 1; min-width: 0; background: transparent; border: 0; color: var(--wp--preset--color--text); font: inherit; font-size: var(--wp--preset--font-size--sm); padding: 8px 4px; outline: none; } .boblog-404-search-input::placeholder { color: var(--wp--preset--color--text-muted); } .boblog-404-search-submit { background: var(--wp--preset--color--accent); color: #fff; border: 0; border-radius: 9999px; padding: 8px 18px; font: inherit; font-size: var(--wp--preset--font-size--xs); font-weight: 600; cursor: pointer; transition: background var(--duration-fast) var(--easing-out); flex-shrink: 0; } .boblog-404-search-submit:hover { background: var(--wp--preset--color--accent-hover); } @media (max-width: 480px) { .boblog-404-search { flex-wrap: wrap; border-radius: 16px; } .boblog-404-search-submit { width: 100%; padding: 10px; } } /* ================================================================== SHARE BUTTONS (single poszt végén) ================================================================== */ .boblog-share { display: flex; align-items: center; gap: 8px; margin-top: 16px; flex-wrap: wrap; } .boblog-share-label { font-size: var(--wp--preset--font-size--xs); color: var(--wp--preset--color--text-muted); text-transform: uppercase; letter-spacing: 0.08em; font-weight: 600; margin-right: 4px; } .boblog-share-btn { display: inline-grid; place-items: center; width: 36px; height: 36px; border-radius: 9999px; background: transparent; border: 1px solid var(--wp--preset--color--border); color: var(--wp--preset--color--text-muted); cursor: pointer; text-decoration: none; position: relative; transition: all var(--duration-fast) var(--easing-out); } .boblog-share-btn:hover { border-color: var(--wp--preset--color--text); color: var(--wp--preset--color--text); transform: translateY(-1px); } .boblog-share-btn svg { width: 16px; height: 16px; fill: currentColor; } .boblog-share-btn[data-share="email"] svg, .boblog-share-btn[data-share="copy"] svg { fill: none; stroke: currentColor; } .boblog-share-tooltip { position: absolute; bottom: calc(100% + 6px); left: 50%; transform: translateX(-50%); background: var(--wp--preset--color--text); color: var(--wp--preset--color--bg); padding: 4px 10px; border-radius: 4px; font-size: 11px; font-weight: 500; font-family: var(--wp--preset--font-family--inter); white-space: nowrap; opacity: 0; pointer-events: none; transition: opacity 200ms var(--easing-out); } .boblog-share-btn.is-copied .boblog-share-tooltip { opacity: 1; } /* ================================================================== AUTHOR BIO (single poszt vége előtt) ================================================================== */ .boblog-author-bio { max-width: var(--container-narrow); margin: 64px auto 0; padding: 32px 24px; display: grid; grid-template-columns: 80px 1fr; gap: 24px; align-items: center; background: var(--wp--preset--color--bg-elevated); border-radius: 16px; } @media (max-width: 600px) { .boblog-author-bio { grid-template-columns: 1fr; gap: 16px; padding: 24px; text-align: center; justify-items: center; } } .boblog-author-bio-avatar { width: 80px; height: 80px; border-radius: 9999px; overflow: hidden; display: block; flex-shrink: 0; background: linear-gradient(135deg, var(--wp--preset--color--accent), color-mix(in oklab, var(--wp--preset--color--accent) 30%, var(--wp--preset--color--bg))); transition: transform var(--duration-fast) var(--easing-out); } .boblog-author-bio-avatar:hover { transform: scale(1.05); } .boblog-author-bio-avatar img { width: 100%; height: 100%; object-fit: cover; display: block; } .boblog-author-bio-avatar-fallback { display: grid; place-items: center; width: 100%; height: 100%; color: #fff; font-size: 32px; font-weight: 600; font-family: var(--wp--preset--font-family--inter); } .boblog-author-bio-text { display: flex; flex-direction: column; gap: 4px; } .boblog-author-bio-name { font-size: var(--wp--preset--font-size--lg); font-weight: 600; color: var(--wp--preset--color--text); letter-spacing: -0.01em; text-decoration: none; } .boblog-author-bio-name:hover { color: var(--wp--preset--color--accent); } .boblog-author-bio-desc { font-size: var(--wp--preset--font-size--sm); color: var(--wp--preset--color--text-muted); line-height: 1.55; margin: 0; } .boblog-author-bio-link { font-size: var(--wp--preset--font-size--sm); color: var(--wp--preset--color--accent); text-decoration: none; font-weight: 500; margin-top: 4px; transition: color var(--duration-fast) var(--easing-out); } .boblog-author-bio-link:hover { color: var(--wp--preset--color--accent-hover); text-decoration: underline; } /* ================================================================== GDPR PLUGIN — wordpress-gdpr modal és trigger override A plugin inline-style-okat ad (background-color, color), ezeket !important-tal írjuk felül a téma-színekre. ================================================================== */ /* Bottom-left floating süti-trigger gomb */ .wordpress-gdpr-privacy-settings-trigger-container.wordpress-gdpr-privacy-settings-trigger-bottom-left, .wordpress-gdpr-privacy-settings-trigger-container.wordpress-gdpr-privacy-settings-trigger-bottom-right { background: var(--wp--preset--color--bg-elevated) !important; color: var(--wp--preset--color--text) !important; border: 1px solid var(--wp--preset--color--border) !important; border-radius: 9999px !important; box-shadow: var(--wp--preset--shadow--md) !important; width: 44px !important; height: 44px !important; display: grid !important; place-items: center !important; transition: transform var(--duration-fast) var(--easing-out), box-shadow var(--duration-fast) var(--easing-out) !important; /* Pozíció — a default plugin "bottom: 1%; left: 1%" helyett kicsit beljebb */ bottom: 16px !important; } .wordpress-gdpr-privacy-settings-trigger-container.wordpress-gdpr-privacy-settings-trigger-bottom-left { left: 16px !important; } .wordpress-gdpr-privacy-settings-trigger-container.wordpress-gdpr-privacy-settings-trigger-bottom-right { right: 16px !important; } .wordpress-gdpr-privacy-settings-trigger-container:hover { transform: translateY(-2px); box-shadow: var(--wp--preset--shadow--lg) !important; } /* Default plugin ikon (img/i) elrejtve, helyette CSS-mask süti-ikon */ .wordpress-gdpr-privacy-settings-trigger img, .wordpress-gdpr-privacy-settings-trigger i, .wordpress-gdpr-privacy-settings-trigger svg { display: none !important; } .wordpress-gdpr-privacy-settings-trigger { width: 22px !important; height: 22px !important; background-color: var(--wp--preset--color--text) !important; -webkit-mask-image: url("data:image/svg+xml;utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10c0-.5-.04-1-.11-1.49a3 3 0 0 1-3.6-3.6 3 3 0 0 1-3-3A10 10 0 0 0 12 2zM7.5 9.5a1.5 1.5 0 1 1 0 3 1.5 1.5 0 0 1 0-3zm6 4a1 1 0 1 1 0 2 1 1 0 0 1 0-2zm-2-7a1 1 0 1 1 0 2 1 1 0 0 1 0-2zm5 7a1.5 1.5 0 1 1 0 3 1.5 1.5 0 0 1 0-3z'/%3E%3C/svg%3E") !important; mask-image: url("data:image/svg+xml;utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10c0-.5-.04-1-.11-1.49a3 3 0 0 1-3.6-3.6 3 3 0 0 1-3-3A10 10 0 0 0 12 2zM7.5 9.5a1.5 1.5 0 1 1 0 3 1.5 1.5 0 0 1 0-3zm6 4a1 1 0 1 1 0 2 1 1 0 0 1 0-2zm-2-7a1 1 0 1 1 0 2 1 1 0 0 1 0-2zm5 7a1.5 1.5 0 1 1 0 3 1.5 1.5 0 0 1 0-3z'/%3E%3C/svg%3E") !important; -webkit-mask-size: contain !important; mask-size: contain !important; -webkit-mask-repeat: no-repeat !important; mask-repeat: no-repeat !important; -webkit-mask-position: center !important; mask-position: center !important; display: block !important; font-size: 0; color: transparent !important; } /* Modal overlay (a viewport-szintű "kártya-tartó") pointer-events: none — átengedi a click-eket az alatta lévő tartalomhoz, csak a container saját maga fogad el click-et (lentebb explicit auto). */ .wordpress-gdpr-popup.wordpress-gdpr-popup-overlay { position: fixed !important; top: 0 !important; left: 0 !important; right: 0 !important; bottom: 0 !important; width: 100% !important; height: 100% !important; z-index: 9999 !important; background: transparent !important; pointer-events: none !important; } /* Backdrop: blur teljes viewport-on, NEM blokkolja a click-eket A pointer-events: none kritikus: enélkül a container fölötti kattintások a backdrop-re kerülnek és semmi sem reagál. */ .wordpress-gdpr-popup-overlay .wordpress-gdpr-popup-overlay-backdrop { position: fixed !important; top: 0 !important; left: 0 !important; right: 0 !important; bottom: 0 !important; background: color-mix(in oklab, var(--wp--preset--color--bg) 55%, transparent) !important; backdrop-filter: saturate(1.5) blur(20px) !important; -webkit-backdrop-filter: saturate(1.5) blur(20px) !important; z-index: 9998 !important; pointer-events: none !important; } /* Container — direkt fixed-position a viewport közepén (transform trick). A plugin a container-en "position: fixed; bottom: 0; width: 90%" beállítást ad — ezt teljesen felülírjuk és a viewport közepére helyezzük. pointer-events: auto biztosítja hogy a tartalom kattintható legyen. */ .wordpress-gdpr-popup-overlay .wordpress-gdpr-popup-container, body .wordpress-gdpr-popup-container { background: var(--wp--preset--color--bg-elevated) !important; color: var(--wp--preset--color--text) !important; border: 1px solid var(--wp--preset--color--border) !important; border-radius: 16px !important; box-shadow: var(--wp--preset--shadow--xl) !important; font-family: var(--wp--preset--font-family--inter) !important; position: fixed !important; top: 50% !important; left: 50% !important; right: auto !important; bottom: auto !important; transform: translate(-50%, -50%) !important; width: calc(100% - 48px) !important; max-width: 520px !important; margin: 0 !important; padding: 32px !important; z-index: 100000 !important; pointer-events: auto !important; } /* Close (X) gomb */ #wordpress-gdpr-popup-close.wordpress-gdpr-popup-close { background: transparent !important; color: var(--wp--preset--color--text-muted) !important; width: 36px; height: 36px; border-radius: 9999px; top: 12px !important; right: 12px !important; display: grid !important; place-items: center !important; transition: background var(--duration-fast) var(--easing-out); } #wordpress-gdpr-popup-close.wordpress-gdpr-popup-close:hover { background: var(--wp--preset--color--bg) !important; color: var(--wp--preset--color--text) !important; } /* Plugin Font Awesome icon helyett pure CSS × */ #wordpress-gdpr-popup-close i.fa-times, #wordpress-gdpr-popup-close i.fa { display: none !important; } #wordpress-gdpr-popup-close::after { content: "×"; font-family: var(--wp--preset--font-family--inter); font-size: 24px; line-height: 1; color: currentColor; font-weight: 300; } /* "Adatvédelmi beállítások" link a buttons UTÁN — szín default piros volt, override */ .wordpress-gdpr-popup-actions-links a.wordpress-gdpr-popup-privacy-settings-text { color: var(--wp--preset--color--text-muted) !important; font-size: var(--wp--preset--font-size--xs); text-decoration: none; } .wordpress-gdpr-popup-actions-links a.wordpress-gdpr-popup-privacy-settings-text:hover { color: var(--wp--preset--color--text) !important; text-decoration: underline; } /* A wordpress-gdpr-popup-bottom osztály eltávolít minden bottom-positioning-ot */ .wordpress-gdpr-popup-bottom .wordpress-gdpr-popup-container { bottom: auto !important; } /* Modal heading + szöveg */ .wordpress-gdpr-popup h1, .wordpress-gdpr-popup h2, .wordpress-gdpr-popup h3, .wordpress-gdpr-popup h4 { font-family: var(--wp--preset--font-family--inter); color: var(--wp--preset--color--text); letter-spacing: -0.015em; line-height: 1.25; } .wordpress-gdpr-popup-text { font-size: var(--wp--preset--font-size--sm); color: var(--wp--preset--color--text); line-height: 1.6; } .wordpress-gdpr-popup-text a { color: var(--wp--preset--color--accent) !important; text-decoration: none; } .wordpress-gdpr-popup-text a:hover { color: var(--wp--preset--color--accent-hover) !important; text-decoration: underline; } /* Action gombok — Apple-pill stílus */ .wordpress-gdpr-popup-actions { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 20px; } .wordpress-gdpr-popup-actions-buttons { display: flex; gap: 8px; flex-wrap: wrap; } .wordpress-gdpr-popup-agree, .wordpress-gdpr-popup-decline, .wordpress-gdpr-popup-preferences, .wordpress-gdpr-popup a.wordpress-gdpr-popup-agree, .wordpress-gdpr-popup a.wordpress-gdpr-popup-decline, .wordpress-gdpr-popup a.wordpress-gdpr-popup-preferences { display: inline-flex; align-items: center; font-family: var(--wp--preset--font-family--inter) !important; font-weight: 600 !important; font-size: var(--wp--preset--font-size--sm) !important; padding: 10px 20px !important; border-radius: 9999px !important; transition: all var(--duration-fast) var(--easing-out) !important; text-decoration: none !important; border: 1px solid transparent !important; cursor: pointer; } /* Primary: agree (elfogadom) */ .wordpress-gdpr-popup-agree { background: var(--wp--preset--color--accent) !important; color: #fff !important; border-color: var(--wp--preset--color--accent) !important; } .wordpress-gdpr-popup-agree:hover { background: var(--wp--preset--color--accent-hover) !important; border-color: var(--wp--preset--color--accent-hover) !important; } /* Secondary: decline (elutasítom) */ .wordpress-gdpr-popup-decline { background: transparent !important; color: var(--wp--preset--color--text) !important; border-color: var(--wp--preset--color--border) !important; } .wordpress-gdpr-popup-decline:hover { border-color: var(--wp--preset--color--text) !important; } /* Tertiary: preferences (beállítások) */ .wordpress-gdpr-popup-preferences { background: transparent !important; color: var(--wp--preset--color--text-muted) !important; border-color: transparent !important; padding: 10px 12px !important; } .wordpress-gdpr-popup-preferences:hover { color: var(--wp--preset--color--text) !important; } /* ================================================================== PRIVACY SETTINGS részletes modal (a "Beállítások / My Preferences" gombra) A plugin a popup-ot és a backdrop-ot KÜLÖN elem-ként fade-eli (display:none/block). Stílusok kizárólag a tényleges popup és backdrop elemen — a container "container" csak DOM-wrapper, default-on transparens, ne állítsuk display: grid-re. ================================================================== */ /* Backdrop (külön elem, jQuery .fadeIn/.fadeOut állítja) */ .wordpress-gdpr-privacy-settings-popup-backdrop { position: fixed !important; top: 0 !important; left: 0 !important; right: 0 !important; bottom: 0 !important; background: color-mix(in oklab, var(--wp--preset--color--bg) 55%, transparent) !important; backdrop-filter: saturate(1.5) blur(20px) !important; -webkit-backdrop-filter: saturate(1.5) blur(20px) !important; z-index: 99998 !important; pointer-events: none !important; } /* Popup (a tényleges modal-doboz) — fixed center */ .wordpress-gdpr-privacy-settings-popup { background: var(--wp--preset--color--bg-elevated) !important; color: var(--wp--preset--color--text) !important; border: 1px solid var(--wp--preset--color--border) !important; border-radius: 16px !important; box-shadow: var(--wp--preset--shadow--xl) !important; font-family: var(--wp--preset--font-family--inter) !important; position: fixed !important; top: 50% !important; left: 50% !important; right: auto !important; bottom: auto !important; transform: translate(-50%, -50%) !important; width: calc(100% - 48px) !important; max-width: 720px !important; max-height: calc(100vh - 48px); overflow-y: auto; padding: 32px !important; z-index: 99999 !important; pointer-events: auto; } /* Close (×) — a Font Awesome ikont elrejtjük, CSS-szel rajzoljuk */ #wordpress-gdpr-privacy-settings-popup-close { background: transparent !important; color: var(--wp--preset--color--text-muted) !important; width: 36px; height: 36px; border-radius: 9999px !important; position: absolute !important; top: 12px !important; right: 12px !important; display: grid !important; place-items: center !important; transition: background var(--duration-fast) var(--easing-out); } #wordpress-gdpr-privacy-settings-popup-close:hover { background: var(--wp--preset--color--bg) !important; color: var(--wp--preset--color--text) !important; } #wordpress-gdpr-privacy-settings-popup-close i.fa-times, #wordpress-gdpr-privacy-settings-popup-close i.fa { display: none !important; } #wordpress-gdpr-privacy-settings-popup-close::after { content: "×"; font-family: var(--wp--preset--font-family--inter); font-size: 24px; line-height: 1; color: currentColor; font-weight: 300; } /* Header (logo + cím + leírás) */ .wordpress-gdpr-privacy-settings-popup-header { display: flex; gap: 16px; align-items: flex-start; margin-bottom: 24px; padding-right: 36px; /* close gombnak helyet hagyni */ } .wordpress-gdpr-privacy-settings-popup-logo img { width: 40px !important; height: 40px !important; border-radius: 8px; object-fit: contain; } .wordpress-gdpr-privacy-settings-popup-info { flex: 1; min-width: 0; } .wordpress-gdpr-privacy-settings-popup-title { font-size: var(--wp--preset--font-size--xl) !important; font-weight: 700 !important; letter-spacing: -0.015em; color: var(--wp--preset--color--text) !important; margin-bottom: 6px; line-height: 1.25; } .wordpress-gdpr-privacy-settings-popup-description { font-size: var(--wp--preset--font-size--sm) !important; color: var(--wp--preset--color--text-muted) !important; line-height: 1.55; margin: 0 !important; } /* "Saved!" success felirat — visszafogott */ .wordpress-gdpr-privacy-settings-popup-message { background: color-mix(in oklab, var(--wp--preset--color--accent) 15%, transparent) !important; color: var(--wp--preset--color--accent) !important; border-radius: 8px !important; padding: 8px 12px !important; font-size: var(--wp--preset--font-size--sm); margin-bottom: 16px; display: none; /* csak a JS mutatja siker után */ } /* Services container — 2-oszlopos layout: kategóriák bal, content jobb */ .wordpress-gdpr-privacy-settings-popup-services-container { display: grid !important; grid-template-columns: 180px 1fr !important; gap: 24px !important; margin-bottom: 24px !important; border: 0 !important; } @media (max-width: 600px) { .wordpress-gdpr-privacy-settings-popup-services-container { grid-template-columns: 1fr !important; gap: 16px !important; } } /* Bal oldali kategória-tabok (Marketing / Analitika / Szükséges) */ .wordpress-gdpr-privacy-settings-popup-service-categories { background: transparent !important; height: auto !important; width: auto !important; float: none !important; border-right: 0 !important; display: flex !important; flex-direction: column !important; gap: 4px !important; } .wordpress-gdpr-privacy-settings-popup-services { float: none !important; width: auto !important; padding: 0 !important; max-height: none !important; min-width: 0; } @media (max-width: 600px) { .wordpress-gdpr-privacy-settings-popup-service-categories { flex-direction: row !important; flex-wrap: wrap !important; } } .wordpress-gdpr-popup-privacy-settings-service-category { display: block !important; padding: 10px 14px !important; border-radius: 8px !important; background: transparent !important; color: var(--wp--preset--color--text) !important; font-size: var(--wp--preset--font-size--sm) !important; font-weight: 500 !important; text-decoration: none !important; border: 1px solid transparent !important; transition: all var(--duration-fast) var(--easing-out) !important; cursor: pointer; position: relative; } .wordpress-gdpr-popup-privacy-settings-service-category:hover { background: var(--wp--preset--color--bg) !important; } /* "service-category-active" a plugin szerint = a süti-kategória ENGEDÉLYEZETT (toggle ON), NEM az UI-current-tab. Csak egy halvány accent-pötty jelzi. */ .wordpress-gdpr-popup-privacy-settings-service-category.wordpress-gdpr-popup-privacy-settings-service-category-active::after { content: ""; position: absolute; right: 10px; top: 50%; transform: translateY(-50%); width: 6px; height: 6px; border-radius: 50%; background: var(--wp--preset--color--accent); } /* Az UI-current-tab az "open-service-category" — de a HTML-ben mind 3-on van, ezért inkább csak hover/focus jelölést használunk. A clickkor a JS frissíti a content-en az "active" osztályt — a kék pill stílust elhagyjuk a tabokról. */ .wordpress-gdpr-popup-privacy-settings-service-category:focus, .wordpress-gdpr-popup-privacy-settings-service-category:focus-visible { background: var(--wp--preset--color--accent) !important; color: #fff !important; border-color: var(--wp--preset--color--accent) !important; outline: none !important; } /* Az utoljára clickelt tab "active" jelzéséhez egy CSS-trükk nem segít — a JS adja az "active" osztályt a megfelelő content-en, a tab-on viszont nem. */ /* Jobb oldali content: az ELSŐ content default-on látszik; ha van bármelyiken "*-active" osztály, az érvényesül helyette. */ .wordpress-gdpr-privacy-settings-popup-services { min-width: 0; } .wordpress-gdpr-popup-privacy-settings-services-content { display: none; color: var(--wp--preset--color--text); } .wordpress-gdpr-popup-privacy-settings-services-content:first-child { display: block; } .wordpress-gdpr-popup-privacy-settings-services-content.wordpress-gdpr-popup-privacy-settings-services-content-active { display: block; } /* Ha bármelyik content "active" osztályú, a többi (köztük a :first-child) ne legyen */ .wordpress-gdpr-privacy-settings-popup-services:has(.wordpress-gdpr-popup-privacy-settings-services-content-active) .wordpress-gdpr-popup-privacy-settings-services-content:not(.wordpress-gdpr-popup-privacy-settings-services-content-active) { display: none !important; } .wordpress-gdpr-popup-privacy-settings-service-category-description { font-size: var(--wp--preset--font-size--sm) !important; color: var(--wp--preset--color--text-muted) !important; line-height: 1.55; margin-bottom: 16px; } .wordpress-gdpr-popup-privacy-settings-services hr { border: 0 !important; border-top: 1px solid var(--wp--preset--color--border) !important; margin: 16px 0 !important; } /* Az egyes service-elemek (pl. Facebook Pixel + toggle) */ .wordpress-gdpr-popup-privacy-settings-services-content-title-box { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 12px 0; border-bottom: 1px solid var(--wp--preset--color--border); } .wordpress-gdpr-popup-privacy-settings-services-content-title-box:last-child { border-bottom: 0; } .wordpress-gdpr-popup-privacy-settings-services-content-title { color: var(--wp--preset--color--text) !important; text-decoration: none !important; font-weight: 500; font-size: var(--wp--preset--font-size--sm); display: inline-flex; align-items: center; gap: 6px; } .wordpress-gdpr-popup-privacy-settings-services-content-title:hover { color: var(--wp--preset--color--accent) !important; } .wordpress-gdpr-popup-privacy-settings-services-content-description, .wordpress-gdpr-popup-privacy-settings-services-content-cookies, .wordpress-gdpr-popup-privacy-settings-services-content-reason { font-size: var(--wp--preset--font-size--xs) !important; color: var(--wp--preset--color--text-muted) !important; line-height: 1.5; padding-left: 12px; } /* Bottom action buttons (Decline All / Save / Allow All) */ .wordpress-gdpr-privacy-settings-popup-services-buttons { display: flex !important; gap: 8px !important; flex-wrap: wrap !important; justify-content: flex-end !important; padding-top: 20px; border-top: 1px solid var(--wp--preset--color--border); } .wordpress-gdpr-privacy-settings-popup-services-decline-all, .wordpress-gdpr-privacy-settings-popup-services-save, .wordpress-gdpr-privacy-settings-popup-services-allow-all, .wordpress-gdpr-privacy-settings-popup-services-buttons a, .wordpress-gdpr-privacy-settings-popup-services-buttons button { display: inline-flex !important; align-items: center !important; font-family: var(--wp--preset--font-family--inter) !important; font-weight: 600 !important; font-size: var(--wp--preset--font-size--sm) !important; padding: 10px 20px !important; border-radius: 9999px !important; transition: all var(--duration-fast) var(--easing-out) !important; text-decoration: none !important; border: 1px solid transparent !important; cursor: pointer; background: transparent !important; } /* Decline All — ghost outline */ .wordpress-gdpr-privacy-settings-popup-services-decline-all { color: var(--wp--preset--color--text) !important; border-color: var(--wp--preset--color--border) !important; } .wordpress-gdpr-privacy-settings-popup-services-decline-all:hover { border-color: var(--wp--preset--color--text) !important; } /* Save — ghost text */ .wordpress-gdpr-privacy-settings-popup-services-save { color: var(--wp--preset--color--text-muted) !important; } .wordpress-gdpr-privacy-settings-popup-services-save:hover { color: var(--wp--preset--color--text) !important; } /* Allow All — primary accent */ .wordpress-gdpr-privacy-settings-popup-services-allow-all { background: var(--wp--preset--color--accent) !important; color: #fff !important; border-color: var(--wp--preset--color--accent) !important; } .wordpress-gdpr-privacy-settings-popup-services-allow-all:hover { background: var(--wp--preset--color--accent-hover) !important; border-color: var(--wp--preset--color--accent-hover) !important; } /* Toggle switch — csillag-pötty mint az iOS */ .gdpr-service-switch { -webkit-appearance: none; appearance: none; width: 44px; height: 26px; border-radius: 9999px; background: var(--wp--preset--color--border) !important; position: relative; cursor: pointer; transition: background var(--duration-fast) var(--easing-out); flex-shrink: 0; border: 0 !important; margin: 0 !important; } .gdpr-service-switch::before { content: ""; position: absolute; top: 3px; left: 3px; width: 20px; height: 20px; border-radius: 50%; background: #fff; transition: transform var(--duration-fast) var(--easing-out); box-shadow: 0 1px 3px rgba(0,0,0,0.2); } .gdpr-service-switch:checked { background: var(--wp--preset--color--accent) !important; } .gdpr-service-switch:checked::before { transform: translateX(18px); } .gdpr-service-switch:disabled { opacity: 0.5; cursor: not-allowed; } /* Footer link a modal alján */ .wordpress-gdpr-popup-actions-links { display: flex; gap: 16px; margin-top: 12px; font-size: var(--wp--preset--font-size--xs); } .wordpress-gdpr-popup-actions-links a { color: var(--wp--preset--color--text-muted) !important; text-decoration: none; } .wordpress-gdpr-popup-actions-links a:hover { color: var(--wp--preset--color--text) !important; } /* ================================================================== SOCIAL ICONS (footer) ================================================================== */ .boblog-social { display: flex; gap: 8px; margin-top: 16px; } .boblog-social a { display: inline-grid; place-items: center; width: 40px; height: 40px; border-radius: 9999px; color: var(--wp--preset--color--text-muted); background: var(--wp--preset--color--bg-elevated); border: 1px solid var(--wp--preset--color--border); transition: all var(--duration-fast) var(--easing-out); text-decoration: none; } .boblog-social a:hover { color: var(--wp--preset--color--text); border-color: var(--wp--preset--color--text); transform: translateY(-2px); } .boblog-social svg { width: 18px; height: 18px; fill: currentColor; display: block; } /* Theme toggle — sun/moon swap */ [data-theme="dark"] .boblog-theme-toggle .icon-sun { display: block; } [data-theme="dark"] .boblog-theme-toggle .icon-moon { display: none; } [data-theme="light"] .boblog-theme-toggle .icon-sun { display: none; } [data-theme="light"] .boblog-theme-toggle .icon-moon { display: block; } /* ================================================================== BUTTON — pill radius, Apple-feel ================================================================== */ .wp-block-button__link, .wp-element-button { transition: transform var(--duration-fast) var(--easing-out), background-color var(--duration-fast) var(--easing-out), border-color var(--duration-fast) var(--easing-out); } .wp-block-button__link:active, .wp-element-button:active { transform: scale(0.97); } .is-style-secondary .wp-block-button__link { background: transparent !important; color: var(--wp--preset--color--text) !important; border-color: var(--wp--preset--color--border) !important; } .is-style-secondary .wp-block-button__link:hover { border-color: var(--wp--preset--color--text) !important; } /* ================================================================== POST CARD (a Query Loop kimenete) ================================================================== */ .boblog-post-card { background: var(--wp--preset--color--bg-elevated); border-radius: 16px; overflow: hidden; box-shadow: var(--wp--preset--shadow--sm); display: flex; flex-direction: column; height: 100%; transition: transform var(--duration-base) var(--easing-out), box-shadow var(--duration-base) var(--easing-out); } .boblog-post-card:hover { transform: translateY(-3px); box-shadow: var(--wp--preset--shadow--lg); } .boblog-post-card .wp-block-post-featured-image, .boblog-post-card .wp-block-post-featured-image img { aspect-ratio: 16 / 10; width: 100%; object-fit: cover; } .boblog-post-card .boblog-card-body { padding: 24px; display: flex; flex-direction: column; gap: 12px; flex: 1; } .boblog-post-card .wp-block-post-title, .boblog-post-card .wp-block-post-title a { font-size: var(--wp--preset--font-size--xl); font-weight: 600; line-height: 1.25; letter-spacing: -0.01em; color: var(--wp--preset--color--text); text-decoration: none; } .boblog-post-card .wp-block-post-title a:hover { color: var(--wp--preset--color--text); } .boblog-post-card .wp-block-post-excerpt { color: var(--wp--preset--color--text-muted); font-size: var(--wp--preset--font-size--sm); } .boblog-post-card .wp-block-post-terms, .boblog-post-card .wp-block-post-date { font-size: var(--wp--preset--font-size--2xs); text-transform: uppercase; letter-spacing: 0.08em; color: var(--wp--preset--color--text-muted); font-weight: 600; } .boblog-post-card .wp-block-post-terms a { color: var(--wp--preset--color--accent); text-decoration: none; } /* ================================================================== HERO + ARTICLE ================================================================== */ .boblog-eyebrow { font-size: var(--wp--preset--font-size--2xs); text-transform: uppercase; letter-spacing: 0.1em; color: var(--wp--preset--color--text-muted); font-weight: 600; } .boblog-eyebrow--accent { color: var(--wp--preset--color--accent); } .boblog-meta-row { display: flex; flex-wrap: wrap; gap: 12px; font-size: var(--wp--preset--font-size--2xs); text-transform: uppercase; letter-spacing: 0.08em; color: var(--wp--preset--color--text-muted); font-weight: 600; } .boblog-meta-row > span:not(:last-child)::after { content: " · "; padding-left: 12px; color: var(--wp--preset--color--border); } /* ================================================================== HERO ART (placeholder képnél gradient) ================================================================== */ .boblog-hero-art { border-radius: 24px; aspect-ratio: 4/5; background: linear-gradient(135deg, color-mix(in oklab, var(--wp--preset--color--accent) 35%, var(--wp--preset--color--bg)), color-mix(in oklab, var(--wp--preset--color--accent) 15%, var(--wp--preset--color--bg)) 60%, var(--wp--preset--color--bg-elevated)); box-shadow: var(--wp--preset--shadow--lg); position: relative; overflow: hidden; } .boblog-hero-art::after { content: ""; position: absolute; inset: 0; background: radial-gradient(circle at 30% 20%, rgba(255,255,255,0.15), transparent 50%); pointer-events: none; } /* ================================================================== SERIES SCROLLER (horizontal browse) ================================================================== */ .boblog-series-scroller { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(260px, 1fr); gap: 16px; overflow-x: auto; scroll-snap-type: x mandatory; scroll-padding: 24px; padding-bottom: 12px; } @media (min-width: 1024px) { .boblog-series-scroller { grid-auto-flow: column; grid-template-columns: repeat(5, 1fr); grid-auto-columns: unset; overflow: visible; } } .boblog-series-card { scroll-snap-align: start; aspect-ratio: 3/4; border-radius: 16px; position: relative; overflow: hidden; display: flex; flex-direction: column; justify-content: end; padding: 24px; color: #fff; text-decoration: none; box-shadow: var(--wp--preset--shadow--md); transition: transform var(--duration-base) var(--easing-out), box-shadow var(--duration-base) var(--easing-out); background: linear-gradient(160deg, #1e3a5f, #0a1929); } .boblog-series-card:hover { transform: translateY(-4px); color: #fff; box-shadow: var(--wp--preset--shadow--lg); } /* Image layer (csak ha --cover-image be van állítva) */ .boblog-series-card::before { content: ""; position: absolute; inset: 0; background-image: var(--cover-image, none); background-size: cover; background-position: center; opacity: 0; transform: scale(1.05); transition: opacity 500ms var(--easing-out), transform 600ms var(--easing-out); z-index: 0; } .boblog-series-card:hover::before { opacity: 1; transform: scale(1); } /* Bottom darkening overlay (a szöveg olvashatóságához) */ .boblog-series-card::after { content: ""; position: absolute; inset: 0; background: linear-gradient(to bottom, transparent 35%, rgba(0,0,0,0.65)); z-index: 1; transition: background 500ms var(--easing-out); } .boblog-series-card:hover::after { /* hover-on a sötétítés erősebb a kép alsó felében, hogy a szöveg végig olvasható maradjon */ background: linear-gradient(to bottom, rgba(0,0,0,0.15) 0%, transparent 25%, rgba(0,0,0,0.75)); } .boblog-series-card > * { position: relative; z-index: 2; } .boblog-series-card .boblog-eyebrow { color: rgba(255,255,255,0.85); margin-bottom: 8px; } .boblog-series-card-title { font-size: var(--wp--preset--font-size--xl); font-weight: 600; line-height: 1.2; letter-spacing: -0.01em; } .boblog-series-card-count { font-size: var(--wp--preset--font-size--2xs); color: rgba(255,255,255,0.8); margin-top: 8px; } /* Series gradient variants */ .boblog-series-card.is-grad-1 { background: linear-gradient(160deg, #1e3a5f, #0a1929); } .boblog-series-card.is-grad-2 { background: linear-gradient(160deg, #5a3a1e, #2d1810); } .boblog-series-card.is-grad-3 { background: linear-gradient(160deg, #1a4d3a, #0a2418); } .boblog-series-card.is-grad-4 { background: linear-gradient(160deg, #3a1a4d, #1a0a2d); } .boblog-series-card.is-grad-5 { background: linear-gradient(160deg, #4d2a1e, #2d150d); } /* ================================================================== CATEGORY TILE ================================================================== */ .boblog-cat-tile { background: var(--wp--preset--color--bg-elevated); border-radius: 12px; border: 1px solid var(--wp--preset--color--border); padding: 24px; text-decoration: none; color: var(--wp--preset--color--text); display: flex; flex-direction: column; gap: 8px; transition: transform var(--duration-fast) var(--easing-out), box-shadow var(--duration-base) var(--easing-out), border-color var(--duration-base) var(--easing-out); } .boblog-cat-tile:hover { transform: translateY(-2px); box-shadow: var(--wp--preset--shadow--md); border-color: var(--wp--preset--color--text); color: var(--wp--preset--color--text); } .boblog-cat-tile-name { font-size: var(--wp--preset--font-size--base); font-weight: 600; letter-spacing: -0.01em; } .boblog-cat-tile-count { font-size: var(--wp--preset--font-size--2xs); color: var(--wp--preset--color--text-muted); text-transform: uppercase; letter-spacing: 0.08em; } /* ================================================================== PROSE — single post body (long-form) ================================================================== */ .boblog-prose { max-width: var(--container-narrow); margin-inline: auto; } .boblog-prose .wp-block-image, .boblog-prose .wp-block-cover { border-radius: 12px; overflow: hidden; } .boblog-prose figure.alignfull, .boblog-prose .alignfull { margin-inline: auto; max-width: var(--container-wide); border-radius: 16px; } /* Pull quote — block:quote with class is-style-pullquote */ .is-style-pullquote.wp-block-quote { font-family: var(--wp--preset--font-family--newsreader); font-style: italic; font-size: clamp(20px, 2vw, 32px); line-height: 1.35; letter-spacing: -0.015em; border-left: none !important; padding-left: 0 !important; text-align: center; margin: 64px auto !important; max-width: 22ch; } .is-style-pullquote.wp-block-quote::before { content: "—"; color: var(--wp--preset--color--text-muted); margin-right: 8px; } .is-style-pullquote.wp-block-quote::after { content: "—"; color: var(--wp--preset--color--text-muted); margin-left: 8px; } /* ================================================================== READING PROGRESS BAR ================================================================== */ .boblog-read-progress { position: fixed; top: 0; left: 0; right: 0; height: 3px; width: 0; background: var(--wp--preset--color--accent); z-index: 9999; /* a header-en (z:50) felül, biztosan látszik */ transition: width 100ms linear; pointer-events: none; } /* ================================================================== TOC SIDEBAR (single, JS-injektált, csak ha van fejléc a poszt-ban) ≥1280px-en a content MELLÉ kerül grid 2. cellájába (mint a mockup-ban): [ prose 720px ] [ gap 48px ] [ TOC 220px ] Sticky a parent .boblog-article-body grid-cellán belül, így a hero kép és article-header után természetesen jelenik meg. ================================================================== */ .boblog-toc-floating { display: none; /* default rejtett (mobile / tablet) */ } @media (min-width: 1280px) { .boblog-article-body { display: grid; grid-template-columns: minmax(0, 720px) 220px; gap: 48px; max-width: calc(720px + 220px + 48px); margin-inline: auto; padding-inline: 24px; align-items: start; } /* A wp:post-content beleilleszkedik az 1. grid cellába, nem 720px max-jára közepre */ .boblog-article-body > .wp-block-post-content, .boblog-article-body > .boblog-prose { max-width: 720px; min-width: 0; padding-inline: 0; margin-inline: 0; } .boblog-toc-floating { display: block; position: sticky; top: calc(var(--header-height) + 32px); max-height: calc(100vh - var(--header-height) - 64px); overflow-y: auto; font-size: var(--wp--preset--font-size--xs); color: var(--wp--preset--color--text-muted); padding-right: 8px; } } .boblog-toc-title { font-size: 11px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.1em; color: var(--wp--preset--color--text); margin-bottom: 12px; } .boblog-toc-floating ul { list-style: none; display: flex; flex-direction: column; gap: 6px; border-left: 1px solid var(--wp--preset--color--border); padding-left: 14px; margin: 0; } .boblog-toc-floating li.is-h3 { padding-left: 12px; font-size: 12px; color: var(--wp--preset--color--text-muted); } .boblog-toc-floating a { color: var(--wp--preset--color--text-muted); display: block; padding: 3px 0; text-decoration: none; line-height: 1.35; transition: color var(--duration-fast) var(--easing-out); } .boblog-toc-floating a:hover { color: var(--wp--preset--color--text); } .boblog-toc-floating a.boblog-toc-active { color: var(--wp--preset--color--accent); font-weight: 500; } /* ================================================================== IMAGE CAPTION — figcaption a poszt content-jén belül ================================================================== */ .wp-block-post-content figure figcaption, .boblog-prose figure figcaption, .wp-block-image figcaption, .wp-block-embed figcaption, figcaption.wp-element-caption { font-size: var(--wp--preset--font-size--xs); color: var(--wp--preset--color--text-muted); text-align: center; margin-top: 8px; line-height: 1.5; font-style: normal; font-family: var(--wp--preset--font-family--inter); max-width: 56ch; margin-inline: auto; padding-inline: 12px; } /* Hero kép (post-featured-image) caption — alulra, halványabb */ .wp-block-post-featured-image figcaption { margin-top: 12px; font-size: var(--wp--preset--font-size--xs); color: var(--wp--preset--color--text-muted); text-align: center; } /* ================================================================== PAGINATION ================================================================== */ .wp-block-query-pagination { display: flex !important; flex-wrap: wrap; justify-content: center; align-items: center; gap: 8px; margin-top: 48px; } .wp-block-query-pagination-numbers .page-numbers, .wp-block-query-pagination-previous, .wp-block-query-pagination-next { min-width: 40px; height: 40px; display: inline-flex; justify-content: center; align-items: center; padding: 0 12px; border-radius: 8px; border: 1px solid var(--wp--preset--color--border); font-size: var(--wp--preset--font-size--xs); color: var(--wp--preset--color--text); font-weight: 500; background: transparent; white-space: nowrap; text-decoration: none; transition: border-color var(--duration-fast) var(--easing-out); } .wp-block-query-pagination-numbers .page-numbers:hover, .wp-block-query-pagination-previous:hover, .wp-block-query-pagination-next:hover { border-color: var(--wp--preset--color--text); } .wp-block-query-pagination-numbers .page-numbers.current { background: var(--wp--preset--color--text); color: var(--wp--preset--color--bg); border-color: var(--wp--preset--color--text); } /* ================================================================== RESPONSIVE — átfogó breakpoint-rendszer (a tokens.css mockup-ban kifejlesztett rendszer átültetve) ================================================================== */ /* === 4K === */ @media (min-width: 3840px) { :root { --container-narrow: 920px; --container-wide: 2800px; } } /* === Ultrawide 21:9 === */ @media (min-aspect-ratio: 21/9) and (min-width: 2560px) { :root { --container-narrow: 760px; --container-wide: min(90vw, 3000px); } } /* === Super ultrawide 32:9 === */ @media (min-aspect-ratio: 32/9) { :root { --container-narrow: 760px; --container-wide: min(82vw, 3400px); } } /* === Tablet portrait (768-1023) === */ @media (min-width: 768px) and (max-width: 1023px) { /* Series: KAPCSOLD KI a horizontal scrollt, normál 3-oszlopos grid (5 series → 3+2) */ .boblog-series-scroller { grid-auto-flow: row; grid-template-columns: repeat(3, 1fr); grid-auto-columns: unset; overflow: visible; scroll-snap-type: none; } .boblog-series-scroller .boblog-series-card { scroll-snap-align: none; } /* Friss posztok / archive listák: 3 → 2 oszlop, hogy a kártya elférjen */ .wp-block-post-template.is-layout-grid, .wp-block-post-template.is-layout-flex { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; } } /* === Mobile (≤640) === */ @media (max-width: 640px) { .boblog-post-card .boblog-card-body { padding: 16px; gap: 8px; } .boblog-toc { display: none; } /* mobil-en a TOC sidebar elrejtve, helyette inline TOC */ } /* === Mobile clamp — top-level layout block-ok 100% === */ @media (max-width: 768px) { main, article, header, footer, section, .wp-block-template-part { max-width: 100%; min-width: 0; } .boblog-prose, .wp-block-post-content { padding-inline: 16px; } } /* === Retina === */ @media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 2dppx) { .boblog-post-card, .boblog-cat-tile { border-color: color-mix(in oklab, var(--wp--preset--color--border) 80%, transparent); } } /* ================================================================== CATEGORY HERO (archive) ================================================================== */ .boblog-cat-hero { position: relative; overflow: hidden; } .boblog-cat-hero::before { content: ""; position: absolute; top: 0; right: 0; width: 50%; height: 100%; background: radial-gradient(circle at 70% 50%, color-mix(in oklab, var(--wp--preset--color--accent) 18%, transparent), transparent 60%); pointer-events: none; } .boblog-cat-hero-grid { position: relative; z-index: 1; display: grid; grid-template-columns: 1.4fr 1fr; gap: 48px; align-items: end; } @media (max-width: 900px) { .boblog-cat-hero-grid { grid-template-columns: 1fr; gap: 24px; } } .boblog-cat-hero-text { display: flex; flex-direction: column; gap: 16px; } .boblog-cat-breadcrumb { font-size: var(--wp--preset--font-size--2xs); text-transform: uppercase; letter-spacing: 0.1em; color: var(--wp--preset--color--text-muted); font-weight: 600; display: flex; gap: 8px; align-items: center; } .boblog-cat-breadcrumb a { color: var(--wp--preset--color--text-muted); text-decoration: none; } .boblog-cat-breadcrumb a:hover { color: var(--wp--preset--color--text); } .boblog-cat-breadcrumb span { color: var(--wp--preset--color--border); } .boblog-cat-title { font-size: clamp(48px, 7vw, 120px); font-weight: 700; line-height: 0.95; letter-spacing: -0.035em; margin: 0; } .boblog-cat-desc { font-size: clamp(17px, 1.4vw, 22px); line-height: 1.55; color: var(--wp--preset--color--text-muted); max-width: 56ch; margin: 0; } .boblog-cat-stats { display: flex; gap: 32px; margin-top: 16px; } .boblog-cat-stat-num { display: block; font-size: clamp(28px, 2.5vw, 40px); font-weight: 600; letter-spacing: -0.02em; } .boblog-cat-stat-label { font-size: var(--wp--preset--font-size--2xs); text-transform: uppercase; letter-spacing: 0.08em; color: var(--wp--preset--color--text-muted); font-weight: 600; } .boblog-cat-sub-list { display: flex; flex-wrap: wrap; gap: 8px; } .boblog-cat-sub-link { font-size: var(--wp--preset--font-size--xs); padding: 6px 14px; background: var(--wp--preset--color--bg-elevated); border-radius: 9999px; color: var(--wp--preset--color--text); border: 1px solid var(--wp--preset--color--border); font-weight: 500; transition: all var(--duration-fast) var(--easing-out); text-decoration: none; } .boblog-cat-sub-link:hover { border-color: var(--wp--preset--color--text); color: var(--wp--preset--color--text); } .boblog-cat-sub-link[aria-current="page"] { background: var(--wp--preset--color--text); color: var(--wp--preset--color--bg); border-color: var(--wp--preset--color--text); } /* ================================================================== FILTER BAR (sticky) ================================================================== */ .boblog-filter-bar { position: sticky; top: var(--header-height); z-index: 20; background: color-mix(in oklab, var(--wp--preset--color--bg) 92%, transparent); backdrop-filter: saturate(1.5) blur(12px); -webkit-backdrop-filter: saturate(1.5) blur(12px); border-bottom: 1px solid var(--wp--preset--color--border); padding: 12px 0; /* Negatív margin a sticky scrollon belül: pixelnyi rés ne látszódjon a header alatt */ margin-top: -1px; } .boblog-filter-bar-inner { max-width: var(--container-wide); margin-inline: auto; padding-inline: 24px; display: flex; align-items: center; gap: 16px; flex-wrap: wrap; } .boblog-filter-count { font-size: var(--wp--preset--font-size--xs); color: var(--wp--preset--color--text-muted); font-weight: 500; } .boblog-filter-count strong { color: var(--wp--preset--color--text); font-weight: 600; } .boblog-filter-spacer { flex: 1 1 auto; } .boblog-filter-control { display: inline-flex; align-items: center; gap: 8px; font-size: var(--wp--preset--font-size--xs); color: var(--wp--preset--color--text); font-weight: 500; } .boblog-filter-select { background: var(--wp--preset--color--bg-elevated); border: 1px solid var(--wp--preset--color--border); border-radius: 8px; padding: 6px 10px; font: inherit; font-size: var(--wp--preset--font-size--xs); color: var(--wp--preset--color--text); cursor: pointer; } .boblog-view-toggle { display: inline-flex; border: 1px solid var(--wp--preset--color--border); border-radius: 8px; overflow: hidden; } .boblog-view-toggle button { padding: 6px 10px; background: transparent; border: 0; color: var(--wp--preset--color--text-muted); cursor: pointer; display: grid; place-items: center; } .boblog-view-toggle button[aria-pressed="true"] { background: var(--wp--preset--color--text); color: var(--wp--preset--color--bg); } .boblog-view-toggle button:hover:not([aria-pressed="true"]) { background: var(--wp--preset--color--bg-elevated); color: var(--wp--preset--color--text); } .boblog-view-toggle svg { width: 16px; height: 16px; stroke: currentColor; fill: none; stroke-width: 2; display: block; } /* === LIST view a Query loop-on === */ .boblog-archive-query[data-view="list"] .wp-block-post-template { display: block !important; } .boblog-archive-query[data-view="list"] .wp-block-post-template > li, .boblog-archive-query[data-view="list"] .wp-block-post-template > article { display: grid; grid-template-columns: 280px 1fr; gap: 24px; background: transparent; box-shadow: none; border: 0; border-bottom: 1px solid var(--wp--preset--color--border); border-radius: 0; padding: 24px 0; transform: none !important; margin-bottom: 0; } .boblog-archive-query[data-view="list"] .boblog-post-card { background: transparent; box-shadow: none; border-radius: 0; } .boblog-archive-query[data-view="list"] .wp-block-post-featured-image { aspect-ratio: 4/3; border-radius: 12px; overflow: hidden; } .boblog-archive-query[data-view="list"] .boblog-card-body { padding: 0; gap: 8px; } .boblog-archive-query[data-view="list"] .wp-block-post-title, .boblog-archive-query[data-view="list"] .wp-block-post-title a { font-size: clamp(20px, 1.5vw, 28px); } @media (max-width: 768px) { .boblog-archive-query[data-view="list"] .wp-block-post-template > li, .boblog-archive-query[data-view="list"] .wp-block-post-template > article { grid-template-columns: 1fr; gap: 12px; } .boblog-archive-query[data-view="list"] .wp-block-post-featured-image { aspect-ratio: 16/10; max-height: 200px; } } /* ================================================================== TAG CLOUD (kategória-archive alja) ================================================================== */ .boblog-tag-cloud .boblog-tag { font-size: var(--wp--preset--font-size--sm); padding: 6px 14px; border-radius: 9999px; background: var(--wp--preset--color--bg-elevated); border: 1px solid var(--wp--preset--color--border); color: var(--wp--preset--color--text); font-weight: 500; text-decoration: none; transition: border-color var(--duration-fast) var(--easing-out); } .boblog-tag-cloud .boblog-tag:hover { border-color: var(--wp--preset--color--text); } .boblog-tag-cloud .boblog-tag.is-big { font-size: var(--wp--preset--font-size--base); font-weight: 600; } .boblog-tag-cloud .boblog-tag.is-md { font-size: var(--wp--preset--font-size--sm); font-weight: 500; } .boblog-tag-cloud .boblog-tag.is-sm { font-size: var(--wp--preset--font-size--xs); color: var(--wp--preset--color--text-muted); } /* ================================================================== SEARCH MODAL — Apple Spotlight-szerű full-screen overlay ================================================================== */ .boblog-search-modal { border: 0; background: transparent; padding: 0; margin: 0; width: 100vw; height: 100vh; max-width: none; max-height: none; color: var(--wp--preset--color--text); } .boblog-search-modal::backdrop { background: color-mix(in oklab, var(--wp--preset--color--bg) 80%, transparent); backdrop-filter: saturate(1.5) blur(20px); -webkit-backdrop-filter: saturate(1.5) blur(20px); } .boblog-search-modal[open] { animation: boblog-search-fade var(--duration-base) var(--easing-out); } @keyframes boblog-search-fade { from { opacity: 0; transform: translateY(-8px); } to { opacity: 1; transform: translateY(0); } } .boblog-search-close { position: absolute; top: 16px; right: 16px; z-index: 1; } .boblog-search-modal-inner { width: 100%; height: 100%; display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 24px; gap: 16px; } .boblog-search-form { width: 100%; max-width: 720px; display: flex; align-items: center; gap: 16px; padding: 12px 16px; border-bottom: 2px solid var(--wp--preset--color--border); transition: border-bottom-color var(--duration-fast) var(--easing-out); } .boblog-search-form:focus-within { border-bottom-color: var(--wp--preset--color--accent); } .boblog-search-icon { width: 32px; height: 32px; color: var(--wp--preset--color--text-muted); flex-shrink: 0; } .boblog-search-input { flex: 1; min-width: 0; font-size: clamp(24px, 4vw, 48px); font-weight: 500; background: transparent; border: 0; color: var(--wp--preset--color--text); padding: 8px 0; outline: none; font-family: var(--wp--preset--font-family--inter); letter-spacing: -0.02em; line-height: 1.2; } .boblog-search-input::placeholder { color: var(--wp--preset--color--text-muted); } .boblog-search-input::-webkit-search-cancel-button, .boblog-search-input::-webkit-search-decoration { -webkit-appearance: none; } .boblog-search-kbd { font-family: var(--wp--preset--font-family--mono); font-size: 11px; color: var(--wp--preset--color--text-muted); border: 1px solid var(--wp--preset--color--border); border-radius: 4px; padding: 2px 8px; background: var(--wp--preset--color--bg-elevated); white-space: nowrap; flex-shrink: 0; } .boblog-search-hint { font-size: 12px; color: var(--wp--preset--color--text-muted); text-align: center; margin-top: 12px; } .boblog-search-hint kbd { font-family: var(--wp--preset--font-family--mono); font-size: 11px; border: 1px solid var(--wp--preset--color--border); border-radius: 4px; padding: 1px 6px; background: var(--wp--preset--color--bg-elevated); color: var(--wp--preset--color--text); margin: 0 2px; } @media (max-width: 640px) { .boblog-search-input { font-size: 22px; } .boblog-search-icon { width: 22px; height: 22px; } .boblog-search-kbd { display: none; } } /* === Mobile drawer (sima