@charset "UTF-8"; /* ========================================================================== Gyepmesteri Telep Dombóvár — arculati alapréteg (OceanWP gyerektéma) -------------------------------------------------------------------------- Ez az állomány a TÉMA felületét kezeli (fejléc, tipográfia, gombok, űrlapok, táblázatok, lábléc). Az ebrendészeti plugin komponensei a gyepmester-telep.css állományban vannak. A szülő téma (oceanwp/) SOHA nem módosítandó: frissítéskor elveszne. FONTOS KÖRNYEZETI TÉNY Az oldalon a gyökér betűmérete 10px, ezért minden rem érték a tervezett 62,5%-án jelenik meg. Ezért a komponensméretek itt szándékosan px-ben vannak megadva: így a gyökérméret későbbi változása sem csúsztatja szét a felületet. Tartalom 1. Design tokenek 2. Alapok és tipográfia 3. Fókusz és kisegítő lehetőségek 4. Fejléc és navigáció 5. Oldalcím-sáv és morzsamenü 6. Gombok és űrlapok 7. Táblázatok (Díjjegyzék) 8. Lábléc 9. wp-accessibility eszköztár 10. Mozgáscsökkentés és nyomtatás ========================================================================== */ /* ========================================================================== 1. DESIGN TOKENEK ========================================================================== */ :root { /* Márkakék — intézményi alapszín; a plugin eddig is ezt használta. */ --gm-brand: #05557c; --gm-brand-600: #04486a; --gm-brand-700: #033a56; --gm-brand-050: #eef6fb; --gm-brand-100: #d3e7f2; --gm-brand-ring: rgba(5, 85, 124, .28); /* Meleg terrakotta — a HELP Dombóvár logóból mintavételezve. Kizárólag az elsődleges cselekvésre ("Érdeklődöm", adomány) tartjuk fenn, hogy az örökbefogadási szándék legyen az oldal legerősebb vizuális pontja. */ --gm-accent: #b3452a; --gm-accent-600: #9a3820; --gm-accent-700: #7f2d18; --gm-accent-050: #fdf1ec; --gm-accent-ring: rgba(179, 69, 42, .30); /* Semleges skála */ --gm-ink: #1b2a33; --gm-ink-2: #35454f; --gm-muted: #5b6b76; --gm-line: #e3e9ee; --gm-line-strong: #cdd7de; /* Űrlapmezők kerete. A WCAG 1.4.11 szerint a vezérlő azonosításához szükséges vizuális információnak 3:1 kontrasztot kell elérnie a szomszédos színnel szemben. Egy beviteli mezőnél a KERET maga az azonosító, ezért itt nem elég a dekoratív világosszürke: #7f8e99 fehér alapon 3,37:1. */ --gm-field-border: #7f8e99; --gm-surface: #ffffff; --gm-surface-2: #f6f8fa; /* Sötét felületek — a meglévő fejléc/lábléc tónusai */ --gm-slate: #2e3b42; --gm-slate-900: #212b31; /* Sugarak és árnyékok */ --gm-r-sm: 8px; --gm-r-md: 12px; --gm-r-lg: 18px; --gm-r-pill: 999px; --gm-sh-1: 0 1px 2px rgba(16, 33, 45, .05), 0 1px 3px rgba(16, 33, 45, .06); --gm-sh-2: 0 4px 10px rgba(16, 33, 45, .06), 0 10px 24px rgba(16, 33, 45, .07); --gm-sh-3: 0 10px 20px rgba(16, 33, 45, .09), 0 22px 48px rgba(16, 33, 45, .12); /* Betűcsaládok. Nem töltünk be új webfontot: a Roboto és a Roboto Slab minden vágata már az oldalon van (az Elementor tölti be), az ABeeZee pedig a téma törzsbetűje. Az ABeeZee-nek nincs félkövér vágata, ezért a hangsúlyos kis felületi szövegek (gombok, címkék) Robotót kapnak: így valódi, nem szintetikusan vastagított félkövéret látunk. */ --gm-font-display: "Roboto Slab", Georgia, "Times New Roman", serif; --gm-font-ui: "Roboto", ABeeZee, system-ui, -apple-system, "Segoe UI", sans-serif; /* Ütemezés */ --gm-t-fast: .15s ease; --gm-t: .22s cubic-bezier(.2, .7, .3, 1); /* Érintőfelület minimuma (WCAG 2.5.5) */ --gm-tap: 44px; } /* ========================================================================== 2. ALAPOK ÉS TIPOGRÁFIA ========================================================================== */ body { font-size: 16px; /* 15px -> 16px: közérdekű tartalomhoz olvashatóbb */ line-height: 1.7; color: var(--gm-ink-2); -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; } /* Címsorok: valódi hierarchia. Eredetileg minden címsor 400-as vágatú ABeeZee volt, a H1 32px-en, a kártyacímek pedig 11,2px-en. */ h1, h2, h3, h4, h5, h6, .page-header-title, .entry-title { font-family: var(--gm-font-display); color: var(--gm-ink); line-height: 1.22; letter-spacing: -.01em; text-wrap: balance; } h1, .entry-title { font-size: clamp(28px, 1.4rem + 2vw, 40px); font-weight: 700; } h2 { font-size: clamp(24px, 1.2rem + 1.2vw, 31px); font-weight: 700; } h3 { font-size: clamp(20px, 1.1rem + .7vw, 25px); font-weight: 700; } h4 { font-size: 20px; font-weight: 600; } h5 { font-size: 17px; font-weight: 600; } h6 { font-size: 15px; font-weight: 600; letter-spacing: .04em; text-transform: uppercase; color: var(--gm-muted); } .entry-content h2, .entry-content h3, .entry-content h4 { margin-top: 1.6em; } .entry-content h2:first-child, .entry-content h3:first-child, .entry-content h4:first-child { margin-top: 0; } /* Sormérték: hosszú bekezdések ne fussanak 1100px szélesen. Csak a klasszikus tartalomra: az Elementorral tervezett szakaszok szélességét a widget saját beállítása adja, azt nem írjuk felül. */ .entry-content > p, .entry-content > ul, .entry-content > ol { max-width: 78ch; } /* TARTALMI HATÓKÖR Az oldalak túlnyomó része Elementorral épült, ezeken NINCS .entry-content konténer — a szöveg a .elementor-widget-text-editor widgetben ül. Ezért a tartalmi szabályokat mindkét gyökérre ki kell terjeszteni, különben a Díjjegyzék táblázatai és a szövegbeli hivatkozások kimaradnának. */ /* A kizarasok :where()-be kerulnek, mert a :not() a sajat argumentumanak specifikussagat is hozza adja: a naiv alak (0,4,1) sulyt kapott, es igy felulirta a komponensek sajat hivatkozas-stilusait (pl. az allatkartya cimet kekre + alahuzottra valtoztatta). A :where() sulya nulla, igy ez a szabaly (0,1,1) marad — eleg eros a tema `a` szabalyahoz, de barmely komponens-szabaly konnyeden felulirja. */ .entry-content a:where(:not(.button)):where(:not([class*="elementor-button"])):where(:not(.telep-btn)), .elementor-widget-text-editor a:where(:not(.button)):where(:not([class*="elementor-button"])):where(:not(.telep-btn)) { color: var(--gm-brand); text-decoration: underline; text-underline-offset: .18em; text-decoration-thickness: from-font; transition: color var(--gm-t-fast); } .entry-content a:where(:not(.button)):where(:not([class*="elementor-button"])):where(:not(.telep-btn)):hover, .elementor-widget-text-editor a:where(:not(.button)):where(:not([class*="elementor-button"])):where(:not(.telep-btn)):hover { color: var(--gm-accent); } .entry-content hr, .elementor-widget-text-editor hr { border: 0; border-top: 1px solid var(--gm-line); margin: 2.4em 0; } /* ========================================================================== 3. FÓKUSZ ÉS KISEGÍTŐ LEHETŐSÉGEK Közszféra: a WCAG 2.1 AA az EU 2016/2102 irányelv alapján kötelezettség. ========================================================================== */ :where(a, button, input, select, textarea, summary, [tabindex]):focus-visible { outline: 3px solid var(--gm-brand); outline-offset: 2px; border-radius: 4px; } /* Sötét háttéren (fejléc, lábléc, oldalcím-sáv) világos fókuszgyűrű kell. */ #site-header :where(a, button):focus-visible, .page-header :where(a, button):focus-visible, #footer :where(a, button):focus-visible { outline-color: #ffffff; } /* "Ugrás a tartalomra": fókuszra láthatóvá tesszük. */ .skip-link.screen-reader-text:focus { position: fixed !important; top: 12px; left: 12px; z-index: 100000; width: auto !important; height: auto !important; clip: auto !important; clip-path: none !important; padding: 12px 20px; background: var(--gm-brand); color: #fff !important; font-family: var(--gm-font-ui); font-weight: 600; border-radius: var(--gm-r-sm); box-shadow: var(--gm-sh-3); text-decoration: none; } /* ========================================================================== 4. FEJLÉC ÉS NAVIGÁCIÓ ========================================================================== */ /* A menüpontok 12px-en futottak; közérdekű oldalon ez túl kicsi. */ #site-navigation-wrap .dropdown-menu > li > a { font-family: var(--gm-font-ui); font-size: 15px; font-weight: 500; letter-spacing: .01em; padding: 0 18px; position: relative; } /* Aláhúzás-jelölő hoverre és az aktuális oldalra: nem csak színnel jelölünk. */ #site-navigation-wrap .dropdown-menu > li > a::after { content: ""; position: absolute; left: 18px; right: 18px; bottom: 22px; height: 2px; border-radius: 2px; background: currentColor; transform: scaleX(0); transform-origin: left center; transition: transform var(--gm-t); } #site-navigation-wrap .dropdown-menu > li > a:hover::after, #site-navigation-wrap .dropdown-menu > li.current-menu-item > a::after, #site-navigation-wrap .dropdown-menu > li.current_page_item > a::after, #site-navigation-wrap .dropdown-menu > li.current-menu-ancestor > a::after { transform: scaleX(1); } /* Átlátszó fejléc: az eredeti rgba(0,0,0,.48) világos fotókon gyenge kontrasztot adott a fehér menüszövegnek, és "dobozként" ült a képen. Felülről lefutó árnyalás olvashatóbb és illeszkedik a fotóhoz. */ #site-header.transparent-header:not(.is-sticky) { background-color: transparent; background-image: linear-gradient(180deg, rgba(12, 22, 28, .72) 0%, rgba(12, 22, 28, .40) 58%, rgba(12, 22, 28, 0) 100%); } #site-header.is-sticky { background-color: rgba(28, 40, 47, .94); backdrop-filter: saturate(150%) blur(8px); -webkit-backdrop-filter: saturate(150%) blur(8px); box-shadow: var(--gm-sh-2); } /* A logó JPG fehér háttere fehér "bélyeget" vágott a sötét fejlécbe. Lekerekítéssel és finom árnyékkal szándékos jelvénnyé tesszük. */ #site-logo #site-logo-inner a img { border-radius: var(--gm-r-sm); box-shadow: 0 2px 10px rgba(0, 0, 0, .22); } /* Mobil menügomb: nagyobb érintőfelület, olvashatóbb felirat. */ .oceanwp-mobile-menu-icon a { font-family: var(--gm-font-ui); font-size: 15px; font-weight: 600; letter-spacing: .06em; min-height: var(--gm-tap); display: inline-flex; align-items: center; gap: 8px; } /* ========================================================================== 5. OLDALCÍM-SÁV ÉS MORZSAMENÜ ========================================================================== */ .page-header { background-color: var(--gm-slate); background-image: linear-gradient(140deg, #34444c 0%, var(--gm-slate) 46%, #263137 100%); border-bottom: 3px solid var(--gm-brand); } .page-header .page-header-title { font-size: clamp(26px, 1.2rem + 2.2vw, 40px); font-weight: 700; color: #fff; } /* A morzsamenü #c6c6c6 volt; világosabb tónus és nagyobb méret. */ .site-breadcrumbs, .site-breadcrumbs a, .site-breadcrumbs .breadcrumb-sep { font-family: var(--gm-font-ui); font-size: 14px; color: #dbe3e8; } .site-breadcrumbs a { text-decoration: none; } .site-breadcrumbs a:hover { color: #fff; text-decoration: underline; text-underline-offset: .2em; } /* ========================================================================== 6. GOMBOK ÉS ŰRLAPOK A téma alapgombja a demóból örökölt türkiz (#0eb290) volt, ami sem a logóhoz, sem a plugin kékjéhez nem illett. Egységesítjük. ========================================================================== */ .button, input[type="button"], input[type="reset"], input[type="submit"], button[type="submit"]:not(.telep-btn), .wp-block-button__link { font-family: var(--gm-font-ui); font-size: 15px; font-weight: 600; letter-spacing: .01em; border-radius: var(--gm-r-pill); padding: 12px 24px; min-height: var(--gm-tap); border: 1px solid transparent; background-color: var(--gm-brand); color: #fff; transition: background-color var(--gm-t-fast), box-shadow var(--gm-t-fast), transform var(--gm-t-fast); } .button:hover, input[type="button"]:hover, input[type="reset"]:hover, input[type="submit"]:hover, button[type="submit"]:not(.telep-btn):hover, .wp-block-button__link:hover { background-color: var(--gm-brand-600); color: #fff; transform: translateY(-1px); box-shadow: 0 6px 16px var(--gm-brand-ring); } /* Elementor-gombok: a widget saját színbeállítása erősebb, ezért csak a formát és a tipográfiát hangoljuk, a színt a widget adja. */ .elementor-button { font-family: var(--gm-font-ui); font-weight: 600; border-radius: var(--gm-r-pill); min-height: var(--gm-tap); } /* Űrlapmezők: az alapértelmezett böngészőstílus (2px inset keret, 0 sugár, 24px magasság) helyett egységes, ujjbaráthoz igazított mezők. */ input[type="text"], input[type="email"], input[type="tel"], input[type="url"], input[type="number"], input[type="search"], input[type="date"], input[type="time"], input[type="password"], select, textarea { font-family: inherit; font-size: 16px; /* 16px alatt az iOS ráközelít a mezőre */ color: var(--gm-ink); background-color: var(--gm-surface); border: 1px solid var(--gm-field-border); border-radius: var(--gm-r-md); padding: 11px 14px; min-height: var(--gm-tap); box-shadow: none; transition: border-color var(--gm-t-fast), box-shadow var(--gm-t-fast); } textarea { min-height: 128px; line-height: 1.6; } input:focus, select:focus, textarea:focus { border-color: var(--gm-brand); box-shadow: 0 0 0 3px var(--gm-brand-ring); outline: none; } ::placeholder { color: #93a2ab; opacity: 1; } /* Kötelező mezők jelölése */ label .required, .required-label { color: var(--gm-accent); font-weight: 700; } /* Rádiógomb / jelölőnégyzet: nagyobb, márkaszínű */ input[type="radio"], input[type="checkbox"] { width: 20px; height: 20px; accent-color: var(--gm-brand); min-height: 0; } /* --- WPForms (Bejelentés, Kapcsolat) ------------------------------------ A bejelentő űrlapokat a WPForms adja, a mezőket pedig az OceanWP saját soron belüli CSS-e stílusozza olyan szelektorral, amely erősebb az általános input-szabályainknál — ezért itt azonos súlyú szelektorral írjuk felül. A mezők eredetileg #f6f6f6 háttérrel ÉS #f6f6f6 kerettel jelentek meg: a mezőhatár kontrasztja fehér alapon kb. 1,05:1, ami a WCAG 1.4.11 (nem szöveges kontraszt, min. 3:1) alatt van — a kitöltendő mező széle gyakorlatilag láthatatlan volt. */ body div.wpforms-container-full .wpforms-form input[type="text"], body div.wpforms-container-full .wpforms-form input[type="email"], body div.wpforms-container-full .wpforms-form input[type="tel"], body div.wpforms-container-full .wpforms-form input[type="url"], body div.wpforms-container-full .wpforms-form input[type="number"], body div.wpforms-container-full .wpforms-form input[type="date"], body div.wpforms-container-full .wpforms-form input[type="datetime-local"], body div.wpforms-container-full .wpforms-form select, body div.wpforms-container-full .wpforms-form textarea, body form input[type="text"], body form input[type="email"], body form input[type="tel"], body form input[type="url"], body form input[type="number"], body form input[type="search"], body form input[type="date"], body form input[type="time"], body form select, body form textarea { background-color: var(--gm-surface); border: 1px solid var(--gm-field-border); border-radius: var(--gm-r-md); color: var(--gm-ink); font-size: 16px; padding: 11px 14px; min-height: var(--gm-tap); } body div.wpforms-container-full .wpforms-form textarea, body form textarea { min-height: 128px; } body div.wpforms-container-full .wpforms-form input:focus, body div.wpforms-container-full .wpforms-form select:focus, body div.wpforms-container-full .wpforms-form textarea:focus, body form input:focus, body form select:focus, body form textarea:focus { border-color: var(--gm-brand); box-shadow: 0 0 0 3px var(--gm-brand-ring); outline: none; } /* Jelölőelemek a WPForms választólistáiban */ body div.wpforms-container-full .wpforms-form input[type="radio"], body div.wpforms-container-full .wpforms-form input[type="checkbox"], body form input[type="radio"], body form input[type="checkbox"] { width: 20px; height: 20px; min-height: 0; padding: 0; accent-color: var(--gm-brand); border-radius: 0; } /* A választólehetőségek sora legyen kényelmesen célozható. */ body div.wpforms-container-full .wpforms-form ul li label { display: inline-flex; align-items: center; gap: 10px; min-height: var(--gm-tap); cursor: pointer; } /* Beküldés gomb: márkaszín, ujjbarát méret. */ body div.wpforms-container-full .wpforms-form button[type="submit"], body div.wpforms-container-full .wpforms-form input[type="submit"] { font-family: var(--gm-font-ui); font-size: 15px; font-weight: 600; background-color: var(--gm-brand); border: 1px solid var(--gm-brand); color: #fff; border-radius: var(--gm-r-pill); padding: 12px 28px; min-height: var(--gm-tap); } body div.wpforms-container-full .wpforms-form button[type="submit"]:hover, body div.wpforms-container-full .wpforms-form input[type="submit"]:hover { background-color: var(--gm-brand-600); border-color: var(--gm-brand-600); } /* ========================================================================== 7. TÁBLÁZATOK — a Díjjegyzék a legfontosabb hatósági tartalom ========================================================================== */ /* A díjtáblázatok Elementor szövegwidgetben ülnek, ezért mindkét hatókört címezzük. A táblázatok ráadásul egy külső szerkesztőből lettek beillesztve, és olyan segédosztályokat hoztak magukkal (w-fit, min-w-…, _tableWrapper_…), amelyekhez ezen az oldalon nincs CSS — a szélességet itt állítjuk helyre. */ .entry-content table, .elementor-widget-text-editor table { width: 100%; min-width: 0; border-collapse: separate; border-spacing: 0; font-size: 15px; background: var(--gm-surface); border: 1px solid var(--gm-line); border-radius: var(--gm-r-md); overflow: hidden; box-shadow: var(--gm-sh-1); margin: 1.4em 0 2em; } /* A beillesztett táblázatot burkoló segédkonténerek ne szűkítsék a szélességet. */ .elementor-widget-text-editor [class*="_tableContainer"], .elementor-widget-text-editor [class*="_tableWrapper"] { display: block; width: 100%; max-width: 100%; } .entry-content table th, .elementor-widget-text-editor table th { font-family: var(--gm-font-ui); font-size: 12.5px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--gm-brand-700); background: var(--gm-brand-050); text-align: left; padding: 14px 16px; border-bottom: 1px solid var(--gm-line); white-space: nowrap; } .entry-content table td, .elementor-widget-text-editor table td { padding: 13px 16px; border-bottom: 1px solid var(--gm-line); vertical-align: top; } .entry-content table tbody tr:nth-child(even) td, .elementor-widget-text-editor table tbody tr:nth-child(even) td { background: var(--gm-surface-2); } .entry-content table tbody tr:last-child td, .elementor-widget-text-editor table tbody tr:last-child td { border-bottom: 0; } .entry-content table tbody tr:hover td, .elementor-widget-text-editor table tbody tr:hover td { background: var(--gm-brand-050); } /* Ár-oszlopok: azonos szélességű számjegyek, jobbra zárva olvashatóbb. */ .entry-content table :is(td, th):nth-child(2), .entry-content table :is(td, th):nth-child(3), .elementor-widget-text-editor table :is(td, th):nth-child(2), .elementor-widget-text-editor table :is(td, th):nth-child(3) { font-variant-numeric: tabular-nums; text-align: right; white-space: nowrap; } /* Keskeny kijelzőn a táblázat vízszintesen görgethető, az oldal nem törik szét. */ @media (max-width: 782px) { .entry-content table, .elementor-widget-text-editor table { display: block; overflow-x: auto; -webkit-overflow-scrolling: touch; } } /* ========================================================================== 8. LÁBLÉC ========================================================================== */ #footer-widgets { background-color: var(--gm-slate); background-image: linear-gradient(180deg, #34444c 0%, var(--gm-slate) 100%); padding: 46px 0 34px; } #footer-widgets .footer-box { color: #c3ced5; } #footer-widgets a { color: #e4ebef; text-decoration: none; } #footer-widgets a:hover { color: #fff; text-decoration: underline; text-underline-offset: .2em; } #footer-widgets .widget-title { font-family: var(--gm-font-ui); font-size: 13px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: #fff; } #footer-bottom { background-color: var(--gm-slate-900); font-size: 13px; color: #b6c2c9; } #footer-bottom a { color: #dfe7eb; } /* ========================================================================== 9. WP-ACCESSIBILITY ESZKÖZTÁR A bal szélre kihorgonyzott, fix pozíciójú eszköztár mobilon RÁTAKART a tartalomra (mérve: eltakarta a KPI-kártyák számjegyét). Kis kijelzőn lebegő, vízszintes sávvá alakítjuk a bal alsó sarokban. ========================================================================== */ @media (max-width: 960px) { .a11y-toolbar.standard-location { top: auto; bottom: 14px; left: 14px; width: auto; opacity: .78; /* lebegő vezérlő: jelen van, de nem tolakodó */ transition: opacity var(--gm-t-fast); } .a11y-toolbar.standard-location:hover, .a11y-toolbar.standard-location:focus-within { opacity: 1; } .a11y-toolbar.standard-location .a11y-toolbar-list { display: flex; flex-direction: row; gap: 2px; border-radius: var(--gm-r-pill); overflow: hidden; box-shadow: var(--gm-sh-3); } .a11y-toolbar.standard-location .a11y-toolbar-list-item { float: none; } } /* ========================================================================== 10. MOZGÁSCSÖKKENTÉS ÉS NYOMTATÁS ========================================================================== */ @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; scroll-behavior: auto !important; } /* Az elmozdulásos visszajelzéseket teljesen kivesszük. */ .telep-card:hover, .telep-stat:hover, .button:hover, .telep-btn:hover { transform: none !important; } } @media print { #site-header, #footer, .page-header, .a11y-toolbar, #scroll-top, .telep-filters, .telep-actions, .telep-lightbox, .sidebar-box { display: none !important; } body { font-size: 11pt; color: #000; } .telep-card { break-inside: avoid; box-shadow: none !important; border: 1px solid #999 !important; } .telep-grid { display: block !important; } a[href]::after { content: " (" attr(href) ")"; font-size: 9pt; color: #444; } .telep-card a[href]::after { content: ""; } }