/* AIvatary — arkusz strony produktowej. * * Jeden plik, zero zależności zewnętrznych: żadnego CDN-a, żadnych zapytań * do trzeciej strony. To nie jest oszczędność bajtów, tylko decyzja prawna * i wydajnościowa — strona bez zapytań do trzeciej strony nie potrzebuje * banera zgód, bo nie ma czego zgłaszać, i renderuje się w jednym * round-tripie. * * Kroje pisma są self-hostowane z własnej domeny (katalog /assets/fonts/, * licencja OFL-1.1 — patrz LICENSE.txt tamże), więc zasada „zero trzecich * stron" nadal obowiązuje. Baloo 2 prowadzi nagłówki — zaokrąglony * geometryczny grotesk najbliższy wzorcowi z viktor.com (UlmGrotesk to krój * komercyjny; Poppins był za ostry w zakończeniach, Gabarito za pękate); * font zmienny, jeden plik kryje wagi 600-700. Figtree odpowiada za tekst. */ @font-face { font-family: "Baloo 2"; font-style: normal; font-weight: 600 700; font-display: swap; src: url("/assets/fonts/baloo2-latin.woff2") format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; } @font-face { font-family: "Baloo 2"; font-style: normal; font-weight: 600 700; font-display: swap; src: url("/assets/fonts/baloo2-latin-ext.woff2") format("woff2"); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; } @font-face { font-family: "Figtree"; font-style: normal; font-weight: 300 900; font-display: swap; src: url("/assets/fonts/figtree-latin.woff2") format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; } @font-face { font-family: "Figtree"; font-style: normal; font-weight: 300 900; font-display: swap; src: url("/assets/fonts/figtree-latin-ext.woff2") format("woff2"); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; } @font-face { font-family: "Figtree"; font-style: italic; font-weight: 300 900; font-display: swap; src: url("/assets/fonts/figtree-italic-latin.woff2") format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; } @font-face { font-family: "Figtree"; font-style: italic; font-weight: 300 900; font-display: swap; src: url("/assets/fonts/figtree-italic-latin-ext.woff2") format("woff2"); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; } /* Motyw domyślny: ciemny. Jasny włącza się atrybutem data-theme="light" na * — ustawia go przełącznik w nawigacji, a wybór trzyma localStorage. * Celowo nie czytamy prefers-color-scheme: domyślną tożsamością strony jest * ciemna, systemowa preferencja jej nie nadpisuje. * * Paleta: ciepły granat zamiast chłodnej czerni, kremowa biel zamiast * niebieskawej — w jasnym motywie krem #faf5f1 z atramentowym granatem. * Akcent pozostaje markowy (morski + fiolet), pastele brzoskwini i lawendy * grają w poświatach i wyróżnieniach. */ :root { color-scheme: dark; --bg: #14121d; --bg-elev: #1a1826; --surface: #201d2e; --surface-2: #2a2639; --line: #363051; --line-soft: #2b2740; --text: #f4f1ec; --text-dim: #c9c4d4; --muted: #94909f; --accent: #5eead4; --accent-deep: #2dd4bf; --violet: #b4a3ff; --link: #5eead4; --ok: #4ade80; --wip: #fbbf24; --plan: #94909f; --radius-lg: 28px; --radius: 18px; --radius-sm: 12px; --pill: 999px; --container: 1120px; /* Tekst na tle akcentu (plakietki, skip-link). */ --accent-ink: #062822; /* Główne CTA jest monochromatyczne: w ciemnym motywie kremowa pigułka * z granatowym tekstem, w jasnym — odwrotnie. */ --btn-bg: #f4f1ec; --btn-ink: #1a182b; --btn-hover: #ffffff; --contrast-bg: #f4f1ec; --contrast-ink: #1a182b; --contrast-hover: #ffffff; /* Pas CTA odwraca motyw: w ciemnym — kremowa karta, w jasnym — granatowa. */ --inverse-bg: #f6f2ec; --inverse-text: #1a182b; --inverse-dim: #55515f; --inverse-line: rgba(26, 24, 43, 0.22); --inverse-hover: rgba(26, 24, 43, 0.06); --note-bg: rgba(255, 189, 158, 0.09); --shadow-card: none; --header-bg: rgba(20, 18, 29, 0.82); --glow: radial-gradient(58% 58% at 20% 0%, rgba(255, 189, 158, 0.10), transparent 70%), radial-gradient(52% 52% at 78% 6%, rgba(148, 127, 255, 0.13), transparent 70%), radial-gradient(40% 40% at 50% 12%, rgba(94, 234, 212, 0.06), transparent 70%); --font: "Figtree", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif; --font-display: "Baloo 2", "Figtree", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif; --mono: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, "Liberation Mono", monospace; } :root[data-theme="light"] { color-scheme: light; --bg: #faf5f1; --bg-elev: #ffffff; --surface: #ffffff; --surface-2: #f1eae2; --line: #e5dcd2; --line-soft: #ede5db; --text: #1a182b; --text-dim: #4a4759; --muted: #666472; --accent: #0d9488; --accent-deep: #0f766e; --violet: #6748e7; --link: #0f766e; --ok: #0a6b4d; --wip: #96450a; --plan: #666472; --accent-ink: #ffffff; --btn-bg: #1a182b; --btn-ink: #ffffff; --btn-hover: #2c2947; --contrast-bg: #1a182b; --contrast-ink: #ffffff; --contrast-hover: #2c2947; --inverse-bg: #1a182b; --inverse-text: #faf5f1; --inverse-dim: #b6b2c6; --inverse-line: rgba(250, 245, 241, 0.28); --inverse-hover: rgba(250, 245, 241, 0.08); --note-bg: rgba(255, 189, 158, 0.20); --shadow-card: 0 1px 2px rgba(26, 24, 43, 0.04), 0 16px 40px -24px rgba(26, 24, 43, 0.16); --header-bg: rgba(250, 245, 241, 0.85); --glow: radial-gradient(58% 58% at 20% 0%, rgba(255, 189, 158, 0.28), transparent 70%), radial-gradient(52% 52% at 78% 6%, rgba(148, 127, 255, 0.16), transparent 70%), radial-gradient(40% 40% at 50% 12%, rgba(94, 234, 212, 0.10), transparent 70%); } *, *::before, *::after { box-sizing: border-box; } html { scroll-behavior: smooth; } @media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } * { animation-duration: 0.01ms !important; transition-duration: 0.01ms !important; } } body { margin: 0; background: var(--bg); color: var(--text); font-family: var(--font); font-size: 17px; line-height: 1.65; -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; } /* Poświata pod nagłówkiem strony. `fixed`, żeby nie przewijała się razem * z treścią i nie tworzyła szwu na granicy sekcji. */ body::before { content: ""; position: fixed; inset: -20vh 0 auto 0; height: 70vh; background: var(--glow); pointer-events: none; z-index: 0; } ::selection { background: rgba(148, 127, 255, 0.35); } img, svg { max-width: 100%; height: auto; } a { color: var(--link); text-decoration: none; } a:hover { text-decoration: underline; text-underline-offset: 3px; } :focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; border-radius: 4px; } /* Nagłówki prowadzi Gabarito: ciężki, geometryczny, z mocno zwężonym * światłem — im większy stopień, tym ciaśniejszy tracking. */ h1, h2, h3, h4 { font-family: var(--font-display); line-height: 1.12; letter-spacing: -0.025em; margin: 0 0 0.5em; text-wrap: balance; } h1 { font-size: clamp(2.5rem, 1.5rem + 4.5vw, 4.3rem); font-weight: 700; line-height: 1.08; letter-spacing: -0.03em; } h2 { font-size: clamp(1.7rem, 1.25rem + 2vw, 2.6rem); font-weight: 700; letter-spacing: -0.03em; } h3 { font-size: 1.3rem; font-weight: 600; letter-spacing: -0.015em; line-height: 1.25; } p { margin: 0 0 1.1em; } p:last-child { margin-bottom: 0; } code, kbd { font-family: var(--mono); font-size: 0.87em; background: var(--surface-2); border: 1px solid var(--line-soft); border-radius: 6px; padding: 0.12em 0.4em; color: var(--text-dim); } .skip { position: absolute; left: -9999px; top: 0; background: var(--accent-deep); color: var(--accent-ink); padding: 0.7rem 1.1rem; font-weight: 600; z-index: 99; } .skip:focus { left: 0; } /* Nagłówek dla czytnika ekranu, niewidoczny dla wzroku. Klasa była używana na czterech stronach demo, ale nigdy nie została zdefiniowana, więc te nagłówki po prostu się wyświetlały. Nie `display: none` ani `visibility: hidden`: jedno i drugie usunęłoby je także z drzewa dostępności, czyli zabrało dokładnie tym, dla których są. */ .sr-only { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; border: 0; } .container { width: 100%; max-width: var(--container); margin-inline: auto; padding-inline: 22px; position: relative; z-index: 1; } /* ---------------------------------------------------------------- nagłówek */ .site-header { position: sticky; top: 0; z-index: 20; background: var(--header-bg); backdrop-filter: saturate(150%) blur(12px); border-bottom: 1px solid var(--line-soft); } .nav { display: flex; flex-wrap: wrap; align-items: center; gap: 18px; min-height: 70px; } .brand { display: inline-flex; align-items: center; gap: 10px; color: var(--text); font-family: var(--font-display); font-weight: 700; font-size: 1.13rem; letter-spacing: -0.02em; margin-right: auto; } .brand:hover { text-decoration: none; } .brand svg { width: 30px; height: 30px; flex: none; } /* Odstępy i wyściółka są ciasne celowo. W nawigacji stoi sześć pozycji menu * i trzy wejścia do produktu (demo, rejestracja, logowanie), a wszystko to ma * się zmieścić w JEDNYM rzędzie obok znaku, przełącznika języka i motywu. * Zawinięcie do drugiej linii jest gorsze niż kilka pikseli mniej dookoła * etykiet: rozbija nagłówek na dwa piętra i spycha znak firmowy nad menu. */ .nav-links { display: flex; align-items: center; gap: 2px; } .nav-links a { color: var(--text-dim); padding: 8px 10px; border-radius: var(--pill); font-size: 0.94rem; font-weight: 500; white-space: nowrap; } .nav-links a:hover { color: var(--text); background: var(--surface-2); text-decoration: none; } .nav-links a[aria-current="page"] { color: var(--text); background: var(--surface-2); } /* Przełącznik języka. * * Rozwijany, a nie kilka odnośników obok siebie: przy dwóch językach rząd * kodów mieścił się w nawigacji, przy pięciu zająłby tyle miejsca, co cała * pozycja menu, i zepchnąłby je do drugiej linii. * *
zamiast rozwijania na skrypcie, bo obsługę z klawiatury, * zamykanie klawiszem Escape i działanie przy wyłączonym JavaScripcie * przeglądarka ma już gotowe. */ .lang { position: relative; font-size: 0.82rem; font-weight: 600; } .lang > summary { display: inline-flex; align-items: center; justify-content: center; height: 36px; padding: 0 12px; background: var(--surface); border: 1px solid var(--line); border-radius: var(--pill); color: var(--text-dim); cursor: pointer; user-select: none; /* Domyślny trójkącik listy. `list-style` zdejmuje go w Firefoksie, * a pseudoelement w przeglądarkach na WebKicie: potrzebne są oba. */ list-style: none; } .lang > summary::-webkit-details-marker { display: none; } .lang > summary:hover { color: var(--text); border-color: var(--accent-deep); } .lang[open] > summary { color: var(--text); border-color: var(--accent-deep); } .lang-menu { position: absolute; top: calc(100% + 6px); left: 0; /* Ponad panelami mega-menu (z-index 30), bo przełącznik stoi przed nimi * w drzewie i bez tego chowałby się pod rozwiniętą pozycją nawigacji. */ z-index: 40; display: flex; flex-direction: column; min-width: 150px; padding: 6px; background: var(--bg-elev); border: 1px solid var(--line); border-radius: var(--radius); box-shadow: 0 24px 60px -30px rgba(0, 0, 0, 0.55); } .lang-menu a { padding: 7px 10px; border-radius: 8px; color: var(--muted); } .lang-menu a:hover { background: var(--surface-2); color: var(--text); text-decoration: none; } .lang-menu a[aria-current="true"] { background: var(--surface-2); color: var(--text); } .theme-toggle { display: inline-flex; align-items: center; justify-content: center; width: 36px; height: 36px; padding: 0; background: var(--surface); border: 1px solid var(--line); color: var(--text-dim); border-radius: var(--pill); cursor: pointer; } .theme-toggle:hover { color: var(--text); border-color: var(--accent-deep); } /* W ciemnym motywie przycisk pokazuje słońce („przełącz na jasny"), * w jasnym — księżyc. Ikona opisuje cel, nie stan. */ .theme-toggle .ico-moon { display: none; } :root[data-theme="light"] .theme-toggle .ico-sun { display: none; } :root[data-theme="light"] .theme-toggle .ico-moon { display: block; } .nav-toggle { display: none; background: var(--surface); border: 1px solid var(--line); color: var(--text); border-radius: var(--pill); padding: 8px 15px; font: inherit; font-size: 0.9rem; cursor: pointer; } /* Próg zwinięcia menu pod przycisk. Podniesiony z 860px, odkąd w nawigacji * stoi trzecie wejście do produktu („Załóż konto" obok demo i logowania). * * Wartość jest zmierzona, nie zgadnięta: przy tej wyściółce rząd potrzebuje * razem z odstępami `.nav` około 1028px po polsku i 999px po angielsku, a * kontener oddaje szerokość okna bez 44px marginesów. Poniżej tego flex * przenosi menu do drugiej linii i spycha znak firmowy nad nie, a dwa piętra * nagłówka zjadają pierwszy ekran. Próg stoi wyżej od pomiaru o kilkadziesiąt * pikseli, żeby zaokrąglenia szerokości fontu nie decydowały o układzie. * * Pomiar zrobiony PO przeniesieniu „Zasobów" do stopki; przywrócenie tej * pozycji do menu wymaga policzenia progu od nowa. */ @media (max-width: 1060px) { /* Ciaśniejszy gap i węższy przycisk Menu: przy 360-386px pierwszy wiersz * nawigacji musi zmieścić logo, przełącznik języka, motyw i Menu. */ .nav { gap: 8px; } .nav-toggle { display: block; order: 3; padding: 8px 13px; } .nav-links { display: none; order: 4; flex-basis: 100%; flex-direction: column; align-items: stretch; gap: 2px; padding: 6px 0 14px; } .nav[data-open="true"] .nav-links { display: flex; } /* :not(.btn) — przyciski w rozwiniętym menu mają zostać pigułkami. */ .nav-links a:not(.btn) { padding: 11px 16px; border-radius: var(--radius-sm); } /* a.btn — musi przebić późniejszy w pliku `.nav-links .btn` (9px 18px). */ .nav-links a.btn { text-align: center; margin-top: 6px; padding: 12px 18px; } } /* ---------------------------------------------------------------- przyciski */ /* Pigułki jak z okładki: pełne zaokrąglenie, monochromatyczne CTA. * W jasnym motywie „primary" to granatowa pigułka z białym tekstem, * w ciemnym — kremowa z granatowym. */ .btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; padding: 13px 24px; border-radius: var(--pill); font-weight: 600; font-size: 0.97rem; letter-spacing: -0.01em; border: 1px solid transparent; cursor: pointer; transition: transform 0.12s ease, background-color 0.15s ease, border-color 0.15s ease, opacity 0.15s ease; } .btn:hover { text-decoration: none; transform: translateY(-1px); } .btn:active { transform: translateY(0); } .btn-primary { background: var(--btn-bg); color: var(--btn-ink); } .btn-primary:hover { background: var(--btn-hover); } .btn-ghost { background: var(--bg-elev); color: var(--text); border-color: var(--line); } .btn-ghost:hover { background: var(--surface-2); border-color: var(--accent-deep); } /* Para z nagłówka: kontrastowy monochrom („Umów demo") i przycisk stonowany * („Zaloguj się"). */ .btn-contrast { background: var(--contrast-bg); color: var(--contrast-ink); } .btn-contrast:hover { background: var(--contrast-hover); } .btn-soft { background: var(--surface-2); color: var(--text); border-color: transparent; } .btn-soft:hover { border-color: var(--accent-deep); } .nav-links .btn { padding: 8px 13px; font-size: 0.9rem; } /* `.nav-links a` ustawia kolor i tło na hover dla zwykłych linków menu — * przyciski w nawigacji muszą te reguły przebić, stąd mocniejsze selektory. */ .nav-links a.btn-contrast { color: var(--contrast-ink); } .nav-links a.btn-contrast:hover { background: var(--contrast-hover); color: var(--contrast-ink); } /* To samo dla przycisku głównego, odkąd „Załóż konto" stoi w nawigacji obok * „Umów demo". Bez tej pary reguł `.nav-links a` (0,1,1) przebija * `.btn-primary` (0,1,0) i maluje etykietę kolorem przygaszonego linku menu: * na ciemnym wypełnieniu przycisku wychodzi z tego szary napis na granacie. */ .nav-links a.btn-primary { color: var(--btn-ink); } .nav-links a.btn-primary:hover { background: var(--btn-hover); color: var(--btn-ink); } .nav-links a.btn-soft { color: var(--text); } .nav-links a.btn-soft:hover { background: var(--surface-2); color: var(--text); } /* ------------------------------------------------------------------ sekcje */ section { padding: clamp(56px, 7vw, 96px) 0; } section + section { border-top: 1px solid var(--line-soft); } /* Chip zamiast klasycznego eyebrow: pastelowa pigułka z akcentem. */ .eyebrow { display: inline-block; font-size: 0.84rem; font-weight: 600; letter-spacing: 0; text-transform: none; color: var(--accent-deep); background: color-mix(in srgb, var(--accent) 12%, transparent); border-radius: var(--pill); padding: 7px 15px; margin-bottom: 18px; } .lead { font-size: clamp(1.05rem, 0.98rem + 0.4vw, 1.25rem); color: var(--text-dim); max-width: 60ch; } .section-head { max-width: 62ch; margin-bottom: clamp(30px, 4vw, 46px); } .section-head p { color: var(--text-dim); } /* --------------------------------------------------------------------- hero */ /* Hero wyśrodkowany, jak na okładkach nowej fali landingów: wielki nagłówek * z ciasnym światłem, pod nim para pigułek. */ .hero { padding-top: clamp(60px, 9vw, 116px); text-align: center; } .hero h1 { max-width: 17ch; margin-inline: auto; } .hero .lead { margin-top: 22px; margin-inline: auto; } .hero-actions { display: flex; flex-wrap: wrap; justify-content: center; gap: 12px; margin-top: 36px; } .hero-note { margin-top: 22px; font-size: 0.9rem; color: var(--muted); } /* Wariant hero z Adą: dwie kolumny, tekst po lewej, portret asystentki po * prawej. Na stronach głównych scenę awatara adoptuje widget czatu * (kontener z data-caip-avatar): wstawia do niej własny wrapper z zamkniętym * shadow rootem, w którym mieszka ramka renderera Live2D i pasek rozmowy * (app.aivatary.com, czyli nasza własna infrastruktura — zasada „zero * trzecich stron" zostaje w mocy). Strona nie zna wnętrza tego wrappera, * więc trzyma tu wyłącznie miejsce, wyśrodkowanie i poświatę. Na wąskich * ekranach kolumny sklejają się w pion, a portret zapasowy ląduje pod * tekstem. */ .hero-split { text-align: left; } .hero-split h1 { margin-inline: 0; } .hero-split .lead { margin-inline: 0; } .hero-split .hero-actions { justify-content: flex-start; } .hero-cols { display: grid; grid-template-columns: minmax(0, 1fr) clamp(300px, 34vw, 440px); gap: clamp(28px, 5vw, 64px); /* Górna krawędź okna awatara równa się z górą NAGŁÓWKA, nie z górą całej * kolumny (nad nagłówkiem stoi jeszcze etykieta) i nie ze środkiem tekstu * (przy dłuższym nagłówku okno zjeżdżało za nisko). Odsunięcie odpowiada * wysokości etykiety wraz z jej odstępem. */ align-items: start; } .hero-ada { position: relative; display: flex; flex-direction: column; justify-content: flex-start; align-items: center; gap: 18px; /* Kolumna awatara jest niemal równa wysokości nagłówka, więc jedno * odsunięcie załatwia oba wyrównania naraz: dolna krawędź przycisków * siada na ostatnim wierszu nagłówka, a górna krawędź okna wypada tuż * pod jego pierwszym. Poniżej progu kolumny układają się jedna pod * drugą i odsunięcie znika. */ margin-top: 40px; } /* Zaproszenia do rozmowy stoją POD oknem awatara: to on jest tu rozmówcą, więc * należą do niego, a nie do listy odnośników przy tekście. */ .hero-ada-actions { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 10px; width: min(100%, 620px); } /* Gdy widget przejmie scenę, dokłada własny pasek z przyciskiem rozmowy i notą * o AI. Nasze zaproszenie byłoby wtedy drugim, identycznym przyciskiem tuż pod * tamtym, więc ustępuje miejsca. Bez widgetu (brak sesji, wyłączony JavaScript) * zostaje jedynym wejściem w rozmowę i dlatego nie znika na stałe. */ .hero-ada-stage:has([data-caip-hero]) ~ .hero-ada-actions { display: none; } /* Ujawnienie AI przy samej postaci, w treści strony. * * Pasek widgetu niesie własną notę, ale stoi wyłącznie wtedy, gdy widget * trzyma scenę. Odkąd okno czatu pokazuje Adę u siebie (D-044), ramka przy * otwartym oknie należy do niego, a scena wraca do pętli zapasowej: postać * dalej stoi w treści strony i dalej wygląda jak człowiek, tylko bez paska, * czyli bez widocznego dopisku. Ten akapit jest jego odpowiednikiem po * stronie hosta. Znika tą samą drogą co zaproszenie wyżej, więc przy * przejętej scenie nie dubluje noty widgetu. */ .hero-ada-note { /* `auto` po bokach, bo scena stoi też poza kolumną hero: na stronie pokoju * demo akapit jest zwykłym blokiem w tekście, a bez wyśrodkowania bloku * jego wyśrodkowany tekst wyglądałby na przesunięty w lewo. Odstęp z góry * jest dla tamtego układu; w kolumnie hero odstępy rozdaje jej `gap`, * więc tam margines ustępuje (reguła niżej). */ margin: 12px auto 0; max-width: 52ch; text-align: center; font-size: 0.82rem; line-height: 1.45; color: var(--muted); } .hero-ada > .hero-ada-note { margin-top: 0; } .hero-ada-stage:has([data-caip-hero]) ~ .hero-ada-note { display: none; } /* Wewnętrzna scena awatara: to JEJ zawartość przejmuje widget. Do czasu * podmiany — i całkiem bez JS — mieszka tu portret zapasowy; widget chowa go * dopiero, gdy ramka faktycznie powstanie, i stawia w jego miejsce ramkę wraz * z własnym paskiem rozmowy (stąd kolumna). Przycisku „Porozmawiaj z Adą" * scena celowo NIE dubluje: po adopcji stoi pod ramką przycisk startu z paska * widgetu, a przed nią do rozmowy zaprasza CTA z kolumny tekstowej. */ .hero-ada-stage { position: relative; display: flex; flex-direction: column; align-items: center; justify-content: center; width: 100%; gap: 14px; } /* Cokolwiek stoi w scenie — portret zapasowy albo wrapper widgetu — mieści * się w kolumnie hero. ŚWIADOMIE bez sztywnej szerokości i wysokości: * wymiary ramki oraz paska rozmowy rysuje widget u siebie, a reguła ze * strony miałaby nad jego `:host` pierwszeństwo i rozjechałaby układ. */ .hero-ada-stage > * { max-width: 100%; } /* Portret zapasowy ma w HTML atrybuty width/height (960×540), żeby strona nie * skakała przy ładowaniu. Gdy kolumna jest węższa niż 960 px, `max-width` * zwęża element, ale atrybut `height` dalej trzyma 540 px i obraz maluje się * w za wysokim pudełku z przezroczystymi pasami nad i pod twarzą. W kolumnie * hero pasy są niewidoczne (nic obok nie stoi), w pokoju prezentacji obok jest * scena i widać, że Ada zaczyna się 150 px niżej niż slajd. */ .hero-ada-stage > video, .hero-ada-stage > img { height: auto; } @media (min-width: 900px) { /* Pudełko sceny w proporcji materiału: dokładnie tyle miejsca zajmuje * pętla i dokładnie tyle dostaje wrapper widgetu. Dzięki temu hero nie * skacze ani w chwili adopcji, ani przy zmianach paska rozmowy — rosnący * pasek odbiera wysokość ramce, nie stronie. Konkretna wysokość sceny jest * też jedynym źródłem, z którego ramka widgetu wyprowadza `height: 100%`. * * Kadr poziomy: postać siedzi przy biurku, więc szerokie ujęcie pokazuje * całą scenę i zabiera mniej wysokości niż dawny portret pionowy. */ .hero-ada-stage { aspect-ratio: 16 / 9; } } /* Poświata za postacią, w duchu --glow: brzoskwinia, lawenda i nuta * morskiego akcentu. Czysty radial-gradient, zero zapytań zewnętrznych. */ .hero-ada::before { content: ""; position: absolute; inset: 4% -8%; background: radial-gradient(52% 46% at 50% 40%, rgba(148, 127, 255, 0.16), transparent 70%), radial-gradient(44% 40% at 32% 26%, rgba(255, 189, 158, 0.14), transparent 70%), radial-gradient(46% 42% at 66% 58%, rgba(94, 234, 212, 0.12), transparent 70%); pointer-events: none; } .hero-ada picture { position: relative; display: block; } /* Portret jest zapętlonym wideo, żeby postać żyła od pierwszej chwili, a nie * dopiero po adopcji kontenera przez widget (ta wymaga otwartej sesji, więc * gość, który nie otworzy panelu, nie zobaczyłby ruchu wcale). Wymiary te same * co dawnego obrazka, bo scena rezerwuje miejsce w jego proporcji. */ .hero-ada img, .hero-ada video { display: block; /* Kadr poziomy jest szerszy niż dawny portret, więc dostaje więcej * szerokości; wysokość i tak wychodzi niższa. */ width: min(100%, 620px); height: auto; border-radius: 18px; } @media (max-width: 899px) { /* Poniżej progu hero jest jedną kolumną: portret zapasowy (albo wrapper * widgetu, jeśli ramka wstanie także na wąskim ekranie) ląduje pod * tekstem i dostaje mniejszą szerokość. */ .hero-split { text-align: center; } .hero-split h1 { margin-inline: auto; } .hero-split .lead { margin-inline: auto; } .hero-split .hero-actions { justify-content: center; } .hero-cols { grid-template-columns: minmax(0, 1fr); } .hero-ada { margin-top: 10px; } .hero-ada img, .hero-ada video { width: min(92vw, 460px); } } /* -------------------------------------------------------------------- karty */ .grid { display: grid; gap: 18px; grid-template-columns: repeat(auto-fit, minmax(min(280px, 100%), 1fr)); } .grid-2 { grid-template-columns: repeat(auto-fit, minmax(min(330px, 100%), 1fr)); } /* Druga siatka bezpośrednio pod pierwszą, bez nagłówka pośredniego. */ .grid-stack { margin-top: 18px; } .card { background: var(--surface); border: 1px solid var(--line-soft); border-radius: var(--radius-lg); padding: 30px 28px; box-shadow: var(--shadow-card); } .card h3 { margin-bottom: 10px; } .card p { color: var(--text-dim); font-size: 0.97rem; } /* Numer kroku: lawendowa pastylka z cyfrą w kroju nagłówkowym. */ .card-num { display: inline-flex; align-items: center; justify-content: center; width: 36px; height: 36px; border-radius: var(--pill); background: color-mix(in srgb, var(--violet) 14%, transparent); color: var(--violet); font-family: var(--font-display); font-size: 1rem; font-weight: 700; margin-bottom: 16px; } /* Wyróżnienie na fakt techniczny, do którego strona przyznaje się wprost — * brzoskwiniowa, pastelowa karta. */ .note { background: var(--note-bg); border-radius: var(--radius); padding: 18px 22px; color: var(--text-dim); font-size: 0.96rem; margin-top: 26px; } /* ------------------------------------------------------------------ tabela */ .table-wrap { overflow-x: auto; border-radius: var(--radius); border: 1px solid var(--line-soft); box-shadow: var(--shadow-card); } table { width: 100%; border-collapse: collapse; font-size: 0.96rem; min-width: 480px; background: var(--bg-elev); } th, td { text-align: left; padding: 13px 18px; border-bottom: 1px solid var(--line-soft); } thead th { background: var(--surface-2); font-size: 0.79rem; letter-spacing: 0.07em; text-transform: uppercase; color: var(--muted); font-weight: 700; } tbody tr:last-child td { border-bottom: 0; } td:first-child { font-weight: 560; } /* Statusy jako pastelowe pigułki z kropką. */ .status { display: inline-flex; align-items: center; gap: 7px; font-size: 0.85rem; font-weight: 600; white-space: nowrap; border-radius: var(--pill); padding: 3px 11px; } .status::before { content: ""; width: 7px; height: 7px; border-radius: 50%; flex: none; } .status-ok { color: var(--ok); background: color-mix(in srgb, var(--ok) 12%, transparent); } .status-ok::before { background: var(--ok); } .status-wip { color: var(--wip); background: color-mix(in srgb, var(--wip) 12%, transparent); } .status-wip::before { background: var(--wip); } .status-plan { color: var(--plan); background: color-mix(in srgb, var(--plan) 12%, transparent); } .status-plan::before { background: var(--plan); } /* ------------------------------------------------------------- scenariusz */ /* Jeden konkretny przebieg pracy, wyróżniony spośród kart z zastosowaniami: * zdanie o tym, co się wydarzyło, i pod nim metryka bez ozdobników. */ .scenario { background: var(--surface); border: 1px solid var(--line-soft); border-left: 3px solid var(--accent-deep); border-radius: var(--radius); padding: 26px 28px; margin-bottom: 18px; box-shadow: var(--shadow-card); } .scenario-lead { font-size: clamp(1.02rem, 0.96rem + 0.35vw, 1.18rem); color: var(--text); max-width: 62ch; } .scenario-meta { margin-top: 12px; font-size: 0.93rem; font-weight: 600; color: var(--accent-deep); } /* --------------------------------------------------- chipy i listy faktów */ /* Kategorie integracji jako rząd tekstowych pigułek. Bez logotypów: strona * nie ładuje niczego z zewnętrznych CDN, a znaki towarowe cudzych narzędzi * wymagałyby osobnej zgody. To nie są linki, więc nie mają stanu hover. */ .chip-row { display: flex; flex-wrap: wrap; gap: 10px; margin-bottom: 26px; } .chip { display: inline-block; background: var(--surface-2); border: 1px solid var(--line-soft); border-radius: var(--pill); padding: 7px 15px; font-size: 0.9rem; color: var(--text-dim); } /* Para list „co robi / czego nie robi”: ptaszek rysowany borderami jak * w cenniku, krzyżyk z dwóch obróconych kresek. */ .fact-list { list-style: none; margin: 0; padding: 0; } .fact-list li { position: relative; padding-left: 26px; margin-bottom: 11px; color: var(--text-dim); font-size: 0.97rem; } .fact-list li:last-child { margin-bottom: 0; } .fact-list-do li::before { content: ""; position: absolute; left: 4px; top: 0.62em; width: 9px; height: 5px; border-left: 2px solid var(--ok); border-bottom: 2px solid var(--ok); transform: rotate(-45deg); } .fact-list-dont li::before, .fact-list-dont li::after { content: ""; position: absolute; left: 3px; top: 0.72em; width: 11px; height: 2px; border-radius: 1px; background: var(--muted); } .fact-list-dont li::before { transform: rotate(45deg); } .fact-list-dont li::after { transform: rotate(-45deg); } /* ------------------------------------------------------------------ cennik */ .plans { align-items: stretch; } .plan { display: flex; flex-direction: column; } .plan-featured { border-color: var(--accent-deep); } .plan-tag { align-self: flex-start; font-size: 0.74rem; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: var(--accent-ink); background: var(--accent-deep); border-radius: var(--pill); padding: 4px 11px; margin-bottom: 14px; } .plan-price { font-family: var(--font-display); font-size: 1.9rem; font-weight: 700; letter-spacing: -0.025em; margin: 6px 0 4px; } .plan-price small { display: block; font-family: var(--font); font-size: 0.88rem; font-weight: 400; color: var(--muted); letter-spacing: 0; } .plan ul { list-style: none; margin: 20px 0 26px; padding: 0; } .plan li { position: relative; padding-left: 26px; margin-bottom: 10px; color: var(--text-dim); font-size: 0.95rem; } .plan li::before { content: ""; position: absolute; left: 4px; top: 0.62em; width: 9px; height: 5px; border-left: 2px solid var(--accent); border-bottom: 2px solid var(--accent); transform: rotate(-45deg); } .plan .btn { margin-top: auto; } /* --------------------------------------------------------------------- faq */ .faq details { border: 1px solid var(--line-soft); border-radius: var(--radius); background: var(--bg-elev); margin-bottom: 10px; overflow: hidden; box-shadow: var(--shadow-card); } .faq summary { cursor: pointer; padding: 17px 22px; font-weight: 600; list-style: none; display: flex; justify-content: space-between; gap: 16px; align-items: center; } .faq summary::-webkit-details-marker { display: none; } .faq summary::after { content: "+"; color: var(--accent); font-size: 1.3rem; line-height: 1; flex: none; } .faq details[open] summary::after { content: "\2212"; } .faq details[open] summary { border-bottom: 1px solid var(--line-soft); } .faq .faq-body { padding: 16px 22px 20px; color: var(--text-dim); font-size: 0.97rem; } /* --------------------------------------------------------------- cta końcowe */ /* Pas CTA odwraca motyw strony: na kremie — granatowa karta, w mroku — * kremowa. Delikatna brzoskwiniowo-fioletowa poświata w narożniku. */ .cta-band { position: relative; overflow: hidden; background: var(--inverse-bg); color: var(--inverse-text); border: none; border-radius: 32px; padding: clamp(34px, 5vw, 60px); text-align: center; } .cta-band::before { content: ""; position: absolute; inset: 0; background: radial-gradient(60% 80% at 14% 0%, rgba(255, 189, 158, 0.20), transparent 70%), radial-gradient(50% 70% at 88% 10%, rgba(148, 127, 255, 0.18), transparent 70%); pointer-events: none; } .cta-band > * { position: relative; } .cta-band h2 { max-width: 22ch; margin-inline: auto; color: inherit; } .cta-band p { color: var(--inverse-dim); max-width: 52ch; margin-inline: auto; } .cta-band .hero-actions { justify-content: center; } .cta-band .btn-primary { background: var(--inverse-text); color: var(--inverse-bg); } .cta-band .btn-primary:hover { background: var(--inverse-text); opacity: 0.9; } .cta-band .btn-ghost { background: transparent; color: var(--inverse-text); border-color: var(--inverse-line); } .cta-band .btn-ghost:hover { background: var(--inverse-hover); border-color: var(--inverse-text); } /* ------------------------------------------------------------------- stopka */ .site-footer { border-top: 1px solid var(--line-soft); padding: 46px 0 40px; color: var(--muted); font-size: 0.92rem; } .footer-grid { display: grid; gap: 28px; grid-template-columns: 1.4fr repeat(2, 1fr); margin-bottom: 32px; } @media (max-width: 700px) { .footer-grid { grid-template-columns: 1fr 1fr; } } .footer-grid h4 { font-family: var(--font); font-size: 0.78rem; letter-spacing: 0.09em; text-transform: uppercase; color: var(--text-dim); margin-bottom: 12px; } .footer-grid ul { list-style: none; margin: 0; padding: 0; } .footer-grid li { margin-bottom: 8px; } .footer-grid a { color: var(--muted); } .footer-grid a:hover { color: var(--text); } .footer-bottom { border-top: 1px solid var(--line-soft); padding-top: 22px; display: flex; flex-wrap: wrap; gap: 12px; justify-content: space-between; font-size: 0.87rem; } /* ------------------------------------------------------------------ proza */ .prose { max-width: 72ch; } .prose h2 { margin-top: 2.2em; } .prose h2:first-child { margin-top: 0; } .prose h3 { margin-top: 1.8em; } .prose ul { padding-left: 1.2em; color: var(--text-dim); } .prose li { margin-bottom: 0.5em; } .prose > p { color: var(--text-dim); } .dl { display: grid; gap: 0; margin: 0; } .dl > div { display: grid; grid-template-columns: minmax(140px, 220px) 1fr; gap: 20px; padding: 15px 0; border-bottom: 1px solid var(--line-soft); } @media (max-width: 620px) { .dl > div { grid-template-columns: 1fr; gap: 4px; } } .dl dt { font-weight: 600; } .dl dd { margin: 0; color: var(--text-dim); } /* --------------------------------------------------- rozwijane menu (mega) */ /* Panele otwierają się na :hover i :focus-within, więc działają bez JS * i z klawiatury. Skrypt dokłada tylko zachowanie na wąskich ekranach, * gdzie hover nie istnieje. */ .nav-item { position: relative; display: flex; align-items: center; } .nav-top { display: inline-flex; align-items: center; gap: 6px; } .nav-top::after { content: ""; width: 6px; height: 6px; border-right: 1.6px solid currentColor; border-bottom: 1.6px solid currentColor; transform: translateY(-2px) rotate(45deg); opacity: 0.6; } .nav-panel { position: absolute; top: 100%; left: 0; z-index: 30; display: flex; gap: 26px; min-width: 240px; margin-top: 6px; padding: 20px 22px; background: var(--bg-elev); border: 1px solid var(--line); border-radius: var(--radius); box-shadow: 0 24px 60px -30px rgba(0, 0, 0, 0.55); /* Ukrywamy przezroczystością, nie display:none ani visibility:hidden. * Element wyjęty z drzewa albo ukryty widocznością nie przyjmuje fokusu, * więc panel nigdy nie otworzyłby się z klawiatury i :focus-within byłby * martwym zapisem. Tak linki zostają w kolejności tabulacji, a tabulacja * do środka sama odsłania panel. */ opacity: 0; pointer-events: none; transform: translateY(-4px); transition: opacity 0.12s ease, transform 0.12s ease; } /* Panel produktu ma trzy kolumny: moduły, platforma, kanały. */ .nav-panel-wide { min-width: 660px; } /* Most nad szczeliną między przyciskiem a panelem. * * Panel odsuwa się od nagłówka o `margin-top`, więc między dolną krawędzią * `.nav-item` a górną krawędzią panelu zostaje kilka pikseli, w których kursor * trafia już w `.nav-links`, a nie w element menu. `:hover` gaśnie, panel * znika i nie da się dojechać do żadnej pozycji: menu jest nie do użycia * myszą, choć wygląda poprawnie. * * Most jest przezroczysty i leży wyłącznie nad tą szczeliną, więc niczego nie * zasłania ani nie przesuwa. Powiększenie samego panelu nie zadziała: odstęp * jest potrzebny wizualnie. */ .nav-panel::before { content: ""; position: absolute; left: 0; right: 0; top: -10px; height: 10px; } .nav-item:hover > .nav-panel, .nav-item:focus-within > .nav-panel { opacity: 1; pointer-events: auto; transform: none; } @media (prefers-reduced-motion: reduce) { .nav-panel { transition: none; transform: none; } } .nav-col { display: flex; flex-direction: column; gap: 2px; min-width: 200px; } .nav-col h4 { margin: 0 0 8px; padding-left: 14px; font-family: var(--font); font-size: 0.74rem; font-weight: 700; letter-spacing: 0.09em; text-transform: uppercase; color: var(--muted); } .nav-panel a { white-space: nowrap; } @media (max-width: 860px) { .nav-item { display: block; } .nav-top { width: 100%; justify-content: space-between; } .nav-panel { position: static; display: none; opacity: 1; pointer-events: auto; transform: none; flex-direction: column; gap: 14px; min-width: 0; margin: 2px 0 8px; padding: 14px 10px; box-shadow: none; } .nav-panel-wide { min-width: 0; } /* Panel jest tu w normalnym przepływie i otwiera go kliknięcie, więc most * nad szczeliną nie ma czego łączyć — przykrywałby tylko sąsiedni wiersz. */ .nav-panel::before { content: none; } /* Na wąskim ekranie hover nie ma sensu, decyduje kliknięcie w nagłówek. */ .nav-item:hover > .nav-panel, .nav-item:focus-within > .nav-panel { display: none; } .nav-item[data-open="true"] > .nav-panel { display: flex; } .nav-item[data-open="true"] .nav-top::after { transform: translateY(2px) rotate(-135deg); } .nav-panel a { white-space: normal; } } /* ------------------------------------------------------- szeroka stopka */ .footer-grid-wide { grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 30px 26px; } .footer-grid-wide > div:first-child { grid-column: 1 / -1; max-width: 46ch; } @media (min-width: 1000px) { .footer-grid-wide > div:first-child { grid-column: auto; max-width: none; } } /* ----------------------------------------------------------- blok Wkrótce */ /* Sekcja z rzeczami, które dopiero dochodzą. Osobne tło i nagłówek, żeby * układ strony sam odróżniał ją od listy możliwości. Strażnik * landing/tools/check-claims.mjs pilnuje, żeby nazwy zaplanowanych kanałów * występowały wyłącznie wewnątrz tego bloku. */ .soon { position: relative; padding: clamp(28px, 4vw, 40px); border: 1px dashed var(--line); border-radius: var(--radius-lg); background: var(--surface); } .soon > .section-head { margin-bottom: 26px; } .soon-tag { display: inline-flex; align-items: center; gap: 8px; margin-bottom: 12px; padding: 5px 13px; border-radius: var(--pill); background: color-mix(in srgb, var(--violet) 14%, transparent); color: var(--violet); font-size: 0.78rem; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; } .soon-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 14px; } .soon-card { padding: 18px 20px; border: 1px solid var(--line-soft); border-radius: var(--radius); background: var(--bg-elev); } .soon-card h3 { margin-bottom: 6px; font-size: 1.02rem; } .soon-card p { margin: 0 0 12px; color: var(--text-dim); font-size: 0.94rem; } .soon-card a { font-size: 0.9rem; font-weight: 600; } /* --------------------------------------------------------- kafle branż */ .sector-tiles { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 12px; margin: 0; padding: 0; list-style: none; } .sector-tiles li { display: flex; align-items: center; justify-content: center; gap: 10px; min-height: 74px; padding: 14px 16px; border: 1px solid var(--line-soft); border-radius: var(--radius); background: var(--surface); color: var(--text-dim); font-weight: 600; font-size: 0.95rem; text-align: center; } .sector-tiles svg { width: 20px; height: 20px; flex: none; color: var(--accent-deep); } /* ------------------------------------------------ kalkulator odciążenia */ .calc { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(20px, 3vw, 34px); padding: clamp(24px, 3.4vw, 36px); border: 1px solid var(--line); border-radius: var(--radius-lg); background: var(--surface); } @media (max-width: 780px) { .calc { grid-template-columns: 1fr; } } .calc-fields { display: grid; gap: 18px; align-content: start; } .calc-field label { display: block; margin-bottom: 6px; font-size: 0.92rem; font-weight: 600; } .calc-field input { width: 100%; padding: 11px 14px; border: 1px solid var(--line); border-radius: var(--radius-sm); background: var(--bg-elev); color: var(--text); font: inherit; font-size: 1rem; } .calc-field input:focus-visible { outline: 2px solid var(--accent-deep); outline-offset: 1px; } .calc-field small { display: block; margin-top: 5px; color: var(--muted); font-size: 0.84rem; } .calc-out { display: grid; gap: 14px; align-content: start; } .calc-figure { padding: 18px 20px; border-radius: var(--radius); background: var(--bg-elev); border: 1px solid var(--line-soft); } .calc-figure strong { display: block; font-family: var(--font-display); font-size: clamp(1.8rem, 3.4vw, 2.4rem); line-height: 1.1; letter-spacing: -0.02em; color: var(--text); } .calc-figure span { display: block; margin-top: 4px; color: var(--text-dim); font-size: 0.93rem; } .calc-note { margin: 0; color: var(--muted); font-size: 0.86rem; } /* -------------------------------------------------------------- słownik */ .glossary-tools { display: flex; flex-wrap: wrap; gap: 10px; margin-bottom: 26px; } .glossary-search { flex: 1 1 260px; padding: 11px 16px; border: 1px solid var(--line); border-radius: var(--pill); background: var(--surface); color: var(--text); font: inherit; } .glossary-search:focus-visible { outline: 2px solid var(--accent-deep); outline-offset: 1px; } .glossary-filters { display: flex; flex-wrap: wrap; gap: 6px; } .glossary-filters button { padding: 8px 15px; border: 1px solid var(--line); border-radius: var(--pill); background: transparent; color: var(--text-dim); font: inherit; font-size: 0.88rem; font-weight: 600; cursor: pointer; } .glossary-filters button:hover { border-color: var(--accent-deep); color: var(--text); } .glossary-filters button[aria-pressed="true"] { background: var(--surface-2); color: var(--text); border-color: var(--accent-deep); } .glossary-list { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 14px; } .glossary-term { padding: 20px 22px; border: 1px solid var(--line-soft); border-radius: var(--radius); background: var(--surface); scroll-margin-top: 96px; } .glossary-term h3 { margin-bottom: 8px; font-size: 1.05rem; } .glossary-term p { margin: 0; color: var(--text-dim); font-size: 0.95rem; } .glossary-cat { display: inline-block; margin-bottom: 10px; padding: 4px 11px; border-radius: var(--pill); background: var(--surface-2); color: var(--muted); font-size: 0.74rem; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; } .glossary-empty { color: var(--muted); } /* ------------------------------------------------- dokumenty prawne */ /* Długie dokumenty: polityka, regulamin, wykaz podprocesorów, DPA. * Numeracja paragrafów zostaje w treści, bo dokument bywa cytowany * i drukowany, a wtedy licznik CSS nie pojedzie razem z tekstem. */ .legal-doc { max-width: 78ch; } .legal-meta { display: flex; flex-wrap: wrap; gap: 8px 18px; margin-bottom: 30px; padding: 16px 20px; border: 1px solid var(--line-soft); border-radius: var(--radius); background: var(--surface); color: var(--text-dim); font-size: 0.9rem; } .legal-meta b { color: var(--text); font-weight: 600; } .legal-toc { margin-bottom: 40px; padding: 22px 26px; border: 1px solid var(--line-soft); border-radius: var(--radius); background: var(--surface); } .legal-toc h2 { margin: 0 0 14px; font-size: 1.05rem; } .legal-toc ol { margin: 0; padding-left: 1.3em; color: var(--text-dim); } .legal-toc li { margin-bottom: 6px; } .legal-doc h2 { margin-top: 2.4em; font-size: clamp(1.24rem, 2.1vw, 1.5rem); scroll-margin-top: 96px; } .legal-doc h3 { margin-top: 1.7em; font-size: 1.06rem; scroll-margin-top: 96px; } .legal-doc p, .legal-doc li { color: var(--text-dim); } .legal-doc ol, .legal-doc ul { padding-left: 1.3em; } .legal-doc li { margin-bottom: 0.55em; } .legal-doc table { font-size: 0.93rem; } .legal-draft { margin-bottom: 30px; padding: 16px 20px; border: 1px dashed var(--wip); border-radius: var(--radius); background: color-mix(in srgb, var(--wip) 8%, transparent); color: var(--text-dim); font-size: 0.92rem; } .legal-draft b { color: var(--text); } /* ---------------------------------------- przykładowa rozmowa na stronie */ .talk { display: grid; gap: 10px; padding: 22px; border: 1px solid var(--line-soft); border-radius: var(--radius); background: var(--surface); } .talk-line { display: flex; gap: 10px; align-items: flex-start; } .talk-who { flex: none; width: 74px; padding-top: 2px; color: var(--muted); font-size: 0.78rem; font-weight: 700; letter-spacing: 0.05em; text-transform: uppercase; } .talk-said { flex: 1; padding: 11px 15px; border-radius: var(--radius-sm); background: var(--bg-elev); color: var(--text-dim); font-size: 0.95rem; } .talk-agent .talk-said { border-left: 2px solid var(--accent-deep); } .talk-steps { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 6px; padding-top: 14px; border-top: 1px solid var(--line-soft); } .talk-step { padding: 5px 12px; border-radius: var(--pill); background: var(--surface-2); color: var(--text-dim); font-family: var(--mono); font-size: 0.79rem; } /* Panel nie może wypchnąć strony w poziomie. Ostatnia pozycja menu jest * przy prawej krawędzi, więc jej panel kotwiczymy do prawej. */ .nav-panel { max-width: min(560px, calc(100vw - 32px)); box-sizing: border-box; } .nav-panel-wide { max-width: min(760px, calc(100vw - 32px)); } .nav-item:last-of-type > .nav-panel { left: auto; right: 0; } @media (max-width: 860px) { .nav-panel, .nav-panel-wide { max-width: none; } .nav-item:last-of-type > .nav-panel { right: auto; } } /* Nagłówki kolumn w mega-menu i w stopce są linkami do stron przeglądowych. * Zachowują wygląd nagłówka, żeby nie udawały pozycji listy. */ .nav-col h4 a, .footer-grid h4 a { color: inherit; } .nav-col h4 a:hover, .footer-grid h4 a:hover { color: var(--text); } /* ── Pokój prezentacji ───────────────────────────────────────────────────── * * Slajdy pokazuje widget w NAKŁADCE nad stroną (D-073), więc pokój nie ma * własnej sceny w układzie. Panel z agentką dokuje przy prawej krawędzi na * całą wysokość, dlatego treść pokoju trzyma się lewej części ekranu: to, co * zostałoby pod panelem, i tak przykryje slajd, ale tytuł i instrukcje mają * być czytelne przed pierwszym slajdem. Lewy margines liczy się tak, jak * liczyłby go pełny kontener, więc tytuł stoi w tej samej linii co logo. */ @media (min-width: 900px) { .pokoj-strona .container { max-width: 720px; margin-inline: max(22px, calc((100vw - var(--container)) / 2)) auto; } } /* Przy zadokowanym panelu Ada stoi już w nim: drugi portret w treści strony * byłby drugą twarzą i pytaniem, do której mówić. Klasę stawia widget * (`nav.setStageInset`), a chowa strona, bo to jej portret. Klasa żyje tylko * z otwartym panelem, więc przed rozmową i po jej zamknięciu portret * z przyciskiem zostaje wejściem do rozmowy, tak samo na telefonie. */ html.caip-panel-docked .pokoj-strona .hero-ada-stage, html.caip-panel-docked .pokoj-strona .hero-ada-note { display: none; } /* Widok do udostępnienia ekranem: `?scena=1` zdejmuje nagłówek, stopkę * i wszystko, co na spotkaniu jest tylko szumem wokół treści. Ustawia go * skrypt strony pokoju, bo parametru adresu nie widać w CSS. */ [data-scena="1"] .site-header, [data-scena="1"] .site-footer, [data-scena="1"] .skip, [data-scena="1"] [data-scena-hide] { display: none; } [data-scena="1"] .section { padding-top: 18px; }