/* Theme Name: Seal Sk Theme URI: https://sealsk.sk Author: Seal Sk Description: Bloková téma pre Seal Sk – lisovanie gumy na mieru. Odvážny dizajn: veľká typografia Archivo, plné modré bloky (#2EA1DA), výrazný rytmus. Zameraná na dopyty, plne editovateľná cez Site Editor. Requires at least: 6.6 Tested up to: 6.7 Requires PHP: 7.4 Version: 2.0.4 License: GNU General Public License v2 or later License URI: http://www.gnu.org/licenses/gpl-2.0.html Text Domain: sealsk Tags: business, custom-colors, custom-menu, block-styles, full-site-editing, blog */ /* ------------------------------------------------------------------ Fonty (Google Fonts – Archivo, IBM Plex Sans, IBM Plex Mono), načítané tu namiesto enqueue, aby boli k dispozícii aj v editore. ------------------------------------------------------------------ */ @import url('https://fonts.googleapis.com/css2?family=Archivo:wght@400;500;600;700;800;900&family=IBM+Plex+Sans:wght@400;500;600;700&family=IBM+Plex+Mono:wght@400;500&display=swap'); /* ------------------------------------------------------------------ Doplnkové CSS pre prvky, ktoré theme.json/bloky nevedia vyjadriť. Triedy sa priraďujú blokom cez „Rozšírené → Doplnkové CSS triedy“. ------------------------------------------------------------------ */ /* Mono technický štítok (napr. "Domov / Kontakt", "LISOVANIE GUMY · OD 1997") */ .sk-eyebrow { font-family: var(--wp--preset--font-family--mono); font-size: 0.8125rem !important; color: var(--wp--preset--color--muted-2); letter-spacing: 0.01em; margin-bottom: 0.6em; } /* Pilulkové obrysové tlačidlo (druhá CTA vedľa hlavnej) */ .is-style-outline .wp-block-button__link { background: transparent !important; color: var(--wp--preset--color--ink) !important; border: 2px solid var(--wp--preset--color--ink); } .is-style-outline .wp-block-button__link:hover { background: var(--wp--preset--color--ink) !important; color: #fff !important; } /* Biele obrysové tlačidlo na tmavom/modrom pozadí */ .is-style-outline-light .wp-block-button__link { background: transparent !important; color: #fff !important; border: 2px solid #fff; } .is-style-outline-light .wp-block-button__link:hover { background: #fff !important; color: var(--wp--preset--color--ink) !important; } /* Biele plné tlačidlo na modrom bloku */ .is-style-on-blue .wp-block-button__link { background: #fff !important; color: var(--wp--preset--color--blue-d) !important; } .is-style-on-blue .wp-block-button__link:hover { background: #eef5fa !important; } /* Číslované kroky procesu – veľké modré číslo */ .sk-step-num { font-family: var(--wp--preset--font-family--display); font-weight: 800; color: var(--wp--preset--color--blue); letter-spacing: -0.03em; line-height: 1; } /* Karta produktu / materiálu – jemný hover */ .sk-card-hover { transition: transform .15s, box-shadow .15s; } .sk-card-hover:hover { transform: translateY(-2px); box-shadow: 0 6px 20px rgba(16,20,24,.08); } /* Pilulka s teplotným rozsahom (materiály) */ .sk-pill { font-family: var(--wp--preset--font-family--mono); display: inline-block; background: var(--wp--preset--color--blue-tint); color: var(--wp--preset--color--blue-d); padding: 8px 16px; border-radius: 999px; white-space: nowrap; font-size: 0.94rem; } /* Jazykový prepínač / SK odznak v hlavičke */ .sk-lang { display: inline-flex; align-items: center; gap: 8px; padding: 9px 15px; border: 2px solid var(--wp--preset--color--ink); border-radius: 999px; font-size: 0.8125rem; font-weight: 700; } .sk-lang .sk-dot { width: 16px; height: 16px; border-radius: 50%; border: 2px solid var(--wp--preset--color--ink); display: inline-block; } /* Sticky hlavička. POZOR: zámerne tu NIE JE backdrop-filter. Tá vlastnosť vytvára „containing block“ pre potomkov s position:fixed, čo spôsobí, že sa prekryvné (hamburger) menu neroztiahne cez celú obrazovku, ale ostane uväznené vnútri hlavičky. Namiesto rozostrenia použijeme plnú farbu. */ .wp-site-blocks > header.wp-block-template-part { position: sticky; top: 0; z-index: 100; background: var(--wp--preset--color--paper); } /* Ukotvenie sekcií pod sticky hlavičku */ html { scroll-behavior: smooth; } :where(.wp-site-blocks) [id] { scroll-margin-top: 90px; } @media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } } /* Formulárové polia dopytu (shortcode) zdedia zaoblený surface štýl – viď dopyt-form.php */ /* Mobilné doladenie */ @media (max-width: 781px) { .sk-hide-mobile { display: none !important; } } /* Logo: na menších displejoch zmenšíme, aby sa hlavička zmestila do jedného riadka aj s hamburgerom a tlačidlom E-shop. */ @media (max-width: 600px) { .wp-block-site-logo img { width: 118px !important; height: auto !important; } .wp-site-blocks > header .wp-block-buttons .wp-block-button__link { padding-left: 16px !important; padding-right: 16px !important; font-size: 0.8rem !important; } } @media (max-width: 400px) { .wp-block-site-logo img { width: 100px !important; } } /* ------------------------------------------------------------------ Responzivita: pevné 52px/36px odsadenie na zaoblených kartách (dopyt, eshop-modrý blok, CTA sekcie, kontaktný formulár) je navrhnuté pre desktop. Na menších obrazovkách ho zmenšíme, aby obsah nebol zbytočne stlačený. Selektor cieli priamo na inline štýl, takže funguje na všetkých patternoch bez úpravy každého súboru zvlášť. ------------------------------------------------------------------ */ @media (max-width: 782px) { [style*="padding-top:52px"][style*="padding-right:52px"] { padding: 28px !important; } [style*="padding-top:36px"][style*="padding-right:36px"] { padding: 24px !important; } /* Dekoratívna mriežka štvorčekov v eshop bloku – 3 stĺpce sú na malej šírke zbytočne tesné */ [style*="grid-template-columns:repeat(3,1fr)"] { grid-template-columns: repeat(2, 1fr) !important; } /* Menšie medzery medzi stĺpcami na mobile, aby sa obsah nezrážal */ .wp-block-columns { row-gap: 28px !important; } /* Stĺpce vždy na celú šírku pod sebou (poistka nad rámec jadra WP) */ .wp-block-columns > .wp-block-column { flex-basis: 100% !important; width: 100% !important; } /* Pevné "max-width: Nch" na odsekoch (myslené len pre desktop čitateľnosť) spôsobuje, že text zostáva umelo úzky aj keď stĺpec zaberie celú šírku – na mobile ho preto vypneme. */ [style*="max-width:44ch"], [style*="max-width:52ch"], [style*="max-width:60ch"] { max-width: 100% !important; } } @media (max-width: 480px) { /* Na veľmi úzkych displejoch zmenši odsadenie kariet ešte viac */ [style*="padding-top:52px"][style*="padding-right:52px"], [style*="padding-top:36px"][style*="padding-right:36px"] { padding: 22px !important; } } /* Poistka proti horizontálnemu pretečeniu na mobile */ html, body { overflow-x: hidden; max-width: 100%; } img, svg, iframe { max-width: 100%; height: auto; } /* ------------------------------------------------------------------ Vzhľad hamburger tlačidla a otvoreného mobilného menu – aby ladili s zaoblenou estetikou zvyšku webu (pilulkové tlačidlá, orámované prvky), nie s holou neštýlovanou ikonou. DÔLEŽITÉ: „display“ tu nenastavujeme globálne. Jadro WP tieto tlačidlá na desktope skrýva a keby dostali display:flex natvrdo, objavili by sa aj na veľkých obrazovkách. Zobrazenie preto riešime len v mediálnych dotazoch nižšie. ------------------------------------------------------------------ */ .wp-block-navigation__responsive-container-open, .wp-block-navigation__responsive-container-close { align-items: center; justify-content: center; width: 44px; height: 44px; border: 2px solid var(--wp--preset--color--ink) !important; border-radius: 999px !important; background: transparent !important; color: var(--wp--preset--color--ink) !important; padding: 0 !important; } .wp-block-navigation__responsive-container-open svg, .wp-block-navigation__responsive-container-close svg { width: 20px; height: 20px; } /* Hamburger zobrazujeme na mobile aj tablete. POZOR: jadro WP prepína prekryvné menu až pri 600 px. Bez skrytia riadkového menu by sa v pásme 600–782 px zobrazoval hamburger AJ rozbalená navigácia naraz – preto tu riadkovú verziu skrývame. */ @media (max-width: 782px) { .wp-block-navigation__responsive-container-open { display: flex !important; } .wp-block-navigation__responsive-container:not(.is-menu-open) { display: none !important; } } /* Na desktope musia obe tlačidlá ostať skryté. */ @media (min-width: 783px) { .wp-block-navigation__responsive-container-open, .wp-block-navigation__responsive-container-close { display: none !important; } } /* ------------------------------------------------------------------ Otvorené mobilné menu – prekryv cez celú obrazovku. Nastavujeme explicitne (nespoliehame sa na jadro WP), pretože: a) prekryv musí byť NAD obsahom stránky -> veľmi vysoký z-index, b) zoznam