/* ========================================================================== MICRO-INTERACTIONS.CSS — Animacje wejścia, reading progress, scroll-to-top, focus-visible, tag styles. ========================================================================== */ /* ========================================================================== SCROLL ENTRANCE ANIMATIONS [data-animate] + .is-visible ========================================================================== */ [data-animate] { opacity: 0; transform: translateY(24px); transition: opacity 0.5s ease var(--animate-delay, 0ms), transform 0.5s cubic-bezier(0.4, 0, 0.2, 1) var(--animate-delay, 0ms); will-change: opacity, transform; } [data-animate="fade-in"] { transform: none; } [data-animate="slide-right"] { transform: translateX(-24px); } [data-animate].is-visible { opacity: 1; transform: none; } /* Wyłącz dla prefers-reduced-motion */ @media (prefers-reduced-motion: reduce) { [data-animate] { opacity: 1; transform: none; transition: none; } } /* ========================================================================== READING PROGRESS BAR ========================================================================== */ .reading-progress { position: fixed; top: 0; left: 0; right: 0; height: 3px; background-color: transparent; z-index: 1001; /* nad .site-header z-index: 1000 */ pointer-events: none; } .reading-progress__bar { height: 100%; width: var(--progress, 0%); background: linear-gradient( to right, var(--color-yellow), var(--color-coral) ); transition: width 0.1s linear; } /* Tylko na single.php */ body:not(.single) .reading-progress { display: none; } /* ========================================================================== SCROLL-TO-TOP BUTTON ========================================================================== */ .scroll-to-top { position: fixed; bottom: 2rem; right: 2rem; width: 48px; height: 48px; background-color: var(--color-black); color: var(--color-white); border: none; cursor: pointer; display: flex; align-items: center; justify-content: center; z-index: 900; opacity: 0; transform: translateY(16px); transition: opacity 0.3s ease, transform 0.3s ease, background-color var(--transition-base); pointer-events: none; } .scroll-to-top.is-visible { opacity: 1; transform: translateY(0); pointer-events: auto; } .scroll-to-top:hover { background-color: var(--color-yellow); color: var(--color-black); } .scroll-to-top:focus-visible { outline: 3px solid var(--color-yellow); outline-offset: 2px; background-color: var(--color-yellow); color: var(--color-black); } @media (max-width: 767px) { .scroll-to-top { bottom: 1rem; right: 1rem; width: 44px; height: 44px; } } /* ========================================================================== FOCUS VISIBLE — SYSTEM SZYNY KLAWIATURY Aktywny tylko gdy .user-is-tabbing na ========================================================================== */ /* Bazowy reset :focus dla myszy — subtelny */ :focus:not(:focus-visible) { outline: none; } /* Wyraźny ring dla klawiatury */ :focus-visible { outline: 3px solid var(--color-yellow); outline-offset: 2px; } /* Dodatkowe wzmocnienie dla .user-is-tabbing */ .user-is-tabbing a:focus, .user-is-tabbing button:focus, .user-is-tabbing input:focus, .user-is-tabbing textarea:focus, .user-is-tabbing select:focus, .user-is-tabbing [tabindex]:focus { outline: 3px solid var(--color-yellow); outline-offset: 2px; } /* Karty z focus na tytule */ .card--focused { outline: 2px solid var(--color-yellow); outline-offset: 2px; } /* ========================================================================== TAG COMPONENT ========================================================================== */ .tag { display: inline-flex; align-items: center; padding: 0.25rem 0.625rem; font-family: var(--font-body); font-size: 0.6875rem; font-weight: 700; letter-spacing: var(--letter-spacing-caps); text-transform: uppercase; text-decoration: none; line-height: 1.2; transition: background-color var(--transition-base), color var(--transition-base); } /* Kategoria — czarne tło */ .tag--category { background-color: var(--color-black); color: var(--color-white); } .tag--category:hover { background-color: var(--tag-accent, var(--color-yellow)); color: var(--color-black); } /* Polecane / pinned */ .tag--pinned { background-color: var(--section-accent, var(--color-yellow)); color: var(--color-black); gap: 0.25rem; } .tag--pinned::before { content: '★'; font-size: 0.625rem; } /* Tagi przy artykule */ .tag--post { background-color: var(--color-gray-100); color: var(--color-gray-800); border: 1px solid var(--color-gray-200); } .tag--post:hover { background-color: var(--color-black); color: var(--color-white); border-color: var(--color-black); } /* ========================================================================== SEKCJA — SZARE TŁO ALTERNACJA ========================================================================== */ .section--gray { background-color: var(--color-gray-100); } /* ========================================================================== SECTION SPACING ========================================================================== */ .section { padding-block: var(--section-gap, var(--space-2xl)); } /* ========================================================================== HOVER EFFECTS WZMOCNIENIE ========================================================================== */ /* Karta — cień przy hover */ .card { transition: box-shadow 0.3s ease; } .card:hover { box-shadow: 0 8px 32px rgba(10, 10, 10, 0.1); } .card--pinned:hover { box-shadow: 0 8px 32px rgba(10, 10, 10, 0.16); } /* Link sekcji — strzałka przesuwa się */ .section-header__link .arrow { display: inline-block; transition: transform var(--transition-base); } .section-header__link:hover .arrow { transform: translateX(4px); } /* ========================================================================== BUTTON RIPPLE EFFECT ========================================================================== */ .btn { position: relative; overflow: hidden; } .btn::after { content: ''; position: absolute; inset: 0; background-color: rgba(255, 255, 255, 0.2); opacity: 0; transition: opacity 0.2s ease; } .btn:active::after { opacity: 1; transition: none; } /* ========================================================================== SMOOTH HOVER NA STOPCE ========================================================================== */ .footer-menu a { position: relative; } /* ========================================================================== SELECTION ========================================================================== */ ::selection { background-color: var(--color-yellow); color: var(--color-black); } ::-moz-selection { background-color: var(--color-yellow); color: var(--color-black); } /* ========================================================================== SCROLLBAR STYLING (WebKit) ========================================================================== */ ::-webkit-scrollbar { width: 8px; } ::-webkit-scrollbar-track { background: var(--color-gray-100); } ::-webkit-scrollbar-thumb { background-color: var(--color-gray-400); border-radius: 0; } ::-webkit-scrollbar-thumb:hover { background-color: var(--color-black); } /* ========================================================================== SMOOTH IMAGE APPEARANCE (karta zdjęcia) ========================================================================== */ .card .post-thumbnail img { image-rendering: auto; } /* Placeholder zanim obrazek się załaduje */ .card .post-thumbnail { background: linear-gradient( 135deg, var(--color-gray-200) 25%, var(--color-gray-100) 50%, var(--color-gray-200) 75% ); background-size: 200% 100%; } @media (prefers-reduced-motion: no-preference) { .card .post-thumbnail:has(img.lazyload), .card .post-thumbnail:has(img.lazyloading) { animation: shimmer 1.5s ease-in-out infinite; } } @keyframes shimmer { 0% { background-position: 200% 0; } 100% { background-position: -200% 0; } }