/* ===================================================================== NOWOCZESNE ULEPSZENIA — Twój Elektryk Włocławek (Instal Solution) --------------------------------------------------------------------- Warstwa NAKŁADKOWA. Podłącz PO schemat.css: …albo wklej całość na KOŃCU schemat.css. Nie zmienia treści ani struktury HTML, nie przesuwa layoutu, używa Twoich zmiennych (--accent itd.) → działa w trybie jasnym i ciemnym. Wszystko gaśnie przy „prefers-reduced-motion". Każdy blok jest niezależny — możesz dowolny usunąć. ===================================================================== */ /* 1) FOCUS DOSTĘPNOŚCI — widoczna obwódka tylko przy nawigacji klawiaturą */ a:focus-visible, button:focus-visible, input:focus-visible, select:focus-visible, summary:focus-visible, .btn:focus-visible, .service-phone-btn:focus-visible, .main-phone-btn:focus-visible{ outline: 3px solid var(--accent); outline-offset: 3px; border-radius: 8px; } /* 2) ZAZNACZANIE TEKSTU w kolorze marki */ ::selection{ background: var(--accent); color: #fff; } ::-moz-selection{ background: var(--accent); color: #fff; } /* 3) NAWIGACJA — animowane podkreślenie wjeżdżające od lewej (desktop) */ @media (min-width: 901px){ .header-nav > a, .header-nav .dropbtn{ position: relative; } .header-nav > a::after, .header-nav .dropbtn::after{ content:""; position:absolute; left:12px; right:12px; bottom:4px; height:2px; background: var(--accent); transform: scaleX(0); transform-origin: left; transition: transform .28s cubic-bezier(.4,0,.2,1); } .header-nav > a:hover::after, .header-nav .dropbtn:hover::after{ transform: scaleX(1); } } /* 4) PRZYCISKI — delikatny przesuw światła („shine") przy najechaniu */ .btn, .btn-primary, .service-phone-btn, .main-phone-btn{ position: relative; overflow: hidden; isolation: isolate; } .btn::before, .btn-primary::before, .service-phone-btn::before, .main-phone-btn::before{ content:""; position:absolute; top:0; left:-120%; width:60%; height:100%; z-index:0; background: linear-gradient(100deg, transparent, rgba(255,255,255,.28), transparent); transform: skewX(-18deg); transition: left .6s ease; pointer-events:none; } .btn:hover::before, .btn-primary:hover::before, .service-phone-btn:hover::before, .main-phone-btn:hover::before{ left: 140%; } .btn > *, .service-phone-btn > *, .main-phone-btn > *{ position: relative; z-index: 1; } /* 5) KARTY — miększy cień podbarwiony akcentem przy hover */ .card, .card-custom, .cennik-kategoria{ transition: transform .35s cubic-bezier(.2,.7,.2,1), box-shadow .35s ease, border-color .35s ease; } @supports (background: color-mix(in srgb, red, blue)){ .card:hover, .card-custom:hover, .cennik-kategoria:hover{ box-shadow: 0 22px 50px color-mix(in srgb, var(--accent) 22%, transparent); } } /* 6) KAFELKI USŁUG — CZYTELNE podświetlenie: uniesienie + czerwony pierścień + miękka poświata, plus „pop" ikony. Technika oparta na box-shadow: zawsze trzyma zaokrąglenie karty i nie glitchuje (bez maski/z-index). */ .service-box{ position: relative; transition: transform .32s cubic-bezier(.2,.7,.2,1), box-shadow .32s ease, border-color .32s ease; } .service-box img, .service-box .svc-ico{ transition: transform .35s cubic-bezier(.34,1.56,.64,1), color .3s ease; } .service-box:hover img, .service-box:hover .svc-ico{ transform: scale(1.12) translateY(-2px); } .service-box:hover{ transform: translateY(-6px); } @supports (background: color-mix(in srgb, red, blue)){ .service-box:hover{ box-shadow: inset 0 0 0 2px var(--accent), 0 18px 42px color-mix(in srgb, var(--accent) 26%, transparent); } } @supports not (background: color-mix(in srgb, red, blue)){ .service-box:hover{ box-shadow: inset 0 0 0 2px var(--accent), 0 18px 42px rgba(194,0,0,.26); } } /* 7) CENNIK — kafelki cen z subtelnym gradientem i mocniejszą ceną */ .price-card{ background: radial-gradient(120% 80% at 50% 0%, color-mix(in srgb, var(--accent) 8%, transparent), transparent 60%), var(--card); } .price-value{ transition: transform .3s ease, text-shadow .3s ease; } .price-card:hover .price-value{ transform: scale(1.06); text-shadow: 0 6px 20px color-mix(in srgb, var(--accent) 45%, transparent); } /* 8) GALERIA — delikatny czerwony połysk zamiast samego ściemnienia */ .gallery-item::before{ content:""; position:absolute; inset:0; z-index:2; pointer-events:none; background: linear-gradient(180deg, transparent 40%, color-mix(in srgb, var(--accent) 35%, transparent)); opacity:0; transition: opacity .35s ease; } .gallery-item:hover::before{ opacity:1; } /* 9) OPINIE — karta lekko się unosi i dostaje czerwoną górną krawędź */ .review-card-slide{ transition: transform .3s ease, box-shadow .3s ease, border-color .3s ease; border-top: 3px solid transparent; } .review-card-slide:hover{ transform: translateY(-5px); border-top-color: var(--accent); box-shadow: var(--shadow-hover); } /* 10) FAQ — płynniejszy hover */ .faq-item{ transition: transform .25s ease, border-color .25s ease, box-shadow .25s ease; } .faq-item summary{ transition: color .2s ease, padding-left .25s ease; } .faq-item:hover summary{ padding-left: 26px; } /* 11) REVEAL — odrobinę nowocześniejsze wejście */ .reveal{ transition: opacity .7s cubic-bezier(.2,.7,.2,1), transform .7s cubic-bezier(.2,.7,.2,1); } /* 12) NAGŁÓWEK PRZYKLEJONY — subtelny cień przy scrollu (progresywne) */ @supports (animation-timeline: scroll()){ @media (prefers-reduced-motion: no-preference){ .site-header{ animation: iseHeaderShadow linear both; animation-timeline: scroll(root); animation-range: 0 120px; } @keyframes iseHeaderShadow{ to{ box-shadow: 0 8px 30px rgba(0,0,0,.18); } } } } /* 13) PŁYWAJĄCY PRZYCISK MOTYWU — łagodna poświata */ .theme-toggle-float{ box-shadow: 0 8px 20px color-mix(in srgb, var(--accent) 40%, transparent); } /* ===================================================================== 14) WERSJA MOBILE / DOTYK — efekty „ambient" (bez najechania) • przyciski akcji: samoczynny, łagodny „shine" w pętli, • kafelki/karty: reakcja na dotnięcie (:active), • nowy Android Chrome: kafelek rozświetla obramowanie przy wjeździe w kadr. ===================================================================== */ @media (hover: none){ .btn-primary::before, .service-phone-btn::before, .main-phone-btn::before{ left:-120%; animation: iseAmbientShine 3.8s ease-in-out infinite; } @keyframes iseAmbientShine{ 0%{left:-120%} 55%{left:140%} 100%{left:140%} } /* kafelki usług — dotnięcie: czerwony pierścień + poświata + „skok" ikony */ .service-box:active{ transform: translateY(-3px); } .service-box:active img, .service-box:active .svc-ico{ transform: scale(1.1); } @supports (background: color-mix(in srgb, red, blue)){ .service-box:active{ box-shadow: inset 0 0 0 2px var(--accent), 0 12px 30px color-mix(in srgb, var(--accent) 22%, transparent); } } .card:active{ border-color: var(--accent); } .review-card-slide:active{ border-top-color: var(--accent); transform: translateY(-3px); } .price-card:active .price-value{ transform: scale(1.06); } /* nowoczesne przeglądarki mobilne: kafelek rozświetla się raz przy wjeździe w kadr */ @supports (animation-timeline: view()){ @media (prefers-reduced-motion: no-preference){ .service-box{ animation: iseTileGlow linear both; animation-timeline: view(); animation-range: entry 6% cover 38%; } @keyframes iseTileGlow{ 0%,100%{ box-shadow: inset 0 0 0 2px transparent, 0 10px 30px rgba(0,0,0,.05); } 45%{ box-shadow: inset 0 0 0 2px var(--accent), 0 12px 28px color-mix(in srgb, var(--accent) 22%, transparent); } } } } } @media (hover: none) and (prefers-reduced-motion: reduce){ .btn-primary::before, .service-phone-btn::before, .main-phone-btn::before{ animation:none; } }