/* ===================================================================== konto.czarko.pl — podstawa: tokeny, typografia, ramy strony, przyciski. Język wizualny z makiety Mirka (WYTYCZNE-ekosystem-czarko.md, sekcja 2). UWAGA: ten plik NIE JEST tym samym co `czarko.css` w motywie WordPressa, mimo tej samej nazwy. Layout ładuje style spod `serwis.zasoby`, więc konto.czarko.pl dostaje ten arkusz, a czarko.pl i preprod swój, motywowy. Nazwy klas są wspólne — różni się wyłącznie wygląd. Zasady, które trzymają ten wygląd razem: - ostre rogi i ZERO cieni; hierarchię robią kreski i światło, - jeden wypełniony przycisk na ekran (.btn), reszta obrysowa, - kreski 1px: .35 na zewnątrz, .18 wewnątrz, - nagłówki 600 z ujemnym trackingiem, treść 400. ===================================================================== */ /* Krój w paczce, nie z serwera Google. Powód ten sam, co w aplikacji: inaczej adres IP każdego odwiedzającego trafia do Google, zanim cokolwiek kliknie — a polityka prywatności mówi, komu przekazujemy dane. Jeden plik zmienny pokrywa wagi 400-700. Licencja: fonts/OFL-*.txt */ @font-face { font-family: 'Schibsted Grotesk'; src: url('../fonts/SchibstedGrotesk-var.ttf') format('truetype-variations'); font-weight: 400 700; font-style: normal; font-display: swap; } :root { --tlo: #eceae4; --tlo-jasne: #f4f2ec; --karta: #ffffff; --zakreslenie:#ece4d4; --tekst: #111111; --tekst-slaby:rgba(17, 17, 17, .68); --tekst-cichy:rgba(17, 17, 17, .45); --kreska: rgba(17, 17, 17, .35); --kreska-cienka: rgba(17, 17, 17, .18); --cegla: #b8341f; --cegla-hover:#962714; --ciemne: #111111; --ciemne-tekst: #f0ece3; --ciemne-akcent:#e2726b; --zieleń: #2f5d47; --font: 'Schibsted Grotesk', system-ui, -apple-system, 'Segoe UI', sans-serif; --mono: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; } /* Tryb ciemny. Wybór siedzi w `data-motyw` na i ustawia go skrypt w jeszcze przed pierwszym malowaniem. Trzy stany, nie dwa: - brak atrybutu = idziemy za ustawieniem systemu, - data-motyw="dark" / "light" = świadomy wybór, bije system. Barwy z wytycznych: sekcje ciemne #111 z tekstem #f0ece3 i akcentem #e2726b. Akcent jest jaśniejszy niż cegła, bo ceglasty na czerni ma za mały kontrast — a wytyczne wymagają 4.5:1. */ @media (prefers-color-scheme: dark) { :root:not([data-motyw="light"]) { --tlo: #14120f; --tlo-jasne: #1b1815; --karta: #1f1c18; --zakreslenie:#2b241a; --tekst: #f0ece3; --tekst-slaby:rgba(240, 236, 227, .7); --tekst-cichy:rgba(240, 236, 227, .46); --kreska: rgba(240, 236, 227, .32); --kreska-cienka: rgba(240, 236, 227, .16); --cegla: #e2726b; --cegla-hover:#f0938c; --zieleń: #7fb497; } } :root[data-motyw="dark"] { --tlo: #14120f; --tlo-jasne: #1b1815; --karta: #1f1c18; --zakreslenie:#2b241a; --tekst: #f0ece3; --tekst-slaby:rgba(240, 236, 227, .7); --tekst-cichy:rgba(240, 236, 227, .46); --kreska: rgba(240, 236, 227, .32); --kreska-cienka: rgba(240, 236, 227, .16); --cegla: #e2726b; --cegla-hover:#f0938c; --zieleń: #7fb497; } *, *::before, *::after { box-sizing: border-box; } html { -webkit-text-size-adjust: 100%; } body { margin: 0; background: var(--tlo); color: var(--tekst); font: 400 16px/1.7 var(--font); -webkit-font-smoothing: antialiased; } h1, h2, h3 { margin: 0; font-weight: 600; text-wrap: balance; } p { margin: 0 0 1em; } p:last-child { margin-bottom: 0; } a { color: var(--cegla); text-underline-offset: 3px; } a:hover { color: var(--cegla-hover); } /* Widoczny focus jest wymogiem z wytycznych (WCAG 2.2 AA), nie ozdobą: 3 px cegły z odstępem 3 px. */ :focus-visible { outline: 3px solid var(--cegla); outline-offset: 3px; } img { max-width: 100%; height: auto; } .container { max-width: 1080px; margin: 0 auto; padding: 0 24px; } .visually-hidden { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; } .skip-link:focus { position: fixed; top: 10px; left: 10px; z-index: 100; width: auto; height: auto; margin: 0; padding: 12px 18px; clip: auto; background: var(--ciemne); color: var(--ciemne-tekst); text-decoration: none; } /* ── Nagłówek strony ───────────────────────────────────────────────── */ .site-header { background: var(--tlo); border-bottom: 1px solid var(--kreska); position: sticky; top: 0; z-index: 10; } .site-header__inner { display: flex; align-items: center; justify-content: space-between; gap: 20px; min-height: 68px; flex-wrap: wrap; } .logo { font: 600 19px/1 var(--font); letter-spacing: -.5px; color: var(--tekst); text-decoration: none; white-space: nowrap; } .logo span { color: var(--cegla); } .logo:hover { color: var(--tekst); } .czk-app-nav { display: flex; align-items: center; gap: 4px; flex-wrap: wrap; } .czk-app-nav a, .czk-app-nav .czk-linklike { display: inline-flex; align-items: center; min-height: 44px; padding: 0 12px; font: 500 14.5px/1 var(--font); color: var(--tekst); text-decoration: none; white-space: nowrap; } .czk-app-nav a:hover, .czk-app-nav .czk-linklike:hover { color: var(--cegla); text-decoration: underline; text-underline-offset: 6px; } .czk-app-nav a[aria-current="page"] { color: var(--cegla); text-decoration: underline; text-underline-offset: 6px; } /* ── Przełącznik jasny/ciemny ────────────────────────────────────────── Kształt przepisany z makiety Mirka: tor 38x20, kropka 14x14 skacząca z 2 na 20 px, po włączeniu w kolorze akcentu, obok księżyc. To JEDYNE zaokrąglenie w całym systemie — przy znanym kształcie przełącznika ostre rogi czytałyby się jak usterka, nie jak decyzja. Różnica wobec oryginału: pionowy padding daje 44 px celu dotykowego, czego wymagają wytyczne (WCAG 2.2 AA). Wygląd bez zmian. */ .czk-motyw { display: flex; align-items: center; gap: 8px; background: none; border: none; padding: 12px 8px; min-height: 44px; color: var(--tekst); cursor: pointer; } .czk-motyw__tor { position: relative; width: 38px; height: 20px; flex: none; border: 1px solid var(--kreska-mocna, rgba(17, 17, 17, .5)); border-radius: 999px; } .czk-motyw__kropka { position: absolute; top: 2px; left: 2px; width: 14px; height: 14px; border-radius: 50%; background: var(--tekst); transition: left .15s, background .15s; } .czk-motyw[aria-checked="true"] .czk-motyw__kropka { left: 20px; background: var(--cegla); } .czk-motyw:hover .czk-motyw__tor { border-color: var(--cegla); } :root[data-motyw="dark"] .czk-motyw__tor { border-color: rgba(240, 236, 227, .5); } @media (prefers-color-scheme: dark) { :root:not([data-motyw="light"]) .czk-motyw__tor { border-color: rgba(240, 236, 227, .5); } } .czk-badge { display: inline-block; margin-left: 6px; padding: 2px 7px; background: var(--cegla); color: #fff; font: 600 11px/1.5 var(--mono); font-variant-numeric: tabular-nums; } .czk-inline-form { display: inline; margin: 0; } .czk-linklike { background: none; border: none; padding: 0; cursor: pointer; font: inherit; color: inherit; } /* ── Treść ─────────────────────────────────────────────────────────── */ .czk-app-main { padding: 40px 0 72px; min-height: 60vh; } /* ── Przyciski ───────────────────────────────────────────────────────── Wytyczne: JEDEN wypełniony ceglasty na ekran, reszta obrysowa. Dlatego `.btn` (główne zatwierdzenie formularza) jest wypełniony, a `.btn--small` — używany w kafelkach i tabelach, więc z natury drugoplanowy — obrysowy. */ .btn { display: inline-flex; align-items: center; justify-content: center; min-height: 52px; padding: 0 26px; background: var(--cegla); color: #fff; border: 1px solid var(--cegla); border-radius: 0; font: 600 15px/1 var(--font); letter-spacing: .01em; text-decoration: none; cursor: pointer; } .btn:hover { background: var(--cegla-hover); border-color: var(--cegla-hover); color: #fff; } .btn:active { transform: translateY(1px); } .btn--small, .btn--outline, .btn--ghost { min-height: 44px; padding: 0 16px; background: transparent; color: var(--tekst); border: 1px solid var(--kreska); font: 500 14px/1 var(--font); } .btn--small:hover, .btn--outline:hover, .btn--ghost:hover { background: transparent; border-color: var(--cegla); color: var(--cegla); } .btn--danger { background: transparent; color: var(--cegla); border-color: var(--cegla); } .btn--danger:hover { background: var(--cegla); color: #fff; } .btn[disabled], .btn[aria-disabled="true"] { opacity: .45; pointer-events: none; } /* ── Stopka ────────────────────────────────────────────────────────── */ .site-footer { border-top: 1px solid var(--kreska); padding: 28px 0 40px; font-size: 14px; color: var(--tekst-slaby); } .site-footer__inner { display: flex; flex-wrap: wrap; gap: 18px 32px; align-items: center; } .site-footer__links { display: flex; flex-wrap: wrap; gap: 20px; list-style: none; margin: 0; padding: 0; } .site-footer__links a { color: var(--tekst-slaby); text-decoration: none; } .site-footer__links a:hover { color: var(--cegla); text-decoration: underline; text-underline-offset: 3px; } .site-footer__legal { margin: 0; font: 500 12px/1.5 var(--mono); color: var(--tekst-cichy); } .site-footer__pay { margin-left: auto; opacity: .8; } @media (max-width: 640px) { .container { padding: 0 18px; } .site-header__inner { min-height: 0; padding: 10px 0; } .site-footer__pay { margin-left: 0; } } @media (prefers-reduced-motion: reduce) { * { transition: none !important; animation: none !important; } .btn:active { transform: none; } }