/* Content Sparks — style.css Fonty wklejone bezpośrednio tutaj (jeden plik zamiast style.css + fonts.css), ścieżki bezwzględne /fonts/..., pliki kopiowane z app/fonts/ do dist/fonts/. */ /* Inter — latin-ext (polskie znaki) */ @font-face { font-family: 'Inter'; font-style: normal; font-weight: 400 600; font-display: swap; src: url(/fonts/inter-latin-ext.woff2) format('woff2'); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; } /* Inter — latin */ @font-face { font-family: 'Inter'; font-style: normal; font-weight: 400 600; font-display: swap; src: url(/fonts/inter-latin.woff2) format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; } /* Space Grotesk 500 — latin-ext */ @font-face { font-family: 'Space Grotesk'; font-style: normal; font-weight: 500; font-display: swap; src: url(/fonts/space-grotesk-500-latin-ext.woff2) format('woff2'); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; } /* Space Grotesk 500 — latin */ @font-face { font-family: 'Space Grotesk'; font-style: normal; font-weight: 500; font-display: swap; src: url(/fonts/space-grotesk-500-latin.woff2) format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; } /* Space Grotesk 700 — latin-ext */ @font-face { font-family: 'Space Grotesk'; font-style: normal; font-weight: 700; font-display: swap; src: url(/fonts/space-grotesk-700-latin-ext.woff2) format('woff2'); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; } /* Space Grotesk 700 — latin */ @font-face { font-family: 'Space Grotesk'; font-style: normal; font-weight: 700; font-display: swap; src: url(/fonts/space-grotesk-700-latin.woff2) format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; } /* Space Mono 400 — latin-ext */ @font-face { font-family: 'Space Mono'; font-style: normal; font-weight: 400; font-display: swap; src: url(/fonts/space-mono-400-latin-ext.woff2) format('woff2'); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; } /* Space Mono 400 — latin */ @font-face { font-family: 'Space Mono'; font-style: normal; font-weight: 400; font-display: swap; src: url(/fonts/space-mono-400-latin.woff2) format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; } /* Space Mono 700 — latin-ext */ @font-face { font-family: 'Space Mono'; font-style: normal; font-weight: 700; font-display: swap; src: url(/fonts/space-mono-700-latin-ext.woff2) format('woff2'); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; } /* Space Mono 700 — latin */ @font-face { font-family: 'Space Mono'; font-style: normal; font-weight: 700; font-display: swap; src: url(/fonts/space-mono-700-latin.woff2) format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; } /* ---------- Zmienne (design.md, "Decyzje wykonawcze") ---------- */ :root { --tlo: #121212; --tlo-kafelek: #1a1a1a; --linia: rgba(255, 255, 255, 0.08); --naglowek-kolor: #ffffff; --tekst-kolor: #a0a0a0; /* akcent strony wspólnej (główna, usługi, dla twórców, blog, stopka) */ --akcent: #ffce1b; --akcent-tekst: #121212; /* akcenty postaci */ --akcent-michal: #ffce1b; --akcent-ilona: #e63946; --akcent-ilona-jasny: #ff4b4b; --akcent-rocky: #c68642; --akcent-rocky-jasny: #d2a679; --czcionka-naglowek: 'Space Grotesk', Arial, sans-serif; --czcionka-tekst: 'Inter', Arial, sans-serif; --czcionka-akcent: 'Space Mono', 'Courier New', monospace; --kontener: 1200px; --odstep-sekcja: 5rem; /* Wysokość przyklejonego nagłówka (.site-header), policzona z modelu pudełka: header-inner padding-block 0.75rem (24px) + najwyższe dziecko w rzędzie (na telefonie przycisk-hamburger ok. 39px, licząc jego padding i wysokość etykiety) + border-bottom 1px ≈ 64px. Jedna zmienna: zmienia się tu, a nie w kilku miejscach (odsunięcie rozwiniętego menu telefonu, scroll-margin kotwic pod przyklejonym paskiem). */ --wysokosc-header: 64px; } @media (min-width: 960px) { :root { --odstep-sekcja: 8rem; /* Zmierzone na żywej stronie 2026-09-14: 79,1 px (logo i przycisk CTA są wyższe, niż wychodziło z modelu pudełka). Zaokrąglone w górę do 80 px, żeby kotwica nigdy nie chowała się pod paskiem. */ --wysokosc-header: 80px; } } /* Kotwice (#zapytanie, #zgloszenie i nagłówki sekcji z id) nie mają chować się pod przyklejonym nagłówkiem po skoku z linku. */ section[id] { scroll-margin-top: var(--wysokosc-header); } /* Akcent per typ strony (podstrony postaci nadpiszą przy budowie) */ body.strona-ilona { --akcent: var(--akcent-ilona); } body.strona-michal { --akcent: var(--akcent-michal); } body.strona-rocky { --akcent: var(--akcent-rocky); } /* ---------- Reset ---------- */ *, *::before, *::after { box-sizing: border-box; } /* overflow-x: clip, nie hidden (B-008). "hidden" na body robi z niego kontener przewijania, przez co position: sticky na .site-header przykleja się do body zamiast do okna i pasek wyjeżdża przy przewijaniu. "clip" obcina tak samo, ale nie tworzy kontenera przewijania, więc sticky działa. */ html, body { overflow-x: clip; } html { -webkit-text-size-adjust: 100%; } body { position: relative; margin: 0; background: var(--tlo); color: var(--tekst-kolor); font-family: var(--czcionka-tekst); font-weight: 400; font-size: 1rem; line-height: 1.6; } /* Szum "Digital Noise" (design.md): ziarno na całym tle, statyczne, nad #121212, pod treścią */ body::before { content: ""; position: fixed; inset: 0; pointer-events: none; z-index: 0; opacity: 0.05; mix-blend-mode: overlay; background-repeat: repeat; background-size: 200px 200px; background-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%22200%22%20height%3D%22200%22%3E%3Cfilter%20id%3D%22n%22%3E%3CfeTurbulence%20type%3D%22fractalNoise%22%20baseFrequency%3D%220.8%22%20numOctaves%3D%223%22%20stitchTiles%3D%22stitch%22%2F%3E%3CfeColorMatrix%20type%3D%22saturate%22%20values%3D%220%22%2F%3E%3C%2Ffilter%3E%3Crect%20width%3D%22100%25%22%20height%3D%22100%25%22%20filter%3D%22url%28%23n%29%22%2F%3E%3C%2Fsvg%3E"); } @supports not (mix-blend-mode: overlay) { body::before { opacity: 0.035; } } img, svg { max-width: 100%; display: block; } a { color: inherit; text-decoration: none; } ul { margin: 0; padding: 0; list-style: none; } h1, h2, h3, h4 { margin: 0; color: var(--naglowek-kolor); font-family: var(--czcionka-naglowek); font-weight: 700; letter-spacing: -0.02em; line-height: 1.05; } p { margin: 0; max-width: 65ch; } button { font: inherit; color: inherit; background: none; border: 0; } @media (min-width: 960px) { body { font-size: 1.0625rem; } } /* Fokus zawsze widoczny (B-001 pan-kontent: nigdy outline: none bez zamiennika) */ :focus-visible { outline: 2px solid var(--akcent); outline-offset: 2px; } /* Ograniczenie ruchu */ @media (prefers-reduced-motion: reduce) { * { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; } } .visually-hidden { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; } /* ---------- Układ ---------- */ .container { max-width: var(--kontener); margin-inline: auto; padding-inline: 1.25rem; } @media (min-width: 960px) { .container { padding-inline: 2.5rem; } } .section { padding-block: var(--odstep-sekcja); border-bottom: 1px solid var(--linia); } .section__naglowek { font-size: clamp(1.8rem, 4vw, 3rem); } .section__zachdeta { margin-top: 1rem; max-width: 60ch; } /* ---------- Przyciski ---------- */ .btn { display: inline-flex; align-items: center; justify-content: center; min-height: 48px; padding: 0.75rem 1.5rem; border-radius: 0; font-family: var(--czcionka-tekst); font-weight: 600; font-size: 1rem; width: 100%; cursor: pointer; } @media (min-width: 640px) { .btn { width: auto; } } .btn--primary { background: var(--akcent); color: var(--akcent-tekst); border: 1px solid var(--akcent); } .btn--secondary { background: transparent; color: #ffffff; border: 1px solid #ffffff; } /* ---------- Nagłówek / menu ---------- Przyklejony (position: sticky) przy przewijaniu. z-index: 50 jest wyżej niż strzałki karuzel (z-index: 3, patrz .karuzela__strzalka i .opinie__strzalka) i wyżej niż rozwinięte podmenu (.nav__dropdown[open] > .nav__podmenu, bez własnego z-index, więc auto = 0 w tym samym kontekście warstwowym), a niżej nie musi być nic: to jedyny element na stronie, który ma zostawać nad resztą treści przy przewijaniu. Tło nieprzezroczyste (var(--tlo)), żeby treść i ziarno tła (body::before) nie prześwitywały pod paskiem. */ .site-header { position: sticky; top: 0; z-index: 50; background: var(--tlo); border-bottom: 1px solid var(--linia); } /* Treść i stopka nad ziarnem body::before (z-index: 0) */ main { position: relative; z-index: 1; } .header-inner { display: flex; align-items: center; justify-content: space-between; padding-block: 0.75rem; } .logo { display: inline-flex; align-items: center; gap: 0.5rem; } .logo__mark { height: 32px; width: auto; } .logo__text { font-family: var(--czcionka-naglowek); font-weight: 700; color: #ffffff; font-size: 1.1rem; } @media (min-width: 960px) { .logo__mark { height: 40px; } } .nav-toggle { display: flex; align-items: center; gap: 0.5rem; cursor: pointer; padding: 0.5rem; list-style: none; } .nav-toggle::-webkit-details-marker { display: none; } .nav-toggle__bars { display: inline-block; width: 22px; height: 2px; background: #ffffff; position: relative; } .nav-toggle__bars::before, .nav-toggle__bars::after { content: ""; position: absolute; left: 0; width: 22px; height: 2px; background: #ffffff; } .nav-toggle__bars::before { top: -7px; } .nav-toggle__bars::after { top: 7px; } .nav-toggle__label { color: #ffffff; font-size: 0.9rem; } /* Nawigacja jest odtąd rodzeństwem
, nie jej dzieckiem: przeglądarka domyślnie ukrywa dzieci zamkniętego
(poza ) regułą `details:not([open]) > *:not(summary) { display: none }`, której nie dało się bezpiecznie nadpisać na komputerze. Widoczność .nav sterujemy własną regułą. */ .nav { display: none; } .nav-mobile[open] ~ .nav { display: block; position: fixed; inset: 0; /* top razem z inset: 0 (bottom: 0) ogranicza wysokość rozwiniętej listy do tego, co zostaje pod przyklejonym nagłówkiem, z własnym przewijaniem (overflow-y: auto) zamiast osobnego max-height. */ top: var(--wysokosc-header); background: var(--tlo); padding: 1.5rem 1.25rem; overflow-y: auto; } .nav__list { display: flex; flex-direction: column; gap: 1.25rem; } .nav__item > a { font-size: 1.1rem; } .nav__dropdown > summary { cursor: pointer; font-size: 1.1rem; list-style: none; } .nav__dropdown > summary::-webkit-details-marker { display: none; } /* Podmenu chowa/pokazuje sam
(bez JS); tu tylko układ, gdy jest otwarte. */ .nav__dropdown[open] > .nav__podmenu { margin-top: 0.75rem; padding-left: 1rem; display: flex; flex-direction: column; gap: 0.75rem; } .nav__item--cta { margin-top: 0.5rem; } /* Oznaczenie aktywnej pozycji menu (buduj.py, funkcja oznacz_aktywna_pozycje): kolor akcentu i linia pod spodem, żeby było czytelne też bez rozróżniania kolorów. aria-current="page" idzie zawsze razem z .nav__link--aktywny (na konkretnym odnośniku); .nav__dropdown--aktywny tylko koloruje rozwijanego menu, bez aria-current (summary nie jest odnośnikiem). */ .nav__link--aktywny { color: var(--akcent); border-bottom: 2px solid var(--akcent); padding-bottom: 2px; } .nav__dropdown--aktywny { color: var(--akcent); border-bottom: 2px solid var(--akcent); padding-bottom: 2px; } @media (min-width: 960px) { .nav-toggle { display: none; } .nav { display: block !important; position: static; background: none; padding: 0; overflow: visible; } .nav__list { flex-direction: row; align-items: center; gap: 2rem; } .nav__dropdown { position: relative; } .nav__dropdown[open] > .nav__podmenu { position: absolute; top: 100%; left: 0; margin-top: 0.5rem; background: var(--tlo-kafelek); border: 1px solid var(--linia); padding: 0.75rem 1rem; min-width: 220px; } .nav__item--cta .btn { min-height: 40px; padding: 0.5rem 1.25rem; } } /* ---------- Hero ---------- */ .hero { display: flex; flex-direction: column; gap: 1.5rem; } .hero__title { font-size: clamp(2.4rem, 8vw, 5.5rem); } .h1__linia { display: block; } .hero__subtitle { color: var(--tekst-kolor); font-size: 1.05rem; max-width: 60ch; } .hero__cta { display: flex; flex-direction: column; gap: 1rem; } @media (min-width: 640px) { .hero__cta { flex-direction: row; } } /* ---------- Akcent Space Mono: "marker cyfrowy" (design.md) ---------- */ .akcent-mono { position: relative; display: inline-block; font-family: var(--czcionka-akcent); font-weight: 700; color: #ffffff; } .akcent-mono::after { content: ""; position: absolute; z-index: -1; left: -0.12em; right: -0.12em; bottom: 0.05em; height: 0.35em; background: var(--akcent-ilona); opacity: 0.9; transform: skew(-4deg) rotate(-1deg); } /* ---------- Wybór postaci: karuzela + kolumny (design.md, "Wybór postaci, wersja 3") ---------- Bez JS (brak "js" na ): karty pełne, jedna pod drugą, ze zdjęciem i całym opisem; strzałki i miniatury ukryte, więc strona działa i jest indeksowana w całości. Z JS, stan 1 "karuzela": trzy karty 9:16, środkowa ostra, boczne rozmyte i obrócone, strzałki po bokach. Stan 2 "wybrana" (po kliknięciu środkowej karty): wybrana karta w lewej kolumnie, karta postaci w prawej, pod zdjęciem dwie miniatury pozostałych postaci. */ .postacie { margin-top: 2.5rem; } /* Kolor postaci: zmienna czytana przez kartę, ekran, linię i przycisk. */ .karta[data-postac="ilona"] { --kolor-postaci: var(--akcent-ilona); } .karta[data-postac="michal"] { --kolor-postaci: var(--akcent-michal); } .karta[data-postac="rocky"] { --kolor-postaci: var(--akcent-rocky); } .karuzela { list-style: none; margin: 0; padding: 0; } .karta { display: block; padding-block: 2rem; border-top: 1px solid var(--linia); } .karta:first-child { border-top: 0; padding-top: 0; } .karta__wybierz { display: block; width: 100%; max-width: 320px; padding: 0; border: 0; background: none; color: inherit; cursor: pointer; text-align: left; } .karta__ekran { position: relative; margin: 0; aspect-ratio: 9 / 16; overflow: hidden; background: #1a1a1a; } .karta__zdjecie { display: block; width: 100%; height: 100%; object-fit: cover; object-position: top; } .karta__ekran-imie { position: absolute; left: 0; right: 0; bottom: 0; margin: 0; padding: 0.75rem 1rem; font-family: var(--czcionka-naglowek); font-weight: 500; color: #ffffff; background: linear-gradient(to top, rgba(0, 0, 0, 0.75), transparent); } /* ---- Opis pełny: widoczny bez JS i w stanie 2, ukryty w stanie 1 (karuzela) ---- */ .karta__opis { margin-top: 1.5rem; } .karta__opis-imie { font-size: clamp(1.8rem, 4vw, 2.5rem); margin-bottom: 0.75rem; } .karta__linia { width: 3rem; height: 3px; margin: 0 0 1rem; background: var(--kolor-postaci); } .karta__dane, .karta__cecha, .karta__tekst { margin-top: 0.6rem; font-size: 0.95rem; } .karta__cta { margin-top: 1.5rem; background: var(--kolor-postaci); border-color: var(--kolor-postaci); color: #121212; } /* Strzałki i miniatury: sterowanie karuzelą, bez znaczenia bez JS. */ .karuzela__strzalka, .miniatury { display: none; } .karuzela__strzalka { align-items: center; justify-content: center; width: 44px; height: 44px; padding: 0; border: 1px solid var(--linia); background: var(--tlo-kafelek); color: #ffffff; cursor: pointer; } .miniatury { list-style: none; margin: 1rem 0 0; padding: 0; gap: 1rem; } .miniatura { display: flex; align-items: center; gap: 0.5rem; padding: 0.25rem; border: 0; background: none; color: var(--tekst-kolor); cursor: pointer; } .miniatura__zdjecie { display: block; width: 48px; height: 48px; object-fit: cover; object-position: top; background: var(--tlo-kafelek); filter: grayscale(1); transition: filter 400ms ease-in-out; } .miniatura:hover .miniatura__zdjecie, .miniatura:focus-visible .miniatura__zdjecie { filter: grayscale(0); } .miniatura__imie { font-family: var(--czcionka-naglowek); font-size: 0.9rem; } /* ---- Stan 1, z JS: karuzela (coverflow) ---- */ html.js [data-stan="karuzela"] .karuzela-scena { position: relative; display: flex; align-items: center; justify-content: center; height: 420px; perspective: 1000px; } html.js [data-stan="karuzela"] .karuzela { position: relative; width: 100%; height: 100%; } html.js [data-stan="karuzela"] .karta { position: absolute; top: 50%; left: 50%; width: 200px; border-top: 0; padding-block: 0; transform: translate(-50%, -50%) translateX(calc(var(--pos, 0) * 45%)) scale(0.85) rotateY(calc(var(--pos, 0) * -10deg)); opacity: 0.55; filter: blur(2px); z-index: 1; transition: transform 500ms ease-in-out, opacity 500ms ease-in-out, filter 500ms ease-in-out; } html.js [data-stan="karuzela"] .karta[data-pos="0"] { transform: translate(-50%, -50%) translateX(0) scale(1) rotateY(0deg); opacity: 1; filter: none; z-index: 2; } html.js [data-stan="karuzela"] .karta__opis { display: none; } /* Czarno-białe zdjęcia w karuzeli, w kolorze tylko wybrana (środkowa) karta. */ html.js [data-stan="karuzela"] .karta__zdjecie { filter: grayscale(1); transition: filter 400ms ease-in-out; } html.js [data-stan="karuzela"] .karta[data-pos="0"] .karta__zdjecie { filter: grayscale(0); } html.js [data-stan="karuzela"] .karuzela__strzalka { display: flex; position: absolute; top: 50%; transform: translateY(-50%); z-index: 3; } html.js [data-stan="karuzela"] .karuzela__strzalka--lewo { left: 0; } html.js [data-stan="karuzela"] .karuzela__strzalka--prawo { right: 0; } /* Karuzela (stan 1): tylko cienki obrys na każdej karcie, bez poświaty. */ html.js [data-stan="karuzela"] .karta__ekran { box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.18); } /* Poświata jako ramka wokół wybranej karty, tylko w stanie 2 (obramowanie postaci). */ html.js [data-stan="wybrana"] .karta--aktywna .karta__ekran { box-shadow: 0 0 0 1px var(--kolor-postaci), 0 0 28px 0 rgba(255, 152, 33, 0.35); box-shadow: 0 0 0 1px var(--kolor-postaci), 0 0 28px 0 color-mix(in srgb, var(--kolor-postaci) 35%, transparent); } @media (prefers-reduced-motion: reduce) { html.js [data-stan="karuzela"] .karta { transition: none; transform: translate(-50%, -50%) translateX(calc(var(--pos, 0) * 45%)) scale(0.85); } html.js [data-stan="karuzela"] .karta[data-pos="0"] { transform: translate(-50%, -50%) translateX(0) scale(1); } } /* ---- Stan 2, z JS: wybrana karta w lewej kolumnie, opis w prawej ---- */ html.js [data-stan="wybrana"] .postacie { display: flex; flex-direction: column; gap: 1.5rem; } html.js [data-stan="wybrana"] .karuzela-scena, html.js [data-stan="wybrana"] .karuzela, html.js [data-stan="wybrana"] .karta--aktywna { display: contents; } html.js [data-stan="wybrana"] .karta:not(.karta--aktywna) { display: none; } html.js [data-stan="wybrana"] .karuzela__strzalka { display: none; } html.js [data-stan="wybrana"] .karta__wybierz { order: 1; width: 100%; max-width: 320px; cursor: default; } html.js [data-stan="wybrana"] .miniatury { order: 2; display: flex; } html.js [data-stan="wybrana"] .karta__opis { order: 3; display: block; margin-top: 0; animation: karta-opis-wejscie 300ms ease-out; } @keyframes karta-opis-wejscie { from { opacity: 0; } to { opacity: 1; } } @media (prefers-reduced-motion: reduce) { html.js [data-stan="wybrana"] .karta__opis { animation: none; } } @media (min-width: 960px) { html.js [data-stan="karuzela"] .karuzela-scena { height: 560px; } html.js [data-stan="karuzela"] .karta { width: 260px; } html.js [data-stan="wybrana"] .postacie { display: grid; grid-template-columns: minmax(280px, 380px) 1fr; gap: 3rem; align-items: start; } html.js [data-stan="wybrana"] .karta__wybierz { grid-column: 1; grid-row: 1; max-width: 380px; } html.js [data-stan="wybrana"] .miniatury { grid-column: 1; grid-row: 2; } html.js [data-stan="wybrana"] .karta__opis { grid-column: 2; grid-row: 1 / span 2; } } /* ---------- Kim jesteśmy (sekcja 4) ---------- */ .kim { display: grid; gap: 1.5rem; } .kim__tresc { display: grid; gap: 1rem; } @media (min-width: 960px) { .kim { grid-template-columns: 1fr 1fr; gap: 3rem; align-items: start; } .kim__naglowek { max-width: 22ch; } } /* ---------- Liczby (sekcja 5) ---------- */ .liczby__wstep { color: #ffffff; font-family: var(--czcionka-naglowek); font-weight: 500; font-size: 1.1rem; } .liczby { margin-top: 2rem; display: grid; gap: 1px; background: var(--linia); } @media (min-width: 640px) { .liczby { grid-template-columns: repeat(3, 1fr); } } .liczby__kafelek { background: var(--tlo); padding: 2rem 1.5rem; } .liczby__wartosc { font-family: var(--czcionka-naglowek); font-weight: 700; font-size: clamp(2.5rem, 6vw, 3.5rem); color: var(--akcent); line-height: 1; } .liczby__podpis { margin-top: 0.75rem; font-size: 0.95rem; } /* ---------- Usługi w skrócie (sekcja 6) ---------- */ .uslugi { margin-top: 2.5rem; display: grid; gap: 1px; background: var(--linia); } @media (min-width: 960px) { .uslugi { grid-template-columns: repeat(3, 1fr); } } .usluga { position: relative; background: var(--tlo); padding: 1.5rem; transition: background 0.3s ease; } .usluga:hover, .usluga:focus-within { background: var(--tlo-kafelek); } /* Fokus widoczny na całym kafelku (nie tylko na tekście tytułu), bo link jest rozciągnięty pseudo-elementem na cały kafelek (patrz .usluga__tytul a::after niżej). Outline na samym zawężony i zastąpiony tym, więc zgodne z B-001 (nigdy outline: none bez zamiennika). */ .usluga:focus-within { outline: 2px solid var(--akcent); outline-offset: -2px; } .usluga__numer, .atuty__numer { font-family: var(--czcionka-akcent); font-weight: 700; font-size: 1.5rem; color: var(--akcent); margin: 0 0 0.75rem; } .usluga__numer::after, .atuty__numer::after { content: ""; display: block; margin-top: 0.75rem; width: 2rem; height: 1px; background: var(--linia); } .usluga__tytul { font-size: 1.3rem; } .usluga__tytul a { position: relative; } .usluga__tytul a:focus-visible { outline: none; } .usluga__tytul a::after { content: ""; position: absolute; inset: 0; } .usluga__tekst { margin-top: 0.75rem; } .usluga__link { display: inline-block; margin-top: 1rem; color: var(--akcent); font-weight: 600; font-size: 0.95rem; /* position + z-index: musi wygrać z niewidocznym .usluga__tytul a::after (position: absolute, inset: 0), który leży nad całym kafelkiem, inaczej przechwytywałby kliknięcia przeznaczone dla tego odnośnika. */ position: relative; z-index: 1; } .usluga__link:hover, .usluga__link:focus-visible { color: var(--akcent); text-decoration: underline; } /* ---------- Zaufali nam: logotypy (sekcja 7, zlecenie 17) ---------- .logotypy-track zawiera dwie identyczne listy .logotypy__tor (druga aria-hidden); translateX(-50%) przesuwa dokładnie o szerokość pierwszej listy (razem z jej padding-right, który daje taki sam odstęp między listami jak gap wewnątrz), więc pętla jest bez skoku. Przy prefers-reduced-motion: animacja wyłączona, duplikat ukryty, a .logotypy-wrapper dostaje zwykły poziomy scroll. */ .logotypy-wrapper { margin-top: 2.5rem; padding: 1rem 0; overflow: hidden; } .logotypy-track { display: flex; width: max-content; animation: logotypy-przesun 60s linear infinite; } .logotypy-wrapper:hover .logotypy-track, .logotypy-wrapper:focus-within .logotypy-track { animation-play-state: paused; } .logotypy__tor { display: flex; align-items: center; gap: 3rem; padding: 0 3rem 0 0; margin: 0; list-style: none; } .logotypy__pozycja { flex: 0 0 auto; display: flex; align-items: center; } .logotypy__pozycja img { display: block; height: 40px; width: auto; max-width: 180px; object-fit: contain; filter: none; opacity: 1; transition: transform 0.3s ease; } @media (min-width: 960px) { .logotypy__pozycja img { height: 56px; } } /* Logotypy zawsze w oryginalnych kolorach (Michał 2026-09-14). Sześć naprawdę czarnych lub granatowych znaków (Cyrulicy, Söppö, Slavia, Komputronik, TrueBond, Motorola) znikałoby na ciemnym tle: odwracamy im jasność, a hue-rotate(180deg) przywraca odcień (granat zostaje niebieski, czerń robi się biała). Trzy ciemne kolorowe (Cif, Dooti Minis, Wakacje.pl) tylko rozjaśnione. Po najechaniu tylko powiększenie. */ .logotypy__pozycja.logotypy--ciemny img { filter: invert(1) hue-rotate(180deg) brightness(1.1); } .logotypy__pozycja.logotypy--jasniej img { filter: brightness(1.5) saturate(1.2); } .logotypy__pozycja:hover img, .logotypy__pozycja:focus-within img { transform: scale(1.18); } @keyframes logotypy-przesun { from { transform: translateX(0); } to { transform: translateX(-50%); } } @media (prefers-reduced-motion: reduce) { .logotypy-track { animation: none; width: auto; } .logotypy-wrapper { overflow-x: auto; } .logotypy-track ul[aria-hidden="true"] { display: none; } .logotypy__pozycja img { transition: none; } } /* ---------- Opinie (sekcja 8): karuzela klikana, jak rekomendacje na LinkedIn. Bez JS: .opinie__tor przewija się poziomo przez natywny overflow-x + scroll-snap (dotyk, gest, kółko myszy), więc karty zostają dostępne i indeksowane; tylko strzałki i kropki, które bez JS nic by nie robiły, są ukryte (spójnie z karuzelą postaci wyżej). */ .opinie { margin-top: 2.5rem; } .opinie__scena { position: relative; } .opinie__tor { position: relative; display: flex; gap: 1rem; margin: 0; padding: 0; list-style: none; overflow-x: auto; scroll-snap-type: x mandatory; -webkit-overflow-scrolling: touch; scrollbar-width: none; } .opinie__tor::-webkit-scrollbar { display: none; } .opinie__pozycja { flex: 0 0 100%; max-width: 100%; scroll-snap-align: start; } @media (min-width: 960px) { .opinie__pozycja { flex: 0 0 calc(50% - 0.5rem); max-width: calc(50% - 0.5rem); } } .opinia { height: 100%; background: var(--tlo-kafelek); border: 1px solid var(--linia); padding: 1.5rem; box-sizing: border-box; } .opinia__naglowek { display: flex; align-items: center; gap: 0.75rem; margin-bottom: 1rem; } .opinia__zdjecie { flex: 0 0 56px; width: 56px; height: 56px; display: block; object-fit: cover; background: var(--tlo-kafelek); } .opinia__zdjecie--brak { display: flex; align-items: center; justify-content: center; background: #2a2a2a; color: #ffffff; font-family: var(--czcionka-naglowek); font-weight: 600; font-size: 0.9rem; } .opinie__kropki { flex-wrap: wrap; } .opinia__imie { margin: 0; color: #ffffff; font-family: var(--czcionka-tekst); font-weight: 600; font-size: 0.95rem; } .opinia__stanowisko { margin: 0.15rem 0 0; color: var(--tekst-kolor); font-size: 0.85rem; } .opinia__tresc { margin: 0; color: var(--tekst-kolor); text-align: left; font-size: 0.95rem; } /* Strzałki: ukryte bez JS (bez klasy "js" na , jak w karuzeli postaci). */ .opinie__strzalka { display: none; } html.js .opinie__strzalka { display: flex; align-items: center; justify-content: center; position: absolute; top: 50%; transform: translateY(-50%); z-index: 3; width: 44px; height: 44px; padding: 0; border: 1px solid var(--linia); background: var(--tlo-kafelek); color: #ffffff; cursor: pointer; } html.js .opinie__strzalka--lewo { left: 0; } html.js .opinie__strzalka--prawo { right: 0; } /* Na telefonie strzałki zasłaniałyby tekst karty: tam przewija się gestem (scroll-snap), a kropki pokazują, gdzie jesteśmy. Od 960 px strzałki stoją w marginesie kontenera (2.5rem), obok kart, nie na nich. */ @media (max-width: 959px) { html.js .opinie__strzalka { display: none; } } @media (min-width: 960px) { html.js .opinie__strzalka--lewo { left: -2.5rem; } html.js .opinie__strzalka--prawo { right: -2.5rem; } } /* Kropki: ukryte bez JS, bo bez śledzenia przewinięcia nie mają znaczenia. */ .opinie__kropki { display: none; } html.js .opinie__kropki { display: flex; justify-content: center; gap: 0.5rem; margin-top: 1.5rem; } .opinie__kropka { width: 10px; height: 10px; padding: 0; border: 0; background: var(--linia); cursor: pointer; } .opinie__kropka[aria-current="true"] { background: var(--akcent); } /* ---------- Portfolio postaci: nagłówek (struktura.md, sekcja "Portfolio postaci", punkt 2). Zdjęcie w ramce 9:16 z obrysem w kolorze postaci (var(--akcent), nadpisany per strona przez body.strona-ilona itd.), telefon: zdjęcie nad tekstem, maks. 60vh. ---------- */ .postac-hero { margin-top: 2.5rem; display: grid; gap: 2rem; } .postac-hero__ekran { margin: 0 auto; width: 100%; max-width: 280px; max-height: 60vh; aspect-ratio: 9 / 16; overflow: hidden; background: var(--tlo-kafelek); border: 1px solid var(--akcent); } .postac-hero__zdjecie { display: block; width: 100%; height: 100%; object-fit: cover; object-position: top; } .postac-hero__zdanie { margin-top: 1.5rem; max-width: 60ch; } .postac-hero__cta { margin-top: 2rem; display: flex; flex-direction: column; gap: 1rem; } @media (min-width: 640px) { .postac-hero__cta { flex-direction: row; } } @media (min-width: 960px) { .postac-hero { grid-template-columns: minmax(280px, 380px) 1fr; align-items: center; gap: 3rem; } .postac-hero__ekran { max-width: none; max-height: none; } } /* Karta danych w nagłówku postaci (portfolio): wiek/wzrost, charakter, atut, w Content Sparks. Etykiety Space Mono w kolorze tekstu, wartości Inter w bieli, cienka linia między wierszami. */ .karta-danych { margin: 1.5rem 0 0; border-top: 1px solid var(--linia); } .karta-danych__wiersz { display: grid; grid-template-columns: minmax(120px, 160px) 1fr; gap: 0.5rem 1.5rem; padding: 0.9rem 0; border-bottom: 1px solid var(--linia); text-align: left; } .karta-danych dt { margin: 0; font-family: var(--czcionka-akcent); font-weight: 400; font-size: 0.8rem; text-transform: uppercase; letter-spacing: 0.06em; color: var(--tekst-kolor); } .karta-danych dd { margin: 0; color: #ffffff; font-family: var(--czcionka-tekst); max-width: none; } @media (max-width: 479px) { .karta-danych__wiersz { grid-template-columns: 1fr; gap: 0.35rem; } } /* ---------- Portfolio postaci: realizacje (punkt 3). Siatka miniatur 9:16, 2 kolumny telefon / 4 komputer, 1 px odstęp w kolorze linii. Efekt kinowy: przyciemnione i mniej nasycone, pełny kolor po najechaniu / fokusie (bez filtrowania kategorii, W-033). Zaślepki do podmiany na prawdziwe filmy z cdn.content-sparks.pl (podpisy i pliki od Michała). ---------- */ /* Linie siatki rysujemy obrysem na kartach, nie tłem kontenera. Tło kontenera pokrywa też puste komórki, więc niepełny ostatni rząd (portfolio Rocky'ego ma 5 filmów przy 4 kolumnach) wyglądał jak szary blok. */ .filmy { margin-top: 2.5rem; display: grid; grid-template-columns: repeat(2, 1fr); gap: 1px; background: none; } .filmy > .film { box-shadow: 0 0 0 1px var(--linia); } @media (min-width: 960px) { .filmy { grid-template-columns: repeat(4, 1fr); } } /* Przykłady na /tresci-na-zlecenie/: trzy grupy po trzy filmy (Ilona, Michał, Rocky). Kto nagrywał, mówi nagłówek grupy, więc podpisy filmów zostają takie same jak w portfolio: na telefonie nie łamią się na cztery linie. Trzy kolumny na komputerze dają pełny rząd na grupę; na telefonie zostają dwie kolumny wspólne dla całej strony (2 + 1). */ .przyklady__grupa { margin-top: 2.5rem; } .przyklady__kto { font-size: 1.15rem; font-weight: 500; color: var(--tekst-kolor); } .przyklady__kto a { color: var(--akcent); } .przyklady__grupa .filmy { margin-top: 1rem; } @media (min-width: 960px) { .filmy--przyklady { grid-template-columns: repeat(3, 1fr); } } .film { margin: 0; background: var(--tlo); padding-bottom: 1rem; } .film__miniatura { position: relative; aspect-ratio: 9 / 16; display: flex; align-items: center; justify-content: center; background: var(--tlo-kafelek); filter: brightness(0.7) saturate(0.6); transition: filter 300ms ease-in-out; } .film:hover .film__miniatura, .film:focus-within .film__miniatura { filter: none; } .film__odtworz { display: flex; align-items: center; justify-content: center; width: 48px; height: 48px; padding: 0; border: 1px solid #ffffff; background: rgba(18, 18, 18, 0.45); color: #ffffff; cursor: pointer; } .film__podpis { margin: 0.75rem 1rem 0; font-size: 0.85rem; color: var(--tekst-kolor); } @media (prefers-reduced-motion: reduce) { .film__miniatura { transition: none; } } /* ---------- Konta ambasadorskie: przykłady jako karty marek z odnośnikami do prawdziwych kont (TikTok, Instagram), zamiast zaślepek filmów. Siatka spójna z .filmy: 1 px odstęp w kolorze linii, karty na tle. ---------- */ .konta { margin-top: 2.5rem; display: grid; grid-template-columns: 1fr; gap: 1px; background: var(--linia); } @media (min-width: 960px) { .konta { grid-template-columns: repeat(3, 1fr); } } .konto { background: var(--tlo); padding: 1.5rem 1rem; } /* Nagłówek karty: zdjęcie profilowe konta obok nazwy marki, układ jak .opinia__naglowek. Okrąg (Michał 2026-09-14, W-039) to świadome odstępstwo od zasady „zero zaokrągleń” z design.md: tak wygląda awatar w każdym serwisie społecznościowym, a karta mówi właśnie o koncie. */ .konto__naglowek { display: flex; align-items: center; gap: 0.75rem; margin-bottom: 1rem; } .konto__zdjecie { flex: 0 0 64px; width: 64px; height: 64px; display: block; object-fit: cover; border-radius: 50%; background: var(--tlo-kafelek); } .konto__marka { margin: 0; font-size: 1.15rem; } .konto__nazwa { margin: 0.2rem 0 0; font-size: 0.85rem; color: var(--tekst-kolor); } .konto__linki { display: flex; flex-wrap: wrap; gap: 0.75rem; } .konto__link { display: inline-flex; align-items: center; gap: 0.4rem; padding: 0.5rem 0.75rem; border: 1px solid var(--linia); color: #ffffff; transition: color 200ms ease, border-color 200ms ease; } .konto__link:hover, .konto__link:focus-visible { color: var(--akcent); border-color: var(--akcent); } .konto__link svg { width: 20px; height: 20px; fill: currentColor; } /* ---------- Wyniki z panelu TikTok Shop (zrzuty od Michała 2026-10-12). Zrzuty mają zasłonięte nazwy produktów i marek; pikselizacja zrobiona przy przygotowaniu plików, nie w CSS, żeby nie dało się jej cofnąć. ---------- */ .wyniki__naglowek { margin: 3rem 0 0; font-family: var(--czcionka-naglowek); font-weight: 500; font-size: 1.3rem; color: #ffffff; } .wyniki__tekst { margin: 0.75rem 0 0; color: var(--tekst-kolor); } .zrzuty { margin-top: 1.5rem; display: grid; grid-template-columns: 1fr; gap: 1px; } @media (min-width: 640px) { .zrzuty { grid-template-columns: repeat(3, 1fr); } } .zrzut { margin: 0; display: flex; flex-direction: column; background: var(--tlo); box-shadow: 0 0 0 1px var(--linia); padding-bottom: 1rem; } .zrzut img { display: block; width: 100%; height: auto; } /* Listy filmów są bardzo wysokie (1 do 2,2) i w sumie robiły ze strony ścianę obrazów na telefonie, dlatego siedzą pod
. W środku pokazujemy górę zrzutu z przewijaniem, zamiast pełnej wysokości. */ .zrzuty--wysokie .zrzut img { max-height: 60vh; object-fit: cover; object-position: top; } .wyniki__szczegoly { margin-top: 2.5rem; border-top: 1px solid var(--linia); } .wyniki__summary { padding: 1.25rem 0; cursor: pointer; font-family: var(--czcionka-naglowek); font-weight: 500; font-size: 1.05rem; color: #ffffff; list-style: none; } .wyniki__summary::-webkit-details-marker { display: none; } .wyniki__summary::after { content: "+"; float: right; color: var(--akcent); } .wyniki__szczegoly[open] .wyniki__summary::after { content: "\2212"; } .wyniki__summary:hover, .wyniki__summary:focus-visible { color: var(--akcent); } .zrzut__podpis { margin: auto 1rem 0; padding-top: 0.75rem; font-size: 0.85rem; color: var(--tekst-kolor); } /* ---------- Portfolio postaci: atuty (punkt 5). Siatka bento z numerami 01 do 05 (jak .usluga__numer), 1 kolumna telefon, 2 od 640 px, 3 od 960 px; piąta karta zostaje sama w trzecim rzędzie. ---------- */ .atuty { margin-top: 2.5rem; display: grid; grid-template-columns: 1fr; gap: 1px; background: var(--linia); } @media (min-width: 640px) { .atuty { grid-template-columns: repeat(2, 1fr); } } @media (min-width: 960px) { .atuty { grid-template-columns: repeat(3, 1fr); } } .atuty__kafelek { background: var(--tlo); padding: 1.5rem; } /* Zlecenie 15 (drobna C): portfolio ma 5 atutów, 3 kolumny od 960 px, więc zostaje jedna pusta komórka w drugim rzędzie: bez dziecka siatki pokazuje wprost tło kontenera (var(--linia), jaśniejsze od .atuty__kafelek) i wygląda jak pusty, podświetlony kafelek. Piąta i zarazem ostatnia karta rozciąga się na dwie kolumny, więc pustej komórki nie ma. */ @media (min-width: 960px) { .atuty__kafelek:nth-child(5):last-child { grid-column: span 2; } } /* ---------- Portfolio postaci: pozostałe postacie (punkt 9). Dwie karty, miniatura 1:1. ---------- */ .inne-postacie { margin-top: 2.5rem; display: grid; gap: 1px; background: var(--linia); } @media (min-width: 640px) { .inne-postacie { grid-template-columns: repeat(2, 1fr); } } .inna-postac { display: flex; align-items: center; gap: 1rem; padding: 1.5rem; background: var(--tlo); transition: background 0.3s ease; } .inna-postac:hover, .inna-postac:focus-visible { background: var(--tlo-kafelek); } .inna-postac__zdjecie { flex: 0 0 72px; width: 72px; height: 72px; object-fit: cover; object-position: top; background: var(--tlo-kafelek); filter: grayscale(1); } .inna-postac:hover .inna-postac__zdjecie, .inna-postac:focus-visible .inna-postac__zdjecie { filter: grayscale(0); } .inna-postac__tekst { font-family: var(--czcionka-naglowek); font-weight: 500; font-size: 1.05rem; color: #ffffff; } /* Sekcje z materiałem, którego jeszcze nie dostarczył Michał (opinie, filmy portfolio, wpisy bloga): delikatnie wyszarzone, żeby na stronie testowej było widać, że to zaślepka do podmiany, nie gotowa treść. Logotypy (sekcja 7) mają już prawdziwe pliki od zlecenia 17, klasa zdjęta z partiala logotypy.html. */ .sekcja--placeholder { opacity: 0.6; } /* Blog bez wpisów: jedno zdanie zamiast kafelka-zaślepki, do czasu pierwszego wpisu pisanego w sesji z Michałem (W-014). */ .wpisy__pusto { margin-top: 2.5rem; max-width: 65ch; } .wpisy__pusto a { color: var(--akcent); } /* ---------- Strona prawna (polityka prywatności) ---------- Długi tekst do czytania, nie do skanowania: jedna kolumna o szerokości akapitu, wyraźne odstępy między sekcjami, nagłówki w rytmie strony. */ .prawne { max-width: 70ch; } .prawne__data { margin-top: 1.5rem; font-family: var(--czcionka-akcent); font-size: 0.95rem; color: var(--tekst-kolor); } .prawne__h2 { margin-top: 3rem; font-size: 1.5rem; line-height: 1.2; padding-top: 1.75rem; border-top: 1px solid var(--linia); } .prawne__h2:first-child { margin-top: 0; padding-top: 0; border-top: 0; } .prawne__h3 { margin-top: 1.75rem; font-size: 1.1rem; font-weight: 500; color: var(--naglowek-kolor); } .prawne p { margin-top: 1rem; } .prawne__lista { margin-top: 1rem; padding-left: 1.25rem; list-style: disc; } .prawne__lista li { margin-top: 0.75rem; } .prawne a { color: var(--akcent); text-decoration: underline; text-underline-offset: 0.2em; } @media (min-width: 640px) { .prawne__h2 { font-size: 1.75rem; } } /* ---------- Zapytanie: formularz (sekcja 9) ---------- */ .zapytanie__uklad { margin-top: 2.5rem; } .formularz { display: grid; gap: 1.25rem; } @media (min-width: 640px) { .formularz { grid-template-columns: 1fr 1fr; } .formularz__pole--pelna, .formularz__blad, .formularz__rodo, .formularz__akcje { grid-column: 1 / -1; } } .formularz__pole { display: flex; flex-direction: column; gap: 0.4rem; } .formularz__pole label { color: #ffffff; font-size: 0.9rem; } .formularz__pole input, .formularz__pole select, .formularz__pole textarea { background: var(--tlo-kafelek); border: 1px solid var(--linia); border-radius: 0; color: #ffffff; padding: 0.75rem 1rem; font: inherit; } .formularz__pole input::placeholder, .formularz__pole textarea::placeholder { color: #6b6b6b; } .formularz__pole select { min-height: 48px; } .formularz__pole textarea { resize: vertical; min-height: 8rem; } .formularz__blad { color: var(--akcent-ilona); border: 1px solid var(--akcent-ilona); padding: 0.75rem 1rem; } .formularz__blad a { color: inherit; text-decoration: underline; } .formularz__rodo { font-size: 0.85rem; max-width: none; } .formularz__rodo a { color: var(--akcent); text-decoration: underline; } .formularz__akcje { display: flex; flex-direction: column; gap: 0.75rem; align-items: flex-start; } @media (min-width: 640px) { .formularz__akcje { flex-direction: row; align-items: center; gap: 1.5rem; } } .formularz__obietnica { font-size: 0.9rem; } .zapytanie__kalendarz { margin-top: 1.5rem; font-size: 0.95rem; } .zapytanie__kalendarz a { color: var(--akcent); text-decoration: underline; } /* ---------- Stopka ---------- */ .site-footer { position: relative; z-index: 1; padding-block: 3rem; } .footer__grid { display: grid; grid-template-columns: 1fr; gap: 2rem; } .site-footer p { max-width: none; } .footer__linia, .footer__mail { font-size: 0.9rem; } .footer__mail a { color: var(--akcent); } .footer__linki { display: grid; grid-template-columns: 1fr; gap: 1.5rem; } .footer__naglowek { font-size: 1rem; margin-bottom: 0.75rem; } .footer__kolumna ul { display: flex; flex-direction: column; gap: 0.5rem; } .footer__kolumna a:hover, .footer__social a:hover { color: var(--akcent); } .footer__rzad { display: flex; flex-direction: column; gap: 1.5rem; } .footer__social { display: flex; gap: 0.5rem; flex-wrap: wrap; } /* Ikony platform (ścieżki Simple Icons, CC0) w kwadratach 44 px: czytelny cel dotyku, nazwa platformy dla czytników w aria-label. */ .footer__social a { display: inline-flex; align-items: center; justify-content: center; width: 44px; height: 44px; border: 1px solid var(--linia); color: #ffffff; transition: color 200ms ease, border-color 200ms ease; } .footer__social a:hover, .footer__social a:focus-visible { color: var(--akcent); border-color: var(--akcent); } .footer__social svg { width: 22px; height: 22px; fill: currentColor; } .footer__copyright { font-size: 0.85rem; color: var(--tekst-kolor); } @media (min-width: 640px) { .footer__linki { grid-template-columns: repeat(2, 1fr); } .footer__rzad { flex-direction: row; align-items: center; justify-content: space-between; flex-wrap: wrap; } } @media (min-width: 960px) { .footer__grid { grid-template-columns: 2fr 1fr 1fr 1fr; gap: 2rem; align-items: start; } .footer__linki { display: contents; } .footer__rzad, .footer__copyright { grid-column: 1 / -1; } } /* ---------- Strona 404 ---------- */ .section--blad h1 { font-size: clamp(2rem, 5vw, 3rem); margin-bottom: 1rem; } .blad__linki { margin-top: 1.5rem; display: flex; flex-wrap: wrap; gap: 1rem; } .blad__linki a { border: 1px solid #ffffff; padding: 0.5rem 1rem; } /* ---------- Strona podziękowania ---------- */ .section--dziekujemy h1 { font-size: clamp(2rem, 5vw, 3rem); margin-bottom: 1rem; } .dziekujemy__linki { margin-top: 1.5rem; display: flex; flex-wrap: wrap; gap: 1rem; } .dziekujemy__linki a { border: 1px solid #ffffff; padding: 0.5rem 1rem; } /* ---------- Podstrony usług (zlecenie 13) ---------- Nagłówek: reużywa .hero / .hero__title / .hero__subtitle / .hero__cta (design.md: "układ jak hero głównej, bez zdjęcia"), osobnej klasy nie trzeba. Poniżej sekcje własne: dla kogo (bento), jak to działa (kroki z linią), co dostajesz (lista kwadrat), przykłady i kto realizuje (reużywają .filmy / .inne-postacie), FAQ (details/summary), pozostałe usługi (reużywa .usluga, siatka dwukolumnowa). */ /* Dla kogo: bento, znacznik ▸ w Space Mono przed zdaniem */ .dla-kogo { margin-top: 2.5rem; display: grid; gap: 1px; background: var(--linia); } @media (min-width: 640px) { .dla-kogo { grid-template-columns: repeat(2, 1fr); } } @media (min-width: 960px) { .dla-kogo { grid-template-columns: repeat(4, 1fr); } } .dla-kogo__kafelek { background: var(--tlo); padding: 1.5rem; } .dla-kogo__znacznik { display: block; margin-bottom: 0.5rem; font-family: var(--czcionka-akcent); font-weight: 700; color: var(--akcent); } /* Jak to działa: kroki numerowane z pionową linią po lewej */ .kroki { list-style: none; margin: 2.5rem 0 0; padding-left: 2.75rem; position: relative; display: grid; gap: 2rem; } .kroki::before { content: ""; position: absolute; left: 0.9rem; top: 0.4rem; bottom: 0.4rem; width: 1px; background: var(--linia); } @media (min-width: 960px) { .kroki { padding-left: 3.5rem; } .kroki::before { left: 1.15rem; } } .krok { position: relative; } .krok__numer { position: absolute; left: -2.75rem; top: 0; font-family: var(--czcionka-akcent); font-weight: 700; color: var(--akcent); } @media (min-width: 960px) { .krok__numer { left: -3.5rem; } } .krok__tytul { display: block; margin-bottom: 0.35rem; color: #ffffff; font-weight: 700; } .krok__tekst { margin: 0; } /* Co dostajesz: lista z kwadratowym znacznikiem, bez zaokrągleń */ .lista-kwadrat { margin-top: 2.5rem; display: grid; gap: 0.9rem; } .lista-kwadrat li { position: relative; padding-left: 1.5rem; } .lista-kwadrat li::before { content: ""; position: absolute; left: 0; top: 0.55em; width: 8px; height: 8px; background: var(--akcent); } .lista-kwadrat + p { margin-top: 1.5rem; } /* FAQ: details/summary, linia 1px między pytaniami, ikona +/- w Space Mono */ .faq { margin-top: 2.5rem; border-top: 1px solid var(--linia); } .faq__pytanie { border-bottom: 1px solid var(--linia); padding-block: 1.25rem; } .faq__pytanie summary { cursor: pointer; list-style: none; display: flex; align-items: center; justify-content: space-between; gap: 1rem; font-family: var(--czcionka-naglowek); font-weight: 500; font-size: 1.05rem; color: #ffffff; } .faq__pytanie summary::-webkit-details-marker { display: none; } .faq__pytanie summary::after { content: "+"; flex: 0 0 auto; font-family: var(--czcionka-akcent); font-weight: 700; color: var(--akcent); font-size: 1.2rem; } .faq__pytanie[open] summary::after { content: "\2212"; } .faq__pytanie p { margin-top: 1rem; max-width: 65ch; } /* Pozostałe usługi: dwie karty, reużywa .usluga */ .pozostale-uslugi { margin-top: 2.5rem; display: grid; gap: 1px; background: var(--linia); } @media (min-width: 640px) { .pozostale-uslugi { grid-template-columns: repeat(2, 1fr); } } /* ---------- Dla twórców (zlecenie 15) ---------- Nagłówek: reużywa .hero / .hero__title / .hero__subtitle / .hero__cta, jak podstrony usług. Brzmi znajomo: reużywa .dla-kogo (bento 4 kolumny). Historie i FAQ: reużywają {{opinie}} i .faq. Zgłoszenie: reużywa .zapytanie__uklad / .formularz (formularz własny, nie partial). Poniżej sekcje własne: dwie drogi, kto uczy. */ /* Dwie drogi: dwa kafelki, jeden pod drugim na telefonie, obok siebie od 640 px (jak .pozostale-uslugi / .dla-kogo: siatka z linią 1px). */ .dwie-drogi { margin-top: 2.5rem; display: grid; gap: 1px; background: var(--linia); } @media (min-width: 640px) { .dwie-drogi { grid-template-columns: repeat(2, 1fr); } } .dwie-drogi__karta { background: var(--tlo); padding: 1.75rem; display: flex; flex-direction: column; gap: 0.85rem; } .dwie-drogi__tytul { font-size: 1.3rem; color: #ffffff; } .dwie-drogi__cena { font-weight: 600; color: #ffffff; } .dwie-drogi__cena .cena { color: var(--akcent); font-weight: 400; } .dwie-drogi__karta .btn { margin-top: 0.5rem; align-self: flex-start; } /* Kto uczy: dwie karty ze zdjęciem 1:1 (Ilona, Michał), jedna kolumna na telefonie, obok siebie od 640 px; zdanie o Rockym pod spodem. */ .kto-uczy { margin-top: 2.5rem; display: grid; gap: 1px; background: var(--linia); } @media (min-width: 640px) { .kto-uczy { grid-template-columns: repeat(2, 1fr); } } .kto-uczy__karta { background: var(--tlo); padding: 1.5rem; display: flex; gap: 1.25rem; align-items: flex-start; } .kto-uczy__zdjecie { flex: 0 0 auto; width: 96px; height: 96px; object-fit: cover; object-position: top; background: var(--tlo-kafelek); } @media (min-width: 640px) { .kto-uczy__zdjecie { width: 120px; height: 120px; } } .kto-uczy__imie { font-size: 1.1rem; color: #ffffff; margin-bottom: 0.5rem; } .kto-uczy__rocky { margin-top: 1.5rem; } /* ---------- Blog (zlecenie 15, kontener bez tła: zlecenie 16) ---------- Lista wpisów: jedna kolumna na telefonie, siatka od 640 px (miejsce na przyszłe okładki, na razie jedna zaślepka bez obrazka). Kontener bez tła: przy niepełnym rzędzie (dziś jeden wpis w siatce 3 kolumn) puste komórki nie mają czym się podświetlić. Tło i obrys na .wpis, jak w .atuty. */ .wpisy { margin-top: 2.5rem; display: grid; gap: 1px; } @media (min-width: 640px) { .wpisy { grid-template-columns: repeat(2, 1fr); } } @media (min-width: 960px) { .wpisy { grid-template-columns: repeat(3, 1fr); } } .wpis { background: var(--tlo); border: 1px solid var(--linia); padding: 1.5rem; } .wpis__data { font-family: var(--czcionka-akcent); font-size: 0.85rem; color: var(--akcent); } .wpis__tytul { margin-top: 0.5rem; font-size: 1.2rem; color: #ffffff; } .wpis__zajawka { margin-top: 0.5rem; } .wpis__link { display: inline-block; margin-top: 1rem; color: var(--akcent); font-weight: 600; font-size: 0.95rem; } /* ---------- Odtwarzacz YouTube "na klik" (zlecenie: filmy /dla-tworcow/) i filmy lokalne "na klik" (portfolio Michała, data-film, zlecenie 18). Miniatura lokalna wypełnia .film__miniatura (position: absolute, jak tło za przyciskiem play, który zostaje wyśrodkowany przez istniejący flex). Bez ciastek Google przy wczytaniu: iframe youtube-nocookie.com wstawia dopiero script.js po kliknięciu (W-016/W-018, SPEC.md). ---------- */ /* Prawdziwe filmy (z YouTube i lokalne pliki mp4) pokazujemy w pełnej jasności. Przygaszenie z .film__miniatura jest dla zaślepek (szary kafelek ma nie udawać materiału) i rozjaśnia się na najechanie, którego na telefonie nie ma (lekcja B-002). */ .film__miniatura[data-yt], .film__miniatura[data-film] { filter: none; } /* Przycisk play na zdjęciu twarzy: większy cel dotyku i ciemniejsze tło, żeby ikona była czytelna na każdym kadrze. */ .film__miniatura[data-yt] .film__odtworz, .film__miniatura[data-film] .film__odtworz { width: 64px; height: 64px; background: rgba(18, 18, 18, 0.65); } .film__miniatura[data-yt] .film__odtworz:hover, .film__miniatura[data-yt] .film__odtworz:focus-visible, .film__miniatura[data-film] .film__odtworz:hover, .film__miniatura[data-film] .film__odtworz:focus-visible { background: rgba(18, 18, 18, 0.85); border-color: var(--akcent); color: var(--akcent); } .film__obraz { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; } /* Film lokalny (data-film): przed kliknięciem ma "hidden" (dokłada script.js), więc miejsce zajmuje .film__obraz; po kliknięciu wypełnia całą miniaturę tak samo jak plakat. Bez JS atrybutu "hidden" nie ma, więc od razu widać zwykły odtwarzacz