/* ========================================================================== style.css - SYSTELa (www.systela.pl), motyw wlasny SYSPiR CMS, theme 0 Kierunek: "dwa kanaly". Kazda rozmowa ma dwie strony, wiec kolor niesie znaczenie: amber = dzwoniacy / rozmowca (kanal A), kobalt = firma: agent AI, pracownik, system (kanal B, kolor glowny akcji). Typografia: Archivo (zmienna szerokosc) - naglowki rozszerzone (font-stretch ~118%), tekst w szerokosci normalnej; JetBrains Mono tylko dla danych rozmowy (czas, numery). Spis tresci: 1. Tokeny 2. Baza i typografia 3. Uklad (.wrap, .sec, siatki) 4. Przyciski 5. Naglowek i menu 6. Hero strony glownej 7. Karty funkcji 8. Makiety aplikacji (.mock, chipy, waveform, transkrypcja, lista) 9. Diagram .flow i kroki .steps 10. Listy z ikonami, callout 11. Sekcje strony glownej (obszary, dane, FAQ, CTA) 12. Podstrony: page-hero, split, formularz, prose 13. Stopka 14. Dostepnosc i ruch 15. Komponenty podstron (agent, scenariusze, panel, integracje, cennik, polityki) ========================================================================== */ /* 1. Tokeny ---------------------------------------------------------------- */ :root { --paper: #F3F5F4; /* tlo strony - chlodna, mineralna biel */ --surface: #FFFFFF; /* karty, makiety, pola formularza */ --tint: #E8EDEB; /* sekcje wyroznione (.sec--tint) */ --ink: #13212E; /* tekst glowny, tlo sekcji ciemnych */ --ink-2: #33414D; /* tekst akapitow */ --muted: #5A6772; /* tekst pomocniczy (AA na bialym i --paper) */ --line: #D5DCDA; /* linie, obramowania */ --line-strong: #AEB9B6; /* obramowania pol i przyciskow drugorzednych */ --cobalt: #2747D8; /* kanal B: firma / agent / akcja glowna */ --cobalt-ink: #1B34A8; /* hover, tekst linkow */ --cobalt-soft: #E5EAFC; --cobalt-on-ink: #8EA4FF;/* kobalt czytelny na --ink */ --amber: #F2A51F; /* kanal A: dzwoniacy (tylko wypelnienia, nie tekst na jasnym) */ --amber-ink: #8A5800; /* amber jako tekst na jasnym tle (AA) */ --amber-soft: #FCEFD6; --ok: #146C43; --ok-soft: #DDF1E6; --bad: #AE3A1F; --bad-soft: #FAE4DE; --ink-text: #E4EAE8; /* tekst na --ink */ --ink-muted: #A7B4B1; /* tekst pomocniczy na --ink */ --ink-line: #2C3B48; /* linie na --ink */ --ink-raise: #1A2B3A; /* powierzchnia na --ink (makieta konsoli) */ --f-sans: 'Archivo', system-ui, -apple-system, 'Segoe UI', Roboto, Arial, sans-serif; --f-mono: 'JetBrains Mono', ui-monospace, 'SFMono-Regular', Menlo, Consolas, monospace; --stretch-head: 118%; --wrap: 1240px; --gutter: clamp(16px, 4vw, 40px); --sec-y: clamp(64px, 9vw, 120px); --gap: clamp(20px, 2.4vw, 32px); --r-lg: 16px; /* makiety */ --r-md: 12px; /* karty */ --r-sm: 9px; /* przyciski, pola */ --shadow-mock: 0 1px 0 rgba(19, 33, 46, .04), 0 24px 48px -24px rgba(19, 33, 46, .35); --ease: cubic-bezier(.2, .7, .2, 1); } /* 2. Baza i typografia ------------------------------------------------------ */ *, *::before, *::after { box-sizing: border-box; } html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; scroll-padding-top: 88px; } body { margin: 0; background: var(--paper); color: var(--ink-2); font-family: var(--f-sans); font-size: 1.0625rem; line-height: 1.6; font-weight: 400; -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; overflow-x: hidden; } img, svg { max-width: 100%; } img { height: auto; display: block; } h1, h2, h3, h4 { color: var(--ink); font-stretch: var(--stretch-head); font-weight: 760; line-height: 1.08; letter-spacing: -0.012em; margin: 0 0 .5em; text-wrap: balance; } h1 { font-size: clamp(2.4rem, 5.6vw, 4.6rem); line-height: 1.02; letter-spacing: -0.02em; } h2 { font-size: clamp(1.85rem, 3.4vw, 2.75rem); } h3 { font-size: 1.2rem; font-stretch: 108%; font-weight: 700; line-height: 1.25; letter-spacing: -0.005em; } p { margin: 0 0 1em; text-wrap: pretty; } a { color: var(--cobalt-ink); text-underline-offset: .18em; text-decoration-thickness: 1px; } a:hover { text-decoration-thickness: 2px; } strong { color: var(--ink); font-weight: 650; } .mono { font-family: var(--f-mono); font-weight: 500; font-size: .86em; letter-spacing: 0; } .lead { font-size: clamp(1.1rem, 1.5vw, 1.25rem); line-height: 1.55; color: var(--ink-2); max-width: 62ch; } .muted { color: var(--muted); } .nowrap { white-space: nowrap; } .sr { position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; } .sprite { position: absolute; width: 0; height: 0; overflow: hidden; } /* Ikony z tpl/inc/icons.tpl: */ .ic { width: 1.25em; height: 1.25em; flex: none; fill: none; stroke: currentColor; stroke-width: 1.75; stroke-linecap: round; stroke-linejoin: round; vertical-align: -0.22em; } .skip { position: absolute; left: 16px; top: -60px; z-index: 100; background: var(--ink); color: #fff; padding: 10px 16px; border-radius: var(--r-sm); text-decoration: none; } .skip:focus { top: 12px; } /* 3. Uklad ------------------------------------------------------------------- .wrap - kontener tresci (max 1240px, boczny margines 16-40px) .wrap-narrow - kontener tekstu (max 820px) .sec - sekcja z pionowym oddechem; warianty: .sec--tint (szare tlo), .sec--ink (ciemne tlo), .sec--tight .sec-head - naglowek sekcji: opcjonalnie .eyebrow, h2, p.lead; .sec-head--center wysrodkowany .grid .grid-2 .grid-3 .grid-4 - siatki kolumn (zwijaja sie: 4->2->1, 3->2->1, 2->1) -------------------------------------------------------------------------- */ .wrap { width: 100%; max-width: calc(var(--wrap) + 2 * var(--gutter)); margin-inline: auto; padding-inline: var(--gutter); } .wrap-narrow { max-width: calc(820px + 2 * var(--gutter)); } .sec { padding-block: var(--sec-y); } .sec--tight { padding-block: clamp(40px, 6vw, 72px); } .sec:not(.sec--tint):not(.sec--ink) + .sec:not(.sec--tint):not(.sec--ink), .hero + .sec:not(.sec--tint):not(.sec--ink) { padding-top: 0; } .sec--tint { background: var(--tint); } .sec--ink { background: var(--ink); color: var(--ink-text); } .sec--ink h2, .sec--ink h3, .sec--ink strong { color: #fff; } .sec--ink .lead, .sec--ink p { color: var(--ink-text); } .sec--ink a { color: var(--cobalt-on-ink); } .sec-head { max-width: 760px; margin-bottom: clamp(32px, 4vw, 56px); } .sec-head h2 { margin-bottom: .4em; } .sec-head .lead { margin-bottom: 0; } .sec-head--center { margin-inline: auto; text-align: center; } /* .sec-head--split - naglowek po lewej, lead po prawej (szerokie ekrany) */ .sec-head--split { max-width: none; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 16px clamp(32px, 6vw, 96px); align-items: end; } .sec-head--split h2 { margin-bottom: 0; } @media (max-width: 860px) { .sec-head--split { grid-template-columns: minmax(0, 1fr); } } .sec-head--center .lead { margin-inline: auto; } /* .eyebrow - krotka etykieta nad naglowkiem (zwykla wielkosc liter), ze znacznikiem dwoch kanalow. Uzywaj oszczednie: tylko gdy niesie informacje, np. nazwa obszaru na podstronie. */ .eyebrow { display: inline-flex; align-items: center; gap: 10px; margin: 0 0 14px; color: var(--cobalt-ink); font-weight: 650; font-size: .95rem; font-stretch: 105%; } .eyebrow::before { content: ""; width: 14px; height: 12px; flex: none; background: linear-gradient(var(--amber), var(--amber)) 0 0 / 100% 4px no-repeat, linear-gradient(var(--cobalt), var(--cobalt)) 0 100% / 100% 4px no-repeat; border-radius: 1px; } .sec--ink .eyebrow { color: var(--cobalt-on-ink); } .grid { display: grid; gap: var(--gap); } .grid-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); } .grid-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); } .grid-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); } @media (max-width: 1080px) { .grid-4 { grid-template-columns: repeat(2, minmax(0, 1fr)); } } /* Tablet: .grid-3 w dwoch kolumnach; nieparzysta ostatnia karta zajmuje cala szerokosc zamiast zostawiac dziure */ @media (max-width: 860px) { .grid-3 { grid-template-columns: repeat(2, minmax(0, 1fr)); } .grid-3 > :last-child:nth-child(odd) { grid-column: 1 / -1; } } @media (max-width: 600px) { .grid-4, .grid-3, .grid-2 { grid-template-columns: minmax(0, 1fr); } } /* Tresc podstrony wstawiona bez sekcji dostaje szerokosc .wrap */ .page > :not(section):not(script):not(style) { max-width: calc(var(--wrap) + 2 * var(--gutter)); margin-inline: auto; padding-inline: var(--gutter); } .page > :not(section):not(script):not(style):first-child { margin-top: clamp(32px, 5vw, 64px); } .page > :not(section):not(script):not(style):not(input):not(i):last-child { margin-bottom: clamp(48px, 7vw, 96px); } /* Stereo-linia: motyw dwoch kanalow jako separator. */ .rule-stereo { height: 7px; background: linear-gradient(var(--amber), var(--amber)) 0 0 / 100% 2px no-repeat, linear-gradient(var(--cobalt), var(--cobalt)) 0 100% / 100% 2px no-repeat; } /* 4. Przyciski --------------------------------------------------------------- .btn + wariant: .btn-primary (kobalt), .btn-ghost (obrys, jasne tlo), .btn-light (biale, na ciemnym tle), .btn-ghost-light (obrys, ciemne tlo); rozmiar .btn-sm. Grupa przyciskow:
...
-------------------------------------------------------------------------- */ .btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 48px; padding: 0 22px; border-radius: var(--r-sm); border: 1.5px solid transparent; font: inherit; font-weight: 650; font-stretch: 106%; font-size: 1rem; line-height: 1.1; text-decoration: none; cursor: pointer; white-space: nowrap; transition: background-color .15s, border-color .15s, color .15s; } .btn .ic { width: 18px; height: 18px; } .btn-sm { min-height: 40px; padding: 0 16px; font-size: .95rem; } .btn-primary { background: var(--cobalt); color: #fff; } .btn-primary:hover { background: var(--cobalt-ink); color: #fff; } .btn-ghost { border-color: var(--line-strong); color: var(--ink); background: transparent; } .btn-ghost:hover { border-color: var(--ink); color: var(--ink); } .btn-light { background: #fff; color: var(--ink); } .btn-light:hover { background: var(--amber); color: var(--ink); } .btn-ghost-light { border-color: rgba(255, 255, 255, .38); color: #fff; } .btn-ghost-light:hover { border-color: #fff; color: #fff; } .actions { display: flex; flex-wrap: wrap; gap: 12px; align-items: center; } /* 5. Naglowek i menu ------------------------------------------------------- */ .top { position: sticky; top: 0; z-index: 50; background: rgba(243, 245, 244, .92); -webkit-backdrop-filter: saturate(1.4) blur(10px); backdrop-filter: saturate(1.4) blur(10px); border-bottom: 1px solid transparent; transition: border-color .2s; } .top.is-scrolled { border-bottom-color: var(--line); } .top-inner { display: flex; align-items: center; gap: 24px; min-height: 72px; } .brandlink { display: inline-flex; flex: none; border-radius: 6px; } .brand { height: 34px; width: auto; } .nav { display: flex; align-items: center; gap: 28px; margin-left: auto; } .nav-list { display: flex; align-items: center; gap: 4px; list-style: none; margin: 0; padding: 0; } .nav-link { display: block; padding: 8px 10px; border-radius: 7px; color: var(--ink); text-decoration: none; font-weight: 520; font-size: .95rem; white-space: nowrap; } .nav-link:hover { background: var(--tint); } .nav-link[aria-current="page"] { color: var(--cobalt-ink); box-shadow: inset 0 -2px 0 var(--cobalt); border-radius: 7px 7px 0 0; } .nav-actions { display: flex; align-items: center; gap: 16px; } .nav-login { color: var(--ink); font-weight: 600; font-size: .95rem; text-decoration: none; padding: 8px 4px; white-space: nowrap; } .nav-login:hover { color: var(--cobalt-ink); text-decoration: underline; } /* Wezszy desktop (1181-1320px): 7 pozycji menu + Zaloguj + przycisk musza zmiescic sie obok logo */ @media (min-width: 1181px) and (max-width: 1320px) { .top-inner { gap: 20px; } .nav { gap: 16px; } .nav-list { gap: 2px; } .nav-link { padding: 8px 7px; font-size: .92rem; } .nav-actions { gap: 10px; } .nav-login { font-size: .92rem; } } .hamburger { display: none; margin-left: auto; width: 46px; height: 46px; border: 1.5px solid var(--line-strong); border-radius: var(--r-sm); background: transparent; cursor: pointer; padding: 0; position: relative; } .hamburger span { position: absolute; left: 12px; right: 12px; height: 2px; background: var(--ink); border-radius: 2px; transition: transform .2s var(--ease), opacity .2s; } .hamburger span:nth-child(1) { top: 15px; } .hamburger span:nth-child(2) { top: 21px; } .hamburger span:nth-child(3) { top: 27px; } .hamburger[aria-expanded="true"] span:nth-child(1) { transform: translateY(6px) rotate(45deg); } .hamburger[aria-expanded="true"] span:nth-child(2) { opacity: 0; } .hamburger[aria-expanded="true"] span:nth-child(3) { transform: translateY(-6px) rotate(-45deg); } @media (max-width: 1180px) { .hamburger { display: block; } .nav { position: absolute; left: 0; right: 0; top: 100%; display: none; flex-direction: column; align-items: stretch; gap: 0; background: var(--paper); border-bottom: 1px solid var(--line); box-shadow: 0 24px 32px -24px rgba(19, 33, 46, .35); padding: 8px var(--gutter) 24px; max-height: calc(100vh - 72px); overflow-y: auto; } .nav.open { display: flex; } html:not(.js) .nav { position: static; display: flex; } html:not(.js) .hamburger { display: none; } html:not(.js) .top-inner { flex-wrap: wrap; } .nav-list { flex-direction: column; align-items: stretch; gap: 0; } .nav-list li + li { border-top: 1px solid var(--line); } .nav-link { padding: 15px 2px; font-size: 1.1rem; font-stretch: 108%; font-weight: 600; border-radius: 0; } .nav-link:hover { background: transparent; color: var(--cobalt-ink); } .nav-link[aria-current="page"] { box-shadow: inset 3px 0 0 var(--cobalt); padding-left: 14px; border-radius: 0; } .nav-actions { flex-direction: column-reverse; align-items: stretch; gap: 10px; padding-top: 16px; } .nav-actions .btn { min-height: 48px; } .nav-login { text-align: center; padding: 12px; border: 1.5px solid var(--line-strong); border-radius: var(--r-sm); } } /* 6. Hero strony glownej ---------------------------------------------------- */ .hero { padding-block: clamp(28px, 4.5vw, 64px) clamp(56px, 8vw, 112px); } .hero-grid { display: grid; grid-template-columns: minmax(0, 1.08fr) minmax(0, 1fr); gap: clamp(32px, 5vw, 80px); align-items: center; } .hero-title { font-size: clamp(2.6rem, 5vw, 4.6rem); font-stretch: 122%; font-weight: 800; line-height: .98; letter-spacing: -0.028em; margin-bottom: .32em; } .hero .lead { margin-bottom: 32px; } .hero-note { margin: 22px 0 0; color: var(--muted); font-size: .98rem; } .hero-note a { color: var(--ink); font-weight: 600; white-space: nowrap; } .status { display: inline-flex; align-items: center; gap: 10px; margin: 0 0 28px; padding: 6px 14px 6px 10px; border: 1px solid var(--line); border-radius: 999px; background: var(--surface); font-size: .9rem; font-weight: 550; color: var(--ink); } .status-dot { width: 9px; height: 9px; border-radius: 50%; background: var(--ok); box-shadow: 0 0 0 4px var(--ok-soft); } @media (max-width: 520px) { .status { font-size: .84rem; border-radius: 12px; align-items: flex-start; } .status-dot { margin-top: 5px; } } @media (max-width: 980px) { .hero-grid { grid-template-columns: minmax(0, 1fr); } .hero-title { font-size: clamp(2.5rem, 9.6vw, 4.4rem); } } /* 7. Karty funkcji -----------------------------------------------------------
...

..

..

.feature--flat - bez tla, z pionowa linia (do rzedow korzysci w .grid-4) .feature-ic--amber - ikona w kolorze kanalu dzwoniacego (weryfikacja, PIN, rozmowca) .feature a.feature-link - link na dole karty -------------------------------------------------------------------------- */ .feature { background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-md); padding: clamp(22px, 2.4vw, 30px); display: flex; flex-direction: column; } .feature h3 { margin: 18px 0 8px; } .feature p { margin: 0; color: var(--ink-2); font-size: 1rem; } .feature p + p { margin-top: .7em; } .feature-link { margin-top: auto; padding-top: 18px; font-weight: 600; } .feature-ic { display: inline-grid; place-items: center; width: 44px; height: 44px; border-radius: 10px; background: var(--cobalt-soft); color: var(--cobalt); } .feature-ic .ic { width: 24px; height: 24px; } .feature-ic--amber { background: var(--amber-soft); color: var(--amber-ink); } .feature--flat { background: transparent; border: 0; border-left: 1px solid var(--line); border-radius: 0; padding: 4px 0 4px clamp(18px, 2vw, 28px); } .sec--tint .feature:not(.feature--flat) { border-color: transparent; } .sec--ink .feature { background: var(--ink-raise); border-color: var(--ink-line); } .sec--ink .feature p { color: var(--ink-text); } .sec--ink .feature-ic { background: rgba(142, 164, 255, .14); color: var(--cobalt-on-ink); } /* 8. Makiety aplikacji --------------------------------------------------------- Zamiast zrzutow panelu - makiety HTML z fikcyjnymi danymi. Kazda makieta MUSI miec podpis .mock-note ("Makieta z danymi przykladowymi ..."). Struktura:
(.mock--ink - ciemna konsola)
Rejestr rozmow...
...lista / karta / transkrypcja / waveform...
Makieta z danymi przykladowymi.
-------------------------------------------------------------------------- */ .mock { margin: 0; background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-lg); box-shadow: var(--shadow-mock); overflow: hidden; color: var(--ink-2); font-size: .95rem; line-height: 1.5; min-width: 0; } .mock-bar { display: flex; align-items: center; gap: 10px; padding: 12px 16px; border-bottom: 1px solid var(--line); background: #F8FAF9; min-height: 50px; } .mock-mark { width: 20px; height: 20px; border-radius: 5px; } .mock-title { font-weight: 650; color: var(--ink); font-stretch: 106%; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .mock-meta { margin-left: auto; color: var(--muted); white-space: nowrap; } .mock-bar .chip + .mock-meta { margin-left: auto; } .mock-body { padding: 16px; } .mock-note { margin: 0; padding: 10px 16px; border-top: 1px dashed var(--line); font-size: .82rem; color: var(--muted); background: #F8FAF9; } .mock--ink { background: var(--ink-raise); border-color: var(--ink-line); color: var(--ink-text); box-shadow: 0 30px 60px -30px rgba(19, 33, 46, .6); } .mock--ink .mock-bar { background: var(--ink); border-bottom-color: var(--ink-line); } .mock--ink .mock-title { color: #fff; } .mock--ink .mock-meta { color: var(--ink-muted); } .mock--ink .mock-note { background: var(--ink); border-top-color: var(--ink-line); color: var(--ink-muted); } /* Chipy statusu: Zalatwione --ok (zalatwione, zgodny), --warn (do kontynuacji), --bad (brak porozumienia, awaria, blokada), --info (kategoria, temat), --muted (nieodebrane, szkic), --live (rozmowa trwa, z pulsujaca kropka) */ .chip { display: inline-flex; align-items: center; gap: 6px; padding: 3px 10px; border-radius: 999px; font-size: .78rem; font-weight: 650; line-height: 1.4; white-space: nowrap; background: var(--tint); color: var(--ink); } .chip--ok { background: var(--ok-soft); color: var(--ok); } .chip--warn { background: var(--amber-soft); color: var(--amber-ink); } .chip--bad { background: var(--bad-soft); color: var(--bad); } .chip--info { background: var(--cobalt-soft); color: var(--cobalt-ink); } .chip--muted { background: transparent; color: var(--muted); box-shadow: inset 0 0 0 1px var(--line-strong); } .chip--live { background: rgba(229, 72, 54, .16); color: #FF9C8C; } .chip--live::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: #FF6B57; } .mock:not(.mock--ink) .chip--live { background: var(--bad-soft); color: var(--bad); } .mock:not(.mock--ink) .chip--live::before { background: var(--bad); } .chips { display: flex; flex-wrap: wrap; gap: 6px; } /* Waveform (dwa kanaly). Paski generuje js.js:
Rozmowca
Pracownik
data-seed - ksztalt; data-talk - zakresy (%) w ktorych kanal mowi; data-progress - pozycja odtwarzania (%). */ .stereo { display: grid; gap: 6px; padding: 14px 16px; border-bottom: 1px solid var(--line); } .mock--ink .stereo { border-bottom-color: var(--ink-line); } .stereo-ch { display: grid; grid-template-columns: 82px minmax(0, 1fr); align-items: center; gap: 12px; } .ch-label { font-size: .78rem; font-weight: 650; color: var(--muted); display: inline-flex; align-items: center; gap: 7px; white-space: nowrap; } .ch-label::before { content: ""; flex: none; width: 8px; height: 8px; border-radius: 2px; background: currentColor; } .ch-label--a::before { background: var(--amber); } .ch-label--b::before { background: var(--cobalt); } .mock--ink .ch-label { color: var(--ink-muted); } .mock--ink .ch-label--b::before { background: var(--cobalt-on-ink); } .wave { position: relative; display: flex; align-items: center; gap: 2px; height: 34px; min-width: 0; background: linear-gradient(currentColor, currentColor) 0 50% / 100% 1px no-repeat; } .wave i { flex: 1 1 0; min-width: 1px; height: var(--h, 10%); background: currentColor; border-radius: 2px; } .wave i.f { opacity: .3; } .wave--a { color: var(--amber); } .wave--b { color: var(--cobalt); } .mock--ink .wave--b { color: var(--cobalt-on-ink); } .wave-head { position: absolute; top: -4px; bottom: -4px; width: 2px; background: var(--ink); border-radius: 2px; } .mock--ink .wave-head { background: #fff; } .player { display: flex; align-items: center; gap: 12px; padding: 10px 16px; border-bottom: 1px solid var(--line); font-size: .85rem; color: var(--muted); } .player-btn { display: inline-grid; place-items: center; width: 32px; height: 32px; border-radius: 50%; background: var(--ink); color: #fff; flex: none; } .player-btn .ic { width: 15px; height: 15px; fill: currentColor; stroke: none; margin-left: 2px; } /* Transkrypcja:
  1. 00:11Rozmowca

    ...

  2. ...
    3. (agent AI lub pracownik - kanal B)
  3. ..Zdarzenie systemu
    4. (.tx-event--ok, .tx-event--bad)
  4. ...
    5. - wskazowka analizy przypieta do momentu rozmowy Atrybut data-reveal na .tx = linie pojawiaja sie kolejno (tylko hero; szanuje prefers-reduced-motion). */ .tx { list-style: none; margin: 0; padding: 14px 16px 18px; display: grid; gap: 12px; } .tx-line { display: grid; grid-template-columns: 48px minmax(0, 1fr); column-gap: 10px; } .tx-t { grid-row: 1 / span 2; color: var(--muted); padding-top: 2px; font-size: .78rem; } .tx-who { font-size: .78rem; font-weight: 700; display: inline-flex; align-items: center; gap: 7px; } .tx-who::before { content: ""; flex: none; width: 8px; height: 8px; border-radius: 2px; } .tx-line--caller .tx-who { color: var(--amber-ink); } .tx-line--caller .tx-who::before { background: var(--amber); } .tx-line--agent .tx-who { color: var(--cobalt-ink); } .tx-line--agent .tx-who::before { background: var(--cobalt); } .tx-line p { margin: 2px 0 0; color: var(--ink); } .tx-event { display: flex; gap: 10px; align-items: flex-start; margin-left: 58px; padding: 7px 12px; border-radius: 8px; background: var(--tint); font-size: .86rem; color: var(--ink-2); } .tx-event .ic { width: 17px; height: 17px; margin-top: 2px; color: var(--muted); } .tx-event em { font-style: normal; color: var(--amber-ink); font-weight: 600; } .tx-event--ok { background: var(--ok-soft); color: var(--ok); } .tx-event--ok .ic { color: var(--ok); } .tx-event--bad { background: var(--bad-soft); color: var(--bad); } .tx-event--bad .ic { color: var(--bad); } .tx-tip { margin-left: 58px; padding: 9px 12px; border-left: 3px solid var(--cobalt); background: var(--cobalt-soft); border-radius: 0 8px 8px 0; font-size: .88rem; color: var(--ink); } .tx-tip b { display: block; font-size: .78rem; color: var(--cobalt-ink); margin-bottom: 2px; } .mock--ink .tx-t { color: var(--ink-muted); } .mock--ink .tx-line p { color: #F1F5F4; } .mock--ink .tx-line--caller .tx-who { color: var(--amber); } .mock--ink .tx-line--agent .tx-who { color: var(--cobalt-on-ink); } .mock--ink .tx-line--agent .tx-who::before { background: var(--cobalt-on-ink); } .mock--ink .tx-event { background: rgba(255, 255, 255, .06); color: var(--ink-text); } .mock--ink .tx-event .ic { color: var(--ink-muted); } .mock--ink .tx-event em { color: var(--amber); } .mock--ink .tx-event--ok { background: rgba(46, 170, 110, .16); color: #8FE0B5; } .mock--ink .tx-event--ok .ic { color: #8FE0B5; } .mock--ink .tx-event--bad { background: rgba(229, 72, 54, .16); color: #FFB3A6; } .js .tx[data-reveal] > li { opacity: 0; transform: translateY(6px); transition: opacity .45s var(--ease), transform .45s var(--ease); } .js .tx[data-reveal] > li.is-shown { opacity: 1; transform: none; } /* Lista w makiecie: .mock-row.is-active - wiersz wybrany; .mock-ic--a - ikona w kolorze kanalu A. */ .mock-list { list-style: none; margin: 0; padding: 6px 0; } .mock-row { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 12px; padding: 10px 16px; border-bottom: 1px solid var(--line); } .mock-row:last-child { border-bottom: 0; } .mock-row.is-active { background: var(--cobalt-soft); box-shadow: inset 3px 0 0 var(--cobalt); } .mock-ic { display: inline-grid; place-items: center; width: 32px; height: 32px; border-radius: 8px; background: var(--tint); color: var(--ink-2); } .mock-ic .ic { width: 17px; height: 17px; } .mock-ic--a { background: var(--amber-soft); color: var(--amber-ink); } .mock-ic--b { background: var(--cobalt-soft); color: var(--cobalt); } .mock-main { min-width: 0; display: grid; } .mock-main b { color: var(--ink); font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .mock-main small { color: var(--muted); font-size: .82rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } /* Karta w makiecie (np. analiza rozmowy):

    Streszczenie

    ..

    ..
    Etykieta karty to

    , a nie naglowek h4: pola makiety nie sa czescia struktury naglowkow strony. */ .mock-card { border: 1px solid var(--line); border-radius: 10px; padding: 14px; background: var(--surface); } .mock-card + .mock-card { margin-top: 10px; } .mock-card .mock-h { font-size: .82rem; font-stretch: 105%; font-weight: 700; line-height: 1.35; color: var(--muted); margin: 0 0 6px; } .mock-card p { margin: 0; color: var(--ink); font-size: .92rem; } .mock-dl { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 6px 14px; margin: 0; font-size: .88rem; } .mock-dl dt { color: var(--muted); } .mock-dl dd { margin: 0; color: var(--ink); } .mock--ink .mock-card { background: var(--ink); border-color: var(--ink-line); } .mock--ink .mock-card p, .mock--ink .mock-dl dd { color: #F1F5F4; } .mock--ink .mock-row { border-bottom-color: var(--ink-line); } .mock--ink .mock-main b { color: #fff; } .mock--ink .mock-main small, .mock--ink .mock-dl dt, .mock--ink .mock-card .mock-h { color: var(--ink-muted); } /* Makiety na waskim ekranie */ @media (max-width: 520px) { .tx { padding-inline: 14px; } .tx-line { grid-template-columns: 40px minmax(0, 1fr); column-gap: 8px; } .tx-event, .tx-tip { margin-left: 0; } .stereo { padding-inline: 14px; } .stereo-ch { grid-template-columns: 80px minmax(0, 1fr); gap: 8px; } .console .mock-mark { display: none; } .console .chip--live { font-size: 0; gap: 0; padding: 6px; } /* Teksty w makietach zawijaja sie zamiast ucinania wielokropkiem; chip (lub wartosc) wiersza spada pod nazwe */ .mock-title, .mock-main b, .mock-main small { white-space: normal; overflow: visible; text-overflow: clip; } .mock-row { grid-template-columns: auto minmax(0, 1fr); row-gap: 6px; } .mock-row > .chip, .mock-row > .mono { grid-column: 2; justify-self: start; } } /* Konsola w hero */ .console { max-width: 620px; justify-self: end; width: 100%; } @media (max-width: 980px) { .console { justify-self: stretch; max-width: none; } } /* 9. Diagram .flow i kroki .steps ------------------------------------------- Diagram polaczenia (wezly + linia):

    1. ..Krok 1

      ..

      ..

    2. ..
      3. (bramka weryfikacji - kolor kanalu A)
    3. Krok 4
      ..
    Wariant .flow--3 dla trzech wezlow. Na waskim ekranie diagram jest pionowy. -------------------------------------------------------------------------- */ .flow { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--gap); counter-reset: flow; } .flow--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); } .flow-node { position: relative; padding-top: 0; } .flow-node::before { content: ""; position: absolute; top: 23px; left: 56px; right: calc(-1 * var(--gap) + 8px); height: 2px; background: repeating-linear-gradient(90deg, var(--cobalt) 0 8px, transparent 8px 13px); } .flow-node:last-child::before { display: none; } .flow-ic { position: relative; z-index: 1; display: inline-grid; place-items: center; width: 48px; height: 48px; border-radius: 50%; background: var(--surface); color: var(--cobalt); box-shadow: inset 0 0 0 2px var(--cobalt); } .flow-ic .ic { width: 22px; height: 22px; } .flow-node--gate .flow-ic { background: var(--amber); color: var(--ink); box-shadow: none; border-radius: 12px; } .flow-n { display: block; margin: 18px 0 4px; font-size: .85rem; font-weight: 650; color: var(--muted); } .flow-node h3 { margin: 0 0 8px; } .flow-node p { margin: 0; font-size: .98rem; } .flow-node--end h3 { margin-bottom: 14px; } .flow-outs { display: grid; gap: 10px; } .flow-out { display: flex; gap: 12px; align-items: flex-start; padding: 14px; background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-md); } .flow-out .ic { width: 22px; height: 22px; color: var(--cobalt); margin-top: 1px; } .flow-out h4 { font-size: 1.02rem; font-stretch: 106%; font-weight: 700; margin: 0 0 2px; } .flow-out p { margin: 0; font-size: .9rem; color: var(--muted); } .sec--tint .flow-out { border-color: transparent; } @media (max-width: 980px) { .flow, .flow--3 { grid-template-columns: minmax(0, 1fr); gap: 0; } .flow-node { display: grid; grid-template-columns: 48px minmax(0, 1fr); column-gap: 18px; padding-bottom: 32px; } .flow-node > :not(.flow-ic) { grid-column: 2; } .flow-node .flow-ic { grid-row: 1 / span 3; } .flow-node::before { top: 52px; bottom: 4px; left: 23px; right: auto; width: 2px; height: auto; background: repeating-linear-gradient(180deg, var(--cobalt) 0 8px, transparent 8px 13px); } .flow-n { margin-top: 2px; } .flow-node--end { padding-bottom: 0; } } /* Kroki / os czasu:

    1. ..

      ..

    - numeracja automatyczna. Uzywaj tylko dla tresci, ktora naprawde jest sekwencja (np. wdrozenie, przebieg zgloszenia). */ .steps { list-style: none; margin: 0; padding: 0; counter-reset: st; display: grid; gap: 0; max-width: 760px; } .steps > li { position: relative; counter-increment: st; padding: 0 0 32px 64px; } .steps > li::before { content: counter(st); position: absolute; left: 0; top: 0; width: 40px; height: 40px; border-radius: 50%; display: grid; place-items: center; background: var(--ink); color: #fff; font-weight: 700; font-stretch: 110%; } .steps > li::after { content: ""; position: absolute; left: 19px; top: 48px; bottom: 8px; width: 2px; background: var(--line); } .steps > li:last-child { padding-bottom: 0; } .steps > li:last-child::after { display: none; } .steps h3 { margin: 7px 0 6px; } .steps p { margin: 0; } .sec--ink .steps > li::before { background: var(--cobalt); } .sec--ink .steps > li::after { background: var(--ink-line); } /* 10. Listy z ikonami i callout ---------------------------------------------- .ticks--light na ciemnym tle; .ticks--2 w dwoch kolumnach. Callout:

    ..

    ..

    .callout--legal (zastrzezenia prawne, kanal A), .callout--on-ink (na ciemnym tle). -------------------------------------------------------------------------- */ .ticks { list-style: none; margin: 0; padding: 0; display: grid; gap: 18px; } .ticks > li { display: grid; grid-template-columns: 24px minmax(0, 1fr); gap: 14px; align-items: start; } .ticks > li > .ic { width: 22px; height: 22px; color: var(--cobalt); margin-top: 2px; } .ticks--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: var(--gap); } @media (max-width: 760px) { .ticks--2 { grid-template-columns: minmax(0, 1fr); } } .ticks--light > li > .ic { color: var(--cobalt-on-ink); } .ticks--light > li { color: var(--ink-text); } .callout { display: grid; grid-template-columns: 28px minmax(0, 1fr); gap: 16px; padding: 20px 22px; border-radius: var(--r-md); background: var(--cobalt-soft); border-left: 4px solid var(--cobalt); color: var(--ink); } .callout > .ic { width: 26px; height: 26px; color: var(--cobalt); } .callout h3 { font-size: 1.05rem; margin: 2px 0 6px; } .callout p { margin: 0; color: var(--ink-2); max-width: 78ch; } .callout p + p { margin-top: .6em; } .callout--legal { background: var(--amber-soft); border-left-color: var(--amber); } .callout--legal > .ic { color: var(--amber-ink); } .callout--on-ink { background: var(--ink-raise); border-left-color: var(--amber); } .callout--on-ink > .ic { color: var(--amber); } .callout--on-ink h3 { color: #fff; } .callout--on-ink p { color: var(--ink-text); } /* 11. Sekcje strony glownej ------------------------------------------------- */ .benefits { row-gap: 40px; } @media (max-width: 600px) { .benefits { row-gap: 28px; } } /* Obszary (lista podstron): */ .areas { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--line); } .areas > li { border-bottom: 1px solid var(--line); } .area { display: grid; grid-template-columns: 48px minmax(0, 1fr) minmax(0, 1.25fr) 28px; gap: 12px 28px; align-items: center; padding: 26px 12px; text-decoration: none; color: inherit; border-radius: var(--r-md); transition: background-color .15s; } .area:hover { background: var(--surface); } .area-ic { display: inline-grid; place-items: center; width: 48px; height: 48px; border-radius: 12px; background: var(--cobalt-soft); color: var(--cobalt); } .area-ic .ic { width: 24px; height: 24px; } .area-ic--amber { background: var(--amber-soft); color: var(--amber-ink); } .area-name { display: grid; gap: 6px; min-width: 0; } .area-kind { font-size: .9rem; color: var(--muted); font-weight: 500; } .area-title { color: var(--ink); font-size: clamp(1.2rem, 1.9vw, 1.55rem); font-stretch: 116%; font-weight: 740; line-height: 1.15; letter-spacing: -0.01em; } .area-desc { color: var(--ink-2); font-size: 1rem; } .area-go { width: 24px; height: 24px; color: var(--muted); transform: rotate(-90deg); transition: transform .2s var(--ease), color .15s; } .area:hover .area-title { color: var(--cobalt-ink); } .area:hover .area-go { color: var(--cobalt); transform: rotate(-90deg) translateY(3px); } @media (max-width: 860px) { .area { grid-template-columns: 44px minmax(0, 1fr) 24px; padding: 22px 4px; gap: 10px 16px; align-items: start; } .area-go { margin-top: 10px; } .area-ic { width: 44px; height: 44px; } .area-desc { grid-column: 2 / 4; grid-row: 2; } .area-go { grid-column: 3; grid-row: 1; } } /* Mapa danych (sekcja bezpieczenstwa): dwa pola polaczone linia */ .split--top { align-items: start; } .datamap { display: grid; gap: 0; } .datamap-box { border: 1px solid var(--ink-line); border-radius: var(--r-md); padding: 20px 22px; background: var(--ink-raise); } .datamap-box--ext { border-style: dashed; background: transparent; } .datamap-head { display: flex; align-items: center; gap: 12px; margin-bottom: 12px; } .datamap-head .ic { width: 26px; height: 26px; color: var(--amber); } .datamap-box--ext .datamap-head .ic { color: var(--cobalt-on-ink); } .datamap-head h3 { margin: 0; font-size: 1.1rem; } .datamap ul { margin: 0; padding: 0; list-style: none; display: flex; flex-wrap: wrap; gap: 8px; } .datamap li { padding: 5px 12px; border-radius: 999px; background: rgba(255, 255, 255, .07); font-size: .92rem; color: var(--ink-text); } .datamap-link { min-height: 44px; display: flex; align-items: center; gap: 14px; padding-left: 34px; font-size: .88rem; color: var(--ink-muted); } .datamap-link::before { content: ""; align-self: stretch; width: 2px; background: repeating-linear-gradient(180deg, var(--ink-muted) 0 5px, transparent 5px 10px); } .sec--ink .callout { margin-top: clamp(32px, 4vw, 56px); } /* Zapowiedz cennika (strona glowna, tpl/inc/pricing.tpl): pasek pakietow z pionowymi liniami zamiast kart. .price-amount--text - zamiast kwoty tekst (np. "Wycena telefoniczna"). Pod spodem:

    Ceny przykladowe..

    ..
    */ .price-strip { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-md); } .price-item { display: grid; align-content: start; gap: 10px; padding: clamp(22px, 2.6vw, 32px); min-width: 0; } .price-item + .price-item { border-left: 1px solid var(--line); } .price-name { color: var(--cobalt-ink); font-weight: 720; font-stretch: 112%; font-size: .95rem; letter-spacing: .02em; } .price-amount { color: var(--ink); font-size: clamp(1.9rem, 3vw, 2.5rem); font-weight: 780; font-stretch: 118%; line-height: 1.05; letter-spacing: -0.015em; } .price-amount small { margin-left: 6px; color: var(--muted); font-size: .95rem; font-weight: 500; font-stretch: 100%; letter-spacing: 0; white-space: nowrap; } .price-amount--text { font-size: clamp(1.3rem, 2vw, 1.6rem); line-height: 1.2; padding-block: .2em; } .price-desc { color: var(--ink-2); font-size: 1rem; } .price-foot { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 16px 32px; margin-top: 24px; } .price-note { margin: 0; color: var(--muted); font-size: .95rem; max-width: 56ch; } @media (max-width: 860px) { .price-strip { grid-template-columns: minmax(0, 1fr); } .price-item + .price-item { border-left: 0; border-top: 1px solid var(--line); } } /* FAQ:

    Odpowiedz

    Bez JS odpowiedzi sa widoczne; js.js zwija je i obsluguje aria-expanded. */ .faq-layout { display: grid; grid-template-columns: minmax(0, .8fr) minmax(0, 1.4fr); gap: clamp(28px, 5vw, 80px); align-items: start; } .faq-layout .sec-head { position: sticky; top: 104px; } @media (max-width: 900px) { .faq-layout { grid-template-columns: minmax(0, 1fr); } .faq-layout .sec-head { position: static; margin-bottom: 8px; } } .faq { border-top: 1px solid var(--line); } .qa { border-bottom: 1px solid var(--line); } .qa h3 { margin: 0; font-size: inherit; font-stretch: inherit; letter-spacing: 0; } .qa-q { display: flex; width: 100%; align-items: flex-start; justify-content: space-between; gap: 20px; padding: 22px 0; background: none; border: 0; text-align: left; font: inherit; font-size: 1.12rem; font-weight: 650; font-stretch: 106%; line-height: 1.35; color: var(--ink); cursor: pointer; } .qa-q:hover { color: var(--cobalt-ink); } .qa-q .ic { width: 22px; height: 22px; margin-top: 1px; color: var(--cobalt); transition: transform .25s var(--ease); } .qa.open .qa-q .ic { transform: rotate(45deg); } .qa-a > div { padding: 0 44px 0 0; } .qa-a > div::after { content: ""; display: block; height: 22px; } .qa-a p { margin: 0; } .qa-a p + p { margin-top: .7em; } .js .qa-a { display: grid; grid-template-rows: 0fr; visibility: hidden; transition: grid-template-rows .28s var(--ease), visibility 0s linear .28s; } .js .qa-a > div { overflow: hidden; min-height: 0; } .js .qa.open .qa-a { grid-template-rows: 1fr; visibility: visible; transition: grid-template-rows .28s var(--ease), visibility 0s; } /* Finalne CTA */ .cta-band { background: var(--cobalt); color: #fff; padding-block: clamp(56px, 7vw, 96px); position: relative; overflow: hidden; } .cta-band::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 7px; background: linear-gradient(var(--amber), var(--amber)) 0 0 / 100% 3px no-repeat, linear-gradient(var(--ink), var(--ink)) 0 100% / 100% 3px no-repeat; } .cta-inner { display: grid; grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr); gap: 32px 64px; align-items: end; } .cta-band h2 { color: #fff; font-size: clamp(2rem, 4.4vw, 3.5rem); font-stretch: 120%; font-weight: 800; margin-bottom: .3em; letter-spacing: -0.02em; } .cta-band p { margin: 0; color: #E3E8FF; max-width: 52ch; font-size: 1.12rem; } .cta-side { display: grid; gap: 20px; justify-items: start; } .cta-contact { display: flex; flex-wrap: wrap; gap: 8px 24px; font-size: 1.05rem !important; } .cta-contact a { color: #fff; font-weight: 600; } .cta-band :focus-visible { outline-color: #fff; } @media (max-width: 860px) { .cta-inner { grid-template-columns: minmax(0, 1fr); align-items: start; } } /* 12. Podstrony ------------------------------------------------------------------ PAGE-HERO:

    ..

    ..

    ..
    Wariant z makieta obok:
    ..crumbs, h1, lead, actions..
    ..
    SPLIT (naprzemiennie tekst + makieta):

    ..

    ..

    ..

      ..
    ..
    .split--rev - makieta po lewej (na mobile zawsze tekst pierwszy) -------------------------------------------------------------------------- */ .page-hero { padding-block: clamp(36px, 5vw, 72px) clamp(44px, 6vw, 88px); border-bottom: 1px solid var(--line); position: relative; } .page-hero::after { content: ""; position: absolute; left: 0; bottom: -4px; width: min(220px, 40%); height: 7px; background: linear-gradient(var(--amber), var(--amber)) 0 0 / 100% 3px no-repeat, linear-gradient(var(--cobalt), var(--cobalt)) 0 100% / 100% 3px no-repeat; } .page-title { font-size: clamp(2.3rem, 5vw, 4.1rem); font-stretch: 120%; font-weight: 800; letter-spacing: -0.024em; max-width: 18ch; margin-bottom: .35em; } .page-hero .lead { margin-bottom: 0; } .page-hero .actions { margin-top: 28px; } .page-hero-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(32px, 5vw, 72px); align-items: center; } @media (max-width: 980px) { .page-hero-grid { grid-template-columns: minmax(0, 1fr); } } .crumbs { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 22px; font-size: .92rem; color: var(--muted); } .crumbs a { color: var(--muted); } .crumbs a:hover { color: var(--cobalt-ink); } .crumbs [aria-current] { color: var(--ink); font-weight: 550; } .split { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr); gap: clamp(32px, 6vw, 96px); align-items: center; } .split--rev .split-text { order: 2; } .split--rev .split-media { order: 1; } .split-text > :last-child { margin-bottom: 0; } .split-text h2 { margin-bottom: .45em; } .split-text .ticks { margin-top: 24px; } .split-media { min-width: 0; } .split + .split { margin-top: var(--sec-y); } @media (max-width: 980px) { .split { grid-template-columns: minmax(0, 1fr); } .split--rev .split-text, .split--rev .split-media { order: initial; } } /* FORMULARZ:

    Podaj imię i nazwisko.

    Odpowiemy na ten adres.

    Podaj poprawny adres e-mail, np. jan@firma.pl.

    Napisz, czego dotyczy wiadomość.

    Pole oznaczone jako opcjonalne: . Bledy: js.js dodaje .is-invalid do .field i aria-invalid; .field-error jest widoczny tylko przy bledzie. -------------------------------------------------------------------------- */ .form { display: grid; gap: 22px; max-width: 760px; } .form-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px; } .field--full { grid-column: 1 / -1; } @media (max-width: 640px) { .form-grid { grid-template-columns: minmax(0, 1fr); } } .field { display: grid; gap: 7px; align-content: start; } .field label, .field .label { font-weight: 600; color: var(--ink); font-size: .98rem; } .opt { font-weight: 400; color: var(--muted); } .field input, .field textarea, .field select { width: 100%; font: inherit; font-size: 1rem; color: var(--ink); background: var(--surface); border: 1.5px solid var(--line-strong); border-radius: var(--r-sm); padding: 12px 14px; min-height: 50px; transition: border-color .15s, box-shadow .15s; } .field textarea { min-height: 140px; resize: vertical; line-height: 1.5; } .field input:hover, .field textarea:hover, .field select:hover { border-color: var(--muted); } .field input:focus, .field textarea:focus, .field select:focus { outline: none; border-color: var(--cobalt); box-shadow: 0 0 0 3px rgba(39, 71, 216, .22); } .field-hint { margin: 0; font-size: .88rem; color: var(--muted); } .field-error { display: none; margin: 0; font-size: .9rem; font-weight: 600; color: var(--bad); } .field-error::before { content: "! "; } .field.is-invalid input, .field.is-invalid textarea, .field.is-invalid select { border-color: var(--bad); background: #FFFBFA; } .field.is-invalid .field-error { display: block; } .check { display: grid; grid-template-columns: 22px minmax(0, 1fr); gap: 12px; align-items: start; font-size: .95rem; color: var(--ink-2); cursor: pointer; } .check input { width: 20px; height: 20px; margin: 2px 0 0; accent-color: var(--cobalt); } .check.is-invalid span { color: var(--bad); } .form-actions { display: flex; flex-wrap: wrap; gap: 12px; align-items: center; } .form-status { margin: 0; font-weight: 600; } .form-status.is-ok { color: var(--ok); } .form-status.is-bad { color: var(--bad); } /* Karta kontaktu obok formularza:

    ..

    */ .contact-card { background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-md); padding: 26px; } .contact-card a { font-weight: 600; } .contact-card h2 { font-size: 1.2rem; font-stretch: 108%; font-weight: 700; line-height: 1.25; margin: 0 0 10px; } .contact-card p:last-child { margin-bottom: 0; } /* Strona kontaktu (bez formularza): glowna karta e-mail i kroki zakupu. .contact-card--main - karta glownego kanalu (ikona .feature-ic, adres .contact-big, lista .ticks); .contact-steps-h - naglowek nad .steps w kolumnie obok karty. */ .contact-card--main { padding: clamp(24px, 3vw, 36px); } .contact-card--main .feature-ic { margin-bottom: 18px; } .contact-card--main .ticks { margin-top: 4px; } .contact-big { font-size: clamp(1.3rem, 2.4vw, 1.75rem); font-weight: 760; font-stretch: 112%; line-height: 1.2; overflow-wrap: anywhere; } .contact-big a { color: var(--cobalt-ink); } .contact-steps-h { font-size: clamp(1.3rem, 2vw, 1.6rem); margin: 6px 0 24px; } /* PROSE (teksty prawne) ze spisem tresci:

    Obowiązuje od ...

    1. ..

    ..

    Bez spisu tresci: samo
    w .wrap.wrap-narrow. -------------------------------------------------------------------------- */ .prose-layout { display: grid; grid-template-columns: 260px minmax(0, 1fr); gap: clamp(32px, 5vw, 72px); align-items: start; } @media (max-width: 900px) { .prose-layout { grid-template-columns: minmax(0, 1fr); } } .toc { position: sticky; top: 100px; padding: 18px 20px; border: 1px solid var(--line); border-radius: var(--r-md); background: var(--surface); font-size: .94rem; } @media (max-width: 900px) { .toc { position: static; } } .toc-h { font-weight: 700; color: var(--ink); margin: 0 0 10px; font-stretch: 106%; } .toc ol { margin: 0; padding-left: 1.2em; display: grid; gap: 6px; } .toc a { color: var(--ink-2); text-decoration: none; } .toc a:hover { color: var(--cobalt-ink); text-decoration: underline; } .prose { max-width: 72ch; } .prose h2 { font-size: clamp(1.35rem, 2.2vw, 1.7rem); font-stretch: 112%; margin: 2em 0 .6em; scroll-margin-top: 96px; } .prose h2:first-child, .prose .prose-meta + h2 { margin-top: 0; } .prose h3 { font-size: 1.12rem; margin: 1.6em 0 .5em; } .prose p, .prose li { line-height: 1.7; } .prose ul, .prose ol { padding-left: 1.3em; margin: 0 0 1em; } .prose li + li { margin-top: .35em; } .prose-meta { color: var(--muted); font-size: .95rem; padding-bottom: 18px; border-bottom: 1px solid var(--line); margin-bottom: 28px; } /* Tabela w tekscie prawnym:
    ..
    ..
    Przewija sie wrapper, nie sama tabela (tabela zachowuje display: table i semantyke dla czytnikow ekranu). .prose-table--stack - na telefonie kazdy wiersz to blok, a komorki dostaja etykiete kolumny z atrybutu data-label. */ .prose-table { margin: 0 0 1.4em; overflow-x: auto; border-radius: var(--r-sm); } .prose table { width: 100%; border-collapse: collapse; font-size: .95rem; } .prose th, .prose td { text-align: left; padding: 10px 12px; border-bottom: 1px solid var(--line); vertical-align: top; } .prose th { color: var(--ink); font-weight: 650; background: var(--tint); } @media (max-width: 600px) { .prose table { font-size: .9rem; } .prose th, .prose td { padding: 8px 10px; } .prose-table--stack table, .prose-table--stack tbody, .prose-table--stack tr, .prose-table--stack td { display: block; width: 100%; } .prose-table--stack thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; } .prose-table--stack tr { padding: 10px 0; border-bottom: 1px solid var(--line); } .prose-table--stack tr:first-child { border-top: 1px solid var(--line); } .prose-table--stack td { padding: 3px 0; border: 0; } .prose-table--stack td::before { content: attr(data-label); display: block; font-size: .8rem; font-weight: 650; color: var(--muted); } .prose-table--stack td:first-child { color: var(--ink); font-weight: 650; } .prose-table--stack td:first-child::before { display: none; } } /* 13. Stopka ---------------------------------------------------------------- */ .ft { background: var(--ink); color: var(--ink-muted); padding: clamp(48px, 6vw, 80px) 0 28px; font-size: .96rem; } .ft-cols { display: grid; grid-template-columns: minmax(0, 1.5fr) repeat(3, minmax(0, 1fr)); gap: 36px; } .ft-logo { height: 32px; width: auto; margin-bottom: 18px; } .ft-brand p { max-width: 36ch; margin: 0; } .ft-h { font-size: .95rem; color: #fff; font-stretch: 108%; margin: 6px 0 14px; letter-spacing: 0; } .ft ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; } .ft a { color: var(--ink-text); text-decoration: none; } .ft a:hover { color: #fff; text-decoration: underline; } .ft-bottom { display: flex; flex-wrap: wrap; gap: 8px 28px; margin-top: 48px; padding-top: 22px; border-top: 1px solid var(--ink-line); font-size: .88rem; } .ft-bottom span:first-child { margin-right: auto; } @media (max-width: 900px) { .ft-cols { grid-template-columns: repeat(2, minmax(0, 1fr)); } .ft-brand { grid-column: 1 / -1; } } @media (max-width: 520px) { .ft-cols { grid-template-columns: minmax(0, 1fr); } .ft-bottom span:first-child { margin-right: 0; width: 100%; } } /* 14. Dostepnosc i ruch ------------------------------------------------------- */ :focus-visible { outline: 3px solid var(--cobalt); outline-offset: 3px; border-radius: 4px; } .sec--ink :focus-visible, .ft :focus-visible, .mock--ink :focus-visible { outline-color: var(--amber); } .field input:focus-visible, .field textarea:focus-visible, .field select:focus-visible { outline: none; } @media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } *, *::before, *::after { transition-duration: 0s !important; animation-duration: 0s !important; animation-iteration-count: 1 !important; } .js .tx[data-reveal] > li { opacity: 1; transform: none; } } @media print { .top, .cta-band, .ft, .hamburger { display: none; } body { background: #fff; } } /* 15. Komponenty podstron --------------------------------------------------- Klasy uzywane tylko na jednej podstronie, z prefiksem strony. Wzorce wspolne (makiety, karty, FAQ, diagram) sa w sekcjach 7-12 - nowe podstrony korzystaja najpierw z nich. 15.1 Agent glosowy (.diff - podglad roznic Szkicu z AI) 15.2 Scenariusze rozmow (.ivr-* - edytor scenariusza i walidator) 15.3 Panel i bezpieczenstwo (.pb-* - role, filtry, kod TOTP) 15.4 Integracje (.arch - schemat architektury) 15.5 Cennik (.cn-* - pakiety, tabela porownania, stawki, makiety rozliczen) 15.6 Polityki (spis tresci z dwiema grupami, odstepy w .prose) -------------------------------------------------------------------------- */ /* 15.1 Agent glosowy. Podglad roznic w makiecie (Szkic z AI):
    ..
    1. wiersz bez zmian
    2. ..
    3. ..
    */ .diff-head { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px 12px; padding: 12px 16px 8px; border-top: 1px solid var(--line); font-size: .82rem; font-weight: 700; color: var(--muted); } .diff { list-style: none; margin: 0 16px; padding: 6px 0; border: 1px solid var(--line); border-radius: 10px; font-family: var(--f-mono); font-size: .8rem; line-height: 1.55; color: var(--ink-2); overflow: hidden; } .diff > li { display: grid; grid-template-columns: 26px minmax(0, 1fr); padding: 4px 12px 4px 0; } .diff > li::before { content: ""; text-align: center; color: var(--muted); } .diff-del { background: var(--bad-soft); color: var(--bad); } .diff > .diff-del::before { content: "-"; color: var(--bad); } .diff-del > span { text-decoration: line-through; text-decoration-thickness: 1px; } .diff-add { background: var(--ok-soft); color: var(--ok); } .diff > .diff-add::before { content: "+"; color: var(--ok); } .diff-actions { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 8px; padding: 14px 16px 16px; } .diff-btn { display: inline-flex; align-items: center; min-height: 34px; padding: 0 14px; border-radius: 8px; border: 1.5px solid var(--line-strong); font-size: .85rem; font-weight: 650; color: var(--ink); } .diff-btn--primary { background: var(--cobalt); border-color: var(--cobalt); color: #fff; } /* 15.2 Scenariusze rozmow. Makieta edytora: plotno ze schematem (.ivr-canvas > .ivr-graph) + panel walidatora (.ivr-side). Wezel:
    svgTypNazwa..
    Rozgalezienie:
  5. Klawisz 1wezly..
    ..
    6. */ .ivr-editor { display: grid; grid-template-columns: minmax(0, 1.65fr) minmax(0, 1fr); } .ivr-canvas { padding: 18px 20px 26px; border-right: 1px solid var(--line); min-width: 0; background: radial-gradient(circle, var(--line) 1px, transparent 1.4px) 0 0 / 18px 18px, #FBFCFC; } .ivr-tools { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 22px; } .ivr-tool { display: inline-flex; align-items: center; min-height: 30px; padding: 0 10px; border: 1px solid var(--line-strong); border-radius: 7px; background: var(--surface); font-size: .8rem; font-weight: 600; color: var(--ink); white-space: nowrap; } .ivr-tool--ai { border-color: var(--cobalt); color: var(--cobalt-ink); background: var(--cobalt-soft); } .ivr-graph { list-style: none; margin: 0; padding: 0; } .ivr-step { position: relative; display: grid; justify-items: center; } .ivr-step + .ivr-step { margin-top: 24px; } .ivr-step + .ivr-step::before, .ivr-branch > * + *::before, .ivr-branch::before { content: ""; position: absolute; left: calc(50% - 1px); width: 2px; background: repeating-linear-gradient(180deg, var(--cobalt) 0 5px, transparent 5px 9px); } .ivr-step + .ivr-step::before { top: -24px; height: 24px; } .ivr-node { position: relative; width: min(100%, 320px); display: grid; grid-template-columns: 30px minmax(0, 1fr); column-gap: 10px; align-items: start; padding: 10px 12px; background: var(--surface); border: 1.5px solid var(--line-strong); border-radius: 10px; font-size: .86rem; line-height: 1.35; } .ivr-node > :not(.ivr-ic) { grid-column: 2; min-width: 0; } .ivr-ic { grid-row: 1 / span 3; display: inline-grid; place-items: center; width: 30px; height: 30px; border-radius: 8px; background: var(--cobalt-soft); color: var(--cobalt); } .ivr-ic .ic { width: 16px; height: 16px; } .ivr-k { font-size: .74rem; font-weight: 650; color: var(--muted); } .ivr-node b { color: var(--ink); font-weight: 650; } .ivr-node small { color: var(--muted); font-size: .78rem; } .ivr-node--start { border-color: var(--ink); } .ivr-node--start .ivr-ic { background: var(--ink); color: #fff; } .ivr-node--gate { border-color: var(--amber); background: #FFFBF2; } .ivr-node--gate .ivr-ic { background: var(--amber); color: var(--ink); } .ivr-node--agent { border-color: var(--cobalt); } .ivr-node--agent .ivr-ic { background: var(--cobalt); color: #fff; } .ivr-node--warn { box-shadow: 0 0 0 3px var(--amber-soft); } .ivr-keys { display: flex; flex-wrap: wrap; gap: 4px 10px; margin-top: 4px; font-size: .78rem; color: var(--ink-2); } .ivr-keys b.mono { display: inline-grid; place-items: center; width: 18px; height: 18px; margin-right: 3px; border-radius: 4px; background: var(--tint); font-size: .72rem; color: var(--ink); } .ivr-key--warn { color: var(--amber-ink); font-weight: 650; } .ivr-key--warn b.mono { background: var(--amber); } .ivr-split { grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 16px; justify-items: stretch; } .ivr-split::after { content: ""; position: absolute; top: 0; left: calc(25% - 4px); right: calc(25% - 4px); height: 2px; background: repeating-linear-gradient(90deg, var(--cobalt) 0 5px, transparent 5px 9px); } .ivr-branch { position: relative; display: grid; justify-items: center; align-content: start; padding-top: 20px; min-width: 0; } .ivr-branch::before { top: 0; height: 20px; } .ivr-branch > * { position: relative; } .ivr-branch > * + * { margin-top: 20px; } .ivr-branch > * + *::before { top: -20px; height: 20px; } .ivr-edge { padding: 2px 8px; border-radius: 6px; background: var(--ink); color: #fff; font-size: .72rem; } .ivr-side { padding: 18px 20px 22px; min-width: 0; } .ivr-side-h { font-size: 1rem; font-stretch: 106%; margin: 0 0 10px; } .ivr-side-sum { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin: 0 0 16px; font-size: .86rem; color: var(--ink-2); } .ivr-checks { list-style: none; margin: 0; padding: 0; display: grid; gap: 0; border-top: 1px solid var(--line); } .ivr-checks li { display: grid; grid-template-columns: 20px minmax(0, 1fr); gap: 10px; padding: 12px 0; border-bottom: 1px solid var(--line); font-size: .86rem; line-height: 1.4; } .ivr-checks .ic { width: 18px; height: 18px; margin-top: 1px; color: var(--ok); } .ivr-checks b { display: block; color: var(--ink); font-weight: 650; } .ivr-checks small { color: var(--muted); font-size: .82rem; } .ivr-checks .is-warn { background: var(--amber-soft); margin-inline: -10px; padding-inline: 10px; border-radius: 8px; border-bottom-color: transparent; } .ivr-checks .is-warn .ic { color: var(--amber-ink); } .ivr-after { grid-template-columns: repeat(3, minmax(0, 1fr)); column-gap: var(--gap); margin-top: clamp(28px, 3.5vw, 44px); } .ivr-ai { border-left: 3px solid var(--cobalt); background: var(--cobalt-soft); } .ivr-ai .mock-h { color: var(--cobalt-ink); } .ivr-player { border-top: 1px solid var(--line); } .ivr-mock-actions { display: flex; flex-wrap: wrap; gap: 8px; padding-top: 12px; border-top: 1px solid var(--line); } .ivr-legal { margin-top: 28px; } .ivr-levels { margin-top: clamp(32px, 4vw, 48px); } .ivr-note { margin-top: var(--gap); } @media (max-width: 980px) { .ivr-editor { grid-template-columns: minmax(0, 1fr); } .ivr-canvas { border-right: 0; border-bottom: 1px solid var(--line); } .ivr-after { grid-template-columns: minmax(0, 1fr); } } @media (max-width: 600px) { .ivr-canvas { padding: 14px 14px 20px; } .ivr-split { grid-template-columns: minmax(0, 1fr); row-gap: 0; } .ivr-split::after { left: 0; right: calc(50% - 1px); } .ivr-branch { justify-items: stretch; padding: 14px 0 16px 16px; border-left: 2px dashed var(--cobalt); } .ivr-branch:last-child { padding-bottom: 0; } .ivr-branch::before, .ivr-branch > * + *::before { display: none; } .ivr-branch > * + * { margin-top: 10px; } .ivr-edge { justify-self: start; } .ivr-node { width: 100%; } } /* 15.3 Panel i bezpieczenstwo. Makieta listy rozmow: przelacznik rol .pb-roles (.pb-role.is-on) i pasek filtrow .pb-filters (.pb-filter > small etykieta). Przyciski w ciemnej makiecie: . Kod TOTP w makiecie:
    4..
    . */ .pb-roles { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; padding: 12px 16px 0; font-size: .8rem; } .pb-roles-k { color: var(--muted); font-weight: 600; margin-right: 4px; } .pb-role { padding: 4px 10px; border-radius: 7px; border: 1px solid var(--line); color: var(--ink-2); font-weight: 600; white-space: nowrap; } .pb-role.is-on { background: var(--ink); border-color: var(--ink); color: #fff; } .pb-filters { display: flex; flex-wrap: wrap; gap: 6px; padding: 10px 16px 12px; border-bottom: 1px solid var(--line); } .pb-filter { display: inline-flex; align-items: baseline; gap: 6px; min-height: 30px; padding: 4px 10px; border: 1px solid var(--line-strong); border-radius: 7px; background: var(--surface); font-size: .8rem; font-weight: 600; color: var(--ink); white-space: nowrap; } .pb-filter small { font-size: .74rem; font-weight: 500; color: var(--muted); } .pb-filter.is-on { border-color: var(--cobalt); background: var(--cobalt-soft); color: var(--cobalt-ink); } .pb-mock-actions { display: flex; flex-wrap: wrap; gap: 8px; padding: 0 16px 16px; } .pb-confirm { border-color: var(--cobalt); box-shadow: inset 3px 0 0 var(--cobalt); } .pb-otp { display: flex; gap: 6px; margin-top: 12px; } .pb-otp span { display: inline-grid; place-items: center; width: 34px; height: 40px; border: 1.5px solid var(--line-strong); border-radius: 7px; font-family: var(--f-mono); font-weight: 600; color: var(--ink); } .pb-otp .is-empty { border-color: var(--cobalt); box-shadow: 0 0 0 3px rgba(39, 71, 216, .18); } .pb-otp-note { display: block; margin-top: 8px; font-size: .8rem; color: var(--muted); } .pb-retention { margin-top: clamp(40px, 5vw, 64px); } .pb-h3 { font-size: clamp(1.3rem, 2vw, 1.6rem); margin-bottom: 20px; } /* Dlugie slowo "bezpieczeństwo" w h1 obok makiety - mniejszy stopien, zeby nie wchodzilo na makiete */ .pb-title { font-size: clamp(2rem, 4.2vw, 3.6rem); } @media (max-width: 980px) { .pb-title { font-size: clamp(2rem, 9vw, 3.6rem); } } /* 15.4 Integracje. Schemat architektury: telefonia - SYSTELa (+ adapter i dostawca mowy) - systemy firmy.

    ..

    svg....

    ..

      ..

    ..

    ..

    ..
    ..
    ..
    --a = kanal dzwoniacego (amber), --ext = element podlaczany lub wymienny (linia przerywana). Ponizej 980px schemat jest pionowy: telefonia, SYSTELa, systemy firmy, a dostawca mowy na koncu z wlasnym naglowkiem .arch-h--ext (na desktopie ukrytym), zeby linia nie sugerowala polaczenia dostawca - systemy firmy. */ .arch { margin: 0; background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-lg); overflow: hidden; } .arch-grid { display: grid; grid-template-columns: minmax(0, 1fr) 44px minmax(0, 1.1fr) 44px minmax(0, 1fr); align-items: center; padding: clamp(18px, 2.6vw, 32px); } .arch-col, .arch-mid { display: grid; gap: 10px; min-width: 0; } .arch-mid { gap: 0; } .arch-h { margin: 0; font-size: .82rem; font-weight: 700; font-stretch: 105%; color: var(--muted); } .arch-col .arch-h ~ .arch-h { margin-top: 10px; } .arch-h--ext { display: none; } .arch-box { display: grid; grid-template-columns: 32px minmax(0, 1fr); column-gap: 12px; align-items: start; padding: 12px 14px; border: 1px solid var(--line); border-radius: 10px; background: var(--paper); } .arch-box > :not(.arch-ic) { grid-column: 2; min-width: 0; } .arch-ic { grid-row: 1 / span 2; display: inline-grid; place-items: center; width: 32px; height: 32px; border-radius: 8px; background: var(--cobalt-soft); color: var(--cobalt); } .arch-ic .ic { width: 17px; height: 17px; } .arch-box b { color: var(--ink); font-weight: 650; line-height: 1.3; } .arch-box small { color: var(--muted); font-size: .84rem; line-height: 1.4; } .arch-box--a { border-color: var(--amber); background: #FFFBF2; } .arch-box--a .arch-ic { background: var(--amber); color: var(--ink); } .arch-box--ext { border: 1.5px dashed var(--line-strong); background: transparent; } .arch-link { position: relative; align-self: stretch; min-height: 28px; } .arch-link::before { content: ""; position: absolute; left: 4px; right: 4px; top: 50%; height: 2px; margin-top: -1px; background: repeating-linear-gradient(90deg, var(--cobalt) 0 6px, transparent 6px 10px); } .arch-core { display: grid; gap: 10px; padding: 18px; border-radius: var(--r-md); background: var(--ink); color: var(--ink-text); } .arch-core-h { display: flex; align-items: center; gap: 10px; margin: 0 0 2px; color: #fff; font-size: 1.15rem; font-weight: 760; font-stretch: 116%; } .arch-core-h img { width: 24px; height: 24px; border-radius: 6px; } .arch-mods { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; } .arch-mods li { display: flex; align-items: center; gap: 10px; padding: 9px 12px; border-radius: 8px; background: var(--ink-raise); color: #F1F5F4; font-size: .92rem; line-height: 1.3; } .arch-mods .ic { width: 17px; height: 17px; color: var(--cobalt-on-ink); } .arch-mods .is-gate .ic { color: var(--amber); } .arch-adapter { display: flex; align-items: center; gap: 10px; margin: 2px 0 0; padding: 9px 12px; border: 1.5px dashed var(--cobalt-on-ink); border-radius: 8px; color: var(--ink-text); font-size: .9rem; line-height: 1.3; } .arch-adapter .ic { width: 17px; height: 17px; color: var(--cobalt-on-ink); } .arch-down { justify-self: center; width: 2px; height: 26px; background: repeating-linear-gradient(180deg, var(--cobalt) 0 6px, transparent 6px 10px); } .int-note { margin-top: var(--gap); } @media (max-width: 980px) { .arch-grid { display: flex; flex-direction: column; align-items: stretch; } .arch-mid { display: contents; } .arch-grid > .arch-col:first-child { order: 1; } .arch-grid > .arch-link:nth-child(2) { order: 2; } .arch-core { order: 3; } .arch-grid > .arch-link:nth-child(4) { order: 4; } .arch-grid > .arch-col:last-child { order: 5; } .arch-down { display: none; } .arch-h--ext { display: block; order: 6; margin: 26px 0 10px; padding-top: 18px; border-top: 1px dashed var(--line-strong); } .arch-mid > .arch-box--ext { order: 7; } .arch-link { min-height: 32px; } .arch-link::before { left: 50%; right: auto; top: 4px; bottom: 4px; width: 2px; height: auto; margin: 0 0 0 -1px; background: repeating-linear-gradient(180deg, var(--cobalt) 0 6px, transparent 6px 10px); } } /* 15.5 Cennik. Karty pakietow: Tabela porownawcza:
    ..wiersze cen..
    ..
    Grupa
    Kazda komorka td ma data-label z nazwa pakietu (etykieta w widoku mobilnym). Kolumna wyrozniona: .is-featured. Uklad tabeli: od 761px pelna tabela; 641-760px przewijanie w bok z przyklejona pierwsza kolumna; do 640px kazdy wiersz to blok z nazwa funkcji i trzema komorkami pakietow (bez przewijania). Licznik w makiecie: .cn-meter--agent / --rec. */ .cn-hero-note { margin: 18px 0 0; color: var(--muted); font-size: .92rem; max-width: 52ch; } .cn-plans { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--gap); align-items: stretch; } .cn-plan { position: relative; display: flex; flex-direction: column; gap: 12px; min-width: 0; padding: clamp(24px, 2.6vw, 34px); background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-md); } .cn-plan--featured { border: 2px solid var(--cobalt); box-shadow: inset 0 5px 0 var(--cobalt); } .cn-plan-tag { position: absolute; top: -14px; left: clamp(22px, 2.6vw, 32px); right: 16px; margin: 0; } .cn-plan-tag .chip { white-space: normal; background: var(--cobalt); color: #fff; padding: 4px 12px; } .cn-plan-name { margin: 0; color: var(--cobalt-ink); font-size: 1rem; font-stretch: 112%; font-weight: 720; letter-spacing: .02em; } .cn-plan .price-amount { margin: 0; } .cn-plan-min { margin: 0 0 6px; padding-bottom: 18px; border-bottom: 1px solid var(--line); color: var(--ink-2); font-size: 1rem; } .cn-ticks { gap: 12px; font-size: .98rem; } .cn-ticks > li { grid-template-columns: 20px minmax(0, 1fr); gap: 12px; } .cn-ticks > li > .ic { width: 20px; height: 20px; } .cn-plan-foot { margin-top: auto; padding-top: 14px; } .cn-plan-cta { width: 100%; white-space: normal; text-align: center; padding-inline: 14px; } /* 861-1080px: nadal trzy kolumny, ciasniej; ponizej 860px jedna kolumna wysrodkowana */ @media (max-width: 1080px) { .cn-plans { gap: 18px; } .cn-plan { padding: 22px; } .cn-plan-tag { left: 22px; } } @media (max-width: 860px) { .cn-plans { grid-template-columns: minmax(0, 1fr); max-width: 640px; margin-inline: auto; } .cn-plan--featured { margin-top: 10px; } } .cn-table-wrap { position: relative; overflow-x: auto; background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-md); } .cn-table { width: 100%; min-width: 720px; border-collapse: collapse; font-size: .98rem; } .cn-table th, .cn-table td { padding: 14px 18px; border-bottom: 1px solid var(--line); text-align: left; vertical-align: top; } .cn-table tbody:last-child tr:last-child > * { border-bottom: 0; } .cn-table thead th { color: var(--cobalt-ink); font-weight: 720; font-stretch: 112%; font-size: .95rem; letter-spacing: .02em; border-bottom: 2px solid var(--line); } .cn-table tbody th { color: var(--ink); font-weight: 600; width: 38%; } .cn-table td { color: var(--ink-2); width: 20.6%; } .cn-table .is-featured { background: var(--cobalt-soft); } .cn-table thead .is-featured { box-shadow: inset 0 4px 0 var(--cobalt); } .cn-row-price td { color: var(--ink); font-weight: 700; font-stretch: 108%; } .cn-row-group th { padding-top: 22px; padding-bottom: 8px; background: #F8FAF9; color: var(--muted) !important; font-size: .88rem; font-weight: 650 !important; } /* Etykieta grupy zostaje widoczna przy przewijaniu tabeli w bok */ .cn-row-group th > span { position: sticky; left: 18px; display: inline-block; } .cn-yes .ic { width: 20px; height: 20px; color: var(--ok); } .cn-no { color: var(--muted); } .cn-table-hint { display: none; margin: 10px 0 0; font-size: .88rem; color: var(--muted); } @media (max-width: 760px) { .cn-table-hint { display: block; } .cn-table { min-width: 600px; } .cn-table th, .cn-table td { padding: 12px 14px; } .cn-table thead th:first-child, .cn-table tbody tr:not(.cn-row-group) th { position: sticky; left: 0; z-index: 1; width: 160px; min-width: 160px; background: var(--surface); box-shadow: inset -1px 0 0 var(--line); } .cn-table td { width: auto; } .cn-row-group th > span { left: 14px; } } @media (max-width: 640px) { .cn-table-hint { display: none; } .cn-table-wrap { overflow: visible; } .cn-table, .cn-table tbody { display: block; width: 100%; min-width: 0; } .cn-table thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; } .cn-table tbody tr { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px 4px; padding: 12px 10px; border-bottom: 1px solid var(--line); } .cn-table tbody:last-child tr:last-child { border-bottom: 0; } .cn-table th, .cn-table td { border-bottom: 0; } .cn-table thead th:first-child, .cn-table tbody tr:not(.cn-row-group) th { position: static; width: auto; min-width: 0; box-shadow: none; background: transparent; } .cn-table tbody tr:not(.cn-row-group) th { grid-column: 1 / -1; padding: 0 2px; } .cn-table td { display: block; min-width: 0; padding: 6px; border-radius: 7px; background: var(--paper); font-size: .9rem; line-height: 1.35; overflow-wrap: break-word; } .cn-table td.is-featured { background: var(--cobalt-soft); } .cn-table td::before { content: attr(data-label); display: block; margin-bottom: 2px; font-size: .68rem; font-weight: 720; font-stretch: 100%; letter-spacing: 0; color: var(--cobalt-ink); } .cn-table tr.cn-row-group { display: block; padding: 16px 12px 8px; background: #F8FAF9; } .cn-table tr.cn-row-group th { display: block; width: auto; padding: 0; background: transparent; } .cn-row-group th > span { position: static; } } .cn-rates { display: grid; gap: 14px; margin: 24px 0 4px; padding: 20px 22px; background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-md); } .cn-rate { display: grid; gap: 2px; margin: 0; color: var(--ink-2); font-size: .98rem; } .cn-rate + .cn-rate { padding-top: 14px; border-top: 1px solid var(--line); } .cn-rate .price-amount { font-size: clamp(1.5rem, 2.4vw, 1.9rem); } .cn-rec-body { border-top: 1px solid var(--line); } .cn-impl { grid-template-columns: repeat(2, minmax(0, 1fr)); } .cn-impl .ticks { margin-top: 6px; } .cn-impl .price-amount small { display: block; margin: 6px 0 0; } @media (max-width: 860px) { .cn-impl { grid-template-columns: minmax(0, 1fr); } } .cn-callout { margin-top: clamp(32px, 4vw, 48px); } /* Podsumowanie kwot w makiecie rozliczenia (.mock-dl.cn-sum, wiersz sumy .cn-sum-total) */ .cn-sum { column-gap: 0; } .cn-sum dt, .cn-sum dd { align-self: baseline; } .cn-sum dd { text-align: right; padding-left: 14px; } .cn-sum .cn-sum-total { align-self: stretch; display: flex; align-items: center; padding-top: 8px; border-top: 1px solid var(--line); color: var(--ink); font-weight: 700; } .cn-sum dd.cn-sum-total { justify-content: flex-end; } .cn-meter { display: flex; height: 8px; margin: 2px 0 12px; border-radius: 999px; background: var(--tint); overflow: hidden; } .cn-meter i { display: block; height: 100%; } .cn-meter-in { background: var(--cobalt); } .cn-meter-over { background: repeating-linear-gradient(135deg, var(--ink) 0 4px, var(--ink-2) 4px 8px); } .cn-meter--agent .cn-meter-in { width: 96%; } .cn-meter--agent .cn-meter-over { width: 4%; } .cn-meter--rec .cn-meter-in { width: 77%; } .split-text .cn-more { margin-top: 24px; font-weight: 600; } @media (max-width: 420px) { .cn-bill .mock-meta { display: none; } .cn-bill .mock-bar .chip { margin-left: auto; } } /* 15.6 Polityki. Spis tresci z dwiema grupami (serwis + informacja o nagraniach) jest wyzszy niz ekran: odstep przed druga grupa, przewijanie wewnatrz spisu, kotwice h3 nie chowaja sie pod naglowkiem strony. */ .toc ol + .toc-h { margin-top: 18px; padding-top: 14px; border-top: 1px solid var(--line); } @media (min-width: 901px) { .page-polityka-prywatnosci .toc { max-height: calc(100vh - 120px); overflow-y: auto; overscroll-behavior: contain; } } .prose h3[id] { scroll-margin-top: 96px; } .prose .rule-stereo { margin: 2.6em 0 2em; } .prose .mock, .prose .callout { margin: 1.4em 0 1.6em; } .prose .callout h3 { margin: 2px 0 6px; }