/* ========================================================================== Kiss-Iskolabútor – Storefront felülírások (brand) A Storefront (szülő téma) saját elemeire alkalmazza a demó irányát, hogy az oldal már az egyedi sablonok elkészülte ELŐTT is a márka színeit és betűit vegye fel. A részletes, sablononkénti dizájnt a következő fázisban építjük a demó komponenseire. ========================================================================== */ /* ---- Alap tipográfia + színek ---- */ body, .site { font-family: var(--font-body); color: var(--ink); background: var(--paper); } h1, h2, h3, h4, h5, h6, .site-title, .storefront-breadcrumb { font-family: var(--font-display); color: var(--navy); } /* Monospace ott, ahol "műszaki" karakter kell */ .price, .woocommerce-Price-amount, .sku, .product_meta { font-family: var(--font-mono); } a { color: var(--navy); } a:hover { color: var(--orange); } /* ---- Fejléc (a demó szerint: FEHÉR, nem navy) ---- */ .site-header { background-color: var(--white); border-bottom: 1px solid var(--mist); position: static; /* mobilon normál; asztalon fixed (lásd lentebb) – felülírja a kiss-design sticky/top:41px szabályát */ top: auto; } /* Logó / oldalcím: navy, Space Grotesk */ .site-header .site-title, .site-header .site-title a, .site-header .beta { font-family: var(--font-display); font-weight: 700; letter-spacing: .02em; color: var(--navy); } .site-header .site-title a:hover { color: var(--orange); } /* Egyedi logó (Testreszabás → Webhely-azonosság → Logó feltöltése) – balra igazítva, a korábbi szöveges "Kiss-Iskolabútor" cím helyén jelenik meg automatikusan, amint fel van töltve. A logó mérete a korábbi (jónak ítélt) méretre van visszaállítva – a szűkítés a KÖRÜLÖTTE lévő üres helyre (padding) vonatkozik, nem a logó méretére. !important: a Storefront saját mérete korábban felülírta ezt. */ .site-header .site-branding { padding-top: 6px !important; padding-bottom: 6px !important; width: max-content !important; /* csak a logó szélessége – ne legyen túllógó, széles konténer */ max-width: 100% !important; float: none !important; margin-right: 0 !important; } .site-header .custom-logo-link { display: inline-flex !important; align-items: center !important; } .site-header .custom-logo { display: block !important; max-height: 88px !important; width: auto !important; height: auto !important; } /* Keresőmező: lejjebb helyezve, hogy függőlegesen a logóhoz igazodjon (korábban a fejléc tetejéhez tapadt, túl magasan lógott). */ .site-header .site-search { margin-top: 28px; } /* Alcím (tagline): monospace, halvány – "Gyártól. Iskolának." hangulat */ .site-header .site-description { font-family: var(--font-mono); font-size: 10.5px; letter-spacing: .06em; text-transform: uppercase; color: var(--ink-soft); } /* ========================================================================== EGYSOROS, KOMPAKT, RÖGZÍTETT FEJLÉC (logó → menü → kereső → kosár) A Storefront kétsoros fejlécét (a functions.php-ben) egyetlen .kiss-header-bar konténerbe vontuk. Itt tesszük egy sorba és rögzítjük a lap tetejére, hogy görgetéskor is látszódjon. Miért FIXED és nem sticky? A főoldali teljes szélességű (100vw) sávok miatt az ősöknél overflow-korlátozás lehet, ami a position:sticky-t megbénítja. A position:fixed erre nem érzékeny. A fix fejléc alól a tartalmat a body felső belső margójával toljuk lejjebb. ========================================================================== */ @media (min-width: 1080px) { .site-header { position: fixed; top: 0; left: 0; right: 0; width: 100%; padding: 0 !important; /* a Storefront nagy fejléc-belsőmargója ("zöld" sáv) el */ z-index: 100; } .admin-bar .site-header { top: 32px; /* a bejelentkezett nézet WP admin-sávja alá */ } /* A tartalom a fix fejléc alá csúszna – ezért az egész oldalt lejjebb toljuk. Nagyobb logó → magasabb fejléc → nagyobb felső margó. */ body { padding-top: 94px; } /* --- EGYSOROS FLEXBOX: logó | menü (középen, auto-margóval) | kereső+Ajánlatkérő. Flexben az elemek EGYMÁS UTÁN, sorban helyezkednek el – fizikailag NEM tudnak egymásra csúszni (nincs abszolút pozíció, nincs negatív margó). A menü bal/jobb auto-margóval a logó és a jobb blokk közé, középre kerül. Ha nincs elég hely a teljes sorra, 1080px alatt hamburger menü lép be. --- */ .site-header .kiss-header-bar { display: flex !important; align-items: center !important; flex-wrap: nowrap !important; gap: 16px; max-width: none !important; margin-left: 0 !important; margin-right: 0 !important; padding-left: clamp(12px, 2vw, 28px) !important; padding-right: clamp(12px, 2vw, 28px) !important; padding-top: 8px !important; padding-bottom: 8px !important; } /* Logó: bal szélen, SOHA nem zsugorodik és nem tűnik el. order:0 (nem 1!) – így a logó AKKOR is legelöl marad, ha a menü valamiért nem kapja meg az order:2-t (pl. Storefront primary-navigation-wrapper miatt, amikor is a burkoló alap order-je 0). Korábban order:1 volt, és ha a menü 0-n maradt, a menü a logó ELÉ csúszott. */ .site-header .kiss-header-bar > .site-branding { order: 0; flex: 0 0 auto !important; display: flex; align-items: center; justify-content: flex-start; margin: 0 !important; padding: 0 !important; } .site-header .custom-logo { max-height: 72px !important; /* nagyobb logó */ width: auto !important; height: auto !important; } /* Menü: a logó UTÁN, auto bal/jobb margóval középre. A width:auto (ID-szinten is) felülírja a Storefront #site-navigation { width:100% } szabályát, hogy a menü csak a saját tartalmát vegye fel és ne lógjon rá a logóra. */ .site-header .kiss-header-bar > .main-navigation, .site-header .kiss-header-bar > #site-navigation.main-navigation { order: 2; flex: 0 1 auto !important; width: auto !important; max-width: 100% !important; min-width: 0 !important; margin: 0 auto !important; /* KÖZÉPRE a logó és a jobb blokk között */ float: none !important; background: transparent !important; display: flex !important; justify-content: center; } .site-header .kiss-header-bar > #site-navigation.main-navigation > div, .site-header .kiss-header-bar .main-navigation > div, .site-header .kiss-header-bar > #site-navigation.main-navigation .primary-navigation { width: auto !important; max-width: 100% !important; display: flex; justify-content: center; margin: 0 !important; flex: 0 1 auto !important; } .site-header .kiss-header-bar .main-navigation ul:not(.sub-menu) { display: flex !important; flex-wrap: nowrap; align-items: center; gap: 14px; margin: 0 !important; padding: 0 !important; width: auto !important; float: none !important; list-style: none; } .site-header .kiss-header-bar .main-navigation ul:not(.sub-menu) > li { float: none !important; margin: 0 !important; padding: 0; list-style: none; white-space: nowrap; } .site-header .kiss-header-bar .main-navigation li.menu-item-has-children { position: relative; } /* Kereső + Ajánlatkérő: jobb szélen, SOHA nem zsugorodik, mindig látszik */ .site-header .kiss-header-bar > .kiss-header-actions { order: 3; flex: 0 0 auto !important; display: flex !important; align-items: center; justify-content: flex-end; gap: 14px; margin: 0 !important; } .site-header .kiss-header-bar .kiss-header-actions .site-search { flex: 0 0 auto; /* NEM zsugorodik – nem nyomódik ikonná */ width: 200px; min-width: 170px; max-width: 220px; margin: 0 !important; position: static !important; top: auto !important; right: auto !important; align-self: center; } /* A Storefront kereső belső űrlapja/mezője alapból túl széles lehet és kitolja a jobb oldali blokkot a képernyőről – kényszerítjük 100%-ra. */ .site-header .kiss-header-bar .kiss-header-actions .site-search form, .site-header .kiss-header-bar .kiss-header-actions .site-search .widget, .site-header .kiss-header-bar .kiss-header-actions .site-search .widget_product_search, .site-header .kiss-header-bar .kiss-header-actions .site-search input[type="search"], .site-header .kiss-header-bar .kiss-header-actions .site-search input.search-field { width: 100% !important; max-width: 100% !important; min-width: 0 !important; box-sizing: border-box !important; } .site-header .kiss-header-bar .kiss-header-actions .site-header-cart, .site-header .kiss-header-bar .kiss-header-actions #site-header-cart { flex: 0 0 auto; margin: 0 !important; width: auto !important; position: static !important; top: auto !important; right: auto !important; align-self: center; display: flex; align-items: center; white-space: nowrap; } .site-header .kiss-header-bar .site-header-cart li { margin: 0; display: flex; align-items: center; } /* Asztali nézetben a mobil "menü" gomb és a lenyitó nyíl-gomb nem kell. */ .site-header .kiss-header-bar .menu-toggle, .site-header .dropdown-toggle, .kiss-header-bar .dropdown-toggle { display: none !important; } } /* ========================================================================== BIZTONSÁGI HÁLÓ: Storefront .storefront-primary-navigation burkoló A functions.php ELVILEG eltávolítja a Storefront navigáció-burkolóját, hogy a menü (#site-navigation.main-navigation) a .kiss-header-bar KÖZVETLEN gyereke legyen (így kapja meg az order:2 és a középre-igazítást). A Storefront burkoló valódi kimenete:
Ha ez a burkoló bármiért mégis a DOM-ban marad (pl. a remove_action nem érvényesül), a menü NEM közvetlen gyerek → az alap order-je 0 marad, a float:left + width:73.9% (Storefront susy-grid) érvényben marad, és a menü a logó ELÉ / RÁ csúszik. Ezért itt a burkolót UGYANÚGY kezeljük, mint magát a menüt: a logó UTÁN, középre, saját (nem 100%-os) szélességgel, float nélkül. Ha nincs burkoló, ezek a szabályok egyszerűen nem találnak – ártalmatlanok. ========================================================================== */ @media (min-width: 1080px) { .site-header .kiss-header-bar > .storefront-primary-navigation { order: 1; /* logó (0) UTÁN, akciók (3) ELŐTT */ flex: 0 1 auto !important; width: auto !important; max-width: 100% !important; min-width: 0 !important; margin: 0 auto !important; /* KÖZÉPRE a logó és a jobb blokk között */ clear: none !important; /* Storefront clear:both semlegesítése */ float: none !important; background: transparent !important; display: flex !important; justify-content: center; } /* A burkolón belüli Storefront .col-full ne szabja meg a szélességet (max-width:1160px), és ne központozzon saját margóval. */ .site-header .kiss-header-bar > .storefront-primary-navigation > .col-full { max-width: none !important; width: auto !important; margin: 0 !important; padding: 0 !important; display: flex !important; justify-content: center; } /* A burkolón belüli menü ne legyen 100% széles és ne float-oljon (Storefront susy span 9/12 → float:left; width:73.9%), csak a saját tartalma. */ .site-header .kiss-header-bar .storefront-primary-navigation .main-navigation, .site-header .kiss-header-bar .storefront-primary-navigation #site-navigation.main-navigation { width: auto !important; max-width: 100% !important; min-width: 0 !important; margin: 0 !important; clear: none !important; float: none !important; background: transparent !important; display: flex !important; justify-content: center; } } /* ========================================================================== RESZPONZÍV SZŰKÍTÉS (asztali sáv, 1080px felett) Ahogy szűkül a hely, csökkennek a közök, a menü betűmérete, a kereső és a logó – hogy a menü + kereső + Ajánlatkérő egy sorban maradjon. 1080px ALATT hamburger menü van (lásd külön blokk lentebb). ========================================================================== */ /* A --kiss-nav-scale-t a header-fit.js állítja be, folytonosan, pontos méréssel (a menü tényleges és rendelkezésre álló szélessége alapján) – ez garantálja, hogy a menü SOHA ne csússzon rá a keresőre/Ajánlatkérőre, függetlenül a menüpontok számától vagy a szöveg hosszától. A lenti, töréspontos font-size/gap értékek csak egy "durva", JS NÉLKÜLI tartóháló – a JS ezekre a kiinduló értékekre szoroz rá egy pontos skálázó tényezőt (var(--kiss-nav-scale), alapból 1, ha a JS nem futott le). */ @media (min-width: 1080px) { .site-header .kiss-header-bar .main-navigation ul li a { font-size: calc(1em * var(--kiss-nav-scale, 1)); } } @media (min-width: 1080px) and (max-width: 1400px) { .site-header .kiss-header-bar { gap: 12px; padding-left: clamp(12px, 1.6vw, 22px) !important; padding-right: clamp(12px, 1.6vw, 22px) !important; } .site-header .kiss-header-bar .main-navigation ul:not(.sub-menu) { gap: 10px; } .site-header .kiss-header-bar .main-navigation ul li a { font-size: calc(14px * var(--kiss-nav-scale, 1)); } .site-header .kiss-header-bar .kiss-header-actions { gap: 10px; } .site-header .kiss-header-bar .kiss-header-actions .site-search { width: 170px; min-width: 150px; max-width: 180px; } .site-header .custom-logo { max-height: 62px !important; } } @media (min-width: 1080px) and (max-width: 1250px) { .site-header .kiss-header-bar { gap: 9px; } .site-header .kiss-header-bar .main-navigation ul:not(.sub-menu) { gap: 8px; } .site-header .kiss-header-bar .main-navigation ul li a { font-size: calc(13px * var(--kiss-nav-scale, 1)); } .site-header .kiss-header-bar .kiss-header-actions { gap: 8px; } .site-header .kiss-header-bar .kiss-header-actions .site-search { width: 140px; min-width: 120px; max-width: 150px; } .site-header .custom-logo { max-height: 54px !important; } } @media (min-width: 1080px) and (max-width: 1160px) { .site-header .kiss-header-bar { gap: 6px; } .site-header .kiss-header-bar .main-navigation ul:not(.sub-menu) { gap: 3px; } .site-header .kiss-header-bar .main-navigation ul li a { font-size: calc(11.5px * var(--kiss-nav-scale, 1)); padding-left: 5px !important; padding-right: 5px !important; } .site-header .kiss-header-bar .kiss-header-actions { gap: 6px; } .site-header .kiss-header-bar .kiss-header-actions .site-search { width: 95px; min-width: 85px; max-width: 105px; } .site-header .custom-logo { max-height: 44px !important; } } /* ========================================================================== HAMBURGER MENÜ 1080px ALATT A logó, a jobb oldali elemek (kereső + Ajánlatkérő) és a hamburger-gomb egy statikus sorban; a menüpontok koppintásra nyílnak (Storefront .toggled). A flex-wrap biztosítja, hogy az elemek SOHA ne fedjék egymást – ha nincs hely, tördel, nem csúszik egymásra. ========================================================================== */ @media (max-width: 1079.98px) { .site-header { position: static !important; top: auto !important; } .site-header .kiss-header-bar { display: flex !important; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 12px; max-width: none !important; margin: 0 !important; padding: 8px clamp(14px, 3vw, 28px) !important; } /* Logó balra – itt sem zsugorodik */ .site-header .kiss-header-bar > .site-branding { order: 1; flex: 0 0 auto; flex-shrink: 0; margin: 0 !important; padding: 0 !important; } .site-header .custom-logo { max-height: 52px !important; width: auto !important; height: auto !important; flex-shrink: 0; } /* Kereső + Ajánlatkérő a jobb oldalon, a hamburger elé */ .site-header .kiss-header-bar > .kiss-header-actions { order: 2; flex: 0 0 auto; display: flex !important; align-items: center; gap: 10px; margin-left: auto !important; } .site-header .kiss-header-bar .kiss-header-actions .site-search { width: 150px; min-width: 120px; max-width: 180px; margin: 0 !important; position: static !important; top: auto !important; right: auto !important; } .site-header .kiss-header-bar .kiss-header-actions .site-search form, .site-header .kiss-header-bar .kiss-header-actions .site-search .widget, .site-header .kiss-header-bar .kiss-header-actions .site-search input[type="search"], .site-header .kiss-header-bar .kiss-header-actions .site-search input.search-field { width: 100% !important; max-width: 100% !important; min-width: 0 !important; box-sizing: border-box !important; } .site-header .kiss-header-bar .kiss-header-actions .site-header-cart { position: static !important; margin: 0 !important; white-space: nowrap; } /* A menü (nav) a hamburger-gombbal a jobb szélen */ .site-header .kiss-header-bar > .main-navigation { order: 3; flex: 0 0 auto; width: auto !important; margin: 0 !important; background: transparent !important; } /* Hamburger gomb LÁTSZIK, a vízszintes menü rejtve amíg nincs lenyitva */ .site-header .main-navigation .menu-toggle, .main-navigation .menu-toggle { display: block !important; } .site-header .main-navigation > div > ul, .site-header .main-navigation .primary-navigation > ul, .site-header .main-navigation ul.nav-menu, .site-header .main-navigation ul#primary-menu, .site-header .main-navigation ul.menu { display: none !important; } /* Lenyitva: teljes szélességű, függőleges lista a fejléc alatt */ .site-header .main-navigation.toggled > div > ul, .site-header .main-navigation.toggled .primary-navigation > ul, .site-header .main-navigation.toggled ul.nav-menu, .site-header .main-navigation.toggled ul#primary-menu, .site-header .main-navigation.toggled ul.menu { display: block !important; order: 4; flex-basis: 100%; width: 100%; margin-top: 8px; } .site-header .main-navigation.toggled ul li { float: none !important; width: 100%; white-space: normal; } .site-header .main-navigation.toggled ul li a { display: block; padding: 10px 4px; border-bottom: 1px solid var(--mist); } } /* Főmenü: sötét szöveg, narancs aláhúzás hoverre */ .main-navigation ul li a { color: var(--ink); font-weight: 500; position: relative; } .main-navigation ul li a:hover { color: var(--navy); } .main-navigation ul li a::after { content: ''; position: absolute; left: 0; bottom: 0; height: 2px; width: 0; background: var(--orange); transition: width .15s ease; } .main-navigation ul li a:hover::after { width: 100%; } /* ---- Főmenü lenyíló almenü (pl. "Termékek" → termékkategóriák) ---- A "Termékek" pont alá a functions.php automatikusan beszúrja a termékkategóriákat. A Storefront a lenyílót hoverre már megjeleníti; itt csak márkás megjelenést adunk neki (fehér doboz, finom árnyék), plusz egy lefelé mutató jelzőt (caret) a szó JOBB oldalára. FONTOS: a .main-navigation ebben az elrendezésben NEM a .site-header alatt van (külön, teljes szélességű sáv), ezért a szelektorok itt .site-header előtag NÉLKÜL futnak. A megfelelő fajsúlyt (specificity) az extra .menu-item-has-children osztály adja meg. */ .main-navigation ul li.menu-item-has-children > a { padding-right: 18px; } .main-navigation ul li.menu-item-has-children > a::before { content: ''; position: absolute; right: 2px; top: 50%; width: 6px; height: 6px; border-right: 2px solid currentColor; border-bottom: 2px solid currentColor; transform: translate(0, -70%) rotate(45deg); opacity: .6; } /* A Storefront a gyerekes menüpontokra (pl. "Termékek") beépített lenyíló nyilat tesz ::after-rel, ami nagyobb fajsúlyú, mint a saját aláhúzásunk, ezért az a szó ALÁ került. Itt felülírjuk: a gyerekes pont is a megszokott narancs aláhúzást kapja (a lenyíló jelzőt a fenti ::before caret adja a szó MELLETT). */ .main-navigation ul li.menu-item-has-children > a::after { content: ''; position: absolute; left: 0; right: auto; top: auto; bottom: 0; width: 0; height: 2px; background: var(--orange); border: 0 !important; transform: none; font-size: 0; line-height: 0; transition: width .15s ease; } .main-navigation ul li.menu-item-has-children > a:hover::after { width: 100%; } /* A Storefront JS a menu-item-has-children pontokhoz egy mobil "lenyitó" gombot (.dropdown-toggle) fűz. Asztali nézetben erre nincs szükség (ott hoverre nyílik a menü), és rossz helyre – a menü alá – kerül, ezért asztali méret felett elrejtjük. Mobilon marad, hogy koppintásra is nyitható legyen. */ @media (min-width: 1080px) { .main-navigation .dropdown-toggle { display: none !important; } } .main-navigation ul li.menu-item-has-children ul.sub-menu { background: var(--white); border: 1px solid var(--mist); border-radius: 10px; box-shadow: 0 12px 28px rgba(3, 73, 144, .12); padding: 8px 0; min-width: 220px; z-index: 1000; } .main-navigation ul li.menu-item-has-children ul.sub-menu li { margin: 0; } .main-navigation ul li.menu-item-has-children ul.sub-menu li a { padding: 9px 18px; color: var(--ink); font-weight: 500; white-space: nowrap; } .main-navigation ul li.menu-item-has-children ul.sub-menu li a:hover { color: var(--navy); background: var(--paper); } /* Az aláhúzás-animáció csak a főszinten kell, a lenyílóban ne */ .main-navigation ul li.menu-item-has-children ul.sub-menu li a::after { display: none; } /* Kereső mint "pill" (lekerekített), balról hely az ikonnak (ne fedje a szöveget). Az ikont a fájl alján lévő ::before szabály rajzolja ki (lásd "Kereső: a Storefront alap gombját/ikonját elrejtjük..." blokk lejjebb). Itt csak a natív böngésző-ikonokat/gombokat tiltjuk le, hogy ne jelenjen meg duplán a sajátunk mellett (ez okozta a duplázódó nagyítót). */ .site-header .site-search .widget_product_search input[type="search"], .site-header .widget_product_search input[type="search"], .site-header .search-field { background-color: var(--white); background-image: none !important; /* a WooCommerce/Storefront saját nagyító-ikonja itt jött rá a miénkre */ color: var(--ink); border: 1px solid var(--mist); border-radius: 20px; padding: 9px 16px 9px 42px; line-height: 1.2; -webkit-appearance: none; -moz-appearance: none; appearance: none; } .site-header .search-field::-webkit-search-decoration, .site-header .search-field::-webkit-search-cancel-button, .site-header .search-field::-webkit-search-results-button, .site-header .search-field::-webkit-search-results-decoration { display: none; } /* Kosár: letisztult, jobbra igazított – ikon + narancs darabszám, keret nélkül. Ajánlatkérő oldalon a "0,00 Ft" összeg nem releváns, ezért elrejtjük. A teljes "Ajánlatkérő" gombos verzió a Request-a-Quote fázisban jön. */ .site-header-cart { text-align: right; } .site-header-cart .cart-contents { display: inline-flex; align-items: center; gap: 12px; width: auto; border: none; background: transparent; padding: 6px 8px; color: var(--navy); font-weight: 600; font-size: 13.5px; } .site-header-cart .cart-contents:hover { color: var(--orange); background: transparent; } /* Az összeg (0,00 Ft) elrejtése – ajánlatkérőnél nincs értelme */ .site-header-cart .amount { display: none; } /* Darabszám: narancs buborék */ .site-header-cart .count, .site-header-cart .cart-contents-count { background: var(--orange); color: #fff; font-weight: 700; border-radius: 999px; padding: 1px 7px; font-size: 11px; } /* ---- Gombok (Storefront .button + WooCommerce gombok) ---- */ .button, button, input[type="submit"], .woocommerce #respond input#submit, .woocommerce a.button, .woocommerce button.button, .woocommerce input.button, .woocommerce a.button.alt, .woocommerce button.button.alt { background-color: var(--orange); color: #fff; border-radius: var(--radius); font-family: var(--font-body); font-weight: 600; } .button:hover, button:hover, input[type="submit"]:hover, .woocommerce a.button:hover, .woocommerce button.button:hover, .woocommerce input.button:hover, .woocommerce a.button.alt:hover, .woocommerce button.button.alt:hover { background-color: var(--orange-dark); color: #fff; } /* ---- Szögletes sarkok (2px), a demó karaktere ---- */ .button, input, select, textarea, .woocommerce ul.products li.product, .woocommerce div.product .woocommerce-tabs ul.tabs li { border-radius: var(--radius); } /* ---- Ár kiemelése ---- */ .woocommerce ul.products li.product .price, .woocommerce div.product p.price { color: var(--navy); font-weight: 600; } /* ---- Lábléc (demó: navy-dark, monospace fejlécek, oszlopos) ---- */ .site-footer { background-color: var(--navy-dark); color: #A9BDD0; padding: 54px 0 28px; } .site-footer a { color: #A9BDD0; } .site-footer a:hover { color: #fff; } /* Widget-oszlop fejlécek: monospace, nagybetűs, fehér */ .site-footer .widget-title, .site-footer h1, .site-footer h2, .site-footer h3, .site-footer h4 { color: #fff; font-family: var(--font-mono); font-size: 13px; letter-spacing: .05em; text-transform: uppercase; margin-bottom: 16px; } .site-footer .widget li, .site-footer .widget p { font-size: 13.5px; margin-bottom: 9px; } /* Kredit/alsó sáv */ .site-footer .site-info { border-top: 1px solid #233E58; padding-top: 20px; margin-top: 30px; font-size: 12px; color: #7E93A8; } /* ========================================================================== Front page – full-bleed a Storefront .col-full konténeréből kitörve A színes sávok (hero, trust, CTA) teljes szélességűek, a .wrap tartalom viszont középen, 1180px-en marad. ========================================================================== */ /* A 100vw-s teljes szélességű sávok vízszintes túlcsordulását itt fogjuk el, hogy a lap (és a fix fejléc) soha ne legyen szélesebb a képernyőnél (ez tolta korábban az ajánlatkérőt a képernyőn kívülre). A fix fejléc ettől nem romlik el, mert az nem sticky. */ html, body { overflow-x: hidden; max-width: 100%; } .kiss-front-page { width: 100vw; margin-left: calc(50% - 50vw); margin-right: calc(50% - 50vw); overflow-x: hidden; } /* ========================================================================== Hero címsor javítás A generikus "h1..h6 = navy" szabály a navy hátterű heron láthatatlanná tette a fehér szöveget. A heron a cím fehér, a kiemelés (em) narancs. ========================================================================== */ .kiss-front-page .hero h1 { color: #fff; } .kiss-front-page .hero h1 em { color: var(--orange); font-style: normal; } .kiss-front-page .hero .eyebrow { color: #9FC0DD; } .kiss-front-page .hero p { color: #CBDAE8; } /* ========================================================================== Teljes szélességű tartalom (a sidebar mindenhol eltávolítva) A demó egyetlen oldalon sem használ blog-sidebart. ========================================================================== */ .content-area { width: 100%; float: none; margin-right: 0; } #secondary { display: none; } /* Hír-kártyák (a főoldalon most valódi bejegyzésekre linkelnek) */ .news-card { display: block; color: inherit; text-decoration: none; transition: transform .15s ease; } .news-card:hover { transform: translateY(-3px); } .news-card:hover h3 { color: var(--orange); } .news-card .news-art img { display: block; width: 100%; height: 160px; object-fit: cover; } .news-empty { color: var(--ink-soft); font-size: 14px; } /* ========================================================================== Lábléc link-színek – minden oszlop olvasható legyen (nem csak az első) (#colophon ID-vel, hogy a Storefront ID-szelektorát is felülírja) ========================================================================== */ #colophon.site-footer a, #colophon .footer-grid a, #colophon .footer-bottom a { color: #A9BDD0; } #colophon.site-footer a:hover, #colophon .footer-grid a:hover, #colophon .footer-bottom a:hover { color: #fff; } #colophon .footer-bottom { color: #7E93A8; } /* ========================================================================== Kereső: a Storefront/WooCommerce saját gombját/ikonját elrejtjük, és egy saját, pontosan függőlegesen igazított nagyító ikont teszünk a pill elejére. A duplázódó nagyítót az okozta, hogy a Storefront saját gombja/ikonja (SVG) a mi ::before ikonunk MELLETT is látszott – ezért itt minden natív ikon-hordozó elemet (gomb, SVG, kép) !important-tel tiltunk le, hogy a WooCommerce/Storefront saját, később betöltődő stílusa se tudja felülírni. ========================================================================== */ .site-header .widget_product_search button, .site-header .woocommerce-product-search button, .site-header .site-search button, .site-header .widget_product_search svg, .site-header .woocommerce-product-search svg, .site-header .site-search svg, .site-header .widget_product_search img, .site-header .woocommerce-product-search img, .site-header .site-search img, .site-header .site-search .icon, .site-header .site-search .dashicons { display: none !important; } .site-header .widget_product_search, .site-header .woocommerce-product-search, .site-header .site-search form { position: relative; } .site-header .woocommerce-product-search::before, .site-header .site-search form::before { content: ""; position: absolute; left: 15px; top: 50%; transform: translateY(-50%); width: 16px; height: 16px; background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%235B6469' stroke-width='2' stroke-linecap='round'%3E%3Ccircle cx='11' cy='11' r='7'/%3E%3Cline x1='21' y1='21' x2='16.5' y2='16.5'/%3E%3C/svg%3E") no-repeat center; background-size: contain; pointer-events: none; z-index: 2; } /* Hír-oldalak: a szerző elrejtése (ki írta) */ .entry-meta .byline, .entry-meta .author, .entry-meta .post-author, .byline, .post-author { display: none; } /* ========================================================================== MENÜ A WEBOLDAL PONTOS KÖZEPÉRE – ABSZOLÚT IGAZÍTÁS (asztali, 1080px felett) -------------------------------------------------------------------------- Miért abszolút? A korábbi flex-alapú (order + margin:0 auto) középre igazítás érzékeny volt a DOM-szerkezetre: ha a Storefront .storefront-primary-navigation burkoló bent maradt, a menü a logó ELÉ csúszott. Az abszolút igazítás ezt VÉGLEG kiküszöböli: a menüt kivesszük a flex-sorból, és a fejléc (= oldal) VÍZSZINTES KÖZEPÉRE tesszük (left:50% + translateX(-50%)). Így: - a menü mindig az OLDAL KÖZEPÉN van, a logó szélességétől függetlenül, - fizikailag KÉPTELEN a logóra csúszni (külön rétegen, saját pozícióval), - a logó balra, a kereső+Ajánlatkérő jobbra marad a flex-sorban. Kezeli a közvetlen menüt (#site-navigation.main-navigation) ÉS a Storefront burkolót (.storefront-primary-navigation > .col-full > nav) is – bármelyik a DOM-ban van, mindkettő ugyanoda, középre kerül. ========================================================================== */ @media (min-width: 1080px) { /* A fejléc-sáv legyen a pozicionálás referenciája */ .site-header .kiss-header-bar { position: relative; } /* !!! A VALÓDI HIBA GYÖKERE !!! A Storefront storefront_primary_navigation() a főmenü mellett egy MÁSODIK wp_nav_menu-t is kiír a 'handheld' menühelyre. Mivel oda nincs menü rendelve, az a wp_page_menu fallbackre esik, ami egy
DUPLIKÁTUMOT tesz a