/* custom.css - serwis-laptopow-komputerow-lenovo.pl */ /* === Etap 7 (2026-09-05): pas obietnic (top1/title) + wiersz kontaktu (top4) === */ /* #sp-top-bar to element przyklejony (07-moduly-i-naglowek.md §7.1). !important na tle/pozycji: szablon ma własną regułę #sp-top-bar{background:#fff} w presecie (tej samej specyficzności, ładowaną później w łączonym CSS JCH) */ #sp-top-bar{background:#1D1D1D !important;width:100%;position:sticky !important;top:0;z-index:1030} #sp-top-bar .container-inner{width:100%} #sp-top-bar .row{width:100%;margin-left:0;margin-right:0} #sp-top-bar .sp-column{display:block;width:100%} #sp-top-bar #sp-top1,#sp-top-bar #sp-top4{display:block;width:100%} #sp-top-bar .promo-strip{display:flex;flex-wrap:wrap;gap:6px 26px;align-items:center;padding:9px 0;margin:0;justify-content:center} #sp-top-bar .promo-item{display:flex;align-items:center;gap:8px;font-size:14px;line-height:1.3;color:#fff !important;white-space:nowrap} #sp-top-bar .promo-item i{color:#fff !important;flex:0 0 auto} #sp-top-bar .contact-row{display:flex;align-items:center;justify-content:flex-end;flex-wrap:wrap;gap:6px 22px;padding:7px 0} #sp-top-bar .contact-row__phone{display:inline-flex;align-items:center;gap:8px;font-weight:700;font-size:16px;color:#fff !important;white-space:nowrap} #sp-top-bar .contact-row__phone:hover{color:#fff !important;text-decoration:underline} #sp-top-bar .contact-row__info{display:flex;gap:6px 16px;flex-wrap:wrap;font-size:13px;color:#fff !important} #sp-top-bar .contact-row__info span{display:inline-flex;align-items:center;gap:6px;white-space:nowrap} /* obietnice na telefonie: poza paskiem przyklejonym, druga kopia w #sp-mobile-obietnice (pozycja "title" nie renderuje modułów na tym szablonie - sprawdzone i opisane w header.php) */ #sp-mobile-obietnice{display:none;background:#f6f6f6} #sp-mobile-obietnice .promo-strip{display:flex;flex-wrap:wrap;gap:8px 0;padding:12px 15px;margin:0} #sp-mobile-obietnice .promo-item{flex:1 1 50%;box-sizing:border-box;padding:4px 8px;font-size:13px;color:#1D1D1D;white-space:normal} #sp-mobile-obietnice .promo-item i{color:#1D1D1D} @media (min-width:992px){ #sp-top-bar #sp-top1{display:block !important} #sp-mobile-obietnice{display:none !important} } @media (max-width:991px){ #sp-top-bar #sp-top1{display:none !important} #sp-top-bar .contact-row{justify-content:center;text-align:center} #sp-mobile-obietnice{display:block} } /* #sp-top2 nie istnieje w aktywnym header_style=style-2 - nic do ukrycia (sprawdzone 2026-09-05) */ /* === Projekt graficzny 2026-09-05 (zatwierdzony) — paleta + typografia, Faza 5 === Zrodlo: projekt-graficzny/00-tokeny-i-zatwierdzenie.md + strona-glowna.dc.html Zamiana fioletu dema szablonu (#6761F4/#554FF3, plik presets/preset1.css) na akcent Lenovo #E2231A. Kolor marki TYLKO jako akcent (linki, przyciski, stany aktywne) — NIE jako tlo duzych powierzchni, zgodnie z DANE-WITRYNY.md. Paleta jasna wylacznie (szablon nie ma przelaczanego trybu ciemnego widza). */ :root{ --csel-accent:#e2231a; --csel-accent-text:#c4161c; /* akcent do TEKSTU na jasnym tle: 5,6 zamiast 4,44 */ --csel-accent-hover:#c01e15; --sppb-logo-text-color:#e2231a !important; --sppb-menu-text-hover-color:#e2231a !important; --sppb-menu-text-active-color:#e2231a !important; --sppb-menu-dropdown-text-hover-color:#e2231a !important; --sppb-menu-dropdown-text-active-color:#e2231a !important; --sppb-link-color:#c4161c !important; --sppb-link-hover-color:#c01e15 !important; --sppb-footer-link-hover-color:#e2231a !important; } /* -- typografia wersji F (2026-09-25, decyzja właściciela): Barlow — treść, Barlow Condensed — h1–h3, etykiety, przyciski. Zastępuje IBM Plex z 2026-09-05. W arkuszu, bo to typografia ogólna witryny (#sp-component + chrom Helixa). -- */ body,.sp-preloader,h1,h2,h3,h4,h5,h6,p,li,td,th,.sppb-addon{ font-family:'Barlow',-apple-system,'Segoe UI',Helvetica,Arial,sans-serif !important; } #sp-top-bar .contact-row__phone,#sp-top-bar .contact-row__info{ font-family:'Barlow Condensed','Barlow',Arial,sans-serif !important; } /* makieta F: przyciski i menu w Barlow, bez wersalików (wersaliki dokłada template.css szablonu) */ .btn,.sppb-btn,.btn-primary,.sppb-btn-primary,.sp-megamenu-parent>li>a{ font-family:'Barlow',Arial,sans-serif !important;text-transform:none !important;letter-spacing:0 !important; } .sp-megamenu-parent>li>a{font-size:16px !important;font-weight:600 !important;color:#111} h1,h2,h3{font-family:'Barlow Condensed','Barlow',Arial,sans-serif !important;} /* -- akcent marki: zamiana #6761F4/#554FF3 (preset1.css) na #E2231A/#C01E15 -- */ .sp-preloader>div{background:var(--csel-accent) !important} a{color:var(--csel-accent-text)} a:hover,a:focus,a:active{color:var(--csel-accent-hover)} .tags>li a{color:var(--csel-accent) !important} .tags>li a:hover{background:var(--csel-accent-hover) !important} .article-social-share .social-share-icon ul li a:hover, .article-social-share .social-share-icon ul li a:focus{background:var(--csel-accent) !important} .sp-reading-progress-bar{background-color:var(--csel-accent) !important} .sp-megamenu-parent>li:hover>a, .sp-megamenu-parent>li.active>a, .sp-megamenu-parent>li.active:hover>a{color:var(--csel-accent) !important} .sp-megamenu-parent .sp-dropdown li.sp-menu-item>a:hover, .sp-megamenu-parent .sp-dropdown li.sp-menu-item.active>a{color:var(--csel-accent) !important} #offcanvas-toggler>.fa:hover,#offcanvas-toggler>.fa:focus,#offcanvas-toggler>.fa:active{color:var(--csel-accent) !important} .offcanvas-menu .offcanvas-inner .sp-module ul>li a:hover, .offcanvas-menu .offcanvas-inner .sp-module ul>li a:focus, .offcanvas-menu .offcanvas-inner .sp-module ul>li span:hover, .offcanvas-menu .offcanvas-inner .sp-module ul>li span:focus{color:var(--csel-accent) !important} .btn-primary,.sppb-btn-primary{border-color:var(--csel-accent) !important;background-color:var(--csel-accent) !important} .btn-primary:hover,.sppb-btn-primary:hover{border-color:var(--csel-accent-hover) !important;background-color:var(--csel-accent-hover) !important} ul.social-icons>li a:hover{color:var(--csel-accent) !important} .sp-page-title{background:var(--csel-accent) !important} .sp-module ul>li>a:hover{color:var(--csel-accent) !important} .sp-module .latestnews>div>a:hover{color:var(--csel-accent) !important} .sp-module .tagscloud .tag-name:hover{background:var(--csel-accent) !important} .search .btn-toolbar button{background:var(--csel-accent) !important} #sp-bottom-down a:hover,#sp-bottom-down a:active,#sp-bottom-down a:focus, #sp-footer a:hover,#sp-footer a:active,#sp-footer a:focus, #sp-bottom a:hover,#sp-bottom a:active,#sp-bottom a:focus{color:var(--csel-accent) !important} .pagination>.active>a,.pagination>.active>span, .pagination>.active>a:hover,.pagination>.active>a:focus, .pagination>.active>span:hover,.pagination>.active>span:focus{ border-color:var(--csel-accent) !important;background-color:var(--csel-accent) !important} .error-code,.coming-soon-number{color:var(--csel-accent) !important} /* === Projekt graficzny 2026-09-05 — Faza 4: restyl sekcji wg makiety strona-glowna.dc.html === Tylko korekta wartosci (obwodki zamiast cieni, mono etykiety/numeracja dekoracyjna, kropka-akcent) na ISTNIEJACYCH dodatkach SPPB — bez zmiany struktury JSON/parent/row. */ :root{ --csel-paper-raised:#ffffff; --csel-steel:#565b62; --csel-steel-soft:#8b8f95; --csel-line:#dbdad5; } /* -- trio usterek (core-services): siatka z cienkimi liniami zamiast cienia, mono etykieta + numer dekoracyjny w rogu (wartosci ktorych dodatek 'heading' nie wystawia — patrz Zalacznik C dokumentu wdrozeniowego) -- */ .core-services{ border:1px solid var(--csel-line); border-radius:5px; overflow:hidden; background:var(--csel-line); } .core-services .sppb-row.sppb-nested-row{gap:0;background:var(--csel-line)} /* kreska siatki bez wplywu na uklad — 'outline' nie powieksza pudelka kolumny */ .core-services .sppb-col-md-4,.core-services .sppb-col-md-8{outline:1px solid var(--csel-line)} .core-services > .sppb-container-inner{padding:0} .core-services .sppb-col-md-4{ background:var(--csel-paper-raised); padding:30px 26px; position:relative; } .core-services .sppb-addon-header{margin-bottom:6px} .core-services .sppb-addon-title{ font-size:18px; position:relative; padding-top:22px; } .core-services .sppb-addon-title::before{ font-family:'Barlow Condensed','Barlow',Arial,sans-serif; font-size:11px; letter-spacing:.08em; text-transform:uppercase; color:var(--csel-steel-soft); display:block; margin-bottom:8px; content:"Specjalizacja"; } .core-services .sppb-addon-title::after{position:absolute;top:0;right:0;font-family:'Barlow Condensed','Barlow',Arial,sans-serif;font-size:12px;color:var(--csel-line)} .core-services .sppb-addon-text-block{color:var(--csel-steel);font-size:14.5px} /* numeracja 01/02/03 dla trzech kart trio (kolejnosc kolumn: 1=zalanie,3=upadek,5=plyty) */ .core-services .sppb-col-md-4.sppb-order-md-1 .sppb-addon-title::after{content:"01"} .core-services .sppb-col-md-4.sppb-order-md-3 .sppb-addon-title::after{content:"02"} .core-services .sppb-col-md-4.sppb-order-md-5 .sppb-addon-title::after{content:"03"} .core-services .sppb-addon-single-image-container{border-radius:5px;overflow:hidden} /* -- Kim jestesmy / Obszar dzialania: juz w jednej kolumnie (zweryfikowane w HTML) — dopisujemy tylko cienka linie rozdzielajaca miedzy dwoma blokami tresci, bez zmiany struktury wiersza/kolumny (zgodnie z zaleceniem zadania, gdy ryzykowne — zostaw jak jest, dostyluj tylko wizualnie) -- */ #sppb-addon-wrapper-lnv-k-21{ margin-top:22px; padding-top:22px; border-top:1px solid var(--csel-line); } /* -- Serie Lenovo: karty z obwodka zamiast plaskiego obrazka, podswietlenie na hover akcentem marki (zamiast usunietego fioletu) -- */ .sppb-addon-clients .sppb-addon-clients-image{ border:1px solid var(--csel-line); border-radius:5px; padding:18px; background:var(--csel-paper-raised); transition:border-color .15s ease; box-sizing:border-box; } .sppb-addon-clients .sppb-col-sm-4:hover .sppb-addon-clients-image{border-color:var(--csel-accent)} /* -- Proces naprawy: accordion zostaje (funkcja rozwijania natywna) — dostylowana numeracja kroku w mono-foncie przed tytulem panelu, bez zrywania toggle -- */ .sppb-addon-accordion{counter-reset:krok} .sppb-addon-accordion .sppb-panel-title{ counter-increment:krok; display:inline-flex; align-items:center; gap:12px; } .sppb-addon-accordion .sppb-panel-title::before{ content:"0" counter(krok); font-family:'Barlow Condensed','Barlow',Arial,sans-serif; font-size:12.5px; font-weight:600; color:var(--csel-accent); flex:0 0 auto; } /* -- Kontakt: karta z cienka obwodka wokol formularza + danych, zamiast plaskiego tla -- */ #section-id-lnv-k-39{ border:1px solid var(--csel-line); border-radius:5px; padding:36px; background:var(--csel-paper-raised); } @media(max-width:767px){ #section-id-lnv-k-39{padding:22px} } /* === Etap 9 (2026-09-05): naprawa realnych usterek wizualnych — zweryfikowane pomiarami getBoundingClientRect/getComputedStyle na zywej stronie, nie z JSON-u. 1) Klasy .sppb-hidden-lg/md/sm/xs (obrazki-smieci z demo szablonu, uzyte razem na 4 elementach jako "ukryj na kazdej szerokosci") nie maja ZADNEJ reguly w zaladowanych arkuszach CSS (sprawdzone przez document.styleSheets) — obrazki hero-layer-item1/3.png i rectangle-26/174.png byly realnie widoczne, wystajac poza krawedz hero i sekcji "Kim jestesmy". 2) .sppb-addon-single-image-container jest domyslnie inline-block bez ograniczenia szerokosci — dla obrazkow szerszych niz kolumna (img02.jpg 837px w kolumnie 740px, eng01/02/03.jpg trio "core-services" 876-886px w kolumnie 776px, rectangle-*, logo.svg w offcanvas) kontener przyjmuje naturalna szerokosc obrazka i wystaje poza kolumne (text-align:center centruje kontener symetrycznie na obie strony, wiec czesc obrazka znika za lewa krawedzia ekranu). max-width:100% naprawia wszystkie wystapienia naraz, nie zmieniajac mniejszych/poprawnie wyskalowanych obrazkow (np. bottom-logo.png, 195px w kolumnie 278px — bez zmian). 3) Hero (.hero-sec): lewa kolumna (7/12, karta z diagramem SVG) ma tresc wysokosci ~378px w kolumnie rozciagnietej na 952px (align-items:stretch domyslne) — karta siedziala przyklejona do gory, zostawiajac ~570px pustki pod spodem, podczas gdy prawa kolumna (tekst+CTA, dodatek "row") wypelnia niemal cala wysokosc. Centrujemy zawartosc lewej kolumny w pionie. */ .sppb-hidden-lg.sppb-hidden-md.sppb-hidden-sm.sppb-hidden-xs{display:none !important} .sppb-addon-single-image-container{max-width:100%} .hero-sec .sppb-col-md-7 .sppb-column-addons{ display:flex; flex-direction:column; justify-content:center; } /* === Etap 10 (2026-09-05): przeglad 9 pozostalych stron SPPB - realne usterki (overlay masking usuniety, patrz PLAN.md Zadanie 5b) === */ /* Blad "Please insert your API key for mailchimp" — dodatek optin_form (newsletter) bez skonfigurowanego API, renderuje sie jako widoczny czerwony/zolty komunikat bledu zamiast formularza. Wystepuje na wielu stronach (Service id=16, Service Details id=17, Case Study id=19, Case Study Details id=20) plus w module stopki (id=113, juz odpublikowany osobno w bazie). SPPB oznacza taki nieskonfigurowany dodatek wlasna klasa bledu "sppb-alert-warn(ing)" — ukrywamy po tej klasie, nie po tresci, wiec prawdziwy skonfigurowany formularz (bez tej klasy bledu) nigdy nie zostanie ukryty. */ .sppb-addon-optin-forms[class*="sppb-alert-warn"]{display:none !important} /* Specjalizacje (id=18): dwie karty CTA "Kontakt"/"Naprawa Lenovo" (Etap 3c) — biale napisy na zdjeciu team-contact-bg.jpg z tylko 30% czarna nakladka (kontrast liczony: naglowek ~3.2:1, akapit z opacity .6 ~2.1:1 — ponizej progu WCAG). Wzmacniamy nakladke do 60%, bez ruszania zdjecia/tresci/JSON. */ #sppb-addon-wrapper-1609740603842 .sppb-addon-content-align-before, #sppb-addon-wrapper-1609740869709 .sppb-addon-content-align-before{ background-image: linear-gradient(0deg, rgba(0,0,0,.6), rgba(0,0,0,.6)) !important; } /* Animacje scroll-reveal (WOW.js + animate.css, klasy sppb-wow/sppb-animated) czasem nie "odpalaja" koncowego stanu — zmierzone na Case Study (id=19): 4 dodatki (w tym naglowki "Scenariusz: ThinkPad po zalaniu" i "Powrot do pracy po zalaniu klawiatury") trwale opacity:0 i transform poza ekranem (translate ±2000px), tresc niewidoczna dla kazdego odwiedzajacego niezaleznie od przewijania. Zweryfikowane tez na /o-nas (dodatek obrazka w hero) — ten sam mechanizm. Naprawa: wymuszamy koncowy, widoczny stan animacji dla wszystkich dodatkow z ta klasa, niezaleznie od tego czy JS zdazyl odpalic animacje — kazdy dodatek z klasa "sppb-wow" ma z definicji skonczyc jako w pelni widoczny, wiec to nie ujawnia niczego, co mialo zostac trwale ukryte. */ .sppb-wow.sppb-animated{ opacity:1 !important; transform:none !important; } /* === Etap 9 mobilny 375px (2026-09-05/06): usterki zweryfikowane pomiarem (getBoundingClientRect/getComputedStyle na zywej stronie, resize_window preset mobile 375x812), zgodnie z 09-wersja-mobilna.md. === */ /* 1) Ikona hamburgera (.burger-icon, markup stockowy Helix Ultimate, templates/manufacturer/features/menu.php) nie miala ZADNEJ reguly CSS w calym zaladowanym arkuszu strony (sprawdzone przez document.styleSheets — 0 dopasowan) — #offcanvas-toggler renderowal sie z szerokoscia 0px, calkowicie niewidoczny na telefonie i praktycznie nieklikalny. Usterka systemowa szablonu, nie regresja tej sesji — dopisujemy brakujacy wyglad "trzech kresek". */ #offcanvas-toggler{min-width:44px;min-height:44px} #offcanvas-toggler .burger-icon{position:relative;display:inline-block;width:24px;height:16px;vertical-align:middle} #offcanvas-toggler .burger-icon span{position:absolute;left:0;width:100%;height:2px;background:#252525;border-radius:1px;transition:background-color .2s ease} #offcanvas-toggler .burger-icon span:nth-child(1){top:0} #offcanvas-toggler .burger-icon span:nth-child(2){top:7px} #offcanvas-toggler .burger-icon span:nth-child(3){top:14px} #offcanvas-toggler:hover .burger-icon span,#offcanvas-toggler:focus .burger-icon span{background:var(--csel-accent)} /* 2) Cele dotykowe ponizej 44px (09-wersja-mobilna.md §9.3 — podnosimy tylko cele samodzielne, nie odnosniki wpletlone w zdanie): - przycisk zamykajacy offcanvas: 52x36 -> 44x44 - ikony social w offcanvas: 36x36 -> 44x44 - przyciski CTA/submit (.btn/.sppb-btn, w tym "Zadzwon"/"Wyslij zapytanie"/ "Wiecej..." na listach artykulow): wysokosc 40 -> min 44 - numery stron w paginacji kategorii (zmierzone 8x17px, zbite bez odstepu, "12345678" nieczytelne i niemozliwe do trafienia palcem) -> 44x44 z odstepem */ @media (max-width:991px){ .close-offcanvas{min-width:44px;min-height:44px;width:44px;height:44px;display:flex;align-items:center;justify-content:center} .offcanvas-menu ul.social-icons li a,.offcanvas-menu [class*="social-icon"] a,.offcanvas-menu .sppb-icons-group-list li a{min-width:44px;min-height:44px;display:inline-flex;align-items:center;justify-content:center} } @media (max-width:767px){ .sppb-btn,.btn,button[type="submit"].sppb-btn,.readmore .btn{min-height:44px} .pagination{display:flex;flex-wrap:wrap;gap:6px;justify-content:center} .pagination a,.pagination span{min-width:44px;min-height:44px;display:inline-flex;align-items:center;justify-content:center;padding:0 4px;box-sizing:border-box} } /* Specjalizacje (id=18): sekcja dwoch kart CTA "Kontakt"/"Naprawa Lenovo" ma symetryczny ujemny margines (-95px/-95px) — na desktopie to niewielki, niezauwazalny "bleed" (~28px), ale na 375px rozciaga sekcje do 535px (160px szerzej niz ekran), wystajac po 80px z kazdej strony. Tresc/przycisk nie sa realnie ucinane (bleed trafia w puste tlo), ale narusza wymog braku przewijania poziomego z checklisty 9.5 — zerujemy tylko na mobile, zeby nie ruszac zamierzonego efektu na desktopie. */ @media (max-width:767px){ #section-id-1609737924362{ margin-left:0 !important; margin-right:0 !important; } } /* === Etap 11 (2026-09-06): naprawa nakladania #sp-header na #sp-top-bar === Zweryfikowane bezposrednio getBoundingClientRect/getComputedStyle (nie zgadywane): #sp-header ma bazowa regule szablonu position:fixed;top:0;z-index:99 (header_style=style-2), a #sp-top-bar dobudowany w Etapie 7 ma position:sticky;top:0;z-index:1030 (ten sam plik, wpis wyzej). Oba zaczynaja sie w tym samym miejscu (top:0), topbar wygrywa z-indexem i wieksza wysokoscia — na starcie strony (scrollY:0) calkowicie zaslania logo i menu. Naprawa: #sp-header dostaje position:sticky, ale z jawnym "top" rownym zmierzonej wysokosci #sp-top-bar na danej szerokosci — NIE top:0. Sprawdzone empirycznie (2026-09-06, przez wstrzykniecie tymczasowego