/* =========================================================================
PIONA Studio — glowny arkusz. Mobile-first, @layer, BEM. !important wyłącznie do bicia unlayered pluginów (FluentForms #fluentform_1, process-steps-v3).
Font: WYLACZNIE Archivo (decyzja Oskara+Wiktorii 2026-06-03).
Tokeny i mapa komponentow: migracja-theme/FAZA0c_CSS_MAP.md
========================================================================= */
@layer reset, tokens, base, layout, components, utilities;
/* ----------------------------------------------------------------- TOKENS */
@layer tokens {
:root {
/* KOLORY MARKI */
--c-lime: #B4F95A;
--c-ink: #0E0E0E;
--c-ink-deep: #050505;
--c-cream: #F5F5F3;
--c-muted: #8A8A8A;
--c-muted-2: #C8C8C8;
/* powierzchnie / szklo */
--c-card: rgba(22,22,22,.72);
--c-card-solid: #161616;
--c-border: rgba(255,255,255,.06);
--c-border-08: rgba(255,255,255,.08);
--c-border-hover:rgba(180,249,90,.40);
/* poswiaty lime (skala alfa realnie uzywana) */
--c-glow-06: rgba(180,249,90,.06);
--c-glow-08: rgba(180,249,90,.08);
--c-glow-10: rgba(180,249,90,.10);
--c-glow-20: rgba(180,249,90,.20);
--c-glow-30: rgba(180,249,90,.30);
--c-glow-45: rgba(180,249,90,.45);
/* FONT — JEDEN, Archivo (variable 100-900, normal+italic) */
--ff: 'Archivo', system-ui, -apple-system, sans-serif;
/* TYPOGRAFIA — modularna skala (ratio 1.2, anchory prod 40/50/65 zachowane jako maksy clamp = zero zmiany renderu na wiodących rolach).
JEDYNE źródło prawdy rozmiarów fontów. Tiery czytania = clamp() fluid; UI/mikro = stałe px (brak niezamierzonego skalowania).
Custom properties dziedziczą w DOM → pluginy mogą używać var(--fs-*) mimo własnego prefiksu --piona-*. */
--fs-display: clamp(2rem, 0.97rem + 3.44vw, 4.0625rem); /* 32→65: hero manifest (culture-deck, HOME) */
--fs-h1: clamp(1.75rem, 1.06rem + 2.29vw, 3.125rem); /* 28→50: hero standardowy (podstrony usług) */
--fs-h2: clamp(1.75rem, 1.375rem + 1.25vw, 2.5rem); /* 28→40: nagłówek sekcji .heading, stat-callout */
--fs-h3: clamp(1.375rem, 1.125rem + 0.83vw, 1.875rem);/* 22→30: scope-row, hero stat-num, founders name, legal/investment price */
--fs-h4: clamp(1.25rem, 1.125rem + 0.42vw, 1.5rem); /* 20→24: tytuły kart (scenario/crosslink/newsroom/contact), cennik value */
--fs-h5: clamp(1.125rem, 1.06rem + 0.21vw, 1.25rem); /* 18→20: service-card, cennik name, process h3 */
--fs-lead: clamp(1.05rem, 1.4vw, 1.25rem); /* →20: lead/subtitle (zachowany 1:1) */
--fs-body: 17px; /* inherited base (cały DOM), newsroom excerpt */
--fs-base: 16px; /* gęstszy body/opisy/faq/scope-desc/form input (16px = iOS no-zoom) */
--fs-ui: 15px; /* kontrolki interakcji: btn, nav (oddzielone od skali czytania, 09 L192) */
--fs-sm: 14px; /* noty, footer links, captiony, service-desc */
--fs-section-num: 13.6px; /* eyebrow/numbering (section-label num, scope-row num, sublink) */
--fs-xs: 12px; /* daty, tagi, mikro-labelki, footer legal */
--fs-2xs: 11.2px; /* mikro-uppercase trackowane (pill, section-label, newsroom tag) */
--fs-pill: var(--fs-2xs); /* alias DRY (było .7rem=11.2, delta 0) */
--fs-section-lbl: var(--fs-2xs); /* alias DRY (było .7rem=11.2, delta 0) */
/* SPACING / LAYOUT */
--sp-section: 6rem;
--container: 1320px;
--container-narrow: 980px;
--rail: clamp(20px, 3vw, 64px);
--header-h: 83px; /* wysokosc sticky headera (>1024px). SINGLE SOURCE: hero offsetuje sie tym tokenem; JS juz NIE mierzy wysokosci (mierzenie po DOMContentLoaded dawalo 3px layout shift na starcie). Override mobilny ponizej. */
/* RADIUS */
--r-pill: 999px;
--r-sm: 12px; --r-md: 14px; --r-card: 16px;
--r-lg: 18px; --r-xl: 20px; --r-2xl: 24px; --r-2xl-c: 28px;
/* CIENIE */
--sh-card: 0 20px 60px rgba(180,249,90,.18);
--sh-btn: 0 10px 24px rgba(0,0,0,.35);
--sh-card-base:0 24px 70px rgba(0,0,0,.34);
/* EASING / TRANSITIONS */
--ease: cubic-bezier(.16, 1, .3, 1);
--ease-mui: cubic-bezier(.4, 0, .2, 1);
--ease-btn: cubic-bezier(0, 0, .2, 1);
--t-fast: .2s; --t-wipe: .25s; --t-card: .35s; --t-reveal: .75s;
/* Z-INDEX */ --z-header: 100;
}
/* Tryb burger (<=1024px: nav+CTA hidden, najwyzsze dziecko = burger 44px) => header 83->79px. Token zmienia sie z CSS, hero podaza automatycznie (zero JS). */
@media (max-width: 1024px) { :root { --header-h: 79px; } }
}
/* Breakpointy kanoniczne: mobile <=767px, desktop >=1025px (mobile-first w gore). */
/* ------------------------------------------------------------------ RESET */
@layer reset {
*, *::before, *::after { box-sizing: border-box; }
* { margin: 0; }
/* color-scheme:dark = WLASCIWY fix na ciemniejszy pas wokol dolnego paska adresu iOS Safari.
Bez color-scheme Safari traktuje strone jako light i naklada polprzezroczysty scrim skalibrowany pod biel
-> na #0E0E0E czyta sie jako pas CIEMNIEJSZY niz tlo. color-scheme:dark mowi Safari, ze UI jest natywnie ciemne
-> chrome wokol pilla dobierany ciemno i spojnie z tlem. Jawne tlo na html domyka overscroll/rubber-band
+ root-fallback tintu krawedzi (NIE transparent — iOS 26 fallbackuje transparent root do bieli). */
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; scroll-behavior: smooth; background: var(--c-ink); color-scheme: dark; }
body { min-height: 100vh; line-height: 1.6; -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; }
img, picture, video, canvas, svg { display: block; max-width: 100%; }
input, button, textarea, select { font: inherit; color: inherit; }
a { color: inherit; text-decoration: none; }
ul, ol { list-style: none; padding: 0; }
h1, h2, h3, h4 { line-height: 1.02; font-weight: 700; text-wrap: balance; }
p { text-wrap: pretty; overflow-wrap: break-word; }
:focus-visible { outline: 2px solid var(--c-lime); outline-offset: 3px; }
@media (prefers-reduced-motion: reduce) {
*, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; scroll-behavior: auto !important; }
}
}
/* ------------------------------------------------------------------- BASE */
@layer base {
body {
font-family: var(--ff);
font-weight: 400;
font-size: var(--fs-body);
color: var(--c-cream);
background: var(--c-ink);
}
/* Akcent w naglowkach (bylo Instrument Serif) -> Archivo italic + lime */
h1 em, h2 em, h3 em, h4 em, .accent { font-style: italic; color: var(--c-lime); font-weight: inherit; }
/* Akcent-PILL (parytet prod: lime tlo + czarny tekst, zaokraglony) — uzywany punktowo, np. culture-deck „wszystko moze rosnac". */
.hl-lime { background: var(--c-lime); color: #000; font-style: italic; padding: 0 10px; border-radius: 20px; box-decoration-break: clone; -webkit-box-decoration-break: clone; }
/* Rozdzielenie myśli w naglowku (np. culture-deck: premisa | konkluzja) — nowy wiersz + odstęp, lepsza czytelnosc. */
.heading-break { display: block; margin-top: .5em; }
strong, b { font-weight: 700; }
a:hover { color: var(--c-lime); }
::selection { background: var(--c-lime); color: #000; }
::-moz-selection { background: var(--c-lime); color: #000; }
.prose p { color: var(--c-muted-2); margin-block: 1em; }
.prose h2 { font-size: var(--fs-h2); margin-block: 1.6em .5em; }
.prose h3 { font-size: var(--fs-h4); margin-block: 1.3em .4em; }
.prose a { color: var(--c-lime); text-decoration: underline; text-underline-offset: 3px; overflow-wrap: break-word; }
/* FIX RWD F4/F6: bezpieczenstwo tresci artykulow (komponenty osadzone w post_content).
- dlugie URL/slowa w linkach i listach porownan lamia sie zamiast wystawac
- spis tresci (aside.toc) i karty porownania nie przekraczaja szerokosci viewportu na waskich ekranach (+18px @320) */
.prose a, .toc a, .toc__list a, .comparison__list, .comparison__col, .comparison__essence { overflow-wrap: break-word; }
aside.toc, .toc, .comparison { max-width: 100%; box-sizing: border-box; }
.prose table { display: block; max-width: 100%; overflow-x: auto; }
.prose ul { list-style: disc; padding-left: 1.4em; color: var(--c-muted-2); }
.prose li { margin-block: .4em; }
}
/* ----------------------------------------------------------------- LAYOUT */
@layer layout {
.container { width: 100%; max-width: var(--container); margin-inline: auto; padding-inline: var(--rail); }
.container--narrow { max-width: var(--container-narrow); }
/* FAQ (punkt 6): wąski kontener wyrównany do LEWEJ krawędzi szerokiego .container, nie wyśrodkowany.
Bez tego auto-marginesy centrują węższy blok (980 < 1320) → section-label + heading siadają ~170px
na prawo i punkt 6 wygląda na wyśrodkowany. margin-start = offset wide containera; przy viewport
≤ --container max() daje 0 → hug-left identycznie jak pozostałe sekcje. Wąska miara FAQ zachowana. */
.section--faq .container--narrow { margin-inline: max(0px, (100% - var(--container)) / 2) 0; }
.section { padding-block: clamp(3rem, 6vw, var(--sp-section)); }
}
/* ------------------------------------------------------------- COMPONENTS */
@layer components {
/* PRZYCISKI — strzalka jako __icon w inline-flex nowrap (NIGDY nie spada pod tekst).
max-width:100% = safety net: button NIGDY nie wyjezdza poza kontener (regresja 2026-06-10:
dlugi primary CTA na hero podstron uciety na telefonach — nowrap bez max-width = min-content
przycisku rozpychal viewport). */
.btn {
display: inline-flex; align-items: center; gap: .55em;
white-space: nowrap;
max-width: 100%;
padding: 1.05em 1.9em;
border-radius: var(--r-pill);
font-family: var(--ff); font-weight: 700; letter-spacing: -.01em;
cursor: pointer; border: 1px solid transparent; will-change: transform;
transition: transform var(--t-fast) var(--ease-btn), box-shadow var(--t-fast) var(--ease-btn), background-position var(--t-wipe) var(--ease-btn), color var(--t-wipe) var(--ease-btn), border-color var(--t-fast);
text-align: center;
}
.btn__icon { transition: transform var(--t-fast) var(--ease-btn), color var(--t-fast); fill: currentColor; }
.btn:hover { transform: translateY(-2px); box-shadow: var(--sh-btn); }
.btn:hover .btn__icon { transform: translateX(4px); }
/* Focus ring buttonów: NIE lime (globalny reset dawał zieloną obwódkę wyglądającą jak defekt na lime/dark CTA).
Cream + offset 2px = czytelny, dostępny wskaźnik focusa (tylko klawiatura), nie myli się z borderem buttona. */
.btn:focus-visible { outline: 2px solid var(--c-cream); outline-offset: 2px; }
/* primary: ODTWORZONY 1:1 z referencji inbox/hover-test_zbij-pione.html — technika GRADIENTU (nie clip/nakładka).
Gradient ink|green 220% przesuwany pozycją: granica ink|green leży POZA kadrem w stanach spoczynku
(rest = zielony cały, hover = ciemny cały), przejeżdża przez button TYLKO w trakcie wipe → ZERO zielonych
krawędzi/pasm/prostokątów. border:0 (1px transparent border bazy dawał sliver). + ZIELONY GLOW podspodem
(jak Elementor): box-shadow lime, mocniejszy na hover. Transitions z bazy .btn (bg-position .25s, transform/shadow .2s). */
.btn--primary {
color: var(--c-ink); border: 0;
background-image: linear-gradient(to right, var(--c-ink) 0 50%, var(--c-lime) 50% 100%);
background-size: 220% 100%; background-position: right center; background-repeat: no-repeat;
/* GLOW CENTRALNY (offset Y=0 → symetryczna poświata dookoła, NIE poniżej buttona) — jak oryginał. */
box-shadow: 0 0 22px rgba(180, 249, 90, .20);
}
.btn--primary:hover, .btn--primary:focus-visible {
background-position: left center; color: var(--c-lime);
transform: translateY(-2px) scale(1.03);
box-shadow: 0 0 42px rgba(180, 249, 90, .42);
}
@media (prefers-reduced-motion: reduce) { .btn--primary:hover { transform: none; } }
/* ghost: zielona obwodka */
.btn--ghost { color: var(--c-cream); background: var(--c-glow-06); border-color: var(--c-border-hover); }
.btn--ghost:hover { filter: brightness(1.14); border-color: var(--c-lime); }
/* glass: bialy */
.btn--glass { color: var(--c-cream); background: rgba(255,255,255,.06); border-color: rgba(255,255,255,.12); }
.btn--glass:hover { filter: brightness(1.14); border-color: #6a6a6a; }
/* PILL / eyebrow */
.pill {
display: inline-flex; align-items: center; gap: .55em;
padding: .45em 1.1em; border-radius: var(--r-pill);
background: var(--c-glow-06); border: 1px solid rgba(180,249,90,.25);
color: var(--c-lime); font-size: var(--fs-pill); font-weight: 600;
text-transform: uppercase; letter-spacing: .18em;
}
.pill__dot { width: .5em; height: .5em; border-radius: 50%; background: var(--c-lime); }
/* SECTION LABEL (01 — Tytul) */
.section-label { display: inline-flex; align-items: center; gap: 1rem; font-size: var(--fs-section-lbl); font-weight: 600; text-transform: uppercase; letter-spacing: .25em; color: var(--c-muted); }
.section-label__num { color: var(--c-lime); }
.section-label__line { width: 60px; height: 1px; background: linear-gradient(to right, var(--c-lime), transparent); }
/* REVEAL (stan poczatkowy; JS dodaje .is-visible). Bez reduced-motion = od razu widoczne. */
/* ZMIERZONE z prod (.piona-reveal): fade-UP translateY(28px), 750ms ease-out. Wszystko wjeżdża W GÓRĘ (nigdy z boku). */
[data-reveal] { opacity: 0; transform: translateY(28px); transition: opacity var(--t-reveal) ease-out, transform var(--t-reveal) ease-out; }
[data-reveal].is-visible { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) { [data-reveal] { opacity: 1; transform: none; } }
/* WYJATEK HERO: sekcja nad zgieciem musi byc widoczna od pierwszego paintu, bez czekania na initReveal().
Ukryty [data-reveal] robil z LCP element zalezny od JS (Lighthouse przenosil LCP na baner cookie, 12-13 s).
JS dalej dopina .is-visible, ale nic sie wizualnie nie zmienia, a transition:none wyklucza mignięcie. */
.hero [data-reveal] { opacity: 1; transform: none; transition: none; }
}
/* --------------------------------------------------------------- UTILITIES */
@layer utilities {
.visually-hidden { position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
}
/* =========================================================================
KOMPONENTY STRON — dokladane z blueprintow (header, footer, hero--subpage,
scope-row, scenario-card, process, faq, investment-box, crosslink...).
========================================================================= */
/* CUSTOM CURSOR — USUNIĘTY z theme'u (był duplikatem). Kursor dostarcza plugin piona-cursor-fix
(#cursor + #cursorDot, ring 40->72 + dot, mix-blend difference) — jedno źródło, zero dublowania pierścieni. */
/* ============================ SKIP-LINK (a11y) ============================ */
@layer components {
.skip-link { position: absolute; left: -9999px; top: 0; z-index: 100000; background: var(--c-lime); color: #000; padding: .8em 1.2em; border-radius: 0 0 var(--r-sm) 0; font-weight: 700; }
.skip-link:focus { left: 0; }
}
/* ================================ HEADER ================================== */
@layer components {
/* Header: PRZEZROCZYSTY na gorze strony; glass-morphism "aktywuje sie" po zescrollowaniu (.is-scrolled z piona.js).
Glass ZMIERZONE z prod sticky: bg rgba(0,0,0,.52) + backdrop blur(10px) + border. */
.header { position: sticky; top: 0; min-height: var(--header-h); z-index: var(--z-header); background: transparent; border-bottom: 1px solid transparent; transition: background var(--t-card) var(--ease), border-color var(--t-card) var(--ease), backdrop-filter var(--t-card) var(--ease); }
.header.is-scrolled { background: rgba(0, 0, 0, .52); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); border-bottom-color: var(--c-border); }
.header__inner { display: flex; align-items: center; justify-content: space-between; gap: 1.5rem; padding-block: 1.05rem; }
.header__logo { display: inline-flex; flex: 0 0 auto; }
.header__logo-svg { height: 30px; width: auto; }
.header__nav { margin-left: auto; }
.nav { display: flex; align-items: center; gap: clamp(1.2rem, 2.2vw, 2.4rem); }
.nav__item { position: relative; }
.nav__link { display: inline-flex; align-items: center; gap: .35em; font-weight: 500; font-size: var(--fs-ui); color: var(--c-cream); letter-spacing: -.01em; padding-block: .5rem; transition: color var(--t-fast) var(--ease); }
.nav__link:hover { color: var(--c-lime); }
.nav__toggle { display: inline-flex; align-items: center; padding: 0; background: none; border: 0; color: var(--c-muted); cursor: pointer; }
.nav__chevron { fill: currentColor; transition: transform var(--t-fast) var(--ease); } /* fill:currentColor — bez tego svg jest czarny (niewidoczny na ciemnym headerze) */
.nav__item--has-sub:hover .nav__chevron, .nav__item--has-sub:focus-within .nav__chevron { transform: rotate(180deg); }
.nav__sub {
position: absolute; top: 100%; left: 0; min-width: 270px;
background: var(--c-card-solid); border: 1px solid var(--c-border); border-radius: var(--r-md);
padding: .6rem; display: flex; flex-direction: column; gap: .1rem;
opacity: 0; visibility: hidden; transform: translateY(8px);
transition: opacity var(--t-fast) var(--ease), transform var(--t-fast) var(--ease), visibility var(--t-fast);
box-shadow: var(--sh-card-base);
}
.nav__item--has-sub:hover .nav__sub, .nav__item--has-sub:focus-within .nav__sub { opacity: 1; visibility: visible; transform: translateY(0); }
.nav__sub .nav__link { padding: .55rem .7rem; border-radius: var(--r-sm); width: 100%; font-size: var(--fs-sm); }
.nav__sub .nav__link:hover { background: var(--c-glow-08); }
/* Podkreslenie nav — zielona linia (ZMIERZONE z prod: ::after 2px lime, bottom, anim width/scaleX,
transition .12s cubic-bezier(.455,.03,.515,.955)). Tylko top-level.
Nieaktywne linki wyszarzone (--c-muted); aktywna sekcja + hover/focus rozjasniane do --c-cream
— dzieki temu mocno widoczna jest tylko biezaca sekcja. */
.nav > .nav__item > .nav__link { position: relative; color: var(--c-muted); }
.nav > .nav__item > .nav__link::after {
content: ""; position: absolute; left: 0; right: 0; bottom: .35rem; height: 2px;
background: var(--c-lime); transform: scaleX(0); transform-origin: left center;
transition: transform .12s cubic-bezier(.455, .03, .515, .955);
}
.nav > .nav__item:hover > .nav__link::after,
.nav > .nav__item > .nav__link:hover::after,
.nav > .nav__item > .nav__link:focus-visible::after { transform: scaleX(1); }
/* Active: biezaca sekcja (Uslugi+podstrony, Case Studies, Culture Deck, Na jezykach) — zielona linia na stale. */
.nav > .nav__item.is-current > .nav__link::after { transform: scaleX(1); }
.nav > .nav__item.is-current > .nav__link,
.nav > .nav__item:hover > .nav__link,
.nav > .nav__item > .nav__link:hover,
.nav > .nav__item > .nav__link:focus-visible { color: var(--c-cream); }
/* Chevron żyje w .nav__toggle (rodzeństwo linku, NIE dziecko) → ma własny color. Synchronizujemy ze stanem linku:
muted gdy sekcja nieaktywna, jasny (--c-cream) gdy aktywna / hover / focus-within (otwarcie submenu). */
.nav > .nav__item.is-current .nav__toggle,
.nav > .nav__item:hover .nav__toggle,
.nav > .nav__item:focus-within .nav__toggle { color: var(--c-cream); }
@media (prefers-reduced-motion: reduce) { .nav > .nav__item > .nav__link::after { transition-duration: .01ms; } }
.header__cta { flex: 0 0 auto; }
.header__cta .btn { padding: .8em 1.5em; font-size: var(--fs-ui); }
/* FIX RWD F2: min 44x44 obszar dotykowy (Apple HIG) — burger to glowny trigger menu mobilnego. */
.header__burger { display: none; align-items: center; justify-content: center; gap: .5rem; background: none; border: 0; color: var(--c-cream); cursor: pointer; padding: .5rem; min-width: 44px; min-height: 44px; }
.header__burger-icon rect { fill: currentColor; }
@media (max-width: 1024px) {
.header__nav, .header__cta { display: none; }
.header__burger { display: inline-flex; }
}
}
/* =============================== OFFCANVAS ================================ */
@layer components {
/* SCRIM — przyciemnia + rozmywa stronę pod panelem; klik zamyka (data-menu-toggle) */
.offcanvas-scrim {
position: fixed; inset: 0; z-index: 999;
background: rgba(0, 0, 0, .55); backdrop-filter: blur(3px); -webkit-backdrop-filter: blur(3px);
opacity: 0; visibility: hidden; pointer-events: none;
transition: opacity .35s var(--ease), visibility .35s var(--ease);
}
body.menu-open .offcanvas-scrim { opacity: 1; visibility: visible; pointer-events: auto; }
.offcanvas {
position: fixed; inset: 0 0 0 auto; width: min(90vw, 400px); z-index: 1000;
background: var(--c-ink-deep);
background-image: radial-gradient(120% 60% at 100% 0, var(--c-glow-06), transparent 60%);
border-left: 1px solid var(--c-border-08); box-shadow: -24px 0 60px rgba(0, 0, 0, .5);
padding: 1.1rem 1.4rem 1.6rem; overflow-y: auto;
transform: translateX(100%); transition: transform .35s var(--ease);
display: flex; flex-direction: column;
}
body.menu-open .offcanvas { transform: translateX(0); }
body.menu-open { overflow: hidden; }
@media (prefers-reduced-motion: reduce) { .offcanvas, .offcanvas-scrim { transition-duration: .01ms; } }
/* HEADER PANELU — logo + X w jednym rzędzie, hairline pod spodem */
.offcanvas__head { display: flex; align-items: center; justify-content: space-between; padding-bottom: 1.1rem; border-bottom: 1px solid var(--c-border); }
.offcanvas__logo img { height: 26px; width: auto; display: block; }
.offcanvas__close {
width: 44px; height: 44px; flex: 0 0 auto; display: inline-flex; align-items: center; justify-content: center;
background: rgba(255, 255, 255, .04); border: 1px solid var(--c-border); border-radius: var(--r-pill);
color: var(--c-cream); cursor: pointer;
transition: border-color var(--t-fast) var(--ease), background var(--t-fast) var(--ease), transform var(--t-fast) var(--ease);
}
.offcanvas__close:hover, .offcanvas__close:focus-visible { border-color: var(--c-border-hover); background: var(--c-glow-08); transform: rotate(90deg); }
.offcanvas__close svg { fill: currentColor; }
@media (prefers-reduced-motion: reduce) { .offcanvas__close:hover, .offcanvas__close:focus-visible { transform: none; } }
/* NAWIGACJA — rytm, separatory, stany */
.offcanvas__nav { margin-top: .4rem; }
.mnav, .mnav__sub { list-style: none; }
.mnav { display: flex; flex-direction: column; }
.mnav__item { border-bottom: 1px solid var(--c-border); }
.mnav__row { display: flex; align-items: center; justify-content: space-between; gap: .5rem; }
.mnav__link {
flex: 1; display: flex; align-items: center; gap: .6rem; min-height: 54px; padding: .4rem 0;
font-size: var(--fs-body); font-weight: 600; letter-spacing: -.01em; color: var(--c-cream);
transition: color var(--t-fast) var(--ease);
}
.mnav__link:hover, .mnav__link:active { color: var(--c-lime); }
/* stały slot na wskaźnik — wyrównuje tekst wszystkich pozycji top-level */
.mnav > .mnav__item > .mnav__row .mnav__link::before {
content: ""; width: 6px; height: 6px; border-radius: var(--r-pill); background: transparent; flex: 0 0 auto;
transition: background var(--t-fast) var(--ease), box-shadow var(--t-fast) var(--ease);
}
.mnav__item.is-current > .mnav__row .mnav__link { color: var(--c-lime); }
.mnav__item.is-current > .mnav__row .mnav__link::before { background: var(--c-lime); box-shadow: 0 0 10px var(--c-glow-45); }
.mnav__toggle { width: 44px; height: 44px; flex: 0 0 auto; display: inline-flex; align-items: center; justify-content: center; background: none; border: 0; color: var(--c-muted-2); cursor: pointer; }
.mnav__chevron { fill: currentColor; transition: transform .3s var(--ease); }
.mnav__item.is-open .mnav__chevron { transform: rotate(180deg); }
/* PODMENU — wcięcie + linia akcentu po lewej */
.mnav__sub { display: none; flex-direction: column; margin: 0 0 .6rem; padding-left: .9rem; }
.mnav__item--has-sub.is-open .mnav__sub { display: flex; }
.mnav__sub .mnav__link { min-height: 0; padding: .5rem 0; font-size: var(--fs-sm); font-weight: 400; color: var(--c-muted-2); }
.mnav__sub .mnav__link:hover { color: var(--c-lime); }
.mnav__sub li.is-current .mnav__link { color: var(--c-lime); font-weight: 500; }
/* STOPKA PANELU — CTA + social zakotwiczone na dole */
.offcanvas__foot { margin-top: auto; padding-top: 1.5rem; }
.offcanvas__cta { width: 100%; justify-content: center; }
.offcanvas__socials { margin-top: 1.4rem; }
.offcanvas__socials .socials { gap: .55rem; }
.offcanvas__socials .socials a {
width: 38px; height: 38px; display: inline-flex; align-items: center; justify-content: center;
border: 1px solid var(--c-border); border-radius: var(--r-pill); color: var(--c-muted-2);
transition: color var(--t-fast) var(--ease), border-color var(--t-fast) var(--ease), background var(--t-fast) var(--ease);
}
.offcanvas__socials .socials a:hover { color: var(--c-lime); border-color: var(--c-border-hover); background: var(--c-glow-06); }
.offcanvas__socials .socials svg { width: 17px; height: 17px; }
/* offcanvas + scrim widoczne tylko gdy menu mobilne aktywne (desktop nie pokazuje) */
@media (min-width: 1025px) { .offcanvas, .offcanvas-scrim { display: none; } }
}
/* ================================ FOOTER ================================= */
@layer components {
.footer { background: var(--c-ink); border-top: 1px solid var(--c-border); }
.footer__container { padding-block: 0; }
.footer__top { padding-block: clamp(3rem, 6vw, 5rem); }
.footer__top .footer__container { display: grid; grid-template-columns: 1.4fr 1fr 1fr 1.2fr; gap: clamp(2rem, 4vw, 4rem); }
.footer__col--brand { display: flex; flex-direction: column; align-items: center; text-align: center; } /* logo + tagline wysrodkowane (tylko kolumna brand; nav/kontakt zostaja left-aligned) */
.footer__logo img { height: 87px; width: auto; } /* logo pionowe (stacked). 87px (nie 96) bo nowy plik ma tight-crop viewBox 1920x1080 (zero paddingu) — 87px zachowuje zatwierdzony widoczny rozmiar znaku */
/* Clear space wg brandu: min. obszar bezpieczny = 2/3 wysokosci sygnetu. Sygnet (dlon) renderuje sie 52px przy logo 87px,
2/3 = 35px widocznego odstepu wordmark->cap-top taglinu. margin-top 28px daje 35px (px, bo clear space wiaze sie z logo, nie ze skala fontu). */
.footer__tagline { margin-top: 28px; color: #8a8a8a; font-size: var(--fs-sm); max-width: 32ch; line-height: 1.6; }
.footer__heading { font-size: var(--fs-xs); font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: var(--c-cream); margin-bottom: 1.1rem; }
.footer__links { display: flex; flex-direction: column; gap: .6rem; }
/* FIX RWD F7: lamanie dlugich maili/linkow w stopce (prewencyjnie, gdyby pojawil sie dluzszy adres). */
.footer__links a, .footer__contact a { color: #8a8a8a; font-size: var(--fs-sm); transition: color var(--t-fast) var(--ease); overflow-wrap: break-word; }
.footer__links a:hover, .footer__contact a:hover { color: var(--c-lime); }
.footer__contact { font-style: normal; color: #8a8a8a; font-size: var(--fs-sm); line-height: 1.9; }
.footer__middle { border-top: 1px solid var(--c-border); padding-block: 2rem; }
.footer__copyright { text-align: center; display: flex; flex-direction: column; gap: .9rem; color: #8a8a8a; font-size: var(--fs-sm); }
.footer__claim { color: var(--c-lime); }
.footer__claim strong { font-weight: 700; }
.footer__legal { font-size: var(--fs-xs); }
.footer__bottom { border-top: 1px solid var(--c-border); padding-block: 1.4rem; }
.footer__bottom .footer__container { display: flex; justify-content: center; }
.socials { display: flex; gap: 1.1rem; align-items: center; }
.socials a { color: #6a6a6a; transition: color var(--t-fast) var(--ease); display: inline-flex; }
.socials a:hover { color: var(--c-lime); }
.socials svg { fill: currentColor; }
@media (max-width: 1024px) {
.footer__top .footer__container { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 767px) {
.footer__top .footer__container { grid-template-columns: 1fr; gap: 2.2rem; }
}
}
/* ============================== BACK-TO-TOP ============================== */
@layer components {
.back-to-top { position: fixed; right: clamp(16px, 3vw, 32px); bottom: clamp(16px, 3vw, 32px); z-index: 90; width: 46px; height: 46px; display: inline-flex; align-items: center; justify-content: center; background: var(--c-lime); color: #000; border-radius: var(--r-sm); box-shadow: var(--sh-btn); transition: background var(--t-fast) var(--ease), transform var(--t-fast) var(--ease); }
.back-to-top[hidden] { display: none; }
.back-to-top:hover { transform: translateY(-3px); color: #000; }
.back-to-top__icon path { fill: currentColor; }
@media (max-width: 767px) { .back-to-top { display: none; } }
}
/* ============================== LEGAL PAGE =============================== */
/* Wartości dopasowane do ZMIERZONYCH metryk oryginału (prod 2026-06-03):
H1 35px/lh1; tytuły sekcji = bold 16px (NIE duże nagłówki); p 16px/lh1.65/mb24/#D2D7DC; szer. treści ~1152. */
@layer components {
.legal-page { padding-block-start: 80px; padding-block-end: var(--sp-section); }
.legal-page__inner { max-width: 1152px; }
.legal-page__title { font-weight: 800; line-height: 1; margin: 0 0 24px; font-size: 35px; color: var(--c-cream); }
.legal-page__content { font-size: var(--fs-base); line-height: 1.65; color: #D2D7DC; }
.legal-page__content p { margin: 0 0 24px; }
.legal-page__heading { font-size: var(--fs-base); font-weight: 700; color: #D2D7DC; margin: 0 0 24px; }
.legal-page__content strong { color: #D2D7DC; font-weight: 700; }
.legal-page__list { list-style: disc; margin: 0 0 24px; padding-inline-start: 1.4rem; }
.legal-page__list li { margin: 0 0 .4rem; line-height: 1.65; }
.legal-page__content a { color: var(--c-lime); text-decoration: none; }
.legal-page__content a:hover { text-decoration: underline; }
@media (max-width: 767px) { .legal-page { padding-block-start: 24px; } }
}
/* =============================== BRANDING / USŁUGI =============================== */
@layer components {
/* Nagłówki sekcji */
/* Nagłówki bez sztucznego max-width — 1 linia gdy się mieszczą (skanowalność); zawijają dopiero przy krawędzi kontenera. */
.heading { font-weight: 800; letter-spacing: -.03em; line-height: 1.08; margin-block: 1.2rem 1.4rem; text-wrap: balance; }
.heading--center { margin-inline: auto; text-align: center; }
.section-subtitle { color: var(--c-muted-2); text-align: center; max-width: 52ch; margin: 0 auto 3rem; }
.section__cta-center { display: flex; justify-content: center; margin-top: 3rem; }
/* --- HERO podstrony --- */
/* Hero wchodzi POD przezroczysty header (header "plywa" nad nim) — tlo hero ciagnie sie od samej gory strony,
bez szwu body|hero. margin-top -header-h cofa hero pod header, padding-top oddaje te wysokosc tresci. --header-h = token CSS (:root: 83px / <=1024px: 79px), JS go juz NIE ustawia (eliminacja layout shift). */
.hero--subpage { position: relative; margin-top: calc(-1 * var(--header-h, 83px)); padding-top: calc(var(--header-h, 83px) + clamp(5rem, 10vw, 120px)); padding-bottom: clamp(5rem, 10vw, 120px); background: radial-gradient(ellipse 60% 100% at 50% 100%, var(--c-glow-45), var(--c-glow-08) 45%, transparent 75%); text-align: center; }
.hero--subpage .hero__inner { display: flex; flex-direction: column; align-items: center; }
/* Hero z wideo tla (filmy, home) — zapetlone wideo + dark overlay dla czytelnosci tekstu; zastepuje lime gradient. */
.hero--video { background: var(--c-ink); overflow: hidden; }
.hero__bg { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: 0; pointer-events: none; }
.hero__bg-overlay { position: absolute; inset: 0; z-index: 1; background: linear-gradient(180deg, rgba(5,5,5,.74), rgba(5,5,5,.5) 42%, rgba(5,5,5,.8)); pointer-events: none; }
.hero--video .hero__inner { position: relative; z-index: 2; }
@media (prefers-reduced-motion: reduce) { .hero__bg { display: none; } }
/* Dopasowane do oryginału: 50px desktop (1 linia na ≥1025), bez max-width; skaluje na mobile. */
.hero__heading { font-weight: 800; letter-spacing: -.03em; line-height: 1.06; margin-block: 1.4rem; }
.hero__lead { color: var(--c-muted-2); max-width: 46ch; margin-bottom: 2.4rem; }
.hero__cta-group { display: flex; flex-wrap: wrap; gap: 1rem; justify-content: center; }
.hero__divider { width: 100%; max-width: 520px; height: 1px; background: var(--c-border); margin-block: 3.5rem; }
/* Układ ZMIERZONY z oryginału: grid 3 równe kolumny, pełna szerokość, etykiety w 1 linii. */
.hero__stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; width: 100%; }
.hero__stat { display: flex; flex-direction: column; gap: .4rem; text-align: center; align-items: center; min-width: 0; }
/* Hover statów-linków: spójny z designem — lift + lime glow na liczbie + rozjaśnienie labela.
will-change/backface = stabilna warstwa GPU (tekst nie skacze przy un-hover). */
.hero__stat--link { cursor: pointer; will-change: transform; backface-visibility: hidden; transition: transform var(--t-fast) var(--ease); }
.hero__stat--link .hero__stat-num { transition: text-shadow var(--t-fast) var(--ease), color var(--t-fast) var(--ease); }
.hero__stat--link .hero__stat-label { transition: color var(--t-fast) var(--ease); }
.hero__stat--link:hover { transform: translateY(-3px); }
.hero__stat--link:hover .hero__stat-num { text-shadow: 0 0 26px rgba(180, 249, 90, .55); }
.hero__stat--link:hover .hero__stat-label { color: var(--c-cream); }
@media (prefers-reduced-motion: reduce) { .hero__stat--link:hover { transform: none; } }
.hero__stat-num { font-weight: 800; color: var(--c-lime); letter-spacing: -.02em; }
.hero__stat-label { color: var(--c-muted); line-height: 1.4; }
@media (max-width: 767px) { .hero__stats { grid-template-columns: 1fr; } .hero__stat { padding-block: 1.2rem; border-bottom: 1px solid var(--c-border); } }
/* --- CHROMOWANA DŁOŃ (hero usług) --- */
/* Dekoracja hero 7 podstron usługowych (markup: template-parts/hero-hand.php; mapowanie:
a=branding/uslugi/strony-www, b=identyfikacja-wizualna/reklama-platna, c=social-media,
c-short=dodatkowe-uslugi). NIGDY na .hero--video (decyzja Oskara 2026-06-10).
Architektura 3 wrapperów = separacja transformów: .hero-hand (entrance) → __float (idle)
→ __wrap (rotate wokół czubka palca) — animacje WYŁĄCZNIE transform/opacity (CLS-safe).
Stan bazowy = stan końcowy ("from" tylko w @keyframes + fill both) → reset reduced-motion
(.01ms !important w @layer reset) teleportuje do końca i dłoń NIGDY nie zostaje niewidoczna;
entrance jest CSS-only (niezależny od piona.js). Czubek palca każdej grafiki (zmierzony
z kanału alfa: A 88.7%/78.8%, offset .4488·W; B 1.3%/53.3%, offset .2833·W; C 66.6%/2.5%)
kotwiczony TYM SAMYM fluid-wyrazem co padding-top hero → zero dryfu wewnątrz pasm
breakpointów (skok --header-h na 1024px obsługuje var). Kotwice w px/% (nie vw — scrollbar
desktopowy zawyża vw); vw tylko jako skala rozmiaru w clamp(). Ścięta krawędź grafiki
(A: lewa, B: prawa, C: dolna) zawsze bleeduje poza viewport/sekcję z zapasem > float 9px
— ucięcie nigdy nie wjeżdża w kadr. Wartości geometrii zatwierdzone przez Oskara 10.06
(desktop ≥2150 = jego monitor; 1200-2149 osobne — centrowana treść jest tam bliżej
krawędzi i wartości wide kładłyby palce na pillu/H1). */
.hero--has-hand { overflow: hidden; overflow: clip; } /* klips bleedu; clip = bez scroll-containera */
.hero--has-hand .hero__inner { position: relative; z-index: 1; } /* treść ZAWSZE nad dłonią */
/* scrim górny: na czystym #0E0E0E niewidoczny — gasi wyłącznie jasny chrom pod logo/nav */
.hero--has-hand::after { content: ""; position: absolute; z-index: 0; left: 0; right: 0; top: 0;
height: calc(var(--header-h) + 56px); pointer-events: none;
background: linear-gradient(180deg, rgba(5,5,5,.66) 0, rgba(5,5,5,.42) 55%, transparent 100%); }
.hero-hand { position: absolute; z-index: 0; pointer-events: none; user-select: none;
/* efekty wspólne (zatwierdzone 10.06, ekspozycja -10) */
--hand-expo: .70; --hand-glow: .20; --hand-tint: .08; } /* tint -90% (11.06: chrom ma byc chromem) */
.hero-hand__float { will-change: transform; animation: piona-hand-float 7s ease-in-out 1.9s infinite; }
.hero-hand__wrap { position: relative; isolation: isolate; } /* blend tintu deterministyczny (tylko wewnątrz dłoni) */
.hero-hand__img { width: 100%; max-width: none; height: auto;
filter: saturate(.92) contrast(1.02) brightness(var(--hand-expo)) drop-shadow(0 26px 56px rgba(0,0,0,.5)); }
/* poświata za dłonią — język wizualny .hero__float::after (HOME) */
.hero-hand::before { content: ""; position: absolute; z-index: -1; filter: blur(46px); opacity: var(--hand-glow);
background: radial-gradient(closest-side, rgba(180,249,90,.5), transparent 72%); }
/* refleks lime: gradient przycięty maską alfa obrazka. @supports-gate: brak wsparcia masek
-> tint w ogóle się nie renderuje (czysta dłoń) — nigdy lime prostokąt na hero */
.hero-hand__tint { display: none; }
@supports ((mask-image: url('#')) or (-webkit-mask-image: url('#'))) {
.hero-hand__tint { display: block; position: absolute; inset: 0; mix-blend-mode: screen; opacity: var(--hand-tint);
-webkit-mask-size: 100% 100%; mask-size: 100% 100%; -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat; }
}
/* A: przekątna z lewego górnego rogu, palec w dół na H1 */
.hero-hand--a { --vw: 54vw; --x: -20px; --dy: 68px; --rot: -4.5deg;
--w: clamp(180px, var(--vw), 760px); width: var(--w); left: var(--x);
top: calc(var(--header-h) + clamp(5rem, 10vw, 120px) + var(--dy) - var(--w) * .4488);
animation: piona-hand-enter-a 1s var(--ease) .55s both; }
.hero-hand--a .hero-hand__wrap { transform: rotate(var(--rot)); transform-origin: 88.7% 78.8%; }
.hero-hand--a .hero-hand__tint { background: linear-gradient(118deg, rgba(180,249,90,0) 35%, rgba(180,249,90,.4) 70%, rgba(180,249,90,.65) 97%);
-webkit-mask-image: url('../img/hero-hand-a.webp'); mask-image: url('../img/hero-hand-a.webp'); }
.hero-hand--a::before { left: 4%; top: 16%; width: 80%; height: 72%; }
/* B: przedramię od prawej krawędzi, palec poziomo w lewo na H1 */
.hero-hand--b { --vw: 38vw; --r: -24px; --dy: 55px; --rot: 0deg;
--w: clamp(260px, var(--vw), 800px); width: var(--w); right: var(--r);
top: calc(var(--header-h) + clamp(5rem, 10vw, 120px) + var(--dy) - var(--w) * .2833);
animation: piona-hand-enter-b 1s var(--ease) .55s both; }
.hero-hand--b .hero-hand__wrap { transform: rotate(var(--rot)); transform-origin: 1.3% 53.3%; }
.hero-hand--b .hero-hand__tint { background: linear-gradient(48deg, rgba(180,249,90,.6) 0%, rgba(180,249,90,.28) 32%, rgba(180,249,90,0) 64%);
-webkit-mask-image: url('../img/hero-hand-b.webp'); mask-image: url('../img/hero-hand-b.webp'); }
.hero-hand--b::before { left: -8%; top: 28%; width: 82%; height: 62%; }
/* C: lewa strona przy osi treści (kotwica 50% szerokości SEKCJI, nie viewportu), palec w górę
ku H1; kotwiczona od DOŁU sekcji = niewrażliwa na różnice wysokości hero między stronami */
.hero-hand--c { --vw: 40vw; --cx: 716px; --b: -166px; --rot: 26.5deg;
--w: clamp(120px, var(--vw), 320px); width: var(--w);
left: max(8px, calc(50% - var(--cx))); bottom: var(--b);
animation: piona-hand-enter-c 1s var(--ease) .55s both; }
.hero-hand--c .hero-hand__wrap { transform: rotate(var(--rot)); transform-origin: 66.6% 2.5%; }
.hero-hand--c .hero-hand__tint { background: linear-gradient(135deg, rgba(180,249,90,0) 30%, rgba(180,249,90,.35) 66%, rgba(180,249,90,.6) 96%);
-webkit-mask-image: url('../img/hero-hand-c.webp'); mask-image: url('../img/hero-hand-c.webp'); }
.hero-hand--c::before { right: -6%; bottom: -4%; width: 100%; height: 64%; }
/* c-short: krótki hero (Dodatkowe usługi — bez dividera/stats): mniejsza pięść, czubek palca
przy H1, ucięcie wypada na przedramieniu poza sekcją */
.hero-hand--c-short { --vw: 16.7vw; --b: -225px; }
/* SZEROKIE MONITORY ≥2150px — wartości Oskara (10.06) */
@media (min-width: 2150px) {
.hero-hand--a { --vw: 64vw; --x: -16px; --dy: 56px; --rot: -1.5deg; }
.hero-hand--b { --vw: 60vw; --r: -66px; --dy: 90px; }
}
/* TABLET 768-1199px */
@media (max-width: 1199px) {
.hero-hand--a { --vw: 46vw; --x: -70px; --dy: 46px; }
.hero-hand--b { --vw: 48vw; --r: -24px; --dy: 50px; }
.hero-hand--c { --vw: 19vw; --b: -55px; }
.hero-hand--c-short { --vw: 17vw; --b: -175px; }
}
/* TELEFON <768px: + perf — bez idle float (kompozytor śpi, bateria) i bez poświaty blur.
B: mniejsza i WYRAŹNIE nad pillem (pill na mobile jest niemal full-width — QC iPhone 11 Pro 11.06).
C: UKRYTA — bottom-anchored dekoracja w stacked layoutcie telefonu zawsze koliduje z treścią
(stat/CTA); czysty hero na mobile > dekoracja na siłę (decyzja UX po teście na urządzeniu). */
@media (max-width: 767px) {
.hero-hand--a { --vw: 52vw; --x: -55px; --dy: -12px; }
.hero-hand--b { --w: clamp(170px, 48vw, 800px); --r: -16px; --dy: -42px; }
.hero-hand--c { display: none; }
.hero-hand__float { animation: none; will-change: auto; }
.hero-hand::before { display: none; }
}
@keyframes piona-hand-enter-a { from { opacity: 0; transform: translateX(-56px); } }
@keyframes piona-hand-enter-b { from { opacity: 0; transform: translateX(56px); } }
@keyframes piona-hand-enter-c { from { opacity: 0; transform: translate(-44px, 44px); } }
@keyframes piona-hand-float { 50% { transform: translateY(-9px); } }
@media (prefers-reduced-motion: reduce) { .hero-hand, .hero-hand__float { animation: none; } } /* base = widoczna */
@media print { .hero-hand, .hero--has-hand::after { display: none; } }
/* --- LEDE ROW (tekst + obraz) --- */
/* Proporcja 1.4fr 1fr (research UX: ciemne zdjęcie portretowe ma dużą wagę kontrastową — tekst potrzebuje więcej
szerokości dla balansu; 2fr 1fr spychało zdjęcie do miniatury). align start = bez „dziury". */
.lede-row { display: grid; grid-template-columns: 1.4fr 1fr; gap: clamp(40px, 5vw, 80px); align-items: start; margin-block: 2.5rem 3rem; }
/* Wariant bez .lede-row__media (np. Filmy reklamowe sekcja 01): pełna szerokość zamiast wciśnięcia w kolumnę 1.4fr — nagłówek mieści się w 1 linii. Paragraf 96ch = zmierzone 2 równe linie (867/822px @1280, font 17px) bez sierotki; pretty chroni ostatnią linię przy edycji treści. */
.lede-row--text-only { grid-template-columns: 1fr; }
.lede-row--text-only .lede-row__text p { max-width: 96ch; text-wrap: pretty; }
.lede-row__text p { color: var(--c-muted); margin-bottom: 1.5rem; line-height: 1.65; max-width: 62ch; }
.lede-row__media { position: relative; align-self: start; }
/* Zielony glow ZMIERZONY z prod (0 0 35px -4px lime .39) + depth shadow (grawitacja) + lime hairline + radius 20px. */
.lede-row__media img { width: 100%; height: auto; border-radius: 20px; border: 1px solid rgba(180,249,90,.26); box-shadow: 0 8px 24px rgba(0,0,0,.45), 0 0 35px -4px rgba(180,249,90,.39); }
@media (max-width: 900px) { .lede-row { grid-template-columns: 1fr; gap: 2rem; } .lede-row__media { max-width: 420px; } }
/* --- SCENARIO CARDS --- */
.scenario-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.25rem; }
.scenario-grid--4 { grid-template-columns: repeat(2, 1fr); } /* 2x2 — szersze karty, skanowalne (NIE 4 w rzędzie = ściany tekstu) */
.scenario-grid--2 { grid-template-columns: repeat(2, 1fr); } /* 2 rowne kolumny pelnej szerokosci (sekcja z 2 kartami — bez sciskania do lewej w gridzie 3-kol) */
/* Karty: ZMIERZONE z prod — hover translateY(-5px) (BEZ scale → tekst nie skacze), border lime .38,
glow ZEWN (::after box-shadow lime) + WEWN (::before bg lime tint). Glow przez opacity pseudo (nie animacja
box-shadow/bg na samej karcie) → text nigdy się nie re-rasteryzuje. will-change + brak backdrop-filter. */
.scenario-card { position: relative; isolation: isolate; background: linear-gradient(135deg, rgba(20,20,20,.92), rgba(28,28,28,.78)); border: 1px solid var(--c-border-08); border-radius: var(--r-xl); padding: 2.2rem 2rem; will-change: transform; transition: transform var(--t-card) var(--ease), border-color var(--t-card) var(--ease); }
.scenario-card::before { content: ""; position: absolute; inset: 0; z-index: -1; border-radius: inherit; background: linear-gradient(135deg, rgba(180,249,90,.08) 0%, transparent 60%); opacity: 0; transition: opacity var(--t-card) ease; }
.scenario-card::after { content: ""; position: absolute; inset: 0; z-index: -1; border-radius: inherit; pointer-events: none; box-shadow: 0 22px 64px rgba(180,249,90,.16); opacity: 0; transition: opacity var(--t-card) ease; }
.scenario-card:hover { transform: translateY(-5px); border-color: rgba(180,249,90,.38); }
.scenario-card:hover::before, .scenario-card:hover::after { opacity: 1; }
@media (prefers-reduced-motion: reduce) { .scenario-card:hover { transform: none; } }
.scenario-card__eyebrow { display: block; font-weight: 600; letter-spacing: .04em; color: var(--c-lime); margin-bottom: 1rem; } /* "01 / Argument" title-case jak w oryginale (NIE uppercase) */
.scenario-card__title { font-weight: 700; margin-bottom: .8rem; line-height: 1.2; }
.scenario-card__desc { color: var(--c-muted-2); line-height: 1.6; }
.scenarios__closing { margin-top: 2rem; font-size: var(--fs-h4); color: #fafafa; }
.scenarios__def { margin-top: 1.1rem; font-size: var(--fs-base); line-height: 1.65; color: #cfcfcf; }
@media (max-width: 980px) { .scenario-grid, .scenario-grid--4 { grid-template-columns: 1fr 1fr; } }
@media (max-width: 767px) { .scenario-grid, .scenario-grid--2, .scenario-grid--4 { grid-template-columns: 1fr; } .scenario-card { padding: 1.6rem 1.4rem; } .scenario-card:hover { transform: none; } }
/* --- TAG PILLS (Co zawiera) — ZMIERZONE z prod: to ghost-buttony.
pad 12px 24px, font 12px/400 ls .5px, tlo lime .05, border lime, radius 99px, gap 20px;
hover: tlo lime .12 + translateY(-2px) scale(1.03) + glow 36px. --- */
/* FIX RWD F1: flex-wrap:wrap zamiast nowrap — rzad pill-i (dekoracyjne etykiety zakresu) zawija sie do wielu
rzedow na waskich ekranach zamiast rozpychac layout poza viewport (poziomy scroll na 6 podstronach uslug). */
.tag-row { display: flex; flex-wrap: wrap; gap: 12px; margin-block: 1.5rem 2rem; padding: 4px 2px; }
.tag-pill {
display: inline-flex; align-items: center; white-space: nowrap; flex-shrink: 0;
padding: 10px 16px; border-radius: 99px;
background: rgba(180, 249, 90, .05); border: 1px solid var(--c-lime);
color: var(--c-lime); font-size: var(--fs-xs); font-weight: 400; letter-spacing: .5px; line-height: 1;
/* ROOT CAUSE „przeskoku": scale() na elemencie z tekstem -> przegladarka kompozytuje skalowana teksture
w trakcie, a na KONCU transition re-rasteryzuje glify w docelowej skali = widoczny snap (will-change tego
nie eliminuje na koncu). FIX (jak Linear/Stripe): bez scale — sam translateY (nigdy nie re-rasteryzuje glifow)
+ fill/glow. GPU layer stabilny. */
will-change: transform;
transition: background-color var(--t-fast) var(--ease-btn), transform var(--t-fast) var(--ease-btn), box-shadow var(--t-fast) var(--ease-btn);
}
.tag-pill:hover { background: rgba(180, 249, 90, .12); transform: translateY(-2px); box-shadow: 0 0 36px rgba(180, 249, 90, .18); }
@media (prefers-reduced-motion: reduce) { .tag-pill:hover { transform: none; } }
/* --- SCOPE LIST — ZMIERZONE z prod (.piona-scope-row):
3 kolumny 70px|1fr|1.2fr (numer|tytul|opis OBOK siebie), gap 2.5rem, pad 2.25rem 1.25rem, border-bottom.
hover: padding-left 1.25->1.75rem + tlo linear-gradient(90deg, lime .05, transparent) + num/title -> lime;
transition all 380ms cubic-bezier(.4,0,.2,1). --- */
.scope__intro { color: var(--c-muted); margin-bottom: 3rem; line-height: 1.65; }
.scope-list { display: flex; flex-direction: column; }
.scope-row {
display: grid; grid-template-columns: 70px 1fr 1.2fr; gap: 2.5rem;
padding: 2.25rem 1.25rem; border-bottom: 1px solid var(--c-border); align-items: start;
position: relative; overflow: hidden;
transition: background .38s var(--ease-mui), border-color .38s var(--ease-mui);
}
/* fade do rgba(...,0) (NIE `transparent`=czarny → dead-zone/ostre urwanie); wygaszenie do 60% = delikatny fade, nie cut. */
.scope-row:hover { background: linear-gradient(90deg, rgba(180, 249, 90, .06) 0%, rgba(180, 249, 90, 0) 60%); border-bottom-color: var(--c-border-hover); }
.scope-row:hover .scope-row__num, .scope-row:hover .scope-row__title { color: var(--c-lime); }
/* ruch w prawo = transform na zawartosci (NIE padding-left). padding zmienia szerokosc kolumny -> desc przezawija sie linia po linii = „przeskok". translateX jest czysto wizualny, zero reflow. */
.scope-row:hover .scope-row__num, .scope-row:hover .scope-row__title, .scope-row:hover .scope-row__desc { transform: translateX(.5rem); }
.scope-row__num { font-weight: 600; color: var(--c-muted); letter-spacing: .15em; padding-top: .5rem; transition: color .25s, transform .38s var(--ease-mui); }
.scope-row__title { font-weight: 700; line-height: 1.1; letter-spacing: -.03em; transition: color .25s, transform .38s var(--ease-mui); }
.scope-row__desc { color: var(--c-muted); line-height: 1.55; padding-top: .4rem; transition: transform .38s var(--ease-mui); }
@media (max-width: 900px) { .scope-row { grid-template-columns: 56px 1fr; gap: 1.25rem 1.5rem; } .scope-row__desc { grid-column: 2; padding-top: .8rem; } }
@media (max-width: 767px) { .scope-row { padding: 1.5rem 0; } }
@media (prefers-reduced-motion: reduce) { .scope-row:hover .scope-row__num, .scope-row:hover .scope-row__title, .scope-row:hover .scope-row__desc { transform: none; } }
/* --- STAT CALLOUT (2,4×) --- */
.stat-callout { display: grid; grid-template-columns: auto 1fr; gap: 1.5rem; align-items: center; margin-top: 3rem; padding: 1.8rem 2rem; background: linear-gradient(135deg, var(--c-glow-08), rgba(20,20,20,.85)); border: 1px solid rgba(180,249,90,.25); border-left: 4px solid var(--c-lime); border-radius: var(--r-card); }
.stat-callout__figure { font-size: var(--fs-h2); font-weight: 800; color: var(--c-lime); line-height: 1; }
.stat-callout p { color: var(--c-muted-2); line-height: 1.6; margin: 0; }
.stat-callout a { color: var(--c-lime); }
@media (max-width: 767px) { .stat-callout { grid-template-columns: 1fr; gap: .8rem; } }
/* --- INVESTMENT BOX --- */
.section--investment .investment-box { position: relative; overflow: hidden; display: grid; grid-template-columns: 1fr 1fr; gap: 2rem; align-items: center; padding: clamp(2rem, 4vw, 3.2rem); border-radius: var(--r-2xl-c); border: 1px solid var(--c-border-hover); background: linear-gradient(135deg, var(--c-glow-10), rgba(22,22,22,.55) 40%, rgba(14,14,14,.8)); backdrop-filter: blur(20px) saturate(180%); transition: opacity var(--t-reveal) ease-out, transform var(--t-reveal) ease-out, border-color var(--t-card) var(--ease), box-shadow var(--t-card) var(--ease); }
.investment-box:hover { border-color: rgba(180,249,90,.55); box-shadow: 0 30px 100px var(--c-glow-20); }
.investment-box::before { content: ""; position: absolute; top: -40%; right: -10%; width: 420px; height: 420px; background: radial-gradient(circle, var(--c-glow-30), transparent 70%); pointer-events: none; }
.investment-box__content { position: relative; z-index: 1; }
.investment-box__price { font-weight: 800; line-height: 1.1; margin-block: 1rem; }
.investment-box__price em { color: var(--c-lime); font-style: normal; text-shadow: 0 0 30px var(--c-glow-45); }
.investment-box__desc { color: var(--c-muted-2); line-height: 1.6; }
.investment-box__cta { position: relative; z-index: 1; display: flex; flex-direction: column; align-items: center; gap: 1rem; }
.investment-box__cta .btn { width: 100%; justify-content: center; }
.investment-box__sublink { font-size: var(--fs-section-num); color: var(--c-muted); text-align: center; }
.investment-box__sublink a { color: var(--c-lime); text-decoration: underline; text-underline-offset: 3px; }
@media (max-width: 767px) { .section--investment .investment-box { grid-template-columns: 1fr; gap: 1.8rem; border-radius: var(--r-lg); } }
/* --- FAQ --- */
.faq { display: flex; flex-direction: column; gap: .7rem; margin-top: 2rem; }
.faq__item { background: rgba(22,22,22,.85); border: 1px solid var(--c-border); border-radius: var(--r-md); overflow: hidden; }
.faq__question { display: flex; align-items: center; justify-content: space-between; gap: 1rem; width: 100%; text-align: left; padding: 1.3rem 1.6rem; background: none; border: 0; color: var(--c-cream); cursor: pointer; font-family: var(--ff); font-weight: 600; line-height: 1.4; }
.faq__icon { position: relative; flex: 0 0 18px; width: 18px; height: 18px; }
.faq__icon::before, .faq__icon::after { content: ""; position: absolute; background: var(--c-lime); transition: transform var(--t-fast) var(--ease), opacity var(--t-fast); }
.faq__icon::before { top: 8px; left: 0; width: 18px; height: 2px; }
.faq__icon::after { top: 0; left: 8px; width: 2px; height: 18px; }
.faq__item--active .faq__icon::after { transform: scaleY(0); opacity: 0; }
.faq__answer { max-height: 0; overflow: hidden; transition: max-height .4s var(--ease); }
.faq__item--active .faq__answer { max-height: 600px; }
.faq__answer p { padding: 0 1.6rem 1.4rem; color: var(--c-muted-2); line-height: 1.7; margin: 0; }
.faq__answer a { color: var(--c-lime); }
/* --- CROSSLINK --- */
.crosslink-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 1.25rem; margin-top: 2rem; }
.crosslink-card { position: relative; display: block; padding: 2.2rem; border-radius: var(--r-lg); border: 1px solid var(--c-border-08); background: linear-gradient(135deg, rgba(22,22,22,.8), rgba(28,28,28,.5)); transition: transform var(--t-card) var(--ease), border-color var(--t-card) var(--ease), box-shadow var(--t-card) var(--ease); }
.crosslink-card:hover { transform: translateY(-4px); border-color: var(--c-border-hover); box-shadow: var(--sh-card); }
.crosslink-card__title { font-weight: 700; margin-bottom: .8rem; transition: color var(--t-fast) var(--ease); }
.crosslink-card:hover .crosslink-card__title { color: var(--c-lime); }
.crosslink-card__desc { color: var(--c-muted-2); line-height: 1.6; }
/* Strzałka NA DOLE w przepływie (jak prod .piona-crosslink-card__arrow) — NIE absolute w rogu,
bo długi tytuł na nią nachodził. Muted w spoczynku, lime + przesunięcie w prawo na hover. */
.crosslink-card__arrow { display: block; text-align: right; margin-top: 1.25rem; font-size: 1.5rem; color: var(--c-muted); transition: transform var(--t-fast) var(--ease), color var(--t-fast) var(--ease); }
.crosslink-card:hover .crosslink-card__arrow { transform: translateX(8px); color: var(--c-lime); }
@media (max-width: 767px) { .crosslink-grid { grid-template-columns: 1fr; } }
/* --- CONTACT GRID --- */
.contact-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 1.25rem; }
/* padding bliżej prod (36px/28px) — mniej poziomego = szersza zawartość, mniej ciasno. */
.contact-card { background: rgba(255,255,255,.04); border: 1px solid var(--c-border-08); border-radius: var(--r-xl); padding: clamp(1.6rem, 3vw, 2.25rem) clamp(1.4rem, 2.5vw, 1.75rem); }
.contact-card__title { font-size: var(--fs-h4); font-weight: 700; margin-bottom: 1rem; }
.contact-card__img { width: 100%; height: auto; border-radius: var(--r-md); margin-bottom: 1.5rem; }
/* Nota — 14px / 300 / lh 1.65 / #888. Ujednolicone do rozmiaru pozostałych notek w karcie „Wolisz pogadać?" (decyzja Oskara 2026-06-04; prod miał tu 12px). */
.contact-card__note { color: #888888; font-size: var(--fs-sm); font-weight: 300; margin-top: 1rem; line-height: 1.65; }
/* Nota tuż pod tytułem („Zarezerwuj 30-min rozmowę") — tylko ciaśniejszy margines; rozmiar 14px dziedziczy z bazy. */
.contact-card__title + .contact-card__note { margin-top: .5rem; }
/* FIX ciasnoty: booking [piona_booking_calendar] miał margin 0 — przyklejony do tekstów. Dajemy oddech. */
.contact-card .piona-booking { margin-block: 1.6rem; }
/* Nota strategiczna = 14px (prod), lepsza czytelność; akapity z odstępem. */
.contact-card__note--strategic { font-size: var(--fs-sm); }
.contact-card__note--strategic strong { color: var(--c-cream); font-weight: 700; }
@media (max-width: 900px) { .contact-grid { grid-template-columns: 1fr; } }
/* --- REVEAL kierunkowy --- */
/* Karty: fade-UP z 52px (ZMIERZONE — scenario card pre-reveal = translateY(52px)). ZERO slajdów z boku;
każda wartość dir (left/right/up) = ten sam ruch w górę (prod nigdy nie wjeżdża bokiem). */
[data-reveal-dir] { transform: translateY(52px); }
/* (reset transform robi [data-reveal].is-visible z bloku bazowego — NIE duplikujemy tu, bo późniejsza
duplikata nadpisywała .scenario-card:hover translateY(-5px) → karty się nie unosiły.) */
@media (prefers-reduced-motion: reduce) { [data-reveal-dir] { transform: none; } }
}
/* ===================== FIX: odstęp process (intro p nie styka się z timeline) ===================== */
@layer components {
.section--process .piona-process-shortcode, .section--process .process { margin-top: 3rem; }
/* 768px h-scroll fix: reveal kart procesu używa transform:translateX(28px) (slide z prawej) na ≥768px;
w stanie przed-odsłonięciem wystaje ~20px za viewport → poziomy scroll. Clip sekcji przycina off-screen overflow
(mobile ≤767 używa translateY, więc tam to no-op). `clip` nie tworzy scroll-kontenera (sticky/reveal działają). */
.section--process { overflow-x: clip; }
}
/* ===================== KAFELKI PROCESU (Etap 1-5) — PORT z post7 (Customizer CSS ginie przy zmianie theme).
ZMIERZONE 1:1: fill kafelka + narożny zielony gradient ::after (prawy-dolny róg) + hover (lift, glow, h3→lime)
+ reveal slide-in z prawej (stagger --i) + node + linia. Kropka ::before WYŁĄCZONA (jak na prod, post7 l.641). ===================== */
@layer components {
/* !important — plugin process-steps-v3 (unlayered, l.316-317) bije mój @layer; post7 robił to samo. */
.piona-process-shortcode .process__body {
position: relative; overflow: hidden; isolation: isolate;
background: linear-gradient(135deg, rgba(22, 22, 22, .78) 0%, rgba(28, 28, 28, .52) 100%) !important;
border: 1px solid rgba(255, 255, 255, .08) !important; border-radius: 28px !important;
box-shadow: 0 24px 70px rgba(0, 0, 0, .34) !important;
backdrop-filter: blur(10px) !important; -webkit-backdrop-filter: blur(10px) !important;
transform: translateX(44px); opacity: 0;
transition: transform 620ms cubic-bezier(.4, 0, .2, 1), opacity 620ms ease, border-color 360ms ease, box-shadow 360ms ease, background 360ms ease !important;
}
.piona-process-shortcode .process__step .process__body { transition-delay: calc(var(--i, 0) * 90ms); }
.piona-process-shortcode .process__step.is-visible .process__body { transform: translateX(0); opacity: 1; }
/* narożny zielony gradient (prawy-dolny róg) */
.piona-process-shortcode .process__body::after {
content: ""; position: absolute; width: 320px; height: 320px; right: -165px; bottom: -165px;
background: radial-gradient(circle, rgba(180, 249, 90, .28), transparent 70%);
filter: blur(42px); opacity: .32; z-index: -1;
transition: opacity 360ms ease, transform 520ms ease;
}
/* hover kafelka */
.piona-process-shortcode .process__body:hover {
transform: translateX(0) translateY(-7px) !important;
border-color: rgba(180, 249, 90, .38) !important;
box-shadow: 0 32px 90px rgba(0, 0, 0, .42), 0 0 70px rgba(180, 249, 90, .16) !important;
background: linear-gradient(135deg, rgba(180, 249, 90, .08) 0%, rgba(22, 22, 22, .54) 100%) !important;
backdrop-filter: blur(22px) saturate(180%) !important; -webkit-backdrop-filter: blur(22px) saturate(180%) !important;
}
.piona-process-shortcode .process__body:hover::after { opacity: .9; transform: scale(1.15); }
/* teksty */
.piona-process-shortcode .process__body h3 { transition: color 260ms ease, transform 260ms ease, text-shadow 260ms ease; }
.piona-process-shortcode .process__body:hover h3 { color: var(--c-lime) !important; transform: translateX(5px); text-shadow: 0 0 30px rgba(180, 249, 90, .3); }
.piona-process-shortcode .process__body p { line-height: 1.75; transition: color 260ms ease; }
.piona-process-shortcode .process__body:hover p { color: rgba(245, 245, 243, .78) !important; }
/* node + linia */
/* Cyfra MUSI być nieruchoma i SPÓJNIE wycentrowana. ZERO ANIMOWANYCH transformacji na węźle z tekstem:
scale(1.08) na hover re-rasteryzował glif („snap"), a will-change dawał per-węzeł niespójność. Hover =
samo wypełnienie lime + glow (z pluginu) → tekst się nie rusza. Centrowanie X: flex (zmierzone ±0.1px).
Y: flex + line-height:1 sadza Archivo 700 ~0.4px NAD środkiem okręgu (zmierzone @DSF8 czerwoną linią
środka, z wykluczeniem pikseli pierścienia, jednorodnie na wszystkich węzłach). Korekta STATYCZNYM
translateY: transform renderuje sub-pikselowo BEZ device-pixel snappingu (top:.5px rozjeżdżał węzły —
„5" skakało na +0.7px; translateY NIE — zmierzone 0.4px → avg -0.07px, rozrzut 0.19px jak natywny).
„+" ma własny nudge w pluginie. */
.piona-process-shortcode .process__node { line-height: 1; }
.piona-process-shortcode .process__node:not(.process__node--plus) span { transform: translateY(.4px); }
/* Linia procesu: DÓŁ wygaszony do 0 (delikatny fade jak prod — wcześniej kończył się na .15 = ostre urwanie).
Jasna w środku, fade-in u góry, fade-out do transparent na dole. */
.piona-process-shortcode .process__line { background: linear-gradient(to bottom, rgba(180, 249, 90, .18) 0%, rgba(180, 249, 90, .92) 14%, rgba(180, 249, 90, .92) 66%, rgba(180, 249, 90, 0) 100%) !important; box-shadow: 0 0 24px rgba(180, 249, 90, .35); }
@media (max-width: 767px) {
.piona-process-shortcode .process__body { transform: translateY(28px); border-radius: 22px !important; }
.piona-process-shortcode .process__step.is-visible .process__body { transform: translateY(0); }
.piona-process-shortcode .process__body:hover { transform: translateY(-4px) !important; }
}
@media (prefers-reduced-motion: reduce) {
.piona-process-shortcode .process__body, .piona-process-shortcode .process__body::after, .piona-process-shortcode .process__node { transition: none !important; }
.piona-process-shortcode .process__body { opacity: 1 !important; transform: none !important; }
}
}
/* ===================== FORMULARZ FluentForms (ciemne pola + lime submit, niezależnie od Blocksy) ===================== */
/* Oryginał używał zmiennych Blocksy --theme-form-field-* (brak na nowym theme) -> stylujemy wprost. */
@layer components {
.contact-card .fluentform .ff-el-group { margin-bottom: 1rem; }
.contact-card .fluentform .ff-el-input--label label { display: block; color: var(--c-cream); font-weight: 500; font-size: var(--fs-sm); margin-bottom: 6px; }
/* Pola — ZMIERZONE z prod: bg rgba(255,255,255,.03), border 1px rgba(255,255,255,.06), radius 10px,
font 16px, pad 11px 15px. !important bije style FluentForms scope'owane na #fluentform_1 (ID > klasa). */
.contact-card .fluentform .ff-el-form-control,
.contact-card .fluentform input[type="text"],
.contact-card .fluentform input[type="email"],
.contact-card .fluentform input[type="tel"],
.contact-card .fluentform input[type="number"],
.contact-card .fluentform select,
.contact-card .fluentform textarea {
width: 100%; background: rgba(255,255,255,.03) !important; border: 1px solid rgba(255,255,255,.06) !important;
border-radius: 10px !important; color: var(--c-cream) !important; padding: 11px 13px !important;
box-shadow: none !important;
font-family: var(--ff); font-size: var(--fs-base); line-height: 1.4;
transition: border-color .2s var(--ease), background .2s var(--ease);
}
.contact-card .fluentform .ff-el-form-control:focus,
.contact-card .fluentform input:focus,
.contact-card .fluentform select:focus,
.contact-card .fluentform textarea:focus { outline: none; border-color: var(--c-border-hover) !important; background: rgba(255,255,255,.06) !important; }
/* WSZYSTKIE placeholdery + select = JEDEN kolor #616161 (jak prod). !important + specyficzność input/textarea::placeholder
bije default FluentForms (#868e96), który wcześniej wygrywał na inputach -> select był ciemniejszy niż reszta. */
.contact-card .fluentform ::placeholder,
.contact-card .fluentform input::placeholder,
.contact-card .fluentform textarea::placeholder { color: #616161 !important; opacity: 1 !important; }
.contact-card .fluentform textarea { min-height: 120px !important; resize: vertical; }
/* select placeholder „Czego potrzebujesz?" = muted #616161 jak placeholdery inputów. Specyficzność select.ff-el-form-control (0,3,1) bije grupową .ff-el-form-control (0,3,0) ustawiającą cream. */
.contact-card .fluentform select.ff-el-form-control,
.contact-card .fluentform select { color: #616161 !important; }
.contact-card .fluentform select option { color: var(--c-cream); background: var(--c-card-solid); }
.contact-card .fluentform select {
appearance: none; -webkit-appearance: none; cursor: pointer;
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 15 15' fill='%23B4F95A'%3E%3Cpath d='M2.1,3.2l5.4,5.4l5.4-5.4L15,4.3l-7.5,7.5L0,4.3L2.1,3.2z'/%3E%3C/svg%3E");
background-repeat: no-repeat; background-position: right 1em center; padding-right: 2.6em;
}
/* Submit = ten sam GRADIENT wipe co .btn--primary (referencja hover-test) + zielony glow podspodem.
border:0, gradient 220% poza kadrem w spoczynku = zero zielonych krawędzi. !important bije FF. */
.contact-card .fluentform .ff-btn-submit {
width: 100% !important; color: var(--c-ink) !important; border: 0 !important; border-radius: 50px !important;
background-image: linear-gradient(to right, var(--c-ink) 0 50%, var(--c-lime) 50% 100%) !important;
background-size: 220% 100% !important; background-position: right center !important; background-repeat: no-repeat !important;
padding: 13px 24px !important; font-family: var(--ff) !important; font-weight: 600 !important; font-size: var(--fs-sm) !important;
cursor: pointer; will-change: transform;
box-shadow: 0 0 22px rgba(180, 249, 90, .20) !important;
transition: background-position var(--t-wipe) var(--ease-btn), color var(--t-wipe) var(--ease-btn), transform var(--t-fast) var(--ease-btn), box-shadow var(--t-fast) var(--ease-btn) !important;
}
.contact-card .fluentform .ff-btn-submit:hover,
.contact-card .fluentform .ff-btn-submit:focus,
.contact-card .fluentform .ff-btn-submit:focus-visible {
background-position: left center !important; color: var(--c-lime) !important;
transform: translateY(-2px) !important;
box-shadow: 0 0 42px rgba(180, 249, 90, .42) !important;
}
@media (prefers-reduced-motion: reduce) { .contact-card .fluentform .ff-btn-submit:hover { transform: none !important; } }
.contact-card .fluentform .ff-el-form-check, .contact-card .fluentform .ff_list_buttons label { color: var(--c-muted-2); }
/* Komunikat sukcesu po wysłaniu — brand: zielona ramka + zaokrąglenie zamiast domyślnego FF (#ced4da, 0 radius, szary cień). FF unlayered → !important. */
.contact-card .ff-message-success,
.fluentform .ff-message-success {
border: 1px solid var(--c-border-hover) !important;
border-radius: var(--r-card) !important;
background: var(--c-glow-06) !important;
box-shadow: 0 0 22px rgba(180, 249, 90, .20) !important;
color: var(--c-cream);
}
}
/* ================================================================================
TYPOGRAFIA 1:1 — wartości ZMIERZONE z produkcji piona.studio/uslugi/branding/
(2026-06-03, viewport 1440). Nadpisuje wcześniejsze „na oko" rozmiary.
Zasada: dopasuj rozmiar/wagę/kolor do oryginału; clamp tylko dla skalowania mobile.
================================================================================ */
@layer components {
/* HERO */
.hero__heading { font-size: var(--fs-h1); line-height: 1.04; letter-spacing: -.04em; }
/* Tier --fs-display (65px) zostaje wyłącznie na HOME (.hero--home niżej). Culture-deck od 2026-08-17 ma H1 opisowy (62 zn.) i schodzi na standardowy tier --fs-h1 podstron; scoped override usunięty razem ze zmianą H1 (koszyk A paczki on-page). */
/* culture-deck: HIERARCHIA tekstu (korekta Oskara 2026-06-04: ujednolicenie do cream spłaszczyło czytelność). Nagłówki = najjaśniejsze (--c-cream), copy/opisy = ciemniejsze (--c-muted #8A8A8A) — parytet prod, którego body ≈ #888. Scoped page-id-2095 → blog (globalny .prose) nietknięty. @layer components > base = bije globalne .prose p. */
body.page-id-2095 .prose p { color: var(--c-muted); }
.hero__lead { font-size: var(--fs-base); line-height: 1.65; letter-spacing: .01em; font-weight: 400; color: var(--c-muted); max-width: none; }
.hero__stat-num { font-size: var(--fs-h3); font-weight: 800; line-height: 1; }
.hero__stat-label { font-size: var(--fs-base); line-height: 1.65; font-weight: 400; color: var(--c-cream); }
/* PRZYCISKI (CTA): tier --fs-ui (15px) — kontrolki poza skalą czytania */
.btn { font-size: var(--fs-ui); font-weight: 600; letter-spacing: .02em; }
/* SECTION LABEL: num --fs-section-num (13.6) lime, tekst --fs-2xs (11.2) muted uppercase */
.section-label__num { font-size: var(--fs-section-num); }
.section-label__text { font-size: var(--fs-2xs); letter-spacing: .25em; color: var(--c-muted); }
/* SECTION H2 (.heading): tier --fs-h2 (40px) / 700 / cream */
.heading { font-size: var(--fs-h2); font-weight: 700; line-height: 1.06; letter-spacing: -.04em; color: var(--c-cream); }
.section--contact .heading { font-weight: 800; color: var(--c-cream); }
/* subtitle: tier --fs-base (16px; było 16.8 → świadomy snap -0.8). 300/#888, max-width none = 1 linia. */
.section-subtitle { font-size: var(--fs-base); font-weight: 300; line-height: 1.65; color: #888888; max-width: none; }
/* SCOPE */
.scope-row__num { font-size: var(--fs-section-num); }
.scope-row__title { font-size: var(--fs-h3); font-weight: 800; line-height: 1.1; }
.scope-row__desc { font-size: var(--fs-base); line-height: 1.65; color: var(--c-muted); }
/* SCENARIO (Dla kogo = lime) / ARGUMENT (Dlaczego = cream) — oba tier --fs-h4 (24px)/700 */
.scenario-card__title { font-size: var(--fs-h4); font-weight: 700; line-height: 1.15; letter-spacing: -.02em; color: var(--c-cream); }
.section--scenarios .scenario-card__title { color: var(--c-lime); }
.scenario-card__desc { font-size: var(--fs-base); line-height: 1.65; color: var(--c-muted); }
.scenario-card__eyebrow { font-size: var(--fs-base); font-weight: 400; letter-spacing: normal; text-transform: none; color: var(--c-lime); }
/* INVESTMENT — cena load-bearing 35px: ŚWIADOMY wyjątek między --fs-h3(30) a --fs-h2(40), prominencja wyceny */
.investment-box__price { font-size: clamp(1.7rem, 2.8vw, 35px); font-weight: 800; }
/* CROSSLINK — tier --fs-h4 (24px) */
.crosslink-card__title { font-size: var(--fs-h4); font-weight: 700; line-height: 1.1; color: var(--c-cream); }
.crosslink-card__desc { font-size: var(--fs-base); line-height: 1.6; color: var(--c-muted); }
/* FAQ */
.faq__question { font-size: var(--fs-base); font-weight: 600; }
/* TAG PILLS — rozmiar ustawiony w bloku komponentu (12px, ZMIERZONE z prod) */
}
/* ===================== FIX: „skok" zdjęcia case-card przy un-hover =====================
Plugin portfolio: .case-card:hover .case-card__thumb { transform: scale(1.05) } z transition .6s,
ale BEZ will-change → na końcu skalowania przeglądarka re-rasteryzuje obraz = widoczny „skok".
FIX (jak przy pillach/buttonie): stabilna warstwa GPU. Obraz renderowany raz, skalowany kompozytowo,
zero re-rasteryzacji. Właściwości addytywne (plugin ich nie ustawia) → brak konfliktu specyficzności. */
.case-card__thumb,
.case-card__placeholder {
will-change: transform;
backface-visibility: hidden;
-webkit-backface-visibility: hidden;
transform-origin: center center;
}
/* ====================================== HUB USŁUG — grid kart usług (page-uslugi). Zmierzone z post-1991.css, akcent→token lime, tekst→#F5F5F3, gap nadany (prod=0 artefakt). */
.services-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(16px, 2vw, 24px); }
@media (max-width: 1024px) { .services-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 767px) { .services-grid { grid-template-columns: 1fr; } }
/* Scope do .services-grid — komponent karty huba NIE moze wyciekac na karty kontaktu (markup: service-card contact-card). Inaczej formularz leadowy animuje sie/swieci na hover = rozprasza. */
.services-grid .service-card {
position: relative; display: block; overflow: hidden; isolation: isolate; padding: 32px 26px; border-radius: 22px;
background: linear-gradient(135deg, rgba(22,22,22,.74), rgba(28,28,28,.48)); border: 1px solid var(--c-border-08);
backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); text-decoration: none;
transition: transform var(--t-card) var(--ease), border-color var(--t-card) var(--ease), box-shadow var(--t-card) var(--ease), background var(--t-card) var(--ease), backdrop-filter var(--t-card) var(--ease);
}
.services-grid .service-card::after { content: ""; position: absolute; right: -145px; bottom: -145px; width: 280px; height: 280px; background: radial-gradient(circle, var(--c-glow-30) 0%, var(--c-glow-08) 38%, transparent 72%); opacity: .36; pointer-events: none; transition: opacity var(--t-card) var(--ease), transform var(--t-card) var(--ease); }
.services-grid .service-card:hover { transform: translateY(-3px); border-color: var(--c-border-hover); box-shadow: 0 28px 80px var(--c-glow-20); background: linear-gradient(135deg, var(--c-glow-10), rgba(22,22,22,.46)); backdrop-filter: blur(22px) saturate(180%); -webkit-backdrop-filter: blur(22px) saturate(180%); }
.services-grid .service-card:hover::after { opacity: .92; transform: scale(1.15); }
.services-grid .service-card__title { font-size: var(--fs-h5); line-height: 1.12; font-weight: 700; margin-bottom: 22px; color: var(--c-cream); transition: color var(--t-card) var(--ease), transform var(--t-card) var(--ease), text-shadow var(--t-card) var(--ease); }
.services-grid .service-card:hover .service-card__title { color: var(--c-lime); transform: translateX(4px); text-shadow: 0 0 28px var(--c-glow-30); }
.services-grid .service-card__desc { font-size: var(--fs-sm); font-weight: 300; line-height: 1.75; color: var(--c-muted); transition: color var(--t-card) var(--ease); }
.services-grid .service-card:hover .service-card__desc { color: rgba(245,245,243,.78); }
/* ====================================== CENNIK — dodatkowe usługi (page-dodatkowe-uslugi). Z piona-cennik/front.css, akcent #a6ff3f→token lime, tekst→off-white, bez inline !important. */
.piona-price { position: relative; width: 100%; color: var(--c-cream); }
.piona-price__filters { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; margin: 0 0 54px; }
.piona-price__filter { min-height: 48px; padding: 11px 18px; border: 1px solid var(--c-border); border-radius: 14px; background: rgba(255,255,255,.015); color: var(--c-cream); font: inherit; font-size: var(--fs-sm); font-weight: 650; line-height: 1; cursor: pointer; transition: color var(--t-wipe) var(--ease), border-color var(--t-wipe) var(--ease), background var(--t-wipe) var(--ease), box-shadow var(--t-wipe) var(--ease), transform var(--t-fast) var(--ease); }
.piona-price__filter:hover { transform: translateY(-1px); }
.piona-price__filter:hover, .piona-price__filter.is-active { color: var(--c-ink-deep); border-color: var(--c-lime); background: var(--c-lime); box-shadow: 0 0 24px var(--c-glow-20); }
.piona-price__table { border-top: 1px solid var(--c-border); }
.piona-price__row { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 24px; align-items: center; min-height: 58px; padding: 16px 32px; border-bottom: 1px solid var(--c-border); background: linear-gradient(90deg, rgba(255,255,255,.018), rgba(255,255,255,0)); transition: background var(--t-wipe) var(--ease), border-color var(--t-wipe) var(--ease); }
.piona-price__row:hover { background: linear-gradient(90deg, var(--c-glow-06), rgba(255,255,255,0)); border-bottom-color: var(--c-glow-20); }
.piona-price__row.is-hidden { display: none; }
.piona-price__name { color: var(--c-cream); font-size: var(--fs-h5); font-weight: 500; line-height: 1.25; }
.piona-price__value { color: var(--c-lime); font-size: var(--fs-h4); font-weight: 800; line-height: 1; white-space: nowrap; text-align: right; }
.piona-price__cta { display: flex; align-items: center; justify-content: space-between; gap: 24px; margin-top: 42px; padding: 30px 38px; border: 1px solid var(--c-border-hover); border-radius: var(--r-md); background: linear-gradient(120deg, var(--c-glow-06), rgba(255,255,255,.012)); box-shadow: inset 0 0 34px var(--c-glow-06); }
.piona-price__cta strong { display: block; color: var(--c-cream); font-size: var(--fs-h4); line-height: 1.15; margin: 0 0 8px; }
.piona-price__cta p { margin: 0; color: var(--c-muted-2); font-size: var(--fs-base); line-height: 1.45; }
@media (max-width: 1024px) { .piona-price__filters { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; margin-bottom: 34px; } .piona-price__row { padding: 15px 18px; } .piona-price__name { font-size: 18px; } .piona-price__value { font-size: 20px; } }
@media (max-width: 767px) {
.piona-price__filters { display: flex; gap: 10px; overflow-x: auto; margin: 0 -16px 28px; padding: 0 16px 8px; scrollbar-width: none; }
.piona-price__filters::-webkit-scrollbar { display: none; }
.piona-price__filter { flex: 0 0 auto; min-height: 40px; padding: 10px 18px; border-radius: var(--r-pill); font-size: 13px; }
.piona-price__row { grid-template-columns: minmax(0, 1fr); gap: 6px; min-height: auto; padding: 15px 0; background: transparent; }
.piona-price__name { font-size: 16px; line-height: 1.32; } .piona-price__value { text-align: left; font-size: 20px; }
/* CTA-kafelek mobile: NIE display:block (zabijal gap z flexa → tekst stykal sie z buttonem losowym
leadingiem line-boxu, fix 2026-06-10). Flex zostaje, tylko kierunek na kolumne + kontrolowany gap. */
.piona-price__cta { flex-direction: column; align-items: flex-start; gap: 18px; margin-top: 30px; padding: 24px 20px; } .piona-price__cta strong { font-size: 18px; } .piona-price__cta p { font-size: 14px; }
}
/* ====================================== Responsywne łamanie nagłówków (intencjonalne, per urządzenie).
.br-desk = złamanie TYLKO ≥768px (na mobile linia płynie naturalnie z text-wrap:balance — bez izolowania słów).
.br-mob = złamanie TYLKO <768px. Użycie:
/
w dowolnym nagłówku.
Zostaw spację po stronie, która zostaje sklejona przy ukrytym br (np. "Logo.
Identyfikacja"). */
br.br-desk { display: none; }
br.br-mob { display: inline; }
@media (min-width: 768px) { br.br-desk { display: inline; } br.br-mob { display: none; } }
/* Hero wariant LISTING (na-jezykach/blog) — ten sam .hero--subpage (gradient, center), ale ciasniejszy dol (listing tuz pod hero, nie koniec strony). Bez stats/CTA/divider = nie renderowane w markupie. */
.hero--listing { padding-bottom: clamp(2.5rem, 5vw, 4rem); }
/* Lead listingu: świadomie BEZ max-width (1 linia na desktopie — decyzja Oskara 2026-06-04). Audyt sugerował 46ch (measure 45-75), ale dla krótkiego, glanceable lead'u w hero 1 linia czyta się lepiej niż wymuszone łamanie na 2; na mobile zawija się naturalnie (kontener 1320 i tak ogranicza). NIE re-flagować jako TYPO-01. */
/* Complianz cookie-statement na dark theme — plugin zaklada jasny motyw; wymuszamy czytelnosc tekstu/linkow w .legal-page. */
.legal-page .cmplz-document { color: var(--c-cream); }
.legal-page .cmplz-document a { color: var(--c-lime); }
.legal-page .cmplz-document th, .legal-page .cmplz-document td { border-color: var(--c-border); }
/* Complianz LISTA USLUG na stronie polityki (#cmplz-cookies-overview, sekcja "Umieszczone pliki cookie").
Plugin (document.min.css, unlayered) maluje akordeony pod jasny motyw: .cmplz-dropdown
rgba(239,239,239,.25), summary rgba(239,239,239,.5), tabele cookies bialo (#fff komorki /
#f7f7f7 naglowki / #dadada ramki) -> kremowy tekst marki nieczytelny (ten sam problem co
wczesniej w banerze). Przenosimy na ciemna palete — parytet z wierszami banera.
piona.css laduje sie PO document.min.css i oba sa unlayered; selektor .legal-page #id .class
ma >= specyficznosc pluginu -> wygrywa kolejnoscia (rowna spec.) lub wprost (wyzsza). */
.legal-page #cmplz-cookies-overview .cmplz-dropdown {
background-color: transparent;
border: 1px solid var(--c-border-08);
border-radius: 10px;
margin-bottom: 10px;
overflow: hidden;
}
/* Pasek naglowka uslugi — ciemna powierzchnia (parytet z wierszami banera). */
.legal-page #cmplz-cookies-overview .cmplz-dropdown summary {
background-color: rgba(255,255,255,.04);
margin: 0;
padding: 12px 16px;
transition: background-color var(--t-fast) var(--ease);
}
.legal-page #cmplz-cookies-overview .cmplz-dropdown summary:hover { background-color: var(--c-glow-06); }
.legal-page #cmplz-cookies-overview .cmplz-dropdown[open] summary { border-bottom: 1px solid var(--c-border-08); }
/* Nazwa uslugi = kremowa; podtytul (np. "Website traffic statistics") = stonowany dla hierarchii. */
.legal-page #cmplz-cookies-overview .cmplz-dropdown summary h3 { color: var(--c-cream); }
.legal-page #cmplz-cookies-overview .cmplz-dropdown summary p { color: var(--c-muted-2); }
/* Chevron — domyslny SVG jest ciemny (znika na ciemnym tle); podmiana na limonkowy (afordancja "rozwin"). */
.legal-page #cmplz-cookies-overview .cmplz-dropdown summary div:after {
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 18 18'%3E%3Cpath d='M4 6.5l5 5.5 5-5.5' fill='none' stroke='%23B4F95A' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
}
/* Tresc rozwinieta (opis uzycia + udostepnianie danych) — tekst kremowy. */
.legal-page #cmplz-cookies-overview .cmplz-dropdown .cmplz-service-description,
.legal-page #cmplz-cookies-overview .cmplz-dropdown .cmplz-sharing-data { color: var(--c-cream); }
/* Tabela cookies (cookies-per-purpose) — plugin maluje bialo; ciemne komorki + subtelne linie siatki. */
.legal-page #cmplz-cookies-overview .cmplz-dropdown .cookies-per-purpose {
border-color: var(--c-border-08);
background-color: rgba(255,255,255,.10);
}
.legal-page #cmplz-cookies-overview .cmplz-dropdown .cookies-per-purpose div {
background-color: var(--c-card-solid);
color: var(--c-cream);
}
.legal-page #cmplz-cookies-overview .cmplz-dropdown .cookies-per-purpose .name-header,
.legal-page #cmplz-cookies-overview .cmplz-dropdown .cookies-per-purpose .retention-header,
.legal-page #cmplz-cookies-overview .cmplz-dropdown .cookies-per-purpose .function-header {
background-color: rgba(255,255,255,.07);
}
/* Inline panel zgody na stronie polityki (sekcja 7.1, shortcode [cmplz-manage-consent]).
To NIE jest popup (.cmplz-cookiebanner — juz naprawiony), tylko #cmplz-manage-consent-container.
Plugin: .cmplz-category bg rgba(239,239,239,.25), .cmplz-category-header rgba(239,239,239,.5)
-> jasnoszare paski (ten sam defekt). Zmienne --cmplz_* (tekst kremowy, lime "zawsze aktywne",
suwaki) dziedziczy juz z banner-override (kontener wspoldzielony). Tu domykamy tylko TLO paskow,
parytet z akordeonami uslug. Spec. z chained .cmplz-manage-consent-container (1,4,0)/(1,5,0) > plugin. */
.legal-page #cmplz-manage-consent-container.cmplz-manage-consent-container .cmplz-categories .cmplz-category {
background-color: transparent;
border: 1px solid var(--c-border-08);
border-radius: 10px;
overflow: hidden;
}
.legal-page #cmplz-manage-consent-container.cmplz-manage-consent-container .cmplz-categories .cmplz-category .cmplz-category-header {
background-color: rgba(255,255,255,.04);
transition: background-color var(--t-fast) var(--ease);
}
.legal-page #cmplz-manage-consent-container.cmplz-manage-consent-container .cmplz-categories .cmplz-category summary:hover .cmplz-category-header {
background-color: var(--c-glow-06);
}
/* Complianz BANNER ZGODY (popup + panel preferencji) — brand override PIONA.
Wygenerowany banner-1-optin.css uzywa domyslnego JASNEGO motywu pluginu w srodku
panelu: wiersze kategorii rgba(239,239,239,.5) na tle #161616 daja jasnoszary
(~#828282), a tekst jest bialy -> ~3.7:1, opisy 12px nieczytelne. Do tego
"Zawsze aktywne" = green (#008000, ~1.4:1) i suwaki blood-red (#901d2a) / prawie
czarny ON (#212121). Plugin wstrzykuje swoj CSS w RUNTIME (po piona.css), wiec na
rownej specyficznosci by wygral. Strategia odporna na kolejnosc ladowania:
1) zmienne --cmplz_* redefiniujemy na KONTENERZE banera -> descendant dziedziczy
wartosc z blizszego przodka niz :root pluginu (wygrywa niezaleznie od kolejnosci);
2) tlo wierszy jest HARDCODED (nie zmienna) -> podbijamy specyficznosc 0,4,0 > 0,3,0. */
.cmplz-cookiebanner,
.cmplz-manage-consent-container,
#cmplz-manage-consent .cmplz-manage-consent {
--cmplz_banner_background_color: var(--c-card-solid); /* #161616 (bez zmian, domykamy palete) */
--cmplz_text_color: var(--c-cream); /* #F5F5F3 — kremowy body marki */
--cmplz_hyperlink_color: var(--c-lime);
--cmplz_category_header_always_active_color: var(--c-lime); /* "Zawsze aktywne" -> lime, nie #008000 */
--cmplz_slider_inactive_color: rgba(255,255,255,.22); /* OFF: neutralny szary zamiast czerwieni */
--cmplz_slider_active_color: var(--c-lime); /* ON: lime = brand "aktywne" */
--cmplz_slider_bullet_color: var(--c-cream);
/* Przyciski wtorne (Odmow / Zapisz preferencje): #000 -> brand ink + hairline.
Akceptuje zostaje limonkowy (primary CTA), prominencja Odmow zachowana (solid). */
--cmplz_button_deny_background_color: var(--c-ink);
--cmplz_button_deny_border_color: rgba(255,255,255,.14);
--cmplz_button_deny_text_color: var(--c-cream);
--cmplz_button_settings_background_color: var(--c-ink);
--cmplz_button_settings_border_color: rgba(255,255,255,.14);
--cmplz_button_settings_text_color: var(--c-cream);
}
/* Wiersze kategorii — ciemna powierzchnia + hairline + radius (spec 0,4,0 > plugin 0,3,0). */
.cmplz-cookiebanner .cmplz-categories .cmplz-category.cmplz-category {
background-color: rgba(255,255,255,.04);
border: 1px solid var(--c-border-08);
border-radius: 8px;
}
/* Suwak ON: bullet ciemny na limonkowym torze (bialy bullet na lime = niewidoczny). */
.cmplz-cookiebanner .cmplz-categories .cmplz-category .cmplz-banner-checkbox input.cmplz-consent-checkbox:checked + .cmplz-label:after {
background: var(--c-ink);
}
/* Founders (plugin wspoldzielony piona-founders-cards) — foto KWADRAT 1:1 + zaokraglone gorne rogi.
Parytet prod (ZMIERZONE @1440: prod foto 627x627 aspect 1:1, border-radius 25px 25px 0 0; customizer prod nadpisuje plugin globalnie na calej witrynie). Plugin domyslnie aspect-ratio 4/3, bez radius.
UNLAYERED (poza @layer) celowo: plugin wstrzykuje inline CSS unlayered, a unlayered zawsze bije @layer; do tego selektor 0,2,0 > plugin 0,1,0. Scoped .piona-founders = tylko karty pluginu. */
.piona-founders .piona-founder-card__photo {
aspect-ratio: 1 / 1;
border-radius: 25px 25px 0 0;
}
/* Founders hover-clip fix (parytet prod). Plugin domyslnie .piona-founders{overflow:hidden} (do przyciecia __glow), ale karta na :hover robi translateY(-6px) + duzy box-shadow → gorna krawedz/cien byly ucinane. Prod nadpisuje na overflow:visible (+ body{overflow-x:hidden} u siebie). Tu: overflow:visible (body selektor 0,1,1 > plugin 0,1,0 unlayered) pokazuje pelny hover lift+cien. Zamiast globalnej zmiany body (quirk propagacji body→viewport NIE przycial glow) konteneruje sam glow: right:-10% → right:0, glow miesci sie w boxie .piona-founders → zero h-scroll, hover lift (pionowy) i tak nie powoduje h-scroll. */
body .piona-founders { overflow: visible; }
.piona-founders .piona-founders__glow { right: 0; }
/* ============================================================================
HOME (front-page.php) — komponenty HOME-only. Sportowane z prod, na tokenach.
Hero = wariant 2-kol (.hero--home: treść lewo | orbit prawo), H1 tier --fs-display.
============================================================================ */
/* Hero HOME layout — PEŁNA WYSOKOŚĆ EKRANU (parytet prod ≈100vh, treść wyśrodkowana pionowo) + 2-kol (treść lewo | orbit prawo). */
.hero--home { min-height: 100vh; min-height: 100svh; display: grid; align-content: center; }
/* HOME hero: grupa [content | orbita] wyśrodkowana we flexie, duży gap (orbita przesunięta w prawo), max-width none = grupa centruje się względem viewportu. */
.hero--home .hero__inner { display: flex; flex-direction: row; justify-content: center; align-items: center; gap: clamp(2rem, 14.5vw, 14rem); text-align: left; max-width: none; }
.hero--home .hero__content { display: flex; flex-direction: column; align-items: flex-start; flex: 0 1 620px; min-width: 0; }
.hero--home .hero__visual { flex: 0 0 clamp(360px, 36vw, 500px); width: clamp(360px, 36vw, 500px); height: clamp(380px, 33vw, 465px); }
.hero--home .hero__heading { font-size: var(--fs-display); line-height: 1.02; letter-spacing: -.04em; }
.hero--home .hero__lead { max-width: 52ch; }
.hero--home .hero__cta-group { justify-content: flex-start; flex-wrap: nowrap; width: max-content; }
/* Wąski desktop (981–1240): kolumna contentu za wąska, grupa wystawałaby na orbitę → wrap (buttony jeden pod drugim, graceful). */
@media (min-width: 981px) and (max-width: 1240px) { .hero--home .hero__cta-group { flex-wrap: wrap; width: auto; } }
/* HOME: nagłówki sekcji WYŚRODKOWANE (eyebrow/H2/subtitle bezpośrednio w .container) — parytet prod.
Karty/shortcode'y/teaser/kontakt NIETKNIĘTE (zagnieżdżone głębiej / inne klasy / własne wyśrodkowanie). */
body.home .section > .container > .pill { display: flex; width: fit-content; margin-inline: auto; }
body.home .section > .container > .heading { text-align: center; }
/* Hero orbit-stats — 3 floating cards + pulsujący pierścień. */
.hero__visual { position: relative; isolation: isolate; width: 100%; height: clamp(460px, 40vw, 560px); }
.hero__ring { --ring-d: clamp(280px, 25vw, 350px); position: absolute; top: 16%; left: 16%; width: var(--ring-d); height: var(--ring-d); border: 1px solid var(--c-glow-10); border-radius: 50%; filter: drop-shadow(0 0 40px var(--c-glow-20)); animation: piona-hero-ring-pulse 7s ease-in-out infinite; }
/* Kropka orbituje subtelnie po linii okręgu (rotate+translate po promieniu) i CHOWA SIĘ (opacity→0) dokładnie w zakresach kątowych kafelków @12:00/4:00/8:00 — zero prześwitu przez glass. */
.hero__ring::before { content: ""; position: absolute; top: 50%; left: 50%; width: 8px; height: 8px; margin: -4px 0 0 -4px; background: var(--c-lime); border-radius: 50%; box-shadow: 0 0 10px var(--c-glow-30); transform-origin: center; transform: rotate(300deg) translateY(calc(var(--ring-d) / -2)); animation: piona-hero-dot-orbit 20s linear infinite, piona-hero-dot-fade 20s linear infinite; }
.hero__float { position: absolute; overflow: hidden; isolation: isolate; width: clamp(168px, 14vw, 200px); padding: 16px 20px; border-radius: 22px; background: linear-gradient(135deg, rgba(22,22,22,.78), rgba(28,28,28,.52)); border: 1px solid var(--c-border-08); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); box-shadow: 0 24px 70px rgba(0,0,0,.34); animation: piona-hero-card-in 760ms var(--ease-mui) both, piona-hero-card-float 5.8s ease-in-out infinite; transition: transform var(--t-card) var(--ease), border-color var(--t-card) var(--ease), box-shadow var(--t-card) var(--ease), background var(--t-card) var(--ease); }
.hero__float::after { content: ""; position: absolute; width: 260px; height: 260px; right: -135px; bottom: -135px; background: radial-gradient(circle, var(--c-glow-30), transparent 70%); filter: blur(38px); opacity: .34; z-index: -1; transition: opacity var(--t-card) var(--ease), transform var(--t-card) var(--ease); }
.hero__float--1 { top: 5.7%; left: 31%; animation-delay: 0ms, 900ms; } /* 17.8M+ ~12:00 — góra okręgu (przeliczone dla mniejszego visuala 500×465) */
.hero__float--2 { top: 64%; left: 61.4%; animation-delay: 140ms, 1200ms; } /* 10+ ~4:00 — dół-prawo */
.hero__float--3 { top: 62.5%; left: 0.6%; animation-delay: 280ms, 1500ms; } /* 24H ~8:00 — dół-lewo */
.hero__float-num { display: block; font-size: var(--fs-h4); font-weight: 800; color: var(--c-lime); line-height: 1; }
.hero__float-label { display: block; margin-top: 6px; font-size: var(--fs-2xs); color: var(--c-muted); text-transform: uppercase; letter-spacing: .08em; line-height: 1.3; }
.hero__float:hover { border-color: var(--c-glow-45); box-shadow: 0 32px 90px rgba(0,0,0,.44), 0 0 70px var(--c-glow-20); background: linear-gradient(135deg, var(--c-glow-10), rgba(22,22,22,.54)); }
.hero__float:hover::after { opacity: .92; transform: scale(1.15); }
@keyframes piona-hero-card-in { from { opacity: 0; transform: translateY(28px) scale(.96); } to { opacity: 1; transform: translateY(0) scale(1); } }
@keyframes piona-hero-card-float { 0%, 100% { translate: 0 0; } 50% { translate: 0 -10px; } }
@keyframes piona-hero-ring-pulse { 0%, 100% { transform: scale(1); opacity: .9; } 50% { transform: scale(1.04); opacity: 1; } }
/* Orbita kropki: pełny obrót po promieniu okręgu (20s, liniowo). */
@keyframes piona-hero-dot-orbit { from { transform: rotate(0deg) translateY(calc(var(--ring-d) / -2)); } to { transform: rotate(360deg) translateY(calc(var(--ring-d) / -2)); } }
/* Fade zsynchronizowany z orbitą: opacity 0 w zakresach kafelków (12:00≈0/100%, 4:00≈33%, 8:00≈66%), 1 w lukach. */
@keyframes piona-hero-dot-fade { 0%, 8% { opacity: 0; } 13%, 25% { opacity: 1; } 30%, 37% { opacity: 0; } 42%, 57% { opacity: 1; } 62%, 70% { opacity: 0; } 75%, 87% { opacity: 1; } 92%, 100% { opacity: 0; } }
/* Culture-deck teaser (HOME): 2-kol (tekst | galeria). */
.home-culture-teaser { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(2rem, 5vw, 5rem); align-items: center; }
.home-culture-teaser__text { display: flex; flex-direction: column; align-items: flex-start; }
.home-culture-teaser__text > p:not(.pill) { color: var(--c-muted); } /* opis „Manifest…" szary jak prod (NIE cream) */
.home-culture-teaser__text .section__cta-center { margin-top: 1.6rem; }
/* Culture-deck galeria na mobile: wtyczka daje sztywne height:560px, a stage to kwadrat 76% szer. (~266px) → ~147px pustki nad i pod zdjęciem.
height:auto = kontener przylega do kwadratowego stage'a (responsywnie); padding-block daje miejsce na skośne karty stacku. Tnie pustkę ~75%. */
@media (max-width: 767px) {
.home-culture-teaser__media .piona-gallery { height: auto; padding-block: 1.5rem; }
}
/* HOME responsywność */
@media (max-width: 980px) {
.hero--home .hero__inner { flex-direction: column; align-items: flex-start; gap: clamp(1.5rem, 6vw, 2.5rem); }
.hero--home .hero__content { flex: none; }
.hero--home .hero__visual { flex: none; width: 100%; max-width: 520px; height: clamp(360px, 56vw, 460px); }
.home-culture-teaser { grid-template-columns: 1fr; }
}
@media (max-width: 767px) {
/* HERO HOME mobile fix (2026-06-09) — parytet starego Elementora (baseline-prod/home_390): wyśrodkowany 1-kol, buttony stack 1-linia.
KORZEŃ regresji: .hero--home .hero__cta-group (nowrap + width:max-content) bez resetu poniżej 980px rozpychał kolumnę treści
do max-content (~622px) → ucięty H1, niewidoczny 2. przycisk, karta 24H poza ekranem. Zweryfikowane Playwright @360/390/430. */
/* Układ „framing": pill+H1 u GÓRY, lead+CTA u DOŁU — środek hero WOLNY na gest „zbicia PIONY" z wideo (premium video-hero).
Mechanizm: hero rozciąga się na pełny ekran (align-content:stretch), content wypełnia wysokość (flex:1),
a margin-top:auto na leadzie spycha lead+CTA na dół → pomiędzy H1 a leadem powstaje wolne okno na wideo. */
.hero--home { align-content: stretch; padding-top: calc(var(--header-h, 65px) + 2.75rem); padding-bottom: 1.25rem; } /* pill+H1 ~25% wyżej (145px → ~109px); lead+CTA ~30% niżej (padding-bottom 80px → 20px) — większe okno na gest „zbicia PIONY". */
.hero--home .hero__inner { flex-direction: column; align-items: center; text-align: center; width: 100%; max-width: 100%; align-self: stretch; }
.hero--home .hero__content { flex: 1 1 auto; align-items: center; text-align: center; width: 100%; max-width: 100%; }
.hero--home .hero__heading { overflow-wrap: break-word; }
.hero--home .hero__lead { margin-top: auto; margin-inline: auto; }
/* CTA-group mobile — WSPÓLNY pattern dla WSZYSTKICH hero (home + subpage + 404 + uslugi).
Fix 2026-06-10: pierwotnie przypiety do .hero--home → hero--subpage (7 stron uslug) zostal pominiety
i dlugi primary ucinalo z obu stron na telefonach (iPhone 11 Pro 375px). Generalizacja selektora
= jeden pattern, zero forka per wariant hero. :is() trzyma specyficznosc (0,2,0) = remis z regula
.hero--home .hero__cta-group (l.1060, width:max-content) → wygrywa source order, home bez regresji. */
:is(.hero, .error-hero) .hero__cta-group { width: 100%; flex-direction: column; align-items: center; gap: .75rem; }
/* Długi primary mieści się w 1 linii dopiero ≤13px (nowrap → min-szer. przycisku = szer. tekstu w 1 linii); parytet Elementora.
white-space:normal + balance = graceful fallback <360px: label zawija do 2 wyśrodkowanych linii zamiast clippingu. */
:is(.hero, .error-hero) .hero__cta-group .btn { font-size: 13px; letter-spacing: 0; white-space: normal; text-wrap: balance; }
:is(.hero, .error-hero) .hero__cta-group .btn--primary { width: 100%; max-width: 400px; justify-content: center; padding-left: 1.1em; padding-right: 1.1em; }
/* Orbit-staty (18M+/10+/24H) UKRYTE na mobile — decyzja 2026-06-09: czysty skupiony hero, więcej oddechu, bliżej minimalnego looku.
Orbit (ring + floaty) renderuje się WYŁĄCZNIE na desktopie/tablecie (≥768px); na mobile zostaje sam content (pill/H1/lead/CTA). */
.hero--home .hero__visual { display: none; }
}
@media (prefers-reduced-motion: reduce) { .hero__float, .hero__ring, .hero__ring::before { animation: none !important; } .hero__ring::before { opacity: 1; } }
/* =========================================================================
404 / ERROR-HERO — strona bledu (404.php). Wzorzec hero--subpage:
lime glow od dolu + center + wjazd pod sticky header. Gigantyczna typografia
404; srodkowe „0" = pusty kontur lime (brakujaca strona), z fallbackiem na
pelne lime italic gdy brak -webkit-text-stroke (gramatyka em jak h1 em).
========================================================================= */
@layer components {
.error-hero {
position: relative;
margin-top: calc(-1 * var(--header-h, 83px));
padding-top: calc(var(--header-h, 83px) + clamp(3rem, 6vw, 72px));
padding-bottom: clamp(3.5rem, 7vw, 84px);
min-height: 100svh;
display: flex;
align-items: center;
background: radial-gradient(ellipse 60% 100% at 50% 100%, var(--c-glow-45), var(--c-glow-08) 45%, transparent 75%);
text-align: center;
}
.error-hero__inner { display: flex; flex-direction: column; align-items: center; }
.error-hero__code {
font-weight: 800;
font-size: clamp(6.5rem, 20vw, 15rem);
line-height: .85;
letter-spacing: -.04em;
color: var(--c-cream);
margin-top: 1.8rem;
white-space: nowrap;
user-select: none;
}
.error-hero__code em { font-style: italic; color: var(--c-lime); } /* fallback: pelne lime „0" */
@supports (-webkit-text-stroke: 2px #000) {
.error-hero__code em {
color: transparent;
-webkit-text-stroke: 2.5px var(--c-lime);
text-shadow: 0 0 44px rgba(180, 249, 90, .30);
}
}
.error-hero__heading {
font-size: var(--fs-h2);
font-weight: 800;
letter-spacing: -.03em;
line-height: 1.08;
margin-block: 2rem 1.1rem;
}
/* lead: te same metryki co .hero__lead na podstronach */
.error-hero__lead { color: var(--c-muted-2); font-size: var(--fs-lead); max-width: 46ch; margin-bottom: 2.4rem; }
.error-hero__grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 1.25rem;
width: 100%;
text-align: left;
}
@media (max-width: 980px) {
.error-hero__grid { grid-template-columns: 1fr; max-width: 560px; margin-inline: auto; }
}
@media (max-width: 767px) {
.error-hero { min-height: auto; }
.error-hero .crosslink-card { padding: 1.6rem 1.4rem; }
.error-hero .hero__divider { margin-block: 2.6rem; }
}
}
/* ============================================================================
STRONA OSOBY (CPT piona_founder) — /zespol//
Kanoniczny dom encji Person. Layout skladany z komponentow, ktore juz istnieja:
portret reuzywa .piona-founder-card__photo z pluginu founders (identyczny kadr 4/3
i gradient co karty na /culture-deck/), typografia bio to globalny .prose.
Tu wylacznie to, czego nie da sie zlozyc z istniejacych klas: siatka portret+bio
i lista artykulow. Klasy wystepuja WYLACZNIE w single-piona_founder.php, wiec zaden
inny szablon ich nie lapie — dlatego bez scope'u na body, zgodnie z BEM reszty arkusza.
============================================================================ */
@layer components {
.person-intro {
display: grid;
grid-template-columns: minmax(0, 360px) minmax(0, 1fr);
gap: clamp(2rem, 4vw, 3.5rem);
align-items: start;
}
.person-intro__photo {
border: 1px solid rgba(255, 255, 255, .06);
border-radius: 24px;
overflow: hidden;
}
/* Portret BEZ przycinania. Zdjecia founderow to kwadraty (oryginal 2048x2048, ZMIERZONE),
wiec kazda inna ramka + background-size:cover obcina kadr. Ramka 4/3 z karty na culture-decku
scinala gore i dol o ~44 px przy szerokosci 358 px, czyli czolo. Kwadrat = zero przyciecia.
!important, bo CSS pluginu founderow idzie przez wp_add_inline_style i jest POZA @layer,
a warstwowany arkusz przegrywa z nielayerowanym niezaleznie od specyficznosci. */
.person-intro__photo .piona-founder-card__photo { aspect-ratio: 1 / 1 !important; }
.person-intro__bio p:first-child { margin-top: 0; }
.person-articles { list-style: none; padding-left: 0; margin: 0; }
.person-articles__item {
display: flex;
flex-wrap: wrap;
align-items: baseline;
justify-content: space-between;
gap: .5rem 1.5rem;
padding-block: 1.1rem;
border-bottom: 1px solid rgba(255, 255, 255, .06);
}
.person-articles__item:first-child { border-top: 1px solid rgba(255, 255, 255, .06); }
.person-articles__link {
color: var(--c-cream);
font-weight: 700;
text-decoration: none;
transition: color 200ms ease;
}
.person-articles__link:hover { color: var(--c-lime); }
.person-articles__date { color: var(--c-muted); font-size: var(--fs-2xs); white-space: nowrap; }
@media (max-width: 860px) {
.person-intro { grid-template-columns: 1fr; }
.person-intro__photo { max-width: 420px; }
}
}