/* ══════════════════════════════════════════════════════════════════════════ YANKEE · ARKUSZ SYSTEMU WIZUALNEGO Wzorzec: MOCKUP-SYSTEM-WIZUALNY.html · pomiary: AUDYT-wizualny-serwis.md Wdrożenie: 19.08.2026 PO CO: serwis nie miał wspólnych zmiennych. Każda podstrona powstawała jako osobny plik z wartościami wpisanymi na sztywno — stąd sześć rozmiarów H1, pięć systemów baneru, siedem szerokości kontenera i cztery czernie. Ten plik jest jedynym miejscem, w którym te wartości mają prawo istnieć. GDZIE W KASKADZIE: wczytywany w head.php ZARAZ ZA jego własnym arkuszem, a PRZED arkuszami podstron. Czyli: stare reguły powłoki < ten plik < strona. Dzięki temu podstrona, której jeszcze nie przerobiono, wygląda jak dotąd, a przerobiona przejmuje system bez walki o pierwszeństwo. CZEGO TU NIE ROBIMY: nie dotykamy treści ani układu konkretnych podstron. Tu są wyłącznie zmienne i wspólne komponenty. ══════════════════════════════════════════════════════════════════════════ */ :root{ /* ── kolory: dwie czernie zamiast czterech, jeden pomarańcz zamiast dwóch ── */ --czern:#0B0B0B; /* domknięcia, stopka */ --grafit:#14110D; /* sekcje ciemne */ --papier:#F7F7F5; /* sekcje jasne przełamane */ --biel:#FFFFFF; /* sekcje jasne podstawowe */ --akcent:#FF5F1F;--na-pom:#1A0A02; /* jedyny pomarańcz — #FF6A00 wypada */ --akcent-c:#D9430A; /* stan wciśnięcia */ --tekst:#14110D; --tekst-j:#EDE9E5; /* na ciemnym */ --mut:#6B645C; /* opis na jasnym */ --mut-c:rgba(237,233,229,.72); --linia:#E3DED7; --linia-c:rgba(255,255,255,.13); /* ── siatka: JEDNA szerokość dla całego serwisu ── */ --kontener:1680px; --margines:clamp(20px,4vw,56px); --miara:68ch; /* ograniczenie WYŁĄCZNIE dla tekstu ciągłego */ /* ── typografia: pięć stopni ── */ --fd:'Anton',Impact,sans-serif; --fb:'DM Sans',system-ui,sans-serif; --h1:clamp(36px,5vw,68px); --h2:clamp(28px,3.4vw,44px); --h3:clamp(17px,1.5vw,21px); --lead:clamp(16px,1.25vw,18px); --body:15px; /* ── komponenty ── */ --r-karta:10px; --r-btn:8px; --h-btn:44px; --rytm:clamp(56px,6vw,104px); /* odstęp pionowy sekcji */ } /* ══ SIATKA ═══════════════════════════════════════════════════════════════ */ .y-in{max-width:var(--kontener);margin:0 auto;padding:0 var(--margines)} .y-sec{padding:var(--rytm) 0} .y-sec--papier{background:var(--papier)} .y-sec--ciemna{background:var(--grafit);color:var(--tekst-j)} .y-sec--czarna{background:var(--czern);color:var(--tekst-j)} /* Sedno zmiany: kontener SZEROKI, akapit WĄSKI. Akapit na 190 znaków (dziś /onas) jest fizycznie trudny do czytania — oko gubi początek następnej linii. Norma to 60–75 znaków, stąd 68ch. Miara obowiązuje domyślnie KAŻDY akapit w treści strony, bo inaczej trzeba by ją dopisywać ręcznie w jedenastu plikach i i tak gdzieś by wypadła. Wyjątki poniżej są celowe: w kartach, komórkach tabel, listach i pasku kontaktu akapit ma się rozciągać na szerokość swojego pojemnika. */ #app p{max-width:var(--miara)} #app .y-karta p, #app .karta p, #app [class*="card"] p, #app [class*="karta"] p, #app [class*="kafel"] p, #app td p, #app th p, #app li p, #app figcaption p, #app .contact-bar p, #app footer p, #app .y-hero__sub{max-width:none} #app .y-hero__sub{max-width:52ch} /* ── SIATKA NA ISTNIEJĄCYCH SEKCJACH ────────────────────────────────────── Podstrony nie mają wspólnego pojemnika: szerokość brała się z bocznego dopełnienia sekcji (40 px), stąd w audycie siedem różnych szerokości i sześć marginesów. Zamiast dopisywać wrapper w jedenastu plikach, ujednolicamy dopełnienie i ograniczamy bezpośrednie dzieci sekcji. Efekt: jeden margines i jedna maksymalna szerokość w całym serwisie. */ #app .sec,#app .sec-dark,#app .sec-gray,#app .y-sec{ padding-left:var(--margines);padding-right:var(--margines)} #app .sec>*,#app .sec-dark>*,#app .sec-gray>*{ max-width:var(--kontener);margin-left:auto;margin-right:auto} /* Animacje wejścia (.reveal-left / .reveal-right) przesuwają element w bok, zanim się pokaże — na 390 px strona główna przewijała się przez to o 10 px. Przycinamy w poziomie na poziomie sekcji. CELOWO `clip`, nie `hidden`: `hidden` tworzy kontener przewijania i zepsułby przyklejony pasek filtrów na /akademia. `clip` tylko przycina. */ #app .sec,#app .sec-dark,#app .sec-gray,#app .y-sec{overflow-x:clip} /* ══ TYPOGRAFIA ═══════════════════════════════════════════════════════════ */ .y-h1{font-family:var(--fd);font-weight:400;font-size:var(--h1);line-height:1.02; letter-spacing:.4px;text-transform:uppercase;margin:0} .y-h2{font-family:var(--fd);font-weight:400;font-size:var(--h2);line-height:1.08; letter-spacing:.3px;text-transform:uppercase;margin:0} .y-h3{font-family:var(--fd);font-weight:400;font-size:var(--h3);line-height:1.15; letter-spacing:.2px;text-transform:uppercase;margin:0} .y-nad{display:flex;align-items:center;gap:12px;margin:0 0 14px;font-size:12px; font-weight:700;letter-spacing:.2em;text-transform:uppercase;color:var(--akcent)} .y-nad::before{content:"";width:40px;height:2px;background:var(--akcent);flex:none} .y-lead{font-size:var(--lead);line-height:1.66;color:var(--mut);margin:16px 0 0; max-width:var(--miara)} .y-sec--ciemna .y-lead,.y-sec--czarna .y-lead{color:var(--mut-c)} /* ══ BANER — JEDEN KOMPONENT ZAMIAST PIĘCIU ═══════════════════════════════ Zastępuje: hero-c, hero26__card, hero__karta, phero-inner, ck-wrap oraz baner /onas bez klasy. */ .y-hero{position:relative;min-height:97vh;display:flex;align-items:flex-end; padding-bottom:clamp(64px,9vh,132px);overflow:hidden; background:var(--czern);color:#fff} /* svh: na telefonie 97vh liczy się względem okna BEZ paska przeglądarki i baner wystaje poza ekran. To naprawia. */ @supports(min-height:100svh){.y-hero{min-height:97svh}} .y-hero__tlo{position:absolute;inset:0;z-index:0} .y-hero__slajd{position:absolute;inset:0;opacity:0;transition:opacity 1.1s ease} .y-hero__slajd.on{opacity:1} .y-hero__slajd img{width:100%;height:100%;object-fit:cover;display:block} /* Zdjęcie wstawione wprost w tło baneru (bez slajdera) też musi wypełnić kadr — inaczej rysuje się w rozmiarze własnym pliku i zostaje czarne pole. */ .y-hero__tlo>img,.y-hero__tlo>picture img{width:100%;height:100%;object-fit:cover;display:block} /* Jeden gradient dla wszystkich — tytuł ma mieć ten sam kontrast niezależnie od tego, jak jasne jest zdjęcie pod spodem. */ .y-hero__cien{position:absolute;inset:0;z-index:1;pointer-events:none; /* PRZYCIEMNIENIE BANERU — jedna reguła dla wszystkich podstron (brief 20.08). Dwie warstwy, bo chronią co innego: · pionowa — czytelność menu u góry (na jasnym zdjęciu, np. /kontakt) i bloku tekstu u dołu; · pozioma — sam blok nagłówka po lewej. Bez niej na najjaśniejszym zdjęciu w serwisie (/korty, jasna mączka) nadtytuł i przyciski traciły kontrast. Dobrane pod NAJJAŚNIEJSZE zdjęcie zestawu, żeby jedna wartość wystarczyła wszędzie i nie trzeba było wariantów per podstrona. */ background: linear-gradient(180deg, rgba(11,11,11,.42) 0%, rgba(11,11,11,.08) 30%, rgba(11,11,11,.55) 70%, rgba(11,11,11,.88) 100%), linear-gradient(90deg, rgba(11,11,11,.70) 0%, rgba(11,11,11,.26) 44%, transparent 68%)} /* Blok tytułu dostaje własną, dodatkową podkładkę. Powód: nadtytuł stoi wyżej niż nagłówek i na jasnym zdjęciu (pomarańczowe koszulki na /rodzina) gubił się mimo gradientu. Podkładka jest przywiązana do treści, więc działa niezależnie od tego, jak wysoki jest blok na danej podstronie. */ /* PRZYCIEMNIENIE BANERU — JEDNA warstwa, nie dwie (poprawka 20.08). BYŁO: pełnoekranowy cień PLUS doklejony pas pod samym tekstem. Pas miał 340 px wysokości przy banerze wysokim 873 px, więc rysował przez środek zdjęcia poziomą krawędź — to były „czarne paski". Dwie warstwy razem dawały kontrast bieli 14:1 przy normie 4,5:1, czyli zdjęcie było zaczernione trzykrotnie mocniej, niż potrzeba. JEST: sam cień, jeden płynny gradient na całą wysokość, bez krawędzi. Zmierzone na wszystkich 8 zdjęciach banerowych w serwisie: najgorszy kontrast bieli 6,5:1 — z zapasem ponad normę, a zdjęcie wreszcie widać. */ .y-hero .y-in{position:relative;z-index:2;width:100%} /* Cień pod nagłówkiem baneru. Pomiar 20.08: sam gradient nie wystarcza pomarańczowej części tytułu. Marka #FF5F1F ma fizyczny sufit kontrastu 6,9:1 (na czystej czerni), więc na jasnej mączce (/sport, /cennik, /kontakt) nie dobije do normy bez zaciemnienia zdjęcia do poziomu czarnej płyty. Cień daje kontrast LOKALNY — wokół samych liter — bez gaszenia całej fotografii. To rozwiązanie łagodzi objaw; przyczyną są zdjęcia wskazane do wymiany. */ .y-hero .y-h1{max-width:18ch;color:#fff; text-shadow:0 1px 2px rgba(11,11,11,.55), 0 3px 22px rgba(11,11,11,.72)} .y-hero .y-h1 em{display:block;font-style:normal;color:var(--akcent)} /* Wyróżnione słowo w tytule bywa w albo w (tak ma /akademia, /kontakt, /onas). Kolorujemy oba — po przeniesieniu tytułu do wspólnego baneru stara reguła z .hero-c przestała działać i „TENISOWA" zbielała. Wyjątek: .h1s na /sport to podtytuł, nie wyróżnienie — ma zostać jasny. */ .y-hero .y-h1>span:not(.h1s){color:var(--akcent)} /* Drugi wiersz tytułu na /sport siedzi w i bez tego skleja się z pierwszym („KORCIEDO"). Celowo NIE łamiemy każdego w tytule — na /akademia „TENISOWA" ma zostać w tej samej linii. */ .y-hero .y-h1 .h1s{display:block} .y-hero__sub{font-size:var(--lead);line-height:1.6;color:#EDE9E5;margin:18px 0 0; max-width:52ch} .y-hero__dol{position:absolute;left:var(--margines);bottom:22px;z-index:3; display:flex;align-items:center;gap:9px;font-size:11px;font-weight:700; letter-spacing:.18em;text-transform:uppercase;color:rgba(255,255,255,.62)} .y-hero__dol span{animation:y-sk 1.9s ease-in-out infinite} @keyframes y-sk{0%,100%{transform:translateY(0)}50%{transform:translateY(5px)}} /* Wariant dla podstron BEZ ZDJĘCIA w banerze (korty, kadra, biznes, news, cennik, sport). Baner na cały ekran zakłada fotografię — bez niej 97 vh to pusty ciemny prostokąt, czyli gorzej niż dziś. Do czasu decyzji Artura te podstrony dostają wariant niższy, z tym samym układem i pozycją tytułu. ZMIANA NA PEŁNĄ WYSOKOŚĆ = skasowanie tej jednej reguły. */ .y-hero--bez-zdjecia{min-height:55vh} @supports(min-height:100svh){.y-hero--bez-zdjecia{min-height:55svh}} .y-hero--bez-zdjecia .y-hero__tlo{ background:radial-gradient(120% 90% at 82% 0%,rgba(255,95,31,.16) 0%,rgba(255,95,31,.03) 42%,transparent 68%), var(--czern)} /* ══ KOMPONENTY ═══════════════════════════════════════════════════════════ */ .y-siatka{display:grid;grid-template-columns:repeat(auto-fill,minmax(300px,1fr));gap:14px} .y-karta{display:flex;flex-direction:column;padding:20px 22px;background:var(--biel); border:1px solid var(--linia);border-radius:var(--r-karta);text-decoration:none; color:inherit;transition:.15s ease} .y-karta:hover{transform:translateY(-2px);box-shadow:0 10px 30px rgba(11,11,11,.10)} .y-karta p{font-size:14px;line-height:1.55;color:var(--mut);margin:8px 0 0;max-width:none} .y-sec--ciemna .y-karta,.y-sec--czarna .y-karta{background:rgba(255,255,255,.045); border-color:var(--linia-c);color:var(--tekst-j)} .y-sec--ciemna .y-karta p,.y-sec--czarna .y-karta p{color:var(--mut-c)} .y-btn{display:inline-flex;align-items:center;justify-content:center;height:var(--h-btn); padding:0 22px;border:1px solid transparent;border-radius:var(--r-btn); font-family:var(--fb);font-size:13px;font-weight:700;letter-spacing:.06em; text-transform:uppercase;text-decoration:none;cursor:pointer;transition:.15s ease} .y-btn--main{background:var(--akcent);color:var(--na-pom)} .y-btn--main:hover{background:var(--akcent-c)} .y-btn--ram{background:transparent;border-color:var(--linia);color:var(--tekst)} .y-btn--ram:hover{background:rgba(11,11,11,.05)} .y-sec--ciemna .y-btn--ram,.y-sec--czarna .y-btn--ram,.y-hero .y-btn--ram{ border-color:rgba(255,255,255,.42);color:#fff} .y-sec--ciemna .y-btn--ram:hover,.y-sec--czarna .y-btn--ram:hover,.y-hero .y-btn--ram:hover{ border-color:#fff;background:rgba(255,255,255,.08)} .y-btns{display:flex;flex-wrap:wrap;gap:10px;margin-top:22px} /* ── UJEDNOLICENIE PRZYCISKÓW I KART NA ISTNIEJĄCYCH PODSTRONACH ────────── Audyt: pięć promieni przycisku (2·6·8·10·100 px) i cztery promienie karty (0·10·12·22 px). Zamiast poprawiać jedenaście plików — jedna reguła tutaj. WYŁĄCZENIA są przemyślane, nie przypadkowe: · .hero-arrow, [class*="dot"] — okrągłe sterowanie slajderem, ma zostać okrągłe · .chip, .tab — elementy filtra, mają własną wysokość i kształt pigułki · .cbar-*, .footer-* — pasek kontaktu i stopka mają swój rytm Wysokość 44 px wymuszamy jako MINIMUM (min-height), żeby nie ścisnąć przycisków, które są z założenia wyższe. */ #app .btn,#app .y-btn,#app .akd-btn,#app [class^="btn-"],#app [class*=" btn-"], #app .ck-btn,#app .btn-hero,#app .btn-ghost{ border-radius:var(--r-btn); min-height:var(--h-btn); display:inline-flex;align-items:center;justify-content:center} #app [class*="card"]:not([class*="dot"]),#app [class*="kart"], #app .ck-card,#app .news-card,#app .krok,#app .rok__k{ border-radius:var(--r-karta)} /* Sterowanie slajderem zostaje okrągłe — to nie są przyciski akcji. */ #app .hero-arrow,#app [class*="dot"]{border-radius:50%;min-height:0} /* ══ DOSTĘPNOŚĆ ═══════════════════════════════════════════════════════════ */ .y-hero a:focus-visible,.y-btn:focus-visible,.y-karta:focus-visible{ outline:3px solid var(--akcent);outline-offset:3px} @media(prefers-reduced-motion:reduce){ .y-hero__slajd{transition:none} .y-hero__dol span{animation:none} .y-karta:hover{transform:none} }