/* ===================================================================== BLACKPARTNERS 2026 - Design System "Gdyńsko, morsko, biznesowo" - navy / steel / Baltic / pearl Autor: Front-end Master Wihajster Luter Koks Etap 1: tokeny + reset + header + footer + warstwa bazowa ===================================================================== */ /* ------------------------------------------------------------------ * * 1. TOKENY (:root) * ------------------------------------------------------------------ */ :root{ /* --- Kolory: paleta jak w motywie przykładowym (biel + błękit) --- */ --bp-navy: #0A1320; /* głęboki granat - tła kontrastowe, stopka */ --bp-navy-700: #0F2033; /* granat przejściowy */ --bp-navy-600: #16263B; --bp-steel: #1559C0; /* błękit główny - przyciski, akcenty */ --bp-steel-600: #0E418F; /* błękit ciemny - hover */ --bp-steel-300: #7FB2FF; /* jasny błękit - akcenty na ciemnym */ --bp-baltic: #3FA0E0; /* jasny błękit - gradienty, podkreślenia */ --bp-sea: #3FA0E0; /* mikroakcenty (dawniej teal) */ --bp-white: #FFFFFF; --bp-pearl: #F2F6FB; /* jasne tło - sekcje alt */ --bp-pearl-2: #E7EFFB; /* błękitna poświata (blue-l) */ --bp-line: #E2E8F0; /* delikatne linie / obramowania */ --bp-ink: #0A1320; /* tekst główny */ --bp-ink-soft: #54657A; /* tekst drugorzędny */ --bp-muted: #7A8BA0; /* tekst stłumiony */ /* --- Typografia: GT America / Archivo (jak w motywie przykładowym) --- */ --bp-display: "GT America Expanded", "Archivo", system-ui, -apple-system, "Segoe UI", sans-serif; --bp-body: "GT America", "Archivo", system-ui, -apple-system, "Segoe UI", sans-serif; --bp-mono: "GT America", "Archivo", system-ui, sans-serif; /* --- Skala typografii (płynna, clamp) --- */ --bp-h1: clamp(2.6rem, 1.6rem + 4.4vw, 5.2rem); --bp-h2: clamp(1.9rem, 1.3rem + 2.6vw, 3.2rem); --bp-h3: clamp(1.2rem, 1rem + 0.7vw, 1.55rem); --bp-lead: clamp(1.05rem, 0.98rem + 0.5vw, 1.3rem); /* --- Geometria / cień / ruch --- */ --bp-r: 14px; --bp-r-lg: 22px; --bp-shadow: 0 24px 60px -34px rgba(10,30,70,.45); --bp-shadow-sm: 0 10px 30px -18px rgba(10,30,70,.35); --bp-ease: cubic-bezier(.22,.61,.36,1); --bp-fast: .22s var(--bp-ease); --bp-slow: .55s var(--bp-ease); /* --- Layout --- */ --bp-wrap: 1240px; --bp-gutter: clamp(1.1rem, 0.6rem + 2.5vw, 3rem); --bp-header-h: 78px; } /* ------------------------------------------------------------------ * * 2. RESET MINIMALNY * ------------------------------------------------------------------ */ *,*::before,*::after{ box-sizing:border-box; } html{ -webkit-text-size-adjust:100%; scroll-behavior:smooth; } body{ margin:0; font-family:var(--bp-body); font-size:17px; line-height:1.7; color:var(--bp-ink); background:var(--bp-white); -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility; overflow-x:hidden; } img{ max-width:100%; height:auto; display:block; } a{ color:inherit; text-decoration:none; transition:color var(--bp-fast); } button{ font-family:inherit; cursor:pointer; } h1,h2,h3,h4{ font-family:var(--bp-display); font-weight:600; line-height:1.08; letter-spacing:-.01em; margin:0 0 .5em; color:var(--bp-ink); } p{ margin:0 0 1.1em; } ul{ margin:0; padding:0; list-style:none; } ::selection{ background:var(--bp-steel); color:#fff; } :focus-visible{ outline:2px solid var(--bp-baltic); outline-offset:3px; border-radius:4px; } .bp-wrap{ width:100%; max-width:var(--bp-wrap); margin-inline:auto; padding-inline:var(--bp-gutter); } .bp-skip{ position:absolute; left:-9999px; top:0; z-index:999; background:var(--bp-navy); color:#fff; padding:.7rem 1.2rem; border-radius:0 0 8px 0; } .bp-skip:focus{ left:0; } /* ------------------------------------------------------------------ * * 3. PRZYCISKI * ------------------------------------------------------------------ */ .bp-btn{ display:inline-flex; align-items:center; gap:.55rem; font-family:var(--bp-body); font-weight:600; font-size:.95rem; letter-spacing:.01em; padding:.85rem 1.5rem; border-radius:999px; border:1.5px solid transparent; transition:transform var(--bp-fast), background var(--bp-fast), color var(--bp-fast), border-color var(--bp-fast); white-space:nowrap; } .bp-btn .bp-btn__arrow{ transition:transform var(--bp-fast); } .bp-btn:hover .bp-btn__arrow{ transform:translateX(4px); } .bp-btn:active{ transform:translateY(1px); } .bp-btn--primary{ background:var(--bp-steel); color:#fff; } .bp-btn--primary:hover{ background:var(--bp-navy); color:#fff; } .bp-btn--ghost{ border-color:var(--bp-line); color:var(--bp-ink); background:transparent; } .bp-btn--ghost:hover{ border-color:var(--bp-steel); color:var(--bp-steel); } .bp-btn--light{ background:#fff; color:var(--bp-navy); } .bp-btn--light:hover{ background:var(--bp-baltic); color:#fff; } /* ==================================================================== * * 4. HEADER — pływająca, sticky, minimalistyczna nawigacja * ==================================================================== */ .bp-ribbon{ background:var(--bp-navy); color:#cfe0f2; font-size:.78rem; letter-spacing:.04em; text-align:center; padding:.45rem 1rem; } .bp-ribbon b{ color:#fff; font-weight:600; } .bp-header{ position:sticky; top:0; z-index:100; background:rgba(255,255,255,.78); backdrop-filter:saturate(160%) blur(14px); -webkit-backdrop-filter:saturate(160%) blur(14px); border-bottom:1px solid transparent; transition:background var(--bp-fast), border-color var(--bp-fast), box-shadow var(--bp-fast); } .bp-header.is-stuck{ background:rgba(255,255,255,.92); border-bottom-color:var(--bp-line); box-shadow:var(--bp-shadow-sm); } .bp-header__inner{ display:flex; align-items:center; gap:1rem; min-height:var(--bp-header-h); } /* Logo / wordmark */ /* ==================================================================== * * LOGOTYP - wordmark typograficzny * -------------------------------------------------------------------- * Krój: DejaVu Serif Book (waga 400), wersaliki. * Tracking: 1,6 pt przy 11 pt = 0,145 em. W żywej paginie 2,4 pt * przy 7,6 pt = 0,316 em. * Kolor: #0A1320 na jasnym tle, biel na granacie. * * `letter-spacing` dokłada odstęp także PO ostatniej literze, przez co * napis wygląda na przesunięty względem tego, co widać. Ujemny * `margin-right` o tę samą wartość zdejmuje ten ogon - bez tego logotyp * nie stoi równo z krawędzią kolumny. * * Plik z krojem to podzbiór 55 glifów (9 kB), wystarczający dla wersalików * i polskich znaków. `font-display:block` zamiast `swap`, bo przy logotypie * mignięcie zastępczym krojem jest bardziej rażące niż ułamek sekundy * czekania - plik leci z tego samego serwera i waży tyle co mały obrazek. * ==================================================================== */ @font-face{ font-family:"BP Wordmark"; src:url("../fonts/dejavu-serif-wordmark.woff2") format("woff2"), url("../fonts/dejavu-serif-wordmark.woff") format("woff"); font-weight:400; font-style:normal; font-display:block; } .bp-wordmark{ font-family:"BP Wordmark", "DejaVu Serif", Georgia, "Times New Roman", serif; font-weight:400; /* Regular, nigdy pogrubienie */ font-style:normal; text-transform:uppercase; letter-spacing:var(--bp-wm-track, .145em); margin-right:calc(var(--bp-wm-track, .145em) * -1); font-size:var(--bp-wm-size, 14.67px); /* 11 pt */ line-height:1; color:#0A1320; white-space:nowrap; font-synthesis:none; /* przeglądarka nie może dorabiać pogrubienia */ -webkit-font-smoothing:antialiased; } .bp-wordmark--light{ color:#fff; } /* Żywa pagina: 7,6 pt, tracking 2,4 pt. */ .bp-wordmark--pagina{ --bp-wm-track:.316em; --bp-wm-size:10.13px; } .bp-logo{ font-family:var(--bp-display); font-weight:600; font-size:1.35rem; letter-spacing:-.02em; color:var(--bp-navy); flex-shrink:0; } .bp-logo img{ max-height:34px; width:auto; } .bp-logo .dot{ color:var(--bp-baltic); } /* Logotyp w nagłówku. Wersalikom 11 pt brakuje na ekranie obecności, więc pasek dostaje własny rozmiar; proporcje, krój i tracking bez zmian. */ .bp-logo--wordmark{ --bp-wm-size:19px; display:inline-flex; align-items:center; text-decoration:none; } @media (max-width:560px){ .bp-logo--wordmark{ --bp-wm-size:16px; } } /* Nawigacja desktop */ .bp-nav{ margin-left:auto; } .bp-nav__list{ display:flex; align-items:center; gap:.15rem; } .bp-nav__list a{ display:block; padding:.55rem .75rem; border-radius:999px; font-size:.95rem; font-weight:500; color:var(--bp-ink-soft); position:relative; white-space:nowrap; } .bp-nav__list a:hover, .bp-nav__list .current-menu-item > a, .bp-nav__list .current-menu-parent > a{ color:var(--bp-navy); background:var(--bp-pearl); } /* Dropdown */ .bp-nav__list .menu-item-has-children{ position:relative; } .bp-nav__list .sub-menu{ position:absolute; top:calc(100% + 10px); left:0; min-width:248px; background:#fff; border:1px solid var(--bp-line); border-radius:var(--bp-r); box-shadow:var(--bp-shadow); padding:.5rem; opacity:0; visibility:hidden; transform:translateY(8px); transition:opacity var(--bp-fast), transform var(--bp-fast), visibility var(--bp-fast); } .bp-nav__list .menu-item-has-children:hover > .sub-menu, .bp-nav__list .menu-item-has-children:focus-within > .sub-menu{ opacity:1; visibility:visible; transform:translateY(0); } .bp-nav__list .sub-menu a{ padding:.6rem .8rem; border-radius:9px; font-size:.9rem; } .bp-header__cta{ flex-shrink:0; } /* Mobile toggle */ .bp-burger{ display:none; margin-left:auto; width:46px; height:46px; border:1px solid var(--bp-line); border-radius:12px; background:#fff; position:relative; } .bp-burger span{ position:absolute; left:12px; right:12px; height:2px; background:var(--bp-navy); transition:transform var(--bp-fast), opacity var(--bp-fast); border-radius:2px; } .bp-burger span:nth-child(1){ top:16px; } .bp-burger span:nth-child(2){ top:22px; } .bp-burger span:nth-child(3){ top:28px; } body.bp-nav-open .bp-burger span:nth-child(1){ transform:translateY(6px) rotate(45deg); } body.bp-nav-open .bp-burger span:nth-child(2){ opacity:0; } body.bp-nav-open .bp-burger span:nth-child(3){ transform:translateY(-6px) rotate(-45deg); } /* ==================================================================== * * 5. FOOTER — czysty układ kolumnowy + newsletter * ==================================================================== */ .bp-footer{ background:var(--bp-navy); color:#b9c8da; margin-top:clamp(4rem,8vw,8rem); padding-top:clamp(2.6rem,5vw,4rem); } .bp-footer a{ color:#cdd9e7; } .bp-footer a:hover{ color:#fff; } /* Pas newslettera — spokojny, pełnej szerokości treści pas na górze stopki, oddzielony linią od kolumn. Bez pływającej karty i bez ujemnego marginesu, który wcześniej wchodził w sekcję powyżej („dotykał” jej u góry). */ .bp-newsletter{ position:relative; display:grid; grid-template-columns:1.15fr .85fr; gap:2.5rem; align-items:center; padding:0 0 clamp(2.2rem,4vw,3.2rem); margin:0 0 clamp(2.4rem,4vw,3.4rem); border-bottom:1px solid rgba(255,255,255,.12); } .bp-newsletter h4{ color:#fff; font-size:var(--bp-h3); margin:0 0 .3rem; } .bp-newsletter p{ margin:0; color:#cfe0f2; font-size:.95rem; } .bp-newsletter__form{ display:flex; flex-direction:column; gap:.7rem; } .bp-newsletter__row{ display:flex; gap:.6rem; } .bp-newsletter__form input[type=email]{ flex:1; min-width:0; padding:.85rem 1.1rem; border-radius:999px; border:0; font-family:inherit; font-size:.95rem; background:rgba(255,255,255,.95); color:var(--bp-ink); } /* Zgoda marketingowa - drobna, ale czytelna; checkbox nie ucieka przy zawijaniu. */ .bp-newsletter__consent{ display:flex; gap:.55rem; align-items:flex-start; font-size:.78rem; line-height:1.5; color:#9fb1c6; cursor:pointer; } .bp-newsletter__consent input{ margin-top:.2rem; flex:none; accent-color:var(--bp-baltic); } .bp-newsletter__consent a{ color:#cdd9e7; text-decoration:underline; } .bp-hp{ position:absolute; left:-9999px; } .bp-footer__grid{ display:grid; grid-template-columns:1.6fr 1fr 1fr 1.3fr; gap:2.2rem; padding-top:1rem; padding-bottom:3rem; } .bp-footer__brand .bp-logo{ color:#fff; font-size:1.5rem; margin-bottom:.8rem; } .bp-footer__brand .bp-logo .dot{ color:var(--bp-baltic); } .bp-footer__brand .bp-wordmark{ display:inline-block; margin-bottom:.9rem; } .bp-footer__brand p{ font-size:.92rem; color:#9fb1c6; max-width:34ch; } .bp-footer h4{ color:#fff; font-family:var(--bp-body); font-weight:600; font-size:.78rem; letter-spacing:.12em; text-transform:uppercase; margin:0 0 1.1rem; } .bp-footer__col ul li{ margin-bottom:.55rem; font-size:.94rem; } .bp-footer__contact li{ margin-bottom:.55rem; font-size:.94rem; color:#9fb1c6; } /* Ikony społecznościowe (.bp-socials) usunięte w 2.14.0 — w ich miejsce wchodzi jedno wezwanie do rozmowy, bo to jedyna akcja, na której zależy. */ .bp-footer__cta{ display:inline-flex; align-items:center; gap:.5rem; margin-top:1.3rem; padding:.7rem 1.4rem; border-radius:999px; border:1px solid rgba(255,255,255,.24); color:#fff !important; font-size:.9rem; font-weight:600; transition:background var(--bp-fast), border-color var(--bp-fast), transform var(--bp-fast); } .bp-footer__cta:hover{ background:var(--bp-steel); border-color:var(--bp-steel); transform:translateY(-2px); } /* Dane rejestrowe — kolumny etykieta/wartość, żeby dało się je odczytać jak wpis w KRS, a nie jak jeden długi ciąg cyfr w drobnym druku. */ .bp-footer__legal{ border-top:1px solid rgba(255,255,255,.12); padding:clamp(1.6rem,3vw,2.2rem) 0 .4rem; } .bp-flegal{ display:grid; grid-template-columns:repeat(auto-fit,minmax(190px,1fr)); gap:1.1rem 2rem; margin:0; } .bp-flegal__row dt{ font-size:.7rem; font-weight:600; letter-spacing:.13em; text-transform:uppercase; color:#6f849c; margin:0 0 .3rem; } .bp-flegal__row dd{ margin:0; font-size:.9rem; color:#cdd9e7; line-height:1.5; } .bp-footer__bottom{ border-top:1px solid rgba(255,255,255,.12); margin-top:clamp(1.6rem,3vw,2.2rem); padding:1.6rem 0; display:flex; flex-wrap:wrap; justify-content:space-between; gap:1rem; font-size:.82rem; color:#8499af; } .bp-footer__links{ display:flex; flex-wrap:wrap; gap:1.4rem; } /* ==================================================================== * * 6. MIKROINTERAKCJE / UTIL * ==================================================================== */ /* Bezpiecznik: poziome wsuwanie kafelek nie może rodzić poziomego scrolla. */ .bp-main{ overflow-x:clip; } .bp-reveal{ opacity:0; transform:translateY(24px); transition:opacity var(--bp-slow), transform var(--bp-slow); } .bp-reveal.is-in{ opacity:1; transform:none; } @media (prefers-reduced-motion:reduce){ *{ animation:none !important; transition:none !important; scroll-behavior:auto !important; } .bp-reveal{ opacity:1; transform:none; } } /* ==================================================================== * * 7. RWD * ==================================================================== */ /* Nagłówek przechodzi w tryb z hamburgerem już przy 1240 px, nie przy 960. Menu ma dziewięć pozycji plus przycisk „Porozmawiajmy" i między 960 a 1240 px po prostu się nie mieściło - przycisk wychodził poza ekran i cały serwis dostawał poziomy scroll na laptopie. Reszta układu (stopka, newsletter) zmienia się dalej przy 960 px, w osobnym bloku niżej. */ @media (max-width:1240px){ /* Na telefonie nagłówek rezygnuje z `backdrop-filter` i dostaje pełne tło. Powód jest techniczny, nie estetyczny: backdrop-filter czyni nagłówek containing-blockiem dla elementów `fixed`, przez co schowany za krawędzią ekranu panel menu przestawał być liczony jako fixed i dokładał ok. 335 px poziomego przewijania NA KAŻDEJ podstronie. Rozwiązania „na siłę” (`overflow-x` na html albo body) psują przyklejony nagłówek, więc usuwamy przyczynę. Przy okazji: pełne tło jest czytelniejsze na małym ekranie i tańsze w renderowaniu. */ .bp-header{ background:#fff; backdrop-filter:none; -webkit-backdrop-filter:none; } .bp-nav{ /* Wysokość liczona od ekranu (dvh) - patrz wyżej, ten sam mechanizm. */ position:fixed; top:var(--bp-header-h); right:0; left:auto; bottom:auto; width:min(340px,86vw); height:calc(100vh - var(--bp-header-h)); height:calc(100dvh - var(--bp-header-h)); background:#fff; border-left:1px solid var(--bp-line); box-shadow:var(--bp-shadow); padding:1.4rem; transform:translateX(100%); transition:transform var(--bp-fast); overflow-y:auto; overscroll-behavior:contain; margin:0; } body.bp-nav-open .bp-nav{ transform:translateX(0); } .bp-nav__list{ flex-direction:column; align-items:stretch; gap:.15rem; } .bp-nav__list a{ padding:.8rem .9rem; } .bp-nav__list .sub-menu{ position:static; opacity:1; visibility:visible; transform:none; box-shadow:none; border:0; border-left:2px solid var(--bp-line); border-radius:0; margin:.2rem 0 .4rem .6rem; padding:.2rem 0; } .bp-burger{ display:block; order:3; } .bp-header__cta{ display:none; } } @media (max-width:960px){ .bp-newsletter{ grid-template-columns:1fr; } /* Pole i przycisk jedno pod drugim. Reguła dotyczyła kiedyś samego formularza, ale po dodaniu zgody wiersz z polem i przyciskiem to osobny element - bez tego oba stały obok siebie i rozpychały stopkę o kilkadziesiąt pikseli, co dawało poziomy scroll na całym serwisie. */ .bp-newsletter__row{ flex-direction:column; } .bp-newsletter__row .bp-btn{ justify-content:center; } .bp-footer__grid{ grid-template-columns:1fr 1fr; gap:2rem 1.4rem; } .bp-footer__brand{ grid-column:1 / -1; } } @media (max-width:560px){ .bp-footer__grid{ grid-template-columns:1fr; } .bp-footer__bottom{ flex-direction:column; } } /* ==================================================================== * * 8. STRONA GŁÓWNA 2026 — "urywać dupę" edition * kinowe hero · zorza · ziarno · parallax · kinetyka · marquee * ==================================================================== */ /* ---- Globalne wodotryski: kursor, pasek postępu, ziarno, kinetyka --- */ .bp-progress{ position:fixed; inset:0 0 auto 0; height:3px; z-index:200; transform-origin:0 50%; transform:scaleX(0); background:linear-gradient(90deg,var(--bp-sea),var(--bp-baltic),var(--bp-steel)); } .bp-cursor{ position:fixed; top:0; left:0; z-index:9999; width:26px; height:26px; border-radius:50%; pointer-events:none; mix-blend-mode:screen; background:radial-gradient(circle, rgba(96,170,224,.85), rgba(46,139,139,.25) 60%, transparent 70%); } @media (hover:none){ .bp-cursor{ display:none; } } .bp-grain{ position:absolute; inset:0; z-index:1; pointer-events:none; opacity:.06; mix-blend-mode:overlay; background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='3'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E"); } /* Kinetyczna typografia (split words). Maska (overflow:hidden) obcinała ogonki liter (j, y, ą) i nadwieszki z prawej. Powiększamy pudełko maski paddingiem i cofamy je marginesem, a słowo chowamy głębiej (130%), żeby nadal nie wystawało przed animacją. */ .bp-w{ display:inline-block; overflow:hidden; vertical-align:top; padding:.02em .09em .18em 0; margin:-.02em -.09em -.18em 0; } .bp-w > i{ display:inline-block; font-style:inherit; transform:translateY(130%); transition:transform .95s var(--bp-ease); } [data-kinetic].is-in .bp-w > i{ transform:translateY(0); } /* Stagger — kafelki wsuwają się na swoje miejsca (kierunkowo). Wyzwalane przez IntersectionObserver (.is-in) DOKŁADNIE gdy sekcja wjeżdża w kadr - dyskretny, szybki ruch (nie „scroll-scrubbing", który ruszał kafelki, zanim do nich dojechałeś). Kierunek zależy od pozycji. */ [data-stagger] > *{ opacity:0; transform:translateY(26px); transition:opacity .55s var(--bp-ease), transform .6s var(--bp-ease); } /* Kierunki: naprzemiennie z lewej / z prawej — żywy, „składający się" grid */ .bp-bento > *:nth-child(2n+1), .bp-why > *:nth-child(2n+1), .bp-real > *:nth-child(2n+1){ transform:translateX(calc(-1 * clamp(2rem,5vw,4rem))); } .bp-bento > *:nth-child(2n), .bp-why > *:nth-child(2n), .bp-real > *:nth-child(2n){ transform:translateX(clamp(2rem,5vw,4rem)); } /* Reset (widoczne) — na końcu, by wygrać kolejnością ze stanami kierunkowymi */ [data-stagger].is-in > *{ opacity:1; transform:none; } /* ---- Wspólne sekcje ---- */ .bp-sec{ padding:clamp(4rem,8vw,8rem) 0; position:relative; } .bp-sec--alt{ background:var(--bp-pearl); } .bp-sec__head{ max-width:64ch; margin-bottom:3rem; } .bp-sec__head h2{ font-size:var(--bp-h2); margin:.4rem 0 .7rem; } .bp-sec__head p{ color:var(--bp-ink-soft); font-size:var(--bp-lead); } .bp-sec__foot{ margin-top:2.4rem; } .bp-kick{ display:inline-flex; align-items:center; gap:.6rem; font-family:var(--bp-mono); font-weight:600; font-size:.74rem; letter-spacing:.18em; text-transform:uppercase; color:var(--bp-steel); margin-bottom:.4rem; } .bp-kick::before{ content:""; width:26px; height:1.5px; background:currentColor; opacity:.7; } .bp-kick--light{ color:#8fc4e6; } /* Akcent: pełny błękit, bez kursywy i bez background-clip:text. Gradient przycięty do liter kończył się na pudełku tekstu, więc nadwieszka kursywnej głoski wypadała poza tło i znikała - to były „ucięte litery”. */ .bp-accent{ color:var(--bp-steel); font-style:normal; } .bp-muted{ color:var(--bp-muted); } .bp-balance{ text-wrap:balance; } /* ============================ HERO ============================ * * Pełnoekranowe, rotujące tło z firmowych grafik morskich. * Przejścia = czyste opacity (kompozyt GPU) — zero laga na scrollu. */ .bp-hero{ position:relative; isolation:isolate; overflow:hidden; background:linear-gradient(180deg,#0A1A2F,#0B1E38); color:#fff; /* Wysokość liczona z odjęciem nagłówka, bo ten stoi NAD hero i zjadał ekran: przy `100vh` na laptopie 1366 x 625 poza ekran wypadały przyciski „Porozmawiajmy" i „Zobacz nasze realizacje", czyli to, po co ten hero jest. Górny odstęp ścięty mocniej niż dolny - dzięki temu napis siedzi nieco wyżej, bez ruszania wyrównania w siatce. `svh` z zapasem w `vh`, bo na telefonie pasek adresu zmienia wysokość okna. */ min-height:min(calc(100vh - var(--bp-header-h)), 720px); min-height:min(calc(100svh - var(--bp-header-h)), 720px); display:flex; align-items:stretch; padding:clamp(2.8rem,6vh,4.8rem) 0 clamp(2.2rem,4.5vh,3.6rem); } /* Stos rotujących slajdów */ .bp-hero__slides{ position:absolute; inset:0; z-index:0; } .bp-hero__slide{ position:absolute; inset:0; background-size:cover; background-position:center; opacity:0; transition:opacity 1.4s ease; filter:saturate(.9) contrast(1.02); will-change:opacity; } .bp-hero__slide.is-active{ opacity:1; } /* Welon — czytelność tekstu nad zdjęciem (mocniej od lewej) */ .bp-hero__veil{ position:absolute; inset:0; z-index:1; pointer-events:none; background: linear-gradient(90deg, rgba(7,18,33,.92) 0%, rgba(7,18,33,.78) 38%, rgba(7,18,33,.35) 70%, rgba(7,18,33,.55) 100%), linear-gradient(180deg, rgba(7,18,33,.45) 0%, transparent 30%, rgba(7,18,33,.65) 100%), radial-gradient(90% 70% at 85% 12%, rgba(46,139,139,.22), transparent 60%); } .bp-hero .bp-grain{ z-index:2; opacity:.06; } .bp-hero__inner{ position:relative; z-index:3; width:100%; display:grid; grid-template-columns:1.5fr .85fr; gap:clamp(2rem,5vw,5rem); align-items:center; } .bp-hero__copy{ position:relative; align-self:center; } .bp-kick--hero{ color:#8fd0d0; } .bp-hero__title{ font-family:var(--bp-display); font-weight:600; font-size:clamp(2.5rem, 1.3rem + 4.2vw, 5.4rem); line-height:.98; letter-spacing:-.03em; margin:.7rem 0 1rem; text-wrap:balance; color:#fff; text-shadow:0 2px 30px rgba(0,0,0,.35); } .bp-hero__accent{ font-style:italic; color:#7FB2FF; } .bp-hero .bp-lead{ font-size:clamp(1rem,.94rem+.42vw,1.18rem); color:#cdd9e8; max-width:46ch; } .bp-hero__cta{ display:flex; flex-wrap:wrap; gap:.8rem; margin-top:1.6rem; } /* Przycisk-poświata (na ciemnym tle) */ .bp-btn--glow{ background:linear-gradient(100deg,var(--bp-baltic),var(--bp-sea)); color:#fff; box-shadow:0 14px 40px -14px rgba(79,143,206,.8); } .bp-btn--glow:hover{ color:#fff; box-shadow:0 18px 50px -12px rgba(79,143,206,.95); } .bp-btn--lightghost{ border-color:rgba(255,255,255,.4); color:#fff; background:rgba(255,255,255,.06); } .bp-btn--lightghost:hover{ border-color:#fff; background:rgba(255,255,255,.14); color:#fff; } /* Szklany kafelek statystyki — „pływa" po prawej, dół */ .bp-hero__stat{ align-self:end; justify-self:end; position:relative; z-index:3; display:flex; flex-direction:column; background:rgba(9,22,40,.5); backdrop-filter:blur(14px); -webkit-backdrop-filter:blur(14px); border:1px solid rgba(255,255,255,.2); border-radius:20px; padding:1.3rem 1.5rem; box-shadow:0 30px 70px -30px rgba(0,0,0,.7); max-width:264px; } .bp-hero__stat::before{ content:""; position:absolute; inset:0; border-radius:inherit; pointer-events:none; background:linear-gradient(135deg, rgba(127,217,217,.16), transparent 55%); } .bp-hero__stat-eyebrow{ font-family:var(--bp-mono); font-weight:600; font-size:.68rem; letter-spacing:.2em; text-transform:uppercase; color:#7FB2FF; margin-bottom:.3rem; } .bp-hero__stat b{ font-family:var(--bp-display); font-weight:600; line-height:1; letter-spacing:-.02em; font-size:clamp(2.3rem,4.4vw,3.3rem); color:#bcd6f5; } .bp-hero__stat-label{ margin-top:.45rem; color:#cdd9e8; font-size:.86rem; line-height:1.45; } /* Wskaźnik scrolla */ .bp-hero__scroll{ position:absolute; left:50%; bottom:1rem; transform:translateX(-50%); z-index:3; display:flex; flex-direction:column; align-items:center; gap:.5rem; color:#9fb1c6; font-family:var(--bp-mono); font-size:.66rem; letter-spacing:.22em; text-transform:uppercase; } .bp-hero__scroll i{ width:1px; height:28px; background:linear-gradient(#9fb1c6,transparent); overflow:hidden; position:relative; } .bp-hero__scroll i::after{ content:""; position:absolute; top:0; left:0; width:100%; height:40%; background:var(--bp-baltic); animation:bp-scrolldot 1.8s var(--bp-ease) infinite; } @keyframes bp-scrolldot{ 0%{transform:translateY(-100%)} 60%,100%{transform:translateY(250%)} } /* ============================ LICZBY ========================== */ .bp-trust{ border-bottom:1px solid var(--bp-line); background:#fff; } .bp-trust__grid{ display:grid; grid-template-columns:repeat(4,1fr); } .bp-trust__item{ padding:clamp(1.8rem,3.5vw,2.8rem) 1.6rem; border-left:1px solid var(--bp-line); position:relative; } .bp-trust__item:first-child{ border-left:0; padding-left:0; } .bp-trust__item b{ display:block; font-family:var(--bp-display); font-weight:600; line-height:1; letter-spacing:-.02em; font-size:clamp(2.2rem,4.5vw,3.2rem); color:var(--bp-navy); } .bp-trust__item span{ display:block; margin-top:.5rem; color:var(--bp-muted); font-size:.92rem; } /* ====================== BENTO usług ========================== * Sekcja gra KOLOREM, nie bankiem zdjęć (stock rzucał się w oczy): kafelek * wiodący na firmowym błękicie, kafelki proste na bieli z ikoną kreskową, * jeden - Due Diligence - na firmowym kadrze. Siatka 4-kolumnowa: * feat 2×2, DD 2×1, dwa domykające 2×1. */ .bp-bento{ display:grid; grid-template-columns:repeat(4,1fr); grid-auto-rows:minmax(172px,auto); gap:1.1rem; } .bp-card{ position:relative; display:flex; flex-direction:column; padding:1.6rem; overflow:hidden; isolation:isolate; border-radius:var(--bp-r-lg); border:1px solid var(--bp-line); background:#fff; color:var(--bp-ink); transition:transform var(--bp-slow), box-shadow var(--bp-fast), border-color var(--bp-fast); } .bp-card:hover{ transform:translateY(-4px); box-shadow:var(--bp-shadow); border-color:#cdddf5; } .bp-card__ico{ display:inline-flex; align-items:center; justify-content:center; flex:none; width:46px; height:46px; margin-bottom:1rem; border-radius:13px; background:var(--bp-pearl-2); color:var(--bp-steel); } .bp-ico{ width:22px; height:22px; } .bp-card__body{ display:flex; flex-direction:column; flex:1; } .bp-card h3{ font-size:1.18rem; margin:0; color:var(--bp-navy); line-height:1.25; } .bp-card p{ color:var(--bp-ink-soft); font-size:.94rem; margin:.45rem 0 0; max-width:52ch; } .bp-card__go{ margin-top:auto; padding-top:.9rem; font-family:var(--bp-mono); font-weight:600; font-size:.74rem; letter-spacing:.06em; text-transform:uppercase; color:var(--bp-steel); transition:transform var(--bp-fast); } .bp-card:hover .bp-card__go{ transform:translateX(3px); } /* Na małych kafelkach cała karta jest linkiem - powtórzone CTA tylko zaśmieca */ .bp-card:not(.bp-card--feat):not(.bp-card--img) .bp-card__go{ display:none; } /* Kafelek wiodący - firmowy błękit, 2×2 */ .bp-card--feat{ grid-column:span 2; grid-row:span 2; padding:2rem; background:linear-gradient(120deg,var(--bp-steel),var(--bp-baltic)); border-color:transparent; color:#fff; } .bp-card--feat .bp-card__ico{ background:rgba(255,255,255,.2); color:#fff; } .bp-card--feat h3{ font-size:clamp(1.5rem,1.2rem+1vw,2.05rem); color:#fff; } .bp-card--feat p{ color:#eaf2fd; font-size:1.02rem; } .bp-card--feat .bp-card__go{ color:#fff; } /* Jedyny kafelek zdjęciowy - firmowy kadr żeglarski + welon pod tekst */ .bp-card--img{ grid-column:span 2; min-height:230px; justify-content:flex-end; border-color:transparent; color:#fff; background:#0A1A2F center/cover no-repeat; } .bp-card--img::before{ content:""; position:absolute; inset:0; z-index:-2; background:inherit; background-size:cover; background-position:center; transition:transform 1.1s var(--bp-ease); } .bp-card--img::after{ content:""; position:absolute; inset:0; z-index:-1; background:linear-gradient(180deg, rgba(8,18,33,.12) 0%, rgba(8,18,33,.55) 55%, rgba(8,18,33,.88) 100%); } .bp-card--img:hover::before{ transform:scale(1.06); } .bp-card--img .bp-card__ico{ display:none; } .bp-card--img .bp-card__body{ flex:0; } .bp-card--img h3{ color:#fff; } .bp-card--img p{ color:#dbe6f4; } .bp-card--img .bp-card__go{ color:#fff; } /* Para kafelków domykających siatkę - po pół rzędu */ .bp-card--half{ grid-column:span 2; } /* Wariant barwny zamiast kolejnej bieli */ .bp-card--tint{ background:var(--bp-pearl-2); border-color:transparent; } .bp-card--tint .bp-card__ico{ background:#fff; } @media (max-width:900px){ .bp-bento{ grid-template-columns:repeat(2,1fr); } .bp-card--feat{ grid-row:span 1; } } @media (max-width:560px){ .bp-bento{ grid-template-columns:1fr; } .bp-card--feat, .bp-card--img, .bp-card--half{ grid-column:auto; } } /* ====================== SPLIT (sparing) ====================== */ .bp-split{ display:grid; grid-template-columns:1fr 1fr; gap:clamp(2rem,5vw,4rem); align-items:center; } /* Kadr poziomy (4:3), nie pionowy - pionowa fotografia dominowała nad tekstem */ .bp-split__media{ position:relative; aspect-ratio:4/3; border-radius:var(--bp-r-lg); overflow:hidden; box-shadow:var(--bp-shadow); } .bp-split__media .bp-hero__img{ position:absolute; inset:0; background-size:cover; background-position:center; filter:saturate(.92) contrast(1.03); } .bp-split__media::after{ content:""; position:absolute; inset:0; pointer-events:none; background:linear-gradient(180deg, rgba(10,26,47,.04), rgba(10,26,47,.34)); } .bp-split__copy h2{ font-size:var(--bp-h2); margin:.5rem 0 1rem; } .bp-split__copy p{ font-size:var(--bp-lead); color:var(--bp-ink-soft); } .bp-split__copy .bp-btn{ margin-top:1.4rem; } /* ============================ CHIPS ========================== * Pigułki z niebieską kropką - lekkie, czytelne, bez ciężkich kafli. */ .bp-chips{ display:flex; flex-wrap:wrap; gap:.7rem; } .bp-chips a{ display:inline-flex; align-items:center; gap:.55rem; padding:.7rem 1.2rem; border:1px solid var(--bp-line); border-radius:999px; font-size:.95rem; font-weight:500; color:var(--bp-ink); background:#fff; transition:border-color var(--bp-fast), color var(--bp-fast), box-shadow var(--bp-fast); } .bp-chips a::before{ content:""; flex:none; width:7px; height:7px; border-radius:50%; background:var(--bp-steel); transition:transform var(--bp-fast); } .bp-chips a:hover{ border-color:var(--bp-steel); color:var(--bp-steel); box-shadow:var(--bp-shadow); } .bp-chips a:hover::before{ transform:scale(1.25); } /* ====================== WHY (dlaczego) ======================= * Ciemne, „redakcyjne" pasmo na zdjęciu — celowo przełamuje rytm białych * gridów wokół, żeby strona nie wyglądała jak ciąg identycznych kart. */ .bp-sec--why{ background:#0A1A2F; color:#fff; overflow:hidden; isolation:isolate; } .bp-why-bg{ position:absolute; inset:0; z-index:-2; background-size:cover; background-position:center; filter:saturate(.7) contrast(1.02) brightness(.55); } .bp-sec--why::after{ content:""; position:absolute; inset:0; z-index:-1; pointer-events:none; background: linear-gradient(180deg, rgba(10,26,47,.78), rgba(10,26,47,.92)), radial-gradient(80% 60% at 12% 0%, rgba(46,139,139,.28), transparent 60%); } .bp-sec--why .bp-grain{ opacity:.05; z-index:-1; } .bp-why-grid{ display:grid; grid-template-columns:.85fr 1.15fr; gap:clamp(2rem,5vw,4.5rem); align-items:start; } .bp-sec__head--light{ margin-bottom:0; align-self:center; } .bp-sec__head--light h2{ color:#fff; } .bp-sec__head--light p{ color:#bcccdf; } /* grid-auto-rows:1fr - wszystkie cztery pola tej samej wysokości i szerokości (przy auto drugi rząd był niższy od pierwszego, bo ma krótsze opisy). */ .bp-why{ display:grid; grid-template-columns:1fr 1fr; grid-auto-rows:1fr; gap:1px; background:rgba(255,255,255,.12); border:1px solid rgba(255,255,255,.12); border-radius:var(--bp-r-lg); overflow:hidden; } .bp-why__item{ position:relative; display:flex; gap:1.1rem; align-items:flex-start; background:rgba(13,30,52,.55); padding:1.7rem 1.5rem; transition:background var(--bp-fast); } .bp-why__item:hover{ background:rgba(20,46,78,.7); } .bp-why__no{ font-family:var(--bp-display); font-weight:600; font-size:2.1rem; line-height:1; letter-spacing:-.02em; flex:none; color:#7FB2FF; } .bp-why__item h3{ font-size:1.1rem; margin:.15rem 0 .35rem; color:#fff; } .bp-why__item p{ color:#aebed3; font-size:.92rem; margin:0; line-height:1.55; } /* ======================== REALIZACJE ======================== * Karty tekstowe - bez zdjęć. Zdjęcia „ilustracyjne” niczego nie mówiły * o transakcji, a robiły z sekcji kolejną galerię stocku. Liczy się fakt: * co zrobiliśmy, dla kogo, kiedy. */ .bp-real{ display:grid; grid-template-columns:repeat(3,1fr); gap:1.2rem; } .bp-real__item{ position:relative; display:flex; flex-direction:column; gap:.35rem; padding:1.7rem 1.6rem; border:1px solid var(--bp-line); border-radius:var(--bp-r-lg); background:#fff; transition:transform var(--bp-slow), box-shadow var(--bp-fast), border-color var(--bp-fast); } .bp-real__item::before{ content:""; position:absolute; left:1.6rem; top:0; width:36px; height:2px; background:var(--bp-steel); transition:width var(--bp-fast); } .bp-real__item:hover{ box-shadow:var(--bp-shadow); border-color:#cdddf5; transform:translateY(-4px); } .bp-real__item:hover::before{ width:72px; } .bp-real__tag{ font-family:var(--bp-mono); font-weight:600; font-size:.68rem; letter-spacing:.1em; text-transform:uppercase; color:var(--bp-steel); } .bp-real__item h3{ font-size:1.3rem; margin:.2rem 0 0; color:var(--bp-navy); } .bp-real__meta{ color:var(--bp-muted); font-size:.86rem; } @media (max-width:900px){ .bp-real{ grid-template-columns:repeat(2,1fr); } } @media (max-width:600px){ .bp-real{ grid-template-columns:1fr; } } /* ============================ MEDIA ========================== * Pasek prasowy z logotypami redakcji. Pliki leżą w images/logos/ - podmiana * na oficjalne = nadpisanie pliku o tej samej nazwie (patrz bp_media_logos()). * Domyślnie szarość, kolor/kontrast dopiero na hover. */ .bp-media{ display:grid; grid-template-columns:repeat(6,1fr); gap:1rem; } .bp-media__item{ display:flex; align-items:center; justify-content:center; height:84px; padding:.9rem; border:1px solid var(--bp-line); border-radius:14px; background:#fff; transition:border-color var(--bp-fast), box-shadow var(--bp-fast), color var(--bp-fast); color:var(--bp-muted); } .bp-media__item:hover{ border-color:#cdddf5; box-shadow:var(--bp-shadow); color:var(--bp-navy); } .bp-media__item img{ max-height:34px; max-width:100%; width:auto; object-fit:contain; filter:grayscale(1); opacity:.75; transition:filter var(--bp-fast), opacity var(--bp-fast); } .bp-media__item:hover img{ filter:none; opacity:1; } /* Fallback, gdy brak pliku logotypu - sama nazwa redakcji */ .bp-media__item span{ font-family:var(--bp-display); font-weight:600; font-size:.95rem; text-align:center; line-height:1.2; } @media (max-width:900px){ .bp-media{ grid-template-columns:repeat(3,1fr); } } @media (max-width:520px){ .bp-media{ grid-template-columns:repeat(2,1fr); } } /* ============================ KROKI ========================== */ .bp-sec--steps{ padding-bottom:0; } .bp-steps{ display:grid; grid-template-columns:repeat(3,1fr); gap:1.6rem; } .bp-step{ border-top:2px solid var(--bp-navy); padding-top:1.3rem; } .bp-step__no{ font-family:var(--bp-display); font-weight:600; font-size:2.6rem; line-height:1; letter-spacing:-.02em; color:var(--bp-steel); } .bp-step h3{ font-size:1.35rem; margin:.5rem 0 .4rem; } .bp-step p{ color:var(--bp-ink-soft); margin:0; } /* ========================== BANER CTA ======================= */ .bp-sec--cta{ position:relative; } .bp-cta{ position:relative; isolation:isolate; overflow:hidden; background:linear-gradient(125deg,#0A1A2F,#1E4D7B); color:#fff; border-radius:var(--bp-r-lg); padding:clamp(2.6rem,6vw,5rem); text-align:center; box-shadow:var(--bp-shadow); } .bp-cta .bp-hero__aurora{ opacity:.45; } .bp-cta > *{ position:relative; z-index:2; } .bp-cta h2{ color:#fff; font-size:var(--bp-h2); margin:.7rem auto .9rem; max-width:18ch; } .bp-cta p{ color:#cfe0f2; font-size:var(--bp-lead); max-width:56ch; margin:0 auto; } .bp-cta .bp-btn{ margin-top:1.8rem; } /* ============================ RWD =========================== */ @media (max-width:960px){ .bp-hero{ min-height:auto; } .bp-hero__inner{ grid-template-columns:1fr; gap:2.5rem; } .bp-hero__stat{ justify-self:start; align-self:auto; max-width:none; width:100%; } .bp-hero__scroll{ display:none; } .bp-trust__grid{ grid-template-columns:repeat(2,1fr); } .bp-trust__item:nth-child(3){ border-left:0; padding-left:0; } .bp-trust__item{ border-top:1px solid var(--bp-line); } .bp-trust__item:nth-child(-n+2){ border-top:0; } .bp-bento{ grid-template-columns:repeat(2,1fr); } .bp-card--feat{ grid-column:span 2; grid-row:auto; min-height:300px; } .bp-card--wide{ grid-column:1 / -1; } .bp-split{ grid-template-columns:1fr; } .bp-split__media{ order:-1; aspect-ratio:16/10; max-width:520px; } .bp-why-grid{ grid-template-columns:1fr; gap:2.2rem; } .bp-sec__head--light{ align-self:auto; } .bp-real{ grid-template-columns:repeat(2,1fr); } .bp-steps{ grid-template-columns:1fr; } } @media (max-width:560px){ .bp-trust__grid{ grid-template-columns:1fr 1fr; } .bp-bento{ grid-template-columns:1fr; } .bp-card--feat{ grid-column:auto; grid-row:auto; } .bp-card__no{ position:static; margin-bottom:.6rem; } .bp-card p{ max-height:none; opacity:1; } .bp-hero__stat{ left:0; } .bp-why{ grid-template-columns:1fr; } .bp-real{ grid-template-columns:1fr; } } /* ===================== REDUCED MOTION ====================== */ @media (prefers-reduced-motion:reduce){ .bp-hero__scroll i::after{ animation:none !important; } .bp-hero__slide{ transition:none !important; } .bp-w > i{ transform:none !important; } [data-stagger] > *{ opacity:1 !important; transform:none !important; } } /* ==================================================================== * * 9. BLOG — listing (magazyn), karty, single (artykuł), paginacja * ==================================================================== */ /* ---- Nagłówek bloga / archiwum: ciemne pasmo na morskim slajdzie ---- */ .bp-blog-head{ position:relative; isolation:isolate; overflow:hidden; background:#0A1A2F; color:#fff; padding:clamp(3.5rem,7vw,6rem) 0 clamp(3rem,6vw,5rem); } .bp-blog-head__bg{ position:absolute; inset:0; z-index:-2; background-size:cover; background-position:center; filter:saturate(.7) contrast(1.02) brightness(.5); } .bp-blog-head::after{ content:""; position:absolute; inset:0; z-index:-1; pointer-events:none; background: linear-gradient(180deg, rgba(10,26,47,.72), rgba(10,26,47,.92)), radial-gradient(70% 60% at 10% 0%, rgba(46,139,139,.28), transparent 60%); } .bp-blog-head .bp-grain{ opacity:.05; z-index:-1; } .bp-blog-head__inner{ max-width:60ch; } .bp-blog-head h1{ font-size:var(--bp-h1); line-height:1.02; margin:.5rem 0 .8rem; color:#fff; text-wrap:balance; } .bp-blog-head p{ color:#bcccdf; font-size:var(--bp-lead); max-width:54ch; } .bp-sec--blog{ padding-top:clamp(3rem,6vw,5rem); } .bp-blog-empty{ color:var(--bp-muted); font-size:var(--bp-lead); padding:2rem 0; } /* ---- Wspólne: plakietka kategorii + meta ---- */ .bp-pcat{ position:absolute; left:1rem; top:1rem; z-index:1; display:inline-block; padding:.4rem .85rem; border-radius:999px; background:rgba(9,22,40,.6); backdrop-filter:blur(6px); -webkit-backdrop-filter:blur(6px); font-family:var(--bp-mono); font-size:.68rem; letter-spacing:.12em; text-transform:uppercase; color:#cfe2f8; font-weight:600; } .bp-pcat--solid{ position:static; background:var(--bp-steel); color:#fff; backdrop-filter:none; margin-bottom:1rem; } .bp-pmeta{ display:inline-flex; align-items:center; gap:.5rem; font-family:var(--bp-mono); font-size:.74rem; letter-spacing:.04em; color:var(--bp-muted); } .bp-pmeta i{ font-style:normal; opacity:.5; } /* ---- Wyróżniony wpis ---- */ .bp-feature{ display:grid; grid-template-columns:1.15fr .85fr; gap:clamp(1.5rem,4vw,3.5rem); align-items:center; margin-bottom:clamp(3rem,6vw,5rem); padding-bottom:clamp(3rem,6vw,5rem); border-bottom:1px solid var(--bp-line); } .bp-feature__media{ position:relative; display:block; overflow:hidden; border-radius:var(--bp-r-lg); aspect-ratio:16/10; box-shadow:var(--bp-shadow); } .bp-defs{ position:absolute; width:0; height:0; overflow:hidden; } .bp-feature__media img, .bp-pcard__media img, .bp-article__cover img{ /* Duotone ZDJĘTY na życzenie — naturalne kolory zdjęć. (Filtr SVG #bp-duotone został w footer.php; powrót = wpisać tu `filter:url(#bp-duotone)`.) */ filter:saturate(.98) contrast(1.02); transition:transform 1.1s var(--bp-ease), filter var(--bp-fast); } .bp-feature__media img, .bp-pcard__media img{ width:100%; height:100%; object-fit:cover; display:block; } /* Na hover lekkie ożywienie koloru — bez duotone. */ .bp-pcard:hover .bp-pcard__media img, .bp-feature:hover .bp-feature__media img{ filter:saturate(1.05) brightness(1.03); } .bp-feature:hover .bp-feature__media img{ transform:scale(1.04); } .bp-feature__title{ font-size:clamp(1.8rem,1.2rem+1.8vw,2.9rem); line-height:1.05; letter-spacing:-.02em; margin:.6rem 0 .9rem; } .bp-feature__title a{ background-image:linear-gradient(var(--bp-steel),var(--bp-steel)); background-size:0 2px; background-repeat:no-repeat; background-position:0 100%; transition:background-size var(--bp-fast); } .bp-feature__title a:hover{ background-size:100% 2px; color:var(--bp-steel); } .bp-feature__excerpt{ color:var(--bp-ink-soft); font-size:var(--bp-lead); } .bp-feature__foot{ display:flex; align-items:center; gap:1.5rem; flex-wrap:wrap; margin-top:1.4rem; } /* ---- Siatka kart ---- */ .bp-postgrid{ display:grid; grid-template-columns:repeat(3,1fr); gap:clamp(1.4rem,3vw,2.2rem); } .bp-postgrid--4{ grid-template-columns:repeat(4,1fr); } .bp-pcard{ display:flex; flex-direction:column; } /* Kafelek „Komentarz rynkowy" - tekstowy, równa siatka 4 w rzędzie */ .bp-ktile{ display:flex; } .bp-ktile__link{ display:flex; flex-direction:column; gap:.55rem; height:100%; background:#fff; border:1px solid var(--bp-line); border-radius:var(--bp-r-lg); padding:1.4rem 1.4rem 1.5rem; text-decoration:none; transition:transform var(--bp-slow), box-shadow var(--bp-fast), border-color var(--bp-fast); } .bp-ktile__link:hover{ transform:translateY(-4px); box-shadow:var(--bp-shadow); border-color:#cdddf5; } .bp-ktile__title{ font-family:var(--bp-display); font-size:1.08rem; font-weight:600; line-height:1.3; color:var(--bp-navy); margin:.1rem 0 0; } .bp-ktile__excerpt{ color:var(--bp-ink-soft); font-size:.92rem; line-height:1.55; margin:0; flex:1 1 auto; } .bp-ktile .bp-pcard__more{ margin-top:.3rem; } @media (max-width:1100px){ .bp-postgrid--4{ grid-template-columns:repeat(3,1fr); } } @media (max-width:820px){ .bp-postgrid--4{ grid-template-columns:repeat(2,1fr); } } @media (max-width:520px){ .bp-postgrid--4{ grid-template-columns:1fr; } } .bp-pcard__media{ position:relative; display:block; overflow:hidden; border-radius:var(--bp-r-lg); aspect-ratio:3/2; margin-bottom:1.1rem; box-shadow:var(--bp-shadow-sm); } .bp-pcard:hover .bp-pcard__media img{ transform:scale(1.05); } .bp-pcard__body{ display:flex; flex-direction:column; gap:.55rem; } .bp-pcard__title{ font-size:1.3rem; line-height:1.18; letter-spacing:-.01em; margin:.15rem 0 0; } .bp-pcard__title a:hover{ color:var(--bp-steel); } .bp-pcard__excerpt{ color:var(--bp-ink-soft); font-size:.95rem; margin:0; } .bp-pcard__more{ margin-top:.3rem; color:var(--bp-steel); font-weight:600; font-size:.86rem; } .bp-pcard__more i{ font-style:normal; display:inline-block; transition:transform var(--bp-fast); } .bp-pcard:hover .bp-pcard__more i{ transform:translateX(4px); } /* ---- Paginacja ---- */ .bp-pagination{ margin-top:clamp(2.5rem,5vw,4rem); } .bp-pagination .page-numbers{ display:flex; flex-wrap:wrap; gap:.5rem; justify-content:center; align-items:center; list-style:none; margin:0; padding:0; } .bp-pagination .page-numbers li a, .bp-pagination .page-numbers li span{ display:inline-grid; place-items:center; min-width:44px; height:44px; padding:0 .9rem; border:1px solid var(--bp-line); border-radius:12px; background:#fff; font-family:var(--bp-mono); font-weight:600; font-size:.9rem; color:var(--bp-ink-soft); transition:border-color var(--bp-fast), color var(--bp-fast), background var(--bp-fast); } .bp-pagination .page-numbers li a:hover{ border-color:var(--bp-steel-300); color:var(--bp-navy); } .bp-pagination .page-numbers li .current{ background:var(--bp-navy); border-color:var(--bp-navy); color:#fff; } /* ==================== ARTYKUŁ (single) ==================== */ .bp-article{ padding-top:clamp(2.5rem,5vw,4rem); } .bp-article__head-inner{ max-width:60ch; } .bp-crumbs{ display:flex; flex-wrap:wrap; align-items:center; gap:.5rem; font-size:.82rem; color:var(--bp-muted); margin-bottom:1.3rem; } .bp-crumbs a{ color:var(--bp-muted); } .bp-crumbs a:hover{ color:var(--bp-steel); } .bp-crumbs i{ font-style:normal; opacity:.4; } .bp-article__title{ font-size:clamp(2rem,1.3rem+2.6vw,3.6rem); line-height:1.04; letter-spacing:-.025em; margin:0 0 1rem; text-wrap:balance; } .bp-article__meta{ display:flex; flex-wrap:wrap; align-items:center; gap:.6rem; color:var(--bp-muted); font-family:var(--bp-mono); font-size:.82rem; } .bp-article__meta i{ font-style:normal; opacity:.4; } .bp-article__cover{ margin:clamp(1.8rem,4vw,3rem) 0 clamp(2rem,4vw,3rem); border-radius:var(--bp-r-lg); overflow:hidden; box-shadow:var(--bp-shadow); aspect-ratio:16/9; } .bp-article__cover img{ width:100%; height:100%; object-fit:cover; display:block; } .bp-article__layout{ display:grid; grid-template-columns:52px minmax(0,72ch); gap:2.5rem; justify-content:center; align-items:start; } .bp-article__rail{ position:sticky; top:100px; display:flex; flex-direction:column; gap:.55rem; } .bp-share__label{ writing-mode:vertical-rl; font-family:var(--bp-mono); font-size:.66rem; letter-spacing:.18em; text-transform:uppercase; color:var(--bp-muted); margin-bottom:.4rem; } .bp-share__btn{ display:inline-grid; place-items:center; width:44px; height:44px; border-radius:12px; border:1px solid var(--bp-line); background:#fff; color:var(--bp-ink-soft); font-family:var(--bp-mono); font-weight:600; font-size:.95rem; transition:border-color var(--bp-fast), color var(--bp-fast), transform var(--bp-fast); } .bp-share__btn:hover{ border-color:var(--bp-steel-300); color:var(--bp-navy); transform:translateY(-2px); } /* ---- Typografia treści ---- */ .bp-prose{ font-size:1.12rem; line-height:1.75; color:var(--bp-ink); } .bp-prose > * + *{ margin-top:1.3em; } .bp-prose h2{ font-family:var(--bp-display); font-weight:600; font-size:clamp(1.5rem,1.2rem+1vw,2.05rem); line-height:1.15; letter-spacing:-.02em; margin-top:2.2em; margin-bottom:.1em; } .bp-prose h3{ font-family:var(--bp-display); font-weight:600; font-size:clamp(1.25rem,1.1rem+.6vw,1.55rem); margin-top:1.8em; } .bp-prose h2 + *, .bp-prose h3 + *{ margin-top:.7em; } .bp-prose p, .bp-prose ul, .bp-prose ol{ color:var(--bp-ink-soft); } .bp-prose a{ color:var(--bp-steel); text-decoration:underline; text-underline-offset:3px; text-decoration-thickness:1px; text-decoration-color:var(--bp-steel-300); } .bp-prose a:hover{ text-decoration-color:var(--bp-steel); } .bp-prose strong{ color:var(--bp-ink); font-weight:600; } .bp-prose ul, .bp-prose ol{ padding-left:1.3em; } .bp-prose li{ margin-top:.5em; } .bp-prose li::marker{ color:var(--bp-steel); } .bp-prose img, .bp-prose figure{ border-radius:var(--bp-r); max-width:100%; height:auto; } .bp-prose figure{ margin-left:0; margin-right:0; } .bp-prose figcaption{ font-size:.86rem; color:var(--bp-muted); margin-top:.6rem; text-align:center; } .bp-prose blockquote{ margin:1.8em 0; padding:.4em 0 .4em 1.4em; border-left:3px solid var(--bp-steel); font-family:var(--bp-display); font-size:1.3rem; line-height:1.45; color:var(--bp-navy); font-style:italic; } .bp-prose blockquote p{ color:inherit; } .bp-prose h2, .bp-prose h3, .bp-prose strong{ color:var(--bp-navy); } .bp-linkpages{ margin-top:2rem; font-family:var(--bp-mono); font-size:.85rem; } /* ---- Stopka artykułu: tagi + autor ---- */ .bp-article__foot{ max-width:72ch; margin-left:auto; margin-right:auto; margin-top:clamp(2.5rem,5vw,3.5rem); } .bp-article__tags{ display:flex; flex-wrap:wrap; gap:.6rem; margin-bottom:2rem; } .bp-article__tags a{ padding:.45rem 1rem; border:1px solid var(--bp-line); border-radius:999px; font-size:.85rem; color:var(--bp-ink-soft); background:#fff; transition:border-color var(--bp-fast), color var(--bp-fast); } .bp-article__tags a:hover{ border-color:var(--bp-steel-300); color:var(--bp-navy); } .bp-author{ display:flex; gap:1.3rem; align-items:center; background:var(--bp-pearl); border:1px solid var(--bp-line); border-radius:var(--bp-r-lg); padding:1.6rem 1.8rem; } .bp-author__avatar{ margin:0; flex:none; } .bp-author__avatar img{ width:72px; height:72px; border-radius:50%; object-fit:cover; } .bp-author__name{ font-size:1.25rem; margin:.2rem 0 .35rem; } .bp-author__body p{ color:var(--bp-ink-soft); font-size:.95rem; margin:0; max-width:60ch; } /* ---- RWD blog ---- */ @media (max-width:960px){ .bp-feature{ grid-template-columns:1fr; gap:1.6rem; } .bp-feature__media{ aspect-ratio:16/9; } .bp-postgrid{ grid-template-columns:repeat(2,1fr); } .bp-article__layout{ grid-template-columns:minmax(0,72ch); justify-content:center; } .bp-article__rail{ position:static; flex-direction:row; align-items:center; gap:.6rem; margin-bottom:1.5rem; } .bp-share__label{ writing-mode:horizontal-tb; margin:0 .3rem 0 0; } } @media (max-width:560px){ .bp-postgrid{ grid-template-columns:1fr; } .bp-article__cover{ aspect-ratio:4/3; } } @media (prefers-reduced-motion:reduce){ .bp-feature__media img, .bp-pcard__media img{ transition:none !important; } } /* ==================================================================== * * 10. STRONY (page.php) — nagłówek + treść .bp-prose + boczna nawigacja * ==================================================================== */ .bp-page-head{ position:relative; isolation:isolate; overflow:hidden; background:#0A1A2F; color:#fff; padding:clamp(3rem,6vw,5rem) 0 clamp(2.6rem,5vw,4rem); } .bp-page-head__bg{ position:absolute; inset:0; z-index:-2; background-size:cover; background-position:center; filter:saturate(.7) contrast(1.02) brightness(.5); } .bp-page-head::after{ content:""; position:absolute; inset:0; z-index:-1; pointer-events:none; background: linear-gradient(180deg, rgba(10,26,47,.74), rgba(10,26,47,.92)), radial-gradient(70% 60% at 12% 0%, rgba(46,139,139,.26), transparent 60%); } .bp-page-head .bp-grain{ opacity:.05; z-index:-1; } .bp-page-head--compact{ padding:clamp(2rem,4vw,3rem) 0 clamp(1.6rem,3vw,2.4rem); } .bp-page-head__inner{ max-width:62ch; } /* Zdjęcie w sekcji usług (baner pod nagłówkiem) - układ z motywu przyklad */ .bp-page-banner{ position:relative; margin:clamp(1.4rem,3vw,2.2rem) 0 0; height:clamp(140px,16vw,200px); border-radius:var(--bp-r-lg); overflow:hidden; background:var(--bp-pearl) center/cover no-repeat; box-shadow:var(--bp-shadow); } .bp-page-banner::after{ content:""; position:absolute; inset:0; background:linear-gradient(110deg, rgba(8,20,40,.35), transparent 60%); } /* Wariant dla podstron branżowych: tam zdjęcie jest treścią, nie ozdobą. Domyślny pasek to ok. 6:1 — ze zwykłego kadru 3:2 widać przy nim ćwierć wysokości i temat zdjęcia znika. Ten wariant daje ok. 4:1, czyli nadal dwa razy mniej niż dawne hero, ale kadr wreszcie się czyta. */ .bp-page-banner--wide{ height:clamp(190px,21vw,300px); } .bp-page-head h1{ font-size:var(--bp-h1); line-height:1.03; margin:.4rem 0 0; color:#fff; text-wrap:balance; } .bp-crumbs--light{ color:#9fb1c6; margin-bottom:0; } .bp-crumbs--light a{ color:#9fb1c6; } .bp-crumbs--light a:hover{ color:#fff; } .bp-crumbs--light span{ color:#cfe0f2; } .bp-crumbs--light i{ color:#6781a0; } /* Układ: treść + boczna nawigacja sekcji */ .bp-page{ display:grid; grid-template-columns:248px minmax(0,1fr); gap:clamp(2rem,5vw,4.5rem); align-items:start; } .bp-page--solo{ display:block; } .bp-page--solo .bp-page__body{ max-width:74ch; margin:0 auto; } .bp-page__aside{ position:sticky; top:100px; display:flex; flex-direction:column; gap:1.2rem; } .bp-subnav{ border-left:2px solid var(--bp-line); padding-left:1.1rem; } .bp-subnav__root{ display:block; font-family:var(--bp-mono); font-size:.72rem; letter-spacing:.16em; text-transform:uppercase; color:var(--bp-steel); font-weight:600; margin-bottom:.8rem; } .bp-subnav ul{ list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:.1rem; } .bp-subnav li a{ display:block; padding:.5rem .2rem; color:var(--bp-ink-soft); font-size:.95rem; line-height:1.3; border-left:2px solid transparent; margin-left:-1.1rem; padding-left:1.1rem; transition:color var(--bp-fast), border-color var(--bp-fast); } .bp-subnav li a:hover{ color:var(--bp-navy); } .bp-subnav .current_page_item > a, .bp-subnav .current_page_ancestor > a{ color:var(--bp-navy); font-weight:600; border-left-color:var(--bp-steel); } .bp-subnav .children{ margin:.1rem 0 .3rem .8rem; border-left:1px solid var(--bp-line); } .bp-aside-card{ display:flex; flex-direction:column; gap:.3rem; background:linear-gradient(150deg,#102A4C,#0A1A2F); color:#fff; border-radius:var(--bp-r-lg); padding:1.4rem; overflow:hidden; position:relative; isolation:isolate; transition:box-shadow var(--bp-fast), transform var(--bp-slow); } .bp-aside-card::before{ content:""; position:absolute; inset:0; z-index:-1; opacity:.6; background:radial-gradient(80% 70% at 100% 0%, rgba(46,139,139,.4), transparent 60%); } .bp-aside-card:hover{ box-shadow:var(--bp-shadow); transform:translateY(-2px); } .bp-aside-card .bp-kick{ color:#7FB2FF; margin:0; } .bp-aside-card strong{ font-family:var(--bp-display); font-weight:600; font-size:1.15rem; line-height:1.2; } .bp-aside-card__go{ margin-top:.5rem; color:#9fc6f0; font-weight:600; font-size:.85rem; } .bp-aside-card:hover .bp-aside-card__go{ color:#fff; } /* Okładka strony + akcent lead w treści */ .bp-page__cover{ margin:0 0 clamp(1.6rem,3vw,2.4rem); border-radius:var(--bp-r-lg); overflow:hidden; box-shadow:var(--bp-shadow); aspect-ratio:16/9; } .bp-page__cover img{ width:100%; height:100%; object-fit:cover; display:block; } .bp-prose .lead, .bp-prose > p:first-of-type{ font-size:1.28rem; line-height:1.6; color:var(--bp-ink); } .bp-prose .lead strong, .bp-prose > p:first-of-type strong{ color:var(--bp-navy); } /* ---- Karty w treści podstron (Usługi, Nasze wartości, Zespół) ---- * Lista rozwijana po lewej zostaje bez zmian; zmienia się sama karta. * Geometria i charakter jak w pierwszej wersji Klienta (plik ZIP): biała karta, * kaflik ikony w błękicie, tytuł, opis, dyskretne CTA i podniesienie na hover. * Wcześniej te klasy (.cards/.card/.values/.val) nie miały żadnych stylów. */ .bp-prose .cards, .bp-prose .gcards{ display:grid; grid-template-columns:repeat(auto-fit,minmax(250px,1fr)); gap:1.1rem; margin-top:1.6rem; } .bp-prose .card{ display:flex; flex-direction:column; min-height:186px; padding:1.6rem; background:#fff; border:1px solid var(--bp-line); border-radius:var(--bp-r-lg); color:var(--bp-ink); text-decoration:none; transition:transform var(--bp-slow), box-shadow var(--bp-fast), border-color var(--bp-fast); } .bp-prose .card:hover{ transform:translateY(-4px); box-shadow:var(--bp-shadow); border-color:#cdddf5; } .bp-prose .card .ico{ display:inline-flex; align-items:center; justify-content:center; flex:none; width:46px; height:46px; margin-bottom:1rem; border-radius:13px; background:var(--bp-pearl-2); color:var(--bp-steel); } .bp-prose .card .ico svg{ width:22px; height:22px; } .bp-prose .card h3{ font-family:var(--bp-display); font-size:1.15rem; font-weight:600; margin:0; color:var(--bp-navy); line-height:1.25; } .bp-prose .card p{ color:var(--bp-ink-soft); font-size:.93rem; margin:.45rem 0 0; } .bp-prose .card .more{ margin-top:auto; padding-top:.9rem; font-family:var(--bp-mono); font-weight:600; font-size:.74rem; letter-spacing:.06em; text-transform:uppercase; color:var(--bp-steel); transition:transform var(--bp-fast); } .bp-prose .card:hover .more{ transform:translateX(3px); } /* Wartości - karta z gradientowym medalionem ikony (wygląd z motywu `przyklad`, który Klient wskazał jako lepszy). Medalion wstrzykuje bp_content_value_icons(). */ .bp-prose .values{ display:flex; flex-wrap:wrap; gap:1.1rem; justify-content:center; margin-top:1.8rem; } .bp-prose .val{ flex:1 1 300px; max-width:380px; display:flex; flex-direction:column; align-items:flex-start; padding:1.7rem 1.6rem; background:#fff; border:1px solid var(--bp-line); border-radius:var(--bp-r-lg); transition:transform var(--bp-slow), box-shadow var(--bp-fast), border-color var(--bp-fast); } .bp-prose .val:hover{ transform:translateY(-4px); box-shadow:var(--bp-shadow); border-color:#cdddf5; } .bp-prose .val .bp-val__med{ width:72px; height:72px; padding:16px; box-sizing:border-box; flex:none; border-radius:50%; color:#fff; display:flex; align-items:center; justify-content:center; box-shadow:0 8px 20px -10px rgba(0,0,0,.5); margin-bottom:1rem; } .bp-prose .val .bp-val__med svg{ width:100%; height:100%; } .bp-prose .val .n{ font-family:var(--bp-mono); font-weight:600; font-size:.78rem; letter-spacing:.12em; color:var(--bp-steel); } .bp-prose .val h3{ font-family:var(--bp-display); font-size:1.28rem; font-weight:600; letter-spacing:-.01em; margin:.15rem 0 .5rem; color:var(--bp-navy); } .bp-prose .val p{ color:var(--bp-ink-soft); font-size:.96rem; line-height:1.6; margin:0; } @media (max-width:600px){ .bp-prose .val{ flex:1 1 100%; max-width:none; padding:1.4rem 1.3rem; } } /* „Dlaczego my” - czytelna lista atutów (wzór z motywu przyklad: kwadratowy gradientowy punktor zamiast łamiących się ikon z dawnego iconTextList). */ .bp-prose ul.bp-reasons{ list-style:none; display:flex; flex-direction:column; gap:.85rem; padding-left:0; margin:1.6rem 0 0; } .bp-prose ul.bp-reasons li{ position:relative; padding-left:1.8rem; margin-top:0; color:var(--bp-ink-soft); line-height:1.6; } .bp-prose ul.bp-reasons li::before{ content:""; position:absolute; left:0; top:.55em; width:9px; height:9px; border-radius:3px; background:linear-gradient(135deg,#1f6feb,#0b3e8f); } .bp-prose ul.bp-reasons li::marker{ content:none; } .bp-prose ul.bp-reasons strong{ color:var(--bp-navy); } /* Zespół - karta pozioma: zdjęcie w kadrze 4:5 + biogram obok */ .bp-team{ display:flex; flex-direction:column; gap:1.2rem; margin-top:1.8rem; } .bp-team__card{ display:grid; grid-template-columns:190px minmax(0,1fr); gap:1.6rem; align-items:stretch; background:#fff; border:1px solid var(--bp-line); border-radius:var(--bp-r-lg); overflow:hidden; transition:transform var(--bp-slow), box-shadow var(--bp-fast), border-color var(--bp-fast); } .bp-team__card:hover{ transform:translateY(-4px); box-shadow:var(--bp-shadow); border-color:#cdddf5; } .bp-team__photo{ display:block; aspect-ratio:4/5; background:var(--bp-pearl) center/cover no-repeat; } .bp-team__body{ padding:1.6rem 1.6rem 1.6rem 0; display:flex; flex-direction:column; justify-content:center; } .bp-team__card h3{ font-family:var(--bp-display); font-size:1.35rem; font-weight:600; margin:0; color:var(--bp-navy); } .bp-team__role{ font-family:var(--bp-mono); font-weight:600; font-size:.72rem; letter-spacing:.08em; text-transform:uppercase; color:var(--bp-steel); margin-top:.35rem; } .bp-team__card p{ color:var(--bp-ink-soft); font-size:.97rem; line-height:1.65; margin:.8rem 0 0; } @media (max-width:700px){ .bp-team__card{ grid-template-columns:1fr; } .bp-team__photo{ aspect-ratio:16/10; } .bp-team__body{ padding:1.4rem; } } /* Zespół - siatka kart ze zdjęciem u góry (układ z motywu przyklad) */ .bp-teamgrid{ display:grid; grid-template-columns:repeat(3,1fr); gap:1.2rem; margin:1.4rem 0 2.4rem; } .bp-tcard{ background:#fff; border:1px solid var(--bp-line); border-radius:var(--bp-r-lg); overflow:hidden; display:flex; flex-direction:column; transition:transform var(--bp-slow), box-shadow var(--bp-fast), border-color var(--bp-fast); } .bp-tcard:hover{ transform:translateY(-4px); box-shadow:var(--bp-shadow); border-color:#cdddf5; } .bp-tcard__ph{ display:block; aspect-ratio:4/5; background:var(--bp-pearl) center/cover no-repeat; position:relative; } .bp-tcard__ph::after{ content:""; position:absolute; inset:0; background:linear-gradient(180deg,transparent 55%,rgba(8,20,40,.35)); } .bp-tcard__b{ padding:1.2rem 1.3rem 1.4rem; } .bp-tcard h3{ font-family:var(--bp-display); font-size:1.15rem; font-weight:600; margin:0; color:var(--bp-navy); } .bp-tcard__role{ display:block; font-family:var(--bp-mono); font-weight:600; font-size:.68rem; letter-spacing:.06em; text-transform:uppercase; color:var(--bp-steel); margin-top:.3rem; } .bp-tcard p{ color:var(--bp-ink-soft); font-size:.9rem; line-height:1.6; margin:.6rem 0 0; } /* Współpracownicy - kompaktowe karty z monogramem zamiast zdjęcia */ .bp-tcard--compact .bp-tcard__mono{ display:inline-flex; align-items:center; justify-content:center; width:46px; height:46px; border-radius:50%; color:#fff; font-family:var(--bp-display); font-weight:600; font-size:1.05rem; letter-spacing:.02em; margin-bottom:.7rem; } @media (max-width:900px){ .bp-teamgrid{ grid-template-columns:repeat(2,1fr); } } @media (max-width:560px){ .bp-teamgrid{ grid-template-columns:1fr; } } /* Komitet Doradczy - karty poziome: portret + biogram (układ z motywu przyklad) */ .bp-prose .bp-committee{ display:flex; flex-direction:column; gap:1.2rem; margin:1.8rem 0 0; } .bp-prose .bp-cmember{ display:grid; grid-template-columns:170px minmax(0,1fr); gap:1.6rem; align-items:stretch; background:#fff; border:1px solid var(--bp-line); border-radius:var(--bp-r-lg); overflow:hidden; transition:transform var(--bp-slow), box-shadow var(--bp-fast), border-color var(--bp-fast); } .bp-prose .bp-cmember:hover{ transform:translateY(-4px); box-shadow:var(--bp-shadow); border-color:#cdddf5; } .bp-prose .bp-cmember__ph{ display:block; min-height:230px; background:var(--bp-pearl) center/cover no-repeat; } .bp-prose .bp-cmember__b{ padding:1.5rem 1.6rem 1.5rem 0; display:flex; flex-direction:column; justify-content:center; } .bp-prose .bp-cmember__b h3{ font-family:var(--bp-display); font-size:1.3rem; font-weight:600; margin:0; color:var(--bp-navy); } .bp-prose .bp-cmember__role{ font-family:var(--bp-mono); font-weight:600; font-size:.7rem; letter-spacing:.07em; text-transform:uppercase; color:var(--bp-steel); margin-top:.35rem; } .bp-prose .bp-cmember__b p{ color:var(--bp-ink-soft); font-size:.96rem; line-height:1.65; margin:.75rem 0 0; } /* Miejsce na zdjęcie (osoba do uzupełnienia) */ .bp-prose .bp-cmember--todo{ border-style:dashed; } .bp-prose .bp-cmember__ph--empty{ display:flex; align-items:center; justify-content:center; background:var(--bp-pearl); color:var(--bp-muted); } .bp-prose .bp-cmember__ph--empty svg{ width:44px; height:44px; opacity:.5; } @media (max-width:640px){ .bp-prose .bp-cmember{ grid-template-columns:1fr; } .bp-prose .bp-cmember__ph{ aspect-ratio:16/10; height:auto; } .bp-prose .bp-cmember__b{ padding:1.3rem; } } /* Doświadczenie - czysta lista realizacji (bez grafik, dużo naraz) w 2 kolumnach */ .bp-prose ul.bp-exp-list{ list-style:none; padding:0; margin:1.8rem 0 0; columns:2; column-gap:2.6rem; } .bp-prose ul.bp-exp-list li{ break-inside:avoid; position:relative; padding:.55rem 0 .55rem 1.4rem; border-bottom:1px solid var(--bp-line); margin:0; } .bp-prose ul.bp-exp-list li::before{ content:""; position:absolute; left:0; top:1.05em; width:7px; height:7px; border-radius:2px; background:linear-gradient(135deg,#1f6feb,#0b3e8f); } .bp-prose ul.bp-exp-list a{ color:var(--bp-navy); text-decoration:none; font-size:.98rem; line-height:1.45; transition:color var(--bp-fast); } .bp-prose ul.bp-exp-list a:hover{ color:var(--bp-steel); } @media (max-width:720px){ .bp-prose ul.bp-exp-list{ columns:1; } } @media (max-width:1100px){ .bp-prose .cards, .bp-prose .gcards{ grid-template-columns:repeat(2,1fr); } } @media (max-width:620px){ .bp-prose .cards, .bp-prose .gcards, .bp-prose .values{ grid-template-columns:1fr; } } @media (max-width:960px){ .bp-page{ grid-template-columns:1fr; gap:2.5rem; } .bp-page__aside{ position:static; } .bp-subnav ul{ display:grid; grid-template-columns:1fr 1fr; gap:.1rem .8rem; } } @media (max-width:560px){ .bp-subnav ul{ grid-template-columns:1fr; } .bp-page__cover{ aspect-ratio:4/3; } } /* ==================================================================== * * 11. KONTAKT — kafle kontaktu, formularz CF7, kolumna „co dalej”, mapa * ==================================================================== */ /* Trzy drogi kontaktu. Każdy kafel jest linkiem (mailto / tel / mapa), więc na telefonie wystarczy jedno tknięcie. */ .bp-ktiles{ display:grid; grid-template-columns:repeat(3,1fr); gap:1rem; margin-bottom:clamp(2.2rem,4vw,3.4rem); } .bp-ktile{ display:flex; flex-direction:column; gap:.35rem; padding:1.5rem 1.6rem; background:#fff; border:1px solid var(--bp-line); border-radius:var(--bp-r-lg); transition:box-shadow var(--bp-fast), border-color var(--bp-fast), transform var(--bp-fast); } .bp-ktile:hover{ transform:translateY(-3px); box-shadow:var(--bp-shadow-sm); border-color:var(--bp-steel-300); } .bp-ktile__k{ font-size:.72rem; font-weight:600; letter-spacing:.14em; text-transform:uppercase; color:var(--bp-steel); } .bp-ktile strong{ font-family:var(--bp-display); font-size:1.12rem; color:var(--bp-navy); line-height:1.25; word-break:break-word; } .bp-ktile__s{ font-size:.86rem; color:var(--bp-muted); line-height:1.5; } /* Formularz dostaje szerszą kolumnę — to on zamienia wejście w lead. */ .bp-kgrid{ display:grid; grid-template-columns:1.25fr .75fr; gap:clamp(2rem,4vw,3.4rem); align-items:start; } .bp-kform h2{ font-size:var(--bp-h2); margin:.3rem 0 .6rem; } .bp-kform__lead{ color:var(--bp-ink-soft); font-size:1rem; margin:0 0 1.4rem; max-width:52ch; } .bp-kaside{ display:flex; flex-direction:column; gap:1rem; position:sticky; top:calc(var(--bp-header-h) + 1.4rem); } .bp-kbox{ background:var(--bp-pearl); border:1px solid var(--bp-line); border-radius:var(--bp-r-lg); padding:1.5rem 1.6rem; } .bp-kbox h3{ font-size:1.05rem; margin:0 0 1rem; color:var(--bp-navy); } .bp-kbox--quiet{ background:transparent; } .bp-kbox--quiet p{ margin:0; font-size:.9rem; line-height:1.65; color:var(--bp-ink-soft); } /* Numeracja z licznika — cyfra jest elementem graficznym, nie punktorem. */ .bp-ksteps{ list-style:none; counter-reset:bpk; margin:0; padding:0; } .bp-ksteps li{ counter-increment:bpk; position:relative; padding:0 0 1.05rem 2.5rem; margin:0; } .bp-ksteps li:last-child{ padding-bottom:0; } .bp-ksteps li::before{ content:counter(bpk); position:absolute; left:0; top:-.1rem; width:1.65rem; height:1.65rem; border-radius:50%; display:grid; place-items:center; background:var(--bp-navy); color:#fff; font-family:var(--bp-display); font-size:.78rem; font-weight:600; } /* Włosowa linia łącząca kroki — sugeruje ciąg, nie trzy osobne fakty. */ .bp-ksteps li:not(:last-child)::after{ content:""; position:absolute; left:.8rem; top:1.75rem; bottom:.35rem; width:1px; background:var(--bp-line); } .bp-ksteps strong{ display:block; font-size:.95rem; color:var(--bp-navy); line-height:1.4; } .bp-ksteps span{ display:block; font-size:.87rem; color:var(--bp-ink-soft); margin-top:.15rem; line-height:1.55; } /* Karta z formularzem */ .bp-formcard{ background:#fff; border:1px solid var(--bp-line); border-radius:var(--bp-r-lg); padding:clamp(1.4rem,3vw,2.2rem); box-shadow:var(--bp-shadow-sm); } .bp-formcard p{ margin:0 0 1rem; } .bp-formcard label{ display:block; font-size:.86rem; font-weight:600; color:var(--bp-navy); margin-bottom:.4rem; } .bp-formcard input:not([type=submit]):not([type=checkbox]):not([type=radio]), .bp-formcard textarea, .bp-formcard select{ width:100%; padding:.85rem 1rem; font:inherit; color:var(--bp-ink); background:var(--bp-pearl); border:1px solid var(--bp-line); border-radius:var(--bp-r); transition:border-color var(--bp-fast), box-shadow var(--bp-fast), background var(--bp-fast); } .bp-formcard input:focus, .bp-formcard textarea:focus, .bp-formcard select:focus{ outline:none; border-color:var(--bp-steel); background:#fff; box-shadow:0 0 0 4px rgba(30,77,123,.1); } .bp-formcard textarea{ min-height:140px; resize:vertical; } .bp-formcard .wpcf7-submit, .bp-formcard input[type=submit]{ width:auto; cursor:pointer; margin-top:.4rem; padding:.95rem 1.8rem; border:0; border-radius:999px; background:linear-gradient(100deg,var(--bp-steel),var(--bp-baltic)); color:#fff; font-family:var(--bp-body); font-weight:600; font-size:.95rem; letter-spacing:.01em; box-shadow:0 14px 30px -14px rgba(30,77,123,.8); transition:transform var(--bp-fast), box-shadow var(--bp-fast); } .bp-formcard .wpcf7-submit:hover, .bp-formcard input[type=submit]:hover{ transform:translateY(-2px); box-shadow:0 18px 40px -14px rgba(30,77,123,.95); } .bp-formcard .wpcf7-spinner{ margin:.6rem auto 0; } .bp-formcard .wpcf7-not-valid-tip{ color:#c0392b; font-size:.82rem; margin-top:.3rem; } .bp-formcard .wpcf7-response-output{ margin:1rem 0 0 !important; padding:.9rem 1.1rem !important; border-radius:var(--bp-r) !important; border:1px solid var(--bp-line) !important; font-size:.9rem; background:var(--bp-pearl); } /* --- Formularz kontaktowy: układ pól --------------------------------- Klasy dla nowego szablonu Contact Form 7. Stary szablon używał siatki poprzedniego motywu (`row rowMedium`, `col6`) i listy `