/* InvestProfit — arkusz stylów według projektu „Kokpit" z Claude Design. Paleta granatowa, karty z cieniem i promieniem 14 px, nawigacja poziomo w pasku. Motyw jasny na :root, ciemny redefiniuje wyłącznie tokeny. Kwoty oznaczone `data-poufne` da się zamazać przełącznikiem prywatności. */ @import url("fonty.css"); /* ── Tokeny ────────────────────────────────────────────────────────────── */ :root { /* PAPIER — motyw jasny. Ciepła biel i atrament, zero świecenia; zieleń butelkowa na plusie, karmazyn na minusie. Wybrany z trzech kierunków 19.08.2026 (PROJEKT.md §34). */ --ground:#f4f0e6; --surface:#fffdf8; --surface-2:#ebe4d6; --linia:#ddd5c4; --ink:#1f1c17; --ink-2:#4a4438; --ink-3:#6b6355; --akcent:#2b3f8f; --na-akcencie:#fffdf8; --akcent-slaby:#e4e6f2; --akcent-cien:rgba(43,63,143,.13); --zysk:#1f6f4a; --zysk-tlo:#e3efe7; --na-zysku:#fffdf8; --strata:#b3261e; --strata-tlo:#f8e6e4; --na-stracie:#fffdf8; --uwaga:#a8741a; --k1:#2b3f8f; --k2:#1f6f4a; --k3:#b3261e; --k4:#a8741a; --k5:#6b5b95; --siatka:#e6dfd0; /* Kafle kont mają jednakowe złote obramowanie — barwa konta zostaje na miniwykresie, w pierścieniu struktury i przy pozycji w tabeli, gdzie rozróżnia, a nie zdobi. */ --ramka-konta:#c9a961; --kreska-konta:#a8741a; --marka-1:#2b3f8f; --marka-2:#5a6fc4; --marka-akcent:#a8741a; --cien:0 1px 2px rgba(31,28,23,.05), 0 8px 24px -14px rgba(31,28,23,.16); --r:14px; --r-maly:9px; color-scheme:light; } @media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) { /* FOSFOR — motyw ciemny. Czarna baza, zimne światło: zieleń na plusie, róż na minusie, konta w pięciu ostrych barwach. */ --ground:#05070a; --surface:#0a0e13; --surface-2:#121a22; --linia:#1b242e; --ink:#e8f1ef; --ink-2:#a9bcc0; --ink-3:#7d9299; --akcent:#2fe08c; --na-akcencie:#04120c; --akcent-slaby:#0d2a1e; --akcent-cien:rgba(47,224,140,.16); --zysk:#2fe08c; --zysk-tlo:#0d2a1e; --na-zysku:#04120c; --strata:#ff5c7a; --strata-tlo:#2c1119; --na-stracie:#1a0409; --uwaga:#ffd166; --k1:#2fe08c; --k2:#35d0e0; --k3:#7b8cff; --k4:#ffd166; --k5:#ff5c7a; --siatka:#16202a; --ramka-konta:#6b5a2a; --kreska-konta:#d9b75a; --marka-1:#2fe08c; --marka-2:#35d0e0; --marka-akcent:#d9b75a; --cien:0 1px 2px rgba(0,0,0,.5), 0 12px 32px -16px rgba(0,0,0,.9); color-scheme:dark; } } :root[data-theme="dark"] { /* FOSFOR — motyw ciemny. Czarna baza, zimne światło: zieleń na plusie, róż na minusie, konta w pięciu ostrych barwach. */ --ground:#05070a; --surface:#0a0e13; --surface-2:#121a22; --linia:#1b242e; --ink:#e8f1ef; --ink-2:#a9bcc0; --ink-3:#7d9299; --akcent:#2fe08c; --na-akcencie:#04120c; --akcent-slaby:#0d2a1e; --akcent-cien:rgba(47,224,140,.16); --zysk:#2fe08c; --zysk-tlo:#0d2a1e; --na-zysku:#04120c; --strata:#ff5c7a; --strata-tlo:#2c1119; --na-stracie:#1a0409; --uwaga:#ffd166; --k1:#2fe08c; --k2:#35d0e0; --k3:#7b8cff; --k4:#ffd166; --k5:#ff5c7a; --siatka:#16202a; --ramka-konta:#6b5a2a; --kreska-konta:#d9b75a; --marka-1:#2fe08c; --marka-2:#35d0e0; --marka-akcent:#d9b75a; --cien:0 1px 2px rgba(0,0,0,.5), 0 12px 32px -16px rgba(0,0,0,.9); color-scheme:dark; } * { box-sizing:border-box; } body { margin:0; background:var(--ground); color:var(--ink); font-family:'IBM Plex Sans',ui-sans-serif,system-ui,-apple-system,"Segoe UI",Roboto,Arial,sans-serif; font-size:14px; line-height:1.5; -webkit-font-smoothing:antialiased; -webkit-text-size-adjust:100%; } .num { font-family:'IBM Plex Mono',ui-monospace,"SF Mono",Menlo,Consolas,monospace; font-variant-numeric:tabular-nums; letter-spacing:-.01em; } h1,h2,h3 { margin:0; letter-spacing:-.02em; text-wrap:balance; } a { color:var(--akcent); text-decoration:none; } :focus-visible { outline:2px solid var(--akcent); outline-offset:2px; } /* ── Zasłona kwot ── Przełącznik w pasku ustawia data-maska na ; wszystko oznaczone `data-poufne` idzie wtedy w rozmycie. Przydaje się, gdy ktoś patrzy przez ramię albo gdy z ekranu idzie zrzut do pokazania komuś. user-select:none, żeby zamazanej kwoty nie dało się po prostu zaznaczyć i odczytać. */ [data-maska="tak"] [data-poufne] { filter:blur(9px); user-select:none; } .etykieta { font-size:10.5px; font-weight:650; letter-spacing:.09em; text-transform:uppercase; color:var(--ink-3); display:block; } /* ── Pasek górny ───────────────────────────────────────────────────────── */ .pasek { position:sticky; top:0; z-index:30; background:var(--surface); border-bottom:1px solid var(--linia); } .pasek-tresc { max-width:1460px; margin:0 auto; padding:13px 26px; display:flex; align-items:center; gap:22px; } /* Logo InvestProfit: sygnet z trzech słupków plus szeryfowy napis. Barwy słupków biorą się z tokenów --marka-*, więc znak rozjaśnia się sam na ciemnym motywie. */ .logo { display:flex; align-items:center; gap:11px; flex:none; min-width:0; } .logo-znak { width:29px; height:29px; flex:none; display:block; } .logo-tekst { display:flex; flex-direction:column; min-width:0; } .logo-tekst b { font-family:'Source Serif 4',Georgia,'Times New Roman',serif; font-size:18px; font-weight:600; letter-spacing:-.01em; line-height:1.05; white-space:nowrap; color:var(--ink); } .logo-podtytul { font-size:9px; font-weight:600; letter-spacing:.13em; text-transform:uppercase; color:var(--ink-3); margin-top:3px; white-space:nowrap; } .marka-link { display:block; flex:none; text-decoration:none; color:inherit; border-radius:10px; } .marka-link:focus-visible { outline:2px solid var(--akcent); outline-offset:3px; } .menu { display:flex; align-items:center; gap:22px; flex:1; min-width:0; } /* Ani nawigacja, ani przyciski nie zawijają się na szerokim ekranie: pasek ma stałą szerokość 1460 px niezależnie od monitora, więc „zmieści się na większym" nie działa. Ustępuje wyłącznie podpis strony (`.meta-paska`) — jako jedyny element paska niczego nie uruchamia. Bez tego przy siedmiu pozycjach menu i czterech przyciskach z paska robiły się dwie linie: „Panel" spadał pod nawigację, a wylogowanie pod przyciski. */ nav { display:flex; gap:2px; flex-wrap:nowrap; } nav a { border:0; font:inherit; padding:7px 13px; border-radius:8px; cursor:pointer; font-size:13px; font-weight:500; color:var(--ink-2); text-decoration:none; white-space:nowrap; } nav a:hover { background:var(--surface-2); color:var(--ink); } nav a.aktywna { background:var(--akcent-slaby); color:var(--akcent); font-weight:650; } .akcje-paska { margin-left:auto; display:flex; align-items:center; gap:10px; flex-wrap:nowrap; } /* Przyciski nie kurczą się ani nie łamią napisu — ściśnięte robiły z „Zasłoń kwoty" dwie linie i to one pogrubiały pasek, nie sama liczba elementów. */ .akcje-paska > form, .akcje-paska .btn { flex:none; white-space:nowrap; } .meta-paska { font-size:12px; color:var(--ink-3); white-space:nowrap; flex:0 1 auto; min-width:0; overflow:hidden; text-overflow:ellipsis; } @media (max-width:1400px) { .meta-paska { display:none; } } .btn { padding:7px 12px; border-radius:var(--r-maly); border:1px solid var(--akcent); background:var(--akcent); color:var(--na-akcencie); cursor:pointer; font:inherit; font-size:12.5px; font-weight:600; } .btn:hover { filter:brightness(1.08); } .btn-cichy { border:1px solid var(--linia); background:var(--surface-2); color:var(--ink-2); font-weight:550; } .btn-z-ikona { display:inline-flex; align-items:center; gap:7px; } .btn-z-ikona svg { width:14px; height:14px; flex:none; } .btn-cichy:hover { filter:none; border-color:var(--akcent); color:var(--akcent); } .btn-szeroki { width:100%; padding:10px 16px; font-size:13.5px; } .menu-przycisk { display:none; } .powloka { max-width:1460px; margin:0 auto; padding:18px 26px 40px; display:flex; flex-direction:column; gap:12px; } .stopka { margin-top:14px; padding-top:14px; border-top:1px solid var(--linia); font-size:12px; color:var(--ink-3); display:flex; justify-content:space-between; gap:14px; flex-wrap:wrap; align-items:center; } /* Stan źródeł zszedł z lewej szyny do stopki — w tym układzie szyny nie ma, a informacja „kiedy te liczby powstały" nie powinna zniknąć zupełnie. */ .zrodla-pasek { display:flex; gap:12px; flex-wrap:wrap; font-family:'IBM Plex Mono',monospace; font-size:11.5px; } .zrodla-pasek > span { display:inline-flex; gap:5px; align-items:center; } .zrodla-pasek .swieze { color:var(--zysk); } .zrodla-pasek .stare { color:var(--uwaga); } .zrodla-pasek .zalegle { color:var(--strata); } .zrodla-pasek .brak { color:var(--ink-3); } /* ── Karty ─────────────────────────────────────────────────────────────── */ .karta { background:var(--surface); border:1px solid var(--linia); border-radius:var(--r); box-shadow:var(--cien); } .karta-pad { padding:17px 20px; } .glowa-karty { display:flex; align-items:flex-start; justify-content:space-between; gap:12px; flex-wrap:wrap; padding:17px 20px 12px; } .glowa-karty h2 { font-size:14.5px; font-weight:620; } .glowa-karty p { margin:2px 0 0; font-size:12px; color:var(--ink-3); } .glowa-prawa { display:flex; align-items:center; gap:14px; flex-wrap:wrap; justify-content:flex-end; } h2.sekcja { font-size:15px; font-weight:620; margin:14px 0 0; display:flex; align-items:baseline; gap:10px; } h2.sekcja span { font-size:12.5px; font-weight:400; color:var(--ink-3); letter-spacing:0; } /* ── Karta majątku ─────────────────────────────────────────────────────── */ .naglowek { padding:22px 24px 10px; } .naglowek-gora { display:flex; justify-content:space-between; gap:20px; align-items:flex-start; flex-wrap:wrap; } .majatek { font-size:clamp(30px,5vw,46px); font-weight:600; letter-spacing:-.035em; line-height:1.05; margin-top:6px; font-family:'IBM Plex Mono',monospace; font-variant-numeric:tabular-nums; } .majatek small { font-size:22px; color:var(--ink-3); font-weight:500; margin-left:6px; letter-spacing:0; } /* Majątek, aktywa i gotówka jednym rzędem. Kolejne kwoty są przygaszone, bo to rozbicie pierwszej, a nie trzy równorzędne liczby; kreska po lewej zaznacza podział. Po zawinięciu (telefon) kreska znika, inaczej wisiałaby nad kwotą. */ .kwoty-glowne { display:flex; gap:22px; flex-wrap:wrap; align-items:flex-start; } .kwoty-glowne > * + * { padding-left:22px; border-left:1px solid var(--linia); } .kwoty-glowne > * + * .majatek { font-size:clamp(24px,3.4vw,32px); color:var(--ink-2); } .kwoty-glowne > * + * .majatek small { font-size:16px; } .odznaki { display:flex; gap:8px; margin-top:10px; flex-wrap:wrap; } .odznaka { display:inline-flex; align-items:center; gap:6px; padding:4px 10px; border-radius:999px; font-size:13px; font-weight:600; background:var(--surface-2); color:var(--ink-2); } .odznaka .num { font-family:'IBM Plex Mono',monospace; } .odznaka .kiedy { font-weight:500; opacity:.75; } .odznaka.dodatnia { color:var(--zysk); background:var(--zysk-tlo); } .odznaka.ujemna { color:var(--strata); background:var(--strata-tlo); } .strzalka { font-size:10px; } /* Stopy zwrotu jako kafelki w nagłówku — zastąpiły osobną kartę z paskami. */ .stopy-chipy { display:flex; gap:8px; flex-wrap:wrap; } .stopy-chipy > div { text-align:center; padding:8px 14px; border:1px solid var(--linia); border-radius:11px; background:var(--surface-2); } .stopy-chipy .o { font-size:10px; font-weight:650; letter-spacing:.08em; text-transform:uppercase; color:var(--ink-3); } .stopy-chipy .w { font-size:14.5px; font-weight:640; margin-top:2px; font-family:'IBM Plex Mono',monospace; } .przelacznik { display:inline-flex; background:var(--surface-2); border:1px solid var(--linia); border-radius:var(--r-maly); padding:2px; } .przelacznik button { border:0; background:none; font:inherit; font-size:12px; font-weight:600; color:var(--ink-3); padding:5px 10px; border-radius:7px; cursor:pointer; } .przelacznik button:hover { color:var(--ink); } .przelacznik button[aria-pressed="true"] { background:var(--surface); color:var(--ink); box-shadow:var(--cien); } /* Przełączniki zakresu, legenda i wybór indeksu — prawa strona nagłówka karty. `margin-left:auto` jest tu istotny: gdy kafelki stóp zwrotu zepchną tę kolumnę do drugiej linii, zostaje w niej sama, a samo `space-between` rodzica dosuwa wtedy jedyny element do lewej krawędzi. */ .sterowanie-wykresu { display:flex; flex-direction:column; align-items:flex-end; gap:12px; margin-left:auto; } .legenda { display:flex; gap:16px; flex-wrap:wrap; font-size:12px; color:var(--ink-2); } .legenda span { display:flex; align-items:center; gap:6px; } .legenda i { width:14px; height:3px; border-radius:2px; display:inline-block; } .legenda i.kreskowana { height:0; border-top:2px dashed var(--ink-3); border-radius:0; } .legenda i.plama { height:10px; border-radius:3px; opacity:.15; } /* ── Kafle liczbowe ────────────────────────────────────────────────────── */ .kpi { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:12px; } .kpi .karta { padding:15px 17px; display:flex; justify-content:space-between; gap:10px; min-width:0; } .kpi .tresc { min-width:0; } .kpi .w { font-size:20px; font-weight:640; letter-spacing:-.02em; margin-top:7px; font-family:'IBM Plex Mono',monospace; font-variant-numeric:tabular-nums; } .kpi .w small { font-size:13px; color:var(--ink-3); font-weight:500; margin-left:4px; } .kpi .opis { font-size:11.5px; color:var(--ink-3); margin-top:3px; } .kpi .iskra { width:84px; height:32px; flex:none; align-self:flex-end; opacity:.85; } /* ── Kafle portfeli ────────────────────────────────────────────────────── */ .portfele { display:grid; grid-template-columns:repeat(var(--kolumny,5),minmax(0,1fr)); gap:12px; } .portfele > a { text-decoration:none; color:inherit; display:block; min-width:0; container-type:inline-size; } /* Jednakowe złote obramowanie zamiast pięciu barw: kafle czytają się jako jeden rząd, a konto rozpoznaje się po miniwykresie, pierścieniu struktury i znaczniku w tabeli. */ .portfele .karta { padding:14px 16px; min-width:0; border-color:var(--ramka-konta); border-top:2px solid var(--kreska-konta); } .portfel-glowa { display:flex; align-items:baseline; justify-content:space-between; gap:6px; } .portfel-glowa h3 { font-size:13px; font-weight:620; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; min-width:0; } .portfel-typ { font-size:9.5px; color:var(--ink-3); text-transform:uppercase; letter-spacing:.06em; font-weight:600; flex:none; } /* Przy pięciu kontach kafel ma ~270 px i etykieta typu ucinała nazwę („Konto maklerskie …" obok „KONTO MAKLERSKIE"). Nazwa jest ważniejsza — typ ustępuje. */ @container (max-width: 300px) { .portfel-typ { display:none; } } .portfel-w { font-size:20px; font-weight:640; letter-spacing:-.02em; margin-top:7px; font-family:'IBM Plex Mono',monospace; font-variant-numeric:tabular-nums; } .portfel-stopka { display:flex; align-items:flex-end; justify-content:space-between; gap:8px; margin-top:4px; } .portfel-wynik { min-width:0; } .portfel-wynik .kwota { font-weight:600; font-size:12px; font-family:'IBM Plex Mono',monospace; } .portfel-wynik .opis { font-size:11px; color:var(--ink-3); } .iskra { width:64px; height:25px; flex:none; display:block; } .iskra svg { display:block; width:100%; height:100%; } /* Pasek wyniku dnia: wąski, na całą szerokość kafla, dosunięty do dolnej krawędzi. Ujemne marginesy wychodzą poza padding karty, więc barwa sięga jej boków — stąd promień zaokrąglenia o 1 px mniejszy niż karty (obramowanie zabiera pikselej). Nie zawijamy go: druga linijka rozjeżdżałaby wysokość kafli w rzędzie. */ .portfel-dzien { display:flex; align-items:center; gap:6px; flex-wrap:nowrap; margin:11px -16px -14px; padding:5px 16px 6px; border-top:1px solid var(--linia); border-radius:0 0 13px 13px; font-size:11.5px; font-weight:600; color:var(--ink-3); background:var(--surface-2); } .portfel-dzien .num { font-family:'IBM Plex Mono',monospace; font-variant-numeric:tabular-nums; } .portfel-dzien .proc { opacity:.8; } /* Data ustępuje jako jedyna — kwota i procent mają się nigdy nie przyciąć. */ .portfel-dzien .kiedy { margin-left:auto; font-weight:500; opacity:.75; min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; } .portfel-dzien.dodatnia { color:var(--zysk); background:var(--zysk-tlo); border-top-color:color-mix(in srgb, var(--zysk) 22%, transparent); } .portfel-dzien.ujemna { color:var(--strata); background:var(--strata-tlo); border-top-color:color-mix(in srgb, var(--strata) 22%, transparent); } /* ── Rynki: podzakładki i tablica zwrotów ──────────────────────────────── */ /* Dwie strony pod jedną pozycją w pasku — nawigacja jest wypełniona co do piksela i ósma pozycja przycięłaby podpis strony (PROJEKT.md §51). */ .podzakladki { display:flex; gap:4px; margin-bottom:12px; } .podzakladki a { font-size:13px; font-weight:550; color:var(--ink-2); padding:6px 13px; border-radius:var(--r-maly); border:1px solid transparent; } .podzakladki a:hover { background:var(--surface-2); } .podzakladki a.wybrana { background:var(--surface); border-color:var(--linia); color:var(--ink); font-weight:620; box-shadow:var(--cien); } .sterowanie-rynkow { display:flex; gap:16px; flex-wrap:wrap; align-items:center; } .grupa-przelacznika { display:flex; align-items:center; gap:8px; } .grupa-przelacznika > span { font-size:10.5px; font-weight:650; letter-spacing:.07em; text-transform:uppercase; color:var(--ink-3); } .przelacznik-rynkow { display:flex; background:var(--surface-2); border:1px solid var(--linia); border-radius:var(--r-maly); padding:2px; gap:2px; } .przelacznik-rynkow button { font:inherit; font-size:12px; font-weight:500; color:var(--ink-2); background:none; border:0; border-radius:7px; padding:4px 10px; cursor:pointer; white-space:nowrap; } .przelacznik-rynkow button[aria-pressed="true"] { background:var(--surface); color:var(--ink); font-weight:600; box-shadow:0 1px 2px rgba(0,0,0,.08); } .tablica-rynkow { min-width:940px; } .tablica-rynkow th small { display:block; font-size:9.5px; font-weight:500; letter-spacing:.02em; text-transform:none; color:var(--ink-3); opacity:.75; } .tablica-rynkow th small .data-krotka { display:none; } /* Nazwa zostaje w polu widzenia przy przewijaniu w bok — bez tego przy kolumnie „10 lat" nie wiadomo już, czyj to wynik. */ .tablica-rynkow .nazwa-rynku, .tablica-rynkow th.instrument { position:sticky; left:0; background:var(--surface); z-index:1; } .tablica-rynkow .nazwa-rynku b { font-weight:600; font-size:13.5px; } .tablica-rynkow .nazwa-rynku i { display:block; font-style:normal; font-size:11.5px; color:var(--ink-3); } .plakietka-waluty { font-size:10px; font-weight:600; letter-spacing:.04em; color:var(--ink-3); border:1px solid var(--linia); border-radius:5px; padding:1px 5px; margin-left:7px; vertical-align:2px; } tr.grupa-rynkow td { text-align:left; padding:13px 20px 5px; background:var(--surface-2); font-size:10.5px; font-weight:650; letter-spacing:.07em; text-transform:uppercase; color:var(--ink-3); } /* Przyklejony jest napis, nie komórka: `sticky` na rozciągniętym `td` trzyma samą komórkę, a tekst i tak wyjeżdża z ekranu przy przewijaniu w bok — wiersz grupy robił się wtedy pusty i nie było wiadomo, czy patrzy się na sektory, czy na świat. */ tr.grupa-rynkow td span { position:sticky; left:20px; display:inline-block; } td.zwrot { font-family:'IBM Plex Mono',ui-monospace,Menlo,Consolas,monospace; font-variant-numeric:tabular-nums; letter-spacing:-.01em; font-weight:500; white-space:nowrap; } td.zwrot.dodatnia { color:var(--zysk); } td.zwrot.ujemna { color:var(--strata); } /* Najlepszy wynik okresu: kropka w barwie ostrzegawczej, bo w morzu zieleni samo pogrubienie ginie. */ td.zwrot.najlepszy { font-weight:650; } td.zwrot.najlepszy::after { content:"●"; color:var(--uwaga); font-size:9px; vertical-align:1px; margin-left:6px; } /* Wykres porównawczy nad tabelą. Karta startuje ukryta (`hidden` w szablonie) i odsłania ją skrypt — bez JavaScriptu została by pusta ramka. */ .karta-przebiegu { margin-bottom:12px; } .plotno-rynkow { padding:4px 8px 0; } .plotno-rynkow svg { display:block; width:100%; height:auto; } .plotno-rynkow.laduje { opacity:.55; } .legenda-serii { display:flex; flex-wrap:wrap; gap:8px; padding:6px 20px 0; } .wpis-legendy { display:inline-flex; align-items:center; gap:7px; font:inherit; font-size:12px; font-weight:550; color:var(--ink-2); background:var(--surface-2); border:1px solid var(--linia); border-radius:20px; padding:3px 11px 3px 9px; cursor:pointer; } .wpis-legendy:hover { color:var(--ink); border-color:var(--ink-3); } .wpis-legendy i { width:9px; height:9px; border-radius:3px; flex:none; } .wpis-legendy b { font-family:'IBM Plex Mono',ui-monospace,Menlo,monospace; font-variant-numeric:tabular-nums; font-weight:600; } .wpis-legendy b.dodatnia { color:var(--zysk); } .wpis-legendy b.ujemna { color:var(--strata); } .podpowiedz-wykresu { margin:0; padding:9px 20px 15px; font-size:11.5px; color:var(--ink-3); } /* Wiersz tabeli działa jak przełącznik serii, więc musi na to wyglądać. */ .tablica-rynkow tbody tr[data-symbol] { cursor:pointer; } .tablica-rynkow tbody tr[data-symbol]:hover .nazwa-rynku { background:var(--surface-2); } .tablica-rynkow tbody tr.na-wykresie .nazwa-rynku { box-shadow:inset 3px 0 0 var(--akcent); font-weight:600; } .tablica-rynkow tbody tr[data-symbol]:focus-visible { outline:2px solid var(--akcent); outline-offset:-2px; } .stopka-rynkow { display:flex; flex-direction:column; gap:9px; padding:14px 20px 16px; border-top:1px solid var(--linia); font-size:12px; color:var(--ink-3); } .stopka-rynkow p { margin:0; } .stopka-rynkow b { color:var(--ink-2); font-weight:600; } .legenda-rynkow { display:flex; align-items:center; gap:10px; flex-wrap:wrap; font-size:11.5px; } .znacznik-rynku { display:inline-flex; align-items:center; gap:6px; } .znacznik-rynku i { width:9px; height:9px; border-radius:3px; display:inline-block; } .skala-rynkow { display:inline-flex; height:9px; border-radius:5px; overflow:hidden; width:190px; border:1px solid var(--linia); } .skala-rynkow i { flex:1; } .brak-rynkow { margin:0; padding:26px 20px; text-align:center; color:var(--ink-3); } /* ── Trzy karty: struktura, wynik, obsunięcie ──────────────────────────── */ .siatka-3 { display:grid; grid-template-columns:1.15fr 1fr 1fr; gap:12px; align-items:stretch; } .siatka-3 > * { min-width:0; display:flex; flex-direction:column; } .siatka-2 { display:grid; grid-template-columns:minmax(0,1fr) 340px; gap:12px; align-items:start; } .siatka-2 > * { min-width:0; } .struktura-tresc { display:flex; align-items:center; gap:18px; padding:0 20px; flex:1; } .plotno-donut { width:140px; height:140px; flex:none; position:relative; } .plotno-donut svg { display:block; width:100%; height:100%; } .lista-struktury { flex:1; display:flex; flex-direction:column; gap:8px; min-width:0; } .wiersz-struktury { display:flex; align-items:center; gap:9px; font-size:12.5px; } .wiersz-struktury .kropka { width:9px; height:9px; border-radius:3px; flex:none; } .wiersz-struktury .nazwa { flex:1; color:var(--ink-2); overflow:hidden; text-overflow:ellipsis; white-space:nowrap; } .wiersz-struktury .proc { color:var(--ink-3); font-size:11.5px; } .wiersz-struktury .kwota { font-weight:600; width:86px; text-align:right; font-family:'IBM Plex Mono',monospace; font-variant-numeric:tabular-nums; } .waluty { border-top:1px solid var(--linia); margin:14px 20px 0; padding:12px 0 16px; } .waluty .lista { display:flex; gap:14px; margin-top:8px; font-size:12.5px; flex-wrap:wrap; } .waluty .lista > span { display:flex; gap:6px; } .waluty .lista .nazwa { color:var(--ink-3); } .plotno { position:relative; padding:6px 20px 12px; flex:1; } .plotno svg { display:block; width:100%; height:auto; overflow:visible; } .dymek { position:absolute; pointer-events:none; opacity:0; transition:opacity .12s; background:var(--surface); border:1px solid var(--linia); border-radius:10px; box-shadow:var(--cien); padding:9px 11px; font-size:12px; min-width:150px; z-index:5; } .dymek b { display:block; font-size:11.5px; color:var(--ink-3); font-weight:600; margin-bottom:5px; } /* Bez nowrap „Zainwestowany kapitał" łamie się na telefonie na dwie linie. */ .dymek-w { display:flex; justify-content:space-between; gap:14px; line-height:1.7; white-space:nowrap; } .dymek-w i { width:9px; height:9px; border-radius:3px; display:inline-block; margin-right:6px; } .suma-zmian { text-align:right; } .suma-zmian .kwota { display:block; font-size:15px; font-weight:640; font-family:'IBM Plex Mono',monospace; letter-spacing:-.02em; } .suma-zmian .opis { font-size:11.5px; color:var(--ink-3); } .rog-karty { text-align:right; } .rog-karty .w { display:block; font-size:15px; font-weight:640; font-family:'IBM Plex Mono',monospace; } .rog-karty .opis { font-size:11px; color:var(--ink-3); } /* ── Tabele ────────────────────────────────────────────────────────────── */ .tabela-otoczka { overflow-x:auto; } table { border-collapse:collapse; width:100%; min-width:900px; } th { font-size:10.5px; font-weight:650; letter-spacing:.07em; text-transform:uppercase; color:var(--ink-3); text-align:right; padding:0 14px 8px; border-bottom:1px solid var(--linia); white-space:nowrap; } /* Tabela bywa wnętrzem karty na dwa sposoby. Zwykle poprzedza ją `.glowa-karty` z tytułem i to ona daje nagłówkom kolumn oddech od górnej krawędzi — dlatego `th` nie ma własnego górnego paddingu. Gdy jednak tabela *sama jest kartą* (`.karta.tabela-otoczka`: transakcje portfela, wpłaty PPK rok po roku), tego odstępu nie daje nic i napisy DATA/TYP/WALOR siadały 1 px pod krawędzią. Tyle samo co padding `.glowa-karty`, żeby obie tabele zaczynały się tak samo. */ .karta.tabela-otoczka th { padding-top:17px; } th:first-child, td:first-child { text-align:left; padding-left:20px; } th:last-child, td:last-child { padding-right:20px; } td { padding:9px 14px; text-align:right; border-bottom:1px solid var(--linia); font-size:13px; } tbody tr:hover { background:var(--surface-2); } tbody tr:last-child td { border-bottom:0; } td.tekst, th.tekst { text-align:left; } /* Symbol jako plakietka — w projekcie odróżnia walor od jego nazwy bez pogrubień. */ .sym { font-family:'IBM Plex Mono',monospace; font-size:12.5px; font-weight:600; background:var(--surface-2); border:1px solid var(--linia); border-radius:6px; padding:2px 7px; display:inline-block; white-space:nowrap; } .walor { display:flex; align-items:center; gap:10px; min-width:0; } .op { color:var(--ink-2); font-size:12.5px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; } .konto-pozycji { display:inline-flex; align-items:center; gap:7px; font-size:12px; color:var(--ink-2); min-width:0; } .konto-pozycji i { width:8px; height:8px; border-radius:3px; flex:none; } .konto-pozycji span { white-space:nowrap; overflow:hidden; text-overflow:ellipsis; } .udzial { display:flex; align-items:center; gap:8px; justify-content:flex-end; } .pasek-udzialu { width:64px; height:5px; border-radius:3px; background:var(--surface-2); overflow:hidden; flex:none; } .pasek-udzialu i { display:block; height:100%; background:var(--akcent); border-radius:3px; opacity:.8; } .udzial .proc { font-size:11.5px; color:var(--ink-3); width:38px; text-align:right; font-family:'IBM Plex Mono',monospace; } .wynik { font-weight:600; } .wynik .proc { font-size:11.5px; font-weight:600; margin-left:5px; } .plakietka { font-size:9.5px; font-weight:650; letter-spacing:.04em; padding:1px 7px; border-radius:999px; background:var(--akcent-slaby); color:var(--akcent); white-space:nowrap; } .znacznik { font-size:10.5px; font-weight:650; padding:2px 7px; border-radius:6px; letter-spacing:.03em; } .znacznik.kupno { background:var(--zysk-tlo); color:var(--zysk); } .znacznik.sprzedaz { background:var(--strata-tlo); color:var(--strata); } .znacznik.inne { background:var(--surface-2); color:var(--ink-2); } .notowanie-stare { color:var(--strata); font-weight:600; } /* ── Rozwijany wykres pod pozycją ──────────────────────────────────────── */ tr.pozycja { cursor:pointer; } tr.pozycja:focus-visible { outline:2px solid var(--akcent); outline-offset:-2px; } tr.pozycja .chevron { display:inline-block; width:8px; height:8px; margin-right:2px; vertical-align:1px; flex:none; border-right:1.8px solid var(--ink-3); border-bottom:1.8px solid var(--ink-3); transform:rotate(-45deg); transition:transform .18s; } tr.pozycja[aria-expanded="true"] .chevron { transform:rotate(45deg); border-color:var(--akcent); } tr.pozycja[aria-expanded="true"] { background:var(--surface-2); } tr.rozwiniecie > td { padding:0 !important; background:var(--surface-2); border-bottom:1px solid var(--linia); } .wykres-waloru { padding:16px 20px 12px; position:relative; } .wykres-waloru header { display:flex; align-items:baseline; gap:10px; margin-bottom:10px; flex-wrap:wrap; } .wykres-waloru header b { font-size:14px; } .wykres-waloru header .op { color:var(--ink-3); font-size:12px; } .wykres-waloru .legenda-tr { margin-left:auto; display:flex; gap:14px; font-size:12px; color:var(--ink-2); } .wykres-waloru .legenda-tr span { display:flex; align-items:center; gap:5px; } .wykres-waloru .zn { width:16px; height:16px; border-radius:50%; display:grid; place-items:center; font-size:10px; font-weight:700; } .wykres-waloru .zn.k { background:var(--zysk); color:var(--na-zysku); } .wykres-waloru .zn.s { background:var(--strata); color:var(--na-stracie); } .wykres-waloru svg { width:100%; height:auto; display:block; } .wykres-waloru .laduje { padding:26px; text-align:center; color:var(--ink-3); font-size:13px; } .dymek-walor { position:absolute; pointer-events:none; opacity:0; transition:opacity .12s; background:var(--surface); border:1px solid var(--linia); border-radius:10px; padding:7px 10px; font-size:12px; box-shadow:var(--cien); z-index:5; min-width:130px; } /* ── Komunikaty ────────────────────────────────────────────────────────── */ .komunikaty { display:flex; flex-direction:column; gap:8px; } .komunikat { padding:11px 16px; border-radius:11px; font-size:13.5px; border:1px solid; } .komunikat.success { background:var(--zysk-tlo); border-color:color-mix(in srgb, var(--zysk) 30%, transparent); color:var(--zysk); } .komunikat.error { background:var(--strata-tlo); border-color:color-mix(in srgb, var(--strata) 30%, transparent); color:var(--strata); } .komunikat.info, .komunikat.warning { background:var(--akcent-slaby); border-color:color-mix(in srgb, var(--akcent) 25%, transparent); color:var(--akcent); } .uwaga { background:var(--akcent-slaby); border:1px solid var(--linia); border-radius:12px; padding:12px 16px; font-size:12.5px; color:var(--ink-2); line-height:1.55; } .uwaga b { color:var(--ink); } /* ── Formularze ────────────────────────────────────────────────────────── */ .pole { display:flex; flex-direction:column; gap:4px; margin-bottom:11px; } .pole label { font-size:12px; font-weight:600; color:var(--ink-2); } .pole .pomoc { font-size:11.5px; color:var(--ink-3); font-weight:400; } .pole .blad { font-size:11.5px; color:var(--strata); } input[type="text"], input[type="password"], input[type="file"], input[type="number"], input[type="date"], input[type="time"], input[type="search"], input[type="email"], select, textarea { width:100%; padding:8px 11px; border:1px solid var(--linia); border-radius:var(--r-maly); background:var(--surface-2); color:var(--ink); font:inherit; font-size:13px; } input[type="number"], input[type="date"], input[type="time"] { font-family:'IBM Plex Mono',monospace; } /* Ikonki kalendarza i zegara w ciemnym motywie są czarne na czarnym. */ :root[data-theme="dark"] input::-webkit-calendar-picker-indicator, :root[data-theme="dark"] input::-webkit-search-cancel-button { filter:invert(1) opacity(.6); } @media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) input::-webkit-calendar-picker-indicator, :root:not([data-theme="light"]) input::-webkit-search-cancel-button { filter:invert(1) opacity(.6); } } textarea { resize:vertical; } input:focus, select:focus, textarea:focus { outline:2px solid var(--akcent); outline-offset:1px; border-color:var(--akcent); } input[type="file"]::file-selector-button { margin-right:10px; padding:5px 11px; border:0; border-radius:7px; cursor:pointer; background:var(--akcent-slaby); color:var(--akcent); font:inherit; font-size:12.5px; font-weight:600; } .pole-pliku { position:relative; } .pole-pliku input[type="file"] { position:absolute; inset:0; width:100%; height:100%; opacity:0; cursor:pointer; } .pole-pliku .zastepnik { display:flex; align-items:center; gap:10px; padding:9px 12px; border-radius:var(--r-maly); border:1px dashed var(--linia); background:var(--surface-2); font-size:13px; color:var(--ink-3); } .pole-pliku .zastepnik b { background:var(--akcent-slaby); color:var(--akcent); padding:4px 11px; border-radius:7px; font-size:12.5px; font-weight:600; } .pole-pliku:hover .zastepnik { border-color:var(--akcent); } .pole-pliku input[type="file"]:focus-visible + .zastepnik { outline:2px solid var(--akcent); outline-offset:2px; } .pole-przelacznik input[type="checkbox"] { width:auto; margin-top:3px; accent-color:var(--akcent); } .para-pol { display:grid; grid-template-columns:1fr 1fr; gap:0 11px; } /* Bez tego atrybut `hidden` nie działa: reguła z klasą ustawia `display:flex` i wygrywa ze wbudowanym `[hidden] { display:none }`. Lista wyników zostawała na ekranie po wybraniu waloru. */ .wyniki-walorow[hidden], .wybrany-walor[hidden] { display:none; } .wyniki-walorow { display:flex; flex-direction:column; gap:2px; max-height:250px; overflow-y:auto; border:1px solid var(--linia); border-radius:var(--r-maly); background:var(--surface); padding:4px; margin-bottom:11px; } .walor-wynik { display:flex; align-items:center; gap:10px; width:100%; text-align:left; border:0; background:none; font:inherit; cursor:pointer; padding:7px 9px; border-radius:7px; color:var(--ink); min-width:0; } .walor-wynik:hover, .walor-wynik:focus-visible { background:var(--surface-2); outline:none; } .walor-wynik .nazwa { flex:1; font-size:12.5px; color:var(--ink-2); min-width:0; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; } .walor-wynik .rynek, .wybrany-walor .rynek { font-size:11px; color:var(--ink-3); flex:none; } .pusto-walory { margin:0; padding:9px; font-size:12.5px; color:var(--ink-3); } .wybrany-walor { display:flex; align-items:center; gap:9px; font-size:13px; margin-bottom:11px; padding:9px 11px; border-radius:var(--r-maly); background:var(--akcent-slaby); color:var(--ink); } .wybrany-walor .usun { margin-left:auto; border:0; background:none; font:inherit; font-size:16px; line-height:1; cursor:pointer; color:var(--ink-3); padding:0 4px; } .wybrany-walor .usun:hover { color:var(--strata); } .przyciski-formularza { display:flex; gap:10px; flex-wrap:wrap; align-items:stretch; } .przyciski-formularza .btn { flex:1 1 200px; padding:11px 16px; font-size:13.5px; } .przyciski-formularza .btn { flex:1; min-width:150px; padding:10px 16px; font-size:13.5px; } .panel-boczny { align-self:start; position:sticky; top:74px; } .ostatnia-transakcja { padding:9px 0; border-bottom:1px solid var(--linia); font-size:13px; } .ostatnia-transakcja:last-of-type { border-bottom:0; } .ostatnia-transakcja > div:first-child { display:flex; gap:7px; align-items:center; flex-wrap:wrap; } .podglad-kosztu { background:var(--akcent-slaby); border-radius:11px; padding:13px 16px; margin:2px 0 14px; } .podglad-kosztu .num { font-size:22px; font-weight:640; color:var(--akcent); letter-spacing:-.02em; margin-top:3px; } .podglad-opis { font-size:12px; color:var(--ink-3); margin-top:3px; } /* ── Kalkulator ────────────────────────────────────────────────────────── */ .siatka-pol { display:grid; grid-template-columns:1fr 1fr; gap:0 11px; } /* Data, godzina i waluta w jednym rzędzie — na telefonie schodzą pod siebie. */ .trojka-pol { display:grid; grid-template-columns:1.3fr 1fr 0.8fr; gap:0 11px; } .trojka-pol-rowna { display:grid; grid-template-columns:1fr 1.5fr 0.9fr; gap:0 11px; } .pole-z-akcja { display:flex; gap:7px; align-items:stretch; } .pole-z-akcja input { flex:1; min-width:0; } .pole-z-akcja .btn { flex:none; white-space:nowrap; padding-top:0; padding-bottom:0; font-size:12px; } .siatka-pol .pole { min-width:0; } .siatka-pol .pole.szeroko { grid-column:1/-1; } .presety-stopy { display:flex; gap:6px; margin-top:2px; } .presety-stopy button { flex:1; padding:6px; border-radius:8px; border:1px solid var(--linia); background:var(--surface-2); color:var(--ink-3); cursor:pointer; font:inherit; font-size:11.5px; font-weight:600; } .presety-stopy button:hover { border-color:var(--akcent); color:var(--akcent); } .lista-doplat { display:flex; flex-direction:column; gap:6px; } .doplata { display:grid; grid-template-columns:100px minmax(0,1fr) 30px; gap:6px; align-items:center; } .doplata label { display:flex; align-items:center; gap:5px; font-size:11.5px; color:var(--ink-3); } .doplata label input { width:56px; padding:6px 4px 6px 6px; text-align:right; } .doplata .d-kwota { padding:6px 9px; text-align:right; font-family:'IBM Plex Mono',monospace; } .doplata .usun { border:1px solid var(--linia); background:var(--surface-2); color:var(--ink-3); border-radius:8px; cursor:pointer; font:inherit; font-size:14px; line-height:1; padding:6px 0; } .doplata .usun:hover { border-color:var(--strata); color:var(--strata); } .pod-doplatami { display:flex; align-items:center; justify-content:space-between; gap:10px; margin-top:10px; } .pod-doplatami .razem { font-size:11.5px; color:var(--ink-2); font-family:'IBM Plex Mono',monospace; } .wnioski { display:flex; flex-direction:column; gap:8px; margin-top:11px; font-size:12.5px; } .wnioski > div { display:flex; justify-content:space-between; align-items:center; gap:10px; } .wnioski > div > span { color:var(--ink-3); } .wnioski b { font-family:'IBM Plex Mono',monospace; font-weight:640; text-align:right; } .wnioski input[type="number"] { width:54px; padding:3px 6px; font-size:12px; text-align:right; } .blok-wnioskow { border-top:1px solid var(--linia); margin-top:13px; padding-top:12px; } .blok-wnioskow h2 { font-size:14px; font-weight:620; } /* ── Przegląd rynku ────────────────────────────────────────────────────── */ .presety { display:grid; grid-template-columns:repeat(auto-fit,minmax(230px,1fr)); gap:12px; } .preset { padding:14px 16px; text-decoration:none; color:inherit; display:block; } .preset b { display:block; font-size:13.5px; font-weight:620; } .preset span { font-size:12px; color:var(--ink-3); margin-top:4px; line-height:1.45; display:block; } .preset:hover { border-color:var(--akcent); } .preset.wybrany { border-color:var(--akcent); } .preset.wybrany b { color:var(--akcent); } .ostrzezenie-presetu { margin:0 20px 12px; padding:10px 13px; border-radius:10px; font-size:12.5px; line-height:1.5; background:var(--strata-tlo); color:var(--strata); } .stopka-skanu { display:flex; align-items:center; gap:12px; padding:13px 20px; flex-wrap:wrap; } .stopka-skanu form { display:flex; align-items:center; flex-wrap:wrap; gap:12px; } /* ── Import ────────────────────────────────────────────────────────────── */ .wpis-importu { border:1px solid var(--linia); border-radius:11px; padding:13px 15px; } .wpis-importu + .wpis-importu { margin-top:10px; } .wpis-glowa { display:flex; justify-content:space-between; gap:10px; flex-wrap:wrap; align-items:baseline; } .wpis-glowa b { font-size:13.5px; } .wpis-meta { font-size:12.5px; color:var(--ink-2); margin-top:3px; } .wpis-importu details summary { cursor:pointer; font-size:12px; color:var(--ink-3); margin-top:8px; } .wpis-importu pre { white-space:pre-wrap; background:var(--surface-2); border-radius:8px; padding:9px 11px; font-size:12px; color:var(--ink-2); margin:8px 0 0; } .brak-wiersz { display:flex; align-items:center; justify-content:space-between; gap:12px; flex-wrap:wrap; border:1px solid var(--linia); border-radius:10px; padding:9px 13px; font-size:13px; } .brak-wiersz + .brak-wiersz { margin-top:8px; } .link-maly { font-size:12px; padding:5px 10px; border-radius:8px; border:1px solid var(--linia); color:var(--ink-2); text-decoration:none; white-space:nowrap; } .link-maly:hover { background:var(--surface-2); color:var(--akcent); border-color:var(--akcent); } .ostrzezenie-formatu { background:var(--strata-tlo); border:1px solid color-mix(in srgb, var(--strata) 30%, transparent); border-radius:11px; padding:13px 15px; margin-bottom:14px; font-size:12.5px; color:var(--strata); line-height:1.55; } .ostrzezenie-formatu p { margin:7px 0 0; } /* ── Analiza AI ────────────────────────────────────────────────────────── */ .glowa-analizy { display:flex; justify-content:space-between; align-items:flex-start; gap:12px; } .analiza-tresc { margin-top:14px; font-size:13.5px; line-height:1.65; color:var(--ink-2); } .analiza-tresc h1, .analiza-tresc h2, .analiza-tresc h3 { color:var(--ink); font-weight:620; letter-spacing:-.01em; margin:20px 0 8px; } .analiza-tresc h1 { font-size:17px; } .analiza-tresc h2 { font-size:15px; } .analiza-tresc h3 { font-size:14px; } .analiza-tresc > *:first-child { margin-top:0; } .analiza-tresc p { margin:0 0 12px; } .analiza-tresc ul, .analiza-tresc ol { margin:0 0 12px; padding-left:22px; } .analiza-tresc li { margin-bottom:5px; } .analiza-tresc strong { color:var(--ink); font-weight:620; } .analiza-tresc code { background:var(--surface-2); padding:1px 5px; border-radius:5px; font-size:12.5px; font-family:'IBM Plex Mono',monospace; } .analiza-tresc pre { background:var(--surface-2); border:1px solid var(--linia); border-radius:10px; padding:12px; overflow-x:auto; font-size:12.5px; } .analiza-tresc blockquote { border-left:3px solid var(--akcent); margin:0 0 12px; padding:2px 0 2px 14px; color:var(--ink-3); } .analiza-tresc table { width:100%; border-collapse:collapse; margin:0 0 14px; font-size:13px; display:block; overflow-x:auto; min-width:0; } .analiza-tresc th { text-align:left; padding:7px 10px; } .analiza-tresc td { padding:7px 10px; } .analiza-tresc hr { border:0; border-top:1px solid var(--linia); margin:18px 0; } .wpis-analizy { border-bottom:1px solid var(--linia); padding:10px 0; } .wpis-analizy summary { cursor:pointer; display:flex; justify-content:space-between; gap:12px; align-items:baseline; font-size:13px; flex-wrap:wrap; } .wpis-analizy summary::marker { color:var(--ink-3); } .wpis-analizy[open] summary { padding-bottom:10px; margin-bottom:10px; border-bottom:1px solid var(--linia); } .pytanie-analizy { font-size:12.5px; color:var(--ink-3); font-style:italic; margin:0 0 12px; padding-left:11px; border-left:2px solid var(--linia); } .blad-analizy { background:var(--strata-tlo); color:var(--strata); border-radius:9px; padding:10px 12px; font-size:12px; white-space:pre-wrap; margin:0; } .lista-modeli { display:flex; flex-direction:column; gap:6px; margin-top:8px; font-size:12.5px; } .lista-modeli > div { display:flex; justify-content:space-between; gap:10px; } /* ── Skąd pochodzą pieniądze (PPK) ─────────────────────────────────────── */ .pasek-zrodel { display:flex; gap:2px; height:10px; border-radius:999px; overflow:hidden; background:var(--surface-2); } .pasek-zrodel i { display:block; height:100%; } /* auto-fit zamiast trzech sztywnych kolumn: kafli bywa mniej (konto bez dopłaty państwa) i na wąskim ekranie same schodzą pod siebie, bez osobnego progu. */ .zrodla-wplat { display:grid; grid-template-columns:repeat(auto-fit,minmax(220px,1fr)); gap:18px; margin-top:16px; } .zrodlo { min-width:0; } .zrodlo .etykieta { display:flex; align-items:center; gap:7px; } .zrodlo .etykieta i { width:9px; height:9px; border-radius:3px; flex:none; } .zrodlo .w { font-size:22px; font-weight:640; letter-spacing:-.02em; margin-top:6px; font-family:'IBM Plex Mono',monospace; font-variant-numeric:tabular-nums; } .zrodlo .opis { font-size:11.5px; color:var(--ink-3); margin-top:3px; } .zrodlo .dzis { font-size:12px; color:var(--ink-2); margin-top:8px; } .zrodlo .dzis b { font-family:'IBM Plex Mono',monospace; font-weight:640; color:var(--ink); } .zrodlo .wpisy { list-style:none; margin:9px 0 0; padding:9px 0 0; border-top:1px solid var(--linia); display:flex; flex-direction:column; gap:5px; font-size:11.5px; color:var(--ink-2); } .zrodlo .wpisy li { display:flex; justify-content:space-between; gap:10px; } .zrodlo .wpisy b { font-family:'IBM Plex Mono',monospace; font-weight:600; flex:none; } .wniosek-wplat { margin:16px 0 0; padding-top:13px; border-top:1px solid var(--linia); font-size:13px; color:var(--ink-2); line-height:1.65; } .wniosek-wplat b { color:var(--ink); font-weight:640; } .wiersz-sumy td { background:var(--surface-2); font-weight:640; color:var(--ink); } /* ── Pusty kokpit ──────────────────────────────────────────────────────── */ .pusto { text-align:center; padding:48px 20px; } .pusto h1 { font-size:20px; font-weight:640; } .pusto p { color:var(--ink-2); max-width:46ch; margin:10px auto 0; } .pusto .akcje { display:flex; gap:10px; justify-content:center; margin-top:20px; flex-wrap:wrap; } .powrot { color:var(--ink-3); text-decoration:none; font-size:13px; } .powrot:hover { color:var(--ink); } @media (prefers-reduced-motion: reduce) { * { transition:none !important; animation:none !important; } } /* ── Aplikacja dodana do ekranu głównego ─────────────────────────────────── W trybie pełnoekranowym na iPhonie treść sięga krawędzi ekranu: bez rezerwy na pasek stanu logo wchodzi pod zegarek, a stopka pod pasek gestu. W zwykłej przeglądarce env(...) daje zero, więc te reguły niczego tam nie zmieniają. */ .pasek { padding-top:env(safe-area-inset-top, 0px); } .powloka { padding-bottom:calc(40px + env(safe-area-inset-bottom, 0px)); } .logowanie { padding-top:calc(40px + env(safe-area-inset-top, 0px)); padding-bottom:calc(40px + env(safe-area-inset-bottom, 0px)); } /* ══════════════════════════════════════════════════════════════════════════ TELEFON I TABLET 1240 px rozkłada trójkę kart i kafle, 900 px chowa nawigację pod przycisk, 640 px zamienia tabele w karty, 420 px dociska marginesy. ══════════════════════════════════════════════════════════════════════════ */ @media (max-width:1240px) { /* Poniżej tej szerokości pasek znów wolno zawinąć. Zakaz zawijania ma sens tylko tam, gdzie wszystko się mieści — niżej, aż do progu 900 px z menu pod przyciskiem, druga linia jest lepsza niż wypchnięcie strony w bok. Zanim jednak do niej dojdzie, ściskamy odstępy: na oknie 1100 px komplet mieści się wtedy dalej w jednej linii. */ nav, .akcje-paska { flex-wrap:wrap; } .pasek-tresc { gap:12px; padding-left:16px; padding-right:16px; } .menu { gap:12px; } nav { gap:0; } nav a { padding:7px 9px; } .akcje-paska { gap:7px; } .kpi { grid-template-columns:repeat(2,minmax(0,1fr)); } .portfele { grid-template-columns:repeat(3,minmax(0,1fr)); } .siatka-3 { grid-template-columns:1fr 1fr; } .siatka-3 > :first-child { grid-column:1/-1; } .presety { grid-template-columns:repeat(2,minmax(0,1fr)); } } @media (max-width:900px) { .pasek-tresc { padding:10px 14px; gap:10px; flex-wrap:nowrap; } .pasek .logo-znak { width:26px; height:26px; } .pasek .logo-tekst b { font-size:16.5px; } .menu-przycisk { display:grid; place-items:center; width:42px; height:42px; flex:none; padding:0; border:1px solid var(--linia); border-radius:11px; background:var(--surface-2); color:var(--ink-2); cursor:pointer; margin-left:auto; } .menu-przycisk .kreski, .menu-przycisk .kreski::before, .menu-przycisk .kreski::after { display:block; width:18px; height:2px; border-radius:2px; background:currentColor; transition:transform .18s, opacity .18s; } .menu-przycisk .kreski { position:relative; } .menu-przycisk .kreski::before, .menu-przycisk .kreski::after { content:""; position:absolute; left:0; } .menu-przycisk .kreski::before { top:-6px; } .menu-przycisk .kreski::after { top:6px; } .menu-przycisk[aria-expanded="true"] { background:var(--akcent-slaby); border-color:var(--akcent); color:var(--akcent); } .menu-przycisk[aria-expanded="true"] .kreski { background:transparent; } .menu-przycisk[aria-expanded="true"] .kreski::before { transform:translateY(6px) rotate(45deg); } .menu-przycisk[aria-expanded="true"] .kreski::after { transform:translateY(-6px) rotate(-45deg); } .menu { display:none; position:absolute; left:0; right:0; top:100%; flex-direction:column; align-items:stretch; gap:10px; padding:10px 14px 14px; background:var(--surface); border-bottom:1px solid var(--linia); box-shadow:var(--cien); max-height:calc(100dvh - 62px); overflow-y:auto; z-index:29; } .menu.otwarte { display:flex; } nav { flex-direction:column; align-items:stretch; gap:2px; } nav a { padding:12px 14px; font-size:15px; border-radius:10px; } .akcje-paska { margin-left:0; flex-direction:column; align-items:stretch; gap:8px; padding-top:10px; border-top:1px solid var(--linia); } .akcje-paska form { display:block; } .akcje-paska .btn { width:100%; padding:11px 14px; font-size:15px; } .meta-paska { white-space:normal; } .powloka { padding:14px; } .kpi, .portfele, .siatka-3, .siatka-2, .presety { grid-template-columns:minmax(0,1fr); } .siatka-3 > :first-child { grid-column:auto; } .panel-boczny { position:static; } .panel-najpierw > :last-child { order:-1; } } @media (max-width:640px) { .powloka { padding:12px; gap:10px; } .naglowek { padding:18px 16px 8px; } .glowa-karty { padding:15px 16px 10px; } .karta-pad { padding:15px 16px; } .plotno { padding:6px 8px 10px; } .struktura-tresc { padding:0 16px; flex-direction:column; align-items:stretch; gap:14px; } .plotno-donut { align-self:center; } .waluty { margin-left:16px; margin-right:16px; } .stopy-chipy > div { padding:7px 11px; } .para-pol, .siatka-pol, .trojka-pol, .trojka-pol-rowna { grid-template-columns:minmax(0,1fr); } .stopka { flex-direction:column; align-items:flex-start; gap:8px; } /* Pola formularzy: poniżej 16 px iOS przybliża stronę przy wejściu w pole. */ input[type="text"], input[type="password"], input[type="number"], input[type="date"], input[type="time"], input[type="search"], input[type="file"], select, textarea { font-size:16px; padding:11px 12px; } .pole label { font-size:13px; } .btn { padding:9px 15px; font-size:14px; } .btn-szeroki { padding:13px 16px; } .przyciski-formularza .btn { padding:13px 16px; flex:1 1 100%; } .przelacznik button { padding:8px 12px; font-size:12.5px; } .link-maly { padding:8px 12px; } .wykres-waloru { padding:12px 12px 10px; } .wykres-waloru .legenda-tr { margin-left:0; } /* Opis waloru („Akcja · NASDAQ · USD") schodzi na własną linię — na telefonie ściśnięty w jednym rzędzie zjadał nazwę spółki, czyli to, po czym się wybiera. */ .walor-wynik { flex-wrap:wrap; row-gap:1px; } .walor-wynik .rynek { order:3; flex:1 0 100%; } .kwoty-glowne { gap:14px 20px; } .kwoty-glowne > * + * { padding-left:0; border-left:none; } .kwoty-glowne > * + * .majatek { font-size:24px; } } @media (max-width:420px) { .powloka { padding:10px; } .naglowek { padding:16px 14px 8px; } .karta-pad { padding:14px; } .majatek { font-size:32px; } .przelacznik { flex-wrap:wrap; } .kpi > *, .portfele > *, .siatka-3 > *, .siatka-2 > * { min-width:0; } } /* ── Tabele jako karty ── Osiem–dziewięć kolumn nie zmieści się na telefonie, a przewijanie w bok gubi nazwę waloru. Każdy wiersz staje się kartą: pierwsza komórka jest tytułem, reszta parami „etykieta — wartość" (etykieta z atrybutu data-etykieta). */ @media (max-width:640px) { .tabela-otoczka { overflow-x:visible; } /* ...ale tablica rynków nie zamienia się w karty: ma 23 wiersze po osiem kolumn liczb, a karta na wiersz dałaby ekran bez końca. Zostaje więc tabelą i przewija się w bok wewnątrz swojej otoczki — bez tego wyjątku rozpychała stronę do 974 px przy oknie 390 px. Nazwa instrumentu jest przyklejona do lewej krawędzi (position:sticky), więc przy kolumnie „10 lat" nadal wiadomo, czyj to wynik. Sam przewijany kontener to jednak za mało. Przy pełnowymiarowych kolumnach na ekran 390 px wchodziła nazwa i **dwie** kolumny liczb, a nazwy łamały się na trzy linie („20 największych / spółek, / z dywidendami") — wiersze miały przez to różną wysokość i tabela wyglądała na rozsypaną. Poniżej ściskamy ją do rozmiarów telefonu: opis i waluta znikają (zostają w wersji na duży ekran), nazwa nie zawija się, kolumny są węższe. Wchodzi wtedy nazwa i cztery okresy. */ .tabela-otoczka.otoczka-rynkow { overflow-x:auto; } .tablica-rynkow { min-width:662px; } .tablica-rynkow th { font-size:9.5px; padding:0 6px 7px; } .tablica-rynkow th.instrument, .tablica-rynkow .nazwa-rynku { padding-left:14px; } /* Data zostaje — niesie informację, od kiedy liczony jest okres — ale w postaci dwucyfrowego roku i bez słowa „od". Pełna forma była tu najszerszym elementem nagłówka i to ona wyznaczała szerokość całej kolumny. */ .tablica-rynkow th small { font-size:8.5px; letter-spacing:0; } .tablica-rynkow th small .data-pelna { display:none; } .tablica-rynkow th small .data-krotka { display:inline; } .tablica-rynkow .nazwa-rynku { width:86px; } .tablica-rynkow .nazwa-rynku b { font-size:12.5px; white-space:nowrap; } .tablica-rynkow .nazwa-rynku i, .tablica-rynkow .plakietka-waluty { display:none; } .tablica-rynkow td.zwrot { font-size:12px; padding:7px 6px; } tr.grupa-rynkow td { padding:10px 14px 4px; } tr.grupa-rynkow td span { left:14px; } /* Cień przy prawej krawędzi mówi, że tabela ma dalszy ciąg. `local` sprawia, że gaśnie po dojechaniu do końca — inaczej obiecywałby treść, której nie ma. */ .otoczka-rynkow { background: linear-gradient(to left, var(--surface) 40%, transparent) right / 26px 100% no-repeat local, radial-gradient(farthest-side at 100% 50%, color-mix(in srgb, var(--ink) 20%, transparent), transparent) right / 14px 100% no-repeat scroll; } .tabela-karty { display:block; min-width:0; } .tabela-karty thead { display:none; } .tabela-karty tbody { display:block; } .tabela-karty tbody tr { display:grid; grid-template-columns:1fr 1fr; gap:2px 14px; padding:12px 16px; border-bottom:1px solid var(--linia); } .tabela-karty tbody tr:last-child { border-bottom:0; } .tabela-karty td { display:block; padding:2px 0; border:0; text-align:right; font-size:13.5px; min-width:0; } .tabela-karty td::before { content:attr(data-etykieta); float:left; margin-right:8px; font-size:10.5px; font-weight:650; letter-spacing:.06em; text-transform:uppercase; color:var(--ink-3); line-height:1.75; } .tabela-karty td:first-child, .tabela-karty td:last-child { padding-left:0; padding-right:0; } .tabela-karty td.glowa { display:block; order:-1; grid-column:1/-1; text-align:left; margin-bottom:7px; } .tabela-karty td.glowa::before { content:none; } .tabela-karty td.puste { display:block; grid-column:1/-1; text-align:center; } .tabela-karty td.szeroka { grid-column:1/-1; } .tabela-karty td.puste::before { content:none; } .tabela-karty tbody tr.rozwiniecie { display:block; padding:0; } .tabela-karty tr.rozwiniecie > td { display:block; padding:0 !important; } .tabela-karty tr.rozwiniecie > td::before { content:none; } .tabela-karty .udzial { justify-content:flex-end; } .tabela-karty .konto-pozycji { justify-content:flex-end; } .tabela-karty .wynik .proc { margin-left:5px; } } @media (hover:none) { tbody tr:hover { background:transparent; } nav a:hover { background:transparent; color:var(--ink-2); } nav a.aktywna:hover { background:var(--akcent-slaby); color:var(--akcent); } .btn:hover { filter:none; } tr.pozycja:active { background:var(--surface-2); } } @media (max-width:359px) { .tabela-karty tbody tr { grid-template-columns:1fr; } } /* ── Ekran logowania ── */ .logowanie { min-height:100vh; min-height:100dvh; display:grid; place-items:center; padding:40px 20px; } .logowanie-tresc { width:100%; max-width:400px; display:flex; flex-direction:column; gap:18px; } .logo-duze { flex-direction:column; gap:15px; align-items:center; text-align:center; } .logo-duze .logo-znak { width:60px; height:60px; } .logo-duze .logo-tekst { align-items:center; } .logo-duze .logo-tekst b { font-size:31px; } .logo-duze .logo-podtytul { font-size:10.5px; letter-spacing:.16em; margin-top:6px; } .karta-logowania { padding:26px 28px 28px; } .karta-logowania h1 { font-size:19px; font-weight:640; } .karta-logowania .podtytul { margin:6px 0 22px; font-size:13px; color:var(--ink-3); } .karta-logowania form { margin:0; } .karta-logowania .pole:last-of-type { margin-bottom:22px; } .komunikat-logowania { display:flex; align-items:flex-start; gap:9px; margin-bottom:20px; } .komunikat-logowania svg { flex:0 0 auto; margin-top:1px; } .pole-blad input { border-color:var(--strata); } .nota-dostepu { margin:0; display:flex; align-items:center; justify-content:center; gap:7px; color:var(--ink-3); font-size:12px; } @media (max-width:640px) { .logowanie { padding:32px 14px; } .logo-duze .logo-znak { width:52px; height:52px; } .logo-duze .logo-tekst b { font-size:27px; } .karta-logowania { padding:22px 18px 24px; } .karta-logowania h1 { font-size:20px; } .nota-dostepu { font-size:12.5px; } }