/* Zmienne motywu. Te same wartości wstrzykuje mv-enhance na stronach publicznych, ale **panel go nie ładuje** (`bez-mv-enhance`), więc tam były niezdefiniowane: kolor z `var(--mvx-fg)` schodził do wartości odziedziczonej i w jasnym motywie robił się biały tekst na białym tle. Definicja wraca do arkusza, który wczytują oba miejsca; identyczny blok z mv-enhance nadpisuje ją potem tymi samymi wartościami, więc nic się nie zmienia na stronie. */ :root{--mvx-accent:240,85,90;--mvx-bg:rgba(17,26,38,.92);--mvx-bg-solid:#111a26; --mvx-fg:#f3f4f6;--mvx-muted:#94a3b8;--mvx-line:rgba(255,255,255,.12); --mvx-cell-line:rgba(255,255,255,.08)} html[data-mv-theme="light"]{--mvx-accent:227,30,36;--mvx-bg:rgba(255,255,255,.96); --mvx-bg-solid:#ffffff;--mvx-fg:#0b121a;--mvx-muted:#55606f; --mvx-line:rgba(11,18,26,.14);--mvx-cell-line:rgba(11,18,26,.08)} /* Pasek przewijania. Domyślny pasek Windowsa — gruby, z klawiszami strzałek i jasnym torem — odcinał się od reszty serwisu, zwłaszcza w ciemnym motywie. Kolory biorą się ze zmiennych, więc jeden zapis obsługuje oba warianty i pasek zmienia się razem z motywem. `scrollbar-width`/`scrollbar-color` obsługuje Firefox, reguły `::-webkit-scrollbar` — Chrome, Edge i Safari. Zostawiamy oba: to nie dublowanie, tylko dwa równoległe standardy. */ /* Tylko dla silników bez `::-webkit-scrollbar` (Firefox). W Chrome ta para wyłączyłaby reguły niżej, razem z gaszeniem strzałek. */ @supports not selector(::-webkit-scrollbar){ html{scrollbar-width:thin;scrollbar-color:rgba(var(--mvx-accent),.55) transparent} } ::-webkit-scrollbar{width:11px;height:11px} ::-webkit-scrollbar-track{background:transparent} /* Strzałki na końcach paska. Stylowanie suwaka ich nie usuwa — trzeba je zgasić osobno, inaczej zostają dwa systemowe kwadraciki. */ ::-webkit-scrollbar-button, ::-webkit-scrollbar-button:start:decrement, ::-webkit-scrollbar-button:end:increment, ::-webkit-scrollbar-button:vertical:start:increment, ::-webkit-scrollbar-button:vertical:end:decrement, ::-webkit-scrollbar-button:horizontal:start:increment, ::-webkit-scrollbar-button:horizontal:end:decrement{display:none;width:0;height:0} ::-webkit-scrollbar-thumb{background:rgba(var(--mvx-accent),.42); border-radius:8px;border:3px solid transparent;background-clip:content-box} ::-webkit-scrollbar-thumb:hover{background:rgba(var(--mvx-accent),.7); border:3px solid transparent;background-clip:content-box} /* Róg między paskiem pionowym a poziomym — bez tego zostaje szary kwadrat. */ ::-webkit-scrollbar-corner{background:transparent} *{box-sizing:border-box} body{margin:0;background:#0B121A;font-family:Roboto,sans-serif;-webkit-font-smoothing:antialiased;color:#F3F4F6} /* Tło strony w motywie jasnym — celowo powtórzone z `LIGHT_CSS` w mv-enhance. Tamten arkusz dostrzykiwany jest przez skrypt, a skrypt ładuje się na końcu ; ta reguła jest w arkuszu blokującym render, więc obowiązuje już przy pierwszym malowaniu. Bez niej strona przy domyślnym motywie jasnym mignęłaby ciemnym tłem. Atrybut ustawia skrypt z szablonu. */ html[data-mv-theme="light"] body{background:#f2f5f9;color:#0b121a} a{color:#C4161C;text-decoration:none}a:hover{color:#F3F4F6} input,textarea{font-family:Roboto,sans-serif;width:100%;background:#04141f;border:1px solid rgba(255,255,255,.12);border-radius:8px;color:#F3F4F6;padding:13px 15px;font:400 15px/1.4 Roboto,sans-serif;outline:none;transition:border-color .2s} input:focus,textarea:focus{border-color:#C4161C} input::placeholder,textarea::placeholder{color:#5c6675} label{display:block;font:600 12px/1 Roboto,sans-serif;color:rgba(255,255,255,.6);margin-bottom:8px} @keyframes mv-float{0%,100%{transform:translateY(0)}50%{transform:translateY(-12px)}} @keyframes mv-bob1{0%,100%{transform:translateY(0)}50%{transform:translateY(-12px)}} @keyframes mv-bob2{0%,100%{transform:translateY(0)}50%{transform:translateY(-22px)}} @keyframes mv-blink{0%,100%{opacity:1}50%{opacity:.3}} /* Kadr wideo: przyciemnienie ma sens tylko na ciemnym tle. */ [data-mv-vidbox]{background:#0a141d} [data-hero-video]{filter:saturate(1.32) contrast(1.08) brightness(1.03)} [data-mv-vidtint]{background:radial-gradient(ellipse at 62% 28%,rgba(240,85,90,.30),transparent 72%);mix-blend-mode:soft-light} [data-mv-vidscrim]{background:linear-gradient(180deg,rgba(11,18,26,.12),rgba(11,18,26,.42))} html[data-mv-theme="light"] [data-mv-vidbox]{background:transparent} html[data-mv-theme="light"] [data-mv-vidscrim]{background:none} /* Lista materiałów: pozycje mają wyglądać na klikalne. */ .mv-matlink{transition:color .2s ease} .mv-matlink:hover{color:#C4161C} .mv-matlink .ml-go{margin-left:auto;padding-left:10px;color:#C4161C;transition:transform .2s ease} .mv-matlink:hover .ml-go{transform:translateX(3px)} /* Kafel prowadzącego: przy węższym oknie konkrety schodzą pod bio. */ @media (max-width:1180px){[data-mv-prowadzi]{grid-template-columns:auto 1fr !important}[data-mv-fakty]{grid-column:1/-1;border-left:0 !important;padding-left:0 !important;border-top:1px solid rgba(240,85,90,.25);padding-top:22px}} @media (max-width:760px){[data-mv-prowadzi]{grid-template-columns:1fr !important}} .mv-dd{position:relative} .mv-dd>.mv-ddlabel{color:inherit;cursor:pointer} .mv-dd>.mv-ddpanel{position:absolute;top:100%;right:0;margin-top:14px;opacity:0;visibility:hidden;transform:translateY(-8px);transition:opacity .22s ease,transform .22s ease,visibility .22s;background:rgba(17,26,38,.95);backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px);border:1px solid rgba(255,255,255,.1);border-radius:16px;box-shadow:0 20px 50px rgba(0,0,0,.45);padding:14px;z-index:80} .mv-dd .mv-ddgrid{display:grid;grid-template-columns:1fr 1fr;gap:4px;width:520px;max-width:calc(100vw - 40px)} .mv-dd .mv-ddi{display:flex;gap:12px;align-items:center;padding:12px;border-radius:10px} .mv-dd .mv-ddi:hover{background:rgba(255,255,255,.05)} .mv-dd .mv-ddt{display:block;font:600 14px/1.2 Roboto,sans-serif;color:#F3F4F6;margin-bottom:3px} .mv-dd .mv-dds{font:400 12px/1.4 Roboto,sans-serif;color:#94A3B8} /* Wyróżnienia z edytora treści. Edytor w panelu nie daje próbnika kolorów, tylko dwie klasy z palety serwisu — i zapis wycina atrybut `style`. Dzięki temu wklejka z Worda nie wnosi na stronę obcych barw, a wyróżnienie wygląda tak samo w obu motywach, bo kolor bierze się ze zmiennej, a nie z wartości wpisanej wprost. */ .tk-akcent{color:rgb(var(--mvx-accent,240,85,90))} .tk-cichy{color:var(--mvx-muted,#94a3b8)} /* Biały zostaje biały w obu motywach — służy do tekstu na zdjęciu albo filmie w tle (hero), gdzie tło jest ciemne niezależnie od motywu. */ .tk-bialy{color:#fff} /* --- Blok akapitów z jednego pola --------------------------------------- Sekcja, w której kilka akapitów pisze się w jednym polu edytora. Odstęp między nimi podaje sam blok zmienną `--mv-odstep`, bo w każdej sekcji jest inny — a ostatni akapit go nie ma, bo o dolny margines bloku dba już jego własny styl. Bez tego dwa akapity z jednego pola stały ciaśniej niż te same dwa akapity wpisane osobno. Nagłówki i wyliczenia mogą się tu pojawić, bo edytor je potrafi: dostają typografię serwisu zamiast domyślnej przeglądarki. */ .mv-akapity > p{margin:0 0 var(--mv-odstep, 16px)} .mv-akapity > p:last-child{margin-bottom:0} .mv-akapity > h2, .mv-akapity > h3{margin:26px 0 12px;color:var(--mvx-fg, #F3F4F6)} .mv-akapity > h2{font:500 30px/1.15 Roboto, sans-serif; letter-spacing:-.01em} .mv-akapity > h3{font:700 18px/1.35 Roboto, sans-serif} .mv-akapity > h2:first-child, .mv-akapity > h3:first-child{margin-top:0} /* Wyliczenia z edytora — w akapitach sekcji i w opisach kart. Przeglądarka wcina listę o czterdzieści pikseli, co przy wąskiej karcie odsuwa punkty od tekstu nad nimi i wygląda jak osobny blok. Zostawiamy tyle, ile potrzeba na sam znacznik, żeby wyliczenie czytało się jako ciąg dalszy zdania, a nie wcięty cytat. */ .mv-akapity > ul, .mv-akapity > ol, .mvk-opis ul, .mvk-opis ol{margin:0 0 var(--mv-odstep, 16px); padding-left:1.15em} .mv-akapity > ul:last-child, .mv-akapity > ol:last-child, .mvk-opis ul:last-child, .mvk-opis ol:last-child{margin-bottom:0} .mv-akapity li, .mvk-opis li{margin-bottom:6px;padding-left:2px} .mv-akapity li:last-child, .mvk-opis li:last-child{margin-bottom:0} /* Pierwszy akapit opisu karty i wyliczenie pod nim to jedna wypowiedź — odstęp między nimi ma być taki, jak między akapitami, nie większy. */ .mvk-opis > :first-child{margin-top:0} .mvk-opis > :last-child{margin-bottom:0} .mvk-opis p{margin:0 0 12px} /* Bento: siatki kart bez pustych pól w ostatnim rzędzie. Szerokość karty ustawia public/js/mv-bento.js — tutaj tylko ją odczytujemy. */ [data-mv-bento] > [data-bento="2"]{grid-column:span 2} [data-mv-bento] > [data-bento="3"]{grid-column:span 3} [data-mv-bento] > [data-bento="4"]{grid-column:span 4} [data-mv-bento] > [data-bento="5"]{grid-column:span 5} [data-mv-bento] > [data-bento="6"]{grid-column:span 6} /* === Pipeline kroków (partials/pipeline) ===================================== Cztery układy wybierane w panelu: poziomy (kroki w rzędzie), pionowy (oś przy lewej), środek (oś przez środek, tekst na zmianę) i lista. Oś ustawia i wypełnia mv-strony.js — od pierwszego do ostatniego węzła. */ .mvp-os{position:relative;list-style:none;margin:0;padding:0} .mvp-linia{position:absolute;background:var(--mvx-line,rgba(255,255,255,.12));border-radius:2px;pointer-events:none} .mvp-linia-wypelnienie{position:absolute;left:0;top:0;background:#F0555A;border-radius:2px;box-shadow:0 0 14px rgba(240,85,90,.55);transition:height .2s linear,width .2s linear} .mvp-krok{position:relative} .mvp-wezel{position:relative;z-index:1;display:flex;align-items:center;justify-content:center;flex:none; width:56px;height:56px;border-radius:18px;background:var(--mvx-bg-solid,#0B121A); border:2px solid var(--mvx-line,rgba(255,255,255,.18));color:var(--mvx-muted,#94A3B8); transition:border-color .4s ease,background .4s ease,color .4s ease,box-shadow .4s ease} .mvp-tekst{opacity:.5;transition:opacity .5s ease,transform .5s ease} .mvp-etap{margin-bottom:8px;font:600 11.5px/1 Consolas,'SFMono-Regular',Menlo,monospace;letter-spacing:.1em;text-transform:uppercase;color:#F0555A} .mvp-h3{margin:0 0 8px;font:700 20px/1.3 Roboto,sans-serif;color:var(--mvx-fg,#F3F4F6)} .mvp-p{margin:0;max-width:620px;font:400 15px/1.7 Roboto,sans-serif;color:var(--mvx-muted,#94A3B8)} .mvp-krok.is-aktywny .mvp-tekst{opacity:1;transform:none} .mvp-krok.is-aktywny .mvp-wezel{background:#F0555A;border-color:#F0555A;color:#fff;box-shadow:0 0 0 7px rgba(240,85,90,.14)} html[data-mv-theme="light"] .mvp-wezel{background:#fff;border-color:rgba(11,18,26,.14)} html[data-mv-theme="light"] .mvp-krok.is-aktywny .mvp-wezel{background:#C4161C;border-color:#C4161C;color:#fff} html[data-mv-theme="light"] .mvp-h3{color:#0b121a} html[data-mv-theme="light"] .mvp-p{color:#55606f} html[data-mv-theme="light"] .mvp-etap{color:#C4161C} html[data-mv-theme="light"] .mvp-linia{background:rgba(11,18,26,.10)} /* pionowy */ .mvp--pionowy .mvp-os{display:flex;flex-direction:column;gap:34px} .mvp--pionowy .mvp-linia{left:27px;width:2px} .mvp--pionowy .mvp-linia-wypelnienie{width:100%;height:0} .mvp--pionowy .mvp-krok{display:grid;grid-template-columns:56px minmax(0,1fr);column-gap:24px;align-items:start} .mvp--pionowy .mvp-tekst{padding-top:4px} /* poziomy */ .mvp--poziomy .mvp-os{display:grid;grid-template-columns:repeat(var(--mvp-n),minmax(0,1fr));gap:28px} .mvp--poziomy .mvp-linia{top:27px;height:2px} .mvp--poziomy .mvp-linia-wypelnienie{height:100%;width:0} .mvp--poziomy .mvp-krok{display:flex;flex-direction:column;align-items:flex-start;gap:18px} .mvp--poziomy .mvp-tekst{transform:translateY(10px)} .mvp--poziomy .mvp-p{max-width:none} /* środek */ .mvp--srodek .mvp-os{display:flex;flex-direction:column;gap:72px} .mvp--srodek .mvp-linia{left:50%;width:2px;margin-left:-1px} .mvp--srodek .mvp-linia-wypelnienie{width:100%;height:0} .mvp--srodek .mvp-krok{display:grid;grid-template-columns:minmax(0,1fr) 84px minmax(0,1fr);align-items:center} .mvp--srodek .mvp-wezel{grid-column:2;grid-row:1;justify-self:center;width:52px;height:52px;border-radius:50%} .mvp--srodek .mvp-tekst{grid-row:1;max-width:560px;transform:translateY(18px)} .mvp--srodek .mvp-krok--lewo .mvp-tekst{grid-column:1;justify-self:end;text-align:right} .mvp--srodek .mvp-krok--prawo .mvp-tekst{grid-column:3;justify-self:start} .mvp--srodek .mvp-h3{font:700 38px/1.08 Roboto,sans-serif;letter-spacing:-.02em;margin-bottom:14px} .mvp--srodek .mvp-p{font-size:17px} .mvp--srodek .mvp-grafika{grid-row:1;width:min(100%,340px);opacity:.35;transition:opacity .5s ease} .mvp--srodek .mvp-krok--lewo .mvp-grafika{grid-column:3;justify-self:start} .mvp--srodek .mvp-krok--prawo .mvp-grafika{grid-column:1;justify-self:end} .mvp--srodek .mvp-krok.is-aktywny .mvp-grafika{opacity:1} .mvp-kadr{position:relative;aspect-ratio:4 / 3;display:flex;align-items:center;justify-content:center; border:1px solid var(--mvx-line,rgba(255,255,255,.08));border-radius:20px;overflow:hidden; background-image:radial-gradient(rgba(255,255,255,.045) 1px,transparent 1px);background-size:22px 22px} .mvp-kadr > svg{width:62%} .mvp-kadr--ikona{color:#F0555A} .mvp-kadr--ikona > svg{width:72px} html[data-mv-theme="light"] .mvp-kadr{background-color:#fff;border-color:rgba(11,18,26,.10);box-shadow:0 10px 30px rgba(15,23,42,.06)} /* lista */ .mvp-lista{list-style:none;margin:0;padding:0} .mvp-lista li{display:grid;grid-template-columns:52px 1fr;gap:18px;align-items:baseline;padding:20px 0;border-top:1px solid var(--mvx-line,rgba(255,255,255,.08))} .mvp-lista-nr{font:600 18px/1 Consolas,'SFMono-Regular',Menlo,monospace;color:#F0555A} .mvp-lista-t{display:block;margin-bottom:6px;font:700 17px/1.3 Roboto,sans-serif;color:var(--mvx-fg,#F3F4F6)} .mvp-lista-p{display:block;font:400 15px/1.7 Roboto,sans-serif;color:var(--mvx-muted,#94A3B8)} html[data-mv-theme="light"] .mvp-lista-t{color:#0b121a} html[data-mv-theme="light"] .mvp-lista-p{color:#55606f} /* wąski ekran: każdy układ osi schodzi do pionowego */ @media (max-width:900px){ .mvp--poziomy .mvp-os,.mvp--srodek .mvp-os{display:flex;flex-direction:column;gap:34px} .mvp--poziomy .mvp-linia,.mvp--srodek .mvp-linia{left:27px;top:0;width:2px;height:auto;margin-left:0} .mvp--poziomy .mvp-linia-wypelnienie,.mvp--srodek .mvp-linia-wypelnienie{width:100%;height:0} .mvp--poziomy .mvp-krok,.mvp--srodek .mvp-krok{display:grid;grid-template-columns:56px minmax(0,1fr);column-gap:18px;align-items:start} .mvp--srodek .mvp-wezel{grid-column:1;width:56px;height:56px;border-radius:18px;justify-self:start} .mvp--srodek .mvp-krok--lewo .mvp-tekst,.mvp--srodek .mvp-krok--prawo .mvp-tekst{grid-column:2;justify-self:start;text-align:left;max-width:none} .mvp--srodek .mvp-grafika{display:none} .mvp--srodek .mvp-h3{font-size:28px} .mvp--poziomy .mvp-tekst{transform:none} } @media (prefers-reduced-motion:reduce){ .mvp-tekst,.mvp--srodek .mvp-grafika{opacity:1 !important;transform:none !important} }