/* ============================================================================ stilusok.css — VÁLTHATÓ TELJES DESIGNS (stílus-rendszerek) ---------------------------------------------------------------------------- A temak.css-től ELTÉRŐEN ez nem színvariáció: minden stílus a felület teljes vizuális nyelvét újrarajzolja — tipográfia, keretek, árnyékok, sugarak, oldalsáv, gombok, táblázatok, widget-komponensek. A funkcionális elemek (DOM, osztálynevek, JS) NEM változnak, csak a megjelenés. RÉTEGEZÉS: ezt a fájlt a temak.css UTÁN kell betölteni — így ha valaki színtémát ÉS stílust is választ, a stílus nyer (a html[data-stilus="..."] szelektorok ugyanolyan erősek, mint a html[data-tema="..."], a forrásrend dönt). A stílusok önmagukban teljesek: a saját tokenjeiket mind felülírják. Váltás: (a /kozos/stilus.js állítja + új lebegő gomb BAL oldalt alul). "alap" = nincs attribútum, a megszokott felület. Új stílus felvétele: egy html[data-stilus="..."] blokk-sorozat ide + egy sor a /kozos/stilus.js STILUSOK tömbjébe. Sehol máshol nem kell nyúlni. Megkötés: a widget-felületek szelektorai body:not(.f-vaz)-val vannak hatókörözve (az admin oldalak törzse .f-vaz), hogy a .doboz stb. közös osztálynevek ne üssenek vissza az adminra. ========================================================================== */ /* ============================================================================ 1) MAGAZIN — nyomtatott újság: tintafekete hajszálvonalak, Georgia szerif címsorok, karmazsin kiemelés, nulla árnyék, szögletes papírlapok. Jelenet: reggeli kávé mellett kinyitott magazin — szerkesztőségi ritmus, vastag cím, vékony vonal, sok fehér tér. ========================================================================== */ html[data-stilus="magazin"] { /* — admin tokenek — */ --f-fekete: #141310; /* gomb-fekete marad tintás */ --f-hatter: #fbfaf7; /* papír */ --f-feher: #ffffff; --f-lila: #a4123f; /* karmazsin kiemelés — fehér szöveg ~7.5:1 */ --f-lila-sotet: #7c0e30; --f-lila-halvany: #f9e8ee; --f-lila-hover: #f3d3dd; --f-keret: #ddd8ce; --f-szoveg: #141310; --f-szoveg-masodlagos: #57534a; --f-sugar: 2px; --f-sugar-kicsi: 2px; --f-arnyek: none; --f-arnyek-lebego: 0 18px 44px -18px rgba(20,19,16,.35); /* — widget tokenek — */ --fo-szin: #a4123f; --lap: #ffffff; --hatter: #fbfaf7; --keret: #ddd8ce; --keret-eros: #141310; --tinta: #141310; --tinta-lagy: #57534a; --halvany: #6f6a5e; --sugar: 2px; --sugar-kicsi: 2px; --arnyek: none; } /* Szerif címek admin + widget + belépés (.doboz h1) felületén */ html[data-stilus="magazin"] .f-h1, html[data-stilus="magazin"] .f-h2, html[data-stilus="magazin"] body:not(.f-vaz) h1 { font-family: Georgia, 'Iowan Old Style', 'Times New Roman', serif; font-weight: 700; letter-spacing: -0.01em; } html[data-stilus="magazin"] body:not(.f-vaz) h2 { text-transform: uppercase; letter-spacing: .09em; font-size: 12.5px; } /* Papírlap-kártya: tintakeret, semmi árnyék */ html[data-stilus="magazin"] .f-kartya { border: 1px solid #141310; border-radius: 2px; box-shadow: none; } /* Gombok: szögletes, kiskapitális szedés */ html[data-stilus="magazin"] .f-gomb { border-radius: 2px; text-transform: uppercase; letter-spacing: .05em; font-size: 12.5px; font-weight: 700; } html[data-stilus="magazin"] .f-gomb-fekete, html[data-stilus="magazin"] .f-gomb-feher, html[data-stilus="magazin"] .f-gomb-piros { border-radius: 2px; } /* Táblázat: vastag fejléc-vonal, mint az újság hasábjai felett */ html[data-stilus="magazin"] .f-tabla th { border-bottom: 2px solid #141310; color: #141310; } /* Űrlapok: szögletes, tinta-fókusz */ html[data-stilus="magazin"] .f-mezo input, html[data-stilus="magazin"] .f-mezo textarea, html[data-stilus="magazin"] .f-legordulo { border-radius: 2px; } /* Oldalsáv: papírlap, tintaszöveg — a sötét sáv helyett világos "címoldal" */ html[data-stilus="magazin"] .f-oldalsav { background: #f4f1ea; border-right: 1px solid #141310; } html[data-stilus="magazin"] .f-oldalsav-uzlet { border-bottom: 1px solid #141310; } html[data-stilus="magazin"] .f-oldalsav-uzletnev { color: #141310; font-family: Georgia, serif; font-size: 15px; } html[data-stilus="magazin"] .f-oldalsav-uzletvalaszto { color: #141310; background: #ffffff; border: 1px solid #141310; border-radius: 2px; } html[data-stilus="magazin"] .f-oldalsav-uzletvalaszto:hover { background: #f4f1ea; } html[data-stilus="magazin"] .f-oldalsav-csoport-fejlec { color: #3a372f; border-radius: 2px; } html[data-stilus="magazin"] .f-oldalsav-csoport-fejlec:hover { background: rgba(20,19,16,.07); color: #141310; } html[data-stilus="magazin"] .f-oldalsav-csoport-fejlec.f-aktiv { background: #141310; color: #f4f1ea; } html[data-stilus="magazin"] .f-oldalsav-csoport-nyil { color: #8a8578; } html[data-stilus="magazin"] a.f-oldalsav-pont, html[data-stilus="magazin"] span.f-oldalsav-pont { color: #4a463c; border-radius: 2px; } html[data-stilus="magazin"] a.f-oldalsav-pont:hover { background: rgba(20,19,16,.07); color: #141310; } html[data-stilus="magazin"] a.f-oldalsav-pont.f-aktiv { background: #141310; color: #f4f1ea; } html[data-stilus="magazin"] span.f-oldalsav-pont.f-hamarosan { color: #6f6a57; } /* F07-13: 2.68 -> 4.80 */ html[data-stilus="magazin"] .f-cimke.f-oldalsav-cimke { color: #6f6a5e; background: transparent; border: 1px solid #b9b2a0; border-radius: 2px; } html[data-stilus="magazin"] .f-oldalsav-fiok { border-top: 1px solid #141310; } html[data-stilus="magazin"] .f-oldalsav-fiok-nev { color: #141310; } html[data-stilus="magazin"] a.f-oldalsav-fiok-pont { color: #4a463c; } html[data-stilus="magazin"] a.f-oldalsav-fiok-pont:hover { background: rgba(20,19,16,.07); color: #141310; } html[data-stilus="magazin"] a.f-oldalsav-fiok-pont.f-aktiv { background: #141310; color: #f4f1ea; } /* Mobilsáv ugyanaz a papír */ html[data-stilus="magazin"] .f-mobilsav { background: #f4f1ea; border-bottom: 1px solid #141310; } html[data-stilus="magazin"] .f-mobilsav-uzletnev { color: #141310; } html[data-stilus="magazin"] .f-mobilsav-hamburger { color: #141310; } html[data-stilus="magazin"] .f-mobilsav-hamburger:hover { background: rgba(20,19,16,.08); } /* — widget — */ html[data-stilus="magazin"] body:not(.f-vaz) .doboz { border: 1px solid #141310; border-radius: 2px; box-shadow: none; } html[data-stilus="magazin"] body:not(.f-vaz) input[type=text], html[data-stilus="magazin"] body:not(.f-vaz) input[type=email], html[data-stilus="magazin"] body:not(.f-vaz) input[type=tel], html[data-stilus="magazin"] body:not(.f-vaz) select { border-radius: 2px; } html[data-stilus="magazin"] body:not(.f-vaz) .valaszto, html[data-stilus="magazin"] body:not(.f-vaz) .szolgaltatas-kartya { border-radius: 2px; } html[data-stilus="magazin"] body:not(.f-vaz) .kategoria-chip { border-radius: 2px; } html[data-stilus="magazin"] body:not(.f-vaz) .naptar-nap, html[data-stilus="magazin"] body:not(.f-vaz) .naptar-nyil { border-radius: 2px; } html[data-stilus="magazin"] body:not(.f-vaz) .lepesjelzo .lepes-szam { border-radius: 2px; } html[data-stilus="magazin"] body:not(.f-vaz) .kuldes { background: #141310; border-radius: 2px; box-shadow: none; text-transform: uppercase; letter-spacing: .07em; font-size: 14px; } html[data-stilus="magazin"] body:not(.f-vaz) .kuldes:hover { filter: none; background: #a4123f; } /* ============================================================================ 2) BRUTÁL — neo-brutalizmus: 2.5-3px fekete kontúrok, eltolódó kemény árnyékok (nincs blur), nulla lekerekítés, sárga–fekete jelzőrendszer. Jelenet: szitanyomott plakát a falra — hangos, egyenes, kézzel fogható. ========================================================================== */ html[data-stilus="brutal"] { /* — admin tokenek — */ --f-fekete: #000000; --f-hatter: #ffffff; --f-feher: #ffffff; --f-lila: #000000; /* kiemelés: fekete */ --f-lila-sotet: #000000; --f-lila-halvany: #ffdd00; /* aktív/fókusz felület: jelzősárga */ --f-lila-hover: #f2cf00; --f-keret: #000000; --f-szoveg: #000000; --f-szoveg-masodlagos: #3d3d3d; --f-sugar: 0; --f-sugar-kicsi: 0; --f-arnyek: none; --f-arnyek-lebego: 8px 8px 0 #000000; /* — widget tokenek — */ --fo-szin: #000000; --fo-halvany: #ffdd00; --fo-halvany-2: #ffdd00; --lap: #ffffff; --hatter: #ffffff; --keret: #000000; --keret-eros: #000000; --tinta: #000000; --tinta-lagy: #3d3d3d; --halvany: #4d4d4d; --sugar: 0; --sugar-kicsi: 0; --arnyek: none; } /* Kártya: plakát-lap, kemény eltolás-árnyék */ html[data-stilus="brutal"] .f-kartya { border: 2.5px solid #000000; border-radius: 0; box-shadow: 7px 7px 0 #000000; } /* Gombok: nyomógomb-érzet (lenyomáskor az árnyék "elfogy") */ html[data-stilus="brutal"] .f-gomb { border: 2.5px solid #000000; border-radius: 0; font-weight: 800; text-transform: uppercase; letter-spacing: .03em; box-shadow: 4px 4px 0 #000000; } html[data-stilus="brutal"] .f-gomb:hover { background: #ffdd00; transform: translate(-2px,-2px); box-shadow: 6px 6px 0 #000000; } html[data-stilus="brutal"] .f-gomb:active { transform: translate(2px,2px); box-shadow: 1px 1px 0 #000000; } html[data-stilus="brutal"] .f-gomb-fekete { background: #ffdd00; color: #000000; border: 2.5px solid #000000; border-radius: 0; } html[data-stilus="brutal"] .f-gomb-fekete:hover { background: #000000; color: #ffdd00; } html[data-stilus="brutal"] .f-gomb-feher, html[data-stilus="brutal"] .f-gomb-piros { border-radius: 0; border: 2.5px solid #000000; } /* Címsorok: plakát-tervezés */ html[data-stilus="brutal"] .f-h1 { font-weight: 900; letter-spacing: -0.02em; text-transform: uppercase; } html[data-stilus="brutal"] .f-h2 { font-weight: 900; text-transform: uppercase; letter-spacing: -0.01em; } /* Táblázat: rács, sárga fejléc */ html[data-stilus="brutal"] .f-tabla th { background: #ffdd00; color: #000000; border-bottom: 2.5px solid #000000; } html[data-stilus="brutal"] .f-tabla td { border-bottom: 2px solid #000000; } html[data-stilus="brutal"] .f-tabla tbody tr:hover { background: #fff7cc; } /* Jelvények: bélyeg */ html[data-stilus="brutal"] .f-cimke { border: 2px solid #000000; border-radius: 0; font-weight: 800; text-transform: uppercase; } /* Űrlapok */ html[data-stilus="brutal"] .f-mezo input, html[data-stilus="brutal"] .f-mezo textarea, html[data-stilus="brutal"] .f-legordulo { border: 2.5px solid #000000; border-radius: 0; } html[data-stilus="brutal"] .f-mezo input:focus, html[data-stilus="brutal"] .f-mezo textarea:focus, html[data-stilus="brutal"] .f-legordulo:focus { box-shadow: 4px 4px 0 #ffdd00; } html[data-stilus="brutal"] .f-radiokartya { border: 2.5px solid #000000; border-radius: 0; } html[data-stilus="brutal"] .f-radiokartya:has(input:checked) { box-shadow: 4px 4px 0 #000000; } /* Oldalsáv: jelzősárga fal fekete szedéssel */ html[data-stilus="brutal"] .f-oldalsav { background: #ffdd00; border-right: 3px solid #000000; } html[data-stilus="brutal"] .f-oldalsav-uzlet { border-bottom: 3px solid #000000; } html[data-stilus="brutal"] .f-oldalsav-uzletnev { color: #000000; font-weight: 900; text-transform: uppercase; } html[data-stilus="brutal"] .f-oldalsav-uzletvalaszto { color: #000000; background: #ffffff; border: 2.5px solid #000000; border-radius: 0; } html[data-stilus="brutal"] .f-oldalsav-uzletvalaszto:hover { background: #fff7cc; } html[data-stilus="brutal"] .f-oldalsav-csoport-fejlec { color: #000000; border-radius: 0; font-weight: 700; } html[data-stilus="brutal"] .f-oldalsav-csoport-fejlec:hover { background: rgba(0,0,0,.10); color: #000000; } html[data-stilus="brutal"] .f-oldalsav-csoport-fejlec.f-aktiv { background: #000000; color: #ffdd00; } html[data-stilus="brutal"] .f-oldalsav-csoport-nyil { color: #000000; } html[data-stilus="brutal"] a.f-oldalsav-pont, html[data-stilus="brutal"] span.f-oldalsav-pont { color: #1a1a1a; border-radius: 0; font-weight: 600; } html[data-stilus="brutal"] a.f-oldalsav-pont:hover { background: rgba(0,0,0,.10); color: #000000; } html[data-stilus="brutal"] a.f-oldalsav-pont.f-aktiv { background: #000000; color: #ffdd00; } html[data-stilus="brutal"] span.f-oldalsav-pont.f-hamarosan { color: #6b5d00; } html[data-stilus="brutal"] .f-cimke.f-oldalsav-cimke { color: #ffdd00; background: #000000; border: 2px solid #000000; border-radius: 0; } html[data-stilus="brutal"] .f-oldalsav-fiok { border-top: 3px solid #000000; } html[data-stilus="brutal"] .f-oldalsav-fiok-avatar { background: #000000; color: #ffdd00; } html[data-stilus="brutal"] .f-oldalsav-fiok-nev { color: #000000; } html[data-stilus="brutal"] a.f-oldalsav-fiok-pont { color: #1a1a1a; } html[data-stilus="brutal"] a.f-oldalsav-fiok-pont:hover { background: rgba(0,0,0,.10); color: #000000; } html[data-stilus="brutal"] a.f-oldalsav-fiok-pont.f-aktiv { background: #000000; color: #ffdd00; } html[data-stilus="brutal"] .f-mobilsav { background: #ffdd00; border-bottom: 3px solid #000000; } html[data-stilus="brutal"] .f-mobilsav-uzletnev { color: #000000; } html[data-stilus="brutal"] .f-mobilsav-hamburger { color: #000000; } html[data-stilus="brutal"] .f-mobilsav-hamburger:hover { background: rgba(0,0,0,.10); } /* — widget — */ html[data-stilus="brutal"] body:not(.f-vaz) .doboz { border: 3px solid #000000; border-radius: 0; box-shadow: 10px 10px 0 #000000; } html[data-stilus="brutal"] body:not(.f-vaz) h1 { font-weight: 900; text-transform: uppercase; letter-spacing: -0.01em; } html[data-stilus="brutal"] body:not(.f-vaz) input[type=text], html[data-stilus="brutal"] body:not(.f-vaz) input[type=email], html[data-stilus="brutal"] body:not(.f-vaz) input[type=tel], html[data-stilus="brutal"] body:not(.f-vaz) select { border: 2.5px solid #000000; border-radius: 0; } html[data-stilus="brutal"] body:not(.f-vaz) input:focus, html[data-stilus="brutal"] body:not(.f-vaz) select:focus { box-shadow: 4px 4px 0 #ffdd00; } html[data-stilus="brutal"] body:not(.f-vaz) .valaszto, html[data-stilus="brutal"] body:not(.f-vaz) .szolgaltatas-kartya { border: 2.5px solid #000000; border-radius: 0; } html[data-stilus="brutal"] body:not(.f-vaz) .valaszto:hover, html[data-stilus="brutal"] body:not(.f-vaz) .szolgaltatas-kartya:hover { background: #ffdd00; border-color: #000000; transform: none; } html[data-stilus="brutal"] body:not(.f-vaz) .valaszto.aktiv, html[data-stilus="brutal"] body:not(.f-vaz) .szolgaltatas-kartya.aktiv { background: #ffdd00; color: #000000; border-color: #000000; box-shadow: 4px 4px 0 #000000; } html[data-stilus="brutal"] body:not(.f-vaz) .valaszto.aktiv .mellek, html[data-stilus="brutal"] body:not(.f-vaz) .szolgaltatas-kartya.aktiv .szolgaltatas-nev, html[data-stilus="brutal"] body:not(.f-vaz) .szolgaltatas-kartya.aktiv .szolgaltatas-ar, html[data-stilus="brutal"] body:not(.f-vaz) .szolgaltatas-kartya.aktiv .szolgaltatas-hossz, html[data-stilus="brutal"] body:not(.f-vaz) .szolgaltatas-kartya.aktiv .szolgaltatas-leiras { color: #000000; } html[data-stilus="brutal"] body:not(.f-vaz) .szolgaltatas-jelolo { border-radius: 0; border: 2.5px solid #000000; } html[data-stilus="brutal"] body:not(.f-vaz) .szolgaltatas-kartya.aktiv .szolgaltatas-jelolo { background: #000000; border-color: #000000; color: #ffdd00; } html[data-stilus="brutal"] body:not(.f-vaz) .kategoria-chip { border: 2.5px solid #000000; border-radius: 0; } html[data-stilus="brutal"] body:not(.f-vaz) .kategoria-chip.aktiv { background: #000000; color: #ffdd00; } html[data-stilus="brutal"] body:not(.f-vaz) .naptar-nap { border-radius: 0; } html[data-stilus="brutal"] body:not(.f-vaz) .naptar-nap.aktiv { background: #000000; color: #ffdd00; box-shadow: none; } html[data-stilus="brutal"] body:not(.f-vaz) .naptar-nyil { border: 2.5px solid #000000; border-radius: 0; } html[data-stilus="brutal"] body:not(.f-vaz) .lepesjelzo .lepes-szam { border-radius: 0; border: 2px solid #000000; } html[data-stilus="brutal"] body:not(.f-vaz) .lepesjelzo .lepes-gomb.aktiv .lepes-szam { background: #000000; color: #ffdd00; } html[data-stilus="brutal"] body:not(.f-vaz) .osszegzo, html[data-stilus="brutal"] body:not(.f-vaz) .szolg-osszegzo { background: #ffdd00; border: 2.5px solid #000000; border-radius: 0; } html[data-stilus="brutal"] body:not(.f-vaz) .kuldes { background: #ffdd00; color: #000000; border: 3px solid #000000; border-radius: 0; box-shadow: 6px 6px 0 #000000; text-transform: uppercase; font-weight: 900; letter-spacing: .04em; } html[data-stilus="brutal"] body:not(.f-vaz) .kuldes:hover { filter: none; transform: translate(-2px,-2px); box-shadow: 8px 8px 0 #000000; } html[data-stilus="brutal"] body:not(.f-vaz) .siker, html[data-stilus="brutal"] body:not(.f-vaz) .hiba { border: 2.5px solid #000000; border-radius: 0; } html[data-stilus="brutal"] body:not(.f-vaz) .bizalom { border-top: 2px solid #000000; border-bottom: 2px solid #000000; } /* ============================================================================ 3) PILLE — pasztell felhő: ibolyaköd, nagy (26px) sugarak, keret nélküli lebegő lapok, bársonyos árnyékok, pirula-gombok. Az oldalsáv is lebegő panelként úszik a háttér felett. Jelenet: hajnali köd egy wellness-stúdió felett — minden puha, kerek, könnyű. ========================================================================== */ html[data-stilus="pille"] { /* — admin tokenek — */ --f-fekete: #2a2153; /* oldalsáv: mély ibolya */ --f-hatter: #f1eefb; /* levendulaköd */ --f-feher: #ffffff; --f-lila: #6553d8; /* puha ibolya — fehér szöveg ~5.5:1 */ --f-lila-sotet: #4c3cb0; --f-lila-halvany: #e9e5fc; --f-lila-hover: #dbd4fa; --f-keret: #e6e1f5; --f-szoveg: #241d45; --f-szoveg-masodlagos: #6b6390; --f-sugar: 26px; --f-sugar-kicsi: 16px; --f-arnyek: 0 2px 6px rgba(64,50,140,.06), 0 24px 48px -20px rgba(64,50,140,.25); --f-arnyek-lebego: 0 12px 28px rgba(64,50,140,.16), 0 36px 72px -24px rgba(64,50,140,.35); /* — widget tokenek — */ --fo-szin: #6553d8; --lap: #ffffff; --hatter: #f1eefb; --keret: #e6e1f5; --keret-eros: #cfc6ef; --tinta: #241d45; --tinta-lagy: #6b6390; --halvany: #6f6697; --sugar: 26px; --sugar-kicsi: 16px; --arnyek: 0 2px 6px rgba(64,50,140,.06), 0 28px 56px -22px rgba(64,50,140,.30); } /* Kártya: keret nélküli felhő */ html[data-stilus="pille"] .f-kartya { border: 0; border-radius: 26px; } /* Oldalsáv: lebegő panel (margó + nagy sugár + árnyék) */ html[data-stilus="pille"] .f-oldalsav { margin: 12px; border-radius: 24px; box-shadow: 0 12px 32px -8px rgba(42,33,83,.45); } /* A margó miatt a tartalmat is arrébb kell tenni */ html[data-stilus="pille"] body.f-vaz { padding-left: calc(var(--f-oldalsav-sz) + 24px); } @media (max-width: 900px) { html[data-stilus="pille"] body.f-vaz { padding-left: 0; padding-top: calc(var(--f-mobilsav-magassag) + 22px); } html[data-stilus="pille"] .f-mobilsav { margin: 10px 12px 0; border-radius: 16px; } } /* Gombok: pirula, emelkedő hover */ html[data-stilus="pille"] .f-gomb { border-radius: 999px; border: 0; font-weight: 700; padding: 11px 22px; box-shadow: 0 2px 8px rgba(64,50,140,.10); } html[data-stilus="pille"] .f-gomb:hover { transform: translateY(-1px); box-shadow: 0 6px 16px rgba(64,50,140,.16); background: var(--f-feher); } /* Űrlapok: pasztell mélyedés, fókuszra fehéredés */ html[data-stilus="pille"] .f-mezo input, html[data-stilus="pille"] .f-mezo textarea, html[data-stilus="pille"] .f-legordulo { background: #f4f1fd; border-color: transparent; border-radius: 14px; } html[data-stilus="pille"] .f-mezo input:focus, html[data-stilus="pille"] .f-mezo textarea:focus, html[data-stilus="pille"] .f-legordulo:focus { background: #ffffff; border-color: transparent; box-shadow: 0 0 0 4px var(--f-lila-halvany); } html[data-stilus="pille"] .f-radiokartya { border-radius: 16px; } html[data-stilus="pille"] .f-tabla tbody tr:hover { background: #f4f1fd; } /* — widget — */ html[data-stilus="pille"] body:not(.f-vaz) .doboz { border: 0; border-radius: 28px; } html[data-stilus="pille"] body:not(.f-vaz) input[type=text], html[data-stilus="pille"] body:not(.f-vaz) input[type=email], html[data-stilus="pille"] body:not(.f-vaz) input[type=tel], html[data-stilus="pille"] body:not(.f-vaz) select { background: #f4f1fd; border-color: transparent; border-radius: 14px; } html[data-stilus="pille"] body:not(.f-vaz) input:focus, html[data-stilus="pille"] body:not(.f-vaz) select:focus { background: #ffffff; border-color: transparent; box-shadow: 0 0 0 4px var(--fo-halvany-2); } html[data-stilus="pille"] body:not(.f-vaz) .valaszto, html[data-stilus="pille"] body:not(.f-vaz) .szolgaltatas-kartya { border-radius: 18px; border-color: #e2dcf6; } html[data-stilus="pille"] body:not(.f-vaz) .naptar-nap { border-radius: 12px; } html[data-stilus="pille"] body:not(.f-vaz) .naptar-nyil { border-radius: 999px; } html[data-stilus="pille"] body:not(.f-vaz) .osszegzo, html[data-stilus="pille"] body:not(.f-vaz) .szolg-osszegzo { border-radius: 16px; } html[data-stilus="pille"] body:not(.f-vaz) .uzenet { border-radius: 14px; } html[data-stilus="pille"] body:not(.f-vaz) .kuldes { border-radius: 999px; padding: 16px; } /* ============================================================================ 4) PULT — sötét konzol: majdnem-fekete felület, foszforzöld jelzőfény, monospace címkék és adatok, apró sugarak, zöld derengő fókusz. Jelenet: éjjeli recepciós pult, a monitor zöld fénye világítja meg a sötétet. ========================================================================== */ html[data-stilus="pult"] { /* — admin tokenek — */ --f-fekete: #05080c; /* oldalsáv: a legsötétebb pont */ --f-hatter: #0b0f14; --f-feher: #121923; --f-lila: #1f7a38; /* zöld-HÁTTÉR gombokra: fehér szöveg ~5.4:1 */ --f-lila-sotet: #4ade80; /* foszforzöld-SZÖVEG sötéten */ --f-lila-halvany: rgba(74,222,128,.13); --f-lila-hover: rgba(74,222,128,.22); --f-zold: #4ade80; --f-zold-halvany: rgba(74,222,128,.13); --f-piros: #ff7b72; --f-piros-halvany: rgba(255,123,114,.13); --f-sarga: #e3b341; --f-sarga-halvany: rgba(227,179,65,.13); --f-keret: rgba(125,185,150,.16); --f-szoveg: #d7e3dc; --f-szoveg-masodlagos: #7fa08f; --f-sugar: 6px; --f-sugar-kicsi: 4px; --f-arnyek: 0 1px 2px rgba(0,0,0,.5); --f-arnyek-lebego: 0 16px 44px rgba(0,0,0,.6); /* — widget tokenek — */ --fo-szin: #1f7a38; --fo-halvany: color-mix(in srgb, var(--fo-szin) 26%, #121923); --fo-halvany-2: color-mix(in srgb, var(--fo-szin) 40%, #121923); --hatter: #0b0f14; --lap: #121923; --keret: rgba(125,185,150,.18); --keret-eros: rgba(125,185,150,.32); --tinta: #d7e3dc; --tinta-lagy: #9db8aa; --halvany: #74907f; --sugar: 6px; --sugar-kicsi: 4px; --arnyek: 0 1px 2px rgba(0,0,0,.5), 0 16px 40px -18px rgba(0,0,0,.7); } /* Kártyák: finom zöldes határvonal */ html[data-stilus="pult"] .f-kartya { border: 1px solid var(--f-keret); box-shadow: none; } /* Monospace "terminál" réteg: címkék, fejlécek, jelvények, főcím */ html[data-stilus="pult"] .f-h1, html[data-stilus="pult"] .f-szakasz-cim, html[data-stilus="pult"] .f-cimke, html[data-stilus="pult"] .f-tabla th, html[data-stilus="pult"] .f-mezo label, html[data-stilus="pult"] .f-oldalsav-csoport-cim { font-family: ui-monospace, 'Cascadia Mono', Consolas, 'Courier New', monospace; } html[data-stilus="pult"] .f-h1 { letter-spacing: -0.02em; } /* Oldalsáv: aktív sor foszforzölden */ html[data-stilus="pult"] a.f-oldalsav-pont.f-aktiv { background: rgba(74,222,128,.12); color: #4ade80; } html[data-stilus="pult"] .f-oldalsav-csoport-fejlec.f-aktiv { background: rgba(74,222,128,.12); color: #4ade80; } html[data-stilus="pult"] .f-oldalsav-uzletnev { color: #4ade80; font-family: ui-monospace, 'Cascadia Mono', Consolas, monospace; } /* Űrlapok: sötét mező, zöld derengés fókuszra */ html[data-stilus="pult"] .f-mezo input, html[data-stilus="pult"] .f-mezo textarea, html[data-stilus="pult"] .f-legordulo { background: #0a0e13; color: var(--f-szoveg); caret-color: #4ade80; border-color: rgba(125,185,150,.25); } html[data-stilus="pult"] .f-mezo input::placeholder { color: #7f9c8a; } /* F07-13: 4.11 -> 6.47 */ html[data-stilus="pult"] .f-mezo input:focus, html[data-stilus="pult"] .f-mezo textarea:focus, html[data-stilus="pult"] .f-legordulo:focus { border-color: #4ade80; box-shadow: 0 0 0 3px rgba(74,222,128,.20), 0 0 18px -4px rgba(74,222,128,.35); } /* — widget — */ html[data-stilus="pult"] body:not(.f-vaz) .doboz { border-color: var(--keret-eros); } html[data-stilus="pult"] body:not(.f-vaz) h1 { font-family: ui-monospace, 'Cascadia Mono', Consolas, monospace; letter-spacing: -0.02em; } html[data-stilus="pult"] body:not(.f-vaz) h2, html[data-stilus="pult"] body:not(.f-vaz) .naptar-cim, html[data-stilus="pult"] body:not(.f-vaz) .naptar-het, html[data-stilus="pult"] body:not(.f-vaz) .lepesjelzo, html[data-stilus="pult"] body:not(.f-vaz) label { font-family: ui-monospace, 'Cascadia Mono', Consolas, monospace; } html[data-stilus="pult"] body:not(.f-vaz) input[type=text], html[data-stilus="pult"] body:not(.f-vaz) input[type=email], html[data-stilus="pult"] body:not(.f-vaz) input[type=tel], html[data-stilus="pult"] body:not(.f-vaz) select { background: #0a0e13; color: var(--tinta); caret-color: #4ade80; border-color: var(--keret-eros); } html[data-stilus="pult"] body:not(.f-vaz) input::placeholder { color: #5d7a6a; } html[data-stilus="pult"] body:not(.f-vaz) input:focus, html[data-stilus="pult"] body:not(.f-vaz) select:focus { border-color: #4ade80; box-shadow: 0 0 0 3px rgba(74,222,128,.22), 0 0 18px -4px rgba(74,222,128,.35); } html[data-stilus="pult"] body:not(.f-vaz) .naptar-nap.aktiv { background: #1f7a38; box-shadow: 0 0 16px -4px rgba(74,222,128,.6); } html[data-stilus="pult"] body:not(.f-vaz) .kuldes { background: #1f7a38; border-radius: 4px; box-shadow: 0 0 24px -6px rgba(74,222,128,.45); } html[data-stilus="pult"] body:not(.f-vaz) .siker { background: rgba(74,222,128,.10); color: #4ade80; border-color: rgba(74,222,128,.35); } html[data-stilus="pult"] body:not(.f-vaz) .hiba { background: rgba(255,123,114,.10); color: #ff7b72; border-color: rgba(255,123,114,.35); } /* ============================================================================ 5) RETRÓ — 70-es évek: meleg papír, avokádó-olíva oldalsáv, égetett narancs kiemelés, dőlt szerif címek, pirula-formák, eltolódó papír-árnyékok. Jelenet: barna kordbársony fotel, narancs lámpaernyő, lemezborító-tipográfia. ========================================================================== */ html[data-stilus="retro"] { /* — admin tokenek — */ --f-fekete: #3f4a22; /* oldalsáv + fő gomb: avokádó-olíva (fehér szöveg 9:1) */ --f-hatter: #f6ecd9; /* meleg papír */ --f-feher: #fffaf0; /* krémlap */ --f-lila: #b5491f; /* égetett narancs — fehér szöveg ~5.3:1 */ --f-lila-sotet: #8e3716; --f-lila-halvany: #f5e0c8; --f-lila-hover: #efd0ae; --f-keret: #e3d2b4; --f-szoveg: #3b2a17; --f-szoveg-masodlagos: #7a6547; --f-sugar: 20px; --f-sugar-kicsi: 12px; --f-arnyek: 0 2px 0 rgba(59,42,23,.06), 0 14px 30px -16px rgba(59,42,23,.28); --f-arnyek-lebego: 0 8px 18px rgba(59,42,23,.14), 0 28px 60px -20px rgba(59,42,23,.34); /* — widget tokenek — */ --fo-szin: #b5491f; --lap: #fffaf0; --hatter: #f6ecd9; --keret: #e3d2b4; --keret-eros: #cbb287; --tinta: #3b2a17; --tinta-lagy: #7a6547; --halvany: #7d684a; --sugar: 20px; --sugar-kicsi: 12px; --arnyek: 0 2px 0 rgba(59,42,23,.05), 0 18px 40px -20px rgba(59,42,23,.32); } /* Dőlt szerif címek — lemezborító-hangulat */ html[data-stilus="retro"] .f-h1, html[data-stilus="retro"] .f-h2, html[data-stilus="retro"] body:not(.f-vaz) h1 { font-family: Georgia, 'Iowan Old Style', 'Times New Roman', serif; font-style: italic; font-weight: 700; letter-spacing: -0.01em; } html[data-stilus="retro"] body:not(.f-vaz) h2 { font-family: Georgia, serif; font-style: italic; font-size: 15px; text-transform: none; } /* Kártya: krémlap vastagabb papírkerettel */ html[data-stilus="retro"] .f-kartya { border: 2px solid var(--f-keret); border-radius: 20px; } /* Gombok: mind pirula */ html[data-stilus="retro"] .f-gomb { border-radius: 999px; font-weight: 700; border-width: 2px; } /* Táblázat-fejléc: dőlt szerif, narancs */ html[data-stilus="retro"] .f-tabla th { font-family: Georgia, serif; font-style: italic; text-transform: none; letter-spacing: 0; font-size: 13.5px; color: var(--f-lila-sotet); } /* Oldalsáv: olíva — a fehér árnyalatokat melegítjük, hogy ne legyen mosott */ html[data-stilus="retro"] .f-oldalsav-uzletnev { color: #f2edda; font-family: Georgia, serif; font-style: italic; } html[data-stilus="retro"] .f-oldalsav-csoport-fejlec { color: #e6e1cd; } html[data-stilus="retro"] .f-oldalsav-csoport-fejlec:hover { color: #fffaf0; } html[data-stilus="retro"] .f-oldalsav-csoport-fejlec.f-aktiv { color: #fffaf0; } html[data-stilus="retro"] .f-oldalsav-csoport-nyil { color: #a8ad84; } html[data-stilus="retro"] a.f-oldalsav-pont, html[data-stilus="retro"] span.f-oldalsav-pont { color: #cfcaae; } html[data-stilus="retro"] a.f-oldalsav-pont:hover { color: #fffaf0; } html[data-stilus="retro"] a.f-oldalsav-pont.f-aktiv { background: rgba(0,0,0,.22); color: #ffd9a8; } html[data-stilus="retro"] span.f-oldalsav-pont.f-hamarosan { color: #c8cda0; } /* F07-13: 2.98 -> 5.73 */ html[data-stilus="retro"] .f-cimke.f-oldalsav-cimke { color: #cfcaae; background: rgba(0,0,0,.18); border-color: rgba(255,255,255,.18); } html[data-stilus="retro"] .f-oldalsav-fiok-nev { color: #f2edda; } html[data-stilus="retro"] a.f-oldalsav-fiok-pont { color: #cfcaae; } html[data-stilus="retro"] a.f-oldalsav-fiok-pont:hover { color: #fffaf0; } html[data-stilus="retro"] a.f-oldalsav-fiok-pont.f-aktiv { background: rgba(0,0,0,.22); color: #ffd9a8; } html[data-stilus="retro"] .f-mobilsav-uzletnev { color: #f2edda; } /* — widget — */ html[data-stilus="retro"] body:not(.f-vaz) .doboz { border: 2px solid #3b2a17; border-radius: 24px; box-shadow: 8px 8px 0 #e3d2b4; } html[data-stilus="retro"] body:not(.f-vaz) input[type=text], html[data-stilus="retro"] body:not(.f-vaz) input[type=email], html[data-stilus="retro"] body:not(.f-vaz) input[type=tel], html[data-stilus="retro"] body:not(.f-vaz) select { border-radius: 12px; background: #fffdf7; } html[data-stilus="retro"] body:not(.f-vaz) .valaszto, html[data-stilus="retro"] body:not(.f-vaz) .szolgaltatas-kartya { border-radius: 14px; background: #fffdf7; } html[data-stilus="retro"] body:not(.f-vaz) .naptar-nap { border-radius: 50%; } html[data-stilus="retro"] body:not(.f-vaz) .naptar-nyil { border-radius: 50%; } html[data-stilus="retro"] body:not(.f-vaz) .kuldes { border-radius: 999px; font-family: Georgia, serif; font-style: italic; font-size: 17px; } /* ============================================================================ LEBEGŐ STÍLUSVÁLTÓ (a /kozos/stilus.js rajzolja) — BAL alsó sarok, hogy ne fedje a jobb oldali színtéma-váltót. Saját, stílustól független sötét stílusa minden háttér fölött olvasható marad. ========================================================================== */ .stilus-valto { position: fixed; left: 16px; bottom: 16px; z-index: 45; /* F07-17: korábban a maximum közeli érték — a fiókok (60), a gyorsmenü (70) és a fátyol (50) FÖLÖTT lebegett, és egy nyitott panelre is ráült. A 45 a tartalom fölött van, a modális rétegek alatt. */ font-family: system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif; } .stilus-valto__gomb { display: inline-flex; align-items: center; gap: 8px; background: #191c24; color: #f3f4f8; border: 1px solid rgba(255,255,255,.14); border-radius: 999px; padding: 9px 14px 9px 11px; cursor: pointer; font-size: 13px; font-weight: 600; line-height: 1; box-shadow: 0 6px 18px rgba(0,0,0,.28), 0 2px 6px rgba(0,0,0,.2); transition: transform 160ms cubic-bezier(.2,.7,.3,1), box-shadow 160ms; } .stilus-valto__gomb:hover { transform: translateY(-1px); box-shadow: 0 10px 26px rgba(0,0,0,.34); } .stilus-valto__gomb:focus-visible { outline: 2px solid #fff; outline-offset: 2px; } .stilus-valto__pont { width: 14px; height: 14px; border-radius: 3px; flex: none; border: 2px solid rgba(255,255,255,.85); } .stilus-valto__panel { position: absolute; left: 0; bottom: calc(100% + 10px); background: #191c24; border: 1px solid rgba(255,255,255,.12); border-radius: 14px; padding: 8px; min-width: 236px; box-shadow: 0 16px 44px rgba(0,0,0,.42); display: none; } .stilus-valto__panel[data-nyitva="1"] { display: block; } .stilus-valto__cim { color: #9ea3b2; font-size: 11px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; padding: 6px 10px 8px; } .stilus-valto__opcio { display: flex; align-items: center; gap: 11px; width: 100%; background: transparent; border: 0; border-radius: 10px; cursor: pointer; padding: 9px 10px; color: #eceef4; font-size: 13.5px; font-weight: 500; text-align: left; transition: background 140ms; } .stilus-valto__opcio:hover { background: rgba(255,255,255,.07); } .stilus-valto__opcio:focus-visible { outline: 2px solid #fff; outline-offset: -2px; } .stilus-valto__opcio[aria-checked="true"] { background: rgba(255,255,255,.10); font-weight: 700; } .stilus-valto__swatch { width: 20px; height: 20px; border-radius: 5px; flex: none; border: 1px solid rgba(255,255,255,.18); } .stilus-valto__opcio-nev { flex: 1; } .stilus-valto__pipa { width: 16px; height: 16px; flex: none; opacity: 0; } .stilus-valto__opcio[aria-checked="true"] .stilus-valto__pipa { opacity: 1; } .stilus-valto__leiras { display: block; color: #9298a8; font-size: 11.5px; font-weight: 400; margin-top: 1px; } @media (max-width: 640px) { .stilus-valto { left: 12px; bottom: 12px; } .stilus-valto__gomb-felirat { display: none; } /* mobilon csak a buci látszik */ .stilus-valto__gomb { padding: 11px; } } @media (prefers-reduced-motion: reduce) { .stilus-valto__gomb, .stilus-valto__opcio { transition: none; } .stilus-valto__gomb:hover { transform: none; } }