/* GetDrink — sötét mód kontraszt-javítások (WCAG AA: 4.5:1 szöveg, 3:1 ikon)
---------------------------------------------------------------------------
Csak sötét módban töltődik be (minden oldal -jében:
),
ezért a világos megjelenést nem érinti. A a VÉGÉN áll, így azonos
specificitásnál ez a forrássorrendben utolsó szabály és nyer.
Miért kell:
• a --brand / --brand-2 / --brand-3 (mély kékek) sötétben sem váltanak, ezért
SZÖVEGKÉNT sötét felületen csak 1,2-2,3:1 kontrasztot adnak (háttérként és
keretként jók, ezért nem a token értékét írjuk át);
• néhány felület kemény kódolt fehér (modál-űrlap, megoldás-kártya, Leaflet-felugró),
miközben a szövege a sötétben világosra váltó --ink/--muted tokenből jön;
• néhány szövegszín kemény kódolt sötét (#12212e, #c0392b, #1a7f47, #8a5a00).
Mérés: automatikus audit sötét módban, 12 oldal × 2 szélesség, a rejtett
állapotokkal (modál, legördülők, mindent kinyitva) — 20 hibacsoport volt.
Új komponensnél: ne használj márkakéket SZÖVEGSZÍNKÉNT sötét felületen; a helyes
a var(--ink) / var(--ink-soft) / var(--muted), vagy az alábbi --dm-accent. */
:root {
color-scheme: dark; /* a natív vezérlők (csúszka-sáv, select-lista, fájlgomb, görgetősáv) is sötétek */
--dm-accent: #8CC4F0; /* világos akcentus-szöveg: 7,4-9,6:1 a sötét felületeken */
--dm-hover: #12405F; /* sötét hover-háttér (a világos #CFE3F2 helyett) */
--dm-danger: #FF8A80; /* hiba: 6,8:1 a --card-on */
--dm-success: #6FE3A0; /* siker: 9,8:1 a --card-on */
}
/* 1) Márkakék SZÖVEG → világos akcentus */
.brand,
.eyebrow:not(.eyebrow--light),
.ptable td:last-child,
.calc-in output,
.calc-total b,
.float-chip .fc-t1,
.solcard b,
.solcard .go,
.gd-consent a,
.field-hint,
.legal h2.lh,
.legal a,
.vtag,
.vf-cat-count,
.pc-price,
.jumpnav a.active {
color: var(--dm-accent);
}
/* 1a) "Ghost" gomb: az oldalankénti sötét blokk a --brand-3-at (#0A6BB0) adta, ez 2,8-3,2:1 volt */
body .btn--ghost {
color: var(--dm-accent);
border-color: rgba(140, 196, 240, .45);
}
body .btn--ghost:hover {
border-color: var(--dm-accent);
background: rgba(140, 196, 240, .12);
}
/* 1b) Ugyanez hover / nyitott állapotban (alapszínük --ink-soft, hoverre márkakék volt) */
.audience-toggle a:hover:not(.au-active),
.nav-contact:hover,
.nav-menu-picker:hover,
body:not(.home) .nav-menu-link:hover,
.nav-more-btn:hover,
.nav-more-btn[aria-expanded="true"],
.nav-more-panel a:hover,
.nav-more-panel a.current,
.bsheet-close:hover,
.lead-modal-close:hover,
.vcard-addr:hover,
.vcard-addr:focus-visible,
.vf-clear:hover,
.vf-drawer-close:hover,
.vf-filters-trigger:hover {
color: var(--dm-accent);
}
/* 2) Kemény kódolt világos felületek → a sötét token */
.solcard,
.gd-form {
background: var(--card);
}
.gd-field input:focus,
.gd-field textarea:focus,
.gd-field select:focus {
background: var(--tint); /* fókuszban eddig #fff volt, világos szöveggel → láthatatlan gépelés */
}
.eyebrow--light {
background: #06253F; /* a --ink sötétben világosra vált; a pill mindig sötét, borostyán szöveggel */
}
/* 3) Kemény kódolt sötét szövegek */
.calc-in label {
color: var(--ink);
}
.section .chip {
color: #EAF2FA;
border-color: rgba(234, 242, 250, .22);
}
.gd-err,
.gd-form-msg.err,
.venue-popup-tier {
color: var(--dm-danger);
}
.gd-form-msg.ok {
color: var(--dm-success);
}
[style*="#8a5a00"] {
color: #F4A23C !important; /* inline stílus → csak !important írja felül */
}
/* 4) Placeholderek (a böngésző-alap #757575 a sötét mezőn 3,9:1 volt) */
input::placeholder,
textarea::placeholder {
color: var(--muted);
opacity: 1;
}
/* 5) Ikonok, apró vezérlők (3:1 kell) */
.vf-search-icon,
.cmp-picker-toggle svg,
.cmp-picker-chip-x {
color: var(--ink-soft);
}
/* 6) Leaflet felugró: alapból fehér, a szövege viszont a sötétben világosra váltó tokenből jön.
A leaflet.css az index.html body-jának VÉGÉN töltődik (a mi -ünk után), ezért itt
a forrássorrend nem elég: a .leaflet-container előtaggal emelt specificitás kell. */
.leaflet-container .leaflet-popup-content-wrapper,
.leaflet-container .leaflet-popup-tip {
background: var(--card);
color: var(--ink);
}
.leaflet-container .leaflet-popup a.leaflet-popup-close-button {
color: var(--muted);
}
.leaflet-container a.venue-popup-cta {
color: var(--dm-accent);
}
.leaflet-container a.venue-popup-cta:hover {
background: var(--dm-hover);
}
/* 7) Mindig világos "eszköz-kijelző" (telefon-makett): a tokeneket helyben világos értékre állítjuk,
így a benne lévő --ink/--muted szövegek nem fordulnak fehér-a-fehéren */
.phone,
.qr {
--ink: #06253F;
--ink-soft: #1E3A52;
--muted: #455668;
--line: #DCE6EF;
--tint: #DCEAF5;
color: #06253F;
}