/* ============================================================ ww-ruler — pasek "miarki" rozdzielajacy sekcje (webweb) Zastapil dawne biale linie dzialowe (Vectors-Wrapper.svg). Animacje: - lagodne odslaniane przy wejsciu w viewport (scroll) - subtelny dryf kresek podczas przewijania - podswietlenie kresek pod kursorem myszy Bez JS miarka jest w pelni widoczna (stany animacji sa aktywne tylko gdy ma klase .ww-anim, dodawana z JS). ============================================================ */ .ww-ruler { --mx: 50%; /* poz. kursora — ustawia JS */ --drift: 0px; /* dryf kresek — ustawia JS */ --tick-minor: rgba(255, 255, 255, .17); --tick-major: var(--highlight, #ff005c); --rule-line: rgba(255, 255, 255, .11); position: relative; width: 100%; height: 9rem; /* odstep miedzy sekcjami (wiekszy oddech) */ } .ww-ruler::before, .ww-ruler::after { content: ""; position: absolute; left: 0; right: 0; top: 50%; /* linia dokladnie tam, gdzie byla biala kreska */ height: 26px; background-repeat: repeat-x; background-position: var(--drift) 0, var(--drift) 0; } /* warstwa bazowa: linia + kreski */ .ww-ruler::before { border-top: 1px solid var(--rule-line); background-image: repeating-linear-gradient(90deg, var(--tick-major) 0 1px, transparent 1px 48px), repeating-linear-gradient(90deg, var(--tick-minor) 0 1px, transparent 1px 9px); background-size: 100% 13px, 100% 6px; opacity: .78; transition: opacity .35s ease; } .ww-ruler:hover::before { opacity: 1; } /* warstwa podswietlenia — widoczna tylko wokol kursora */ .ww-ruler::after { background-image: repeating-linear-gradient(90deg, var(--tick-major) 0 1px, transparent 1px 48px), repeating-linear-gradient(90deg, var(--tick-major) 0 1px, transparent 1px 9px); background-size: 100% 17px, 100% 9px; filter: drop-shadow(0 0 5px var(--tick-major)); -webkit-mask-image: radial-gradient(135px 48px at var(--mx) 0%, #000 0%, rgba(0, 0, 0, .4) 45%, transparent 74%); mask-image: radial-gradient(135px 48px at var(--mx) 0%, #000 0%, rgba(0, 0, 0, .4) 45%, transparent 74%); opacity: 0; transition: opacity .35s ease; pointer-events: none; } .ww-ruler:hover::after { opacity: 1; } /* ---------- tryb jasny ---------- */ body.light-mode .ww-ruler, html.html-light-mode .ww-ruler { --tick-minor: rgba(0, 0, 0, .24); --tick-major: var(--highlight, #e8004f); --rule-line: rgba(0, 0, 0, .16); } /* tryb jasny nakladal filter:brightness(0) na .spacer-2 (dla starej bialej linii) — ten filtr zaczernilby kolorowe kreski, wiec go neutralizujemy */ .spacer-2.ww-ruler-wrap, body.light-mode .spacer-2.ww-ruler-wrap { filter: none !important; } /* ---------- odslanianie przy scrollu (tylko gdy JS aktywny) ---------- */ html.ww-anim .ww-ruler { opacity: 0; transform: scaleX(.94); transform-origin: 50% 50%; transition: opacity .7s ease, transform 1s cubic-bezier(.16, 1, .3, 1); will-change: opacity, transform; } html.ww-anim .ww-ruler.is-in { opacity: 1; transform: none; will-change: auto; } /* ---------- mobile ---------- */ @media (max-width: 768px) { .ww-ruler { height: 6rem; } /* mobile: proporcjonalnie mniejszy odstep */ .ww-ruler::before { background-size: 100% 11px, 100% 5px; } .ww-ruler::after { background-size: 100% 13px, 100% 7px; } } /* ---------- dostepnosc: mniej ruchu ---------- */ @media (prefers-reduced-motion: reduce) { html.ww-anim .ww-ruler { opacity: 1; transform: none; transition: none; } .ww-ruler::before, .ww-ruler::after { background-position: 0 0, 0 0 !important; transition: none; } }