/* Accessibility Fixes — egyedi CSS módosítások ide. */ /* === Főmenü fókuszjelölő ===================================================== * - A felső szint anchor elemek (pl. "Rólunk") kitöltik a li-jüket, hogy a * fókuszkeret vízszintesen középre essen. * - A fókuszjelölőt inset box-shadow-val rajzoljuk, így a szomszédos * menüelemek borderjei nem tudják levágni. * - Az almenüs menüpontok link- és nyílgomb része KÜLÖN-KÜLÖN kapja a * fókuszkeretet (nincs közös wrapper-keret), hogy a nyíl lenyitó gombja * vizuálisan és funkciósan is független maradjon. * - Vastagság 3px → 4.5px (másfélszeres). * - Szín: --accfix-focus-color (lásd alább). A jelenlegi érték egy példa — * cserélhető egy sorban a kontrasztarány újraellenőrzése után. * ========================================================================= */ :root { /* Lila — kontraszt fehér (#FFFFFF) menühátéren: ~8.95:1 — WCAG AAA. */ --accfix-focus-color: #6A1B9A; } .bricks-nav-menu > li.bricks-menu-item > a { display: flex; align-items: center; justify-content: center; width: 100%; height: 100%; box-sizing: border-box; padding-left: 10px; padding-right: 10px; text-align: center; } .bricks-nav-menu a:focus, .bricks-nav-menu a:focus-visible, .bricks-nav-menu button:focus, .bricks-nav-menu button:focus-visible { outline: none !important; box-shadow: inset 0 0 0 3px var(--accfix-focus-color) !important; border-radius: 6px !important; } /* A fókuszált menüelemet a DOM-testvérek fölé emeljük, hogy biztosan semmi * ne tudjon a keret fölé rajzolódni (nyitott almenük, elválasztó borderek). */ .bricks-nav-menu li.bricks-menu-item:focus-within { position: relative; z-index: 5; } /* === Globális fókuszjelölő ================================================= * Minden interaktív elem (link, gomb, input, accordion title, social ikon, * logó, footer link, CTA, stb.) egységes 3px lila KÜLSŐ box-shadow-t kap * fókuszáláskor, hogy a vizuális fókuszjelölés konzisztens legyen az egész * oldalon. A főmenü specifikusabb inset szabálya (lentebb) felülírja ezt * a navigáció esetén — ott a középre igazítás miatt inset kell. * * A külső shadow a világos/page bg-en rajzolódik, ahol a #6A1B9A * kontrasztja 8.95:1 (WCAG AAA). Sötét hátterű elemeknél (navy CTA, navy * accordion fejléc) is a kültéri pozíció miatt jól látható marad. * ========================================================================= */ a:focus, a:focus-visible, button:focus, button:focus-visible, input:focus, input:focus-visible, textarea:focus, textarea:focus-visible, select:focus, select:focus-visible, summary:focus, summary:focus-visible, [role="button"]:focus, [role="button"]:focus-visible, [tabindex]:not([tabindex="-1"]):focus, [tabindex]:not([tabindex="-1"]):focus-visible { outline: none !important; box-shadow: 0 0 0 3px var(--accfix-focus-color) !important; } /* === Új ablakban nyíló linkek jelölése ===================================== * WCAG 2.4.4 / 3.2.5 — G201, H83. A képernyőolvasós szöveget a JS szúrja be * a link végére (.accfix-sr-only), a vizuális ikont itt rajzoljuk ::after-rel * a szöveges linkekhez. Az ikon-only linkeket (social) nem jelöljük vizuálisan, * azok aria-label-jét bővíti a JS. * ========================================================================= */ .accfix-sr-only { position: absolute !important; width: 1px !important; height: 1px !important; padding: 0 !important; margin: -1px !important; overflow: hidden !important; clip: rect(0, 0, 0, 0) !important; white-space: nowrap !important; border: 0 !important; } /* === Accordion címek fókuszjelölő (GYIK stb.) ============================== * Az accordion címek sötétkék háttéren ülnek, ahol a globális lila (3px * #6A1B9A) fókuszkeret kontrasztja gyenge — alig látszik. Itt duplagyűrűs * jelölőt használunk: belül fehér, kívül lila, összesen ~6px vastag. Így * a fókusz MINDEN háttéren (világos ÉS sötét) jól kirajzolódik — a fehér a * sötétkékhez, a lila a fehér lapra kontrasztál. * * A .accordion-title-wrapper a Bricks nested accordion címeleme (role=button, * tabindex=0) — a globális [tabindex]:focus-visible szabály fedi, de az itteni * specifikusabb szelektor felülírja azt a duplagyűrűs változattal. * ========================================================================= */ /* Specificitás: a globális [tabindex]:not([tabindex="-1"]):focus-visible szabály * (0,3,1) felülírná egy sima .accordion-title-wrapper:focus-visible-t (0,2,0), * ezért itt [tabindex]-et is belefűzünk (+[tabindex] → 0,3,0; a duplázott * osztály +1 → 0,4,0), hogy biztosan nyerjen. */ .accordion-title-wrapper.accordion-title-wrapper[tabindex]:focus, .accordion-title-wrapper.accordion-title-wrapper[tabindex]:focus-visible { outline: none !important; /* Két rétegű box-shadow: belső fehér gyűrű az elem köré, kívül lila. * A fehér a sötétkék címkén kontrasztál, a lila a világos lapon — így * a fókusz mindkét irányban jól látható (WCAG 2.4.7 / 2.4.11). */ box-shadow: 0 0 0 3px #ffffff, 0 0 0 6px var(--accfix-focus-color) !important; border-radius: 4px !important; /* Hogy a gyűrű ne takarjon el szomszéd elemet. */ position: relative; z-index: 5; } /* === Bejelentkezés / Elfelejtett jelszó Bricks form layout + stílus ======== * A /bejelentkezes/ és /elfelejtett-jelszo/ oldalakon a Bricks form mezői * túl szélesek (624px), a submit gomb teal háttérrel eltér a főoldali * átlátszó+border-es stílustól, és a globális fókuszjelölő nem érkezik meg * (valami belső Bricks form szabály 0-ra állítja a box-shadow-t). Itt ezt * mind rendbe tesszük, scope-olva a két oldalra. * * Megjegyzés: a tényleges felhasználói bejelentkezés egy külső .NET appra * (mdakft.hu) megy — ezek a javítások csak a WP-oldali form kinézetére * vonatkoznak. * ========================================================================= */ body.page-id-14011 form.brxe-form, body.page-id-14028 form.brxe-form { max-width: 340px; } body.page-id-14011 form.brxe-form input[type="email"], body.page-id-14011 form.brxe-form input[type="password"], body.page-id-14011 form.brxe-form input[type="text"], body.page-id-14028 form.brxe-form input[type="email"], body.page-id-14028 form.brxe-form input[type="password"], body.page-id-14028 form.brxe-form input[type="text"] { max-width: 340px; width: 100%; } /* Fókuszjelölő — a Bricks form inputjaira valami belső szabály 0 0 0 0-ra * kényszeríti a box-shadow-t (még inline !important sem nyomja felül — * valószínűleg transition / @layer + !important kombináció). Ezért itt * outline-t használunk a fókuszjelölőre, ami szabadon átjön. Outline-offset * a border mögé teszi, hogy ne rontsa a mező saját keretét. */ body.page-id-14011 form.brxe-form input:focus, body.page-id-14011 form.brxe-form input:focus-visible, body.page-id-14011 form.brxe-form select:focus, body.page-id-14011 form.brxe-form textarea:focus, body.page-id-14011 form.brxe-form button:focus, body.page-id-14011 form.brxe-form button:focus-visible, body.page-id-14028 form.brxe-form input:focus, body.page-id-14028 form.brxe-form input:focus-visible, body.page-id-14028 form.brxe-form select:focus, body.page-id-14028 form.brxe-form textarea:focus, body.page-id-14028 form.brxe-form button:focus, body.page-id-14028 form.brxe-form button:focus-visible { outline: 3px solid #6A1B9A !important; outline-offset: 2px !important; outline-width: 3px !important; outline-style: solid !important; outline-color: #6A1B9A !important; box-shadow: none !important; } /* Submit gombok — a főoldali header gombok stílusával (átlátszó háttér, * 1px border, #363636 szöveg, 4px radius, Poppins 15px). A bejelentkezés * oldalon a teal "Bejelentkezés" változatot, az elfelejtett-jelszó oldalon * a dark blue "Jelentkezés" változatot használjuk. */ body.page-id-14011 form.brxe-form button[type="submit"], body.page-id-14011 form.brxe-form input[type="submit"], body.page-id-14028 form.brxe-form button[type="submit"], body.page-id-14028 form.brxe-form input[type="submit"] { background-color: transparent !important; color: #363636 !important; border-radius: 4px !important; font-family: Poppins, sans-serif !important; font-size: 15px !important; font-weight: 400 !important; width: 180px !important; height: 45px !important; padding: 0 !important; line-height: 45px !important; transition: background-color 0.2s ease, color 0.2s ease !important; } body.page-id-14011 form.brxe-form button[type="submit"], body.page-id-14011 form.brxe-form input[type="submit"] { border: 1px solid #58CABB !important; } body.page-id-14011 form.brxe-form button[type="submit"]:hover, body.page-id-14011 form.brxe-form input[type="submit"]:hover { background-color: #58CABB !important; color: #ffffff !important; } body.page-id-14028 form.brxe-form button[type="submit"], body.page-id-14028 form.brxe-form input[type="submit"] { border: 1px solid #030B4D !important; } body.page-id-14028 form.brxe-form button[type="submit"]:hover, body.page-id-14028 form.brxe-form input[type="submit"]:hover { background-color: #030B4D !important; color: #ffffff !important; } /* === Bricks form mező-specifikus hibaüzenetek ============================= * A bricks-form-a11y.js minden kötelező mező után beszúr egy * .accfix-field-error span-t, aria-describedby-val bekötve. Csak akkor * látszik, ha az invalid event kitölti (hidden attribútum). * ========================================================================= */ .accfix-field-error { display: block; margin-top: 6px; font-size: 0.875em; line-height: 1.4; color: #b91c1c; font-weight: 600; } .accfix-field-error[hidden] { display: none; } form.brxe-form input[aria-invalid="true"], form.brxe-form select[aria-invalid="true"], form.brxe-form textarea[aria-invalid="true"] { border-color: #b91c1c !important; } /* === Bal oldali közösségi sáv ============================================= * A fixen pozicionált sáv (#brxe-dcacbm) eredetileg nagyobb méretű — görgetés * közben kitakart tartalmat. 75%-ra zsugorítjuk transform-mal, hogy minden * belső méret (ikon, padding, gap, árnyék) arányosan csökkenjen. Az origin * bal-közép, hogy a bal szélhez képest ne ugorjon el. * * A közösségi linkek (.bricks-link-wrapper) fókuszjelölője a globális 3px * box-shadow — itt border-radius-szal kerekre vesszük, hogy a jelölő is * lekövesse az ikonok formáját. (A box-shadow követi az elem border-radius-át.) * ========================================================================= */ #brxe-dcacbm { transform: scale(0.75); transform-origin: left center; } #brxe-dcacbm a.bricks-link-wrapper { border-radius: 8px; } /* === Kontraszt javítás — funkcionális teal felületek ====================== * A Bricks téma #58CABB (turquoise) színt használ primary gombokon, aktív * főmenüponton és néhány accordion-/card-címen. A fehérrel szembeni * kontrasztja 1.98:1 (WCAG AA minimum 4.5:1). Itt a FUNKCIONÁLIS * (szöveget hordozó, kattintható) felületeken sötétebb --accfix-teal-ra * váltunk. Dekoratív teal sávok / hátterek érintetlenek maradnak, hogy a * brand-érzet megőrződjön. * * --accfix-teal: #2A8277 → 5.27:1 fehérrel (WCAG AA bőven megvan). * Finomhangolható egy helyen; ha a design túl sötét, próbálható #2F8F82 * (4.54:1) vagy #1F6B62 (AAA). * ========================================================================= */ :root { --accfix-teal: #2A8277; } /* Primary bg-es gombok (pl. header "Bejelentkezés" CTA, főoldali "Érdekel" * és "Igen, érdekelnek a részletek!" CTA-k) — mindenhol sötétebb teal * háttér + fehér szöveg. A főoldali CTA-k eredetileg navy (#030B4D) szöveget * használnak, ami a sötétebb teal-lal is csak 3.93:1 — kell a fehér (5.27:1). */ .bricks-button.bricks-background-primary, .bricks-background-primary { background-color: var(--accfix-teal) !important; color: #ffffff !important; } /* Aktív főmenüpont (teal szöveg fehér headeren) */ .bricks-nav-menu a[aria-current="page"], .bricks-nav-menu [aria-current="page"] > a { color: var(--accfix-teal) !important; } /* GYIK: az a nyitott/kiemelt accordion cím, amin teal háttér van. * Bricks elem-osztály — ha a template változik, ezt frissíteni kell. */ .brxe-bxhxdo.accordion-title-wrapper { background-color: var(--accfix-teal) !important; } /* Közösségi események oldal — a két középső banner (A Start Akadémia * diákjainak / Start Diplomáciai Tábor) eredetileg a világos --turquoise * (#58CABB) hátteret kapja, ami a benne lévő fehér szöveggel csak 1.98:1 — * a sötétebb --accfix-teal-ra cseréljük (5.27:1, WCAG AA). */ #brxe-qwcide, #brxe-sxcdax { background-color: var(--accfix-teal) !important; } /* Képzések: a teal hátterű kurzus-kártya fejlécek (II. / Komplex * kommunikáció, II. / Nyilvános beszéd, III. / Mindennapi döntéshozatal). */ #brxe-mwsvhk.tab-title, #brxe-tgxdyt.tab-title, #brxe-ryfcwf.tab-title { background-color: var(--accfix-teal) !important; } /* A bejelentkezés-oldali submit gomb teal border + hover state is ugyanezt * a problémát örökli (fentebb, 191-199. sor környékén) — override. */ body.page-id-14011 form.brxe-form button[type="submit"], body.page-id-14011 form.brxe-form input[type="submit"] { border-color: var(--accfix-teal) !important; } body.page-id-14011 form.brxe-form button[type="submit"]:hover, body.page-id-14011 form.brxe-form input[type="submit"]:hover { background-color: var(--accfix-teal) !important; } a.accfix-external-link::after { content: ""; display: inline-block; width: 0.75em; height: 0.75em; margin-left: 0.25em; vertical-align: baseline; background-color: currentColor; /* "Open in new window" ikon (arrow-up-right-from-square) — mask-elt SVG, * így a link színét veszi fel és megőrzi a kontrasztot. */ -webkit-mask: url("data:image/svg+xml;utf8,") no-repeat center / contain; mask: url("data:image/svg+xml;utf8,") no-repeat center / contain; } /* === Splide slider pause/play gomb (WCAG 2.2.2) ============================ * A BricksExtras x-slider autoplay-ét nem lehet megállítani — a slider-pause.js * minden autoplay-es Splide-hoz injektál egy gombot, ez itt stílusozódik. * ========================================================================= */ .accfix-slider-toggle { position: absolute; z-index: 10; top: 12px; right: 12px; display: inline-flex; align-items: center; gap: 8px; padding: 8px 14px; background: #000; color: #fff; border: 2px solid #fff; border-radius: 999px; font-size: 14px; font-weight: 600; line-height: 1; cursor: pointer; } .accfix-slider-toggle:focus-visible { outline: 3px solid var(--accfix-focus-color, #6A1B9A); outline-offset: 2px; } .accfix-slider-toggle__icon { width: 12px; height: 14px; background: currentColor; -webkit-mask: url("data:image/svg+xml;utf8,") no-repeat center / contain; mask: url("data:image/svg+xml;utf8,") no-repeat center / contain; } .accfix-slider-toggle.is-paused .accfix-slider-toggle__icon { -webkit-mask: url("data:image/svg+xml;utf8,") no-repeat center / contain; mask: url("data:image/svg+xml;utf8,") no-repeat center / contain; } .x-slider.splide { position: relative; }