/* ========================================================================= Globefiltech – UI refinements ------------------------------------------------------------------------- Doplnkové štýly a opravy nad rámec dizajn systému (design.css). Načítava sa po design.css cez inc/19-refinements.php. Poznámky k Elementoru: - Sekcie ktoré cielia .elementor-element-* používajú reálne data-id z Elementor šablón (header e3486a0 / 5b0a64e, mobile nav 4332ae3). - Sekcie ktoré cielia .gft-* triedy očakávajú, že daná trieda bude v Elementore priradená na príslušnú sekciu (CSS Classes pole). ========================================================================= */ /* ========================================================================= 1+2. HEADER – sticky (podstránky) / overlay (homepage) ------------------------------------------------------------------------- Hlavička je Elementor Theme Builder šablóna (id 585) vykreslená vo

– ten je priamym potomkom . Position preto patrí na TENTO wrapper, nie na vnútorný container (e3486a0 / 5b0a64e): jeho rodič je len tak vysoký ako samotný bar, takže position:sticky na ňom nikdy nezaberie. DÔLEŽITÉ (Elementor): na oboch header containeroch (e3486a0 aj 5b0a64e) VYPNI Motion Effects → Sticky. Sticky/fixed aj zmenu pozadia rieši toto CSS + refinements.js (pridáva na triedu .gft-scrolled). ========================================================================= */ /* Off-canvas mobilné menu (.gf-mmenu__panel + .gf-mmenu__backdrop) je teraz JS-kom presunuté priamo do (mimo hlavičky) – viď assets/mobile-menu.js. Tým sa panel polohuje voči viewportu aj keď má sticky hlavička backdrop-filter (ktorý by inak z hlavičky urobil containing block pre position:fixed potomkov a menu by sa po scrolle rozbilo). overflow-x: clip na ostáva ako poistka proti horizontálnemu scrollu od panela odsunutého mimo obrazovky. NA ROZDIEL od `hidden` clip NEvytvára scroll kontajner, takže NErozbíja position:sticky a sklo môže ostať priamo na

(kde reálne funguje). */ html { overflow-x: clip; } header.elementor-location-header { z-index: 1000; border-bottom: 1px solid transparent; transition: background 0.35s ease, box-shadow 0.35s ease, backdrop-filter 0.35s ease, border-color 0.35s ease; } /* --- Podstránky: sticky bar. Menu má tmavý text (#0F1A14), preto sa po scrolle podloží svetlým sklom, nie tmavým. --- */ body:not(.home) header.elementor-location-header { position: sticky; top: 0; } body:not(.home).admin-bar header.elementor-location-header { top: 32px; } body:not(.home).gft-scrolled header.elementor-location-header { background: linear-gradient(180deg, rgba(255, 255, 255, 0.72) 0%, rgba(255, 255, 255, 0.55) 100%); backdrop-filter: blur(28px) saturate(190%) brightness(1.04); -webkit-backdrop-filter: blur(28px) saturate(190%) brightness(1.04); border-bottom-color: rgba(13, 20, 16, 0.06); box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.75), 0 10px 34px rgba(13, 20, 16, 0.12); } /* --- Homepage: transparentný overlay NAD hero bannerom (banner presvitá), po scrolle tmavé sklo. Fixed = neuberá miesto, takže prekrýva banner. --- */ body.home header.elementor-location-header { position: fixed; top: 0; left: 0; right: 0; } body.home.admin-bar header.elementor-location-header { top: 32px; } body.home.gft-scrolled header.elementor-location-header { background: linear-gradient(180deg, rgba(18, 28, 20, 0.58) 0%, rgba(10, 18, 10, 0.48) 100%); backdrop-filter: blur(28px) saturate(170%); -webkit-backdrop-filter: blur(28px) saturate(170%); border-bottom-color: rgba(255, 255, 255, 0.12); box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.12), 0 10px 34px rgba(0, 0, 0, 0.38); } /* --- Kompaktnejší bar v sticky stave (po scrolle sa zmenší) --- */ .gft-header-home, .gft-header-sub { transition: min-height 0.3s ease; } .elementor-location-header .logomain img { transition: max-height 0.3s ease; } /* Tlačidlá v hlavičke – plynulý prechod (prepisuje !important transition z design.css, aby sa animoval aj padding a font-size). */ .elementor-location-header .elementor-button { transition: background-color 0.25s ease, color 0.25s ease, transform 0.25s ease, border-color 0.25s ease, padding 0.3s ease, font-size 0.3s ease !important; } body.gft-scrolled .gft-header-home, body.gft-scrolled .gft-header-sub { --min-height: 46px; } body.gft-scrolled .elementor-location-header .logomain img { max-height: 32px !important; width: auto !important; } body.gft-scrolled .elementor-location-header .elementor-button { padding: 8px 20px !important; font-size: 13px !important; } /* ========================================================================= 5. CERTIFIKAČNÝ PRUH – kontrast fix Pridaj CSS triedu "gft-cert-bar" v Elementore na sekciu s certifikátmi. ========================================================================= */ .gft-cert-bar { background: rgba(0, 0, 0, 0.25) !important; border-top: 1px solid rgba(255, 255, 255, 0.08) !important; padding-top: 20px !important; padding-bottom: 20px !important; } /* Hlavné cert štítky (EN 1822, ISO 16890...) */ .gft-cert-bar .elementor-heading-title, .gft-cert-bar h3, .gft-cert-bar h4 { color: rgba(255, 255, 255, 0.95) !important; font-size: 14px !important; letter-spacing: 0.04em; } /* Sub-labely (.HEPA/ULPA, .AIR, .QMS...) */ .gft-cert-bar .elementor-widget-text-editor span, .gft-cert-bar small, .gft-cert-bar [class*="sub"] { color: #22c55e !important; font-size: 11px !important; letter-spacing: 0.08em; font-weight: 500; } /* ========================================================================= 6. BLOG LISTING – karty (PHP fix prázdnej stránky /blog/ sa rieši v Elementor archive šablóne – viď poznámky v inc/19-refinements.php.) ========================================================================= */ body.blog .elementor-loop-item, body.blog .elementor-post { border-radius: 12px; overflow: hidden; border: 1px solid rgba(0, 0, 0, 0.07); background: #fff; transition: box-shadow 0.25s ease, transform 0.25s ease; } body.blog .elementor-loop-item:hover, body.blog .elementor-post:hover { box-shadow: 0 8px 32px rgba(0, 0, 0, 0.10); transform: translateY(-3px); } /* ========================================================================= 7. BLOG DETAIL – čitateľnosť a štruktúra ========================================================================= */ body.single-post .page-content, body.single-post .entry-content, body.single-post .elementor-widget-theme-post-content .elementor-widget-container { max-width: 720px !important; margin-left: auto !important; margin-right: auto !important; } body.single-post .page-content p, body.single-post .entry-content p { font-size: 17px !important; line-height: 1.75 !important; color: #2d3530 !important; margin-bottom: 1.4em !important; } body.single-post .page-content h2, body.single-post .entry-content h2 { font-size: 28px !important; font-weight: 700 !important; color: #0d1f14 !important; margin-top: 2.5em !important; margin-bottom: 0.8em !important; padding-bottom: 0.4em; border-bottom: 2px solid #22c55e; } body.single-post .page-content h3, body.single-post .entry-content h3 { font-size: 21px !important; font-weight: 600 !important; color: #0d1f14 !important; margin-top: 2em !important; margin-bottom: 0.6em !important; } /* Blog H1 – zmenšiť a pridať vizuálne oddelenie */ body.single-post h1.entry-title, body.single-post .elementor-post h1, body.single-post h1 { font-size: 42px !important; line-height: 1.2 !important; font-weight: 800 !important; color: #0d1f14 !important; margin-bottom: 0.5em !important; max-width: 720px; margin-left: auto; margin-right: auto; } body .ainglepostdark h1 { color: #1A211D !important; } /* Meta info bar – dátum, kategória */ .elementor-post-info, .post-meta-bar { display: flex; gap: 20px; align-items: center; font-size: 13px; color: #6b7280; margin-bottom: 32px; max-width: 720px; margin-left: auto; margin-right: auto; } .elementor-post-info .elementor-icon-list-item { color: #6b7280 !important; font-size: 13px !important; } body.single-post .elementor-post-info .elementor-icon-list-icon svg, body.single-post .elementor-post-info .elementor-icon-list-icon i { color: #22c55e !important; } /* Obrázky v článku */ body.single-post .page-content img, body.single-post .entry-content img { border-radius: 10px; max-width: 100%; height: auto; display: block; margin: 2em auto; box-shadow: 0 4px 20px rgba(0, 0, 0, 0.10); } /* Bullet listy v článku */ body.single-post .page-content ul, body.single-post .entry-content ul { padding-left: 1.5em; margin-bottom: 1.4em; } body.single-post .page-content ul li, body.single-post .entry-content ul li { margin-bottom: 0.5em; line-height: 1.65; color: #2d3530; } body.single-post .page-content ul li::marker { color: #22c55e; } /* ========================================================================= 8. BLOG POST HERO BANNER Pridaj CSS triedu "gft-blog-hero" na hero sekciu v Single Post šablóne. ========================================================================= */ .gft-blog-hero { background: #0d1f14 !important; padding: 80px 0 60px !important; position: relative; overflow: hidden; } .gft-blog-hero::before { content: ''; position: absolute; inset: 0; background: url('/wp-content/themes/globefiltech/assets/pattern.svg') repeat; opacity: 0.04; pointer-events: none; } .gft-blog-hero h1 { color: #fff !important; font-size: 40px !important; line-height: 1.2 !important; max-width: 800px; } .gft-blog-hero .post-meta-bar, .gft-blog-hero .elementor-post-info { color: rgba(255, 255, 255, 0.65) !important; } .gft-blog-hero .elementor-post-info svg, .gft-blog-hero .elementor-post-info i { color: #22c55e !important; } /* ========================================================================= 9. PRODUKT DETAIL – vylepšenia (body.single-produkt) ========================================================================= */ body.single-produkt .elementor-nav-menu--main .current-menu-item > a, body.single-produkt .sidebar-menu .current-page > a, .product-sidebar .active-product { color: #22c55e !important; background: rgba(34, 197, 94, 0.08) !important; border-radius: 6px; } body.single-produkt .elementor-button { transition: background 0.2s ease, transform 0.15s ease, box-shadow 0.2s ease; } body.single-produkt .elementor-button:hover { transform: translateY(-2px) !important; box-shadow: 0 6px 20px rgba(34, 197, 94, 0.3) !important; } /* Produkt H1 – zmenšiť */ body.single-produkt h1 { font-size: 52px !important; line-height: 1.15 !important; } @media (max-width: 1024px) { body.single-produkt h1 { font-size: 38px !important; } } /* Breadcrumb – väčší a viditeľnejší */ .rank-math-breadcrumb, .yoast-breadcrumb, nav.breadcrumb { font-size: 13px !important; color: rgba(255, 255, 255, 0.75) !important; margin-bottom: 12px !important; } .elementor-widget-breadcrumbs a, .rank-math-breadcrumb a, .yoast-breadcrumb a { color: #22c55e !important; text-decoration: none; } .elementor-widget-breadcrumbs a:hover, .rank-math-breadcrumb a:hover { text-decoration: underline; } /* ========================================================================= 10. PRODUKT GRID – konzistentné karty ========================================================================= */ .elementor-loop-item .elementor-widget-image, .product-card .card-image, [class*="product"] .elementor-image-box-img { background: #f0f4f0 !important; border-radius: 10px 10px 0 0; overflow: hidden; display: flex; align-items: center; justify-content: center; min-height: 220px; padding: 20px; } .elementor-loop-item, .product-card { border-radius: 14px !important; overflow: hidden; border: 1px solid rgba(0, 0, 0, 0.07) !important; background: #fff !important; transition: box-shadow 0.25s ease, transform 0.25s ease !important; } .elementor-loop-item:hover, .product-card:hover { box-shadow: 0 10px 40px rgba(0, 0, 0, 0.12) !important; transform: translateY(-4px) !important; } /* Kategóriové dotky/labely – unify farby Vzduch = zelená, Kvapaliny = modrá, Prach = žltá, Systémy = šedá */ [class*="cat-vzduch"] .cat-dot, [class*="category-vzduch"]::before { background: #22c55e !important; } [class*="cat-kvapaliny"] .cat-dot, [class*="category-kvapaliny"]::before { background: #3b82f6 !important; } [class*="cat-prach"] .cat-dot, [class*="category-prach"]::before { background: #f59e0b !important; } [class*="cat-systemy"] .cat-dot, [class*="category-systemy"]::before { background: #6b7280 !important; } /* ========================================================================= 11. HERO PRODUKT KARTA – carousel / swiper pagination ========================================================================= */ .elementor-element .swiper-pagination-bullet { width: 28px !important; height: 3px !important; border-radius: 2px !important; background: rgba(255, 255, 255, 0.3) !important; opacity: 1 !important; margin: 0 4px !important; transition: background 0.25s ease, width 0.25s ease; } .elementor-element .swiper-pagination-bullet-active { background: #22c55e !important; width: 40px !important; } /* ========================================================================= 12. SLUŽBY – process kroky Pridaj CSS triedu "gft-process" na sekciu s krokmi 01-04. ========================================================================= */ .gft-process { position: relative; } .gft-process::before { content: ''; position: absolute; top: 20px; left: calc(12.5% + 20px); right: calc(12.5% + 20px); height: 2px; background: linear-gradient(90deg, #22c55e 0%, rgba(34, 197, 94, 0.2) 100%); z-index: 0; } .gft-process .elementor-column, .gft-process .e-con-inner { position: relative; z-index: 1; } .gft-process .elementor-heading-title[class*="0"], .gft-process [class*="step-number"] { font-size: 12px !important; font-weight: 700 !important; color: #22c55e !important; letter-spacing: 0.1em; display: block; margin-bottom: 8px; } /* ========================================================================= 13. O NÁS – info tabuľka kontrast Pridaj CSS triedu "gft-about-table" na danú sekciu. ========================================================================= */ .gft-about-table [class*="label"], .gft-about-table .meta-label, .gft-about-table td:first-child, .gft-about-table .elementor-icon-list-title { color: #6b7280 !important; font-size: 11px !important; font-weight: 600 !important; letter-spacing: 0.1em !important; text-transform: uppercase !important; } .gft-about-table [class*="value"], .gft-about-table .meta-value, .gft-about-table td:last-child { color: #0d1f14 !important; font-weight: 500 !important; font-size: 15px !important; } /* Produkt kategórie karty na O nás – hover efekt */ .gft-about-categories .elementor-widget-container, .gft-about-categories .elementor-loop-item { transition: box-shadow 0.2s ease, transform 0.2s ease; } .gft-about-categories .elementor-widget-container:hover, .gft-about-categories .elementor-loop-item:hover { box-shadow: 0 6px 24px rgba(34, 197, 94, 0.15) !important; transform: translateY(-3px); } /* ========================================================================= 14. KONTAKT – vylepšenia Kontakt karty: pridaj triedu "kontakt-karta" na stĺpce. Kontakt tabuľka: pridaj triedu "gft-contact-table" na tabuľku. ========================================================================= */ .kontakt-karta { transition: box-shadow 0.2s ease; } .kontakt-karta:hover, .kontakt-karta .elementor-widget-container:hover { box-shadow: 0 8px 30px rgba(0, 0, 0, 0.10) !important; } /* Kontakt tabuľka (IČO, DIČ...) – vizuálna separácia */ .gft-contact-table { border-collapse: collapse; width: 100%; } .gft-contact-table tr { border-bottom: 1px solid rgba(0, 0, 0, 0.07); } .gft-contact-table td:first-child { color: #6b7280; font-size: 11px; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; padding: 12px 0; width: 160px; } .gft-contact-table td:last-child { color: #0d1f14; font-weight: 500; padding: 12px 0; } /* Voliteľné: hover na konkrétnej kontakt stránke podľa page-id. Doplň reálne ID kontakt stránky a odkomentuj: body.page-id-XXX .elementor-widget-container:hover { box-shadow: 0 8px 30px rgba(0, 0, 0, 0.10) !important; } */ /* ========================================================================= 15. PAGE HERO – všetky podstránky ========================================================================= */ body:not(.home) .page-hero h1, body:not(.home) [class*="page-header"] h1 { font-size: 52px !important; font-weight: 800 !important; line-height: 1.15 !important; color: #fff !important; } body:not(.home):not(.single-post):not(.single-produkt) .elementor-section.page-hero, body:not(.home) .gft-page-hero { min-height: 280px !important; display: flex !important; align-items: center !important; } body:not(.home) .breadcrumbs-hero { font-size: 12px !important; color: rgba(255, 255, 255, 0.6) !important; margin-bottom: 16px; } body:not(.home) .breadcrumbs-hero a { color: #22c55e !important; } /* ========================================================================= 16. FOOTER – mikro-interakcie na odkazoch + copyright / „Made by Pixel" (žiadne zmeny marginov/rozostupov – tie ostávajú podľa Elementoru) ========================================================================= */ .elementor-location-footer a { transition: color 0.25s ease, opacity 0.25s ease; } /* Odkazy v stĺpcoch (icon-list): zelená podčiarka zľava doprava + jemný posun + zelený text. POZOR: Elementor dáva na .elementor-icon-list-text vlastný `transition: color 0.3s` so špecificitou (0,4,0) – preto MUSÍ byť náš transition !important, inak sa transform vôbec neanimuje a pôsobí to „neplynulo". Cielime cez triedy, nie cez element-id. */ .elementor-location-footer .elementor-icon-list-text { position: relative; display: inline-block; transition: color 0.3s ease, transform 0.4s cubic-bezier(0.22, 1, 0.36, 1) !important; } .elementor-location-footer .elementor-icon-list-text::after { content: ""; position: absolute; left: 0; bottom: -2px; width: 100%; height: 1.5px; border-radius: 2px; background: #2ecc71; box-shadow: 0 0 8px rgba(46, 204, 113, 0.55); transform: scaleX(0); transform-origin: left center; transition: transform 0.4s cubic-bezier(0.22, 1, 0.36, 1); } .elementor-location-footer .elementor-icon-list-item:hover .elementor-icon-list-text, .elementor-location-footer a:hover .elementor-icon-list-text { color: #2ecc71 !important; transform: translateX(6px); } .elementor-location-footer .elementor-icon-list-item:hover .elementor-icon-list-text::after, .elementor-location-footer a:hover .elementor-icon-list-text::after { transform: scaleX(1); } /* Copyright + „Made by Pixel" – cielené cez href atribút (žiadne element-id): svetlejší copyright text + biely „Pixel" odkaz so žiariacou zelenou podčiarkou a jemným zdvihom. */ .elementor-location-footer .elementor-widget-heading:has(a[href*="pixel"]) .elementor-heading-title { color: rgba(255, 255, 255, 0.8) !important; } .elementor-location-footer a[href*="pixel"] { color: #ffffff !important; font-weight: 700; text-decoration: none; position: relative; display: inline-block; transition: color 0.25s ease, transform 0.35s cubic-bezier(0.22, 1, 0.36, 1) !important; } .elementor-location-footer a[href*="pixel"]::after { content: ""; position: absolute; left: 0; right: 0; bottom: -3px; height: 2px; border-radius: 2px; background: linear-gradient(90deg, #2ecc71, #22c55e); box-shadow: 0 0 12px rgba(46, 204, 113, 0.85); transform: scaleX(0); transform-origin: right center; transition: transform 0.35s cubic-bezier(0.22, 1, 0.36, 1); } .elementor-location-footer a[href*="pixel"]:hover { color: #2ecc71 !important; transform: translateY(-2px) scale(1.05); } .elementor-location-footer a[href*="pixel"]:hover::after { transform: scaleX(1); transform-origin: left center; } /* ========================================================================= 17. GLOBÁLNE BUTTON HOVER EFEKTY ========================================================================= */ .elementor-button.elementor-button-link, a.elementor-button { transition: transform 0.18s ease, box-shadow 0.18s ease, background 0.18s ease !important; } a.elementor-button:hover, .elementor-button:hover { transform: translateY(-2px) !important; box-shadow: 0 6px 20px rgba(34, 197, 94, 0.35) !important; } /* Outline button */ .elementor-button--border-animation, [class*="btn-outline"] { border-color: rgba(255, 255, 255, 0.5) !important; transition: border-color 0.2s ease, background 0.2s ease, color 0.2s ease !important; } [class*="btn-outline"]:hover, .elementor-button--border-animation:hover { background: rgba(255, 255, 255, 0.08) !important; border-color: #fff !important; } /* ========================================================================= 18. RESPONZIVITA – kritické mobile fixy (Pozn.: zdrojový spec bol na tomto mieste skrátený – nižšie sú zahrnuté všetky pravidlá, ktoré boli k dispozícii.) ========================================================================= */ @media (max-width: 767px) { /* Homepage hero H1 */ body.home h1 { font-size: 48px !important; line-height: 1.1 !important; } /* Blog H1 */ body.single-post h1 { font-size: 30px !important; } /* Produkt detail H1 */ body.single-produkt h1 { font-size: 32px !important; } /* Subpage sticky header zmenšiť na mobile */ body:not(.home) .gft-header-sub { padding: 8px 16px !important; } /* Blog článok full width na mobile */ body.single-post .page-content, body.single-post .entry-content { max-width: 100% !important; padding: 0 20px !important; } /* Kontakt karty – stack na mobile */ body[class*="kontakt"] .elementor-col-33 { width: 100% !important; margin-bottom: 16px !important; } }