/**
* A főoldal szekcióinak elrendezése.
*
* Csak az kerül ide, amit blokkattribútummal nem lehet kifejezni: abszolút
* pozicionálás, töréspontok, egymásra lógó elemek. Minden más (betűméret,
* szín, térköz) a theme.json dolga — ha itt színkódot vagy nyers pixelméretet
* látsz beégetve, az hiba.
*
* Az értékek az élesről mértek, 1440px-en és 767px-en. A méréseket a
* docs/design-tokens.md tartja nyilván.
*
* TÖRÉSPONT: 768px. Az élesen ez az egyetlen érdemi töréspont a főoldalon
* (20 szabály); a 992/576/440/425/352px-esek apróságokat állítanak.
*/
/* ---------------------------------------------------------------------------
Szekcióritmus
Mérve mind a 11 szekcióhatáron: 160px asztalin, 120px 768px alatt.
A szekcióknak maguknak nincs függőleges belső térközük.
--------------------------------------------------------------------------- */
.ph-main {
--ph-szekcio-ritmus: var(--wp--preset--spacing--t-160);
}
.ph-main > * + * {
margin-block-start: var(--ph-szekcio-ritmus);
}
/* ---------------------------------------------------------------------------
A tervezett szekciók tipográfiája
A theme.json globális értékei a TARTALOM tipográfiáját tartják: Lato
16/1,6/−0,1px, Playfair címsorok a 36/30/24/20/18/16 skálán, 1,125-ös
sormagassággal, 700-as vastagsággal. Az élesen is ez az alap — a
blogbejegyzések pontosan így néznek ki —, és a blokkszerkesztő is ezt
mutatja Andreának, amikor bejegyzést ír.
A főoldal és a galéria szekciói ettől eltérnek: nagyobb, nagybetűs címsorok,
lazább bekezdés. Az élesen ezt az Oxygen szekciónkénti "typo-*" osztályokkal
oldotta meg; itt a szekciókat tartó .ph-szekciok konténerhez kötjük. Ami
tehát TERVEZETT felület, az kap külön tipográfiát — ami tartalom, az örökli
az alapot.
A szelektorokban lévő kizárás két dolgot csinál, és mindkettő fontos:
MIT zár ki: a `is-style-*` blokkstílus-variációkat (typo-subtitle,
typo-display, …) és a `ph-*` komponenseket (.ph-bejegyzes__cim,
.ph-velemeny__nev, .ph-folyamat__index, …). Ezeknek saját tipográfiájuk van,
amit nem szabad felülírni. A komponens-kizárás a CÍMSOROKNÁL is kell, nem
csak a bekezdéseknél: a bejegyzéslistában a kártyacím `h2.ph-bejegyzes__cim`,
és enélkül a 48px-es nagybetűs szekciócím ülne az Allura kézírás helyén.
MIÉRT :where()-ben: a `:not([class*="…"])` önmagában SÚLYT AD — két ilyen
kizárással a szabály (0,3,1) erősségű lenne, és elnyomná a komponensek
(0,1,1)-es és (0,2,1)-es szabályait. Pontosan ez történt első nekifutásra:
a vélemény-kártyák szövege 1,6 helyett 1,7-es sormagasságot kapott, és a
szekció 33px-cel megnőtt. A `:where()` nullázza a kizárás súlyát, így a
szabály (0,1,1) marad — épp annyi, hogy a theme.json elemszelektorait
(0,0,1) verje, de minden komponens-szabály felülírhassa.
A h1 kimarad: a lap egyetlen h1-e a hero felirata, annak minden betűértéke a
.ph-hero__eyebrow és .ph-hero__display osztályból jön.
--------------------------------------------------------------------------- */
.ph-szekciok :is(h2, h3, h4, h5, h6):not(:where([class*="is-style-"], [class*="ph-"])) {
font-family: var(--wp--preset--font-family--display);
font-weight: 400;
line-height: 1.3;
letter-spacing: -0.02em;
text-transform: uppercase;
color: var(--wp--preset--color--ink);
}
/*
* A méretek külön sorban: a fenti :is() és ezek is (0,1,1) erősségűek, tehát a
* forrássorrend dönt — ezeknek UTÁNA kell állniuk.
*/
.ph-szekciok h2:not(:where([class*="is-style-"], [class*="ph-"])) { font-size: var(--wp--preset--font-size--s-48); }
.ph-szekciok h4:not(:where([class*="is-style-"], [class*="ph-"])) { font-size: var(--wp--preset--font-size--s-32); }
.ph-szekciok h5:not(:where([class*="is-style-"], [class*="ph-"])) { font-size: var(--wp--preset--font-size--s-20); }
.ph-szekciok h6:not(:where([class*="is-style-"], [class*="ph-"])) { font-size: var(--wp--preset--font-size--s-16); }
/* A h3 a szekciókban Allura kézírás, accent színnel — nem a nagybetűs sorba tartozik. */
.ph-szekciok h3:not(:where([class*="is-style-"], [class*="ph-"])) {
font-family: var(--wp--preset--font-family--script);
font-size: var(--wp--preset--font-size--s-30);
line-height: 1.1;
letter-spacing: 0.02em;
text-transform: none;
color: var(--wp--preset--color--accent);
}
.ph-szekciok p:not(:where([class*="is-style-"], [class*="ph-"])) {
line-height: 1.7;
letter-spacing: 0.08px;
color: var(--wp--preset--color--ink);
}
/*
* Szekciócím, ami h1 kell legyen.
*
* A galéria oldal fő témája a galéria, tehát a lap h1-e a „Galéria” címsor —
* nem a hero felirata (lásd patterns/hero.php). A h1 viszont szándékosan
* kimarad a fenti lehatárolásból, mert a főoldalon a hero felirata az, aminek
* saját tipográfiája van. Ezért kap külön osztályt.
*
* Az értékek pontosan a szekciócímek értékei — a látvány nem változik attól,
* hogy a jelölés h2-ről h1-re vált.
*/
.ph-szekcio-cim {
font-family: var(--wp--preset--font-family--display);
font-size: var(--wp--preset--font-size--s-48);
font-weight: 400;
line-height: 1.3;
letter-spacing: -0.02em;
text-transform: uppercase;
color: var(--wp--preset--color--ink);
}
@media (max-width: 768px) {
.ph-szekcio-cim {
font-size: var(--wp--preset--font-size--s-36);
}
}
/* ---------------------------------------------------------------------------
Hero
Teljes szélességű háttérkép, 600px magas. Rajta egy fehér kártya, ami
legfeljebb 842px széles, és 60px-et lelóg a hero aljáról.
--------------------------------------------------------------------------- */
.ph-hero {
position: relative;
min-height: 600px;
background-repeat: no-repeat;
background-size: cover;
background-position: 0 0;
}
/*
* A kártya ALULRÓL van pozicionálva, `bottom: -60px` — nem felülről 402px-cel.
* Ugyanaz a látvány (600 − 258 + 60 = 402), de a lelógás így a kártya
* magasságától független: ha a szöveg másképp törik, akkor is pontosan 60px.
*
* A szélesség `max-width: 842px` + `width: 100%`, nem fix 842px. Az első
* mérés fixnek látta, mert a szülő mindig szélesebb volt 842-nél.
*/
.ph-hero__card {
position: absolute;
bottom: -60px;
left: 0;
right: 0;
max-width: 842px;
width: 100%;
margin-inline: auto;
padding: var(--wp--preset--spacing--t-80);
background-color: var(--wp--preset--color--surface);
}
/*
* A címsor egyetlen h1, két blokkszintű sorral — ahogy az élesen is. A nagy
* cím nem külön h1, mert akkor a lap két h1-et kapna; és nem is külön
* bekezdés, mert akkor a h1 szövege elveszítené a felét (SEO, F7).
*/
.ph-hero__title {
margin: 0;
/*
* Rács, 8px réssel — az élesen is ez van. A két sor magassága 22 és 68,2px,
* a h1 mégis 98,2px: a különbség pontosan a 8px rés.
*/
display: grid;
gap: var(--wp--preset--spacing--t-8);
/*
* Középre igazítva. A KÁRTYÁN `text-align: start` van — a középre igazítás
* a h1-en ül, és onnan öröklődik a két sorra. Ha csak a kártyát méred,
* balra igazítottnak hiszed; ez a mérés csapdája.
*/
text-align: center;
}
.ph-hero__eyebrow,
.ph-hero__display {
display: block;
}
.ph-hero__eyebrow {
font-family: var(--wp--preset--font-family--body);
font-size: var(--wp--preset--font-size--s-20);
font-weight: 400;
line-height: 1.1;
letter-spacing: 0.1px;
text-transform: uppercase;
color: var(--wp--preset--color--accent);
}
.ph-hero__display {
font-family: var(--wp--preset--font-family--display);
font-size: var(--wp--preset--font-size--s-62);
font-weight: 400;
line-height: 1.1;
letter-spacing: -0.02em;
text-transform: uppercase;
color: var(--wp--preset--color--ink);
}
/* ---------------------------------------------------------------------------
768px alatt
Mind az élesről: a háttérkép vízszintesen középre, a kártya 80% széles,
60/40px belső térközzel, a nagycím 46px, a szekcióritmus 120px.
A kártya tehát az élesen IS reszponzív (`max-width` + `width`), nem fix —
az első mérésem ezt félreértette. A lap vízszintes túlcsordulását nem ez
okozza, hanem valami más az Oxygen-felépítésben.
--------------------------------------------------------------------------- */
@media (max-width: 768px) {
.ph-main {
--ph-szekcio-ritmus: var(--wp--preset--spacing--t-120);
}
.ph-hero {
background-position-x: center;
}
.ph-hero__card {
width: 80%;
padding: var(--wp--preset--spacing--t-60) var(--wp--preset--spacing--t-40);
}
.ph-hero__display {
font-size: var(--wp--preset--font-size--s-46);
}
}
/* ---------------------------------------------------------------------------
Elrendezési alapelemek
Az Oxygen három primitívvel dolgozott, ezeket vesszük át:
layout-column-2 → .ph-oszlop-2 2×532px, 80px köz
layout-column-3 → .ph-oszlop-3 3×360px, 32px köz
layout-title-text → a függőleges halmokat a blokkok blockGap-je adja
A hasábszélességek `1fr`-ként vannak megadva, nem fix pixelben: 1144px-en
ugyanazt adják (532 és 360), de keskenyebb ablakon nem lógnak ki.
--------------------------------------------------------------------------- */
.ph-oszlop-2,
.ph-oszlop-3 {
display: grid;
align-items: start;
}
.ph-oszlop-2 {
grid-template-columns: repeat(2, 1fr);
gap: var(--wp--preset--spacing--t-80);
}
/* A szolgáltatás-szekcióban a kép és a szöveg függőlegesen középre igazodik. */
.ph-oszlop-2--kozepre {
align-items: center;
}
.ph-oszlop-3 {
grid-template-columns: repeat(3, 1fr);
gap: var(--wp--preset--spacing--t-32);
}
/* A hasábokban a kép kitölti a szélességet, az arányát megtartva. */
.ph-oszlop-2 img,
.ph-oszlop-3 img {
display: block;
width: 100%;
height: auto;
}
@media (max-width: 768px) {
.ph-oszlop-2,
.ph-oszlop-3 {
grid-template-columns: 1fr;
gap: var(--wp--preset--spacing--t-40);
}
/*
* A bemutatkozás képe mobilon a szöveg FÖLÉ kerül — az élesen
* `.layout-column-2 img { order: -1 }`. A többi kétosztatú szekció nem
* cserél sorrendet, ezért csak erre az egyre vonatkozik.
*/
.ph-oszlop-2--kep-elore > figure,
.ph-oszlop-2--kep-elore > img {
order: -1;
}
}
/* ---------------------------------------------------------------------------
Háttérképes szekció (kozos-munka)
Az élesen a külső elem teljes szélességű háttérkép, a belső 1144px-es doboz
pedig 160px függőleges belső térközt kap. Ez a 160px a szekcióritmuson
FELÜL van — így kap levegőt a háttérkép.
--------------------------------------------------------------------------- */
.ph-hatterkepes {
background-repeat: no-repeat;
background-size: cover;
/* Bal felső sarok, ahogy az élesen — nem középre. Sötétítő réteg nincs. */
background-position: 0 0;
}
.ph-hatterkepes > .wp-block-group,
.ph-hatterkepes > * {
padding-block: var(--wp--preset--spacing--t-160);
}
@media (max-width: 768px) {
.ph-hatterkepes > .wp-block-group,
.ph-hatterkepes > * {
padding-block: var(--wp--preset--spacing--t-120);
}
}
/* ---------------------------------------------------------------------------
Négylépéses folyamat
Négy elem, közöttük 1px-es félig áttetsző fehér elválasztó. Az élesen a
választók külön üres div-ek; nálunk ál-elemek, hogy a jelölés tiszta
maradjon. A rácsköz 33px (16 + 1px vonal + 16), így a négy hasáb 261px —
ugyanaz, mint az élesen.
Az elemek nyújtva vannak (`stretch`), hogy a választóvonal a legmagasabb
elemig érjen, ahogy az élesen is; a tartalom viszont felülre húzva.
--------------------------------------------------------------------------- */
.ph-folyamat {
display: grid;
grid-template-columns: repeat(4, 1fr);
column-gap: 33px;
align-items: stretch;
}
/*
* Az élesen a sorszám, a cím ÉS a szöveg is középre igazított. A magasság
* alapú ellenőrzés ezt nem fogja meg — a középre igazítás nem változtat
* magasságot —, ezért csúszott át az első építésen.
*/
.ph-folyamat > * {
position: relative;
align-content: start;
text-align: center;
}
.ph-folyamat > * + *::before {
content: "";
position: absolute;
inset-block: 0;
inset-inline-start: -17px;
width: 1px;
/* Nem paletta-szín: félig áttetsző fehér, csak itt fordul elő. */
background-color: rgb(255 255 255 / 0.5);
}
.ph-folyamat__index {
font-family: var(--wp--preset--font-family--script);
font-size: var(--wp--preset--font-size--s-66);
line-height: 1;
letter-spacing: 0.005em;
color: rgb(255 255 255 / 0.5);
}
.ph-folyamat__cim {
font-family: var(--wp--preset--font-family--script);
font-size: var(--wp--preset--font-size--s-40);
line-height: 1.3;
letter-spacing: 0.02em;
color: var(--wp--preset--color--ground);
}
@media (max-width: 768px) {
.ph-folyamat {
grid-template-columns: 1fr;
/* 40px · 1px vonal · 40px — ahogy az élesen. */
row-gap: 81px;
}
/*
* A vonal nem tűnik el, hanem vízszintesre fordul: az élesen a `.divider`
* ilyenkor `width: 100%; height: 1px`. A rés közepére ültetjük.
*/
.ph-folyamat > * + *::before {
inset-block: auto;
top: -41px;
inset-inline: 0;
width: auto;
height: 1px;
}
}
/* ---------------------------------------------------------------------------
A folyam-elrendezés margóinak semlegesítése a saját rácsokban
A WordPress minden csoport gyerekeire `margin-block-start`-ot tesz
(`:where(.is-layout-flow) > :not(:first-child)`). Ha a csoportot mi
rácsra váltjuk, ez a margó rácselemekre kerül, és megemeli a sor magasságát.
Mérve: a `bemutatkozas` képe 24px margót kapott (652 → 676), a folyamat
2–4. eleme szintén, amitől a sor 371 helyett 403 lett.
A `:root` előtag azért kell, mert a WordPress szabálya `:where()`-ben ül;
nélküle csak forrássorrend döntene, ami törékeny.
--------------------------------------------------------------------------- */
:root .ph-oszlop-2 > *,
:root .ph-oszlop-3 > *,
:root .ph-folyamat > *,
:root .ph-gyik > *,
:root .ph-gyik > * > *,
:root .ph-kapcsolat__belso > * {
margin-block: 0;
}
/* ---------------------------------------------------------------------------
Címsorok 768px alatt
Mérve az élesen, 375px-en: a h2 36px/46,8px-re, az Allura h3 28px/30,8px-re,
a szekció-alcím 30px/39px-re vált. A sormagasság-arányok változatlanok
(1,3 · 1,1 · 1,3), ezért csak a betűméretet állítjuk.
Ez nem kozmetika: 48px-en az „SZERTARTÁSVEZETÉS" szó 472px széles, és egy
360px-es telefonon szétfeszíti az elrendezést. 36px-en 354px — kifér.
A szelektorok pontosan azok, mint a fenti „tervezett szekciók" blokkban —
azonos (0,1,1) erősséggel, de a forrásban később, ezért ezek nyernek. Ha ott
változik a szelektor, itt is változtatni kell, különben ez némán hatástalanná
válik. A blogbejegyzések címsorai szándékosan maradnak ki: az élesen azok
mérete töréspontonként sem változik.
--------------------------------------------------------------------------- */
@media (max-width: 768px) {
.ph-szekciok h2:not(:where([class*="is-style-"], [class*="ph-"])) {
font-size: var(--wp--preset--font-size--s-36);
}
.ph-szekciok h3:not(:where([class*="is-style-"], [class*="ph-"])) {
font-size: var(--wp--preset--font-size--s-28);
}
:root .is-style-typo-subtitle {
font-size: var(--wp--preset--font-size--s-30);
}
}
/* ---------------------------------------------------------------------------
Biztonsági háló a hosszú szavakra
A rácselemek alapból nem zsugorodnak a tartalmuk legkisebb szélessége alá
(`min-width: auto`), így egyetlen hosszú szó szétfeszítheti az oldalt. Az
élesen pontosan ez történik. Két lépésben zárjuk ki:
min-width: 0 – a hasáb zsugorodhat
overflow-wrap – ha egy szó így sem fér ki, tördeljük, ne lógjon ki
Az élesen nincs ilyen szabály; ez saját döntés, a vízszintes görgetés ellen.
A .ph-gyik az F8-as reszponzív átnézésig KIMARADT ebből, és 320px-en 25px
vízszintes túllógást okozott: a GYIK tételei rácselemek, azok alapból
min-width: auto-ok, tehát nem zsugorodnak a tartalmuk legkisebb szélessége
alá. Mérve: az oszlop 329,66px maradt egy 305px-es ablakban.
--------------------------------------------------------------------------- */
.ph-oszlop-2 > *,
.ph-oszlop-3 > *,
.ph-folyamat > *,
.ph-gyik > *,
.ph-gyik > * > * {
min-width: 0;
}
.ph-oszlop-2 :is(h1, h2, h3, h4, p),
.ph-oszlop-3 :is(h1, h2, h3, h4, p),
.ph-folyamat :is(h1, h2, h3, h4, p),
.ph-gyik :is(h1, h2, h3, h4, p) {
overflow-wrap: break-word;
}
/* ---------------------------------------------------------------------------
Videó
Az élesen 1144×668. Ez 16:9 (643,5px) PLUSZ 25px — a régi beágyazó-burkoló
`padding: 25px 0 56.25%` maradványa. Az iframe a teljes 668-at kitölti, így
a lejátszó kicsit magasabb, mint 16:9.
Nem tisztítjuk 16:9-re: az 25px-cel feljebb tolna mindent alatta. Ha mégis
így kell, egyetlen sor az arány átírása.
--------------------------------------------------------------------------- */
.ph-video {
aspect-ratio: 1144 / 668;
}
.ph-video iframe {
display: block;
width: 100%;
height: 100%;
border: 0;
}
/* ---------------------------------------------------------------------------
Galéria — kőműves elrendezés
Az élesen CSS-hasábok (`column-count: 3`), nem rács. A képek eltérő
magasságúak, a hasábok maguktól töltődnek. A `break-inside: avoid` tartja
egyben az elemeket.
--------------------------------------------------------------------------- */
.ph-galeria {
column-count: 3;
column-gap: var(--wp--preset--spacing--t-32);
}
.ph-galeria > * {
display: block;
margin: 0 0 var(--wp--preset--spacing--t-32);
break-inside: avoid;
}
.ph-galeria img {
display: block;
width: 100%;
height: auto;
}
@media (max-width: 768px) {
.ph-galeria {
column-count: 2;
}
}
@media (max-width: 480px) {
.ph-galeria {
column-count: 1;
}
}
/* ---------------------------------------------------------------------------
GYIK
Az élesen minden tétel ELŐTT egy 1px-es `stone` vonal áll, a rácsköz 32px.
Vagyis tétel · 32 · vonal · 32 · tétel. Nálunk a vonal a tétel felső
szegélye, 32px belső térközzel — ugyanaz a 65px összesen, üres elemek nélkül.
A tétel maga kéthasábos: 66px sorszám + a maradék.
--------------------------------------------------------------------------- */
.ph-gyik {
display: grid;
gap: var(--wp--preset--spacing--t-32);
}
.ph-gyik > * {
display: grid;
grid-template-columns: 66px 1fr;
gap: var(--wp--preset--spacing--t-32);
border-block-start: 1px solid var(--wp--preset--color--stone);
padding-block-start: var(--wp--preset--spacing--t-32);
}
/*
* A sorszám: Lato 14px / 25,2px (1,8), +0,08px, ink. Se a `typo-small`
* (14/18,2/−0,1px), se a bekezdés-alapérték nem ez — külön szerep, az
* eredetiben `typo-caption`.
*/
.ph-gyik__sorszam {
font-family: var(--wp--preset--font-family--body);
font-size: var(--wp--preset--font-size--s-14);
line-height: 1.8;
letter-spacing: 0.08px;
color: var(--wp--preset--color--ink);
}
@media (max-width: 768px) {
.ph-gyik > * {
grid-template-columns: 1fr;
gap: var(--wp--preset--spacing--t-8);
}
}
/* ---------------------------------------------------------------------------
Vélemények csúszka
Az élesről mérve és a forrás-CSS-ből átvéve:
.reviews-slider-container position: relative, overflow: hidden
.reviews-slider flex, gap 32px, transition: transform .5s ease
.review-card flex: 0 0 calc((100% - 64px) / 3) → 360px
padding 32px, háttér `sage`,
outline 1px `accent`, outline-offset -8px
.review-name Allura, 32px, `accent`, középre
.review-date Allura, 16px, `accent`, középre
.review-date-container rács 1fr auto 1fr, 16px köz, két oldalt 1px vonal
768px alatt: egy kártya, teljes szélesség.
Az `outline-offset: -8px` a szép részlet: a keret 8px-re beljebb fut, nem a
kártya szélén. Ezért `outline` és nem `border` — a szegély nem tolná beljebb.
--------------------------------------------------------------------------- */
.ph-csuszka {
position: relative;
}
.ph-csuszka__ablak {
overflow: hidden;
}
.ph-csuszka__sav {
display: flex;
gap: var(--wp--preset--spacing--t-32);
transition: transform 0.5s ease;
}
/* Aki kikapcsolta a mozgást, ne kapjon csúszó animációt. */
@media (prefers-reduced-motion: reduce) {
.ph-csuszka__sav {
transition: none;
}
}
.ph-velemeny {
flex: 0 0 calc((100% - 2 * var(--wp--preset--spacing--t-32)) / 3);
box-sizing: border-box;
padding: var(--wp--preset--spacing--t-32);
background-color: var(--wp--preset--color--sage);
outline: 1px solid var(--wp--preset--color--accent);
outline-offset: -8px;
display: grid;
align-content: start;
}
/*
* A belső térközök az élesen MARGÓK, nem rácsrés — és nem egyformák:
* a név fölött-alatt 32px, a szöveg körül 16px, a dátumsor körül semmi.
* Egységes 16px-es réssel a kártya 30px-cel alacsonyabb lett.
*/
.ph-velemeny__nev {
margin-block: var(--wp--preset--spacing--t-32);
}
.ph-velemeny__szoveg {
margin-block: var(--wp--preset--spacing--t-16);
}
.ph-velemeny__nev,
.ph-velemeny__datum {
font-family: var(--wp--preset--font-family--script);
line-height: 1.1;
/*
* Abszolút 0,6px, nem 0,02em. Az élesen a `typo-subtitle-2` alapszabálya
* adja (0,6px), és a `.review-name` csak a méretet írja felül — így a
* betűköz 32px-en is 0,6px marad, nem skálázódik 0,64-re.
*/
letter-spacing: 0.6px;
color: var(--wp--preset--color--accent);
text-align: center;
}
.ph-velemeny__nev {
font-size: var(--wp--preset--font-size--s-32);
}
.ph-velemeny__datum {
font-size: var(--wp--preset--font-size--s-16);
margin: 0;
}
/* A dátum két oldalán egy-egy vékony vonal. */
.ph-velemeny__datum-sor {
display: grid;
grid-template-columns: 1fr auto 1fr;
gap: var(--wp--preset--spacing--t-16);
align-items: center;
margin: 0;
}
.ph-velemeny__datum-sor::before,
.ph-velemeny__datum-sor::after {
content: "";
height: 1px;
background-color: var(--wp--preset--color--accent);
}
/*
* LEMÁSOLT MŰTERMÉK. A vélemény szövege az élesen 1,6-os sormagassággal és
* −0,1px betűközzel renderelődik, nem a tartalmi szöveg 1,7 / +0,08px
* értékeivel — pedig minden más bekezdés az oldalon azzal.
*
* Az ok jelölési hiba: `…
`. Ez
* érvénytelen, a böngésző szétvágja, és a VALÓDI szövegbekezdés osztály nélkül
* marad — így a törzs alapértékét örökli.
*
* 21 soron ez 33px különbség, vagyis a kártya és az egész szekció magassága
* múlik rajta. Ezért másoljuk. Ha az F7-ben egységesítenénk, a szekció 33px-cel
* magasabb lesz — tudatos döntés legyen, ne véletlen.
*/
.ph-velemeny__szoveg,
.ph-velemeny__szoveg > p {
line-height: 1.6;
letter-spacing: -0.1px;
}
.ph-velemeny__szoveg > p {
margin: 0;
}
.ph-velemeny__szoveg > p + p {
margin-block-start: 1.6em;
}
/*
* Nyílgombok.
*
* Az élesen `#333`-as, 5px-re lekerekített dobozok, rendszerbetűs ❮ ❯ jellel —
* láthatóan befejezetlen, nem illik a designhoz (sehol máshol nincs lekerekítés,
* és ez a szürke nincs a palettán). Szabad kezet kaptam, ezért a téma saját
* gombnyelvét használom: szögletes, 1px `ink` keret, átlátszó háttér, hoveren
* invertál. A nyíl SVG, nem karakter — így minden betűtípussal egyforma.
*/
.ph-csuszka__gomb {
position: absolute;
top: 50%;
translate: 0 -50%;
z-index: 1;
display: grid;
place-items: center;
width: 48px;
height: 48px;
padding: 0;
border: 1px solid var(--wp--preset--color--ink);
border-radius: 0;
background-color: var(--wp--preset--color--ground);
color: var(--wp--preset--color--ink);
cursor: pointer;
transition: background-color 0.2s ease, color 0.2s ease, opacity 0.2s ease;
}
.ph-csuszka__gomb:hover,
.ph-csuszka__gomb:focus-visible {
background-color: var(--wp--preset--color--ink);
color: var(--wp--preset--color--ground);
}
.ph-csuszka__gomb[disabled] {
opacity: 0.25;
cursor: default;
}
.ph-csuszka__gomb[disabled]:hover {
background-color: var(--wp--preset--color--ground);
color: var(--wp--preset--color--ink);
}
.ph-csuszka__gomb svg {
width: 16px;
height: 16px;
fill: none;
stroke: currentColor;
stroke-width: 1.5;
}
.ph-csuszka__gomb--elozo {
left: -24px;
}
.ph-csuszka__gomb--kovetkezo {
right: -24px;
}
@media (max-width: 768px) {
.ph-velemeny {
flex: 0 0 100%;
}
}
/*
* A nyílgombok 24px-et lógnak ki a sáv két oldalán. Erre csak akkor van hely,
* ha az ablak szélesebb, mint a szekció (1144px) plusz a két túllógás: 1192px.
*
* Ez a szabály az F8-as reszponzív átnézésig CSAK 768px alatt élt, így a
* 769–1240px sávban a gombok kilógtak a képernyőről. Mérve 1024px-en: 24px
* vízszintes túllógás, amit a jobb oldali gomb okozott.
*
* A határ 1240px, nem 1192: a szűken vett minimumnál a gomb pont a képernyő
* szélét érintené, ami ugyan nem görgetne, de csúnya. 1240-nél marad 48px
* levegő a két oldalon.
*
* Befelé kerülve a gomb ráfed a szélső kártya sarkára. Ez tudatos: a csúszka
* nyila szokásos módon átfedi a sáv szélét, és így nem kell a kártyákat
* keskenyebbre venni csak azért, hogy a gomb elférjen.
*/
@media (max-width: 1240px) {
.ph-csuszka__gomb--elozo {
left: 0;
}
.ph-csuszka__gomb--kovetkezo {
right: 0;
}
}
/*
* A közös munka háttérképe mobilon vízszintesen 52%-ra tolódik — az élesen
* `background-position-x: 52%`. Így marad a menyasszony arca a képben.
*/
@media (max-width: 768px) {
#kozos-munka.ph-hatterkepes {
background-position-x: 52%;
}
}
/* ---------------------------------------------------------------------------
Partnerek és blog — ugyanaz a csúszka, más kártyaszélességgel
Az élesen három külön, szó szerint másolt CSS-blokk és három külön JS
példány csinálja ugyanezt. Nálunk egy komponens, három módosítóval.
vélemények 3 látszik flex: 0 0 calc((100% - 2×32) / 3)
partnerek 4 látszik flex: 0 0 calc((100% - 3×32) / 4)
blog 2 látszik flex: 0 0 calc((100% - 1×32) / 2)
--------------------------------------------------------------------------- */
.ph-partner {
flex: 0 0 calc((100% - 3 * var(--wp--preset--spacing--t-32)) / 4);
box-sizing: border-box;
overflow: hidden;
}
/*
* A kép mindig NÉGYZET. A `height: auto` kifejezetten kell az `aspect-ratio`
* mellé: a WordPress `width`/`height` attribútumot tesz a képre, és anélkül a
* böngésző abból számol magasságot. Emiatt volt a Polyák Borbirtok képe 384px
* a 262 helyett, és emiatt lett az egész partnersor 88px-cel magasabb.
*/
.ph-partner__kep {
display: block;
width: 100%;
height: auto;
aspect-ratio: 1;
object-fit: cover;
/* Kép nélküli partnernél ez a `stone` négyzet marad — ahogy az élesen. */
background-color: var(--wp--preset--color--stone);
/*
* LEMÁSOLT MŰTERMÉK. Az élesen a kép `display: inline`, ezért alapvonalon
* ül, és 7px holt tér marad alatta. Mi blokként kezeljük (az a helyes), de
* a 7px-et kézzel visszatesszük — enélkül a partnersor 7px-cel alacsonyabb.
*
* Fix érték, nem alapvonal-számítás: így nem függ a betűtípus metrikáitól.
*/
margin-block-end: 7px;
}
.ph-partner__torzs {
display: grid;
gap: 12px;
align-items: center;
padding: 24px 12px;
}
/*
* A név/titulus és az elérhetőségek közti vonal az elérhetőségek felső
* szegélye, nem külön elem: 12px rés + 1px vonal + 12px belső térköz = 25px,
* ugyanaz, mint az élesen.
*
* Korábban ál-elem volt `order`-rel, de a rácsban a sorrendezés nem úgy sült
* el, ahogy terveztem: a vonal a lista ALÁ került, nem fölé.
*/
.ph-partner__elerhetosegek {
border-block-start: 1px solid var(--wp--preset--color--accent);
padding-block-start: 12px;
}
.ph-partner__nev {
font-family: var(--wp--preset--font-family--script);
font-size: var(--wp--preset--font-size--s-32);
line-height: 1.1;
letter-spacing: 0.6px;
color: var(--wp--preset--color--accent);
text-align: center;
margin: 0;
}
.ph-partner__titulus {
font-family: var(--wp--preset--font-family--body);
font-size: var(--wp--preset--font-size--s-14);
line-height: 1.8;
letter-spacing: 0.08px;
color: var(--wp--preset--color--accent);
text-transform: uppercase;
text-align: center;
margin: 0;
}
.ph-partner__elerhetosegek {
display: grid;
justify-content: center;
text-align: center;
}
.ph-partner__elerhetosegek a {
color: var(--wp--preset--color--accent);
text-decoration: underline;
/*
* Az élesen ezek `typo-text` osztályt kapnak, tehát 1,7-es sormagasságot.
* Link lévén nálunk a gyökér 1,6-ját örökölnék — három soron ez 5px.
*/
font-size: var(--wp--preset--font-size--s-16);
line-height: 1.7;
letter-spacing: 0.08px;
}
/* --- Blog ------------------------------------------------------------------ */
.ph-bejegyzes {
flex: 0 0 calc((100% - var(--wp--preset--spacing--t-32)) / 2);
box-sizing: border-box;
padding: var(--wp--preset--spacing--t-32);
background-color: var(--wp--preset--color--sage);
outline: 1px solid var(--wp--preset--color--accent);
outline-offset: -8px;
display: grid;
gap: 24px;
align-content: start;
}
.ph-bejegyzes__cim {
font-family: var(--wp--preset--font-family--display);
font-size: var(--wp--preset--font-size--s-24);
font-weight: 400;
line-height: 1.3;
letter-spacing: -0.02em;
color: var(--wp--preset--color--ink);
text-align: center;
margin: 0;
padding-block-end: var(--wp--preset--spacing--t-16);
border-block-end: 1px solid var(--wp--preset--color--accent);
}
.ph-bejegyzes__torzs {
display: grid;
gap: var(--wp--preset--spacing--t-8);
align-items: center;
}
.ph-bejegyzes__torzs > p {
margin: 0;
}
@media (max-width: 768px) {
/* A partnerkártya hasábszáma a fájl végén, a reszponzív blokkban van. */
.ph-bejegyzes {
flex: 0 0 100%;
}
}
/* ---------------------------------------------------------------------------
Kapcsolat
Fehér kártya, 80px körben (mobilon 80/20). A tartalom legfeljebb 752px
széles, középre igazítva, 40px réssel. Az űrlap a Contact Form 7-é — a
mezők elrendezését a rövidkód kimenete adja, azt a plugin rendereli.
--------------------------------------------------------------------------- */
.ph-kapcsolat {
background-color: var(--wp--preset--color--surface);
padding: var(--wp--preset--spacing--t-80);
}
.ph-kapcsolat__belso {
max-width: 752px;
margin-inline: auto;
display: grid;
gap: var(--wp--preset--spacing--t-40);
align-items: center;
text-align: center;
}
@media (max-width: 768px) {
.ph-kapcsolat {
padding: var(--wp--preset--spacing--t-80) var(--wp--preset--spacing--t-20);
}
}
/* ---------------------------------------------------------------------------
Elérhetőségek
Két doboz egymás mellett, 80px réssel. Mindegyik kétosztatú: felirat és
érték, közöttük függőleges vonal, körülöttük 1px `ink` keret.
--------------------------------------------------------------------------- */
.ph-elerhetoseg {
display: grid;
grid-template-columns: auto auto;
gap: var(--wp--preset--spacing--t-80);
justify-content: center;
}
.ph-elerhetoseg > * {
display: grid;
grid-template-columns: auto auto;
border: 1px solid var(--wp--preset--color--ink);
}
.ph-elerhetoseg__felirat,
.ph-elerhetoseg__ertek {
padding: var(--wp--preset--spacing--t-16) var(--wp--preset--spacing--t-32);
font-family: var(--wp--preset--font-family--body);
font-size: var(--wp--preset--font-size--s-16);
line-height: 1.7;
letter-spacing: 0.08px;
color: var(--wp--preset--color--ink);
margin: 0;
}
.ph-elerhetoseg__felirat {
border-inline-end: 1px solid var(--wp--preset--color--ink);
}
.ph-elerhetoseg__ertek {
color: var(--wp--preset--color--accent);
text-decoration: underline;
}
@media (max-width: 768px) {
.ph-elerhetoseg {
grid-template-columns: 1fr;
gap: var(--wp--preset--spacing--t-40);
}
.ph-elerhetoseg > * {
grid-template-columns: auto;
}
.ph-elerhetoseg__felirat,
.ph-elerhetoseg__ertek {
text-align: center;
}
/* Egy hasábban a vonal alulra kerül. */
.ph-elerhetoseg__felirat {
border-inline-end: 0;
border-block-end: 1px solid var(--wp--preset--color--ink);
}
}
/* ---------------------------------------------------------------------------
Kapcsolatfelvételi űrlap (Contact Form 7)
A mezők jelölését a CF7 adja, az elrendezést az élesen az Oxygen CSS-e.
Mivel azt a stíluslapot nem töltjük be, ide kellett áthozni — enélkül az
űrlap csupasz, egyhasábos lenne.
Elrendezés: bal oldalt egymás alatt a név, a telefon és az e-mail, jobb
oldalt a teljes magasságú üzenet-mező. 768px alatt egy hasáb.
Az eredeti CSS `.form-name`-re hivatkozik, a jelölésben viszont
`form-fullname` van — az a szabály az élesen halott, a mező csak automatikus
elhelyezéssel kerül a helyére. Itt a valódi osztálynevet használjuk.
--------------------------------------------------------------------------- */
.ph-kapcsolat .form-fields {
display: grid;
column-gap: var(--wp--preset--spacing--t-32);
row-gap: var(--wp--preset--spacing--t-8);
text-align: start;
grid-template-areas:
"nev uzenet"
"tel uzenet"
"email uzenet";
}
.ph-kapcsolat .form-fullname { grid-area: nev; }
.ph-kapcsolat .form-phone { grid-area: tel; }
.ph-kapcsolat .form-email { grid-area: email; }
.ph-kapcsolat .form-message { grid-area: uzenet; }
.ph-kapcsolat .form-input {
padding-block-end: var(--wp--preset--spacing--t-16);
}
.ph-kapcsolat .form-input p {
margin: 0;
}
/* Az üzenet-mező kitölti a három sor teljes magasságát. */
.ph-kapcsolat .form-input.textarea p,
.ph-kapcsolat .form-input.textarea .wpcf7-form-control-wrap,
.ph-kapcsolat .form-input.textarea textarea {
height: 100%;
}
.ph-kapcsolat .form-input.textarea .wpcf7-form-control-wrap {
display: block;
}
/* Hibaüzenetnek fenntartott hely, hogy megjelenéskor ne ugráljon az elrendezés. */
.ph-kapcsolat .form-input .wpcf7-form-control-wrap span {
height: 16px;
}
.ph-kapcsolat .form-input:has(input + span) {
padding-block-end: 0;
}
/* --- Mezők ----------------------------------------------------------------- */
.ph-kapcsolat input,
.ph-kapcsolat textarea {
padding: var(--wp--preset--spacing--t-16) var(--wp--preset--spacing--t-32);
border: 1px solid var(--wp--preset--color--ink);
border-radius: 0;
background-color: transparent;
font-family: var(--wp--preset--font-family--body);
font-size: var(--wp--preset--font-size--s-14);
line-height: 1.3;
color: var(--wp--preset--color--ink);
width: 100%;
box-sizing: border-box;
}
.ph-kapcsolat input:hover,
.ph-kapcsolat textarea:hover {
border-color: var(--wp--preset--color--accent);
}
.ph-kapcsolat input:focus,
.ph-kapcsolat textarea:focus {
background-color: color-mix(in srgb, var(--wp--preset--color--accent) 10%, transparent);
outline: unset;
}
.ph-kapcsolat [type="checkbox"] {
width: 20px;
height: 20px;
margin-inline-end: var(--wp--preset--spacing--t-8);
padding: 0;
}
/* --- Jelölőnégyzet, reCAPTCHA-lábjegyzet, küldés --------------------------- */
.ph-kapcsolat .form-requirements {
text-align: start;
}
.ph-kapcsolat .wpcf7-checkbox .wpcf7-list-item {
margin-inline-start: 0;
}
.ph-kapcsolat .form-checkbox-list > p,
.ph-kapcsolat .wpcf7-list-item label {
display: grid;
grid-template-columns: auto 1fr;
align-items: center;
}
.ph-kapcsolat .wpcf7-list-item-label,
.ph-kapcsolat .recaptcha-container,
/*
* A bekezdéseket külön kell címezni. A theme.json `core/paragraph` beállítása
* puszta `p { … }` szabályt generál, ami KÖZVETLENÜL célozza az elemet — így
* legyőzi azt, amit a szülőre állítunk, mert az csak öröklődne.
*
* Enélkül a reCAPTCHA-szöveg 16px/27,2 lett 14px/18,2 helyett, és a
* jelölőnégyzet sora is 4px-cel magasabb — együtt 12px a szekción.
*/
.ph-kapcsolat .recaptcha-container p {
font-family: var(--wp--preset--font-family--body);
font-size: var(--wp--preset--font-size--s-14);
line-height: 1.3;
color: var(--wp--preset--color--ink);
}
/* A jelölőnégyzet sora az élesen a törzs 1,6-ját örökli, nem a bekezdés 1,7-ét. */
.ph-kapcsolat .form-checkbox-list p {
line-height: 1.6;
letter-spacing: -0.1px;
}
.ph-kapcsolat .form-checkbox-list a,
.ph-kapcsolat .recaptcha-container a {
font-size: var(--wp--preset--font-size--s-14);
line-height: 1.3;
color: var(--wp--preset--color--accent);
text-decoration: underline;
}
.ph-kapcsolat .form-checkbox-list a {
margin-inline-start: var(--wp--preset--spacing--t-8);
}
.ph-kapcsolat .submit-container p {
margin: 0;
padding-block-start: var(--wp--preset--spacing--t-16);
display: grid;
grid-auto-columns: auto;
justify-content: center;
}
/* --- Hibajelzések ---------------------------------------------------------- */
.ph-kapcsolat .wpcf7-not-valid-tip {
font-family: var(--wp--preset--font-family--body);
font-size: var(--wp--preset--font-size--s-12);
line-height: 1.3;
color: var(--wp--preset--color--error);
}
.ph-kapcsolat .form-input .wpcf7-not-valid-tip {
justify-self: end;
}
@media (max-width: 768px) {
.ph-kapcsolat .form-fields {
grid-template-areas:
"nev"
"tel"
"email"
"uzenet";
}
}
/* ---------------------------------------------------------------------------
Galéria oldal — kőműves rács
Az élesen `column-count: 3`, `column-gap: 10px`, elemenként 10px alsó margó.
Ez SZŰKEBB, mint a főoldali előzetes (ott 32px) — szándékosan: itt a képek
a főszereplők.
A tartalom `core/gallery` blokk, ezért a WordPress alapstílusa flexbe
rendezné. Azt írjuk felül hasábokra.
--------------------------------------------------------------------------- */
.ph-galeria-racs.wp-block-gallery {
display: block;
column-count: 3;
column-gap: 10px;
}
/*
* Itt `!important` kell, és ez nem lustaság.
*
* A WordPress galéria-szabálya így néz ki:
* .wp-block-gallery.has-nested-images figure.wp-block-image:not(#individual-image)
* A `:not(#individual-image)` egy nem létező azonosítóra hivatkozik — kizárólag
* azért, hogy a szabály ID-szintű specifikusságot (1,3,1) kapjon, és nehéz
* legyen felülírni. Osztályokkal ezt nem lehet legyőzni, csak még egy
* ál-azonosítóval vagy `!important`-tal. A kettő közül ez az olvashatóbb.
*
* Amit felülírunk: a mag `width: calc(50% - …)`-ot ad a képeknek. Hasábos
* elrendezésben ez a HASÁB 50%-ára értendő, ezért lettek a képek 109px
* szélesek 375 helyett, és tűnt el a 10px függőleges térköz is.
*/
:root .ph-galeria-racs.wp-block-gallery.has-nested-images figure.wp-block-image {
display: block;
width: auto !important;
margin: 0 0 10px !important;
break-inside: avoid;
}
.ph-galeria-racs.wp-block-gallery figure img {
display: block;
width: 100%;
height: auto;
}
.ph-galeria-racs.wp-block-gallery a {
display: block;
/* A kattintható terület pontosan a kép, alatta ne maradjon sorköz-rés. */
line-height: 0;
}
@media (max-width: 768px) {
.ph-galeria-racs.wp-block-gallery {
column-count: 2;
}
}
@media (max-width: 480px) {
.ph-galeria-racs.wp-block-gallery {
column-count: 1;
}
}
/* ---------------------------------------------------------------------------
Képnagyító
Natív `