/* ============================================================================ temak.css — VÁLTHATÓ MEGJELENÉS-VERZIÓK (karakter-témák) ---------------------------------------------------------------------------- Egy helyen adja a felület "karakterét". A választott téma a attribútumon dől el (a /kozos/tema.js állítja be és menti localStorage-ba, plusz egy lebegő váltógombot rajzol minden oldalra). MIÉRT MŰKÖDIK EGY HELYRŐL: - Az admin teljes kinézete a fresha.css --f-* tokenjeiből épül. - A vendégwidget kinézete a foglalo.html --fo-* / --tinta / --lap ... tokenjeiből. Ezért egy téma = ezeknek a tokeneknek az újraértékelése. A html[data-tema="x"] szelektor specifikusabb a :root-nál, így felülírja az alap-tokeneket a forrásrendből függetlenül. FONTOS — üzleti szín: a widget --fo-szin-je üzletenként állítható (a widget JS inline állítja be, ha a tulaj kért egyet). A témák csak ALAPÉRTELMEZETT --fo-szin-t adnak; ha az üzletnek van saját színe, az inline érték továbbra is győz. A származtatott --fo-halvany-t viszont a téma a saját felületéhez keveri, így sötét témán sem lesz világos folt a gombok mögött. "eredeti" = az induló Fresha-mintájú lila-világos look, SEMMI felülírás — így a visszaváltás mindig ép, eredeti állapotot ad (biztonsági háló). Új témát felvenni: egy html[data-tema="..."] blokk ide + egy sor a /kozos/tema.js TEMAK tömbjébe. Sehol máshol nem kell hozzányúlni. ========================================================================== */ /* ============================================================================ 1) ÉJFÉL — sötét, prémium, meleg korall kiemelés Jelenet: esti zárás után a tulaj a pult mögött, halvány meleg fény, a képernyő az egyetlen erős fényforrás — a sötét felület pihenteti a szemet. ========================================================================== */ html[data-tema="ejfel"] { /* — admin (--f-*) — */ --f-fekete: #0d0e13; /* oldalsáv, legmélyebb */ --f-hatter: #14161d; /* lap háttér */ --f-feher: #1c1f29; /* kártya / emelt felület */ --f-lila: #bf5236; /* kiemelés-HÁTTÉR: mély korall — fehér szöveg 4.69:1 (avatar, jelvények) */ --f-lila-sotet: #e88a70; /* kiemelés-SZÖVEG sötét téma-tinten: világos korall, jól olvasható */ --f-lila-halvany: rgba(215,106,79,.18); --f-lila-hover: rgba(215,106,79,.28); --f-zold: #55d98a; --f-zold-halvany: rgba(85,217,138,.15); --f-piros: #f8776a; --f-piros-halvany: rgba(248,119,106,.15); --f-sarga: #f2b24a; --f-sarga-halvany: rgba(242,178,74,.15); --f-keret: rgba(255,255,255,.11); --f-szoveg: #eef0f6; --f-szoveg-masodlagos: #a4a9b8; --f-sugar: 12px; --f-sugar-kicsi: 8px; --f-arnyek: 0 1px 2px rgba(0,0,0,.45), 0 10px 28px -12px rgba(0,0,0,.65); --f-arnyek-lebego: 0 8px 20px rgba(0,0,0,.5), 0 24px 60px -18px rgba(0,0,0,.75); /* — widget (--fo-* és semleges tokenek) — */ --fo-szin: #bf5236; /* témás alap (fehér szöveg olvasható rajta); üzlet felülírhatja */ --fo-halvany: color-mix(in srgb, var(--fo-szin) 16%, #1c1f29); --fo-halvany-2: color-mix(in srgb, var(--fo-szin) 28%, #1c1f29); --hatter: #14161d; --lap: #1c1f29; --keret: rgba(255,255,255,.13); --keret-eros: rgba(255,255,255,.22); --tinta: #eef0f6; --tinta-lagy: #b7bcca; --halvany: #8b91a0; --sugar: 12px; --sugar-kicsi: 8px; --arnyek: 0 1px 2px rgba(0,0,0,.4), 0 14px 34px -18px rgba(0,0,0,.7); } /* Kártyák sötét témán: finom keret adja a szélt, nem az árnyék */ html[data-tema="ejfel"] .f-kartya { border: 1px solid var(--f-keret); } /* Widget inputjai bedrótozott #fff hátterűek — sötét témán felülírjuk */ html[data-tema="ejfel"] body:not(.f-vaz) input, html[data-tema="ejfel"] body:not(.f-vaz) select { background: #101218; color: var(--tinta); border-color: var(--keret-eros); } html[data-tema="ejfel"] body:not(.f-vaz) input::placeholder { color: var(--halvany); } /* Admin input-placeholder olvashatóbb sötéten */ html[data-tema="ejfel"] .f-mezo input::placeholder { color: #7f8496; } /* A kis kapcsoló-gomb fehér bucija sötéten is jó; a beépített színválasztó marad. */ /* ============================================================================ 2) LIGET — világos, meleg, nyugodt; mély örökzöld + könyves szerif címsorok Jelenet: reggeli napfényes szalon-pult, növények az ablakban; a felület levegős és papírtiszta, a címsorok kicsit könyv-hangulatúak. ========================================================================== */ html[data-tema="liget"] { /* — admin — */ --f-fekete: #1b2a20; /* oldalsáv: mély örökzöld (nem koromfekete) */ --f-hatter: #f6f7f4; /* épphogy meleg-zöldes törtfehér, NEM krém */ --f-feher: #ffffff; --f-lila: #2f7d5b; /* kiemelés: mély smaragd */ --f-lila-sotet: #245f45; --f-lila-halvany: #e7f2eb; --f-lila-hover: #d6ebde; --f-keret: #e3e7df; --f-szoveg: #1d2721; --f-szoveg-masodlagos: #5a6b60; --f-sugar: 18px; --f-sugar-kicsi: 12px; --f-arnyek: 0 1px 2px rgba(29,39,33,.05), 0 12px 32px -14px rgba(29,45,35,.20); --f-arnyek-lebego: 0 6px 16px rgba(29,45,35,.12), 0 24px 56px -18px rgba(29,45,35,.28); /* — widget — */ --fo-szin: #2f7d5b; --lap: #ffffff; --hatter: #f6f7f4; --keret: #e3e7df; --keret-eros: #cdd5c9; --tinta: #1d2721; --tinta-lagy: #5a6b60; --halvany: #7c8a80; --sugar: 18px; --sugar-kicsi: 12px; } /* Könyves szerif a lap-CÍMEKEN (nem a feliratokon/gombokon/adatokon) */ html[data-tema="liget"] .f-h1, html[data-tema="liget"] .f-h2, html[data-tema="liget"] .doboz h1 { font-family: Georgia, 'Iowan Old Style', 'Times New Roman', serif; letter-spacing: -0.01em; font-weight: 700; } /* ============================================================================ 3) KOBALT — világos, hűvös, ropogós; magabiztos kobaltkék, lapos/levegős Jelenet: nappali irodai fény, letisztult képernyő; éles 1px szélek, kevés árnyék, sok fehér tér — gyors, eszközszerű munkaérzet. ========================================================================== */ html[data-tema="kobalt"] { /* — admin — */ --f-fekete: #141b2e; /* oldalsáv: mély tengerészkék */ --f-hatter: #f4f6fb; --f-feher: #ffffff; --f-lila: #3257e8; /* kiemelés: kobaltkék */ --f-lila-sotet: #2442c0; --f-lila-halvany: #e7ecfd; --f-lila-hover: #d6ddfb; --f-keret: #e2e7f1; --f-szoveg: #182031; --f-szoveg-masodlagos: #586074; --f-sugar: 10px; --f-sugar-kicsi: 8px; --f-arnyek: 0 0 0 1px rgba(20,27,46,.05), 0 4px 14px -8px rgba(20,27,46,.16); --f-arnyek-lebego: 0 8px 20px rgba(20,27,46,.10), 0 20px 48px -16px rgba(20,27,46,.28); /* — widget — */ --fo-szin: #3257e8; --lap: #ffffff; --hatter: #f4f6fb; --keret: #e2e7f1; --keret-eros: #cbd3e4; --tinta: #182031; --tinta-lagy: #586074; --halvany: #7b8398; --sugar: 12px; --sugar-kicsi: 8px; } /* Kobalt karaktere: lapos, ropogós kártyák — keret viszi a szélt, nincs lágy árnyék */ html[data-tema="kobalt"] .f-kartya { border: 1px solid var(--f-keret); box-shadow: none; } /* ============================================================================ 4) ONYX — sötét, prémium, arany/bronz kiemelés Jelenet: késő esti borbélyszalon zárás után, meleg spotfény a tükör felett; a felület mély, barnás fekete, a kiemelések polírozott réz-arany fényűek. ========================================================================== */ html[data-tema="onyx"] { /* — admin — */ --f-fekete: #100d08; /* oldalsáv: barnás korom */ --f-hatter: #171410; --f-feher: #211d16; --f-lila: #9a6b16; /* kiemelés-HÁTTÉR: mély bronz — fehér szöveg ~4.7:1 */ --f-lila-sotet: #eec27a; /* kiemelés-SZÖVEG sötéten: világos arany */ --f-lila-halvany: rgba(238,194,122,.15); --f-lila-hover: rgba(238,194,122,.26); --f-zold: #6fce97; --f-zold-halvany: rgba(111,206,151,.14); --f-piros: #f08a7d; --f-piros-halvany: rgba(240,138,125,.14); --f-sarga: #f0c25a; --f-sarga-halvany: rgba(240,194,90,.16); --f-keret: rgba(238,220,190,.12); --f-szoveg: #f0ebdf; --f-szoveg-masodlagos: #b3a88f; --f-sugar: 12px; --f-sugar-kicsi: 8px; --f-arnyek: 0 1px 2px rgba(0,0,0,.5), 0 12px 30px -14px rgba(0,0,0,.7); --f-arnyek-lebego: 0 8px 20px rgba(0,0,0,.55), 0 26px 64px -18px rgba(0,0,0,.8); /* — widget — */ --fo-szin: #9a6b16; --fo-halvany: color-mix(in srgb, var(--fo-szin) 22%, #211d16); --fo-halvany-2: color-mix(in srgb, var(--fo-szin) 34%, #211d16); --hatter: #171410; --lap: #211d16; --keret: rgba(238,220,190,.14); --keret-eros: rgba(238,220,190,.24); --tinta: #f0ebdf; --tinta-lagy: #c9bfa9; --halvany: #9a9078; --sugar: 12px; --sugar-kicsi: 8px; --arnyek: 0 1px 2px rgba(0,0,0,.45), 0 14px 34px -18px rgba(0,0,0,.75); } /* Kártyák sötét témán: finom keret adja a szélt */ html[data-tema="onyx"] .f-kartya { border: 1px solid var(--f-keret); } /* Widget inputjai bedrótozott #fff hátterűek — sötét témán felülírjuk */ html[data-tema="onyx"] body:not(.f-vaz) input, html[data-tema="onyx"] body:not(.f-vaz) select { background: #13110b; color: var(--tinta); border-color: var(--keret-eros); } html[data-tema="onyx"] body:not(.f-vaz) input::placeholder { color: var(--halvany); } html[data-tema="onyx"] .f-mezo input::placeholder { color: #8d8268; } /* ============================================================================ 5) ROZÉ — világos, puha, mély málnarózsa kiemelés, extra lekerekítés Jelenet: hétvégi szépségszalon reggel, szatén fényű világosság; minden felület kerek és puha, a mély rózsa adja a magabiztos fő műveletet. ========================================================================== */ html[data-tema="roze"] { /* — admin — */ --f-fekete: #2c1220; /* oldalsáv: mély szilva */ --f-hatter: #fdf5f8; --f-feher: #ffffff; --f-lila: #b52a5e; /* kiemelés: mély málnarózsa — fehér szöveg ~6:1 */ --f-lila-sotet: #8f1f4a; --f-lila-halvany: #fbe4ee; --f-lila-hover: #f7d2e2; --f-keret: #f2dde5; --f-szoveg: #31121f; --f-szoveg-masodlagos: #7d5468; --f-sugar: 22px; --f-sugar-kicsi: 14px; --f-arnyek: 0 1px 2px rgba(49,18,31,.05), 0 14px 36px -16px rgba(120,30,70,.22); --f-arnyek-lebego: 0 6px 16px rgba(120,30,70,.12), 0 26px 60px -20px rgba(120,30,70,.30); /* — widget — */ --fo-szin: #b52a5e; --lap: #ffffff; --hatter: #fdf5f8; --keret: #f2dde5; --keret-eros: #e3bfce; --tinta: #31121f; --tinta-lagy: #7d5468; --halvany: #8f6376; --sugar: 22px; --sugar-kicsi: 14px; } /* ============================================================================ 6) MENTA — világos, friss, hűvös türkiz-zöld, ropogós közepes sugarak Jelenet: reggeli stúdiónyitás, frissen szellőztetett tér; a felület higiénikus és lendületes, a mély tengerzöld viszi a műveleteket. ========================================================================== */ html[data-tema="menta"] { /* — admin — */ --f-fekete: #0a2420; /* oldalsáv: mély tengerzöld */ --f-hatter: #f2f9f7; --f-feher: #ffffff; --f-lila: #0d7d6a; /* kiemelés: mély türkiz — fehér szöveg ~5:1 */ --f-lila-sotet: #0a6153; --f-lila-halvany: #ddf1ec; --f-lila-hover: #c9e8e0; --f-keret: #d6e8e3; --f-szoveg: #0e2420; --f-szoveg-masodlagos: #4d6f68; --f-sugar: 12px; --f-sugar-kicsi: 8px; --f-arnyek: 0 1px 2px rgba(10,36,32,.06), 0 10px 26px -14px rgba(10,36,32,.22); --f-arnyek-lebego: 0 6px 16px rgba(10,36,32,.10), 0 22px 52px -18px rgba(10,36,32,.26); /* — widget — */ --fo-szin: #0d7d6a; --lap: #ffffff; --hatter: #f2f9f7; --keret: #d6e8e3; --keret-eros: #b7d6cd; --tinta: #0e2420; --tinta-lagy: #4d6f68; --halvany: #527c73; --sugar: 12px; --sugar-kicsi: 8px; } /* ============================================================================ 7) GRAFIT — monokróm, szögletes, keret-vezérelt grafikus look Jelenet: nyomdai készlet az asztalon, fekete tus a fehér papíron; semmi szín, semmi árnyék — a vastag keret és a fekete fő gomb adja a ritmust. ========================================================================== */ html[data-tema="grafit"] { /* — admin — */ --f-fekete: #0a0a0c; /* oldalsáv: tiszta fekete */ --f-hatter: #f4f4f5; --f-feher: #ffffff; --f-lila: #17171b; /* kiemelés: szénfekete — fehér szöveg 15:1+ */ --f-lila-sotet: #000000; --f-lila-halvany: #e9e9ec; --f-lila-hover: #dedee2; --f-keret: #dbdbe0; --f-szoveg: #111114; --f-szoveg-masodlagos: #55555e; --f-sugar: 6px; --f-sugar-kicsi: 4px; --f-arnyek: 0 0 0 1px rgba(17,17,20,.06); --f-arnyek-lebego: 0 12px 32px -12px rgba(10,10,12,.35); /* — widget — */ --fo-szin: #17171b; --lap: #ffffff; --hatter: #f4f4f5; --keret: #dbdbe0; --keret-eros: #17171b; --tinta: #111114; --tinta-lagy: #55555e; --halvany: #62626b; --sugar: 6px; --sugar-kicsi: 4px; --arnyek: 0 0 0 1px rgba(17,17,20,.05); } /* Grafit karaktere: szögletes, kontúros kártyák — a keret a fő szereplő */ html[data-tema="grafit"] .f-kartya { border: 1.5px solid #17171b; box-shadow: none; } /* ============================================================================ 8) TERRA — világos, meleg, terrakotta kiemelés, magazin-szerif címek Jelenet: délutáni napfény egy fazekas-műhely polcain; nyugodt törtfehér alap, égetett agyag színű műveletek, könyvillustrációs címsorok. ========================================================================== */ html[data-tema="terra"] { /* — admin — */ --f-fekete: #251510; /* oldalsáv: pörkölt barna */ --f-hatter: #faf8f6; /* semleges törtfehér, krém-árnyalat nélkül */ --f-feher: #ffffff; --f-lila: #b5491f; /* kiemelés: égetett terrakotta — fehér szöveg ~5.3:1 */ --f-lila-sotet: #8e3716; --f-lila-halvany: #f8e7de; --f-lila-hover: #f3d6c8; --f-keret: #e9ded6; --f-szoveg: #2c1a12; --f-szoveg-masodlagos: #7a6156; --f-sugar: 14px; --f-sugar-kicsi: 10px; --f-arnyek: 0 1px 2px rgba(44,26,18,.05), 0 12px 30px -14px rgba(44,26,18,.20); --f-arnyek-lebego: 0 6px 16px rgba(44,26,18,.12), 0 24px 56px -18px rgba(44,26,18,.28); /* — widget — */ --fo-szin: #b5491f; --lap: #ffffff; --hatter: #faf8f6; --keret: #e9ded6; --keret-eros: #d8c5b8; --tinta: #2c1a12; --tinta-lagy: #7a6156; --halvany: #83675a; --sugar: 14px; --sugar-kicsi: 10px; } /* Magazin-szerif a lap-CÍMEKEN (admin és a vendégwidget főcíme is) */ html[data-tema="terra"] .f-h1, html[data-tema="terra"] .f-h2, html[data-tema="terra"] .doboz h1, html[data-tema="terra"] body:not(.f-vaz) h1 { font-family: Georgia, 'Iowan Old Style', 'Times New Roman', serif; letter-spacing: -0.01em; font-weight: 700; } /* Szakaszcímkék: széles körfutású kiskapitális — nyomdai ritmus */ html[data-tema="terra"] .f-szakasz-cim { letter-spacing: .12em; } /* ============================================================================ LEBEGŐ VERZIÓVÁLTÓ (a /kozos/tema.js rajzolja) — saját, témától független stílus, hogy minden háttéren olvasható maradjon (sötét pult + színes buci). ========================================================================== */ .tema-valto { position: fixed; right: 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; } .tema-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; } .tema-valto__gomb:hover { transform: translateY(-1px); box-shadow: 0 10px 26px rgba(0,0,0,.34); } .tema-valto__gomb:focus-visible { outline: 2px solid #fff; outline-offset: 2px; } .tema-valto__pont { width: 14px; height: 14px; border-radius: 50%; flex: none; border: 2px solid rgba(255,255,255,.85); } .tema-valto__panel { position: absolute; right: 0; bottom: calc(100% + 10px); background: #191c24; border: 1px solid rgba(255,255,255,.12); border-radius: 14px; padding: 8px; min-width: 216px; box-shadow: 0 16px 44px rgba(0,0,0,.42); display: none; } .tema-valto__panel[data-nyitva="1"] { display: block; } .tema-valto__cim { color: #9ea3b2; font-size: 11px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; padding: 6px 10px 8px; } .tema-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; } .tema-valto__opcio:hover { background: rgba(255,255,255,.07); } .tema-valto__opcio:focus-visible { outline: 2px solid #fff; outline-offset: -2px; } .tema-valto__opcio[aria-checked="true"] { background: rgba(255,255,255,.10); font-weight: 700; } .tema-valto__swatch { width: 20px; height: 20px; border-radius: 6px; flex: none; border: 1px solid rgba(255,255,255,.18); position: relative; overflow: hidden; } .tema-valto__opcio-nev { flex: 1; } .tema-valto__pipa { width: 16px; height: 16px; flex: none; opacity: 0; } .tema-valto__opcio[aria-checked="true"] .tema-valto__pipa { opacity: 1; } .tema-valto__leiras { display: block; color: #9298a8; font-size: 11.5px; font-weight: 400; margin-top: 1px; } @media (max-width: 640px) { .tema-valto { right: 12px; bottom: 12px; } .tema-valto__gomb-felirat { display: none; } /* mobilon csak a színbuci látszik */ .tema-valto__gomb { padding: 11px; } } @media (prefers-reduced-motion: reduce) { .tema-valto__gomb, .tema-valto__opcio { transition: none; } .tema-valto__gomb:hover { transform: none; } }