/** * PrestaHU * * NOTICE OF LICENSE * * This source file is subject to the Commercial License * you can't distribute, modify or sell this code * * DISCLAIMER * * Do not edit or add to this file * If you need help please contact info@presta.hu * * @author PrestaHU * @copyright PrestaHU * @license commercial */ /* presta.hu blog: magazin-elrendezés a pshublog lista- és cikkoldalaihoz. Sablonok: themes/prestahu-default/modules/pshublog/views/templates/front/{blog,post}.tpl. Csak --ph-* tokenek; a modul saját pshublog.css-e mellett töltődik, ezért minden szabály #pshublog-root.phb alatt. */ #pshublog-root.phb { --phb-gap: var(--ph-space-6); --phb-aside: 340px; color: var(--ph-ink); padding-bottom: var(--ph-section-sm); } /* ---------- közös elemek ---------- */ #pshublog-root.phb a { color: inherit; } #pshublog-root.phb a:focus-visible { outline: 3px solid var(--ph-focus-ring); outline-offset: 3px; border-radius: 4px; } #pshublog-root.phb .phb-kicker { display: inline-flex; align-items: center; gap: var(--ph-space-2); margin: 0 0 var(--ph-space-2); color: var(--ph-brand-strong); font-size: var(--ph-text-xs); font-weight: 700; letter-spacing: .08em; text-transform: uppercase; } #pshublog-root.phb .phb-kicker::before { content: ""; width: 24px; height: 3px; border-radius: 2px; background: var(--ph-brand); } #pshublog-root.phb .phb-kicker--link { text-decoration: none; } #pshublog-root.phb .phb-kicker--link:hover { color: var(--ph-brand); } #pshublog-root.phb .phb-chip { display: inline-flex; align-items: center; padding: 4px 10px; border-radius: 6px; background: var(--ph-bg); color: var(--ph-brand-strong); font-size: var(--ph-text-xs); font-weight: 700; letter-spacing: .04em; line-height: 1.2; text-transform: uppercase; } #pshublog-root.phb .phb-chip--brand { background: var(--ph-brand); color: var(--ph-brand-ink); } #pshublog-root.phb .phb-meta { color: var(--ph-ink-muted); font-size: var(--ph-text-sm); } /* Rovatcím: kis nagybetűs címke és utána egy vékony vonal. */ #pshublog-root.phb .phb-section-title, #pshublog-root.phb .phb-box__title { display: flex; align-items: center; gap: var(--ph-space-3); margin: 0 0 var(--ph-space-4); font-family: var(--ph-font-display); font-size: var(--ph-text-sm); font-weight: 800; letter-spacing: .06em; line-height: 1; text-transform: uppercase; color: var(--ph-ink); } #pshublog-root.phb .phb-section-title::after, #pshublog-root.phb .phb-box__title::after { content: ""; flex: 1; height: 1px; background: var(--ph-border-strong); } #pshublog-root.phb .phb-muted { color: var(--ph-ink-muted); } /* ---------- fejléc + rovatsáv ---------- */ #pshublog-root.phb .phb-masthead { margin: var(--ph-space-5) 0 var(--ph-space-5); } #pshublog-root.phb .phb-masthead__title { margin: 0; font-family: var(--ph-font-display); font-size: var(--ph-text-2xl); font-weight: 800; letter-spacing: -.015em; line-height: 1.15; color: var(--ph-ink); text-transform: none; overflow-wrap: anywhere; } #pshublog-root.phb .phb-masthead__intro { max-width: 65ch; margin: var(--ph-space-2) 0 0; color: var(--ph-ink-muted); font-size: var(--ph-text-base); line-height: 1.6; } #pshublog-root.phb .phb-sections { margin-top: var(--ph-space-4); border-top: 1px solid var(--ph-border); border-bottom: 1px solid var(--ph-border); } #pshublog-root.phb .phb-sections__list { display: flex; gap: var(--ph-space-5); margin: 0; padding: 0; list-style: none; overflow-x: auto; scrollbar-width: none; } #pshublog-root.phb .phb-sections__list::-webkit-scrollbar { display: none; } #pshublog-root.phb .phb-sections__link { display: inline-flex; align-items: center; min-height: 44px; border-bottom: 3px solid transparent; margin-bottom: -1px; color: var(--ph-ink-muted); font-weight: 600; font-size: var(--ph-text-sm); white-space: nowrap; text-decoration: none; transition: border-color var(--ph-dur-fast) var(--ph-ease-out), color var(--ph-dur-fast) var(--ph-ease-out); } #pshublog-root.phb .phb-sections__link:hover { color: var(--ph-ink); } #pshublog-root.phb .phb-sections__link.is-current { border-bottom-color: var(--ph-brand); color: var(--ph-ink); } /* ---------- vezércikk ---------- */ /* Kép és szöveg egymás mellett, mellettük a következő bejegyzések listája. */ #pshublog-root.phb .phb-lead { display: grid; grid-template-columns: minmax(0, 2fr) minmax(0, 1fr); gap: var(--phb-gap); margin-bottom: var(--ph-space-6); padding-bottom: var(--ph-space-6); border-bottom: 1px solid var(--ph-border); } #pshublog-root.phb .phb-lead--solo { grid-template-columns: minmax(0, 1fr); } #pshublog-root.phb .phb-lead__main { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: var(--ph-space-5); align-items: center; text-decoration: none; } #pshublog-root.phb .phb-lead:not(.phb-lead--solo) .phb-lead__main { grid-template-columns: minmax(0, 1fr); align-items: start; gap: var(--ph-space-4); } #pshublog-root.phb .phb-lead__media { position: relative; display: block; aspect-ratio: 16 / 9; overflow: hidden; border-radius: var(--ph-radius-sm); background: var(--ph-surface-sand); } #pshublog-root.phb .phb-lead__media img { display: block; width: 100%; height: 100%; object-fit: cover; transition: transform var(--ph-dur-slow) var(--ph-ease-out); } #pshublog-root.phb .phb-lead__main:hover .phb-lead__media img { transform: scale(1.02); } #pshublog-root.phb .phb-lead__card { display: flex; flex-direction: column; align-items: flex-start; gap: var(--ph-space-3); min-width: 0; } #pshublog-root.phb .phb-lead__title { font-family: var(--ph-font-display); font-size: clamp(22px, 1.1rem + .7vw, 28px); font-weight: 800; letter-spacing: -.01em; line-height: 1.2; color: var(--ph-ink); overflow-wrap: anywhere; } #pshublog-root.phb .phb-lead__main:hover .phb-lead__title { color: var(--ph-brand-strong); } #pshublog-root.phb .phb-lead__excerpt { color: var(--ph-ink-muted); font-size: var(--ph-text-base); line-height: 1.6; } #pshublog-root.phb .phb-lead__side { display: flex; flex-direction: column; margin: 0; padding: 0; list-style: none; } #pshublog-root.phb .phb-brief { border-bottom: 1px solid var(--ph-border); } #pshublog-root.phb .phb-brief:last-child { border-bottom: 0; } #pshublog-root.phb .phb-brief__link { display: flex; flex-direction: column; gap: var(--ph-space-1); padding: var(--ph-space-3) 0; text-decoration: none; } #pshublog-root.phb .phb-brief__link:hover .phb-brief__title { color: var(--ph-brand-strong); } #pshublog-root.phb .phb-brief__cat { color: var(--ph-brand-strong); font-size: var(--ph-text-xs); font-weight: 700; letter-spacing: .04em; text-transform: uppercase; } #pshublog-root.phb .phb-brief__title { font-family: var(--ph-font-display); font-size: 17px; font-weight: 700; line-height: 1.3; color: var(--ph-ink); } /* ---------- lista + oldalsáv ---------- */ #pshublog-root.phb .phb-layout { display: grid; grid-template-columns: minmax(0, 1fr) var(--phb-aside); gap: var(--ph-space-6); align-items: start; } #pshublog-root.phb .phb-layout--single { grid-template-columns: minmax(0, 1fr); } #pshublog-root.phb .phb-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--ph-space-5) var(--ph-space-5); } #pshublog-root.phb .phb-card { min-width: 0; } #pshublog-root.phb .phb-card__link { display: flex; flex-direction: column; height: 100%; text-decoration: none; } #pshublog-root.phb .phb-card__media { position: relative; display: flex; align-items: center; justify-content: center; aspect-ratio: 16 / 10; border-radius: 10px; background: var(--ph-surface-sand); color: var(--ph-ink-subtle); } #pshublog-root.phb .phb-card__media img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; border-radius: inherit; transition: transform var(--ph-dur-slow) var(--ph-ease-out); } #pshublog-root.phb .phb-card__media { overflow: hidden; } #pshublog-root.phb .phb-card__link:hover .phb-card__media img { transform: scale(1.03); } #pshublog-root.phb .phb-card__chip { position: absolute; left: var(--ph-space-3); bottom: 0; max-width: calc(100% - 24px); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; border-radius: 6px 6px 0 0; } #pshublog-root.phb .phb-card__body { display: flex; flex-direction: column; gap: var(--ph-space-2); padding-top: var(--ph-space-3); } #pshublog-root.phb .phb-card__part { margin: 0; color: var(--ph-brand-strong); font-size: var(--ph-text-xs); font-weight: 700; text-transform: uppercase; letter-spacing: .06em; } #pshublog-root.phb .phb-card__title { font-family: var(--ph-font-display); font-size: 17px; font-weight: 700; line-height: 1.3; color: var(--ph-ink); overflow-wrap: anywhere; } #pshublog-root.phb .phb-card__link:hover .phb-card__title { color: var(--ph-brand-strong); } #pshublog-root.phb .phb-card__excerpt { display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; color: var(--ph-ink-muted); font-size: var(--ph-text-sm); line-height: 1.55; } #pshublog-root.phb .phb-card .phb-meta { margin-top: auto; padding-top: var(--ph-space-1); font-size: var(--ph-text-xs); } #pshublog-root.phb .phb-empty { display: flex; flex-direction: column; align-items: center; gap: var(--ph-space-3); margin: 0 0 var(--ph-space-6); padding: var(--ph-space-6) var(--ph-space-5); border: 0; border-radius: var(--ph-radius-md); background: var(--ph-surface-cream); color: var(--ph-ink-muted); text-align: center; } #pshublog-root.phb .phb-empty__icon { color: var(--ph-brand); } #pshublog-root.phb .phb-empty__text { margin: 0; font-size: var(--ph-text-md); } #pshublog-root.phb .phb-layout__aside, #pshublog-root.phb .phb-article__aside { position: sticky; top: var(--ph-space-6); display: flex; flex-direction: column; gap: var(--ph-space-6); min-width: 0; } /* Frissítés-ajánló a jobb sávban. */ #pshublog-root.phb .phb-side-cta { padding: var(--ph-space-5); border-radius: var(--ph-radius-md); background: var(--ph-surface-mint); } #pshublog-root.phb .phb-side-cta__title { margin: 0 0 var(--ph-space-2); font-family: var(--ph-font-display); font-size: var(--ph-text-lg); font-weight: 800; line-height: 1.25; color: var(--ph-ink); } #pshublog-root.phb .phb-side-cta__text { margin: 0 0 var(--ph-space-4); color: var(--ph-ink-muted); font-size: var(--ph-text-sm); line-height: 1.5; } #pshublog-root.phb .phb-side-cta__button { width: 100%; justify-content: center; color: var(--ph-brand-ink); text-decoration: none; } #pshublog-root.phb .phb-side-cta__button:hover { color: var(--ph-brand-ink); } #pshublog-root.phb .phb-box { min-width: 0; } #pshublog-root.phb .phb-ranked { margin: 0; padding: 0; list-style: none; counter-reset: phb-rank; } #pshublog-root.phb .phb-ranked__item { counter-increment: phb-rank; border-bottom: 1px solid var(--ph-border); } #pshublog-root.phb .phb-ranked__item:last-child { border-bottom: 0; } #pshublog-root.phb .phb-ranked__link { display: grid; grid-template-columns: 28px minmax(0, 1fr); gap: var(--ph-space-2); align-items: baseline; padding: var(--ph-space-3) 0; font-size: 15px; font-weight: 600; line-height: 1.35; text-decoration: none; color: var(--ph-ink); } #pshublog-root.phb .phb-ranked__link::before { content: counter(phb-rank); font-family: var(--ph-font-display); font-size: 22px; font-weight: 800; line-height: 1; color: var(--ph-brand); } #pshublog-root.phb .phb-ranked__link:hover { color: var(--ph-brand-strong); } #pshublog-root.phb .phb-tags { display: flex; flex-wrap: wrap; gap: var(--ph-space-2); margin: 0; padding: 0; list-style: none; } #pshublog-root.phb .phb-tag { display: inline-flex; align-items: center; min-height: 32px; padding: 0 var(--ph-space-3); border: 1px solid var(--ph-border-strong); border-radius: var(--ph-radius-pill); background: var(--ph-bg); color: var(--ph-ink); font-size: var(--ph-text-sm); text-decoration: none; } #pshublog-root.phb .phb-tag:hover { border-color: var(--ph-brand); color: var(--ph-brand-strong); } #pshublog-root.phb .phb-products { display: flex; flex-direction: column; gap: var(--ph-space-2); margin: 0; padding: 0; list-style: none; } #pshublog-root.phb .phb-product__link { display: grid; grid-template-columns: 64px minmax(0, 1fr); gap: var(--ph-space-3); align-items: center; padding: var(--ph-space-2); border-radius: var(--ph-radius-sm); text-decoration: none; transition: background-color var(--ph-dur-fast) var(--ph-ease-out); } #pshublog-root.phb .phb-product__link:hover { background: var(--ph-surface-mint); } #pshublog-root.phb .phb-product__img { width: 64px; height: 64px; object-fit: contain; border-radius: 10px; background: var(--ph-bg); border: 1px solid var(--ph-border); } #pshublog-root.phb .phb-product__text { display: flex; flex-direction: column; gap: 2px; min-width: 0; } #pshublog-root.phb .phb-product__name { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; font-size: var(--ph-text-sm); font-weight: 600; line-height: 1.35; color: var(--ph-ink); } #pshublog-root.phb .phb-product__price { color: var(--ph-brand-strong); font-size: var(--ph-text-sm); font-weight: 700; } /* ---------- cikkoldal ---------- */ #pshublog-root.phb .phb-article__head { max-width: 860px; margin: var(--ph-space-5) 0 var(--ph-space-5); } #pshublog-root.phb .phb-article__title { margin: 0; font-family: var(--ph-font-display); font-size: clamp(26px, 1.3rem + 1vw, 36px); font-weight: 800; letter-spacing: -.015em; line-height: 1.18; color: var(--ph-ink); text-transform: none; overflow-wrap: anywhere; } #pshublog-root.phb .phb-article__lead { max-width: 70ch; margin: var(--ph-space-3) 0 0; color: var(--ph-ink-muted); font-size: var(--ph-text-md); line-height: 1.55; } #pshublog-root.phb .phb-article__meta { margin: var(--ph-space-4) 0 0; color: var(--ph-ink-muted); font-size: var(--ph-text-sm); } #pshublog-root.phb .phb-article__author { display: inline-flex; align-items: center; gap: var(--ph-space-2); font-weight: 600; color: var(--ph-ink); } #pshublog-root.phb .phb-article__author a { text-decoration: none; } #pshublog-root.phb .phb-article__avatar { width: 40px; height: 40px; border-radius: 50%; object-fit: cover; } #pshublog-root.phb .phb-article__hero { margin: 0 0 var(--ph-space-6); overflow: hidden; border-radius: var(--ph-radius-sm); background: var(--ph-surface-sand); } #pshublog-root.phb .phb-article__hero img { display: block; width: 100%; height: auto; aspect-ratio: 16 / 9; max-height: 520px; object-fit: cover; } /* Egy oldalsáv, jobbra: a fő hasáb a fejléc bal szélénél kezdődik, a tartalomjegyzék és a jobb sáv dobozai egymás alatt a jobb oldalon. Keskeny képernyőn a tartalomjegyzék a szöveg elé, a jobb sáv utána kerül. */ #pshublog-root.phb .phb-article__layout { display: grid; grid-template-columns: minmax(0, 1fr) 320px; grid-template-rows: auto 1fr; grid-template-areas: "main nav" "main aside"; column-gap: var(--ph-space-7); row-gap: var(--ph-space-6); align-items: start; } #pshublog-root.phb .phb-article__layout--no-nav { grid-template-areas: "main aside" "main aside"; } #pshublog-root.phb .phb-article__nav { grid-area: nav; display: flex; flex-direction: column; gap: var(--ph-space-5); min-width: 0; padding: var(--ph-space-4) var(--ph-space-5); border-radius: var(--ph-radius-md); background: var(--ph-surface-cream); } #pshublog-root.phb .phb-article__main { grid-area: main; min-width: 0; } #pshublog-root.phb .phb-article__aside { grid-area: aside; } #pshublog-root.phb .phb-toc { margin: 0; padding: 0; border: 0; background: none; } #pshublog-root.phb .phb-toc__title { display: block; margin: 0 0 var(--ph-space-3); cursor: pointer; list-style: none; font-size: var(--ph-text-xs); font-weight: 800; letter-spacing: .08em; text-transform: uppercase; color: var(--ph-ink); } #pshublog-root.phb .phb-toc__title::-webkit-details-marker { display: none; } #pshublog-root.phb .phb-toc__list { margin: 0; padding: 0; list-style: none; border-left: 2px solid var(--ph-border); } #pshublog-root.phb .phb-toc__list li { margin: 0; } #pshublog-root.phb .phb-toc__list a { display: block; margin-left: -2px; padding: 6px 0 6px var(--ph-space-4); border-left: 2px solid transparent; color: var(--ph-ink-muted); font-size: var(--ph-text-sm); line-height: 1.4; text-decoration: none; } #pshublog-root.phb .phb-toc__list .pshublog-toc__item--h3 a { padding-left: var(--ph-space-6); font-size: var(--ph-text-xs); } #pshublog-root.phb .phb-toc__list a:hover { border-left-color: var(--ph-brand); color: var(--ph-ink); } /* Szöveg: 17 px, 60–75 karakteres sor. */ #pshublog-root.phb .phb-prose { font-size: 17px; line-height: 1.7; color: var(--ph-ink); } #pshublog-root.phb .phb-prose > :first-child { margin-top: 0; } #pshublog-root.phb .phb-prose p { margin: 0 0 1.15em; } #pshublog-root.phb .phb-prose h2 { margin: 1.7em 0 .55em; font-family: var(--ph-font-display); font-size: 24px; font-weight: 800; letter-spacing: -.01em; line-height: 1.2; color: var(--ph-ink); } #pshublog-root.phb .phb-prose h3 { margin: 1.5em 0 .5em; font-family: var(--ph-font-display); font-size: 19px; font-weight: 700; line-height: 1.3; color: var(--ph-ink); } #pshublog-root.phb .phb-prose a { color: var(--ph-brand-strong); text-decoration: underline; text-underline-offset: 3px; } #pshublog-root.phb .phb-prose a:hover { color: var(--ph-brand); } #pshublog-root.phb .phb-prose ul, #pshublog-root.phb .phb-prose ol { margin: 0 0 1.15em; padding-left: 1.4em; } #pshublog-root.phb .phb-prose ul { list-style: disc; } #pshublog-root.phb .phb-prose ol { list-style: decimal; } #pshublog-root.phb .phb-prose li { margin: 0 0 .45em; padding-left: .2em; } #pshublog-root.phb .phb-prose li::marker { color: var(--ph-brand); font-weight: 700; } #pshublog-root.phb .phb-prose strong { font-weight: 700; color: var(--ph-ink); } #pshublog-root.phb .phb-prose blockquote { margin: 1.5em 0; padding: var(--ph-space-4) var(--ph-space-5); border-left: 4px solid var(--ph-brand); border-radius: 0 var(--ph-radius-sm) var(--ph-radius-sm) 0; background: var(--ph-surface-mint); font-size: var(--ph-text-md); } #pshublog-root.phb .phb-prose blockquote > :last-child { margin-bottom: 0; } #pshublog-root.phb .phb-prose figure { margin: 1.8em 0; } #pshublog-root.phb .phb-prose figure img, #pshublog-root.phb .phb-prose > p > img { display: block; width: 100%; height: auto; border-radius: 10px; border: 1px solid var(--ph-border); } #pshublog-root.phb .phb-prose figcaption { margin-top: var(--ph-space-2); color: var(--ph-ink-muted); font-size: var(--ph-text-sm); line-height: 1.5; } #pshublog-root.phb .phb-prose hr { margin: 2em 0; border: 0; border-top: 1px solid var(--ph-border); } #pshublog-root.phb .phb-prose .phb-table-wrap { margin: 1.5em 0; overflow-x: auto; border: 1px solid var(--ph-border); border-radius: var(--ph-radius-sm); } #pshublog-root.phb .phb-prose table { width: 100%; margin: 0; border-collapse: collapse; font-size: var(--ph-text-sm); line-height: 1.45; } #pshublog-root.phb .phb-prose th { padding: var(--ph-space-3); background: var(--ph-surface-sand); color: var(--ph-ink); font-weight: 700; text-align: left; white-space: nowrap; } #pshublog-root.phb .phb-prose td { padding: var(--ph-space-3); border-top: 1px solid var(--ph-border); vertical-align: top; } #pshublog-root.phb .phb-prose tbody tr:nth-child(even) td { background: var(--ph-surface-cream); } html body #pshublog-root.phb .phb-prose code, html body #pshublog-root.phb .phb-prose pre, html body #pshublog-root.phb .phb-prose pre * { font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace !important; } #pshublog-root.phb .phb-prose :not(pre) > code { padding: 2px 6px; border-radius: 6px; background: var(--ph-surface-sand); font-size: .88em; } /* A bejegyzés szövegébe tehető blokkok (a szerkesztőben HTML-ként). */ #pshublog-root.phb .phb-prose .phb-note { margin: 1.5em 0; padding: var(--ph-space-4) var(--ph-space-5); border-left: 4px solid var(--ph-warning); border-radius: 0 var(--ph-radius-sm) var(--ph-radius-sm) 0; background: var(--ph-warning-soft); } #pshublog-root.phb .phb-prose .phb-note > :last-child { margin-bottom: 0; } #pshublog-root.phb .phb-prose .phb-facts { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: var(--ph-space-3); margin: 1.5em 0; padding: 0; list-style: none; } #pshublog-root.phb .phb-prose .phb-facts li { margin: 0; padding: var(--ph-space-4); border-radius: var(--ph-radius-sm); background: var(--ph-surface-cream); font-size: var(--ph-text-sm); line-height: 1.4; } #pshublog-root.phb .phb-prose .phb-facts li::marker { content: none; } #pshublog-root.phb .phb-prose .phb-facts b { display: block; margin-bottom: 2px; font-family: var(--ph-font-display); font-size: var(--ph-text-xl); font-weight: 800; color: var(--ph-ink); } #pshublog-root.phb .phb-prose .phb-cta { margin: 2em 0; padding: var(--ph-space-5) var(--ph-space-6); border: 1px solid color-mix(in oklch, var(--ph-brand) 28%, transparent); border-radius: var(--ph-radius-sm); background: var(--ph-surface-mint); color: var(--ph-ink); } #pshublog-root.phb .phb-prose .phb-cta h2, #pshublog-root.phb .phb-prose .phb-cta h3 { margin: 0 0 var(--ph-space-2); color: var(--ph-ink); } #pshublog-root.phb .phb-prose .phb-cta .phb-cta__title { margin: 0 0 var(--ph-space-1); font-family: var(--ph-font-display); font-size: 20px; font-weight: 800; line-height: 1.25; color: var(--ph-ink); } #pshublog-root.phb .phb-prose .phb-cta p { margin: 0 0 var(--ph-space-4); color: var(--ph-ink-muted); } #pshublog-root.phb .phb-prose .phb-cta p:last-child { margin-bottom: 0; } #pshublog-root.phb .phb-prose .phb-cta a.ph-btn { color: var(--ph-brand-ink); text-decoration: none; } #pshublog-root.phb .phb-prose .phb-cta a.ph-btn:hover { color: var(--ph-brand-ink); } /* Állapot-kártyák (pl. melyik verziót mennyire érinti): színes sáv + félkövér címke, nem csak szín. */ #pshublog-root.phb .phb-prose .phb-status { display: grid; gap: var(--ph-space-3); margin: 1.2em 0 1.5em; padding: 0; list-style: none; } #pshublog-root.phb .phb-prose .phb-status__item { margin: 0; padding: var(--ph-space-4) var(--ph-space-5); border-left: 4px solid var(--ph-border-strong); border-radius: 0 10px 10px 0; background: var(--ph-surface-cream); font-size: 16px; line-height: 1.55; } #pshublog-root.phb .phb-prose .phb-status__item::marker { content: none; } #pshublog-root.phb .phb-prose .phb-status__item b { display: block; margin-bottom: 2px; font-family: var(--ph-font-display); font-size: 17px; font-weight: 800; color: var(--ph-ink); } #pshublog-root.phb .phb-prose .phb-status__item--ok { border-left-color: var(--ph-brand); background: var(--ph-surface-mint); } #pshublog-root.phb .phb-prose .phb-status__item--warn { border-left-color: var(--ph-warning); background: var(--ph-warning-soft); } #pshublog-root.phb .phb-prose .phb-status__item--bad { border-left-color: var(--ph-danger); background: var(--ph-danger-soft); } #pshublog-root.phb .phb-prose .phb-sources { margin-top: 2em; padding-top: var(--ph-space-3); border-top: 1px solid var(--ph-border); color: var(--ph-ink-muted); font-size: var(--ph-text-sm); line-height: 1.6; } #pshublog-root.phb .phb-prose .phb-sources a { color: var(--ph-ink-muted); } /* „Magyarán mondva” doboz: a technikai cikk lényege szakszavak nélkül, gombra nyílik (natív details/summary). Benne opcionálisan másolható szöveg (pl. kérdés a tárhelyszolgáltatónak), a másolást a blog.js végzi. */ #pshublog-root.phb .phb-prose .phb-plain { margin: 1.5em 0 2em; border: 1px solid color-mix(in oklch, var(--ph-brand) 28%, transparent); border-radius: var(--ph-radius-md); background: var(--ph-surface-mint); color: var(--ph-ink); } #pshublog-root.phb .phb-prose .phb-plain__toggle { display: flex; align-items: center; gap: var(--ph-space-4); padding: var(--ph-space-4) var(--ph-space-5); border-radius: var(--ph-radius-md); cursor: pointer; list-style: none; } #pshublog-root.phb .phb-prose .phb-plain__toggle::-webkit-details-marker { display: none; } #pshublog-root.phb .phb-prose .phb-plain__toggle::after { content: ""; flex: 0 0 auto; width: 10px; height: 10px; margin: 0 var(--ph-space-1) 4px auto; border-right: 2px solid currentColor; border-bottom: 2px solid currentColor; transform: rotate(45deg); transition: transform var(--ph-dur) var(--ph-ease-out); } #pshublog-root.phb .phb-prose .phb-plain[open] > .phb-plain__toggle::after { margin-bottom: -4px; transform: rotate(-135deg); } #pshublog-root.phb .phb-prose .phb-plain__toggle:hover .phb-plain__title { color: var(--ph-brand-strong); } #pshublog-root.phb .phb-prose .phb-plain__toggle:focus-visible { outline: 3px solid var(--ph-focus-ring); outline-offset: 2px; } #pshublog-root.phb .phb-prose .phb-plain__icon { display: inline-flex; flex: 0 0 44px; align-items: center; justify-content: center; width: 44px; height: 44px; border-radius: var(--ph-radius-pill); background: var(--ph-brand); color: var(--ph-brand-ink); } #pshublog-root.phb .phb-prose .phb-plain__icon svg { width: 22px; height: 22px; } #pshublog-root.phb .phb-prose .phb-plain__text { display: flex; flex-direction: column; gap: 2px; min-width: 0; } #pshublog-root.phb .phb-prose .phb-plain__kicker { color: var(--ph-brand-strong); font-size: var(--ph-text-xs); font-weight: 700; letter-spacing: .04em; text-transform: uppercase; } #pshublog-root.phb .phb-prose .phb-plain__title { font-family: var(--ph-font-display); font-size: 19px; font-weight: 800; line-height: 1.3; color: var(--ph-ink); transition: color var(--ph-dur-fast) var(--ph-ease-out); } #pshublog-root.phb .phb-prose .phb-plain__body { padding: 0 var(--ph-space-5) var(--ph-space-5); } #pshublog-root.phb .phb-prose .phb-plain__body > :first-child { margin-top: 0; } #pshublog-root.phb .phb-prose .phb-plain__body > :last-child { margin-bottom: 0; } #pshublog-root.phb .phb-prose .phb-copy { margin: var(--ph-space-4) 0 0; padding: var(--ph-space-4); border: 1px solid var(--ph-border); border-radius: var(--ph-radius-sm); background: var(--ph-bg); } #pshublog-root.phb .phb-prose .phb-copy__label { margin: 0 0 var(--ph-space-1); color: var(--ph-ink-muted); font-size: var(--ph-text-xs); font-weight: 700; letter-spacing: .04em; text-transform: uppercase; } #pshublog-root.phb .phb-prose .phb-copy__text { margin: 0 0 var(--ph-space-3); font-weight: 600; } #pshublog-root.phb .phb-prose .phb-copy__actions { display: flex; flex-wrap: wrap; align-items: center; gap: var(--ph-space-3); } #pshublog-root.phb .phb-prose .phb-copy__button { display: inline-flex; align-items: center; min-height: 44px; padding: 0 var(--ph-space-5); border: 1px solid var(--ph-brand); border-radius: var(--ph-radius-pill); background: var(--ph-bg); color: var(--ph-brand-strong); font: inherit; font-size: var(--ph-text-sm); font-weight: 700; cursor: pointer; transition: background-color var(--ph-dur-fast) var(--ph-ease-out); } #pshublog-root.phb .phb-prose .phb-copy__button:hover { background: var(--ph-surface-mint); } #pshublog-root.phb .phb-prose .phb-copy__button:focus-visible { outline: 3px solid var(--ph-focus-ring); outline-offset: 2px; } #pshublog-root.phb .phb-prose .phb-plain__toggle:focus:not(:focus-visible), #pshublog-root.phb .phb-prose .phb-copy__button:focus:not(:focus-visible) { outline: none; } #pshublog-root.phb .phb-prose .phb-copy__status { color: var(--ph-brand-strong); font-size: var(--ph-text-sm); font-weight: 600; } @media (max-width: 575.98px) { #pshublog-root.phb .phb-prose .phb-plain__toggle { gap: var(--ph-space-3); padding: var(--ph-space-4); } #pshublog-root.phb .phb-prose .phb-plain__body { padding: 0 var(--ph-space-4) var(--ph-space-4); } #pshublog-root.phb .phb-prose .phb-plain__title { font-size: 17px; } } @media (prefers-reduced-motion: reduce) { #pshublog-root.phb .phb-prose .phb-plain__toggle::after { transition: none; } } /* Nagyítható kép a szövegben: nagyító-jel a jobb alsó sarokban. */ #pshublog-root.phb .phb-prose img.phb-zoomable { cursor: zoom-in; transition: box-shadow var(--ph-dur-fast) var(--ph-ease-out); } #pshublog-root.phb .phb-prose img.phb-zoomable:hover { box-shadow: 0 0 0 3px var(--ph-brand-soft); } #pshublog-root.phb .phb-prose figure:has(> img.phb-zoomable) { position: relative; } #pshublog-root.phb .phb-prose figure:has(> img.phb-zoomable)::before { content: ""; position: absolute; right: 12px; top: 12px; width: 40px; height: 40px; pointer-events: none; border-radius: 50%; background: var(--ph-bg); box-shadow: var(--ph-shadow-md); } #pshublog-root.phb .phb-prose figure:has(> img.phb-zoomable)::after { content: ""; position: absolute; right: 21px; top: 21px; width: 22px; height: 22px; pointer-events: none; background: var(--ph-brand-strong); -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round'%3E%3Ccircle cx='10.5' cy='10.5' r='6.5'/%3E%3Cpath d='M15.5 15.5 21 21M10.5 7.5v6M7.5 10.5h6'/%3E%3C/svg%3E") center / contain no-repeat; mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round'%3E%3Ccircle cx='10.5' cy='10.5' r='6.5'/%3E%3Cpath d='M15.5 15.5 21 21M10.5 7.5v6M7.5 10.5h6'/%3E%3C/svg%3E") center / contain no-repeat; } /* Képnézegető nagyítással (a működés a blog.js-ben): a kép transzformmal nagyul, a felirat és a tipp nagyítva rejtett, de a helyét megtartja, hogy a kép ne ugorjon. Gesztus közben a böngésző saját nagyítása és görgetése ki van kapcsolva. */ #pshublog-root.phb .phb-zoom .pshublog-lightbox__frame { touch-action: none; } #pshublog-root.phb .phb-zoom .pshublog-lightbox__image { position: relative; z-index: 1; touch-action: none; transform-origin: 50% 50%; cursor: zoom-in; -webkit-user-drag: none; } #pshublog-root.phb .phb-zoom .pshublog-lightbox__image.is-animating { transition: transform var(--ph-dur-fast) var(--ph-ease-out); } #pshublog-root.phb .phb-zoom.is-zoomed .pshublog-lightbox__image { cursor: grab; } #pshublog-root.phb .phb-zoom.is-panning .pshublog-lightbox__image { cursor: grabbing; } /* a gomb a nagyított (gyakran fehér) kép fölött is látszik: telt sötét háttér, világos keret */ #pshublog-root.phb .phb-zoom .pshublog-lightbox__button { z-index: 2; background: color-mix(in oklch, var(--ph-ink) 78%, transparent); color: var(--ph-bg); box-shadow: 0 0 0 1px color-mix(in oklch, var(--ph-bg) 28%, transparent); } #pshublog-root.phb .phb-zoom .pshublog-lightbox__button:hover:not(:disabled) { background: var(--ph-ink); } #pshublog-root.phb .phb-zoom__button--in { top: 8px; right: 64px; } #pshublog-root.phb .phb-zoom__button--out { top: 8px; right: 120px; } #pshublog-root.phb .phb-zoom__button:disabled { opacity: .4; cursor: default; } #pshublog-root.phb .phb-zoom__hint { display: none; margin: var(--ph-space-2) 0 0; font-size: var(--ph-text-sm); line-height: 1.4; text-align: center; color: color-mix(in oklch, var(--ph-bg) 72%, transparent); } #pshublog-root.phb .phb-zoom.is-zoomed .pshublog-lightbox__caption, #pshublog-root.phb .phb-zoom.is-zoomed .phb-zoom__hint, #pshublog-root.phb .phb-zoom.is-zoomed .pshublog-lightbox__counter { visibility: hidden; } @media (pointer: coarse) { #pshublog-root.phb .phb-zoom__hint { display: block; } } /* Lebegő ChatGPT-gomb a bejegyzés oldalán, a jobb szélen függőlegesen középen: a tartalom melletti szabad sávban felirattal, ha ott nem fér el, a jobb szélhez simuló fül. */ #pshublog-root.phb .phb-ai { position: fixed; right: var(--ph-space-5); top: 50%; z-index: 1020; transform: translateY(-50%); display: flex; flex-direction: column; align-items: flex-end; gap: var(--ph-space-2); } #pshublog-root.phb .phb-ai[hidden] { display: none; } #pshublog-root.phb .phb-ai__button { display: inline-flex; align-items: center; gap: var(--ph-space-3); min-height: 52px; padding: var(--ph-space-2) var(--ph-space-2) var(--ph-space-2) var(--ph-space-4); border: var(--ph-border-w) solid var(--ph-border); border-radius: var(--ph-radius-pill); background: var(--ph-bg); color: var(--ph-ink); box-shadow: var(--ph-shadow-md); text-decoration: none; transition: transform var(--ph-dur) var(--ph-ease-out), box-shadow var(--ph-dur) var(--ph-ease-out); } #pshublog-root.phb .phb-ai__button:hover, #pshublog-root.phb .phb-ai__button:focus { color: var(--ph-ink); text-decoration: none; transform: translateY(-2px); box-shadow: var(--ph-shadow-lg); } #pshublog-root.phb .phb-ai__button:focus-visible { outline: 2px solid var(--ph-brand); outline-offset: 3px; } #pshublog-root.phb .phb-ai__text { display: flex; flex-direction: column; line-height: 1.15; text-align: right; } #pshublog-root.phb .phb-ai__kicker { color: var(--ph-ink-muted); font-size: var(--ph-text-xs); font-weight: 600; } #pshublog-root.phb .phb-ai__name { font-family: var(--ph-font-display); font-size: var(--ph-text-sm); font-weight: 800; } #pshublog-root.phb .phb-ai__logo { display: inline-flex; align-items: center; justify-content: center; flex: 0 0 auto; width: 40px; height: 40px; border-radius: 50%; background: var(--ph-ink); color: var(--ph-bg); } #pshublog-root.phb .phb-ai__logo svg { width: 22px; height: 22px; } #pshublog-root.phb .phb-ai__status:empty { display: none; } #pshublog-root.phb .phb-ai__status { max-width: 260px; margin: 0; padding: var(--ph-space-2) var(--ph-space-3); border-radius: var(--ph-radius-md); background: var(--ph-ink); color: var(--ph-bg); font-size: var(--ph-text-xs); line-height: 1.4; box-shadow: var(--ph-shadow-md); } /* Keskeny képernyőn a jobb szélhez simuló fül függőleges felirattal (a logó egyedül nem elég beszédes); a blog.js kapcsolja a szabad hely alapján. */ #pshublog-root.phb .phb-ai--compact { right: 0; } #pshublog-root.phb .phb-ai--compact .phb-ai__button { flex-direction: column; gap: var(--ph-space-2); min-height: 0; padding: var(--ph-space-2) var(--ph-space-1) var(--ph-space-3); border-right: 0; border-radius: var(--ph-radius-md) 0 0 var(--ph-radius-md); } #pshublog-root.phb .phb-ai--compact .phb-ai__button:hover, #pshublog-root.phb .phb-ai--compact .phb-ai__button:focus { transform: translateX(-2px); } #pshublog-root.phb .phb-ai--compact .phb-ai__logo { order: -1; width: 26px; height: 26px; } #pshublog-root.phb .phb-ai--compact .phb-ai__logo svg { width: 16px; height: 16px; } #pshublog-root.phb .phb-ai--compact .phb-ai__text { display: block; writing-mode: vertical-rl; transform: rotate(180deg); line-height: 1; white-space: nowrap; text-align: left; } #pshublog-root.phb .phb-ai--compact .phb-ai__kicker, #pshublog-root.phb .phb-ai--compact .phb-ai__name { display: inline; font-size: var(--ph-text-xs); } #pshublog-root.phb .phb-ai--compact .phb-ai__name { margin-inline-start: var(--ph-space-1); } #pshublog-root.phb .phb-ai--compact .phb-ai__status { margin-right: var(--ph-space-2); } @media (prefers-reduced-motion: reduce) { #pshublog-root.phb .phb-ai__button { transition: none; } #pshublog-root.phb .phb-ai__button:hover, #pshublog-root.phb .phb-ai__button:focus, #pshublog-root.phb .phb-ai--compact .phb-ai__button:hover, #pshublog-root.phb .phb-ai--compact .phb-ai__button:focus { transform: none; } } #pshublog-root.phb .phb-article__tags { margin-top: var(--ph-space-6); } #pshublog-root.phb .phb-share { margin-top: var(--ph-space-5); } #pshublog-root.phb .phb-article__author-box { margin-top: var(--ph-space-7); } #pshublog-root.phb .pshublog-comments { margin-top: var(--ph-space-7); padding: 0; border: 0; background: none; } #pshublog-root.phb .pshublog-newsletter { margin-top: var(--ph-space-6); } /* ---------- szélességek ---------- */ @media (max-width: 1199px) { #pshublog-root.phb { --phb-aside: 300px; } #pshublog-root.phb .phb-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } #pshublog-root.phb .phb-article__layout { grid-template-columns: minmax(0, 1fr) 280px; column-gap: var(--ph-space-6); } } @media (max-width: 991px) { #pshublog-root.phb { --phb-gap: var(--ph-space-5); } #pshublog-root.phb .phb-lead, #pshublog-root.phb .phb-layout, #pshublog-root.phb .phb-article__layout { grid-template-columns: minmax(0, 1fr); grid-template-rows: auto; grid-template-areas: "nav" "main" "aside"; } #pshublog-root.phb .phb-article__layout--no-nav { grid-template-areas: "main" "aside"; } #pshublog-root.phb .phb-article__aside { position: static; } #pshublog-root.phb .phb-lead__main { grid-template-columns: minmax(0, 1fr); gap: var(--ph-space-4); } } @media (max-width: 575px) { #pshublog-root.phb .phb-grid { grid-template-columns: minmax(0, 1fr); } #pshublog-root.phb .phb-masthead { margin-top: var(--ph-space-3); } #pshublog-root.phb .phb-lead__title { font-size: 22px; } #pshublog-root.phb .phb-article__hero { margin-left: calc(-1 * var(--ph-space-3)); margin-right: calc(-1 * var(--ph-space-3)); border-radius: 0; } #pshublog-root.phb .phb-prose .phb-cta { padding: var(--ph-space-4); } #pshublog-root.phb .phb-prose { font-size: 16px; } #pshublog-root.phb .phb-prose th { white-space: normal; } #pshublog-root.phb .phb-prose th, #pshublog-root.phb .phb-prose td { padding: var(--ph-space-2); } } @media (prefers-reduced-motion: reduce) { #pshublog-root.phb .phb-lead__media img, #pshublog-root.phb .phb-card__media img { transition: none; } #pshublog-root.phb .phb-lead__main:hover .phb-lead__media img, #pshublog-root.phb .phb-card__link:hover .phb-card__media img { transform: none; } }