/*===================================================== Project : Átfogó Képzések — vendégoldal File : cookieconsent-theme.css Description : A vanilla-cookieconsent v3.1.0 márkára szabása ======================================================= MIÉRT KÜLÖN FÁJL? A style.css és a custom.css a design system két „élő” fájlja, rajtuk folyamatosan dolgozunk. A sütibanner egy zárt, harmadik feles komponens, aminek a stílusa a könyvtár verziójához tapad — ha egyszer 3.1.0-ról lépünk, ezt az EGY fájlt kell átnézni, nem a 96 kB-os style.css-t. MIÉRT #cc-main ALÁ SCOPE-OLVA, ÉS NEM :root-ra? A könyvtár a 46 darab `--cc-*` változóját a `:root`-on definiálja, viszont MINDEN olvasási helye a `#cc-main` konténeren belül van (egyetlen kivétel a `.disable--interaction #cc-main .cm-wrapper:before`, az is azon belül). Ha a felülírást a `#cc-main`-re tesszük: 1. nem szennyezzük az oldal globális változónévterét, 2. a felülírás a *saját elemén* áll, tehát biztosan legyőzi a `:root`-ról ÖRÖKÖLT gyári értéket — betöltési sorrendtől függetlenül. A nem-változós (bedrótozott) szabályokat viszont a sorrend dönti el, ezért ez a fájl a vendor CSS UTÁN töltődik — lásd meta-cookie.blade.php. A MÁRKASZÍNEK var()-ral, hex tartalékkal Egy forrás van igazából: a style.css :root tokenjei. A `var(--theme-color, #FDA31B)` alak azért jó, mert egy márkaszín-csere itt is átüt, viszont ha a style.css valamiért nem töltődne be, a banner akkor sem esik szét. =====================================================*/ /*===================================================== 1. Változók — a design tokenek leképezése =====================================================*/ #cc-main { /* --- Tipográfia ------------------------------------------------- Egy betűcsalád az egész oldalon; a gyári -apple-system stack kilógna a Figtree mellől. */ --cc-font-family: var(--body-font, 'Figtree', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif); /* --- Felület és szöveg ------------------------------------------ Fehér kártya, sötétzöld cím (12,38:1), sötétkék törzsszöveg (9,79:1) — mindkettő AAA fehéren. */ --cc-bg: var(--color-white, #FFFFFF); --cc-primary-color: var(--heading-color, #213A25); --cc-secondary-color: var(--body-text, #394459); /* --- Elsődleges gomb = „Mindet elfogadom” ------------------------ A MÁRKA NARANCS, DE A FELIRAT SÖTÉTZÖLD, NEM FEHÉR. Tudatos eltérés a .theme-btn-től: fehér a #FDA31B-n csak 2,01:1, ami bukja a WCAG AA-t (4,5:1 kell, mert a 14px/700 nem számít „nagy szövegnek”). A #213A25 ugyanezen a narancson 6,15:1 — átmegy AA-t, sőt a nagy szövegre vonatkozó AAA-t is. Hoveren (#E8910D) 5,00:1, szintén rendben. Ez egy jogi nyilatkozat felülete, nem dekoráció: itt az olvashatóság előbbre való, mint a gombfeliratok egyöntetűsége. A gomb alakja, mérete, tipográfiája és a narancs változatlan, tehát a márkajelleg megmarad. */ --cc-btn-primary-bg: var(--theme-color, #FDA31B); --cc-btn-primary-color: var(--heading-color, #213A25); --cc-btn-primary-border-color: var(--theme-color, #FDA31B); --cc-btn-primary-hover-bg: var(--theme-color-hover, #E8910D); --cc-btn-primary-hover-color: var(--heading-color, #213A25); --cc-btn-primary-hover-border-color: var(--theme-color-hover, #E8910D); /* --- Másodlagos gomb = „Csak a szükségesek” + „Beállítások” ------- A .theme-btn.btn-outline-dark mása: világos felület, látható sötétzöld keret, hoveren betelik. CSAPDA: a --cc-btn-secondary-bg NEM csak a gomb háttere — a „Mindig aktív” pirula (.pm__badge) is ezt használja. Ha itt #FFFFFF állna (hogy a gomb tényleg „átlátszó” legyen), a pirula eltűnne a fehér modálon. Ezért #F9F7F8, a körvonalasságot pedig a keretszín adja. */ --cc-btn-secondary-bg: var(--section-bg, #F9F7F8); --cc-btn-secondary-color: var(--theme-color2, #213A25); --cc-btn-secondary-border-color: var(--theme-color2, #213A25); --cc-btn-secondary-hover-bg: var(--theme-color2, #213A25); --cc-btn-secondary-hover-color: var(--color-white, #FFFFFF); --cc-btn-secondary-hover-border-color: var(--theme-color2, #213A25); /* --- Linkek ------------------------------------------------------ NEM narancs: a #FDA31B mint szövegszín fehéren 2,01:1 lenne. A márkaszín az aláhúzásban jelenik meg (3. blokk), ott díszítés, nem információhordozó. */ --cc-link-color: var(--theme-color2, #213A25); /* --- Elválasztók ------------------------------------------------- A `--cc-section-category-border` SZÁNDÉKOSAN nincs itt: 3.1.0-ban halott változó. A gyári CSS csak egy másik változóba vezeti tovább (`--cc-webkit-scrollbar-bg`), amit viszont egyetlen szelektor sem olvas — a felülírása tehát semmit nem csinálna, csak a következő verziófrissítésnél kereskedne fölösleges időt. */ --cc-separator-border-color: var(--border-color, #E5E5E7); /* --- Kapcsolók --------------------------------------------------- A bekapcsolt sáv SÖTÉTZÖLD, nem narancs: a narancs sáv a fehér kártyán 2,01:1 lenne, ami bukja a WCAG 1.4.11-et (nem-szöveges kontraszt, 3:1). Sötétzöld sáv fehéren 12,38:1, a kikapcsolt szürke 5,24:1 — mindkét állapot jól látszik. A letiltott („mindig aktív”) kapcsoló világosszürke: a letiltott vezérlőkre a 1.4.11 nem vonatkozik, és a szürkeség pont azt közli, hogy nem lehet hozzányúlni. */ --cc-toggle-on-bg: var(--theme-color2, #213A25); --cc-toggle-on-knob-bg: var(--color-white, #FFFFFF); --cc-toggle-off-bg: var(--muted-text, #6C6C6E); --cc-toggle-off-knob-bg: var(--color-white, #FFFFFF); --cc-toggle-readonly-bg: var(--border-color, #E5E5E7); --cc-toggle-readonly-knob-bg: var(--color-white, #FFFFFF); --cc-toggle-readonly-knob-icon-color: var(--border-color, #E5E5E7); --cc-pm-toggle-border-radius: var(--radius-pill, 999px); /* --- Kategória-harmonika a beállító ablakban ---------------------- */ --cc-cookie-category-block-bg: var(--section-bg, #F9F7F8); --cc-cookie-category-block-border: var(--border-color, #E5E5E7); --cc-cookie-category-block-hover-bg: var(--page-mint, #F3F8F9); --cc-cookie-category-block-hover-border: var(--border-color, #E5E5E7); --cc-cookie-category-expanded-block-bg: transparent; --cc-cookie-category-expanded-block-hover-bg: var(--page-mint, #F3F8F9); /* --- A beállító ablak lábléce ------------------------------------- */ --cc-footer-bg: var(--section-bg, #F9F7F8); --cc-footer-color: var(--muted-text, #6C6C6E); --cc-footer-border-color: var(--border-color, #E5E5E7); /* --- Fátyol ------------------------------------------------------- Semleges fekete helyett márka-sötétzöld, és .65 helyett .55: a modál mögött így nem „kialszik” az oldal, csak hátralép. */ --cc-overlay-bg: rgba(33, 58, 37, .55); /* --- Geometria ---------------------------------------------------- A gomb 4px (mint a .theme-btn), a doboz 8px (mint a kártyák), az animáció .3s (mint a --transition). A --cc-modal-margin 30px: ez a #scroll-top ritmusa, így a banner ugyanabban a rácsban ül, mint a többi lebegő elem. A --cc-z-index marad a gyári 2147483647 (a #scroll-top 999, a header 100) — a banner mindenképp legfelül van. */ --cc-modal-border-radius: var(--radius-md, 8px); --cc-btn-border-radius: var(--radius-sm, 4px); --cc-modal-transition-duration: .3s; --cc-modal-margin: 30px; } /*===================================================== 2. Amit változóval nem lehet állítani =====================================================*/ /* A könyvtár egy elég erős, kékes-fekete árnyékot drótoz be (0 .625em 1.875em rgba(0,0,2,.3)). Ugyanaz a geometria, de a mi kártya-árnyékunk zöldes tónusával — a lebegő doboznak a --shadow-card már kevés, ezért a hover-változat. */ #cc-main .cm, #cc-main .pm { box-shadow: var(--shadow-card-hover, 0 10px 30px rgba(33, 58, 37, .14)); } /* Gomb-geometria = .theme-btn (14px / 700 / line-height 1 / 15px 26px). A min-height 46px, mert a .theme-btn 44px magas, a cc gombon viszont van 1px keret körben. A .cm__btn--close-t kihagyjuk: az egy 42×42-es ikongomb, annak a padding és a min-height szétverné az arányait. (Ma amúgy sem renderelődik — lásd meta-cookie.blade.php, nem adunk neki closeIconLabel-t.) */ #cc-main .cm__btn:not(.cm__btn--close), #cc-main .pm__btn { font-size: 14px; font-weight: 700; line-height: 1; min-height: 46px; padding: 15px 26px; } /* Címek: a gyári .cm__title 1.05em/600, a .pm__title 600 — a mi szekciócímeink 700-asok, és a 20px illik a 24rem-es dobozba. */ #cc-main .cm__title, #cc-main .pm__title { color: var(--heading-color, #213A25); font-size: 20px; font-weight: 700; line-height: 1.3; } /* A kategóriasorok címe: 16px/700, hogy a kapcsoló mellett is kiolvasható maradjon (a gyári .95em = 15,2px). */ #cc-main .pm__section-title { font-size: 16px; font-weight: 700; } /* A leírások a törzsszöveg méretét kapják — a gyári .9em (14,4px) egy jogi szövegnél már a kényelmetlen tartomány alja. */ #cc-main .cm__desc, #cc-main .pm__section-desc-wrapper { font-size: 15px; line-height: 1.6; } /* A sormagasságot a wrapperen HIÁBA állítanánk: a szöveg egy gyermek

