/* ============================================================================ * MEX *Light — wspólny system designu rodziny serwisów * ---------------------------------------------------------------------------- * ŹRÓDŁO PRAWDY: BookLight „Bold Direction" * ~/PycharmProjects/BookLight/BookLight/design/bold-direction.css * (opis systemu: ~/PycharmProjects/BookLight/BookLight/design/ * bold-direction-styleguide.html) * Przeniesione: TOKENY (--c-* / --f-* / --t-* / --r-* / --sh-*), reset, dot-grid, * typografia, karta z narożnikami nawiasowymi, tabele, przyciski, formularze, * plakietki, panele, listy podpowiedzi, modal, stopka podpisowa. * * CZEGO ŚWIADOMIE NIE PRZENIESIONO * · aliasów zgodności BookLighta `--gray-*`, `--brand-*`, `--seat-*`, * `--success-*`, `--warning-*` … — to warstwa kompatybilności ze STARSZYM * systemem tamtej aplikacji; u nas semantyka ma własne nazwy * (`--c-ok` / `--c-warn` / `--c-bad` / `--c-info` + ich wersje „soft"); * · klas z domeny kolejowej BookLighta (`.badge.merits`, `.seat-free`, * `.leg-stats`, `.res-actionbar`, `.qf-train-found`) — nasza domena to * sprzedaż i rozliczenia, nie rozkład i miejscówki; * · polskich etykiet w `content:` (`content: "BAGAŻ"`) — tekst należy do * HTML, arkusz nie ma prawa go dopisywać. * * GDZIE ŻYJE TEN PLIK (decyzja) * Kanonicznie JEDEN plik: `design/mex-design.css` w korzeniu monorepo. * Każdy serwis ma w swoim `static/` SYMLINK do niego i serwuje go własną * trasą `GET /mex-design.css`. Dlaczego tak, a nie inaczej: * · kopia per serwis rozjechałaby się po pierwszej poprawce (oba UI to * vanilla JS bez build stepu, więc nie ma kroku, który by je scalił); * · plik serwowany przez JEDEN serwis wiązałby wygląd kanału z dostępnością * panelu — kanał ma wyglądać także wtedy, gdy SaleLight leży; * · symlink w monorepo nie może się rozjechać i nie wymaga builda. * NOWY SERWIS RODZINY: (1) `ln -s ../../design/mex-design.css * /static/mex-design.css`, (2) trasa zwracająca ten plik, * (3) ``, (4) blok tokenów chrome w sekcji * „TOŻSAMOŚĆ SERWISU" poniżej (~4 wartości). * * CZEGO WYMAGA * TRZECH KROJÓW: Space Grotesk / Inter / JetBrains Mono. Bez nich system * wygląda jak zwykły bootstrap. Ładujemy je z Google Fonts — tak samo jak * BookLight (`` + `css2?family=…&display=swap`). * Każdy stack ma fallback systemowy, więc zablokowane CDN degraduje wygląd, * nie łamie układu. * * ZASADY, KTÓRYCH NIE „NAPRAWIAMY" * 1. KWADRAT — promienie kończą się na 4 px (`--r-4`), karty mają 0 i rysują * narożniki nawiasowe przez ::before/::after. To podpis systemu, dlatego * karta nie potrzebuje ani cienia, ani promienia. * 2. TRZY GŁOSY — nagłówki Space Grotesk (-0.02em), proza Inter 13 px, * etykiety/dane/kody JetBrains Mono. Etykieta formularza: mono, UPPERCASE, * 10.5 px, letter-spacing 0.06em. * 3. JEDEN AKCENT — żółć `--c-signal` w JEDNYM miejscu na ekran (panel: * aktywna zakładka; kanał: aktywny krok ścieżki zakupu). Indygo to MARKA, * nie akcent. Żółć działa, bo papier jest ciepły (#f7f6f1) — na czystej * bieli wygląda tanio, więc nie zmieniaj papieru bez zejścia z nasyceniem. * 4. tabular-nums globalnie — to narzędzia operatorskie, cyfry stoją w * kolumnach; kwoty dodatkowo mono i do prawej (`.r`). * * ODSTĘPSTWO OD BOOKLIGHTA (jedno, świadome) * `input/select/textarea { width: 100% }` — nasze formularze to siatki pól * (`.row > div`), a nie inline'owe pola BookLighta. Oba pliki HTML już na tym * stoją (mają lokalne wyjątki dla checkboxów), więc zdjęcie tego rozwaliłoby * układ. Checkboxy są z tego wyłączone tutaj, nie w plikach. * ========================================================================= */ /* ═══════════════════════════════════════════════════════════════════════ */ /* TOKENY */ /* ═══════════════════════════════════════════════════════════════════════ */ :root { /* ── neutrale ── */ --c-ink: #0c0d10; --c-ink-soft: #1a1b20; --c-ink-2: #26282f; --c-line: #2d3038; --c-paper: #f7f6f1; /* CIEPŁY papier — warunek działania żółci */ --c-paper-2: #efece4; --c-paper-3: #e5e1d4; --c-gray-1: #2a2b30; --c-gray-2: #6b6d75; --c-gray-3: #9d9fa6; --c-gray-4: #c7c6c0; /* ── marka · indygo (marka, NIE akcent) ── */ --c-brand: #4f46e5; --c-brand-hi: #6366f1; --c-brand-lo: #3730a3; /* ── akcent (JEDEN na ekran) ── */ --c-signal: #fbbf24; --c-signal-hi: #fde68a; --c-acid: #d4ff3a; /* ── semantyka stanów (własne nazwy, nie aliasy BookLighta) ── */ --c-ok: #1f9d55; --c-ok-ink: #14773d; --c-ok-soft: #e7f7ee; --c-warn: #b8860b; --c-warn-ink: #8a6307; --c-warn-soft: #fdf3df; --c-bad: #ff4838; --c-bad-ink: #9b2626; --c-bad-soft: #fde8e8; --c-info: #2563a8; --c-info-ink: #1c4a7d; --c-info-soft: #e6f1fb; --c-red: var(--c-bad); /* ── trzy głosy ── */ --f-display: "Space Grotesk", -apple-system, system-ui, sans-serif; --f-sans: "Inter", -apple-system, system-ui, sans-serif; --f-mono: "JetBrains Mono", ui-monospace, "SF Mono", Menlo, monospace; /* ── skala tekstu ── */ --t-xs: 11px; --t-sm: 12px; --t-base: 13px; --t-md: 14px; --t-lg: 16px; --t-xl: 20px; --t-2xl: 24px; /* ── promienie: system jest KWADRATOWY, koniec na 4 px ── */ --r-1: 0; --r-2: 2px; --r-3: 3px; --r-4: 4px; --sh-1: 0 1px 0 rgba(15,15,12,.04), 0 1px 2px rgba(15,15,12,.06); --sh-2: 0 2px 4px rgba(15,15,12,.06), 0 4px 12px rgba(15,15,12,.08); } /* ═══════════════════════════════════════════════════════════════════════ */ /* TOŻSAMOŚĆ SERWISU — jedna rodzina, rozpoznawalne członki */ /* ----------------------------------------------------------------------- */ /* Komponenty NIGDY nie kodują koloru na sztywno; belka i marker czytają */ /* tokeny chrome. Rozróżnienie robi kolor BELKI + nazwa i rola w nagłówku, */ /* nie inny zestaw komponentów — dlatego serwisy widać jako jedną rodzinę. */ /* Dodanie serwisu = skopiowanie jednego bloku i podmiana ~4 wartości. */ /* ═══════════════════════════════════════════════════════════════════════ */ body { --c-chrome: var(--c-ink); /* tło belki górnej */ --c-chrome-ink: #ffffff; /* tekst na belce */ --c-chrome-mut: var(--c-gray-3); /* tekst drugoplanowy na belce */ --c-chrome-line: var(--c-line); /* linie/obwódki na belce */ --c-mark: var(--c-signal); /* tło kwadratu-znaku serwisu */ --c-mark-ink: var(--c-ink); /* litera w kwadracie-znaku */ } /* SaleLight — narzędzie operatora: belka grafitowa, znak żółty. */ body[data-service="salelight"] { --c-chrome: #0c0d10; --c-chrome-mut: #9d9fa6; --c-chrome-line: #2d3038; --c-mark: var(--c-signal); --c-mark-ink: var(--c-ink); } /* ChannelLight — kanał sprzedaży (kupujący): belka indygo, znak papierowy. */ body[data-service="channellight"] { --c-chrome: #312e81; --c-chrome-mut: #b9b6ee; --c-chrome-line: #4b46a8; --c-mark: var(--c-paper); --c-mark-ink: #312e81; } /* PORTAL — belka grafitowa, znak żółty (punkt wejścia do ekosystemu) */ body[data-service="portal"] { --chrome-bg: #0c0d10; --chrome-fg: #f7f6f1; --chrome-mark-bg: var(--c-signal); --chrome-mark-fg: #0c0d10; } /* NETLIGHT — belka morska (sieć jest wspólna, nie należy do przewoźnika), znak papierowy */ body[data-service="netlight"] { --chrome-bg: #0f5c6b; --chrome-fg: #f7f6f1; --chrome-mark-bg: #f7f6f1; --chrome-mark-fg: #0f5c6b; } /* SmartLight — PWA kasjera/konduktora (sprzedaż offline): belka butelkowa zieleń, znak żółty — terminal w terenie ma się odróżniać od panelu i kanału na pierwszy rzut oka, bo bywa używany w biegu. */ body[data-service="smartlight"] { --c-chrome: #14532d; --c-chrome-mut: #a7d3b4; --c-chrome-line: #1e6b3a; --c-mark: var(--c-signal); --c-mark-ink: #14532d; } /* ═══════════════════════════════════════════════════════════════════════ */ /* Reset / baza */ /* ═══════════════════════════════════════════════════════════════════════ */ *, *::before, *::after { box-sizing: border-box; } html, body { margin: 0; padding: 0; } body { background: var(--c-paper); color: var(--c-ink); font-family: var(--f-sans); font-size: var(--t-base); line-height: 1.55; -webkit-font-smoothing: antialiased; font-variant-numeric: tabular-nums; /* podpisowe tło w kropki */ background-image: radial-gradient(circle at 1px 1px, rgba(12,13,16,0.05) 1px, transparent 0); background-size: 16px 16px; min-height: 100vh; } a { color: var(--c-brand-lo); text-decoration: none; } a:hover { text-decoration: underline; } /* ═══════════════════════════════════════════════════════════════════════ */ /* Typografia */ /* ═══════════════════════════════════════════════════════════════════════ */ h1, h2, h3, h4 { font-family: var(--f-display); margin: 0 0 .5rem; letter-spacing: -0.02em; } h1 { font-size: var(--t-2xl); font-weight: 600; } h2 { font-size: var(--t-lg); font-weight: 600; margin: 0 0 .6rem; } h3 { font-size: var(--t-md); font-weight: 600; margin: 1.1rem 0 .4rem; } p { margin: .4rem 0 .8rem; } b, strong { font-weight: 600; } code, .mono { font-family: var(--f-mono); font-size: 11.5px; } code { background: var(--c-paper-2); padding: 1px 5px; border-radius: var(--r-2); } .small { font-size: var(--t-sm); } .mut { color: var(--c-gray-2); } .r { text-align: right; } /* dane liczbowe stoją w kolumnach — kwoty mono i do prawej */ td.r, .bd-num, .price { font-family: var(--f-mono); } /* nagłówek sekcji z kreską (podpis systemu) */ .eyebrow { display: flex; align-items: center; gap: 12px; font-family: var(--f-mono); font-size: var(--t-xs); color: var(--c-gray-2); text-transform: uppercase; letter-spacing: 0.08em; margin-bottom: 14px; } .eyebrow::before { content: ""; width: 24px; height: 1px; background: var(--c-ink); } /* ═══════════════════════════════════════════════════════════════════════ */ /* Belka górna — jedyne miejsce, w którym serwisy różnią się kolorem */ /* ═══════════════════════════════════════════════════════════════════════ */ .topbar { background: var(--c-chrome); color: var(--c-chrome-ink); border-bottom: 3px solid var(--c-mark); } .topbar__inner { display: flex; align-items: center; gap: 18px; flex-wrap: wrap; padding: 12px 22px; } .brand { display: flex; align-items: center; gap: 10px; min-width: 0; } .brand__mark { width: 30px; height: 30px; flex: 0 0 30px; background: var(--c-mark); color: var(--c-mark-ink); font-family: var(--f-display); font-weight: 700; font-size: 17px; display: grid; place-items: center; letter-spacing: -0.04em; } .brand__text { line-height: 1.15; min-width: 0; } .brand__name { font-family: var(--f-display); font-weight: 700; font-size: 18px; letter-spacing: -0.02em; color: var(--c-chrome-ink); } .brand__tag { font-family: var(--f-mono); font-size: 10px; color: var(--c-chrome-mut); text-transform: uppercase; letter-spacing: 0.1em; } /* proza w belce (podtytuł, statusy) */ .topbar .sub, .topbar__desc, .topbar__meta { font-family: var(--f-mono); font-size: 10.5px; color: var(--c-chrome-mut); text-transform: uppercase; letter-spacing: 0.06em; } .topbar__meta { display: flex; align-items: center; gap: 14px; margin-left: auto; } /* opis roli serwisu: nigdy nie zawija belki — na wąskim ekranie znika, bo nazwa serwisu i jego rola (.brand__tag) mówią to samo krócej */ .topbar__desc { flex: 0 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } /* ═══════════════════════════════════════════════════════════════════════ */ /* KAFLE-NAWIGATORY (.tiles/.tile) — „co mogę tu zrobić" na jednym ekranie */ /* */ /* Różnią się od `.cards` ROLĄ: `.cards` to slab z LICZBAMI (ile dziś */ /* sprzedano), a `.tile` to WEJŚCIE w obszar pracy — klikalne, z własnym */ /* stanem. Mieszanie obu w jednym komponencie kończyło się kaflem, który */ /* wygląda na klikalny, a nie jest. */ /* */ /* Trzy zasady rodziny obowiązują: kwadrat (0 px + narożniki nawiasowe), */ /* trzy głosy (Space Grotesk / Inter / JetBrains Mono) i JEDEN akcent — */ /* żółć zostaje aktywnej zakładce, więc kafel podświetla się MARKĄ. */ /* ═══════════════════════════════════════════════════════════════════════ */ .tiles { display: grid; grid-template-columns: repeat(auto-fill, minmax(232px, 1fr)); gap: 12px; margin-bottom: 20px; } .tile { position: relative; display: flex; flex-direction: column; gap: 8px; padding: 16px 16px 14px; min-height: 118px; background: var(--c-paper); border: 1px solid var(--c-line-soft, #d8d4c6); border-radius: 0; cursor: pointer; text-align: left; text-decoration: none; color: inherit; font: inherit; transition: border-color .12s ease, transform .12s ease; } /* narożniki nawiasowe zamiast cienia — jak karty w całej rodzinie */ .tile::before, .tile::after { content: ""; position: absolute; width: 9px; height: 9px; border: 1px solid var(--c-brand); opacity: 0; transition: opacity .12s ease; } .tile::before { top: -1px; left: -1px; border-width: 1px 0 0 1px; } .tile::after { bottom: -1px; right: -1px; border-width: 0 1px 1px 0; } .tile:hover, .tile:focus-visible { border-color: var(--c-brand); transform: translateY(-1px); outline: none; } .tile:hover::before, .tile:hover::after, .tile:focus-visible::before, .tile:focus-visible::after { opacity: 1; } .tile__mark { width: 26px; height: 26px; display: grid; place-items: center; background: var(--c-ink); color: var(--c-paper); font-family: var(--f-mono); font-size: 11px; font-weight: 600; letter-spacing: 0; flex: none; } .tile__title { font-family: var(--f-display); font-weight: 600; font-size: 15px; letter-spacing: -0.02em; line-height: 1.2; } .tile__desc { font-size: 12px; line-height: 1.45; color: var(--c-gray-2, #5b6070); } /* stan kafla — mono, jak każda dana w rodzinie; kolor niesie SEMANTYKA, nie akcent (ok/warn/bad to stany, nie wyróżnienie wizualne) */ .tile__state { margin-top: auto; padding-top: 8px; display: flex; align-items: center; gap: 6px; font-family: var(--f-mono); font-size: 10.5px; text-transform: uppercase; letter-spacing: 0.06em; color: var(--c-gray-3); } .tile__state::before { content: ""; width: 6px; height: 6px; background: var(--c-gray-3); flex: none; } .tile--ok .tile__state::before { background: var(--c-ok); } .tile--warn .tile__state::before { background: var(--c-warn); } .tile--bad .tile__state::before { background: var(--c-bad); } .tile--ok .tile__state { color: var(--c-ok-ink); } .tile--warn .tile__state { color: var(--c-warn-ink); } .tile--bad .tile__state { color: var(--c-bad-ink); } .tile__head { display: flex; align-items: center; gap: 10px; } @media (max-width: 1250px) { .topbar__desc { display: none; } } .topbar a { color: var(--c-chrome-mut); } .topbar a:hover { color: var(--c-chrome-ink); } /* puls stanu (żywy serwis) */ .pulse { display: inline-flex; align-items: center; gap: 8px; padding: 4px 9px; border: 1px solid var(--c-chrome-line); border-radius: var(--r-4); font-family: var(--f-mono); font-size: 10.5px; color: var(--c-chrome-mut); letter-spacing: 0.04em; text-transform: uppercase; } .pulse .dot { width: 7px; height: 7px; border-radius: 99px; background: var(--c-acid); animation: mex-pulse 2s infinite; } @keyframes mex-pulse { 0% { box-shadow: 0 0 0 0 rgba(212,255,58,0.5); } 70% { box-shadow: 0 0 0 9px rgba(212,255,58,0); } 100% { box-shadow: 0 0 0 0 rgba(212,255,58,0); } } @media (prefers-reduced-motion: reduce) { .pulse .dot { animation: none; } } /* pasek linków do pozostałych serwisów rodziny */ .stackbar { background: var(--c-ink-soft); border-bottom: 1px solid var(--c-chrome-line); padding: 7px 22px; display: flex; flex-wrap: wrap; gap: 7px; align-items: center; } .stackbar .lbl { font-family: var(--f-mono); font-size: 10px; color: var(--c-gray-3); text-transform: uppercase; letter-spacing: 0.1em; margin-right: 4px; } .stackbar a { display: inline-flex; align-items: center; gap: 6px; padding: 3px 10px; font-family: var(--f-mono); font-size: 10.5px; color: var(--c-gray-3); background: transparent; border: 1px solid var(--c-chrome-line); border-radius: var(--r-2); text-transform: uppercase; letter-spacing: 0.04em; } .stackbar a:hover { background: var(--c-ink-2); color: #fff; text-decoration: none; } .stackbar a .dotp { width: 6px; height: 6px; border-radius: 99px; background: var(--c-acid); } /* „jesteś tutaj" — inwersja na papier, NIE akcent: żółć na ekranie należy do aktywnej zakładki, a dwa akcenty znoszą się wzajemnie. */ .stackbar a.self { background: var(--c-paper); color: var(--c-ink); border-color: var(--c-paper); font-weight: 600; } .stackbar a.self:hover { background: var(--c-paper); color: var(--c-ink); } .stackbar a.self .dotp { background: var(--c-ink); } /* ═══════════════════════════════════════════════════════════════════════ */ /* Zakładki (rail pod belką) — AKCENT nr 1 w panelu operatora */ /* ═══════════════════════════════════════════════════════════════════════ */ nav.tabs { display: flex; flex-wrap: wrap; gap: 0; padding: 0 22px; background: var(--c-paper-2); border-bottom: 1px solid var(--c-paper-3); } nav.tabs button { height: 34px; padding: 0 15px; background: transparent; color: var(--c-gray-2); border: none; border-bottom: 2px solid transparent; border-radius: 0; font-family: var(--f-mono); font-size: 10.5px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.06em; cursor: pointer; display: inline-flex; align-items: center; gap: 7px; transition: 100ms; } nav.tabs button:hover { background: var(--c-paper-3); color: var(--c-ink); } nav.tabs button.on { background: var(--c-signal); color: var(--c-ink); border-bottom-color: var(--c-ink); } /* ═══════════════════════════════════════════════════════════════════════ */ /* Karta · narożniki nawiasowe (podpis systemu — bez cienia, bez promienia) */ /* ═══════════════════════════════════════════════════════════════════════ */ .card, .panel, section.sheet { background: #fff; border: 1px solid var(--c-paper-3); border-radius: 0; padding: 18px; position: relative; } .card::before, .card::after, .panel::before, .panel::after, section.sheet::before, section.sheet::after { content: ""; position: absolute; width: 12px; height: 12px; border-color: var(--c-ink); border-style: solid; pointer-events: none; } .card::before, .panel::before, section.sheet::before { top: -1px; left: -1px; border-width: 1px 0 0 1px; } .card::after, .panel::after, section.sheet::after { bottom: -1px; right: -1px; border-width: 0 1px 1px 0; } .card__head { display: flex; align-items: baseline; gap: 12px; padding-bottom: 12px; margin-bottom: 14px; border-bottom: 1px dashed var(--c-paper-3); } .card__title { font-family: var(--f-display); font-size: var(--t-lg); font-weight: 600; letter-spacing: -0.02em; margin: 0; } .card__num { font-family: var(--f-mono); font-size: 10.5px; color: var(--c-gray-2); background: var(--c-paper-2); padding: 3px 7px; text-transform: uppercase; letter-spacing: 0.08em; } .card__actions { margin-left: auto; display: flex; gap: 8px; } /* ═══════════════════════════════════════════════════════════════════════ */ /* Kafle liczbowe (dashboard) — slab atramentowy jak w BookLighcie */ /* ═══════════════════════════════════════════════════════════════════════ */ .cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); gap: 0; background: var(--c-ink); padding: 22px 24px; position: relative; margin-bottom: 18px; } .cards::before, .cards::after { content: ""; position: absolute; width: 11px; height: 11px; border: 1px solid var(--c-signal); } .cards::before { top: 7px; left: 7px; border-right: none; border-bottom: none; } .cards::after { bottom: 7px; right: 7px; border-left: none; border-top: none; } .cards .card { background: transparent; border: none; padding: 0 22px; border-left: 1px solid var(--c-line); } .cards .card::before, .cards .card::after { display: none; } .cards .card:first-child { border-left: none; padding-left: 0; } .cards .card .l { font-family: var(--f-mono); font-size: 10px; text-transform: uppercase; letter-spacing: 0.08em; color: var(--c-gray-3); margin-bottom: 8px; display: flex; align-items: center; gap: 8px; } .cards .card .l::after { content: ""; flex: 1; height: 1px; background: linear-gradient(90deg, var(--c-line), transparent); } .cards .card .v { font-family: var(--f-display); font-weight: 600; font-size: 28px; line-height: 1; letter-spacing: -0.03em; color: #fff; } /* ═══════════════════════════════════════════════════════════════════════ */ /* Tabele — dane liczbowe w kolumnach */ /* ═══════════════════════════════════════════════════════════════════════ */ .table-wrap { overflow-x: auto; } table { width: 100%; border-collapse: collapse; font-size: var(--t-base); } th { text-align: left; padding: 8px 9px; font-family: var(--f-mono); font-size: 10px; font-weight: 600; color: var(--c-gray-2); background: var(--c-paper-2); border-bottom: 1px solid var(--c-paper-3); text-transform: uppercase; letter-spacing: 0.06em; white-space: nowrap; } td { padding: 8px 9px; border-bottom: 1px dashed var(--c-paper-3); vertical-align: top; } tbody tr:last-child td { border-bottom: none; } tbody tr:hover td { background: var(--c-paper); } /* ═══════════════════════════════════════════════════════════════════════ */ /* Przyciski · kwadratowe, obrysowane atramentem */ /* ═══════════════════════════════════════════════════════════════════════ */ button, .btn, button.btn { display: inline-flex; align-items: center; justify-content: center; gap: 6px; height: 30px; padding: 0 13px; font-family: var(--f-display); font-weight: 500; font-size: var(--t-base); letter-spacing: -0.005em; line-height: 1; background: #fff; color: var(--c-ink); border: 1px solid var(--c-ink); border-radius: var(--r-2); cursor: pointer; transition: 100ms; box-shadow: none; text-decoration: none; } button:hover, .btn:hover { background: var(--c-ink); color: #fff; text-decoration: none; } button.btn { background: var(--c-ink); color: #fff; } /* domyślna = solid */ button.btn:hover { background: var(--c-brand); border-color: var(--c-brand); } button.btn.ghost, .btn.ghost { background: #fff; color: var(--c-ink); border-color: var(--c-ink); } button.btn.ghost:hover, .btn.ghost:hover { background: var(--c-ink); color: #fff; } button.btn.accent, .btn.accent { background: var(--c-signal); color: var(--c-ink); border-color: var(--c-ink); font-weight: 600; } button.btn.accent:hover, .btn.accent:hover { background: var(--c-ink); color: var(--c-signal); } button.btn.danger, .btn.danger { background: var(--c-bad); color: #fff; border-color: var(--c-bad); } button.btn.danger:hover, .btn.danger:hover { background: var(--c-ink); border-color: var(--c-ink); } button.small, .btn.small { height: 25px; padding: 0 9px; font-size: 11.5px; } button:disabled, .btn:disabled { opacity: .45; cursor: default; } button:disabled:hover { background: #fff; color: var(--c-ink); } button.btn:disabled:hover { background: var(--c-ink); color: #fff; } /* podzakładki w sekcji (Bilety / Rekordy FIN) */ button.btn.subtab, .btn.subtab { background: var(--c-paper-2); color: var(--c-gray-2); border-color: var(--c-paper-3); font-family: var(--f-mono); font-size: 10.5px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.06em; } button.btn.subtab:hover { background: var(--c-paper-3); color: var(--c-ink); } button.btn.subtab.on, .btn.subtab.on { background: var(--c-ink); color: #fff; border-color: var(--c-ink); } /* ═══════════════════════════════════════════════════════════════════════ */ /* Formularze — ETYKIETA JEST MONO, UPPERCASE, 10.5 px */ /* ═══════════════════════════════════════════════════════════════════════ */ label { display: block; margin-bottom: 3px; font-family: var(--f-mono); font-size: 10.5px; font-weight: 600; color: var(--c-gray-2); text-transform: uppercase; letter-spacing: 0.06em; } input, select, textarea { /* ODSTĘPSTWO od BookLighta — patrz nagłówek pliku */ width: 100%; height: 30px; padding: 0 9px; font-family: var(--f-sans); font-size: var(--t-base); color: var(--c-ink); background: #fff; border: 1px solid var(--c-paper-3); border-radius: var(--r-2); outline: none; transition: border-color .1s, box-shadow .1s; } input:focus, select:focus, textarea:focus { border-color: var(--c-ink); box-shadow: 0 0 0 2px rgba(12,13,16,.08); } input.mono, textarea.mono, select.mono { font-family: var(--f-mono); font-size: var(--t-sm); } textarea { height: auto; padding: 7px 9px; line-height: 1.5; resize: vertical; } select { appearance: auto; } input[type=checkbox], input[type=radio] { width: 14px; height: 14px; flex: 0 0 14px; accent-color: var(--c-ink); cursor: pointer; } input::placeholder, textarea::placeholder { color: var(--c-gray-4); } /* siatka pól */ .row { display: flex; gap: 11px; flex-wrap: wrap; margin-bottom: 11px; } .row > div { flex: 1; min-width: 0; } .grow { flex: 1; } /* ═══════════════════════════════════════════════════════════════════════ */ /* Plakietki / pigułki / tagi — jeden kształt, semantyka przez wariant */ /* ═══════════════════════════════════════════════════════════════════════ */ .pill, .badge, .tag { display: inline-flex; align-items: center; gap: 5px; padding: 1px 7px; min-height: 18px; border-radius: var(--r-2); font-family: var(--f-mono); font-size: 10px; font-weight: 600; background: var(--c-paper-2); color: var(--c-gray-2); border: 1px solid var(--c-paper-3); text-transform: uppercase; letter-spacing: 0.04em; white-space: nowrap; } .pill.ok, .badge.ok, .tag.ok { background: var(--c-ok-soft); color: var(--c-ok-ink); border-color: #1f9d5566; } .pill.warn, .badge.warn, .tag.warn, .pill.dyn, .tag.hand { background: var(--c-warn-soft); color: var(--c-warn-ink); border-color: #b8860b66; } .pill.bad, .badge.bad, .badge.void, .pill.blocked { background: var(--c-bad-soft); color: var(--c-bad-ink); border-color: #c5303066; } .pill.info, .badge.info, .pill.train, .tag.ust { background: var(--c-info-soft); color: var(--c-info-ink); border-color: #2563a866; } .pill.oid { background: var(--c-paper-2); color: var(--c-gray-1); border-color: var(--c-paper-3); } /* ═══════════════════════════════════════════════════════════════════════ */ /* Wiersze wybieralne (połączenie, oferta, trasa, dodatek, bilet) */ /* ═══════════════════════════════════════════════════════════════════════ */ .pickable { background: #fff; border: 1px solid var(--c-paper-3); border-radius: 0; padding: 10px 12px; transition: 100ms; } .pickable:hover { border-color: var(--c-ink); } .pickable.on, .pickable.wanted { border-color: var(--c-ink); box-shadow: inset 3px 0 0 var(--c-signal); background: #fff; } /* ═══════════════════════════════════════════════════════════════════════ */ /* Listy podpowiedzi / menu rozwijane */ /* ═══════════════════════════════════════════════════════════════════════ */ .dropdown { background: #fff; border: 1px solid var(--c-ink); border-radius: 0; box-shadow: var(--sh-2); } .dropdown .opt { padding: 6px 9px; cursor: pointer; font-size: var(--t-base); } .dropdown .opt:hover { background: var(--c-signal); color: var(--c-ink); } /* ═══════════════════════════════════════════════════════════════════════ */ /* Blok kodu / konsola */ /* ═══════════════════════════════════════════════════════════════════════ */ pre.box, .console { background: var(--c-ink); color: var(--c-paper); border: 1px solid var(--c-ink); border-radius: var(--r-2); padding: 12px; overflow-x: auto; font-family: var(--f-mono); font-size: var(--t-sm); line-height: 1.55; } /* ═══════════════════════════════════════════════════════════════════════ */ /* Komunikaty */ /* ═══════════════════════════════════════════════════════════════════════ */ .err-box, .ok-box, .note-box { border-radius: 0; padding: 8px 12px; font-size: var(--t-base); margin-bottom: 10px; border: 1px solid; } .err-box { background: var(--c-bad-soft); border-color: #c5303066; color: var(--c-bad-ink); } .ok-box { background: var(--c-ok-soft); border-color: #1f9d5566; color: var(--c-ok-ink); } .note-box { background: var(--c-warn-soft); border-color: #b8860b66; color: var(--c-warn-ink); } /* ═══════════════════════════════════════════════════════════════════════ */ /* Modal */ /* ═══════════════════════════════════════════════════════════════════════ */ .modal-bg { position: fixed; inset: 0; z-index: 50; background: rgba(12,13,16,.62); display: flex; align-items: flex-start; justify-content: center; padding: 40px 16px; overflow: auto; } .modal { background: var(--c-paper); color: var(--c-ink); width: min(980px, 100%); border: 2px solid var(--c-ink); border-radius: 0; box-shadow: 6px 6px 0 0 var(--c-signal); } .modal-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 12px 16px; background: var(--c-ink); color: var(--c-paper); font-family: var(--f-display); } .modal-head b { color: var(--c-signal); font-weight: 600; font-size: var(--t-md); } .modal-head button { border-color: var(--c-line); } .modal-body { padding: 16px 18px 20px; background: #fff; } .modal-body h3 { font-family: var(--f-mono); font-size: var(--t-xs); font-weight: 600; text-transform: uppercase; letter-spacing: 0.06em; color: var(--c-gray-2); margin: 16px 0 6px; } .kv { display: grid; grid-template-columns: auto 1fr; gap: 2px 14px; font-size: var(--t-base); } .kv dt { font-family: var(--f-mono); font-size: 10.5px; color: var(--c-gray-2); text-transform: uppercase; letter-spacing: 0.04em; padding-top: 2px; } .kv dd { margin: 0; } /* ═══════════════════════════════════════════════════════════════════════ */ /* Toast */ /* ═══════════════════════════════════════════════════════════════════════ */ #toast { position: fixed; bottom: 18px; right: 18px; z-index: 300; background: var(--c-ink); color: var(--c-signal); border: 1px solid var(--c-ink); box-shadow: 4px 4px 0 0 var(--c-paper-3); padding: 9px 14px; border-radius: 0; font-family: var(--f-mono); font-size: var(--t-sm); font-weight: 600; opacity: 0; transition: opacity .2s; max-width: min(520px, calc(100vw - 36px)); } /* ═══════════════════════════════════════════════════════════════════════ */ /* Rail kroków (ścieżka zakupu) — AKCENT nr 1 w kanale */ /* ═══════════════════════════════════════════════════════════════════════ */ .steps { display: flex; flex-wrap: wrap; gap: 0; margin-bottom: 14px; } .steps span { font-family: var(--f-mono); font-size: 10px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.06em; padding: 4px 11px; background: var(--c-paper-2); color: var(--c-gray-2); border: 1px solid var(--c-paper-3); border-left: none; } .steps span:first-child { border-left: 1px solid var(--c-paper-3); } .steps span.on { background: var(--c-signal); color: var(--c-ink); border-color: var(--c-ink); } /* ═══════════════════════════════════════════════════════════════════════ */ /* Chipsy (filtry, wybrane ulgi, przewoźnicy) */ /* ═══════════════════════════════════════════════════════════════════════ */ .chip { display: inline-flex; align-items: center; gap: 5px; padding: 2px 9px; font-family: var(--f-mono); font-size: 10.5px; font-weight: 600; background: #fff; color: var(--c-gray-2); border: 1px solid var(--c-paper-3); border-radius: var(--r-2); text-transform: uppercase; letter-spacing: 0.04em; cursor: pointer; user-select: none; } .chip:hover { border-color: var(--c-ink); color: var(--c-ink); } .chip.on, .chip.allow { background: var(--c-ink); color: #fff; border-color: var(--c-ink); } .chip.deny { background: var(--c-bad-soft); color: var(--c-bad-ink); border-color: #c5303066; text-decoration: line-through; } /* ═══════════════════════════════════════════════════════════════════════ */ /* Stopka podpisowa */ /* ═══════════════════════════════════════════════════════════════════════ */ .signature { padding: 22px 22px 30px; display: flex; align-items: center; gap: 18px; flex-wrap: wrap; color: var(--c-gray-2); font-family: var(--f-mono); font-size: 10px; text-transform: uppercase; letter-spacing: 0.08em; border-top: 1px solid var(--c-paper-3); } .signature .rule { flex: 1; height: 1px; background: var(--c-paper-3); min-width: 24px; } /* ═══════════════════════════════════════════════════════════════════════ */ /* Mobile */ /* ═══════════════════════════════════════════════════════════════════════ */ @media (max-width: 960px) { .topbar__inner { padding: 10px 14px; gap: 12px; } nav.tabs { padding: 0 8px; } .cards { grid-template-columns: 1fr 1fr; row-gap: 20px; padding: 16px; } .cards .card { padding: 0; border-left: none; } button, .btn { min-height: 36px; } input, select, textarea { min-height: 36px; font-size: var(--t-md); } table { font-size: var(--t-sm); } }