/* ========================================================================== Ertektanu - B irany: eros dontesi pontok a valaszto feluleteken -------------------------------------------------------------------------- Cel: a landing es az aloldalak valaszto kartyai ("Melyik On?", csomagok, arkartyak, kalkulator-opciok, hitelesites-valaszto) karakteresebbek legyenek, hogy a felhasznalo szeme megakadjon a dontesi pontokon. Fontos: - Az A1 paletta alapja NEM valtozik. Csak a valaszto komponensek kapnak erosebb vizualis hierarchiat. - Ez a fajl UTOLSO betoltesu legyen, hogy felulirja a korabbi palette-override / menu-variant / character-tune blokkokat. - Beszuras az index.html vegere: - A .note, .tile, .cta-box osztalyok SZANDEKOSAN kimaradnak, mert azoknak eredetileg nincs keretuk. ELLENORZENDO: az alabbi osztalynevek a projektdokumentaciobol szarmaznak, nem az elo HTML-bol. Deploy elott Playwright-tal ellenorizni kell a szamitott stilust, es ha egy osztalynev mas, azt itt kell javitani. ========================================================================== */ :root { --b-deep: #123244; --b-accent: #0F766E; --b-accent-lite: #14907F; --b-gold: #B98330; --b-gold-2: #C08A2E; --b-gold-lite: #E7D6B4; --b-ink: #17222B; --b-line: #B3AB98; --b-paper: #FFFFFF; } /* -------------------------------------------------------------------------- 1) ALAP: minden valaszto kartya karakteres keretet es arnyekot kap -------------------------------------------------------------------------- */ .who, .lvl, .pkg, .price, .cert-card, .qc-opt span { position: relative; border-width: 2px !important; border-style: solid !important; border-color: var(--b-deep) !important; border-radius: 14px; background-color: var(--b-paper); box-shadow: 0 10px 24px rgba(18, 50, 68, .12); overflow: hidden; transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease, background-color .18s ease; } /* -------------------------------------------------------------------------- 2) SZINES FEJLECSAV minden valaszto kartya tetejen -------------------------------------------------------------------------- */ .who::before, .lvl::before, .pkg::before, .price::before, .cert-card::before { content: ""; display: block; position: absolute; top: 0; left: 0; right: 0; height: 8px; background: linear-gradient(90deg, var(--b-deep), var(--b-accent)); } /* A kartyak belso tartalma ne bujjon a fejlecsav ala */ .who, .lvl, .pkg, .price, .cert-card { padding-top: 26px; } /* Elteroe szinu fejlecsav, hogy az opciok gyorsan szetvalaszthatok legyenek. 1. opcio: melykek | 2. opcio: smaragd | 3. opcio: arany */ .who:nth-of-type(1)::before, .lvl:nth-of-type(1)::before, .pkg:nth-of-type(1)::before, .price:nth-of-type(1)::before, .cert-card:nth-of-type(1)::before { background: linear-gradient(90deg, var(--b-deep), #1B4B5A); } .who:nth-of-type(2)::before, .lvl:nth-of-type(2)::before, .pkg:nth-of-type(2)::before, .price:nth-of-type(2)::before, .cert-card:nth-of-type(2)::before { background: linear-gradient(90deg, var(--b-accent), var(--b-accent-lite)); } .who:nth-of-type(3)::before, .lvl:nth-of-type(3)::before, .pkg:nth-of-type(3)::before, .price:nth-of-type(3)::before, .cert-card:nth-of-type(3)::before { background: linear-gradient(90deg, var(--b-gold), var(--b-gold-2)); } /* -------------------------------------------------------------------------- 3) HOVER es FOKUSZ: erezhetoen kattinthato legyen -------------------------------------------------------------------------- */ .who:hover, .lvl:hover, .pkg:hover, .price:hover, .cert-card:hover, .qc-opt span:hover { transform: translateY(-3px); border-color: var(--b-accent) !important; box-shadow: 0 16px 32px rgba(18, 50, 68, .18); } .cert-card:focus-within, .qc-opt input:focus-visible + span { outline: none; border-color: var(--b-gold) !important; box-shadow: 0 0 0 4px rgba(185, 131, 48, .28), 0 12px 26px rgba(18, 50, 68, .16); } /* -------------------------------------------------------------------------- 4) KIVALASZTOTT ALLAPOT - modern bongeszok (:has) -------------------------------------------------------------------------- */ .cert-card:has(input:checked), .qc-opt input:checked + span, .lvl:has(input:checked), .pkg:has(input:checked) { color: #FFFFFF !important; background: linear-gradient(145deg, var(--b-deep), var(--b-accent)) !important; border-width: 3px !important; border-color: var(--b-gold) !important; box-shadow: 0 0 0 4px rgba(185, 131, 48, .20), 0 18px 36px rgba(18, 50, 68, .26); transform: translateY(-2px); } .cert-card:has(input:checked) *, .lvl:has(input:checked) *, .pkg:has(input:checked) * { color: #FFFFFF !important; border-color: rgba(255, 255, 255, .45) !important; } /* -------------------------------------------------------------------------- 5) KIVALASZTOTT ALLAPOT - tartalek osztaly regi Android WebView-hoz A JS a kivalasztaskor tegye ra az .is-selected osztalyt a kartyara. -------------------------------------------------------------------------- */ .cert-card.is-selected, .lvl.is-selected, .pkg.is-selected, .price.is-selected, .who.is-selected, .qc-opt span.is-selected { color: #FFFFFF !important; background: linear-gradient(145deg, var(--b-deep), var(--b-accent)) !important; border-width: 3px !important; border-color: var(--b-gold) !important; box-shadow: 0 0 0 4px rgba(185, 131, 48, .20), 0 18px 36px rgba(18, 50, 68, .26); transform: translateY(-2px); } .cert-card.is-selected *, .lvl.is-selected *, .pkg.is-selected *, .who.is-selected * { color: #FFFFFF !important; border-color: rgba(255, 255, 255, .45) !important; } /* Pipa a kivalasztott kartyan */ .cert-card:has(input:checked)::after, .cert-card.is-selected::after, .lvl.is-selected::after, .pkg.is-selected::after { content: ""; position: absolute; top: 16px; right: 14px; width: 22px; height: 22px; border-radius: 50%; background: var(--b-gold); box-shadow: inset 0 0 0 3px rgba(18, 50, 68, .85); } /* -------------------------------------------------------------------------- 6) KIEMELT / FO TERMEK: arany keret marad, de erosebb kontraszttal -------------------------------------------------------------------------- */ .pkg.featured, .price.popular, .pkg-popular, .lvl.featured { border-width: 3px !important; border-color: var(--b-gold) !important; background: linear-gradient(180deg, #FFFDF8, #F3E7CB) !important; box-shadow: 0 0 0 4px rgba(185, 131, 48, .16), 0 20px 40px rgba(18, 50, 68, .20); } .pkg.featured::before, .price.popular::before, .pkg-popular::before, .lvl.featured::before { height: 10px; background: linear-gradient(90deg, var(--b-gold), var(--b-gold-2), var(--b-gold-lite)) !important; } .pkg-badge { background: var(--b-gold) !important; color: var(--b-deep) !important; font-weight: 800; letter-spacing: .04em; text-transform: uppercase; box-shadow: 0 6px 14px rgba(18, 50, 68, .20); } /* -------------------------------------------------------------------------- 7) CIMEK es ARAK erosebb kontraszt a kartyakon -------------------------------------------------------------------------- */ .who h3, .lvl h3, .pkg h3, .price h3, .cert-card strong { color: var(--b-deep); font-weight: 700; letter-spacing: -.01em; } .pkg .amount, .price .amount, .pkg .price-value, .price .price-value { color: var(--b-deep); font-weight: 800; } /* -------------------------------------------------------------------------- 8) KALKULATOR / OPCIOVALASZTO: nagyobb, gombszerubb kattintofelulet -------------------------------------------------------------------------- */ .qc-opt span { padding: 12px 16px; font-weight: 600; cursor: pointer; } .qc-sel, .qc-num, .qc-chk { border-width: 2px !important; border-color: var(--b-deep) !important; } /* -------------------------------------------------------------------------- 9) MOBIL: az erosebb keretek ne szukitsek tul a tartalmat -------------------------------------------------------------------------- */ @media (max-width: 560px) { .who, .lvl, .pkg, .price, .cert-card { padding-top: 22px; border-radius: 12px; box-shadow: 0 8px 18px rgba(18, 50, 68, .12); } .who::before, .lvl::before, .pkg::before, .price::before, .cert-card::before { height: 6px; } .who:hover, .lvl:hover, .pkg:hover, .price:hover, .cert-card:hover { transform: none; } } /* -------------------------------------------------------------------------- 10) Akadalymentesseg: mozgascsokkentett mod -------------------------------------------------------------------------- */ @media (prefers-reduced-motion: reduce) { .who, .lvl, .pkg, .price, .cert-card, .qc-opt span { transition: none; transform: none !important; } } /* ========================================================================== ÁRAZÁSI KÁRTYÁK (.price) — felülírás -------------------------------------------------------------------------- Az index.html 5-kártyás árszekciója is a .price osztályt használja, de ezek információs kártyák, nem döntési pontok. A korábbi b-valaszto szabályok (fejlécsáv + padding-top + hover translate) megtörték a grafikát: a SZAKMABELIEKNEK jelvény levágódott, a 3. kártyán felesleges gold csík jelent meg. Itt semlegesítjük ezeket, hogy a pricing kártyák tiszta, eredeti dizájnjúak maradjanak. ========================================================================== */ .price::before { display: none !important; } .price { padding-top: 0 !important; } .price:hover { transform: none !important; box-shadow: none !important; } .pro-tag { display:inline-block; margin:0 0 8px; background:var(--gold); color:#123244; font-size:11px; font-weight:700; letter-spacing:1.4px; padding:3px 12px; border-radius:10px; } /* ========================================================================== Smart Square Productions - gazdakredit (fejlec es lablec) -------------------------------------------------------------------------- A jeloles, a szinek es a jel (/ssp-jel.svg) az index.html-en mar bevalt megoldasbol valok, valtoztatas nelkul. Itt csak annyi tortenik, hogy a tobbi lapon is ervenyesek legyenek, egy helyrol. Arculati kezikonyv v1: a jelet nem forgatjuk, nem tukrozzuk, nem teszunk ra arnyekot; a hatternegyzet a mindenkori platformszin; "a gazda sosem nyomja el a lakot". ========================================================================== */ /* --- fejlec --------------------------------------------------------------- A kredit a markanev ALA kerul egy fuggoleges oszlopban, nem melle. Merve: a navigacios savban vizszintesen csak 12 px szabad hely van asztali nezetben, tehat melle nem ferne el. Igy viszont a sav vizszintesen nem lesz szelesebb. A .name sormagassaga 1.05 - hogy a sav MAGASSAGA se nojon. FONTOS: flex:0 0 auto. A min-width:0 osszenyomta a markanevet, es az EN gomb rafedt: a .name eredetileg kozvetlen flex-gyerek volt, es nem zsugorodott. Ez a viselkedes ne vesszen el egy kesobbi atirasnal. A teljes nev (232 px) nem fer el a 138 px-es markanev ala, ezert az a lablecben van kiirva. */ .nav .brandcol{display:flex;flex-direction:column;gap:1px;flex:0 0 auto} .nav .brandcol .name{line-height:1.05} .nav .nav-ssp{display:flex;align-items:center;gap:6px;line-height:1} .nav .nav-ssp .ssp-by{font-size:10px;color:#A9C0CE;letter-spacing:.04em} .nav .nav-ssp .ssp-jel{width:16px;height:16px;display:block;flex:0 0 auto} .nav .nav-ssp .ssp-rov{display:inline-flex;align-items:center;gap:2px; font-size:11.5px;font-weight:700;letter-spacing:.02em;color:#EAF1F5} .nav .nav-ssp .ssp-rov i{width:.60em;height:.60em;border-radius:2px; background:#5EA3E8;display:inline-block} /* --- a teljes nev a fejlecben -------------------------------------------- A rovidites onmagaban egy elso latogatonak semmit nem mond, ezert melle kikerult a teljes nev is. Merve: a teljes nev 232 px szeles, a fejlecben mobilon viszont mindossze 27 px szabad hely van. Ezert asztali nezetben ott a teljes nev, 640 px alatt csak a rovidites marad -- a teljes nev ott a lablecben olvashato. Ha ez a media query eltunik, mobilon a fejlec tulcsordul. */ .ssp-teljes{font-size:10.5px;letter-spacing:.05em;white-space:nowrap} .ssp-pont{font-size:11px} /* Az !important itt nem lustasag. Az /arak es /vallalkozasoknak lapon a sajat .nav-brand span szabaly (font-size:16px; font-weight:700) es egy .nav .name,.nav .nav-brand span{color:#FFFFFF!important} is illeszkedik a teljes nevre, mert az a .nav-brand-en BELUL van. Emiatt a nev nagy, felkover es feher lett. Ugyanazzal az eszkozzel kell visszavenni. */ .nav .nav-ssp .ssp-teljes,.nav .nav-ssp .ssp-pont{ font-size:10.5px!important;font-weight:400!important; letter-spacing:.05em!important;color:#A9C0CE!important} .nav .nav-ssp .ssp-teljes{font-family:inherit} @media (max-width:640px){ .ssp-teljes,.ssp-pont{display:none} } /* --- azok a lapok, ahol nem a .nav sav a fejlec --------------------------- Ket eset: a jogi es a szakertoi lap sajat markasavja (sotet hatter), es a morzsamenus lapok teteje, ahol csak az EN gomb all (vilagos hatter). */ .ssp-hitel{display:flex;align-items:center;gap:6px;line-height:1;min-width:0} .ssp-hitel.ssp-sotet{--ssp-by:#A9C0CE;--ssp-rov:#EAF1F5;--ssp-sq:#5EA3E8} .ssp-hitel.ssp-vilagos{--ssp-by:#5A6B76;--ssp-rov:#152836;--ssp-sq:#3684D6} .ssp-hitel.ssp-sotet .ssp-by,.ssp-hitel.ssp-sotet .ssp-pont, .ssp-hitel.ssp-sotet .ssp-teljes, .ssp-hitel.ssp-vilagos .ssp-by,.ssp-hitel.ssp-vilagos .ssp-pont, .ssp-hitel.ssp-vilagos .ssp-teljes{color:var(--ssp-by)} .ssp-hitel.ssp-sotet .ssp-rov, .ssp-hitel.ssp-vilagos .ssp-rov{color:var(--ssp-rov)} .ssp-hitel.ssp-sotet .ssp-rov i, .ssp-hitel.ssp-vilagos .ssp-rov i{background:var(--ssp-sq)} .ssp-hitel.ssp-sotet .ssp-by,.ssp-hitel.ssp-vilagos .ssp-by{ font-size:10px;letter-spacing:.04em} .ssp-hitel.ssp-sotet .ssp-jel,.ssp-hitel.ssp-vilagos .ssp-jel{ width:16px;height:16px;display:block;flex:0 0 auto} .ssp-hitel.ssp-sotet .ssp-rov,.ssp-hitel.ssp-vilagos .ssp-rov{ display:inline-flex;align-items:center;gap:2px; font-size:11.5px;font-weight:700;letter-spacing:.02em} .ssp-hitel.ssp-sotet .ssp-rov i,.ssp-hitel.ssp-vilagos .ssp-rov i{ width:.60em;height:.60em;border-radius:2px;display:inline-block} /* A markanev es a hitel egy oszlopban. flex:0 0 auto -- lasd fent, a min-width:0 osszenyomna a markanevet. */ .ssp-oszlop{display:flex;flex-direction:column;gap:2px;flex:0 0 auto; align-items:flex-start} .ssp-fejsor{display:flex;align-items:center;justify-content:space-between; gap:12px;flex-wrap:wrap} /* --- lablec --------------------------------------------------------------- A lablec hattere #123244 (sotet), ezert a kezikonyv SOTET valtozata: #5EA3E8 platformszin, vilagos szoveg. Merve: a kontraszt 7,1 : 1, a WCAG AA 4,5 : 1 hatara folott. Az igazitasrol. A lablec lapfuggo: a fooldalon balra, az Arak lapon kozepre rendezett. Harom megoldast probaltam: * display:flex - a jel MINDIG balra ragadt, mikozben a "Smart Square Productions" felirat kozepen maradt. * display:inline-flex - az igazitas jo lett, de merve +14 px-szel lejjebb csuszott a jel: a korulotte kepzodo sordoboz orokolte a lablec 21,6 px-es sormagassagat. * ez a mostani - a kulso elem blokk, nulla sormagassaggal es nulla betumerettel, igy sem sordoboz-tobblet, sem a tagek kozotti szokoz nem szamit. A gyerekek soron belul allnak, ezert a text-align ervenyesul rajuk: oroklik a lablec igazitasat. A 7 px-es res a jel margojaval keszul, nem gap-pel, mert az csak flexben mukodne. */ footer .ssp-hitel{display:block;line-height:0;font-size:0;margin:14px 0 4px} footer .ssp-hitel > *{vertical-align:middle} footer .ssp-hitel .ssp-by{display:inline;font-size:11px;line-height:1; color:#A9C0CE;letter-spacing:.04em} footer .ssp-hitel .ssp-jel{display:inline-block;width:18px;height:18px; margin:0 7px} footer .ssp-hitel .ssp-rov{display:inline-flex;align-items:center;gap:2px; font-size:13px;line-height:1;font-weight:700;letter-spacing:.02em; color:#EAF1F5} footer .ssp-hitel .ssp-rov i{width:.60em;height:.60em;border-radius:2px; background:#5EA3E8;display:inline-block} footer .ssp-nev{font-size:10.5px;letter-spacing:.06em;color:#A9C0CE; margin:0 0 14px;line-height:1.3}