-ben ül, amire a gyári CSS közvetlenül tesz line-height:1.5em-et — a közvetlen szabály mindig legyőzi az öröklést. A font-size viszont öröklődik, azt fent hagyjuk. */ #cc-main .pm__section-desc { line-height: 1.6; } /* A banner láblécének linksora gyárilag .8em (12,8px) — ez az a méret, amit a látogató „apró betűs résznek” olvas. Márpedig pont ide kerül az adatkezelési tájékoztató linkje, tehát 14px a minimum. */ #cc-main .cm__link-group { font-size: 14px; } /* Linkek: a gyári megoldás csak hoveren húzza alá a linket (0 → 100% széles gradiens-háttér). Egy jogi felületen a link nem függhet attól, hogy valaki ráviszi az egeret, és színnel sem különböztethető meg (a linkszín és a szövegszín ugyanaz a sötétzöld). Ezért TARTÓS, 2px-es NARANCS aláhúzás: itt a márkaszín díszítés, nem információhordozó, tehát a 2,01:1 nem probléma. Hoveren a vonal a szöveg színét veszi fel — így marad visszajelzés. */ #cc-main a, #cc-main .cc__link { background-image: linear-gradient(var(--theme-color, #FDA31B), var(--theme-color, #FDA31B)); background-size: 100% 2px; } #cc-main a:hover, #cc-main .cc__link:hover { background-image: linear-gradient(currentColor, currentColor); background-size: 100% 2px; color: var(--heading-color, #213A25); } /*===================================================== 3. Billentyűzetes használat =====================================================*/ /* A könyvtár a fókuszgyűrűt a böngészőre bízza (`outline: revert`), ami a narancs gombon és a sötétzöld kereten hol látszik, hol nem. Adunk sajátot: sötétzöld, 3px, 2px eltartással — a fehér kártyán 12,38:1, tehát minden gombnál és linknél biztosan látható. Csak :focus-visible, hogy egérrel kattintva ne villanjon be. */ #cc-main .cm__btn:focus-visible, #cc-main .pm__btn:focus-visible, #cc-main .pm__close-btn:focus-visible, #cc-main .pm__section-title:focus-visible, #cc-main .section__toggle:focus-visible, #cc-main a:focus-visible, #cc-main .cc__link:focus-visible { outline: 3px solid var(--theme-color2, #213A25); outline-offset: 2px; } /* A kapcsoló natív checkbox, amit a rajzolt sáv takar. A gyűrű a border-box köré rajzolódik, tehát a takarás ellenére látszik — de csak akkor, ha a sávnak nem esik neki. Innen a pill-forma. */ #cc-main .section__toggle:focus-visible { border-radius: var(--radius-pill, 999px); } /*===================================================== 4. Ütközés a #scroll-top gombbal =====================================================*/ /* A #scroll-top fixen ül a jobb alsó sarokban (right/bottom 30px, 42×42, z-index 999). Asztali nézetben nincs baj: a bannert szándékosan BAL alulra tettük, tehát a két elem nem találkozik. 640px alatt viszont a könyvtár teljes szélesre feszíti a dobozt (max-width:none!important), így az ráfekszik a gombra — a banner z-indexe 2147483647, tehát a gomb alá kerül, és egy takarásban lévő, mégis fókuszálható elem marad belőle. Az -re kerülő show--consent / show--preferences osztályra horgonyzunk: determinisztikus, nincs benne bűvös szám, és a style.css-hez nem kell hozzányúlni. A specificitás (1,1,1) legyőzi a #scroll-top.active (1,1,0) szabályt. */ @media screen and (max-width: 640px) { /* A gyári mobil érték .5em (8px) — a 30px viszont mobilon már elveszi a doboz szélességének a hatodát. 16px a kompromisszum. */ #cc-main { --cc-modal-margin: 16px; } /* A gyári CSS 640px alatt ELREJTI a „Mindig aktív” pirulát (#cc-main .pm__badge{display:none}) — épp azon a képernyőn, ahol a legkevésbé látszik, hogy a „működéshez szükséges” kategória kapcsolója le van tiltva. A letiltott vezérlőre a WCAG 1.4.11 nem vonatkozik, tehát ez nem szabálysértés, de a pirula az EGYETLEN nem szöveges jelzés arról, hogy azt a sort nem lehet kikapcsolni. Visszakapcsoljuk. */ #cc-main .pm__badge { display: flex; } html.show--consent #scroll-top, html.show--preferences #scroll-top { display: none; } }