.rap{ --lead:#2AC59B; --lead2:#4ad8b2; --lead-d:#1ea884; --dark:#384047; --light:#717f86; --grey:#F7F8FA; --line:#e9edf1; --ink:#2b3238; --white:#fff; color:var(--ink); font-family:system-ui,-apple-system,"Segoe UI",Roboto,sans-serif; line-height:1.5; -webkit-font-smoothing:antialiased; background:transparent; } /* TLO RAPORTU na CALA SZEROKOSC body: gradient siedzi na pelnoszerokiej sekcji .bg-grey (poza kontenerem tresci). Delikatny, staly (fixed) — bez ostrych przejsc miedzy sekcjami. Te nadpisania laduja sie tylko na stronie raportu, wiec nie ruszaja innych stron ani menu. */ #content.content{ background:transparent; } .bg-grey{ background:linear-gradient(180deg,#e8f6f0 0%,#f1faf6 300px,#ffffff 580px) no-repeat; } .rap *{ box-sizing:border-box; } .rap .wrap{ max-width:1160px; margin:0 auto; padding:0 22px; } .rap section{ padding:78px 0; } .rap section.alt{ background:transparent; } /* Nagłówki sekcji. Selektor jest celowo podwójny (.rap.tw-scope), nie .rap. tailwind-build.css ładuje się w ZAWSZE po tym arkuszu i zawiera reset `.tw-scope h1,…,h6{ font-size:inherit; margin:0 }` oraz `{ font-weight:inherit; color:inherit }`. `.tw-scope h2` ma dokładnie tę samą wagę co `.rap h2` (jedna klasa + element), a przy remisie wygrywa arkusz wczytany później — czyli reset. Kontener raportu ma obie klasy, więc `.rap.tw-scope h2` (0,2,1) bije reset (0,1,1) bez ruszania kolejności arkuszy. Nagłówki h3 problemu nie mają: mają selektory .rap .panel h3 i .rap .faq-item h3, które i tak są cięższe od resetu. */ .rap.tw-scope h2{ font-size:30px; line-height:1.15; margin:0 0 8px; letter-spacing:-.02em; font-weight:700; color:var(--dark); } .rap h2 b{ color:var(--lead-d); } .rap .lead-p{ color:var(--light); font-size:16px; margin:0 0 34px; max-width:640px; } .rap .eyebrow{ text-transform:uppercase; letter-spacing:.12em; font-size:12px; font-weight:700; color:var(--lead-d); margin:0 0 10px; } /* HERO */ .rap .hero{ position:relative; padding:0; color:var(--ink); background:transparent; } .rap .hero .wrap{ position:relative; z-index:2; padding-top:60px; padding-bottom:38px; } .rap .hero-grid{ display:grid; grid-template-columns:1.02fr .98fr; gap:46px; align-items:start; } .rap .hero .badge{ display:inline-flex; align-items:center; gap:8px; background:#e6f7f0; color:var(--lead-d); border:1px solid #cfeee2; padding:6px 14px; border-radius:100px; font-size:12.5px; font-weight:800; letter-spacing:.08em; text-transform:uppercase; } .rap .hero h1{ font-size:clamp(30px,4.5vw,50px); line-height:1.05; letter-spacing:-.03em; color:var(--dark); font-weight:800; margin:20px 0 0; max-width:15ch; } .rap .hero .accent{ display:block; width:56px; height:5px; border-radius:999px; margin:18px 0 20px; background:linear-gradient(90deg,var(--lead-d),var(--lead2)); } .rap .hero .sub{ font-size:17px; line-height:1.55; max-width:44ch; color:var(--light); margin:0 0 28px; } /* przycisk CTA hero */ .rap .hero-cta{ display:inline-flex; align-items:center; justify-content:center; gap:10px; background:var(--lead-d); color:#fff; text-decoration:none; font-weight:800; font-size:15.5px; padding:14px 26px; border-radius:100px; box-shadow:0 8px 20px rgba(30,168,132,.28); transition:transform .15s, box-shadow .15s, background .15s; } .rap .hero-cta:hover{ background:var(--lead); color:#fff; transform:translateY(-2px); box-shadow:0 12px 26px rgba(30,168,132,.34); } .rap .hero-cta .ar{ transition:transform .2s; } .rap .hero-cta:hover .ar{ transform:translateY(3px); } .rap .hero-cta.is-mobile{ display:none; } /* karta statystyk */ .rap .statcard{ background:#fff; border:1px solid var(--line); border-radius:20px; padding:24px 24px 22px; box-shadow:0 1px 2px rgba(20,40,30,.04), 0 10px 26px rgba(20,50,38,.06); } .rap .sc-top{ display:flex; align-items:flex-start; justify-content:space-between; gap:16px; } .rap .sc-lab{ font-size:12px; font-weight:700; letter-spacing:.08em; text-transform:uppercase; color:var(--light); } .rap .sc-big{ font-size:clamp(40px,6vw,54px); font-weight:800; letter-spacing:-.03em; color:var(--dark); line-height:1; margin-top:6px; } .rap .sc-big .cur{ font-size:.42em; font-weight:700; color:var(--light); margin-left:6px; } .rap .sc-sub{ font-size:13px; color:var(--light); margin-top:7px; } /* mini wykres kolumnowy w karcie #heroBars nosi dziś trzy różne rzeczy: bez JS samą tabelę render_hero_stats(); z JS sześć .sc-bar; z JS i otwartym
(stashTable) także tę samą tabelę pod spodem. Stała height:126px + align-items:flex-end kotwiczyła WSZYSTKO do dołu pudełka — wyższa od 126px treść (tabela, otwarty details) wychodziła w GÓRĘ, na .sc-cap i .sc-top (cena/mediana). min-height (zamiast height) pozwala pudełku rosnąć zamiast przycinać; flex-wrap + wymuszony pełny wiersz dla details.rap-tbl zrzuca tabelę PONIŻEJ słupków zamiast obok nich, więc rośnie w dół, nie w górę. .sc-bar dostaje wysokość na sztywno (nie %) — przy height:auto rodzica wartość procentowa nie miałaby się do czego odnieść i słupki by się zapadły. flex-wrap (wyżej) ma jeszcze jeden efekt uboczny: .sc-bar bez min-width:0 ma automatyczne minimum liczone z treści (etykieta .cl) — w wąskim, ale nie mobilnym pudełku (etykiety chowają się dopiero @860px) sam rząd słupków zaczyna się łamać na 2-3 linie. min-width:0 pozwala słupkowi skurczyć się poniżej szerokości etykiety; etykieta dostaje wtedy własny ellipsis, żeby nie wystawać poza węższy już słupek. */ .rap .sc-cap{ font-size:12px; color:var(--light); margin:22px 0 0; padding-top:18px; border-top:1px solid var(--line); } .rap .sc-bars{ display:flex; flex-wrap:wrap; align-items:flex-end; gap:10px; min-height:126px; margin-top:14px; } .rap .sc-bar{ flex:1; min-width:0; display:flex; flex-direction:column; justify-content:flex-end; align-items:center; height:126px; } .rap .sc-bars > details.rap-tbl{ flex:0 0 100%; } .rap .sc-bar .cv{ font-size:11.5px; font-weight:700; color:var(--dark); margin-bottom:6px; font-variant-numeric:tabular-nums; opacity:0; transition:opacity .5s .35s; } .rap .sc-bar .col{ width:100%; max-width:44px; border-radius:7px 7px 3px 3px; height:0; transition:height 1s cubic-bezier(.2,.7,.2,1); } .rap .sc-bar .cl{ font-size:10.5px; color:var(--light); margin-top:8px; text-align:center; line-height:1.15; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; max-width:100%; } .rap .sc-bars.in .sc-bar .cv{ opacity:1; } /* KPI hero */ .rap .hero-kpis{ display:grid; grid-template-columns:repeat(4,1fr); gap:8px; margin-top:20px; } .rap .hk{ text-align:center; padding:2px 2px; } .rap .hk .v{ font-size:23px; font-weight:800; color:var(--dark); letter-spacing:-.02em; } .rap .hk .l{ font-size:11.5px; color:var(--light); margin-top:2px; } /* nawigacja sekcji (chipy) */ .rap .secnav{ position:relative; z-index:2; border-top:1px solid var(--line); margin-top:8px; scroll-margin-top:84px; } .rap section[id]{ scroll-margin-top:84px; } .rap .secnav .wrap{ display:flex; align-items:center; gap:14px; padding-top:16px; padding-bottom:20px; } .rap .secnav-lab{ font-size:11.5px; font-weight:800; letter-spacing:.1em; text-transform:uppercase; color:var(--light); white-space:nowrap; } .rap .secnav-lab .m{ display:none; } .rap .secnav-track{ display:flex; gap:9px; overflow-x:auto; scroll-behavior:smooth; padding:2px 0 9px; scrollbar-width:thin; scrollbar-color:#b9e2d3 transparent; } .rap .secnav-track::-webkit-scrollbar{ height:7px; } .rap .secnav-track::-webkit-scrollbar-button{ display:none; width:0; height:0; } .rap .secnav-track::-webkit-scrollbar-track{ background:#eef3f1; border-radius:999px; } .rap .secnav-track::-webkit-scrollbar-thumb{ background:#b9e2d3; border-radius:999px; } .rap .secnav-track::-webkit-scrollbar-thumb:hover{ background:#95d3bd; } .rap .chip{ display:inline-block; white-space:nowrap; text-decoration:none; font-size:13.5px; font-weight:600; color:var(--dark); background:#fff; border:1px solid var(--line); border-radius:100px; padding:9px 16px; transition:.15s; } .rap .chip:hover{ border-color:var(--lead); color:var(--lead-d); } .rap .chip.on{ background:#e6f7f0; border-color:#bfe9d8; color:var(--lead-d); font-weight:700; } .rap .secnav-arrow{ display:none; flex:0 0 auto; width:30px; height:30px; border-radius:50%; border:1px solid var(--line); background:#fff; color:var(--light); cursor:pointer; align-items:center; justify-content:center; font-size:15px; line-height:1; } .rap .secnav-arrow:hover{ border-color:var(--lead); color:var(--lead-d); } /* mobile: nawigacja sekcji w dwoch wierszach, wysrodkowana — wiersz 1: etykieta, wiersz 2: strzalki+chipy */ @media(max-width:640px){ .rap .secnav .wrap{ flex-wrap:wrap; justify-content:center; row-gap:10px; } .rap .secnav-lab{ flex:0 0 100%; text-align:center; } .rap .secnav-track{ flex:1 1 0; min-width:0; } /* CTA "Znajdz korepetytora z:" — etykieta w osobnym wierszu nad, wysrodkowane */ .rap #ctaListing{ flex-wrap:wrap; justify-content:center; } .rap #ctaListing .cta-lbl{ flex:0 0 100%; text-align:center; } /* histogram: pozwol kolumnom kurczyc sie do szerokosci karty (nie wychodzil) */ .rap .hist .hcol{ min-width:0; } .rap .hist{ gap:2px; } .rap .hist .hlab{ font-size:8px; } } /* rok — selektor (jeśli >1 rocznik) */ .rap .yearbar{ display:flex; align-items:center; gap:8px; flex-wrap:wrap; margin-top:16px; } .rap .yearbar .yl{ font-size:13px; color:var(--light); } .rap .ychip{ text-decoration:none; color:var(--dark); border:1px solid var(--line); background:#fff; padding:5px 13px; border-radius:100px; font-size:13.5px; font-weight:600; transition:.15s; } .rap .ychip:hover{ border-color:var(--lead); color:var(--lead-d); } .rap .ychip.on{ background:var(--lead-d); color:#fff; border-color:var(--lead-d); } /* KPI */ .rap .kpis{ display:grid; grid-template-columns:repeat(4,1fr); gap:16px; } @media(max-width:820px){ .rap .kpis{ grid-template-columns:repeat(2,1fr);} } /* stashTable() dokleja
jako kolejne dziecko grida kafli — bez tego zajmowalby jedna kolumne z czterech zamiast pelnej szerokosci. */ .rap .kpis > details.rap-tbl{ grid-column:1 / -1; } .rap .kpi{ background:#fff; border:1px solid var(--line); border-radius:16px; padding:22px 20px; box-shadow:0 1px 2px rgba(20,40,30,.04),0 10px 24px rgba(20,40,30,.05); } .rap .kpi .k{ font-size:12px; text-transform:uppercase; letter-spacing:.05em; color:var(--light); font-weight:600; } .rap .kpi .v{ font-size:34px; font-weight:800; letter-spacing:-.02em; margin:6px 0 2px; color:var(--dark); } .rap .kpi .d{ font-size:13px; color:var(--light); } .rap .kpi .up{ color:#d0533f; font-weight:700; } .rap .kpi .down{ color:#0f9d63; font-weight:700; } /* słupki */ .rap .bars{ display:flex; flex-direction:column; gap:9px; margin-top:6px; } .rap .bar-row{ display:grid; grid-template-columns:168px 1fr 96px; align-items:center; gap:12px; } @media(max-width:640px){ .rap .bar-row{ grid-template-columns:120px 1fr 74px; } } .rap .bar-lab{ font-size:13px; color:var(--dark); text-align:right; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; } .rap .bar-track{ position:relative; height:26px; background:var(--grey); border-radius:8px; overflow:hidden; } .rap .bar-fill{ position:absolute; inset:0 auto 0 0; width:0; border-radius:8px; background:linear-gradient(90deg,var(--lead-d),var(--lead2)); transition:width 1.1s cubic-bezier(.2,.7,.2,1); } .rap .bar-val{ font-size:14px; font-weight:700; color:var(--dark); text-align:right; font-variant-numeric:tabular-nums; } /* heatmapa */ .rap .heat-wrap{ overflow-x:auto; padding-bottom:6px; } .rap table.heat{ border-collapse:separate; border-spacing:4px; font-size:12px; } .rap table.heat th{ font-weight:600; color:var(--light); padding:3px 6px; white-space:nowrap; } .rap table.heat thead th{ text-align:center; vertical-align:bottom; } .rap table.heat tbody th{ text-align:right; position:sticky; left:0; z-index:2; background:#f3faf6; box-shadow:4px 0 0 #f3faf6; } .rap .cell{ min-width:50px; height:30px; border-radius:7px; display:flex; align-items:center; justify-content:center; font-weight:600; font-variant-numeric:tabular-nums; } /* Domyślnie liczby w komórkach są WIDOCZNE (tekst w kolorze tekstu strony, bez tła) — to stan tabeli renderowanej serwerowo. Kolor tła i animacja "wjazdu" dotyczą wyłącznie wypełnionych komórek i włączają się tylko, gdy JS potwierdzi swoją obecność klasą `js` na (patrz .reveal wyżej). Bez tej bramki, tak jak wcześniej, KAŻDA komórka heatmapy — także „—" poniżej progu, do której JS nigdy nie dotyka — miałaby trwałe opacity:0 i byłaby niewidoczna. */ html.js .rap .cell:not(.empty){ color:#fff; transform:scale(.4); opacity:0; transition:transform .5s,opacity .5s; } html.js .rap .cell.in{ transform:scale(1); opacity:1; } .rap .cell.empty{ background:var(--grey); color:var(--light); font-weight:500; } /* mała próbka (10–29 ogł.): komórka przygaszona z przerywaną ramką + gwiazdka */ .rap .cell.star{ opacity:.82; box-shadow:inset 0 0 0 1.5px rgba(255,255,255,.55); } .rap .cell .st{ font-size:.72em; vertical-align:super; margin-left:1px; opacity:.9; } .rap .st{ color:#c98a12; font-weight:700; } .rap .bar-lab .st{ margin-left:3px; } .rap .toolbar{ display:flex; gap:10px; align-items:center; flex-wrap:wrap; margin:0 0 22px; } /* selecty jak w formularzach serwisu (cs-select / cs-skin-border): ramka #dee7ea, radius 4px, arrow.svg */ .rap select.pick{ font:inherit; font-size:14px; font-weight:400; color:var(--dark); cursor:pointer; padding:11px 42px 11px 13px; border:1px solid #dee7ea; border-radius:4px; background:#fff; appearance:none; -webkit-appearance:none; background-image:url("/images/svg/arrow.svg"); background-repeat:no-repeat; background-position:right 18px center; } .rap select.pick:focus{ outline:none; border-color:#c7d3d9; } .rap .seg{ display:inline-flex; background:var(--grey); border-radius:10px; padding:3px; } .rap .seg button{ border:0; background:transparent; color:var(--light); padding:7px 14px; font:inherit; font-size:13px; font-weight:600; border-radius:8px; cursor:pointer; } .rap .seg button.on{ background:#fff; color:var(--lead-d); box-shadow:0 1px 3px rgba(0,0,0,.08); } .rap .legend{ display:flex; align-items:center; gap:10px; margin-top:16px; font-size:12px; color:var(--light); flex-wrap:wrap; } .rap .legend .scale{ width:180px; height:10px; border-radius:6px; background:linear-gradient(90deg,#d8f3ea,#7ed9bf,#2AC59B,#178a68); } .rap .swatch{ display:inline-flex; align-items:center; gap:6px; } .rap .box{ width:12px; height:12px; border-radius:4px; } /* dwie kolumny */ .rap .cols{ display:grid; grid-template-columns:1fr 1fr; gap:26px; align-items:start; } @media(max-width:860px){ .rap .cols{ grid-template-columns:1fr; } } .rap .panel{ background:#fff; border:1px solid var(--line); border-radius:16px; padding:22px; box-shadow:0 10px 24px rgba(20,40,30,.05); } .rap .panel h3{ margin:0 0 4px; font-size:16px; color:var(--dark); } .rap .panel .cap{ margin:0 0 16px; font-size:13px; color:var(--light); } /* online grouped */ .rap .gb{ display:grid; grid-template-columns:150px 1fr; gap:12px; align-items:center; margin-bottom:12px; } .rap .gb .pair{ display:flex; flex-direction:column; gap:4px; } .rap .gb .t{ position:relative; height:15px; background:var(--grey); border-radius:6px; overflow:hidden; } .rap .gb .f{ position:absolute; inset:0 auto 0 0; width:0; border-radius:6px; transition:width 1s cubic-bezier(.2,.7,.2,1); } .rap .gb .f.a{ background:var(--lead-d); } .rap .gb .f.b{ background:#9bd9c4; } /* reveal */ /* Animacja wejścia sekcji. Domyślnie treść jest WIDOCZNA — ukrywamy ją tylko wtedy, gdy JS potwierdzi swoją obecność klasą `js` na . Bez tego przy wyłączonym JavaScripcie cała treść raportu miała opacity:0 i strona świeciła białą plamą. */ .rap .reveal{ opacity:1; transform:none; } html.js .rap .reveal{ opacity:0; transform:translateY(26px); transition:opacity .7s ease, transform .7s cubic-bezier(.2,.7,.2,1); } html.js .rap .reveal.in{ opacity:1; transform:none; } .rap .reveal.d1{ transition-delay:.08s;} .rap .reveal.d2{ transition-delay:.16s;} .rap .reveal.d3{ transition-delay:.24s;} /* Użytkownik, który poprosił system o ograniczenie animacji, dostaje treść od razu. */ @media (prefers-reduced-motion: reduce){ html.js .rap .reveal{ opacity:1; transform:none; transition:none; } } .rap .tip{ position:fixed; z-index:60; pointer-events:none; background:var(--dark); color:#fff; padding:8px 11px; border-radius:9px; font-size:12.5px; opacity:0; transition:opacity .1s; box-shadow:0 8px 24px rgba(0,0,0,.2); max-width:240px; } .rap .tip b{ font-weight:700; } .rap #foot{ padding:12px 0 60px; } .rap .foot{ background:rgba(255,255,255,.55); border:1px solid var(--line); border-radius:16px; padding:26px 30px; color:var(--light); font-size:13px; line-height:1.6; text-align:left; box-shadow:0 1px 2px rgba(20,40,30,.03); } .rap .foot .badge{ display:inline-block; background:#fff; border:1px solid var(--line); border-radius:8px; padding:3px 10px; font-weight:700; color:var(--dark); } .rap .foot p:first-child{ margin-top:0; } .rap .disc{ background:#fff5e6; border:1px solid #ffd591; color:#8a5b00; border-radius:12px; padding:12px 16px; font-size:13.5px; margin-top:18px; } /* rozkład cen: karty + histogram */ .rap .dist-cards{ display:grid; grid-template-columns:repeat(5,1fr); gap:12px; margin:6px 0 30px; } @media(max-width:820px){ .rap .dist-cards{ grid-template-columns:repeat(2,1fr); } } .rap .dcard{ background:#fff; border:1px solid var(--line); border-radius:14px; padding:15px 16px; box-shadow:0 8px 20px rgba(20,40,30,.04); } .rap .dcard .k{ font-size:11px; text-transform:uppercase; letter-spacing:.04em; color:var(--light); font-weight:600; } .rap .dcard .v{ font-size:22px; font-weight:800; color:var(--dark); margin:5px 0 2px; letter-spacing:-.01em; } .rap .dcard .u{ font-size:11px; color:var(--light); } .rap .dist-cards.c4{ grid-template-columns:repeat(4,1fr); } @media(max-width:820px){ .rap .dist-cards.c4{ grid-template-columns:repeat(2,1fr); } } .rap .dcard.hi{ border-color:#cfe9e0; background:linear-gradient(180deg,#f6fffb,#fff); } .rap .dcard .v .more{ color:#d0533f; } .rap .dcard .v .less{ color:#0f9d63; } .rap .dcard .u .up{ color:#d0533f; font-weight:700; } .rap .dcard .u .down{ color:#0f9d63; font-weight:700; } /* znaczniki na słupku: stolica (kreska) + poza stolicą (kropka) */ .rap .capmark{ position:absolute; top:-3px; bottom:-3px; width:2px; background:var(--dark); border-radius:1px; } .rap .outmark{ position:absolute; top:50%; width:11px; height:11px; margin:-5.5px 0 0 -5.5px; border-radius:50%; background:#f5a623; border:2px solid #fff; box-shadow:0 0 0 1px rgba(56,64,71,.2); } .rap .dot{ width:11px; height:11px; border-radius:50%; background:#f5a623; border:2px solid #fff; box-shadow:0 0 0 1px rgba(56,64,71,.2); display:inline-block; } .rap .hist{ display:flex; align-items:flex-end; gap:3px; height:230px; margin-top:8px; padding-bottom:24px; position:relative; border-bottom:1px solid var(--line); } .rap .hcol{ flex:1; display:flex; flex-direction:column; justify-content:flex-end; align-items:center; height:100%; } .rap .hbar{ width:100%; max-width:42px; background:linear-gradient(180deg,var(--lead2),var(--lead-d)); border-radius:5px 5px 0 0; height:0; min-height:1px; transition:height .9s cubic-bezier(.2,.7,.2,1); } .rap .hlab{ margin-top:6px; font-size:10px; color:var(--light); white-space:nowrap; } .rap .hist-cap{ font-size:12px; color:var(--light); margin-top:14px; } .rap .exp{ border:1px solid var(--line); background:#fff; color:var(--dark); border-radius:9px; padding:8px 13px; font:inherit; font-size:13px; font-weight:600; cursor:pointer; } .rap .exp:hover{ border-color:var(--lead); color:var(--lead-d); } .rap .exp.primary{ background:var(--lead-d); color:#fff; border-color:var(--lead-d); } .rap .exp.primary:hover{ background:var(--lead); color:#fff; } /* rozpiętość cen (dumbbell min–max) */ .rap .db-row{ display:grid; grid-template-columns:170px 1fr 128px; align-items:center; gap:12px; margin-bottom:8px; } @media(max-width:640px){ .rap .db-row{ grid-template-columns:110px 1fr 96px; } } .rap .db-track{ position:relative; height:22px; } .rap .db-track::before{ content:""; position:absolute; left:0; right:0; top:50%; height:2px; transform:translateY(-50%); background:var(--grey); border-radius:2px; } .rap .db-line{ position:absolute; top:50%; height:5px; transform:translateY(-50%); background:linear-gradient(90deg,#9bd9c4,#22b58e); border-radius:3px; width:0; transition:width .8s cubic-bezier(.2,.7,.2,1); } .rap .db-dot{ position:absolute; top:50%; width:12px; height:12px; border-radius:50%; transform:translate(-50%,-50%); border:2px solid #fff; box-shadow:0 1px 3px rgba(0,0,0,.18); } .rap .db-dot.min{ background:#9bd9c4; } .rap .db-dot.max{ background:#22b58e; } .rap .db-val{ font-size:12px; color:var(--light); text-align:right; font-variant-numeric:tabular-nums; } .rap .db-val .mx{ font-weight:700; color:var(--dark); } /* płynne przewijanie dla kafli spisu treści (kotwice) */ html{ scroll-behavior:smooth; } @media (prefers-reduced-motion: reduce){ html{ scroll-behavior:auto; } } /* ciekawostki (karty pod leadem) */ .rap .facts{ display:grid; grid-template-columns:1fr 1fr; gap:13px; margin:24px 0 30px; } @media(max-width:820px){ .rap .facts{ grid-template-columns:1fr; } } .rap .fact{ background:#fff; border:1px solid var(--line); border-radius:14px; padding:15px 17px; font-size:14px; line-height:1.55; display:flex; gap:12px; align-items:flex-start; box-shadow:0 6px 16px rgba(20,40,30,.04); } .rap .fact .no{ flex:0 0 23px; height:23px; border-radius:50%; background:var(--lead); color:#fff; font-size:11.5px; font-weight:800; display:flex; align-items:center; justify-content:center; margin-top:1px; } .rap .fact b{ color:var(--dark); font-weight:700; } .rap .fact .src, .rap .note .src{ display:block; margin-top:7px; font-size:11.5px; line-height:1.4; color:var(--light); font-style:italic; } /* powrót do spisu treści na końcu każdej sekcji */ .rap .backlink{ margin:26px 0 0; text-align:center; } .rap .backlink a{ display:inline-flex; align-items:center; gap:6px; font-size:13px; font-weight:600; color:var(--lead-d); text-decoration:none; padding:7px 14px; border-radius:100px; border:1px solid var(--line); transition:border-color .18s, background .18s; } .rap .backlink a:hover, .rap .backlink a:focus{ border-color:var(--lead); background:#f2fbf8; outline:none; } /* cytaty z ankiety (blockquote + figcaption) */ .rap .ank-quote{ margin:28px 0 0; padding:18px 22px; background:var(--grey); border-left:4px solid var(--lead); border-radius:0 12px 12px 0; } .rap .ank-quote blockquote{ margin:0; font-size:16.5px; line-height:1.62; color:var(--ink); font-style:italic; } .rap .ank-quote figcaption{ margin:10px 0 0; font-size:13px; color:var(--light); font-style:normal; } /* blok metodologiczny */ .rap section.method .lead-p{ max-width:800px; color:var(--ink); } /* CTA (listing / rejestracja) */ .rap .cta-row{ margin:18px 0 0; text-align:center; } .rap .cta{ display:inline-flex; align-items:center; gap:8px; font-size:14.5px; font-weight:700; text-decoration:none; padding:12px 20px; border-radius:100px; transition:transform .15s, box-shadow .15s, background .15s; } .rap .cta-primary{ background:var(--lead-d); color:#fff; box-shadow:0 6px 16px rgba(30,168,132,.28); } .rap .cta-primary:hover, .rap .cta-primary:focus{ background:var(--lead); color:#fff; transform:translateY(-1px); outline:none; } .rap .cta-primary b{ font-weight:800; } .rap .cta-outline{ background:#fff; color:var(--lead-d); border:1.5px solid var(--line); } .rap .cta-outline:hover, .rap .cta-outline:focus{ border-color:var(--lead); background:#f2fbf8; outline:none; } /* wyjustowany: pełna szerokość sekcji, treść wyśrodkowana */ /* CTA wyeksponowane: szerokość auto (wg treści), wyśrodkowane przez .cta-row text-align */ .rap .cta-full{ padding-top:15px; padding-bottom:15px; font-size:15.5px; } /* przypisy / instrukcje czytania */ .rap .note{ font-size:13px; line-height:1.6; color:var(--light); margin:18px 0 0; max-width:88ch; } .rap .note b{ color:var(--dark); } .rap .notes{ display:grid; grid-template-columns:1fr 1fr; gap:18px; margin-top:20px; } @media(max-width:820px){ .rap .notes{ grid-template-columns:1fr; } } .rap .notes .note{ margin:0; } /* separator nad selektorami (pick-sep) — dekoracyjny, 3x */ .rap .pick-sep{ width:120px; max-width:25%; height:4px; margin:30px auto 18px; border-radius:999px; background:var(--lead); background:linear-gradient(90deg,var(--lead),var(--lead-d)); } @media(max-width:640px){ .rap .pick-sep{ width:80px; } } /* tekst dynamiczny pod selektorem (sposób B) */ .rap .dyn{ background:#fff; border:1px solid var(--line); border-left:3px solid var(--lead); border-radius:12px; padding:16px 18px; font-size:14.5px; line-height:1.62; color:var(--ink); margin:4px 0 26px; max-width:96ch; } .rap .dyn p{ margin:0 0 14px; } .rap .dyn p:last-child{ margin-bottom:0; } /* hero — mobile */ @media(max-width:860px){ .rap .hero .wrap{ padding-top:38px; padding-bottom:24px; } .rap .hero-grid{ grid-template-columns:1fr; gap:22px; } .rap .hero h1{ margin-top:16px; max-width:none; } .rap .hero .sub{ margin-bottom:22px; } .rap .hero-cta.is-desktop{ display:none; } .rap .hero-cta.is-mobile{ display:flex; width:100%; margin-top:20px; } .rap .statcard{ padding:20px 18px 18px; border-radius:18px; } .rap .sc-cap{ display:none; } .rap .sc-bars{ min-height:100px; margin-top:20px; padding-top:18px; border-top:1px solid var(--line); } .rap .sc-bar{ height:100px; } .rap .sc-bar .cv, .rap .sc-bar .cl{ display:none; } .rap .hero-kpis{ margin-top:16px; } .rap .hk .v{ font-size:20px; } .rap .secnav-lab .d{ display:none; } .rap .secnav-lab .m{ display:inline; } .rap .secnav-arrow{ display:inline-flex; } } /* FAQ */ .rap .faq-item{ background:#fff; border:1px solid var(--line); border-radius:14px; padding:18px 20px; margin-bottom:12px; } .rap .faq-item h3{ margin:0 0 7px; font-size:16px; font-weight:700; color:var(--dark); } .rap .faq-item p{ margin:0; font-size:14px; line-height:1.6; color:var(--ink); } /* archiwum roczników */ .rap .arch{ display:grid; grid-template-columns:repeat(8,1fr); gap:10px; margin-top:6px; } @media(max-width:900px){ .rap .arch{ grid-template-columns:repeat(4,1fr); } } @media(max-width:480px){ .rap .arch{ grid-template-columns:repeat(3,1fr); } } .rap .arch a{ display:block; text-align:center; background:#fff; border:1px solid var(--line); border-radius:12px; padding:14px 6px; text-decoration:none; color:var(--dark); font-weight:700; transition:border-color .18s, transform .18s, color .18s; } .rap .arch a:hover{ border-color:var(--lead); color:var(--lead-d); transform:translateY(-2px); } /* ---- Tabele danych renderowane serwerowo ---- Widoczne dla robotów i czytników ekranu zawsze; przy włączonym JS wykres ląduje nad tabelą, a ona sama zjeżdża do zwijanego
. */ .rap table.rap-data{ width:100%; border-collapse:collapse; font-size:14px; margin:8px 0 4px; } .rap table.rap-data caption{ text-align:left; color:var(--light); font-size:13px; padding-bottom:8px; } .rap table.rap-data th, .rap table.rap-data td{ padding:7px 10px; border-bottom:1px solid var(--line); text-align:right; } .rap table.rap-data th[scope="row"]{ text-align:left; font-weight:500; } .rap table.rap-data thead th{ text-align:right; color:var(--light); font-weight:500; font-size:12px; text-transform:uppercase; letter-spacing:.04em; border-bottom:2px solid var(--line); } .rap table.rap-data thead th:first-child{ text-align:left; } .rap table.rap-caption-only{ width:100%; } .rap table.rap-caption-only caption{ text-align:left; color:var(--light); font-size:13px; padding-bottom:8px; } .rap table.rap-data .cap-lbl{ color:var(--light); font-size:11px; white-space:nowrap; } .rap details.rap-tbl{ margin-top:14px; border-top:1px solid var(--line); padding-top:10px; } .rap details.rap-tbl > summary{ cursor:pointer; color:var(--lead-d); font-size:13px; font-weight:500; } .rap details.rap-tbl[open] > summary{ margin-bottom:6px; } .rap .rap-tbl-scroll{ overflow-x:auto; }