/* Theme Name: Herbawell Theme URI: https://herbawell.hu/ Description: A Herbawell webshop gyermek-témája. A szerkezetet az MF Shop Kit adja, az arculatot a brand.json és ez a stíluslap. Forrás: 03-ARCULAT/PROJEKTEK/herbawell arculati kézikönyv. Author: Multifine System Kft. Template: mf-shop-kit Version: 1.0.0 Text Domain: herbawell */ /* ========================================================================== A stíluslap CSAK azt tartalmazza, ami a Herbawell arculatában eltér a sablontól. Minden szín, méret és térköz tokenből jön (brand.json), beírt érték nincs benne. Ami itt van, az szerkezeti következmény, nem ízlés: 1. Marcellus display-betű a címsorokra (kézikönyv 06) 2. 16 px a folyó szöveg minimuma (kézikönyv 06, 45-80 éves vevő) 3. 52 px gombmagasság, 48 px érintőfelület (kézikönyv 08) 4. az arany SOHA nem szövegszín (kézikönyv 05, kontraszt 2,98) ========================================================================== */ /* --- 1. Betűtípusok, önállóan hosztolva (nem CDN) ----------------------- */ @font-face { font-family: 'Marcellus'; src: url('assets/fonts/Marcellus-Regular.woff2') format('woff2'); font-weight: 400; font-style: normal; font-display: swap; } /* --- 2. Display-betű a címsorokra --------------------------------------- */ /* * A Marcellus a márka hangját viszi: nyugodt, klasszikus, nem sportos. * A törzsszöveg marad Inter, mert a Marcellus hosszú szövegben fárasztó, * a célközönség pedig olvasószemüveggel néz. * * A gomb- és címkeszöveg SZÁNDÉKOSAN kimarad: ott a felismerhetőség * fontosabb, mint a hangulat. */ .mf-fo h1, .mf-fo h2, .mf-fo h3, .mf-fo .hero h1, .mf-fo .sec > h2, .hw-display { font-family: var(--display, 'Marcellus', 'Times New Roman', serif); font-weight: var(--fw-normal, 400); letter-spacing: .002em; } /* --- 3. A folyó szöveg minimuma 16 px ----------------------------------- */ /* * A sablon 15 px-re épült (40-50+ vevőkör). A Herbawell vevője 45-80, * a súlypont 55-70. A kézikönyv ezért 16 px-et mond ki. A --fs-md token * már 16 px, ez a szabály csak azt a néhány helyet emeli meg, ahol a * sablon a nála kisebb --fs-sm-et használja folyó szövegre. */ .mf-fo p, .mf-fo li, .mf-fo dd, .mf-fo .leiras, .mf-fo .sub { font-size: var(--fs-md); line-height: 1.62; } /* A terméklap első képernyőjén semmi nem kisebb 17 px-nél. */ .single-product .mf-fo .summary p, .single-product .mf-fo .summary li, .single-product .mf-fo .entry-summary p { font-size: var(--fs-lg); } /* --- 4. Gomb: 52 px magas, 48 px érintőfelület -------------------------- */ .mf-fo .btn, .mf-fo .button, .mf-fo button.single_add_to_cart_button, .woocommerce .mf-fo a.button, .woocommerce .mf-fo button.button { min-height: 52px; border-radius: var(--r-8); font-family: var(--font-ui); font-weight: var(--fw-medium); letter-spacing: .01em; } .mf-fo a, .mf-fo button { min-height: 0; } .mf-fo .mf-erintheto, .mf-fo .qty-gomb, .mf-fo .quantity input { min-height: 48px; min-width: 48px; } /* --- 5. Az arany dísz, nem szöveg --------------------------------------- */ /* * A kézikönyv 05: az arany kontrasztja törtfehéren 2,98, tehát bukik a * WCAG AA-n. Szövegre a mélyített változat megy, sötét alapra a világos. * Ez a szabály itt CSS-ben is ki van kényszerítve, hogy egy későbbi * másolás-beillesztés se tudja visszahozni. */ .hw-arany-vonal { border-color: var(--_arany); } .hw-arany-szoveg { color: var(--_arany-melv); } .mf-lablec .hw-arany-szoveg, .mf-hdr .hw-arany-szoveg, .hw-sotet .hw-arany-szoveg { color: var(--_arany-vil); } /* --- 6. Akciós ár terrakotta, nem piros --------------------------------- */ .mf-fo del, .mf-fo .regi-ar { color: var(--n-500); text-decoration-thickness: 1px; } .mf-fo ins, .mf-fo .akcios-ar { color: var(--_akcios-ar); text-decoration: none; font-weight: var(--fw-bold); } /* --- 7. Fejléc és lábléc mélyzöldön ------------------------------------- */ .mf-hdr { background: var(--brand); color: var(--brand-ink); } .mf-shipbar { background: var(--ink-deep); color: var(--brand-ink-soft); font-size: var(--fs-sav); } .mf-hdr__logo-kep { max-height: 40px; width: auto; } .mf-lablec { background: var(--brand); color: var(--brand-ink); } /* --- 8. Hero: panasz-választó ------------------------------------------- A sablonban itt egy kvíz-meghívó áll, egyetlen gombbal. A Herbawellnél három kategória-gomb van egymás alatt, mert a kvíz felesleges kerülő: a vevő egy koppintással ott van, ahol a panasza szerepel. */ .hq-valaszto { display: grid; gap: var(--sp-10); margin-top: var(--sp-16); } .hq-valaszto .hq-btn { width: 100%; justify-content: center; } /* ========================================================================== 9. SÖTÉT MÁRKASZÍN KORREKCIÓ A sablon CSS-e az ALKOPRO-ból származik, ahol a márkaszín VILÁGOS sárga volt. Ott a márkafelületekre a sötét `--ink` került, és jól nézett ki. A Herbawell márkaszíne MÉLYZÖLD, tehát ugyanaz a szabály sötétet tesz sötétre: a gépi kontraszt-mérés 1,04 és 1,24 közötti értékeket adott, vagyis a szöveg gyakorlatilag eltűnt. A javítás nem a szülő témában van, mert ott az `--ink` egy TUDATOS ALKOPRO- döntést rögzít (a sárgán a szénszürke kontrasztosabb, mint a barnás brand-ink), és azt nem írjuk felül egy másik shop kedvéért. A helye itt van: ez a fájl írja le, mit jelent a Herbawell arculata. Minden itteni érték a `--brand-ink` (törtfehér) vagy a világos arany, ahogy a kézikönyv 05 szakasza kimondja: sötét alapra a VILÁGOS arany megy. A listát gépi kontraszt-ellenőrzés adta, nem szemrevételezés. ========================================================================== */ /* Elsődleges gomb: márkaszínű felület, tehát brand-ink szöveg. A szelektor SZÁNDÉKOSAN nincs a `.mf-fo` alá zárva: a kosár és a pénztár saját dokumentumot ír ki, ott az a burkoló nincs meg, és a "Vásárlás folytatása" gomb felirata ugyanígy eltűnne. */ a.btn.btn-pri, button.btn.btn-pri, .btn.btn-pri { color: var(--brand-ink); } /* Szállítási küszöb-sáv. */ .mf-shipbar__in span, .mf-shipbar__in b, .mf-shipbar__ikon { color: var(--brand-ink); } /* Sötét bizalmi sáv: a kicker a sablonban --brand, ami itt mélyzöld a mélyzöldön. A kézikönyv szerint sötét alapra a világos arany megy. Kétosztályos szelektor kell: a sablon szabálya is `.mf-fo .police-kicker`, tehát azonos specifikusságnál a betöltési sorrenden múlna a győztes. */ .police .police-kicker, .mf-fo .police .police-kicker { color: var(--_arany-vil); } .police .police-txt h2, .police .police-txt p, .mf-fo .police .police-txt h2, .mf-fo .police .police-txt p { color: var(--brand-ink); } /* Lábléc: a sablon --n-600-at ad ezeknek, ami a mélyzöldön 2,3 kontraszt. */ .mf-lablec .fcopy, .mf-lablec .fpersonal-hours { color: var(--brand-ink-soft); } /* ========================================================================== 10. ELRENDEZÉS-KORREKCIÓ A sablon két rácsa olyan gyereket vár, ami a Herbawell tartalmában nincs meg. Mindkettő ugyanaz a hibatípus, mint a terméklap egyképes galériája: ha a rács egyik oszlopa üresen marad, a TARTALOM csúszik a szűk oszlopba. ========================================================================== */ /* SEO-blokk: a sablonban bal oldalt fül-navigáció áll (262 px). A Herbawell változat egyetlen folyamatos szöveg, tehát a szöveg landolt a 262 px-es sávban. Egy oszlop kell. */ .mf-fo .seo-tabs { grid-template-columns: 1fr; } /* Hero-kártya: a sablonban két termékfotó és egy kérdőjel áll a cím alatt (`.hq-art`, 210 px). Nálunk ez nincs, ezért a cím és az alcím egymásra csúszott. */ .mf-fo .hq-fejcim { margin-bottom: var(--sp-8); } .mf-fo .hq-title { margin: 0 0 var(--sp-4); font-size: var(--fs-xl); line-height: 1.35; } /* ========================================================================== 11. ÉRINTŐFELÜLET ÉS MINIMUM BETŰMÉRET MOBILON A kézikönyv 08 szakasza 48 px-es érintőfelületet ír elő, a 06 pedig 16 px-es minimumot a folyó szövegre. A sablon ennél kisebb értékekkel dolgozik, mert az ALKOPRO vevőköre fiatalabb. Gépi méréssel (iPhone 13 profil) négy elem maradt a küszöb alatt: a fejléc két ikongombja, a kosár mennyiség-léptetője és a mobilmenü tételei. Ez nem szépészeti kérdés: 40 px-es gomb mellett a 60 fölötti vevő rendszeresen mellényúl, és a kosárból esik ki. ========================================================================== */ .mf-hdr__menugomb, .mf-hdr__keresogomb, .mf-hdr__kosar, .mf-hdr__muveletek > button, .mf-hdr__muveletek > a { min-width: 48px; min-height: 48px; } /* Kosár mennyiség-léptető. A sablonban 32 px, ami két számjegy mellett is szűk, és a törlés-ikon közvetlenül mellette áll. */ .apx-qty button, .apx-qty .qty-gomb, .quantity .qty-plus, .quantity .qty-minus, .apx-sor-torol { min-width: 48px !important; min-height: 48px !important; } /* Mobilmenü: navigációs felirat, de ettől még olvasni kell. */ #mf-mobmenu a, .mf-mobmenu a, .mf-mobmenu__lista a { font-size: var(--fs-md); min-height: 48px; display: flex; align-items: center; } /* A szállítási küszöb-sáv az egyetlen hely, ahol 15 px alá mennénk. */ .mf-shipbar__in span, .mf-shipbar__in b { font-size: var(--fs-sm); }