/* * Warstwa responsywna dla stron z `templates/prerendered`. * * Eksport z kanwy projektowej nie ma klas ani zapytań medialnych — każdy element niesie style * w atrybucie `style`. Dlatego selektory celują we fragmenty tych stylów (`[style*="…"]`), * a nie w klasy: kolejny eksport z kanwy skasowałby klasy dopisane ręcznie, a tego arkusza * nie dotknie. Z tego samego powodu reguły mają `!important` — inaczej przegrywają ze stylem * wpisanym w element. * * W plikach eksportu dokładamy tylko trzy wiersze w `` (ten arkusz, znacznik `t-js` * i `landing.js`). Menu pod hamburgerem buduje skrypt z odnośników, które już są w nagłówku — * nie ma drugiej listy linków do utrzymania. */ :root { --t-ink: #1E293B; --t-muted: #5A6B85; --t-line: #E4E9F4; --t-accent: #6366F1; --t-accent-soft: #EEF0FF; --t-accent-ink: #4F46E5; --t-panel: #FFFFFF; /* Poniżej tej szerokości pasek nawigacji nie mieści się w wierszu i wchodzi hamburger. */ --t-nav-breakpoint: 900px; } /* ---------------------------------------------------------------- nagłówek */ .t-burger { display: none; flex: 0 0 auto; align-items: center; justify-content: center; width: 40px; height: 40px; margin-right: -6px; padding: 0; border: 1px solid var(--t-line); border-radius: 12px; background: #fff; color: var(--t-ink); cursor: pointer; transition: background 140ms cubic-bezier(0.33, 0, 0.67, 1); } .t-burger:hover { background: #F6F8FC; } /* Trzy kreski rysowane pseudoelementami — środkowa to samo tło elementu. */ .t-burger__bars, .t-burger__bars::before, .t-burger__bars::after { display: block; width: 18px; height: 2px; border-radius: 2px; background: currentColor; transition: transform 180ms cubic-bezier(0.33, 0, 0.67, 1), opacity 120ms linear; } .t-burger__bars { position: relative; } .t-burger__bars::before, .t-burger__bars::after { content: ""; position: absolute; left: 0; } .t-burger__bars::before { top: -6px; } .t-burger__bars::after { top: 6px; } /* Otwarte menu: kreski składają się w krzyżyk. */ .t-burger[aria-expanded="true"] .t-burger__bars { background: transparent; } .t-burger[aria-expanded="true"] .t-burger__bars::before { transform: translateY(6px) rotate(45deg); } .t-burger[aria-expanded="true"] .t-burger__bars::after { transform: translateY(-6px) rotate(-45deg); } @media (max-width: 900px) { /* Bez JS zostaje stary pasek: hamburger bez skryptu byłby przyciskiem, który nic nie robi. */ .t-js .t-burger { display: inline-flex; } .t-js header[style*="position: sticky"] > nav { display: none !important; } /* „Zaloguj się" i tak nie mieści się obok przycisku akcji — przenosi się do szuflady. */ .t-js header[style*="position: sticky"] > nav ~ a:not(:last-of-type) { display: none !important; } /* Ukryta nawigacja była rozpychaczem wiersza; bez niej przycisk przykleiłby się do znaku firmowego. */ .t-js header[style*="position: sticky"] > nav ~ a:last-of-type { margin-left: auto !important; } header[style*="position: sticky"] { gap: 10px !important; } } @media (max-width: 560px) { header[style*="position: sticky"] { padding-left: 16px !important; padding-right: 16px !important; } header[style*="position: sticky"] > nav ~ a:last-of-type { padding: 0 14px !important; } /* Skrót klawiaturowy na telefonie nie znaczy nic i zjada połowę przycisku. */ header[style*="position: sticky"] > nav ~ a:last-of-type > span:last-child:not(.sc-interp) { display: none !important; } } /* Poniżej 360 px znak firmowy, przycisk akcji i hamburger nie mieszczą się w jednym wierszu. Wypada przycisk: to samo wezwanie stoi w szufladzie i tuż pod nagłówkiem, w sekcji powitalnej. */ @media (max-width: 359px) { .t-js header[style*="position: sticky"] > nav ~ a:last-of-type { display: none !important; } .t-burger { margin-left: auto; } } /* Eksport gubi stany najechania: elementy dostają klasy `scp0`, `scp1`… bez żadnych reguł. Odtwarzamy je strukturalnie, żeby pasek zachowywał się tak samo na stronach z kanwy i na stronach składanych Twigiem. */ header[style*="position: sticky"] > nav a:hover, .t-nav-link:hover { background: #F5F7FC; color: #1E293B; } header[style*="position: sticky"] > nav ~ a[style*="rgb(99, 102, 241)"]:hover, .t-cta:hover { background: #4F46E5; color: #fff; } .t-foot-link:hover { color: #1E293B; } .t-doc-link:hover { background: #F5F7FC; } .t-toc-link:hover { background: #EDF1F9; color: #1E293B; } /* ------------------------------------------------------------ szuflada menu */ .t-drawer { position: fixed; inset: 0; z-index: 90; } .t-drawer[hidden] { display: none; } .t-drawer__scrim { position: absolute; inset: 0; background: rgba(15, 23, 42, 0.44); opacity: 0; transition: opacity 180ms cubic-bezier(0.33, 0, 0.67, 1); } .t-drawer__panel { position: absolute; top: 0; right: 0; display: flex; flex-direction: column; gap: 4px; width: min(320px, 86vw); height: 100%; padding: 14px 16px calc(20px + env(safe-area-inset-bottom)); background: var(--t-panel); box-shadow: -18px 0 44px rgba(15, 23, 42, 0.16); overflow-y: auto; overscroll-behavior: contain; transform: translateX(100%); transition: transform 220ms cubic-bezier(0.33, 0, 0.67, 1); } .t-drawer.is-open .t-drawer__scrim { opacity: 1; } .t-drawer.is-open .t-drawer__panel { transform: translateX(0); } .t-drawer__head { display: flex; align-items: center; justify-content: space-between; gap: 12px; height: 44px; margin-bottom: 6px; } .t-drawer__head img { height: 22px; width: auto; object-fit: contain; } .t-drawer__close { display: flex; align-items: center; justify-content: center; width: 36px; height: 36px; padding: 0; border: 1px solid var(--t-line); border-radius: 12px; background: #fff; color: var(--t-muted); cursor: pointer; } .t-drawer__close:hover { background: #F6F8FC; color: var(--t-ink); } .t-drawer__link { display: flex; align-items: center; min-height: 46px; padding: 0 14px; border-radius: 14px; color: var(--t-muted); font-family: Poppins, Inter, system-ui, sans-serif; font-size: 15px; font-weight: 500; text-decoration: none; } .t-drawer__link:hover { background: #F6F8FC; color: var(--t-ink); } .t-drawer__link[aria-current="page"] { background: var(--t-accent-soft); color: var(--t-accent-ink); font-weight: 600; } .t-drawer__actions { display: flex; flex-direction: column; gap: 8px; margin-top: 14px; padding-top: 14px; border-top: 1px solid var(--t-line); } .t-drawer__action { display: flex; align-items: center; justify-content: center; min-height: 46px; padding: 0 16px; border: 1px solid var(--t-line); border-radius: 9999px; background: #fff; color: var(--t-ink); font-family: Poppins, Inter, system-ui, sans-serif; font-size: 15px; font-weight: 600; text-decoration: none; } .t-drawer__action--primary { border-color: var(--t-accent); background: var(--t-accent); color: #fff; } .t-drawer__action--primary:hover { background: #4F46E5; color: #fff; } @media (prefers-reduced-motion: reduce) { .t-drawer__scrim, .t-drawer__panel, .t-burger__bars, .t-burger__bars::before, .t-burger__bars::after { transition: none; } } /* --------------------------------------------------------- układ i typografia */ @media (max-width: 900px) { /* Kolumny hero deklarują `min-width`, przez które przestają się kurczyć i wychodzą poza ekran. */ [style*="min-width: 320px"], [style*="min-width: 300px"], [style*="min-width: 280px"] { min-width: 0 !important; } } @media (max-width: 720px) { /* Siatka bento: cztery ścieżki dawały na telefonie dwie kolumny po ~170 px, w których łamały się pojedyncze wyrazy. Dwie ścieżki + kafle na pełną szerokość dają jeden kafel w wierszu. */ [style*="grid-template-columns: repeat(4"] { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; } [style*="grid-area: span 2 / span 2"] { grid-area: auto / auto / auto / span 2 !important; } h1[style] { font-size: clamp(28px, 8vw, 40px) !important; line-height: 1.12 !important; } h2[style] { font-size: clamp(22px, 5.6vw, 28px) !important; line-height: 1.22 !important; } h3[style] { font-size: clamp(16px, 4.4vw, 19px) !important; line-height: 1.3 !important; } /* Cena w cenniku jest ustawiona na 34 px i rozpycha wiersz z nazwą planu. */ span[style*="font-size: 34px"] { font-size: 28px !important; line-height: 34px !important; } } @media (max-width: 560px) { section[style], footer[style] { padding-left: 16px !important; padding-right: 16px !important; } /* Kolumny z dolną granicą 320 px nie mieszczą się na najwęższych ekranach razem z wyściółką. */ [style*="minmax(320px"] { grid-template-columns: minmax(0, 1fr) !important; } /* Kafle bez rozpiętości stały nadal po dwa w wierszu, po ~170 px — na tej szerokości ich opisy łamały się w słupek. Siatkę zewnętrzną (odstęp 12 px) rozkładamy na jedną kolumnę; wewnętrzna siatka statusów (odstęp 8 px) zostaje przy dwóch, bo tam mieszczą się krótkie etykiety. */ [style*="grid-template-columns: repeat(4"][style*="gap: 12px"] { grid-template-columns: minmax(0, 1fr) !important; } [style*="grid-area: span 2 / span 2"], [style*="grid-column: span 2"] { grid-area: auto !important; } /* Karty mają 20–22 px wyściółki, co przy 360 px ekranu zabiera jedną trzecią szerokości. */ [style*="border-radius: 24px"][style*="padding: 22px"], [style*="border-radius: 24px"][style*="padding: 20px"], [style*="border-radius: 22px"][style*="padding: 20px"] { padding: 16px !important; } } /* ------------------------------------------------------- dokumenty prawne */ /* Na szerokim ekranie spis treści jest zwykłą listą w bocznej kolumnie: nagłówek zostaje jako podpis, ale nie da się nim nic zwinąć — `details` służy tu wyłącznie zwijaniu na telefonie. */ .t-toc__summary { display: block; font-family: 'JetBrains Mono', monospace; font-size: 10.5px; letter-spacing: 0.1em; text-transform: uppercase; color: #9BA6BB; list-style: none; pointer-events: none; } .t-toc__summary::-webkit-details-marker { display: none; } .t-toc > nav { margin-top: 14px; } @media (max-width: 900px) { /* Spis przyklejony z boku nie ma na telefonie własnej kolumny — ląduje nad dokumentem jako zwykły blok. Przyklejony zająłby wtedy pół ekranu. */ aside[style*="position: sticky"][style*="250px"] { position: static !important; flex: 1 1 100% !important; width: 100%; } .t-toc { padding: 12px 14px; border: 1px solid #E4E9F4; border-radius: 4px; background: #fff; } .t-toc__summary { display: flex; align-items: center; justify-content: space-between; gap: 10px; min-height: 22px; cursor: pointer; /* Na telefonie nagłówek znów jest przełącznikiem. */ pointer-events: auto; } .t-toc__summary::after { content: ""; width: 8px; height: 8px; border-right: 1.5px solid #9BA6BB; border-bottom: 1.5px solid #9BA6BB; transform: translateY(-2px) rotate(45deg); transition: transform 140ms cubic-bezier(0.33, 0, 0.67, 1); } .t-toc[open] .t-toc__summary::after { transform: translateY(2px) rotate(-135deg); } } @media (max-width: 560px) { /* Kolumna dokumentu ma 40 px marginesu z każdej strony i wąską treść — na telefonie to za dużo. */ div[style*="max-width: 1120px"][style*="padding: 40px 20px 64px"] { gap: 20px !important; padding: 24px 16px 48px !important; } } /* ---------------------------------------------------- formularz kontaktowy */ .t-visually-hidden { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip-path: inset(50%); white-space: nowrap; } /* Pole-pułapka na automaty. Nie `display: none` — część botów pomija ukryte pola, a czytnik ekranu i tak omija ten fragment przez `aria-hidden`. */ .t-trap { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; } .t-chip-wrap { display: inline-flex; cursor: pointer; } .t-chip { display: inline-flex; align-items: center; height: 32px; padding: 0 13px; border: 1px solid #D1D6E4; border-radius: 4px; background: #fff; color: #5A6B85; font-family: 'JetBrains Mono', monospace; font-size: 11.5px; white-space: nowrap; transition: background 140ms cubic-bezier(0.33, 0, 0.67, 1), border-color 140ms ease; } .t-chip-wrap:hover .t-chip { background: #F5F7FC; } .t-chip-wrap input:checked + .t-chip { border-color: #D9DBFA; background: #EEF0FF; color: #4F46E5; } /* Ostrość klawiatury musi być widoczna, choć samo pole wyboru jest schowane. */ .t-chip-wrap input:focus-visible + .t-chip, .t-check-wrap input:focus-visible + .t-check { outline: 2px solid #6366F1; outline-offset: 2px; } .t-check-wrap { display: flex; align-items: center; gap: 10px; cursor: pointer; } .t-check { display: flex; flex: 0 0 18px; align-items: center; justify-content: center; width: 18px; height: 18px; border: 1px solid #C2CBDD; border-radius: 3px; background: #fff; transition: background 140ms cubic-bezier(0.33, 0, 0.67, 1), border-color 140ms ease; } .t-check svg { opacity: 0; } .t-check-wrap input:checked + .t-check { border-color: #6366F1; background: #6366F1; } .t-check-wrap input:checked + .t-check svg { opacity: 1; } /* Komunikat pojawia się dopiero, gdy ma co powiedzieć — pusty nie zabiera miejsca w układzie. */ .t-error { display: none; font-family: 'JetBrains Mono', monospace; font-size: 10.5px; line-height: 16px; color: #E11D6F; } .t-error:not(:empty) { display: block; } .t-contact [aria-invalid="true"] { border-color: #E11D6F !important; } .t-contact [data-submit][disabled] { background: #A5A9F6; cursor: progress; } .t-channel:hover span:nth-child(2) { color: #fff; } /* Bloki kodu mają własny pasek przewijania — strona nie przewija się na boki. */ pre[style] { max-width: 100%; overflow-x: auto !important; -webkit-overflow-scrolling: touch; }