/* ============================================================= * frame.css — a WordPress-keret és a statikus prototípus illesztése * * A main.css változatlan másolat a design rendszerből. Ez a fájl csak azt * a néhány dolgot köti össze, ami a statikus HTML-ben burkoló elem volt, * a blokk-témában viszont a WordPress ad: * * .page → .wp-site-blocks * * Semmi mást nem stílusoz felül. * ============================================================= */ /* A középre zárt fehér „lap" a szürke háttéren, a prototípus .page eleme. A keret színe és árnyéka a látványterv saját sablonjából jön (a standalone bundle `#page-shell` eleme): #F0F1F3 háttér, és egy lefelé nyíló, lágy árnyék. A sarok-lekerekítést és a 28px-es körbefutó teret NEM vesszük át: az a prototípus-néző kerete, nem a weboldalé. */ .wp-site-blocks { max-width: 1440px; margin: 0 auto; background: #ffffff; box-shadow: 0 30px 80px -30px rgba(11, 18, 32, 0.25); } /* NÉVÜTKÖZÉS. A prototípusban a `.page` MAGA a fehér lap volt; a WordPress viszont `page` osztályt tesz a -ra minden oldalon. Ugyanaz a név, két külön dolog: emiatt az oldalak háttere fehér lett, és a lap körüli szürke keret eltűnt, miközben a hirdetéseken és a szolgáltatásokon ott maradt. A `.page` szabályt nem bántjuk (a main.css a design rendszer másolata), csak a testre nem engedjük rá. */ body.page { max-width: none; background: #F0F1F3; box-shadow: none; } /* A sablonrészek és a bejegyzés-tartalom burkolói kiesnek a doboz-fából, így a szekciók pontosan ugyanolyan testvérek maradnak, mint a statikus HTML-ben. Enélkül a ragadós fejléc a saját burkolójában „ragadna", vagyis sehol. */ .wp-block-template-part, .wp-site-blocks > .entry-content { display: contents; } /* A szövegtörzsbe írt hivatkozások a design szerinti kiemelést kapják, akkor is, ha a szerkesztő a sima „Link" gombbal szúrta be őket. */ .section-head__lead a, .faq__help a, .hero__lead a, .system__lead a, .consult__lead a { color: #25759c; font-weight: 500; text-decoration: none; } .section-head__lead a:hover, .faq__help a:hover, .hero__lead a:hover, .system__lead a:hover, .consult__lead a:hover { text-decoration: underline; } /* Az élő kereső a `hidden` attribútummal rejt. A design rács- és flex-elemei saját `display` értéket kapnak, ami erősebb a böngésző alapértelmezésénél — enélkül a kiszűrt kártyák láthatók maradnának. */ [hidden] { display: none !important; } /* Üres találati halmaz. A statikus prototípusban nincs ilyen állapot — ott minden lista tele van —, a valóságban viszont egy szűrő könnyen kifogy. Néma szekció helyett mondjuk meg, mi történt, a design tipográfiájával. */ .archive-empty { grid-column: 1 / -1; margin: 0; padding: 40px 0; color: #5B6B7E; font-size: 15px; text-align: center; } .archive-empty a { color: #25759c; font-weight: 500; text-decoration: none; } .archive-empty a:hover { text-decoration: underline; }