/* ############################################################################ GMB – CAŁY CSS STRONY W JEDNYM PLIKU Wklej w: Wygląd → Dostosuj → Dodatkowy CSS (jeden raz, globalnie). Wtedy możesz usunąć osobne wklejki CSS z poszczególnych sekcji. KOLEJNOŚĆ (ważna dla kaskady): 1. gmb-fonts.css – tokeny + globalna typografia (:root, zmienne) 2. gmb-header.css – header (px, niezależny od bazy rem) 3. gmb-footer.css – footer (px, niezależny od bazy rem) 4. gmb-hero.css – hero + baza 1rem=10px (patrz niżej) 5. gmb-about.css 6. gmb-skills.css 7. gmb-clients.css 8. gmb-team.css 9. gmb-contact.css UWAGA o bazie 1rem=10px (WAŻNE – inaczej rozjeżdża się na Safari/Mac): Sekcje treści (hero/about/skills/clients/team/contact) są skalowane przy założeniu 1rem = 10px. Baza 10px włącza się tylko na stronach z tymi sekcjami, żeby NIE zmieniać skali na podstronach. Do tego potrzebny jest MAŁY SNIPPET PHP (wklej w „Fragmenty kodu"), który dodaje klasę gmb-base do na stronie głównej: add_filter( 'language_attributes', function ( $output ) { if ( is_front_page() || is_home() ) { $output .= ' class="gmb-base"'; } return $output; } ); (Jest też wariant html:has(...) niżej dla nowych przeglądarek, ale to właśnie klasa gmb-base ratuje starsze Safari, gdzie :has() nie działa.) Header i footer celowo nie wymuszają 10px – są na każdej podstronie i mają rozmiary w px, więc działają wszędzie tak samo. ############################################################################ */ /* ============================================================================ FIX FONTU NA MAC (Safari + Chrome) — PRZYCZYNA: złe metryki pionowe pliku Monument Grotesk. W foncie tabela hhea ma ascent = 4495/2048 ≈ 2,2em (!), a flaga USE_TYPO_METRICS jest wyłączona. Skutek: • Mac (Safari + Chrome) czyta hhea → ogromny ascent → tekst „spada na dół" i CAŁA strona rozjeżdża się w pionie (ciasne line-height). • Windows (Chrome) czyta OS/2 win (ascent ≈ 1,07em) → wygląda dobrze. Rozwiązanie: nadpisujemy metryki w @font-face wartościami z tabeli win, więc KAŻDA przeglądarka/OS renderuje tekst identycznie (jak na Windowsie). Przy okazji brak local() = zawsze webowa wersja fontu. gmb-all.css ładuje się ostatni, więc nadpisuje deklarację z motywu/Elementora. (Gdyby ścieżki .woff2 były inne, podmień URL-e na te z Twojej biblioteki mediów.) ============================================================================ */ @font-face { font-family: "Monument Grotesk"; src: url("../fonts/MonumentGrotesk-Regular.woff2") format("woff2"); font-weight: 400; font-style: normal; font-display: swap; ascent-override: 107.2%; descent-override: 28.9%; line-gap-override: 0%; } @font-face { font-family: "Monument Grotesk"; src: url("../fonts/MonumentGrotesk-Medium.woff2") format("woff2"); font-weight: 500; font-style: normal; font-display: swap; ascent-override: 107.2%; descent-override: 28.9%; line-gap-override: 0%; } @font-face { font-family: "Monument Grotesk"; src: url("../fonts/MonumentGrotesk-Bold.woff2") format("woff2"); font-weight: 700; font-style: normal; font-display: swap; ascent-override: 107.2%; descent-override: 28.9%; line-gap-override: 0%; } /* ============================================================================ gmb-fonts.css ============================================================================ */ /* ============================================================ GMB Fonts – GLOBALNA typografia całej strony ============================================================ JAK UŻYĆ: ▸ Code Snippets: Add New → typ "Styles (CSS)" → wklej całość → Activate (albo doklej na SAMYM POCZĄTKU: Wygląd → Dostosuj → Dodatkowy CSS) DWA FONTY, JEDNA ZASADA: ▸ heading (Monument Grotesk) – nagłówki, nazwy, przyciski, treść ▸ mono (SF Mono) – drobne teksty "techniczne": liczniki, numery, kategorie, tagi, podpisy, kod Chcesz podmienić font na całej stronie? Zmieniasz TYLKO te dwie zmienne poniżej — wszystkie sekcje gmb-* pójdą za nimi. ============================================================ */ :root { --gmb-font-heading: "Monument Grotesk", "Helvetica Neue", Arial, sans-serif; --gmb-font-mono: "SF Mono", "Cascadia Code", "Consolas", "Liberation Mono", monospace; /* ========================================================== SKALA TYPOGRAFICZNA – wzorzec: sekcja kontakt Zmieniasz tu → zmienia się cała strona. ========================================================== */ /* nagłówek sekcji (o nas, kontakt, kompetencje…) */ --gmb-typo-section: 41px; --gmb-typo-section-mobile: 28px; /* licznik przy nagłówku: (07), (11), 24h */ --gmb-typo-count: clamp(1.4rem, 1.7vw, 1.7rem); /* lead / wprowadzenie (duży akapit w kontakcie) */ --gmb-typo-lead: clamp(1.8rem, 2.4vw, 2.8rem); /* tytuł podsekcji (nazwa projektu w preview, tytuł modala) */ --gmb-typo-title: clamp(2rem, 2.4vw, 2.6rem); /* treść główna / nazwa w liście */ --gmb-typo-body: clamp(1.4rem, 1.7vw, 1.7rem); /* mono: punkty, opisy, status */ --gmb-typo-mono: clamp(1.25rem, 1.4vw, 1.5rem); /* mono: etykiety, numery, kategorie, rok, tagi */ --gmb-typo-mono-s: clamp(1.1rem, 1.25vw, 1.3rem); /* mono: noty, drobne podpisy */ --gmb-typo-mono-xs: clamp(1.05rem, 1.2vw, 1.25rem); /* linki bezpośrednie, średni akcent */ --gmb-typo-link: clamp(1.5rem, 1.9vw, 2rem); /* przycisk CTA */ --gmb-typo-btn: clamp(1.5rem, 1.8vw, 1.8rem); /* status wysyłki / komunikat */ --gmb-typo-status: clamp(1.25rem, 1.4vw, 1.5rem); /* chipy, małe przyciski wyboru */ --gmb-typo-chip: clamp(1.2rem, 1.35vw, 1.45rem); /* podpis, komentarz, tagline */ --gmb-typo-caption: clamp(1.15rem, 1.35vw, 1.45rem); /* kod / zmienne (about) */ --gmb-typo-code: clamp(1.35rem, 1.65vw, 1.85rem); --gmb-typo-code-bracket: clamp(1.5rem, 1.8vw, 1.9rem); /* duże liczby (statystyki, wynik w grze) */ --gmb-typo-display: clamp(2.4rem, 3.4vw, 3.6rem); --gmb-typo-score: clamp(1.8rem, 2.4vw, 2.8rem); /* imię / nazwa osoby (team) */ --gmb-typo-name: clamp(2rem, 3vw, 3.2rem); /* formularze (aliasy – te same co kontakt) */ --gmb-form-label-size: clamp(1.2rem, 1.35vw, 1.4rem); --gmb-form-input-size: clamp(1.6rem, 2vw, 2rem); --gmb-form-legal-size: clamp(1.1rem, 1.25vw, 1.3rem); } /* hero definiuje --pit-font dla całej strony – przepinamy go na global. (html:root wygrywa z :root niezależnie od kolejności wczytania) */ html:root { --pit-font: var(--gmb-font-heading); } /* ------------------------------------------------------------ 1. BAZA – wszystkie sekcje gmb-* na foncie heading ------------------------------------------------------------ */ .gmb-hero, .gmb-clients, .gmb-skills, .gmb-about, .gmb-team, .gmb-contact { font-family: var(--gmb-font-heading); } /* ------------------------------------------------------------ 2. MONO – drobne teksty "techniczne" we wszystkich sekcjach ------------------------------------------------------------ */ /* liczniki przy nagłówkach sekcji: (07), (11), 24h */ .gmb-clients-count, .gmb-skills-count, .gmb-about-count, .gmb-team-count, .gmb-contact-count, /* HERO – podpisy projektów na siatce + licznik slidera mobilnego */ .gmb-hero .gmb-project-desc, .gmb-hero .gmb-hero-slider-counter, /* WSZYSTKIE REALIZACJE – numery, kategorie, rok, tagi, paginacja */ .gmb-clients .gmb-clients-item-idx, .gmb-clients .gmb-clients-item-cat, .gmb-clients .gmb-clients-preview-year, .gmb-clients .gmb-clients-preview-tags, .gmb-clients .gmb-clients-page-btn, /* KOMPETENCJE – HUD gry, promo, ranking, podpisy, overlay */ .gmb-skills .gmb-skills-promo-text, .gmb-skills .gmb-skills-promo-progress, .gmb-skills .gmb-skills-hud-item, .gmb-skills .gmb-skills-leaderboard-title, .gmb-skills .gmb-skills-leaderboard-list, .gmb-skills .gmb-skills-overlay-sub, .gmb-skills .gmb-skills-overlay-prize, .gmb-skills .gmb-skills-caption { font-family: var(--gmb-font-mono) !important; letter-spacing: -0.01em; } /* about / team / contact mają już mono przez własne zmienne – tu tylko upewniamy się, że czytają global */ section.gmb-about { --gmb-about-heading-font: var(--gmb-font-heading); --gmb-about-code-font: var(--gmb-font-mono); } section.gmb-team { --gmb-team-heading-font: var(--gmb-font-heading); --gmb-team-code-font: var(--gmb-font-mono); } section.gmb-contact { --gmb-contact-heading-font: var(--gmb-font-heading); --gmb-contact-code-font: var(--gmb-font-mono); } section.gmb-clients { --gmb-clients-heading-font: var(--gmb-font-heading); } section.gmb-skills { --gmb-skills-heading-font: var(--gmb-font-heading); } /* ------------------------------------------------------------ 3. FORMULARZE – SZTYWNE ZASADY (wzorzec: formularz kontaktowy) ------------------------------------------------------------ Obowiązuje KAŻDY formularz na stronie (kontakt, modal zniżki w kompetencjach i każdy następny): ▸ etykieta pola → mono, 400, lowercase, czerń 72% ▸ treść pola+placeholder → heading (grotesk), 500; placeholder czerń 45% ▸ tekst prawny (zgody) → mono, 400; linki czarne podkreślone, hover zielony ▸ status wysyłki → mono ▸ przycisk submit → heading, 500, lowercase; róż → czarny na hover ▸ focus pola → niebieskie podkreślenie ▸ błąd pola → różowe podkreślenie Rozmiary trzymają tokeny z :root powyżej. ------------------------------------------------------------ */ /* etykiety pól */ .gmb-contact .gmb-contact-label, .gmb-contact-widget .gmb-contact-label, .gmb-skills-form-modal .gmb-skills-field-label { font-family: var(--gmb-font-mono) !important; font-size: var(--gmb-form-label-size) !important; font-weight: 400 !important; letter-spacing: -0.01em !important; text-transform: lowercase !important; color: rgba(0, 0, 0, 0.72) !important; } /* treść pól + placeholdery – ZAWSZE font heading, nigdy mono */ .gmb-contact .gmb-contact-input, .gmb-contact-widget .gmb-contact-input, .gmb-contact-widget .gmb-contact-textarea, .gmb-skills-form-modal .gmb-skills-field input, .gmb-skills-form-modal .gmb-skills-field select { font-family: var(--gmb-font-heading) !important; font-size: var(--gmb-form-input-size) !important; font-weight: 500 !important; letter-spacing: -0.02em !important; } .gmb-contact .gmb-contact-input::placeholder, .gmb-contact .gmb-contact-textarea::placeholder, .gmb-contact-widget .gmb-contact-input::placeholder, .gmb-contact-widget .gmb-contact-textarea::placeholder, .gmb-skills-form-modal .gmb-skills-field input::placeholder { font-family: var(--gmb-font-heading) !important; font-weight: 500 !important; color: rgba(0, 0, 0, 0.38) !important; -webkit-text-fill-color: rgba(0, 0, 0, 0.38) !important; opacity: 1 !important; } /* wyjątek: kod rabatowy (czarny blok) – szeroki tracking, stały rozmiar */ .gmb-skills-form-modal .gmb-skills-field--code input { font-size: 1.8rem !important; letter-spacing: 0.12em !important; } /* teksty prawne / zgody */ .gmb-contact .gmb-contact-consent-text, .gmb-contact-widget .gmb-contact-consent-text, .gmb-contact .gmb-contact-note, .gmb-skills-form-modal .gmb-skills-consent { font-family: var(--gmb-font-mono) !important; font-size: var(--gmb-form-legal-size) !important; font-weight: 400 !important; letter-spacing: -0.01em !important; } /* status wysyłki */ .gmb-contact .gmb-contact-status, .gmb-skills-form-modal .gmb-skills-form-status { font-family: var(--gmb-font-mono) !important; font-weight: 400 !important; } /* przyciski submit – font (kolory trzymają pliki sekcji: róż → czarny) */ .gmb-contact .gmb-contact-submit, .gmb-contact-widget .gmb-contact-submit, .gmb-skills-form-modal .gmb-skills-form-submit { font-family: var(--gmb-font-heading) !important; font-size: var(--gmb-typo-btn) !important; font-weight: 500 !important; text-transform: lowercase !important; } /* ------------------------------------------------------------ 4. SKALA – wymuszenie na wspólnych elementach sekcji ------------------------------------------------------------ */ /* nagłówki sekcji */ .gmb-clients-heading, .gmb-skills-heading, .gmb-about-heading, .gmb-team-heading, .gmb-contact-heading { font-size: var(--gmb-typo-section) !important; } /* liczniki */ .gmb-clients-count, .gmb-skills-count, .gmb-about-count, .gmb-team-count, .gmb-contact-count { font-size: var(--gmb-typo-count) !important; } /* mobile: nagłówki sekcji */ @media (max-width: 767px) { .gmb-clients-heading, .gmb-skills-heading, .gmb-about-heading, .gmb-team-heading, .gmb-contact-heading { font-size: var(--gmb-typo-section-mobile) !important; } } /* mono drobne: numery, kategorie, rok, tagi, HUD, promo */ .gmb-clients .gmb-clients-item-idx, .gmb-clients .gmb-clients-item-cat, .gmb-clients .gmb-clients-preview-year, .gmb-clients .gmb-clients-preview-tags, .gmb-clients .gmb-clients-page-btn, .gmb-skills .gmb-skills-promo-text, .gmb-skills .gmb-skills-promo-progress, .gmb-skills .gmb-skills-hud-item, .gmb-skills .gmb-skills-leaderboard-title, .gmb-skills .gmb-skills-leaderboard-list, .gmb-skills .gmb-skills-caption, .gmb-skills-form-modal .gmb-skills-form-eyebrow, .gmb-contact .gmb-contact-direct-label, .gmb-contact .gmb-contact-map-caption, .gmb-contact .gmb-contact-note { font-size: var(--gmb-typo-mono-s) !important; } /* mono body: punkty kontaktu, podpisy hero */ .gmb-contact .gmb-contact-point, .gmb-hero .gmb-project-desc, .gmb-contact .gmb-contact-status, .gmb-skills-form-modal .gmb-skills-form-status { font-size: var(--gmb-typo-mono) !important; } /* lead / wprowadzenie */ .gmb-contact .gmb-contact-lead { font-size: var(--gmb-typo-lead) !important; } /* opis w modalu zniżki – treść główna, nie lead */ .gmb-skills-form-modal .gmb-skills-form-lead { font-size: var(--gmb-typo-body) !important; } /* tytuły podsekcji */ .gmb-clients .gmb-clients-preview-title, .gmb-skills-form-modal .gmb-skills-form-title { font-size: var(--gmb-typo-title) !important; } /* treść główna */ .gmb-clients .gmb-clients-item-name, .gmb-clients .gmb-clients-preview-desc { font-size: var(--gmb-typo-body) !important; } /* linki bezpośrednie */ .gmb-contact .gmb-contact-direct-link { font-size: var(--gmb-typo-link) !important; } /* duże liczby / wynik w grze */ .gmb-skills .gmb-skills-hud-val { font-size: var(--gmb-typo-score) !important; } /* statystyki w team */ .gmb-team .gmb-team-stat-num { font-size: var(--gmb-typo-display) !important; } /* tytuł overlay gry – jak lead */ .gmb-skills .gmb-skills-overlay-title { font-size: var(--gmb-typo-lead) !important; } .gmb-skills .gmb-skills-overlay-sub, .gmb-skills .gmb-skills-overlay-prize { font-size: var(--gmb-typo-mono-s) !important; } /* imię w team */ .gmb-team .gmb-team-name { font-size: var(--gmb-typo-name) !important; } /* podpisy / komentarze / tagline / bio */ .gmb-about .gmb-about-comment, .gmb-team .gmb-team-tagline, .gmb-team .gmb-team-bio { font-size: var(--gmb-typo-caption) !important; } .gmb-team .gmb-team-role, .gmb-team .gmb-team-stat-lab { font-size: var(--gmb-typo-mono-s) !important; } /* kod about */ .gmb-about .gmb-about-code-open, .gmb-about .gmb-about-code-close { font-size: var(--gmb-typo-code-bracket) !important; } .gmb-about .gmb-about-var { font-size: var(--gmb-typo-code) !important; } .gmb-about .gmb-about-comment { font-size: var(--gmb-typo-caption) !important; } /* chipy kontakt */ .gmb-contact .gmb-contact-chip span { font-size: var(--gmb-typo-chip) !important; } /* hero mobile slider */ .gmb-hero .gmb-hero-slider-label { font-size: var(--gmb-typo-lead) !important; } .gmb-hero .gmb-hero-slider-counter { font-size: var(--gmb-typo-mono) !important; } /* gałęzie w grze */ .gmb-skills .gmb-skills-branch { font-size: var(--gmb-typo-body) !important; } /* ============================================================================ gmb-header.css ============================================================================ */ /* ============================================================ GMB Header – stały pasek nawigacji (Elementor-safe) ============================================================ WAŻNE #1 (Elementor): ▸ JS przenosi #gmb-header i #gmb-header-menu prosto do i zwija pusty kontener po sobie (styl inline w JS = działa zawsze) WAŻNE #2 (dlaczego header był MAŁY tylko na stronie głównej): ▸ gmb-hero.css (jest TYLKO na home) ustawia html{font-size:10px} ▸ stąd 1rem=10px na home, a 1rem=16px na pozostałych stronach ▸ header oparty na rem renderował się 1,6× mniejszy na home ▸ FIX: wymiary headera w PX (niezależne od bazy rem strony) → ten sam rozmiar wszędzie. NIE używać tu rem/em ani globalnych tokenów typo. CSS → Wygląd → Dostosuj → Dodatkowy CSS HTML → gmb-header.html na samej górze strony JS → gmb-header-functions.php na końcu functions.php ============================================================ */ /* zmienne na OBU elementach – menu po przeniesieniu do nie jest już dzieckiem .gmb-header, więc musi mieć własną kopię tokenów (inaczej var() jest puste → padding/kolory się sypią) */ .gmb-header, .gmb-header-menu { --gmb-header-heading-font: var(--gmb-font-heading, "Monument Grotesk", "Helvetica Neue", Arial, sans-serif); --gmb-header-code-font: var(--gmb-font-mono, "SF Mono", "Cascadia Code", "Consolas", "Liberation Mono", monospace); --gmb-accent-pink: #ff0084; --gmb-accent-green: #56876d; --gmb-accent-blue: #0000fe; /* PX, nie rem – żeby było identyczne na home i podstronach */ --gmb-header-h: 88px; --gmb-header-pad: clamp(20px, 4vw, 50px); } /* wysokość headera dostępna globalnie – używa jej hero do odsunięcia treści */ :root { --gmb-header-h: 88px; --webri-pink: #ff0084; --webri-pink-hover-bg: #000000; --webri-pink-hover-border: #000000; --webri-pink-hover-text: #ffffff; } /* Różowe CTA / submit — ten sam hover wszędzie: róż → czarny */ .gmb-btn-pink:hover, .gmb-btn-pink:focus-visible, .gmb-header-cta:hover, .gmb-header-cta:focus-visible, .gmb-clients-preview-case--prominent:hover, .gmb-clients-preview-case--prominent:focus-visible, .webri-case-more-btn:hover, .webri-case-more-btn:focus-visible, .gmb-contact .gmb-contact-submit:hover, .gmb-contact .gmb-contact-submit:focus-visible, .gmb-contact-widget .gmb-contact-submit--widget:hover, .gmb-contact-widget .gmb-contact-submit--widget:focus-visible, .gmb-contact-submit--sales:hover, .gmb-contact-submit--sales:focus-visible, .gmb-skills-form-modal .gmb-skills-form-submit:hover, .gmb-skills-form-modal .gmb-skills-form-submit:focus-visible, .gmb-skills .gmb-skills-overlay-btn--claim:hover, .gmb-skills .gmb-skills-overlay-btn--claim:focus-visible { background: var(--webri-pink-hover-bg) !important; border-color: var(--webri-pink-hover-border) !important; color: var(--webri-pink-hover-text) !important; } .gmb-contact-widget .gmb-contact-submit--widget:hover .gmb-contact-submit-text, .gmb-contact-widget .gmb-contact-submit--widget:hover .gmb-contact-submit-arrow, .gmb-contact-widget .gmb-contact-submit--widget:focus-visible .gmb-contact-submit-text, .gmb-contact-widget .gmb-contact-submit--widget:focus-visible .gmb-contact-submit-arrow { color: var(--webri-pink-hover-text) !important; } .gmb-header { position: fixed; top: 0; left: 0; right: 0; z-index: 99999; width: 100%; height: var(--gmb-header-h); margin: 0 !important; padding: 0 !important; background: rgba(255, 255, 255, 0); color: #000000; font-family: var(--gmb-header-heading-font); transition: background 0.3s ease, box-shadow 0.3s ease; } .gmb-header, .gmb-header *, .gmb-header *::before, .gmb-header *::after { box-sizing: border-box; } /* anty-przesunięcia motywu / Elementora (bez nadpisywania tła/paddingu!) */ .gmb-header a:hover, .gmb-header a:focus, .gmb-header button:hover, .gmb-header button:focus { transform: none !important; top: auto !important; box-shadow: none !important; } .gmb-header.is-scrolled { background: rgba(255, 255, 255, 0.96); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); box-shadow: 0 1px 0 #000000; } .gmb-header.is-menu-open { -webkit-backdrop-filter: none; backdrop-filter: none; background: #ffffff; box-shadow: 0 1px 0 #000000; } html { scroll-padding-top: calc(var(--gmb-header-h, 80px) + 10px); } /* ------ progress bar ------ */ .gmb-header-progress { position: absolute; bottom: -1px; left: 0; width: 100%; height: 2px; background: var(--gmb-accent-pink); transform: scaleX(0); transform-origin: left center; pointer-events: none; } /* ------ układ ------ */ .gmb-header-inner { display: flex; align-items: center; justify-content: space-between; gap: clamp(20px, 3vw, 40px); width: 100%; height: 100%; /* stała szerokość treści 1600px (zgodna z resztą strony), bez rem */ max-width: calc(1600px + 2 * var(--gmb-header-pad)); margin: 0 auto; padding: 0 var(--gmb-header-pad); } /* ------ logo ------ */ .gmb-header-logo { display: inline-flex; align-items: center; gap: 12px; /* logo zakotwiczone przy górze paska i większe niż pasek — „znak rozpoznawczy" celowo wystaje pod dolną krawędź headera. Offset robimy marginesem (nie transformem), bo reguła anty-przesunięć zeruje transform na hover linków w headerze. */ align-self: flex-start; margin-top: clamp(8px, 1.2vw, 16px); position: relative; z-index: 3; text-decoration: none !important; color: #000000 !important; flex-shrink: 0; } .gmb-header-logo-img { display: block; width: auto; height: 100px; max-width: none; transition: transform 0.5s ease-in-out; transform-origin: center center; } .gmb-header-logo:hover .gmb-header-logo-img { transform: rotate(180deg); } .gmb-header-logo-word { font-size: 32px; font-weight: 500; letter-spacing: -0.03em; text-transform: lowercase; line-height: 1; } .gmb-header-logo-word sup { font-family: var(--gmb-header-code-font); font-size: 0.55em; font-weight: 400; margin-left: 0.15em; } /* ------ nav desktop ------ */ .gmb-header-nav { display: flex; align-items: center; gap: clamp(22px, 2.6vw, 40px); } .gmb-header-nav-link { position: relative; display: inline-flex; align-items: baseline; gap: 5px; font-family: var(--gmb-header-heading-font); font-size: 22px; font-weight: 500; letter-spacing: -0.02em; text-transform: lowercase; text-decoration: none !important; color: #000000 !important; line-height: 1; padding: 6px 0; } .gmb-header-nav-link sup { font-family: var(--gmb-header-code-font); font-size: 0.68em; font-weight: 400; color: rgba(0, 0, 0, 0.45); transition: color 0.2s ease; } .gmb-header-nav-link::after { content: ""; position: absolute; left: 0; bottom: 0; width: 100%; height: 1px; background: #000000; transform: scaleX(0); transform-origin: left center; transition: transform 0.3s cubic-bezier(0.22, 1, 0.36, 1); } .gmb-header-nav-link:hover::after, .gmb-header-nav-link:focus-visible::after { transform: scaleX(1); } .gmb-header-nav-link.is-active sup { color: var(--gmb-accent-blue); } .gmb-header-nav-link.is-active::after { transform: scaleX(1); background: var(--gmb-accent-blue); } /* ------ prawa strona ------ */ .gmb-header-right { display: flex; align-items: center; gap: clamp(18px, 2.4vw, 30px); flex-shrink: 0; } /* ------ przełącznik języka pl / en ------ */ .gmb-header-lang { display: inline-flex; align-items: baseline; gap: 6px; font-family: var(--gmb-header-code-font); font-size: 16px; font-weight: 400; letter-spacing: -0.01em; text-transform: lowercase; } .gmb-header-lang-link { text-decoration: none !important; color: rgba(0, 0, 254, 0.45) !important; transition: color 0.2s ease; } .gmb-header-lang-link:hover, .gmb-header-lang-link:focus-visible, .gmb-header-lang-link.is-active { color: var(--gmb-accent-blue) !important; } .gmb-header-lang-sep { color: var(--gmb-accent-blue); } /* zakładka „materiały" przed pl/en */ .gmb-header-materials { display: inline-flex; align-items: center; gap: 8px; padding: 9px 16px; background: var(--gmb-accent-green); border: 1px solid var(--gmb-accent-green); border-radius: 100px; font-family: var(--gmb-header-heading-font); font-size: 15px; font-weight: 500; letter-spacing: -0.02em; text-transform: lowercase; text-decoration: none !important; color: #ffffff !important; line-height: 1; flex-shrink: 0; transition: background-color 0.2s ease, border-color 0.2s ease, color 0.2s ease; } .gmb-header-materials:hover, .gmb-header-materials:focus-visible { background: #000000 !important; border-color: #000000 !important; color: #ffffff !important; } .gmb-header-materials-icon { flex-shrink: 0; } /* ikony szybkich akcji (materiały / telefon) przed burgerem — tablet + mobile */ .gmb-header-quick { display: none; align-items: center; gap: 8px; flex-shrink: 0; } .gmb-header-icon-btn { display: inline-flex; align-items: center; justify-content: center; width: 40px; height: 40px; padding: 0; border: 1px solid #000000; border-radius: 999px; background: transparent; color: #000000; text-decoration: none !important; line-height: 0; flex-shrink: 0; transition: background-color 0.2s ease, border-color 0.2s ease, color 0.2s ease; } .gmb-header-icon-btn:hover, .gmb-header-icon-btn:focus-visible { background: #000000; border-color: #000000; color: #ffffff; } .gmb-header-icon-btn--materials { background: var(--gmb-accent-green); border-color: var(--gmb-accent-green); color: #ffffff; } .gmb-header-icon-btn--materials:hover, .gmb-header-icon-btn--materials:focus-visible { background: #000000; border-color: #000000; color: #ffffff; } .gmb-header-icon-btn--phone { background: var(--gmb-accent-pink); border-color: var(--gmb-accent-pink); color: #ffffff; } .gmb-header-icon-btn--phone:hover, .gmb-header-icon-btn--phone:focus-visible { background: #000000; border-color: #000000; color: #ffffff; } .gmb-header-icon-btn svg { display: block; } /* materiały w menu mobilnym — jak reszta linków, tylko zielony + ikona */ .gmb-header-menu-link--materials { justify-content: space-between; color: var(--gmb-accent-green) !important; } .gmb-header-menu-link--materials:hover, .gmb-header-menu-link--materials:focus-visible { color: var(--gmb-accent-blue) !important; } .gmb-header-menu-materials-icon { flex-shrink: 0; align-self: center; width: clamp(26px, 6vw, 36px); height: clamp(26px, 6vw, 36px); opacity: 0.9; } .gmb-header-lang--menu { margin-top: 8px; gap: 10px; font-size: 22px; } .gmb-header-cta { display: inline-flex; align-items: center; gap: 8px; padding: 13px 28px; background: var(--gmb-accent-pink); color: #ffffff !important; font-family: var(--gmb-header-heading-font); font-size: 20px; font-weight: 500; letter-spacing: -0.02em; text-transform: lowercase; text-decoration: none !important; line-height: 1; border-radius: 999px; transition: background 0.25s ease; } .gmb-header-cta:hover, .gmb-header-cta:focus-visible { transform: none; } .gmb-header-cta-arrow { display: inline-block; transition: transform 0.25s cubic-bezier(0.22, 1, 0.36, 1); } .gmb-header-cta:hover .gmb-header-cta-arrow { transform: translateX(4px); } /* ------ burger ------ */ .gmb-header-burger { display: none; position: relative; width: 44px; height: 44px; padding: 0; margin: 0; background: transparent !important; border: 0 !important; border-radius: 0 !important; box-shadow: none !important; cursor: pointer; -webkit-tap-highlight-color: transparent; } /* motyw/Elementor dorzuca różowe tło na hover/focus przyciskom – kasujemy */ .gmb-header-burger:hover, .gmb-header-burger:focus, .gmb-header-burger:focus-visible, .gmb-header-burger:active { background: transparent !important; background-color: transparent !important; box-shadow: none !important; outline: none !important; } .gmb-header-burger-line { position: absolute; left: 50%; top: 50%; width: 26px; height: 2px; background: #000000; transition: transform 0.35s cubic-bezier(0.22, 1, 0.36, 1); } .gmb-header-burger-line:nth-child(1) { transform: translate(-50%, calc(-50% - 4px)); } .gmb-header-burger-line:nth-child(2) { transform: translate(-50%, calc(-50% + 4px)); } .gmb-header.is-menu-open .gmb-header-burger-line:nth-child(1) { transform: translate(-50%, -50%) rotate(45deg); } .gmb-header.is-menu-open .gmb-header-burger-line:nth-child(2) { transform: translate(-50%, -50%) rotate(-45deg); } /* ==================================================== MENU MOBILNE – osobny element w (portal JS) ==================================================== */ .gmb-header-menu { position: fixed; inset: 0; z-index: 99998; display: flex; flex-direction: column; justify-content: flex-start; gap: 30px; /* dół: większy zapas, żeby stopka menu (mail/telefon/język) była WYŻEJ niż pływająca ikonka cookies przy dolnej krawędzi ekranu */ padding: calc(var(--gmb-header-h) + 30px) var(--gmb-header-pad) calc(96px + env(safe-area-inset-bottom, 0px)); background: #ffffff; overflow-y: auto; -webkit-overflow-scrolling: touch; overscroll-behavior: contain; opacity: 0; visibility: hidden; pointer-events: none; transition: opacity 0.3s ease, visibility 0s linear 0.3s; } .gmb-header-menu.is-open { opacity: 1; visibility: visible; pointer-events: auto; transition: opacity 0.3s ease; } .gmb-header-menu-nav { display: flex; flex-direction: column; flex-shrink: 0; } .gmb-header-menu-link { display: flex; align-items: baseline; gap: 14px; padding: 12px 0; border-bottom: 1px solid rgba(0, 0, 0, 0.18); font-family: var(--gmb-header-heading-font); font-size: clamp(40px, 10vw, 64px); font-weight: 500; line-height: 1.05; letter-spacing: -0.03em; text-transform: lowercase; text-decoration: none !important; color: #000000 !important; } .gmb-header-menu-link:hover, .gmb-header-menu-link:focus-visible { color: var(--gmb-accent-blue) !important; } .gmb-header-menu-idx { font-family: var(--gmb-header-code-font); font-size: clamp(14px, 3vw, 17px); font-weight: 400; color: rgba(0, 0, 0, 0.45); } .gmb-header-menu-foot { display: flex; flex-direction: column; gap: 16px; /* dosuwa stopkę do dołu, gdy jest miejsce; przy ciasnym ekranie zachowuje odstęp od nawigacji i całość się przewija (kontakt/telefon nie najeżdżają) */ margin-top: auto; padding-top: clamp(28px, 7vw, 48px); flex-shrink: 0; } .gmb-header-menu-direct { display: block; font-family: var(--gmb-header-heading-font); font-size: clamp(22px, 5vw, 28px); font-weight: 500; line-height: 1.15; letter-spacing: -0.02em; text-decoration: underline !important; text-underline-offset: 0.3em; color: #000000 !important; } /* blokada scrolla przy otwartym menu */ html.gmb-header-locked, html.gmb-header-locked body { overflow: hidden !important; } /* ==================================================== ODSTĘP POD STAŁYM HEADEREM ---------------------------------------------------- Header jest position:fixed, więc nie zajmuje miejsca w układzie. Na stronie głównej hero startuje od samej góry i jego górna część chowała się pod paskiem ("ucięte przez hero"). Dajemy hero górny padding = wysokość headera + jego naturalny padding. (Podstrony mają własne paddingi w sekcjach, więc ich nie ruszamy.) ==================================================== */ .gmb-hero { padding-top: calc(var(--gmb-header-h, 88px) + clamp(20px, 4vw, 50px)) !important; } @media (max-width: 767px) { .gmb-hero { padding-top: calc(var(--gmb-header-h, 88px) + clamp(6px, 1.5vw, 12px)) !important; } } /* ==================================================== ELEMENTOR – pełna szerokość, overflow widoczny ==================================================== */ .e-con:has(.gmb-header), .e-con-inner:has(.gmb-header), .elementor-section:has(.gmb-header), .elementor-column:has(.gmb-header), .elementor-widget-wrap:has(.gmb-header), .elementor-widget-html:has(.gmb-header), .elementor-widget-html:has(.gmb-header) .elementor-widget-container { width: 100% !important; max-width: 100% !important; padding-left: 0 !important; padding-right: 0 !important; margin-left: 0 !important; margin-right: 0 !important; overflow: visible !important; } /* ==================================================== RESPONSIVE ==================================================== */ @media (max-width: 1023px) { .gmb-header-nav, .gmb-header-right .gmb-header-lang, .gmb-header-cta { display: none; } .gmb-header-burger { display: block; } .gmb-header-quick { display: flex; } /* tablet: materiały jako pigułka — ikona pobierania schowana */ .gmb-header-icon-btn--materials { display: none; } } /* telefon: logo po lewej, mieści się w pasku */ @media (max-width: 767px) { .gmb-header-inner { align-items: center; justify-content: space-between; } .gmb-header-logo { position: static; align-self: center; margin: 0; transform: none; } .gmb-header-logo-img { height: clamp(40px, 11vw, 52px); } .gmb-header-right { gap: 10px; align-items: center; flex-shrink: 0; } /* telefon: pigułka materiały → ikona; telefon zawsze jako ikona */ .gmb-header-right .gmb-header-materials { display: none; } .gmb-header-icon-btn--materials { display: inline-flex; } .gmb-header-icon-btn { width: 38px; height: 38px; } .gmb-header-icon-btn svg { width: 18px; height: 18px; } } /* tablet: logo ~10% mniejsze niż na desktopie */ @media (min-width: 768px) and (max-width: 1023px) { .gmb-header-logo { align-self: flex-end; margin-top: 0; margin-bottom: clamp(-14px, -2.2vw, -8px); } .gmb-header-logo-img { height: 90px; } } @media (min-width: 1024px) { .gmb-header-logo { align-self: flex-start; margin-top: clamp(8px, 1.2vw, 16px); margin-bottom: 0; } .gmb-header-logo-img { height: 100px; } .gmb-header-menu { display: none; } } @media (prefers-reduced-motion: reduce) { .gmb-header, .gmb-header-logo-img, .gmb-header-menu, .gmb-header-menu-link { transition: none !important; } } /* ============================================================================ gmb-footer.css ============================================================================ */ /* ============================================================ GMB Footer – prosta biała stopka ============================================================ POMYSŁ: ▸ cała strona jest biała → stopka odwraca kolory na czerń ▸ górny pas: ostatnie CTA "porozmawiajmy →" (wzorzec submitów) ▸ środek: 4 kolumny mono-etykiet (menu / kontakt / social / baza) ze znacznikami // i indeksami (01) jak w sekcjach ▸ "baza": augustów + zegar + zielona kropka statusu ▸ dolny pas: © rok (auto z JS) + prawne + "do góry ↑" ▸ finał: gigantyczny wordmark "webree" w outline, przycięty dolną krawędzią; litery wypełniają się różem na hover, obok odwrócone logo, które kręci się na hover (jak logo-spin) CSS → Wygląd → Dostosuj → Dodatkowy CSS HTML → gmb-footer.html na samym dole strony JS → gmb-footer-functions.php na końcu functions.php ============================================================ */ .gmb-footer { --gmb-footer-heading-font: var(--gmb-font-heading, "Monument Grotesk", "Helvetica Neue", Arial, sans-serif); --gmb-footer-code-font: var(--gmb-font-mono, "SF Mono", "Cascadia Code", "Consolas", "Liberation Mono", monospace); --gmb-footer-muted: rgba(0, 0, 0, 0.45); /* PX (jak header) – żeby nie skakało na stronie głównej (html font-size:10px) */ --gmb-footer-pad: clamp(20px, 4vw, 50px); --gmb-accent-pink: #ff0084; position: relative; width: 100%; background: #ffffff; color: #000000; font-family: var(--gmb-footer-heading-font); } .gmb-footer, .gmb-footer *, .gmb-footer *::before, .gmb-footer *::after { box-sizing: border-box; } /* anty-przesunięcia motywu / Elementora */ .gmb-footer a:hover, .gmb-footer a:focus, .gmb-footer button:hover, .gmb-footer button:focus { transform: none !important; top: auto !important; box-shadow: none !important; } .gmb-footer-container { width: 100%; max-width: calc(1600px + 2 * var(--gmb-footer-pad)); margin: 0 auto; padding: clamp(30px, 5vw, 45px) var(--gmb-footer-pad) clamp(25px, 4vw, 35px); } /* ------ wiersz główny: logo | kontakt ------ */ .gmb-footer-row { display: flex; align-items: center; justify-content: space-between; gap: 20px; padding-bottom: clamp(20px, 3vw, 28px); border-bottom: 1px solid #000000; } .gmb-footer-logo { display: inline-flex; align-items: center; gap: 12px; text-decoration: none !important; color: #000000 !important; flex-shrink: 0; } /* logo identyczne jak w headerze */ .gmb-footer-logo-img { display: block; width: auto; height: clamp(48px, 5vw, 64px); max-width: none; } .gmb-footer-logo-word { font-size: 32px; font-weight: 500; letter-spacing: -0.03em; text-transform: lowercase; line-height: 1; } .gmb-footer-contact { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: flex-end; gap: clamp(14px, 2.5vw, 28px); } /* mail/tel = wielkość linków nawigacji w headerze */ .gmb-footer-mail, .gmb-footer-tel { font-family: var(--gmb-footer-heading-font); font-size: 22px; font-weight: 500; letter-spacing: -0.02em; text-transform: lowercase; text-decoration: underline !important; text-underline-offset: 0.3em; color: #000000 !important; line-height: 1.2; transition: color 0.2s ease; } .gmb-footer-mail:hover, .gmb-footer-mail:focus-visible, .gmb-footer-tel:hover, .gmb-footer-tel:focus-visible { color: var(--gmb-accent-pink) !important; } /* ------ dolny pasek ------ */ .gmb-footer-bar { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px 24px; padding-top: clamp(16px, 2.5vw, 22px); } /* drobny mono – jak przełącznik pl/en w headerze, lekko mniejszy (fine print) */ .gmb-footer-copy { font-family: var(--gmb-footer-code-font); font-size: 14px; font-weight: 400; letter-spacing: -0.01em; color: var(--gmb-footer-muted); } .gmb-footer-legal { display: inline-flex; flex-wrap: wrap; gap: 20px; } .gmb-footer-legal a { font-family: var(--gmb-footer-code-font); font-size: 14px; font-weight: 400; text-transform: lowercase; text-decoration: underline !important; text-underline-offset: 0.25em; color: var(--gmb-footer-muted) !important; transition: color 0.2s ease; } .gmb-footer-legal a:hover, .gmb-footer-legal a:focus-visible { color: #000000 !important; } .gmb-footer-top { display: inline-flex; align-items: center; gap: 6px; padding: 0; background: transparent !important; border: 0 !important; border-radius: 0 !important; box-shadow: none !important; cursor: pointer; font-family: var(--gmb-footer-heading-font); font-size: 16px; font-weight: 500; letter-spacing: -0.02em; text-transform: lowercase; color: #000000; transition: color 0.2s ease; } /* motyw/Elementor dorzuca różowe tło na hover/focus – kasujemy, zostaje sam kolor tekstu */ .gmb-footer-top:hover, .gmb-footer-top:focus, .gmb-footer-top:focus-visible, .gmb-footer-top:active { background: transparent !important; background-color: transparent !important; box-shadow: none !important; outline: none !important; color: var(--gmb-accent-pink); } /* ==================================================== ELEMENTOR – pełna szerokość, zero paddingu rodzica ==================================================== */ .elementor-element.gmb-footer-section, .elementor-element.gmb-footer-section > .e-con, .elementor-element.gmb-footer-section > .e-con > .e-con-inner, .elementor-element.gmb-footer-section .elementor-widget-html, .elementor-element.gmb-footer-section .elementor-widget-container, .e-con:has(.gmb-footer), .e-con-inner:has(.gmb-footer), .elementor-section:has(.gmb-footer), .elementor-column:has(.gmb-footer), .elementor-widget-wrap:has(.gmb-footer), .elementor-widget-html:has(.gmb-footer), .elementor-widget-html:has(.gmb-footer) .elementor-widget-container { width: 100% !important; max-width: 100% !important; padding-left: 0 !important; padding-right: 0 !important; margin-left: 0 !important; margin-right: 0 !important; } /* ==================================================== RESPONSIVE ==================================================== */ @media (max-width: 767px) { .gmb-footer-row { flex-direction: column; align-items: flex-start; } .gmb-footer-contact { justify-content: flex-start; flex-direction: column; gap: 8px; } .gmb-footer-bar { flex-direction: column; align-items: flex-start; } .gmb-footer-top { align-self: flex-end; margin-left: auto; } } @media (prefers-reduced-motion: reduce) { .gmb-footer * { transition: none !important; } } /* ============================================================================ gmb-hero.css ============================================================================ */ :root { --pit-font: var(--gmb-font-heading, 'Monument Grotesk', 'Helvetica Neue', sans-serif); --pit-tracking-tight: -0.04em; --pit-tracking-tighter: -0.05em; } /* baza: 1rem = 10px (jak na pitperform) – TYLKO na stronach z sekcjami treści gmb-*, żeby plik można było wkleić globalnie bez psucia skali podstron. Dwa sposoby dla maksymalnej zgodności: 1) html.gmb-base – klasę dodaje snippet PHP na stronie głównej. Działa WSZĘDZIE, też na starszym Safari (macOS). To kluczowe, bo :has() nie działa w Safari < 15.4 – wtedy strona ładuje się w skali 16px (wszystko „rozjechane", tekst w przyciskach na dole). 2) html:has(...) – nowoczesne przeglądarki; łapie też sekcje gmb-* dodane na innych podstronach bez ruszania PHP. (Reguły są ROZDZIELONE celowo – stare Safari odrzuca całą listę selektorów, jeśli choć jeden zawiera nieobsługiwane :has().) */ html.gmb-base { font-size: 10px; } html:has(.gmb-hero), html:has(.gmb-clients), html:has(.gmb-skills), html:has(.gmb-about), html:has(.gmb-team), html:has(.gmb-contact), html:has(.gmb-materials-home), html:has(.webri-materials), html:has(.webri-works), html:has(.webri-case), html:has(.webri-single) { font-size: 10px; } html { -moz-osx-font-smoothing: grayscale; text-rendering: optimizeLegibility; } body, .site, #page { font-family: var(--pit-font) !important; font-weight: 500; font-size: 1.6rem; /* mobile: typo-base */ line-height: 1.65rem; letter-spacing: var(--pit-tracking-tight); } @media (min-width: 1024px) { body, .site, #page { font-size: 1.8rem; /* desktop: typo-base */ line-height: 2.2rem; } } /* --- Nagłówki WordPress --- */ h1, .h1, .entry-content h1, .wp-block-heading h1 { font-family: var(--pit-font) !important; font-weight: 500 !important; font-size: 4rem; /* mobile: typo-2xl */ line-height: 3.5rem; letter-spacing: var(--pit-tracking-tighter); } h2, .h2, .entry-content h2, .wp-block-heading h2 { font-family: var(--pit-font) !important; font-weight: 500 !important; font-size: 2.8rem; /* mobile: typo-xl */ line-height: 2.6rem; letter-spacing: var(--pit-tracking-tighter); } h3, .h3, .entry-content h3, .wp-block-heading h3 { font-family: var(--pit-font) !important; font-weight: 500 !important; font-size: 2.2rem; /* mobile: typo-lg */ line-height: 2rem; letter-spacing: var(--pit-tracking-tighter); } h4, .h4, .entry-content h4, .wp-block-heading h4 { font-family: var(--pit-font) !important; font-weight: 500 !important; font-size: 1.6rem; /* mobile: typo-base */ line-height: 1.65rem; letter-spacing: var(--pit-tracking-tight); } h5, .h5, h6, .h6, .entry-content h5, .entry-content h6, .wp-block-heading h5, .wp-block-heading h6 { font-family: var(--pit-font) !important; font-weight: 500 !important; font-size: 1.4rem; /* mobile: typo-s */ line-height: 1.4rem; letter-spacing: var(--pit-tracking-tight); } @media (min-width: 1024px) { h1, .h1, .entry-content h1, .wp-block-heading h1 { font-size: 7.2rem; /* desktop: typo-2xl */ line-height: 5.8rem; } h2, .h2, .entry-content h2, .wp-block-heading h2 { font-size: 4.2rem; /* desktop: typo-xl */ line-height: 3.6rem; } h3, .h3, .entry-content h3, .wp-block-heading h3 { font-size: 3rem; /* desktop: typo-lg (= 30px) */ line-height: 3rem; } h4, .h4, .entry-content h4, .wp-block-heading h4 { font-size: 1.8rem; line-height: 2.2rem; } h5, .h5, h6, .h6, .entry-content h5, .entry-content h6, .wp-block-heading h5, .wp-block-heading h6 { font-size: 1.2rem; line-height: 1.3rem; } } /* --- Tekst, listy, przyciski --- */ p, li, dd, dt, label, input, textarea, select, button, .wp-block-paragraph, .entry-content, .site-description { font-family: var(--pit-font) !important; font-weight: 500; letter-spacing: var(--pit-tracking-tight); } a { font-family: inherit; font-weight: inherit; } small, .wp-caption-text, figcaption, .meta, .comment-meta { font-family: var(--pit-font) !important; font-weight: 500; font-size: 1.2rem; line-height: 1.2rem; letter-spacing: var(--pit-tracking-tight); } /* --- Elementor --- */ .elementor-widget-heading .elementor-heading-title, .elementor-widget-text-editor, .elementor-widget-text-editor p, .elementor-button, .elementor-nav-menu a, .elementor-tab-title, .elementor-accordion-title { font-family: var(--pit-font) !important; font-weight: 500 !important; letter-spacing: var(--pit-tracking-tight); } /* Elementor H1–H6 (gdy ustawione w widżecie) */ .elementor-widget-heading h1.elementor-heading-title { font-size: 4rem !important; line-height: 3.5rem !important; letter-spacing: var(--pit-tracking-tighter) !important; } .elementor-widget-heading h2.elementor-heading-title { font-size: 2.8rem !important; line-height: 2.6rem !important; letter-spacing: var(--pit-tracking-tighter) !important; } .elementor-widget-heading h3.elementor-heading-title { font-size: 2.2rem !important; line-height: 2rem !important; letter-spacing: var(--pit-tracking-tighter) !important; } .elementor-widget-heading h4.elementor-heading-title { font-size: 1.6rem !important; line-height: 1.65rem !important; } .elementor-widget-heading h5.elementor-heading-title, .elementor-widget-heading h6.elementor-heading-title { font-size: 1.4rem !important; line-height: 1.4rem !important; } @media (min-width: 1024px) { .elementor-widget-heading h1.elementor-heading-title { font-size: 7.2rem !important; line-height: 5.8rem !important; } .elementor-widget-heading h2.elementor-heading-title { font-size: 4.2rem !important; line-height: 3.6rem !important; } .elementor-widget-heading h3.elementor-heading-title { font-size: 3rem !important; line-height: 3rem !important; } .elementor-widget-heading h4.elementor-heading-title { font-size: 1.8rem !important; line-height: 2.2rem !important; } .elementor-widget-heading h5.elementor-heading-title, .elementor-widget-heading h6.elementor-heading-title { font-size: 1.2rem !important; line-height: 1.3rem !important; } } .logo img { width: 130px !important; height: auto !important; max-width: 130px !important; min-width: 130px !important; } img.wp-image-417 { transition: transform 0.5s ease-in-out; transform-origin: center center; will-change: transform; backface-visibility: hidden; } img.wp-image-417:hover { transform: rotate(360deg); } /* ============================================================ GMB Hero Portfolio – CSS ============================================================ */ html, body { overflow-x: hidden; max-width: 100%; } .gmb-hero { --gmb-hero-pad: clamp(2rem, 4vw, 5rem); position: relative; width: 100%; max-width: 100%; background: #ffffff; color: #000000; overflow: hidden; padding: var(--gmb-hero-pad) 0; margin-top: 0; font-family: "Monument Grotesk", "Helvetica Neue", Arial, sans-serif; font-weight: 500; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } /* Siatka: KWADRATOWE komórki (aspect-ratio = kolumny/wiersze). Dzięki temu rozpiętość kafelka = jego proporcje, więc cover nie przycina. */ .gmb-hero-grid { display: grid; grid-template-columns: repeat(32, 1fr); grid-template-rows: repeat(17, 1fr); aspect-ratio: 32 / 17; gap: 1.3rem; /* WZORZEC szerokości całej strony: treść = 1600px, wycentrowana. Na dużych ekranach (>= ~1700px) wygląda identycznie jak width:min(100%,1600px). Na węższych oknach dochodzi boczny padding – kafelki nie są ucinane na prawej krawędzi i hero ma te same marginesy co pozostałe sekcje. */ width: 100%; max-width: calc(160rem + 2 * var(--gmb-hero-pad)); margin: 0 auto; padding-left: var(--gmb-hero-pad); padding-right: var(--gmb-hero-pad); box-sizing: border-box; position: relative; z-index: 1; } .gmb-grid-item { position: relative; display: flex; flex-direction: column; text-decoration: none; color: #000000; opacity: 1; transition: opacity 0.35s ease; min-height: 0; } .gmb-hero-grid:has(.gmb-grid-item:hover) .gmb-grid-item:not(:hover) { opacity: 0.52; } .gmb-grid-item.is-hidden { opacity: 0 !important; pointer-events: none; } .gmb-img-item { flex: 1 1 auto; width: 100%; min-height: 0; position: relative; overflow: hidden; } .gmb-img-item img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform 0.6s cubic-bezier(0.25, 0.46, 0.45, 0.94); } .gmb-grid-item:hover .gmb-img-item img { transform: scale(1.03); } .gmb-project-desc { flex: 0 0 auto; display: flex; justify-content: space-between; gap: 0.8rem; margin-top: 0.6rem; font-size: var(--gmb-typo-mono, clamp(1.25rem, 1.4vw, 1.5rem)); text-transform: uppercase; letter-spacing: 0.01em; font-weight: 600; line-height: 1.15; white-space: nowrap; opacity: 1; } .gmb-project-desc span { font-size: inherit; } .gmb-project-desc span:first-child { color: #56876d; } .gmb-project-desc span:last-child { color: #000000; } /* Pozycje kafelków – rozpiętość (kolumny x wiersze) dopasowana do proporcji zdjęcia. Tło kwadratowe, więc kafelek 6x8 = pion, 9x6 = poziom itd. */ .gmb-grid-item:nth-child(1) { grid-area: 5 / 12 / span 8 / span 6; } /* Sober Lover – pion */ .gmb-grid-item:nth-child(2) { grid-area: 2 / 18 / span 6 / span 9; } /* Augustow – poziom */ .gmb-grid-item:nth-child(3) { grid-area: 4 / 28 / span 4 / span 5; } /* PSD – 4:3 */ .gmb-grid-item:nth-child(4) { grid-area: 2 / 2 / span 7 / span 7; } /* MATISKATER */ .gmb-grid-item:nth-child(5) { grid-area: 11 / 5 / span 10 / span 6; } /* Nike – 16:9 */ .gmb-grid-item:nth-child(6) { grid-area: 11 / 20 / span 4 / span 7; } .gmb-grid-item:nth-child(7) { grid-area: 14 / 12 / span 4 / span 8; } /* Fit Forma - 369x191 (poziom) */ /* Number One – 16:9 */ /* duplikaty / nadmiarowe kafelki – ukryte (dodaj kolejne projekty, by je pokazać) */ .gmb-grid-item:nth-child(8) { grid-area: 9 / 28 / span 4 / span 4; } /* MKVID - kwadrat */ .gmb-grid-item:nth-child(n+9) { display: none; } .gmb-overlay-load { position: fixed; top: 0; left: 0; right: 0; height: 100vh; height: 100dvh; background: #000000; z-index: 99; pointer-events: none; transform-origin: bottom center; transform: scaleY(1); will-change: transform; } /* ====== HEADER przezroczysty ====== */ header#masthead, header#masthead .e-con, header#masthead .e-con-inner, header#masthead .elementor-element[data-element_type="container"] { background: transparent !important; background-color: transparent !important; background-image: none !important; } /* WAŻNE: header (EHF #masthead) MUSI być nad hero. Plugin EHF wymusza `.ehf-header #masthead { z-index: 99 }` z wyższą specyficznością niż samo `header#masthead`, a treść strony (hero) też dostaje z-index 99 i jest PÓŹNIEJ w DOM → maluje się na headerze. Dlatego dublujemy selektor EHF i dajemy !important z wysokim z-index. */ .ehf-header #masthead, header#masthead { position: relative !important; top: auto !important; z-index: 100000 !important; color: #000000; background: transparent !important; } header#masthead .e-con, header#masthead .e-con-inner, header#masthead .elementor-element[data-element_type="container"] { position: relative !important; top: auto !important; } .elementor-element.elementor-413 { margin-top: 0 !important; } /* Pełna szerokość – działa automatycznie (przez :has), bez dodawania klas w Elementorze. O szerokości decyduje wyłącznie .gmb-hero-grid (144rem). */ .elementor-element.gmb-hero-section, .elementor-element.gmb-hero-section > .e-con, .elementor-element.gmb-hero-section > .e-con > .e-con-inner, .elementor-element.gmb-hero-section .elementor-widget-html, .elementor-element.gmb-hero-section .elementor-widget-container, .e-con:has(.gmb-hero), .e-con-inner:has(.gmb-hero), .elementor-section:has(.gmb-hero), .elementor-container:has(.gmb-hero), .elementor-column:has(.gmb-hero), .elementor-widget-wrap:has(.gmb-hero), .elementor-widget-html:has(.gmb-hero), .elementor-widget-html:has(.gmb-hero) .elementor-widget-container { padding: 0 !important; margin: 0 !important; width: 100% !important; max-width: 100% !important; } .elementor-element.gmb-hero-section { overflow: visible !important; } /* ====== RESPONSYWNOSC: telefon/tablet = slider zamiast mozaiki ====== */ .gmb-hero-slider { display: none; } @media (max-width: 1199px) { .gmb-hero { padding: 0; } .gmb-hero-grid { display: none !important; } .gmb-hero-slider { display: block; position: relative; z-index: 2; width: 100%; max-width: calc(160rem + 2 * var(--gmb-hero-pad)); margin: 0 auto; padding: clamp(1.2rem, 3vw, 2.4rem) 0 clamp(2.4rem, 7vw, 5rem); box-sizing: border-box; touch-action: pan-y pinch-zoom; } /* nagłówek jak w sekcji realizacji: tytuł + licznik nad linią */ .gmb-hero-slider-head { display: flex; justify-content: space-between; align-items: baseline; margin: 0 var(--gmb-hero-pad) clamp(1.6rem, 4vw, 2.4rem); padding-bottom: 1.2rem; border-bottom: 1px solid #000000; } .gmb-hero-slider-label { font-size: var(--gmb-typo-lead); font-weight: 500; line-height: 1.1; letter-spacing: -0.03em; text-transform: lowercase; color: #000000; } .gmb-hero-slider-counter { display: inline-flex; align-items: baseline; gap: 0.5rem; font-size: var(--gmb-typo-mono); font-weight: 500; letter-spacing: 0.02em; white-space: nowrap; color: #000000; } .gmb-hero-slider-counter [data-gmb-slide-current] { color: var(--gmb-accent-blue); } .gmb-hero-slider-sep { color: rgba(0, 0, 0, 0.3); } /* strzałki nawigacji slidera (telefon + tablet) */ .gmb-hero .gmb-hero-slider-nav { display: inline-flex !important; align-items: center !important; gap: 14px !important; flex-shrink: 0 !important; } .gmb-hero .gmb-hero-slider-arrow, .gmb-hero .gmb-hero-slider-arrow:hover, .gmb-hero .gmb-hero-slider-arrow:focus, .gmb-hero .gmb-hero-slider-arrow:focus-visible, .gmb-hero .gmb-hero-slider-arrow:active { display: inline-flex !important; align-items: center !important; justify-content: center !important; flex: 0 0 auto !important; width: 44px !important; height: 44px !important; min-width: 44px !important; min-height: 44px !important; max-width: 44px !important; padding: 0 !important; margin: 0 !important; background: transparent !important; background-color: transparent !important; border: 1px solid #000000 !important; border-radius: 999px !important; box-shadow: none !important; outline: none !important; color: #000000 !important; font-family: inherit !important; font-size: 18px !important; line-height: 1 !important; text-align: center !important; cursor: pointer; -webkit-tap-highlight-color: transparent; transition: background-color 0.2s ease, color 0.2s ease !important; } .gmb-hero .gmb-hero-slider-arrow:hover, .gmb-hero .gmb-hero-slider-arrow:focus-visible, .gmb-hero .gmb-hero-slider-arrow:active { background: #000000 !important; background-color: #000000 !important; color: #ffffff !important; } /* tor slidera – natywny swipe ze scroll-snap, kolejny slajd wystaje z prawej */ .gmb-hero-slider-track { display: flex; gap: 1.2rem; overflow-x: auto; overflow-y: hidden; scroll-snap-type: x mandatory; -webkit-overflow-scrolling: touch; touch-action: pan-y pinch-zoom; overscroll-behavior-x: contain; overscroll-behavior-y: auto; scrollbar-width: none; padding: 0 var(--gmb-hero-pad); scroll-padding-left: var(--gmb-hero-pad); } .gmb-hero-slider-track::-webkit-scrollbar { display: none; } .gmb-hero-slide { flex: 0 0 min(82%, 44rem); scroll-snap-align: start; display: flex; flex-direction: column; text-decoration: none; color: #000000; } .gmb-hero-slide-media { width: 100%; aspect-ratio: 4 / 5; overflow: hidden; background: #f4f4f4; } .gmb-hero-slide-media img { width: 100%; height: 100%; object-fit: cover; display: block; } /* opisy pod slajdem – ten sam styl co przy kafelkach, ale mogą się zawijać */ .gmb-hero-slide .gmb-project-desc { white-space: normal; margin-top: 0.8rem; } /* pasek postępu – wypełnia się w trakcie przewijania */ .gmb-hero-slider-progress { height: 2px; margin: clamp(1.6rem, 4.5vw, 2.4rem) var(--gmb-hero-pad) 0; background: rgba(0, 0, 0, 0.12); overflow: hidden; } .gmb-hero-slider-progress span { display: block; height: 100%; width: 0; background: #ff0084; } } @media (max-width: 767px) { .gmb-hero-slider { padding-top: clamp(0.6rem, 2vw, 1.2rem); } } /* ============================================================================ gmb-about.css ============================================================================ */ /* ============================================================ GMB About – o nas jako zmienne CSS ============================================================ */ .gmb-about { --gmb-about-heading-font: var(--gmb-font-heading, "Monument Grotesk", "Helvetica Neue", Arial, sans-serif); --gmb-about-code-font: var(--gmb-font-mono, "SF Mono", "Cascadia Code", "Consolas", "Liberation Mono", monospace); --gmb-about-muted: rgba(0, 0, 0, 0.45); --gmb-about-pad: clamp(2rem, 4vw, 5rem); --gmb-accent-pink: #ff0084; --gmb-accent-blue: #0000fe; --gmb-accent-green: #56876d; position: relative; width: 100%; background: #ffffff; color: #000000; overflow: hidden; font-family: var(--gmb-about-heading-font); } /* Blok "o nas jako zmienne" osadzony w sekcji zespołu (zamiast dawnej osobnej sekcji about) — sam blok kodu, bez nagłówka/spacerów. */ .gmb-team-about { margin-top: clamp(3.5rem, 6vw, 6.5rem); background: transparent; } .gmb-about-spacer--top { height: clamp(8rem, 14vw, 14.4rem); } .gmb-about-spacer--bottom { height: clamp(5rem, 8vw, 8rem); } .gmb-about-container { width: 100%; /* treść = 1600px – równo z hero (.gmb-hero-grid: width:min(100%,1600px)) */ max-width: calc(160rem + 2 * var(--gmb-about-pad)); margin: 0 auto; padding-left: var(--gmb-about-pad); padding-right: var(--gmb-about-pad); box-sizing: border-box; } /* ------ Nagłówek ------ */ .gmb-about-heading-row { display: flex; justify-content: space-between; align-items: baseline; width: 100%; margin: 0 0 clamp(3rem, 5vw, 5rem); padding: 0 0 1.2rem; border-bottom: 1px solid #000000; } .gmb-about-heading { margin: 0; font-family: var(--gmb-about-heading-font); font-size: var(--gmb-typo-section, 41px); font-weight: 500; line-height: 1.15; letter-spacing: -0.72px; text-transform: lowercase; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } .gmb-about-count { font-size: var(--gmb-typo-count); font-weight: 500; letter-spacing: -0.01em; color: var(--gmb-accent-pink); } /* ------ Blok kodu ------ */ .gmb-about-code { border-left: 1px solid #000000; padding-left: clamp(1.5rem, 3vw, 3rem); } .gmb-about-code-open, .gmb-about-code-close { font-family: var(--gmb-about-code-font); font-size: var(--gmb-typo-code-bracket); font-weight: 400; line-height: 1.6; letter-spacing: -0.02em; color: #000000; } .gmb-about-code-close { margin-top: 0.2rem; } /* ------ Linia zmiennej (klikalna) ------ */ .gmb-about .gmb-about-var, .gmb-about .gmb-about-var:hover, .gmb-about .gmb-about-var:focus, .gmb-about .gmb-about-var:focus-visible, .gmb-about .gmb-about-var:active, .gmb-about .gmb-about-var:visited { display: block !important; width: 100% !important; margin: 0 !important; padding: 0.55rem 0.8rem 0.55rem 0 !important; margin-left: -0.8rem !important; background: transparent !important; border: 0 !important; border-radius: 0 !important; box-shadow: none !important; outline: none !important; text-decoration: none !important; text-align: left !important; font-family: var(--gmb-about-code-font) !important; font-size: var(--gmb-typo-code) !important; font-weight: 400 !important; line-height: 1.55 !important; letter-spacing: -0.02em !important; color: #000000 !important; text-transform: none !important; cursor: pointer; white-space: nowrap; overflow-x: auto; -webkit-overflow-scrolling: touch; scrollbar-width: none; opacity: 0; transform: translateY(0.6rem); transition: opacity 0.45s ease, transform 0.45s ease, background-color 0.2s ease !important; } .gmb-about .gmb-about-var::-webkit-scrollbar { display: none; } .gmb-about-code.is-revealed .gmb-about-var { opacity: 1; transform: translateY(0); } .gmb-about-code.is-revealed .gmb-about-var:nth-child(2) { transition-delay: 0.04s; } .gmb-about-code.is-revealed .gmb-about-var:nth-child(3) { transition-delay: 0.08s; } .gmb-about-code.is-revealed .gmb-about-var:nth-child(4) { transition-delay: 0.12s; } .gmb-about-code.is-revealed .gmb-about-var:nth-child(5) { transition-delay: 0.16s; } .gmb-about-code.is-revealed .gmb-about-var:nth-child(6) { transition-delay: 0.20s; } .gmb-about-code.is-revealed .gmb-about-var:nth-child(7) { transition-delay: 0.24s; } .gmb-about-code.is-revealed .gmb-about-var:nth-child(8) { transition-delay: 0.28s; } .gmb-about .gmb-about-var:hover, .gmb-about .gmb-about-var.is-active { background: rgba(0, 0, 0, 0.03) !important; } .gmb-about-var-name { color: var(--gmb-accent-blue); } .gmb-about-var-val.is-str { color: var(--gmb-accent-green); } .gmb-about-var-val.is-num { color: var(--gmb-accent-pink); } .gmb-about-var-val.is-bool { color: var(--gmb-accent-pink); } .gmb-about-var-val.is-kw { color: #000000; opacity: 0.55; } .gmb-about-var-semi { color: #000000; opacity: 0.4; } /* ------ Komentarz pod kodem ------ */ .gmb-about-comment { margin: clamp(2rem, 3.5vw, 3.5rem) 0 0; padding-left: clamp(1.5rem, 3vw, 3rem); font-family: var(--gmb-about-code-font); font-size: var(--gmb-typo-caption); font-weight: 400; line-height: 1.55; letter-spacing: -0.01em; color: var(--gmb-about-muted); min-height: 1.6em; transition: color 0.25s ease; } .gmb-about-comment.is-live { color: var(--gmb-accent-green); } /* Elementor – pełna szerokość. Działa automatycznie (przez :has) – NIE trzeba dodawać klas w Elementorze. O szerokości decyduje wyłącznie .gmb-about-container (144rem, padding jak hero). */ .elementor-element.gmb-about-section, .elementor-element.gmb-about-section > .e-con, .elementor-element.gmb-about-section > .e-con > .e-con-inner, .elementor-element.gmb-about-section .elementor-widget-html, .elementor-element.gmb-about-section .elementor-widget-container, .e-con:has(.gmb-about), .e-con-inner:has(.gmb-about), .elementor-section:has(.gmb-about), .elementor-container:has(.gmb-about), .elementor-column:has(.gmb-about), .elementor-widget-wrap:has(.gmb-about), .elementor-widget-html:has(.gmb-about), .elementor-widget-html:has(.gmb-about) .elementor-widget-container { width: 100% !important; max-width: 100% !important; padding-left: 0 !important; padding-right: 0 !important; } @media (max-width: 767px) { .gmb-about-heading { font-size: var(--gmb-typo-section-mobile, 28px); } .gmb-about .gmb-about-var, .gmb-about .gmb-about-var:hover, .gmb-about .gmb-about-var:focus, .gmb-about .gmb-about-var:active { font-size: 1.2rem !important; padding: 0.5rem 0.6rem 0.5rem 0 !important; margin-left: -0.6rem !important; white-space: normal; word-break: break-word; } } @media (prefers-reduced-motion: reduce) { .gmb-about .gmb-about-var { opacity: 1; transform: none; transition: background-color 0.2s ease !important; } } /* ============================================================================ gmb-skills.css ============================================================================ */ /* ============================================================ GMB Skills – "bóbr kontra kompetencje" (mini-gra timberman) ============================================================ */ .gmb-skills { --gmb-skills-heading-font: var(--gmb-font-heading, "Monument Grotesk", "Helvetica Neue", Arial, sans-serif); --gmb-skills-muted: rgba(0, 0, 0, 0.45); --gmb-skills-pad: clamp(2rem, 4vw, 5rem); --gmb-accent-pink: #ff0084; --gmb-accent-blue: #0000fe; --gmb-accent-green: #56876d; --gmb-seg-w: 9rem; --gmb-seg-h: 6.4rem; position: relative; width: 100%; background: #ffffff; color: #000000; overflow: hidden; font-family: var(--gmb-skills-heading-font); } .gmb-skills-spacer--top { height: clamp(8rem, 14vw, 14.4rem); } .gmb-skills-spacer--bottom { height: clamp(5rem, 8vw, 8rem); } .gmb-skills-container { width: 100%; /* treść = 1600px – równo z hero (.gmb-hero-grid: width:min(100%,1600px)) */ max-width: calc(160rem + 2 * var(--gmb-skills-pad)); margin: 0 auto; padding-left: var(--gmb-skills-pad); padding-right: var(--gmb-skills-pad); box-sizing: border-box; } /* ------ Nagłówek – ten sam rytm co reszta strony ------ */ .gmb-skills-heading-row { display: flex; justify-content: space-between; align-items: baseline; width: 100%; margin: 0 0 clamp(2rem, 3.5vw, 3.5rem); padding: 0 0 1.2rem; border-bottom: 1px solid #000000; } .gmb-skills-heading { margin: 0; font-family: var(--gmb-skills-heading-font); font-size: var(--gmb-typo-section, 41px); font-weight: 500; line-height: 1.15; letter-spacing: -0.72px; text-transform: lowercase; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } .gmb-skills-count { font-size: var(--gmb-typo-count); font-weight: 500; letter-spacing: -0.01em; color: var(--gmb-accent-pink); } /* ------ Nagroda: zniżka od 200 pkt ------ */ .gmb-skills-promo { display: flex; justify-content: space-between; align-items: baseline; gap: 1.5rem; margin-bottom: 1.2rem; padding-bottom: 1rem; border-bottom: 1px solid rgba(0, 0, 0, 0.12); } .gmb-skills-promo-text { font-size: var(--gmb-typo-mono-s); font-weight: 500; letter-spacing: 0.01em; text-transform: lowercase; color: var(--gmb-skills-muted); } .gmb-skills-promo-text b { color: var(--gmb-accent-pink); font-weight: 500; } .gmb-skills-promo-progress { font-size: var(--gmb-typo-mono-s); font-weight: 500; letter-spacing: 0.02em; text-transform: lowercase; color: var(--gmb-accent-blue); font-variant-numeric: tabular-nums; white-space: nowrap; } .gmb-skills-promo.is-unlocked .gmb-skills-promo-text { color: var(--gmb-accent-green); } .gmb-skills-promo.is-unlocked .gmb-skills-promo-progress { color: var(--gmb-accent-green); cursor: pointer; text-decoration: underline; } .gmb-skills-promo.is-unlocked { cursor: pointer; } /* przed startem gry: chowamy HUD, top 3 i pasek czasu */ .gmb-skills:not(.is-playing) .gmb-skills-hud, .gmb-skills:not(.is-playing) .gmb-skills-timebar, .gmb-skills:not(.is-playing) .gmb-skills-leaderboard { display: none; } /* promo widoczne tylko gdy zniżka już odblokowana (przed grą) */ .gmb-skills:not(.is-playing):not(.is-discount-unlocked) .gmb-skills-promo { display: none; } /* ------ HUD: punkty / rekord ------ */ .gmb-skills-hud { display: flex; justify-content: flex-end; gap: 2.4rem; margin-bottom: 1rem; } .gmb-skills-hud-item { font-size: var(--gmb-typo-mono-s); font-weight: 500; letter-spacing: 0.02em; text-transform: lowercase; color: var(--gmb-skills-muted); display: flex; align-items: baseline; gap: 0.7rem; } .gmb-skills-hud-val { font-size: var(--gmb-typo-score); font-weight: 500; letter-spacing: -0.02em; font-variant-numeric: tabular-nums; color: var(--gmb-accent-pink); } .gmb-skills-hud-val--best { color: var(--gmb-accent-blue); } /* ------ Pasek czasu ------ */ .gmb-skills-timebar { width: 100%; height: 3px; background: rgba(0, 0, 0, 0.08); margin-bottom: 0; overflow: hidden; } .gmb-skills-timebar-fill { width: 100%; height: 100%; background: var(--gmb-accent-pink); transform-origin: left center; transform: scaleX(1); transition: background-color 0.3s ease; } .gmb-skills-timebar-fill.is-warn { background: var(--gmb-accent-blue); } .gmb-skills-timebar-fill.is-danger { background: #000000; } /* ------ Scena gry ------ */ .gmb-skills-stage { position: relative; height: clamp(42rem, 60vh, 56rem); border-bottom: 1px solid #000000; overflow: hidden; cursor: pointer; user-select: none; -webkit-user-select: none; -webkit-tap-highlight-color: transparent; touch-action: manipulation; } /* ------ Top 3 (lewý górny róg sceny) ------ */ .gmb-skills-leaderboard { position: absolute; top: clamp(1.2rem, 2vw, 2rem); left: clamp(1.2rem, 2vw, 2rem); z-index: 1; pointer-events: none; min-width: 11rem; } .gmb-skills-leaderboard-title { margin: 0 0 0.6rem; font-size: var(--gmb-typo-mono-s); font-weight: 500; letter-spacing: 0.04em; text-transform: lowercase; color: var(--gmb-skills-muted); } .gmb-skills-leaderboard-list { margin: 0; padding: 0; list-style: none; border-top: 1px solid #000000; } .gmb-skills-leaderboard-list li { display: flex; justify-content: space-between; align-items: baseline; gap: 1.5rem; padding: 0.45rem 0; border-bottom: 1px solid rgba(0, 0, 0, 0.12); font-size: var(--gmb-typo-mono-s); font-weight: 500; letter-spacing: -0.01em; text-transform: lowercase; } .gmb-skills-leaderboard-list li:first-child .gmb-skills-leaderboard-score { color: var(--gmb-accent-pink); } .gmb-skills-leaderboard-list li:nth-child(2) .gmb-skills-leaderboard-score { color: var(--gmb-accent-blue); } .gmb-skills-leaderboard-list li:nth-child(3) .gmb-skills-leaderboard-score { color: var(--gmb-accent-green); } .gmb-skills-leaderboard-name { color: var(--gmb-skills-muted); } .gmb-skills-leaderboard-score { font-variant-numeric: tabular-nums; color: #000000; } /* ------ Pień ------ */ .gmb-skills-tree { position: absolute; left: 50%; bottom: 0; transform: translateX(-50%); width: var(--gmb-seg-w); display: flex; flex-direction: column-reverse; filter: drop-shadow(0 0.4rem 0 rgba(0, 0, 0, 0.04)); } .gmb-skills-tree.is-drop { animation: gmb-skills-drop 0.12s ease-out; } @keyframes gmb-skills-drop { from { transform: translate(-50%, calc(-1 * var(--gmb-seg-h))); } to { transform: translate(-50%, 0); } } .gmb-skills-seg { --seg-shade: 0; position: relative; height: var(--gmb-seg-h); margin-top: -1px; border: 1px solid #000000; border-radius: 2px; background-color: hsl(0, 0%, calc(98% - var(--seg-shade) * 3%)); background-image: /* słoje drewna */ repeating-linear-gradient( 175deg, transparent 0 0.9rem, rgba(0, 0, 0, 0.045) 0.9rem calc(0.9rem + 1px) ), repeating-linear-gradient( to bottom, transparent 0 1.2rem, rgba(0, 0, 0, 0.07) 1.2rem calc(1.2rem + 1px) ), /* pionowe włókna */ repeating-linear-gradient( 90deg, transparent 0 0.35rem, rgba(0, 0, 0, 0.025) 0.35rem calc(0.35rem + 1px) ); box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.5); } /* kora po bokach */ .gmb-skills-seg::before, .gmb-skills-seg::after { content: ""; position: absolute; top: 0; bottom: 0; width: 0.55rem; background: repeating-linear-gradient( to bottom, rgba(0, 0, 0, 0.12) 0 0.4rem, transparent 0.4rem 0.8rem ); pointer-events: none; } .gmb-skills-seg::before { left: 0; } .gmb-skills-seg::after { right: 0; } /* sęk – co drugi segment */ .gmb-skills-knot { position: absolute; top: 50%; left: 50%; width: 1.6rem; height: 1.1rem; transform: translate(-50%, -50%) rotate(-12deg); border-radius: 50%; background: radial-gradient(ellipse, rgba(0, 0, 0, 0.16) 0%, transparent 72%); pointer-events: none; } /* ------ Gałęzie = kompetencje ------ */ .gmb-skills-branch { position: absolute; top: 50%; transform: translateY(-50%); display: inline-flex; align-items: center; padding: 0.9rem 1.6rem; border: 1px solid #000000; border-radius: 999px; background: #ffffff; font-size: var(--gmb-typo-body); font-weight: 500; line-height: 1; letter-spacing: -0.02em; text-transform: lowercase; white-space: nowrap; z-index: 2; } /* kikut gałęzi wychodzący z pnia */ .gmb-skills-branch::before { content: ""; position: absolute; top: 50%; width: 2.4rem; height: 0.55rem; background: linear-gradient(to bottom, #ffffff, rgba(0, 0, 0, 0.08)); border: 1px solid #000000; border-radius: 1px; transform: translateY(-50%); } .gmb-skills-branch--left { right: calc(100% - 1px); padding-right: 2rem; } .gmb-skills-branch--left::before { left: 100%; margin-left: -1px; } .gmb-skills-branch--right { left: calc(100% - 1px); padding-left: 2rem; } .gmb-skills-branch--right::before { right: 100%; margin-right: -1px; } /* ------ Odcięty kawałek pnia (animacja) ------ */ .gmb-skills-chip { position: absolute; left: 50%; bottom: 0; width: var(--gmb-seg-w); transform: translateX(-50%); pointer-events: none; z-index: 3; } .gmb-skills-chip--left { animation: gmb-skills-fly-left 0.5s ease-in forwards; } .gmb-skills-chip--right { animation: gmb-skills-fly-right 0.5s ease-in forwards; } @keyframes gmb-skills-fly-left { to { transform: translate(calc(-50% - 28rem), -9rem) rotate(-40deg); opacity: 0; } } @keyframes gmb-skills-fly-right { to { transform: translate(calc(-50% + 28rem), -9rem) rotate(40deg); opacity: 0; } } /* ------ Bóbr ------ */ .gmb-skills-beaver { position: absolute; bottom: -0.2rem; left: calc(50% - var(--gmb-seg-w) / 2 - 11.5rem); width: 10.5rem; z-index: 2; pointer-events: none; transition: left 0.08s ease; } .gmb-skills-beaver-img { display: block; width: 100%; height: auto; filter: invert(1); transform: scaleX(-1); /* lewa strona – patrzy w stronę pnia */ -webkit-user-drag: none; user-select: none; } .gmb-skills-beaver.is-right { left: calc(50% + var(--gmb-seg-w) / 2 + 0.2rem); } .gmb-skills-beaver.is-right .gmb-skills-beaver-img { transform: scaleX(1); /* prawa strona – patrzy w stronę pnia */ } .gmb-skills-beaver.is-chopping .gmb-skills-beaver-img { animation: gmb-skills-bite-left 0.16s ease-out; } .gmb-skills-beaver.is-right.is-chopping .gmb-skills-beaver-img { animation: gmb-skills-bite-right 0.16s ease-out; } @keyframes gmb-skills-bite-left { 0% { transform: scaleX(-1) translateX(0) rotate(0deg); } 45% { transform: scaleX(-1) translateX(-1.4rem) rotate(3deg); } 100% { transform: scaleX(-1) translateX(0) rotate(0deg); } } @keyframes gmb-skills-bite-right { 0% { transform: scaleX(1) translateX(0) rotate(0deg); } 45% { transform: scaleX(1) translateX(1.4rem) rotate(-3deg); } 100% { transform: scaleX(1) translateX(0) rotate(0deg); } } /* ------ Overlay: start / koniec gry ------ */ .gmb-skills-overlay { position: absolute; inset: 0; z-index: 5; display: grid; place-items: center; /* prawie pełne krycie + rozmycie — żeby „top 3" i gałęzie pod spodem nie prześwitywały i nie nakładały się na tekst startowy (czytelność) */ background: rgba(255, 255, 255, 0.985); backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); text-align: center; transition: opacity 0.25s ease; } .gmb-skills-overlay.is-hidden { opacity: 0; pointer-events: none; } .gmb-skills-overlay-title { margin: 0 0 1rem; font-size: var(--gmb-typo-lead); font-weight: 500; letter-spacing: -0.03em; text-transform: lowercase; } .gmb-skills-overlay-sub { margin: 0 0 1.2rem; font-size: var(--gmb-typo-mono-s); font-weight: 500; letter-spacing: 0.01em; text-transform: lowercase; color: var(--gmb-skills-muted); } .gmb-skills-overlay-prize { margin: 0 0 2.4rem; padding: 1rem 1.8rem; border: 1px solid rgba(0, 0, 0, 0.15); border-radius: 999px; font-size: var(--gmb-typo-mono-s); font-weight: 500; letter-spacing: 0.01em; text-transform: lowercase; color: var(--gmb-skills-muted); } .gmb-skills-overlay-prize b { color: var(--gmb-accent-pink); font-weight: 500; } /* rząd przycisków w overlayu (start / odbierz) */ .gmb-skills-overlay-actions { display: flex; flex-wrap: wrap; gap: 1rem; justify-content: center; align-items: center; } /* twardy reset stylów motywu dla przycisku */ .gmb-skills .gmb-skills-overlay-btn, .gmb-skills .gmb-skills-overlay-btn:hover, .gmb-skills .gmb-skills-overlay-btn:focus, .gmb-skills .gmb-skills-overlay-btn:active, .gmb-skills .gmb-skills-overlay-btn:visited { display: inline-block !important; margin: 0 !important; padding: 1.2rem 3.2rem !important; background: #000000 !important; border: 1px solid #000000 !important; border-radius: 999px !important; box-shadow: none !important; outline: none !important; text-decoration: none !important; font-family: var(--gmb-skills-heading-font) !important; font-size: var(--gmb-typo-btn) !important; font-weight: 500 !important; letter-spacing: -0.01em !important; text-transform: lowercase !important; color: #ffffff !important; cursor: pointer; transition: background-color 0.2s ease, color 0.2s ease !important; } .gmb-skills .gmb-skills-overlay-btn:hover { background: var(--gmb-accent-pink) !important; border-color: var(--gmb-accent-pink) !important; } /* [hidden] musi wygrać z display:inline-block !important powyżej */ .gmb-skills .gmb-skills-overlay-btn[hidden] { display: none !important; } /* przycisk „odbierz zniżkę" – wyróżniony, żeby rzucał się w oczy */ .gmb-skills .gmb-skills-overlay-btn--claim, .gmb-skills .gmb-skills-overlay-btn--claim:visited { background: var(--gmb-accent-pink) !important; border-color: var(--gmb-accent-pink) !important; color: #ffffff !important; } .gmb-skills .gmb-skills-overlay-btn--claim:hover { transform: none !important; } /* ------ Podpis pod grą ------ */ .gmb-skills-caption { margin-top: 2rem; font-size: var(--gmb-typo-mono-s); font-weight: 500; letter-spacing: 0.02em; text-transform: lowercase; color: var(--gmb-skills-muted); min-height: 1.5em; transition: color 0.25s ease; } .gmb-skills-caption.is-live { color: var(--gmb-accent-green); } /* ============================================================ Formularz odbioru zniżki (modal po 300 pkt) ============================================================ */ .gmb-skills-form-modal { /* tokeny powtórzone na modalu — po przeniesieniu do (portal) modal nie jest już dzieckiem .gmb-skills, więc var() z sekcji byłyby puste (różowy przycisk → biały, zielony kod → brak). To samo rozwiązanie co przy menu. */ --gmb-skills-heading-font: var(--gmb-font-heading, "Monument Grotesk", "Helvetica Neue", Arial, sans-serif); --gmb-accent-pink: #ff0084; --gmb-accent-blue: #0000fe; --gmb-accent-green: #56876d; /* rem na modalu = jak na stronie głównej (html bez gmb-base ma 16px) */ font-size: 62.5%; position: fixed; inset: 0; z-index: 99999; display: flex; align-items: center; justify-content: center; box-sizing: border-box; padding: clamp(1.2rem, 4vw, 3rem); opacity: 0; visibility: hidden; transition: opacity 0.28s ease, visibility 0.28s ease; } .gmb-skills-form-modal[hidden] { display: flex; /* nadpisujemy domyślne hidden, widoczność sterujemy klasą */ } /* blokada scrolla tła przy otwartym modalu */ html.gmb-modal-locked, html.gmb-modal-locked body { overflow: hidden !important; } .gmb-skills-form-modal.is-open { opacity: 1; visibility: visible; } .gmb-skills-form-backdrop { position: absolute; inset: 0; background: rgba(0, 0, 0, 0.55); backdrop-filter: blur(3px); -webkit-backdrop-filter: blur(3px); } .gmb-skills-form-dialog { position: relative; z-index: 1; flex: 0 1 auto; width: min(100%, 46rem); max-width: 46rem; margin: 0 auto; max-height: calc(100vh - 4rem); overflow-y: auto; overflow-x: hidden; box-sizing: border-box; background: #ffffff; border: 1px solid #000000; border-radius: 0; padding: clamp(2rem, 4vw, 3.4rem); box-shadow: 0 2.4rem 6rem rgba(0, 0, 0, 0.28); transform: translateY(1.6rem) scale(0.98); transition: transform 0.28s ease; font-family: var(--gmb-skills-heading-font); } .gmb-skills-form-modal.is-open .gmb-skills-form-dialog { transform: translateY(0) scale(1); } .gmb-skills-form-modal .gmb-skills-form-close-x, .gmb-skills-form-modal .gmb-skills-form-close-x:hover, .gmb-skills-form-modal .gmb-skills-form-close-x:focus { position: absolute; top: 1.2rem; right: 1.2rem; width: 3.2rem; height: 3.2rem; display: grid; place-items: center; margin: 0; padding: 0; background: transparent !important; border: 1px solid rgba(0, 0, 0, 0.15) !important; border-radius: 999px; font-size: 2rem; line-height: 1; color: #000000 !important; cursor: pointer; transition: background-color 0.2s ease, color 0.2s ease; } .gmb-skills-form-modal .gmb-skills-form-close-x:hover { background: #000000 !important; color: #ffffff !important; } .gmb-skills-form-eyebrow { margin: 0 0 0.6rem; padding-right: 3.6rem; font-family: var(--gmb-font-mono, "SF Mono", "Cascadia Code", "Consolas", "Liberation Mono", monospace); font-size: var(--gmb-typo-mono-s); font-weight: 400; letter-spacing: 0.04em; text-transform: lowercase; color: var(--gmb-accent-green); } .gmb-skills-form-title { margin: 0 0 0.8rem; padding-right: 3.6rem; font-size: var(--gmb-typo-title); font-weight: 500; letter-spacing: -0.03em; text-transform: lowercase; } .gmb-skills-form-lead { margin: 0 0 2rem; font-size: var(--gmb-typo-body); font-weight: 500; line-height: 1.5; letter-spacing: 0.01em; text-transform: lowercase; color: var(--gmb-skills-muted); } .gmb-skills-form { display: grid; gap: 1.4rem; } .gmb-skills-field { display: grid; gap: 0.5rem; } .gmb-skills-field-label { font-family: var(--gmb-font-mono, "SF Mono", "Cascadia Code", "Consolas", "Liberation Mono", monospace); font-size: var(--gmb-form-label-size, 1.2rem); font-weight: 400; letter-spacing: -0.01em; text-transform: lowercase; color: rgba(0, 0, 0, 0.72); } .gmb-skills-form-modal .gmb-skills-field input, .gmb-skills-form-modal .gmb-skills-field select { width: 100%; margin: 0; padding: 1.1rem 0; background: transparent; border: 0; border-bottom: 1px solid #000000; border-radius: 0; font-family: var(--gmb-skills-heading-font); font-size: var(--gmb-form-input-size, 1.6rem); font-weight: 500; letter-spacing: -0.02em; color: #000000; box-shadow: none; outline: none; -webkit-appearance: none; appearance: none; transition: border-color 0.2s ease; } .gmb-skills-form-modal .gmb-skills-field input::placeholder { font-family: var(--gmb-skills-heading-font); font-weight: 500; color: rgba(0, 0, 0, 0.38); -webkit-text-fill-color: rgba(0, 0, 0, 0.38); opacity: 1; } .gmb-skills-form-modal .gmb-skills-field select { padding-right: 2.6rem; background-image: linear-gradient(45deg, transparent 50%, #000 50%), linear-gradient(135deg, #000 50%, transparent 50%); background-position: calc(100% - 1.2rem) calc(50% - 0.2rem), calc(100% - 0.7rem) calc(50% - 0.2rem); background-size: 0.5rem 0.5rem, 0.5rem 0.5rem; background-repeat: no-repeat; cursor: pointer; } .gmb-skills-form-modal .gmb-skills-field input:focus, .gmb-skills-form-modal .gmb-skills-field select:focus { border-bottom-color: var(--gmb-accent-blue); box-shadow: none; } .gmb-skills-form-modal .gmb-skills-field input.is-invalid, .gmb-skills-form-modal .gmb-skills-field select.is-invalid { border-bottom-color: var(--gmb-accent-pink); box-shadow: none; } /* pole z kodem rabatowym */ .gmb-skills-field--code .gmb-skills-field-label { color: var(--gmb-accent-pink); } .gmb-skills-form-modal .gmb-skills-field--code input { padding: 1.1rem 1.3rem; background: var(--gmb-accent-green); border-bottom-color: var(--gmb-accent-green); color: #ffffff; font-size: 1.8rem; font-weight: 500; letter-spacing: 0.12em; text-align: center; text-transform: uppercase; cursor: default; width: 100%; box-sizing: border-box; } /* opcje selecta (typ realizacji) — neutralizujemy „dziwny" natywny wygląd listy na tyle, na ile pozwala przeglądarka */ .gmb-skills-form-modal .gmb-skills-field select option { background: #ffffff; color: #000000; } /* zgoda / checkbox */ .gmb-skills-consent { display: flex; align-items: flex-start; gap: 1rem; margin-top: 0.4rem; font-family: var(--gmb-font-mono, "SF Mono", "Cascadia Code", "Consolas", "Liberation Mono", monospace); font-size: var(--gmb-form-legal-size, 1.2rem); font-weight: 400; line-height: 1.5; letter-spacing: -0.01em; text-transform: lowercase; color: rgba(0, 0, 0, 0.72); cursor: pointer; } .gmb-skills-form-modal .gmb-skills-consent input[type="checkbox"] { flex: 0 0 auto; width: 1.9rem; height: 1.9rem; margin: 0.1rem 0 0; padding: 0; background: #ffffff; border: 1px solid #000000; border-radius: 0; -webkit-appearance: none; appearance: none; cursor: pointer; position: relative; transition: background-color 0.15s ease; } .gmb-skills-form-modal .gmb-skills-consent input[type="checkbox"]:checked { background: #000000; } .gmb-skills-form-modal .gmb-skills-consent input[type="checkbox"]:checked::after { content: ""; position: absolute; top: 0.25rem; left: 0.6rem; width: 0.5rem; height: 0.95rem; border: solid #ffffff; border-width: 0 2px 2px 0; transform: rotate(45deg); } .gmb-skills-form-modal .gmb-skills-consent input[type="checkbox"].is-invalid { border-color: var(--gmb-accent-pink); box-shadow: 0 0 0 2px rgba(255, 0, 132, 0.12); } .gmb-skills-consent a { color: #000000; text-decoration: underline; text-underline-offset: 0.2em; transition: color 0.15s ease; } .gmb-skills-consent a:hover { color: var(--gmb-accent-green); } /* przycisk wyślij */ .gmb-skills-form-modal .gmb-skills-form-submit, .gmb-skills-form-modal .gmb-skills-form-submit:hover, .gmb-skills-form-modal .gmb-skills-form-submit:focus, .gmb-skills-form-modal .gmb-skills-form-submit:active { display: inline-block !important; width: 100%; margin: 0.6rem 0 0 !important; padding: 1.3rem 2rem !important; background: var(--gmb-accent-pink) !important; border: 1px solid var(--gmb-accent-pink) !important; border-radius: 0 !important; box-shadow: none !important; outline: none !important; transform: none !important; font-family: var(--gmb-skills-heading-font) !important; font-size: var(--gmb-typo-btn) !important; font-weight: 500 !important; letter-spacing: -0.01em !important; text-transform: lowercase !important; color: #ffffff !important; cursor: pointer; transition: background-color 0.2s ease !important; } .gmb-skills-form-modal .gmb-skills-form-submit[disabled] { opacity: 0.55; cursor: default; } .gmb-skills-form-status { margin: 0; min-height: 1.4em; font-family: var(--gmb-font-mono, "SF Mono", "Cascadia Code", "Consolas", "Liberation Mono", monospace); font-size: var(--gmb-typo-status); font-weight: 400; letter-spacing: -0.01em; text-transform: lowercase; text-align: center; } .gmb-skills-form-status.is-error { color: var(--gmb-accent-pink); } .gmb-skills-form-status.is-success { color: var(--gmb-accent-green); } /* Elementor – pełna szerokość sekcji. Działa automatycznie (przez :has) – NIE trzeba dodawać klas w Elementorze. Zeruje szerokość/padding KAŻDEGO wrappera Elementora wokół gry, więc o szerokości decyduje wyłącznie .gmb-skills-container (max-width 144rem + ten sam padding co hero) = identycznie jak .gmb-hero-grid. */ .elementor-element.gmb-skills-section, .elementor-element.gmb-skills-section > .e-con, .elementor-element.gmb-skills-section > .e-con > .e-con-inner, .elementor-element.gmb-skills-section .elementor-widget-html, .elementor-element.gmb-skills-section .elementor-widget-container, .e-con:has(.gmb-skills), .e-con-inner:has(.gmb-skills), .elementor-section:has(.gmb-skills), .elementor-container:has(.gmb-skills), .elementor-column:has(.gmb-skills), .elementor-widget-wrap:has(.gmb-skills), .elementor-widget-html:has(.gmb-skills), .elementor-widget-html:has(.gmb-skills) .elementor-widget-container { width: 100% !important; max-width: 100% !important; padding-left: 0 !important; padding-right: 0 !important; } @media (max-width: 767px) { .gmb-skills { --gmb-seg-w: 6.6rem; --gmb-seg-h: 5.2rem; } .gmb-skills-heading { font-size: var(--gmb-typo-section-mobile, 28px); } .gmb-skills-stage { height: clamp(34rem, 58vh, 46rem); } .gmb-skills-branch { padding: 0.7rem 1.2rem; font-size: var(--gmb-typo-mono-s); } .gmb-skills-promo { flex-direction: column; align-items: flex-start; gap: 0.4rem; } .gmb-skills-leaderboard { top: 0.8rem; left: 0.8rem; min-width: 9rem; } .gmb-skills-leaderboard-list li { font-size: var(--gmb-typo-mono-s); padding: 0.35rem 0; } .gmb-skills-beaver { width: 7.8rem; left: calc(50% - var(--gmb-seg-w) / 2 - 8.4rem); } .gmb-skills-beaver.is-right { left: calc(50% + var(--gmb-seg-w) / 2 + 0.2rem); } @keyframes gmb-skills-fly-left { to { transform: translate(calc(-50% - 16rem), -6rem) rotate(-40deg); opacity: 0; } } @keyframes gmb-skills-fly-right { to { transform: translate(calc(-50% + 16rem), -6rem) rotate(40deg); opacity: 0; } } } /* ============================================================================ gmb-clients.css ============================================================================ */ /* ============================================================ GMB Clients – sekcja realizacji (Paper Tiger style) ============================================================ */ .gmb-clients { --gmb-clients-heading-font: var(--gmb-font-heading, "Monument Grotesk", "Helvetica Neue", Arial, sans-serif); --gmb-clients-pad: clamp(2rem, 4vw, 5rem); --gmb-clients-item-size: var(--gmb-typo-body, clamp(1.4rem, 1.7vw, 1.7rem)); --gmb-clients-line: rgba(0, 0, 0, 0.12); --gmb-clients-muted: rgba(0, 0, 0, 0.45); --gmb-accent-pink: #ff0084; --gmb-accent-blue: #0000fe; --gmb-accent-green: #56876d; position: relative; width: 100%; background: #ffffff; color: #000000; overflow: hidden; } .gmb-clients-spacer--top { height: clamp(8rem, 14vw, 14.4rem); } .gmb-clients-spacer--bottom { height: clamp(5rem, 8vw, 8rem); } .gmb-clients-container { display: flex; flex-direction: column; width: 100%; /* treść = 1600px – równo z hero (.gmb-hero-grid: width:min(100%,1600px)) */ max-width: calc(160rem + 2 * var(--gmb-clients-pad)); margin: 0 auto; padding-left: var(--gmb-clients-pad); padding-right: var(--gmb-clients-pad); box-sizing: border-box; } /* ------ Nagłówek – jedna linia z licznikiem, wyrównany do lewej ------ */ .gmb-clients-heading-row { position: relative; z-index: 5; flex-shrink: 0; display: flex; justify-content: space-between; align-items: flex-start; gap: 1.2rem; width: 100%; margin: 0 0 clamp(1.6rem, 2.5vw, 2.4rem); padding: 0 0 1.2rem; border-bottom: 1px solid #000000; background: #ffffff; } .gmb-clients-heading-main { flex: 1 1 auto; min-width: 0; } .gmb-clients-touch-hint { display: none; margin: 0.45rem 0 0; font-family: var(--gmb-font-mono, "SF Mono", monospace); font-size: 11px; font-weight: 400; line-height: 1.35; letter-spacing: -0.01em; color: var(--gmb-clients-muted); text-transform: lowercase; } .gmb-clients-filters { margin-top: 0; margin-bottom: clamp(2.4rem, 4vw, 4rem); } .gmb-clients-filter-empty { margin: clamp(1.6rem, 3vw, 2.4rem) 0 0; font-family: var(--gmb-font-mono, "SF Mono", monospace); font-size: var(--gmb-typo-status, 13px); letter-spacing: -0.01em; text-transform: lowercase; color: var(--gmb-clients-muted); } .gmb-clients-heading { margin: 0; font-family: var(--gmb-clients-heading-font); font-size: var(--gmb-typo-section, 41px); font-weight: 500; line-height: 1.15; letter-spacing: -0.72px; text-transform: lowercase; text-align: left; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } .gmb-clients-all { flex-shrink: 0; font-family: var(--gmb-font-mono, "SF Mono", monospace); font-size: var(--gmb-typo-mono-s, 13px); font-weight: 500; letter-spacing: -0.01em; text-transform: lowercase; text-decoration: none; color: #000000; transition: color 0.18s ease; } .gmb-clients-all:hover, .gmb-clients-all:focus-visible { color: var(--gmb-accent-green); } .gmb-clients-count { font-family: var(--gmb-clients-heading-font); font-size: var(--gmb-typo-count); font-weight: 500; letter-spacing: -0.01em; color: var(--gmb-accent-pink); } .gmb-clients-stage { position: relative; width: 100%; } /* ------ Siatka 50/50 ------ */ .gmb-clients-grid { display: grid; grid-template-columns: 1fr 1fr; align-items: start; gap: clamp(3rem, 6vw, 9rem); width: 100%; margin: 0 auto; } /* ------ Lista realizacji (lewa kolumna) ------ */ .gmb-clients-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; justify-content: flex-start; text-align: left; will-change: transform, opacity; } .gmb-clients-item { --gmb-item-line-color: var(--gmb-clients-line); position: relative; width: 100%; margin: 0; border-bottom: none; will-change: transform, opacity; transition: --gmb-item-line-color 0.25s ease; } /* cieniutka kreska z malutkich kółeczek */ .gmb-clients-item::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 3px; background-image: radial-gradient(circle, var(--gmb-item-line-color) 0.55px, transparent 0.55px); background-size: 5px 3px; background-repeat: repeat-x; background-position: 0 100%; pointer-events: none; } /* twarde nadpisanie stylów przycisków z motywu/Elementora (różowe ramki, tła, hover) */ .gmb-clients .gmb-clients-item-btn, .gmb-clients .gmb-clients-item-btn:hover, .gmb-clients .gmb-clients-item-btn:focus, .gmb-clients .gmb-clients-item-btn:focus-visible, .gmb-clients .gmb-clients-item-btn:active, .gmb-clients .gmb-clients-item-btn:visited { display: grid !important; grid-template-columns: 3.2rem 1fr auto !important; align-items: baseline !important; gap: 1.5rem !important; width: 100% !important; min-width: 100% !important; margin: 0 !important; padding: 1.1rem 0 !important; background: transparent !important; background-color: transparent !important; border: 0 !important; border-radius: 0 !important; box-shadow: none !important; outline: none !important; text-decoration: none !important; cursor: pointer; text-align: left !important; font-family: inherit !important; font-size: inherit !important; line-height: inherit !important; color: #000000 !important; text-transform: none !important; transition: opacity 0.25s ease, padding-left 0.3s ease !important; } .gmb-clients:not(.gmb-clients--touch) .gmb-clients-item.is-active .gmb-clients-item-btn { padding-left: 1rem !important; } .gmb-clients-item-idx { font-size: var(--gmb-typo-mono-s); font-weight: 500; letter-spacing: 0.02em; color: var(--gmb-clients-muted); } .gmb-clients-item-name { font-size: var(--gmb-clients-item-size); font-weight: 500; line-height: 1.15; letter-spacing: -0.01em; text-transform: lowercase; } .gmb-clients-item-cat { font-size: var(--gmb-typo-mono-s); font-weight: 500; letter-spacing: 0.02em; text-transform: lowercase; color: var(--gmb-clients-muted); justify-self: end; text-align: right; } /* hover – przygaszanie pozostałych (tylko mysz, nie dotyk) */ @media (hover: hover) and (pointer: fine) { .gmb-clients-list:hover .gmb-clients-item:not(.is-active) .gmb-clients-item-btn { opacity: 0.35; } } /* aktywna pozycja – numer w kolorze, kategoria w zieleni */ .gmb-clients-item.is-active .gmb-clients-item-btn { opacity: 1; } .gmb-clients-item.is-active .gmb-clients-item-idx { color: var(--gmb-accent-blue); } .gmb-clients-item.is-active .gmb-clients-item-cat { color: var(--gmb-accent-green); } /* dotyk: wizualny stan tylko po kliknięciu (.is-expanded), nie po hoverze */ .gmb-clients--touch .gmb-clients-item .gmb-clients-item-btn { transition: opacity 0.25s ease !important; } .gmb-clients--touch .gmb-clients-item.is-active:not(.is-expanded) .gmb-clients-item-btn, .gmb-clients--touch .gmb-clients-item .gmb-clients-item-btn:hover, .gmb-clients--touch .gmb-clients-item .gmb-clients-item-btn:focus, .gmb-clients--touch .gmb-clients-item .gmb-clients-item-btn:focus-visible { padding-left: 0 !important; } .gmb-clients--touch .gmb-clients-item.is-active:not(.is-expanded) .gmb-clients-item-idx, .gmb-clients--touch .gmb-clients-item .gmb-clients-item-btn:hover .gmb-clients-item-idx, .gmb-clients--touch .gmb-clients-item .gmb-clients-item-btn:focus .gmb-clients-item-idx, .gmb-clients--touch .gmb-clients-item .gmb-clients-item-btn:focus-visible .gmb-clients-item-idx { color: var(--gmb-clients-muted); } .gmb-clients--touch .gmb-clients-item.is-active:not(.is-expanded) .gmb-clients-item-cat, .gmb-clients--touch .gmb-clients-item .gmb-clients-item-btn:hover .gmb-clients-item-cat, .gmb-clients--touch .gmb-clients-item .gmb-clients-item-btn:focus .gmb-clients-item-cat, .gmb-clients--touch .gmb-clients-item .gmb-clients-item-btn:focus-visible .gmb-clients-item-cat { color: var(--gmb-clients-muted); } .gmb-clients--touch .gmb-clients-item.is-expanded .gmb-clients-item-btn { padding-left: 1rem !important; } .gmb-clients--touch .gmb-clients-item.is-expanded .gmb-clients-item-idx { color: var(--gmb-accent-blue); } .gmb-clients--touch .gmb-clients-item.is-expanded .gmb-clients-item-cat { color: var(--gmb-accent-green); } .gmb-clients--touch .gmb-clients-item.is-expanded { --gmb-item-line-color: var(--gmb-accent-pink); } /* aktywna / przypięta – kółeczka w różowym akcencie */ .gmb-clients-item.is-active, .gmb-clients-item.is-pinned { --gmb-item-line-color: var(--gmb-accent-pink); } .gmb-clients-item.is-pinned .gmb-clients-item-idx::after { content: " ●"; font-size: 0.8em; color: var(--gmb-accent-pink); } /* ------ Paginacja listy ------ */ .gmb-clients-pagination { display: flex; align-items: center; gap: 0.4rem; margin-top: 2rem; margin-left: -1.1rem; } .gmb-clients-pagination:empty { display: none; } .gmb-clients .gmb-clients-page-btn, .gmb-clients .gmb-clients-page-btn:hover, .gmb-clients .gmb-clients-page-btn:focus, .gmb-clients .gmb-clients-page-btn:active { display: inline-flex !important; align-items: center !important; justify-content: center !important; width: auto !important; height: auto !important; min-width: 3.6rem !important; min-height: 3.6rem !important; padding: 1rem 1.1rem !important; margin: 0 !important; background: transparent !important; border: 0 !important; border-radius: 0 !important; box-shadow: none !important; outline: none !important; cursor: pointer; font-family: inherit !important; font-size: var(--gmb-typo-mono) !important; font-weight: 500 !important; line-height: 1 !important; color: var(--gmb-clients-muted) !important; text-decoration: none !important; transition: color 0.25s ease, opacity 0.25s ease !important; } .gmb-clients .gmb-clients-page-btn:hover { color: #000000 !important; } .gmb-clients .gmb-clients-page-btn.is-current { color: #000000 !important; text-decoration: underline !important; text-underline-offset: 0.4em !important; } .gmb-clients .gmb-clients-page-btn:disabled { opacity: 0.25 !important; cursor: default; pointer-events: none; } /* ------ Panel podglądu (prawa kolumna) ------ */ .gmb-clients-preview { position: sticky; top: clamp(2rem, 5vw, 6rem); display: grid; min-height: 32rem; } .gmb-clients-preview-panel { grid-area: 1 / 1; opacity: 0; visibility: hidden; transform: translateY(0.75rem); transition: opacity 0.35s ease, transform 0.35s ease, visibility 0s linear 0.35s; } .gmb-clients-preview-panel.is-active { opacity: 1; visibility: visible; transform: translateY(0); transition: opacity 0.35s ease, transform 0.35s ease, visibility 0s; } .gmb-clients-preview-head { display: flex; justify-content: space-between; align-items: baseline; gap: 2rem; margin: 0 0 1.2rem; } .gmb-clients-preview-title { margin: 0; font-family: var(--gmb-clients-heading-font); font-size: var(--gmb-typo-title); font-weight: 500; line-height: 1.1; letter-spacing: -0.03em; text-transform: lowercase; } .gmb-clients-preview-year { font-size: var(--gmb-typo-mono-s); font-weight: 500; letter-spacing: 0.02em; color: var(--gmb-accent-blue); white-space: nowrap; } .gmb-clients-preview-cat { font-family: var(--gmb-font-mono, "SF Mono", monospace); font-size: var(--gmb-typo-mono-s); font-weight: 500; letter-spacing: 0.02em; text-transform: lowercase; color: var(--gmb-accent-blue); white-space: nowrap; } .gmb-clients-preview-intro { margin: 0 0 1.4rem; padding: 1.2rem 1.4rem; border: 1px solid rgba(0, 0, 0, 0.14); background: linear-gradient(135deg, rgba(86, 135, 109, 0.06) 0%, rgba(255, 255, 255, 0) 55%); box-sizing: border-box; overflow: hidden; } .gmb-clients-preview-facts { display: flex; flex-wrap: wrap; gap: 0.8rem; margin: 1.2rem 0 0; padding: 0; list-style: none; } .gmb-clients-preview-fact { display: inline-flex; align-items: baseline; gap: 0.45rem; padding: 0.55rem 0.95rem; border: 1px solid #000000; border-radius: 100px; font-family: var(--gmb-font-mono, "SF Mono", monospace); font-size: 1.15rem; line-height: 1.2; text-transform: lowercase; background: #ffffff; } .gmb-clients-preview-fact-k { opacity: 0.55; } .gmb-clients-preview-fact--duration .gmb-clients-preview-fact-v { color: var(--gmb-accent-green); font-weight: 600; } .gmb-clients-preview-fact--city .gmb-clients-preview-fact-v { color: var(--gmb-accent-blue); font-weight: 600; } .gmb-clients-preview-fact--year .gmb-clients-preview-fact-v { color: var(--gmb-accent-pink); font-weight: 600; } .gmb-clients-preview-intro .gmb-clients-preview-case--prominent { margin: 1.2rem 0 0; padding: 1rem 1.2rem; font-size: clamp(1.35rem, 1.5vw, 1.55rem); box-sizing: border-box; width: 100%; max-width: 100%; } .gmb-clients-preview-case--prominent { display: flex; align-items: center; justify-content: space-between; width: 100%; margin: 0 0 2rem; padding: 1.35rem 1.6rem; border: 1px solid var(--webri-pink); background: var(--webri-pink); color: #ffffff; box-sizing: border-box; font-family: var(--gmb-clients-heading-font); font-size: clamp(1.5rem, 1.8vw, 1.85rem); font-weight: 500; letter-spacing: -0.02em; text-transform: lowercase; text-decoration: none; transition: background-color 0.18s ease, border-color 0.18s ease, transform 0.18s ease; } .gmb-clients-preview-case--prominent:hover, .gmb-clients-preview-case--prominent:focus-visible { transform: translateY(-2px); } .gmb-clients-preview-case-arrow { font-size: 1.35em; line-height: 1; } .gmb-clients-preview-desc { margin: 0; font-size: var(--gmb-clients-item-size); font-weight: 500; line-height: 1.45; letter-spacing: -0.01em; max-width: 46rem; } .gmb-clients-preview-tags { margin: 0 0 1.4rem; font-size: var(--gmb-typo-mono-s); font-weight: 500; letter-spacing: 0.02em; text-transform: lowercase; color: var(--gmb-accent-green); } .gmb-clients-preview-gallery { display: grid; grid-template-columns: 1fr 1fr; gap: 1.2rem; } .gmb-clients-preview-gallery img { display: block; width: 100%; aspect-ratio: 4 / 3; object-fit: cover; object-position: top center; } /* pierwsze zdjęcie na całą szerokość – łamie monotonię siatki */ .gmb-clients-preview-gallery img:first-child { grid-column: 1 / -1; aspect-ratio: 16 / 9; } /* Elementor – pełna szerokość sekcji. Działa automatycznie (przez :has) – NIE trzeba dodawać klas w Elementorze. O szerokości decyduje wyłącznie .gmb-clients-container (144rem, padding jak hero). */ .elementor-element.gmb-clients-section, .elementor-element.gmb-clients-section > .e-con, .elementor-element.gmb-clients-section > .e-con > .e-con-inner, .elementor-element.gmb-clients-section .elementor-widget-html, .elementor-element.gmb-clients-section .elementor-widget-container, .e-con:has(.gmb-clients), .e-con-inner:has(.gmb-clients), .elementor-section:has(.gmb-clients), .elementor-container:has(.gmb-clients), .elementor-column:has(.gmb-clients), .elementor-widget-wrap:has(.gmb-clients), .elementor-widget-html:has(.gmb-clients), .elementor-widget-html:has(.gmb-clients) .elementor-widget-container { width: 100% !important; max-width: 100% !important; padding-left: 0 !important; padding-right: 0 !important; } .elementor-element.gmb-clients-section { overflow: hidden; } @media (max-width: 1199px) { .gmb-clients-touch-hint { display: block; } .gmb-clients-heading-row { align-items: flex-start; } .gmb-clients-all { flex: 0 0 auto; margin-top: 0.35rem; } .gmb-clients .gmb-clients-item.is-active:not(.is-expanded) .gmb-clients-item-btn, .gmb-clients .gmb-clients-item .gmb-clients-item-btn:hover, .gmb-clients .gmb-clients-item .gmb-clients-item-btn:focus, .gmb-clients .gmb-clients-item .gmb-clients-item-btn:focus-visible { padding-left: 0 !important; } .gmb-clients .gmb-clients-item.is-active:not(.is-expanded) .gmb-clients-item-idx, .gmb-clients .gmb-clients-item .gmb-clients-item-btn:hover .gmb-clients-item-idx, .gmb-clients .gmb-clients-item .gmb-clients-item-btn:focus .gmb-clients-item-idx, .gmb-clients .gmb-clients-item .gmb-clients-item-btn:focus-visible .gmb-clients-item-idx { color: var(--gmb-clients-muted); } .gmb-clients .gmb-clients-item.is-active:not(.is-expanded) .gmb-clients-item-cat, .gmb-clients .gmb-clients-item .gmb-clients-item-btn:hover .gmb-clients-item-cat, .gmb-clients .gmb-clients-item .gmb-clients-item-btn:focus .gmb-clients-item-cat, .gmb-clients .gmb-clients-item .gmb-clients-item-btn:focus-visible .gmb-clients-item-cat { color: var(--gmb-clients-muted); } .gmb-clients .gmb-clients-item.is-expanded .gmb-clients-item-btn { padding-left: 1rem !important; } .gmb-clients .gmb-clients-item.is-expanded .gmb-clients-item-idx { color: var(--gmb-accent-blue); } .gmb-clients .gmb-clients-item.is-expanded .gmb-clients-item-cat { color: var(--gmb-accent-green); } .gmb-clients-grid { grid-template-columns: 1fr; gap: 0; } .gmb-clients-preview { display: none; } /* Akordeon: panele podglądu w liście (JS placePanels) */ .gmb-clients-acc { display: grid; grid-template-rows: 0fr; transition: grid-template-rows 0.45s ease; } .gmb-clients-acc:has(.gmb-clients-preview-panel.is-active) { grid-template-rows: 1fr; } .gmb-clients-acc .gmb-clients-preview-panel { grid-area: auto; overflow: hidden; min-height: 0; visibility: visible; transform: none; opacity: 0; transition: opacity 0.3s ease; } .gmb-clients-acc .gmb-clients-preview-panel.is-active { opacity: 1; transition: opacity 0.35s ease 0.15s; } .gmb-clients-acc .gmb-clients-preview-head { margin: 0.4rem 0 0.8rem; } .gmb-clients-acc .gmb-clients-preview-title { display: block; font-size: clamp(1.8rem, 3.2vw, 2.4rem); margin: 0 0 0.6rem; } .gmb-clients-acc .gmb-clients-preview-desc { max-width: none; } .gmb-clients-acc .gmb-clients-preview-tags { margin-bottom: 1.2rem; } .gmb-clients-acc .gmb-clients-preview-gallery { gap: 0.8rem; padding-bottom: 1.6rem; } } @media (max-width: 767px) { .gmb-clients-heading { font-size: var(--gmb-typo-section-mobile, 28px); } /* lista: ciaśniejszy układ, kategoria wraca jako mała etykieta po prawej */ .gmb-clients .gmb-clients-item-btn { grid-template-columns: 2.6rem 1fr auto !important; gap: 1rem !important; padding: 1.4rem 0 !important; } .gmb-clients-item-cat { display: block; font-size: 1rem; max-width: 38vw; white-space: normal; } .gmb-clients-acc .gmb-clients-preview-desc { font-size: 1.4rem; } .gmb-clients-acc .gmb-clients-preview-tags { margin-bottom: 1.6rem; } .gmb-clients-acc .gmb-clients-preview-gallery { padding-bottom: 2rem; } } /* ============================================================================ gmb-team.css ============================================================================ */ /* ============================================================ GMB Team – "dwa bobry, jedna tama" (sekcja o nas, split 50/50) ============================================================ */ .gmb-team { --gmb-team-heading-font: var(--gmb-font-heading, "Monument Grotesk", "Helvetica Neue", Arial, sans-serif); --gmb-team-code-font: var(--gmb-font-mono, "SF Mono", "Cascadia Code", "Consolas", "Liberation Mono", monospace); --gmb-team-muted: rgba(0, 0, 0, 0.45); --gmb-team-pad: clamp(2rem, 4vw, 5rem); --gmb-accent-pink: #ff0084; --gmb-accent-blue: #0000fe; --gmb-accent-green: #56876d; position: relative; width: 100%; background: #ffffff; color: #000000; overflow: hidden; font-family: var(--gmb-team-heading-font); } /* ------ Twarde resety – beton na nadpisania motywu / Elementora ------ */ .gmb-team, .gmb-team *, .gmb-team *::before, .gmb-team *::after { box-sizing: border-box; } .gmb-team .gmb-team-beaver, .gmb-team .gmb-team-meta, .gmb-team .gmb-team-role, .gmb-team .gmb-team-name, .gmb-team .gmb-team-bio, .gmb-team .gmb-team-stat, .gmb-team .gmb-team-stat-num, .gmb-team .gmb-team-stat-lab { margin: 0; padding: 0; } .gmb-team-spacer--top { height: clamp(8rem, 14vw, 14.4rem); } .gmb-team-spacer--bottom { height: clamp(5rem, 8vw, 8rem); } .gmb-team-container { width: 100%; /* treść = 1600px – równo z hero (.gmb-hero-grid: width:min(100%,1600px)) */ max-width: calc(160rem + 2 * var(--gmb-team-pad)); margin: 0 auto; padding-left: var(--gmb-team-pad); padding-right: var(--gmb-team-pad); } /* ------ Nagłówek – ten sam rytm co reszta strony ------ */ .gmb-team-heading-row { display: flex; justify-content: space-between; align-items: baseline; width: 100%; margin: 0 0 clamp(3rem, 5vw, 5rem); padding: 0 0 1.2rem; border-bottom: 1px solid #000000; } .gmb-team-heading { margin: 0; font-family: var(--gmb-team-heading-font); font-size: var(--gmb-typo-section, 41px); font-weight: 500; line-height: 1.15; letter-spacing: -0.72px; text-transform: lowercase; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } .gmb-team-count { font-size: var(--gmb-typo-count); font-weight: 500; letter-spacing: -0.01em; color: var(--gmb-accent-pink); } /* ------ Duet: dwa bobry obok siebie ------ */ .gmb-team-duo { display: flex; align-items: stretch; width: 100%; border: 1px solid #000000; } /* ------ Połowa (jedna osoba) ------ */ .gmb-team-half { flex: 1 1 0; min-width: 0; display: flex; /* płynna zmiana proporcji przy hover/active jednej połowy */ transition: flex-grow 0.5s cubic-bezier(0.22, 1, 0.36, 1); } .gmb-team .gmb-team-card, .gmb-team .gmb-team-card:hover, .gmb-team .gmb-team-card:focus, .gmb-team .gmb-team-card:focus-visible, .gmb-team .gmb-team-card:active, .gmb-team .gmb-team-card:visited { appearance: none !important; -webkit-appearance: none !important; display: flex !important; flex-direction: column !important; align-items: flex-start !important; justify-content: flex-start !important; gap: clamp(1.4rem, 2vw, 2rem) !important; width: 100% !important; height: auto !important; min-height: 0 !important; max-width: none !important; margin: 0 !important; padding: clamp(2rem, 3.5vw, 4rem) !important; background: transparent !important; border: 0 !important; border-radius: 0 !important; box-shadow: none !important; outline: none !important; text-align: left !important; text-transform: none !important; text-decoration: none !important; white-space: normal !important; line-height: 1.2 !important; cursor: pointer; color: #000000 !important; font-family: var(--gmb-team-heading-font) !important; transition: background-color 0.3s ease !important; } .gmb-team .gmb-team-card:hover, .gmb-team .gmb-team-card:focus-visible { background: rgba(0, 0, 0, 0.025) !important; } /* ------ Bóbr ------ */ .gmb-team-beaver { display: block !important; flex: 0 0 auto; width: clamp(8rem, 11vw, 13rem) !important; height: clamp(8rem, 11vw, 13rem) !important; transition: transform 0.5s cubic-bezier(0.22, 1, 0.36, 1); } .gmb-team-beaver-img { display: block; width: 100%; height: 100%; object-fit: contain; user-select: none; pointer-events: none; } /* Piotrek — czarny bóbr (jak w grze kompetencji: invert na bober1.svg) */ .gmb-team-half--left .gmb-team-beaver-img { filter: invert(1); } /* drugi bóbr patrzy w stronę pierwszego (lustro) */ .gmb-team-beaver--mirror { transform: scaleX(-1); } /* bobry "zwracają się" ku sobie, gdy najedziesz na duet */ .gmb-team-half--left .gmb-team-card:hover .gmb-team-beaver, .gmb-team-half--left .gmb-team-card:focus-visible .gmb-team-beaver { transform: rotate(-4deg) translateX(0.4rem); } .gmb-team-half--right .gmb-team-card:hover .gmb-team-beaver, .gmb-team-half--right .gmb-team-card:focus-visible .gmb-team-beaver { transform: scaleX(-1) rotate(-4deg) translateX(0.4rem); } /* ------ Meta: rola + imię ------ */ .gmb-team-meta { display: flex !important; flex-direction: column !important; gap: 0.4rem; width: 100%; } .gmb-team-role { font-family: var(--gmb-team-code-font); font-size: var(--gmb-typo-mono-s); font-weight: 400; letter-spacing: -0.01em; color: var(--gmb-accent-blue); } .gmb-team-half--right .gmb-team-role { color: var(--gmb-accent-green); } .gmb-team-name { font-size: var(--gmb-typo-name); font-weight: 500; line-height: 1.05; letter-spacing: -0.03em; text-transform: lowercase; } /* ------ Bio: ukryte, odsłania się przy hover/active ------ */ .gmb-team-bio { display: block !important; max-width: 42ch; font-family: var(--gmb-team-code-font); font-size: var(--gmb-typo-caption); font-weight: 400; line-height: 1.55; letter-spacing: -0.01em; color: var(--gmb-team-muted); /* stan zwinięty */ max-height: 0; opacity: 0; transform: translateY(0.6rem); overflow: hidden; transition: max-height 0.5s cubic-bezier(0.22, 1, 0.36, 1), opacity 0.4s ease, transform 0.4s ease; } .gmb-team-card:hover .gmb-team-bio, .gmb-team-card:focus-visible .gmb-team-bio, .gmb-team-card[aria-expanded="true"] .gmb-team-bio { max-height: 16rem; opacity: 1; transform: translateY(0); } /* ------ Stat (duża liczba na dole) ------ */ .gmb-team-stat { display: flex !important; align-items: baseline; gap: 0.7rem; margin-top: auto; padding-top: 0.4rem; } .gmb-team-stat-num { font-size: var(--gmb-typo-display); font-weight: 500; letter-spacing: -0.04em; line-height: 1; } .gmb-team-half--left .gmb-team-stat-num { color: var(--gmb-accent-pink); } .gmb-team-half--right .gmb-team-stat-num { color: var(--gmb-accent-blue); } .gmb-team-stat-lab { font-family: var(--gmb-team-code-font); font-size: var(--gmb-typo-mono-s); color: var(--gmb-team-muted); } /* ------ Kłoda / tama: linia podziału ------ */ .gmb-team-log { position: relative; flex: 0 0 1px; align-self: stretch; background: #000000; } .gmb-team-log-amp { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); display: grid; place-items: center; width: clamp(3.4rem, 4.5vw, 4.6rem); height: clamp(3.4rem, 4.5vw, 4.6rem); background: #ffffff; border: 1px solid #000000; border-radius: 50%; font-family: var(--gmb-team-code-font); font-size: clamp(1.6rem, 2vw, 2.1rem); font-weight: 400; color: #000000; } /* gdy najeżdżasz na duet – połowa, na której jesteś, rośnie */ .gmb-team-duo:hover .gmb-team-half:not(:hover) { flex-grow: 0.65; } .gmb-team-duo:hover .gmb-team-half:hover { flex-grow: 1.55; } /* to samo dla nawigacji klawiaturą / kliknięcia (klasa z JS) */ .gmb-team-duo.has-active .gmb-team-half:not(.is-active) { flex-grow: 0.65; } .gmb-team-duo.has-active .gmb-team-half.is-active { flex-grow: 1.55; } /* ------ Tagline pod duetem ------ */ .gmb-team-tagline { margin: clamp(2rem, 3.5vw, 3.5rem) 0 0; font-family: var(--gmb-team-code-font); font-size: var(--gmb-typo-caption); font-weight: 400; line-height: 1.55; letter-spacing: -0.01em; color: var(--gmb-team-muted); } /* ------ Scroll-reveal (jak w about) ------ */ /* Domyślnie WIDOCZNE – sekcja działa nawet bez snippetu JS. */ .gmb-team-duo .gmb-team-half { opacity: 1; transform: none; transition: opacity 0.6s ease, transform 0.6s ease, flex-grow 0.5s cubic-bezier(0.22, 1, 0.36, 1); } /* JS dodaje .is-armed → dopiero wtedy chowamy przed animacją wejścia */ .gmb-team-duo.is-armed .gmb-team-half { opacity: 0; transform: translateY(1.2rem); } .gmb-team-duo.is-armed.is-revealed .gmb-team-half { opacity: 1; transform: translateY(0); } .gmb-team-duo.is-armed.is-revealed .gmb-team-half--right { transition-delay: 0.1s; } /* Elementor – pełna szerokość. Działa automatycznie (przez :has) – NIE trzeba dodawać klas w Elementorze. O szerokości decyduje wyłącznie .gmb-team-container (144rem, padding jak hero). */ .elementor-element.gmb-team-section, .elementor-element.gmb-team-section > .e-con, .elementor-element.gmb-team-section > .e-con > .e-con-inner, .elementor-element.gmb-team-section .elementor-widget-html, .elementor-element.gmb-team-section .elementor-widget-container, .e-con:has(.gmb-team), .e-con-inner:has(.gmb-team), .elementor-section:has(.gmb-team), .elementor-container:has(.gmb-team), .elementor-column:has(.gmb-team), .elementor-widget-wrap:has(.gmb-team), .elementor-widget-html:has(.gmb-team), .elementor-widget-html:has(.gmb-team) .elementor-widget-container { width: 100% !important; max-width: 100% !important; padding-left: 0 !important; padding-right: 0 !important; } /* ------ Mobile: kłody w pionie, oba bio widoczne ------ */ @media (max-width: 767px) { .gmb-team-heading { font-size: var(--gmb-typo-section-mobile, 28px); } .gmb-team-duo, .gmb-team-duo:hover .gmb-team-half:not(:hover), .gmb-team-duo:hover .gmb-team-half:hover { flex-direction: column; flex-grow: 1; } .gmb-team-half { flex: 1 1 auto; } .gmb-team-log { flex: 0 0 1px; align-self: stretch; width: 100%; height: 1px; } /* na mobile od razu pokazujemy bio – brak hovera */ .gmb-team-bio { max-height: 16rem; opacity: 1; transform: none; } } @media (prefers-reduced-motion: reduce) { .gmb-team-half, .gmb-team-beaver, .gmb-team-bio, .gmb-team-card { transition: none !important; } .gmb-team-duo .gmb-team-half { opacity: 1; transform: none; } } /* ============================================================================ gmb-contact.css ============================================================================ */ /* ============================================================ GMB Contact – sekcja kontakt (split: argumenty + formularz) ============================================================ */ .gmb-contact { --gmb-contact-heading-font: var(--gmb-font-heading, "Monument Grotesk", "Helvetica Neue", Arial, sans-serif); --gmb-contact-code-font: var(--gmb-font-mono, "SF Mono", "Cascadia Code", "Consolas", "Liberation Mono", monospace); --gmb-contact-muted: rgba(0, 0, 0, 0.45); --gmb-contact-line: rgba(0, 0, 0, 0.18); --gmb-contact-pad: clamp(2rem, 4vw, 5rem); --gmb-accent-pink: #ff0084; --gmb-accent-blue: #0000fe; --gmb-accent-green: #56876d; position: relative; width: 100%; background: #ffffff; color: #000000; overflow: hidden; font-family: var(--gmb-contact-heading-font); } /* ------ Twarde resety – beton na nadpisania motywu / Elementora ------ */ .gmb-contact, .gmb-contact *, .gmb-contact *::before, .gmb-contact *::after { box-sizing: border-box; } /* anty-przesunięcia: motywy/Elementor potrafią dodawać transformy, marginesy albo podnoszenie elementów na hover – blokujemy to */ .gmb-contact a:hover, .gmb-contact a:focus, .gmb-contact button:hover, .gmb-contact button:focus, .gmb-contact input:hover, .gmb-contact input:focus, .gmb-contact textarea:hover, .gmb-contact textarea:focus, .gmb-contact label:hover { transform: none !important; top: auto !important; box-shadow: none !important; } .gmb-contact-spacer--top { height: clamp(8rem, 14vw, 14.4rem); } .gmb-contact-spacer--bottom { height: clamp(5rem, 8vw, 8rem); } .gmb-contact-container { width: 100%; /* treść = 1600px – równo z hero (.gmb-hero-grid: width:min(100%,1600px)) */ max-width: calc(160rem + 2 * var(--gmb-contact-pad)); margin: 0 auto; padding-left: var(--gmb-contact-pad); padding-right: var(--gmb-contact-pad); box-sizing: border-box; } /* ------ Nagłówek – ten sam rytm co reszta strony ------ */ .gmb-contact-heading-row { display: flex; justify-content: space-between; align-items: baseline; width: 100%; margin: 0 0 clamp(3rem, 5vw, 5rem); padding: 0 0 1.2rem; border-bottom: 1px solid #000000; } .gmb-contact-heading { margin: 0; font-family: var(--gmb-contact-heading-font); font-size: var(--gmb-typo-section, 41px); font-weight: 500; line-height: 1.15; letter-spacing: -0.72px; text-transform: lowercase; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } .gmb-contact-count { font-size: var(--gmb-typo-count); font-weight: 500; letter-spacing: -0.01em; color: var(--gmb-accent-pink); } /* ------ Siatka: argumenty | formularz ------ */ .gmb-contact-grid { display: grid; grid-template-columns: minmax(0, 0.85fr) minmax(0, 1fr); gap: clamp(2.5rem, 5vw, 6rem); align-items: start; } /* ==================================================== LEWA – argumenty + dowód ==================================================== */ .gmb-contact-aside { display: flex; flex-direction: column; gap: clamp(2rem, 3vw, 2.8rem); } .gmb-contact-lead { margin: 0; font-size: var(--gmb-typo-lead); font-weight: 500; line-height: 1.2; letter-spacing: -0.02em; } .gmb-contact-lead b { font-weight: 500; color: var(--gmb-accent-blue); } .gmb-contact-lead-pink { color: var(--gmb-accent-pink); } .gmb-contact-points { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 0.9rem; } .gmb-contact-point { display: flex; gap: 0.8rem; margin: 0; padding: 0; font-family: var(--gmb-contact-code-font); font-size: var(--gmb-typo-mono); line-height: 1.5; letter-spacing: -0.01em; color: rgba(0, 0, 0, 0.78); } .gmb-contact-point-mark { color: var(--gmb-accent-green); flex: 0 0 auto; } .gmb-contact-direct { display: flex; flex-direction: column; gap: 0.4rem; padding-top: clamp(1rem, 2vw, 1.8rem); border-top: 1px solid var(--gmb-contact-line); } .gmb-contact-direct-label { font-family: var(--gmb-contact-code-font); font-size: var(--gmb-typo-mono-s); color: var(--gmb-contact-muted); } .gmb-contact .gmb-contact-direct-link { font-size: var(--gmb-typo-link); font-weight: 500; letter-spacing: -0.02em; color: #000000; text-decoration: none; width: fit-content; transition: color 0.2s ease; } .gmb-contact .gmb-contact-direct-link:hover { color: var(--gmb-accent-blue); } /* --- Mapa: Augustów --- */ .gmb-contact-map { display: flex; flex-direction: column; gap: 0.8rem; } .gmb-contact .gmb-contact-map-iframe { display: block; width: 100%; height: clamp(18rem, 22vw, 24rem); border: 1px solid #000000; filter: grayscale(1) contrast(1.04); transition: filter 0.3s ease; } .gmb-contact .gmb-contact-map:hover .gmb-contact-map-iframe { filter: grayscale(0); } /* Fasada mapy: lekki placeholder, dopiero klik ładuje ciężki embed Google */ .gmb-contact-map-facade { position: relative; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 0.7rem; width: 100%; height: clamp(18rem, 22vw, 24rem); border: 1px solid #000000; background: radial-gradient(circle at 50% 42%, rgba(0, 0, 0, 0.04), transparent 60%), #ededed; color: #0a0a0a; cursor: pointer; overflow: hidden; transition: background-color 0.3s ease; -webkit-appearance: none; appearance: none; } .gmb-contact-map-facade:hover { background-color: #e4e4e4; } .gmb-contact-map-facade-grid { position: absolute; inset: 0; background-image: linear-gradient(rgba(0, 0, 0, 0.07) 1px, transparent 1px), linear-gradient(90deg, rgba(0, 0, 0, 0.07) 1px, transparent 1px); background-size: 28px 28px; pointer-events: none; } .gmb-contact-map-facade-pin { position: relative; color: var(--gmb-accent-green, #0a0a0a); line-height: 0; } .gmb-contact-map-facade-label { position: relative; font-family: var(--gmb-contact-code-font); font-size: var(--gmb-typo-mono-s); letter-spacing: -0.01em; text-transform: lowercase; color: var(--gmb-contact-muted, #444); } .gmb-contact-map-caption { font-family: var(--gmb-contact-code-font); font-size: var(--gmb-typo-mono-s); letter-spacing: -0.01em; color: var(--gmb-contact-muted); } .gmb-contact-map-mark { color: var(--gmb-accent-green); } .gmb-contact-social { display: flex; align-items: center; gap: clamp(0.8rem, 1.4vw, 1.2rem); margin-top: auto; padding-top: clamp(0.6rem, 1vw, 1rem); } .gmb-contact-social-link { display: inline-flex; align-items: center; justify-content: center; width: clamp(3.6rem, 4.5vw, 4.2rem); height: clamp(3.6rem, 4.5vw, 4.2rem); border: 1px solid #000000; border-radius: 999px; color: #000000; text-decoration: none; transition: background-color 0.2s ease, color 0.2s ease, border-color 0.2s ease; } .gmb-contact-social-link:hover, .gmb-contact-social-link:focus-visible { background: var(--gmb-accent-green); border-color: var(--gmb-accent-green); color: #ffffff; } .gmb-contact-social-link svg { display: block; } /* ==================================================== PRAWA – formularz (twarde resety pól!) ==================================================== */ .gmb-contact-form { display: flex; flex-direction: column; gap: clamp(1.6rem, 2.2vw, 2.2rem); margin: 0; width: 100%; } .gmb-contact-field { display: flex; flex-direction: column; gap: 0.7rem; width: 100%; } .gmb-contact .gmb-contact-label { display: block; margin: 0; padding: 0; font-family: var(--gmb-contact-code-font); font-size: var(--gmb-form-label-size, clamp(1.2rem, 1.35vw, 1.4rem)); font-weight: 400; letter-spacing: -0.01em; color: rgba(0, 0, 0, 0.72); text-transform: none; } /* gwiazdka pola wymaganego + dopisek "opcjonalnie" */ .gmb-contact .gmb-contact-req { font-style: normal; color: var(--gmb-accent-pink); } .gmb-contact .gmb-contact-optional { color: var(--gmb-contact-muted); } /* --- Pola tekstowe / textarea --- */ .gmb-contact .gmb-contact-input, .gmb-contact .gmb-contact-input:focus, .gmb-contact .gmb-contact-input:hover, .gmb-contact .gmb-contact-input:active { appearance: none !important; -webkit-appearance: none !important; display: block !important; width: 100% !important; max-width: none !important; min-height: 0 !important; margin: 0 !important; padding: clamp(1.1rem, 1.4vw, 1.4rem) 0 !important; background: transparent !important; border: 0 !important; border-bottom: 1px solid #000000 !important; border-radius: 0 !important; box-shadow: none !important; outline: none !important; font-family: var(--gmb-contact-heading-font) !important; font-size: var(--gmb-form-input-size, clamp(1.6rem, 2vw, 2rem)) !important; font-weight: 500 !important; line-height: 1.3 !important; letter-spacing: -0.02em !important; color: #000000 !important; -webkit-text-fill-color: #000000; transition: border-color 0.2s ease !important; } .gmb-contact .gmb-contact-input::placeholder, .gmb-contact .gmb-contact-textarea::placeholder { color: rgba(0, 0, 0, 0.38) !important; -webkit-text-fill-color: rgba(0, 0, 0, 0.38) !important; opacity: 1 !important; } .gmb-contact .gmb-contact-input:focus { border-bottom-color: var(--gmb-accent-blue) !important; } /* te same stany co reguła pól wyżej – inaczej hover nadpisuje line-height/min-height i textarea zmienia wysokość (skok układu) */ .gmb-contact .gmb-contact-textarea, .gmb-contact .gmb-contact-textarea:hover, .gmb-contact .gmb-contact-textarea:focus, .gmb-contact .gmb-contact-textarea:active { resize: vertical !important; min-height: 8rem !important; line-height: 1.45 !important; } /* pole z błędem */ .gmb-contact .gmb-contact-input.is-invalid { border-bottom-color: var(--gmb-accent-pink) !important; } /* --- Chipsy (radio) --- */ .gmb-contact-chips { display: flex; flex-wrap: wrap; gap: 0.7rem; } .gmb-contact .gmb-contact-chip { position: relative; display: inline-flex; margin: 0; padding: 0; cursor: pointer; } .gmb-contact .gmb-contact-chip input { position: absolute; opacity: 0; width: 1px; height: 1px; margin: 0; pointer-events: none; } .gmb-contact .gmb-contact-chip span { display: inline-block; padding: 0.7rem 1.4rem; border: 1px solid #000000; border-radius: 100px; font-family: var(--gmb-contact-code-font); font-size: var(--gmb-typo-chip); line-height: 1; letter-spacing: -0.01em; color: #000000; background: transparent; transition: background-color 0.18s ease, color 0.18s ease, border-color 0.18s ease; } .gmb-contact .gmb-contact-chip:hover span { background: rgba(0, 0, 0, 0.04); } .gmb-contact .gmb-contact-chip input:checked + span { background: var(--gmb-accent-green); color: #ffffff; border-color: var(--gmb-accent-green); } .gmb-contact .gmb-contact-chip input:focus-visible + span { outline: 2px solid var(--gmb-accent-blue); outline-offset: 2px; } /* --- Honeypot: ukryty dla ludzi --- */ .gmb-contact-hp { position: absolute !important; left: -9999px !important; width: 1px !important; height: 1px !important; overflow: hidden !important; } /* --- Zgoda: regulamin + polityka --- */ .gmb-contact .gmb-contact-consent { display: flex; align-items: flex-start; gap: 1rem; margin: 0; padding: 0; cursor: pointer; } .gmb-contact .gmb-contact-consent input { position: absolute; opacity: 0; width: 1px; height: 1px; margin: 0; pointer-events: none; } .gmb-contact .gmb-contact-consent-box { flex: 0 0 auto; width: 1.8rem; height: 1.8rem; margin-top: 0.15em; border: 1px solid #000000; background: transparent; transition: background-color 0.15s ease; position: relative; } .gmb-contact .gmb-contact-consent input:checked + .gmb-contact-consent-box { background: #000000; } .gmb-contact .gmb-contact-consent input:checked + .gmb-contact-consent-box::after { content: ""; position: absolute; left: 0.55rem; top: 0.2rem; width: 0.45rem; height: 0.9rem; border: solid #ffffff; border-width: 0 2px 2px 0; transform: rotate(45deg); } .gmb-contact .gmb-contact-consent input:focus-visible + .gmb-contact-consent-box { outline: 2px solid var(--gmb-accent-blue); outline-offset: 2px; } .gmb-contact .gmb-contact-consent.is-invalid .gmb-contact-consent-box { border-color: var(--gmb-accent-pink); outline: 1px solid var(--gmb-accent-pink); } .gmb-contact .gmb-contact-consent-text { font-family: var(--gmb-contact-code-font); font-size: var(--gmb-form-legal-size, clamp(1.1rem, 1.25vw, 1.3rem)); line-height: 1.5; letter-spacing: -0.01em; color: rgba(0, 0, 0, 0.72); } .gmb-contact .gmb-contact-consent-text a { color: #000000; text-decoration: underline; text-underline-offset: 0.2em; transition: color 0.15s ease; } .gmb-contact .gmb-contact-consent-text a:hover, .gmb-contact-widget .gmb-contact-consent-text a:hover { color: var(--gmb-accent-green); } /* --- Przycisk wyślij --- */ .gmb-contact .gmb-contact-submit, .gmb-contact .gmb-contact-submit:focus, .gmb-contact .gmb-contact-submit:focus-visible, .gmb-contact .gmb-contact-submit:active { appearance: none !important; -webkit-appearance: none !important; display: inline-flex !important; align-items: center !important; justify-content: center !important; gap: 0.8rem !important; width: 100% !important; max-width: none !important; min-height: 0 !important; margin: 0.4rem 0 0 !important; padding: clamp(1.4rem, 1.8vw, 1.8rem) 2rem !important; background: var(--gmb-accent-pink) !important; border: 1px solid var(--gmb-accent-pink) !important; border-radius: 0 !important; box-shadow: none !important; outline: none !important; cursor: pointer; text-align: center !important; text-transform: lowercase !important; text-decoration: none !important; white-space: nowrap !important; transform: none !important; font-family: var(--gmb-contact-heading-font) !important; font-size: var(--gmb-typo-btn) !important; font-weight: 500 !important; line-height: 1.1 !important; letter-spacing: -0.01em !important; color: #ffffff !important; transition: background-color 0.2s ease, color 0.2s ease, border-color 0.2s ease !important; } .gmb-contact .gmb-contact-submit:hover { transform: none !important; } .gmb-contact .gmb-contact-submit-arrow { transition: transform 0.25s ease; } .gmb-contact .gmb-contact-submit:hover .gmb-contact-submit-arrow { transform: translateX(0.4rem); } /* zablokowany tylko na czas wysyłania */ .gmb-contact .gmb-contact-submit[disabled], .gmb-contact .gmb-contact-submit.is-sending { opacity: 0.6; cursor: progress; pointer-events: none; } /* --- Status + nota --- */ .gmb-contact-status { margin: 0; min-height: 1.4em; font-family: var(--gmb-contact-code-font); font-size: var(--gmb-typo-status); line-height: 1.45; letter-spacing: -0.01em; } .gmb-contact-status.is-ok { color: var(--gmb-accent-green); } .gmb-contact-status.is-err { color: var(--gmb-accent-pink); } .gmb-contact-note { margin: 0; font-family: var(--gmb-contact-code-font); font-size: var(--gmb-typo-mono-xs); line-height: 1.5; color: var(--gmb-contact-muted); } /* Elementor – pełna szerokość. Działa automatycznie (przez :has) – NIE trzeba dodawać klas w Elementorze. */ .elementor-element.gmb-contact-section, .elementor-element.gmb-contact-section > .e-con, .elementor-element.gmb-contact-section > .e-con > .e-con-inner, .elementor-element.gmb-contact-section .elementor-widget-html, .elementor-element.gmb-contact-section .elementor-widget-container, .e-con:has(.gmb-contact), .e-con-inner:has(.gmb-contact), .elementor-section:has(.gmb-contact), .elementor-column:has(.gmb-contact), .elementor-widget-wrap:has(.gmb-contact), .elementor-widget-html:has(.gmb-contact), .elementor-widget-html:has(.gmb-contact) .elementor-widget-container { width: 100% !important; max-width: 100% !important; padding-left: 0 !important; padding-right: 0 !important; } /* ------ Responsywność ------ */ @media (max-width: 900px) { .gmb-contact-grid { grid-template-columns: 1fr; gap: clamp(2.5rem, 6vw, 3.5rem); } } @media (max-width: 767px) { .gmb-contact-heading { font-size: var(--gmb-typo-section-mobile, 28px); } } @media (prefers-reduced-motion: reduce) { .gmb-contact * { transition: none !important; } } /* ============================================================================ Cookie consent – pływający przycisk ponownego otwarcia zgód (Cookie Law Info / CookieYes – ".cky-btn-revisit") Styl GMB: czerń/biel, kanciaste, akcent róż, mono tooltip. ============================================================================ */ .cky-btn-revisit-wrapper { display: flex !important; align-items: center; justify-content: center; width: 46px; height: 46px; padding: 0; background-color: #000000 !important; border: 1px solid #000000; border-radius: 0; box-shadow: 0 6px 20px rgba(0, 0, 0, 0.18); transition: background-color 0.25s ease, transform 0.25s ease, box-shadow 0.25s ease; } .cky-btn-revisit-wrapper:hover { background-color: #ff0084 !important; border-color: #ff0084; transform: translateY(-2px); box-shadow: 0 10px 26px rgba(255, 0, 132, 0.32); } .cky-btn-revisit { display: flex; align-items: center; justify-content: center; width: 100%; height: 100%; margin: 0; padding: 0; background: transparent; border: 0; cursor: pointer; -webkit-tap-highlight-color: transparent; } .cky-btn-revisit img { width: 22px; height: 22px; /* ikona na biało, niezależnie od oryginalnego koloru SVG */ filter: brightness(0) invert(1); } /* Tooltip "Preferencje zgody" – styl mono jak techniczne podpisy */ .cky-btn-revisit-wrapper[data-tooltip]::after { content: attr(data-tooltip); position: absolute; left: calc(100% + 10px); top: 50%; transform: translateY(-50%) translateX(-4px); white-space: nowrap; background: #000000; color: #ffffff; font-family: var(--gmb-font-mono, "SF Mono", "Cascadia Code", "Consolas", monospace); font-size: 11px; letter-spacing: 0.02em; text-transform: uppercase; padding: 6px 9px; border-radius: 0; opacity: 0; pointer-events: none; transition: opacity 0.2s ease, transform 0.2s ease; } .cky-btn-revisit-wrapper:hover[data-tooltip]::after { opacity: 1; transform: translateY(-50%) translateX(0); } @media (prefers-reduced-motion: reduce) { .cky-btn-revisit-wrapper, .cky-btn-revisit-wrapper[data-tooltip]::after { transition: none !important; } } /* ############################################################################ MOTYW webri — DODATKI (ujednolicony rytm sekcji + animacje przewijania) Te reguły są na końcu pliku, więc wygrywają z deklaracjami sekcji powyżej. ############################################################################ */ :root { /* JEDEN rytm odstępów dla całej strony głównej */ --section-gap: clamp(64px, 9vw, 140px); } /* Ujednolicenie odstępów: każda sekcja dostaje równy odstęp GÓRNY, dolne odstępy zerujemy, żeby nie sumowały się sąsiednie spacery. */ [class*="-spacer--top"] { height: var(--section-gap) !important; } [class*="-spacer--bottom"] { height: 0 !important; } /* Wrapper frontu — pełna szerokość, bez marginesów Elementora */ .gmb-front { width: 100%; overflow-x: clip; } /* ---------- Smooth-scroll (Lenis) ---------- */ html.lenis, html.lenis body { height: auto; } .lenis.lenis-smooth { scroll-behavior: auto !important; } .lenis.lenis-smooth [data-lenis-prevent] { overscroll-behavior: contain; } .lenis.lenis-stopped { overflow: hidden; } /* ---------- Wskaźnik postępu + indeks sekcji ---------- */ .gmb-scrollbar { position: fixed; top: 0; left: 0; width: 100%; height: 3px; z-index: 2147483000; pointer-events: none; background: transparent; } .gmb-scrollbar-fill { display: block; height: 100%; width: 100%; transform: scaleX(0); transform-origin: 0 50%; background: #ff0084; will-change: transform; } .gmb-secindex { position: fixed; right: clamp(12px, 2vw, 28px); bottom: clamp(12px, 2vw, 28px); z-index: 2147482000; pointer-events: none; font-family: var(--gmb-font-mono, "SF Mono", "Consolas", monospace); font-size: 12px; letter-spacing: 0.04em; color: #000; mix-blend-mode: difference; opacity: 0; transform: translateY(8px); transition: opacity 0.4s ease, transform 0.4s ease; } .gmb-secindex.is-visible { opacity: 0.85; transform: translateY(0); } .gmb-secindex b { font-weight: 500; } /* ---------- Wejścia sekcji (GSAP reveal) ---------- Stan startowy ustawiamy TYLKO gdy JS z animacjami jest aktywny (klasa html.gmb-motion). Bez JS / z reduced-motion treść jest od razu widoczna. */ html.gmb-motion .gmb-reveal { opacity: 0; transform: translateY(48px); transition: opacity 0.8s cubic-bezier(0.22, 1, 0.36, 1), transform 0.8s cubic-bezier(0.22, 1, 0.36, 1); will-change: transform, opacity; } html.gmb-motion .gmb-reveal.is-in { opacity: 1; /* WAŻNE: transform:none (nie translate(0)) — żeby wrapper NIE tworzył kontekstu dla position:fixed (modal zniżki na całym ekranie). */ transform: none; } /* Maska nagłówków sekcji */ html.gmb-motion .gmb-mask { clip-path: inset(0 0 100% 0); transition: clip-path 0.85s cubic-bezier(0.22, 1, 0.36, 1); will-change: clip-path; } html.gmb-motion .gmb-mask.is-in { clip-path: inset(0 0 0% 0); } @media (prefers-reduced-motion: reduce) { html.gmb-motion .gmb-reveal, html.gmb-motion .gmb-mask { opacity: 1 !important; transform: none !important; clip-path: none !important; } } /* ---------- Podstrony (regulamin / polityka / 404 / listy) ---------- */ .webri-main { width: 100%; background: #ffffff; color: #0a0a0a; padding-top: clamp(110px, 16vh, 180px); padding-bottom: clamp(64px, 10vw, 120px); font-family: var(--gmb-font-heading, "Monument Grotesk", Arial, sans-serif); } .webri-page-container { width: 100%; max-width: 760px; margin: 0 auto; padding-inline: clamp(20px, 5vw, 32px); box-sizing: border-box; } /* ten sam rytm szerokości co sekcje gmb-* na stronie głównej (1600px + pad) */ .webri-page-container--wide { --webri-section-pad: clamp(2rem, 4vw, 5rem); max-width: calc(160rem + 2 * var(--webri-section-pad)); padding-inline: var(--webri-section-pad); } .webri-page-eyebrow { font-family: var(--gmb-font-mono, "SF Mono", monospace); font-size: 13px; letter-spacing: 0.04em; text-transform: lowercase; color: #ff0084; margin: 0 0 12px; } .webri-page-crumb { display: flex; flex-wrap: wrap; align-items: baseline; column-gap: clamp(0.55em, 1.5vw, 0.9em); color: #ff0084; } .webri-page-crumb a { color: #000000; text-decoration: none; transition: opacity 0.18s ease; } .webri-page-crumb a:hover, .webri-page-crumb a:focus-visible { opacity: 0.72; } .webri-page-crumb-current, .webri-page-crumb-sep { color: #ff0084; } .webri-page-crumb-sep { opacity: 0.85; } .webri-page-eyebrow-link { color: inherit; text-decoration: none; } .webri-page-eyebrow-link:hover, .webri-page-eyebrow-link:focus-visible { text-decoration: underline; text-underline-offset: 3px; } /* Dostępność / SEO — ukryte wizualnie, czytelne dla botów i czytników ekranu */ .webri-visually-hidden, .screen-reader-text { position: absolute !important; width: 1px !important; height: 1px !important; padding: 0 !important; margin: -1px !important; overflow: hidden !important; clip: rect(0, 0, 0, 0) !important; clip-path: inset(50%) !important; white-space: nowrap !important; border: 0 !important; } .webri-page-title { font-size: clamp(30px, 6vw, 52px); line-height: 1.05; letter-spacing: -0.01em; text-transform: lowercase; margin: 0 0 10px; } .webri-page-meta { font-family: var(--gmb-font-mono, "SF Mono", monospace); font-size: 13px; color: #6a6a6a; margin: 0 0 clamp(28px, 5vw, 48px); } .webri-page-content { font-size: clamp(15px, 1.6vw, 17px); line-height: 1.7; color: #2a2a2a; } .webri-page-content h2 { font-size: clamp(20px, 3vw, 26px); line-height: 1.2; letter-spacing: -0.01em; text-transform: lowercase; margin: clamp(28px, 4vw, 40px) 0 12px; } .webri-page-content h3 { font-size: clamp(17px, 2.2vw, 20px); margin: 24px 0 10px; } .webri-page-content p { margin: 0 0 16px; } .webri-page-content ul, .webri-page-content ol { margin: 0 0 16px; padding-left: 22px; } .webri-page-content li { margin: 0 0 8px; } .webri-page-content small { display: block; margin-top: 4px; font-size: 0.85em; line-height: 1.5; color: #5a5a5a; } .webri-page-content a { color: #ff0084; text-decoration: underline; text-underline-offset: 2px; } .webri-page-content img { max-width: 100%; height: auto; } .webri-404 .webri-page-container { text-align: center; } .webri-page-container--soon { text-align: center; padding-top: clamp(4rem, 12vw, 10rem); padding-bottom: clamp(4rem, 12vw, 10rem); } .webri-en-soon-title { text-transform: lowercase; } .webri-en-soon-lead { max-width: 36em; margin: clamp(1.2rem, 3vw, 1.8rem) auto clamp(2rem, 4vw, 2.8rem); font-size: clamp(15px, 1.8vw, 18px); line-height: 1.65; color: #4a4a4a; text-transform: lowercase; } .webri-en-soon-actions { margin: 0; } .webri-404-lead { font-size: clamp(15px, 1.8vw, 18px); color: #4a4a4a; margin: 12px 0 28px; } .webri-btn { display: inline-flex; align-items: center; gap: 8px; background: #ff0084; color: #ffffff; font-size: 16px; font-weight: 500; letter-spacing: -0.01em; text-transform: lowercase; text-decoration: none; padding: 13px 28px; border-radius: 999px; transition: transform 0.2s ease, background 0.2s ease; } .webri-btn:hover { transform: translateY(-1px); background: #e00074; } .webri-post-list { display: grid; gap: clamp(18px, 3vw, 28px); } .webri-post-card-title { font-size: clamp(20px, 3vw, 26px); margin: 0 0 8px; } .webri-post-card-title a { color: inherit; text-decoration: none; } .webri-post-card-title a:hover { color: #ff0084; } /* ==================================================== MATERIAŁY — lista wpisów z filtracją ==================================================== */ .webri-free-intro { font-size: clamp(15px, 1.8vw, 18px); line-height: 1.6; color: #3a3a3a; max-width: 60ch; margin: 0 0 clamp(28px, 4vw, 44px); } /* pasek filtrów (kategorie) */ .webri-free-filters { display: flex; flex-wrap: wrap; gap: 10px; margin: 0 0 clamp(26px, 4vw, 40px); padding: 0 0 clamp(20px, 3vw, 28px); border-bottom: 1px solid rgba(0, 0, 0, 0.14); } .webri-free-filter { appearance: none; -webkit-appearance: none; margin: 0; padding: 9px 18px; background: #ffffff; border: 1px solid #000000; border-radius: 100px; font-family: var(--gmb-font-mono, "SF Mono", monospace); font-size: 13px; letter-spacing: -0.01em; text-transform: lowercase; color: #000000; cursor: pointer; transition: background-color 0.18s ease, color 0.18s ease, border-color 0.18s ease; } .webri-free-filter:hover { background: rgba(0, 0, 0, 0.05); } .webri-free-filter.is-active { background: var(--gmb-accent-green, #56876d); border-color: var(--gmb-accent-green, #56876d); color: #ffffff; } .webri-free-filter-count { opacity: 0.65; margin-left: 6px; } /* siatka kart — archiwa materiałów i realizacji: 3 kolumny */ .webri-free-grid { display: grid; grid-template-columns: 1fr; } .webri-materials .webri-free-grid, .webri-works .webri-free-grid { --webri-archive-gap: clamp(16px, 2.4vw, 26px); gap: var(--webri-archive-gap); align-items: stretch; } @media (min-width: 768px) { .webri-materials .webri-free-grid, .webri-works .webri-free-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } } @media (min-width: 1100px) { .webri-materials .webri-free-grid, .webri-works .webri-free-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } } .webri-materials .webri-free-grid > .webri-free-card, .webri-works .webri-free-grid > .webri-work-card { margin: 0; min-height: 0; align-self: stretch; } .webri-archive-pagination { margin: clamp(2.8rem, 5vw, 4rem) 0 0; padding: clamp(1.6rem, 3vw, 2.4rem) 0 0; border-top: 1px solid rgba(0, 0, 0, 0.14); font-family: var(--gmb-font-mono, "SF Mono", monospace); font-size: 13px; text-transform: lowercase; } .webri-archive-pagination .page-numbers, .webri-archive-pagination ul.page-numbers { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 0.5rem 0.75rem; margin: 0; padding: 0; list-style: none; } .webri-archive-pagination .page-numbers li { margin: 0; padding: 0; list-style: none; } .webri-archive-pagination a.page-numbers, .webri-archive-pagination button.page-numbers, .webri-archive-pagination span.page-numbers { display: inline-flex; align-items: center; justify-content: center; min-width: 2.4rem; min-height: 2.4rem; padding: 0.35rem 0.75rem; border: 1px solid #000000; color: #000000; text-decoration: none; background: #ffffff; font: inherit; cursor: pointer; transition: background-color 0.18s ease, color 0.18s ease, border-color 0.18s ease; } .webri-archive-pagination a.page-numbers:hover, .webri-archive-pagination a.page-numbers:focus-visible, .webri-archive-pagination button.page-numbers:hover:not(:disabled), .webri-archive-pagination button.page-numbers:focus-visible:not(:disabled) { background: #000000; border-color: #000000; color: #ffffff; } .webri-archive-pagination button.page-numbers:disabled { opacity: 0.4; cursor: default; } .webri-archive-pagination .page-numbers.current { background: var(--webri-pink); border-color: var(--webri-pink); color: #ffffff; } .webri-archive-pagination .page-numbers.dots { border-color: transparent; min-width: auto; padding-inline: 0.25rem; } .webri-archive-pagination span.page-numbers.dots:hover, .webri-archive-pagination span.page-numbers.dots:focus-visible { background: transparent; color: #000000; } .webri-free-card { --webri-card-pad: clamp(20px, 2.6vw, 28px); display: flex; flex-direction: column; gap: 12px; padding: var(--webri-card-pad); overflow: hidden; background: #ffffff; border: 1px solid #000000; transition: box-shadow 0.2s ease; } .webri-free-card.is-hidden { display: none; } .webri-free-card:hover { box-shadow: 0 14px 34px rgba(0, 0, 0, 0.1); } .webri-materials .webri-free-grid > .webri-free-card:hover, .webri-works .webri-free-grid > .webri-work-card:hover { transform: none; } .webri-free-card-cat { align-self: flex-start; font-family: var(--gmb-font-mono, "SF Mono", monospace); font-size: 12px; letter-spacing: 0.02em; text-transform: lowercase; color: var(--gmb-accent-green, #56876d); } .webri-free-card-title { font-size: clamp(20px, 2.6vw, 25px); line-height: 1.15; letter-spacing: -0.01em; text-transform: lowercase; margin: 0; } .webri-free-card-title a { color: inherit; text-decoration: none; } .webri-free-card-title a:hover { color: var(--gmb-accent-green, #56876d); } .webri-free-card-excerpt { font-size: 15px; line-height: 1.6; color: #4a4a4a; margin: 0; flex: 1 1 auto; overflow: hidden; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 4; } .webri-free-card-foot { margin-top: auto; padding-top: 6px; display: flex; align-items: center; gap: 14px; } .webri-free-download { display: inline-flex; align-items: center; gap: 8px; padding: 11px 22px; background: #000000; color: #ffffff; border: 1px solid #000000; border-radius: 100px; font-family: var(--gmb-font-mono, "SF Mono", monospace); font-size: 13px; letter-spacing: -0.01em; text-transform: lowercase; text-decoration: none; transition: background-color 0.18s ease, color 0.18s ease; } .webri-free-download:hover { background: var(--gmb-accent-green, #56876d); border-color: var(--gmb-accent-green, #56876d); color: #ffffff; } .webri-single-download { margin: clamp(28px, 4vw, 40px) 0 0; padding: clamp(24px, 3vw, 32px) 0 0; border-top: 1px solid rgba(0, 0, 0, 0.14); scroll-margin-top: calc(var(--gmb-header-h, 88px) + 20px); } .webri-single-download-label { margin: 0 0 14px; font-family: var(--gmb-font-mono, "SF Mono", monospace); font-size: 13px; letter-spacing: 0.04em; text-transform: lowercase; color: var(--gmb-accent-green, #56876d); } .webri-free-download--large { padding: 14px 28px; font-size: 14px; } .webri-free-card-more, .webri-work-card-more { display: inline-flex; align-items: center; justify-content: center; gap: 6px; padding: 11px 22px; background: #ffffff; color: #000000; border: 1px solid #000000; border-radius: 100px; font-family: var(--gmb-font-mono, "SF Mono", monospace); font-size: 13px; font-weight: 500; letter-spacing: -0.01em; text-transform: lowercase; text-decoration: none; transition: background-color 0.18s ease, color 0.18s ease, border-color 0.18s ease; } .webri-free-card-more:hover, .webri-free-card-more:focus-visible, .webri-work-card-more:hover, .webri-work-card-more:focus-visible { background: #000000; border-color: #000000; color: #ffffff; } .webri-free-empty { font-family: var(--gmb-font-mono, "SF Mono", monospace); font-size: 14px; color: #6a6a6a; } .webri-materials-soon { margin: clamp(2.8rem, 6vw, 4.8rem) 0 0; font-family: var(--gmb-font-heading, "Monument Grotesk", sans-serif); font-size: clamp(2.2rem, 4.5vw, 3.4rem); font-weight: 500; line-height: 1.15; letter-spacing: -0.03em; text-transform: lowercase; color: #000000; } /* single: przycisk pobrania + powrót */ .webri-single-actions { display: flex; flex-wrap: wrap; gap: 14px; margin: clamp(28px, 4vw, 40px) 0 0; padding: clamp(24px, 3vw, 32px) 0 0; border-top: 1px solid rgba(0, 0, 0, 0.14); } /* realizacje — karta archiwum */ .webri-work-card-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 0.2rem 0.45rem; margin: 0; font-family: var(--gmb-font-mono, "SF Mono", monospace); font-size: 12px; line-height: 1.35; letter-spacing: -0.01em; text-transform: lowercase; color: rgba(0, 0, 0, 0.52); } .webri-work-card-meta-sep { opacity: 0.45; } .webri-work-card-meta-item--date { color: #56876d !important; font-weight: 600; } .webri-work-card-meta-item--time { color: #0000fe !important; font-weight: 600; } .webri-work-card-meta-item--author { color: #ff0084 !important; font-weight: 600; } .webri-work-card-more { margin-top: auto; align-self: flex-start; } /* case study — pojedynczy wpis */ .webri-case-head { margin-bottom: 0; } .webri-case-head .webri-page-title { max-width: none; font-size: clamp(3.4rem, 6.5vw, 6.2rem); line-height: 1.02; letter-spacing: -0.03em; margin-bottom: 0; } .webri-case-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 0.25rem 0.5rem; margin: clamp(2.4rem, 4vw, 3.2rem) 0; font-family: var(--gmb-font-mono, "SF Mono", monospace); font-size: 13px; line-height: 1.35; letter-spacing: -0.01em; text-transform: lowercase; } .webri-case-content { margin-top: 0; min-width: 0; font-size: clamp(1.65rem, 1.8vw, 1.85rem); line-height: 1.72; overflow-wrap: anywhere; } .webri-case-content figure, .webri-case-content .wp-block-video, .webri-case-content .wp-block-embed, .webri-case-content .wp-block-image { max-width: 100%; } .webri-case-content video { display: block; width: 100% !important; max-width: 100% !important; height: auto !important; } .webri-case-content img { max-width: 100%; height: auto; } .webri-case-content .wp-block-embed__wrapper { max-width: 100%; } .webri-case-content .wp-block-embed__wrapper iframe, .webri-case-content iframe { display: block; width: 100%; max-width: 100%; border: 0; } .webri-case-content .wp-block-embed.is-type-video .wp-block-embed__wrapper, .webri-case-content .wp-block-embed.wp-block-embed-video .wp-block-embed__wrapper { position: relative; aspect-ratio: 16 / 9; height: auto; } .webri-case-content .wp-block-embed.is-type-video .wp-block-embed__wrapper iframe, .webri-case-content .wp-block-embed.wp-block-embed-video .wp-block-embed__wrapper iframe { position: absolute; inset: 0; width: 100%; height: 100%; } .webri-case-content > :first-child { margin-top: 0; } .webri-case-content h2, .webri-case-content h2.webri-case-h2 { display: flex; align-items: flex-start; gap: 0.55em; margin: clamp(2.8rem, 4.5vw, 4rem) 0 1.4rem; font-family: var(--gmb-font-heading, "Monument Grotesk", sans-serif); font-size: clamp(2.4rem, 3.4vw, 3.2rem); font-weight: 500; line-height: 1.15; letter-spacing: -0.03em; text-transform: lowercase; } .webri-case-h2::before { content: "⁎"; flex: 0 0 auto; font-size: 0.9em; line-height: 1.2; transform: translateY(0.04em); } .webri-case-h2--star-green::before { color: #56876d !important; } .webri-case-h2--star-blue::before { color: #0000fe !important; } .webri-case-h2--star-pink::before { color: #ff0084 !important; } .webri-case-meta-sep { color: rgba(0, 0, 0, 0.35); } .webri-case-meta-item--author { color: #ff0084 !important; font-weight: 600; } .webri-case-meta-item--date { color: #56876d !important; font-weight: 600; } .webri-case-meta-item--time { color: #0000fe !important; font-weight: 600; } .webri-case-screen { margin: clamp(2rem, 3.5vw, 3rem) 0; padding: 0; border: 1px solid rgba(0, 0, 0, 0.14); background: #fafafa; } .webri-case-screen-ph { display: flex; align-items: center; justify-content: center; min-height: clamp(14rem, 28vw, 24rem); background: linear-gradient(135deg, rgba(0, 0, 0, 0.03) 25%, transparent 25%) -1rem 0, linear-gradient(225deg, rgba(0, 0, 0, 0.03) 25%, transparent 25%) -1rem 0, linear-gradient(315deg, rgba(0, 0, 0, 0.03) 25%, transparent 25%), linear-gradient(45deg, rgba(0, 0, 0, 0.03) 25%, transparent 25%); background-size: 2rem 2rem; background-color: #f3f3f3; } .webri-case-screen-label { display: inline-block; padding: 0.5rem 1rem; border: 1px solid rgba(0, 0, 0, 0.2); border-radius: 100px; font-family: var(--gmb-font-mono, "SF Mono", monospace); font-size: 12px; letter-spacing: 0.04em; text-transform: uppercase; color: rgba(0, 0, 0, 0.45); background: #ffffff; } .webri-case-screen-cap { margin: 0; padding: 1rem 1.4rem 1.2rem; font-family: var(--gmb-font-mono, "SF Mono", monospace); font-size: 12px; line-height: 1.45; letter-spacing: -0.01em; text-transform: lowercase; color: rgba(0, 0, 0, 0.55); border-top: 1px solid rgba(0, 0, 0, 0.08); } .webri-case-tags { margin: clamp(2.8rem, 5vw, 4rem) 0 0; padding: clamp(2rem, 3vw, 2.8rem) 0 0; border-top: 1px solid rgba(0, 0, 0, 0.14); } .webri-case-tags-label { margin: 0 0 1rem; font-family: var(--gmb-font-mono, "SF Mono", monospace); font-size: 12px; letter-spacing: 0.02em; text-transform: lowercase; color: rgba(0, 0, 0, 0.45); } .webri-case-tags-list { display: flex; flex-wrap: wrap; gap: 10px; margin: 0; padding: 0; list-style: none; } .webri-case-tag { display: inline-block; padding: 9px 18px; border: 1px solid #000000; border-radius: 100px; font-family: var(--gmb-font-mono, "SF Mono", monospace); font-size: 13px; letter-spacing: -0.01em; text-transform: lowercase; color: #000000; background: #ffffff; } /* case study — layout z sidebarem */ .webri-main--case { overflow: visible; } .webri-case-layout { display: grid; grid-template-columns: minmax(0, 1fr) minmax(28rem, 36rem); gap: clamp(2.4rem, 4vw, 5rem); align-items: start; overflow: visible; } .webri-case-main { min-width: 0; } .webri-case-sidebar { position: sticky; top: calc(var(--gmb-header-h, 7.2rem) + 1.6rem); align-self: start; z-index: 2; } .webri-case-sidebar.is-lenis-sidebar { position: relative; top: auto; } .webri-case-sidebar-sticky { position: relative; } .webri-case-more-btn { display: inline-flex; align-items: center; justify-content: space-between; gap: 1rem; width: 100%; max-width: 52rem; padding: 1.35rem 1.6rem; border: 1px solid var(--webri-pink); background: var(--webri-pink); color: #ffffff; font-family: var(--gmb-font-heading, "Monument Grotesk", sans-serif); font-size: clamp(1.5rem, 1.8vw, 1.85rem); font-weight: 500; letter-spacing: -0.02em; line-height: 1.1; text-transform: lowercase; text-decoration: none; box-sizing: border-box; transition: background-color 0.18s ease, border-color 0.18s ease, transform 0.18s ease; } .webri-case-more-btn:hover, .webri-case-more-btn:focus-visible { transform: translateY(-2px); } .webri-case-more-btn-arrow { font-size: 1.35em; line-height: 1; } .webri-single-actions:has(.webri-case-more-btn) { margin-top: clamp(3rem, 5vw, 4.5rem); padding-top: clamp(2rem, 3vw, 2.8rem); border-top: 1px solid rgba(0, 0, 0, 0.14); } .webri-case-toc { padding: 1.4rem 1.5rem; border: 1px solid rgba(0, 0, 0, 0.14); background: #ffffff; } .webri-case-toc-label { margin: 0 0 1rem; font-family: var(--gmb-font-mono, "SF Mono", monospace); font-size: 12px; letter-spacing: 0.02em; text-transform: lowercase; color: #56876d !important; font-weight: 600; } .webri-case-toc-list { margin: 0; padding: 0; list-style: none; } .webri-case-toc-item { margin: 0; padding: 0; } .webri-case-toc-item + .webri-case-toc-item { margin-top: 0.15rem; } .webri-case-toc-item--h3 { padding-left: 1.35rem; } .webri-case-toc-item a { display: flex; align-items: baseline; gap: 0.55rem; padding: 0.5rem 0; font-family: var(--gmb-font-mono, "SF Mono", monospace); font-size: 13px; line-height: 1.35; letter-spacing: -0.01em; text-transform: lowercase; text-decoration: none; color: rgba(0, 0, 0, 0.62); transition: color 0.15s ease; } .webri-case-toc-mark { flex: 0 0 auto; font-size: 12px; line-height: 1; font-weight: 700; } .webri-case-toc-mark--green { color: #56876d !important; } .webri-case-toc-mark--blue { color: #0000fe !important; } .webri-case-toc-mark--pink { color: #ff0084 !important; } .webri-case-toc-mark--sub { color: rgba(0, 0, 0, 0.28) !important; font-weight: 400; } .webri-case-toc-text { min-width: 0; } .webri-case-toc-item a:hover .webri-case-toc-text, .webri-case-toc-item a.is-active .webri-case-toc-text { color: #000000; } .webri-case-toc-item a:hover .webri-case-toc-mark--green, .webri-case-toc-item a.is-active .webri-case-toc-mark--green { color: #56876d !important; } .webri-case-toc-item a:hover .webri-case-toc-mark--blue, .webri-case-toc-item a.is-active .webri-case-toc-mark--blue { color: #0000fe !important; } .webri-case-toc-item a:hover .webri-case-toc-mark--pink, .webri-case-toc-item a.is-active .webri-case-toc-mark--pink { color: #ff0084 !important; } .webri-case-toc-item a.is-active .webri-case-toc-text { font-weight: 600; } .webri-case-facts { display: flex; flex-wrap: wrap; gap: 0.8rem; margin: 1.2rem 0 0; padding: 0; list-style: none; } .webri-case-fact { display: inline-flex; align-items: baseline; gap: 0.45rem; padding: 0.55rem 1rem; border: 1px solid #000000; border-radius: 100px; font-family: var(--gmb-font-mono, "SF Mono", monospace); font-size: 13px; text-transform: lowercase; } .webri-case-fact-k { opacity: 0.55; } .webri-case-fact--year { color: var(--gmb-accent-pink); } .webri-case-fact--duration { color: var(--gmb-accent-green); } .webri-case-fact--city { color: var(--gmb-accent-blue); } /* widget kontaktu w sidebarze case study */ .gmb-contact-widget { padding: clamp(1.6rem, 2vw, 2rem) clamp(1.5rem, 2vw, 1.8rem); border: 2px solid #000000; background: #ffffff; } .gmb-contact-widget--case { background: linear-gradient(160deg, rgba(255, 0, 132, 0.04) 0%, #ffffff 42%); } .gmb-contact-widget-human { display: flex; align-items: center; gap: clamp(10px, 1.6vw, 14px); margin: 0 0 1.4rem; padding: 0 0 1.2rem; border-bottom: 1px solid rgba(0, 0, 0, 0.1); } .gmb-contact-widget-avatar { position: relative; flex-shrink: 0; width: 64px; height: 64px; } .gmb-contact-widget-avatar-img { display: block; width: 100%; height: 100%; object-fit: contain; } .gmb-contact-widget-avatar-img.is-inverted { filter: invert(1); } .gmb-contact-widget-live { position: absolute; right: 0; bottom: 0; width: 13px; height: 13px; border: 2px solid #ffffff; border-radius: 50%; background: var(--gmb-sales-green-bright, #6ecf8a); box-shadow: 0 0 0 0 rgba(110, 207, 138, 0.55); animation: gmb-contact-live-pulse 2s ease-in-out infinite; } .gmb-contact-widget-human-body { display: flex; flex-direction: column; gap: 2px; min-width: 0; } .gmb-contact-widget-status { font-family: var(--gmb-font-mono, "SF Mono", monospace); font-size: 11px; letter-spacing: 0.04em; text-transform: uppercase; color: var(--gmb-accent-green); font-weight: 600; } .gmb-contact-widget-name { font-family: var(--gmb-font-heading, "Monument Grotesk", sans-serif); font-size: clamp(1.9rem, 2.2vw, 2.2rem); font-weight: 500; line-height: 1.1; letter-spacing: -0.03em; text-transform: lowercase; } .gmb-contact-widget-role { font-family: var(--gmb-font-mono, "SF Mono", monospace); font-size: 12px; line-height: 1.35; color: rgba(0, 0, 0, 0.52); text-transform: lowercase; } .gmb-contact-widget-heading { margin: 0 0 0.5rem; font-family: var(--gmb-font-heading, "Monument Grotesk", sans-serif); font-size: clamp(2rem, 2.4vw, 2.4rem); font-weight: 500; line-height: 1.12; letter-spacing: -0.03em; text-transform: lowercase; } .gmb-contact-widget-lead { margin: 0 0 1.4rem; font-family: var(--gmb-font-mono, "SF Mono", monospace); font-size: 13px; line-height: 1.45; text-transform: lowercase; color: rgba(0, 0, 0, 0.55); } .gmb-contact-form--widget { display: flex; flex-direction: column; gap: 0; margin: 0; width: 100%; } .gmb-contact-widget--case .gmb-contact-form--widget { gap: clamp(1rem, 1.5vw, 1.3rem); } .gmb-contact-widget--case .gmb-contact-field { margin-bottom: 0; } .gmb-contact-widget--case .gmb-contact-consent { margin-top: clamp(0.35rem, 0.8vw, 0.65rem); } .gmb-contact-widget--case .gmb-contact-submit { margin-top: clamp(0.85rem, 1.4vw, 1.2rem) !important; padding: 1.25rem 1.4rem !important; font-size: clamp(1.5rem, 1.7vw, 1.65rem) !important; } /* CTA formularza w treści case study */ .webri-case-cta-inline { margin: clamp(2.8rem, 5vw, 4.2rem) 0; clear: both; } .webri-case-content .webri-case-cta-inline { width: 100%; } .gmb-contact-widget--horizontal { display: grid; grid-template-columns: minmax(0, 34%) minmax(0, 1fr); gap: clamp(1.6rem, 3vw, 2.8rem); align-items: start; } .gmb-contact-widget--horizontal .gmb-contact-widget-intro { min-width: 0; } .gmb-contact-widget--horizontal .gmb-contact-widget-human { margin-bottom: 1rem; padding-bottom: 1rem; } .gmb-contact-widget--horizontal .gmb-contact-widget-lead { margin-bottom: 0; } .gmb-contact-widget--horizontal .gmb-contact-form--widget { display: grid; grid-template-columns: 1fr 1fr; column-gap: clamp(1rem, 1.5vw, 1.2rem); row-gap: clamp(0.85rem, 1.2vw, 1rem); align-content: start; } .gmb-contact-widget--horizontal .gmb-contact-field--wide { grid-column: 1 / -1; } .gmb-contact-widget--horizontal .gmb-contact-hp { display: none; } .gmb-contact-widget--horizontal .gmb-contact-consent { margin-top: 0; } .gmb-contact-widget--horizontal .gmb-contact-submit { margin-top: 0 !important; } @media (max-width: 1023px) { .gmb-contact-widget--horizontal { grid-template-columns: 1fr; gap: 1.4rem; } .gmb-contact-widget--horizontal .gmb-contact-form--widget { grid-template-columns: 1fr; } .gmb-contact-widget--horizontal .gmb-contact-field--half { grid-column: auto; } } .webri-case-form-inline { display: none; } .webri-case-toc--lead { margin: 0 0 clamp(1.6rem, 3vw, 2.4rem); } .webri-case-main > .webri-back-link { margin-bottom: clamp(1.2rem, 2vw, 1.8rem); } @media (max-width: 1023px) { .webri-case-layout { grid-template-columns: 1fr; } .webri-case-sidebar { display: none; } .webri-case-cta-inline { display: none; } .webri-case-form-inline { display: block; margin: clamp(2.4rem, 4.5vw, 3.6rem) 0 clamp(2rem, 3.5vw, 3rem); } .webri-case-form-aside { display: none; } } .webri-back-link { display: inline-flex; align-items: center; gap: 8px; font-family: var(--gmb-font-mono, "SF Mono", monospace); font-size: 13px; text-transform: lowercase; color: #000000; text-decoration: none; margin: 0 0 clamp(20px, 3vw, 28px); } .webri-back-link:hover { color: var(--gmb-accent-green, #56876d); } /* ==================================================== Szerokie podstrony (materiały / kontakt / wpisy) — jak homepage ==================================================== */ .webri-main--wide { padding-top: calc(var(--gmb-header-h, 88px) + clamp(2.4rem, 5vw, 4.8rem)); } /* kontakt jako osobna podstrona */ .webri-contact-page { padding-bottom: 0; } .webri-contact-page .gmb-contact-spacer--top { display: none; } .webri-contact-page .gmb-contact { padding-top: 0; } /* miniatury na liście materiałów i realizacji */ .webri-free-card-thumb { display: block; margin: calc(-1 * var(--webri-card-pad)) calc(-1 * var(--webri-card-pad)) 0; line-height: 0; overflow: hidden; border-bottom: 1px solid #000000; } .webri-free-card-img { display: block; width: 100%; height: auto; aspect-ratio: 16 / 8; object-fit: cover; object-position: top center; transition: transform 0.35s ease; } .webri-free-card-img--center { object-position: center center; } .webri-free-card:hover .webri-free-card-img { transform: scale(1.03); } /* ==================================================== Kontakt sprzedażowy (/kontakt/) ==================================================== */ .gmb-contact--sales { --gmb-sales-green: #56876d; --gmb-sales-green-bright: #6ecf8a; --gmb-sales-panel-bg: #f7f7f5; --gmb-sales-form-bg: #fafafa; } .gmb-contact--sales .gmb-contact-container { display: flex; flex-direction: column; gap: clamp(2.4rem, 4vw, 4rem); } /* ------ Hero ------ */ .gmb-contact-sales-hero { display: flex; flex-direction: column; gap: clamp(1rem, 2vw, 1.6rem); } .gmb-contact-sales-eyebrow { margin: 0; font-family: var(--gmb-contact-code-font); font-size: var(--gmb-typo-mono-s, 1.3rem); letter-spacing: -0.01em; text-transform: lowercase; color: var(--gmb-contact-muted); } .gmb-contact-sales-hero-row { display: flex; align-items: flex-start; justify-content: space-between; gap: clamp(1.2rem, 3vw, 3rem); } .gmb-contact-sales-title { margin: 0; max-width: 18ch; font-size: clamp(3.2rem, 5.5vw, 5.6rem); font-weight: 500; letter-spacing: -0.03em; line-height: 0.95; text-transform: lowercase; } @media (min-width: 768px) { .gmb-contact-sales-title { max-width: none; font-size: clamp(2.6rem, 3.6vw, 4.4rem); white-space: nowrap; } .gmb-contact-sales-title br { display: none; } } .gmb-contact-sales-badge { flex-shrink: 0; display: flex; align-items: baseline; gap: 2px; padding: clamp(10px, 1.5vw, 14px) clamp(14px, 2vw, 20px); background: var(--gmb-accent-pink); color: #ffffff; line-height: 1; } .gmb-contact-sales-badge-num { font-size: clamp(36px, 5vw, 52px); font-weight: 500; letter-spacing: -0.04em; } .gmb-contact-sales-badge-unit { font-family: var(--gmb-contact-code-font); font-size: clamp(16px, 2vw, 20px); font-weight: 500; text-transform: lowercase; } .gmb-contact-sales-lead { margin: 0; max-width: 52ch; font-size: var(--gmb-typo-lead); font-weight: 500; line-height: 1.25; letter-spacing: -0.02em; } .gmb-contact-sales-lead b { color: var(--gmb-accent-blue); font-weight: 500; } .gmb-contact-sales-pills { display: flex; flex-wrap: wrap; gap: 10px; margin: 0; padding: 0; list-style: none; } .gmb-contact-sales-pills li { margin: 0; padding: 8px 14px; border: 1px solid #000000; font-family: var(--gmb-contact-code-font); font-size: 13px; line-height: 1.2; text-transform: lowercase; } .gmb-contact-sales-pills strong { font-weight: 500; } .gmb-contact-sales-pill--green strong { color: var(--gmb-sales-green); } .gmb-contact-sales-pill--blue strong { color: var(--gmb-accent-blue); } .gmb-contact-sales-pill--pink strong { color: var(--gmb-accent-pink); } /* ------ Layout: lewa kolumna | formularz ------ */ .gmb-contact-sales-layout { display: grid; grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr); gap: clamp(2rem, 4vw, 5rem); align-items: start; } .gmb-contact-sales-side { display: flex; flex-direction: column; gap: clamp(1.4rem, 2.5vw, 2rem); } /* ------ Panel „co dostajesz” ------ */ .gmb-contact-sales-panel { padding: clamp(1.6rem, 2.4vw, 2.2rem); background: var(--gmb-sales-panel-bg); border: 1px solid var(--gmb-contact-line); } .gmb-contact-sales-panel-title { margin: 0 0 1.2rem; font-size: clamp(16px, 1.8vw, 18px); font-weight: 500; letter-spacing: -0.02em; text-transform: lowercase; } .gmb-contact-points--sales { gap: 0.75rem; } /* ------ Karta człowieka (bóbr + online) ------ */ .gmb-contact-sales-human { display: flex; align-items: center; gap: clamp(12px, 2vw, 18px); padding: clamp(14px, 2vw, 18px) clamp(16px, 2.2vw, 22px); border: 2px solid #000000; background: #ffffff; color: #000000; text-decoration: none; transition: background 0.2s ease, color 0.2s ease, transform 0.2s ease; } .gmb-contact-sales-human:hover, .gmb-contact-sales-human:focus-visible { background: #f3fbf6; color: #000000; border-color: var(--gmb-sales-green); transform: translateY(-2px); box-shadow: 0 8px 24px rgba(86, 135, 109, 0.14); } .gmb-contact-sales-human:hover .gmb-contact-sales-human-phone, .gmb-contact-sales-human:focus-visible .gmb-contact-sales-human-phone { color: var(--gmb-accent-blue); } .gmb-contact-sales-human-avatar { position: relative; flex-shrink: 0; width: 72px; height: 72px; } .gmb-contact-sales-human-img { display: block; width: 100%; height: 100%; object-fit: contain; } .gmb-contact-sales-live { position: absolute; right: 2px; bottom: 2px; width: 14px; height: 14px; border: 2px solid #ffffff; border-radius: 50%; background: var(--gmb-sales-green-bright); box-shadow: 0 0 0 0 rgba(110, 207, 138, 0.55); animation: gmb-contact-live-pulse 2s ease-in-out infinite; } .gmb-contact-sales-human:hover .gmb-contact-sales-live, .gmb-contact-sales-human:focus-visible .gmb-contact-sales-live { border-color: #f3fbf6; } @keyframes gmb-contact-live-pulse { 0%, 100% { box-shadow: 0 0 0 0 rgba(110, 207, 138, 0.55); } 50% { box-shadow: 0 0 0 8px rgba(110, 207, 138, 0); } } .gmb-contact-sales-human-body { display: flex; flex-direction: column; gap: 2px; min-width: 0; flex: 1; } .gmb-contact-sales-human-status { font-family: var(--gmb-contact-code-font); font-size: 11px; letter-spacing: 0.04em; text-transform: uppercase; color: var(--gmb-sales-green); } .gmb-contact-sales-human:hover .gmb-contact-sales-human-status, .gmb-contact-sales-human:focus-visible .gmb-contact-sales-human-status { color: var(--gmb-sales-green-bright); } .gmb-contact-sales-human-name { font-size: clamp(22px, 2.8vw, 28px); font-weight: 500; letter-spacing: -0.03em; line-height: 1.1; text-transform: lowercase; } .gmb-contact-sales-human-role { font-family: var(--gmb-contact-code-font); font-size: 12px; line-height: 1.35; color: var(--gmb-contact-muted); } .gmb-contact-sales-human:hover .gmb-contact-sales-human-role, .gmb-contact-sales-human:focus-visible .gmb-contact-sales-human-role { color: var(--gmb-contact-muted); } .gmb-contact-sales-human-phone { margin-top: 4px; font-size: clamp(15px, 1.8vw, 17px); font-weight: 500; letter-spacing: -0.01em; color: var(--gmb-accent-blue); transition: color 0.2s ease; } .gmb-contact-sales-human-cta { flex-shrink: 0; font-size: 22px; line-height: 1; opacity: 0.4; transition: opacity 0.2s ease, transform 0.2s ease; } .gmb-contact-sales-human:hover .gmb-contact-sales-human-cta, .gmb-contact-sales-human:focus-visible .gmb-contact-sales-human-cta { opacity: 1; transform: translateX(4px); } /* ------ Snippet wizytówki Google ------ */ .gmb-gbp-snippet { --gmb-gbp-font: var(--gmb-font-heading, "Monument Grotesk", "Helvetica Neue", Arial, sans-serif); border: 1px solid #000000; border-radius: 0; background: #ffffff; overflow: hidden; font-family: var(--gmb-gbp-font); } .gmb-gbp-snippet, .gmb-gbp-snippet * { font-family: var(--gmb-gbp-font); } .gmb-gbp-snippet-card { display: block; padding: clamp(1.2rem, 2vw, 1.5rem); text-decoration: none; color: inherit; border-bottom: 1px solid rgba(0, 0, 0, 0.12); transition: background 0.2s ease; } .gmb-gbp-snippet-card:hover, .gmb-gbp-snippet-card:focus-visible { background: var(--gmb-sales-panel-bg, #f7f7f5); } .gmb-gbp-snippet-top { display: flex; align-items: center; gap: 8px; margin-bottom: 10px; } .gmb-gbp-snippet-google { flex-shrink: 0; } .gmb-gbp-snippet-source { font-size: 12px; font-weight: 500; color: var(--gmb-contact-muted, rgba(0, 0, 0, 0.45)); text-transform: lowercase; letter-spacing: -0.01em; } .gmb-gbp-snippet-name { margin: 0 0 4px; font-size: clamp(17px, 2vw, 20px); font-weight: 500; letter-spacing: -0.02em; line-height: 1.2; text-transform: lowercase; color: #000000; } .gmb-gbp-snippet-meta { margin: 0 0 12px; font-size: 13px; line-height: 1.35; color: var(--gmb-contact-muted, rgba(0, 0, 0, 0.45)); text-transform: lowercase; } .gmb-gbp-snippet-rating { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; } .gmb-gbp-snippet-score { font-size: 22px; font-weight: 500; letter-spacing: -0.02em; line-height: 1; color: #000000; } .gmb-gbp-snippet-stars { font-size: 14px; letter-spacing: 1px; color: #f4b400; line-height: 1; } .gmb-gbp-snippet-count { font-size: 13px; color: var(--gmb-contact-muted, rgba(0, 0, 0, 0.45)); text-transform: lowercase; } .gmb-gbp-snippet-reviews { display: flex; flex-direction: column; gap: 0; padding: 0 clamp(1.2rem, 2vw, 1.5rem); max-height: 420px; overflow-y: auto; scrollbar-width: thin; } .gmb-gbp-snippet-review { padding: 14px 0; border-bottom: 1px solid rgba(0, 0, 0, 0.1); } .gmb-gbp-snippet-review:last-child { border-bottom: none; } .gmb-gbp-snippet-review-head { display: flex; align-items: flex-start; gap: 10px; margin-bottom: 8px; } .gmb-gbp-snippet-avatar { flex-shrink: 0; display: grid; place-items: center; width: 34px; height: 34px; border-radius: 50%; border: 1px solid #000000; background: #ffffff; color: #000000; font-size: 13px; font-weight: 500; line-height: 1; text-transform: uppercase; } .gmb-gbp-snippet-review-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 8px; min-width: 0; } .gmb-gbp-snippet-author { font-size: 14px; font-weight: 500; color: #000000; text-transform: lowercase; } .gmb-gbp-snippet-source-tag { font-size: 12px; color: var(--gmb-contact-muted, rgba(0, 0, 0, 0.45)); text-transform: lowercase; } .gmb-gbp-snippet-review-stars { font-size: 11px; letter-spacing: 1px; color: #f4b400; line-height: 1; } .gmb-gbp-snippet-ago { flex-basis: 100%; font-size: 12px; color: var(--gmb-contact-muted, rgba(0, 0, 0, 0.45)); text-transform: lowercase; } .gmb-gbp-snippet-review-text { margin: 0; padding-left: 44px; font-size: 14px; line-height: 1.45; letter-spacing: -0.01em; color: #000000; } .gmb-gbp-snippet-cta { display: flex; align-items: center; justify-content: center; gap: 6px; padding: 12px clamp(1.2rem, 2vw, 1.5rem); border-top: 1px solid #000000; background: #ffffff; font-size: 13px; font-weight: 500; text-decoration: none; text-transform: lowercase; letter-spacing: -0.01em; color: #000000; transition: background 0.2s ease, color 0.2s ease; } .gmb-gbp-snippet-cta:hover, .gmb-gbp-snippet-cta:focus-visible { background: var(--gmb-accent-pink); color: #ffffff; } @media (max-width: 767px) { .gmb-gbp-snippet-review-text { padding-left: 0; } } .gmb-contact-social--sales { margin-top: 0; } /* ------ Formularz w ramce ------ */ .gmb-contact-sales-form-wrap { position: sticky; top: clamp(80px, 12vh, 120px); padding: clamp(1.8rem, 2.8vw, 2.6rem); background: var(--gmb-sales-form-bg); border: 2px solid #000000; } .gmb-contact-sales-form-label { margin: 0 0 1.4rem; padding-bottom: 0.8rem; border-bottom: 1px solid var(--gmb-contact-line); font-family: var(--gmb-contact-code-font); font-size: var(--gmb-typo-mono-s, 1.3rem); letter-spacing: -0.01em; text-transform: lowercase; color: var(--gmb-contact-muted); } .gmb-contact-select { appearance: none; -webkit-appearance: none; cursor: pointer; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8' fill='none'%3E%3Cpath d='M1 1.5L6 6.5L11 1.5' stroke='%23000' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 0 center; padding-right: 24px; } .gmb-contact-submit--sales { background: var(--webri-pink); } @media (max-width: 1024px) { .gmb-contact-sales-layout { grid-template-columns: 1fr; gap: clamp(2.4rem, 5vw, 3.5rem); } .gmb-contact-sales-side { display: contents; } .gmb-contact-sales-human { order: -2; } .gmb-contact-sales-form-wrap { position: static; order: -1; } .gmb-contact-sales-panel { order: 0; } .gmb-gbp-snippet { order: 1; } .gmb-contact-social--sales { order: 2; } } @media (max-width: 767px) { .gmb-contact-sales-hero-row { flex-direction: column; align-items: flex-start; } .gmb-contact-sales-title { max-width: none; font-size: var(--gmb-typo-section-mobile, 28px); white-space: normal; } } @media (prefers-reduced-motion: reduce) { .gmb-contact-sales-live { animation: none; } .gmb-contact-sales-human:hover, .gmb-contact-sales-human:focus-visible { transform: none; } } /* ============================================================================ gmb-materials-home — wyróżnione materiały na stronie głównej ============================================================================ */ .gmb-materials-home { --gmb-materials-home-pad: clamp(2rem, 4vw, 5rem); --gmb-materials-home-heading-font: var(--gmb-font-heading, "Monument Grotesk", "Helvetica Neue", Arial, sans-serif); --gmb-accent-pink: #ff0084; --gmb-accent-green: #56876d; position: relative; width: 100%; background: #ffffff; color: #000000; overflow: hidden; } .gmb-materials-home-spacer--top { height: clamp(6rem, 10vw, 10rem); } .gmb-materials-home-spacer--bottom { height: clamp(4rem, 7vw, 7rem); } .gmb-materials-home-container { width: 100%; max-width: calc(160rem + 2 * var(--gmb-materials-home-pad)); margin: 0 auto; padding-left: var(--gmb-materials-home-pad); padding-right: var(--gmb-materials-home-pad); box-sizing: border-box; } .gmb-materials-home-heading-row { display: flex; justify-content: space-between; align-items: baseline; gap: 1.5rem; margin: 0 0 clamp(2.4rem, 4vw, 3.6rem); padding: 0 0 1.2rem; border-bottom: 1px solid #000000; } .gmb-materials-home-heading { margin: 0; font-family: var(--gmb-materials-home-heading-font); font-size: var(--gmb-typo-section, clamp(3.2rem, 5vw, 5.2rem)); font-weight: 500; letter-spacing: -0.03em; line-height: 1; text-transform: lowercase; } .gmb-materials-home-all { flex-shrink: 0; font-family: var(--gmb-font-mono, "SF Mono", monospace); font-size: var(--gmb-typo-mono-s, 1.3rem); letter-spacing: -0.01em; text-transform: lowercase; text-decoration: none; color: #000000; transition: color 0.2s ease; } .gmb-materials-home-all:hover, .gmb-materials-home-all:focus-visible { color: var(--gmb-accent-pink); } .gmb-materials-home-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(1.6rem, 2.4vw, 2.6rem); } .gmb-materials-home-card { --gmb-mh-card-pad: clamp(1.8rem, 2.4vw, 2.4rem); display: flex; flex-direction: column; gap: 1rem; padding: var(--gmb-mh-card-pad); overflow: hidden; background: #ffffff; border: 1px solid #000000; transition: transform 0.2s ease, box-shadow 0.2s ease; } .gmb-materials-home-card:hover { transform: translateY(-3px); box-shadow: 0 1.4rem 3.4rem rgba(0, 0, 0, 0.1); } .gmb-materials-home-thumb { display: block; margin: calc(-1 * var(--gmb-mh-card-pad)) calc(-1 * var(--gmb-mh-card-pad)) 0.4rem; line-height: 0; overflow: hidden; border-bottom: 1px solid #000000; } .gmb-materials-home-img { display: block; width: 100%; height: auto; aspect-ratio: 16 / 8; object-fit: cover; object-position: top center; transition: transform 0.35s ease; } .gmb-materials-home-img--center { object-position: center center; } .gmb-materials-home-card:hover .gmb-materials-home-img { transform: scale(1.03); } .gmb-materials-home-cat { font-family: var(--gmb-font-mono, "SF Mono", monospace); font-size: var(--gmb-typo-mono-s, 1.2rem); letter-spacing: 0.02em; text-transform: lowercase; color: var(--gmb-accent-green); } .gmb-materials-home-title { margin: 0; font-size: clamp(2rem, 2.6vw, 2.5rem); line-height: 1.15; letter-spacing: -0.01em; text-transform: lowercase; } .gmb-materials-home-title a { color: inherit; text-decoration: none; } .gmb-materials-home-title a:hover { color: var(--gmb-accent-green); } .gmb-materials-home-excerpt { margin: 0; font-size: var(--gmb-typo-body, 1.5rem); line-height: 1.55; color: #4a4a4a; } .gmb-materials-home-card .webri-free-card-foot { margin-top: auto; } .gmb-materials-home-more { margin-top: auto; padding-top: 0.4rem; font-family: var(--gmb-font-mono, "SF Mono", monospace); font-size: var(--gmb-typo-mono-s, 1.3rem); text-transform: lowercase; color: #000000; text-decoration: underline; text-underline-offset: 3px; } .gmb-materials-home-more:hover { color: var(--gmb-accent-green); } .gmb-materials-home-empty { font-family: var(--gmb-font-mono, "SF Mono", monospace); font-size: var(--gmb-typo-mono-s, 1.4rem); color: #6a6a6a; } .gmb-materials-home-empty a { color: #000000; } @media (max-width: 1023px) { .gmb-materials-home-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } } @media (max-width: 767px) { .gmb-materials-home-heading { font-size: var(--gmb-typo-section-mobile, 28px); } .gmb-materials-home-grid { grid-template-columns: 1fr; } }